:root {
    --spaa-royal: #1d70b7;
}

.logo img {
    max-height: 50px;
}

.nav-profile .icon-profile{
    font-size: 40px;
}

.modal-title-icon {
    font-size: 24px;
}

.modal-badge-icon {
    font-size: 18px;
}

.color-tag {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    border-radius: 20px;
    color: #fff;
    background-color: var(--spaa-royal);
    color: #4154f1;
    background-color: #f6f9ff;
    font-weight: 600;
    box-shadow: 0px 1px 3px rgba(1, 41, 112, 0.1);
}

.tag-blue{
    background-color: #d0f0fb;
    color: #118fb8;
}
.tag-teagreen{
    background-color: #98dda4;
    color: #167827;
}
.tag-brown{
    background-color: #f1ccac;
    color: #88521f;
}
.tag-gray{
    background-color: #6e6761;
}

.cursor-pointer {
    cursor: pointer;
}

.sort-index {
    z-index: -1;
    position: absolute;
}

.btn-group {
    background: #fff;
}

#btn-back-to-top {
    z-index: 1000;
    position: fixed;
    bottom: 10px;
    right: 10px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s ease-in 0.4s, opacity 0.4s ease-in;
}

#btn-back-to-top.visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s ease-in 0s, opacity 0.4s ease-in;
}

@media (min-width: 992px) { 
    .search-bar {
        position: absolute;
        top: 1rem;
    }
}

.b-panel {
    display: none;
    position: absolute;
    right: 5px;
    top: 3px;
    padding: 0px 15px;
}
tr:hover td>.b-panel {
    display: block;
}