html {
    background-image: url("/images/login-background.webp");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:#534941;
}

* {
    box-sizing: border-box;
    outline:none;
}

body {
    font-family: Poppins,sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100%;
}



.logo-wrapper {
    margin-bottom: 20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-logo {
    transition-duration: 0.8s;
    transition-property: transform;
}

.login-logo:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}





a {
    color: #92badd;
    display: inline-block;
    text-decoration: none;
    font-weight: 400
}
    a.forgot-password {
        color: #777;
        display: inline-block;
        position: relative;
        font-size:85%;
    }

        a.forgot-password:hover {
            color: #333;
        }

        a.forgot-password::after {
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 1px;
            bottom: 0;
            left: 0;
            background-color: #777;
            transform-origin: bottom right;
            transition: transform 0.25s ease-out;
        }

        a.forgot-password:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }
        a.forgot-password:focus {
            text-decoration:underline;
        }


        

        h2 {
            text-align: center;
            font-weight: 400;
            text-transform: uppercase;
            display: inline-block;
            margin-block: 10px;
            color: #686d6d;
            font-size: 30px;
        }

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
}

#app {
    width: 50%;
    display: flex;
    background: #fff;
    border-radius: 10px;
    padding:2.5em;
    transition: background 0.3s linear;
}

#formContent {
    position: relative;
    width:50%;
    border-right:1px solid #e1e1e1;
    padding-right:5%;
}

.login-right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex:1;
    padding:0.5em;
}
    .login-right p {
        color: #888;
        word-spacing: 3px;
        line-height: 18px;
        font-size: 12px;
        font-style: italic;
        text-align:center;
    }


#formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    border-radius: 0 0 10px 10px;
}



input[type=button], input[type=reset], input[type=submit], .btn-custom {
    background-color: #3544b1;
    border: none;
    color: #fff;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    transition: transform 100ms ease-in-out, background-color 200ms linear;
    border-radius: 5px;
    width: 100%;
    margin: 10px 0;
}

input[type=submit] {
    cursor: pointer;
}

    input[type=submit]:focus, .btn-custom:focus {
        outline: 2px solid #1929a4;
        outline-offset: 2px;
    }

    input[type=submit]:hover, .btn-custom:hover {
        background-color: #1929a4;
    }

    input[type=submit]:focus:hover, .btn-custom:focus:hover {
        outline: 2px solid #1929a4;
    }




input[type=button]:hover, input[type=reset]:hover {
    background-color: #1929a4
}

input[type=button]:active, input[type=reset]:active, input[type=submit]:active {
    transform: scale(.99)
}

input[type=email], input[type=password], input[type=text] {
    background-color: #fff;
    color: #0d0d0d;
    padding: 15px 20px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 100%;
    border: none;
    border-radius: 5px;
    margin: 10px 0;
    border: 1px solid #dadce0;
}

    input[type=email]:hover, input[type=password]:hover, input[type=text]:hover {
        border: 1px solid #ccc;
    }

    input [type=email]:focus, input[type=password]:focus, input[type=text]:focus {
        outline: 2px solid #5398f4;
    }

        input [type=email]:focus:hover, input[type=password]:focus:hover, input[type=text]:focus:hover {
            border: 1px solid #eee;
        }

    input[type=email]::placeholder, input[type=password]::placeholder, input[type=text]::placeholder {
        color: #999;
    }

.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: both
}

.fadeIn {
    opacity: 0;
    animation: fadeIn ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 1s
}

    .fadeIn.first {
        animation-delay: .4s
    }

    .fadeIn.second {
        animation-delay: .6s
    }

    .fadeIn.third {
        animation-delay: .8s
    }

    .fadeIn.fourth {
        animation-delay: 1s
    }

.underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width .2s
}

.underlineHover:hover {
    color: #0d0d0d;
}

    .underlineHover:hover:after {
        width: 100%
    }




.ErrorMsg {
    color: red;
    text-align: center;
    border-radius: 5px;
    margin: 5px 0;
    font-size: 13px;
}

@media(max-width:1400px) {
    #app {
        padding: 2em;
    }
}


@media(max-width:1300px) {
    .login-right {
        display: none;
    }

    #formContent {
        border: none;
        width: 100%;
        padding: 0;
    }
}

@media(max-width: 900px) {
    #app {
        width: 50%;
        padding: 1.5em;
    }
}


@media(max-width: 750px) {
    #app {
        width: 95%;
        padding: 1.5em;
    }
}





    /****************** Popup ********************/
    /* Popup container */
    .popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
        bottom: 41px;
    }

        /* The actual popup (appears on top) */
        .popup .popuptext {
            visibility: hidden;
            width: 500px;
            background-color: white;
            color: #fff;
            text-align: left;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -80px;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
        }

            /* Popup arrow */
            .popup .popuptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #e3e3e3 transparent transparent transparent;
            }

        /* Toggle this class when clicking on the popup container (hide and show the popup) */
        .popup .show {
            visibility: visible;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s
        }

    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
    /****************** Popup - END ********************/
    /****************** Password Rules ********************/
    ul {
        list-style: none;
    }

    .pwd-rules .failed {
        color: red;
    }

    .pwd-rules .passed {
        color: green;
    }
    /****************** Password Rules ********************/
.msg-err, .msg-info {
    padding: 5px;
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 5px;
}

.msg-err {
    background-color: #ffdcdc;
    color: red;
}

.msg-info {
    background-color: #ddffdc;
    color: green;
}

.eye-open, .eye-close {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 100;
}

.eye-open {
    background-image: url('/Content/Images/Eye-Opened.png');
}

.eye-close {
    background-image: url('/Content/Images/Eye-Closed.png');
}

.cnt-pwd {
    position: relative;
}

.txt-otp {
    letter-spacing: 15px;
    border: 1px solid gray !important;
    font-size: 18px;
}

    /****************** Loader ******************************/
    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        /*background-color: white;*/
        opacity: 0.5;
    }

    #loader {
        border: 3px solid transparent;
        border-top-color: transparent;
        border-top-color: #28bebd;
        border-radius: 50%;
        display: block;
        margin: -75px 0 0 -75px;
        width: 150px;
        height: 150px;
        position: relative;
        top: 50%;
        left: 50%;
        animation: spin 2s linear infinite;
    }

        #loader::after {
            border: 3px solid transparent;
            border-top-color: #ec407a;
            border-radius: 50%;
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            bottom: 15px;
            right: 15px;
            animation: spin 1.5s linear infinite;
        }

        #loader::before {
            border: 3px solid transparent;
            border-top-color: #48a6f2;
            border-radius: 50%;
            content: "";
            position: absolute;
            top: 5px;
            right: 5px;
            bottom: 5px;
            left: 5px;
            animation: spin 3s linear infinite;
        }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(1turn);
        }
    }
    /****************** Loader - End ******************************/