body {
    background-color: #f5f5f5 !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

html, body, form {
    background-color: #f5f5f5 !important;
    display: inline-table !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    overflow: hidden;
}

body, td, th {
    font-family: Open Sans, Arial, Helvetica, sans-serif !important;
    font-size: 14px;
    color: #FFF;
}

textarea:focus, input:focus {
    outline: none;
}

.loginPage {
    width: 100%;
    height: 100%;
    position: relative;
    /*flex-direction: column;
    justify-content: center;
    align-items: center;*/
}

    .loginPage .login-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .loginPage .background {
        width: 100%;
        height: 100%;
        opacity: 0.2;
        position: absolute;
        background: url(../../images/wp9574651.jpg) no-repeat #39454a;
        background-size: cover;
        background-position-x: right;
    }

.welcomeDiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #39454a;
    width: 55%;
    max-width: 55%;
    flex-wrap: wrap;
}

.wel-content {
    flex: 1;
    padding: 0 5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.welcome-left {
    position: relative;
    z-index: 0;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
    flex: 1;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
    flex-direction: column;
}

    .welcome-left img {
        width: 30%
    }

    .welcome-left::before {
        content: "";
        position: absolute;
        z-index: -2;
        left: -25%;
        top: -90%;
        width: 200%;
        height: 350%;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        /*background-image: linear-gradient(#057979, #057979), linear-gradient(#f57337, #f57337), linear-gradient(#f2395b, #f2395b), linear-gradient(#3baec3, #3baec3);*/
        background-image: linear-gradient(#057979, #057979), linear-gradient(#057979, #057979), linear-gradient(#3baec3, #3baec3), linear-gradient(#3baec3, #3baec3);
        -webkit-animation: rotate 8s linear infinite;
        animation: rotate 8s linear infinite;
    }

    .welcome-left::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 6px;
        top: 6px;
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        background: white;
        border-radius: 5px;
    }


@-webkit-keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.loginLabel {
    width: 100%;
    border: 1px solid #39454a;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.wel-content .action {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.wel-content span {
    padding: 5px 0;
    font-size: 14px;
    font-weight: 600;
}

.loginLabel .loginInput {
    width: 100%;
    font-size: 16px;
    padding: 0.75rem;
    border: none;
    background: transparent;
}

.loginBt {
    padding: 1rem 2rem;
    border-radius: 1rem;
    border: 1px;
    background: #057979;
    position: relative;
    color: white;
    font-weight: 600;
}

    .loginBt:hover {
        background: #07a3a3;
        cursor: pointer;
    }

a.forgotpass {
    text-decoration: none;
    color: #057979;
    font-weight: 600;
}

    a.forgotpass:hover {
        color: #07a3a3;
    }

span.notification {
    color: red;
    text-align: right;
}

.userHearder {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .userHearder .userLoginImg {
        border-radius: 50%;
        border: 3px solid #f79218;
        overflow: hidden;
        margin: 5px;
        padding: unset;
    }

    .userHearder a {
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 600;
        color: #39454a;
    }

.ic-eye {
    background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z'/></svg>");
}

.ic-eye-slash {
    background-image: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/></svg>");
}

.show-pass-toggle {
    position: absolute;
    right: 8px;
    top: 70%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
}

    .show-pass-toggle:focus {
        outline: none;
    }

#togglePasswordBtn {
    width: 18px;
    height: 18px;
    display: block;
    filter: invert(39%) sepia(88%) saturate(687%) hue-rotate(180deg) brightness(96%) contrast(93%);
    background-repeat: no-repeat;
}