::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: var(--bs-gray-900);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: var(--bs-gray-800);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-gray-700);
}


/* 
-----------------------------------------------------------------
-----------------------------------------------------------------
users */

.users-userImg{
    width: 100px;
}

.users-userImg-change{
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid #ffffff;
    bottom: 5px;
    right: -5px;
    color: var(--bs-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: var(--bs-gray-900);
    transition: 300ms;
}

.users-userImg-change:hover{
    background-color: var(--bs-gray-700);
    cursor: pointer;
}


.blue-form input{
    color: var(--bs-primary);
}

.datepicker .datepicker-days td:before {
    top: 0 !important;
    bottom: 0;
}

/* 
-----------------------------------------------------------------
-----------------------------------------------------------------
help */

.category-head{
    text-decoration: none;
    color: var(--bs-gray-500);
}

.category-head:hover{
    color: var(--bs-gray-500);
}

.cube-element {
    position: relative;
    display: inline-block;
}

.category-parent{
    transition: 300ms;
    border: 2px solid transparent;
}

.category-parent:hover .card-title{
    transition: 300ms;
}

.category-parent:hover{
    cursor: pointer;
    border: 2px solid rgba(var(--bs-primary-rgb), 0.3);
}

.category-parent:hover .card-title {
    color: rgba(var(--bs-primary-rgb), 1);
}

.sub-category-link{
    transition: 300ms;
    color: var(--bs-primary);
}
.sub-category-link:hover{
    color: white;
    background-color: var(--bs-primary);
}

.breadcrumb-item a{
    color: var(--bs-gray-500);
    text-decoration: none;
}

.breadcrumb-item a:hover{
    opacity: 0.7;
}

.breadcrumb-item.active a{
    color: var(--bs-breadcrumb-item-active-color);
}

.custom_breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: '\f0142'; /* Unicode van mdi-chevron-right */
    font-family: 'Material Design Icons'; /* Zorg dat je de juiste font-family gebruikt */
    margin-right: 0.5rem;
}