.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/econobile-create-account.webp');
    height: 100vh; /* Set the height to 100% viewport height */
    width: 100%;
    min-height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: 47% 11%; */
    position: relative;
}

/* .login-page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
} */

.flip-container {
    position: absolute;
    /* display: flex; */
    width: 35%;
    height: 70%;
    margin: 0 auto 40px auto;

    -webkit-perspective: 800px;
       -moz-perspective: 800px;
        -ms-perspective: 800px;
         -o-perspective: 800px;
            perspective: 800px;
}

.flip-container .card {
    position: absolute;
    width: 100%;
    height: 100%;

    -webkit-transition: -webkit-transform 1s;
       -moz-transition:    -moz-transform 1s;
        -ms-transition:     -ms-transform 1s;
         -o-transition:      -o-transform 1s;
            transition:         transform 1s;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.flip-container .card .face {
    position: absolute;
    width: 100%;
    height: 100%;

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}

.flip-container .card.flipped,
.flip-container .card .face2 {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
}

/* Start Cod adaugat pentru afisare corecta pe Mozilla Firefox */

.flip-container .card .face1 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container .card .face2 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* Sfarsit Cod adaugat pentru afisare corecta pe Mozilla Firefox */

.account-cards {
    display: none;
}
  
#login-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 20px;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 24px;
}

#register-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 20px;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 24px;
}

#forgot-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 20px;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 24px;
}

.title {
    text-align: center;
	font-size: 2.5rem;
	margin-top: 35px;
    color: #ffffff;
    margin-bottom: 5%;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%; 
}

/* .container label {
    padding-top: 15px;
} */

.container input {
    font-family: 'TeX Gyre Bonum Regular', 'Source Serif Variable';
    font-size: 1.3em;
    color: #859E7E;
    font-weight: bold;
    padding: 10px;
    width: 100%;
    border-radius: 24px;
    margin-top: 3%;
    margin-bottom: 3%;
    border: solid 1px #859E7E;
}

.container input[type="text"]::placeholder {
    color: #859E7E;
    text-indent: 10px;
}

.container input[type="email"]::placeholder {
    color: #859E7E;
    text-indent: 10px;
}

.container input[type="password"]::placeholder {
    color: #859E7E;
    text-indent: 10px;
}

.container p {
    color: white;
    text-align: center;
}

.submitbtn {
    width: 100%;
    background: #ffffff;
    padding: 10px 60px;
    cursor: pointer;
    transition: all 0.5s ease;
    margin-top: 5%;
    margin-bottom: 5%;
    border-radius: 24px;
    color: #859E7E;
    font-size: 1.3em;
    font-weight: bold;
    font-family: 'TeX Gyre Bonum Regular', 'Source Serif Variable';
    border: solid 1px #859E7E;
}

.submitbtn[disabled] {
    background-color: rgba(128, 128, 128);
    pointer-events: none;
}

.submitbtn:hover {
    background: #859E7E;
    color: #ffffff;
} 

.register {
    font-family: 'TeX Gyre Bonum Regular', 'Source Serif Variable'!important;
    font-size: 1.3em!important;
    text-align: center;
    font-weight: bold;
    color: white;
    padding: 10px 0px;
}

.register a {
    color: black;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.register a:hover {
    color: rgb(62, 62, 255);
}

.forgot-password a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.message-error {
    width: 90%;
    display: flex;
    background: lightcoral;
    justify-content: center;
    padding: 15px;
    margin-bottom: 10px;
    color: red;
    font-family: 'TeX Gyre Bonum Regular', 'Source Serif Variable';
    text-align: center;
}

.message-success {
    width: 100%;
    display: flex;        
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: lightgreen;
    padding: 15px;
    margin-bottom: 10px;
    color: green;
    font-family: 'TeX Gyre Bonum Regular', 'Source Serif Variable';
    text-align: center;
}

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

.login-page-background-line {
    background-color: #ffffff;
    padding: 1% 3%;
    width: 100%;
    height: 5vh;
    position: relative;
}

.msg-box {
    position: relative;
    z-index: 999;
}

.pass-info {
    position: absolute;
    padding: 20px;
    background: #55cfa8;
    border-radius: 19px;
    top: -10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.container .pass-info p {
    text-align: left;
}

.checkbox-markers {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.checkbox-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #859E7E;
}

/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 20vw;
    background-color: #f44336;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 5%;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

@media screen and (max-width: 1600px) {
    .flip-container {
        width: 40%;
        height: 70%;
    }
}

@media screen and (max-width: 1500px) {
    .flip-container {
        width: 50%;
        height: 70%;
    }
}

@media screen and (max-width: 1400px) {
    .flip-container {
        width: 60%;
        height: 70%;
    }
}

@media screen and (max-width: 1300px) {
    .flip-container {
        width: 70%;
        height: 70%;
    }
    .container {
        width: 75%;
    }
}

@media screen and (max-width: 970px) {
    .flip-container {
        width: 80%;
        height: 70%;
    }
}

@media screen and (max-width: 650px) {
    .tooltip .tooltiptext {
        width: 40vw;
    }
}

@media screen and (max-width: 600px) {
    .flip-container {
        width: 90%;
        height: 80%;
    }
    .container {
        width: 95%;
    }
    .submitbtn {
        padding: 10px 10px;
    }
}