.lb1{
    width: 96%;
    margin: clamp(0px, 1vw, 4.14px) auto;
    border-radius: clamp(0px, 1vw, 4.14px);
    box-shadow: 0 0 clamp(0px, 3vw, 12.42px) clamp(0px, 0.2vw, 0.828px) var(--lb1-box-shadow);
}   

.lb1 .inner {
    width: 100%;
    border-radius: clamp(0px, 1vw, 4.14px);
    border: clamp(0px, 0.4vw, 1.656px) solid var(--lb1-box-border);
    box-sizing: border-box;
    padding: clamp(0px, 4vw, 16.56px) clamp(0px, 2vw, 8.28px);
    background-color: var(--lb1-bg-color);
    background-image: var(--lb1-bg-img);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: var(--lb1-inner-position);
    gap: clamp(0px, 2vw, 8.28px);
}

.lb1 .login-register-div{
    display: flex;
    flex-direction: row;
    gap: clamp(0px, 2vw, 8.28px);
    cursor: pointer;
}

.lb1 .login-register-btn{
    width: 100%;
}

.lb1 .login-user-info-div{
    display: none;
    flex-direction: column;
    /* gap: clamp(0px, 2vw, 8.28px); */
}


.lb1 .content-div{
    display: flex;
    flex-direction: var(--lb1-content-position);
    gap: clamp(0px, 2vw, 8.28px);

}

.lb1 .blance-div{
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 0.5vw, 2.07px);
    flex-grow: 1;
    justify-content: center;
}

.lb1 .blance-btn-div{
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 2vw, 8.28px);
    width: 35%;
    justify-content: center;
    cursor: pointer;
}


@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.lb1 .refresh-btn svg{
    width: clamp(0px, 5vw, 20.7px);
    height: clamp(0px, 5vw, 20.7px);
    cursor: pointer;
    margin-left: clamp(0px, 1vw, 4.14px);
}

.lb1 .refresh-btn.rotating svg {
    animation: rotate360 0.5s linear;
}

.credit-layer{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 100;
    background-color: var(--pop-up-bg-layer);
}

.credit-layer-inner{
    width: clamp(0px, 90%, 372.6px);
    /* background-image: var(--pop-up-bg-img); */
    background-color: #262626;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: clamp(0px, 1vw, 10px);
    position: relative;
    padding: clamp(0px, 4vw, 15px);
    box-sizing: border-box;
    border: clamp(0px, 0.25vw, 1px) solid var(--sub-color);
    display: flex;
    flex-direction: column;
    gap: clamp(0px, 4vw, 16.56px);
    justify-content: center;
    align-items: center;
}

.credit-layer-inner hr{
    width: 100%;
    border-color: var(--sub-color);
    margin: 0;
}

.current-amount-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.credit-layer-inner .alert-div{
    text-align: center;
}

.credit-layer-inner .btn-div{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
}

.credit-layer-inner .cancel-btn{
    height: clamp(0px, 10.15vw, 40.6px);
    width: 40%;
    border-radius: clamp(0px, 1vw, 4.14px);
    border: 1px solid #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.credit-layer-inner .clear-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.credit-layer-inner .clear-btn.enabled {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

.credit-layer-inner .clear-btn{
    height: clamp(0px, 10.15vw, 40.6px);
    width: 40%;
    border-radius: clamp(0px, 1vw, 4.14px);
    background-color: var(--sub-color);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}