/* Resetting default margin and padding */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.company_name{
    font-weight:bolder;
}

/* Text styles */
p,
h1,a{
    font-family: Arial, Helvetica, sans-serif;
    color: #232222;
}

h2,.forgot-password-link
 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

/* Heading 1 styles */
h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    letter-spacing: 4px;
}

/* Heading 2 styles */
h2 {
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 1%;
}

/* Paragraph and link styles */
p,
a {
    font-size: 1.1rem;
    text-align: justify;
    letter-spacing: 3px;
    line-height: 1.8;
}

/* Flex container styles */
.flex-container-column {
    min-height: 83vh;
    display: flex;
    background-image: url('../img/green_background.webp');
    background-size: cover;
    background-position: center;
}

/* Styles for the first column in the flex container */
.flexbox-column1 {
    flex: 3;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* Styles for text container */
.text-container {
    margin: -20px 0px 0 70px;
}

/* Styles for the second column in the flex container */
.flexbox-column2 {
    display: flex;
    flex: 2;
    justify-content: center;
    align-items: center;
}

/* Styles for the third column in the flex container */
.flexbox-column3 {
    display: flex;
    flex-direction: column;
    background-color: rgba(78, 128, 51, 0.671);
    border-radius: 15px;

    min-height: 10%;
    min-width: 10%;

    max-height: 80%;
    max-width: 70%;

    padding: 1rem;

    text-align: center;
    box-sizing: border-box;
    
    box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
}

.flexbox-column3 > h2{
    margin-bottom: 2rem;
}

.flex-box-login{
    margin-bottom: 1.5rem;
}

.flexbox-login-column1,
.flexbox-login-column2,
.flexbox-login-column3,
.flexbox-login-column4{
    flex: 1;
}

/* Styles for input fields with icons */
.inputWithIcon {
    position: relative;
}

/* Styles for input fields with icons */
.inputWithIcon input[type="text"],
.inputWithIcon input[type="password"] {
    width: calc(100% - 60px);
    border: 2.5px solid #648654;
    border-radius: 1rem;
    outline: none;
    padding: 1rem 20px 1rem 52px;
    transition: 0.3s;
    box-sizing: border-box;
    height: 2.6rem;
    font-size: .9rem;
}

/* Styles for icons inside input fields with background / icon of the input */
.inputWithIcon.inputIconBg i {
    position: absolute;
    background-color: #648654;
    color: #fff;
    padding: 12px 4px;
    border-radius: 1rem 0 0 1rem;
    width: 35px;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.fieldpass input[type="text"] {
    padding-left: 2.5em; /* Adjust as needed based on icon size */
}

.inputWithIcon #iconpass {
    position: absolute;
    left: 1.3em; /* Adjust as needed for desired positioning */
    top: 19%;
    transform: translateY(-50%);
    pointer-events: none; /* Ensures the icon doesn't intercept click events */
}

/* Styles for icon of reset password*/
.fa.fa-lock.fa-lg.fa-fw.reset_pass_icon{
    position: absolute;
    left: 30px;
}

#reset_password_error,
#reset_confirm_error {
    color: red;
    font-size: 0.6rem;
    text-align: center;
    margin-top: 10px;
    letter-spacing: 0.6px;
}

/* forgetpass icon */
.inputForgetPass.inputWithIcon.inputIconBg i{
    transform: translateY(-107%);
}

/* Styles for focused input fields with background */
.inputWithIcon.inputIconBg input[type="text"]:focus + i,
.inputWithIcon.inputIconBg input[type="password"]:focus + i {
    color: #fff;
}

/* Styles for the forgot password container */
.forgot-password-container {
    text-align: center;
    margin-bottom: 20px;
}

/* Styles for forgot password links */
.forgot-password-link {
    color: white;
    text-decoration: none;
    font-size: .94rem;
    font-weight: bold;
    letter-spacing: .3rem;
    font-family:Arial, Helvetica, sans-serif
}

/* Styles for hover state of forgot password links */
.forgot-password-link:hover {
    color: #50753f;
}

/* Styles for custom buttons */
.custom-button {
    padding: 0.6em;
    background-color: #648654;
    color: white;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 1rem;
    letter-spacing: 0.3rem;
    font-weight: bolder;
    font-family: "Gill Sans", "Gill Sans MT", "Calibri", "Trebuchet MS", sans-serif;
    margin-top: 10px;
    width: 40%;
    max-width: 300px;
    margin-bottom: .5%;
}


/* Styles for hover state of custom buttons */
.custom-button:hover {
    background-color: rgb(59, 80, 48);
}

/* Styles for modal container */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0%;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Styles for modal content */
.modal-content,
.modal-content2,
.modal-contentSuccess,
.modal-contentInvalid,
.modal-contentInvalidPass {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 600px; /* Maximum width to maintain readability */
    border-radius: 6px;
    position: fixed; /* Fixed position to keep modal centered */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* Styles for close button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 2.3rem;
    font-weight: bold;
    margin-top: -12px;
}

/* Styles for close button hover and focus states */
.close:hover,
.close:focus {
    color: #648654;
    text-decoration: none;
    cursor: pointer;
}

/* Styles for modal header */
.modal-header {
    border-bottom: 2px solid #648654;
    padding-bottom: 0;
}

/* Styles for modal header heading */
.modal-header h2 {
    color: #648654;
    margin-top: 5px;
    text-align: left;
}

/* Styles for modal body paragraphs */
.modal-body p,
.modal-bodySuccess p,
.modal-bodyInvalid p,
.modal-bodyInvalidPassword p {
    color: #648654;
    margin-top: 5%;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

/* Styles for send, ok, and cancel buttons */
.send-button,
.ok-button,
.cancel-button {
    background-color: #648654;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 1rem;
    letter-spacing: 0.2rem;
    font-weight: bolder;


}

.send-button{
    margin-top: 3%;
    margin-bottom: 2%;
}


/* Styles for hover state of send, ok, and cancel buttons */
.send-button:hover,
.ok-button:hover,
.cancel-button:hover {
    background-color: rgb(55, 121, 58);
}

/* Styles for cancel button */
.cancel-button {
    background-color: #e04444;
}

/* Styles for hover state of cancel button */
.cancel-button:hover {
    background-color: #ff3d3d;
}


/*Big ipad such as ipad air and ipad pro*/
@media only screen and (max-width: 1120px) {
    html, body {
        overflow-x: hidden; /* Allow horizontal scrollbar on smaller screens */
        overflow-y: auto; /* Allow vertical scrollbar on smaller screens */
    }
    
    .flex-container-column {
        flex-direction: column;
    }

    .flexbox-column1 {
        max-height: initial;
        text-align: center;
        margin: 20px 0;
    }

    .text-container {
        position: static;
        margin-left: 7%;
        margin-right: 7%;
    }

    .flexbox-column3 {
        margin-bottom: 10vh !important;    
        min-width: 50vw;
        min-height: 25vh;
    }

    .custom-button {
        margin-top: 20px;
        max-width: 100%;
    }
}


/*Medium Sized Ipads*/
@media (min-width: 768px) and (max-width: 899px) {
    /*ipad logo*/

    .flexbox-column1 {
        flex: 3;
        min-width: 90vw;
    }

    .flexbox-column2 {
        flex: 2;
        min-width: 90vw;
    }
    
    .flexbox-column3 {
        min-width: 50%;
        min-height: 375px;

        max-width: 60%;
        max-height: 33vh;
    }
    
    h1 {
        font-size: 2.3rem;
        word-wrap: break-word;
    }

    h2 {
        font-size: 1.3rem;
    }

    p {
        font-size: 1.3rem;
    }

    /* textbox placeholders*/
    input::placeholder{
        font-size: 0.9rem;
    }
    
}

/*Small Sized Ipads*/
@media (min-width: 450px) and (max-width: 767px) {
    /* CSS styles for small ipads */


    .flexbox-column3 {
        min-width: 80vw;
        min-height: 40vh;
    }

    h1 {
        font-size: 2.0rem;
        word-wrap: break-word;
    }

    h2 {
        font-size: 1.2rem;
    }

    p {
        font-size: 1.2rem;
    }

    /* modal css */
    .modal-content,
    .modal-content2,
    .modal-contentSuccess,
    .modal-contentInvalid,
    .modal-contentInvalidPass {
        max-width: 60vw;
    }

    /* textbox placeholders*/
    input::placeholder{
        font-size: 0.9rem;
    }

    
    .send-button{
        margin-top: 7.5%;
        margin-bottom: 2%;
    }
}


/* Media query for phones */
@media only screen and (max-width: 449px) {
    /* small phone logo */

    .flexbox-column3 {
        min-width: 90vw;
        min-height: 20vh;
    }

    h1 {
        font-size: 1.5rem;
        word-wrap: break-word;
    }

    h2 {
        font-size: 1rem;
    }

    p {
        font-size: 0.9rem;
    }
        
    /* modal css */
    .modal-content,
    .modal-content2,
    .modal-contentSuccess,
    .modal-contentInvalid,
    .modal-contentInvalidPass {
        max-width: 80vw;
    }

    /*changepass validation text warnings */
    #reset_password_error,
    #reset_confirm_error{
        color:red;
        margin-top: 12px;
        font-size: 0.5rem;
    }

    input::placeholder{
        font-size: 0.7rem;
    }

    .send-button{
        margin-top: 6.5%;
        margin-bottom: 2%;
    }
}

/* Small phones such as galaxy fold */
@media only screen and (max-width: 299px) {
    h1 {
        font-size: 1.1rem;
        word-wrap: break-word;
    }

    h2 {
        font-size: 0.8rem;
    }

    p {
        font-size: 0.6rem;
    }

    input::placeholder{
        font-size: 0.5rem;
    }
    
    

}

/* media to ensure the column 3 won't be too small in smaller height devices */
@media only screen and (max-height: 600px) {
    .flexbox-column3{
        min-height: 300px;
    }

}