@font-face {
    font-family: 'futuraPTBook';
    src: url('../../fonts/FuturaPTBook.eot?#iefix') format('embedded-opentype'),
    url('../../fonts/FuturaPTBook.otf')  format('opentype'),
    url('../../fonts/FuturaPTBook.woff') format('woff'),
    url('../../fonts/FuturaPTBook.ttf')  format('truetype'),
    url('../../fonts/FuturaPTBook.svg#FuturaPT-Book') format('svg');
}

@font-face {
    font-family: 'futuraPTHeavy';
    src: url('../../fonts/FuturaPTHeavy.eot?#iefix') format('embedded-opentype'),
    url('../../fonts/FuturaPTHeavy.otf')  format('opentype'),
    url('../../fonts/FuturaPTHeavy.woff') format('woff'),
    url('../../fonts/FuturaPTHeavy.ttf')  format('truetype'),
    url('../../fonts/FuturaPTHeavy.svg#FuturaPT-Book') format('svg');
}

:root{
    --color-blue:#44A1A9;
    --color-dark-blue: #0c1d26;
    --coloe-white-pink: #f9f5ef;
    --color-orange: #ECB156;
    --color-red:#dc3545;
    --color-green:#479D6B;
}

html, body {height: 100%; font-size: 18px;}
body { line-height: 1.4em; color: #333; font-family: futuraPTBook,helveticaneue-light,helvetica neue light,helvetica neue,Helvetica,Arial,lucida grande,sans-serif;}
body{background: url(/security/img/bg.jpg) 50% 0; background-size: cover; height: 100%; width: 100%;}

body.quick-test{background: url(/security/img/bg2.jpg) 50% 0; background-size: cover;}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 600; line-height: 1;}
.h2, h2 {font-size: 4.5rem;}
.h3, h3 {font-size: 4.2rem;}
.h4, h4 {font-size: 3.3rem;}
.h5, h5 {font-size: 1.5rem;}
.h6, h6 {font-size: 1.2rem; font-weight: normal; line-height: 1.5;}

a {color: #222;}
a:hover {color: #222; text-decoration: none;}

.link-orange, .link-orange:visited {color: var(--color-orange); text-decoration: none;}
.link-orange:hover {color: var(--color-orange); text-decoration: underline;}
.link-white, .link-white:visited { color: white; text-decoration: underline; opacity: 0.5;}
.link-white:hover {color: white;text-decoration: none; opacity: 1;}
.alert {border-radius: .5rem;}
.text-bold {font-family: futuraPTHeavy;}

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

.btn {border-radius: 25px; padding: 0.5rem 1.75rem; white-space: nowrap; color: white; font-weight: 100; background: var(--color-dark-blue); border: 1px solid #4e5f69;  transition: background-color 0.5s ease;text-decoration: none !important;}
.btn:hover {background: #173747; color: white}
.btn:focus {outline:0;box-shadow: none;}
.btn.blue {background-color: var(--color-blue); border-color: transparent;}
.btn.dark {background: #0c1d265e;border: 1px solid #ffffff38;}
.btn.white {background: #ffffff26;border: 1px solid #ffffff38;}
.btn.white:hover {background: #ffffff34; color:white}
.btn.orange {background-color: var(--color-orange); border-color: transparent;}
.btn.orange:hover {filter: brightness(103%)}
.btn.dark:hover {background: #0c1d2685;}
.btn.blue:hover {background: #4ab0b9; color: white;}
.btn:active{ box-shadow: inset 0px 2px 2px rgba(68,68,68,0.25) }


/*
.btn {color: #000 !important; font-weight: bold; border-radius: 3px;border: none; padding: 0.55rem 1.5rem;font-size: 0.9rem;display: inline-block;text-align: center;}
.btn-yellow{background-color: var(--color-royal-yellow) !important;}
.btn-green{background-color: var(--color-green-garter) !important; color: white !important;}
.btn-yellow:hover, .btn-green:hover {filter: brightness(105%);}
.btn-yellow:active,  .btn-green:active {outline: none; box-shadow: inset 0 1px 2px rgba(68, 68, 68, 0.4);}
.btn:focus,.btn:active {box-shadow: none;}
.unsubscribe-text button {background: transparent;border: none; text-decoration: underline;padding: 0; color: #222!important;font-weight: 600; outline: none;}
*/

/* lang select */

.lang-select {display: inline-block; text-align: left;width: 70px;position: relative; line-height: 1.5;float: right; }
.lang-select_current {position: relative; cursor: pointer; outline: none;}
.lang-select_current:focus + .lang-select_list {opacity: 1;-webkit-animation-name: none;animation-name: none;}
.lang-select_current:focus + .lang-select_list .lang-select_option {cursor: pointer;}
.lang-select_current:focus .lang-select_icon {transform: translateY(-50%) rotate(180deg);}
.lang-select_icon {position: absolute;    top: 44%;    right: 0;    transform: translateY(-50%);    width: 15px;  transition: 0.2s ease;}
.lang-select_input {display: none;}
.lang-select_icon path {fill: black}
.lang-select_input:checked+.lang-select_input-text {display: flex;}
.lang-select_input-text {display: none; width: 100%; margin: 0;color: white; font-size: 95%; }
.lang-select_list { margin-top: 0px; z-index:1; position: absolute; width: 164px; top: 2.2rem; left: -0.75rem; padding:0; list-style: none; -webkit-animation-name: HideList; animation-name: HideList; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: step-start; animation-timing-function: step-start;    background:#0c1d26d1; opacity: 0;    border-radius: 1rem; box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 32%);}
.lang-select_option {display: flex;margin: 0;padding: 0.5rem .75rem;font-weight: normal; border-radius: 0.75rem; color:white}
.lang-select_option:hover, .lang-select_option:focus {text-decoration: none; background: var(--color-blue); color: white;}
.lang-select_flag { width: 24px; margin-right: 6px;margin-top: -1px;border-radius: 69%;}

.swal2-popup.flash-message {width: auto;padding: 0.8em 1.2em;font-size: 1rem;color: #222;}
.swal2-popup.flash-message.error .swal2-content {color:#dc3545;}
.swal2-popup.flash-message.success .swal2-content {color: #28a745;}
.swal2-popup.flash-message .flash-message-icon {position: relative; top:2px; margin-right: 5px;}

.form-content {margin: 0 -1.5rem -1.5rem; padding: 1.5rem; border-radius: 2rem; background: var(--color-blue); box-shadow: 0 -1px 5px rgba(0,0,0,.1); color:white;}
.form-content.ts {background: #edcf5f; color: var(--color-dark-blue);}
.form-content.ts label {color: var(--color-dark-blue);}
.form-content.ts input[type="text"], .form-content.ts input[type="email"],
.form-content.ts input:focus{background: white !important; color: var(--color-dark-blue) !important;}
.form-content.ts input:focus {box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;}

.form-error, .form-success {margin: 0 -1.5rem -2rem; padding: 1.5rem 1.5rem 3.2rem; border-radius: 2rem; text-align: left; color: white; box-shadow: 0 -1px 5px rgba(0,0,0,.1); border-color: transparent;}
.form-error {background: var(--color-red);}
.form-success {background: var(--color-green);}
.form-error a, .form-error a:visited {color: white; text-decoration: underline;}
.form-error a:hover {color: white; text-decoration: none;}
.form-success { margin: 0 -1.5rem -2rem; padding: 1.5rem 2rem 3.2rem; border-radius: 2rem; background: var(--color-green); text-align: left; color: white; box-shadow: 0 -1px 5px rgba(0,0,0,.1);}
.form-control:focus + label {opacity: 1;}
.form-error .mb-3:last-child {margin-bottom: 0 !important;}


input[type="text"], input[type="email"], input[type="password"] {background: var(--color-blue); border:  1px solid #ffffff8a; border-radius: 1.5rem; color: white;}
input:focus {outline: none !important; box-shadow: none !important; background-color: var(--color-blue) !important; border-color: white !important; color:white !important;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {-webkit-background-clip: text; -webkit-text-fill-color: white !important;}

.form-content.ts input:-webkit-autofill,
.form-content.ts input:-webkit-autofill:hover,
.form-content.ts input:-webkit-autofill:focus,
.form-content.ts input:-webkit-autofill:active { -webkit-text-fill-color: var(--color-dark-blue) !important;}

label {color: #ffffff;margin-bottom: 0.25rem;  transition: opacity 0.5s ease;}
.password-link {color: white; text-decoration: underline;  opacity: 0.5}
.password-link:hover {opacity: 1; color: white;}

.form-group {position: relative; padding-top: 1.6rem;}
.form-group label {position: absolute; top:0; left: 0; opacity: 0.5;}

.op-0 {opacity: 0;}
.op-5 {opacity: 0.5;}
.op-7 {opacity: 0.7;}

.chk-container {display: block; position: relative;padding-left: 26px;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
.chk-container input {position: absolute; opacity: 0; cursor: pointer;height: 0;width: 0;}
.chk-container .checkmark {position: absolute; top: 3px; left: 0; height: 18px; width: 18px; background-color: white;}
.chk-container:hover input ~ .checkmark {background-color: white;}
.chk-container input:checked ~ .checkmark {background-color: white;}
.chk-container .checkmark:after {content: ""; position: absolute;display: none;}
.chk-container input:checked ~ .checkmark:after {display: block;}
.chk-container .checkmark:after {left: 6px; top: 2px; width: 6px; height: 13px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg);    transform: rotate(45deg); border-color: var(--color-blue)}

.mess_link {color: white;text-decoration: underline;}
.mess_link:hover, .mess_link:active {color: white;text-decoration: none;}

.toggle-password {position: absolute; top: 2.35rem; right: 0.75rem; color: white; opacity: 0.5; cursor: pointer; transition: opacity 0.5s ease;}
.toggle-password:hover {opacity: 1;}

#user_register_password,
#user_register_passwordRepeat {padding-right: 2.2rem;}

.vue-hide {
    visibility: hidden !important;
    height: 0 !important;
}

@media (max-width: 1300px) {
    .lang-select_list {left: auto; right: 0;}
    .swal2-popup.flash-message .swal2-content {padding: 0}

}


@media (max-width: 768px) {

    .btn {
        border-radius: 25px;
        padding: 0.4rem 1.25rem;
    }
}

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.25) 20%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: shimmer 2s infinite;
    animation: shimmer 2s infinite;
    content: "";
}




@-webkit-keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}