@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root {
        --color-primary: #4452d4a3;
        --color-danger: #ff7782;
        --color-success: #41f1b6;
        --color-warning: #ffbb55;
        --color-white: #efff;
        --color-info-dark: #7d8da1;
        --color-info-light: #dce1eb;
        --color-dark: #363949;
        --color-light: rgba(132, 139, 200, 0.18);
        --color-primary-variant: #111e88;
        --color-dark-variant: #677483;
        --color-background: #f6f6f980;
        --card-border-radius: 2rem;
        --border-radius-1: 0.4rem;
        --border-radius-2: 0.8rem;
        --border-radius-3: 1.2rem;
        --card-padding: 1.8rem;
        --padding-1: 1.2rem;
        --box-shadow: 0 2rem 3rem var(--color-light);
        --oxford-blue: rgba(1, 25, 54, 1);
        --tea-rose-red: rgba(226, 194, 198, 1);
        --cambridge-blue: rgba(130, 163, 161, 1);
        --mindaro: rgba(217, 249, 165, 1);
        --mindaro-2: rgba(219, 254, 135, 1);
}

* {
        padding: 0;
        margin: 0;
        outline: 0;
        /* appearance: none; */
        list-style: none;
        text-decoration: none;
        border: none;
        box-sizing: border-box;
}
html {
        font-size: 16px;
}
body {
        font-family: "Poppins", sans-serif;
        width: 100vw;
        height: 100vh;
        font-size: 1rem;
        background-image: url("../images/wave-haikei.svg");
        /* background-repeat: no-repeat; */
        background-size: cover;
        /* background-position: center; */
        display: flex;
        justify-content: center;
        align-items: center;
}
a {
        color: var(--color-dark);
}

.container {
        background-color: var(--color-background);
        width: 50rem;
        height: 25rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
}
.container .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--oxford-blue);
        /* background-color: rgba(1, 25, 54, 1);
        opacity: 0.5; */

        /* backdrop-filter: blur(50px);
        background-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 1px 12px var(--oxford-blue); */
}
.container .left .img img {
        display: block;
        height: 15rem;
}
.container .right {
        border-left: 1px solid var(--oxford-blue);
        height: 100%;
        padding: 2rem 1.5rem;
        display: flex;
        align-items: center;
}

.login-messageError {
        display: block;
        color: red;
        display: flex;
        align-items: center;
        justify-content: center;
}

.header {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 1.5rem;
        width: 100%;
        border-bottom: 2px solid var(--color-light);
        margin-bottom: 1.5rem;
}

.header h2 {
        font-size: 1.8rem;
        margin-left: 0.5rem;
}

form {
        width: 100%;
}
form p {
        font-size: 0.8rem;
        margin: 0.7rem 0rem;
}

.input-field {
        background: #eaeaea;
        margin: 15px 0;
        border-radius: 3px;
        display: flex;
        align-items: center;
}

.input-group input {
        width: 100%;
        background: transparent;
        font-size: 13px;
        border: 0;
        outline: 0;
        padding: 1rem;
}

.input-field i {
        padding: 1rem;
}

form p a {
        text-decoration: none;
        color: var(--oxford-blue);
}

form button {
        font-family: "Poppins", sans-serif;
        width: 100%;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        outline: none;
        border: none;
        background-color: var(--oxford-blue);
        color: #eaeaea;
        font-size: 1rem;
        cursor: pointer;
}

form button:hover {
        background-color: var(--color-primary);
}

.fa-circle-notch.icon-hide {
        display: none;
}
.dis-none {
        display: none;
}

/* forget password */
.forgot-pass {
        font-family: "Poppins", sans-serif;
        background-color: whitesmoke;
        display: flex;
        flex-direction: column;
        justify-content: start;
        padding: 0.5rem;
}

.show {
        display: flex;
}

.hide {
        display: none;
}

.forgot-pass input {
        width: 100%;
        font-family: "Poppins", sans-serif;
        background-color: var(--color-light);
        font-size: 13px;
        border: 0;
        outline: 0;
        padding: 1rem;
}

.forgot-pass button {
        font-family: "Poppins", sans-serif;
        width: 100%;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        outline: none;
        border: none;
        background-color: var(--oxford-blue);
        color: #eaeaea;
        font-size: 1rem;
        cursor: pointer;
        margin-top: 1rem;
}

.forgot-pass button:hover {
        background-color: var(--color-primary);
}

/* Response message */
.response-message {
        background-color: whitesmoke;
        /* width: 25rem;
        height: 25rem;
        border-radius: 10px; */
        display: flex;
        flex-direction: column;
        justify-content: start;
        padding: 20px;
}

.response-message p {
        font-size: 13px;
}

.response-message button {
        font-family: "Poppins", sans-serif;
        width: 100%;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        outline: none;
        border: none;
        background-color: var(--oxford-blue);
        color: #eaeaea;
        font-size: 1rem;
        cursor: pointer;
        margin-top: 1rem;
}

.response-message button:hover {
        background-color: var(--color-primary);
}

.hidee {
        display: none;
}

@media screen and (max-width: 850px) {
        .container {
                height: 100%;
                grid-template-columns: 1fr;
        }
        .container .right {
                border: none;
        }
}