/* ------------------------Start Style Login -----------------------------*/

/* start navbar — background set in layout (transparent on Laravel site) */
.navbar {
    z-index: 100;
}
/* end navbar */

/* start header*/
.header_login {
    position: relative;

}
.header_login .background-header {
    background-color: var(--surface-color);
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
}
.header_login .background-header h2{
    margin: 0;
    font-size: 1rem;
}
.header_login .background-header p{
    font-size: 1.7rem;
    font-weight: 900;
}

.header_login .banner-curve {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 65px;
    background-image: url(../hetacad/imgs/wave.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    z-index: 2;
    transform: rotateX(0deg) rotateY(180deg);
}

/* end header*/

/* start form login*/
.form-login {
    position: relative;
    margin-bottom: 45px;
}

.form-login .container {
    position: relative;
}

.form-login .container .title-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0px;
}

.form-login .container .title-form span {
    height: 4px;
    width: 20px;
    background-color: var(--main-color-alt);
    margin: 0px 10px;
}

.form-login .container .title-form h2 {
    color: var(--main-color-alt);
}

.form-login .container .form {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.form-login .container .form form {
    width: 50%;
    padding: 0px 20px;
    padding-top: 40px;
    box-shadow: 0px 5px 12px #18325848;
    border-radius: 15px;
}

.form-login .container .form form .user-box {
    margin: 5px 0px;
}

.form-login .container .form form .forget-password {
    color: var(--secondary-color);
    font-size: .8rem;
}

.form-login .container .form form .forget-password:hover {
    color: var(--main-color-alt);
    font-weight: 600;
}

.form-login .container .form form .checkbox-input {
    color: var(--secondary-color);
    margin-top: 20px;
}

.form-login .container .form form .btn-big {
    width: 30%;
    display: block;
    margin: 30px 0px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}

.form-login .container .form form .create-account a {
    float: left;
    margin-bottom: 20px;
    font-weight: 400;
    color: var(--main-color-alt);
}

.form-login .container .form form .create-account a:hover {
    color: var(--main-color);
    font-weight: 600;
}

.form-login .container .form .picture-form {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-login .container .form .picture-form img {
    width: 100%;
    transform: rotateY(180deg);
}

/* responsive form */
@media (max-width: 1000px) {
    .form-login .container .form form {
        width: 100%;
    }

    .form-login .container .form .picture-form {
        width: 100%;
        margin-top: 45px;
    }

    .form-login .container .form .picture-form img {
        width: 90%;
    }

}

/* end form login*/


/* ------------------------End Style Login -----------------------------*/


/* ------------------------Start Style Sign in -----------------------------*/



/* ------------------------End Style Sign in -----------------------------*/


/* start form login*/
.form-sign-in {
    position: relative;
    margin-bottom: 45px;
}

.form-sign-in .container {
    position: relative;
}

.form-sign-in .container .title-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0px;
}

.form-sign-in .container .title-form span {
    height: 4px;
    width: 20px;
    background-color: var(--main-color-alt);
    margin: 0px 10px;
}

.form-sign-in .container .title-form h2 {
    color: var(--main-color-alt);
}

.form-sign-in .container .form {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.form-sign-in .container .form form {
    width: 50%;
    padding: 0px 20px;
    padding-top: 40px;
    box-shadow: 0px 5px 12px #18325848;
    border-radius: 15px;
}

.form-sign-in .container .form form .user-box {
    margin: 5px 0px;
}

.form-sign-in .container .form form .checkbox-input {
    color: var(--secondary-color);
    margin-top: 10px;
}

.form-sign-in .container .form form .full-name {
    display: flex;
    justify-content: space-between;
}

.form-sign-in .container .form form .full-name div {
    width: 47%;
}

.form-sign-in .container .form form .btn-big {
    width: 30%;
    display: block;
    margin: 30px 0px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}

.form-sign-in .container .form form .create-account a {
    float: left;
    margin-bottom: 20px;
    font-weight: 400;
    color: var(--main-color-alt);
}

.form-sign-in .container .form form .create-account a:hover {
    color: var(--main-color);
    font-weight: 600;
}

.form-sign-in .container .form .picture-form {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-sign-in .container .form .picture-form img {
    width: 100%;
}

/* responsive form */
@media (max-width: 1000px) {
    .form-sign-in .container .form form {
        width: 100%;
    }

    .form-sign-in .container .form .picture-form {
        width: 100%;
        margin-top: 45px;
    }

    .form-sign-in .container .form .picture-form img {
        width: 90%;
    }

}

/* end form login*/



/* Animation */
.animation-scrolling-form {
    animation: right-left 2s;
}

@keyframes right-left {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

.animation-scrolling-picture {
    animation: left-right 2s;
}

@keyframes left-right {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}