.mobile-admin #wrapper {
    display: block;
}

.mobile-brand {
    display: none;
}

.mobile-sidebar-backdrop {
    display: none;
}

.mobile-admin #accordionSidebar {
    position: fixed;
    z-index: 1030;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: min(250px, 85vw) !important;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 env(safe-area-inset-bottom);
    box-sizing: border-box;
    white-space: normal;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
}

.mobile-admin #accordionSidebar.toggled {
    width: min(250px, 85vw) !important;
}

.mobile-admin.mobile-sidebar-open {
    overflow: hidden;
}

.mobile-admin.mobile-sidebar-open #accordionSidebar {
    transform: translateX(0);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.28);
}

.mobile-admin #mobileSidebarBackdrop {
    position: fixed;
    z-index: 1028;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.mobile-admin.mobile-sidebar-open #mobileSidebarBackdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.mobile-admin #accordionSidebar .sidebar-brand,
.mobile-admin #accordionSidebar .sidebar-divider {
    display: flex !important;
}

.mobile-admin #accordionSidebar .sidebar-brand {
    min-height: 70px;
}

.mobile-admin #accordionSidebar .nav-item {
    display: block !important;
    flex: none;
    width: 100%;
    min-width: 0;
}

.mobile-admin #accordionSidebar .nav-link {
    display: flex;
    width: 100% !important;
    height: auto;
    min-height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 12px 20px;
    text-align: left;
}

.mobile-admin #accordionSidebar .nav-link i {
    width: 20px;
    margin: 0 12px 0 0;
}

.mobile-admin #accordionSidebar .nav-link span {
    max-width: none;
    overflow: visible;
    font-size: 13px;
    line-height: 1.4;
    text-overflow: clip;
}

.mobile-admin #accordionSidebar .collapse {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
}

.mobile-admin #accordionSidebar .collapse-inner {
    width: auto;
    margin: 0 16px 8px 50px;
}

.mobile-admin #accordionSidebar .mobile-view-switch {
    display: block !important;
}

.mobile-admin #accordionSidebar .mobile-view-switch .nav-link {
    color: #fff !important;
}

.mobile-admin #content-wrapper {
    width: 100%;
    margin: 0;
}

.mobile-admin #content {
    min-width: 0;
    padding-bottom: 0;
}

.mobile-admin .topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 58px;
}

.mobile-admin #sidebarToggleTop {
    display: none !important;
}

.mobile-admin #mobileSidebarToggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #171717;
}

.mobile-admin .mobile-brand {
    display: inline-block !important;
    margin-left: 16px;
    color: #171717;
    font-size: 16px;
    font-weight: 700;
}

.mobile-admin .container-fluid {
    padding-right: 12px;
    padding-left: 12px;
}

.mobile-admin .table-responsive {
    -webkit-overflow-scrolling: touch;
}

.mobile-admin .card-body {
    padding: 14px;
}

.mobile-admin .row {
    margin-right: -6px;
    margin-left: -6px;
}

.mobile-admin .row > [class*="col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

.mobile-admin .table-responsive {
    max-width: 100%;
}

.mobile-admin .form-control,
.mobile-admin .btn {
    min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-admin #accordionSidebar,
    .mobile-admin #mobileSidebarBackdrop {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    #content-wrapper {
        width: 100%;
    }

    .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .card-body {
        padding: 14px;
    }

    .table-responsive {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    input,
    select,
    textarea {
        max-width: 100%;
    }
}

body {
    --pos-black: #171717;
    --pos-charcoal: #2b2b2b;
    --pos-gray: #6b7280;
    --pos-light-gray: #e5e7eb;
    --pos-paper: #fff;
    --blue: #171717;
    --primary: #171717;
    --info: #6b7280;
}

.bg-gradient-primary,
#accordionSidebar.bg-gradient-primary,
.mobile-admin #mobileSidebarBackdrop {
    background-color: var(--pos-black) !important;
    background-image: linear-gradient(180deg, #303030 0%, #111 100%) !important;
}

.bg-primary,
.btn-primary,
.btn-outline-primary,
.badge-primary,
.alert-primary,
.list-group-item-primary,
.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.progress-bar {
    color: #fff !important;
    background-color: var(--pos-black) !important;
    border-color: var(--pos-black) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.bg-primary:hover,
.page-item.active .page-link:hover {
    color: #fff !important;
    background-color: var(--pos-charcoal) !important;
    border-color: var(--pos-charcoal) !important;
}

.btn-outline-primary {
    background: transparent !important;
    color: var(--pos-black) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background: var(--pos-black) !important;
}

.border-primary,
.list-group-item-primary {
    border-color: var(--pos-black) !important;
}

.list-group-item-primary {
    background-color: #f3f4f6 !important;
    color: var(--pos-black) !important;
}

.alert-primary {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: #343a40 !important;
}

.badge-primary {
    background-color: var(--pos-black) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active {
    color: #fff !important;
    background-color: var(--pos-black) !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 23, 23, 0.28) !important;
}

.btn-link,
.btn-link:hover,
.btn-link:focus {
    color: var(--pos-black) !important;
}

.text-primary,
a.text-primary,
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.sidebar-brand):not(.mobile-menu-link),
.mobile-admin .mobile-brand {
    color: var(--pos-black) !important;
}

.sidebar-dark .sidebar-brand,
.sidebar-dark .nav-item .nav-link,
.mobile-admin #accordionSidebar .nav-link,
.mobile-admin #accordionSidebar .mobile-menu-link {
    color: #fff !important;
}

a:not(.btn):not(.dropdown-item):not(.nav-link):not(.sidebar-brand):not(.mobile-menu-link):hover,
a.text-primary:hover,
a.text-primary:focus {
    color: #4b5563 !important;
}

.bg-info,
.btn-info,
.text-info,
.border-left-info,
.badge-info {
    color: #343a40 !important;
}

.bg-info,
.btn-info,
.badge-info {
    background-color: #e5e7eb !important;
    border-color: #d1d5db !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    color: #111 !important;
    background-color: #d1d5db !important;
    border-color: #c4c9d0 !important;
}

.text-info {
    color: #6b7280 !important;
}

.border-left-info {
    border-left-color: #9ca3af !important;
}

.border-left-primary {
    border-left-color: var(--pos-black) !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: #6b7280 !important;
    box-shadow: 0 0 0 0.2rem rgba(23, 23, 23, 0.15) !important;
}

.mobile-admin #accordionSidebar .nav-item.active .nav-link {
    background: rgba(255, 255, 255, 0.18);
}

.mobile-admin #accordionSidebar .nav-item.active .nav-link {
    background: rgba(255, 255, 255, 0.14);
}

.mobile-admin #accordionSidebar .collapse-item {
    display: block;
    padding: 8px 12px;
}

.mobile-admin #accordionSidebar .collapse-item.active {
    color: #171717;
    font-weight: 700;
}