/*
colors
gray: #3b3b3b
light gray: #636363
darker red: #b5151a
dark red: #b11116
light red: #ed4e52




 */

hr::after {
    color: #b11116 !important;
    font-weight: bold !important;
}

span, p {
    color: #000;
}

/* Style the radio button indicator */
.custom-control-input[type="radio"]:checked ~ .custom-control-label::before {
    background-color: #5d5d5d !important;
    border-color: #5d5d5d !important;
}

/**--bpi home page logo--**/
.home-page-logo {
    position: absolute;
    top: 40%;
    left: 30%;
    width: 20vw;
}

.referral-logo {
    width: 12vw;
}
/**--universal btn modifications--**/
.btn {
    background: linear-gradient(to right, #b5151a, #d13236, #ed4e52);
    border: none;
    color: white;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/**--for divs that are treated as buttons--**/
div.btn > span, div.btn > input {
    color: #FFF;
}
div.btn > span:hover, div.btn > input {
    color: #FFF;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.btn:hover::before {
    opacity: 1;
    color: white !important;
    background: #b5151a;
}

.btn:disabled {
    background: #999999;
    color: #cccccc;
    cursor: not-allowed;
    pointer-events: none;
}
.btn:disabled::before {
    background: #666666;
}

.btn:focus,
.btn:active,
.btn:focus-visible
{
    outline: 0;
    box-shadow: 0 0 0 0;
}

/**--button groups; modifying the 1st and subsequent elements--**/
/** first page button **/
.btn-group .btn:first-child:not(.d-none) {
    background: linear-gradient(90deg, #b11116 0%, #ee4f53 100%) !important;
    color: white;
}

.btn-group button:first-child:hover::before,
.btn-group > .btn.d-none + .btn:hover::before {
    background: #b5151a !important;
    color: white !important;
}

/** subsequent page buttons
- translation: selects all SUBSEQUENT .btn that is the sibling of a .btn that is not .d-none
**/
.btn-group > .btn:not(.d-none) ~ .btn {
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}
.btn-group > .btn:not(.d-none) ~ .btn:hover::before {
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}

/**--button groups; for modal-footers --**/

.modal-footer .btn:first-child:not(.d-none) {
    background: linear-gradient(90deg, #b11116 0%, #ee4f53 100%) !important;
    color: #FFF;
}
.modal-footer .btn:first-child:hover::before {
    background: #b5151a !important;
    color: #FFF !important;
}

.modal-footer > .btn:not(.d-none) ~ .btn {
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}
.modal-footer > .btn:not(.d-none) ~ .btn:hover::before {
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}


/**--page-buttons--**/

.page-buttons > .btn:first-child:not(.d-none),
.page-buttons > .btn-group:first-child > .btn:not(.d-none) {
    background: linear-gradient(90deg, #b11116 0%, #ee4f53 100%) !important;
    color: #FFF;
}
.page-buttons > .btn:first-child:hover::before,
.page-buttons > .btn-group:first-child > .btn:not(.d-none):hover::before
{
    background: #b5151a !important;
    color: #FFF !important;
}

.page-buttons > .btn:not(.d-none) ~ .btn ,
.page-buttons > a:not(.d-none) > .btn,
.page-buttons > .btn:not(.d-none) ~ .btn-group > .btn
{
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}
.page-buttons > .btn:not(.d-none) ~ .btn:hover::before,
.page-buttons > a:not(.d-none) > .btn:hover::before,
.page-buttons > a:not(.d-none) > .btn:hover,
.page-buttons > .btn:not(.d-none) ~ .btn-group > .btn:hover,
.page-buttons > .btn:not(.d-none) ~ .btn-group > .btn:hover::before
{
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}

/**-- Some items in nav bar--**/
#navbar-authname:hover {
    color: #FFF !important;
}
.nav-item > .account-name, .nav-item > .account-name i, .nav-item > .account-name span {
    color: #FFF;
}
.nav-item > .account-name:hover, .nav-item > .account-name i:hover, .nav-item > .account-name span:hover {
    color: #FFF !important;
}

/**--accordion btn headers--**/
.accordion-header {
    color: #3b3b3b !important;
    background: transparent !important;
}
.accordion-header:hover::before {
    color: #636363 !important;
    background: transparent !important;
}
.accordion-header:hover {
    color: #636363 !important;
}

/**--accordion btn headers (other pages)--**/
.card-header.title .btn.btn-link,
.card-body > .btn {
    color: #3b3b3b !important;
    background: transparent !important;
}
.card-header.title .btn.btn-link:hover::before,
.card-body > .btn:hover::before {
    color: #636363 !important;
    background: transparent !important;
}
.card-header.title .btn.btn-link:hover,
.card-body > .btn:hover {
    color: #636363 !important;
}

/**--nav items are the nav menu items or tabs (folder style)--**/
.sidebar .nav-item a {
    color: #3b3b3b !important;
    background: #FFF !important;
}
.sidebar .nav-item a:hover {
    color: #636363 !important;
}
.sidebar .nav-item a.active {
    color: #3b3b3b !important;
    background: #FFF !important;
    font-weight: bold;
}

.nav-tabs .nav-item a,
.nav-pills a.nav-link
{
    color: #3b3b3b !important;
    background: #FFF !important;
}
.nav-tabs .nav-item a:hover,
.nav-pills  a.nav-link:hover
{
    color: #636363 !important;
}
.nav-tabs .nav-item a.active,
.nav-pills a.nav-link.active {
    color: #3b3b3b !important;
    background: #FFF !important;
    font-weight: bold;
}
/**--links in the page--**/
.custom-read-only-details.custom-field-default-link,
.custom-read-only-details.custom-field-default-link-white {
    color: #3b3b3b !important;
    font-weight: bolder;
}

.custom-read-only-details.custom-field-default-link:hover,
.custom-read-only-details.custom-field-default-link-white:hover {
    color: #636363 !important;
    font-weight: bolder;

}

/**--home page left panel--**/
.img-holder {
    background-color: #FFF !important;
    color: #000 !important;
    width: 50vw;
}

/**--universal table headers--**/
.table th {
    background-color: #b11116;
    color: #FFF;
}

/**--for BI table--**/
.table-success:hover,
.table-hover .table-success:hover,
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
    background-color: #b11116;
}

.bi-table th {
    background: #FFF !important;
    color: #000 !important;
}

/**--table pagination css--**/
/** not active button **/
.pagination .paginate_button:not(.active) .page-link {
    background-color: #FFF !important;
    color: #b11116 !important;
    border: 1px solid #b11116 !important;
}
/** active page button **/
.pagination .page-item.active .page-link {
    background-color: #b11116;
    color: #FFF;
    border-color: #b11116;
}

/**--universal radio button and checkbox button--**/
input[type="radio"], input[type="checkbox"] {
    accent-color: #b11116;
}

/**--style cards are horizontal divisions for some panels--**/
.style-cards::after {
    color: #b11116 !important;
}

option:hover {
    background-color: #FCEEC5 !important;
}

option:hover::after {
    background-color: #FCEEC5 !important;
}

/**--table buttons (icons only)--**/
td i.fas {
    color: #3b3b3b !important;
}

td i.fas:hover {
    color: #636363 !important;
    background-color: transparent !important;
}

/**--table buttons (buttons only)--**/
td > div .btn {
    color: #3b3b3b !important;
    background: transparent !important;
}

td > div .btn:hover {
    color: #636363 !important;
    background: transparent !important;
}


td > div .btn:hover::before {
    color: #636363 !important;
    background: transparent !important;
}


/**--form headers--**/
h5.label {
    color: #b11116;
}
/**--form labels--**/
label {
    color: #3b3b3b;
}

.badge-info {
    color: #000;
    background-color: transparent;
}

/**--bread crumb links--**/
.breadcrumb-item > a {
    color: #3b3b3b;
}

.breadcrumb-item > a:hover {
    color: #3b3b3b;
}

/**--input or forms--**/
.form-content input:hover,
.form-content input:focus,
.form-content .dropdown-toggle.btn-default:hover,
.form-content .dropdown-toggle.btn-default:focus,
.form-control:focus
{
    border-color: #3d5159;
}

/**--loading bar--**/

/*1. Loading bar - Grey (HEX: #3d5159) text color, no background color
2. Success Message - Solid Red (HEX: #b11116) background color, white (HEX: #FFF) text color
3. Error Message - (HEX: #36454f) background color, white (HEX: #FFF) text color
*/
.alert-msg {
    background-color: transparent !important;
}

.alert-info {
    background-color: transparent !important;
    border-color: #3d5159 !important;
    color: #3d5159 !important;
}

.alert-success, .alert-success p {
    background-color: #b11116 !important;
    border-color: transparent;
    color: #FFF
}

.alert-error, .alert-error p {
    background-color: #36454f !important;
    border-color: transparent !important;
    color: #FFF
}

.alert-warning, .alert-warning p {
    background-color: #36454f !important;
    border-color: transparent !important;
    color: #FFF
}

.alert-danger {
    background-color: #36454f !important;
    border-color: transparent !important;
    color: #FFF
}

.card-img-top {
    border-color: #b11116;
}

.card-primary.card-outline {
    border-top: 3px solid #b11116 !important;
}

/** form buttons **/
/** first form button **/
.input-group > .btn:not(.d-none):first-of-type,
.input-group-append > .btn:not(.d-none):first-of-type,
.custom-field-group > .btn:not(.d-none):first-of-type,
.file-path-wrapper > .btn:not(.d-none):first-of-type,

.input-group > .btn.d-none + .btn,
.input-group-append > .btn.d-none + .btn,
.custom-field-group > .btn.d-none + .btn
{
    color: #FFF!important;
    background: #6c757d!important;
}

.input-group > .btn:first-of-type:hover::before,
.input-group-append> .btn:first-of-type:hover::before,
.custom-field-group > .btn:first-of-type:hover::before,
.file-path-wrapper > .btn:first-of-type:hover::before,

.input-group > .btn.d-none + .btn:hover::before,
.input-group-append > .btn.d-none + .btn:hover::before,
.custom-field-group > .btn.d-none + .btn:hover::before,
.file-path-wrapper > .btn.d-none + .btn:hover::before {
    color: #FFF!important;
    background: #6c757d!important;
}

/** subsequent form button **/
.input-group > .btn:not(:first-of-type),
.input-group-append > .btn:not(:first-of-type),
.custom-field-group > .btn:not(:first-of-type),
.file-path-wrapper > .btn:not(:first-of-type) {
    color: #6c757d !important;
    background: #FFF !important;
    border: 1px solid #6c757d !important;
}
.input-group > .btn:not(:first-of-type):hover::before,
.input-group-append > .btn:not(:first-of-type):hover::before,
.custom-field-group > .btn:not(:first-of-type):hover::before,
.file-path-wrapper > .btn:not(:first-of-type):hover::before {
    color: #6c757d !important;
    background: #FFF !important;
    border: 1px solid #6c757d !important;
}

input[type="file"] {
    border-bottom: 1px solid #ced4da;
}


/*

// THESE ARE THE GENERAL CSS STYLES FOR FORM BUTTONS AND PAGE BUTTONS

.page-first-btn {
    background: linear-gradient(90deg, #b11116 0%, #ee4f53 100%) !important;
    color: white;
}
.page-first-btn:hover::before {
    background: #b5151a !important;
    color: white !important;
}
.page-n-btn {
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}
.page-n-btn:hover::before {
    background: #FFF!important;
    color: #b11116;
    border: 1px solid #b11116;
}


.form-first-btn {
    color: #FFF!important;
    background: #6c757d!important;
}
.form-first-btn:hover::before {
    color: #FFF!important;
    background: #6c757d!important;
}

.form-n-btn {
    color: #6c757d !important;
    background: #FFF !important;
    border: 1px solid #6c757d !important;
}
.form-n-btn:hover::before {
    color: #6c757d !important;
    background: #FFF !important;
    border: 1px solid #6c757d !important;
}*/