/* ===========================
2026 DASHBOARD UI
=========================== */

@import url("https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css");

:root{

    --primary:#7DAACB;
    --secondary:#E8DBB3;
    --bg:#FFFDEB;
    --danger:#CE2626;

    --success:#38b66b;

    --gold:#d9a520;

    --dark:#233142;

    --glass:rgba(255,255,255,.58);

    --border:rgba(255,255,255,.32);

    --shadow:0 20px 60px rgba(0,0,0,.08);

    --radius:28px;

    --transition:.35s;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:Vazir;

    direction:rtl;

    background:linear-gradient(135deg,#FFFDEB,#f6f7e9);

    overflow-x:hidden;

    color:var(--dark);

    min-height:100vh;

    position:relative;

}


/* ===========================
BACKGROUND BLOBS
=========================== */

.blob{

    position:fixed;

    border-radius:50%;

    filter:blur(80px);

    opacity:.45;

    z-index:-1;

    animation:float 12s ease-in-out infinite;

}

.blob1{

    width:420px;

    height:420px;

    background:#7DAACB;

    top:-120px;

    right:-120px;

}

.blob2{

    width:340px;

    height:340px;

    background:#E8DBB3;

    bottom:-100px;

    left:-100px;

    animation-delay:2s;

}

.blob3{

    width:250px;

    height:250px;

    background:#CE2626;

    opacity:.12;

    top:45%;

    left:35%;

    animation-delay:5s;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0);

    }

}


/* ===========================
CONTAINER
=========================== */

.container{

    width:95%;

    max-width:1700px;

    margin:auto;

    padding:35px;

}


/* ===========================
GLASS
=========================== */

.glass{

    background:var(--glass);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    border-radius:var(--radius);

}


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

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 35px;

    margin-bottom:35px;

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:28px;

    font-weight:800;

    color:var(--dark);

}

.logo i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:linear-gradient(135deg,#7DAACB,#6b98b7);

    color:white;

    box-shadow:0 10px 25px rgba(125,170,203,.35);

}

.welcome{

    font-size:18px;

    font-weight:600;

}

#clock{

    padding:12px 22px;

    background:white;

    border-radius:18px;

    font-weight:700;

    box-shadow:var(--shadow);

}


/* ===========================
DASHBOARD
=========================== */

.dashboard{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-bottom:35px;

}

.dash-card{

    background:white;

    border-radius:25px;

    padding:26px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:var(--shadow);

    transition:.35s;

    cursor:pointer;

}

.dash-card:hover{

    transform:translateY(-8px);

}

.icon{

    width:70px;

    height:70px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    background:#7DAACB;

    color:white;

}

.icon.green{

    background:var(--success);

}

.icon.red{

    background:var(--danger);

}

.icon.gold{

    background:var(--gold);

}

.dash-card h3{

    font-size:30px;

    margin-bottom:6px;

}

.dash-card p{

    color:#777;

}


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

.searchBox{

    padding:35px;

    margin-bottom:35px;

}

.title{

    font-size:24px;

    font-weight:700;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    gap:12px;

}

.searchArea{

    display:grid;

    grid-template-columns:1fr 1fr 1fr 1fr 180px;

    gap:20px;

}

.inputBox{

    height:62px;

    background:white;

    display:flex;

    align-items:center;

    padding:0 18px;

    border-radius:20px;

    box-shadow:0 8px 18px rgba(0,0,0,.05);

    transition:.3s;

}

.inputBox:hover{

    transform:translateY(-2px);

}

.inputBox i{

    color:#7DAACB;

    margin-left:10px;

    font-size:18px;

}

.inputBox input{

    width:100%;

    height:100%;

    border:none;

    outline:none;

    font-family:Vazir;

    font-size:15px;

    background:transparent;

}

#searchBtn{

    border:none;

    cursor:pointer;

    font-family:Vazir;

    font-size:17px;

    font-weight:700;

    border-radius:22px;

    background:linear-gradient(135deg,#7DAACB,#5e8fb1);

    color:white;

    transition:.3s;

}

#searchBtn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(125,170,203,.45);

}
/* ===========================
RESULT CARD
=========================== */

.resultCard{

    padding:35px;

    margin-bottom:35px;

    animation:fadeUp .45s ease;

}

.resultTop{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.resultTop h1{

    font-size:34px;

    font-weight:800;

    margin-bottom:15px;

    color:var(--dark);

}

#closeResult{

    border:none;

    background:linear-gradient(135deg,var(--danger),#a71d1d);

    color:white;

    padding:14px 28px;

    border-radius:18px;

    cursor:pointer;

    font-family:Vazir;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}

#closeResult:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(206,38,38,.25);

}

/* ===========================
BADGES
=========================== */

.badges{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.badge{

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    color:#fff;

    letter-spacing:.3px;

}

.success{

    background:#38b66b;

}

.danger{

    background:#CE2626;

}

.vip{

    background:#d9a520;

}

/* ===========================
INFO GRID
=========================== */

.infoGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:20px;

}

.infoItem{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    background:white;

    border-radius:22px;

    box-shadow:0 12px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.infoItem:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.infoItem i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:linear-gradient(135deg,#7DAACB,#6c98b6);

    color:white;

    font-size:22px;

    flex-shrink:0;

}

.infoItem div{

    display:flex;

    flex-direction:column;

    width:100%;

}

.infoItem label{

    font-size:13px;

    color:#777;

    margin-bottom:8px;

}

.infoItem span{

    font-size:17px;

    font-weight:700;

    color:#233142;

    word-break:break-word;

}

.infoItem a{

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    color:#0b73e6;

    transition:.3s;

}

.infoItem a:hover{

    color:#CE2626;

}

/* ===========================
ADDRESS
=========================== */

.addressCard{

    margin-top:28px;

    background:white;

    border-radius:24px;

    padding:25px;

    box-shadow:0 12px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.addressCard:hover{

    transform:translateY(-4px);

}

.addressCard h3{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:22px;

}

.addressCard h3 i{

    color:#CE2626;

}

.addressCard p{

    font-size:14px;

    line-height:2.2;

    color:#555;

}

/* ===========================
DESCRIPTION
=========================== */

.descCard{

    margin-top:22px;

    background:white;

    border-radius:24px;

    padding:25px;

    box-shadow:0 12px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.descCard:hover{

    transform:translateY(-4px);

}

.descCard h3{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:22px;

}

.descCard h3 i{

    color:#7DAACB;

}

.descCard p{

    line-height:2.1;

    font-size:15px;

    color:#555;

}

/* ===========================
ANIMATION
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ===========================
REPORT SECTION
=========================== */

.reportSection{

    margin-top:40px;

}

.reportSection h2{

    font-size:30px;

    font-weight:800;

    margin-bottom:25px;

    color:var(--dark);

    display:flex;

    align-items:center;

    gap:12px;

}

.reportGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.reportCard{

    background:white;

    border-radius:28px;

    padding:35px;

    cursor:pointer;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.reportCard::before{

    content:"";

    position:absolute;

    top:-120px;

    left:-120px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(125,170,203,.08);

    transition:.45s;

}

.reportCard:hover::before{

    transform:scale(2);

}

.reportCard:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.reportCard i{

    font-size:42px;

    margin-bottom:18px;

    color:var(--primary);

    transition:.3s;

}

.reportCard:hover i{

    transform:scale(1.15);

}

.reportCard h3{

    font-size:24px;

    margin-bottom:10px;

    font-weight:800;

}

.reportCard p{

    font-size:14px;

    color:#777;

    line-height:1.9;

}


/* ===========================
MODAL
=========================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

    backdrop-filter:blur(8px);

}

.modalBox{

    width:430px;

    padding:40px;

    text-align:center;

}

.modalBox h2{

    margin-bottom:25px;

    font-size:28px;

}

.modalBox input{

    width:100%;

    height:60px;

    border:none;

    outline:none;

    border-radius:18px;

    padding:18px;

    font-family:Vazir;

    font-size:16px;

    background:white;

    margin-bottom:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.modalBtns{

    display:flex;

    gap:15px;

}

.modalBtns button{

    flex:1;

    height:55px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-family:Vazir;

    font-size:15px;

    font-weight:bold;

    transition:.3s;

}

#submitPersonnel{

    background:linear-gradient(135deg,#7DAACB,#5e8fb1);

    color:white;

}

#closeModal{

    background:#CE2626;

    color:white;

}

.modalBtns button:hover{

    transform:translateY(-3px);

}


/* ===========================
REPORT RESULT
=========================== */

.reportResult{

    margin-top:40px;

    padding:30px;

    animation:fadeUp .4s;

}


.reportHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.reportActions{
    display:flex;
    align-items:center;
    gap:10px;
}

.reportHeader h2{

    font-size:28px;

    font-weight:800;

}

#closeReport{

    border:none;

    padding:12px 24px;

    border-radius:18px;

    background:#CE2626;

    color:white;

    cursor:pointer;

    font-family:Vazir;

    font-weight:bold;

    transition:.3s;

}

#closeReport:hover{

    transform:translateY(-3px);

}


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

#reportTable{

    overflow:auto;

    border-radius:22px;

}

#reportTable table{

    width:100%;

    border-collapse:collapse;

    background:white;

    overflow:hidden;

}

#reportTable th{

    background:linear-gradient(135deg,#7DAACB,#6d99b8);

    color:white;

    padding:18px;

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

}

#reportTable td{

    padding:16px;

    text-align:center;

    border-bottom:1px solid #ececec;

    white-space:nowrap;

    font-size:14px;

    transition:.2s;

}

#reportTable tbody tr{

    transition:.3s;

}

#reportTable tbody tr:hover{

    background:#f5fbff;

    transform:scale(1.005);

}

#reportTable a{

    text-decoration:none;

    color:#1976d2;

    font-weight:bold;

}


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

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

    border-radius:30px;

}

::-webkit-scrollbar-thumb{

    background:#7DAACB;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#5c8daf;

}


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

@media(max-width:1300px){

    .dashboard{

        grid-template-columns:repeat(2,1fr);

    }

    .reportGrid{

        grid-template-columns:repeat(2,1fr);

    }

    .searchArea{

        display:grid;

        grid-template-columns:1fr 1fr 1fr 1fr 180px;

        gap:20px;

    }
    #searchBtn{

        grid-column:span 2;

    }

}


@media(max-width:900px){

    .header{

        flex-direction:column;

        gap:20px;

    }

    .infoGrid{

        grid-template-columns:1fr;

    }

    .reportGrid{

        grid-template-columns:1fr;

    }

    .dashboard{

        grid-template-columns:1fr;

    }

    .searchArea{

        grid-template-columns:1fr;

    }

    #searchBtn{

        grid-column:auto;

    }

    .resultTop{

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }

}


@media(max-width:600px){

    .container{

        width:100%;

        padding:15px;

    }

    .logo{

        font-size:22px;

    }

    .logo i{

        width:50px;

        height:50px;

        font-size:20px;

    }

    .resultTop h1{

        font-size:24px;

    }

    .modalBox{

        width:95%;

        padding:25px;

    }

    .dash-card{

        padding:20px;

    }

    .reportCard{

        padding:25px;

    }

}
/* ===========================
LOADER
=========================== */

#loader{

    position:fixed;

    inset:0;

    background:rgba(255,253,235,.75);

    backdrop-filter:blur(10px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

    animation:fadeIn .25s;

}

.loaderBox{

    width:260px;

    background:white;

    padding:35px;

    border-radius:28px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.spinner{

    width:65px;

    height:65px;

    margin:auto;

    margin-bottom:20px;

    border:6px solid #e9e9e9;

    border-top:6px solid var(--primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

.loaderBox div{

    font-size:17px;

    font-weight:700;

    color:var(--dark);

}


/* ===========================
TOAST
=========================== */

#toast{

    min-width:260px;

    max-width:420px;

    text-align:center;

    animation:toastShow .35s ease;

}


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

button{

    position:relative;

    overflow:hidden;

}

button:active{

    transform:scale(.98);

}


/* ===========================
INPUT EFFECT
=========================== */

.inputBox{

    border:2px solid transparent;

}

.inputBox:focus-within{

    border-color:var(--primary);

    box-shadow:

            0 0 0 6px rgba(125,170,203,.12),

            0 15px 30px rgba(125,170,203,.12);

    transform:translateY(-3px);

}


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

#reportTable tbody tr:nth-child(even){

    background:#fafafa;

}

#reportTable tbody tr:hover td{

    color:var(--dark);

}


/* ===========================
INFO ITEM
=========================== */

.infoItem span{

    transition:.25s;

}

.infoItem:hover span{

    color:var(--primary);

}


/* ===========================
ADDRESS
=========================== */

.addressCard,

.descCard{

    border:1px solid rgba(125,170,203,.12);

}


/* ===========================
DASH CARD
=========================== */

.dash-card{

    overflow:hidden;

    position:relative;

}

.dash-card::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

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

    border-radius:50%;

    top:-80px;

    left:-80px;

    transition:.45s;

}

.dash-card:hover::after{

    transform:scale(1.5);

}


/* ===========================
REPORT CARD
=========================== */

.reportCard h3{

    transition:.3s;

}

.reportCard:hover h3{

    color:var(--primary);

}


/* ===========================
RESULT CARD
=========================== */

.resultCard{

    position:relative;

    overflow:hidden;

}

.resultCard::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:rgba(125,170,203,.08);

    border-radius:50%;

    top:-120px;

    left:-120px;

}


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

::selection{

    background:var(--primary);

    color:white;

}


/* ===========================
ANIMATION
=========================== */

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}


@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


@keyframes toastShow{

    from{

        opacity:0;

        transform:translate(-50%,30px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}


/* ===========================
PRINT
=========================== */

@media print{

    body{

        background:white;
    #reportTable table{

        page-break-inside:auto;

    }

    #reportTable thead{

        break-after:avoid;

    }

    #reportTable tbody tr{

        break-inside:avoid-page;

    }
    }

    .header,

    .searchBox,

    .reportSection,

    #closeResult,

    #closeReport{

        display:none !important;

    }

    .resultCard,

    .reportResult{

        display:block !important;

        box-shadow:none;

        border:1px solid #ccc;

    }

}
.crm-list{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:20px;
}

.crmCard{
    background:#fff;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    border-right:5px solid #4f8fc7;
}

.crmTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    font-weight:bold;
    color:#245d91;
}

.crmCard div{
    margin:6px 0;
}

.crmDesc{
    margin-top:12px;
    padding:12px;
    background:#f5f8fc;
    border-radius:10px;
}

.emptyCRM{
    text-align:center;
    padding:40px;
    color:#888;
    background:#fff;
    border-radius:15px;
}
.crmPopup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.crmPopupBox{

    width:92%;

    max-width:1000px;

    height:85vh;

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    box-shadow:0 25px 70px rgba(0,0,0,.25);

}

.crmPopupHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 30px;

    background:#4f8fc7;

    color:#fff;

}

.crmPopupHeader h2{

    margin:0;

}

#closeCRMPopup{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#ef4444;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

#crmList{

    flex:1;

    overflow-y:auto;

    padding:25px;

    background:#f6f8fc;

}
/* ================= SUPPORTER REPORT ================= */

.supporterReportContent{

    width:96vw;

    max-width:1800px;

    height:94vh;

    display:flex;

    flex-direction:column;

}

.supporterReportHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

#closeSupporterReport{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#d62828;

    color:#fff;

    font-size:20px;

    transition:.25s;

}

#closeSupporterReport:hover{

    transform:rotate(90deg);

}

#supporterReportBody{
    flex:1;
    min-height:620px;
    max-height:620px;
    overflow:auto;
    border-radius:22px;
}
/*================ SUPPORTER REPORT ================*/

.supporterReportContent{

    width:96%;

    max-width:1750px;

    height:88vh;

    display:flex;

    flex-direction:column;

    border-radius:22px;

    overflow:hidden;

}

.supporterReportHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 25px;

    border-bottom:1px solid #e8e8e8;

    background:#fff;

}

.supporterReportHeader h2{

    margin:0;

    color:#2b6cb0;

    font-size:28px;

    font-weight:700;

}

#closeSupporterReport{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#e74c3c;

    color:#fff;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}

#closeSupporterReport:hover{

    transform:rotate(90deg);

    background:#c0392b;

}

#supporterReportBody{

    flex:1;

    overflow:auto;

    background:#f8fafc;

    padding:18px;

}

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

#supporterReportTable{

    width:100%;

    min-width:1600px;

    border-collapse:separate;

    border-spacing:0;

    direction:rtl;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

#supporterReportTable thead{

    position:sticky;

    top:0;

    z-index:50;

}

#supporterReportTable thead tr{

    background:#2b6cb0;

}

#supporterReportTable th{

    color:#fff;

    padding:16px;

    text-align:center;

    font-size:14px;

    white-space:nowrap;

}

#supporterReportTable td{

    padding:15px;

    text-align:center;

    white-space:nowrap;

    border-bottom:1px solid #eef2f7;

    font-size:14px;

}

#supporterReportTable tbody tr:nth-child(even){

    background:#fafafa;

}

#supporterReportTable tbody tr:hover{

    background:#edf6ff;

    transition:.2s;

}

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

#supporterReportFooter tr{

    background:#1e3a5f;

}

#supporterReportFooter td{

    color:#fff;

    font-weight:700;

    padding:16px;

}

/*================ BADGE ================*/

.vipBadge,
.tlcBadge,
.tacBadge{

    display:inline-block;

    min-width:40px;

    padding:6px 10px;

    border-radius:999px;

    color:#fff;

    font-size:12px;

    font-weight:700;

}

.vipBadge{

    background:#f4b400;

}

.tlcBadge{

    background:#3498db;

}

.tacBadge{

    background:#27ae60;

}

/*================ PROGRESS ================*/

.progressBox{

    width:120px;

    height:12px;

    margin:auto;

    background:#ececec;

    border-radius:999px;

    overflow:hidden;

}

.progressFill{

    height:100%;

    border-radius:999px;

}

.progressGreen{

    background:#2ecc71;

}

.progressYellow{

    background:#f1c40f;

}

.progressRed{

    background:#e74c3c;

}

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

.rankGold{

    color:#d4af37;

    font-weight:700;

}

.rankSilver{

    color:#a7a7a7;

    font-weight:700;

}

.rankBronze{

    color:#b87333;

    font-weight:700;

}
.rankGold{

    font-size:28px;

    filter:drop-shadow(0 0 6px rgba(255,215,0,.6));

}

.rankSilver{

    font-size:28px;

    filter:drop-shadow(0 0 6px rgba(190,190,190,.7));

}

.rankBronze{

    font-size:28px;

    filter:drop-shadow(0 0 6px rgba(205,127,50,.7));

}

.rankNormal{

    font-weight:700;

    font-size:15px;

    color:#666;

}
/*=============================
SUPPORTER REPORT TABLE
=============================*/

.supporterReportContent{

    width:95%;

    max-width:1700px;

}

#supporterReportBody{

    max-height:72vh;

    overflow:auto;

    border-radius:18px;

}

#supporterReportBody table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

}

#supporterReportBody thead{

    position:sticky;

    top:0;

    z-index:20;

}

#supporterReportBody thead tr{

    background:#1f4e79;

}

#supporterReportBody th{

    color:#fff;

    font-weight:700;

    padding:14px;

    white-space:nowrap;

    text-align:center;

    font-size:14px;

}

#supporterReportBody td{

    padding:12px;

    text-align:center;

    border-bottom:1px solid #ececec;

    transition:.25s;

    white-space:nowrap;

}

#supporterReportBody tbody tr:nth-child(even){

    background:#f8fbff;

}

#supporterReportBody tbody tr:hover{

    background:#eaf4ff;

    transform:scale(1.003);

    box-shadow:0 4px 16px rgba(0,0,0,.08);

}
/*==========================
 BADGES
==========================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:48px;

    padding:6px 12px;

    border-radius:999px;

    font-weight:700;

    font-size:13px;

    color:#fff;

    box-shadow:0 4px 12px rgba(0,0,0,.12);

    transition:.25s;

}

.badge:hover{

    transform:translateY(-2px);

}

.vipBadge{

    background:linear-gradient(135deg,#16a34a,#22c55e);

}

.tlcBadge{

    background:linear-gradient(135deg,#eab308,#facc15);

    color:#222;

}

.tacBadge{

    background:linear-gradient(135deg,#dc2626,#ef4444);

}
/*================ KPI DASHBOARD =================*/

#supporterDashboard{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:16px;

    margin:18px 0 24px;
}

.supporterKPI{

    position:relative;

    min-height:145px;

    padding:18px;

    border-radius:26px;

    overflow:hidden;

    background:#ffffff;

    border:1px solid rgba(120,170,205,.18);

    box-shadow:
            0 10px 35px rgba(0,0,0,.06);

    transition:.35s;
}

.supporterKPI:hover{

    transform:translateY(-6px);

    box-shadow:
            0 18px 45px rgba(0,0,0,.12);
}

.supporterKPI::before{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(125,170,203,.12);

    left:-70px;

    top:-70px;
}

.kpiIcon{

    width:64px;

    height:64px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#eef4fb;

    color:#7DAACB;

    font-size:30px;
}

.kpiNumber{

    margin-top:14px;

    font-size:28px;

    font-weight:900;

    color:#263655;

    line-height:1.2;

    word-break:break-word;

    overflow-wrap:anywhere;
}

.kpiTitle{

    margin-top:12px;

    text-align:center;

    font-size:17px;

    font-weight:700;

    color:#66738a;
}

/* موبایل */

@media(max-width:1400px){

    #supporterDashboard{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:900px){

    #supporterDashboard{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    #supporterDashboard{

        grid-template-columns:1fr;

    }

}
.resultButtons{
    display:flex;
    gap:12px;
    align-items:center;
}

/* همان استایل بازگشت */
#closeResult,
.grayBtn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height:46px;
    padding:0 22px;

    border:none;
    border-radius:14px;

    font-family:Vazir;
    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

/* بازگشت */
#closeResult{
    background:#d93025;
    color:#fff;
}

#closeResult:hover{
    background:#b71c1c;
    transform:translateY(-2px);
}

/* ثبت تغییرات */
.grayBtn{
    background:#6b7280;
    color:#fff;
}

.grayBtn:hover{
    background:#4b5563;
    transform:translateY(-2px);
}
/* =======================================================
   CHANGE REQUEST MODAL
======================================================= */

.changeModal{

    position:fixed;
    inset:0;

    background:rgba(8,15,30,.45);

    backdrop-filter:blur(10px);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;

    padding:20px;

}

.changeModalContent{

    width:min(760px,95vw);

    max-height:92vh;

    overflow-y:auto;

    border-radius:26px;

    padding:28px;

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

    border:1px solid rgba(255,255,255,.55);

    box-shadow:
            0 25px 60px rgba(0,0,0,.20);

    animation:popup .28s ease;

}

@keyframes popup{

    from{

        opacity:0;
        transform:translateY(20px) scale(.97);

    }

    to{

        opacity:1;
        transform:none;

    }

}

/* ================= Header ================= */

.changeHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.changeHeader h2{

    font-size:24px;

    font-weight:800;

    color:#34506B;

}

#closeChangeModal{

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

    background:#CE2626;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

}

#closeChangeModal:hover{

    transform:scale(1.05);

}

/* ================= Grid ================= */

.changeGrid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

/* ================= Inputs ================= */

.changeField{

    display:flex;

    flex-direction:column;

    margin-bottom:18px;

}

.changeField label{

    margin-bottom:8px;

    font-weight:700;

    color:#34506B;

}

.changeField input,
.changeField textarea{

    width:100%;

    padding:13px 15px;

    border-radius:14px;

    border:1px solid rgba(120,170,205,.30);

    background:#fff;

    font-family:Vazir;

    font-size:15px;

    transition:.25s;

}

.changeField textarea{

    resize:vertical;

    min-height:120px;

}

.changeField input:focus,
.changeField textarea:focus{

    outline:none;

    border-color:#7DAACB;

    box-shadow:0 0 0 4px rgba(125,170,203,.15);

}

.changeField input[readonly]{

    background:#F4F7FA;

    color:#666;

}

/* ================= GPS ================= */

.gpsBox{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px;

    border-radius:18px;

    background:#FFFDEB;

    margin-bottom:22px;

    border:1px solid #E8DBB3;

}

.gpsBox strong{

    display:block;

    margin-bottom:6px;

    color:#34506B;

}

#gpsStatus{

    color:#666;

    font-size:14px;

}

.locationBtn{

    border:none;

    background:#7DAACB;

    color:#fff;

    border-radius:14px;

    padding:12px 18px;

    font-family:Vazir;

    cursor:pointer;

    transition:.25s;

}

.locationBtn:hover{

    transform:translateY(-2px);

    background:#5B94BC;

}

/* ================= Upload ================= */

#photoUpload{

    padding:12px;

    background:#fff;

    border:2px dashed rgba(125,170,203,.35);

    cursor:pointer;

}

/* ================= Buttons ================= */

.changeButtons{

    display:flex;

    justify-content:flex-end;

    gap:14px;

    margin-top:28px;

}

.cancelChange{

    border:none;

    background:#757575;

    color:#fff;

    padding:13px 24px;

    border-radius:14px;

    font-family:Vazir;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.cancelChange:hover{

    background:#5D5D5D;

}

.submitChange{

    border:none;

    background:#0B7C3B;

    color:#fff;

    padding:13px 26px;

    border-radius:14px;

    font-family:Vazir;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.submitChange:hover{

    background:#08652F;

}

/* ================= Responsive ================= */

@media(max-width:768px){

    .changeGrid{

        grid-template-columns:1fr;

    }

    .gpsBox{

        flex-direction:column;

        align-items:flex-start;

    }

    .changeButtons{

        flex-direction:column;

    }

    .cancelChange,
    .submitChange{

        width:100%;

    }

}
/* ===========================
   PHOTO PREVIEW
=========================== */

.photoPreview{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:18px;

}

.photoItem{

    position:relative;

    width:120px;

    height:120px;

    border-radius:18px;

    overflow:hidden;

    background:#f3f3f3;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.photoItem img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.removePhoto{

    position:absolute;

    top:8px;

    left:8px;

    width:28px;

    height:28px;

    border:none;

    border-radius:50%;

    background:#CE2626;

    color:#fff;

    cursor:pointer;

    font-size:14px;

}

/* ===========================
   LOGIN PAGE FIX
=========================== */

body{
    margin:0;
    padding:0;
    font-family:"Vazir",sans-serif;
    background:linear-gradient(135deg,#FFFDEB,#E8DBB3);
    min-height:100vh;
}

.login-container{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{
    width:420px;
    max-width:92%;
    background:#ffffff;
    border-radius:22px;
    padding:40px 35px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    text-align:center;
}

.login-card h2{
    margin:20px 0 30px;
    color:#234;
    font-size:30px;
    font-weight:700;
}

.logo{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:#7DAACB;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
}

.input-group{
    margin-bottom:18px;
}

.input-group input{
    width:100%;
    height:52px;
    border:1px solid #d9d9d9;
    border-radius:12px;
    padding:0 16px;
    font-size:16px;
    font-family:"Vazir",sans-serif;
    box-sizing:border-box;
    transition:.25s;
}

.input-group input:focus{
    border-color:#7DAACB;
    outline:none;
    box-shadow:0 0 0 3px rgba(125,170,203,.25);
}

.primary-btn{
    width:100%;
    height:52px;
    border:none;
    border-radius:12px;
    background:#7DAACB;
    color:#fff;
    font-family:"Vazir",sans-serif;
    font-size:17px;
    cursor:pointer;
    transition:.25s;
}

.primary-btn:hover{
    background:#5f95bb;
}

.toast{
    position:fixed;
    bottom:25px;
    right:25px;
    background:#CE2626;
    color:#fff;
    padding:14px 20px;
    border-radius:10px;
    opacity:0;
    transform:translateY(20px);
    transition:.3s;
    z-index:9999;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}
.printBtn{

    background:#8d99ae;

    color:#fff;

    border:none;

    padding:10px 18px;

    border-radius:12px;

    cursor:pointer;

    font-family:Vazir;

    font-size:14px;

    transition:.25s;

}

.printBtn:hover{

    background:#6c757d;

    transform:translateY(-2px);

}

.printBtn i{

    margin-left:6px;

}
/* ======================================================
   PRINT REPORT
====================================================== */

@page{
    size:A4 landscape;
    margin:10mm;
}

@media print{

    body{

        background:#fff !important;
        direction:rtl;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;

    }

    .blob,
    .header,
    .sidebar,
    .menu,
    .buttons,
    .searchBox,
    .searchSection,
    .glass,
    .toast,
    #closeReport,
    #printReport{

        display:none !important;

    }

    #reportResult{

        display:block !important;
        position:static !important;
        width:100% !important;
        background:#fff !important;
        box-shadow:none !important;
        border:none !important;
        margin:0 !important;
        padding:0 !important;

    }

    #reportTable table{

        width:100%;
        border-collapse:separate;
        border-spacing:0;
        table-layout:auto;
        font-family:Vazir;
        font-size:11px;
        color:#000;

        border:1px solid #999;
        border-radius:10px;
        overflow:hidden;

    }

    #reportTable thead{

        display:table-header-group;

    }

    #reportTable tfoot{

        display:table-footer-group;

    }

    #reportTable tbody{

        display:table-row-group;

    }

    #reportTable tr{

        page-break-inside:avoid !important;

        break-inside:avoid !important;

    }

    #reportTable thead tr{

        break-inside:avoid;

    }

    #reportTable td,
    #reportTable th{

        page-break-inside:avoid;

    }

    #reportTable tr{

        page-break-inside:avoid;

    }

    #reportTable th{

        background:#dcdcdc !important;
        color:#000 !important;
        border-right:1px solid #999;
        border-bottom:1px solid #999;
        padding:6px;
        text-align:center;
        font-weight:bold;

    }

    #reportTable td{

        border-right:1px solid #bbb;
        border-bottom:1px solid #bbb;
        padding:5px;
        text-align:center;
        color:#000;

    }

    #reportTable th:last-child,
    #reportTable td:last-child{

        border-left:none;

    }

    #reportTable tbody tr:last-child td{

        border-bottom:none;

    }

    #reportTable tbody tr:nth-child(even){

        background:#f4f4f4 !important;

    }

    #reportTable tbody tr:nth-child(odd){

        background:#ffffff !important;

    }

    #reportTable thead tr:first-child th:first-child{

        border-top-right-radius:10px;

    }

    #reportTable thead tr:first-child th:last-child{

        border-top-left-radius:10px;

    }

    #reportTable tbody tr:last-child td:first-child{

        border-bottom-right-radius:10px;

    }

    #reportTable tbody tr:last-child td:last-child{

        border-bottom-left-radius:10px;

    }

}
body{

    counter-reset: page;

}

.pageNumber{

    position:fixed;

    bottom:5mm;

    left:10mm;

    font-size:10px;

    color:#555;

}
tfoot{

    display:table-footer-group;

}

.printFooter{

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    font-family:Vazir;

    font-size:11px;

    color:#666;

}

.pageCounter:after{

    content:"صفحه " counter(page);

}
.addressCell{

    width:320px;

    max-width:320px;

    padding:0 6px;

}

.addressCenter{

    width:100%;

    overflow:hidden;

    white-space:nowrap;

    text-align:center;

    direction:rtl;

    font-size:13px;

}
#logoutBtn.logout-btn {
    border: none;
    background: #ce2626;
    color: #ffffff;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(206, 38, 38, 0.18);
}

#logoutBtn.logout-btn:hover {
    background: #b91f1f;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(206, 38, 38, 0.25);
}

#logoutBtn.logout-btn:active {
    transform: translateY(0);
}

#logoutBtn.logout-btn i {
    font-size: 15px;
}
#logoutBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 80px;
    height: 42px;
    padding: 0 16px;
    margin-right: 12px;
    border: none;
    border-radius: 10px;
    background: #ce2626 !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10;
}

#logoutBtn i {
    color: #ffffff !important;
    font-size: 15px;
}

#logoutBtn:hover {
    background: #b91f1f !important;
}
.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.admin-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.admin-box > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
}

#liveDate {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
}

#logoutBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.header-left .admin-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.header-left .admin-box > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
}

.header-left #liveDate {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    min-width: 150px;
}

#logoutBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
/* =====================================================
   LUXURY BRAND LOADER
   Background: #F7F1D7

   Brand Colors:
   #7DAACB
   #E8DBB3
   #FFFDEB
   #CE2626
===================================================== */

.luxuryLoader{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:#F7F1D7;

    direction:rtl;

    isolation:isolate;

}


/* =====================================================
   SCENE
===================================================== */

.loaderScene{

    position:relative;

    width:min(430px,88vw);
    height:min(430px,88vw);

    display:flex;
    align-items:center;
    justify-content:center;

}


/* =====================================================
   CENTRAL GLOW
===================================================== */

.loaderGlow{

    position:absolute;

    width:170px;
    height:170px;

    border-radius:50%;

    background:#7DAACB;

    opacity:.12;

    filter:blur(35px);

    animation:
            loaderGlow
            3s
            ease-in-out
            infinite;

}


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

.loaderLogo{

    position:relative;

    z-index:20;

    width:clamp(105px,24vw,150px);
    height:clamp(105px,24vw,150px);

    display:flex;
    align-items:center;
    justify-content:center;

    animation:
            loaderLogo
            3s
            ease-in-out
            infinite;

}


.loaderLogo img{

    width:100%;
    height:100%;

    object-fit:contain;

    filter:
            brightness(0)
            saturate(100%)
            invert(59%)
            sepia(20%)
            saturate(750%)
            hue-rotate(168deg)
            brightness(90%)
            contrast(88%)

            drop-shadow(
                    0 0 10px
                    rgba(101,149,183,.45)
            )

            drop-shadow(
                    0 0 24px
                    rgba(101,149,183,.30)
            );

}


/* =====================================================
   ORBITS
===================================================== */

.loaderOrbit{

    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    transform:translate(-50%,-50%);

    pointer-events:none;

}


/* =====================================================
   GOLD / BLUE ORBIT
===================================================== */

.orbitOne{

    width:58%;
    height:58%;

    border:
            1px solid
            rgba(125,170,203,.20);

    border-top-color:#7DAACB;

    border-right-color:#E8DBB3;

    box-shadow:
            0 0 12px
            rgba(125,170,203,.12);

    animation:
            loaderOrbitOne
            5s
            linear
            infinite;

}


/* =====================================================
   SECOND ORBIT
===================================================== */

.orbitTwo{

    width:74%;
    height:74%;

    border:
            1px solid
            rgba(232,219,179,.20);

    border-left-color:#E8DBB3;

    border-bottom-color:#7DAACB;

    box-shadow:
            0 0 16px
            rgba(232,219,179,.12);

    animation:
            loaderOrbitTwo
            8s
            linear
            infinite;

}


/* =====================================================
   RED ACCENT ORBIT
===================================================== */

.orbitThree{

    width:91%;
    height:91%;

    border:
            1px solid
            rgba(206,38,38,.08);

    border-top-color:#CE2626;

    border-right-color:
            rgba(206,38,38,.25);

    animation:
            loaderOrbitOne
            13s
            linear
            infinite;

}


/* =====================================================
   ORBIT POINTS
===================================================== */

.orbitOne::after,
.orbitTwo::after,
.orbitThree::after{

    content:"";

    position:absolute;

    top:50%;
    left:-3px;

    width:6px;
    height:6px;

    border-radius:50%;

    transform:translateY(-50%);

}


/* BLUE POINT */

.orbitOne::after{

    background:#7DAACB;

    box-shadow:
            0 0 8px #7DAACB,
            0 0 18px
            rgba(125,170,203,.55);

}


/* GOLD POINT */

.orbitTwo::after{

    background:#E8DBB3;

    box-shadow:
            0 0 8px #E8DBB3,
            0 0 18px
            rgba(232,219,179,.55);

}


/* RED POINT */

.orbitThree::after{

    background:#CE2626;

    box-shadow:
            0 0 7px #CE2626,
            0 0 16px
            rgba(206,38,38,.45);

}


/* =====================================================
   PARTICLES
===================================================== */

.loaderParticles{

    position:absolute;

    inset:0;

    pointer-events:none;

}


.loaderParticles span{

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#E8DBB3;

    box-shadow:
            0 0 7px
            rgba(232,219,179,.8);

    animation:
            loaderParticle
            3s
            ease-in-out
            infinite;

}


/* BLUE */

.loaderParticles span:nth-child(1){

    top:13%;
    left:50%;

}


/* GOLD */

.loaderParticles span:nth-child(2){

    top:29%;
    right:10%;

    background:#7DAACB;

    box-shadow:
            0 0 7px
            rgba(125,170,203,.8);

    animation-delay:.5s;

}


/* GOLD */

.loaderParticles span:nth-child(3){

    bottom:18%;
    right:15%;

    animation-delay:1s;

}


/* BLUE */

.loaderParticles span:nth-child(4){

    bottom:11%;
    left:45%;

    background:#7DAACB;

    box-shadow:
            0 0 7px
            rgba(125,170,203,.8);

    animation-delay:1.5s;

}


/* GOLD */

.loaderParticles span:nth-child(5){

    bottom:29%;
    left:9%;

    animation-delay:2s;

}


/* RED */

.loaderParticles span:nth-child(6){

    top:25%;
    left:14%;

    background:#CE2626;

    box-shadow:
            0 0 7px
            rgba(206,38,38,.7);

    animation-delay:2.5s;

}


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

.loaderLine{

    position:absolute;

    left:50%;
    bottom:22%;

    width:min(210px,46vw);
    height:2px;

    transform:translateX(-50%);

    overflow:hidden;

    border-radius:20px;

    background:
            rgba(125,170,203,.18);

}


.loaderLine span{

    display:block;

    width:38%;
    height:100%;

    border-radius:20px;

    background:#7DAACB;

    box-shadow:
            0 0 8px
            rgba(125,170,203,.75),

            0 0 18px
            rgba(232,219,179,.45);

    animation:
            loaderLine
            1.7s
            ease-in-out
            infinite;

}


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

.loaderText{

    position:absolute;

    left:50%;
    bottom:13%;

    transform:translateX(-50%);

    white-space:nowrap;

    color:#7DAACB;

    font-family:
            Vazir,
            sans-serif;

    font-size:
            clamp(11px,3vw,14px);

    font-weight:400;

    opacity:.85;

}


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

.loaderDots{

    display:inline-flex;

    margin-right:4px;

}


.loaderDots i{

    font-style:normal;

    color:#CE2626;

    opacity:.2;

    animation:
            loaderDot
            1.4s
            infinite;

}


.loaderDots i:nth-child(2){

    animation-delay:.2s;

}


.loaderDots i:nth-child(3){

    animation-delay:.4s;

}


/* =====================================================
   ANIMATION — LOGO
===================================================== */

@keyframes loaderLogo{

    0%,
    100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.045);

    }

}


/* =====================================================
   ANIMATION — GLOW
===================================================== */

@keyframes loaderGlow{

    0%,
    100%{

        transform:scale(.75);

        opacity:.04;

    }

    50%{

        transform:scale(1.25);

        opacity:.12;

    }

}


/* =====================================================
   ANIMATION — ORBIT 1
===================================================== */

@keyframes loaderOrbitOne{

    from{

        transform:
                translate(-50%,-50%)
                rotate(0deg);

    }

    to{

        transform:
                translate(-50%,-50%)
                rotate(360deg);

    }

}


/* =====================================================
   ANIMATION — ORBIT 2
===================================================== */

@keyframes loaderOrbitTwo{

    from{

        transform:
                translate(-50%,-50%)
                rotate(360deg);

    }

    to{

        transform:
                translate(-50%,-50%)
                rotate(0deg);

    }

}


/* =====================================================
   ANIMATION — PARTICLES
===================================================== */

@keyframes loaderParticle{

    0%,
    100%{

        transform:scale(.4);

        opacity:.2;

    }

    50%{

        transform:scale(1.7);

        opacity:1;

    }

}


/* =====================================================
   ANIMATION — LOADING LINE
===================================================== */

@keyframes loaderLine{

    0%{

        transform:translateX(-180%);

    }

    50%{

        transform:translateX(160%);

    }

    100%{

        transform:translateX(360%);

    }

}


/* =====================================================
   ANIMATION — DOTS
===================================================== */

@keyframes loaderDot{

    0%,
    60%,
    100%{

        opacity:.2;

    }

    30%{

        opacity:1;

    }

}


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

@media(max-width:600px){

    .loaderScene{

        width:88vw;
        height:88vw;

        max-width:360px;
        max-height:360px;

    }

    .loaderLine{

        bottom:21%;

        width:165px;

    }

    .loaderText{

        bottom:12%;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:380px){

    .loaderScene{

        width:94vw;
        height:94vw;

    }

    .loaderLine{

        width:145px;

    }

    .loaderLogo{

        width:100px;
        height:100px;

    }

}
.headerLogo{
    width:50px;
    height:50px;
    object-fit:contain;
    display:block;

    filter:brightness(0) invert(1);
}
.supporterGroupRow td{

    padding:0 !important;

    border:none !important;

}


.supporterGroupHeader{

    background:#7DAACB;

    color:#FFFDEB;

    padding:12px 18px !important;

    text-align:right;

    font-size:14px;

    border-radius:10px;

}


.supporterGroupHeader strong{

    margin-left:20px;

}


.supporterGroupHeader span{

    opacity:.9;

    font-size:12px;

}