/* =====================================================
   GT AUTO TOP SELLING
   GESTTECH Enterprise
   Style v4.0
   Dark Premium / Responsive
===================================================== */


/* =====================================================
   RESET
===================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    min-height:100vh;

    background:

        radial-gradient(
            circle at top right,
            rgba(37,99,235,.10),
            transparent 35%
        ),

        #0b0e14;

    color:#eef2ff;

    font-family:

        "Segoe UI",

        Arial,

        Helvetica,

        sans-serif;

    max-width:1800px;

    margin:auto;

    padding:28px;

}


/* =====================================================
   ROOT
===================================================== */

:root{

    --bg:#0b0e14;

    --card:#151a23;

    --card2:#1b212c;

    --card3:#202735;

    --border:#293242;

    --border-light:#344054;

    --primary:#2563eb;

    --primary-light:#3b82f6;

    --primary-soft:#60a5fa;

    --text:#f8fafc;

    --muted:#94a3b8;

    --muted2:#64748b;

    --success:#22c55e;

    --warning:#f59e0b;

    --danger:#ef4444;

    --shadow:

        0 12px 35px

        rgba(0,0,0,.28);

}


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

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:20px;

    margin-bottom:28px;

    border-bottom:

        1px solid

        rgba(255,255,255,.06);

}


.header-left{

    display:flex;

    align-items:center;

    gap:18px;

}


/* =====================================================
   LOGO
===================================================== */

.logo{

    width:68px;

    height:68px;

    object-fit:contain;

    padding:9px;

    border-radius:18px;

    background:

        linear-gradient(

            145deg,

            #1b222e,

            #11161e

        );

    border:

        1px solid

        var(--border);

    box-shadow:

        0 0 25px

        rgba(37,99,235,.12),

        inset

        0 1px

        rgba(255,255,255,.05);

    transition:.25s ease;

}


.logo:hover{

    transform:

        translateY(-2px)

        scale(1.03);

    box-shadow:

        0 0 35px

        rgba(37,99,235,.25);

}


/* =====================================================
   TITLE
===================================================== */

.header h1{

    font-size:42px;

    line-height:1.1;

    font-weight:750;

    letter-spacing:.5px;

    color:white;

}


.creator{

    margin-top:9px;

    font-size:10px;

    color:#71809a;

    letter-spacing:3px;

    text-transform:uppercase;

}


/* =====================================================
   TOOLBAR
===================================================== */

.toolbar{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    background:

        linear-gradient(

            145deg,

            rgba(23,29,39,.96),

            rgba(17,22,30,.96)

        );

    border:

        1px solid

        var(--border);

    border-radius:18px;

    padding:16px;

    margin-bottom:20px;

    box-shadow:

        var(--shadow);

}


/* =====================================================
   FILE INPUT
===================================================== */

input[type=file]{

    flex:1;

    min-width:260px;

    height:46px;

    color:var(--muted);

    background:#0f141c;

    border:

        1px dashed

        #3b4657;

    border-radius:12px;

    padding:10px;

    cursor:pointer;

    transition:.25s ease;

}


input[type=file]:hover{

    border-color:

        var(--primary);

    background:#141b25;

}


/* =====================================================
   BUTTON
===================================================== */

button{

    height:46px;

    padding:

        0 24px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--primary-light)

        );

    color:white;

    border:none;

    border-radius:12px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.2px;

    cursor:pointer;

    transition:.25s ease;

    white-space:nowrap;

    box-shadow:

        0 6px 18px

        rgba(37,99,235,.25);

}


button:hover{

    transform:

        translateY(-2px);

    box-shadow:

        0 10px 25px

        rgba(37,99,235,.35);

}


button:active{

    transform:

        scale(.98);

}


/* =====================================================
   FILTER
===================================================== */

.filter{

    display:grid;

    grid-template-columns:

        repeat(

            6,

            minmax(150px,1fr)

        );

    gap:12px;

    margin-bottom:22px;

}


/* =====================================================
   FILTER INPUT / SELECT
===================================================== */

.filter input,

.filter select{

    width:100%;

    height:46px;

    padding:

        0 14px;

    background:

        linear-gradient(

            145deg,

            #171c25,

            #131820

        );

    color:white;

    border:

        1px solid

        var(--border);

    border-radius:12px;

    font-size:13px;

    transition:.25s ease;

}


.filter input::placeholder{

    color:#64748b;

}


.filter input:focus,

.filter select:focus{

    outline:none;

    border-color:

        var(--primary-light);

    box-shadow:

        0 0 0 3px

        rgba(37,99,235,.15);

}


/* =====================================================
   SEARCH
===================================================== */

#search{

    grid-column:

        span 2;

}


/* =====================================================
   SUMMARY AREA
===================================================== */

.summary{

    display:grid;

    grid-template-columns:

        repeat(

            5,

            minmax(0,1fr)

        );

    gap:16px;

    margin-bottom:26px;

}


/* =====================================================
   SUMMARY CARD
===================================================== */

.card{

    min-width:0;

    min-height:138px;

    background:

        linear-gradient(

            145deg,

            #171d27,

            #141922

        );

    border:

        1px solid

        var(--border);

    border-radius:18px;

    padding:21px;

    box-shadow:

        var(--shadow);

    position:relative;

    overflow:hidden;

    transition:.25s ease;

}


.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:4px;

    height:100%;

    background:

        linear-gradient(

            to bottom,

            var(--primary),

            var(--primary-soft)

        );

}


.card::after{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    right:-45px;

    top:-45px;

    background:

        radial-gradient(

            circle,

            rgba(59,130,246,.12),

            transparent 70%

        );

    pointer-events:none;

}


.card:hover{

    transform:

        translateY(-3px);

    border-color:

        rgba(59,130,246,.45);

}


.card .title{

    font-size:11px;

    color:#8fa0b8;

    letter-spacing:1px;

    font-weight:600;

    text-transform:uppercase;

}


.card .value{

    margin-top:12px;

    font-size:34px;

    line-height:1.1;

    font-weight:750;

    color:white;

    letter-spacing:-.5px;

    word-break:break-word;

}


/* =====================================================
DISCOUNT SUMMARY TITLE
===================================================== */

.discount-summary-title{

    grid-column:
        1 / -1;

    margin-top:8px;

    margin-bottom:2px;

    padding:
        4px 2px;

    color:#e2e8f0;

    font-size:13px;

    font-weight:750;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* =====================================================
DISCOUNT TABLE WRAPPER
===================================================== */

.discount-table-wrap{

    grid-column:
        1 / -1;

    width:100%;

    background:
        linear-gradient(
            145deg,
            #151b25,
            #10151d
        );

    border:
        1px solid
        #293242;

    border-radius:16px;

    overflow-x:auto;

    overflow-y:hidden;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.24);

}


/* =====================================================
DISCOUNT TABLE
===================================================== */

.discount-table{

    width:100%;

    min-width:720px;

    border-collapse:collapse;

    table-layout:auto;

}


/* =====================================================
DISCOUNT TABLE HEADER
===================================================== */

.discount-table thead{

    position:static;

}


.discount-table th{

    background:
        linear-gradient(
            180deg,
            #242b38,
            #1e2531
        );

    color:#f8fafc;

    padding:
        13px 14px;

    border-bottom:
        1px solid
        #344054;

    font-size:11px;

    font-weight:750;

    letter-spacing:.55px;

    white-space:nowrap;

}


.discount-table th:first-child{

    border-top-left-radius:14px;

}


.discount-table th:last-child{

    border-top-right-radius:14px;

}


/* =====================================================
DISCOUNT TABLE BODY
===================================================== */

.discount-table td{

    padding:
        12px 14px;

    color:#dbe3ef;

    font-size:12px;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);

    white-space:nowrap;

}


.discount-table tbody tr{

    transition:
        background .18s ease,
        color .18s ease;

}


.discount-table tbody tr:nth-child(even){

    background:
        rgba(255,255,255,.012);

}


.discount-table tbody tr:hover{

    background:
        rgba(37,99,235,.075);

}


.discount-table tbody tr:hover td{

    color:#ffffff;

}


.discount-table tbody tr:last-child td{

    border-bottom:none;

}


/* =====================================================
DISCOUNT RANK
===================================================== */

.discount-table td:first-child{

    color:#60a5fa;

    font-weight:750;

}


/* =====================================================
DISCOUNT VALUE
===================================================== */

.discount-table td:nth-child(2){

    color:#f8fafc;

    font-weight:700;

}


/* =====================================================
DISCOUNT QTY
===================================================== */

.discount-table td:nth-child(3){

    font-weight:650;

}


/* =====================================================
DISCOUNT SALES VALUE
===================================================== */

.discount-table td:nth-child(4){

    color:#e2e8f0;

    font-weight:650;

}


/* =====================================================
DISCOUNT CONTRIBUTION
===================================================== */

.discount-table td:nth-child(5){

    color:#93c5fd;

    font-weight:750;

}


/* =====================================================
DISCOUNT TOTAL ROW
===================================================== */

.discount-table tbody tr.ranking-total{

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.14),
            rgba(37,99,235,.06)
        );

    border-top:
        1px solid
        rgba(59,130,246,.35);

}


.discount-table tbody tr.ranking-total td{

    color:#ffffff;

    font-weight:750;

    border-bottom:none;

    padding-top:14px;

    padding-bottom:14px;

}


.discount-table tbody tr.ranking-total td:first-child{

    color:#60a5fa;

}


.discount-table tbody tr.ranking-total td:last-child{

    color:#93c5fd;

    font-weight:800;

}


/* =====================================================
DISCOUNT EMPTY
===================================================== */

.discount-table .empty{

    padding:
        55px 20px !important;

    text-align:center !important;

    color:#64748b !important;

    font-size:13px !important;

    font-weight:600 !important;

}

/* =====================================================
CONTRIBUTION RANKING SECTION
===================================================== */

.contribution-ranking-title{

    grid-column:
        1 / -1;

    margin-top:10px;

    margin-bottom:2px;

    color:#f8fafc;

    font-size:14px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* =====================================================
RANKING CARD
===================================================== */

.ranking-card{

    min-width:0;

    background:
        linear-gradient(
            145deg,
            #151b25,
            #10151d
        );

    border:
        1px solid
        #293242;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.22);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.ranking-card:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(59,130,246,.35);

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.30);

}


/* =====================================================
RANKING CARD TITLE
===================================================== */

.ranking-card-title{

    padding:
        14px 16px 12px;

    background:
        linear-gradient(
            145deg,
            #192131,
            #141a24
        );

    color:#60a5fa;

    font-size:12px;

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;

    border-bottom:
        1px solid
        #293242;

}


/* =====================================================
RANKING TABLE
===================================================== */

.ranking-table{

    width:100%;

    border-collapse:collapse;

    table-layout:auto;

}


/* =====================================================
RANKING TABLE HEADER
===================================================== */

.ranking-table th{

    padding:
        11px 12px;

    background:#202734;

    color:#e5e7eb;

    font-size:10px;

    font-weight:750;

    letter-spacing:.35px;

    white-space:nowrap;

    border-bottom:
        1px solid
        #344054;

}


/* =====================================================
RANKING TABLE BODY
===================================================== */

.ranking-table td{

    padding:
        10px 12px;

    color:#dbe3ef;

    font-size:11px;

    white-space:nowrap;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);

}


/* =====================================================
RANKING ROW
===================================================== */

.ranking-table tbody tr{

    transition:
        background .18s ease;

}


.ranking-table tbody tr:nth-child(even){

    background:
        rgba(255,255,255,.012);

}


.ranking-table tbody tr:hover{

    background:
        rgba(37,99,235,.075);

}


.ranking-table tbody tr:hover td{

    color:#ffffff;

}


.ranking-table tbody tr:last-child td{

    border-bottom:none;

}


/* =====================================================
RANK NUMBER
===================================================== */

.ranking-table td:first-child{

    color:#60a5fa;

    font-weight:750;

}


/* =====================================================
RANKING NAME
===================================================== */

.ranking-table td:nth-child(2){

    color:#f8fafc;

    font-weight:650;

}


/* =====================================================
RANKING QTY
===================================================== */

.ranking-table td:nth-child(3){

    font-weight:650;

}


/* =====================================================
RANKING SALES
===================================================== */

.ranking-table td:nth-child(4){

    color:#e2e8f0;

    font-weight:650;

}


/* =====================================================
RANKING CONTRIBUTION
===================================================== */

.ranking-table td:nth-child(5){

    color:#93c5fd;

    font-weight:750;

}


/* =====================================================
RANKING TOTAL
===================================================== */

.ranking-table tbody tr.ranking-total{

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.15),
            rgba(37,99,235,.055)
        );

    border-top:
        1px solid
        rgba(59,130,246,.35);

}


.ranking-table tbody tr.ranking-total td{

    padding-top:12px;

    padding-bottom:12px;

    color:#ffffff;

    font-weight:750;

    border-bottom:none;

}


.ranking-table tbody tr.ranking-total td:first-child{

    color:#60a5fa;

}


.ranking-table tbody tr.ranking-total td:nth-child(5){

    color:#93c5fd;

    font-weight:800;

}


/* =====================================================
RANKING EMPTY
===================================================== */

.ranking-table .empty{

    padding:
        45px 15px !important;

    text-align:center !important;

    color:#64748b !important;

    font-size:12px !important;

    font-weight:600 !important;

}

/* =====================================================
   MAIN TABLE WRAPPER
===================================================== */

.table-wrap{

    width:100%;

    background:

        linear-gradient(

            145deg,

            #151b25,

            #11161e

        );

    border:

        1px solid

        var(--border);

    border-radius:18px;

    overflow:auto;

    box-shadow:

        var(--shadow);

}


/* =====================================================
   MAIN TABLE
===================================================== */

.table-wrap table{

    width:100%;

    min-width:1250px;

    border-collapse:collapse;

    table-layout:auto;

}


/* =====================================================
   MAIN TABLE HEADER
===================================================== */

.table-wrap thead{

    position:sticky;

    top:0;

    z-index:20;

}


.table-wrap th{

    background:#202734;

    color:#f8fafc;

    padding:

        13px 12px;

    text-align:left;

    font-size:11px;

    font-weight:700;

    letter-spacing:.35px;

    border-bottom:

        1px solid

        var(--border);

    white-space:nowrap;

}


/* =====================================================
   MAIN TABLE BODY
===================================================== */

.table-wrap td{

    padding:

        12px;

    font-size:12px;

    color:#dbe3ef;

    border-bottom:

        1px solid

        rgba(255,255,255,.045);

    vertical-align:middle;

}


.table-wrap tbody tr{

    transition:.18s ease;

}


.table-wrap tbody tr:nth-child(even){

    background:

        rgba(255,255,255,.012);

}


.table-wrap tbody tr:hover{

    background:

        rgba(37,99,235,.08);

}


.table-wrap tbody tr:hover td{

    color:white;

}


.table-wrap tbody tr:last-child td{

    border-bottom:none;

}


/* =====================================================
   MAIN TABLE COLUMN EMPHASIS
===================================================== */

.table-wrap td:first-child{

    color:#60a5fa;

    font-weight:750;

}


.table-wrap td:nth-child(3){

    color:white;

    font-weight:600;

}


.table-wrap td:nth-child(9){

    font-weight:700;

}


.table-wrap td:nth-child(10){

    color:#93c5fd;

    font-weight:650;

    white-space:nowrap;

}


.table-wrap td:nth-child(11){

    color:#e2e8f0;

    font-weight:650;

    white-space:nowrap;

}


.table-wrap td:nth-child(12){

    font-weight:700;

    white-space:nowrap;

}


/* =====================================================
CONTRIBUTION RANKING TOTAL
===================================================== */

.ranking-total{

    background:

        rgba(
            37,
            99,
            235,
            .10
        );

    border-top:

        1px solid

        rgba(
            59,
            130,
            246,
            .35
        );

    font-weight:750;

}


.ranking-total td{

    color:#f8fafc !important;

    font-weight:750;

}


.ranking-total td:first-child{

    color:#64748b !important;

}

/* =====================================================
   ALIGN
===================================================== */

.center{

    text-align:center !important;

}


.right{

    text-align:right !important;

}


/* =====================================================
   DISCOUNT STATUS
===================================================== */

.discount-status{

    text-align:center;

    font-weight:700;

    white-space:nowrap;

}


/* =====================================================
   EMPTY
===================================================== */

.empty{

    padding:

        55px 20px !important;

    text-align:center !important;

    color:#64748b !important;

    font-size:13px !important;

    font-weight:600 !important;

}


/* =====================================================
   LOADING
===================================================== */

#loading{

    position:fixed;

    inset:0;

    background:

        rgba(7,10,15,.88);

    backdrop-filter:

        blur(10px);

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:99999;

}


#loading.show{

    display:flex;

}


.loader{

    width:58px;

    height:58px;

    border-radius:50%;

    border:

        4px solid

        rgba(255,255,255,.08);

    border-top:

        4px solid

        var(--primary-light);

    animation:

        spin .8s linear infinite;

    box-shadow:

        0 0 35px

        rgba(37,99,235,.25);

}


#loading p{

    margin-top:18px;

    color:#e2e8f0;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

}


@keyframes spin{

    from{

        transform:

            rotate(0deg);

    }

    to{

        transform:

            rotate(360deg);

    }

}


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

.footer{

    margin-top:34px;

    padding:

        20px 0;

    border-top:

        1px solid

        rgba(255,255,255,.06);

    text-align:center;

    color:#64748b;

    line-height:24px;

    font-size:11px;

}


.footer-small{

    display:inline-block;

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;

    color:#94a3b8;

    text-transform:uppercase;

}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:9px;

    height:9px;

}


::-webkit-scrollbar-track{

    background:#0d1118;

}


::-webkit-scrollbar-thumb{

    background:#374151;

    border-radius:50px;

}


::-webkit-scrollbar-thumb:hover{

    background:#4b5563;

}


/* =====================================================
   SELECTION
===================================================== */

::selection{

    background:#2563eb;

    color:white;

}


/* =====================================================
   TRANSITIONS
===================================================== */

button,

.card,

.logo,

.filter input,

.filter select{

    transition:

        all .25s ease;

}


/* =====================================================
   RESPONSIVE
===================================================== */


/* -----------------------------------------------------
   1500px
----------------------------------------------------- */

@media(max-width:1500px){

    .summary{

        grid-template-columns:

            repeat(

                5,

                minmax(170px,1fr)

            );

    }


    .card .value{

        font-size:30px;

    }

}


/* -----------------------------------------------------
   1250px
----------------------------------------------------- */

@media(max-width:1250px){

    body{

        padding:22px;

    }


    .filter{

        grid-template-columns:

            repeat(

                4,

                minmax(150px,1fr)

            );

    }


    #search{

        grid-column:

            span 2;

    }


    .summary{

        grid-template-columns:

            repeat(

                3,

                minmax(180px,1fr)

            );

    }


    .discount-summary-title,

    .discount-table-wrap{

        grid-column:

            1 / -1;

    }

}


/* -----------------------------------------------------
   1000px
----------------------------------------------------- */

@media(max-width:1000px){

    .header h1{

        font-size:32px;

    }


    .filter{

        grid-template-columns:

            repeat(

                3,

                minmax(150px,1fr)

            );

    }


    #search{

        grid-column:

            span 3;

    }


    .summary{

        grid-template-columns:

            repeat(

                2,

                minmax(200px,1fr)

            );

    }


    .discount-summary-title,

    .discount-table-wrap{

        grid-column:

            1 / -1;

    }

}


/* -----------------------------------------------------
   768px
----------------------------------------------------- */

@media(max-width:768px){

    body{

        padding:15px;

    }


    .header{

        margin-bottom:20px;

    }


    .header-left{

        gap:14px;

    }


    .logo{

        width:58px;

        height:58px;

        border-radius:15px;

    }


    .header h1{

        font-size:25px;

        line-height:1.2;

    }


    .creator{

        font-size:9px;

        letter-spacing:2px;

    }


    .toolbar{

        padding:13px;

        border-radius:15px;

    }


    .toolbar > *{

        width:100%;

    }


    input[type=file]{

        min-width:0;

        width:100%;

    }


    button{

        width:100%;

    }


    .filter{

        grid-template-columns:

            1fr 1fr;

        gap:10px;

    }


    #search{

        grid-column:

            1 / -1;

    }


    .summary{

        grid-template-columns:

            1fr 1fr;

        gap:12px;

    }


    .card{

        min-height:125px;

        padding:18px;

        border-radius:15px;

    }


    .card .value{

        font-size:27px;

    }


    .discount-summary-title,

    .discount-table-wrap{

        grid-column:

            1 / -1;

    }


    .discount-table{

        min-width:700px;

    }


    .table-wrap{

        border-radius:15px;

    }


    .table-wrap table{

        min-width:1250px;

    }


    .table-wrap th{

        padding:

            12px 10px;

        font-size:10px;

    }


    .table-wrap td{

        padding:

            11px 10px;

        font-size:11px;

    }

}


/* -----------------------------------------------------
   560px
----------------------------------------------------- */

@media(max-width:560px){

    body{

        padding:12px;

    }


    .header-left{

        align-items:flex-start;

    }


    .header h1{

        font-size:21px;

    }


    .creator{

        font-size:8px;

        letter-spacing:1.8px;

    }


    .filter{

        grid-template-columns:

            1fr;

    }


    #search{

        grid-column:auto;

    }


    .summary{

        grid-template-columns:

            1fr;

        gap:10px;

    }


    .card{

        min-height:110px;

    }


    .card .value{

        font-size:28px;

    }


    .discount-summary-title{

        font-size:12px;

        padding-top:5px;

    }


    .discount-table-wrap{

        border-radius:14px;

    }


    .discount-table{

        min-width:680px;

    }


    .discount-table th,

    .discount-table td{

        padding:

            11px 12px;

    }


    .table-wrap{

        border-radius:14px;

    }


    .empty{

        padding:

            45px 15px !important;

    }


    .footer{

        margin-top:25px;

    }

}


/* -----------------------------------------------------
   400px
----------------------------------------------------- */

@media(max-width:400px){

    .header-left{

        flex-direction:column;

        align-items:flex-start;

    }


    .logo{

        width:52px;

        height:52px;

    }


    .header h1{

        font-size:20px;

    }


    .card{

        padding:16px;

    }


    .card .title{

        font-size:10px;

    }


    .card .value{

        font-size:25px;

    }


    .discount-table{

        min-width:660px;

    }

}

/* =====================================================
   FIX DARK DROPDOWN
   ===================================================== */

html {
    color-scheme: dark;
}

.filter select {
    background-color: #171b23;
    color: #f8fafc;
    color-scheme: dark;
}

.filter select option {
    background-color: #171b23;
    color: #f8fafc;
}

.filter select option:checked {
    background-color: #2563eb;
    color: #ffffff;
}

/* =====================================================
   DARK SELECT DROPDOWN FIX
===================================================== */

html {
    color-scheme: dark;
}

.filter select {
    color-scheme: dark;
    background-color: #171b23;
    color: #f8fafc;
}

.filter select option {
    background-color: #171b23;
    color: #f8fafc;
}

.filter select option:checked {
    background-color: #2563eb;
    color: #ffffff;
}