.login-page {
    background: linear-gradient(135deg, #0e2c9b, #4a90e2, #0e2c9b, #007cf7);
    background-size: 300% 300%;
    background-position: center;
    background-repeat: no-repeat;
    animation: gradientAnimation 8s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.login-page::before,
.login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.2); 
    animation: floating 6s ease-in-out infinite; 
    z-index: 1; 
}

.login-page::before {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 15%;
    animation-delay: 0s;
}

.login-page::after {
    width: 300px;
    height: 300px;
    bottom: 10%;
    right: 10%;
    animation-delay: 3s;
}

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

    50% {
        transform: translateY(20px);
    }

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

.page-container {
    width: 45%;
    /*height: 60%;*/
    background-color: #ffffff;
    /*box-shadow: .5rem .5rem 2rem #e1e8ed;*/
    box-shadow: .5rem .5rem 2rem #010613;
    border-radius: 2rem;
}
.login-wrapper{
    display:flex;
    flex: 1;
}
.register-container {
    width: 50%;
    /*background-color: #999;*/
    background-color: #0e2c9b;
    border-radius: 2rem 0 0 2rem;
    padding: 5rem 1rem;
    position: relative;
    overflow: hidden;
}

.register-image {
    height: 8rem;
    margin: 0 0 1rem 0;
}

.register-title {
    color: #ffffff;
    font-size: 1.5rem;
    display: block;
    margin: 0;
}

.register-line {
    background-color: #ffffff;
    height: .12rem;
    width: 85%;
    margin: 0 0 1rem 0;
}

.register-desciption {
    color: #ffffff;
    font-size: .9rem;
    display: block;
    margin: 0 0 1.5rem 0;
}

.register-button {
    color: #ffffff !important;
    /*background-color: #999 !important;*/
    border-radius: 1rem !important;
    border-style: solid;
    border-color: #ffffff;
    border-width: .15rem;
    line-height: normal;
}

.register-circle {
    background-color: #ffffff;
    width: 6rem;
    height: 6rem;
    border-radius: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 1rem;
    transform: translate(50%, 0%);
    -moz-transform: translate(50%, 0%);
    -ms-transform: translate(50%, 0%);
    -o-transform: translate(50%, 0%);
    -webkit-transform: translate(50%, 0%);
}

.register-circle-inner {
    /*background-color: #e68a25;*/
    background-color: #007CF7;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
}



.login-container {
    width: 50%;
    background-color: #ffffff;
    border-radius: 0 2rem 2rem 0;
    padding: 5rem 1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; 
    z-index: 10; 
}

.login-title {
    /*color: #e68a25;*/
    color: #0e2c9b;
    margin: 0;
    font-size: 2rem;
    display: block;
}

.login-line {
    background-color: #009aff;
    height: .12rem;
    width: 40%;
    margin: 0 0 2.5rem 0;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*.login-field {
    width: 75%;
    margin: 0 0 1rem 0;
}*/

.login-error {
    margin: 0 0 .75rem 0;
}

.login-button {
    color: #ffffff !important;
    background-color: #0e2c9b !important;
    border-radius: 1rem !important;
    border-style: solid;
    border-color: #f9f9f9;
    height: auto;
    /*width: 60%;*/
    width: 11rem;
    margin: 0 0 1rem 0 !important;
}

.login-language-container {
    width: 100%;
    margin: 0 !important;
}

.login-select-language {
 /*   width: 50%;*/
    width: 8rem;
    float: right;
    margin: 0 !important;
}

.login-triangle {
    /*background-color: #e68a25;*/
    background-color: #007CF7;
    width: 6rem;
    height: 6rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 2rem;
    transform: translate(50%, 0%) rotate(45deg);
    -moz-transform: translate(50%, 0%) rotate(45deg);
    -ms-transform: translate(50%, 0%) rotate(45deg);
    -o-transform: translate(50%, 0%) rotate(45deg);
    -webkit-transform: translate(50%, 0%) rotate(45deg);
}

.login-triangle-inner {
    background-color: #ffffff;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
}


.LoginField input, textarea {
    color: #2e3032 !important
}

@media (max-width:600px) {
    .page-container {
        width: 90%;
    }
}

@media (min-width:601px) and (max-width:991px) {
    .page-container {
        width: 75%;
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .page-container {
        width: 55%;
    }
}

@media (min-width:1200px) {
    .page-container {
        width: 50%;
    }
}



@media only screen and (max-width: 599px) {

    .login-wrapper {
        flex-direction: column;
    }
    .register-container {
        width: 100%;
/*        height: 35%;*/
        border-radius: 1rem 1rem 0 0;
        padding: .5rem;
    }

    .login-container {
        width: 100%;
/*        height: 65%;*/
        border-radius: 0 1rem 1rem 0;
        justify-content: space-between;
        padding: .5rem;
    }

    .login-line,
    .login-form,
    .login-error,
    .login-button {
        margin: 0 0 1rem 0;
    }

    .register-circle,
    .register-circle-inner,
    .register-desciption,
    .login-triangle,
    .login-triangle-inner {
        display: none;
    }
}

@media only screen and (max-width: 360px) {

    .register-title {
        font-size: 1.25rem;
    }

    .login-line,
    .login-form,
    .login-error,
    .login-button {
        margin: 0;
    }

    .register-circle,
    .register-circle-inner,
    .register-desciption,
    .login-triangle,
    .login-triangle-inner {
        display: none;
    }
}

@media only screen and (max-height: 767px) and (orientation: landscape) {
   /* .page-container {
        width: 95%;
        height: 95%;
        box-shadow: .5rem .5rem 1rem #e1e8ed;
        border-radius: 1rem;
    }

    .register-container {
        border-radius: 1rem 0 0 1rem;
        padding: .5rem;
    }

    .login-container {
        border-radius: 0 1rem 1rem 0;
        justify-content: space-between;
        padding: .5rem;
    }

    .login-line,
    .login-form,
    .login-error,
    .login-button {
        margin: 0;
    }

    .register-circle,
    .register-circle-inner,
    .login-triangle,
    .login-triangle-inner {
        display: none;
    }*/
}