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

/* Add Roboto font */
/* BEGIN Thin */
@font-face {
  font-family: Roboto;
  src: url("../fonts/Thin/Roboto-Thin.woff2?v=2.137") format("woff2"), url("./fonts/Thin/Roboto-Thin.woff?v=2.137") format("woff");
  font-weight: 100;
  font-style: normal; }
/* END Thin */
/* BEGIN Thin Italic */
@font-face {
  font-family: Roboto;
  src: url("../fonts/ThinItalic/Roboto-ThinItalic.woff2?v=2.137") format("woff2"), url("./fonts/ThinItalic/Roboto-ThinItalic.woff?v=2.137") format("woff");
  font-weight: 100;
  font-style: italic; }
/* END Thin Italic */
/* BEGIN Light */
@font-face {
  font-family: Roboto;
  src: url("../fonts/Light/Roboto-Light.woff2?v=2.137") format("woff2"), url("./fonts/Light/Roboto-Light.woff?v=2.137") format("woff");
  font-weight: 300;
  font-style: normal; }
/* END Light */
/* BEGIN Light Italic */
@font-face {
  font-family: Roboto;
  src: url("../fonts/LightItalic/Roboto-LightItalic.woff2?v=2.137") format("woff2"), url("./fonts/LightItalic/Roboto-LightItalic.woff?v=2.137") format("woff");
  font-weight: 300;
  font-style: italic; }
/* END Light Italic */
/* BEGIN Regular */
@font-face {
  font-family: Roboto;
  src: url("../fonts/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("./fonts/Regular/Roboto-Regular.woff?v=2.137") format("woff");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: Roboto;
  src: url("../fonts/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("./fonts/Regular/Roboto-Regular.woff?v=2.137") format("woff");
  font-weight: normal;
  font-style: normal; }
/* END Regular */
/* BEGIN Italic */
@font-face {
  font-family: Roboto;
  src: url("../fonts/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"), url("./fonts/Italic/Roboto-Italic.woff?v=2.137") format("woff");
  font-weight: 400;
  font-style: italic; }
@font-face {
  font-family: Roboto;
  src: url("../fonts/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"), url("./fonts/Italic/Roboto-Italic.woff?v=2.137") format("woff");
  font-weight: normal;
  font-style: italic; }
/* END Italic */
/* BEGIN Medium */
@font-face {
  font-family: Roboto;
  src: url("../fonts/Medium/Roboto-Medium.woff2?v=2.137") format("woff2"), url("./fonts/Medium/Roboto-Medium.woff?v=2.137") format("woff");
  font-weight: 500;
  font-style: normal; }
/* END Medium */
/* BEGIN Medium Italic */
@font-face {
  font-family: Roboto;
  src: url("../fonts/MediumItalic/Roboto-MediumItalic.woff2?v=2.137") format("woff2"), url("./fonts/MediumItalic/Roboto-MediumItalic.woff?v=2.137") format("woff");
  font-weight: 500;
  font-style: italic; }
/* END Medium Italic */
/* BEGIN Bold */
@font-face {
  font-family: Roboto;
  src: url("../fonts/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("./fonts/Bold/Roboto-Bold.woff?v=2.137") format("woff");
  font-weight: 700;
  font-style: normal; }
@font-face {
  font-family: Roboto;
  src: url("../fonts/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("./fonts/Bold/Roboto-Bold.woff?v=2.137") format("woff");
  font-weight: bold;
  font-style: normal; }
/* END Bold */
/* BEGIN Bold Italic */
@font-face {
  font-family: Roboto;
  src: url("../fonts/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"), url("./fonts/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff");
  font-weight: 700;
  font-style: italic; }
@font-face {
  font-family: Roboto;
  src: url("../fonts/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"), url("./fonts/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff");
  font-weight: bold;
  font-style: italic; }
/* END Bold Italic */
/* BEGIN Black */
@font-face {
  font-family: Roboto;
  src: url("../fonts/Black/Roboto-Black.woff2?v=2.137") format("woff2"), url("./fonts/Black/Roboto-Black.woff?v=2.137") format("woff");
  font-weight: 900;
  font-style: normal; }
/* END Black */
/* BEGIN Black Italic */
@font-face {
  font-family: Roboto;
  src: url("../fonts/BlackItalic/Roboto-BlackItalic.woff2?v=2.137") format("woff2"), url("./fonts/BlackItalic/Roboto-BlackItalic.woff?v=2.137") format("woff");
  font-weight: 900;
  font-style: italic; }
/* END Black Italic */



/* FOR CORRECT FONT SIZING. "fsf" means "Font Size Factor". 
All font sizes are multiplied with this factor to achieve 
a correct scaling of all font sizes with respect to each other*/

:root{
    --ofs: 0.9; /* CHANGE THIS TO SETUP OVERALL FONT-SIZE*/
    --tfs: 1;   /* CHANGE THIS TO SETUP PARAGRAPH SIZE (without affecting headline sizes)*/
    font-family: "Roboto";
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    :root{
        --fsf: calc(var(--ofs)*1.4); 
    }
} 
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    :root{
        --fsf: calc(var(--ofs)*1.3); 
    }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    :root{
        --fsf: calc(var(--ofs)*1.2);
        --tfs: 1.2 !important;
    }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    :root{
        --fsf: calc(var(--ofs)*1.1);
        --tfs: 1.32 !important;
    }
}
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    :root{
        --fsf: calc(var(--ofs)*1);
        --tfs: 1.4 !important;
    }
}

:root{
    --accentCol: #2F586E;
    --accentColAct: #7C96A3;
    --accentActDark: #3E414D;
    --accentColPas: #54586A;
    --startBgCol: #E2E7EB;
    --green: #266141;
}

.table {
    --bs-table-hover-bg: 000;
}

#welcome-container{
    max-width:none !important;
    margin-top:2rem;
}


h1, .large-heading{
    font-size: calc(var(--fsf) * 1.7rem);
    line-height: 1.25;
}

h2, .group-title{
    font-size: calc(var(--fsf) * 1.55rem) !important;
    line-height: 1.25 !important;
}

h3, .form-heading{
    font-size: calc(var(--fsf) * 1.45rem) !important;
    line-height: 1.25 !important;
}

h4{
    font-size: calc(var(--fsf) * 1.25rem) !important;
    line-height: 1.25 !important;
}

h5{
    font-size: calc(var(--fsf) * 1.2rem);
    line-height: 1.25;
}

h6{
    font-size: calc(var(--fsf) * 1.1rem);
    line-height: 1.25;
}

.ls-label-question{
    font-size: calc(var(--fsf) * var(--tfs) * 0.9rem) !important;
    line-height: 1.25 !important;
}

p, a, li, label{
    font-size: calc(var(--fsf) * var(--tfs) * 0.8rem);
}

/* css rules for scroll progress bar (see custom.js) */
#progress-bar-bg, #progress-bar {
  height: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
}
#progress-bar {
  background-color: var(--accentCol);
    width: 0;
}
#progress-bar-bg {
  background-color: #B0BFC8;
    width: 100%;
}

.top-container {
  margin-top: 0px !important;
  margin-bottom:0px !important;
}

/* css rules for default page progress-bar */
.progress-bar{
    background-color: var(--accentCol);
}

#survey-nav{
    background-color: #E2E7EB !important;
}




/* coloring marked answers correctly (overriding theme_apple.css) */

/* COULD also be done like this in less lines
input:checked + label{
    color: var(--accentActDark) !important;
    font-weight: 700 !important;
}
*/

.checkbox-item input[type="checkbox"]:checked + label {
    color: var(--accentActDark);
    font-weight: 700
}

.checkbox-item input[type="checkbox"]:not(:checked) + label {
    font-weight: 450; 
    color: var(--accentColPas);
}

.checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: var(--accentCol);
}

.checkbox-item input[type="checkbox"]:checked + label::after {
    color: var(--accentCol);
    font-size: 16px;
}

.radio-item label::before {
    border-width:3px;
}

.radio-item input[type="radio"]:checked + label{
    color: var(--accentActDark);
    font-weight: 700
}

.radio-item input[type="radio"]:not(:checked) + label{
    font-weight: 450; 
    color: var(--accentColPas);
}

.radio-item input[type="radio"]:checked + label::before{
    border-color: var(--accentCol);
}

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


.privacy .checkbox-item label::before {
    border-color: var(--accentCol);
}

.slider-handle{
    background-color: var(--accentCol) !important;
}

.slider-selection{
     background-color: var(--accentCol) !important;
}

.slider-list .slider .tooltip .tooltip-inner{
    color: var(--accentActDark);
}


.btn-primary:not(.answer-item){
    color: var(--green) !important;
    background-color: white !important;
    border-color: var(--green) !important;
}

.ls-move-submit-btn:not(.ls-move-next-btn){
    color:white !important;
    background-color: var(--green) !important;
}

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

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

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

.btn-check:checked + .btn-primary, .btn-check:checked + .btn-primary:focus, .btn-check:focus:checked + .btn-primary {
  color: #ffffff;
  background-color: var(--accentActDark);
  border-color: var(--accentActDark);
  box-shadow: none;
}

.btn-check + .btn-primary:hover{
    background-color: var(--green) !important;
  border-color: var(--green) !important;
}


a{
    color: var(--accentCol);
    /*text-decoration: underline;*/
}

a:hover{
     color:var(--accentColAct);
     /*text-decoration: underline;*/
}




body, .large-heading, .form-heading, .group-title {
    font-family: "Roboto";
}


.logo-container{
    display:block !important;
    width:calc(var(--fsf)*30rem);
    min-width:38%;
    max-width:60%;
}

.logo-container > img{
    padding-left: 0px;
}

.text-danger {
    color: #971B2F !important;
    font-weight: 500;
    margin-top: 10px;
}

.has-error, .has-error .help-block, .has-error .control-label {
    color: #971B2F !important;
}

.form-change-lang.row {
    text-align: right !important;
    display: flex;
    justify-content: right;
    flex-wrap: inherit;
}

.form-change-lang #lang-select {
    background-color: var(--startBgCol);
}

.form-change-lang #language-changer-select {
    
    color: var(--accentCol) ;
    border: 1px transparent;
    font-size: calc(var(--fsf) * var(--tfs) * 0.85rem) !important;
    line-height: 1.25 !important;
    
}

.form-change-lang #lang-select::after {
    color: var(--accentCol) ;   
    right:20px !important;
    
}

.form-change-lang #language-changer-select > option{
    font-family: Arial !important;
    font-size: calc(var(--fsf) * var(--tfs) * 0.75rem) !important;
}

.form-change-lang .control-label{
    font-size: calc(var(--fsf) * var(--tfs) * 0.85rem) !important;
}


#survey-nav .dropdown-menu > li > a{
     font-size: calc(var(--fsf) * var(--tfs) * 0.85rem) !important;
}

#firstpage-changelang {
    margin-bottom: 1rem;
}

.survey-name {
    text-align: center;
    color: #777;
}


.alert {
    color: black;
    font-weight: 500;
}

.alert-danger {
    background-color: #D8A9B1;
}

#datasecurity_error {
    margin-bottom: 30px;
}

.datasecurity-checkbox-container {
    padding-left: 12px;
}

.datasecurity-checkbox-label, .datasecurity-checkbox-label a.show-policy {
    font-size: calc(var(--fsf) * var(--tfs) * 0.8rem);
}

.checkbox-item label::before {
    width: 20px;
    height: 20px;
}

#datasecurity_notice > p, #datasecurity_notice > * a {
    font-size: calc(var(--fsf) * var(--tfs) * 0.7rem);
}

.ls-answers label, .answer-item label, .control-label, .ls-answers .ls-heading th, .ls-answers th, .group-container .group-description, .text-danger {
    /* same as p */
    font-size: calc(var(--fsf) * var(--tfs) * 0.8rem) !important;
    line-height: 1.25;
}


@media only screen and (max-width: 768px) {
  .modal-dialog {
      overflow: auto !important;
      max-height: calc(100vh - 40px);
      position: fixed;
      padding: 15px;
      width: 100%;
      top: 20px;
      -webkit-overflow-scrolling: touch;
      pointer-events: unset;
  }
}

.question-container {
    margin-top: 0;
    margin-bottom: 0;
}

.upload-files.question-container {
    margin-bottom: inherit;
}

.modal-title {
    padding-right: 15px;
}

.ls-answers .ls-heading th, .ls-answers th {
    vertical-align: top;
}

.text-item {
    margin-bottom: 3rem;
}

.text-item.other-text-item {
  margin-bottom: 12px;
}

.question-valid-container.text-info:not(:has(*)), .question-valid-container.text-info:has(.hide-tip).text-info:not(:has(.text-danger)) {
    margin-bottom: 0;
}

.list-question-select {
    margin-bottom: 3rem;
}

@media only screen and (max-width: 767px) {
    li.radio-item, li.checkbox-item, li.checkbox-item.mb-1 {
        margin-bottom: 0 !important;
    }
}

@media only screen and (min-width: 768px) {
    li.radio-item, li.checkbox-item, li.checkbox-item.mb-1 {
        margin-bottom: 0.7em !important;
    }
}

.question-container .question-valid-container {
    margin-top: 0;
}

.question-help-container {
    margin-top: -10px;
    margin-bottom: 15px !important;
    font-size: smaller;
    color: gray;
}

@media only screen and (min-width: 768px) {
    .question-container .question-title-container {
        margin-bottom: 19px;
    }
    .question-help-container {
        margin-top: -15px;
        margin-bottom: 19px !important;
    }
}

@media only screen and (max-width: 1024px) {
  table.ls-answers tr {
    margin-bottom: 1.4em;
  }
}

.group-description {
    margin-bottom: 3.5rem;
}

.ls-answers th {
    color: var(--accentColPas);
}

.table-hover > tbody > tr:hover > th {
    color: var(--accentColPas);
}

.boilerplate > * .ls-label-question {
    font-weight: normal;
    font-size: calc(var(--fsf) * var(--tfs) * 0.8rem) !important;
}