.layout-outer {
    width: 100%;
    height:100vh;
    display: flex;
    align-items:center;
    justify-content:center;

    background: url('../images/login/login-bg.jpg') no-repeat center center;
    background-size: cover;
}
.layout-outer .layout-inner {
    display: flex;
    overflow: hidden;
    width: 840px;
    max-width: 840px;
    height: 420px;
    border-radius: 15px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    position: relative;
    background-image: linear-gradient(to right, #F5F5F4 0%, #fff 80%, #F5F5F4 100%);
}

.layout-inner .overlay {
    width: 630px;
    height: 420px;
    background-image: linear-gradient(to top right, #02174e 80%, #001a67 100%);
    transform: skewX(-18deg);
    position: absolute;
    top: 0;
    left: -240px;
    z-index: 1;
    transition: all 0.8s;
    overflow: hidden;
}
.layout-inner .overlay.active {
    left: 450px;
    background-image: linear-gradient(to top left, #02174e 50%, #001a67 100%);
    transform: skewX(18deg);
}
.overlay .overlay-inner {
    width: 730px;
    height: 100%;
    transform: skewX(18deg);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: -65px;
    right: 0;
    z-index: 1;
}
.overlay.active .overlay-inner {
    transform: skewX(-18deg);
}
.overlay .overlay-bg {
    width: 100%;
    height: 100%;
    background-image: url('../images/login/plus-bg.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    transform-origin: right;
}
.overlay .logo-box {
    position: absolute;
    top:0;
    right:0;
    transform: skewX(18deg);

    width: 390px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.8s;
}
.overlay .logo-box img {
    width: 180px;
}
.overlay.active .logo-box {
    left:0px;
    transform: skewX(-18deg);
}
.overlay-sm-logo {
    display: none;
}

.layout-inner {
    width: 840px;
    height: 420px;
    /* border-radius: 40px; */
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content:center;

    position: absolute;
    top: 0;
    right: 0;

    /* border:2px solid red; */
}

.signup-form .section-one {
    /* border:1px solid red; */
}
.signup-form .section-two {
    display:none;
}




.signin-box, .signup-box {
    width: 420px;
    height: 420px;
    border-radius: 12px;
    display: flex;
    /* flex-direction: column; */
    align-items:center;
    justify-content:center;

    /* padding: 0 50px; */
    /* padding: auto; */
    overflow: hidden;

    /* border:1px solid red; */
}
.signup-box .signup-form, .signin-box .signin-form {
    width: 300px;
    transition: all 0.8s;
    /* border:1px solid red; */
}
.signin-box .signin-form {
    transform: translateX(-400px);
}
.signin-box.active .signin-form {
    transform: translateX(0px);
}
.signup-box .signup-form {
    transform: translateX(400px);
}
.signup-box.active .signup-form {
    transform: translateX(0px);
}


/* Neat Code */
.signin-box .input {
    text-align: left;
}
.signin-box .input strong {
    font-size: 14px;
    font-weight: 600;
    color: #737373;
}
.action-buttons div {
    display: flex;
    align-items:center;
    justify-content: space-between;
}
.action-buttons div.right {
    justify-content: right;
    color: #737373;
    font-size: 14px;
}
.action-buttons .button {
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items:center;
    justify-content:center;
    color: #fff;
    font-size:15px;
    font-weight: 500;
    opacity: 1;
}
.action-buttons .button:hover {
    opacity: 0.95;
}
.action-buttons .button.signin, .action-buttons .button.next {
    width: 92px;
    color:#fff;
    background-image: linear-gradient(to right, #02174e 60%, #001a67 100%);
}
.action-buttons .button.continue, .action-buttons .button.signup {
    width: 160px;
    color:#fff;
    background-image: linear-gradient(to right, #9a0725 60%, #cb1334 100%);
}
.action-buttons .button.non-active, .action-buttons .button.back {
    height:30px;
    width: 92px;
    color:#737373;
    background-color: #F5F5F4;
    margin-left: 6px;
    border:1px solid #D6D3D1;
}
.action-buttons .button.back {
    margin-left: 0px;
    font-size: 40px;
    height: 34px;
}

.resent-otp-box {
    color: #808b96;
    font-size: 13px !important;
}
.resent-otp {
    color: #808b96;
}
.resent-otp:hover {
    color: #2c3e50;
    cursor: pointer;
}

.signup-box input, .signup-box select, .signin-box input, .signin-box select {
    box-shadow: inset 0px 0px 6px 6px rgba(234, 235, 241, 0.7) !important;
    height: 36px;
}



/* .overlayy {
    width: 600px;
    min-width: 600px;
    height: 420px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlayy .layer-1 {
    width: 600px;
    height: 420px;
    background-image: linear-gradient(to top right, #02174e 80%, #001a67 100%);
    transform: skewX(-18deg);
} */

@media screen and (max-width: 1400px) {
    .layout-outer .layout-inner {
        width: 800px;
        max-width: 800px;
        height: 400px;
    }
    .layout-inner .overlay {
        width: 600px;
        height: 400px;
        left: -235px;
    }
    .layout-inner .overlay.active {
        left: 430px;
    }

    .overlay .logo-box {
        width: 350px;
    }
}
@media screen and (max-width: 998px) {
    .layout-outer .layout-inner {
        width: 720px;
        max-width: 720px;
        height: 360px;
    }
    .layout-inner .overlay {
        width: 600px;
        height: 360px;
        left: -276px;
    }
    .layout-inner .overlay.active {
        left: 390px;
    }

    .overlay .logo-box {
        width: 320px;
    }

    .action-buttons .button {
        height: 32px;
        font-size:15px;
    }
    .action-buttons .button.back {
        height: 32px;
    }
    input, select {
        height: 32px;
    }
}
@media screen and (max-width: 768px) {

    .layout-outer .layout-inner {
        width: 500px;
        max-width: 500px;
        height: 360px;
    }
    .layout-inner .overlay {
        width: 400px;
        height: 360px;
        left: -260px;
    }
    .layout-inner .overlay.active {
        left: 355px;
    }

    .overlay .logo-box {
        width: 120px;
    }
    .overlay .logo-box img {
        width: 100px;
    }

    .signup-box, .signin-box {
        width: 180px;
    }
    .signup-box.active, .signin-box.active {
        width: 320px;
    }
    .signup-box .signup-form, .signin-box .signin-form {
        width: 260px;
    }

    
}
@media screen and (max-width: 575px) {
    .layout-outer {
        padding: 0 15px;
    }
    .layout-inner {
        width: 100%;
        height: auto !important;   
        /* padding-bottom: 40px;  */
        flex-direction: row;
        /* border:2px solid yellow; */
        padding: 0 15px;
    }

    .signup-box, .signin-box {
        display: none;
    }
    .signup-box.active, .signin-box.active {
        display: flex;
        width: 100%;
        padding-top: 112px;
        height: auto !important;
        padding-bottom: 20px;
    }
    .signup-box.active .signup-form, .signin-box.active .signin-form {
        width: 100%;
        /* padding: 15px; */
        /* height: 340px; */
    }

    .layout-inner .overlay {
        width: 100%;
        height: 150px;
        left: 0;
        right: 0;
        top: -100px;

        /* transform: rotate(90deg); */
        transform: skewX(0deg);
        transform: skewY(-20deg);
    }
    .layout-inner .overlay.active {
        width: 100%;
        height: 150px;
        left: 0;
        right: 0;
        top: -100px;
        transform: skewY(20deg);
    }
    .overlay .overlay-bg {
        transform: skewX(0deg);
        transform: skewY(0deg);
        /* border:2px solid red; */
        /* transform: skewY(40deg); */
        /* transform: skewY(2deg); */
    }
    .overlay .logo-box {
        display:none;
        /* width: 100%;
        height: 300px;
        border:3px solid yellow;
        transform: skewX(0deg);
        transform: skewY(-20deg); */
        /* transform: skewY(-4deg); */
        /* transform: skewY(0deg); */
    }
    /* .layout-inner .overlay.active {
        left: 355px;
    } */

    .overlay-sm-logo {
        display: flex;
    }
    .overlay-sm-logo .logo {
        width: 100px;
        position: absolute;
        top: 15px;
        left: 22px;
        z-index: 10;
        transition: all 0.8s;
        /* border:1px solid red; */
    }
    .overlay-sm-logo.active .logo {
        /* width: 100px;
        position: absolute;
        top: 20px; */
        left: calc(100% - 100px);
        /* right: 60px; */
        /* z-index: 10; */
        /* border:1px solid red; */
    }
    .overlay-sm-logo .logo img {
        width: 92px;
    }
    .overlay-sm-logo .overlay-logo-right {
        display: none !important;
    }


    /* .overlay-sm-logo .logo {
        display: none;
    } */
    /* .overlay-sm-logo.active .overlay-logo-left {
        display: none;
    }
    .overlay-sm-logo.active .overlay-logo-right {
        display: none;
    } */

    /* .overlay-logo-left {
        display: flex;
        width: 100px;
        position: absolute;
        top: 20px;
        left: 30px;
        z-index: 10;
    }
    .overlay-logo-left.active {
        left: 30px;
    }
    .overlay-logo-right {
        display: flex;
        width: 100px;
        position: absolute;
        top: 20px;
        left: 0px;
        z-index: 10;
    }
    .overlay-logo-right.active {
        left: 0px;
        border:1px solid red;
    }
    .overlay-logo-left img, .overlay-logo-right img {
        width: 100px;
    } */
}


/* .resent-otp-box {
    color: #808b96;
    font-size: 14px;
}
.no-account, .has-account, .resent-otp {
    color: #808b96;
}
.no-account:hover, .has-account:hover, .resent-otp:hover {
    color: #2c3e50;
}

.resent-otp {
    pointer-events: none;
}
.resent-otp:hover {
    text-decoration: underline !important;
} */