body {
    --ct-apex-grid-color: var(--ct-gray-300);
}

.bs-actionsbox .btn-group {
    width: 100%;
}

.widget-flat {
    min-height: 140px;
    flex-grow: 1;
}

.page-title-box {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 16px;
    margin-right: 0;
    margin-bottom: 16px;
}

.page-title-box .page-title {
    min-width: max-content;
    line-height: 50px; /* was 75px and is too much on small screen */
}
.page-title-box .page-title-right > *,
.spacing-1 > * {
    padding: 0.375rem;
}
.page-title-box .page-title-right {
    display: flex !important;
    /* override media display: none; in base */
}

.export-btn {
    max-width: 180px;
}

#pagination {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--ct-card-bg); /* Assuming we're on card */
    padding: 0.5rem 1rem;
    z-index: 1;
}
#pagination + * {
    margin-top: 40px;
}

/* Right bar (settings) should not have z-index higher than modal */
.rightbar-overlay {
    z-index: 1048;
}
.end-bar {
    z-index: 1049;
}

/*
 * I really don't know why it is not set in original CSS.
 * This missing display property completely kills layout with smaller
 * elements filling.
 */
.timeline {
    display: table;
}
.timeline-show {
    display: flex;
    justify-content: center;
    width: 200%; /* It thinks that display: table has 2 columns */
}
.select-form-row .dropdown.bootstrap-select {
    padding-left: 0;
    padding-right: 0;
}

/* jquery.autocomplete.js */
/* This (almost) replicates the look of bootstrap-select dropdown */
.autocomplete-suggestions {
    color: var(--ct-dropdown-color);
    border: 1px solid var(--ct-dropdown-border-color);
    background-color: var(--ct-dropdown-bg);
    box-shadow: var(--ct-box-shadow);
    overflow: auto;
}
.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}
.autocomplete-selected {
    color: var(--ct-dropdown-link-active-color);
    background-color: var(--ct-dropdown-link-active-bg);
}
.autocomplete-suggestions strong {
    font-weight: normal;
    color: #39F; /* No analogue in bootstrap-select dropdown */
}
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong {
    display: block;
    border-bottom: 1px solid #000; /* Black border between groups */
}

/* Color brightness mixins, to be used with text-{color} classes */
/* I wish we were using SCSS, but living with what we have */
.brightness-50 { filter: brightness(.5); }
.brightness-75 { filter: brightness(.75); }
.brightness-100 { filter: brightness(1); }


table.dataTable thead .sorting::before, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc_disabled::before, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc_disabled::before {
    top: 30px;
}

table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_desc_disabled::after {
    top: 36px;
}


.apexcharts-legend-text {
    color: var(--ct-gray-800) !important;
}
.apexcharts-xaxis-texts-g tspan,
.apexcharts-yaxis-texts-g tspan {
    fill: var(--ct-gray-700) !important;
}


/* More breakpoints! */
@media (min-width: 1600px){
    .d-xxxl-flex {
        display: flex !important;
    }
    .col-xxxl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xxxl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xxxl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }
}

.modal-footer {justify-content: center;}

.currency-symbol {padding-left: 3px;}

@media (min-width: 390px) {
    .logo-d-xsm-none {display: none !important;}
    .logo-d-xsm-block {display: block !important;}
}
/*
 * We need this override, so that `.d-xsm-block.d-md-none` resolves to "display: none"
 * Regular bootstrap just adds them in proper order, but we include this
 * after bootstrap file, so should re-declare necessary things.
 * I do not want to redeclare all d-** classes, so namespace them
 * to prevent accident usage in other contexts.
 */
@media (min-width: 768px) {  /* -md- bootstrap breakpoint */
    .logo-d-md-none {display: none !important;}
    .logo-d-md-block {display: block !important;}
}

/* These classes fix incompatible/inacessible colors */
:root {
    --ct-primary: #3449B2;
}
body[data-layout-color="dark"][data-layout="detached"] {
    --ct-menu-item: #D2DBE4;
    --ct-menu-item-active: #8DBCF7;
}
body[data-layout-color="dark"] {
    --ct-rightbar-title-bg: var(--ct-primary);
    --ct-text-muted: #ABABAB;
    --ct-table-caption-color: var(--ct-text-muted);
    --ct-less-dark: #C8CACB;
    --ct-light: #F1F1F1;
}
body {
    --ct-menu-item-active: var(--ct-primary);
    --ct-link-color: var(--ct-primary);
    --ct-text-muted: #717484;
    --ct-table-caption-color: var(--ct-text-muted);
    --ct-less-dark: #5C646A;
    --ct-light: #323A46;
}

body[data-layout-color="dark"] .text-danger {color: #FC8881 !important;}
.text-danger {color: #EC0909 !important;}
body[data-layout-color="dark"] .text-success {color: #2BCA35 !important;}
.text-success {color: #0F7B16 !important;}

.btn-primary {
    background-color: var(--ct-primary);
    border-color: var(--ct-primary);
}
.navbar-custom .topbar-menu .nav-link {color: #DEE4E8;}
.footer .footer-links a {color: #505253}
.footer .footer-links a:hover {color: #161B1D}
a:focus {text-decoration: underline;}
.text-less-dark {color: var(--ct-less-dark);}
.apexcharts-tooltip-title {color: #5E6E6E;}
.time-show-name {color: #606466}
body[data-layout-color="dark"] .time-show-name {color: #D9D9D9}
.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    /* bootstrap-select fails accessibility */
    /* this is a color for btn-light */
    color: var(--ct-light);
}
/* For accessibility analyze tool ease */
select.selectpicker option {display: none;}
/* End */

/* The following classes are for users-management page and describe rows colors */
.master_admin {color: #B00;}
.master_user {color: #B82EB6;}
.client_admin {color: #B85A36;}
.client_user {color: #00786E;}
.partner {color: #6C757D;}
.api_user {color: #0057A3;}
.user_inactive {color: #BBB;}
body[data-layout-color="dark"] .master_admin {color: #FDBAB7;}
body[data-layout-color="dark"] .master_user {color: #FF80FD;}
body[data-layout-color="dark"] .client_admin {color: #F29E7D;}
body[data-layout-color="dark"] .client_user {color: #31D41C;}
body[data-layout-color="dark"] .partner {color: #B5B5B5;}
body[data-layout-color="dark"] .api_user {color: #0FF;}
body[data-layout-color="dark"] .user_inactive {color: #EDEDED;}
/* End */

#user-btns-row {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-auto-rows: 36px;
    grid-gap: 5px;
}

/* This is used exclusively in report_transactions.html */
#siblings-fixed-width > .col-auto {
    min-width: 232px;
}

/* fix height space when Left Sidebar is set to "Condensed" mode */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) {
  min-height: unset;
}

/* Change line breaking in menu items */
.leftside-menu .side-nav-link {
    display: flex;
    align-items: center;
}
.leftside-menu .side-nav-link > i {
    margin-right: 18px;
}