/*
 * Copyright (c) 2023.
 * This SOFTWARE PRODUCT is provided by Credit Security Limited "as is"
 * and "with all faults". Credit Security Limited makes no representations or
 * warranties of any kind concerning the safety, suitability, lack of viruses,
 * inaccuracies, typographical errors, or other harmful components of this
 * SOFTWARE PRODUCT. There are inherent dangers in the use of any
 * software, and you are solely responsible for determining whether this
 * SOFTWARE PRODUCT is compatible with your equipment and other
 * software installed on your equipment. You are also solely responsible for
 * the protection of your equipment and backup of your data, and Credit
 * Security Limited will not be liable for any damages you may suffer in
 * connection with using, modifying,or distributing this SOFTWARE
 * PRODUCT.
 */


/*
These are overrides for AdminLte - this will need fixing if adminlte ever changes their CSS.
 */


.direct-messaging-img-csl {
    width: 40px;
    height: 40px;
    border: none;
}

.right .direct-chat-text::after, .right .direct-chat-text::before {
    border-left-color: var(--color-primary-light-4) !important;
}


/* ************************************************************************************************************ */
/* CSL cards */
/* ************************************************************************************************************ */

a.bg-csl:hover, a.bg-csl:focus,
button.bg-csl:hover,
button.bg-csl:focus {
    background-color: var(--color-primary-light) !important;
}

.card-csl:not(.card-outline) > .card-header {
    background-color: var(--color-primary-light);
}

.card-csl:not(.card-outline) > .card-header,
.card-csl:not(.card-outline) > .card-header a {
    color: #fff;
}

.card-csl:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-csl.card-outline {
    border-top: 3px solid var(--color-primary-light);
}

.card-csl.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-csl.card-outline-tabs > .card-header a.active,
.card-csl.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid var(--color-primary-light-4);
}

.bg-csl > .card-header .btn-tool,
.bg-gradient-csl > .card-header .btn-tool,
.card-csl:not(.card-outline) > .card-header .btn-tool {
    color: rgba(255, 255, 255, 0.8);
}

.bg-csl > .card-header .btn-tool:hover,
.bg-gradient-csl > .card-header .btn-tool:hover,
.card-csl:not(.card-outline) > .card-header .btn-tool:hover {
    color: #fff;
}

.card.bg-csl .bootstrap-datetimepicker-widget .table td,
.card.bg-csl .bootstrap-datetimepicker-widget .table th,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget .table td,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget .table th {
    border: none;
}

.card.bg-csl .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-csl .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-csl .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-csl .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-csl .bootstrap-datetimepicker-widget table td.second:hover,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table td.second:hover {
    background-color: var(--color-primary-light);
    color: #fff;
}

.card.bg-csl .bootstrap-datetimepicker-widget table td.today::before,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff;
}

.card.bg-csl .bootstrap-datetimepicker-widget table td.active,
.card.bg-csl .bootstrap-datetimepicker-widget table td.active:hover,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table td.active,
.card.bg-gradient-csl .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--color-primary-light);
    color: #fff;
}

/* ************************************************************************************************************ */
/* FAQ cards */
/* ************************************************************************************************************ */

.bg-faq {
    background-color: var(--csl-faq-bg-color) !important;
}

a.bg-faq:hover, a.bg-faq:focus,
button.bg-faq:hover,
button.bg-faq:focus {
    background-color: var(--csl-faq-bg-color) !important;
}

.card-faq:not(.card-outline) > .card-header {
    background-color: var(--csl-faq-bg-color);
}

.card-faq:not(.card-outline) > .card-header,
.card-faq:not(.card-outline) > .card-header a {
    color: var(--color-primary-dark);
}

.card-faq:not(.card-outline) > .card-header a.active {
    color: #1f2d3d;
}

.card-faq.card-outline {
    border-top: 3px solid var(--csl-faq-bg-color);
}

.card-faq.card-outline-tabs > .card-header a:hover {
    border-top: 3px solid #dee2e6;
}

.card-faq.card-outline-tabs > .card-header a.active,
.card-faq.card-outline-tabs > .card-header a.active:hover {
    border-top: 3px solid var(--csl-faq-bg-color);
}

.bg-faq > .card-header .btn-tool,
.bg-gradient-faq > .card-header .btn-tool,
.card-faq:not(.card-outline) > .card-header .btn-tool {
    color: var(--color-primary-dark);
}

.bg-faq > .card-header .btn-tool:hover,
.bg-gradient-faq > .card-header .btn-tool:hover,
.card-faq:not(.card-outline) > .card-header .btn-tool:hover {
    color: var(--color-primary-dark);
}

.card.bg-faq .bootstrap-datetimepicker-widget .table td,
.card.bg-faq .bootstrap-datetimepicker-widget .table th,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget .table td,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget .table th {
    border: none;
}

.card.bg-faq .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-faq .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-faq .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-faq .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-faq .bootstrap-datetimepicker-widget table td.second:hover,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table td.day:hover,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table td.hour:hover,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table td.minute:hover,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table td.second:hover {
    background-color: var(--csl-faq-bg-color);
    color: var(--csl-first-color);
}

.card.bg-faq .bootstrap-datetimepicker-widget table td.today::before,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: #fff;
}

.card.bg-faq .bootstrap-datetimepicker-widget table td.active,
.card.bg-faq .bootstrap-datetimepicker-widget table td.active:hover,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table td.active,
.card.bg-gradient-faq .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--csl-faq-bg-color);
    color: var(--csl-first-color);
}

/* ************************************************************************************************************ */
/* CSL button colour */
/* ************************************************************************************************************ */

.btn-csl {
    color: #fff;
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    box-shadow: none;
}

.btn-csl:hover {
    color: #fff;
    background-color: var(--csl-btn-hover-bg);
    border-color: var(--csl-btn-hover-bg);
}

.btn-csl:focus, .btn-csl.focus {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.btn-csl.disabled, .btn-csl:disabled {
    color: #fff;
    opacity: 0.5;
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.btn-csl:not(:disabled):not(.disabled):active, .btn-csl:not(:disabled):not(.disabled).active,
.show > .btn-csl.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f;
}

.btn-csl:not(:disabled):not(.disabled):active:focus, .btn-csl:not(:disabled):not(.disabled).active:focus,
.show > .btn-csl.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.dark-mode .btn-csl {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
    box-shadow: none;
}

.dark-mode .btn-csl:hover {
    color: #fff;
    background-color: #2384c6;
    border-color: #217dbb;
}

.dark-mode .btn-csl:focus, .dark-mode .btn-csl.focus {
    color: #fff;
    background-color: #2384c6;
    border-color: #217dbb;
    box-shadow: 0 0 0 0 rgba(82, 167, 224, 0.5);
}

.dark-mode .btn-csl.disabled, .dark-mode .btn-csl:disabled {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
}

.dark-mode .btn-csl:not(:disabled):not(.disabled):active, .dark-mode .btn-csl:not(:disabled):not(.disabled).active,
.show > .dark-mode .btn-csl.dropdown-toggle {
    color: #fff;
    background-color: #217dbb;
    border-color: #1f76b0;
}

.dark-mode .btn-csl:not(:disabled):not(.disabled):active:focus, .dark-mode .btn-csl:not(:disabled):not(.disabled).active:focus,
.show > .dark-mode .btn-csl.dropdown-toggle:focus {
    box-shadow: 0 0 0 0 rgba(82, 167, 224, 0.5);
}

[class*="accent-"] a.btn-csl {
    color: #fff;
}

/*
Alerts
 */
.alert-csl {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.alert-csl hr {
    border-top-color: #9fcdff;
}

.alert-csl .alert-link {
    color: #002752;
}