/*
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700');
@import url('https://fonts.googleapis.com/css?family=Carrois+Gothic:400');
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:100,200,300,400');
*/
@import url("https://fonts.googleapis.com/css?family=Raleway:100,200,300,400");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400");

/******************
    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
*/

/* Force padding in the header since it was sometimes not being rendered correctly */
/*.TBG_fruity {
    padding-top: 90px !important;
}*/

/* Set the cont color for the numbers on either end of the slider control */
.fruity .help-block {
    color: #24507c;
}
.HZ .fruity .help-block {
    color: #fc0;
}

.GS {
    background-color: #000000;
    color: #ffffff;
}

.GS .question-container {
    background-color: #45454b;
}

.GS .slider-selection {
    background-image: linear-gradient(to bottom, #e51937 0%, #e01833 100%);
}

.GS .slider-handle {
    background-color: #fff;
}

.GS .btn-primary {
    color: #fff;
    background-color: #e51937;
    border: 1px solid #fff;
}

.GS .btn-primary[disabled] {
    color: #fff;
    background-color: #e51937;
    border: 1px solid #fff;
}

.GS .btn-primary[disabled]:hover {
    color: #fff;
    background-color: #e51937;
    border: 1px solid #fff;
}

.GS .btn-primary:hover {
    background-color: #ba1938;
    border: 1px solid #000000;
}

.GS .option-input:checked::after {
    background: #e51937;
}

.GS .option-input.checkbox:checked::after {
    background: #e51937;
}

.GS .table tbody tr:hover th {
    background-color: #000000;
}

.GS .table tbody tr:hover td {
    background-color: #000000;
}

.GS .table tbody tr {
    background-color: #323236;
}

.GS .help-block {
    color: #ffffff;
}

.GS .text-info {
    color: #ffffff;
}

.SMU {
    background-color: #eeeeee;
    color: #000000;
}

.SMU .question-container {
    background-color: white;
    border: 1px solid rgb(3, 3, 122);
    box-shadow: 3px 3px #888888;
}

.SMU .slider-selection {
    background-image: linear-gradient(to bottom, #e51937 0%, #e01833 100%);
}

.SMU .btn-primary {
    color: #fff;
    background-color: #e51937;
    border: 1px solid #000000;
}

/* Sould delete it? */
/* .SMU .ls-label-question {
  font-family: "Open Sans, sans-serif";
  font-size: 16px;
  font-weight: bolder;
} */

.SMU .option-input:checked::after {
    background: #e51937;
}

.SMU .option-input.checkbox:checked::after {
    background: #e51937;
}

.SMU .option-input {
    border: 1px solid black;
}

.AA .question-container {
    background-color: #ffffff;
    border: none;
    box-shadow: none;
}

.AA .option-input {
    /*border: 2px solid #000000;*/
    background: #cbcbcb;
}

.AMC {
    background-color: #000000;
    color: #ffffff;
}

.AMC .question-container {
    background-color: #000000;
    color: #ffffff;
    border: #ffffff 1px;
}

.AMC .tooltip-inner {
    background-color: #ffffff;
    color: #000000;
}

.AMC .tooltip-arrow {
    background-color: #ffffff;
    color: #000000;
}

.AMC .help-block {
    color: #ffffff;
}

.AMC .ls-even {
    background-color: #000000;
}

.AMC .table-hover tbody tr:hover th {
    background-color: #2b2b2b;
}

.AMC .table-hover tbody tr:hover td {
    background-color: #2b2b2b;
}

.AMC .slider-selection {
    background-image: linear-gradient(to bottom, #f81938 0%, #e51937 100%);
}

.AMC .slider-handle {
    background-color: #e51937;
}

.AMC .slider-untouched .slider-handle {
    background-color: #e51937 !important;
}

.AMC .option-input:checked {
    background: #e51937;
}

.AMC .option-input:hover {
    background: rgba(229, 25, 55, 0.8);
}

.AMC .option-input:checked::after {
    background: #e51937;
}

.AMC .text-success {
    color: #e51937;
}

.AMC .btn-primary {
    background-color: #e51937;
    border: 1px solid #e51937;
    border-radius: 50px;
    padding: 8px 32px 8px 32px;
}

.AMC .btn-primary[disabled] {
    background-color: rgba(229, 25, 55, 0.8);
    border: 1px solid rgba(229, 25, 55, 0.8);
}

.AMC .btn-primary:hover {
    background-color: #ba1938;
    border: 1px solid #000000;
}

.AMC .btn-primary[disabled]:hover {
    background-color: rgba(229, 25, 55, 0.8);
    border: 1px solid #000000;
}

.PH {
    background-color: #e4e8ec;
    color: #000000;
}

.PH .question-container {
    background-color: #e4e8ec;
    color: #000000;
    border: none;
    box-shadow: none;
}

.PH .slider-selection {
    background-image: linear-gradient(to bottom, #f81938 0%, #c41820 100%);
}

.PH .slider-handle {
    background-color: #c41820;
}

.PH .slider-untouched .slider-handle {
    background-color: #c41820 !important;
}

.PH .option-input {
    border: 1px solid black;
}

.PH .option-input:checked {
    background: #c41820;
}

.PH .option-input.checkbox:checked::after {
    background: #c41820;
}

.PH .option-input:hover {
    background: rgba(196, 24, 32, 0.8);
}

.PH .option-input:checked::after {
    background: #c41820;
}

.PH .btn-primary {
    background-color: #c41820;
    border: 1px solid #c41820;
    border-radius: 10px;
    padding: 8px 32px 8px 32px;
}

.PH .btn-primary[disabled] {
    background-color: rgba(196, 24, 32, 0.8);
    border: 1px solid rgba(196, 24, 32, 0.8);
}

.PH .btn-primary:hover {
    background-color: #ba1938;
    border: 1px solid #000000;
}

.PH .btn-primary[disabled]:hover {
    background-color: rgba(196, 24, 32, 0.8);
    border: 1px solid #000000;
}

.HZ {
    background-color: #ffffff;
    color: #000;
}

.HZ .question-container {
    background-color: rgba(196, 198, 204, 0.58);
    color: #000000;
    border: none;
    box-shadow: none;
}

.HZ .slider-selection {
    background-image: linear-gradient(to bottom, #ffe27a 0%, #fc0 100%);
}

.HZ .slider-handle {
    background-color: #fc0;
}

.HZ .slider-untouched .slider-handle {
    background-color: #fc0 !important;
}

.HZ .option-input {
    color: #fc0;
    border: 1px solid black;
}

.HZ input {
    accent-color: #fc0;
}

.HZ .option-input:checked {
    background: #fc0;
}

.HZ .option-input.checkbox:checked::after {
    background: #fc0;
}

.HZ .option-input:hover {
    background: #fc0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.HZ .option-input:checked::after {
    background: #fc0;
}

.HZ .btn-primary {
    background-color: #fc0;
    border: 2px solid #fc0;
    border-radius: 2px;
    padding: 8px 32px 8px 32px;
    color: #000;
}

.HZ .btn-primary[disabled] {
    background-color: rgba(255, 204, 0, 0.5);
    border: 2px solid rgba(255, 204, 0, 0.5);
    color: #000;
}

.HZ .btn-primary:hover {
    background-color: #fc0;
    border: 2px solid #fc0;
    color: #000;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.HZ .btn-primary[disabled]:hover {
    background-color: rgba(255, 204, 0, 0.5);
    border: 2px solid rgba(255, 204, 0, 0.5);
    color: #000;
    box-shadow: none;
}

.NPR {
    --npr-primary-color: #237BBD;
    --npr-primary-color-disabled: rgba(35, 123, 189, 0.5);
    --npr-button-color: #D62021;
    --npr-button-color-disabled: rgba(214, 32, 33, 0.5);
    background-color: #ffffff;
    color: #333333;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.NPR .slider-selection {
    background-image: linear-gradient(to bottom, #75ade0 0%, var(--npr-primary-color) 100%);
}

.NPR .slider-handle {
    background-color: var(--npr-primary-color);
}

.NPR .slider-untouched .slider-handle {
    background-color: var(--npr-primary-color) !important;
}

.NPR .option-input {
    color: var(--npr-primary-color);
    border: 1px solid black;
}

.NPR input {
    accent-color: var(--npr-primary-color);
}

.NPR .option-input:checked {
    background: var(--npr-primary-color);
}

.NPR .option-input.checkbox:checked::after {
    background: var(--npr-primary-color);
}

.NPR .option-input:hover {
    background: var(--npr-primary-color);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.NPR .option-input:checked::after {
    background: var(--npr-primary-color);
}

.NPR .btn-primary {
    background-color: var(--npr-button-color);
    border: 2px solid var(--npr-button-color);
    border-radius: 2px;
    padding: 8px 32px 8px 32px;
    color: #ffffff;
}

.NPR .btn-primary[disabled] {
    background-color: var(--npr-button-color-disabled);
    border: 2px solid transparent;
    color: #ffffff;
}

.NPR .btn-primary:hover {
    background-color: var(--npr-button-color);
    border: 2px solid var(--npr-button-color);
    color: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.NPR .btn-primary[disabled]:hover {
    background-color: var(--npr-button-color-disabled);
    border: 2px solid transparent;
    color: #ffffff;
    box-shadow: none;
}

.SWA .question-container, .E2ETest .question-container {
    border: none !important;
    box-shadow: none !important;
}

.SWA .survey-welcome p, .E2ETest .survey-welcome p {
    background-color: #fff;
}

.SWA .completed-text p, .E2ETest .completed-text p {
    background-color: #fff;
}

#outerframeContainer {
    hyphens: none;
    word-wrap: none;
}

/* set font size and weight for the entire theme */
body {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.ls-answers label {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* slightly darken the slider track */
.slider-track {
    background-image: linear-gradient(
            to bottom,
            #dcdcdc 0%,
            #eaeaea 100%
    ) !important;
}

/* Give a little extra right margin to button to improve mobile view */
.btn-lg {
    margin-right: 25px !important;
}

/* Pull the button closer to the questions */
.space-col {
    margin-bottom: 0em;
}

/* skinny down the answer padding to conserve screen space */
.ls-answers {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* reduce the margins on the top container to remove wasted whitespce */
.top-container {
    margin-top: 15px !important;
    margin-bottom: 10px;
}

/* bring answers closer together on questions to maximize screen space */
.form-group {
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .form-inline .form-group {
        display: inline-flex;
    }
}

.question-item {
    padding-top: 5px !important;
}

/* logo was disappearing when the screen was mobile size, override the directive 
   to hide the logo */
.hidden-xs {
    display: block !important;
}

/* set some fonts and sizes */
.survey-name {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    color: #214f7e;
}

.survey-welcome p {
    /*background-color: #e6e7e8;*/
    background-color: #cfcfd0;
    padding: 20px;
    /*color: #137f9f;*/
    color: #24507c;
    border-radius: 10px;
    /*font-family: 'Open Sans', sans-serif;*/
    font-weight: 400;
    hyphens: manual;
}

.completed-text p {
    /*background-color: #e6e7e8;*/
    background-color: #cfcfd0;
    padding: 20px;
    /*color: #137f9f;*/
    color: #24507c;
    border-radius: 10px;
    /*font-family: 'Open Sans', sans-serif;*/
    font-weight: 400;
    hyphens: manual;
}

/* round the edges of the question containers */
.question-container {
    border-radius: 10px;
    margin-bottom: 0.5em;
}

/* do not show the required asterisk */
.asterisk {
    display: none;
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    table.ls-answers tbody {
        border: 0 none !important;
    }

    table.ls-answers tr {
        border: 0 none !important;
    }

    table.ls-answers tr th {
        border: 0 none !important;
        color: #24507c !important;
    }

    table.ls-answers td {
        border: 0 none !important;
    }
}

.ls-even {
    background-color: #e0e0e0;
}

.ls-label-question {
    font-size: 16px;
    font-weight: 500;
}

.slider-list .slider-item .col-sm-12 .ls-input-group {
    margin-bottom: 0;
}

/*******************************************
customRadio - Custom Question Theme for multiple question types

This section is to support the customRadio custom question theme. Changing directives in this section 
will change all question types that utilize the question theme. If you want to change a specific aspect 
for a specific question type, please use the CSS found within the appropriate directory for the question type.

Current list of question types implemented
Listradio
multiplechoice
arrays/array
*******************************************/
@keyframes click-wave {
    0% {
        height: 20px;
        width: 20px;
        opacity: 0.35;
        position: relative;
    }
    100% {
        height: 200px;
        width: 200px;
        margin-left: -100px;
        margin-top: -100px;
        opacity: 0;
    }
}

.option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.15s ease-out 0s;
    background: #fff;
    border: solid 1px #9faab7;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
}

.option-input:hover {
    background: #9faab7;
}

.option-input:checked {
    background: #24507c;
}

.option-input:checked::before {
    height: 20px;
    width: 20px;
    position: absolute;
    font-family: FontAwesome;
    content: "\f00c";
    color: #fff;
    display: inline-block;
    /*font-size: 26.66667px;*/
    text-align: center;
    line-height: 20px;
}

.option-input:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: #24507c;
    content: "";
    display: block;
    position: relative;
    z-index: 100;
}

.option-input.radio {
    border-radius: 50%;
    margin-right: 10px;
}

.option-input.checkbox {
    margin-right: 10px;
}

.option-input.radio::after {
    border-radius: 50%;
}

.full-width-label {
    width: 100%;
    display: inline-block;
    text-align: left;
}

/*
.full-width-label .label-placement {
    padding-left: 10px;
    position: relative;
    top: -10px;
    width: 100%;
}
*/
.full-width-label .label-placement {
    display: block;
    margin-bottom: 5px;
    margin-left: 50px;
    width: 90%;
    padding-left: 0;
}

.full-width-label label input[type="radio"] {
    margin-left: -50px;
}

.full-width-label .option-input.radio {
    margin-right: 5px;
}

.full-width-label label input[type="checkbox"] {
    margin-left: -40px;
}

.full-width-label .option-input.checkbox {
    margin-right: 5px;
}

.button-effect {
    border: 1px #24507c;
    border-radius: 10px;
    background-color: #24507c;
}

.button-effect .label-placement {
    width: 80% !important;
}

.button-effect-label {
    color: #f2efef;
}

#bootstrap-alert-box-modal .modal-dialog {
    vertical-align: top;
}

@media only screen and (max-width: 767px) {
    #bootstrap-alert-box-modal .modal-dialog {
        vertical-align: top;
    }

    .answer-container label.control-label {
        margin-bottom: 0;
    }


    .answer-container .form-group.ls-group-total {
        display: flex;
    }

    .answer-container .form-group.ls-group-total .ls-input-group {
        margin-bottom: 0;
        padding-left: 0;
        align-items: center;
        display: flex;
        gap: 6px;
    }

    .answer-container .text-list .ls-input-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .answer-container .form-group.ls-group-total .control-label {
        text-align: left;
        width: 60px;
        padding-right: 0;
    }

    .answer-container .form-group.ls-group-total .dynamic-total {
        padding: 0 0 0 4px;
        line-height: normal;
        min-height: inherit;
    }
}

/*******************************************
end customRadio section
*******************************************/