@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-regular.ttf') format('truetype');
}

/*
    START
    LOGIN FORM
*/

html {
    background-color: var(--login-bg-color);
    height: 100vh;
}

body {
    font-family: "Montserrat", sans-serif;
    background: var(--login-bg-color);
}

a, a:hover {
    color: var(--sub-color);
    text-decoration: none !important;
}

.logo-image {
    width: 100%;
}

.signin-card {
    -webkit-animation: cardEnter 0.75s ease-in-out 0.5s;
    animation: cardEnter 0.75s ease-in-out 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 0;
}

.signin-card {
    max-width: 550px;
    border-radius: 32px;
    margin: 20px auto;
    background-color: #88c8f9;
    text-align: center;
}

    .signin-card .logo-image, h1, p {
        text-align: center;
    }

.logo-image {
    border-radius: 10px;
    width: 90%;
    height: 300px;
    /*background: url('../images/logoGlobal.jpg');*/
    background-position-x: center;
}

img {
    position: relative;
    margin: 32px auto 0 auto;
    width: 100%;
}


.display1 {
    font-size: 48px;
    font-weight: 100;
    line-height: 1.2;
    color: #fff;
    text-transform: inherit;
    letter-spacing: inherit;
    margin-left: 24px;
}

.subhead {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.1;
    color: #fdfbe1;
    text-transform: inherit;
    letter-spacing: inherit;
    text-align: center;
    margin-bottom: 22px;
    margin-left: 25px;
}

#Pwd + .eye-show-pwd {
    cursor: pointer;
    pointer-events: all;
    float: right;
    margin-top: -28px;
    margin-right: 8px;
    color: #757575;
}

.btn-login {
    background-color: white;
    color: #151b4d;
    border: 2px solid #151b4d;
    height: 60px;
    font-size: 18px;
    font-weight: 600;
    /* max-width: 300px; */
    margin-top: 40px;
}

    .btn-login:hover,
    .btn-login:active,
    .btn-login:focus {
        background-color: #279af4 !important;
        border-color: #2680ef;
        color: white !important;
    }

    .btn-login:focus {
        box-shadow: 0 0 0 0.2rem rgba(69, 187, 233, 0.26);
    }

.alert-login {
    font-size: 12px;
}

@-webkit-keyframes cardEnter {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        -ms-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        -ms-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        -ms-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        -ms-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes cardEnter {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        -ms-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        -ms-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        -ms-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        -ms-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/*
    END
    LOGIN FORM

    START
    ANIMAZIONE MULETTO
*/

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.container {
    height: 100%;
    width: 100%;
    display: block;
}

    .container .car-wrapper {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

.container-mueltto {
    margin-top: 15px;
}

.muletto {
    position: absolute;
    right: -9px;
}

.car {
    width: 20em;
    height: 12.5em;
    position: relative;
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
    z-index: 4;
    -webkit-animation: carMove 0.3s infinite;
    -moz-animation: carMove 0.3s infinite;
    -ms-animation: carMove 0.3s infinite;
    -o-animation: carMove 0.3s infinite;
    animation: carMove 0.3s infinite;
}

.wind {
    position: absolute;
    z-index: -1;
    right: 100%;
    height: 100%;
    margin-right: -1.25em;
}

    .wind .p {
        position: absolute;
        background: #fff;
        border-radius: 0.625em;
        height: 0.625em;
    }

    .wind .p1 {
        width: 4.375em;
        position: absolute;
        right: 0;
        top: 1.5625em;
        animation: wind 1s -1s linear infinite;
    }

    .wind .p2 {
        width: 6.25em;
        right: 2.5em;
        top: 3.75em;
        animation: wind 1s -2s linear infinite;
    }

    .wind .p3 {
        width: 3.125em;
        right: 0em;
        top: 6.5625em;
        animation: wind 1s -1s linear infinite;
    }

    .wind .p4 {
        width: 3.75em;
        right: 6.25em;
        top: 8.4375em;
        animation: wind 1s 1s linear infinite;
    }

    .wind .p5 {
        width: 4.375em;
        right: 1.875em;
        top: 9.0625em;
        animation: wind 1s -1.5s linear infinite;
    }

.car-wrapper_inner {
    position: relative;
    z-index: 4;
}

@keyframes carMove {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-1px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes wind {
    0% {
        transform: translateX(100%);
        opacity: 1;
    }

    100% {
        transform: translateX(-400%);
        opacity: 0;
    }
}

.car_outter {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    position: relative;
    animation: carDrive 5s 1s cubic-bezier(0.88, 0.08, 0.16, 1.1) infinite;
}

.user-pass-label {
    font-size: 15px;
    color: white;
}

.user-pass-input input {
    background-color: #e8f0fe !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    color: black !important;
}

@keyframes carDrive {
    0% {
        transform: translateX(-100%);
    }

    25% {
        transform: translateX(0%);
    }

    70% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes bgIn {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

@keyframes wrapperIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

form {
    padding: 16px 80px 32px 80px;
}


input#Usr, input#Pwd {
    padding: 0 5px;
    max-width: 95%;
    font-size: 16px;
    max-height: 30px;
    text-align: center;
}


.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
    color: #269bea !important;
}

    .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left), .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover, .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]), .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]), .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover {
        border-color: #269bea !important;
    }

    .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
    .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
    .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
    .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
    .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
    .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
    .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
    .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
    .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
    .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
    .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
    .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
    .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
    .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
    .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
    .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
    .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
    .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
    .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
        border-color: #269bea3a !important;
    }



/*
    END
    ANIMAZIONE MULETTO
*/