@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Raleway", sans-serif;
}
.authContainer {
    width: 100%;
    height: 100vh;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.authContainerCard {
    width: max-content;
    height: max-content;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
        rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
        rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
        rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
        rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
        rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
    padding: 2rem;
    border-radius: 2rem;
}
a {
    text-decoration: none;
    color: #5f5f5f;
}
.authHeading {
    flex: 1;
}
.authHeading .authLogo {
    width: 130px;
}
.authHeading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 2rem;
    gap: 1rem;
}
.authHeadingText {
    font-size: 25px;
    font-weight: 900;
    color: #5f5f5f;
}
.authFormContainer {
    width: 100%;
}
.authForm {
    width: 100%;
}
.authFormGroup {
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #5f5f5f48;
    height: 40px;
    gap: 12px;
    margin: 0.6rem 0;
    border-radius: 0.4rem;
    padding: 0 10px;
}
.inputBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.inputBoxImage {
    width: 20px;
    height: 20px;
}
.inputBoxImage .inputBoxImg {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}
.authFormGroup label {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #5f5f5f;
}
.authFormGroup input {
    width: 100%;
    font-size: 14px;
    outline: 0;
    height: 28px;
    font-weight: 600;
    padding: 0 15px;
    border: 0;
    outline: 0;
    color: #5f5f5f;
    border-left: 2px solid #5b627431;
}
.authFormGroup:focus-within {
    border-color: #ffde59;
}

.authFormRememberME {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 0;
}
.authForgotPassword a {
    text-decoration: underline;
    color: #ffde59;
}
.authFormGroupButton {
    width: 100%;
    margin: 2rem 0;
}
.authFormGroupButton button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    font-size: 16px;
    font-weight: 600;
    background: #ffde59;
    color: #5f5f5f;
    border: 0;
    outline: 0;
    border-radius: 0.6rem;
    cursor: pointer;
    font-family: "Raleway", sans-serif;
}
.authFormGroupButton button:active {
    opacity: 0.7;
}
.authNavigation {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
}
.authNavigation span {
    text-decoration: underline;
}