/******************
    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
*/ 
/*
Loaded locally now, through config.xml
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*/
@font-face {    
    font-family: 'GTWalsheimPro';
    src: url('../files/GTWalsheimProRegular.ttf') format('truetype');
}
@font-face {    
    font-family: 'GTWalsheimPro';
    src: url('../files/GTWalsheimProBold.ttf') format('truetype');
    font-weight: 600;
}
@font-face {    
    font-family: 'Montserrat';
    src: url('../files/Montserrat-Regular.ttf') format('truetype');
}
* {
    box-sizing: border-box;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
html {
    font-size: unset;
}
* {
    hyphens: none;
}
body {
background-color: #ebf0fa !important;
font-size: 20px;
font-family: 'EudoxusSans', 'Open Sans', 'Helvetica' !important;
padding: 8px !important;
}
a,
.fruity a {
    color: #005CA3;
    text-decoration: none;
}
.button-item {
    font-family: 'EudoxusSans', 'Open Sans', 'Helvetica' !important;
    font-size: 16px;
}
h2 {
    font-size: 18px;
    color: #005CA3;
    font-weight: 600;
    font-family: 'EudoxusSans', 'Open Sans', 'Helvetica' !important;
}
.progress {
    border-radius: 5px;
    background-color: white !important;
    height: 12px !important;
    display: inline-block;
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: unset !important;
}   
.progress-bar {
    background-color: #005CA3 !important;
}
.progress-value-container {
    display: inline-block;
    position: relative;
    width: 100%;
}
.progress-value {
    top: -1rem;
    position: absolute;
    color: #005CA3;
    font-family: 'EudoxusSans', 'Open Sans', 'Helvetica' !important;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    text-align: center;
}
.survey-form-container {
    margin: 0;
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
}
.question-number {
    color: #005CA3;
    margin-bottom: 1rem;
    margin-left: 0;
    float: none;
}
.question-text {
    font-size: 22px;
    color: #1A1A1D;
    padding-bottom: 1rem;
}
.question-valid-container {
    font-size: 16px;
} 
.asterisk {
    font-size: 12px;
}
.bootstrap-buttons-div .button-item {
    display: block;
    width: 100%;
    border: 1px solid #000000;
    color: #000000;
    background: #FFFFFF;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    height: 54px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.bootstrap-buttons-div .button-item.ls-hidden {
    display:none;
}
.wg-question-answer .button-item label {
    margin-bottom: 0;
    font-weight: bold !important;
    white-space: normal;
    max-height: 45px;
    overflow: hidden;
    text-align: left;
}
.skip-question {
    text-align: right;
    padding-top: 1rem;
    margin-top: 1rem;
    /* border-top: 1px solid #D8D8D8; */
    overflow: hidden;
    padding-bottom: 0 !important;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.wg-question-wrapper {
    margin-top: 0;    
    margin-bottom: 0; 
}
.wg-question-answer .answer-container {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
.row {
    margin-left: 0;
    margin-right: 0;
}
.bootstrap-buttons-div {
    padding: 0;
    margin-bottom: 0 !important;
}

.group-outer-container,
.group-container,
.question-container {
    margin-bottom: 0;
}
.question-container,
#welcome-container,
.completed-wrapper {
    padding: 0.75rem;
}
.bootstrap-buttons-div {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    padding-top: 0 !important;
    margin-bottom: 0;
}
.question-container:not(.no-fixed-columns) .bootstrap-buttons-div {
    width: 60%;
}
.space-col {
    margin: 0;
}
.container-fluid {
    padding: 0;
}
.question-title-container,
.question-help-container,
.question-valid-container {
    padding: 0;
}
.question-title-container p {
    margin-bottom: 0;
}
.question-valid-container {
    margin-bottom: 0.5rem;
}
#ls-button-submit,
#ls-button-previous,
#end-survey-button
{
    /*color: #005CA3;*/
    font-size: 16px;
    /*padding: 0;*/
}
#ls-button-submit {
    background-color:#005CA3;
    color: #fff;
    border-color: #005CA3;
}

.fruity .text-info {
    color: #1E1F23;
}
.ls-questionhelp:before {
    display: none;
}
.ls-questionhelp {
    margin: 0 !important;
    background-color: #FFF3D3;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    font-size: 14px;
}

.answer-container {
    font-size: 16px;   
}

.multiple-opt-comments .checkbox-text-item {
    font-size: 16px;
}
.fruity .form-control:focus {
    border: 1px solid #005CA3;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(28,133,214,0.6);
}
body .answer-item label::after {
    background-color: #005CA3
}
.checkbox-item input[type="radio"]:checked+label::after {
    background-color: #005CA3;
    color: white;
}
.checkbox-item input[type="checkbox"]:checked+label::after {
    background-color: white;
    color: #005CA3;
    padding: 0px;
    border: 1px solid #cccccc;
    width: 17px;
    height: 17px;
    left: 0;
}
.fruity .btn-primary,
.fruity .btn-success {
    color: #005CA3;
    background-color: #ffffff;
    border: 1px solid #005CA3;
    font-weight: bold;
}
.fruity .btn-primary:hover,
.fruity .btn-primary:focus,
.fruity .btn-primary:active,
.fruity .btn-primary.active {
    background-color: #005ca3;
    border-color: #005ca3;
}

.fruity .btn-default {
    background-color: rgba(255,255,255,0.2);
    border: 1px solid #005CA3;
    color: #005CA3;
    font-weight: bold;
}
.fruity .btn-default:hover,
.fruity .btn-default:focus {
    color: white;
    border: 1px solid #005ca3;
    background-color: #005CA3;
}
.fruity .alert-info {
    background-color: transparent;
    border: 1px solid #005CA3;
    color: #005CA3;
}
.fruity .text-primary {
    color: #1A1A1D;
}
.survey-name {
    font-size: 30px;
    color: #1A1A1D;
}
.survey-welcome {
    line-height: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.fruity .modal-header {
    border-bottom: 0px;
}
.fruity .modal-footer {
    border-top: 0px;
}
.modal-body {
  padding: 15px 50px;
  line-height: 1.6rem;
}
.fruity .question-container.input-error {
    box-shadow: unset;
}
.ls-answers.checkbox-list .btn-toolbar {
    margin-left: 0px !important;
    padding-right: 0px;
    padding-left: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ls-answers.radio-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.fruity .input-error input,
.fruity .input-error select {
    color: #a94442;
    border-color: #a94442;
}
.ls-question-help + .ls-question-mandatory,
.ls-questionhelp + .ls-question-mandatory {
    margin-top:-5px;
    margin-bottom:5px;
}
.question-count-text {
    color: #1E1F23;
}
#block_error {
    width: 100%;
    min-height: 200px;
    height: auto;
    margin: 0 auto 0;
    border: none;
    -moz-border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
    background: #fff url(../files/block.gif) no-repeat;
    background-position: center right;
}
#block_error div {
    padding: 24px;
}
#block_error div h2 {
    border-bottom: none;
    padding: 0;
    margin-top: 0;
}
#block_error div h2 p {
    font-size: 36px;
}
#block_error .text-danger {
    color: #1A1A1D;
}
#block_error p {
    font-size: 14px;
}
#block_error a {
    font-size: 14px;
}
div.end-text {
    padding-bottom: 1.5em;
}
#submit-error-msg {
    font-weight: bold;
}
/* FIX for Array 5-point bug:
    Due to a bug in the twig, the control-label class has an appended curly brace: control-label}
    So the standard rule (.fruity .has-error .control-label) doesn't work for that question type.
*/
.fruity .has-error.radio-list .answertext {
    color: #a94442;
}
/* For Array by column errored headers*/
.fruity .has-error.control-label {
    color: #a94442;
}
/* Error tooltip */
.fruity .tooltip-danger .tooltip-inner {
    background-color: #a94442;
}
.fruity .tooltip-danger.top .tooltip-arrow {
    border-top-color: #a94442;
}
/**
 * Checkbox alignment
 */
.form-horizontal .checkbox-item label::before,
.form-horizontal .checkbox-item label::after {
    top: 12px;
}
.checkbox-item label::before,
.checkbox-item label::after {
    top: 4px;
}    
/* Custom style for 'Well Gene button' checkboxes */
.wellgene-buttons-div .checkbox-item label::before, 
.wellgene-buttons-div .checkbox-item label::after,
.wellgene-buttons-div .checkbox-item input[type="checkbox"]:disabled + label::before,
.wellgene-buttons-div .checkbox-item input[type="radio"]:disabled + label::before {
    background-color: unset;
}
.fruity .wellgene-buttons-div .checkbox-item input[type="checkbox"]:checked+label::after {
    color: white;
    background-color: #005CA3;
    border: unset;
    display: flex;
    height: 100%;
    align-items: center;
}
.fruity .wellgene-buttons-div .checkbox-item label {
    padding: 0;
    text-align: left;
    padding-left: 20px;
}
.fruity .wellgene-buttons-div .checkbox-item input[type="checkbox"]:checked+label {
    padding-left: 20px;
}
/* Assesments table */
table.assessment-table,
.table > tbody > tr > td.assessments-container {
    border: none;
    margin-bottom: 0;
    padding: 0;
}
table.assessment-table .table > thead > tr > th,
table.assessment-table .table > tbody > tr > th,
table.assessment-table .table > tfoot > tr > th,
table.assessment-table .table > thead > tr > td,
table.assessment-table .table > tbody > tr > td,
table.assessment-table .table > tfoot > tr > td {
    border: none;
    padding-left: 0;
}
table.assessment-table .table > thead > tr > th,
table.assessment-table .table > tbody > tr > th,
table.assessment-table .table > tfoot > tr > th {
    font-weight: bold !important;
}

/* Hide OK validation messages */
.ls-question-message.ls-em-tip.ls-em-success {
    display: none;
}
/* Sliders */
.fruity .slider-selection,
.fruity .slider-handle {
    background-image: none;
    background-color: #005CA3;
}
/* Searchable multiple choice */
.fruity .mcd-container {
    padding: 0;
}
/*.fruity .select2-dropdown {
    min-width: 260px;
}*/
.fruity .select2-container--default.select2-container .select2-selection--multiple {
    border: 1px solid #ccc;
}
.fruity .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #005CA3;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(28,133,214,0.6);
}
.fruity .select2-container--default .select2-results__option--highlighted {
    background-color: #005CA3;
}
.fruity .select2-results__option[aria-selected=true] {
    display: none;
}

/* Bordered Single Choice */
.bordered .radio-list ul {
    padding-left: 0;
    padding-right: 0;
}
.bordered .radio-list li {
    padding-left: 0;
    margin-bottom: 0.25em;
    margin-right: 0;
}
.bordered .radio-list input:checked+.radio-label {
    background: #CCDEED;
}
.bordered .radio-list .radio-label {
    padding: 8px 0px 8px 33px;
    width: 100%;
    border: 1px solid #005ca3;
}
.bordered .radio-list .radio-label:before,
.bordered .radio-list .radio-label:after{
    margin-left: 8px;
    margin-top: 8px;
}
@media (min-width: 768px) {
    .bordered .radio-list .radio-label {
        width: 50%;
    }
}
/* END: Bordered Single Choice */

/* Bordered Multiple Choice */
.bordered .checkbox-list ul {
    padding-left: 0;
    padding-right: 0;
}
.bordered .checkbox-list li {
    padding-top: 0;
    padding-left: 0;
    margin-bottom: 0.25em;
    margin-right: 0;
}
.bordered .checkbox-list input:checked+.checkbox-label {
    background: #CCDEED;
}
.bordered .checkbox-list .checkbox-label {
    padding: 8px 0px 8px 33px;
    width: 100%;
    border: 1px solid #005ca3;
}
.bordered .checkbox-list .checkbox-label:before,
.bordered .checkbox-list .checkbox-label:after{
    margin-left: 8px;
    margin-top: 8px;
}
@media (min-width: 768px) {
    .bordered .checkbox-list .checkbox-label {
        width: 50%;
    }
}
/* END: Bordered Multiple Choice */

.answer-item:focus-within label:before {
    box-shadow: 0px 0px 0px 2px #80bdff;
    /*border: 2px solid #80bdff;*/
}

.button-item:focus-within {
    box-shadow: 0px 0px 0px 2px #80bdff;
    /*border: 2px solid #80bdff !important;*/
}

@media only screen and (max-width: 768px) {
    .fruity .control-label:not(.radio-label):not(.checkbox-label) {
        padding-top: 7px;
    }
}
@media only screen and (max-width: 700px) {
    .fruity .btn-primary:hover:not(.active) {
        color: #fff;
        background-color: #005CA3;
        border: 1px solid #005CA3;
        font-weight: bold;
    }
}
@media only screen and (max-width: 720px) {
    #welcome-container h1,
    .completed-wrapper h1,
    #block_error div h2 p {
        font-size: 28px;
    }
    .survey-welcome {
        line-height: 1.3rem;
        font-size: 14px;
    }
    .question-text {
        font-size: 20px;
    }
    .wg-question {
        float: none;
        width: 100%;
        border-right: none;
        padding-right: 0;
        min-height: auto;
        margin-bottom: 1rem;
    }
    .wg-question-answer {
        padding-left: 0;
        float: none;
        width: 100%;
    }
    .skip-question {
        text-align: center;
        border-top: none;
    }
    .bootstrap-buttons-div,
    .question-container:not(.no-fixed-columns) .bootstrap-buttons-div,
    li.checkbox-item {
        width: 100%;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }    
    li.checkbox-item {
        padding-top: 0.25em !important;
        margin-bottom: 0.25em;    
    }
    li.checkbox-text-item {
        margin-bottom: 0.25em;       
    }
}

@media only screen and (max-device-width: 760px) {
    .fruity .ls-answers {
        padding-top: 10px;
        padding-bottom:10px;
    }
}

/**
 * Paragraphs inside question body should have some separation
 */
.ls-label-question p+p {
    margin-top: 10px;
}

body.red-schema{
    background-color: red !important;
}

.red-schema .btn-primary, .red-schema .btn-default, .red-schema .btn-success {
    background-color: red !important;
    color: white !important;
}

.red-schema .progress-bar {
    background-color: #a37800 !important;
}


.red-schema .progress {
    background-color: orange !important;
}

.red-schema .progress-value {
    color: white !important;
}


.red-schema #limesurvey {
    background-color: #EE4B2B !important;
}


.red-schema .survey-name {
    color: orange !important;
}

.red-schema .question-count-text {
    color: orange !important;

}

.red-schema .question-container{
    background-color: orange !important;
}

.red-schema h2 {
    color: white !important;
}

body.green-schema{
    background-color: #d1fcbb !important;
}

.green-schema .btn-primary, .green-schema .btn-default, .green-schema .btn-success {
    background-color: #50ba1a !important;
    color: white !important;
}

.green-schema .progress-bar {
    background-color: #50ba1a !important;
}


.green-schema .progress {
    background-color: #adf08b !important;
}

.green-schema .progress-value {
    color: #5b6b54 !important;
}


.green-schema #limesurvey {
    background-color: white !important;
}


.green-schema .survey-name {
    color: #adf08b !important;
}

.green-schema .question-count-text {
    color: #adf08b !important;

}

.green-schema .question-container{
    background-color: #d1fcbb !important;
}

.green-schema h2 {
    color: #adf08b !important;
}

/**
 * Select2 Font Size
 */
.select2-container {
    font-size: 16px;
} 

/**
 * Responsive Fton Size. Sizes for mobile.
 */
@media only screen and (max-device-width: 760px) {
    .question-text {
        font-size: 18px;
    }
    .button-item {      
        font-size: 14px;
    }   
    .body {     
        font-size: 14px;
    }   
    .progress-value {
        font-size: 14px;
    }    
    .control-label.radio-label {
        font-size: 14px;
    }    
    .radio-list li {
        margin-bottom: 0.7em;
    }
    .ls-input-group-extra {
        font-size: 14px;
    }    
    .control-label.checkbox-label {
        font-size: 14px;
    }
    .control-label.comment-label {
        font-size: 14px;
    }    
    .fruity .alert {
        font-size: 14px;
    }    
    .select2-container {
        font-size: 14px;
    }
    .question-valid-container {
        font-size: 14px;   
    } 
    #ls-button-submit,
    #ls-button-previous,
    #end-survey-button
    {
        font-size: 14px;
    }       
    .asterisk {
        font-size: 10px;
    }   
    /* Checkbox alignment */
    .form-horizontal .checkbox-item label::before,
    .form-horizontal .checkbox-item label::after {
        top: 0px;
    }  
    .checkbox-item label::before,
    .checkbox-item label::after {
        top: 4px;
    }   
}

/**
 * Scrollbar at group container level
 */
.group-outer-container {
    max-height: calc(100vh - 265px);
}

.group-container {
    overflow-y: auto;
}

/**
 * Scrollbar
 */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/**
 * Make buttons to not have a max height
 */
.bootstrap-buttons-div .button-item {
    min-height: 52px  !important;
    height: unset;
    max-height: unset;
}

.wg-question-answer .button-item label {
    max-height: unset;
}

/**
 * Wellgene buttons on mobile: Don't change when hovering
 */
@media only screen and (max-width: 700px) {
    .fruity .btn-primary:hover:not(.active) {
        color: #005CA3;
        background-color: #ffffff;
        border: 1px solid #005CA3;
        font-weight: bold;
        box-shadow: none;
    }    
}

/**
 * Replace Noto by EudoxusSans
 */
@font-face {
  font-family: 'EudoxusSans';
  font-weight: 300;
  font-style: normal;
  src: url('/upload/themes/survey/generalfiles/Eudoxus-Sans-font/EudoxusSans-Regular.ttf');
}

@font-face {
  font-family: 'EudoxusSans';
  font-weight: 600;
  font-style: bold;
  src: url('/upload/themes/survey/generalfiles/Eudoxus-Sans-font/EudoxusSans-Bold.ttf');
}

.font-noto {
    font-family: 'EudoxusSans', 'Open Sans', 'Helvetica' !important;
}

/**
 * Version Control
 */
footer {
    margin-top: 15px;
}

.survey-version {
    font-size: small;
    text-align: left;
}

/**
 * Checkbox Plugin
 */
.addedcheckbox-item.addcheckbox-plugin {
    padding-left: 15px;
    padding-right: 15px;
}

/**
 * Number Prefix doesn't allign well with other items. (as checkboxplugin)
 */
.ls-input-group-extra {
    padding-left: 15px;
    padding-right: 15px;
}

/**
 * Number Prefix doesn't allign well on mobile
 */
@media only screen and (max-device-width: 760px) {
    .ls-input-group input {
        margin-left: 14px;
        margin-right: 14px;
        margin-top: 10px;    
    }
}

/**
 * RGC-3997 Zoom
 * Setting to 16px on mobile to avoid zoom when used on iphone
 */
 @media only screen and (max-device-width: 760px) {
    input, textarea,
    input.form-control, textarea.form-control {
        font-size: 16px !important;
    }
}