.bg-theme {
    background-color: #c2d234 !important;
}

.text-theme {
    color: #c2d234 !important;
}

#sidebar>.nav-item>.nav-treeview>.nav-item>.nav-link {
    color: #c2d234;
}

#sidebar>.nav-item>.nav-treeview>.nav-item>.nav-link.active {
    color: black;
}

/* Style for the tooltip */
[data-title] {
    position: relative;
    cursor: help;
}

[data-title]::after {
    content: attr(data-title);
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    white-space: wrap;
}

/* Show the tooltip on hover */
[data-title]:hover::after {
    display: block;
    word-wrap: break-word;
    overflow: hidden;
    position: relative;
}

.text-avatar {
    display: flex;
    height: 35px;
    width: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Default */
.max-w-25 {
    max-width: 25%;
}

.max-w-35 {
    max-width: 35%;
}

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

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

.max-w-75 {
    max-width: 75%;
}

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

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

/* Responsive */
@media (min-width: 576px) {
    .max-w-sm-25 {
        max-width: 25%;
    }

    .max-w-sm-35 {
        max-width: 35%;
    }

    .max-w-sm-50 {
        max-width: 50%;
    }

    .max-w-sm-60 {
        max-width: 60%;
    }

    .max-w-sm-75 {
        max-width: 75%;
    }

    .max-w-sm-90 {
        max-width: 90%;
    }

    .max-w-sm-100 {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .max-w-md-25 {
        max-width: 25%;
    }

    .max-w-md-35 {
        max-width: 35%;
    }

    .max-w-md-50 {
        max-width: 50%;
    }

    .max-w-md-60 {
        max-width: 60%;
    }

    .max-w-md-75 {
        max-width: 75%;
    }

    .max-w-md-90 {
        max-width: 90%;
    }

    .max-w-md-100 {
        max-width: 100%;
    }
}

@media (min-width:1200px) {
    .modal-xxl {
        max-width: 95dvw !important
    }
}

label.required::after {
    content: " *";
    color: red;
}

.gap-3 {
    gap: 1rem;
}
