/* ==========================================================
   7TH LENS DRIVE — SFTPGo
   FULL MONOCHROME THEME

   PAGE:        #0B0B0B
   BLACK:       #000000
   PANEL:       #181818
   HOVER:       #242424
   INPUT:       #0D0D0D
   BORDER:      #3A3A3A
   WHITE:       #FFFFFF
   MUTED:       #999999
   ========================================================== */


/* ==========================================================
   GLOBAL VARIABLES — BOTH LIGHT & DARK MODE
   ========================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {

    --bs-primary: #ffffff !important;
    --bs-primary-rgb: 255,255,255 !important;

    --bs-body-bg: #0b0b0b !important;
    --bs-body-color: #ffffff !important;

    --bs-secondary-bg: #181818 !important;
    --bs-tertiary-bg: #202020 !important;

    --bs-emphasis-color: #ffffff !important;
    --bs-secondary-color: #999999 !important;

    --bs-link-color: #ffffff !important;
    --bs-link-hover-color: #cccccc !important;

    --bs-border-color: #3a3a3a !important;

    --bs-gray-100: #181818 !important;
    --bs-gray-200: #202020 !important;
    --bs-gray-300: #333333 !important;
    --bs-gray-400: #777777 !important;
    --bs-gray-500: #888888 !important;
    --bs-gray-600: #999999 !important;
    --bs-gray-700: #bbbbbb !important;
    --bs-gray-800: #dddddd !important;
    --bs-gray-900: #ffffff !important;

    --kt-primary: #ffffff !important;
    --kt-primary-active: #dddddd !important;
}


/* ==========================================================
   PAGE
   ========================================================== */

html,
body {
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;
    color: #ffffff !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

header,
.header,
#kt_header,
.app-header,
.navbar,
nav {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-bottom: 1px solid #262626 !important;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

aside,
.aside,
#kt_aside,
.app-sidebar,
.sidebar,
.menu {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-right: 1px solid #262626 !important;
}


.menu-link,
.menu-title {
    color: #dddddd !important;
}


.menu-icon,
.menu-icon i,
.menu-icon svg {
    color: #999999 !important;
}


.menu-item.active > .menu-link,
.menu-link.active,
.menu-item.show > .menu-link,
.menu-link:hover,
.menu-link:focus {
    background: #181818 !important;
    background-color: #181818 !important;

    color: #ffffff !important;

    border-radius: 6px !important;
}


.menu-item.active .menu-title,
.menu-link.active .menu-title,
.menu-link:hover .menu-title,
.menu-link:hover .menu-icon {
    color: #ffffff !important;
}


/* ==========================================================
   MAIN CONTENT
   ========================================================== */

main,
.main,
.content,
#kt_content,
.app-main,
.app-content,
.content-wrapper {
    background: #0b0b0b !important;
    background-color: #0b0b0b !important;

    color: #ffffff !important;
}


/* ==========================================================
   PANELS / CARDS
   ========================================================== */

.card {
    background: #181818 !important;
    background-color: #181818 !important;

    color: #ffffff !important;

    border: 1px solid #3a3a3a !important;

    border-radius: 8px !important;

    box-shadow: none !important;
}


.card-header,
.card-body,
.card-footer {
    background: #181818 !important;
    background-color: #181818 !important;

    color: #ffffff !important;

    border-color: #3a3a3a !important;
}


/* ==========================================================
   INPUTS
   ========================================================== */

input,
select,
textarea,
.form-control,
.form-select,
.form-control-solid {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;

    color: #ffffff !important;

    border: 1px solid #4a4a4a !important;

    box-shadow: none !important;
}


input::placeholder,
textarea::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
}


input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    background: #000000 !important;

    color: #ffffff !important;

    border-color: #ffffff !important;

    box-shadow: 0 0 0 1px #ffffff !important;

    outline: none !important;
}


/* ==========================================================
   PRIMARY BUTTONS
   WHITE → BLACK ON HOVER
   ========================================================== */

.btn-primary,
.btn.btn-primary,
button.btn-primary,
button[type="submit"],
input[type="submit"] {

    --bs-btn-color: #000000 !important;
    --bs-btn-bg: #ffffff !important;
    --bs-btn-border-color: #ffffff !important;

    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-hover-bg: #000000 !important;
    --bs-btn-hover-border-color: #ffffff !important;

    --bs-btn-active-color: #ffffff !important;
    --bs-btn-active-bg: #000000 !important;
    --bs-btn-active-border-color: #ffffff !important;

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    color: #000000 !important;

    border: 1px solid #ffffff !important;

    box-shadow: none !important;
}


.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover,
button.btn-primary:focus,
button[type="submit"]:hover,
button[type="submit"]:focus {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: #ffffff !important;

    box-shadow: none !important;
}


/* ==========================================================
   LIGHT BUTTONS
   ========================================================== */

.btn-light,
.btn-light-primary,
.btn-light-secondary,
.btn-white {
    background: #202020 !important;
    background-color: #202020 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #555555 !important;

    box-shadow: none !important;
}


.btn-light:hover,
.btn-light:focus,
.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-secondary:hover,
.btn-light-secondary:focus,
.btn-white:hover,
.btn-white:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;

    color: #000000 !important;

    border-color: #ffffff !important;
}


/* ==========================================================
   WARNING / ERROR BANNERS

   This specifically fixes the yellow banner in your screenshot.
   ========================================================== */

.alert,
.alert-warning,
.bg-warning,
.bg-light-warning,
.text-bg-warning {
    background: #181818 !important;
    background-color: #181818 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #555555 !important;
}


.alert-warning *,
.bg-light-warning *,
.bg-warning * {
    color: #ffffff !important;
}


/* Warning icon */

.text-warning,
.svg-icon-warning,
.alert-warning i,
.alert-warning svg,
.bg-light-warning i,
.bg-light-warning svg {
    color: #ffffff !important;
}


.alert-warning svg path,
.bg-light-warning svg path {
    fill: currentColor !important;
    stroke: currentColor !important;
}


/* ==========================================================
   GLOBAL TEXT — NO BLUE
   ========================================================== */

.text-primary,
.text-active-primary,
.text-hover-primary:hover,
.link-primary,
.text-info,
.text-warning,
.text-gray-900 {
    color: #ffffff !important;
}


.text-gray-800 {
    color: #eeeeee !important;
}


.text-gray-700 {
    color: #cccccc !important;
}


.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-muted,
.text-body-secondary {
    color: #999999 !important;
}


a {
    color: #ffffff !important;
}


a:hover,
a:focus {
    color: #cccccc !important;
}


/* ==========================================================
   ICONS
   ========================================================== */

.svg-icon,
.svg-icon svg,
.menu-icon,
i {
    color: #999999 !important;
}


.svg-icon svg path {
    fill: currentColor !important;
}


button:hover .svg-icon,
a:hover .svg-icon,
.menu-link:hover .svg-icon {
    color: #ffffff !important;
}


/* ==========================================================
   DROPDOWNS
   ========================================================== */

.dropdown-menu {
    background: #181818 !important;
    background-color: #181818 !important;

    color: #ffffff !important;

    border: 1px solid #555555 !important;

    box-shadow: 0 10px 30px rgba(0,0,0,.6) !important;
}


.dropdown-item {
    background: transparent !important;

    color: #ffffff !important;
}


.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background: #ffffff !important;

    color: #000000 !important;
}


/* ==========================================================
   MODALS / POPUPS
   ========================================================== */

.modal-content {
    background: #181818 !important;
    background-color: #181818 !important;

    color: #ffffff !important;

    border: 1px solid #555555 !important;

    border-radius: 8px !important;
}


.modal-header,
.modal-body,
.modal-footer {
    background: #181818 !important;

    color: #ffffff !important;

    border-color: #3a3a3a !important;
}


#modal_alert_text,
.modal #modal_alert_text,
.modal-content #modal_alert_text {
    color: #ffffff !important;
}


/* ==========================================================
   TABLES
   ========================================================== */

table,
.table {
    --bs-table-bg: #181818 !important;
    --bs-table-color: #ffffff !important;

    --bs-table-border-color: #323232 !important;

    --bs-table-hover-bg: #242424 !important;
    --bs-table-hover-color: #ffffff !important;

    background: #181818 !important;

    color: #ffffff !important;
}


table thead,
.table thead,
.table thead th,
table tbody,
.table tbody,
.table tbody tr,
.table tbody td {
    background: #181818 !important;

    color: #ffffff !important;

    border-color: #323232 !important;
}


.table-hover > tbody > tr:hover > *,
.table tbody tr:hover,
.table tbody tr:hover td {
    background: #242424 !important;

    color: #ffffff !important;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.page-link {
    background: #181818 !important;

    color: #ffffff !important;

    border: 1px solid #444444 !important;
}


.page-link:hover,
.page-link:focus {
    background: #ffffff !important;

    color: #000000 !important;

    border-color: #ffffff !important;
}


.page-item.active .page-link {
    background: #ffffff !important;

    color: #000000 !important;

    border-color: #ffffff !important;
}


/* ==========================================================
   CHECKBOXES / RADIO
   ========================================================== */

.form-check-input {
    background-color: #000000 !important;

    border-color: #ffffff !important;
}


.form-check-input:checked {
    background-color: #ffffff !important;

    border-color: #ffffff !important;
}


/* ==========================================================
   FOOTER / VERSION
   ========================================================== */

footer,
.footer,
#kt_footer,
.app-footer,
.version,
.app-version,
.footer-version,
.text-version {
    display: none !important;
}


/* ==========================================================
   LOGIN PANEL
   ========================================================== */

body div.bg-body:has(#sign_in_form),
body div.bg-body:has(form#sign_in_form) {
    background: #181818 !important;

    color: #ffffff !important;

    border: 1px solid #555555 !important;

    border-radius: 10px !important;

    box-shadow: 0 18px 60px rgba(0,0,0,.65) !important;

    overflow: hidden !important;
}


body .bg-body:has(#sign_in_form) form#sign_in_form > .container:first-child {
    background: #000000 !important;

    margin-top: -2.5rem !important;
    margin-left: -2.5rem !important;
    margin-right: -2.5rem !important;
    margin-bottom: 2.25rem !important;

    width: calc(100% + 5rem) !important;

    padding: 2rem 2.5rem !important;

    border-bottom: 1px solid #333333 !important;
}


/* ==========================================================
   FINAL LIGHT MODE KILLER
   ========================================================== */

html[data-bs-theme="light"] body,
html[data-bs-theme="light"] .app-main,
html[data-bs-theme="light"] .app-content {
    background: #0b0b0b !important;

    color: #ffffff !important;
}


html[data-bs-theme="light"] .text-primary,
html[data-bs-theme="light"] .text-gray-900,
html[data-bs-theme="light"] .text-warning,
html[data-bs-theme="light"] #modal_alert_text {
    color: #ffffff !important;
}


html[data-bs-theme="light"] .bg-light-warning,
html[data-bs-theme="light"] .alert-warning {
    background: #181818 !important;

    color: #ffffff !important;

    border-color: #555555 !important;
}


/* ==========================================================
   FINAL BUTTON BLUE KILLER
   ========================================================== */

body [class*="btn-light-primary"] {
    background: #202020 !important;

    color: #ffffff !important;

    border-color: #555555 !important;
}


body [class*="btn-light-primary"]:hover,
body [class*="btn-light-primary"]:focus,
body [class*="btn-light-primary"]:active {
    background: #ffffff !important;

    color: #000000 !important;

    border-color: #ffffff !important;
}


body [class*="btn-active-primary"]:hover,
body [class*="btn-active-primary"].active,
body [class*="btn-active-primary"]:active {
    background: #ffffff !important;

    color: #000000 !important;

    border-color: #ffffff !important;
}


/* ==========================================================
   FINAL PAGE
   ========================================================== */

body {
    background: #0b0b0b !important;
}