/*
Author: Ermir Ramadan
Date:   14.01.2020
Updates: Robert Baumgartner, may 2025
*/

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face {
    font-family: 'Panton';
    src: url('css/fonts/panton/Panton-Bold/Panton-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: 700;
}

@font-face {
    font-family: 'Panton';
    src: url('css/fonts/panton/Panton-SemiBold.woff') format('woff'); /* Safari, Android, iOS */
    font-weight: 600;
}

@font-face {
    font-family: 'Panton';
    src: url('css/fonts/panton/Panton-Light/Panton-Light.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: 300;
}



/*--------------------------------------------------------------
# Defaults
--------------------------------------------------------------*/
html {
    --bg-blue: rgba(230, 238, 240, 1);
    --bg-blue-dark: rgba(0, 94, 110, 1);
    --blue-highlight: rgba(204, 223, 226, 1);
    --blue-text: rgba(0, 94, 110, 1);   
    --header-height: 150px;
    overflow-x: hidden;
}
body{
    font-family: Panton;
    font-weight: 300;
    color: var(--blue-text);
    font-size: 20px;
    /*padding: 50px 0;*/
    padding-top: 0;
    overflow-x: hidden;
    min-height: 100vh;
}

body.toolform-result {
    padding-top: var(--header-height);
    background-color: var(--bg-blue);
}

@media (max-width: 999px) {
    body{
        font-size: 16px;
        line-height: 1.2;
        padding-top: var(--header-height);
    }
}

h1{
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 600;
    font-size: 3.2em;
    margin-bottom: 0.5em;
}
h3{
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.6em;
    margin-bottom: 1em;
    word-break: break-word;
}
p{
    /* font-size: 1.563em; */
}
b{
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 700;
}

.default-div{
    padding: 4em 2em;
}

.right-content .default-div{
    padding: 0 2em;
}

.color-white{
    color: #ffffff;
}
.color-pink{
    color: #f29698;
}
.color-pink_red{
    color: #f15d60;
}
.color-blue{
    color: #90d2e8;
}
.color-dark-blue{
    color: #003A5C;
}
.color-green{
    color: #2EA836;
}
.color-petrol {
    color: var(--blue-text);
}
.color-transparent{
    color: transparent;
}
.color-pdf-blue{
    color: #7aa0c1;
}
.background-light{
    background-color: var(--bg-blue);
}
.background-highlight{
    background-color: var(--blue-highlight);
}
.background-red{
    background-color: #821E3E;
}
.background-dark-blue{
    background-color: #33617D;
}
.background-pink{
    background-color: #f29698;
}
.background-pink_red{
    background-color: #f15d60;
}

.background-blue{
    background-color: #90d2e8;
}
.background-darker-blue{
    background-color: #003A5C;
}
.background-transparent{
    background-color: transparent;
}
.background-white{
    background-color: #ffffff;
}
.background-green{
    background-color: #2EA836;
}
.background-petrol {
    background-color: var(--bg-blue-dark);
}
.background-blue-pink{
    /*
    background: rgba(224,236,244,1);
    background: -moz-linear-gradient(-45deg, rgba(224,236,244,1) 0%, rgba(218,221,229,1) 38%, rgba(222,221,227,1) 67%, rgba(239,226,222,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(224,236,244,1)), color-stop(38%, rgba(218,221,229,1)), color-stop(67%, rgba(222,221,227,1)), color-stop(100%, rgba(239,226,222,1)));
    background: -webkit-linear-gradient(-45deg, rgba(224,236,244,1) 0%, rgba(218,221,229,1) 38%, rgba(222,221,227,1) 67%, rgba(239,226,222,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(224,236,244,1) 0%, rgba(218,221,229,1) 38%, rgba(222,221,227,1) 67%, rgba(239,226,222,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(224,236,244,1) 0%, rgba(218,221,229,1) 38%, rgba(222,221,227,1) 67%, rgba(239,226,222,1) 100%);
    background: linear-gradient(135deg, rgba(224,236,244,1) 0%, rgba(218,221,229,1) 38%, rgba(222,221,227,1) 67%, rgba(239,226,222,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ecf4', endColorstr='#efe2de', GradientType=1 );
    */

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e0ecf4+1,dadde5+36,dedde3+67,efe2de+100 */
    background: #e0ecf4; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #e0ecf4 1%, #dadde5 36%, #dedde3 67%, #efe2de 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #e0ecf4 1%,#dadde5 36%,#dedde3 67%,#efe2de 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #e0ecf4 1%,#dadde5 36%,#dedde3 67%,#efe2de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ecf4', endColorstr='#efe2de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}


.font-panton-bold{
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 700;
}
.font-panton-light{
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 300;
}
.font-fontawesome{
    font-family: "Font Awesome 5 Free";
}
.section-holder{
    margin-top: 50px;
}
.info-button{
    border-radius: 50%;
    background-color: #003A5C;
    color: #ffffff;
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 25px;
    position: absolute;
    right: 0.5em;
    text-align: center;
    top: 0;
}
.info-button:hover{
    cursor: pointer;
}

a,
.button-holder,
button{
    display: inline-block;
    color: #ffffff;
    background-color: var(--bg-blue-dark);
    border: 2px solid var(--bg-blue-dark);
    outline: none;
    border-radius: 99px;
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 600;
    padding: 0.5em 1.5em;
    margin: 30px 0 10px;
    transition: all 0.15s ease-out;
}
a:hover{
    color: #ffffff;
    text-decoration: none;
}

.button-holder:hover,
button:hover {
    background-color: transparent;
    color: var(--bg-blue-dark);
}

.form-submit-icon .button-holder ~ i {
    transition: all 0.15s ease-out;
}

.button-holder:hover i,
.form-submit-icon .button-holder:hover ~ i,
button:hover i {
    color: var(--bg-blue-dark) !important;
}

.default-link a{
    color: #821E3E;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
}
.button-holder:focus,
button:focus{
    outline: none;
}
.opacity-div{
    opacity: 0;
    pointer-events: none;
}
.pointer-event-none{
    pointer-events: none;
    opacity: 0.6;
}
.font-size-14{
    font-size: 0.875em;
}
.font-size-25{
    font-size: 1.4em;
}
.font-size-30{
    font-size: 1.4em;
}
.font-size-50{
    font-size: 2em;
}
.font-size-40{
    font-size: 2em;
}
.margin-top-30{
    margin-top: 30px;
}
.margin-top-50{
    margin-top: 50px;
}
.margin-l-r-auto{
    margin-left: auto;
    margin-right: auto;
}
.pt-50{
    padding-top: 50px;
}
.pb-50{
    padding-bottom: 50px;
}
.border-bottom-1-black{
    border-bottom: 1px solid #000000;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1680px;
    border-radius: 0 0 24px 24px;
    z-index: 999999;
    box-shadow: 0 0 2em 0 rgba(0, 0, 0, 0.2);
    padding: 24px;
}

header .wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

header .logo {

}

    header .logo a {
        margin: 0;
        background: none;
        padding: 0;
        border: none;
        outline: none;
    }

    header .logo a svg {
        width: 228px;
        height: auto;
    }

/*--------------------------------------------------------------
# Page Wrap
--------------------------------------------------------------*/
.page-wrap{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.page-wrap .left-content{
    width: 50%;
    text-align: left;
    padding-right: 4em;
    padding-left: 2em;
}

.page-wrap .right-content{
    width: 50%;
    background-color: var(--bg-blue);
    
}

.page-wrap .right-content .form-active-holder {
    opacity: 1 !important;
    transition: all 0.5s ease-out !important;
}

.page-wrap .right-content .form-active-holder.opacity-div {
    opacity: 0 !important;
    transition: all 0.5s ease-out !important;
}

.form-active-holder {
    margin-bottom: 6em;
    position: relative;
}

@media (max-width: 999px) {
    .page-wrap .left-content{
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 2em;
    }
    .page-wrap .right-content{
        width: 100%;
    }

    .right-content .container .radio-holder img {
        max-width: 6em;
        margin-bottom: 0.25em;
    }
}

@media (min-width: 1000px) {
    .page-wrap {
        position: static;

    }

    .page-wrap > * {
        position: fixed;
        top: 0;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100vh;
        padding-top: var(--header-height);
        padding-bottom: 2em;
    }

    .page-wrap > .left-content {
        left: 0;
    }

    .page-wrap > .right-content {
        right: 0;
        text-align: left;
        padding-left: 2em;
    }

    .right-content .container {
        padding-left: 0;
        padding-right: 0;
        max-width: 600px;
        margin-left: 0;
    }

    .right-content .form-active-holder {
        max-width: 800px;
    }

    .right-content .container .radio-holder img {
        max-width: 4em;
        margin-bottom: 0.25em;
    }

    .left-content > * {
        max-width: 600px;
        margin-left: auto;
        margin-right: 0;
    }
}
/*--------------------------------------------------------------
# info-box
--------------------------------------------------------------*/
.modal-content{
    padding: 2em 4em 2em 2em;
    text-align: left;
}
.modal{
    position: absolute; 
}
/*--------------------------------------------------------------
# FORM
--------------------------------------------------------------*/
#form-professional-branch img{
    width: 100%;
    z-index: 1;
    position: relative;
}
/*-----------------------------------------
# Own Radio-Button
-----------------------------------------*/
/* The container */
.radio-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99;
    text-align: center
}
/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
    display: none;
    position: absolute;
    top: -25px;
    right: -25px;
    height: 50px;
    width: 50px;
    background-color: var(--bg-blue-dark);
    border-radius: 50%;
    text-align: center;
}

.active .checkmark {

}
/* On mouse-over, add a gray background color */
.radio-container:hover input ~ .checkmark {
    display: block;
    background-color: #fff;
    color: var(--bg-blue-dark);
    transform: scale(1);
}

.radio-container:hover input ~ .checkmark i {
    color: var(--bg-blue-dark);
}

.radio-container.active:hover input ~ .checkmark i {
    color: #fff;
}
/* When the radio button is selected, add a blue background */
.radio-container input:checked ~ .checkmark {
    display: block;
    background-color: var(--bg-blue-dark);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
    display: block;
}
/* Style the indicator (dot/circle) */
/*
.radio-container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #eeeeee;
}
*/

/*-----------------------------------------
# FORM - professional-branch
-----------------------------------------*/
.radio-holder label{
    border-radius: 1em;
    padding: 1em 0.5em;
    font-size: 1em;
    transition: all 0.15s ease-out;

}
.radio-holder label:hover{
    background-color: var(--blue-highlight);
}
.radio-holder label.active{
    background-color: var(--blue-highlight);
}
.checkmark i{
    color: #ffffff;
    font-size: 26px;
    line-height: 50px;
}

.radio-holder > * {
    padding-left: 0;
    padding-right: 0;
}
/*-----------------------------------------
# FORM - userd Time
-----------------------------------------*/
/* #form-used-time .checkmark{
    top: 24px;
    right: -6px;
} */


/*-----------------------------------------
# FORM - Input[range]
-----------------------------------------*/
.form-input-range-holder input[type="range"]{
    outline: none;
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 6px;
    height: 20px;
    width: 80%;
    background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0.15, #90d2e8),
            color-stop(0.15, #C5C5C5)
    );
    margin: 0 1.5em 0 1em;
    border: 1px solid #999;

    /* -webkit-box-shadow: inset 0px 6px 56px -13px rgba(0,0,0,0.37);
    -moz-box-shadow: inset 0px 6px 56px -13px rgba(0,0,0,0.37);
    box-shadow: inset 0px 17px 29px -10px rgba(0,0,0,0.37); */

    overflow: unset !important;
}
.form-input-range-holder input[type="range"]:hover{
    cursor: pointer;
}

.form-input-range-holder input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-highlight);
    cursor: pointer;
    border: 1px solid #999;
}
.form-input-range-holder  .form-input-range::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    border: 2px solid #90d2e8;
}
.range-output-holder{
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 600;
    font-size: 1em;
    margin: 0.5em auto;
    text-align: center;
}
.range-holder-main i,
.range-holder-main img{
    /*height: 30px;*/
    width: 2em;
}

/*-----------------------------------------
# FORM - employee
-----------------------------------------*/
.form-input-range-holder i{
    font-size: 2em;
}



/*-----------------------------------------
# FORM - online meetinig
-----------------------------------------*/
#form-more-meeting-online img {
    max-width: 3em;
}

/*-----------------------------------------
# FORM - defaults
-----------------------------------------*/
.form-last-text{
    margin-top: 50px;
    margin-bottom: 50px;
}
input[type="submit"]{
    padding: 12px 32px;
}
input::-webkit-input-placeholder { /* WebKit browsers */
    color: transparent;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: transparent;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: transparent;
}
input :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: transparent;
}

.form-submit-icon{
    display: inline-block;
    margin-top: 30px;
}
.form-submit-icon input[type='submit']{
    margin: 0;
    padding-left: 50px;
    padding-right: 50px;
}
.form-submit-icon i{
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    color: #ffffff;
}


/*-----------------------------------------
# FORM - Result
-----------------------------------------*/
.form-result-top h3{
    padding: 0 5%;
}

#form_result{
    /* background-image: url(images/background_v2/background_clear_clear.png);
    background-size: cover; */
    /*background: #daf4fa;*/

}
#form_result img{
    height: 160px;
    width: auto;
    margin-bottom: 30px;
}
#form_result .form_result_img_stat img{
    height: auto;
    width: 100%;
    max-width: 120px;
    margin: 0;
}

#form_result .background-white {

}

.form-result-output{
    font-size: 1em;
    font-family: 'Panton', Arial, sans-serif;
    font-weight: 600;
    line-height: 1;
}
.form-result-first{
    padding: 20px 30px;
}
.form-result-first-div-1{
    margin-right: 1%;
}
.form-result-first-div-2{
    flex: 0 0 57.333333%;
    max-width: 57.333333%;
}


.form-reusult-output-mycockpit{
    margin-top: 5em;
}
.form-reusult-output-mycockpit h3{
    font-size: 2.5em;
    margin-top: 1.5em;
}

@media (max-width: 999px) {
    .form-reusult-output-mycockpit h3.color-transparent {
        height: 1;
        overflow: hidden;
        margin: 0 !important;
    }
}

.form-reusult-output-mycockpit span{
    display: block;
}
.form-reusult-output-mycockpit-2{
    margin-top: 30px;
}

.form-result-first a,
.form-reusult-output-mycockpit a,
.form-reusult-output-mycockpit-2 a{
    background: none;
    padding: 0;
    margin: 0;
    color: #003A5C;
}

.form-send-result {
    margin-top: 4em;
    padding: 4em;
    border-radius: 1em;
    position: relative;
}

.form-send-result .stoerer {
    position: absolute;
    top: 2em;
    right: 2em;
    transform: rotate(-10deg);
    background-color: var(--bg-blue-dark);
    color: #ffffff;
    padding: 0.5em;
    border-radius: 99px;
    width: 6em;
    height: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;    
}

@media (max-width: 799px) {
    .form-send-result .stoerer{
        top: 2em;
        right: 50%;
        transform: translateX(50%) rotate(-10deg);

    }
}

@media (max-width: 999px) {
    .form-send-result{
        padding: 2em;
    }
}

.form-send-result h3{
    margin-top: 0;
    margin-bottom: 0.25em;
    text-align: center;
    padding-left: 4em;
    padding-right: 4em;
}
.form-send-result h3 + p {
    font-size: 1.2em;
    text-align: center;
    padding-left: 4em;
    padding-right: 4em;
}

@media (max-width: 799px) {
    .form-send-result h3{
        padding-left: 0;
        padding-right: 0;
        padding-top: 4em;
    }
    .form-send-result h3 + p {
        padding-left: 0;
        padding-right: 0;
    }
}
.form-send-result form {
    margin-top: 4em;
}

.form-send-result label{
    width: 100%;
}
.form-send-result input[type='password'],
.form-send-result input[type='email'],
.form-send-result input[type='text'],
.form-send-result select{
    width: 100%;
    border: none;
    padding: 0 10px;
}
.form-send-result .row{
    margin-bottom: 10px;
}

.field-error{
    color: #F29698 !important;
}
.field-error input,
.field-error select{
    border: 1px solid #F29698 !important;
}

.circle-holder{
    height: 160px;
    width: 160px;
    margin: 20px auto;
    font-size: 5em;
    line-height: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*User form Checkbox*/
.control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    padding-top: 3px;
    cursor: pointer;
}
.control input {
    position: absolute;
    left: 1px;
    z-index: -1;
    opacity: 0;
}
.control_indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #ffffff;
    border: 0px solid #ffffff;
    border-radius: 0px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #ffffff;
}

.control input:checked ~ .control_indicator {
    background: #ffffff;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}

.form-reusult-output-mycockpit .user_change_inputs input[type=submit]{
    background: var(--bg-blue-dark);
    color: #ffffff;
    padding: 1em 3em;
    border-radius: 99px;
    margin: 30px 0 10px;
    border: none;
    border: 2px solid var(--bg-blue-dark);
    transition: all 0.15s ease-out;
    font-size: 1em;
    white-space: unset !important;
    font-size: 20px;
}
@media (max-width: 999px) {
    .form-reusult-output-mycockpit .user_change_inputs input[type=submit]{
        font-size: 1rem;
    }
}
.form-reusult-output-mycockpit .user_change_inputs input[type=submit]:hover{
    background: #ffffff;
    color: var(--bg-blue-dark);
}


/*--------------------------------------------------------------
# Admin Tool
--------------------------------------------------------------*/

#admin-tool .nav-item a.active{
    background-color: #E5EBEE;
    color: #003A5C;
}
#admin-tool .tab-content li{
    border: none;
    border-bottom: 1px solid #003A5C;
}
#admin-tool .list-group{
    padding: 0 70px;
}
#admin-tool .datepicker input{
    background-color: #ffffff !important;
    border-radius: 0;
}
#admin-tool .datepicker .datepicker-icon{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translate(0, -50%);
}
#admin-tool .error-data{
    display: none;
}
#admin-tool .datepicker.date-from.error input{
    border: 1px solid #f29698;
}
#admin-tool .datepicker.date-from.error .error-data{
    display: block;
}

.prev:before{
    content: '\f060';
    font-family: "Font Awesome 5 Free";
}
.next:before{
    content: '\f061';
    font-family: "Font Awesome 5 Free";
}
hr.seperator{
    border: none;
    border-bottom: 1px solid #003A5C;
}
#admin-tool th,
#admin-tool td{
    border: none;
}
#admin-tool input.disabled{
    background-color: transparent;
    border: none;
}
#admin-tool input.active{
    background-color: #ffffff;
}
#admin-tool td i{
    display: none;
}
#admin-tool td i.active{
    display: block;
}
#admin-tool td i:hover{
    cursor: pointer;
}

#admin-tool .t_holder.error{
    color: #F29698 !important;
}

#admin-tool input{
    width: 100px;
}
#admin-tool .calculate-holder img{
    width: 50%;
    margin: 20px 0;
}




input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"].value_default.active,
input[type="number"]:focus {
    -moz-appearance: number-input;
}




.form-button-holder {
    display: flex;
    gap: 1em;
    flex-flow: row wrap;
    align-items: center;
    margin-top: 2em;
}

    @media (max-width: 999px) {
        .form-button-holder {
            justify-content: center;
        }
    }

.form-button-holder * {
    margin: 0;
}

.form-button-holder br {
    display: none;
}

.form-button-holder button {

}


.same-height-img-1,
.same-height-img-2{
    background-color: #fff;
}




.modal-backdrop {
    z-index: 9999999 !important;
}

.modal {
    z-index: 99999999 !important;
    top: 50vh !important;
    transform: translate(0, -50%) !important;
    color: var(--bg-blue-dark);
}

    .modal .close {
        position: absolute;
        right: 1em;
        top: 1em;
        width: 1.5em;
        height: 1.5em;
        margin: 0;
        border: 2px solid var(--bg-blue-dark);
        color: var(--bg-blue-dark);
    }

.modal.show .modal-dialog {
    display: flex;
    align-items: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100vh !important;
}



input[name="user_address"],
input[name="user_zip"],
input[name="user_city"] {
    padding-right: 2em !important;
}

input[name="user_address"].validated,
input[name="user_zip"].validated,
input[name="user_city"].validated {
    background-image: url(images/valid.svg);
    background-size: 1em;
    background-position: center right 0.5em;
    background-repeat: no-repeat;
}

input[name="user_address"].invalidated,
input[name="user_zip"].invalidated,
input[name="user_city"].invalidated {
    background-image: url(images/invalid.svg);
    background-size: 1em;
    background-position: center right 0.5em;
    background-repeat: no-repeat;
}