/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

html {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

html {
    overflow-x: hidden;
}

#mainContainer {
    height: 100%;
    z-index: 1;
}

/*GENERAL TEMPLATE STYLING*/
#outerframeContainer.outerframe {
    padding: 0;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

#groupDivWrapper {
    margin-bottom: 100px;
    background-color: var(--sentis-body-background-color);
}

@media only screen and (max-width: 768px) {
    #groupDivWrapper {
        padding: 2% 0;
        margin-bottom: 40px !important;
    }

    #main-col {
        margin-top: 0;
    }
}

.no-gutters {
    padding-right:0;
    padding-left:0;
}

/*progress*/
#topProgressBar {
    height: 11px;
    margin-top: 10px;
}

#topProgressBar .top-progress-bar {
    height: 8px;
    overflow: hidden;
    background-color: var(--sentis-progress-background-color);
    width: 100%;
    z-index: 100;
    margin: 0;
}

.progress-bar {
    background-color: var(--sentis-progress-foreground-color);
}

/*question - desktop only*/
@media only screen and (min-width: 768px) {
    #sideQuestionPane {
        /*padding-right: 0;*/
    }
}

/*image*/
#sideImagePane {
    background-size: cover;
    height: 100vh;
    position: fixed;
    right: 0;

    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: top;
}

/*heading*/
#topInfoBar {
    width: 100%;
    padding-top: 7px;
}

#topInfoBar img.logo {
    margin: auto;
    padding: 10px 0;
}

#topInfoBar span.survey-title {
    margin: 10px auto;
    text-align: center;
    color: var(--sentis-survey-title-font-color);
    font-family: 'Raleway', sans-serif;   /* todo make variable */
    font-size: 1.5em;
    font-weight: 300;  /* todo make variable */
}

/*hides top info bar (logo and survey title) from all mobile devices and landscape tablets */
@media
screen and (max-width: 767px),
screen and (min-width: 768px) and (max-width: 1080px) and (orientation: landscape) {
    #topInfoBar {
        display: none;
    }
}

/*groups*/
.group-description {
    text-align: center;
    color: var(--sentis-group-description-font-color);
    font-size: 1.5em;
    font-weight: 500;  /* todo make variable */
    padding: 1%;
    background: #FFF;
}

/*todo should we just remove this??*/
.group-description-underline {
    width: 75px;
    height: 1px;
    margin: 1% auto 1.5%;
    border-bottom: 2px solid var(--sentis-template-accent-color);
}

@media screen and (max-width: 798px) {
    .group-description {
        margin-top: 1%;
    }
}

/*fonts*/
.question-title-container p,
.completed-text p,
.question-title-container ul,
.completed-text ul,
.question-title-container ol,
.completed-text ol {
    font-size: 1.2em;
    font-weight: 600;  /* todo make variable */
    line-height: 24px;
    color: var(--sentis-question-font-color);
}

.question-title-container em {
    color: #7F7F7F;  /* todo make variable */
    font-size: 90%;
}

.question-title-container em,
.completed-text em,
.question-title-container i,
.completed-text i {
    font-weight: normal;
}

/*errors*/
.question-title-container .question-error-text {
    color: var(--sentis-error-message-color);
}

a {
    color: var(--sentis-blue-md);
}

.questiontext p strong, .questiontext p b {
    color: var(--sentis-bold-font-color);
}

p {
    /*
    if you adjust this, please confirm the
    question-title-container padding is still correct
    */
    margin: 0 0 1em;
}

p:last-of-type {
    margin: 0;
}

/*16 px prevents zoom for mobile input focus*/
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
    font-size: 16px !important;
}
/*END OF GENERAL TEMPLATE STYLING*/

/*NAVIGATION*/
/*nav container*/
#navigator-container {
    z-index: 999;
    display: inline-flex;
    padding: 10px 15px;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgba(245, 246, 247, .5);
}

.navigator-button-container {
    display: flex;
}

.navigator-button {
    margin: auto 0;
    display: table;
}

.navigator-button.sentis-info-btn {
    margin: auto;
}

/*next btn*/
.btn-primary,
.btn-primary:active,
.btn-primary:focus {
    color: #ffffff;
    background-color: var(--sentis-next-button-color);
    border-color: var(--sentis-next-button-color);
    outline: none;
}

.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary.disabled:hover,
.btn-primary.disabled:active:hover,
.swal-button.btn-primary:not([disabled]):hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.disabled:active:focus,
.btn-primary.disabled:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus, .btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background-color: var(--sentis-next-button-color-hover);
    border-color: var(--sentis-next-button-color-hover);
    outline: none;
}

#movenextbtn,
#movesubmitbtn {
    max-width: 400px;
    width: 100%;
    margin: 10px auto;
    display: block;
    float: left;
    font-size: 150%;
    font-weight: bolder;  /* todo make variable */
    padding-top: 5px;
    padding-bottom: 5px;
}

/*next btn animation*/
#movenextbtn {
    position: relative;
    transition: background-color 300ms ease-out;
}

#movenextbtn span {
    display: inline-block;
    position: relative;
    transition: all 300ms ease-out;
}

#movenextbtn:not(.disabled):hover span {
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%);
}

#movenextbtn i.fa-arrow-right {
    font-size: 18px;
    position: absolute;
    width: 1em;
    opacity: 0;
    top: 30%;
    -webkit-transform: translateX(-1em);
    transform: translateX(-1em);
    transition: all 300ms ease-out;
}

#movenextbtn i.fa-arrow-right * {
    stroke-width: 5;
}

#movenextbtn:not(.disabled):hover i.fa-arrow-right {
    opacity: 1;
    -webkit-transform: translateX(20%);
    transform: translateX(20%);
}

/*previous btn*/
#moveprevbtn {
    padding: 7px 0;
    margin: 10px auto;
    min-width: 40px;
    width: 100%;
}

.btn-default,
.btn-default:focus,
.btn-default:active {
    color: #ffffff;
    background-color: #a1a9b1;  /* todo make variable? */
    border-color: #a1a9b1;  /* todo make variable? */
    outline: none;
}

.btn-default:hover,
.btn-default.disabled:hover,
.btn-default.disabled:active:hover,
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.disabled:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.disabled:focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
    color: #ffffff;
    background-color: #959da5;  /* todo make variable? */
    border-color: #959da5;  /* todo make variable? */
    outline: none;
}

/*sentis info pop up*/
#sentisInfo {
    height: 25px;
    width: 25px;
    padding: 0;
    margin: 10px auto;
    background-color: transparent;
    border: none;
    font-size: 25px;
    line-height: 1;
    color: var(--sentis-template-accent-color);
    outline: none;
}

#sentisInfoModal p {
    font-size: 14px;
}

#sentisInfoModal .modal-footer p {
    display: inline-block;
    float: left;
    margin: 3px;
}

.powered-by {
    max-width: 75px;
    width: auto;
    height: auto;
}

.nav-scroll-note {
    display: none;
    color: #333;
    font-style: italic;
    font-size: 12px;
    text-align: center;
    position: absolute;
    margin: 0 -15px;
    top: 7px;
    width: 100%;
}

/*NAVIGATION*/
/*mobile*/
@media screen and (max-width: 768px) {
    body, html {
        height: 100%;
    }

    #movenextbtn[disabled],
    #movenextbtn[disabled]:hover,
    #movenextbtn[disabled]:active,
    #movesubmitbtn[disabled],
    #movesubmitbtn[disabled]:hover,
    #movesubmitbtn[disabled]:active {
        background-color: var(--sentis-next-button-color-hover);
        border-color: var(--sentis-next-button-color-hover);
    }

    #moveprevbtn[disabled],
    #moveprevbtn[disabled]:hover,
    #moveprevbtn[disabled]:active {
        background-color: #959da5;  /* todo make variable ? */
        border-color: #959da5;   /* todo make variable ? */
    }

    .sentis-nav-opacity {
        opacity: 0.7;
        transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -webkit-transition: opacity .15s ease-in-out;
    }

    .push-nav-down .navigator-button-container {
        transform: translateY(10px);
        transition: transform .5s ease-in-out;
    }

    .push-nav-up .navigator-button-container {
        transform: translateY(0px);
        transition: transform .5s ease-in-out;
    }

    .sentis-nav-opacity.push-nav-down .nav-scroll-note {
        display: block;
    }
}
/*END OF NAVIGATION*/

/*QUESTIONS*/
.question-valid-container {
    display: none;
}

.question-container {
    margin-bottom: 0;
    padding-bottom: 1.5em;
}

.question-container {
    border: none;
}

.question-title-container {
    padding: 1em;
}

.question-help-container:empty {
    display: none;
}

.ls-em-tip {
    display: none;
}

/*question container and divider*/
.hide-question-title-container .question-title-container {
    display: none;
}

body .question-container ~ .question-container .question-title-container {
    margin-top: 2em;
}

body .question-container ~ .question-container .sentis-qn-divider {
    position: relative;
    height: 1px;
}

body .question-container ~ .question-container .sentis-qn-divider.div-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    width: 50%;
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--sentis-template-accent-color), transparent);
}

body .question-container ~ .question-container .sentis-qn-divider.div-arrow-down:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -6px;
    left: calc(50% - 8px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: white;
    border-bottom: 1px solid var(--sentis-template-accent-color);
    border-right: 1px solid var(--sentis-template-accent-color);
}

/*qn types to hide divider and remove margin top from*/
body .question-container.hide-qn-divider .question-title-container,
body .append-question .question-container .question-title-container,
body .question-container.boilerplate .question-title-container,
body .question-container.col-xs-6 .question-title-container,
body .question-container.col-sm-6 .question-title-container,
body .question-container.hide-question-title-container .question-title-container {
    margin-top: 0;
}

body .question-container.hide-qn-divider .sentis-qn-divider,
body .append-question .question-container .sentis-qn-divider,
body .question-container.boilerplate .sentis-qn-divider,
body .question-container.col-xs-6 .sentis-qn-divider,
body .question-container.col-sm-6 .sentis-qn-divider,
body .question-container.hide-question-title-container .sentis-qn-divider {
    display: none;
}

/*appended questions*/
.append-question .question-container {
    margin-bottom: 20px;
    border-radius: 2px;
    background-color: #f5f6f7;
}

.append-question .question-title-container {
    background-color: transparent;
    padding: .75em 10px;
}

.append-question .question-title-container p {
    font-size: 1.0em;
}

/*todo check that we need all of this stuff*/
tr.append-question td.append-question-cell {
    padding: 0!important;
}

tr.append-question .question-container {
    margin-bottom: 0;
    text-align: left;
    background-color: #f5f6f7;
}

tr.append-question .answers-list {
    padding-bottom: 0;
}

tr.append-question .answers-list .list-unstyled {
    margin-bottom: 0;
}

tr.append-question .ls-answers .control-label  {
    text-align: left;
}

/*add border to qn container for list questions like radio and multi choice*/
li.append-question .question-container {
    border: 1px solid lightgray;
}

.append-question .question-container:not(.boilerplate) .answer-container {
    font-size: 1.0em;
    padding-top: 0;
}

.append-question .question-container.boilerplate .answer-container {
    padding-top: 1em;
}

/*appended qns on mobile*/
@media screen and (min-width: 768px) {
    .append-question .question-container:not(.boilerplate) .answer-container {
        padding-bottom: 0;
    }

    tr.append-question .question-container {
        border: none;
    }
}

/*text display qns*/
.boilerplate {
    padding-bottom: 0;
}

.boilerplate .answer-container {
    display: none;
}
/*END OF QUESTIONS*/

/*ANSWERS & INPUTS*/
.answer-container {
    font-size: 1.1em;
    padding-bottom: 1em;
}

.answer-item {
    margin-bottom: 5px;
}

.multiple-short-txt .answer-container {
    padding-bottom: 1em;
}

.multiple-short-txt .answer-item.text-item:not(:first-of-type) {
    padding-top: 10px;
}


/*hiding control labels that are supposed to be hidden in lime*/
.control-label.col-sm-0 {
    display: none;
}

.ls-answers {
    padding: 0;
}

.checkbox-item input:focus + label::before,
.radio-item input:focus + ::before,
.checkbox-item label {
    outline: none !important;
}

.checkbox-item input[type="checkbox"]:checked+label::after,
.radio-item input[type="radio"]:checked+label::after {
    background-color: var(--sentis-checked-input-color);

}

.checkbox-item input[type="checkbox"]:checked+label::before {
    border: none #cccccc;
}

.checkbox-item input[type="checkbox"]:checked+label::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    border-radius: 2px;
    font-size: 10px;
}

.checkbox-item label::before,
.list-radio .radio-item label::before,
.array-flexible-row:not(.mobile-horizontal-layout):not(.tablet-horizontal-layout):not(.desktop-horizontal-layout) .radio-item label::before {
    top: 13px;
}
.checkbox-item input[type="checkbox"]:checked+label::after {
    top: 13px;
}

.list-radio .radio-item input[type="radio"]:checked+label::after,
.array-flexible-row:not(.mobile-horizontal-layout):not(.tablet-horizontal-layout):not(.desktop-horizontal-layout) .radio-item label::after {
    top: 16px;
}

.ls-answers .ls-heading th,
.ls-answers .ls-heading td {
    border: none;
}

/*tables*/
table.ls-answers {
    border-top: none;
}

table.ls-answers thead {
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.ls-answers > tbody > tr > td {
    vertical-align: middle !important;
}

/*lists (radio and checkbox)*/
.radio-list li.radio-item,
.radio-list li.radio-text-item,
.checkbox-list li.checkbox-item,
.checkbox-list li.checkbox-text-item {
    border: 1px solid lightgray;
    border-radius: 2px;
    padding: 0 10px;
}

/*labels*/
.control-label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio-list li label.radio-label,
.radio-list li label.label-radio,
.checkbox-list li label.checkbox-label,
.array-flexible-row tr.radio-list label {
    margin-bottom: 0;
    right: -20px;
    padding: 10px 20px 10px 10px;
    /*make sure the px count matches the right offset*/
    width: calc(100% - 20px);
    white-space: normal;
}

li.radio-item label::after,
li.radio-text-item label::after,
.array-flexible-row td.radio-item label::after {
    top: 13px;
}

.radio-list li.radio-text-item label,
.checkbox-list li.checkbox-text-item label {
    width: 100%;
}

.checkbox-item label::after {
    top: 11px;
}

.other-text-item {
    padding: 0;
}

.othertext-label-checkox-container {
    margin-bottom: 2px;
    padding: 0;
}
/*END OF ANSWERS & INPUTS*/

/*START OF ARRAYS
start of default array view
NOTE: default view is vertical view for this template*/
/*TODO do i need to add the vertical class here for diff layouts? IS THERE A BETTER WAY TO DO THIS? WITHOUT USING JS?? LOOK INTO ADDING IT TO TWIG MAYBE*/
.array-flexible-row .answer-container .ls-answers tr th.answertext {
    padding: 1% 0;
    font-size: 1.1em;
}

/*table styling*/
.dir-ltr .array-flexible-row table.ls-answers,
.dir-ltr .array-flexible-row table.ls-answers thead,
.dir-ltr .array-flexible-row table.ls-answers tbody,
.dir-ltr .array-flexible-row table.ls-answers th,
.dir-ltr .array-flexible-row table.ls-answers td,
.array-flexible-row table.ls-answers tr {
    text-align: left;
}

.array-flexible-row table.ls-answers,
.array-flexible-row table.ls-answers tbody,
.array-flexible-row table.ls-answers th,
.array-flexible-row table.ls-answers td:not(.ls-irrelevant),
.array-flexible-row table.ls-answers tr:not(.ls-irrelevant) {
    display: block;
}

.array-flexible-row table.ls-answers thead {
    display: none;
}

.array-flexible-row table.ls-answers tr:not(.grid-header-row) {
    padding-top: 0.5em;
    margin-bottom: 1.5em;
}

.array-flexible-row .ls-answers > tbody > tr > td.radio-item,
.array-flexible-row .ls-answers > tbody > tr > td.checkbox-item {
    /*min-height: 44px;*/
}

.array-flexible-row .ls-answers > tbody > tr > td.radio-item,
.array-flexible-row .ls-answers > tbody > tr > td.checkbox-item {
    padding: 0 0 0 10px;
}

table.ls-answers > tbody > tr:hover {
    background-color: transparent;
}

/*label styling*/
.dir-ltr .array-flexible-row table.ls-answers .ls-label-xs-visibility > * {
    left: auto;
    white-space: normal;
}

.array-flexible-row table.ls-answers .radio-item .ls-label-xs-visibility,
.array-flexible-row table.ls-answers .checkbox-item .ls-label-xs-visibility {
    line-height: inherit;
    text-indent: initial;
}

.array-flexible-row table.ls-answers .ls-label-xs-visibility {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    overflow: initial;
}

.dir-ltr .array-flexible-row table.ls-answers .radio-item .ls-label-xs-visibility,
.dir-ltr .array-flexible-row table.ls-answers .checkbox-item .ls-label-xs-visibility {
    margin-left: 0;
}

.dir-ltr .array-flexible-row table.ls-answers .radio-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row table.ls-answers .checkbox-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row table.ls-answers .radio-item label.ls-label-xs-visibility::after,
.dir-ltr .array-flexible-row table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
    margin-left: -20px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .dir-ltr .array-flexible-row  table.ls-answers .radio-item label.ls-label-xs-visibility::before,
    .dir-ltr .array-flexible-row  table.ls-answers .radio-item label.ls-label-xs-visibility::after {
        margin: 0;
    }
}

.array-flexible-row table.ls-answers .ls-label-xs-visibility > * {
    position: relative;
    top: auto;
    width: auto;
    height: auto;
    overflow: auto;
}

/*custom styling*/
.radio-array {
    border: none;
}

.array-flexible-row tr.radio-list .answertext {
    border: none;
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-bold-font-color);
}

.array-flexible-row .radio-array .answer-item label br {
    display: none;
}

.radio-array td.grey-answer-option {
    margin-top: 1.5em;
}

.array-flexible-row .radio-array .code-to-move {
    float: left;
    padding-right: 5px;
}
/*end of default array view*/

/*start of horizontal arrays*/
.array-flexible-row.desktop-horizontal-layout .answer-container .ls-answers tbody tr th,
.array-flexible-row.tablet-horizontal-layout .answer-container .ls-answers tbody tr th,
.array-flexible-row.mobile-horizontal-layout .answer-container .ls-answers tbody tr th,
.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers tbody tr td,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers tbody tr td,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers tbody tr td {
    padding: 8px;
    text-align: center;
}

/*table styling*/
.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers thead th,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers thead th,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers thead th {
    padding: 0;
    text-align: center;
    font-size: 1em;
}

.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers tbody th,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers tbody th,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers tbody th {
    font-size: 1em;
}

.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers tbody th,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers tbody th,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers tbody th,
.array-flexible-row.desktop-horizontal-layout table.ls-answers tr,
.array-flexible-row.tablet-horizontal-layout table.ls-answers tr,
.array-flexible-row.mobile-horizontal-layout table.ls-answers tr {
    text-align: right;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers,
.array-flexible-row.tablet-horizontal-layout table.ls-answers,
.array-flexible-row.mobile-horizontal-layout table.ls-answers {
    display: table;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers thead,
.array-flexible-row.tablet-horizontal-layout table.ls-answers thead,
.array-flexible-row.mobile-horizontal-layout table.ls-answers thead {
    display: table-header-group;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers tbody,
.array-flexible-row.tablet-horizontal-layout table.ls-answers tbody,
.array-flexible-row.mobile-horizontal-layout table.ls-answers tbody {
    display: table-row-group;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers tr:not(.ls-irrelevant),
.array-flexible-row.tablet-horizontal-layout table.ls-answers tr:not(.ls-irrelevant),
.array-flexible-row.mobile-horizontal-layout table.ls-answers tr:not(.ls-irrelevant) {
    display: table-row;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers th,
.array-flexible-row.tablet-horizontal-layout table.ls-answers th,
.array-flexible-row.mobile-horizontal-layout table.ls-answers th,
.array-flexible-row.desktop-horizontal-layout table.ls-answers td:not(.ls-irrelevant),
.array-flexible-row.tablet-horizontal-layout table.ls-answers td:not(.ls-irrelevant),
.array-flexible-row.mobile-horizontal-layout table.ls-answers td:not(.ls-irrelevant) {
    display: table-cell;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers > tbody > tr:not(.grid-header-row):hover,
.array-flexible-row.tablet-horizontal-layout table.ls-answers > tbody > tr:not(.grid-header-row):hover,
.array-flexible-row.mobile-horizontal-layout table.ls-answers > tbody > tr:not(.grid-header-row):hover {
    background-color: #f5f6f7;
}

/*label styling*/
.array-flexible-row.desktop-horizontal-layout table.ls-answers .ls-label-xs-visibility,
.array-flexible-row.tablet-horizontal-layout table.ls-answers .ls-label-xs-visibility,
.array-flexible-row.mobile-horizontal-layout table.ls-answers .ls-label-xs-visibility {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    width: 17px;
    height: 17px;
    line-height: 21px;
    text-indent: 21px;
    padding: 0;
}

.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers .radio-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers .radio-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers .radio-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers .checkbox-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers .checkbox-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers .checkbox-item label.ls-label-xs-visibility::before,
.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers .radio-item label.ls-label-xs-visibility::after,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers .radio-item label.ls-label-xs-visibility::after,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers .radio-item label.ls-label-xs-visibility::after,
.dir-ltr .array-flexible-row.desktop-horizontal-layout table.ls-answers .checkbox-item label.ls-label-xs-visibility::after,
.dir-ltr .array-flexible-row.tablet-horizontal-layout table.ls-answers .checkbox-item label.ls-label-xs-visibility::after,
.dir-ltr .array-flexible-row.mobile-horizontal-layout table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
    margin-left: 0;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers .ls-label-xs-visibility > *,
.array-flexible-row.tablet-horizontal-layout table.ls-answers .ls-label-xs-visibility > *,
.array-flexible-row.mobile-horizontal-layout table.ls-answers .ls-label-xs-visibility > * {
    position: relative;
    top: auto;
    width: auto;
    height: auto;
    overflow: auto;
}

.array-flexible-row.desktop-horizontal-layout tr.radio-list label,
.array-flexible-row.tablet-horizontal-layout tr.radio-list label,
.array-flexible-row.mobile-horizontal-layout tr.radio-list label {
    right: 0;
}

.array-flexible-row.desktop-horizontal-layout td.radio-item label::after,
.array-flexible-row.tablet-horizontal-layout td.radio-item label::after,
.array-flexible-row.mobile-horizontal-layout td.radio-item label::after {
    top: 3px;
}

/*custom styling*/
.array-flexible-row.desktop-horizontal-layout tr.radio-list .answertext,
.array-flexible-row.tablet-horizontal-layout tr.radio-list .answertext,
.array-flexible-row.mobile-horizontal-layout tr.radio-list .answertext {
    border: 1px solid #ddd;
    font-weight: normal;
    color: #444444;
}

.array-flexible-row.desktop-horizontal-layout .answer-container table thead th span.desktop-11-scale,
.array-flexible-row.tablet-horizontal-layout .answer-container table thead th span.desktop-11-scale,
.array-flexible-row.mobile-horizontal-layout .answer-container table thead th span.desktop-11-scale {
    white-space: nowrap;
    margin: -50px;
}

.array-flexible-row.desktop-horizontal-layout .answer-container table thead th span.code-to-move,
.array-flexible-row.tablet-horizontal-layout .answer-container table thead th span.code-to-move,
.array-flexible-row.mobile-horizontal-layout .answer-container table thead th span.code-to-move {
    float: initial;
    padding-right: initial;
}

/*end of horizontal arrays*/
/*END OF ARRAYS*/

/*GENERAL STYLING*/
/*text alignment classes for screen sizes larger than xs*/
@media screen and (min-width: 768px) {
    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

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

    .text-sm-justify {
        text-align: justify;
    }
}

/*BOLD COLOURED FONTS*/
/*note there are two colors defined for these because we need a fallback for IE*/
/*default*/
.bold-default {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-default-md);
}

/*black*/
.bold-black {
    font-weight: 600;  /* todo make variable */
    color: #444444;  /* todo make variable */
}

/*grey*/
.bold-grey {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-grey-md);
}

/*yellow*/
.bold-yellow {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-yellow-md);
}

/*orange*/
.bold-orange {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-orange-md);
}

/*red*/
.bold-red {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-red-md);
}

/*green*/
.bold-green {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-green-md);
}

/*dark-green*/
.bold-dark-green {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-dark-green-md);
}

/*blue*/
.bold-blue {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-blue-md);
}

/*teal*/
.bold-teal {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-teal-md);
}

/*purple*/
.bold-purple {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-purple-md);
}

/*pink*/
.bold-pink {
    font-weight: 600;  /* todo make variable */
    color: var(--sentis-pink-md);
}
/*END OF BOLD COLOURED FONTS*/

/*popovers*/
.popover.right {
    min-width: 275px;
}

/*text styling*/
.lowercase {
    text-transform: lowercase;
}

/*list & grid headers*/
.list-header:not(:empty), .grid-header:not(:empty) {
    color: var(--sentis-grey-dk);
    font-family: 'Raleway', sans-serif;
    font-size: 110%;
    font-weight: 400;  /* todo make variable */
}

.list-header:not(:empty) {
    padding-bottom: 10px;
}

.sub-header {
    font-size: 1.4rem;
    font-weight: normal;  /* todo make variable */
    color: var(--sentis-grey-md);
}


/*styling for array grid headers*/
.array-flexible-row .answer-container .ls-answers tbody tr.grid-header-row {
    margin: 0;
}

.array-flexible-row .answer-container .ls-answers tbody tr.grid-header-row td {
    border: none;
    padding: 8px 0 0;
    text-align: center;
}

.array-flexible-row.desktop-horizontal-layout table.ls-answers tbody tr.grid-header-row td,
.array-flexible-row.tablet-horizontal-layout table.ls-answers tbody tr.grid-header-row td,
.array-flexible-row.mobile-horizontal-layout table.ls-answers tbody tr.grid-header-row td {
    text-align: left;
    background-color: #eaecee;
    border: 1px solid #dddddd;
}

/*styling for radio and multi choice list headers*/
div.list-header:not(:empty):not(:first-of-type) {
    padding-top: 1em;
}

div.list-header:not(:empty) {
    padding-bottom: 0.5em;
}

/*grey answer options*/
.grey-answer-option {
    opacity: 0.6;
}

.first-grey-answer-option {
    margin-top: 1.5em;
}

/*option checkbox followup*/
.optional-checkbox-followup > .question-title-container {
    display: none;
}

.optional-checkbox-followup > .answer-container {
    padding: 0 4%;
}

.optional-checkbox-followup > .answer-container .checkbox-list {
    padding-top: 0;
}

/*multitext with paired exclusive items*/
li.checkbox-item.paired-exclusive-checkbox-item {
    display: inline-block;
}

@media only screen and (max-width: 767px) {
    li.checkbox-item.paired-exclusive-checkbox-item {
        border: 1px solid lightgray;
        border-radius: 2px;
        margin-top: 5px;
        margin-left: 15px;
        width: calc(100% - 30px);
    }

    li.checkbox-item.paired-exclusive-checkbox-item label {
        margin-bottom: 0;
        right: -20px;
        padding: 10px 20px 10px 10px;
        white-space: normal;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .paired-exclusive-checkbox-item.checkbox-item label::after {
        top: 0;
    }
}
/*END OF GENERAL STYLING*/

/*MISC LIME PAGES*/
/*completed page*/
.completed-text {
    background-color: white;
    text-align: center;
    margin-bottom: 15px;
    padding: 15px 10px;
    border: none;
    box-shadow: none;
}

/*incorrect token page*/
.token-page p.text-info {
    font-weight: bold;
}

.token-page ul.alert.alert-danger {
    border: 1px dashed var(--sentis-red-md);
    margin-top: 10px;
    background: var(--sentis-red-xl);
    color: var(--sentis-red-md);
    font-weight: bold;  /* todo make variable */
}

.token-page #form-token .text-danger.asterisk {
    color: var(--sentis-red-md);
}

.token-page #form-token button[type=submit] {
    font-weight: bold;  /* todo make variable */
}
/*END OF MISC LIME PAGES*/

/*OTHER SPECIFIES*/
.checkbox-text-item label::before,
.checkbox-text-item .checkbox-item input[type="checkbox"]:checked + label::after,
.checkbox-item.extra-other label::before,
.checkbox-item.extra-other input[type="checkbox"]:checked + label::after {
    display: none;
}

/*hides IE & Edge default clear icon*/
input[type="text"]::-ms-clear {
    display: none;
}

.checkbox-list li.checkbox-text-item label,
.checkbox-list li.checkbox-item.extra-other label {
    right: 0;
    padding: 10px 0;
    width: 100%;
    margin-bottom: 0;
}

.radio-list li.radio-item.extra-other label {
    width: 100%;
}

.radio-list li.radio-text-item input,
.radio-list li.radio-item.extra-other input,
.checkbox-list li.checkbox-text-item input,
.checkbox-list li.checkbox-item.extra-other input {
    display: inline-block;
}

.radio-item.extra-other,
.checkbox-item.extra-other {
    padding: 0;
}

.radio-item.extra-other .othertext-label-checkox-container,
.checkbox-item.extra-other .othertext-label-checkox-container {
    /*padding-left: 20px;*/
}

.radio-item.extra-other .other-text-item input,
.checkbox-item.extra-other .other-text-item input {
    /*padding: 0 20px;*/
}

.other-text-item div.sentis-clear-input {
    z-index: 100;
    color: #b8bec4;
    position: absolute;
    margin-left: -40px;
    padding: 4px 16px;
}

.btn.sentis-clear-input:active, .btn.sentis-clear-input.active {
    box-shadow: none;
}

li.checkbox-text-item {
    position: relative;
}

@supports (-ms-ime-align: auto) {
    /*Edge styling*/
    @media only screen and (max-width: 767px) {
        .other-text-item div.sentis-clear-input {
            z-index: 100;
            color: #b8bec4;
            position: absolute;
            top: 50%;
            right: 20px;
        }
    }

    @media only screen and (min-width: 768px) {
        .other-text-item div.sentis-clear-input {
            z-index: 100;
            color: #b8bec4;
            position: relative;
        }
    }
}

/*interviewer notes*/
.intNote {
    display: none;
    color: var(--sentis-red-md);
    font-weight: bold;  /* todo make variable */
}

/*SLIDER STYLING FOR LIMES CURRENT THEME*/
.numeric-multi .slider-list .slider-item .slider-handle {
    background-color: var(--sentis-default-md);
    background-image: none;
    cursor: pointer;
}

.numeric-multi .slider-list .slider-item .slider-handle:hover {
    background-color: var(--sentis-default-dk);
}

.numeric-multi .slider-list .slider-item .slider-handle:active,
.numeric-multi .slider-list .slider-item .slider-handle:focus {
    background-color: var(--sentis-default-dk);
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--sentis-green-md);
}

.numeric-multi .slider-list .slider-item .slider-selection {
    background-color: var(--sentis-default-lt);
    background-image: none;
}

.slider.slider-horizontal .slider-selection,
.slider.slider-horizontal .slider-track-low,
.slider.slider-horizontal .slider-track-high {
    background-color: var(--sentis-grey-xl);
    background-image: none;
}

.numeric-multi .slider-list .slider-item .slider .tooltip {
    font-size: 14px;
}