Hello,

Recently resolved this issue in our instance. So, the colors are being picked in the Widget's CSS by default, and you cannot edit this. However, cloning the entire widget isn't necessary.

Go to the Widget Instances table and find the instance of the Online Check-In widget that you are using. Once there, you can use the CSS field on this instance to override the widget's non-editable CSS styling. 

Here is the style sheet that we replaced it with. This is largely the same as the default - the only key difference is that the header and sub-header text colors are now just #000000 (black) instead of referring to gray and gray-light on the widget's CSS styling.

$header: #000000;
$sub-header: #000000;
$border: $table-border-color;
$panel-border-info: $alert-info-border;
$brand-primary-darker: #165C53 !default;
$header-bg: $navbar-default-bg;
.nav-tabs {
  background-color: $header-bg;
}
.checkin {
  width:100%;
  max-width: 992px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}
.selectUser{
  padding-bottom:10px;
}
.userOnbehalf {
  padding-top: 14px;
  height:36px;
  width:100%;
  max-width:336px;
}
.queue-location-header {
  border-bottom: 1px solid $border;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 30.5px;
  height: 68px;
  .queue-name {
    font-size:18px;
    color:$header;
    h3 {
      font-size:18px;
      margin-bottom: 0;
      margin-top: 10px;
    }
  }
}
.waitTimeMsg {
  font-size: 14px;
}
.customWaitTime {
  padding-bottom: 14px;
}
.location {
  max-width:992px;
  min-height:161px;
  border: 1px solid $border;
  padding-left:30.5px;
  padding-bottom: 25px;
}
.location-loading {
  max-width:992px;
  border: 1px solid $border;
  padding-top: 25px;
  padding-left:30.5px;
  padding-bottom: 25px;
}
.main-frame {
  border: 1px solid $border;
  border-radius:4px;
  max-width:992px;
  width:100%;
  margin-bottom:20px;
}
a.location-change {
  padding:10px;
  font-size:14px;
  max-width:93px;
  height:18px;
}
.location-picker {
  padding-top:10px;
  padding-bottom:41px;
  max-width:336px;
  width:100%;
  height:36px;
}
.change-loc-picker {
  height:36px;
  width:100%;
  max-width:336px;
}
a.cancel-location-change {
  padding:6px;
  font-size:14px;
  max-width:93px;
  height:18px;
}
.selectLocMsg {
  word-wrap: break-word;
  padding-top:19px;
  color:$header;
  opacity:100%;
  font-size:18px;
}
.submit-btn-wrapper {
  height:35px;
  margin-top:16px;
}
.section-panel {
  margin:30.5px;
}
.form-panel {
  margin-top: 16px;
}
.form-container {
  padding: 8px;
}
.tab-link {
  color: $brand-primary-darker;
}
.apptmnt-tab {
  border: 0;
  border-bottom: 3px solid $brand-primary-darker;
  background-color: transparent;
}
.display-picker {
  display: flex;
  margin-top:3px;
}
.default-option {
  color:#CCCCCC;
  font-size:14px;
}
.reasons {
  color: $sub-header;
  font-size:14px;
}
.form-header {
  font-size:18px;
  color:$header;
  h4 {
    font-size:18px;
    margin-top: 0;
    margin-bottom: 10px;
    display: inline-block;
  }
}
span {
  color:$sub-header;
}
}
.apt-msg{
  font-size:14px;
  color:$sub-header;
  margin-bottom:-3px;
}
.reason-msg {
  margin-top:11px;
  font-size:14px;
  color:$sub-header;
}
.onBehalfReason-msg {
  padding-top:14px;
  margin-top:14px;
  font-size:14px;
  margin-bottom: -18px;
  color:$sub-header;
}
.appointment-wrapper {
  max-width: 336px;
}
.appointment-schedule {
  margin-top:0px !important;
}
.select-wrapper {
  max-width:336px;
  color:#CCCCCC;
  height:36px;
}
.other-wrapper {
  height:78px;
  max-width:336px;
  resize:none;
}
.wu_header {
  font-size: 1.40em;
  max-width: 512px;
}
.welcome-msg {
  word-wrap: break-word;
  font-size:30px;
  color:$header;
  width:100%;
}
.info-msg {
  word-wrap: break-word
    height:45px;
  color:$sub-header;
  padding-bottom: 25px
}
.search-title {
  color:$header;
}
.locationMsg {
  color:$sub-header;
  size:14px;
  max-width:52px;
  height:18px;
}
.position-msg {
  font-size:18px;
  color:$header;
}
.leave-btn {
  min-width:118px;
  height:35px;
  border: 1px solid $btn-default-border;
  background: $btn-primary-color;
  margin-bottom: 15px;
}
.panel-wrapper {
  border-left:1px solid $border;
  border-right:1px solid $border;
  border-top:1px solid $border;
  border-bottom: 0px solid $border;
  background-color: $header-bg;
  height:40px;
}
.search-results {
  border:0;
  max-width:992.5px;
}
.leave-msg {
  font-size:14px;
  color:$sub-header;
  text-align:center;
}
.list-wrapper {
  padding:8px,8px;
  margin-bottom:0 !important;
  border-top:0px solid $border!important;
  border-left:1px solid $border !important;
  border-right:1px solid $border !important;
  border-bottom:1px solid $border !important;
  &:first-child{border-top:1px solid $border !important}
}
.form-input {
  padding-left: 8px;
}
.header {
  color: $header;
}
.semi-bold {
  font-weight: 600;
}
.queue-position {
  font-size: 80px;
  line-height: 100px;
  font-weight: 700;
}
.serviced-banner {
  margin-top: 65px;
  margin-bottom: 65px;
  padding: 0 16px;
  text-align: center;
}
.h4 {
  color: $header;
}
.h5 {
  color: $sub-header;
}
.top-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .queue-container {
    margin-top: 30.5px;
  }
  .queue-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .username {
      max-width: 205px;
      word-break: break-all;
      display: inline-block;
    }
    .currently-served {
      min-width: 150px;
      flex-grow: 1;
    }
    .up-next {
      flex-grow: 2;
      .user-item {
        display: flex;
        flex-direction: row;
        .username {
          vertical-align: top;
        }
        .number {
          vertical-align: top;
          display: inline-block;
        }
        .time {
          display: inline;
          min-width: 80px;
          .icon-calendar {
            width: 12px;
            margin-right: 4px;
          }
        }
      }
    }
  }
  .location-section {
    flex-grow: 1;
    min-width: 280px;
    flex-basis: 40%;
    line-height: 20px;
    border-top: solid 1px $border;
    margin-top: -1px;
    box-sizing: border-box;
    .location-content-landscape {
      .padding-left {
        padding-left: 32px;
      }
      .padding-bottom {
        padding-bottom: 32px;
      }
      .padding-right {
        padding-right: 32px;
      }
      .schedule-summary {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: start;
        .image-container {
          max-width: 360px;
          width: 100%;
          min-width: 296px;
          padding-bottom: 32px;
          flex-basis: 40%;
          img {
            width: 100%;
          }
        }
      }
      .schedule-info {
        max-width: 360px;
        min-width: 296px;
        flex-basis: 60%;
      }
    }
    .location-content {
      margin: 32px;
      max-width: 520px;
      p.location-description {
        word-wrap: break-word;
      }
      .image-container {
        min-width: 214px;
        img {
          width: 100%;
        }
        margin: 24px auto;
      }
    }
  }
}
.padding-left {
  padding-left: 8px;
}
.padding-right {
  padding-right: 8px;
}
.queue-header {
  display: flex;
  flex-direction:row;
}
.left-section {
  flex-basis: 60%;
  flex-grow: 1;
  border-right: solid 1px $border;
  margin-right: -1px;
}
.left-container {
  flex-basis: 45%;
}
.right-container {
  flex-basis: 55%;
  text-align: right;
}
hr {
  border-color: $border;
}
.current-user {
  background: rgba($brand-primary, 0.2);
}
.user-item {
  padding-left: 8px;
  padding-right: 8px;
  line-height: 20px;
  .left-container {
    flex-basis: 75%;
    padding-right: 8px;
  }
  .right-container {
    flex-basis: 25%;
  }
}
.schedule-day {
  margin-bottom: 2px;
}
.schedule-entry {
  display: flex;
  .day-tag {
    flex-basis: 30%;
    padding-right: 8px;
  }
  .schedule-tag {
    flex-basis: 70%;
  }
}
.panel-body {
  p {
    margin-bottom: 0;
  }
}
.panel-info {
  border-left: solid 10px $panel-border-info;
}
.close-panel {
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -7px;
  color: $panel-border-warning;
  cursor: pointer;
}
.alert-info {
  margin-bottom: 24px;
  position: relative;
  p {
    padding-right: 26px;
  }
  .close-alert {
    position: absolute;
    right: 16px;
    &:before {
      font-size: 10px;
    }
    margin-top: -10px;
    top: 50%;
    cursor: pointer;
  }
}
.reason-text {
  margin-top: -16px;
}
/** CSS Overrides for appointment widget code **/
#appt-reselect-widget {
  .panel-heading {
    display: none;
  }
  .panel {
    box-shadow: none !important;
    border: none !important;
    .panel-body {
      padding: 0px;
      .appointment-duration {
        > span {
          display: flex;
          flex-direction: column-reverse;
          align-items: flex-start;
          .pull-right {
            display: inline-block;
            border: 1px solid $btn-default-border;
            border-radius: 3px;
            padding: 6px 12px;
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}
#appt-select-widget {
  span.fa, label {
    display: none;
  }
}