/******************
    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 {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
} */
.question-title-container {
    background: #B2A1C7;
    font-weight: bold;
    font-size: 115%;
    padding: 2em 1em 2em 1em;
    color: #000000;
}
.answertext {
    font-weight: bold !important;
    text-align: left !important;
}
.text-danger {
    display: inline-block;
    margin-right: 4px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.bg-warning {
    background-color: #2c3e50;
}
.top-container {
    background-color: #ecf0f1;
    margin-bottom: 30px;
    padding: 1em;
    margin-top: 0px;
}
.container-fluid {
    width: 1170px;
    max-width: 100%;
}
.progress {
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 10%)
}
.progress-bar {
    background-color: #B2A1C7;
}
.group-title {
    text-align: left;
}
.answer-container {
    padding-top: 45px;
}
.table {
    border: 0px;
}
table-bordered>thead>tr>th, .table-bordered>thead>tr>th, table-bordered>tbody>tr>th, .table-bordered>tbody>tr>th, table-bordered>tfoot>tr>th, .table-bordered>tfoot>tr>th, table-bordered>thead>tr>td, .table-bordered>thead>tr>td, table-bordered>tbody>tr>td, .table-bordered>tbody>tr>td, table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>td {
    border: 0px;
}
.top-container .form-change-lang {
    margin-top: 20px;
}
.form-change-lang .control-label {
    font-weight: normal;
    margin-right: 12px;
}
.question-valid-container {
    min-height: 0;
}
.ls-language-changer-item {
    border-color: #95a5a6;
    background-color: #95a5a6;
    padding: 8px 12px;
}
.ls-language-changer-item:hover {
    border-color: #1a242f;
    background-color: #1a242f;
}
.ls-even {
    background-color: #ECF0F1;
}
.ls-odd, .ls-heading {
    background-color: #F9F9F9;
}
.ls-odd:hover, .ls-heading:hover {
    background-color: #F9F9F9 !important;
}
li.radio-item .radio-item label::after {
    margin-top: 5px;
}
li.radio-item .radio-item label::before {
    margin-top: 2px;
}
li.checkbox-item .checkbox-item label::before {
    top: 2px;
}
li.checkbox-item .checkbox-item label::after {
    top: 3px;
}
button.btn.ls-language-changer-item {
    display: none;
}

.form-change-lang .form-control {
    width: 250px;
}

.dir-ltr .ls-answers td.radio-item {
    padding-left: 0px;
}
.dir-ltr .radio-item .ls-label-xs-visibility {
    margin-left: 0px !important;
}
@media only screen and (max-device-width: 760px) {
    .ls-answers > tbody > tr > td.radio-item {
        padding-left: 5px !important;
    }
}
/* table */
tr.answers-list .visible-xs.information-item {
    display: none !important;
}
tr.answers-list td.answer-item {
    text-align: center;
}
tr.questions-list td.checkbox-item.answer-item {
    text-align: center;
}
/******************
    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
*/
.logoContainer{
    display: flex;
    margin-left: 20%;
    margin-right: 20%;
}

.spacingTop{
    margin-top: 5%;
}

.spacingLeft{
    margin-left: 6%;
}

.spacingLeftMore{
    margin-left: 9%;
}
.surveyListCustom{
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    list-style: none;
    padding: 0;
}

.flexBox{
    margin-top: 5rem;
    display: flex;
}

.centered{
    margin: auto;
}

.listContainerCustom{
    width: 55%;
    margin: auto;
}

.contactContainer{
    display: flex;
    width: 100%;
}

.contactInfo{
    margin: auto;
    width: 43%;
    padding: 0;
}

.footerToButtom{
    position: absolute;
    width: 0 !important;
}

.smallerImg{
    width: 75%;
    margin-left: 0;
    margin-right: 0;
}

.swissImg{
    max-width: 352px; 
    max-height: 88px;
    width: 100%;
    height: auto;
}

.koreanImg{
    max-width: 204px; 
    max-height: 88px;
    width: 100%;
    height: auto;
}

@media (min-width: 761px){
    .button{
        width: 100% !important;
    }
}

/* Fix display problems with large tables on mobile devices */
@media (max-width: 1024px) {
    .mobile-table .answer-container {
        overflow-y: scroll;
    }
    .mobile-table table.subquestion-list {
        table-layout: auto;
    }
    .mobile-table colgroup.col-responses col {
        width: 100% !important;
        min-width: 80px;
    }
    .mobile-table col.answertext {
        min-width: auto;   
    }
    .mobile-table thead tr th {
        white-space: nowrap;
        min-width: 64px;
    }
    .mobile-table tbody tr th.answertext {
        white-space: nowrap;
    }
    
    .mobile-table tbody tr td input {
        min-width: 80px;
    }
    .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::before, .dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::before {
        margin-left: auto !important;
    }
    .dir-ltr table.ls-answers .radio-item label.ls-label-xs-visibility::after, .dir-ltr table.ls-answers .checkbox-item label.ls-label-xs-visibility::after {
        margin-left: auto !important;
    }
    .dir-ltr table.ls-answers .radio-item .ls-label-xs-visibility, .dir-ltr table.ls-answers .checkbox-item .ls-label-xs-visibility {
        text-align: left;
        padding-left: 36px;
    }
}