.login-userprofile {
    border-radius: 50%;
    height: 80px;
    width: 80px;
}

.card {
    box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.26);
}

.amount {
    text-align: right;
}

article,
aside,
details,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    text-decoration: none;
}

img {
    border: none;
}

*:focus {
    outline: none;
}

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

.bg-illustration {
    position: relative;
    height: 97vh;
    width: 1194px;
    background: url("https://img.freepik.com/premium-photo/casual-business-man-working-with-laptop_158043-19.jpg?w=740") no-repeat center center scroll;
    background-size: cover;
    float: left;
    -webkit-animation: bgslide 2.3s forwards;
    animation: bgslide 2.3s forwards;
    box-shadow: 15px 15px 10px #a6c8ea;
    -moz-box-shadow: 15px 15px 10px #a6c8ea;
    -webkit-box-shadow: 15px 15px 5px #a6c8ea;
}

.Password-img {
    position: relative;
    height: 97vh;
    width: 1194px;
    background: url("/Images/lock2.jpg") no-repeat center center scroll;
    background-size: cover;
    float: left;
    -webkit-animation: bgslide 2.3s forwards;
    animation: bgslide 2.3s forwards;
    box-shadow: 15px 15px 10px #cec7c7;
    -moz-box-shadow: 15px 15px 10px #cec7c7;
    -webkit-box-shadow: 15px 15px 5px #cec7c7;
}

.bg-illustration img {
    width: 248px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: auto;
    margin: 19px 0 0 25px;
}


.login {
    max-height: 100vh;
    overflow-Y: auto;
    float: left;
    margin: 0 auto;
    width: calc(100% - 1194px);
}

    .login .container {
        width: 505px;
        margin: 9%;
        margin-left: 15%;
        position: relative;
    }

        .login .container h1 {
            margin-top: 5%;
            font-size: 30px;
            font-weight: bolder;
        }

        .login .container h4 {
            margin-top: 5%;
            font-size: 20px;
            font-weight: bolder;
        }




.login-btn {
    background: -webkit-linear-gradient(110deg, #003366 0%, #0080ff 100%);
    background: -o-linear-gradient(110deg, #003366 0%, #0080ff 100%);
    background: linear-gradient(-20deg, #003366 0%, #0080ff 100%);
    border: none;
    margin: 20%;
    width: 60%;
    height: 30%;
    text-transform: uppercase;
    color: white;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    font-weight: bold;
    font-size: 20px;
}

    .login-btn:hover::after {
        opacity: 1;
    }

    .login-btn::after {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 10px;
        opacity: 0;
        top: 0;
        left: 0;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        right: 0;
        bottom: 0;
        background: -webkit-gradient(linear, left bottom, left top, from(#b5fcde), to(#04623b));
        background: -webkit-linear-gradient(bottom, #b5fcde 0%, #04623b 100%);
        background: -o-linear-gradient(bottom, #b5fcde 0%, #04623b 100%);
        background: linear-gradient(to top, #b5fcde 0%, #04623b 100%);
    }


.mud-link {
    position: absolute;
}

.mud-link {
    font-size: 10px;
    position: relative;
    font-weight: normal;
    color: #918F8F;
}

    .mud-link::after {
        content: "";
        position: absolute;
        height: 2px;
        width: 100%;
        border-radius: 100px;
        background: -webkit-linear-gradient(110deg, #f794a4 0%, #fdd6bd 100%);
        background: -o-linear-gradient(110deg, #f794a4 0%, #fdd6bd 100%);
        background: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
        bottom: -4px;
        left: 0;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        opacity: 0;
        right: 0;
    }

    .mud-link:hover::after {
        opacity: 1;
    }



@media only screen and (min-width: 1024px) and (max-width: 1680px) {
    .bg-illustration {
        width: 50%;
        -webkit-animation: none;
        animation: none;
    }

    .Password-img {
        width: 50%;
        -webkit-animation: none;
        animation: none;
    }

    .login {
        width: 50%;
    }
}
/* Display 12", iPad PRO Portrait, iPad landscape */
@media only screen and (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }
   

    @-webkit-keyframes slideIn {
        from {
            left: -100%;
            opacity: 0;
        }

        to {
            left: 0;
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            left: -100%;
            opacity: 0;
        }

        to {
            left: 0;
            opacity: 1;
        }
    }

    .bg-illustration {
        float: none;
        background-size: cover;
        -webkit-animation: slideIn 0.8s ease-in-out forwards;
        animation: slideIn 0.8s ease-in-out forwards;
        width: 100%;
        height: 190px;
        text-align: center;
    }

    .Password-img {
        float: none;
        background-size: cover;
        -webkit-animation: slideIn 0.8s ease-in-out forwards;
        animation: slideIn 0.8s ease-in-out forwards;
        width: 100%;
        height: 190px;
        text-align: center;
    }

    /*.bg-illustration img {
            width: 100px;
            height: auto;
            margin: 20px auto !important;
            text-align: center;
        }*/

    .bg-illustration .burger-btn {
        left: 33px;
        top: 29px;
        display: block;
        position: absolute;
    }

    .Password-img .burger-btn {
        left: 33px;
        top: 29px;
        display: block;
        position: absolute;
    }

    .bg-illustration .burger-btn span {
        display: block;
        height: 4px;
        margin: 6px;
        background-color: #fff;
    }

        .bg-illustration .burger-btn span:nth-child(1) {
            width: 37px;
        }

        .bg-illustration .burger-btn span:nth-child(2) {
            width: 28px;
        }

        .bg-illustration .burger-btn span:nth-child(3) {
            width: 20px;
        }

    .Password-img .burger-btn span {
        display: block;
        height: 4px;
        margin: 6px;
        background-color: #fff;
    }

        .Password-img .burger-btn span:nth-child(1) {
            width: 37px;
        }

        .Password-img .burger-btn span:nth-child(2) {
            width: 28px;
        }

        .Password-img .burger-btn span:nth-child(3) {
            width: 20px;
        }

    .login {
        float: none;
        margin: 0 auto;
        width: 100%;
    }

        .login .container {
            -webkit-animation: slideIn 0.8s ease-in-out forwards;
            animation: slideIn 0.8s ease-in-out forwards;
            width: 85%;
            float: none;
        }

            .login .container h1 {
                font-size: 25px;
                margin-top: 40px;
            }

            .login .container h4 {
                font-size: 10px;
                margin-top: 40px;
            }

    .forget-pass {
        position: absolute;
        right: inherit;
        left: 0;
        bottom: -40px;
        margin: 0 !important;
    }

        .forget-pass a {
            font-size: 16px;
            position: relative;
            font-weight: normal;
            color: #918F8F;
        }

            .forget-pass a::after {
                content: "";
                position: absolute;
                height: 2px;
                width: 100%;
                border-radius: 100px;
                background: -webkit-linear-gradient(110deg, #f794a4 0%, #fdd6bd 100%);
                background: -o-linear-gradient(110deg, #f794a4 0%, #fdd6bd 100%);
                background: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);
                bottom: -4px;
                left: 0;
                -webkit-transition: 0.3s;
                -o-transition: 0.3s;
                transition: 0.3s;
                opacity: 0;
                right: 0;
            }

            .forget-pass a:hover::after {
                opacity: 1;
            }
}

#card-styl {
    background-color: #e1e1e1;
}

/* ==========================loginpage style===================================*/

img {
    max-width: 100%;
}

.changethemeColumn {
    position: absolute;
    left: 0;
    top: 0;
    position: fixed;
    height: 100%;
    animation: animate 20s ease-in-out infinite;
    background-size: cover;
}

@keyframes animate {
    0%, 100% {
        background-image: url('../images/loginbg1.png');
    }

    50% {
        background-image: url('../images/loginbg2.jpg');
    }
}

@media only screen and (max-width: 450px) {
    .changethemeColumn {
        overflow-y: scroll
    }
}

._lk_de {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0px;
    position: relative;
}

.form-03-main {
    width: 500px;
    display: block;
    margin: 20px auto;
    /*padding: 25px 50px 25px;*/
    background: rgba(255,255,255,0.6);
    border-radius: 6px;
    z-index: 9;
}
.innerdiv {
    padding: 25px 50px 25px;
}


.logo {
    display: flex;
    margin: 20px auto;
    /* width: 250px;
    height: 60px;*/
    justify-content: center;
    margin-bottom: 32px;
    height: 70px;
}

@media screen and (max-width: 600px) {
    .form-03-main {
        width: 100%;
    }
   /* .footer {
        width: 100% !important;
        left: 0 !important;
    }*/
}

.logpagestyle .mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    color: black !important;
    border: 2px !important;
    padding-left:0 !important;
}

.logpagestyle .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: #5b83f3 !important;
    border-radius: 17px !important;
    border-width: 2px !important;
}

.logpagestyle .mud-icon-root.mud-svg-icon {
    fill: #655c78 !important;
}

.logpagestyle .mud-button-filled.mud-button-filled-primary {
    border-radius: 17px !important;
}

.logicbutton .mud-icon-button {
    padding: 12px 0 12px 12px !important;
}
.logicbutton .mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    padding-left: 0 !important;
}

.logpagestyle .mud-input > input.mud-input-root-outlined.mud-input-root:-webkit-autofill, div.mud-input-slot.mud-input-root-outlined.mud-input-root:-webkit-autofill {
    border-radius: 0 17px 17px 0 !important;
    padding: 0.571rem 0.2rem !important;
}

.emptylayout {
    position: absolute;
    left: 0;
    top: 0;
    /*position: fixed;*/
    height: 100%;
    width: 100%;
    /*background-color: #ededed !important;
    background-size: cover;*/
    /*display:block;*/
}

.mud-tabs-panels .card-body {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

  .branchCard .card-body {
    padding-right: 0.35rem !important;
    padding-left: 0.35rem !important;
}

/*.login-card-body .card-body {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.7rem !important;
    margin: 10px !important;
    border: 1px solid #e5c2c2 !important;
}*/



.footer {
    /*background: #fff8f8 !important;
    position: fixed !important;
    z-index: 3 !important;
    padding: 0 !important;*/
    /*display:none;*/
    /*bottom: 0 !important;
    left: 0 !important;
    width: calc(100% - var(--mud-drawer-width-left)) !important;
    margin-left: var(--mud-drawer-width-left) !important;*/
}