/* ========================================================================== 
    GENERAL STYLES
  ========================================================================== */
body.chp {
  color: #434343;
}
.chp h1 {
  color: #008382;
}
.chp h2 {
  color: #555555; 
}
.chp h3 {
  color: #555555; 
}
.chp p {
  color: #666; 
}
#page-content {
    background-color: #FFF;
}

/* Logo */
.w-logo {
    height: 100px;
    width: 100px;
}


/* Nav menu */
.chp #page-nav .k-link {
    color: #008382;
    padding: 10px 13px;
}

/* Nav menu hover */
.chp #page-nav .k-menu > .k-state-hover, 
.chp #page-nav .k-menu > .k-state-active, 
.chp #page-nav .k-menu > .k-state-focused, 
.chp #page-nav .k-menu > .k-item > .k-link.k-state-hover, 
.chp #page-nav .k-menu > .k-item > .k-link.k-state-active, 
.chp #page-nav .k-menu > .k-item > .k-link.k-state-focused, 
.chp #page-nav .k-widget.k-menu-horizontal > .k-item.k-state-hover > .k-link {
    background-color: #fff;
    color: #008382;
    border-bottom: 1px solid #008382;
}
.chp #page-nav .k-state-selected:link, 
.chp #page-nav .k-state-selected:visited {
    background-color: #fff;
    color: #008382;
    border-bottom: 2px solid #008382;
}

.chp a, .chp a:visited, .chp .link {
    color: #008382;
}

/* Banner text - banner image is set in the content box*/
/* Removing the relative position declaration so content widget can be displayed absolutely, relative to the browser window */
.w-dashboard .widget-dock.js-default-position {
    position: initial;
}
.hero-text-alt {
position: absolute;
    width: auto;
    top: 125px;
    float: left;
    left: 0;
    width: 100%;
    background: url(/Shared/customers/Covid/Images/page_banner.png) no-repeat;
    background-size: cover;
    height: 30em;
    background-position-y: bottom;
}
.hero-text-wrapper {
    width: 58%;
    text-align: center;
    padding-top: 9em;
    padding-left: 1em;
}
h1.hero-sub {
    color: #FFF;
    font-size: 5em;
    font-weight: lighter;
}
h2.hero-header {
    color: #FAC47C;
    font-weight: bold;
}
.chp .default_aspx .w-dashboard {
    padding-top: 30em;
}

/* Footer */
.chp #page-footer {
    background: url(/Shared/customers/Covid/Images/page_footer.png) no-repeat;
    background-size: cover;
    background-position-y: center;
    color: white;
    text-align: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 70px 0;
}

/* ========================================================================== 
    COMPASS STYLES
  ========================================================================== */
.chp .w-dashboard .widget-content {
    border: none;
    padding: 0;
}
.chp .wc-shadow--light {
    -webkit-box-shadow: 0px 0px 72px -19px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 72px -19px rgba(0, 0, 0, 0.2);
    box-shadow: none;
}
.w-coachingPrograms .program-compass_v2.wc-infection-program .program.selected .title:before {
/*.w-coachingPrograms .wc-infection-protection .program.selected .title:before {*/
    content: url("/Shared/Templates/WellnessCompass/images/infection-detail-icon.png");
    display: block;
    margin-top: 20px;
    width: 40px;
    margin-left: auto;
    margin-right: auto; 
}
.chp .w-coachingPrograms .program-compass_v2 .program, 
.chp .w-coachingPrograms .program-compass_v2 .program.selected {
    background-color: #008382;
    color: #FFF;
}
.chp .w-coachingPrograms .program-compass_v2 .program:hover{
    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    transition: .3s;
    transform: scale(1.05,1.05);
}
.chp .w-coachingPrograms .program-compass_v2 .program .description {
    max-width: 80%;
    margin: 0 auto;
    padding-top: 1em;
}
.chp .w-coachingPrograms .program-compass_v2 h3 {
    margin-top: 25px;
    color: #fff;
    font-weight: bold;
}

/* Compass tab strips */
.chp .compassProgram .k-tabstrip .session-tab.k-item.k-state-active h2 {
    color: #008382;
}
.chp .compassProgram .k-tabstrip .session-tab.k-item h2 {
    color: #007575;
}
.chp .compassProgram .k-tabstrip .session-tab.k-item.k-state-active {
    color: #008382;
    border-bottom: 5px solid #008382;
}
.chp .compassProgram .k-tabstrip .k-item {
    border: 2px solid #D7EEEF;
    background-color: #D7EEEF;
    color: #007575;
}
.chp .compassProgram .k-tabstrip .k-item:hover {
    border: 2px solid #007575;
    color: #007575;
    background-color: #FFF;
}
.chp .compassProgram .k-tabstrip .session-tab.k-item:hover h2 {
    color: #007575;
}
.chp .compassProgram .k-tabstrip .k-content {
    padding: 1em;
}


/* General program styles */
.chp .compassProgram .quiz .questions {
    background-color: #D7EEEF;
    border-radius: 0.4em;
}
.chp .compassProgram .quiz .header h3 {
    color: #007575;
    line-height: 24px;
}
.chp .compassProgram .widget .form h2.title {
    color: #008382;
}
.chp .compassProgram .quiz .question ul.km-listview li input[type="radio"] + label {
    color: #A4499E;
    border: 1px solid #A4499E;
}
.chp .compassProgram .quiz .question ul.km-listview li input[type="radio"] + label:hover {
    background-color: #642760;
}
.chp .compassProgram .quiz .question ul.km-listview li input[type="radio"]:checked + label {
    background-color: #642760;
}
.w-compass-program .w-tracker .imgUp,
.w-compass-program .w-tracker .imgUpDis,
.w-compass-program .w-tracker .imgDown,
.w-compass-program .w-tracker .imgDownDis {
  border: 1px solid #642760;
  cursor: pointer; 
}
.w-compass-program .w-tracker .imgUp {
  background: #642760 url("/Shared/Templates/CHPv1/images/tracker-arrow-up.png") center no-repeat; 
}
.w-compass-program .w-tracker .imgUpDis {
  background: #642760 url("/Shared/Templates/CHPv1/images/tracker-arrow-up-dis.png") center no-repeat; 
}
.w-compass-program .w-tracker .imgDown {
  background: #642760 url("/Shared/Templates/CHPv1/images/tracker-arrow-down.png") center no-repeat; 
}
.w-compass-program .w-tracker .imgDownDis {
  background: #642760 url("/Shared/Templates/CHPv1/images/tracker-arrow-down-dis.png") center no-repeat; 
}
.chp .w-tracker .counter div.divItemCount {
    height: auto;
    width: 50px;
    padding: 10px 0;
    margin: 0 0 0 20px;
    text-align: center;
    font-size: 38px;
    font-size: 2.375rem;
    font-weight: 400;
    line-height: 38px;
    color: #fff;
    border: 1px solid #008382;
    background-color: #008382;
    background-image: none;
}
.totpoints {
    display: none;
}

/* Forms */
.form-web .section {
    border: none;
}
.form-touch .section .header h2 {
    color: #555555;
    font-weight: bold;
}

/* Video */
.chp .compassProgram .video .description {
    color: #666;
    border: 2px solid rgba(215, 238, 239, 0.2);
    background-color: rgba(215, 238, 239, 0.2);
    width: auto;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    font-size: inherit;
    font-weight: initial;
    padding: 0;
    margin-bottom: 15px;
    min-height: 60px;
    line-height: 60px;
    padding: 0 1.7em;
    /*background-image: none;*/
    box-shadow: 0px 3px 4.5px rgba(0,0,0,0.2);
    transition: .3s;
}
.chp .compassProgram .video .description:hover {
    color: #fff;
    background-color: #008382;
}
.chp .mediaplayer {
    margin: 0 auto;
}
.chp .mediaviewed {
    margin-top: 1em;
    color: #008382;
}

/* Footer */
.chp #page-footer {
    max-width: 100%;
}

/* Logged out styling */
.loggedOut #content {
    position: relative;
    margin-top: 3em;
    max-width: 50em;
    margin: 0 auto;
    top: 5em;
    padding: 1em;
}

.chp .default_aspx.loggedOut .w-dashboard {
    padding-top: 6em;
    background: none;
    min-height: unset;
}

.loggedOut #content h3 {
    /* important necessary to override inline style */
    margin-left: 0!important;
}

/* Important CSS to hide the wellbeing123 coaching program widget - because we have JS that auto opens the compass program widget in JS tab */
/* This was done for PLATFORM-285403 */
article.coachingProgramsWidget.dashboardWidget {
    display: none!important;
}
/* Hide the return to programs link - because we obviously have nothing to return to */
.chp .compassProgram .return-to-programs {
    display: none;
}
/* ========================================================================== 
    MOBILE STYLES
  ========================================================================== */
/*@media screen and (max-width: 1012px){ */
/*      .chp .default_aspx.loggedOut .w-dashboard {*/
/*        background: url(/shared/Templates/CHPv1/images/logged-out-photo-c.jpg) left no-repeat;*/
/*        background-size: auto;*/
/*        background-position-x: center;*/
/*        min-height: 380px;      */
/*        padding-top: 10em;*/
        /* padding-left: 5em; */
/*    }*/
    
/*    .loggedOut #content {*/
/*        padding-left: 1em;*/
/*        max-width: 37em;*/
/*    }*/
/*}*/

/* Importants to override h2 size in smaller media query in theme styles */
@media screen and (max-width: 980px){
    .chp .w-logo img {
        /*max-width: 59%;*/
        margin: 0!important; 
    }
    .chp .dashboardContent {
        padding: 0;
    }
    .chp .default_aspx .w-dashboard {
        padding-top: 5em;
    }
    .hero-text-alt {
    background-size: 180%;
    height: 8em;
    background-position-x: left;
    background-position-y: top;
    }
    .hero-text-wrapper {
        width: 100%;
        text-align: center;
        padding: 0;
    }
    /*h2.hero-header {*/
    /*    margin: 0;*/
    /*    line-height: 4em;*/
    /*    font-size: 1.3rem!important;*/
    /*}*/
    /*h1.hero-sub {*/
    /*    display: none;*/
    /*}*/
        h1.hero-sub {
        display: block; 
        font-size: 2.7em;
    }
    .hero-text-wrapper {
        top: 3em;
        position: relative;
    }
    #calWrapper {
        top: 3.5em;
    }
}
/* Overwritting legacy css */
@media (max-width: 480px){
    #page-header .w-logo {
        text-align: left;
        /*width: 9em;*/
    }
}

/* 13-07-202 */
.chp .w-dashboard .dashboardWidget .widget-header {
    font-size: 1.2em;
    color: #7A7A7A;
}

.chp .w-content h2 {
    color: #555555;
    font-size: 1.5625rem;
    font-weight: 300;
    color: #008382;
    /* padding: 15px; */
}

.chp .default_aspx .w-dashboard .dashboardWidget .mediaplayer .k-button {
    color: #642760;
}

.k-mediaplayer .k-toolbar>* {
    height: 35px;
}

.k-mediaplayer .k-toolbar .k-button-icon {
    margin-top: 0;
}

.k-mediaplayer .k-align-right .k-mediaplayer-volume {
    margin: 0;
}
.k-draghandle {
    background-color: #008382;
    border-color: #008382;
}
.k-slider-selection {
    background-color: #008382;
}
.k-draghandle.k-state-selected, .k-draghandle.k-state-selected:hover, .k-draghandle:hover {
    background-color: #008382;
    border-color: #008382;
}
@media only screen and (max-width: 480px){
    .k-mediaplayer-toolbar {
        font-size: 16px;
    }
    .mediaplayer {
        width: 250px;
        height: 190px;
    }
    .k-mediaplayer-toolbar .k-button.k-bare {
        padding-left: 0;
        padding-right: 0;
    }
    
    /*h1.hero-sub {*/
    /*    display: block; */
    /*    font-size: 2.7em;*/
    /*}*/
    /*.hero-text-wrapper {*/
    /*    top: 3em;*/
    /*    position: relative;*/
    /*}*/
    .hero-text-alt {
        background: url(/Shared/customers/Covid/Images/mobile_banner.png) no-repeat;
        height: 9em;
        background-size: cover;
    }
    
    #calWrapper {
        top: 5.7em;
    }
    
    .hero-text-wrapper {
        top: 5.5em;
    }
}

@media screen and (max-width: 500px){
    .chp .compassProgram .k-tabstrip-items.k-reset {
        margin-left: calc(1.72em + 10px)!important;
        margin-right: calc(1.72em + 10px)!important;
        height: 2.7em;
    }
    .chp .compassProgram .k-tabstrip > .k-button.k-bare {
        top: 0;
    }
    .chp .default_aspx .w-dashboard .dashboardWidget .k-tabstrip-wrapper .k-button {
        color: #008382;
    }
    
    /* Long selector so it is specific to the tabstrip and does not affect the mediaplayer icons */
    div.widget.initialized.w-compass-program.compassProgram > div > div > div > span.k-button.k-button-icon.k-bare > span{
        font: 23px/1 WebComponentsIcons;
        background-color: lightgrey!important;
        height: 1.5em;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .chp .default_aspx .w-dashboard .dashboardWidget .k-tabstrip-wrapper .tabs > .k-button-icon {
         height: 2.5em;
    }
    .chp .default_aspx .w-dashboard .dashboardWidget .k-tabstrip-wrapper .k-tabstrip-next {
        right: 0;
        padding-right: 0;
    }
    .chp .default_aspx .w-dashboard .dashboardWidget .k-tabstrip-wrapper .k-tabstrip-prev {
        left: 0;
        padding-left: 0;
    }
}





.chp .w-dashboard .healthTipsWidget .Controls {
    display: table-cell;
    /*background-image: linear-gradient(to bottom, transparent, white);*/
    height: 4em;
    padding-left: 1em;
    padding-right: 1em;
}

.chp .w-healthTip table {
    max-width: 100%;
    background-color: #f6f6f6;
    border-radius: 0.4em;
    border-collapse: collapse;
}

.chp td.Content {
    padding: 0.8em;
    /*-webkit-mask-image: -webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));*/
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #008382;
    width: 13px;
    height: 13px;
    border-radius: 13px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    border: 1.7px solid #008382;
    margin: 0 10px;
}

/* Contrast fixes */
.w-calendar.horiz .DOW, .w-calendar.horiz .dt, .w-calendar.horizfix .DOW, .w-calendar.horizfix .dt {
    color: #167ac6;
}

.calWidget .datetext.f-left {
    line-height: 25px;
}

#page-footer .link {
    color: #B7ebef;
}

/* Cleaning trackers */
.dashboardWidget .widget-header .tooltip {
    vertical-align: inherit;
}
.w-dashboard .trackerMultiWidget.dashboardWidget .widget-header {
    text-align: center;
    color: #008382;
}

.w-dashboard .trackerMultiWidget.dashboardWidget .top-corner {
    position: absolute;
    right: unset;
    display: inline-block;
    /* float: left; */
    left: 3.15em;
    top: 1em;
}

.w-dashboard .trackerMultiWidget.dashboardWidget .ch-trackers {
    text-align: center;
}
.w-dashboard .trackerMultiWidget.dashboardWidget .ch-tracker.f-left {
    float: none;
    min-height: 120px;
}
.chp .w-dashboard .trackerMultiWidget .widget-content {
    margin-top: 0;
}
article.trackerMultiWidget.dashboardWidget {
    width: 18em;
}

.chp .w-dashboard .trackerMultiWidget.dashboardWidget {
    margin: 1em auto;
}



/* Session description styling */
.session-description {
    background: rgba(215, 238, 239, 0.2);
    color: #565656;
    padding: 1em 2em;
    border-radius: 0.4em;
}

.session-description-panelbar>li.k-state-default>.k-link.k-state-selected, 
.session-description-panelbar>li>.k-state-focused.k-state-hover, .k-panelbar>li>.k-state-selected, 
.session-description-panelbar>li>.k-state-selected.k-state-hover {
    color: #fff;
    background-color: rgba(215, 238, 239, 0.2);
    border: 1px solid rgba(215, 238, 239, 0.2);
}

.chp .compassProgram .session-description-panelbar .k-item,
.chp .compassProgram .session-description-panelbar .k-header {
    border: 2px solid rgba(215, 238, 239, 0.2);
    background-color: rgba(215, 238, 239, 0.2);
    color: #007575;
    margin-right: 0;
    min-height: 60px;
}

.chp .compassProgram .session-description-panelbar .k-header {
    background-image: url(/shared/images/down-black.png);
    background-repeat: no-repeat;
    background-position-x: 0.2em;
    background-position-y: center;
}

.chp .compassProgram .session-description-panelbar .k-state-active .k-header {
    background-image: url(/shared/images/up-black.png);
}
    
/*.chp .compassProgram #session-description-panelbar .k-header p {*/
/*    color: #007575;*/
/*}*/

.session-description.k-content {
    padding: 1.5em;
    background-color: rgba(215, 238, 239, 0.2);
}

/* List item styling */
.list-numbered {
  list-style: none;
  margin-left: 1em;
  counter-reset: line;
}

.list-numbered > li {
  background-color: #0083821a;
  position: relative;
  margin-bottom: 1.5em;
  min-height: 2em;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
}

.list-numbered > li:before {
    position: absolute;
    left: -2.55em;
    width: 2.55em;
    height: 100%;
    margin-right: 0.5em;
    background-color: #0083823d;
    border-top-left-radius: 0.4em;
    border-bottom-left-radius: 0.4em;
    color: #008382;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    line-height: 2rem;
    counter-increment: line;
    content: counter(line);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.list-numbered li p {
    padding: 1em;
}

.chp .compassProgram .k-tabstrip .k-tabstrip-items {
    margin-bottom: 0;
}

.session-description-panelbar > li > span > .k-i-arrow-60-down {
    display: none;
}

ul.session-description-panelbar {
    box-shadow: 0px 3px 4.5px rgba(0,0,0,0.2);
    transition: .3s;
    border: none;
    /*background-color: rgba(215, 238, 239, 0.2);*/
    border-radius: 0.4em;
}

ul.session-description-panelbar:hover {
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
    transform: scale(1.01,1.01);
}

.chp .compassProgram .video .description:hover {
    color: #666;
    background-color: rgba(215, 238, 239, 0.2);
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
    transform: scale(1.01,1.01);
}

.k-panelbar>.k-item>.k-link {
    padding: 0 1.2em;
}

/* Alternate hover options */
/*ul#session-description-panelbar:hover {*/
/*    border: 2px solid #007575;*/
/*    color: #007575;*/
/*    background-color: #FFF;*/
/*}*/

/*.chp .compassProgram .video .description:hover {*/
/*    border: 2px solid #007575;*/
/*    color: #007575;*/
/*    background-color: #FFF;*/
/*}*/

.chp .compassProgram .video .description, .chp .compassProgram .video .description.hide {
    background-position-y: center;
}

.chp .compassProgram .k-tabstrip .session-description-panelbar .k-item:hover {
    border: none;
    color: #007575;
    background-color: #FFF;
}

li {
    font-size: 1rem;
    line-height: 24px;
    color: #666;
}

.chp .form-touch .question.required .header h3 .label {
    display: block;
    margin-left: 0;
}

.take-action {
    padding: 1.5em;
}

.question span.label {
    font-size: 1rem;
}

.w-healthTip a.Previous,
.w-healthTip a.Next{
    background-color: #e8e8e8;
    padding: 0.6em;
    font-size: 1.5em;
    border-radius: 0.4em;
    border: 2px solid transparent;
    text-decoration: none;
    color: #007575;
    transition: all 0.3s ease;
}
a.MoreLess {
    font-size: 1.5em;
    text-transform: capitalize;
    color: #007575;
}
.w-healthTip a.Previous:hover, 
.w-healthTip a.Next:hover {
    background-color: #f6f6f6;
    border: 2px solid #ccc;
    box-sizing: border-box;
}

/*286376*/
#user-menu li[data-link="calendar"] {
    display: none;
}
.widget.initialized.w-inbox {
    display: none;
}
#page-nav li.k-item.k-state-default.contactus.k-last {
    display: none;
}
.k-item.k-state-default.contactus.k-last {
    display: none;
}

.chp .wc-social-button {
    background: url(/Shared/Customers/Covid/Images/social-icons.png) no-repeat;
}
.chp .wc-twitter-button {
  background-position: 0 0; }

.chp .wc-twitter-button:hover {
  background-position: 0 -70px; }

.chp .wc-facebook-button {
  background-position: -93px 0; }

.chp .wc-facebook-button:hover {
  background-position: -93px -70px; }

.chp .wc-pinterest-button {
  background-position: -186px 0; }

.chp .wc-pinterest-button:hover {
  background-position: -186px -70px; }

.chp .wc-instagram-button {
  background-position: -279px 0; }

.chp .wc-instagram-button:hover {
  background-position: -279px -70px; }

.chp .wc-social-button a {
  display: block;
  width: 84px;
  height: 67px;
  text-indent: -9999px;
  z-index: 9999; }