/* *** LOGIN PAGES (login.ejs, reset-password.ejs, forgot-password.ejs) *** */

body {
    margin: 0;
    padding: 0;
    background-color: #3E4649;
}

.site--container {
    background-color: #3E4649 !important;
    padding-bottom: 0rem !important;
}

.thd {
translateX(- 78 px) rotate(- 5 deg) skewX(- 12 deg) skew(- 8 deg, 14 deg) translateY(- 90 px)
}

.container2 {
    width: 480px;
    background-color: var(--color-txt);
    margin: 200px auto;
}

.header-card {
    background-color: var(--color-third);
    color: white;
    text-align: center;
    font-family: Roboto-MediumItalic;
    font-size: 1.3rem;
    font-weight: normal;
    padding-top: 10px;
    letter-spacing: 0px;
    border-radius: 5px 5px 0 0;
}

.group {
    position: relative;
    padding: 10px;
}

.group .fa {
    color: white;
    font-weight: bold;
    width: 45px;
    left: 0px;
    top: 10px;
    position: absolute;
    padding: 13px;
    background-color:  #800000;!important;
    border-radius: 3px 0 0 3px;
}

.group .check-pass {
    position: absolute;
    right: 0;
    left: 100%;
    background-color: transparent;
    top: 15px;
    font-size: 22px;
}

.group .check-e {
    position: absolute;
    right: 0;
    left: 100%;
    background-color: transparent;
    top: 15px;
    font-size: 22px;
}

.valid {
    color: #22A86D !important;
}

.invalid {
    color: #c0392b !important;
}

input {
    border-color: var(--color-secondary-80) !important;
    display: inline-block;
    height: 42px;
    width: 80%;
    outline: none;
    letter-spacing: 0px;

    font-family: Roboto-Regular !important;
    border-radius: 0 3px 3px 0 !important;
}

.toggle-password {
    color: var(--color-txt-9) !important;
    font-size: 1.0em !important;
    float: right;
    cursor: pointer;
    margin-left: -60px;
    margin-top: 0px;
}

.group button {
    border-color: transparent;
    padding: 5px 35px;
    margin: 10px;
    color: white;
    font-family: Roboto-MediumItalic;
    background-color: #800000;
    cursor: pointer;
    border-radius: 3px;
}

.group button:hover {
    background-color: #009dec;
}

.footer-card {
    height: 55px;
    padding: 15px;
    font-family: Roboto-LightItalic;
    color: white;
    text-align: center;
    background-color: var(--color-txt-6);
    border-radius: 0 0 5px 5px;
}

.footer-card .fa {
    color: #0093dd;
    padding: 0px 5px;
}

.footer-card div {
    width: 50%;
    float: left;
}

.rc-anchor-light .rc-anchor-normal {
    background-color: yellow !important;
}

.bottom {
    color: white;
    text-align: center;
}

.bottom a {
    padding: 5px;
    color: white;
}

.wrap {
    padding: 5px 40px 0px 90px;
    text-align: center;
}

@media only screen and (max-width: 500px) {
    input {
        width: 70% !important;
    }
    .wrap {
        padding: 26px 40px 40px 39px;
        text-align: center;
    }
}

.fa-eye-slash {
    left: 90%!important;
    top: 12px!important;
}

.navbar {
    background-color: #f8f8f8;
}