/* NORMAL PC WIDESCREEN SETTINGS (min-WIDTH: 1500px) */
@media (min-width: 1500px) {

    /* Resetting browser default styles */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* End of browser margin reset */

    button,
    input,
    select,
    textarea {
        font-family: inherit;
        font-size: 75%;
        width: 20vw;
        padding: 0.3vw 0.6vw;
        margin: 0;
        box-sizing: border-box;
        border: 0vh;
        border-radius: 0.8vh;
    }

    button:hover {
        background: rgb(169, 229, 169);
    }

    a {
        text-decoration: none;
    }

    form {
        text-align: center;
        background-color: #385F5F;
        color: white;
        font-size: 1.25vw;
    }

    .LI_wrapper {
        background-image: url(../../images/DISPLAY3/background-resized.jpg);
        background-size: cover;
        border: 0.1vh solid black;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .LI_box1 {
        display: flex;
        border: 0.3vh solid black;
        border-radius: 1vw;
        align-items: center;
        justify-content: center;
        padding: 2vw;
        background-color: #385F5F;
        margin-bottom: 5vh;
    }

    .LI_loginLine {
        padding: 1vh 0vw;
        font-family: Arial, Helvetica, sans-serif;
        transition: all linear 80ms; 
        line-height: 5vh;
    }

    .LI_loginTitle {
        font-size: 1.8vw;
        color: gold;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
    }

    .LI_return {
        display: flex;
        border: 0.3vh solid black;
        border-radius: 1vw;
        align-items: center;
        justify-content: center;
        padding: 1vw 1.5vw;
        background-color: #385F5F;
        color: paleturquoise;
        font-weight: 700;
        font-size: 1vw;
        font-family: Arial, Helvetica, sans-serif;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    }

    .LI_return:hover {
        color: lawngreen;
        background-color: black;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
    }

    .forgot-password-link {
        color: paleturquoise;
        text-decoration: none;  /* optional, removes underline */
    }

    .forgot-password-link:hover {
        color: lawngreen; /* slightly darker pink on hover, optional */
    }

    .LI_submit {
        font-weight: 700;
    }

    .bum {
        padding: 0vw 0vw;
        border-radius: 1vw;
        width: 15vw;
    }

    .login_error_messages {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        border-radius: 1vw;
        align-items: center;
        justify-content: space-between;
        padding: 0vw 2vw;
        background-color: rgb(45, 45, 46);
        color: white;
        font-weight: 700;
        font-size: 1.5vw;
        font-family: Arial, Helvetica, sans-serif;
    }

    .BIGGER2 {
        font-size: 1vh;
    }

    .LI_submit {
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    }

    .LI_submit:hover {
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
    }

    /* New CSS for displaying the message below the form */
    .message-container {
        width: 35%;
        display: block;
        text-align: center;
        margin-top: 2vh; /* Optional: Adds some space between the form and the messages */
    }

    /* Success Message Style */
    .success-message {
        display: flex;
        border: 0.3vh solid black;
        border-radius: 1vw;
        align-items: center;
        justify-content: center;
        padding: 1vw 1.5vw;
        background-color: #385F5F;
        color: palegoldenrod;
        font-weight: 700;
        font-size: 1vw;
        font-family: Arial, Helvetica, sans-serif;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
        line-height: 3vh;
     
    }

    /* Error Message Style */
    .error-message {
        color: red;
        font-weight: bold;
        font-size: 1.2vw;
        margin-top: 1vh;
    }
    
    
        /* Style for the submit button */
    .LI_loginLine.three button {
        border-radius: 2vw;
        cursor: pointer;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
        font-weight: bold;
        font-weight: 700;
   background-color: whitesmoke;
    height: 4vh;
    font-size: 2.2vh;
    }
    
    .LI_loginLine.three button:hover {
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
        background-color: rgb(169, 229, 169);
}

}



@media (max-width: 1400px){

/* http://meyerweb.HP_com/eric/tools/css/reset/ 
   v2.HP_0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*END OF CSS USED TO REMOVE BROWSER MARGINS!!!!!!!!!!!!!*/

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 75%;
  width: 20vw;
  padding: 0.3vw 0.6vw;
  margin: 0;
  box-sizing: border-box;
  border: 0vh;
  border-radius: 0.8vh;
}

button:hover{
    background: background: rgb(169, 229, 169);;
}

a {
    text-decoration: none;
}

form {
    text-align: center;
    background-color: #385F5F;
    color: white;
    font-size: 1.25vw;
}

.LI_wrapper {
    background-image: url(../../images/DISPLAY3/background-resized.jpg);
    background-size: cover;
    border: 0.1vh solid black;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.LI_box1 {
    display: flex;
    border: 0.3vh solid black;
    border-radius: 1vw;
    align-items: center;
    justify-content: center;
    padding: 2vw;
    background-color: #385F5F;
    margin-bottom: 5vh;
    width: 35vw;
    height: 34vh;
    padding-bottom: 8vh;
}

.LI_loginLine {
    padding: 1vh 0vw;
    font-family: Arial, Helvetica, sans-serif;
    transition: all linear 80ms; 
    font-size: 2vw;
    line-height: 6vh;
    width: 30vw;
}

.LI_loginTitle {
    font-size: 2.7vw;
    color: gold;
    font-weight: 600;
    font-family:Arial, Helvetica, sans-serif
}

.LI_return{
    display: flex;
    border: 0.3vh solid black;
    border-radius: 1vw;
    align-items: center;
    justify-content: center;
    padding: 1vw 1.5vw;
    background-color: #385F5F;
    color: paleturquoise;
    font-weight: 700;
    font-size: 1vw;
    font-family: Arial, Helvetica, sans-serif;
    transition: all linear 80ms; 
    box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.LI_return:hover{
    color: lawngreen;
    background-color: black;
    transition: all linear 80ms; 
    box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
}

.LI_submit {
    font-weight: 700;
}

.bum {
    padding: 0vw 0vw;
    border-radius: 1vw;
    width: 15vw;
}

.login_error_messages {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    /*border: 0.3vh solid black;*/
    border-radius: 1vw;
    align-items: center;
    justify-content: space-between;
    padding: 0vw 2vw;
    background-color: rgb(45, 45, 46);
    color: white;
    font-weight: 700;
    font-size: 1.5vw;
    font-family: Arial, Helvetica, sans-serif;
    
}

.BIGGER2{
    font-size: 1vh;;
}



.LI_submit{
    transition: all linear 80ms; 
    box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
}

.LI_submit:hover{
    transition: all linear 80ms; 
    box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
}

/* New CSS for displaying the message below the form */
    .message-container {
        width: 35%;
        display: block;
        text-align: center;
        margin-top: 2vh; /* Optional: Adds some space between the form and the messages */
    }

    /* Success Message Style */
    .success-message {
        display: flex;
        border: 0.3vh solid black;
        border-radius: 1vw;
        align-items: center;
        justify-content: center;
        padding: 1vw 1.5vw;
        background-color: #385F5F;
        color: palegoldenrod;
        font-weight: 700;
        font-size: 2vw;
        font-family: Arial, Helvetica, sans-serif;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
        line-height: 3.5vh;
        width: 65vw;
        position: relative;
        left: -17vw;
     
    }

    /* Error Message Style */
    .error-message {
        color: red;
        font-weight: bold;
        font-size: 2vw;
        margin-top: 1vh;
    }
    
/* Style for the email input field */
.LI_loginLine.two input[type="email"] {
    width: 100%; /* Make input fill the container */
    padding: 10px;
    font-size: 0.8em;
    border: 0.1vw solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    position: relative;
    top: 2vh;
}

/* Style for the submit button */
.LI_loginLine.three button {
    width: 100%; /* Make button fill the container */
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 2vw;
    cursor: pointer;
    position: relative;
    top: 5vh;
    transition: all linear 80ms; 
    box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    font-weight: bold;
    background-color: whitesmoke;
    color: black;
}

.LI_loginLine.three button: hover {
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
        background-color: rgb(169, 229, 169);
}

}


/* MATEVIEW SETTINGS (min-height: 1000px) */
@media (min-height: 1000px) {

    /* Resetting browser default styles */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* End of browser margin reset */

    button,
    input,
    select,
    textarea {
        font-family: inherit;
        font-size: 75%;
        width: 20vw;
        padding: 0.3vw 0.6vw;
        margin: 0;
        box-sizing: border-box;
        border: 0vh;
        border-radius: 0.8vh;
    }

    button:hover {
        background: background: rgb(169, 229, 169);;
    }

    a {
        text-decoration: none;
    }

    form {
        text-align: center;
        background-color: #385F5F;
        color: white;
        font-size: 1.25vw;
    }

    .LI_wrapper {
        background-image: url(../../images/DISPLAY3/background-resized.jpg);
        background-size: cover;
        border: 0.1vh solid black;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .LI_box1 {
        display: flex;
        border: 0.3vh solid black;
        border-radius: 1vw;
        align-items: center;
        justify-content: center;
        padding: 2vw;
        background-color: #385F5F;
        margin-bottom: 5vh;
    }

    .LI_loginLine {
        padding: 1vh 0vw;
        font-family: Arial, Helvetica, sans-serif;
        transition: all linear 80ms; 
        line-height: 4vh;
    }

    .LI_loginTitle {
        font-size: 1.8vw;
        color: gold;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
    }

    .LI_return {
        display: flex;
        border: 0.3vh solid black;
        border-radius: 1vw;
        align-items: center;
        justify-content: center;
        padding: 1vw 1.5vw;
        background-color: #385F5F;
        color: paleturquoise;
        font-weight: 700;
        font-size: 1vw;
        font-family: Arial, Helvetica, sans-serif;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    }

    .LI_return:hover {
        color: lawngreen;
        background-color: black;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
    }

    .forgot-password-link {
        color: paleturquoise;
        text-decoration: none;  /* optional, removes underline */
    }

    .forgot-password-link:hover {
        color: lawngreen; /* slightly darker pink on hover, optional */
    }

    .LI_submit {
        font-weight: 700;
    }

    .bum {
        padding: 0vw 0vw;
        border-radius: 1vw;
        width: 15vw;
    }

    .login_error_messages {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        border-radius: 1vw;
        align-items: center;
        justify-content: space-between;
        padding: 0vw 2vw;
        background-color: rgb(45, 45, 46);
        color: white;
        font-weight: 700;
        font-size: 1.5vw;
        font-family: Arial, Helvetica, sans-serif;
    }

    .BIGGER2 {
        font-size: 1vh;
    }

    .LI_submit {
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    }

    .LI_submit:hover {
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
    }

    /* New CSS for displaying the message below the form */
    .message-container {
        width: 42%;
        display: block;
        text-align: center;
        margin-top: 2vh; /* Optional: Adds some space between the form and the messages */
    }

    /* Success Message Style */
    .success-message {
        display: flex;
        border: 0.3vh solid black;
        border-radius: 1vw;
        align-items: center;
        justify-content: center;
        padding: 1vw 1.5vw;
        background-color: #385F5F;
        color: palegoldenrod;
        font-weight: 700;
        font-size: 1.2vw;
        font-family: Arial, Helvetica, sans-serif;
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
        line-height: 3vh;
     
    }

    /* Error Message Style */
    .error-message {
        color: red;
        font-weight: bold;
        font-size: 1.2vw;
        margin-top: 1vh;
    }
    
    /* Style for the submit button */
.LI_loginLine.three button {
    border-radius: 2vw;
    cursor: pointer;
    transition: all linear 80ms; 
    box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.2); /* Light shadow */
    font-weight: bold;
    font-weight: 700;
    height: 4vh;
    font-size: 2.2vh;
    background-color: whitesmoke;
}

.LI_loginLine.three button: hover {
        transition: all linear 80ms; 
        box-shadow: 0.4vh 0.4vh 0.4vh rgba(0, 0, 0, 0.4); /* Dark shadow */
        background-color: rgb(169, 229, 169);
}

}