:root {
    --ras-red: #b72a35;
    --ras-red-dark: #8f1820;
    --ras-red-darker: #651116;
    --ras-red-light: rgba(183, 42, 53, 0.18);
    --ras-gray-dark: #f1f3f5;
    --ras-gray-border: #3a3f44;
    --ras-white: #121417;
    --ras-focus-ring: rgba(183, 42, 53, 0.35);
    --bs-light-rgb: 12, 14, 16;
    color-scheme: dark;
}

body {
    background: rgb(var(--bs-light-rgb));
    color: #f1f3f5;
}

a {
    color: #ff6b75;
}

a:hover,
a:focus,
a:focus-visible {
    color: #ff8f97;
}

.top-header {
    background: #121417;
    border-bottom-color: var(--ras-red);
}

.main-nav {
    background: #8f1820 !important;
    border-bottom-color: #651116 !important;
    box-shadow: inset 0 -1px 0 #651116 !important;
}

.main-nav .nav-link,
.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .nav-link:focus-visible,
.main-nav .nav-link.active,
.main-nav .nav-toggle,
.main-nav .nav-toggle:hover,
.main-nav .nav-toggle:focus,
.main-nav .nav-toggle:focus-visible {
    color: #ffffff !important;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .nav-toggle:hover {
    background: #651116 !important;
}

.main-nav .nav-link:focus,
.main-nav .nav-link:focus-visible,
.main-nav .nav-toggle:focus,
.main-nav .nav-toggle:focus-visible {
    background: #4f0d11 !important;
}

.card,
.card-body {
    /* background-color: #121417; */
    border-color: #3a3f44;
    color: #f1f3f5;
}

.card-header,
.card-footer {
    background-color: #1a1d21;
    border-color: #3a3f44;
    color: #f1f3f5;
}

.table {
    /* background: transparent; */
    --bs-table-bg: #121417;
    /* --bs-table-bg: transparent; */
    --bs-table-color: #f1f3f5;
    --bs-table-border-color: #3a3f44;
    --bs-table-striped-bg: #1a1d21;
    --bs-table-striped-color: #f1f3f5;
    --bs-table-hover-bg: #22262b;
    --bs-table-hover-color: #ffffff;
}

.table-zebra > tbody > tr:hover > * {
    background-color: #22262b;
}

.table-light,
.table > :not(caption) > .table-light > * {
    --bs-table-bg: #1a1d21;
    --bs-table-color: #f1f3f5;
    color: #f1f3f5;
}

.form-control,
.form-select,
textarea {
    background-color: #14171a;
    border-color: #3a3f44;
    color: #f1f3f5;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    background-color: #14171a;
    border-color: var(--ras-red);
    color: #f1f3f5;
}

.form-control::placeholder,
textarea::placeholder {
    color: #9ca3af;
}

.input-group-text {
    background-color: #1a1d21;
    border-color: #3a3f44;
    color: #f1f3f5;
}

.dropdown-menu,
.account-menu .dropdown-menu,
.nav-submenu,
.menu.dropdown-content {
    background-color: #121417;
    border-color: #3a3f44;
}

.dropdown-item,
.nav-submenu a {
    color: #f1f3f5;
}

.dropdown-item:hover,
.dropdown-item:focus,
.nav-submenu a:hover,
.nav-submenu a:focus {
    background-color: rgba(183, 42, 53, 0.22);
    color: #ffffff;
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #f1f3f5;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--ras-red);
    border-color: var(--ras-red);
    color: #ffffff;
}

.btn-primary,
a.btn-primary {
    background-color: var(--ras-red);
    border-color: var(--ras-red);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus {
    background-color: var(--ras-red-dark);
    border-color: var(--ras-red-dark);
    color: #ffffff;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus-visible,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle,
a.btn-primary:active,
a.btn-primary.active,
a.btn-primary:focus-visible {
    background-color: var(--ras-red-darker);
    border-color: var(--ras-red-darker);
    color: #ffffff;
}

.btn-primary:disabled,
.btn-primary.disabled,
a.btn-primary.disabled {
    color: #ffffff;
}

.btn-outline-primary {
    border-color: #ff6b75;
    color: #ff6b75;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ras-red);
    border-color: var(--ras-red);
    color: #ffffff;
}

.text-dark {
    color: #f1f3f5 !important;
}

.bg-white,
.bg-light {
    background-color: #121417 !important;
    color: #f1f3f5;
}

.border-secondary-subtle {
    border-color: #3a3f44 !important;
}

.text-muted,
.footer-copy,
.footer-meta {
    color: #adb5bd !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.border-b,
.border-b-2 {
    border-color: #3a3f44 !important;
}

.alert-success {
    background-color: #16351f;
    border-color: #275d36;
    color: #d1f7dc;
}

.alert-danger {
    background-color: #3b1619;
    border-color: #762d34;
    color: #ffd5d9;
}

.alert-warning {
    background-color: #3a2c12;
    border-color: #7a5b21;
    color: #ffe3a3;
}

.alert-info {
    background-color: #102f3d;
    border-color: #215f7b;
    color: #c5efff;
}

.nav-tabs {
    border-bottom-color: #3a3f44;
}

.nav-tabs .nav-link {
    color: #ff8f97;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: rgba(183, 42, 53, 0.35) rgba(183, 42, 53, 0.35) #3a3f44;
    color: #ffffff;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #1f2327;
    border-color: #3a3f44 #3a3f44 #1f2327;
    border-top-color: var(--ras-red);
    color: #ffffff;
}

.site-footer {
    background: #121417;
    border-top-color: #3a3f44;
}

.modal-content {
    background-color: #121417;
    border-color: #3a3f44;
    color: #f1f3f5;
}

.modal-header,
.modal-footer {
    border-color: #3a3f44;
}

.btn-close {
    filter: invert(1) grayscale(100%);
}

.markdown-content {
    color: #f1f3f5;
    line-height: 1.55;
}

.markdown-content blockquote {
    border-left: 3px solid #4a4f55;
    color: #c7cdd3;
    margin-left: 0;
    padding-left: 0.75rem;
}

.markdown-content code {
    background: #22262b;
    border-radius: 0.25rem;
    color: #ffe1e4;
    font-size: 0.92em;
    padding: 0.1rem 0.35rem;
}

.markdown-content pre {
    background: #1a1d21;
    border: 1px solid #3a3f44;
    border-radius: 0.4rem;
    overflow-x: auto;
    padding: 0.75rem;
}

.markdown-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.markdown-content a {
    color: #ff8f97;
    text-decoration: underline;
}

.markdown-content a:hover,
.markdown-content a:focus {
    color: #ffb3b9;
}