/* General CSS */

/* Greybar */
#grey-bar {
    background-color: #DCDCDC;
    width: 100%;
    height: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 5px;
}

/* Searchbar */
#searchbar, .searchbar {
    min-width: 330px;
    padding: 10px 0px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

@media (max-width: 575.98px) {
    #searchbar, .searchbar {
        width: 100%;
    }
}

/* Add Button */
#add-button {
    text-align: center;
    color: black;
    float: right;
    background-color: #D3D3D3;
    width: 110px;
    padding: 10px 0px 10px 0px;
    border: 0px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

#add-button:hover {
    background-color: #000000;
    color: #FFFFFF;
}

/* Back Button */
#back-button {
    text-align: center;
    float: right;
    background-color: #D3D3D3;
    margin-top: 10px;
    width: 90px;
    padding: 10px 0px 10px 0px;
    border: 0px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

#back-button:hover {
    background-color: #000000;
    color: #FFFFFF;
}

/* Custom colors for pill badges*/
.bg-secondary {
    background-color: #e2e3e5 !important;
    color: #212529 !important;
}
.bg-LSF, .bg-dLSF, .bg-sLSF {
    background-color: #cfe2ff;
    color: #031633;
}
.bg-SSF {
    background-color: #f8d7da; 
    color: #2c0b0e;
}
.bg-FB {
    background-color: #d1e7dd; 
    color: #051b11;
}