/*
 * Copyright (c) 2023, DSDSystem and/or its affiliates. All rights reserved.
 */

/*
    PAGE DE LOGIN
    Created on : 5 janv. 2017, 10:48:43
    Author     : dsdsystem
*/

.login_page_wrapper {
    width: 100%;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgb(255, 255, 255);
    opacity: 0.35;
}

.login-page .container .login_animation,
.login-page .container .background,
.login-page .container {
    background: url('../../images/login/background.jpg') no-repeat top center;
    background-size: cover;
}

.login-page .container.container-food .login_animation,
.login-page .container .background-food,
.login-page .container.container-food {
    background-image: url("../../images/login/background-agro.jpg");
}

.login-page .container.container-industry .login_animation,
.login-page .container .background-industry,
.login-page .container.container-industry {
    background-image: url("../../images/login/background-industrie.jpg");
}

.login-page .container.container-building .login_animation,
.login-page .container .background-building,
.login-page .container.container-building {
    background-image: url("../../images/login/background-batiment.jpg");
}

.login-page .container.container-chemistry .login_animation,
.login-page .container .background-chemistry,
.login-page .container.container-chemistry {
    background-image: url("../../images/login/background-chimie.jpg");
}

.login-page .container.container-altair8800 .login_animation,
.login-page .container .background-altair8800,
.login-page .container.container-altair8800 {
    background-image: url("../../images/login/background-altair8800.jpg");
}

.login-page .container.container-energy .login_animation,
.login-page .container .background-energy,
.login-page .container.container-energy {
    background-image: url("../../images/login/background-energie.jpg");
}

.login-page .container.container-hospital .login_animation,
.login-page .container .background-hospital,
.login-page .container.container-hospital {
    background-image: url("../../images/login/background-hopital.jpg");
}

.login-page .container.container-sav .login_animation,
.login-page .container .background-sav,
.login-page .container.container-sav {
    background-image: url("../../images/login/background-sav.jpg");
}

.login-page .container.container-sav2 .login_animation,
.login-page .container .background-sav2,
.login-page .container.container-sav2 {
    background-image: url("../../images/login/background-sav2.jpg");
}

.login-page .container.container-transport .login_animation,
.login-page .container .background-transport,
.login-page .container.container-transport {
    background-image: url("../../images/login/background-transport.jpg");
}

.login-page .container.container-town .login_animation,
.login-page .container .background-town,
.login-page .container.container-town {
    background-image: url("../../images/login/background-ville.jpg");
}

.login-page .container.container-manufacture .login_animation,
.login-page .container .background-manufacture,
.login-page .container.container-manufacture {
    background-image: url("../../images/login/background-manufacture.jpg");
}

.login-page {
    margin: 0;
    padding: 0;
    position: relative;
    font-weight: 300;
}

.login-page .container {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
}

.login-page .container .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .95;
    /*filter: blur(6px);*/
}

.login-page .container .login_animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .0;
    clip-path: polygon(10% 0%, 20% 0, 10% 100%, 0% 100%);
    clip-path: polygon(90% 0%, 92% 0%, 90% 100%, 88% 100%, 90% 0%, 85% 0%, 84% 0%, 84% 100%, 85% 100%);
}

.login-page .login-zone {
    display: flex;
    flex-direction: column;
    height: 90%;
    width: 430px;
    position: absolute;
    overflow: hidden;
    margin: 0 30px 0 auto;
    top: 5%;
    /*left: 35%;*/
    border-radius: 20px;
    /*top: calc(50% - 200px);*/
    /*left: calc(50% - 245px);*/
    background: #fff;
    border: 1px solid #b3b3b3;
    box-shadow: -9px -9px 32px rgba(0, 0, 0, .3);
}

.login-page .login-zone .login-container {
    display: flex;
    flex-direction: column;
    margin: 5% 10%;
    height: 100%;
}

.login-page .login-zone .login-container .form-login {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-page .login-zone .logo {
    width: 100%;
    /*height: 100px;*/
    background-image: url('../../images/login/logo-altair.png');
    background-repeat: no-repeat;
    background-position: center center;
    /*border-bottom: 1px solid #f2f2f2;*/
    /*margin-bottom: 16px;*/
    flex: 1;
    min-height: 80px;
}

.login-page .login-zone .ui-messages-error,
.login-page .login-zone .ui-message-error {
    border-radius: 10px;
    background-color: #FFE2E2;
    color: #840000;
}

.login-page .login-zone .ui-messages-error span,
.login-page .login-zone .ui-message-error span {
    background: transparent;
    font-size: 12px;
    font-weight: 400;
}

.login-page .login-zone .login-slider {
    transition: 1s;
}

.testTemp {
    padding-left: 5px;
}

.login-page .login-zone .login-slider.on {
    /*margin-left: -100%;*/
    display: none;
}

.login-page .login-zone .login-slider.off {
    /*margin-left: -100%;*/
    display: flex;
}

.login-page .login-zone .sso-login,
.login-page .login-zone .regular-login {
    display: inline-block;
    float: left;
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
}

.username-container, .password-container {
    margin-bottom: 10px;
}

.form-label {
    font-size: 14px;
    color: #434343;
}

.login-page .login-zone input {
    display: block;
    background: transparent;
}

.login-page .login-zone input {
    border: 2px solid #DCDCDC;
    border-radius: 5px;
    height: 50px;
    font-size: 16px !important;
    color: #434343;
}

.login-page .login-zone input.ui-state-error,
.login-page .login-zone input.ui-state-error:focus {
    border-color: #FF4848;
    background-color: #FFF9F9;
    border-width: 2px;
}

.login-page .login-zone input:focus {
    outline: 0;
    /*border-bottom: 1px solid #474545;*/
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}


.login-page .login-zone input::-webkit-input-placeholder,
.login-page .login-zone input::-moz-placeholder,
.login-page .login-zone input::-ms-input-placeholder {
    text-transform: uppercase;
    position: relative;
    top: 0;
    transition: .4s;
}

.login-page .login-zone input.ui-state-focus::-webkit-input-placeholder,
.login-page .login-zone input.ui-state-focus::-moz-placeholder,
.login-page .login-zone input.ui-state-focus::-ms-input-placeholder {
    font-size: 8px;
    text-transform: uppercase;
    position: relative;
    top: -16px;
}

.login-page .login-zone .login_submit {
    border: 0;
    width: 100%;
    height: 50px;
    /*padding: 12px 24px;*/
    background: #ea6d21;
    color: white;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.login-page .login-zone .login_submit span.ui-button-text {
    font-size: 16px !important;
}

.sso-login {
    height: 100%;
    width: 100%;
}

.form-separator.on, .sso-login.on {
    display: none;
}

.form-separator.off, .sso-login.off {
    display: flex;
}

.sso-login-top {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sso-login-bottom {
    text-align: center;
    width: 100%;
    padding-top: 16px;
    background: white;
}

.sso-login .ui-button,
.sso-mode .ui-button {
    display: block;
    position: relative;
    margin-bottom: 12px;
    height: 50px;
    line-height: 42px;
    color: #ea6d21;
    background: #FFFFFF;
    border: 2px solid #ea6d21;
    border-radius: 5px;
    width: 100%;
}

.sso-login .ui-button span.ui-button-text,
.sso-mode .ui-button span.ui-button-text {
    font-size: 16px;
    font-weight: 700;
}

.sso-login .ui-button:hover,
.sso-mode .ui-button:hover {
    background: #EA6D21;
    color: #FFFFFF;;
}

.sso-login .ui-button:before {
    content: " ";
    display: block;
    width: 50px;
    height: 50px;
    background: #ea6d21;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: -2px;
    left: -1px;
    border-radius: 5px;
}
.sso-login .sso-btn.openid:before {
    background-image: url('../../images/login/btn-sso-openid.png');
}

.sso-login .sso-btn.saml:before {
    background-image: url('../../images/login/btn-sso-saml.png');
}

.sso-login .sso-btn.google:before {
    background-image: url('../../images/login/btn-sso-google.png');
}

.sso-login .sso-btn.liveid:before {
    background-image: url('../../images/login/btn-sso-liveid.png');
}

.sso-login .classic-btn:before {
    background-image: url('../../images/login/btn-classic.png');
}

.login-page .footer {
    margin-top: 30px;
    width: 100%;
    font-size: 12px;
    bottom: 0;
    background: #fff;
}

.login-page .footer .footer-left,
.login-page .footer .footer-right {
    display: inline-block;
    line-height: 20px;
    color: #434343;
}

.login-page .footer .footer-right {
    margin-bottom: 10px;
}

.login-page .footer .footer-right a {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #434343;
    font-size: 14px;
}

.login-page .footer .footer-right a:hover {
    background: #ea6d21;
    color: #FFF;
    border: 1px solid #c1520f;
}

.login-top {
    font-weight: bold;
    font-size: 1.5em;
    width: 100%;
    height: auto;
    text-align: start;
}

.login-top .welcome {
    font-size: 24px;
    color: #434343;
    font-weight: bold;
    letter-spacing: 1px;
    display: inline-block;
    width: 100%;
}

.login-top .welcome2 {
    color: #ea6d21;
}

.login_page_center, .login_page_top, .login_page_bottom {
    transition: 1s;
    transition-timing-function: ease-out;
    transition-timing-function: cubic-bezier(.08, .61, .53, 1.00);
}

@keyframes intro-all {
    0% {
        filter: grayscale(100%);
    }
    100% {
        filter: grayscale(0%);
    }
}

.login-page .container {
    animation-duration: 4s;
    transform-origin: 25% 50%;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    display: flex;
    justify-content: end;
}


@keyframes pulse_blur {
    0% {
        filter: blur(4px);
    }
    50% {
        filter: blur(2px);
    }
    100% {
        filter: blur(4px);
    }
}

@keyframes pulse_overlay {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.35;
    }
}

.login-page .container .background-overlay {
    /*animation-name: pulse_overlay;
    animation-duration: 4s;
    transform-origin: 25% 50%;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;*/
}

@keyframes pulse_animation {
    0% {
        clip-path: polygon(-10% 0%, -6% 0%, -10% 100%, -14% 100%, -10% 0%, -12.2% 0%, -16% 100%, -15.8% 100%, -12% 0%);
        opacity: 1
    }
    100% {
        clip-path: polygon(110% 0%, 114% 0%, 110% 100%, 106% 100%, 110% 0%, 117.8% 0%, 114% 100%, 114.2% 100%, 118% 0%);
        opacity: 1
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: .001dpcm) {

    .login-page .container .login_animation {
        animation-name: pulse_animation;
        animation-duration: 22s;
        transform-origin: 25% 50%;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .login-page .container .background-overlay {
        background-size: 260% 100%;
        animation-name: pulse_animation_fallback;
        animation-duration: 12s;
        transform-origin: 25% 50%;
        animation-iteration-count: 0;
        animation-timing-function: linear;
    }
}


@keyframes pulse_login_form {
    0% {
        transform: perspective(1px) scale(1)
    }
    40% {
        transform: perspective(1px) scale(1)
    }
    43% {
        transform: perspective(1px) scale(1.02)
    }
    46% {
        transform: perspective(1px) scale(1)
    }
    49% {
        transform: perspective(1px) scale(1.02)
    }
    51% {
        transform: perspective(1px) scale(1)
    }
    100% {
        transform: perspective(1px) scale(1)
    }
}


.login_form_wrapper .login_submit {
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    animation-name: pulse_login_form;
    animation-duration: 9000ms;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

.login_submit.loading span {
    color: transparent;
}

.login_submit.loading:before {
    content: " ";
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -18px !important;
    margin-top: -4px !important;
    display: block;
    width: 26px;
    height: 26px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: loading 1.2s linear infinite;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*.loginmsg, .loginmsg .ui-message-error {
    background-color: #FFE2E2;
    color: #840000;
    font-size: 12px;
    border-radius: 10px;
}

.login-page .login-slider .loginmsg .ui-message-error {
    background-color: #FFE2E2;
    color: #840000;
    font-size: 12px;
    border-radius: 10px;
}*/

.login-page .info-msg {
    text-align: center;
    font-size: 1.2em;
    padding: 10px 20px;
    color: #808080;
}

.login-page .login-form-link {
    text-align: center;
    padding-bottom: 10px;
    /*flex: 0.5;*/
}

.login-form-link a {
    text-decoration: none;
    font-size: 16px;
    color: #ea6d21;
    transition: color 0.2s;
}

.login-form-link a:hover {
    color: #c45612;
    text-decoration: underline;
}

.form-sso {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-separator {
    /*flex: 1;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 10px;
    height: 19px;
    margin-bottom: 15px;
}

.form-separator-line {
    flex: 1;
    height: 0;

    border: 1px solid #434343;
    width: available;
}

.form-separator-text {
    /*flex: 3;*/
    font-size: 16px;
    line-height: 19px;

    color: #434343;
}

.sso-login-container {
    flex: 3;
}

.login-page .login-zone .ui-messages-error .ui-messages-error-icon {
    display: none;
}

.login-page .login-zone .ui-messages-error ul,
.login-page .login-zone .ui-messages-error .ui-messages-error-summary {
    margin: 0;
}