@charset "utf-8";

:root {
    --accent: #0B1354;
    --black: #000000;
    --white: #FFFFFF;
    --light: #f7f8fa;
    --dark: #343D4E;
}


/* ------------------------------------ basic ------------------------------------ */
    *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
    ::-moz-selection { background: var(--accent); color: var(--white); }
    ::selection { background: var(--accent); color: var(--white); }

    .font-weight-200 { font-weight: 200 !important; }
    .font-weight-light { font-weight: 300 !important; }
    .font-weight-lighter { font-weight: lighter !important; }
    .font-weight-normal { font-weight: 400 !important; }
    .font-weight-500 { font-weight: 500 !important; }
    .font-weight-600 { font-weight: 600 !important; }
    .font-weight-bold { font-weight: 700 !important; }
    .font-weight-800 { font-weight: 800 !important; }
    .font-weight-900 { font-weight: 900 !important; }
    .font-weight-bolder { font-weight: bolder !important; }
    .font-italic { font-style: italic !important; }

    .font-10 { font-size: 0.625rem !important; }
    .font-11 { font-size: 0.688rem !important; }
    .font-12 { font-size: 0.75rem !important; }
    .font-13 { font-size: 0.813rem !important; }
    .font-14 { font-size: 0.875rem !important; }
    .font-15 { font-size: 0.938rem !important; }
    .font-16 { font-size: 1rem !important; }
    .font-17 { font-size: 1.063rem !important; }
    .font-18 { font-size: 1.125rem !important; }
    .font-19 { font-size: 1.188rem !important; }
    .font-20 { font-size: 1.25rem !important; }
    .font-21 { font-size: 1.313rem !important; }
    .font-22 { font-size: 1.375rem !important; }
    .font-23 { font-size: 1.438rem !important; }
    .font-24 { font-size: 1.5rem !important; }
    .font-25 { font-size: 1.563rem !important; }

    .lh-1 { line-height: 1; }
    .lh-2 { line-height: 1.2; }
    .lh-3 { line-height: 1.3; }
    .lh-4 { line-height: 1.4; }
    .lh-5 { line-height: 1.5; }
    .lh-23 { line-height: 2.3; }

    .text-white { color: var(--white) !important; }
    .text-black { color: var(--black) !important; }
    .text-light { color: var(--light) !important; }
    .text-dark { color: var(--dark) !important; }
    .text-accent { color: var(--accent) !important; }

    .opacity-1 { opacity: 0.1; }
    .opacity-2 { opacity: 0.2; }
    .opacity-3 { opacity: 0.3; }
    .opacity-4 { opacity: 0.4; }
    .opacity-5 { opacity: 0.5; }
    .opacity-6 { opacity: 0.6; }
    .opacity-7 { opacity: 0.7; }
    .opacity-8 { opacity: 0.8; }
    .opacity-9 { opacity: 0.9; }
    .opacity-none { opacity: 1; }

    .text-decoration-none { text-decoration: none !important; }
    .text-break { word-break: break-word !important; overflow-wrap: break-word !important; }
    .word-break-all { word-break: break-all !important; }
    .text-reset { color: inherit !important; }

    .visible { visibility: visible !important; }
    .invisible { visibility: hidden !important; }

    .p-absolute { position: absolute !important; }
    .p-relative { position: relative !important; }

    .overflow-auto { overflow: auto; }
    .overflow-hidden { overflow: hidden; }

    .img-circle { border-radius: 50% !important; }

    .border-secondary { border: 1px solid var(--secondary) !important; }
    .border-top { border-top: 1px solid #ced4da !important; }
    .border-bottom-none { border-bottom: none !important; }

    .shadow-box { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); }

    .trans-ease-in-out {
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .trans-4 {
        -webkit-transition: .4s;
        -moz-transition: .4s;
        -ms-transition: .4s;
        -o-transition: .4s;
        transition: .4s;
    }
/* ------------------------------------ end basic ------------------------------------ */


/* ------------------------------------ general class ------------------------------------ */
    .site-wrap { -webkit-transition: .3s all ease-in-out; -o-transition: .3s all ease-in-out; transition: .3s all ease-in-out; height: 100%; min-height: 100vh; position: relative; }
    .wrap-page { /*position: relative; z-index: 2;*/ }
    .kuesioner {  }
    .section { position: relative; overflow: hidden; height: 100%; min-height: 100vh; padding-top: 80px; padding-bottom: 40px; display: -ms-flexbox; display: flex; align-items: center; }
    .section .block-content {  }
    
    .section-lg { padding-top: 7.5rem; padding-bottom: 7.5rem; }
    .section-md { padding-top: 5rem; padding-bottom: 5rem; }
    .section-sm { padding-top: 3.75rem; padding-bottom: 3.75rem; }
    .section-xs { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    @media only screen and (min-width: 1200px) and (max-width: 1600px) {
        .section-lg { padding-top: 7.5rem; padding-bottom: 7.5rem; }
        .section-md { padding-top: 5rem; padding-bottom: 5rem; }
        .section-sm { padding-top: 3.75rem; padding-bottom: 3.75rem; }
        .section-xs { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .section-lg { padding-top: 7.5rem; padding-bottom: 7.5rem; }
        .section-md { padding-top: 5rem; padding-bottom: 5rem; }
        .section-sm { padding-top: 3.75rem; padding-bottom: 3.75rem; }
        .section-xs { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .section-lg { padding-top: 100px; padding-bottom: 100px; }
        .section-md { padding-top: 3.75rem; padding-bottom: 3.75rem; }
        .section-sm { padding-top: 2.5rem; padding-bottom: 2.5rem; }
        .section-xs { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    }

    @media only screen and (min-width: 576px) and (max-width: 767px) {
        .section-lg { padding-top: 5rem; padding-bottom: 5rem; }
        .section-md { padding-top: 3.75rem; padding-bottom: 3.75rem; }
        .section-sm { padding-top: 2.5rem; padding-bottom: 2.5rem; }
        .section-xs { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    }

    @media (max-width: 767px) {
        .section-lg { padding-top: 5rem; padding-bottom: 5rem; }
        .section-md { padding-top: 3.75rem; padding-bottom: 3.75rem; }
        .section-sm { padding-top: 2.5rem; padding-bottom: 2.5rem; }
        .section-xs { padding-top: 0.938rem; padding-bottom: 0.938rem; }
    }


    .section-subheading { font-weight: 400; font-size: 1.125rem; line-height: 1.375rem; letter-spacing: 0.3em; }
    .section-heading-lg { font-weight: 900; font-size: 2.955rem; line-height: 1.2; }
    .section-heading { font-weight: 800; font-size: 2.375rem; line-height: 1.5; }
    .section-heading-sm { font-weight: 800; font-size: 1.875rem; line-height: 1.5; }
    .section-heading-xs { font-weight: 800; font-size: 1.563rem; line-height: 1.5; }
    .section-description-lg { font-weight: normal; font-size: 1.375rem; line-height: 1.5; }
    .section-description { font-weight: normal; font-size: 1.125rem; line-height: 1.5; }
    .section-description-md { font-weight: normal; font-size: 1rem; line-height: 1.5; }
    .section-description-sm { font-weight: normal; font-size: 0.875rem; line-height: 1.5; }
    .section-description-xs { font-weight: normal; font-size: 0.75rem; line-height: 1.5; }
    .section-description-xxs { font-weight: normal; font-size: 0.625rem; line-height: 1.5; }

    @media only screen and (min-width: 1200px) and (max-width: 1600px) {
        .section-heading-lg { font-size: 2.955rem; }
        .section-heading { font-size: 2.375rem; }
        .section-description { font-size: 1.125rem; }
        .section-description-md { font-size: 1rem; }
        .section-description-sm { font-size: 0.875rem; }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .section-heading-lg { font-size: 2.955rem; }
        .section-heading { font-size: 2.375rem; }
        .section-description { font-size: 1.125rem; }
        .section-description-md { font-size: 1rem; }
        .section-description-sm { font-size: 0.875rem; }
    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .section-heading-lg { font-size: 2.625rem; }
        .section-heading { font-size: 2.188rem; }
        .section-heading-sm { font-size: 28px; }
        .section-description { font-size: 1rem; }
        .section-description-md { font-size: 0.935rem; }
        .section-description-sm { font-size: 0.875rem; }
    }

    @media only screen and (min-width: 576px) and (max-width: 767px) {
        .section-subheading { font-size: 0.938rem; }
        .section-heading-lg { font-size: 1.9rem; }
        .section-heading { font-size: 1.625rem; }
        .section-heading-sm { font-size: 1.5rem; }
        .section-heading-xs { font-size: 1.25rem; }
        .section-description-lg { font-size:1.125rem; }
        .section-description { font-size: 0.938rem; }
        .section-description-md { font-size: 0.875rem; }
        .section-description-sm { font-size: 0.813rem; }
        .section-description-xs { font-size: 0.625rem; }
        .section-description-xxs { font-size: 0.563rem; }
    }

    @media (max-width: 767px) {
        .section-subheading { font-size: 0.938rem; }
        .section-heading-lg { font-size: 1.9rem; }
        .section-heading { font-size: 1.625rem; }
        .section-heading-sm { font-size: 1.5rem; }
        .section-heading-xs { font-size: 1.25rem; }
        .section-description-lg { font-size:1.125rem; }
        .section-description { font-size: 0.938rem; }
        .section-description-md { font-size: 0.875rem; }
        .section-description-sm { font-size: 0.813rem; }
        .section-description-xs { font-size: 0.625rem; }
        .section-description-xxs { font-size: 0.563rem; }
    }


    .block-text h2 { font-weight: 700; }
    .block-text h2 span { font-weight: 300; }
/* ------------------------------------ end general class ------------------------------------ */


/* ------------------------------------ form style ------------------------------------ */
    .form-style .form-group { position: relative; margin-bottom: 0.938rem; width: 100%; }
    .form-style .form-group .control-label { font-weight: 700; font-size: 13px; line-height: 18px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 3px; }
    .form-style .form-group .control-label.text-2 { font-weight: 400; font-size: 22px; line-height: 1.5; color: var(--accent); margin-bottom: 10px; }
    .form-style .form-control { position: relative; font-size: 14px; color: var(--black); background: var(--white); border: 1px solid var(--accent); border-radius: 5px; width: 100%; box-shadow: none; }
    .form-style .form-control::placeholder { font-weight: 500; font-size: 0.75rem; color: #9B9B9B; opacity: 0.9; }
    .form-style .form-control::-webkit-input-placeholder { font-weight: 500; font-size: 0.75rem; color: #9B9B9B; opacity: 0.9; }
    .form-style .form-control::-moz-placeholder { font-weight: 500; font-size: 0.75rem; color: #9B9B9B; opacity: 0.9; }
    .form-style .form-control:-ms-input-placeholder { font-weight: 500; font-size: 0.75rem; color: #9B9B9B; opacity: 0.9; }
    .form-style .form-control:-moz-placeholder { font-weight: 500; font-size: 0.75rem; color: #9B9B9B; opacity: 0.9; }

    .form-style select.form-control option { font-size: 14px; color: var(--black); padding: 10px 0; }
    .form-style textarea.form-control { border-color: var(--accent); height: inherit !important; }

    .form-style input[type=checkbox] { appearance: checkbox; -moz-appearance: checkbox; -webkit-appearance: checkbox; -o-appearance: checkbox; -ms-appearance: checkbox; }
    .form-style input[type=radio] { appearance: radio; -moz-appearance: radio; -webkit-appearance: radio; -o-appearance: radio; -ms-appearance: radio; }
    .form-style input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

    .form-group .custom-checkbox .custom-control-input:checked~.custom-control-label::before { background-color: var(--accent); border-color: var(--accent); box-shadow: none; }
    .form-group .custom-checkbox .custom-control-input:focus~.custom-control-label::before { box-shadow: none; }

    .form-style .form-group .custom-radio .custom-control-label { font-weight: 500; font-size: 13px; line-height: 24px; color: var(--dark); }
    .form-style .form-group .custom-radio .custom-control-label::before { border-radius: 50%; box-shadow: none; }
    .form-style .form-group .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
        box-shadow: none;
        outline: none;
        border: none;
        border-radius: 50%;
    }

    .form-style .form-group .custom-input-file {
        font-size: 12px;
        line-height: 12px;
        color: rgba(34, 34, 34, 0.7); 
        border: 1px solid rgba(34, 34, 34, 0.7); 
        padding: 5px;
        width: 100%;
        display: inline-block;
        overflow: hidden;
        cursor: pointer;
    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
        .form-style .form-group .control-label { font-size: 14px; line-height: 16px; }
        .form-style .select-custome { width: 100%; margin-bottom: 1.25rem; }
        .form-style .select-custome .list { width: 100%; overflow: hidden; }
    }

    @media only screen and (min-width: 576px) and (max-width: 767px) {
        .form-style .form-group .control-label { font-size: 14px; line-height: 16px; }
        .form-style .select-custome { width: 100%; margin-bottom: 1.25rem; }
        .form-style .select-custome .list { width: 100%; overflow: hidden; }
    }

    @media (max-width: 767px) {
        .form-style .form-group .control-label { font-size: 14px; line-height: 16px; }
        .form-style .select-custome { width: 100%; margin-bottom: 1.25rem; }
        .form-style .select-custome .list { width: 100%; overflow: hidden; }    
    }


    .nice-select.select-custome { 
        width: 100%; 
        font-weight: 700; 
        font-size: 0.875rem; 
        line-height: 2.5rem;
        color: #979797;
        border-color: var(--accent);
        padding-left: 0.625rem; 
        height: 2.5rem; 
        margin-bottom: 0.938rem; 
    }
    .nice-select.select-custome:after { margin-top: -0.5rem; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
    .nice-select.select-custome:hover, .nice-select.select-custome:focus { outline: none; box-shadow: none; border-color: var(--accent); }
    .nice-select.select-custome .list { width: 100%; }
    .nice-select.select-custome .option { font-weight: 700; padding-left: 0.625rem; }

    .nice-select.select-custome .option:hover, 
    .nice-select.select-custome .option.focus, 
    .nice-select.select-custome .option.selected.focus { 
        color: var(--white); 
        background: var(--accent); 
    }
    .nice-select.select-custome .option.disabled { background-color: transparent; color: #979797; cursor: default; }


    .form-style fieldset { display: none; }
    .form-style .radio-tile-group { position: relative; overflow: hidden; width: 120px; height: 120px; }
    .form-style .radio-tile-group .radio-tile {
        display: flex;
        align-items: stretch;
        justify-content: center;
        text-align: center;
        width: 100%;
        height: 100%;
        border-radius: 1.25rem;
        padding: 0.75rem;
        border: 2px solid #F3F3F3;
        transition: transform 300ms ease;
    }
    .form-style .radio-tile-group .radio-tile .radio-tile-label { margin-bottom: 0; }
    .form-style .radio-tile-group .radio-tile .radio-tile-label p { line-height: 1.1; }
    .form-style .radio-tile-group .radio-button { z-index: 2; opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; }
    .form-style .radio-tile-group .radio-button:checked + .radio-tile { background: var(--accent); border-radius: 1.25rem; }
    .form-style .radio-tile-group .radio-button:checked + .radio-tile .radio-tile-label p { color: var(--white); }

    #form-kuesioner > .flex-5-column .flex-col { align-self: stretch !important; flex-basis: 20% !important; }
    
    @media (max-width: 767px) {
        .form-style .radio-tile-group { width: 70px; height: 100%; }
        #form-kuesioner > .flex-5-column { align-items: stretch; }
        #form-kuesioner > .flex-5-column .flex-col { flex-basis: 20%; height: 100%; }
    }

    .has-error { color: #EB5757 !important; }
    .has-error > label { color: #EB5757 !important; }
    .has-error > input { border-color: #EB5757 !important; }
    .has-error > textarea { border-color: #EB5757 !important; }
    .has-error > select { border-color: #EB5757 !important; }
    .has-error em { color: #EB5757 !important; font-size: 0.875rem !important; }
/* ------------------------------------ end form style ------------------------------------ */


/* ------------------------------------ flex-column ------------------------------------ */
    .flex-2-column {
        display: -ms-flexbox; 
        display: flex; 
        flex-flow: wrap; 
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .flex-2-column .flex-col { align-self: center; flex-basis: 100%; -ms-flex: auto; width: 100%; }

    @media (min-width: 31.25em) {
        .flex-2-column .flex-col { flex-basis: 50%; }
    }

    @media (min-width: 37.5em) {
        .flex-2-column .flex-col { flex-basis: 50%; }
    }

    @media (min-width: 60em) {
        .flex-2-column .flex-col { flex-basis: 50%; }
    }

    @media (min-width: 68.75em) {
        .flex-2-column .flex-col { flex-basis: 50%; }
    }

    @media (min-width: 77.5em) {
        .flex-2-column .flex-col { flex-basis: 50%; }
    }



    .flex-3-column {
        display: -ms-flexbox; 
        display: flex; 
        flex-flow: wrap; 
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .flex-3-column .flex-col { align-self: center; flex-basis: 100%; -ms-flex: auto; width: 100%; }

    @media (min-width: 31.25em) {
        .flex-3-column .flex-col { flex-basis: 50%; }
    }

    @media (min-width: 37.5em) {
        .flex-3-column .flex-col { flex-basis: 33.33%; }
    }

    @media (min-width: 60em) {
        .flex-3-column .flex-col { flex-basis: 33.33%; }
    }

    @media (min-width: 68.75em) {
        .flex-3-column .flex-col { flex-basis: 33.33%; }
    }

    @media (min-width: 77.5em) {
        .flex-3-column .flex-col { flex-basis: 33.33%; }
    }



    .flex-4-column {
        display: -ms-flexbox; 
        display: flex; 
        flex-flow: wrap; 
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .flex-4-column .flex-col { align-self: center; flex-basis: 100%; -ms-flex: auto; width: 100%; }

    @media (min-width: 31.25em) {
        .flex-4-column .flex-col { flex-basis: 50%; }
    }

    @media (min-width: 37.5em) {
        .flex-4-column .flex-col { flex-basis: 25%; }
    }

    @media (min-width: 60em) {
        .flex-4-column .flex-col { flex-basis: 25%; }
    }

    @media (min-width: 68.75em) {
        .flex-4-column .flex-col { flex-basis: 25%; }
    }

    @media (min-width: 77.5em) {
        .flex-4-column .flex-col { flex-basis: 25%; }
    }

    .flex-5-column {
        display: -ms-flexbox; 
        display: flex; 
        flex-flow: wrap; 
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: stretch;
        align-items: stretch
    }
    .flex-5-column .flex-col { align-self: stretch; flex-basis: 20%; -ms-flex: auto; width: 100%; margin-bottom: 0.625rem; }

    @media (min-width: 31.25em) {
        .flex-5-column .flex-col { flex-basis: 20%; }
    }

    @media (min-width: 37.5em) {
        .flex-5-column .flex-col { flex-basis: 20%; }
    }

    @media (min-width: 60em) {
        .flex-5-column .flex-col { flex-basis: 20%; }
    }

    @media (min-width: 68.75em) {
        .flex-5-column .flex-col { flex-basis: 20%; }
    }

    @media (min-width: 77.5em) {
        .flex-5-column .flex-col { flex-basis: 20%; }
    }


    .flex-6-column {
        display: -ms-flexbox; 
        display: flex; 
        flex-flow: wrap; 
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center
    }
    .flex-6-column .flex-col { align-self: center; flex-basis: 50%; -ms-flex: auto; width: 100%; margin-bottom: 0.625rem; }

    @media (min-width: 31.25em) {
        .flex-6-column .flex-col { flex-basis: 33.33%; }
    }

    @media (min-width: 37.5em) {
        .flex-6-column .flex-col { flex-basis: 25%; }
    }

    @media (min-width: 60em) {
        .flex-6-column .flex-col { flex-basis: 20%; }
    }

    @media (min-width: 68.75em) {
        .flex-6-column .flex-col { flex-basis: 16.66%; }
    }

    @media (min-width: 77.5em) {
        .flex-6-column .flex-col { flex-basis: 16.66%; }
    }
/* ------------------------------------ end flex-column ------------------------------------ */


/* ------------------------------------ background ------------------------------------ */
    .bg-accent { background: var(--accent) !important; }
    .bg-white { background: var(--white) !important; }
    .bg-black { background: var(--black) !important; }
    .bg-light { background: var(--light) !important; }
    .bg-dark { background: var(--dark) !important; }

    .bg-image { background-size: cover; background-repeat: no-repeat; overflow: hidden; }
    .bg-image.center { background-position: center center; }
    .bg-image.fixed { background-position: fixed !important; }
    .bg-image.overlay, .bg-image.overlay-primary, .bg-image.overlay-info, .bg-image.overlay-success, .bg-image.overlay-warning { position: relative; }
    .bg-image.overlay:before, .bg-image.overlay-primary:before, .bg-image.overlay-info:before, .bg-image.overlay-success:before, .bg-image.overlay-warning:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }
    .bg-image.overlay:before { background: rgba(0, 0, 0, 0.4); }
/* ------------------------------------ end background ------------------------------------ */


/* ------------------------------------ rounded ------------------------------------ */
    .rounded-sm { border-radius: 0.2rem !important; }

    .rounded { border-radius: 0.25rem !important; }

    .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }

    .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }

    .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }

    .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }

    .rounded-lg { border-radius: 0.3rem !important; }

    .rounded-circle { border-radius: 50% !important; }

    .rounded-pill { border-radius: 50rem !important; }

    .rounded-0 { border-radius: 0 !important; }
    .rounded-5 { border-radius: 0.313rem !important; }
    .rounded-8 { border-radius: 0.5rem !important; }
    .rounded-10 { border-radius: 0.625rem !important; }
    .rounded-15 { border-radius: 0.938rem !important; }
    .rounded-20 { border-radius: 1.25rem !important; }
    .rounded-30 { border-radius: 1.875rem !important; }
    .rounded-40 { border-radius: 2.5rem !important; }
    .rounded-50 { border-radius: 50% !important; }
/* ------------------------------------ end rounded ------------------------------------ */