/*--- ADDITIONAL CUSTOM CSS STYLING ---*/

/*--- TABLES ---*/
/*--- let table be longer than screen with lower scroll abr ---*/
.responsiveTable {
    overflow-x: auto;
}
/*--- apply styling to all ids=jqTables ---*/
[id*="jqTable"] th {
    border: white solid 0.75px;
    color: white;
}

/*--- custom extra SMALL BUTTONS ---*/
.btn-xs {
    padding: 0.1rem 0.35rem;
    font-size: 0.9rem;
}

/*--- custom BACKGROUND colors ---*/
#cbg-pink {
    background-color:#d63384 !important;
    color: white;
}
#cbg-orange {
    background-color:#fd7e14 !important;
    color: white;
}
#cbg-indigo {
    background-color:#6610f2 !important;
    color: white;
}
#cbg-mint {
    background-color:#20c997 !important;
    color: white;
}
#cbg-blood {
    background-color:#8b0000 !important;
    color: white;
}
#cbg-teal {
    background-color:#008080 !important;
}

/*--- custom BORDER colors ---*/
#cborder-orange {
    border-color:#fd7e14 !important;
}
#cborder-pink {
    border-color:#d63384 !important;
}
#cborder-indigo {
    border-color:#6610f2 !important;
}
#cborder-mint {
    border-color:#20c997 !important;
}
#cborder-blood {
    border-color:#8b0000 !important;
}
#cborder-teal {
    border-color:#008080 !important;
}

/*--- custom buttons colors ---*/
#cbtn-orange {
    border-color:#fd7e14 !important;
    background-color: white;
}
#cbtn-orange:hover {
    background-color: #fd7e14;
    color:white;
}
#cbtn-pink {
    border-color:#d63384 !important;
    background-color: white;
}
#cbtn-pink:hover {
    background-color: #d63384;
    color:white;
}
#cbtn-indigo {
    border-color:#6610f2 !important;
    background-color: white;
}
#cbtn-indigo:hover {
    background-color: #6610f2;
    color:white;
}
#cbtn-mint {
    border-color:#20c997 !important;
    background-color: white;
}
#cbtn-mint:hover {
    background-color: #20c997;
    color:white;
}
#cbtn-blood {
    border-color:#8b0000 !important;
    background-color: white;
}
#cbtn-blood:hover,
#cbtn-blood.active {
    background-color: #8b0000 !important;
    color:white !important;
    /* box-shadow: 2px 2px 0 gray; */
}
#cbtn-teal {
    border-color:#008080 !important;
    background-color: white;
}
#cbtn-teal:hover,
#cbtn-teal.active {
    background-color: #008080 !important;
    color:white !important;
}

/*--- Class required field ---*/
.required:after { content:"*"; color: red; }


/*--- DataTables custom styling ---*/
/* Only apply to DataTables with class="display" */
table.display th, table.display td {
    padding: 0.25rem !important;
    font-size: 0.9rem !important;
}

/* DataTable buttons */
.dt-buttons .btn,
.dt-buttons button,
.dt-buttons .dt-button {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.8rem !important;
    border-radius: 0.25rem !important;
}

/* DataTables pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.2rem 0.8rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.25rem !important;
}

/* DataTable search input */
.dataTables_filter input[type="search"] {
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
    height: 1.6rem !important;
}

/* Reduce font size for DataTables "Show X entries" and "Showing X to Y of Z entries" */
.dataTables_length,
.dataTables_info {
    font-size: 0.85rem !important;
}