:root {
    --main-blue: #2D24FB;
    --dark-blue: #030338;
    --light-blue: #A4F0FD;
    --mate-light-blue: #615AF1;
}

.u-bg-color-main-blue {
    background-color: var(--main-blue);
}

.u-bg-color-light-blue {
    background-color: var(--light-blue);
}

.u-bg-color-dark-blue {
    background-color: var(--dark-blue);
}

.u-gb-color-mate-light-blue {
    background-color: var(--mate-light-blue);
}

.u-bg-color-white {
    background-color: white;
}

.u-color-main-blue {
    color: var(--main-blue);
}

.u-color-light-blue {
    color: var(--light-blue);
}

.u-color-dark-blue {
    color: var(--dark-blue);
}

.u-color-white {
    color: white;
}

.u-height-25rem {
   height: 25rem;
}

.u-padding-top-10rem {
    padding-top: 10rem;
}

.u-padding-top-12rem {
    padding-top: 12rem;
}

.u-tooltip {
    position: relative;
    cursor: pointer;
}

.u-tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    background-color: lightgrey;
    color: black;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    white-space: nowrap;
    z-index: 1;
    bottom: 100%;
    left: 150%;
    transform: translateX(-50%);
}

.u-tooltip:hover::before {
    opacity: 1;
}


.u-diagonal-lines {
    background: repeating-linear-gradient(
            -45deg,         /* Angle of the lines (changed to -45 degrees) */
            rgba(204, 204, 204, 0.2), /* Color with transparency (gray with 50% opacity) */
            rgba(204, 204, 204, 0.2) 1px, /* Width of each line with transparency */
            transparent 0, transparent 5px /* Adjust as needed for spacing between lines */
    );
}


@media screen and (min-width: 577px) {
    .u-size-percentage-30-40-60-90 {
        max-width: 30%;
    }
}

@media screen and (min-width: 881px) and (max-width: 1220px) {
    .u-size-percentage-30-40-60-90 {
        max-width: 40%;
    }
}

@media screen and (min-width: 577px) and (max-width: 880px) {
    .u-size-percentage-30-40-60-90 {
        max-width: 60%;
    }
}

@media screen and (max-width: 576px) {
    .u-size-percentage-30-40-60-90 {
        max-width: 90%;
    }
}