html,body{
    background: rgb(47 42 72 / 70%);
    background-size: cover;
    width: 100%;
    overflow: hidden;
    /* height: 100%; */
    background-blend-mode: darken;
    background-attachment: fixed;
    overflow: hidden; 
    background-blend-mode: darken;
}
.container {
    background-color: #959191;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.container-login{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 591px;
    text-align: center;
    background:  url('/static/uploads/bg-2.jpg');
    background-size: cover;
    width: 100%;
    background-blend-mode: darken;

}
.card-login{
    border: 1px solid #968383;
    box-shadow: 0 0 0 0px #efefef;
    width: 490px;
    /* margin-top: 60px; */
    position: relative;
    border-radius: 6px;
    color: white;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
    border-radius: 2px;
    height: 508px;



}
/* .card-login::after{
    content: "";
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background: linear-gradient(45deg, #6e0000, #191938, #8f2c2c, #000000, #221414, #7b2b5a, #04041e, #000000, #ff0000);
    position: absolute;
    top: -14px;
    left: -14px;
    background-size: 400%;
    z-index: -1;
    animation: shadow 10s linear infinite alternate;

}
.card-login::after{
    filter:blur(30px)

}
@keyframes shadow{
    0%{
        background-position: 0 0;
        
    }
    50%{
        background-position: 100% 0;
        
    }
    100%{
        background-position: 0 0; 

    }
} */


.loader {
    width: 40px;
    aspect-ratio: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    
}

.loader:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    --c:#0000, #f03355 1deg 120deg,#0000 121deg;
    background:
      conic-gradient(from 0deg,  var(--c)) top right,
      conic-gradient(from 120deg,var(--c)) bottom,
      conic-gradient(from 240deg,var(--c)) top left;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    animation: l25 2s infinite cubic-bezier(0.3,1,0,1);
}

@keyframes l25 {
    33%  {inset:-8px;transform: rotate(0deg)}
    66%  {inset:-8px;transform: rotate(180deg)}
    100% {inset:0   ;transform: rotate(180deg)}
}

.heading-l {
    margin: 16px;
    font-size: 23px;
    /* color: red; */
    font-family: cursive;
    white-space: nowrap;
    justify-content: center;
    display: flex;
    overflow: hidden;
    animation: TextwrapL 1s forwards;
}
@keyframes TextwrapL {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(calc(100% - 100%));
    }
}
.form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
label {
    margin-bottom: 8px;
    display: flex;
}
.u-p{
    padding: 8px;
    margin-bottom: 16px;
    border: none; 
    border-bottom: 1px solid #ccc;
    position: relative;
    border-radius: 4px;
    width: 252px;
    outline: none;
    background: transparent;
    color: white;

}
.us-icons{
    /* width: 17%; */
    object-fit: contain;
    /* mix-blend-mode: color-burn; */
    border-radius: 40px;
   
    transition: all 0.2s ease-in-out;
}
.label-line{
    
    line-height: 0px;
    font-size: 14px;
    /* transition: 0.2s ease; */
    padding: 7px 2px 1px 124px;
    color: red;
    z-index: 1111;
    transition: 0.1s ease-in-out;
    background: transparent
    

}
.u-p:focus,
.u-p:valid{
    
    border: none;
    border-bottom: 3px solid #ccc;
}
.u-p:focus +.label-line,
.u-p:valid +.label-line{
    color: #ccc;
    /* border: 2px solid #66ff00; */
    position: relative;
    background: none;
    height: 30px;
    line-height: 12px;
    padding: 0px 2px 1px 8px;
    line-height: 30px;
    transform:translate(-25px,-26px) scale(0.88);
    z-index: 1111;
}



/* login button */
.btn-log{
    margin: 30px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-login{
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 269px;
}
.button-login:hover {
    background-color: #0056b3;
}

/* button Reset forget pasword */
.box-forgot{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 27px 0px 42px 0px;
}
.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 20px;
    padding: 6px 15px;
    color: #ffffff;
    cursor: pointer;
}

.btn-nav{
    /* background-color: #302e2e; */
    color: rgb(255, 255, 255);
    border: none;
    font-weight: 200;
    background: transparent;
}


/* Alert  Logout */
.logout{
    background-color: #ff4646;
    border: 2px solid #ff4444;
    height: 28px;
    /* color: white; */
    font-size: 18px;
}
.hamburger {
    display: none;
    position: absolute;
    top: 3px;
    right: 1%;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #fff; /* Adjust color */
    margin-right: 24px; 
}

@media (max-width: 930px) {
    html,body {
        margin: 0;
        padding: 0;
        overflow: scroll;
        height: 100%;
    
    }
    .li-box {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 10px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        padding: 10px;
        width: 200px;
    }
    .heading{
        font-size: 24px;

    }
    .para {
        position: flex;
        padding: 0px 43px;
        overflow-wrap: break-word;
    }

    .li-box.show {
    display: flex;
    position: fixed; /* Ensure it overlays other content */
    top: 8%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(47, 42, 72);
    z-index: 9999; /* Ensure it's above other content */
    }
    

    .hamburger {
        
        display: block;
    }
    footer {
        position: relative;
        
    }
    .quick {
        margin: 4px 4px;
    }
    .footer p {
        display: flex;
        align-items: center;
        justify-content: center;
        /* font-size: 9px; */
        /* padding: 1px 2px; */
        /* margin: 9px 2px; */
    }
    .footer{
        width: 100%;
    }
}