@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;1,300&display=swap');

* {
    font-family: 'Montserrat', sans-serif;
    margin     : 0;
    padding    : 0;
    max-height : 100vh;
    box-sizing : border-box;
}

body {
    height          : 100vh;
    height          : -webkit-fill-available;
    overflow-x      : auto;
    overflow-y      : hidden;
    color           : #f8f9fa;
    background-color: #f8f9fa;
    font-size       : 1em;
}

.errorMsg {
    color  : #f04040;
    display: none;
}

h1,
h2,
h3 {
    color     : #3b3b3b;
    text-align: center;
}

/* style the container */

.container {
    position        : relative;
    border-radius   : 5px;
    background-color: #cacaca;
    padding         : 20px 0 30px 0;
}


/* style inputs and link buttons */

input,
.btn {
    width          : 100%;
    padding        : 12px;
    border         : none;
    border-radius  : 4px;
    margin         : 5px 0;
    opacity        : 0.85;
    display        : inline-block;
    font-size      : 17px;
    line-height    : 20px;
    text-decoration: none;
    /* remove underline from anchors */
}

input:hover,
.btn:hover {
    opacity: 1;
}

input[type="button"],
input[type="submit"] {
    opacity: 1;
}

.forgot,
.back {
    padding-top    : 15px;
    text-decoration: none;
    font-weight    : bold;
    color          : #3b3b3b;
    padding-top    : 10px;
}

.forgot:hover,
.back:hover {
    text-decoration: none;
    font-weight    : bold;
    margin         : auto;
    color          : #0085c5;
    text-align     : center;
}


/* style the submit button */

input[type=button],
input[type=submit] {
    background-color: #0085c5;
    color           : #f8f9fa;
    cursor          : pointer;
}

input[type=button]:hover,
input[type=submit]:hover {
    background-color: #016494;
    color           : #f8f9fa;
}

.box {
    margin: 0 auto;
    width : 50%;
}

a#button.btn {
    color: #f8f9fa;
}


/* Two-column layout */

.col1 {
    margin-top: -10px;
    float     : left;
    width     : 100%;
    margin    : auto;
    padding   : 0 50px;
    margin-top: 6px;
}

.col2 {
    display       : table-cell;
    vertical-align: middle;
    white-space   : nowrap;
    float         : left;
    width         : 50%;
    margin        : auto;
    margin-top    : 6px;
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear  : both;
}


/* bottom container */

.bottom-container {
    text-align      : center;
    background-color: #3b3b3b;
    border-radius   : 0px 0px 4px 4px;
}


/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 900px) {
    .box {
        width: 70%;
    }

    .col2 {
        width     : 100%;
        margin-top: 0;
    }
}

h2 {
    color: #3b3b3b;
}

.field-icon {
    color     : #3b3b3b;
    cursor    : pointer;
    font-size : 20px;
    right     : 60px;
    margin-top: -35.5px;
    position  : absolute;
    z-index   : 2;
}


.centerContainer {
    background-color  : white;
    position          : absolute;
    transform         : translate(-50%, -50%);
    top               : 50%;
    left              : 50%;
    width             : 50%;
    height            : 70vh;
    -webkit-box-shadow: 0px 0px 33px 9px rgba(0, 0, 0, 0.43);
    -moz-box-shadow   : 0px 0px 33px 9px rgba(0, 0, 0, 0.43);
    box-shadow        : 0px 0px 33px 9px rgba(0, 0, 0, 0.43);
}

.backgroundColor {
    background-color: #016494;
    width           : 40%;
    height          : 100vh;
    float           : left;
}


.leftContainer {
    background-color: #0085c5;
    width           : 30%;
    height          : 100%;
    float           : left;
}

.leftContainer img {
    position : relative;
    transform: translate(-50%, -50%);
    --width  : 60%;
    width    : var(--width);
    height   : calc(var(--width * 2));
    left     : 50%;
    top      : 40%;
}

.leftContainer h2 {
    color    : white;
    position : relative;
    transform: translate(-50%, -50%);
    font-size: 150%;
    left     : 50%;
    top      : 35%;
}

.rightContainer {
    background-color: white;
    width           : 70%;
    height          : 100%;
    float           : right;
}

.rightContainer form {
    position : relative;
    transform: translate(-50%, -50%);
    width    : 80%;
    left     : 50%;
    top      : 25%;
}

.rightContainer button {
    background-color: #0085c5 !important;
    border-color    : #0085c5 !important;
    opacity         : 1;
    transition      : 0.2s;
}

.rightContainer button:hover {
    background-color: #016494 !important;
}

.rightContainer h1 {
    position   : relative;
    margin-top : 80px;
    font-weight: bold;
}

.forgotPassword {
    color : #cacaca !important;
    cursor: pointer;
}

.forgotPassword:hover {
    color: #016494 !important;
}

.capsWarning {
    color  : #f04040;
    display: none;
}

.caps {
    color: #f04040;
}

#patch {
    position: absolute;
    color   : white;
    bottom  : 0px;
}

@media only screen and (max-width: 1095px) {
    .leftContainer h2 {
        margin-top: 50px;
    }
}


/* Mobile */
@media only screen and (max-width: 600px) {
    .centerContainer {

        width : 100%;
        height: 100%;
    }

    .rightContainer h1 {
        font-size: 2em;
    }
}

/* Iphone X landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 873px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {
    .centerContainer {

        width : 100%;
        height: 100vh;
        overflow: auto;
    }

    #patch {
        bottom: 30px;
    }

    .rightContainer{
        height: 100%;
    }

    .rightContainer h1 {
        position: relative;
        margin-top: 30px;
        font-weight: bold;
    }

    .rightContainer .form-group {
        margin-bottom: 0rem;
    }

    .leftContainer{
        height: 100%;
    }

    .leftContainer h2 {
        margin-top: 0px;
    }
}

/* General Mobile landscape */
@media screen and (min-width:320px) and (max-width:767px) and (-webkit-min-device-pixel-ratio: 1) and (orientation:landscape) {
    .centerContainer {

        width : 100%;
        height: 100vh;
        overflow: auto;
    }

    #patch {
        bottom: 30px;
    }

    .rightContainer{
        height: 100%;
    }

    .rightContainer h1 {
        position: relative;
        margin-top: 30px;
        font-weight: bold;
    }

    .rightContainer .form-group {
        margin-bottom: 0rem;
    }

    .leftContainer{
        height: 100%;
    }

    .leftContainer h2 {
        margin-top: 0px;
    }
}

#field_icon {
    color     : #3b3b3b;
    cursor    : pointer;
    font-size : 20px;
    right     : 10px;
    margin-top: -32.5px;
    position  : absolute;
    z-index   : 2;
}