/*--- 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;
}

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

/*--- All outline buttons have white background (default state) ---*/
[class*="btn-outline"] {
    background-color: white !important;
}
/*--- On hover, show Bootstrap's colors ---*/
.btn-outline-primary:hover,
.btn-outline-primary.active {
    background-color: #0d6efd !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary.active {
    background-color: #6c757d !important;
}
.btn-outline-success:hover,
.btn-outline-success.active  {
    background-color: #198754 !important;
}
.btn-outline-danger:hover,
.btn-outline-danger.active  {
    background-color: #dc3545 !important;
}
.btn-outline-warning:hover,
.btn-outline-warning.active  {
    background-color: #ffc107 !important;
}
.btn-outline-info:hover,
.btn-outline-info.active  {
    background-color: #0dcaf0 !important;
}
.btn-outline-light:hover,
.btn-outline-light.active  {
    background-color: #f8f9fa !important;
}
.btn-outline-dark:hover,
.btn-outline-dark.active {
    background-color: #212529 !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;
}

/*--- 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;
}


/*--- 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;
}