body, html {
        position: absolute !important;
        width: fit-content !important;
        height: 100% !important;
        background-repeat: no-repeat !important;
        background-position: center;
        background-size: cover !important;
       background-image: url("https://img.freepik.com/free-vector/white-gray-geometric-pattern-background-vector_53876-136510.jpg?t=st=1649347836~exp=1649348436~hmac=58ccfc3909521abb6fc73f96322b10162a4be94c206b6866925e99c1ad66ba98&w=1380") !important;
    background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;

    }
    .shilpi-card{
    z-index: -1;
        border-right: 2px solid #f1f1f1;
        box-shadow: 2px 0 8px rgb(0 0 0 / 0%)!important
    }
    .modal-content{
        border-radius: 24px;
    }
    .card{
        background-color: rgb(255, 255, 255);
    }
    .bg-blue {
        background-color: rgb(1, 118, 255) !important;
        border-radius: 16px 16px 0px 0px;
      }
      .btn-success {
        border: 3px solid;
        font-weight: 500;
        background: linear-gradient(#fcfdff 0,#eaeef5 100%) no-repeat padding-box;
        color: #263035;
        border: 1px solid #d0d4df;
    }
    .btn-success:focus{
        border: 3px solid;
        font-weight: 500;
        background: linear-gradient(#fcfdff 0,#dee5f1 100%) no-repeat padding-box;
        color: #263035 !important;
        border: 1px solid #d0d4df;
    }
    .btn-success:hover, .btn-danger:hover{
        border: 3px solid;
        font-weight: 500;
        background: linear-gradient(#fcfdff 0,#dee5f1 100%) no-repeat padding-box;
        color: #263035;
        border: 1px solid #d0d4df;
        /* border-color: #4a81d4; */
    }
    .btn-danger:disabled{
        border: 3px solid;
        font-weight: 500;
        background: linear-gradient(#fcfdff 0,#dee5f1 100%) no-repeat padding-box;
        color: #263035;
        border: 1px solid #d0d4df;

    }
.btn-success:disabled{
    border: 3px solid;
        font-weight: 500;
        background: linear-gradient(#fcfdff 0,#dee5f1 100%) no-repeat padding-box;
        color: #263035;
        border: 1px solid #d0d4df;
}
      
    button#check_code {
        margin-top: 10px;
    }
    .login-header {
        color: #0176ff !important;
        font-weight: 800;
    }
    .btn-primary {
        color: #fff;
        background-color: #ffc84b;
        border-color: #fcbe32;
        box-shadow: 0 0 0 #f8dba9;
        FONT-WEIGHT: 700;
    }
    .btn-primary:hover{
        color: #fff;
        background-color: #ffc84b;
        border-color: #FDD319;
        box-shadow: 0 0 0 #f8dba9;
        FONT-WEIGHT: 700;
    }
    .btn-primary:focus {
        color: #fff;
        background-color: #ffc84b;
        border-color: #FDD319;
        box-shadow: 0 0 0 #f8dba9;
        FONT-WEIGHT: 700;
    }
    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
        color: #fff;
        background-color: #ffc84b;
        border-color: #FDD319;  
        box-shadow: 0 0 0 #f8dba9;
    }
    .mt-5, .my-5 {
        margin-top: 10.5rem!important;
    }
.footer-alt{
        position: unset;
            left: 0;
            bottom: 0;
            width: 100%;
}

         .footer .text-right{
             text-align: center !important;
         }
         .text-white-50{
             color: rgb(1, 118, 255) !important;
         }
         .container{
            box-shadow: 0px 0px #ccc6 !important
         }

         .jq-icon-success{
            color: #fff;
            background-color: #4eb940db !important;
            border-color: #d6e9c6;
            font-weight: bold;
            border-radius: 9px;
        }
        
        .jq-icon-success .jq-toast-heading{
            font-size: 17px;
            font-weight: 600;
        }

        .jq-icon-error .jq-toast-heading{
            font-size: 17px;
            font-weight: 600;
        }

        .jq-toast-single{
            color: #fff;
            background-color: #4eb940db;
            border-color: #d6e9c6;
            font-weight: bold;
            border-radius: 9px;
        }

        .jq-toast-single .jq-toast-heading{
            font-size: 17px;
            font-weight: 600;
        }
        
        .jq-toast-single.jq-icon-error{
            color: #fff;
            background-color: #fd2b27ad !important;
            border-color: #d6e9c6;
            font-weight: bold;
            border-radius: 9px;
        }

    /* Media Query */
    @media (max-device-width: 480px) {
        .mt-5, .my-5 {
        margin-top: 2.5rem!important;
    }
        }

 /* Login page changes by Laszlo */

    .shilpi-card .card-body .text-center.w-80.m-auto{
        position: absolute;
        width: 100%;
        height: fit-content;
        height: -moz-fit-content;
        justify-content: flex-end;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        /* bottom: 14px; */
        left: 38px;
        /* padding-left: 40px; */
        top: 24px;
        text-align: left !important;
    }

    .shilpi-card .image-login img{
        /* display: none; */
        height: auto;
        transform: scale(1.5);
    }

    .shilpi-card .image-login{
        width: 100%;
    }

    .shilpi-card .card-body{
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
    }

    

    .shilpi-card h3.login-header{
        font-weight: 400 !important;
        font-size: 25px;
        margin: 0 !important;
        text-transform: uppercase;
        margin-bottom: 0px !important;
        color: #529ef7 !important;
        z-index: 99;
    }

    .shilpi-card p.login-header{
        font-weight: 400;
        font-size: 21px;
        margin: 0 !important;
        text-transform: uppercase;
        color: #529ef7 !important;
        z-index: 99;
    }

    .shilpi-card {
        background: url(https://i.pinimg.com/originals/77/75/5e/77755e565ef7ddbff2546231cd8732bf.png) center center no-repeat;
        background-size: 150%;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        border: 0;
        width: 44%;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        -webkit-box-shadow: -18px 0px 14px 8px rgb(0 0 0 / 4%);
        box-shadow: -18px 0px 14px 8px rgb(0 0 0 / 4%) !important;
    }

    .account-pages .container .card-body {
        padding: 5.5rem 2.5rem !important;
    }

    .shilpi-card .card-body{
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        overflow: hidden;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .col-md-8 .text-center.w-75.m-auto p{
        display: none;
    }

    .col-md-8 .text-center.w-75.m-auto h2{
        color: #529ef7 !important;
        font-size: 38px;
        font-weight: 400;
        margin-bottom: 42px;
        font-weight: 600;
    }

    label{
        color: #555;
        font-size: 16px;
        font-weight: 700;
    }

    .col-md-8 > .card{
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .card .btn-primary{
        background: #529ef7 !important;
        border: unset !important;
        font-size: 18px !important;
    }

    #sign_in_with_otp{
        color: #555 !important;
        font-size: 17px;
    }

    #forgot_password_button{
        color: #555 !important;
        font-size: 16px;
    }

    .modal-header{
        background: #fff !important;
        box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .modal-header h4{
        color: #333 !important;
        font-size: 26px;
        font-weight: 400;
    }

    .close{
        font-size: 30px;
        color: #333 !important;
        opacity: 1;
        margin-top: 4px !important;
    }

    .card{
        -webkit-box-shadow: 5px 0px 14px 8px rgb(0 0 0 / 4%);
        box-shadow: 5px 0px 14px 8px rgb(0 0 0 / 4%);
    }

    .modal .btn-success{
        background: #529ef7 !important;
        color: #fff !important;
        border: unset !important;
        font-size: 17px !important;
        padding: 0.28rem 2rem !important;
    }

    #save_password::before {
        content: "";
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle icon-16"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>') center center no-repeat;
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        background-size: 18px;
        top: 9px;
        left: 9px;
    }

    body{
        background: linear-gradient(0deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 70%)), url(https://img.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg?w=1380&t=st=1666543304~exp=1666543904~hmac=d44dc5a…) center center no-repeat !important;
        background-size: cover !important;
    }

    html{
        background: unset !important;
    }

    .account-pages{
        margin-bottom: 0 !important;
    }
    

    @media (min-width: 992px){
        .container, .container-lg, .container-md, .container-sm {
            max-width: 1300px;
        }

        .container .col-lg-6 {
            flex: 0 0 40%;
            max-width: 40%;
        }
    }

    @media(max-width: 991px){
        .shilpi-card{
            display: none;
        }

        .col-md-8 > .card{
            border-radius: 15px !important;
        }
    }

    @media(max-width: 575px){
        .modal-body .form-group .col-sm-6:nth-child(5),
        .modal-body .form-group .col-sm-6:nth-child(2){
            max-width: 70%;
        }

        .modal-body .form-group .col-sm-3:nth-child(3),
        .modal-body .form-group .col-sm-3:nth-child(6){
            max-width: 30%;
        }

        .modal-body label{
            max-width: 100% !important;
            width: 100% !important;
        }

        .modal-body .col-sm-3:last-child{
            width: 100%;
            max-width: 100%;
            margin-top: 24px;
        }

        button#check_code{
            margin-top: 0 !important;
        }
    }

    @media(max-width: 517px){
        .account-pages{
            margin-top: 7rem!important;
        }

        .col-md-8 .text-center.w-75.m-auto h2 img{
            display: none;
        }

        .col-md-8 .text-center.w-75.m-auto h2::after{
            content: "Login";
        }

        html{
            background: linear-gradient(0deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 70%)), url(https://img.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg?w=1380&t=st=1666543304~exp=1666543904~hmac=d44dc5a…) center center no-repeat !important;
        background-size: cover !important;
        }
    }



 /* End of Login page changes by Laszlo */