.breadcrumb {
    --tblr-breadcrumb-item-active-font-weight: var(--tblr-font-weight-bold);
    --tblr-breadcrumb-item-disabled-color: var(--tblr-disabled-color);
    --tblr-breadcrumb-link-color: orange;
}

/*

.page {
    abackground: linear-gradient(0deg, #0a1621 0%, #1a2e42 40%, #0051ff11 60%, #0f2031 100%);
}


.card,
.aform-control,
.table *,
.alert {
    border: none !important;
}

.card,
.form-control {
    background: #00000015;
}

.btn-secondary {
    background: rgba(192, 192, 192, 0.308);
}

.bg-theme-lt {
    background: rgba(192, 192, 192, 0.308);
}

#topbar {
    abackground: rgba(255, 255, 255, 0.117);
    border: none;
    box-shadow: none;
}

    */


.adiagonal-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.694);
    /* green background */
    color: white;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 16px;
    transform: skew(-12deg);
    abackground: -webkit-linear-gradient(180deg, #aa4200, orange 95%);
}

.diagonal-badge * {
    transform: skew(12deg);
    /* undo skew for inner text, optional */
}

/*
.table-striped tbody tr:nth-child(6n+1),
.table-striped tbody tr:nth-child(6n+2),
.table-striped tbody tr:nth-child(6n+3) {
  background-color: #ffffff11!important;
}
*/

.triple-deck.table-striped tbody tr:nth-child(6n+1),
.triple-deck.table-striped tbody tr:nth-child(6n+2),
.triple-deck.table-striped tbody tr:nth-child(6n+3) {
    border-left: 4px solid #d3b88e99;
}

.triple-deck.table-striped tbody tr:nth-child(6n+4),
.triple-deck.table-striped tbody tr:nth-child(6n+5),
.triple-deck.table-striped tbody tr:nth-child(6n+6) {
    border-left: 4px solid #e7d9c541;
}

.modal.show,
up-cover,
up-drawer,
up-modal {
    z-index: 1000002;
}

.flash-messages-area {
    z-index: 1000003;
}

.tribute-container {
    z-index: 1000003 !important;
}

:root {
    --Gold: #D3BA84;
    --Ink-Amber: #F3B123;
    --Ink-Amethyst: #7C4182;
    --Ink-Emerald: #329044;
    --Ink-Ruby: #D40037;
    --Ink-Sapphire: #0093C8;
    --Ink-Steel: #97A3AE;
    --Text-Amber: #F3B123;
    --Text-Amethyst: #CC93DA;
    --Text-Emerald: #44BD5A;
    --Text-Ruby: #FF8084;
    --Text-Sapphire: #29B3E6;
    --Text-Steel: #A1A8B0;


    --theme-primary-color: #ff7c2b;
    --theme-primary-lt-color: rgba(255, 166, 0, 0.106);
    --theme-primary-muted-color: rgb(255, 192, 116);
    --theme-primary-light-color: #ffd9b1;

    --theme-table-hover: #a69d8e43;
    --tblr-table-accent-bg: #f0d3a343 !important;

    --domain-body: #E87500;
    --domain-calm: #488C38;
    --domain-chaos: #643D8A;
    --domain-fury: #D01B23;
    --domain-mind: #0F6FA6;
    --domain-order: #CAAD16;
}

body[data-ads-enabled="true"] .page {
    padding-bottom: 60px !important;
}

.container-xl {
    max-width: 1190px !important;
}

.placement {
    background: #00000022 url('../img/background/ads.svg') no-repeat center center;
}

.adthrive-ad {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#adthrive-collapse-container {
    padding: 0 !important;
    border: none !important;
}

#AdThrive_Footer_1_desktop {
    background-color: #151F2Cee !important;
    border-top: none !important;
}

.adthrive-collapse-player {
    border: none !important;
}

.clickable {
    cursor: pointer;
}

.text-theme {
    color: var(--theme-primary-color) !important;
}

.bg-theme {
    background-color: var(--theme-primary-color) !important;
}

.bg-theme-lt {
    background-color: var(--theme-primary-lt-color) !important;
}



.text-theme-muted {
    color: var(--theme-primary-muted-color) !important;
}

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

.text-lightweight {
    font-weight: 300;
}

.text-rainbow {
    background: linear-gradient(90deg, #bf93ff, #73efff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

}

.btn-theme {
    background: rgba(255, 166, 0, 0.805);
    color: white;
}


.btn-theme:hover {
    background-color: var(--theme-primary-color);
    color: white;
}

.btn-outline-theme {
    border-color: var(--theme-primary-color);
    color: var(--theme-primary-color);
}

.btn-outline-theme:hover {
    background: var(--theme-primary-color);
    color: white;
}

.btn-ghost-theme {
    background-color: transparent;
    color: var(--theme-primary-color);
    border: none;
    box-shadow: none;
}

.btn-ghost-theme:hover {
    background-color: rgba(211, 184, 142, 0.1);
    /* Subtle background change on hover */
    color: var(--theme-primary-color);
    box-shadow: none;
}

.link {
    color: rgb(121, 166, 220);
}

.link:hover {
    text-decoration: underline;
}

/*table thead a,
.table thead th,
.table thead .table-sort {
    text-decoration: none;
    color: #ffffffa8 !important;
    font-weight: bold;
    ;
}*/

#topbar #navbar-menu .nav-item .nav-link {
    font-size: 18px;
    font-weight: bold;
}

/* reduce the font size in small screens*/
@media (max-width: 1200px) {
    #topbar #navbar-menu .nav-item .nav-link {
        font-size: 14px;
    }
}

#brand-text {
    font-size: 18px;
}

@media (max-width: 374px) {
    #brand-text {
        font-size: 14px;
    }

    .navbar-brand-image {
        max-width: 16px;
        max-height: 16px;
        margin-bottom: -5px;
    }
}

@media (max-width: 1200px) and (min-width: 990px) {
    #brand-text {
        font-size: 14px !important;
    }

    .navbar-brand-image {
        max-width: 20px !important;
        max-height: 20px !important;
        margin-bottom: -5px;
    }
}

.nav-item .dropdown-item.active {
    color: var(--tblr-breadcrumb-link-color) !important;
}


.nav-item .nav-link:hover {
    color: white;
    background: var(--theme-primary-lt-color);
}

.card .nav-link.selected,
.nav-pills-theme .nav-link.selected,
.nav-pills-theme .nav-link.active,
.nav-pills-theme .nav-link.active:hover {
    background: var(--theme-primary-lt-color);
    color: #e9e9e9;

}

.nav-pills-theme .nav-link {
    color: #ffffff88;
}

.nav-pills-theme .nav-link:hover {
    color: black;
    ;
}

.btn {
    box-shadow: none;
}

.btn-primary {
    background-color: #0384c1;
    color: white;
}

.btn-primary:hover {
    background-color: #0091d5;
}

.navbar-brand {
    background: -webkit-linear-gradient(180deg, #aa4200, orange 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.text-theme-gradient {
    background: -webkit-linear-gradient(222deg, #cf8d31, #ffa500 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-brand img {
    margin-top: -5px;
}


[data-bs-theme=dark] .navbar-brand-autodark .navbar-brand-image {
    filter: none;
}

[data-bs-theme=dark] .alert:not(.alert-important) {
    background-color: var(--tblr-bg-surface);
    color: inherit;
}

.required label:after {
    content: "*";
    margin-left: 0.25rem;
    color: #d63939;
}

.card-image {
    border-radius: 3%;
    aoverflow: hidden;
    outline: 1px solid #ffffff22;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.49);
}

.card-style-foil {
    background: rgb(194, 35, 178);
}

.card-style-enchanted {
    background: rgb(30, 244, 255);
}

.card-image.active {
    outline: 2px solid white;
}

.foil-card-img {
    -webkit-mask: linear-gradient(-60deg, #000000 30%, rgba(128, 26, 160, 0.333), #d633d1 70%) right/300% 100%;
    background-repeat: no-repeat;
    animation: shimmer 10s infinite;
}


@keyframes shimmer {
    100% {
        -webkit-mask-position: left
    }
}

.invalid-feedback {
    display: block !important;
}

.tribute-container {
    max-width: 450px !important;
}

.tribute-container ul {
    color: rgb(67, 77, 86);
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    --tblr-table-accent-bg: #ffffff05;
}

#content {
    display: contents;
}

#content table.table-clickable>tbody>tr:hover>*,
#content table.table-striped>tbody>tr:hover>*,
#content table.table-striped>tbody>tr:nth-of-type(even):hover>* {
    cursor: pointer;
    background-color: var(--theme-table-hover) !important;

    color: white !important;
}

#content table.table-striped>tbody>tr:hover>* .text-muted,
#content table.table-striped>tbody>tr:hover>* .text-secondary {
    color: white !important;
}


#content .table.table-condensed td,
#content .table.table-condensed th {
    padding: 2px !important;
}

.table.sortable th {
    cursor: pointer;
}


.card.card-gradient {
    background-image: linear-gradient(-170deg, #182432 50%, #173a4c 110%);
}

.bg-subtle-gradient {
    background-image: linear-gradient(-170deg, #182432 50%, #173a4c 110%);
}

table.table-gradient {
    background-image: linear-gradient(-170deg, #182432 50%, #173a4c 110%);
}

.page-title {
    display: block;
}

/*.page-title::after {
    content: ' ';
    clear: both;
    width: 100px;
    margin-top: 10px;
    display: block;
    background-color: #d3b88e;
    height: 5px;
}*/

.hex:before {
    content: " ";
    width: 0;
    height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

/** Inks backgrounds **/

.deck-header-animate {
    text-shadow: 0px 0px 1px white;
    aborder-radius: 6px;
    background-color: rgba(0, 0, 0, 0.3);
    aborder: 1px solid #ffffff2e;
    aborder-bottom: 1px solid #ffffff99;
    abackground: #F8EEDF;
    acolor: black;

}

.visual-deck-background {
    background: linear-gradient(135deg, #b3a57a 10%, #41444a 100%);
}

.visual-deck-background h2 {
    color: white;
    afont-weight: 300;
    text-shadow: 0px 0px 1px #00000055;
}

.body-calm,
.calm-body {
    background: linear-gradient(135deg, var(--domain-body) 10%, var(--domain-calm) 100%);
}

.body-chaos,
.chaos-body {
    background: linear-gradient(135deg, var(--domain-chaos) 10%, var(--domain-body) 100%);
}

.body-fury,
.fury-body {
    background: linear-gradient(135deg, var(--domain-body) 10%, var(--domain-fury) 100%);
}

.body-mind,
.mind-body {
    background: linear-gradient(135deg, var(--domain-body) 10%, var(--domain-mind) 100%);
}

.body-order,
.order-body {
    background: linear-gradient(135deg, var(--domain-body) 10%, var(--domain-order) 100%);
}

/* CALM PAIRS */
.calm-chaos,
.chaos-calm {
    background: linear-gradient(135deg, var(--domain-calm) 10%, var(--domain-chaos) 100%);
}

.calm-fury,
.fury-calm {
    background: linear-gradient(135deg, var(--domain-calm) 10%, var(--domain-fury) 100%);
}

.calm-mind,
.mind-calm {
    background: linear-gradient(135deg, var(--domain-calm) 10%, var(--domain-mind) 100%);
}

.calm-order,
.order-calm {
    background: linear-gradient(135deg, var(--domain-calm) 10%, var(--domain-order) 100%);
}

/* CHAOS PAIRS */
.chaos-fury,
.fury-chaos {
    background: linear-gradient(135deg, var(--domain-chaos) 10%, var(--domain-fury) 100%);
}

.chaos-mind,
.mind-chaos {
    background: linear-gradient(135deg, var(--domain-chaos) 10%, var(--domain-mind) 100%);
}

.chaos-order,
.order-chaos {
    background: linear-gradient(135deg, var(--domain-chaos) 10%, var(--domain-order) 100%);
}

/* FURY PAIRS */
.fury-mind,
.mind-fury {
    background: linear-gradient(135deg, var(--domain-fury) 10%, var(--domain-mind) 100%);
}

.fury-order,
.order-fury {
    background: linear-gradient(135deg, var(--domain-fury) 10%, var(--domain-order) 100%);
}

/* MIND / ORDER */
.mind-order,
.order-mind {
    background: linear-gradient(135deg, var(--domain-mind) 10%, var(--domain-order) 100%);
}

.text-sapphire {
    color: var(--Text-Sapphire)
}

.bg-sapphire {
    background-color: #1583b6;
}

.bg-gradient-sapphire {
    background: linear-gradient(45deg, #23455b, transparent) !important;
}

.text-ruby {
    color: var(--Text-Ruby)
}

.bg-ruby {
    background-color: #b61515;
}

.bg-gradient-ruby {
    background: linear-gradient(45deg, #6f2723, transparent) !important;
}

.text-amber {
    color: var(--Text-Amber)
}

.bg-amber {
    background-color: #ffe81c;
}

.bg-gradient-amber {
    background: linear-gradient(45deg, #775025, transparent) !important;
}

.text-amethyst {
    color: var(--Text-Amethyst)
}

.bg-amethyst {
    background-color: #7b008e;
}

.bg-gradient-amethyst {
    background: linear-gradient(45deg, #4e2a47, transparent) !important;
}

.text-emerald {
    color: var(--Text-Emerald)
}

.bg-emerald {
    background-color: #57c023;
}

.bg-gradient-emerald {
    background: linear-gradient(45deg, #2b7a2b, transparent) !important;
}

.text-steel {
    color: var(--Text-Steel)
}

.bg-steel {
    background-color: #e4f2ff;
}

.bg-gradient-steel {
    background: linear-gradient(45deg, #414449, transparent) !important;
}

.quantity-badge {
    position: absolute;
    margin-bottom: 0px;
    font-size: 24px;

    left: 50%;
    bottom: 0;
    margin-left: -20px;
    margin-bottom: -10px;
    /*
    right: 0;
    bottom:0;
    background: none;
*/

}

.quantity-badge .badge {

    background: #111924ee;
    color: white;
    font-weight: 700;
    box-shadow: 0px 0px 10px 1px black;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
}

.quantity-badge .badge-x {
    font-size: 14px !important;
    font-weight: 500 !important;
}

.visual-grid .quantity-badge {
    right: 0;
    bottom: 0;
    margin: 0;
    left: auto;

}

.visual-grid .quantity-badge .badge {
    background: #111924;
    border-radius: 0;
}

/*
.quantity-badge.colorless .badge {
    border-color: white !important;
}

.quantity-badge.order .badge {
    border-color: var(--domain-order) !important;
}

.quantity-badge.calm .badge {
    border-color: var(--domain-calm) !important;
}

.quantity-badge.fury .badge {
    border-color: var(--domain-fury) !important;
}

.quantity-badge.mind .badge {
    border-color: var(--domain-mind) !important;
}

.quantity-badge.chaos .badge {
    border-color: var(--domain-chaos) !important;
}

.quantity-badge.body .badge {
    border-color: var(--domain-body) !important;
}
    
*/





.cleanerSelect .form-selectgroup-input:focus+.form-selectgroup-label {
    z-index: 2;
    color: white;
    border-color: var(--tblr-border-color-translucent);
    box-shadow: none;
}

.cleanerSelect .form-selectgroup-input:checked+.form-selectgroup-label {
    z-index: 1;
    color: white;
    background: rgba(var(--tblr-primary-rgb), 0.5);
    border-color: var(--tblr-primary);
}

up-popup,
up-cover-box,
up-drawer-box,
up-modal-box {
    background-color: #182432;
}

.horizontal-scroll {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}


label {
    color: #d3b88e;
    font-size: 11px;
    text-transform: uppercase;
}

.invalid-feedback {
    margin: 10px 0;
}

.table-sort {
    cursor: pointer;
    color: #667381;
}




.article {
    font-size: 18px;
    color: #e5e5e5;
    font-weight: 200;
}

.article>*+* {
    margin-top: var(--flow-space, 1em);
}

.article h1 {
    font-size: 38px !important;
    font-weight: 600;
    line-height: 1.2;
    color: white;
}

.article h2 {
    font-size: 24px !important;
    margin-top: 40px;
    font-weight: 700;
    margin-bottom: -10px;
    color: white;
}


.article h3 {
    margin-top: 40px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #e7d9c5;
    margin-bottom: -10px;
}


.article p,
.article li,
.article ul,
.article ol,
.article figure {
    max-width: 50ch;
    line-height: 130%;
}

.article img {
    margin: 0 auto !important;
    max-width: 100%;
    max-height: 450px;
}

/** for big screen max image width 450px **/
@media (min-width: 800px) {
    .article img {
        max-width: 450px;
    }
}

.toc {
    background: #00000030;
    padding: 20px;
    display: block;
    border-radius: 5px;
}

ul.toc {
    list-style-position: inside;
    color: #d3b88e;
    list-style-type: square;
}

ul.toc a {
    color: #d3b88e;
}

input[readonly] {
    font-style: italic;
    color: #a39989;
    -webkit-touch-callout: none;
}


.deck-tabs {
    border-bottom: 1px solid #d3b88e5d;
}

.deck-tabs .nav-link {
    color: #d3b88e;
    aborder-color: #d3b88e5d;
    border-bottom-color: transparent;
    margin-right: 5px;
    cursor: pointer;
}

.deck-tabs .nav-link.active {
    border-color: #d3b88e5d;
    border-bottom-color: #151f2b;
}

#text-decklist-container {}

/* bigger screens */
@media (min-width: 1200px) {
    #text-decklist-container {
        background-color: #00000030;
        border-radius: 5px;
    }

    .cropped-image-character {
        border-radius: 3px;
    }
}

.decklist-card-image[data-orientation=landscape] .card-image {
    transform: rotate(90deg) scale(0.75) translateX(-40%);
    margin-left: 10px;
}

.decklist-card-image[data-orientation=landscape] .quantity-badge {


    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    margin-right: -5px;
    margin-top: -20px;
}

.decklist-card-image[data-orientation=landscape] .quantity-badge .badge {
    transform: rotate(-90deg);
}

.responsive-embed {
    position: relative;
    padding-bottom: 56.25%;
    /* Aspect ratio 16:9 (calculated as 315/560 * 100%) */
    height: 0;
    overflow: hidden;
}

.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.theme-dark-auto .ts-control,
.theme-dark-auto .ts-control input {
    border: 1px solid #202e40;
    background-color: #151f2b;
    color: #fcfdfe;
}

.theme-dark-auto .ts-wrapper.single.input-active .ts-control {
    background-color: #151f2b;
    color: #fcfdfe;
}


.theme-dark-auto .full .ts-control {
    background-color: #151f2b;
    color: #fcfdfe;
}

.theme-dark-auto .ts-dropdown {
    z-index: 9999999;
}


.col-5th {
    flex: 0 0 20%;
    max-width: 20%;
}

/* Small (≥576px) */
@media (min-width: 576px) {
    .col-sm-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Medium (≥768px) */
@media (min-width: 768px) {
    .col-md-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Large (≥992px) */
@media (min-width: 992px) {
    .col-lg-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Extra large (≥1200px) */
@media (min-width: 1200px) {
    .col-xl-5th {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.col-7th {
    flex: 0 0 14.285714%;
    max-width: 14.285714%;
}

/* Small (≥576px) */
@media (min-width: 576px) {
    .col-sm-7th {
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }
}

/* Medium (≥768px) */
@media (min-width: 768px) {
    .col-md-7th {
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }
}

/* Large (≥992px) */
@media (min-width: 992px) {
    .col-lg-7th {
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }
}

/* Extra large (≥1200px) */
@media (min-width: 1200px) {
    .col-xl-7th {
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }
}

/* Modern pill-style nav tabs
   Usage: class="nav nav-pills-modern nav-pills-modern-yellow"
          class="nav nav-pills-modern-small nav-pills-modern-teal"
   Default active color: yellow/amber */
ul.nav-pills-modern,
ul.nav-pills-modern-small {
    --mt-color: var(--tblr-yellow);
    --mt-color-rgb: var(--tblr-yellow-rgb);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: none !important;
}

ul.nav-pills-modern {
    gap: 6px;
}

ul.nav-pills-modern-small {
    gap: 4px;
}

ul.nav-pills-modern .nav-link,
ul.nav-pills-modern-small .nav-link {
    border-radius: 2rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid transparent !important;
    font-weight: 600 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

ul.nav-pills-modern .nav-link {
    padding: 0.35rem 1.1rem !important;
    font-size: 0.875rem !important;
}

ul.nav-pills-modern-small .nav-link {
    padding: 0.2rem 0.75rem !important;
    font-size: 0.775rem !important;
}

ul.nav-pills-modern .nav-link:hover,
ul.nav-pills-modern-small .nav-link:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

ul.nav-pills-modern .nav-link.active,
ul.nav-pills-modern-small .nav-link.active {
    background: rgba(var(--mt-color-rgb), 0.12) !important;
    border-color: var(--mt-color) !important;
    color: var(--mt-color) !important;
}

/* Color modifiers — apply alongside nav-pills-modern or nav-pills-modern-small */
ul.nav-pills-modern-primary,
ul.nav-pills-modern-small-primary {
    --mt-color: var(--tblr-primary);
    --mt-color-rgb: var(--tblr-primary-rgb);
}

ul.nav-pills-modern-yellow,
ul.nav-pills-modern-small-yellow {
    --mt-color: var(--tblr-yellow);
    --mt-color-rgb: var(--tblr-yellow-rgb);
}

ul.nav-pills-modern-orange,
ul.nav-pills-modern-small-orange {
    --mt-color: var(--tblr-orange);
    --mt-color-rgb: var(--tblr-orange-rgb);
}

ul.nav-pills-modern-teal,
ul.nav-pills-modern-small-teal {
    --mt-color: var(--tblr-teal);
    --mt-color-rgb: var(--tblr-teal-rgb);
}

ul.nav-pills-modern-azure,
ul.nav-pills-modern-small-azure {
    --mt-color: var(--tblr-azure);
    --mt-color-rgb: var(--tblr-azure-rgb);
}

ul.nav-pills-modern-cyan,
ul.nav-pills-modern-small-cyan {
    --mt-color: var(--tblr-cyan);
    --mt-color-rgb: var(--tblr-cyan-rgb);
}

ul.nav-pills-modern-indigo,
ul.nav-pills-modern-small-indigo {
    --mt-color: var(--tblr-indigo);
    --mt-color-rgb: var(--tblr-indigo-rgb);
}

ul.nav-pills-modern-red,
ul.nav-pills-modern-small-red {
    --mt-color: var(--tblr-red);
    --mt-color-rgb: var(--tblr-red-rgb);
}

ul.nav-pills-modern-green,
ul.nav-pills-modern-small-green {
    --mt-color: var(--tblr-green);
    --mt-color-rgb: var(--tblr-green-rgb);
}

/* Underline-style nav tabs
   Usage: class="nav-tabs-modern"
   Default active color: yellow/amber */
ul.nav-tabs-modern {
    --ntm-color: var(--tblr-yellow);
    --ntm-color-rgb: var(--tblr-yellow-rgb);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(var(--ntm-color-rgb), 0.2);
    background: #242f3c;    
}

ul.nav-tabs-modern .nav-link {
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    padding: 0.45rem 1.1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tblr-muted);
    background: transparent;
    margin-bottom: -1px;
    text-decoration: none;
    display: block;
    color: #ffffffaa;
}

ul.nav-tabs-modern .nav-link:hover {
    color: var(--ntm-color);
    border-bottom-color: rgba(var(--ntm-color-rgb), 0.4);
}

ul.nav-tabs-modern .nav-link.active {
    color: var(--ntm-color) !important;
    border-bottom-color: var(--ntm-color) !important;
    background: rgba(var(--ntm-color-rgb), 0.08);
}

/* Clean underline-style nav tabs — no background, amber active underline
   Usage: class="nav-tabs-clean" */
ul.nav-tabs-clean {
    --ntc-color:     var(--theme-primary-color);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
ul.nav-tabs-clean .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    margin-bottom: -1px;
    text-decoration: none;
    display: block;
}
ul.nav-tabs-clean .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
ul.nav-tabs-clean .nav-link.active {
    color: #ffffff !important;
    font-weight: 700;
    border-bottom-color: var(--ntc-color) !important;
    background: transparent;
}