/**
 * File: resources/css/login.css
 * Author: Yash Balotiya
 * Description: This file contains the styles for the login page, Location Permissions page, Application Rejected Page.
 * Created on: 21/06/2025
 * Last Modified: 24/06/2025
 */

/* Main Container */
main {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Left Side */
.leftSide {
    width: 40%;
    height: 100%;
    background-color: #C5F3AE;
}

.rfLogo {
    width: 250px;
}

/* Right Side */
.rightSide {
    width: 60%;
    height: 100%;
    overflow-y: auto;
}

.loginForm {
    width: 50%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;;
}

.formDivs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* OTP Page */
.otpPage {
    /* height: 80%; */
}

#mobileOtpForm {
    height: 50%;
}

#resendOtpButton {
    height: 40px;
    /* background-color: #FAFAFA; */
    background-color: transparent;
    /* color: #4A8350; */
    border: 1px solid #4A8350;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    padding: 0 12px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#resendOtpButton:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}

/* Location Permission */
.permissionDiv {
    width: 60%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.locationIcon {
    width: 100px;
    height: 100px;
}

/* Application Rejected Page */
.rejectedSection {
    justify-content: flex-start;
    padding: 20px 0;
}

.exclamationIcon {
    width: 100px;
    height: 100px;
    margin-bottom: 8px;
}

.horizontalDivider {
    width: 100%;
    height: 1px;
    background-color: #4A8350;
    margin: 8px 0;
}

.rejectedDiv {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}