:root {
    --textcolor: #7D8184;
    --lightpurple: #9D96C9;
    --skybluedark: #6FC2B6;
    --themered: #D64860;
    --themegreen: #CCC50D;
    --themeblue: #215B72;
}

body {
    font-family: 'Montserrat', sans-serif;
    position: relative;
    overflow-x: hidden;
    background-color: white;
    font-size: 14px;
    font-weight: 400;
    color: var(--textcolor);
    top: 0px !important;
}

h1, h2, h3, h4, h5, h6, a {
    font-family: 'Montserrat', sans-serif;
}

p {
    font-family: Open_Sans, sans-serif
}

.hide {
    display: none
}

.color-primary {
    color: var(--primary)
}

a, button.close {
    outline: none;
}

a:hover {
    color: lightgrey
}

#wrapper {
    padding-left: 100px;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease
}

#sidebar-wrapper {
    z-index: 1000;
    left: 100px;
    width: 100px;
    height: 100%;
    margin-left: -100px;
    background: var(--skybluedark);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none
}

#page-content-wrapper { /* width:calc(100vw - 100px);*/
    min-height: 92vh;
}

@media (max-width: 768px) {
    .onBoardingMob {
        overflow: hidden
    }

    .paginationCircles {
        display: none
    }

    .hideSm {
        display: none
    }
}

#wrapper #page-content-wrapper { /* position:absolute;margin-right:-100px;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;transition:all .6s ease */
}

.paginationRow {
    margin-top: 3vh;
    padding-bottom: 3vh
}

.registrationPg { /*min-height:70vh*/
}

@media only screen and (min-width: 990px) {
    #menu {
        display: none
    }

    .left-primary {
        min-height: 100vh !important
    }

    .fixedBottom {
        position: absolute;
        bottom: 0
    }

    .firstName {
        padding-left: 0
    }

    .lastName {
        padding-right: 0
    }

    .scroll {
        height: 100vh;
        overflow-y: auto
    }

    .scroll-sm {
        height: 35vh;
        overflow-y: auto
    }

    .scroll::-webkit-scrollbar {
        width: 10px
    }

    .scroll::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 50px
    }

    .scroll-sm::-webkit-scrollbar {
        width: 10px
    }

    .scroll-sm::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 50px
    }
}

@media only screen and (max-width: 990px) {
    .hideOnMob {
        display: none
    }

    .employerNav {
        padding-left: 10px
    }

    .firstName {
        padding: 0
    }

    .lastName {
        padding: 0
    }

    .fixedBottom {
        margin-top: 10vh
    }

    .scroll {
        height: 100vh
    }

    #page-content-wrapper { /*width:100vw;*/
    }
}

#sidebar-wrapper.hidden {
    left: -100px;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease
}

#wrapper #page-content-wrapper.hidden {
    margin-right: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#wrapper.hidden {
    padding-left: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #fff !important;
    height: 6px;
}

.hamburger-inner:after, .hamburger-inner:before { /*width:30px;*/
}

.sidebar-brand img {
    max-width: 100%;
    border-bottom: 1px solid white;
}

.alertsDropDown a {
    color: black !important
}

.dropright button {
    font-weight: 200
}

.dropright button:hover {
    color: white
}

#menu.hidden {
    position: fixed;
    right: 2px; /*top:2px;*/
    bottom: 0px;
    z-index: 1001;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

#menu {
    padding: 10px 8px;
    position: fixed;
    right: 0px; /*top:15px*/;
    bottom: 0px;
    color: white;
    z-index: 1001;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.navbar {
    padding: 0;
    position: fixed;
}

.nav-active a {
    border: 2px solid var(--white);
}

.sidebar-nav {
    position: absolute;
    top: 100px;
    width: 100px;
    margin: 0;
    padding: 0;
    list-style: none
}

.sidebar-nav li {
    position: relative;
    line-height: 20px;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 6px 15px;
    padding-top: 5px;
    padding-bottom: 5px
}

/* .sidebar-brand{position:relative;background:white;height:95px;overflow:hidden;} */
.sidebar-brand {
    position: fixed;
    background: white;
    height: 95px;
    overflow: hidden;
    width: 100px;
    z-index: 1001;
    left: 0px;
}

.sidebar-brand-employer {
    position: fixed;
    background: white;
    height: auto;
    overflow: hidden;
    width: 100px;
    z-index: 1001;
    left: 0px;
}

.sidebar-brand-employer-container {
    position: fixed;
    background: white;
    height: auto;
    overflow: hidden;
    width: 100px;
    z-index: 1001;
    left: 0px;
    min-height: 100px;
}

.nav-item a, .nav-item div {
    color: white;
    font-weight: 400;
    height: 47px;
    width: 47px;
    display: inline-block;
    line-height: 45px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
}

.icon {
    fill: none;
    stroke: #fff;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round
}

.active .icon {
    stroke-width: 2 !important
}

.active {
    font-weight: 400 !important
}

.alerts-nav {
    background-color: var(--themegreen);
}

.alerts-nav::after {
    display: none !important;
}

/* Jan 2021 New Icons */
.home-nav {
    background-color: var(--themered);
}

.profile-nav {
    background-color: var(--themeblue);
}

.favourites-nav {
    background-color: var(--lightpurple);
}

.callwellbeingline-nav {
    background-color: var(--themered);
}

.favourites-nav {
    background-color: var(--lightpurple);
}

.moreoptions-nav {
    background-color: var(--themeblue);
}

/* END */
.surveys-nav {
    background-color: var(--themeblue);
}

.SelfReflection-nav {
    background-color: var(--lightpurple);
}

.WellbeingSupport-nav {
    background-color: var(--themered);
}

.awards-nav {
    background-color: var(--themegreen);
}

.resources-nav {
    background-color: var(--lightpurple);
}

.logout-nav {
    background-color: var(--themered);
}

/*Employer Section Icons */
.employerhome-nav {
    background-color: var(--themeblue);
}

.settings-nav {
    background-color: var(--themegreen);
}

.companyprofile-nav {
    background-color: var(--themered);
}

.wellbeingdata-nav {
    background-color: var(--lightpurple);
}

.questionaires-nav {
    background-color: var(--themeblue);
}

.employerawards-nav {
    background-color: var(--themegreen);
}

.news-nav {
    background-color: var(--themered);
}

/* Employer Section Icons End */
.nav-item a:hover {
    background-color: #C4BD03;
}

.mobile-menu-bottom-icons .nav-item a:hover {
    background-color: #ffffff !important;
}

.nav-item .SelfReflection-nav:hover { /*background-color:#412859;*/
}

.left-primary {
    width: 100%;
    min-height: 100%
}

.no-overflow {
    padding: 0;
    margin: 0
}

.secondary {
    color: var(--secondary)
}

.marginBottom20 {
    margin-bottom: 20px
}

.marginBottom0 {
    margin-bottom: 0
}

.marginTop20v {
    margin-top: 20vh
}

.marginTop10v {
    margin-top: 10vh
}

.marginTop5v {
    margin-top: 5vh
}

.fullWidth {
    width: 100%
}

.heightFull {
    height: 100%
}

.fullHeight {
    min-height: 100vh
}

.autoHeight {
    height: auto
}

.margin3 {
    margin: 3vh
}

.noMargin {
    margin: 0
}

.marginTop3 {
    margin-top: 3vh
}

.marginTop10 {
    margin-top: 10px
}

.marginTop20 {
    margin-top: 20px
}

.padding20 {
    padding: 20px
}

.padding10 {
    padding: 10px
}

.padding5 {
    padding-top: 5px;
    padding-bottom: 5px
}

.paddingTop15 {
    padding-top: 15px
}

.verticalMargin3 {
    margin: 3vh 0
}

.noTop {
    margin-top: 0;
    padding-top: 0
}

.whiteForm::placeholder {
    color: white !important;
    opacity: 1
}

.whiteForm:-ms-input-placeholder {
    color: white !important
}

.whiteForm::-ms-input-placeholder {
    color: white !important
}

.whiteForm div label {
    color: white
}

.whiteForm div input {
    background-color: transparent;
    color: white;
    border: 1px solid white;
    height: 40px
}

.whiteInput {
    background-color: transparent;
    color: white;
    border: 1px solid white
}

.whiteSelect select {
    color: white !important;
    background-color: transparent !important;
    border: 1px solid white
}

.whiteSelect {
    text-align: left
}

.whiteSelect select:focus {
    color: white !important;
    background-color: transparent;
    border: 1px solid white
}

.input-group-text {
    background-color: white;
    color: var(--primary-accent)
}

.onBoardingForm {
    height: 90%
}

.goalInput {
    padding: 5px 10px 10px !important
}

.goalLabel {
    margin: 0 !important;
    padding-left: 0 !important
}

.goalCheckbox {
    position: relative !important;
    height: 25px !important;
    width: 25px !important
}

.whiteFill {
    fill: #fff
}

.whiteBorder {
    border: 1px solid white !important
}

.borderRadius5 {
    border-radius: 5px !important
}

.noBackground {
    background-color: transparent
}

.surveyDescription {
    margin: 8vh 4vw
}

.white {
    color: white
}

.recipeImage {
    object-fit: cover;
    height: 36vh;
    width: 100%;
    object-position: center center;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
}

.articleImage {
    object-fit: cover;
    width: 100%;
    object-position: 50% 50%
}

.table-dark td {
    border-color: white !important
}

.table-dark th {
    border-color: white !important
}

.table-dark tr {
    border-color: white !important
}

.progress {
    background-color: transparent;
    height: 1.4rem;
    border: 1px solid #215B72;
}

.progress-bar {
    -webkit-animation: progressFill 1.5s ease;
    animation: progressFill 1.5s ease;
    background-color: #215B72;
}

@keyframes progressFill {
    from {
        width: 0
    }
}

@keyframes progressRemove {
    to {
        width: 0
    }
}

.customCheckbox {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    display: block;
    position: relative;
    padding-left: 50px;
    margin-top: 2vh;
    padding-top: 0;
    cursor: pointer;
    font-size: 20px
}

.customCheckbox input {
    position: absolute;
    z-index: -1;
    opacity: 0
}

.checkbox_indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 30px;
    width: 30px;
    background: transparent;
    border: 2px solid var(--secondary);
    border-radius: 5px
}

.checkbox:hover input ~ .checkbox_indicator, .checkbox input:focus ~ .checkbox_indicator {
    background: transparent
}

.checkbox input:checked ~ .checkbox_indicator {
    background: var(--secondary);
    display: block;
    cursor: pointer;
    box-shadow: 0 0 0 var(--pulse);
    animation: pulse 1s
}

.checkbox:hover input:not([disabled]):checked ~ .checkbox_indicator, .checkbox input:checked:focus ~ .checkbox_indicator {
    background: var(--secondary)
}

.bigCheckbox .checkbox_indicator {
    top: 10px !important
}

.bigCheckbox.customCheckbox {
    font-size: 30px !important
}

.checkbox_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none
}

.whiteCheckbox_indicator { /*position:absolute;*/
    top: 2px;
    left: 0;
    height: 30px;
    width: 30px;
    background: transparent;
    border: 2px solid white;
    border-radius: 5px
}

.whiteCheckbox:hover input ~ .whiteCheckbox_indicator, .whiteCheckbox input:focus ~ .whiteCheckbox_indicator {
    background: transparent
}

.whiteCheckbox input:checked ~ .whiteCheckbox_indicator {
    background: #fff;
    display: block;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
    animation: whitePulse 1s
}

/*@-webkit-keyframes whitePulse {*/

/*0*/
/*{*/
/*    -webkit-box-shadow: 0 0 0 0 #FFFFFF66*/
/*}*/
/*70*/
/*%*/
/*{*/
/*    -webkit-box-shadow: 0 0 0 8px #FFFFFF00*/
/*}*/
/*100*/
/*%*/
/*{*/
/*    -webkit-box-shadow: 0 0 0 0 #FFFFFF00*/
/*}*/
/*}*/
.whiteCheckbox {
    color: white
}

.whiteCheckbox:hover input:not([disabled]):checked ~ .whiteCheckbox_indicator, .whiteCheckbox input:checked:focus ~ .whiteCheckbox_indicator {
    background: white
}

.whiteCheckbox_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none
}

.btn-outline-secondary {
    color: #3B3C3C !important;
    border-color: #215B72;
    cursor: pointer
}

.btn-outline-secondary:hover {
    color: #fff !important;
    background-color: #215B72;
    border-color: #215B72;
}

.btn-outline-secondary:focus {
    box-shadow: none
}

.btn-outline-secondary:active {
    color: #fff !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
    color: #fff !important;
    background-color: #215B72 !important;
    border-color: #215B72 !important
}


.clickable:hover {
    cursor: pointer
}

.secondaryFill {
    fill: var(--secondary)
}

.title {
    margin: 5vh 0 2vh
}

.helpButton {
    border-radius: 5px;
    color: white;
    padding: 10px
}

.environmentalPillar, #workshopModal .environmentalList {
    background-color: var(--skybluedark);
}

.environmentalPillar.helpButton:hover {
    filter: brightness(95%)
}

.financialPillar, .technicalHelp, #workshopModal .financialList {
    background-color: var(--themeblue);
}

.financialPillar.helpButton:hover {
    filter: brightness(95%)
}

.socialPillar, #workshopModal .socialList {
    background-color: var(--themegreen);
}

.socialPillar.helpButton:hover {
    filter: brightness(95%)
}

.mentalPillar, #workshopModal .mentalList {
    background-color: var(--lightpurple);
}

.mentalPillar.helpButton:hover {
    filter: brightness(95%)
}

.professionalPillar, #workshopModal .professionalList {
    background-color: var(--themered)
}

.professionalPillar.helpButton:hover {
    filter: brightness(95%)
}

.physicalPillar, #workshopModal .physicalList {
    background-color: #412859;
}

.physicalPillar.helpButton:hover {
    filter: brightness(95%)
}

.secondaryBackground {
    background-color: var(--themeblue)
}

.companyLogo {
    max-width: 100%;
    max-height: 25vh
}

.pillarsSvg {
    min-height: 100vh;
    position: absolute;
    right: 0;
    min-width: 150%
}

.loginImg {
    z-index: 999;
    position: absolute;
    left: 5vw;
    right: 5vw;
    top: 19%;
    text-align: center
}

.loginImg img {
    width: 25vw
}

.onboardingLeft {
    padding: 0;
    height: 100vh;
    overflow-y: hidden
}

.surveySvg {
    margin: 8vh
}

.questionTitle {
    font-size: 2rem;
    color: var(--textcolor);
    padding-left: 85px;
}

.questionTitle span {
    color: var(--themered);
    position: absolute;
    left: 16px;
}

.questionNum {
    margin-left: 2vw;
    font-weight: 600;
    font-size: 5rem
}

.loginPillar {
    -webkit-animation: progressFill 1.5s ease;
    animation: progressFill 1.5s ease
}

.reversePillar {
    -webkit-animation: progressRemove 1.5s ease;
    animation: progressRemove 1.5s ease;
    animation-fill-mode: forwards
}

.pulse:hover {
    animation: pulse 1.5s infinite
}

.pulse {
    display: block;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
    animation: pulse 2s infinite
}

/*@-webkit-keyframes pulse {*/

/*0  {*/
/*    -webkit-box-shadow: 0 0 0 0 var(--pulse)*/
/*}*/
/*70%  {*/
/*    -webkit-box-shadow: 0 0 0 8px var(--pulse-zero)*/
/*}*/
/*100%  {*/
/*    -webkit-box-shadow: 0 0 0 0 var(--pulse-zero)*/
/*}*/
/*}*/
.errorSvg {
    width: 50vw;
    height: auto
}

.accentFill {
    fill: var(--primary)
}

.weakPassword {
    margin-top: 10px;
    border-radius: 5px;
    padding: 5px;
    color: white;
    background-color: red
}

.mediumPassword {
    margin-top: 10px;
    border-radius: 5px;
    padding: 5px;
    color: white;
    background-color: orange
}

.strongPassword {
    margin-top: 10px;
    border-radius: 5px;
    padding: 5px;
    color: white;
    background-color: green
}

nav {
    background-color: var(--themeblue);
    padding: 24px 0;
    position: fixed;
    width: calc(100vw - 100px);
    z-index: 1;
    left: 100px;
    color: #ffffff;
}

.brandBackground {
    background-color: white;
    border: var(--primary) solid 1px
}

.selectedQuestion {
    background-color: var(--secondary);
    color: white
}

.selectedQuestion:hover {
    background-color: var(--secondary) !important;
    color: black
}

.employerBrand {
    height: 100px;
    padding: 0
}

.onBoardingTitle {
    font-size: 3rem
}

.chevron {
    float: left;
    padding-top: 20px;
    padding-bottom: 10px
}

.paginationCircles {
    height: 60px;
    overflow: hidden
}

.brandBtn {
    color: var(--primary) !important
}

.brandBtn:hover {
    color: var(--secondary) !important
}

.backgroundWhite {
    background-color: white
}

.black {
    color: black
}

.dateWhite {
    border: 1px solid white;
    border-radius: 5px
}

.contentLink {
    color: white;
    margin-top: 2vh
}

.contentLink:hover {
    color: var(--primary);
    text-decoration: none
}

.contentBox {
}

.contentImgBox {
}

.contentGoalBox {
}

.contentGoalBoximgvio {
    border: 1px solid #C9C1C1;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    overflow: hidden;
}

.contentImg {
    height: 22vh;
    object-fit: cover;
    transition: all .3s;
    width: 100%;
    object-position: center center;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    border: 1px solid #C9C1C1;
}

.contentVideo {
    object-fit: cover;
    transition: all .3s;
    width: 100%
}

.contentVideo:hover { /*transform:scale(1.1)*/
}

.contentVideoBox {
    border-radius: 5px
}

.contentImg:hover { /*transform:scale(1.1)*/
}

.contentPlaceholder {
    padding-top: 260px
}

.btn-primary {
    border-color: var(--primary);
    background-color: var(--primary)
}

.btn-primary:hover {
    border-color: var(--primary-accent);
    background-color: var(--primary-accent)
}

.text-overflow {
    overflow-wrap: break-word
}

.fullSvg {
    width: 50vw;
    height: auto
}

#video {
    border-radius: 5px 5px 0 0
}

.hoveredText {
    color: white
}

.hoveredText:hover {
    color: var(--primary)
}

.custom-range::-webkit-slider-thumb {
    background: #215B72;
}

.custom-range::-moz-range-thumb {
    background: #215B72;
}

.itemIcon {
    color: var(--white); /*position:absolute;left:10px;height:25px;top:6px*/
}

.tableMaxWidth {
    max-width: 20vw
}

.goalBox {
    border: 1px white solid;
    border-radius: 5px
}

#ui-datepicker-div {
    z-index: 1001 !important;
    padding: 0
}

.contacts {
    border-top: 1px solid white
}

.companyLogo {
    height: 25vh
}

.chevronBtn {
    height: 30px
}

.backgroundPrimary {
    background: var(--primary)
}

.curved {
    border-radius: 5px
}

.text-end {
    text-align: end
}

.marginBottom10v {
    margin-bottom: 10vh
}

.videoGoalScroll {
    max-height: 80vh;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 25px;
}

.loginLogo {
    height: 27.1vh
}

.blackBorder {
    border: 1px solid black !important
}

/* loginForm */
.loginForm .form-control {
    background: var(--name);
    border: 1px solid var(--lightpurple);
    color: var(--textcolor);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    padding: 10px 33px;
    height: 57px;
    font-size: 14px;
}

.loginForm .form-group {
    margin-bottom: 2rem;
}

.loginForm .btn {
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 14px;
    line-height: 26px;
}

.login-btn {
    background-color: var(--skybluedark);
    color: var(--white);
}

.forgot-btn {
    background-color: var(--lightpurple);
    color: var(--white);
}

.login-btn:hover, .forgot-btn:hover {
    background-color: var(--themered);
    color: var(--white);
}

/* Profile Page */
.accordion .card.holder {
    border: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.accordion .card.holder .helpButton {
    -webkit-border-radius: 47px !important;
    -moz-border-radius: 47px !important;
    border-radius: 47px !important;
}

.accordion > .card.holder .card-header {
    margin-top: 9px;
    padding: 18px 40px !important;
}

.accordion > .card.holder .card-body {
    line-height: 26px !important;
    padding: 1.25rem 1.25rem 2rem 1.25rem;
}

.accordion > .card.holder .card-body a {
    color: var(--textcolor);
}

.accordion .card.holder h3.white {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
}

.red-title {
    font-size: 21px;
    font-weight: 400;
    color: var(--themered); /*margin-bottom:40px;*/
}

.blue-title {
    font-size: 21px;
    font-weight: 400;
    color: var(--themeblue); /*margin-bottom:40px;*/
}

.info-circle {
    width: 21px;
    height: 21px;
    color: var(--white);
    background: var(--skybluedark);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-size: 21px;
    display: inline-block;
    text-align: center;
    line-height: 21px;
    padding: 1px;
    margin-left: 22px;
}

.profile-sub-tital {
    color: var(--textcolor);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
}

.dietary-requirements-red .whiteCheckbox, .email-notifications-check {
    background: var(--themered);
    margin: 0px;
    font-size: 14px;
    font-weight: 400;
    -webkit-border-radius: 47px;
    -moz-border-radius: 47px;
    border-radius: 47px;
    padding: 16px 30px;
    color: var(--white);
}

.dietary-requirements-red .whiteCheckbox .whiteCheckbox_indicator, .email-notifications-check .whiteCheckbox_indicator {
    top: 12px;
    left: 20px;
}

.email-notifications-check input:checked ~ .whiteCheckbox_indicator {
    background: white !important;
}

.yellowCheckbox .whiteCheckbox_indicator {
    border: 2px solid #C4BD03;
}

.dietary-requirements-red .whiteCheckbox input:checked ~ .whiteCheckbox_indicator::before, .email-notifications-check input:checked ~ .whiteCheckbox_indicator::before {
    content: " ";
    background: #FFF url('images/check-icon.png') no-repeat center center;
    position: absolute;
    width: 27px;
    height: 26px;
}

.yellowCheckbox input:checked ~ .whiteCheckbox_indicator::before {
    background: #C4BD03 url('images/check-icon.png') no-repeat center center;
}

.email-notifications-check {
    background-color: var(--themeblue);
}

#footer {
    background: var(--themeblue);
    color: var(--white);
    padding: 16px;
    font-size: 12px;
    position: absolute;
    width: 100%;
    bottom: 0;
}

#footer a {
    color: var(--white);
    text-decoration: underline;
}

#footer a:hover {
    text-decoration: none;
}

.viewtutorialbutton {
    -webkit-border-radius: 47px !important;
    -moz-border-radius: 47px !important;
    border-radius: 47px !important;
    background-color: var(--themered);
    color: var(--white);
    padding: 15px 40px !important;
    font-size: 16px;
    text-align: left;
}

.viewtutorialbutton:hover {
    color: var(--white);
}

.topbar-header {
    background: var(--themeblue);
    padding: 24px 0;
    position: fixed;
    width: calc(100vw - 100px);
    z-index: 3;
    left: 100px;
    color: #ffffff;
}

.topbar-user, .logout-top {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-right: 15px;
}

.topbar-user li, .logout-top li {
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
}

.topbar-user li:first-child, .logout-top li:first-child {
    margin-left: 0px;
}

.topbar-user h2 {
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
}

.user-topbar-text {
    color: #ffffff;
    font-size: 19px;
}

.logout-top .logout-link {
    background: var(--themered);
    height: 47px;
    width: 47px;
    display: inline-block;
    line-height: 42px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
}

.logout-top .counsellingsupport {
    background: var(--skybluedark);
    height: 47px;
    width: 47px;
    display: inline-block;
    line-height: 42px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
}

.modal-header, .modal-footer {
    border: none;
}

.modal-header .close {
    color: var(--skybluedark);
    opacity: 1;
    font-size: 30px;
}

.modal-footer .btn-primary {
    background-color: var(--themeblue);
    color: var(--white);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 15px;
    line-height: 26px;
    padding: .5rem 2.5rem;
    display: inline-block;
    border: none;
}

.modal-footer .btn-primary:hover {
    background-color: var(--themered);
    text-decoration: none;
    color: var(--white);
}

.modal-title {
    font-size: 21px;
    font-weight: 400;
    color: var(--themered);
}

.modal-content {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
}

#assessmentContent {
    padding-top: 0;
}

#assessmentContent h4 {
    font-size: 16px;
    font-weight: 400;
    color: #3F4141;
    margin-bottom: 20px;
}

.recipe-all {
    background: var(--skybluedark);
    border: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}

.custom-select {
    position: relative;
    border: none;
}

.custom-select select {
    display: none;
}

.select-selected {
    background: var(--skybluedark);
    border: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
}

.select-selected::after {
    position: absolute;
    content: "";
    top: 18px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

.select-selected.select-arrow-active::after {
    border-color: transparent transparent #707070 transparent;
    top: 10px;
}

.select-items div, .select-selected {
    color: #fff;
    padding: 9px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}

.select-items {
    position: absolute;
    background-color: var(--white);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #C7C6C6;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    overflow: hidden;
    padding: 8px;
    margin-top: 2px;
}

.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    color: var(--themered);
    font-weight: 700;
}

.select-items div {
    padding: 8px 16px;
    color: var(--themeblue);
}

.environmental-list .select-selected {
    background-color: var(--themered);
}

.ingredients-title {
    font-size: 21px;
    font-weight: 400;
    margin-bottom: 20px;
}

.method-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.method-list ul li {
    margin-top: 15px;
    position: relative;
    padding-left: 20px;
}

.method-list ul li:first-child {
    margin-top: 0px;
}

.method-list ul li span {
    float: left;
    margin-right: 0;
    vertical-align: top;
    position: absolute;
    left: 0;
}

.contentboxlinks a {
    color: var(--textcolor);
    font-size: 14px;
}

.contentboxlinks a:hover {
    color: var(--themered);
    text-decoration: none;
}

.icon-video {
    position: absolute;
    left: 45%;
    background: var(--themered);
    top: 42%;
    width: 50px;
    height: 35px;
    padding: 5px;
    border-radius: 9px;
}

.awardsbox {
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    padding: 2em;
    position: relative;
    border: 1px solid #C9C1C1;
    background-color: #70B9B1;
}

.awardsbox h3 {
    font-size: 16px;
    font-weight: bold;
}

.awardsboxtext, .upcoming-awards p {
    font-size: 16px;
}

.awardsbox .info-circle, .upcoming-awards-bg .info-circle {
    color: var(--themered);
    background: var(--white);
}

.rating-star-img {
    margin-bottom: 15px;
    position: relative;
}

.upcoming-awards h3 {
    font-size: 16px;
    font-weight: bold;
}

.upcoming-awards-bg {
    background-color: var(--themered);
    width: 100%;
    border: 1px solid #C9C1C1;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    overflow: hidden;
}

.upcoming-awards-bg .backgroundPrimary {
    border: 1px solid #C9C1C1;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    overflow: hidden;
}

.upcoming-awards-bg .dynamic-svg {
    max-height: 160px;
}

.text-color-new { /*color:var(--textcolor)*/
}

.myawardsboxhome {
    background: #70B9B1;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    border-radius: 36px;
    padding: 2em;
}

.viewawardslink {
    background-color: var(--themeblue);
    color: var(--white);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 15px;
    line-height: 26px;
    padding: .5rem 2.5rem;
    display: inline-block;
    border: 1px solid var(--white);
}

.viewawardslink:hover {
    background-color: var(--themered);
    text-decoration: none;
    color: var(--white);
}

.tooltip-inner {
    background-color: var(--skybluedark);
    color: var(--white);
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    text-align: left;
    padding: 15px;
    font-size: 15px;
}

.bs-tooltip-right .arrow::before {
    border-right-color: var(--skybluedark);
    border-width: .6em .6em .6em 0;
}

.bs-tooltip-left .arrow::before {
    border-left-color: var(--skybluedark);
}

.past-surveys-date {
    background-color: var(--themered);
    color: var(--white);
    text-align: center;
    -webkit-border-radius: 47px;
    -moz-border-radius: 47px;
    border-radius: 47px;
    padding: 4px 15px;
    min-height: 58px;
}

.past-surveys-title {
    background-color: var(--skybluedark);
    color: var(--white);
    -webkit-border-radius: 47px;
    -moz-border-radius: 47px;
    border-radius: 47px;
    padding: 15px 30px;
    min-height: 58px;
    text-transform: capitalize;
}

.past-surveys-title a { /*margin-left:15px;*/
    text-decoration: none;
}

.past-surveys-title span { /*width:80%;display:inline-block;*/
}

.past-surveys-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.past-surveys-list li {
    vertical-align: top;
    font-size: 16px;
}

.past-surveys-date span {
    font-size: 12px;
    display: block;
    color: #FFF;
    margin-top: 5px;
}

.reset-btn {
    background-color: var(--themeblue);
    color: var(--white);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 15px;
    line-height: 26px;
    padding: .5rem 2.5rem;
    display: inline-block;
}

.reset-btn:hover {
    background-color: var(--themered);
    text-decoration: none;
    color: var(--white);
}

.password-reset #id_email {
    background: var(--name);
    border: 1px solid var(--lightpurple);
    color: var(--textcolor);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    padding: 10px 33px;
    height: 57px;
    font-size: 14px;
    display: block;
    width: 100%;
}

.surveys-list a {
    color: #FFF;
}

.surveys-list .past-surveys-title {
    background: var(--lightpurple);
}

.recipe-img .articleImage {
    object-fit: cover;
    height: 80vh;
    width: 100%;
    object-position: center center;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
}

.upcoming-awards-bg .info-circle {
    margin-left: 0;
}

.question-label h5 {
    font-size: 19px;
    font-weight: 500;
    color: var(--textcolor);
}

.nextQuestion, .nextQuestion01 {
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 14px;
    line-height: 26px;
    background-color: var(--skybluedark);
    color: var(--white);
    min-width: 130px;
}

.nextQuestion:hover, .nextQuestion01:hover {
    background-color: var(--themered);
    color: var(--white);
}

.previousQuestion {
    border-radius: 35px;
    height: 43px;
    font-size: 14px;
    line-height: 26px;
    background-color: var(--themeblue);
    color: var(--white);
    min-width: 130px;
}

.myawardsboxhomelist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.myawardsboxhomelist ul li {
    width: 19%;
    display: inline-block;
}

.selfreflectionmodal .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.selfreflectionmodal .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: #FFF;
    cursor: pointer;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 1px solid var(--textcolor);
}

.selfreflectionmodal .slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: #FFF;
    cursor: pointer;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 1px solid var(--textcolor);
}

.selfreflectionmodal h5 {
    font-size: 19px;
    font-weight: 700;
    color: var(--textcolor);
}

#assessmentContent .selfreflectionmodal:nth-child(1) .slider, #assessmentContent .selfreflectionmodal:nth-child(7) .slider {
    background: #C4BD03;
}

#assessmentContent .selfreflectionmodal:nth-child(2) .slider, #assessmentContent .selfreflectionmodal:nth-child(8) .slider {
    background: #44BBAB;
}

#assessmentContent .selfreflectionmodal:nth-child(3) .slider, #assessmentContent .selfreflectionmodal:nth-child(9) .slider {
    background: #E73551;
}

#assessmentContent .selfreflectionmodal:nth-child(4) .slider, #assessmentContent .selfreflectionmodal:nth-child(10) .slider {
    background: #9489C6;
}

#assessmentContent .selfreflectionmodal:nth-child(5) .slider, #assessmentContent .selfreflectionmodal:nth-child(11) .slider {
    background: #412859;
}

#assessmentContent .selfreflectionmodal:nth-child(6) .slider, #assessmentContent .selfreflectionmodal:nth-child(12) .slider {
    background: var(--themeblue);
}

.goalBoxNew .email-notifications-check {
    background-color: var(--lightpurple);
}

#congratulations h5 {
    font-weight: 400;
}

.goal-title {
    background-color: var(--lightpurple);
    color: var(--white);
    -webkit-border-radius: 47px;
    -moz-border-radius: 47px;
    border-radius: 47px;
    font-size: 21px;
    font-weight: 400;
    padding: 15px 26px;
    min-height: 60px;
}

#relatedBtn {
    border: none;
}

.radarChartdata {
    width: 100%;
}

.radarchartdata-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.radarchartdata-list li {
    display: inline-block;
    width: 20%;
    text-align: center;
    vertical-align: top;
}

.radarchartdata-list .p {
    font-size: 24px;
    font-weight: 400;
    color: var(--themeblue);
    margin: 10px 0;
    line-height: 21px;
}

.radarchartdata-list .professionalname {
    font-size: 13px;
    color: var(--textcolor);
    margin-top: -5px;
    margin-bottom: 12px;
}

.radarchartdata-list .radarchartcolor {
    background-color: #412859;
    height: 20px;
    width: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    margin: 0 auto;
}

.radarchartdata-list li:nth-child(1) .radarchartcolor {
    background-color: #9489C6;
}

.radarchartdata-list li:nth-child(2) .radarchartcolor {
    background-color: #E73551;
}

.radarchartdata-list li:nth-child(3) .radarchartcolor {
    background-color: #412859;
}

.radarchartdata-list li:nth-child(4) .radarchartcolor {
    background-color: #44BBAB;
}

.radarchartdata-list li:nth-child(5) .radarchartcolor {
    background-color: #C4BD03;
}

.radarchartdata-list li:nth-child(6) .radarchartcolor {
    background-color: #155269;
}

.alerts-num {
    position: absolute;
    right: -11px;
    top: -6px;
    color: #fff;
    background-color: var(--themered);
    display: inline-block;
    height: 25px;
    width: 25px;
    text-align: center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    line-height: 25px;
}

#logout .modal-body p {
    font-size: 21px;
}

.yes-link, .no-link {
    background-color: var(--skybluedark);
    color: var(--white);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 15px;
    line-height: 26px;
    padding: .5rem 2.5rem;
    display: inline-block;
    border: none;
    min-width: 120px;
    margin: 5px 10px;
}

.no-link {
    background-color: var(--themered);
}

.yes-link:hover, .no-link:hover {
    background-color: var(--themeblue);
    text-decoration: none;
}

.mt--76 {
    margin-top: -76px;
}

.lowright {
    padding-left: 60px;
}

.lowleft {
    padding-right: 60px;
}

.surveys-available {
    font-size: 14px;
    color: var(--textcolor);
}

.mb--15 {
    margin-bottom: 15px;
}

#selfAssessmentModal .modal-content {
    padding-top: 25px;
    padding-bottom: 25px;
}

.award-info {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.mobile-only-optime, .mobile-only-block, .mobile-nve-bar {
    display: none !important;
}

.title-mobile {
    display: none;
}

.whiteCheckbox-listnew {
    width: 36px;
    float: left;
}

.whiteCheckbox-text {
    float: left;
    width: 70%;
}

#recommendedModal #exampleModalLabel {
    text-align: center;
    width: 100%;
}

.jcarousel-wrapper {
    margin: 20px auto;
    position: relative;
}

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 200px;
    float: left;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.jcarousel img { /* display:block;max-width:100%;height:auto!important; */
}

.jcarousel-control-prev, .jcarousel-control-next {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 0 4px #F0EFE7;
    -moz-box-shadow: 0 0 4px #F0EFE7;
    box-shadow: 0 0 4px #F0EFE7;
}

.jcarousel-control-prev {
    left: 15px;
}

.jcarousel-control-next {
    right: 15px;
}

.jcarousel-pagination {
    position: absolute;
    bottom: -40px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin: 0;
}

.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    font-size: 11px;
    height: 10px;
    width: 10px;
    line-height: 10px;
    background: #fff;
    color: #4E443C;
    border-radius: 10px;
    text-indent: -9999px;
    margin-right: 7px;
    -webkit-box-shadow: 0 0 2px #4E443C;
    -moz-box-shadow: 0 0 2px #4E443C;
    box-shadow: 0 0 2px #4E443C;
}

.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}

#helpfulcontentslider ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-right: -15px;
    margin-left: -15px;
}

#newwellbeingdontent .loginForm .forgot-btn {
    padding: .5rem 3rem;
}

#workshopModal .modal-header {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
}

#workshopModal .curved {
    color: #FFF;
    border-radius: 24px;
}

#workshopModal .curved:hover {
    text-decoration: none;
}

#workshopModal .socialList .socialPillar { /*background-color:#C4BD03;*/
}

#workshopModal .workshopModaltextp {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}

#workshopModal #pillarSelect {
    background-color: var(--lightpurple);
    border: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    color: #FFF;
    padding: 9px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    position: relative;
    width: 100%;
    outline: none;
}

#workshopModal .pillarSelectarrow::before {
    content: " ";
    position: absolute;
    z-index: 1;
    right: 30px;
    color: #FFF;
    top: 15px;
    border: 6px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-color: #fff transparent transparent transparent;
}

#workshopModal img {
    padding: 2px;
    border-radius: 24px;
}

#pillarSelect {
    padding: 5px 35px 5px 5px;
    font-size: 16px;
    border: 1px solid #CCC;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}

#pillarSelect::-ms-expand {
    display: none;
}

.create-link {
    background-color: var(--skybluedark) !important;
    color: var(--white);
}

.create-link:hover {
    background-color: var(--themered) !important;
    color: var(--white);
}

@media screen and (min-width: 0) {
    #pillarSelect {
        background: none;
        padding: 5px;
    }
}

.registrationti {
    font-size: 24px;
    font-weight: 400;
    color: #707070;
}

.registrationlabel {
    color: #9D96C9;
    font-size: 21px;
    margin-top: 10px;
}

.registrationPgtext {
    text-align: left;
    color: #707070;
    font-size: 21px;
}

.Final-Draft-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.Final-Draft-list li {
    font-size: 16px;
}

.Final-Draft-list li span {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 9px;
    padding: 18px 40px !important;
    -webkit-border-radius: 47px !important;
    -moz-border-radius: 47px !important;
    border-radius: 47px !important;
    color: #FFF;
}

.Final-Draft-list #Environmental span {
    background: #6FC2B6;
}

.Final-Draft-list #Social span {
    background: #D0CF56;
}

.Final-Draft-list #Financial span {
    background: #215B72;
}

.Final-Draft-list #MentalEmotional span {
    background: #9D96C9;
}

.Final-Draft-list #Proffessional span {
    background: #707070;
}

.Final-Draft-list #Physical span {
    background: #D64860;
}

.registerlinks a {
    color: #707070;
    font-size: 14px;
    text-decoration: underline;
}

.registerlinks a:hover {
    color: #D64860;
    text-decoration: none;
}

.paginationRow .btn {
    background-color: var(--themered);
    color: var(--white);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 14px;
    line-height: 26px;
    min-width: 205px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.paginationRow .btn:hover {
    background-color: var(--skybluedark);
    color: var(--white);
}

.paginationRow #nextBtn, .paginationRow #submitBtn {
    background-color: var(--skybluedark) !important;
    color: var(--white);
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    height: 43px;
    font-size: 14px;
    line-height: 26px;
    min-width: 205px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.paginationRow #nextBtn:hover, .paginationRow #submitBtn:hover {
    background-color: var(--themered);
    color: var(--white);
}

.startmywellbeig {
    background-color: var(--lightpurple) !important;
}

.startmywellbeig:hover {
    background-color: var(--themered) !important;
}

#registrationForm .loginLogo img.loginLogo {
    padding: 30px 0;
}

#occupational_activity {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.occupationalactivityarrow {
    position: relative;
}

.occupationalactivityarrow::before {
    content: " ";
    position: absolute;
    z-index: 1;
    right: 30px;
    color: #FFF;
    top: 48%;
    border: 6px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-color: #000 transparent transparent transparent;
}

.GettingStartedWithOptiMe .fullWidth video {
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    border: 1px solid #C9C1C1;
}

/* Responsive Media Queries */
@media (min-width: 1600px) and (max-width: 1700px) {
    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 12%;
        flex: 0 0 12%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 88%;
        flex: 0 0 88%;
    }

    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }
}

@media (min-width: 1500px) and (max-width: 1600px) {
    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 14%;
        flex: 0 0 14%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 86%;
        flex: 0 0 86%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }
}

@media (min-width: 1440px) and (max-width: 1500px) {
    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 14%;
        flex: 0 0 14%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 86%;
        flex: 0 0 86%;
    }

    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }
}

@media (min-width: 1300px) and (max-width: 1440px) {
    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    #pastsurveyspage .col-md-9, .surveys-list .col-md-9 {
        max-width: 70%;
        flex: 0 0 70%;
    }

    #pastsurveyspage .col-md-3, .surveys-list .col-md-3 {
        max-width: 30%;
        flex: 0 0 30%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 14%;
        flex: 0 0 14%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 86%;
        flex: 0 0 86%;
    }

    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    .user-topbar-text {
        font-size: 17px;
    }

    .topbar-user h2 {
        font-size: 18px;
    }

    .mt--76 {
        margin-top: -46px;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 14%;
        flex: 0 0 14%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 86%;
        flex: 0 0 86%;
    }

    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }

    .loginForm .btn {
        font-size: 13px;
    }
}

@media (min-width: 1200px) and (max-width: 1300px) {
    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }

    .dietary-requirements-red .whiteCheckbox {
        padding: 16px 14px;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    .past-surveys-title span {
        margin-left: 12px;
        display: inline-block;
    }

    #pastsurveyspage .col-md-9, .surveys-list .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    #pastsurveyspage .col-md-3, .surveys-list .col-md-3 {
        max-width: 34%;
        flex: 0 0 34%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 14%;
        flex: 0 0 14%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 86%;
        flex: 0 0 86%;
    }

    .user-topbar-text {
        font-size: 15px;
    }

    .topbar-user h2 {
        font-size: 16px;
    }

    .logout-top .OptiMe-pay-img {
        width: 100px;
    }

    .topbar-header {
        padding: 24px 0;
    }

    .mt--76 {
        margin-top: -46px;
    }

    .loginForm .btn {
        font-size: 12px;
    }
}

@media (min-width: 1100px) and (max-width: 1200px) {
    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }

    .dietary-requirements-red .whiteCheckbox {
        padding: 16px 14px;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 16%;
        flex: 0 0 16%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 84%;
        flex: 0 0 84%;
    }

    .past-surveys-title span {
        margin-left: 12px;
        display: inline-block;
    }

    #pastsurveyspage .col-md-9, .surveys-list .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    #pastsurveyspage .col-md-3, .surveys-list .col-md-3 {
        max-width: 34%;
        flex: 0 0 34%;
    }

    .user-topbar-text {
        font-size: 14px;
    }

    .topbar-user h2 {
        font-size: 15px;
    }

    .logout-top .OptiMe-pay-img {
        width: 80px;
    }

    .logout-top {
        font-size: 13px;
    }

    .topbar-header {
        padding: 24px 0;
    }

    .mt--76 {
        margin-top: -46px;
    }

    .radarchartdata-list li {
        width: 24%;
        margin-bottom: 15px;
    }

    .loginForm .btn {
        font-size: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1100px) {
    .dietary-requirements-red .whiteCheckbox {
        padding: 16px 14px;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-3 {
        max-width: 33%;
        flex: 0 0 33%;
    }

    .dietary-requirements-red .whiteCheckbox-checkbox .col-md-9 {
        max-width: 66%;
        flex: 0 0 66%;
    }

    .dietary-requirements-red .col-lg-5 {
        max-width: 50%;
        flex: 0 0 50%;
    }

    .email-notifications-check .col-md-1 {
        max-width: 20%;
        flex: 0 0 20%;
    }

    .email-notifications-check .col-md-11 {
        max-width: 80%;
        flex: 0 0 80%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-1 {
        max-width: 18%;
        flex: 0 0 18%;
    }

    .goalBoxNew .whiteCheckbox-checkbox .col-md-11 {
        max-width: 82%;
        flex: 0 0 82%;
    }

    .past-surveys-title span {
        margin-left: 12px;
        display: inline-block;
    }

    #pastsurveyspage .col-md-9, .surveys-list .col-md-9 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    #pastsurveyspage .col-md-3, .surveys-list .col-md-3 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .radarchartdata-list li {
        width: 24%;
        margin-bottom: 15px;
    }

    .user-topbar-text {
        font-size: 12px;
    }

    .topbar-user h2 {
        font-size: 14px;
    }

    .logout-top .OptiMe-pay-img {
        width: 80px;
    }

    .logout-top {
        font-size: 13px;
    }

    .topbar-header {
        padding: 33px 0;
    }

    .mt--76 {
        margin-top: -46px;
    }

    .logout-top .logout-link {
        width: 30px;
        height: 30px;
        line-height: 28px;
    }

    .counsellingsupport {
        width: 30px !important;
        height: 30px !important;
        line-height: 28px !important;
    }

    .topbar-user li, .logout-top li {
        margin-left: 6px;
    }

    .logout-link img {
        width: 20px;
    }

    .counsellingsupport img {
        width: 20px;
    }

    .loginForm .btn {
        font-size: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {
    .user-topbar-text {
        font-size: 12px;
    }

    .topbar-user h2 {
        font-size: 14px;
    }

    .logout-top .OptiMe-pay-img {
        width: 70px;
    }

    .logout-top {
        font-size: 12px;
    }

    .radarchartdata-list li {
        width: 25%;
        margin-bottom: 15px;
    }

    .logout-top .logout-link {
        width: 30px;
        height: 30px;
        line-height: 28px;
    }

    .logout-top .counsellingsupport {
        width: 30px;
        height: 30px;
        line-height: 28px;
    }

    .topbar-user li, .logout-top li {
        margin-left: 10px;
    }

    .logout-link img, .logout-top .counsellingsupport img {
        width: 20px;
    }

    .topbar-header {
        padding: 33px 0;
    }

    .mt--76 {
        margin-top: -36px;
    }

    .loginForm .btn {
        font-size: 10px;
    }
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 1000px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .pastsurveys-ml-0 {
        margin-left: 0 !important;
        margin-top: 30px;
    }

    .topbar-header {
        padding: 24px 0;
    }

    #menu.hidden {
        top: 22px;
        display: none;
    }

    .user-topbar-text {
        font-size: 12px;
    }
}

@media (min-width: 768px) {
    .hideDesktop {
        display: none !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .d-none {
        display: block !important;
    }
}

@media (min-width: 576px) {
    #logout .modal-dialog, #profilesaved .modal-dialog, #alerts .modal-dialog {
        max-width: 600px;
    }
}

@media (max-width: 767px) {
    .mobile-pg3-mt30 {
        margin-top: 20px;
    }

    .mobile-pg3-mt30 .registrationlabel {
        margin-top: 0;
    }

    #pg3 .mt-4 {
        margin-top: 10px !important;
    }

    #pg3 .form-group {
        margin-bottom: 14px;
    }

    .registerLogo {
        height: 140px;
        width: auto;
    }

    .mobile-center-questionnaire {
        text-align: center;
    }

    .mobile-center {
        text-align: center;
    }

    .contentGoalBoximgvio {
        margin-top: 36px;
    }

    .mobile-only-optime.mobile-collapse-text {
        margin-bottom: 40px;
    }

    .loginLogo img {
        height: 130px;
    }

    .mobile-awards-list {
        border-top: 1px solid var(--secondary);
        width: 100%;
        padding: 24px 0;
        margin-bottom: 0;
        margin-top: 20px;
    }

    .bbredbotm {
        margin-bottom: 50px;
        border-bottom: 1px solid var(--secondary);
    }

    .questionnairepage .red-title .mobile-collapse-text a, .awardspage .red-title .mobile-collapse-text a {
        color: var(--themered);
    }

    .mobile-only-none {
        display: none !important;
    }

    .mobile-collapse-text a {
        color: var(--textcolor);
    }

    .viewawardslink {
        font-size: 13px;
        padding: .5rem 1rem;
    }

    #relatedBtn {
        width: 100%;
    }

    .counsellingsupport {
        margin-top: 10px !important;
        background-color: #fff;
        color: var(--themeblue) !important;
        -webkit-border-radius: 35px !important;
        -moz-border-radius: 35px !important;
        border-radius: 35px !important;
        height: 43px;
        font-size: 15px;
        line-height: 26px;
        padding: .5rem 2.5rem;
        display: inline-block !important;
        width: 80% !important;
    }

    .mobile-mt-10 {
        margin-top: 10px !important;
    }

    .mobile-only-optime .loginLogo {
        height: 115px;
    }

    .self-reflection-mobile-text {
        line-height: 18px;
        margin-top: 15px;
    }

    .wellbeing-support-mobile-text {
        line-height: 18px;
        margin-top: 15px;
    }

    #menu {
        z-index: 111111;
    }

    #sidebar-wrapper {
        width: 100%;
        z-index: 11111;
    }

    #sidebar-wrapper.hidden {
        left: -100%;
    }

    .sidebar-nav {
        width: 100%;
        top: 20px;
    }

    .sidebar-nav li {
        width: 25%;
        margin: 10px 0px 50px 0px;
    }

    .sidebar-nav li:first-child {
        margin-top: 10px !important;
    }

    .selfreflectionmodal .slider {
        height: 20px;
    }

    .title-mobile {
        display: block;
    }

    .title-mobile-none {
        display: none;
    }

    .mobile-text-center {
        text-align: center;
    }

    .mt-mobile-70 {
        margin-top: 70px;
    }

    .dietary-requirements-red { /*margin-left:15px;margin-right:15px;*/
    }

    #archiveForm .col-md-8 .row {
        width: 70%;
        margin: 0 auto;
    }

    .contentImg {
        height: 26vh;
    }

    .red-title, #assessmentContent h4, .surveys-list .past-surveys-title {
        text-align: center;
    }

    .loginForm {
        padding-left: 0 !important;
        padding-right: 0px !important;
    }

    .radarchartdata-list li {
        width: 32%;
        margin-bottom: 25px;
    }

    .topbar-header {
        left: 0;
        bottom: 0;
        z-index: 3;
        padding-left: 0px;
        width: 100%;
        min-height: 95px;
        padding-top: 0px;
        padding-bottom: 0px;
        border-top: 1px solid #7D8184;
        background: #ffffff;
    }

    .hamburger-box {
        margin-bottom: 18px;
        height: 28px;
        display: none;
    }

    .myawardsboxhomelist ul li {
        width: 49%;
    }

    .pastsurveys-ml-0 {
        margin-left: 0 !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .past-surveys-title a {
        margin-left: 0 !important;
    }

    #loginForm {
        padding-left: 0;
        padding-right: 0px;
    }

    .mt--76 {
        margin-top: 0;
    }

    .pt-sm-mobile {
        padding-top: 0 !important;
    }

    #content_select {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    #content_select2 {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    #content_resetfilter {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }

    #archiveForm .red-title {
        margin-bottom: 15px !important;
    }

    .mt-mobile-0 {
        margin-top: 0px !important;
    }

    #footer {
        position: relative;
        margin-bottom: -60px;
        font-size: 12px;
        text-align: center;
    }

    .dashboardpage .col-11 {
        padding: 0 !important;
    }

    .p-0-mobile {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .p-15-mobile {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .dashboardpage .email-notifications-check .whiteCheckbox_indicator {
        top: 24px;
    }

    .mt-mobile-30 {
        margin-top: 30px !important
    }

    .mt-mobile-0 {
        margin-top: 0px !important
    }

    .lowright {
        padding-left: 0px;
    }

    .lowleft {
        padding-right: 0px;
    }

    .selfreflectionmodal h5 {
        font-size: 10px;
    }

    #assessmentContent {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .past-surveys-title span {
        width: 70%;
    }

    .upcoming-awards-bg, .mlr-0-mobile {
        margin-left: 0 !important;
        margin-right: 0px !important;
    }

    .upcoming-awards-bg .secondaryBackground {
        padding: 15px;
    }

    .awardsbox {
        background-color: #70B9B1 !important;
    }

    .recipe-img .articleImage {
        height: auto;
    }

    #page-content-wrapper {
        margin-bottom: 0 !important;
    }

    .past-surveys-title img {
        margin-top: 10px;
    }

    .awardsbox h3, .awardsboxtext, .upcoming-awards p, .upcoming-awards h3 {
        font-size: 14px;
    }

    .sidebar-brand {
        left: 0px;
        bottom: 0px;
        display: none !important;
    }

    #page-content-wrapper {
        padding-top: 0px !important;
    }

    #wrapper {
        padding-left: 0;
        padding-bottom: 95px;
    }

    .hamburger.hamburger--squeeze.is-active .hamburger-inner { /*width:30px*/;
        background-color: #FFF !important;
    }

    .hamburger--squeeze.is-active .hamburger-inner:after {
        background-color: #FFF !important;
    }

    .hamburger.hamburger--squeeze.is-active .hamburger-box {
        margin-top: 5px;
    }

    .mobile-only-optime {
        width: 100% !important;
        display: block !important;
    }

    .getting-text {
        color: #FFF;
        font-size: 16px;
    }

    .nav-item.mobile-only-optime a {
        width: 100%;
        display: block;
        height: auto;
        margin-top: 45px;
    }

    .mobile-only-optime, .mobile-only-block {
        display: block !important;
    }

    #profilesaved .modal-body, #logout .modal-body, #alerts .modal-body {
        padding: 20px !important;
    }

    .mt-64, #loginForm {
        margin-top: 60px;
    }

    .loginForm .form-group {
        margin-bottom: 10px;
    }

    #loginForm .btn, .reset-btn, .login-btn {
        margin: 0 auto 20px;
        width: 206px !important;
    }

    .goalBoxNew {
        margin-top: 40px !important;
    }

    .goalBoxNew .goal-title {
        text-align: center;
    }

    .mt-mobile-50 {
        margin-top: 40px;
    }

    .mobile-nve-bar {
        display: block !important;
        width: 100%;
        position: absolute;
        left: 0;
        color: #FFF;
        text-align: center;
    }

    #selfSubmit {
        margin: 0 auto;
    }

    .jcarousel-wrapper .jcarousel-control-prev, .jcarousel-wrapper .jcarousel-control-next {
        display: block;
    }

    #helpfulcontentslider ul {
        margin-right: 0px;
        margin-left: 0px;
    }

    .jcarousel-control-prev, .jcarousel-control-next {
        top: 98%;
    }

    .questionnairepage .jcarousel li {
        padding: 0;
    }

    .video-sub-page .jcarousel-wrapper {
        margin-bottom: 40px;
    }

    .videoGoalScroll {
        max-height: inherit;
    }

    #workshopModal .modal-body .col-12.row {
        padding: 0;
        margin: 0;
    }

    .surveypageall .col-lg-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .surveypageall .surveyQuestion .col-md-11.mx-auto {
        padding-left: 0;
        padding-right: 0;
    }

    .questionTitle {
        font-size: 1.3rem;
        padding-left: 50px;
    }

    .registerheight-mobile {
        height: 70vh;
    }

    .reset-done {
        margin-top: 100px;
    }

    .reset-done p br {
        display: none;
    }

    .blue-title, .red-title {
        text-align: center;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .navbar {
        overflow: scroll;
    }
}

circle {
    /*fill: white;*/
}

.nav-item img {
    max-width: 30px;
}

.nav-active a img {
    margin-top: -4px;
}

div#latestwinnerspage {
    margin-top: 15px;
}

div#upcomingawardspage {
    margin-top: 15px;
}

h4.red-title, h4.blue-title {
    font-size: 12pt;
}

.popup-logo {
    margin-bottom: 15px;
}

.employer-mainpage-section {
    padding-left: 100px;
    padding-top: 100px;
}

.employerNav a {
    height: auto;
    width: 100%;
}

.employerNav a:hover {
    background-color: transparent !important;
    font-weight: 600;
}

.employerBody .navbar-nav {
    margin-left: 15px;
}

a.SelfReflection-nav {
    /*background-color: #412859;*/
}

a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

.resetfilter-btn {
    border-radius: 25px;
    width: 100%;
}

.emptyspacesurveys {
    min-height: calc(75vh - 215px);
}

.emptyspaceawards {
    min-height: calc(95vh - 215px);
}

.fitHeight {
    height: fit-content;
}

.employerfooter {
    margin-left: 100px;
}

.welcome-employer a {
    font-size: inherit;
    font-family: inherit;
}

.float-right {
    float: right;
}

.marginleftauto {
    margin-left: auto;
}

.grey-btn {
    background-color: var(--textcolor);
    color: var(--white);
}

.red-btn {
    background-color: var(--themered);
    color: var(--white);
}

.yellow-btn {
    background-color: var(--themegreen);
    color: var(--white);
}

.green-btn {
    background-color: var(--skybluedark);
    color: var(--white);
}

img.companylogopreview {
    max-width: 100px;
}

.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

div#google_translate_element {
    /*float: right;*/
    display: none !important;
}

div#google_translate_element a {
    color: black !important;
    text-decoration: none !important;
}

.teamMemberTable th, .teamMemberTable td {
    padding: .25rem;
    vertical-align: middle;
    border-top: none;
}

.mobile-menu-bottom-icons {
    color: black;
    list-style: none;
    padding-left: 0;
    display: flex;
}

.mobile-menu-bottom-icons li {
    width: 20%;
    /* width:25%; Favourites Link if 4 icons instead of 5 icons */
    text-align: center;
}

.subnav-content-desktop {
    color: white;
    background-color: var(--themeblue);
    margin-left: 75px;
    padding: 10px;
    border-radius: 15px;
}

.subnav-content-mobile {
    color: white;
    background-color: var(--themeblue);
    padding: 10px;
    border-radius: 15px;
    position: absolute;
    bottom: 100px;
    right: 15px;
}

.subnav-content-desktop a,
.subnav-content-mobile a {
    color: white;
}

.subnav-content-desktop ul,
.subnav-content-mobile ul {
    list-style: none;
    padding-left: 0;
    min-width: 150px;
    margin-bottom: 0;
}

.subnav-content-desktop li {
    text-align: left;
    line-height: 20px;
}


.subnav-content-mobile li {
    text-align: left;
    margin: 6px 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 20px;
}

.team-member-email-form {
    border: 2px solid #ccc50d;
    border-radius: 25px;
}

.teamMemberTable thead th {
    border-bottom: none;
}

.table-blue-title {
    color: var(--themeblue);
    font-size: 14pt;
    font-weight: 600;
}


.textColor td {
    color: var(--textcolor) !important;
}

.btnStyling {
    padding: .5rem 2.5rem;
    border-radius: 25px;
}


.wellBeingRange {
    width: 100%;
    margin: 4.8px 0;
    background-color: transparent;
    -webkit-appearance: none;
}


.wellBeingRange::-webkit-slider-runnable-track {
    background: #4a71ba;
    border-radius: 25px;
    width: 100%;
    height: 16.4px;
    cursor: pointer;
}

.wellBeingRange::-webkit-slider-thumb {
    margin-top: -6.8px;
    width: 26px;
    height: 26px;
    background: #ffffff;
    border: 1.8px solid rgba(0, 0, 30, 0.5);
    border-radius: 15px;
    cursor: pointer;
    -webkit-appearance: none;
}

.wellBeingRange:focus::-webkit-slider-runnable-track {
    background: #5c7fc1;
}

.wellBeingRange::-moz-range-track {
    background: #4a71ba;
    border-radius: 25px;
    width: 100%;
    height: 16.4px;
    cursor: pointer;
}

.wellBeingRange::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: #ffffff;
    border: 1.8px solid rgba(0, 0, 30, 0.5);
    border-radius: 15px;
    cursor: pointer;
}

.wellBeingRange::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
    width: 100%;
    height: 16.4px;
    cursor: pointer;
}

.wellBeingRange::-ms-fill-lower {
    background: #4165aa;
    border: 2px solid #010101;
    border-radius: 50px;
}

.wellBeingRange::-ms-fill-upper {
    background: #4a71ba;
    border: 2px solid #010101;
    border-radius: 50px;
}

.wellBeingRange::-ms-thumb {
    width: 26px;
    height: 26px;
    background: #ffffff;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}

.wellBeingRange:focus::-ms-fill-lower {
    background: #4a71ba;
}

.wellBeingRange:focus::-ms-fill-upper {
    background: #5c7fc1;
}

@supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    .wellBeingRange {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}

.custom-range {
    background-color: unset !important;
}

.mentalPillar::-webkit-slider-thumb {
    background: var(--lightpurple) !important;
}

.mentalPillar::-moz-range-thumb {
    background: var(--lightpurple) !important;
}

.environmentalPillar::-webkit-slider-thumb {
    background: var(--skybluedark) !important;
}

.environmentalPillar::-moz-range-thumb {
    background: var(--skybluedark) !important;
}

.financialPillar::-webkit-slider-thumb {
    background: var(--themeblue) !important;
}

.financialPillar::-moz-range-thumb {
    background: var(--themeblue) !important;
}

.socialPillar::-webkit-slider-thumb {
    background: var(--themegreen) !important;
}

.socialPillar::-moz-range-thumb {
    background: var(--themegreen) !important;
}

.professionalPillar::-webkit-slider-thumb {
    background: var(--themered) !important;
}

.professionalPillar::-moz-range-thumb {
    background: var(--themered) !important;
}

.physicalPillar::-webkit-slider-thumb {
    background: #412859 !important;
}

.physicalPillar::-moz-range-thumb {
    background: #412859 !important;
}

.fancyRange {
    -webkit-appearance: none;
    margin: 20px 0;
    width: 100%;
}

.fancyRange:focus {
    outline: none;
}

.fancyRange::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: #7d8184;
    border-radius: 25px;
}

.fancyRange::-webkit-slider-thumb {
    height: 35px;
    width: 5px;
    background: #7d8184;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -31px;
    z-index: 15 !important;
}

.fancyRange:focus::-webkit-slider-runnable-track {
    background: #7d8184;
}

.range-wrap {
    width: 100%;
    position: relative;
}

.range-value {
    position: absolute;
    top: -50%;
}

.range-value span {
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #7d8184;
    color: #fff;
    font-size: 12px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 6px;
}


.fancyRange {
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px
}

datalist {
    z-index: 10;
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: -24px;
    padding-top: 0px;
}

option {
    z-index: 2;
    width: 25px;
    justify-content: center;
    align-items: end;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.dynamic-svg {
    width: 100%;
}

.grayedOut {
    filter: opacity(0.2);
}

.styledSelect {
    background-color: rgb(7, 93, 115);
    border-radius: 35px;
    color: white;
}

.contentBox:hover .contentImgBox .contentImg {
    border: 1px solid var(--themered);
}

.custom-select:hover .select-selected {
    filter: brightness(110%);
}

.radarchartcolor:hover {
    filter: brightness(115%);
}

.customCheckbox:hover {
    filter: brightness(110%);
}

.resetLink-btn {
    background-color: #C4BD03;
    color: var(--white);
}

.resetLink-btn:hover {
    background-color: var(--themered);
    color: var(--white);
}

.professionalname {
    word-break: keep-all;
}

.toast-info {
    border-radius: 10px !important;
    color: black !important;
    background-color: white !important;
}

.toast-info .toast-title {
    margin-bottom: 20px;
}

#toast-container > .toast-info {
    background-image: none !important;
}

#toast-container > div {
    padding: 15px !important;
}

.disabledCheckbox:hover {
    filter: brightness(100%) !important;
}

.disabledCheckbox {
    pointer-events: none !important;
}

.contentBox.related .contentImgBox .contentImg {
    border: 4px solid var(--skybluedark);
}

#highcharts-data-table-0 {
    display: table !important;
}

h1, h2, h3, h4, h5, h6, div, p, span, table, header, footer {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--primary);
}

.btn-light {
    background-color: var(--lightpurple);
    color: white;
}

.btn-outline-light {
    color: var(--lightpurple);
    border-color: var(--lightpurple);
}