/* VARIABLES */
:root {
    --font: "Poppins", sans-serif;

    --app-black: rgba(51, 51, 51);
    --app-black-transparent: rgba(51, 51, 51, .9);
    --app-white: rgba(204, 204, 255);
    --app-white-transparent: rgba(255, 255, 255, .9);

    --app-dark-blue: rgba(1, 92, 171, 1);
    --app-dark-blue-transparent: rgba(1, 92, 171, .9);
    --app-light-blue: rgba(41, 169, 225, 1);
    --app-light-blue-transparent: rgba(41, 169, 225, .9);

    --gradient-circle: radial-gradient(circle, rgba(1, 62, 98, 1) 0%, rgba(1, 62, 98, .75) 25%, rgba(1, 62, 98, .5) 50%, rgba(1, 62, 98, .25) 75%, rgba(1, 62, 98, 0) 100%);
    
    --gradient-linear-blue: linear-gradient(-45deg, var(--app-dark-blue) 35%, var(--app-light-blue) 100%);
    --gradient-linear-long-blue: linear-gradient(-45deg, var(--app-dark-blue) 70%, var(--app-light-blue) 100%);
    --gradient-linear-inverse-blue: linear-gradient(45deg, var(--app-dark-blue) 35%, var(--app-light-blue) 100%);
    --gradient-linear-transparent-blue: linear-gradient(-45deg, var(--app-dark-blue-transparent) 35%, var(--app-light-blue-transparent) 100%);

    --gradient-linear-black: linear-gradient(-45deg, var(--app-black) 35%, var(--app-white) 100%);
    --gradient-linear-long-black: linear-gradient(-45deg, var(--app-black) 70%, var(--app-white) 100%);
    --gradient-linear-inverse-black: linear-gradient(45deg, var(--app-black) 35%, var(--app-white) 100%);
    --gradient-linear-transparent-black: linear-gradient(-45deg, var(--app-black-transparent) 35%, var(--app-white-transparent) 100%);

    --shadow: 0 3px 6px rgba(39, 39, 39, 0.16), 0 3px 6px rgba(39, 39, 39, 0.16);

    --root-font-size: 16px;
}
/* VARIABLES END */

/* RESET */
html {
    height: 100%;
    box-sizing: border-box;
    font-size: var(--root-font-size);
}

body {
    height: 100%;
}

*, *:before, *:after {
    box-sizing: inherit;
    overscroll-behavior: none;
    font-family: var(--font);
}

body, h1, h2, h3, h4, h5, h6, p, label, span {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

img {
    max-width: 100%;
    height: auto;
}
/* RESET END */


.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: white;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
    height: 100%;
}

.left, .right {
    height: 100%;
}

.left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.right {
     background-image: url("/BES/jdm/op/images/treatment-plant-background.png");
     background-size: cover;
     background-position: bottom right;
}

.login-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   /*box-shadow: var(--shadow);*/
   padding: .5rem;
   /*background: var(--gradient-linear);*/
   color: #515151;
   transform: translateY(-100px);
   position: relative;
}

.login-card h2 {
    text-align: center;
}

.logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form {
    width: 100%;
    padding: 1rem 0;
    
}

.login-container {
    position: absolute;
    top: 17vh;
}

.login-container span{
    text-align: center;
    display: block;
}

.input-wrapper {
    position: relative;
}

.icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(.25rem);
    width: 16px;
    height: 16px;
    stroke: #666;
    fill: none;
    stroke-width: 2;
}

.login-form input#username,
.login-form input#password {
    width: 100%;
    padding: .8rem .5rem;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
    font-size: 1rem;
    padding-left: 32px;
}

.login-form input:first-child {
    margin-bottom: .50rem;
}

.form-wrapper, .button-row{
    width: 100%;
}

.background-cover {
    height: 100%;
    width: 100%;
    background: var(--gradient-linear-transparent-black);
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.content > h1, .content > h3 {
    text-align: center;
}

.content > h1 {
    font-size: 4rem;
}

.form-row {
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
}

.button-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    vertical-align: bottom;
}

.button-row > button {
    padding: .5rem 1.5rem;
    border-radius: 5px;
    width: 100%;
    font-size: 1rem;
    background: var(--gradient-linear-blue);
    border: none;
    color: white;
}

.button-row > button:hover {
    border-radius: 5px;
    font-size: 1rem;
    background: var(--gradient-linear-long-blue);
    color: white;
    transition: .3s ease-in-out;
}

.remember-me {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    font-size: .75rem;
    align-items: center;
    color: white;
}

.forgot, .forgot:active, .forgot:visited {
    color: white;
    font-size: .75rem;
}

iframe {
    border: none;
    width: 800px;
    height: 800px;
    border-radius: 10;
}

.news-logo {
    width: 75%;
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    /*margin-top: -8vh;*/
    /*max-height: 10vh;*/
    /*overflow: hidden;*/
}

.news-logo img {
    max-height: 20vh;
}

.news-events-container {
    padding-top: 20vh;
}

.copyright {
    text-align: center;
    padding-top: 1rem;
    color: #ccc;
    font-size: .75rem;
}

.forgotPassword {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

a, a:hover, a:visited {
    color: var(--app-dark-blue);
}

@media(max-width: 700px) and (orientation: portrait) {
    .right { display: none; }
    .grid-wrapper { grid-template-columns: 1fr; }

    /*.login-card { width: 70vw; }*/
}