/******************
    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 {
    z-index: 1;
    /*leave room for the legal footer*/
    min-height: calc(100vh - 100px);
    background-color: #F7F6F2;
}

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

.row.equal {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.row.equal > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

#groupDivWrapper {
    margin-bottom: 100px;

    /*todo evan - i removed this so the drop shadow on topinfobar would show*/
    /*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: 7px;
}

#topProgressBar .top-progress-bar {
    height: 7px;
    overflow: hidden;
    background-color: #eaecee; /* todo make variable ??*/
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.progress-bar {
    background-color: #0F5370;
    /*background-color: var(--sentis-template-accent-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;*/
    /*z-index: -1;*/

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

/*heading*/
#topInfoBar {
    width: 100%;
    padding-top: 7px;
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);
    background-color: white;
}

#topInfoBar img.logo {
    /*margin: auto;*/
    padding: 10px 0;
    max-width: 500px;
}

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

#moduleImg {
    content: url("/upload/themes/survey/sentis_blueshore/files/nest-egg.svg");
    height: 58px;
}

/*footer*/
/*todo evan - i started adding this, probs didnt finish..*/
#bottomInfoBar {
    background-color: #F5F5F5;
    min-height: 100px;
    bottom: 0;
}

#bottomInfoBar > div:first-of-type {
    display: flex;
    align-items: center;
    height: 100px;
    justify-content: space-between;
}

@media only screen and (min-width: 768px) {
    #bottomInfoBar > div {
        padding-left: 90px;
        padding-right: 90px;
    }
}

/*groups*/
.group-description {
    text-align: left;
    color: var(--sentis-group-description-font-color);
    font-family: var(--sentis-headings-font-family);
    font-weight: 400;
    font-size: 36px;
    line-height: 40px;
    padding: 1%;

    /*todo evan - i removed this so the drop shadow on topinfobar would show*/
    /*background: #FFF;*/
}

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

/*fonts*/
.question-container .question-text,
.question-container .answer-container,
.form-control::-webkit-input-placeholder,
.question-container .error-text-container,
#sentisInfoModal .modal-content .modal-body,
#sentisInfoModal .modal-content .modal-body,
#sentisInfoModal .modal-content .modal-footer,
#movenextbtn, #movesubmitbtn {
    font-family: var(--sentis-body-font-family);
    color: var(--sentis-question-font-color);
}

.question-title-container p,
.completed-text p,
.question-title-container ul,
.completed-text ul,
.question-title-container ol,
.completed-text ol {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
}

/*
.question-title-container em {
    font-size: 13px;
    line-height: 19px;
}
*/

/*errors*/
/*todo evan - why is icon black*/
.question-title-container .question-error-text .error-text-container {
    color: var(--sentis-error-message-color);
}

.fa.fa-hand-o-right {
    display: none;
  }

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;
}

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

@media only screen and (max-width: 768px) {
    .navigator-button-container {
        margin-left: 0;
        width: 100%;
    }
}

.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;
}

.btn {
    padding: 14px 32px;
    font-size: 20px;
    border-radius: 2px;
}

.btn-legal {
    padding-left: 0;
    background-color: unset;
    font-size: 16px;
    font-family: MerriweatherSans;
    color: #1A4865 !important;
}

.btn-legal:focus, .btn-legal:active {
    outline: none !important;
    box-shadow: none !important;
}

.legal {
    padding: 32px;
}

@media only screen and (max-width: 768px) {
    .legal {
        padding: 15px
    }
}

.btn-connect {
    font-size: 16px;
    border: 2px solid #1A4865;
    font-family: MerriweatherSans;
    color: #1A4865;
}

.divider-line {
    background-color: #B1A57E;
    height: 5px;
    width: 80px;
    margin-bottom: 30px;
    margin-top: 20px;
}

.timer-container {
    display: inline-block;
}

.timer-container {
    margin-top: 48px;
}

@media only screen and (max-width: 768px) {
    .timer-container {
        margin-top: 0;
        text-align: right;
        width: 100%;
    }
}

#movenextbtn,
#movesubmitbtn,
#moveprevbtn {
    max-width: 400px;
    width: 100%;
    margin: 10px auto;
    display: inline-block;
    float: left;
    font-size: 16px;
}

#movenextbtn,
#movesubmitbtn {
    background-color: #E16740;
    border-color: #E16740;
    color: white;
}

#movenextbtn:hover, #movenextbtn:focus,
#movesubmitbtn:hover, #movesubmitbtn:focus {
    background-color: #E16740;
    border-color: #E16740;

}

#movenextbtn.intro {
    background-color: #0F5370;
    border-color: #0F5370;
    color: white;
}

#movenextbtn.intro:hover, #movenextbtn.intro:focus {
    background-color: #0F5370;
    border-color: #0F5370;
    color: white;
}

@media only screen and (max-width: 768px) {
    #movenextbtn.intro {
        max-width: unset;
        width: 100%;
    }
}

#moveprevbtn {
    background-color: #CCCCCC;
    border-color: #CCCCCC;
    color: white;
    font-family: var(--sentis-body-font-family);
}

#moveprevbtn:hover, #moveprevbtn:focus {
    background-color: #CCCCCC;
    border-color: #CCCCCC;
}

#movenextbtn.disabled, 
#moveprevbtn.disabled, 
#movesubmitbtn.disabled {
    opacity: 1;
}

.prev-btn-container {
    margin-right: 40px;
    flex-grow: 1;
}

.next-btn-container {
    flex-grow: 1;
}

.group-description {
    margin-left: 10px;
    color: #0F5370;
}

.progress-container {
    flex-grow: 1;
    background: #D8D2BE;
    height: 6px;
    margin-top: 21px;
    margin-left: 10px;
}

@media only screen and (max-width: 768px) {
    .progress-container {
        margin-left: 30px;
        margin-right: 30px;
    }
}

.bar-container {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.bar-container > div {
    width: 100%;
    max-width: 77px;
    height: 6px;
    margin-right: 1px;
    background-color: #EAE7DC;
}

.bar-container > div.active {
    background-color: #B1A57E;
}

@media only screen and (max-width: 768px) {
    .bar-container > div {
        max-width: 40px;
        height: 4px;
    }
}

.blueshore-progress {
    margin-left: 126px;
    padding-top: 44px;
    max-width: 600px;
    background: unset;
}

.top-row {
    display: flex;
    flex-direction: row;
}

#mobile-header {
    display: none;
    font-size: 48px;
    line-height: 48px;
    margin-top: 10px;
    padding-left: 10px;
    color: #0F5370;
}

#desktop-header {
    font-size: 36px;
    line-height: 46px;
}

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

@media only screen and (max-width: 992px) {
    .blueshore-progress {
        margin: 0;
        padding-top: 44px;
    }

    #desktop-header {
        display: none;
    }

    #mobile-header {
        display: block;
    }
}

.check-steps {
    list-style: none;
    color: #73766F;
    font-size: 24px;
}

/** BLUESHORE FONTS **/
h1 {
    font-weight: 400;
    font-size: 48px;
    line-height: 60px;
    font-family: "Merriweather";
}

h2 {
    font-weight: 400;
    font-size: 36px;
    line-height: 46px;
    font-family: "Merriweather";
}

h3 {
    font-weight: 400;
    font-size: 30px;
    line-height: 38px;
    font-family: "Merriweather";
}

h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    font-family: "Merriweather";
}

button {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.5px;
}

.guilloche::before {
    content: "";
    background-image: url(/upload/themes/survey/sentis_blueshore/files/GuillocheWave.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: .6;
    background-position: center bottom;
}

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 40px;
        line-height: 50px;
    }

    h2 {
        font-size: 30px;
        line-height: 40px;
    }

    h3 {
        font-size: 26px;
        line-height: 34px;
    }

    h4 {
        font-size: 22px;
        line-height: 30px;
    }

    .question-container p {
        font-size: 16px;
        line-height: 25px;
    }

    #check-steps h2 {
        font-size: 20px;
        line-height: 46px;
        margin: 0;
    }

    .guilloche {
        background-size: unset;
        background-position: unset;

    }

    .module-header h1 {
        font-size: 24px;
        line-height: 30px;
    }
}


body {
    padding-bottom: 0 !important;
}

.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%;
}

body, article {
    height: 100%;
}

#scoreChart {
    width: 500px;
    max-width: 100%;
    height: 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;
    max-width: 622px;
    background: unset !important;
}

.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: 16px;
    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,
.radio-item input[type="radio"]:checked + label::before {
    border-color: var(--sentis-checked-input-color);
}

.checkbox-item input[type="checkbox"] + label::before,
.radio-item input[type="radio"] + label::before {
    border-color: #375E77;
    border-width: 3px;
    height: 24px;
    width: 24px;
}

.radio-item input[type="radio"]:checked + label::after {
    width: 12px;
    height: 12px;
    top: 16px;
    left: 6px;
}

.checkbox-item input[type="checkbox"]:checked + label::after {
    font-size: 17px !important;
    width: 24px;
    height: 24px;
}

.radio-item.selected-option, .checkbox-item.selected-option, .radio-item:hover, .radio-item:focus, .checkbox-item:hover, .checkbox-item:focus {
    background-color: rgba(150, 192, 206, 0.1);
    border: 2px solid #B1A57E !important;
}

.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;
}

.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: 10px;
}

.checkbox-item label::before,
.checkbox-item input[type="checkbox"]:checked + label::after {
    top: 8px;
}

.checkbox-item input[type="checkbox"]:checked + label::after {
    animation-name: none !important;
}

.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: 2px solid rgba(177, 165, 126, 0.5);
    /*margin-top: 1px;*/
    border-radius: 3px;
    padding: 0 10px;
    background-color: white;
}

/*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 15px;
    /*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: 'MerriweatherSans', sans-serif;
    font-size: 13px;
    font-weight: 400;
}
*/

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

.sub-header {
    font-size: 1.4rem;
    font-weight: normal;
    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: inline-block;
}

/*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: -20px;
    padding: 10px 20px 10px 15px;
    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;
}