@import url('https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

:root {
    --sidebar-width: 300px;
    --header-height: 65px;

    --color-blue-light: #ccecfd;
    --color-blue: #009EF7;
    --color-blue-2: #008EDE;
    --color-blue-3: #007EC6;

    --color-grey-light: #C4C6C8;
    --color-grey: #A1A5B7;
    --color-grey-2: #6C757D;
    --color-grey-3: #5E6278;

    --color-green-light: #D0F3DF;
    --color-green: #50CD89;
    --color-green-2: #48B97B;
    --color-green-3: #40A46E;

    --color-red-light: #fcd9e2;
    --color-red: #F1416C;
    --color-red-2: #D93B61;
    --color-red-3: #C13456;

    --color-orange-light: #FEF0BE;
    --color-orange: #F5BF01;
    --color-orange-2: #E6B300;
    --color-orange-3: #CC9F00;

    --color-white: #F5F8FA;
    --color-white-2: #EFF2F5;
    --color-white-3: #DDDFE1;

    --color-dark: #1A1A27;
    --color-dark-blue: #1E1E2D;

    --color-purple-light: #EED9FC;
    --color-purple: #9341F1;
    --color-purple-2: #8A3BD9;
    --color-purple-3: #7F34C1;
}

body {
    font-size: .875rem;
    font-family: 'Poppins', sans-serif;
    background-color: #F9F9FC;
}

a {
    color: #5867dd;
    color: var(--color-blue);
    text-decoration: none;
}

a:hover {
    color: #2739c1;
    color: var(--color-blue-3);
}

/*
 * Navbar
 */
.navbar {
    background-color: #ffffff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
}

.navbar-brand-container {
    top: 0;
    position: sticky;
    height: var(--header-height);
    width: 100%;
    background-color: var(--color-dark);
}

.navbar-brand {
    background: url(./../img/logo.svg) no-repeat center;
    background-size: 70%;
    width: 100%;
    margin-right: 0;
}

.header-brand {
    height: var(--header-height);
    min-width: 200px;
    background: url(./../img/logo.svg) no-repeat center;
    background-size: 90%;
}


.navbar .navbar-toggler {
    top: .25rem;
    right: 1rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/*
 * Page title
 */
.page-title {
    flex-grow: 1;
    overflow: hidden;
}

.page-title h1 {
    font-size: 18px;
    font-weight: 600;
}

.page-title ul.breadcrumb li {
    font-size: 12px;
    font-weight: 500;
}

.page-title ul.breadcrumb li a {
    text-decoration: none;
}

.page-title ul.breadcrumb li a:hover {
    color: var(--color-blue) !important;
}

.page-title-sm {
    padding-top: calc(var(--header-height));
    background-color: #ffffff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
}

.page-title-sm h1 {
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/*
 * Page layout
 */

.custom-header {
    margin-left: auto !important;
    position: fixed;
    left: var(--sidebar-width);
    height: var(--header-height);
    right: 0;
}

.custom-header #site-selector {
    min-width: 250px;
}

.custom-header #site-selector .placeholder-container {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 250px;
}

.custom-header #site-selector .placeholder-container .site-selector-site-placeholder {
    font-size: 14px;
    line-height: 22px;
    padding-right: 40px;
    float: right;
    color: var(--color-dark);
}

.custom-header #site-selector .placeholder-container .site-selector-empty-placeholder {
    font-size: 14px;
    line-height: 22px;
    margin-left: 13px;
    color: var(--color-grey);
}

.custom-header .custom-header-site-icon {
    width: 100px;
    text-align: center;
}

@media (min-width: 576px) {
    .wrapper {
        padding-top: calc(var(--header-height) + 1rem);
    }
}
@media (max-width: 576px) {
    .wrapper {
        padding-top: 1rem;
    }
}

@media (min-width: 992px) {
    .main-container {
        padding-left: var(--sidebar-width);
    }

    .custom-header {
        left: var(--sidebar-width);
    }
}

@media (max-width: 991px) {
    .custom-header {
        left: 0;
    }
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: center;
    background-color: var(--color-dark);
}

.sidebar-footer a {
    font-weight: 400;
    font-size: 14px;
    color: #9899ac;
    text-decoration: none;
    transition: color 0.15s;
}

.sidebar-footer a:hover {
    color: #ffffff;
    transition: color 0.15s;
}

.menu-container {
    overflow-x: hidden;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-gutter: stable both-edges;
}

.menu-container:hover::-webkit-scrollbar-track {
    background-color: transparent;
}

.menu-container::-webkit-scrollbar {
    width: 15px;
    background-color: transparent;
}

.menu-container:hover::-webkit-scrollbar-thumb {
    border-radius: 20px;
    width: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #3B3B64;
    border: 4px solid transparent;
    background-clip: content-box;
}

/*
 * Sidebar
 */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    width: var(--sidebar-width);
    background-color: #181824;
    overflow: hidden;
}

@media (max-width: 991px) {
    .sidebar {
        --sidebar-width: 100%;
        top: var(--header-height);
    }

    .page-title h1 {
        color: var(--color-white-3);
    }

    .custom-header {
        background-color: var(--color-dark);
    }

    .navbar-toggler {
        --fa-primary-color: #ffffff;
        --fa-secondary-color: #ffffff;
        --fa-primary-opacity: 0.5;
        --fa-secondary-opacity: 0.2;
    }

    .navbar-toggler:hover {
        --fa-primary-color: #ffffff;
        --fa-secondary-color: var(--color-blue);
        --fa-primary-opacity: 0.5;
        --fa-secondary-opacity: 0.8;
    }
}

.sidebar::-webkit-scrollbar {
    width: 0.4rem;
}

.sidebar.bg-dark {
    background-color: var(--color-dark-blue) !important;
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
}

.sidebar .nav-item ul {
    padding-left: 1.5rem;
}

.sidebar .nav-link {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-grey);
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.5rem 0.5rem;
}

.sidebar .nav-link .nav-label {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .nav, .sidebar .nav-item {
    width: 100%;
}

.sidebar .nav-link:hover {
    color: var(--color-white);
}

.sidebar .nav-link .fa-thin, .sidebar .nav-link .fa-solid, .sidebar .nav-link .fa-regular, .sidebar .nav-link .fa-light, .sidebar .nav-link .fa-duotone {
    margin-right: .75rem;
    font-size: 14px;
}

.sidebar .nav-link .fa-duotone, .user-profile-link .fa-duotone {
    --fa-primary-color: #ffffff;
    --fa-secondary-color: #ffffff;
    --fa-primary-opacity: 0.5;
    --fa-secondary-opacity: 0.2;
    transition: opacity 1s ease-in-out;
}

.sidebar .nav-link:hover .fa-duotone, .user-profile-link:hover .fa-duotone {
    --fa-primary-color: #ffffff;
    --fa-secondary-color: var(--color-blue);
    --fa-primary-opacity: 0.5;
    --fa-secondary-opacity: 0.8;
}

.sidebar .nav-link .badge {
    font-size: 10px;
    padding: 0.2em 0.4em;
}

.sidebar-heading {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-grey-3);
    letter-spacing: 1.3px;
}

/*
 * Card
 */
.card {
    border: 0;
    box-shadow: 0 0 20px 0 rgb(76 87 125 / 5%);
    border-radius: 10px;
}

.card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    min-height: 55px;
    max-height: 55px;
    background-color: transparent;
    border: none;
}

.card-header:first-child {
    border-radius: 10px 10px 0 0;
}

.card .card-header .card-title, .card .card-header .card-toolbar {
    display: flex;
    align-items: center;
}

.card .card-header .card-title, .card .card-header .card-title .card-label {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-dark);
    margin-bottom: 0;
}

.card-toolbar {
    gap: 10px;
}

/*
 * Metric cards
 */
.card.metric-card {
    height: 120px;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 0;
}

.card.metric-card .card-body .metric {
    text-align: center;
    font-size: 30px;
    color: #656565;
    z-index: 10;
    position: absolute;
    left: 0;
    top: 55px;
    right: 0;
    bottom: 0;
    padding: 0;
}

.card.metric-card .card-body {
    padding: 0;
}

.card.metric-card .card-body .no-data {
    opacity: 0.5;
    font-size: 14px;
    z-index: 10;
    padding: 0;
}

.card.metric-card .loader, .has-error {
    top: 5px;
    right: 8px;
    font-size: 13px;
    z-index: 20;
}

/*
 * Nav pills
 */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--color-dark-blue);
}

/*
 * Table
 */
.table thead {
    color: var(--color-grey);
}

.table tr, .table tr th, .table tr td {
    vertical-align: middle;
    border-bottom-color: #E4E6EF !important;
    border-bottom-style: dashed;
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.03);
}

table thead.table-light tr th input {
    border: 1px solid var(--color-white-3);
    background-color: white;
}

/*
 * Buttons
 */

.btn {
    font-size: 14px;
}

.btn.btn-sm {
    font-size: 13px;
}

.btn:focus {
    box-shadow: none;
}

.btn-default {
    border-color: #e2e5ec;
    background-color: #ffffff;
}

.btn-default:hover {
    border-color: #e2e5ec;
    background-color: var(--color-white);
}

.btn-primary {
    color: #ffffff;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #ffffff;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-blue-2);
    border-color: var(--color-blue-2);
}

.btn-primary:active, .btn-primary:active:focus {
    background-color: var(--color-blue-3);
    border-color: var(--color-blue-3);
}

.btn-secondary {
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #ffffff;
    background-color: var(--color-grey);
    border-color: var(--color-grey);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-grey-2);
    border-color: var(--color-grey-2);
}

.btn-secondary:active, .btn-secondary:active:focus {
    background-color: var(--color-grey-3);
    border-color: var(--color-grey-3);
}

.btn-success {
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.btn-success.disabled, .btn-success:disabled {
    color: #ffffff;
    background-color: var(--color-green);
    border-color: var(--color-green);
}

.btn-success:hover, .btn-success:focus {
    background-color: var(--color-green-2);
    border-color: var(--color-green-2);
}

.btn-success:active, .btn-success:active:focus {
    background-color: var(--color-green-3);
    border-color: var(--color-green-3);
}

.btn-danger {
    background-color: var(--color-red);
    border-color: var(--color-red);
}

.btn-danger.disabled, .btn-danger:disabled {
    color: #ffffff;
    background-color: var(--color-red);
    border-color: var(--color-red);
}

.btn-danger:hover, .btn-danger:focus {
    background-color: var(--color-red-2);
    border-color: var(--color-red-2);
}

.btn-danger:active, .btn-danger:active:focus {
    background-color: var(--color-red-3);
    border-color: var(--color-red-3);
}

.btn-warning {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-warning.disabled, .btn-warning:disabled {
    color: #ffffff;
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-warning:hover, .btn-warning:focus {
    background-color: var(--color-orange-2);
    border-color: var(--color-orange-2);
}

.btn-warning:active, .btn-warning:active:focus {
    background-color: var(--color-orange-3);
    border-color: var(--color-orange-3);
}

.btn-light {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-grey-3);
}

.btn-light.disabled, .btn-light:disabled {
    color: #ffffff;
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.btn-light:hover, .btn-light:focus {
    background-color: var(--color-white-2);
    border-color: var(--color-white-2);
    color: var(--color-blue);
}

.btn-light:active, .btn-light:active:focus {
    background-color: var(--color-white-3);
    border-color: var(--color-white-3);
}

.btn.btn-icon-only.btn-default:hover {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
}

/*
 * Dropdown
 */

.dropdown-menu {
    font-size: 14px;
}

/*
 * Progress bar
 */

.progress, .progress-bar {
    border-radius: 5px;
}

.progress-bar-info {
    background-color: var(--color-blue) !important;
}

.progress-bar-success {
    background-color: var(--color-green) !important;
}

.progress-bar-warning {
    background-color: var(--color-orange) !important;
}

.progress-bar-danger {
    background-color: var(--color-red) !important;
}

/*
 * Badge
 */
.badge {
    font-weight: 600;
    font-size: 12px;
    vertical-align: middle;
    line-height: 14px;
}

/*
 * Background
 */
.bg-secondary, .bg-grey {
    background-color: var(--color-white-2) !important;
    color: var(--color-grey-2);
}

.bg-info, .bg-blue {
    background-color: var(--color-blue-light) !important;
    color: var(--color-blue);
}

.bg-success, .bg-green {
    background-color: var(--color-green-light) !important;
    color: var(--color-green);
}

.bg-warning, .bg-orange, .bg-yellow {
    background-color: var(--color-orange-light) !important;
    color: var(--color-orange);
}

.bg-danger, .bg-red {
    background-color: var(--color-red-light) !important;
    color: var(--color-red);
}

.bg-light {
    background-color: var(--color-white) !important;
    color: var(--color-grey-3);
}

.bg-purple {
    background-color: var(--color-purple-light) !important;
    color: var(--color-purple);
}

/*
 * Text
 */
.text-muted {
    color: var(--color-grey) !important;
}

.text-info, .text-blue {
    color: var(--color-blue) !important;
}

.text-success, .text-green {
    color: var(--color-green) !important;
}

.text-warning, .text-orange {
    color: var(--color-orange) !important;
}

.text-danger, .text-red {
    color: var(--color-red) !important;
}

.text-grey-light {
    color: var(--color-grey-light) !important;
}

/*
 * Infobox
 */

.info-box {
    display: flex;
    min-height: 90px;
    background: #fff;
    width: 100%;
    box-shadow: 0 0 20px 0 rgb(76 87 125 / 5%);
    border-radius: 10px;
    margin-bottom: 15px;
}

.info-box-icon {
    border-radius: 10px 0 0 10px;
    height: 90px;
    width: 90px;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(0, 0, 0, 0.1);
}

.info-box-content {
    flex-grow: 1;
    padding: 22px 10px;
}

.info-box-text {
    text-transform: uppercase;
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-box-number {
    display: block;
    font-weight: bold;
    font-size: 16px;
}

/*
 * Utilities
 */

.tooltip-inner {
    max-width: 250px;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/*
 * User profile custom
 */
.user-profile-menu .nav .active {
    border-left: 1px solid var(--color-blue);
}

.user-profile-menu .nav .nav-item .nav-link {
    padding: 0.5em;
}

.user-profile-sidebar {
    display: flex;
    gap: 10px;
    align-items: center;
    position: sticky;
}

.user-profile-sidebar-actions {
    display: flex;
    flex-direction: column;
}

.user-profile-sidebar .user-profile-link {
    font-weight: 400;
    font-size: 13px;
    color: #9899ac;
    text-decoration: none;
    transition: color 0.15s;
}

.user-profile-sidebar .user-profile-link:hover {
    color: #ffffff;
    transition: color 0.15s;
}

.user-profile-sidebar .logout:hover {
    --fa-secondary-color: var(--color-blue);
    --fa-secondary-opacity: 0.8;
}

/*
 * Form
 */
.control-label {
    font-weight: 500;
    margin-bottom: 0.5em;
}

input[type='checkbox'],
input[type='radio'] {
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background-color: var(--color-white);
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: top;
    transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out;
}

input[type='checkbox'] {
    border-radius: 0.25em;
}

input[type='radio'] {
    border-radius: 1em;
}

div.form-check input[type='radio'] + label.form-check-label {
    margin-left: 6px;
    margin-top: 3px;
}

input:checked {
    background-color: var(--color-blue);
}

input:checked::before {
    position: absolute;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    display: inline-block;
    color: #ffffff;
    height: 1em;

}

input[type='checkbox']:checked::before {
    content: "\f00c";
    font-size: 12px;
    top: 1px;
    left: 4px;
}

input[type='radio']:checked::before {
    content: "\f111";
    font-size: 9px;
    top: 3px;
    left: 5px;
}

.form-control {
    font-size: 14px;
    margin-bottom: 1em;
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-dark);
    transition: background-color 0.2s ease;
}

.form-control:focus {
    background-color: var(--color-white-2);
    border-color: var(--color-white-2);
    color: var(--color-dark);
    transition: background-color 0.2s ease;
    box-shadow: none;
}

.form-control:not([multiple]) option {
    background-color: #ffffff;
}

select.form-control:not([multiple]) {
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 0.75rem;
}

.input-group-text {
    border-color: var(--color-white);
}

/*
 * Custom input-selection
 */
select.input-selection {
    font-size: 16px;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 0;
    cursor: pointer;
    background-color: transparent;
    border: transparent;
}

select.input-selection option {
    font-size: 14px;
}

/*
 * Alerts
 */
.alert {
    display: flex;
    gap: 10px;
    align-items: center;
}

.alert i {
    font-size: 2em;
}

.alert .alert-message {
    flex-grow: 1;
}

.alert .btn-close {
    padding: 0.5rem;
    position: relative;
}

.alert-dismissible {
    padding-right: 1rem;
}

.alert .btn-close:focus {
    box-shadow: none;
}

.alert-success {
    color: var(--color-green);
    background-color: var(--color-green-light);
    border-color: #cbf0dc;
}

.alert-info {
    color: var(--color-blue);
    background-color: var(--color-blue-light);
    border-color: #b3e2fd;
}

.alert-warning {
    color: var(--color-orange);
    background-color: var(--color-orange-light);
    border-color: #ffeeb3;
}

.alert-danger {
    color: var(--color-red);
    background-color: var(--color-red-light);
    border-color: #fbc6d3;
}

/*
 * Toasts (notify)
 */
.toast.info i {
    color: var(--color-blue)
}

.toast.success i {
    color: var(--color-green)
}

.toast.danger i {
    color: var(--color-red)
}

.toast.warning i {
    color: var(--color-orange)
}

.toast-body {
    align-items: center;
    gap: 15px;
}

.toast .toast-body .toast-icon {
    font-size: 1.5em;
}

/*
 * Modals
 */

.modal-title {
    flex-grow: 1;
}

/*
 * Popovers
 */
.popover {
    max-width: 300px;
}

.popover-body {
    max-height: 550px;
    z-index: 100;
    overflow-y: auto;
}

.popover-body:hover::-webkit-scrollbar-track {
    background-color: #FFFFFF;
}

.popover-body::-webkit-scrollbar {
    width: 15px;
    background-color: #FFFFFF;
    border-radius: 5px;
}

.popover-body::-webkit-scrollbar-thumb {
    border-radius: 20px;
    width: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: var(--color-grey-3);
    border: 4px solid transparent;
    background-clip: content-box;
}

/*
 * Login page
 */
body.login {
    background-color: var(--color-dark-blue) !important;
}

.login .login-wrapper .content input.form-control {
    background-color: rgba(255,255,255,.015);
    border: none;
    border-radius: 45px;
    padding: 12px 20px;
    color: var(--color-grey);
}

.login .login-wrapper button, .login .login-wrapper a {
    padding: 10px 20px;
    border-radius: 45px;
}

.login .login-wrapper .content .form-control::placeholder {
    color: var(--color-grey-2);
}

.login .login-wrapper .content .form-title .form-title, .login .login-wrapper .content .form-title .form-subtitle {
    color: var(--color-grey-3) !important;
}

.login .login-wrapper .content hr {
    color: var(--color-grey-3)
}

/*
 * Help icon
 */
.help-icon-container {
    border: 1px solid #E3E6E8;
    border-radius: 4px;
    cursor: pointer;
}

.help-icon-container i {
    --fa-primary-color: #000000;
    --fa-secondary-color: #000000;
    --fa-primary-opacity: 0.6;
    --fa-secondary-opacity: 0.25;
}

/*
 * Datatable
 */
.pagination {
    margin-top: 30px !important;
    justify-content: center !important;
}
.pagination .page-item {
    margin: 0px 3px;
}
.pagination .page-item .page-link {
    border: none;
    border-radius: 5px;
    color: var(--color-grey);
}

.pagination .page-item .page-link:hover {
    background-color: var(--color-blue-light);
    color: var(--color-blue);
    border: none;
}
.pagination .page-item.active .page-link {
    background-color: var(--color-blue);
    color: var(--color-white);
}
.pagination .page-item.disabled .page-link {
    color: var(--color-grey-light);
}

@media screen and (max-width: 575px) {
    div.dataTables_wrapper div.dataTables_paginate ul.pagination li.paginate_button.previous {
        display: none;
    }

    div.dataTables_wrapper div.dataTables_paginate ul.pagination li.paginate_button.next {
        display: none;
    }
}

/*
 * Pre custom
 */
pre {
    overflow: auto;
    padding: 0.25rem 0.5rem;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    border-radius: 0.25rem;
    margin-bottom: 0;
}

pre::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

pre::-webkit-scrollbar-track {
    background: transparent;
}

pre::-webkit-scrollbar-thumb {
    background-color: var(--color-grey-3);
    border-radius: 20px;
    border: 5px solid transparent;
    background-clip: content-box;
}

pre::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-grey);
}

pre::-webkit-scrollbar-corner {
    background-color: var(--color-dark-blue);
    border-bottom-right-radius: 0.25rem;
}

/*
 * Dropstart
 */
.dropstart {
    display: inline-block;
}

/*
 * Helpers
 */

.overflow-hidden-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}