.cursor-pointer {
    cursor: pointer;
}

.skeleton {
    background-image: linear-gradient(
            120deg,
            #ececec 50%,
            #fafafa 60%,
            #fafafa 61%,
            #ececec 70%
    );
    background-size: 200%;
    background-position: 100% 0;
    animation: waves 2s linear infinite;
}

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

.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* width */
.mw-10 {
    max-width: 10%;
}

.mw-20 {
    max-width: 20%;
}

.mw-30 {
    max-width: 30%;
}

.mw-40 {
    max-width: 40%;
}

.mw-50 {
    max-width: 50%;
}

.mw-60 {
    max-width: 60%;
}

.mw-70 {
    max-width: 70%;
}

.mw-80 {
    max-width: 80%;
}

.mw-90 {
    max-width: 90%;
}

.mw-100 {
    max-width: 100%;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-20px {
    width: 20px;
}

.w-40px {
    width: 40px;
}

.w-50px {
    width: 50px;
}

.w-70px {
    width: 70px;
}

.w-80px {
    width: 80px;
}

.w-90px {
    width: 90px;
}

.w-100px {
    width: 100px;
}

/* height */
.h-20px {
    height: 20px;
}

.h-40px {
    height: 40px;
}

.h-50px {
    height: 50px;
}

.h-70px {
    height: 70px;
}

.h-80px {
    height: 80px;
}

.h-90px {
    height: 90px;
}

.h-100px {
    height: 100px;
}

/* font size */
.fz-12px {
    font-size: 12px;
}

.fz-13px {
    font-size: 13px;
}

.fz-14px {
    font-size: 14px;
}

.fz-15px {
    font-size: 15px;
}

.fz-20px {
    font-size: 20px;
}

.fz-22px {
    font-size: 22px;
}

/* responsive font size text */
.responsive-xxs-text {
    font-size: clamp(12px, 2vw, 14px);
}

.responsive-xs-text {
    font-size: clamp(13px, 2.5vw, 15px);
}

.responsive-sm-text {
    font-size: clamp(14px, 3vw, 16px);
}

.responsive-md-text {
    font-size: clamp(16px, 3.5vw, 18px);
}

.responsive-lg-text {
    font-size: clamp(18px, 4vw, 20px);
}

.responsive-xl-text {
    font-size: clamp(20px, 4.5vw, 24px);
}

.responsive-xxl-text {
    font-size: clamp(24px, 5vw, 28px);
}


/* padding */
.p-10px {
    padding: 10px;
}

.p-20px {
    padding: 20px;
}

.p-30px {
    padding: 30px;
}