/* Custom styles for login and register pages */
body,
button,
input,
label,
p{
    font-family: 'Century Gothic', sans-serif;
}

body {
    display: grid;
    /* Shortcut for aligning and justifying items at the center */
    place-items: center;
    margin: 0;
    /* Remove default margin */
    padding: 0;
min-height: 100vh;
    /* Remove default padding */
    background-color: #f0f0f0;
    background-image: url('../../images/log_reg/mountain.jpg');
    background-size: cover;
    /* Cover the entire card */
    background-position: center;
    /* Center the background image */
    background-repeat: no-repeat;
    /* White background */
    color: black;
    /* Black text */
    height: 100vh;
    overflow: hidden;
}


/* Button styles */
.submit button,
.login-btn button,
.rgstr-btn button{
    width: 25%;
    padding: 8px 16px;
    background-color: #CC0000;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 5%;
    font-size: 15px;
    font-weight: 500;
}

.login-btn button.active,
.submit button.dark {
    background-color: #D00000;

}

#loginWrapper .mail input,
#loginWrapper .passwd input,
#registerWrapper .name input,
#registerWrapper .mobile input,
#registerWrapper .mail input,
#registerWrapper .company input,
#registerWrapper .auth-code input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    /* Adjust spacing */
    border-radius: 4px;
    /* Rounded corners */
    /*border: 1px solid #F6F6F6;*/
    /* background-color: #F6F6F6;*/
    /* Light grey background */
    color: #3D3A39;
    /* Text color */
    outline: none;
    /* Removes outline */
    box-sizing: border-box;
    /* Border and padding included in width */
}



input::placeholder {
    color: #7f6d5f;
}

.select2-container--default .select2-selection--single {
    border: none; /* Removes border */
    background: transparent; /* Makes background transparent */
    height: auto; /* Adjusts height to content */
    border-bottom: 1px solid grey;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #7f6d5f; 
        padding: 10px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 50%; /* Centers the arrow vertically */
        transform: translateY(-50%); /* Corrects vertical alignment of the arrow */
        right: 10px; /* Adjusts right padding to match other inputs */
    }

    /* Remove focus style that might reintroduce borders or background */
    .select2-container--default .select2-selection--single:focus {
        border-bottom: 1px solid grey;
        outline: none;
    }

/* Additional adjustments for consistency */
input, .select2-container .select2-selection--single {
    font-family: 'Century Gothic', sans-serif; /* Ensures font family consistency */
    font-size: 16px; /* Match font size across form elements */
}

.loginCard {
    width: 30vw;
    margin-left: auto;
    margin-right: 10vb;
    padding: 15px;
   /* min-height: 60vh;*/
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 2px 2px 2px 2px rgba(0.2, 0.2, 0.2, 0.2);
    border-radius: 10px;
    /* Rounded corners */
    text-align: center;
    position: relative;
    overflow: auto;
}

/* forgot password text */
.loginCard a {
    color: #0071B8;
    text-decoration: none;
}

/* logo adjustments */
.loginCard img {
    width: 35%;
    margin-top: 20px;
    margin-bottom: 20px
}

/*'Don't have an account? Register' text */
.loginCard .switch-text {
    color: black;
    margin-top: 2%;
}

.loginCard .switch-text span {
    color: #0071B8;
    cursor: pointer;
    /* Indicates the text is clickable */
}

.form-hidden {
    display: none;
}

.forgot {
    margin-top: 2%;
    /* Add some space between the button and the link */
    width: 100%;
    /* Ensure the container spans the full width */
    text-align: center;
    /* Center-align the text */
}


.modal {
    cursor: pointer;
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1;
    /* Sit on top */
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    /* Black opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;

}

@media (max-width: 768px) {
    .loginCard {
        width: 60vw; 
        margin-top: 10px; 
        font-size: 60%;
    }

    .name,
    .contact-row {
        flex-direction: column;
    }

    .first-name,
    .last-name,
    .company,
    .mobile {
        width: 80%;
        height: 10%;
        margin-right: 0;
    }

    #registerWrapper { 
        width: auto;
        margin: 0 auto; 
        padding: 10px; 
        box-sizing: border-box;
    }

    #loginWrapper{
        width: auto;
        margin: 0 auto; 
        padding: 10px; 
        box-sizing: border-box;
    }

    .submit button,
    .login-btn button,
    .rgstr-btn button {
        width: 50%;
    }
    .loginCard img {
        width: 150px;
        margin-top: 5px;
        margin-bottom: 5px
    }
}

@media (max-width: 480px) {
    .loginCard {
        width: 95vw;
        padding: 8px;
        font-size: 40%;
    }
}

.btn-lg, .btn-group-lg > .btn {
    font-size: 14px;
}