@import './navbar.css';
@import './footer.css';

.main-content {
    min-height: calc(700*var(--rpx));
    background-color: #272E674F;
    padding-top: calc(160*var(--rpx));
    padding-bottom: calc(126*var(--rpx));
}

.login-div {
    width: calc(733*var(--rpx));
    height: calc(646*var(--rpx));
    flex-shrink: 0;
    border-radius: calc(31*var(--rpx));
    background: #F1FCFC;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    padding: calc(50*var(--rpx));
}

.login-title {
    color: #D95722;
    text-align: center;
    font-family: Alexandria, serif;
    font-size: calc(25*var(--rpx));
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: calc(96*var(--rpx));
}

input {
    display: flex;
    width: calc(604*var(--rpx));
    height: calc(97*var(--rpx));
    padding-inline: calc(85*var(--rpx));
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: none;
    border-radius: calc(25*var(--rpx));
    background: rgba(39, 46, 103, 0.12);
}

input::placeholder {
    color: #272E67;
    text-align: center;
    font-family: Alexandria, serif;
    font-size: calc(20*var(--rpx));
    font-style: normal;
    font-weight: 300;
    height: calc(40*var(--rpx));
}


.input-with-icon {
    position: relative;
    display: inline-block;
    margin-bottom: calc(36*var(--rpx));
}

.input-with-icon::before {
    content: "";
    position: absolute;
    right: calc(29*var(--rpx));
    top: 50%;
    transform: translateY(-50%);
    width: calc(50*var(--rpx));
    height: calc(50*var(--rpx));
    background-size: contain;
    pointer-events: none; /* Allows clicks to pass through to the input */
}

.email::before {
    background-image: url('../images/user.svg');
}

.password::before {
    background-image: url('../images/lock.svg');
    background-repeat: no-repeat;
    width: calc(38*var(--rpx));
    height: calc(38*var(--rpx));
}

.circular-blue-btn {
    display: flex;
    width: calc(357*var(--rpx));
    height: calc(54*var(--rpx));
    min-width: calc(64*var(--rpx));
    padding: calc(6*var(--rpx)) calc(120*var(--rpx)) calc(6*var(--rpx)) calc(12*var(--rpx));
    justify-content: space-between;
    align-items: center;
    gap: calc(8*var(--rpx));
    flex-shrink: 0;
    border-radius: calc(25*var(--rpx));
    background: #272E67;
    color: #dddddd;
    font-size: calc(24*var(--rpx));
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: calc(36*var(--rpx));
}

.forget-password-container {
    width: calc(450*var(--rpx));
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: auto;
}

.forget-password-link {
    color: #D95722;
    text-align: center;
    font-family: Alexandria, serif;
    font-size: calc(20*var(--rpx));
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}