:root {
    --color-primary: #0072ff;
    --color-gray: #ccc;
    --color-gray1: #6c7076;
    --color-black: #333;
    --color-orange: #f96900;
    --text-primary: #202832;
    --box-shadow: 0rem 0rem 1rem 0rem rgba(223, 223, 223, 0.38);
    --bs-body-color: var(--text-primary) !important;

    --text-gray: #808080;
    --text-black: #333;

    --skeleton-color1: #f0f2f5;
    --skeleton-color2: #e6e8eb;

    --skeleton-background: linear-gradient(
        90deg,
        var(--skeleton-color1) 25%,
        var(--skeleton-color2) 37%,
        var(--skeleton-color1) 63%
    );
    --skeleton-background-size: 400% 100%;
    --skeleton-color: transparent;
    --skeleton-animation: skeleton-loading 1.4s ease infinite;
}

.relative {
    position: relative;
}

.title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
}
.sub-title {
    color: var(--color-gray1);
}
.bg-white {
    background-color: var(--color-gray);
}

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