body {
    padding: 0px;
    border: 0px;
    margin: 0px;

    background-color: var(--color-bg-gbody);
    color: var(--color-text-gbody);

    font-size: 20px;
}

.gbg-c-bars {
    background-color: var(--color-bg-gbody);
    color: var(--color-text-gbody);
}

.gbg-c-bcont {
    background-color: var(--color-bg-navbars);

    color: var(--color-text-navbars);
}

.e-bdc-g {
    padding: 24px;
}

@layer utilities {
    /* testo */
    .text-primary { color: var(--color-primary); }
    .text-secondary { color: var(--color-secondary); }
    .text-success { color: var(--color-success); }
    .text-danger { color: var(--color-danger); }
    .text-warning { color: var(--color-warning); }
    .text-info { color: var(--color-info); }
    .text-muted { color: var(--color-muted); }
    .text-inverse { color: var(--color-bg); }
    .text { color: var(--color-text); }
    .text-white { color: #FFF }
    .text-red { color: #E80000; }
    .text-grey { color: rgb(105, 105, 105); }
    .text-azure { color: rgb(138, 170, 207); }

    /* sfondi: settiamo anche il foreground giusto per leggibilità */
    .bg-primary { background-color: var(--color-primary); color: var(--color-on-primary); }
    .bg-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }
    .bg-success { background-color: var(--color-success); color: var(--color-on-success); }
    .bg-danger { background-color: var(--color-danger); color: var(--color-on-danger); }
    .bg-warning { background-color: var(--color-warning); color: var(--color-on-warning); }
    .bg-info { background-color: var(--color-info); color: var(--color-on-info); }
    .bg-surface { background-color: var(--color-surface); color: var(--color-text); }
    .bg { background-color: var(--color-bg); color: var(--color-text); }

    /* bordi */
    .border { border-color: var(--color-border); }
    .border-primary { border-color: var(--color-primary); }
    .border-secondary { border-color: var(--color-secondary); }
    .border-success { border-color: var(--color-success); }
    .border-danger { border-color: var(--color-danger); }
    .border-warning { border-color: var(--color-warning); }
    .border-info { border-color: var(--color-info); }

    /* disabled */
    .is-disabled {
        color: var(--color-disabled-fg);
        background-color: var(--color-disabled-bg);
        border-color: var(--color-disabled-border);
        cursor: not-allowed;
        opacity: .8;
        pointer-events: none;
    }

}

/* CONTAINER */
.e-container {
    background-color: var(--color-bg-container);
    color: var(--color-text-container);
    border-radius: 5px;
    border: 2px solid var(--color-container-border);

    text-align: left;
    font-size: 20px;

    padding: 24px;
}

.e-container-s {
    background-color: var(--color-bg-container);
    color: var(--color-success);
    border-radius: 5px;
    border: 2px solid var(--color-success);

    text-align: left;
    font-size: 20px;

    padding: 24px;
}

.e-container-e {
    background-color: var(--color-bg-container);
    color: var(--color-danger);
    border-radius: 5px;
    border: 2px solid var(--color-danger);

    text-align: left;
    font-size: 20px;

    padding: 24px;
}

.e-container-fet {
    background-color: var(--color-bg-container);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    text-align: left;
    font-size: 20px;

    padding: 24px;
}

/* TEXT ALIGN */
.ta-l { text-align: left;   }
.ta-c { text-align: center; }
.ta-r { text-align: right;  }

/* Strato "forms" (opzionale, se usi @layer) */
@layer forms {
    input:is([type="email"], [type="password"], [type="text"], [type="number"]), select {
        width: 100%;
        height: 40px;
        border: 0;
        border-radius: 3px;
        margin-bottom: 6px;
        font-size: 18px;
        text-indent: 12px;
    }

    textarea {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        min-height: 80px;
        max-height: 300px;
        border: 0;
        border-radius: 3px;
        margin-bottom: 6px;
        font-size: 18px;
        text-indent: 12px;
    }

    .ebutton {
        width: 100%;
        height: 40px;

        line-height: 40px;
        cursor: pointer;

        border:0px;
        border-radius: 3px;
        font-size: 18px;
        text-align: center;
    } .ebutton > a {
        text-decoration: none;
    }

    .ebutton-main {
        background-color: var(--color-primary);
        color: var(--color-on-primary);
    }
    .ebutton-main > a {
        color: var(--color-on-primary);
    }
    .ebutton-main:hover {
        background-color: var(--color-primary-darker);
        color: var(--color-on-primary-darker);
    } 
    .ebutton-main:hover > a {
        color: var(--color-on-primary-darker);
    }

    .ebutton-danger {
        background-color: var(--color-danger);
        color: var(--color-on-primary);
    }
    .ebutton-danger > a {
        color: var(--color-on-primary);
    }
    .ebutton-danger:hover {
        background-color: var(--color-danger);
        color: var(--color-on-primary-darker);
    } 
    .ebutton-danger:hover > a {
        color: white;
    }

    .ebutton-disabled {
        background-color: #727272;
        color: #B7B7B7;

        opacity: 0.80;
    }
    .ebutton-disabled > a {
        color: #B7B7B7;
    }
    .ebutton-disabled:hover {
        background-color: #808080;
        color: #B7B7B7;
    } 
    .ebutton-disabled:hover > a {
        color: #B7B7B7;
    }
}

/* TABLE */
table {
    width: 100%;
}

.loading-spinner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: var(--color-primary);      
    animation: spin 1s linear infinite;
    box-sizing: border-box;
}

/* Animazione rotazione */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* VERTICAL SPACE HEIGHT */
.space-2 {	height: 2px; }
.space-4 {	height: 4px; }
.space-6 {	height: 6px; }
.space-8 {	height: 8px; }
.space-10 {	height: 10px; }
.space-12 {	height: 12px; }
.space-14 {	height: 14px; }
.space-16 {	height: 16px; }
.space-18 {	height: 18px; }
.space-20 {	height: 20px; }
.space-22 {	height: 22px; }
.space-24 {	height: 24px; }
.space-26 {	height: 26px; }
.space-28 {	height: 28px; }
.space-30 {	height: 30px; }
.space-32 {	height: 32px; }
.space-34 {	height: 34px; }
.space-36 {	height: 36px; }
.space-38 {	height: 38px; }
.space-40 {	height: 40px; }
.space-42 {	height: 42px; }
.space-44 {	height: 44px; }
.space-46 {	height: 46px; }
.space-48 {	height: 48px; }
.space-50 {	height: 50px; }
.space-52 {	height: 52px; }
.space-54 {	height: 54px; }
.space-56 {	height: 56px; }
.space-58 {	height: 58px; }
.space-60 {	height: 60px; }
.space-62 {	height: 62px; }
.space-64 {	height: 64px; }
.space-66 {	height: 66px; }
.space-68 {	height: 68px; }
.space-70 {	height: 70px; }
.space-72 {	height: 72px; }
.space-74 {	height: 74px; }
.space-76 {	height: 76px; }
.space-78 {	height: 78px; }
.space-80 {	height: 80px; }
.space-82 {	height: 82px; }
.space-84 {	height: 84px; }
.space-86 {	height: 86px; }
.space-88 {	height: 88px; }
.space-90 {	height: 90px; }
.space-92 {	height: 92px; }
.space-94 {	height: 94px; }
.space-96 {	height: 96px; }
.space-98 {	height: 98px; }
.space-100 {	height: 100px; }
.space-102 {	height: 102px; }
.space-104 {	height: 104px; }
.space-106 {	height: 106px; }
.space-108 {	height: 108px; }
.space-110 {	height: 110px; }
.space-112 {	height: 112px; }
.space-114 {	height: 114px; }
.space-116 {	height: 116px; }
.space-118 {	height: 118px; }
.space-120 {	height: 120px; }
.space-122 {	height: 122px; }
.space-124 {	height: 124px; }
.space-126 {	height: 126px; }
.space-128 {	height: 128px; }
.space-130 {	height: 130px; }
.space-132 {	height: 132px; }
.space-134 {	height: 134px; }
.space-136 {	height: 136px; }
.space-138 {	height: 138px; }
.space-140 {	height: 140px; }
.space-142 {	height: 142px; }
.space-144 {	height: 144px; }
.space-146 {	height: 146px; }
.space-148 {	height: 148px; }
.space-150 {	height: 150px; }
.space-152 {	height: 152px; }
.space-154 {	height: 154px; }
.space-156 {	height: 156px; }
.space-158 {	height: 158px; }
.space-160 {	height: 160px; }
.space-162 {	height: 162px; }
.space-164 {	height: 164px; }
.space-166 {	height: 166px; }
.space-168 {	height: 168px; }
.space-170 {	height: 170px; }
.space-172 {	height: 172px; }
.space-174 {	height: 174px; }
.space-176 {	height: 176px; }
.space-178 {	height: 178px; }
.space-180 {	height: 180px; }
.space-182 {	height: 182px; }
.space-184 {	height: 184px; }
.space-186 {	height: 186px; }
.space-188 {	height: 188px; }
.space-190 {	height: 190px; }
.space-192 {	height: 192px; }
.space-194 {	height: 194px; }
.space-196 {	height: 196px; }
.space-198 {	height: 198px; }
.space-200 {	height: 200px; }

/* === Spacers: ogni 10px da 210px a 1000px === */
.space-210 {	height: 210px; }
.space-220 {	height: 220px; }
.space-230 {	height: 230px; }
.space-240 {	height: 240px; }
.space-250 {	height: 250px; }
.space-260 {	height: 260px; }
.space-270 {	height: 270px; }
.space-280 {	height: 280px; }
.space-290 {	height: 290px; }
.space-300 {	height: 300px; }
.space-310 {	height: 310px; }
.space-320 {	height: 320px; }
.space-330 {	height: 330px; }
.space-340 {	height: 340px; }
.space-350 {	height: 350px; }
.space-360 {	height: 360px; }
.space-370 {	height: 370px; }
.space-380 {	height: 380px; }
.space-390 {	height: 390px; }
.space-400 {	height: 400px; }
.space-410 {	height: 410px; }
.space-420 {	height: 420px; }
.space-430 {	height: 430px; }
.space-440 {	height: 440px; }
.space-450 {	height: 450px; }
.space-460 {	height: 460px; }
.space-470 {	height: 470px; }
.space-480 {	height: 480px; }
.space-490 {	height: 490px; }
.space-500 {	height: 500px; }
.space-510 {	height: 510px; }
.space-520 {	height: 520px; }
.space-530 {	height: 530px; }
.space-540 {	height: 540px; }
.space-550 {	height: 550px; }
.space-560 {	height: 560px; }
.space-570 {	height: 570px; }
.space-580 {	height: 580px; }
.space-590 {	height: 590px; }
.space-600 {	height: 600px; }
.space-610 {	height: 610px; }
.space-620 {	height: 620px; }
.space-630 {	height: 630px; }
.space-640 {	height: 640px; }
.space-650 {	height: 650px; }
.space-660 {	height: 660px; }
.space-670 {	height: 670px; }
.space-680 {	height: 680px; }
.space-690 {	height: 690px; }
.space-700 {	height: 700px; }
.space-710 {	height: 710px; }
.space-720 {	height: 720px; }
.space-730 {	height: 730px; }
.space-740 {	height: 740px; }
.space-750 {	height: 750px; }
.space-760 {	height: 760px; }
.space-770 {	height: 770px; }
.space-780 {	height: 780px; }
.space-790 {	height: 790px; }
.space-800 {	height: 800px; }
.space-810 {	height: 810px; }
.space-820 {	height: 820px; }
.space-830 {	height: 830px; }
.space-840 {	height: 840px; }
.space-850 {	height: 850px; }
.space-860 {	height: 860px; }
.space-870 {	height: 870px; }
.space-880 {	height: 880px; }
.space-890 {	height: 890px; }
.space-900 {	height: 900px; }
.space-910 {	height: 910px; }
.space-920 {	height: 920px; }
.space-930 {	height: 930px; }
.space-940 {	height: 940px; }
.space-950 {	height: 950px; }
.space-960 {	height: 960px; }
.space-970 {	height: 970px; }
.space-980 {	height: 980px; }
.space-990 {	height: 990px; }
.space-1000 {	height: 1000px; }

/* max-width: ogni 10px fino a 200px */
.mw-10 {	max-width: 10px; }
.mw-20 {	max-width: 20px; }
.mw-30 {	max-width: 30px; }
.mw-40 {	max-width: 40px; }
.mw-50 {	max-width: 50px; }
.mw-60 {	max-width: 60px; }
.mw-70 {	max-width: 70px; }
.mw-80 {	max-width: 80px; }
.mw-90 {	max-width: 90px; }
.mw-100 {	max-width: 100px; }
.mw-110 {	max-width: 110px; }
.mw-120 {	max-width: 120px; }
.mw-130 {	max-width: 130px; }
.mw-140 {	max-width: 140px; }
.mw-150 {	max-width: 150px; }
.mw-160 {	max-width: 160px; }
.mw-170 {	max-width: 170px; }
.mw-180 {	max-width: 180px; }
.mw-190 {	max-width: 190px; }
.mw-200 {	max-width: 200px; }

/* max-width: ogni 20px da 220px a 2000px */
.mw-220 {	max-width: 220px; }
.mw-240 {	max-width: 240px; }
.mw-260 {	max-width: 260px; }
.mw-280 {	max-width: 280px; }
.mw-300 {	max-width: 300px; }
.mw-320 {	max-width: 320px; }
.mw-340 {	max-width: 340px; }
.mw-360 {	max-width: 360px; }
.mw-380 {	max-width: 380px; }
.mw-400 {	max-width: 400px; }
.mw-420 {	max-width: 420px; }
.mw-440 {	max-width: 440px; }
.mw-460 {	max-width: 460px; }
.mw-480 {	max-width: 480px; }
.mw-500 {	max-width: 500px; }
.mw-520 {	max-width: 520px; }
.mw-540 {	max-width: 540px; }
.mw-560 {	max-width: 560px; }
.mw-580 {	max-width: 580px; }
.mw-600 {	max-width: 600px; }
.mw-620 {	max-width: 620px; }
.mw-640 {	max-width: 640px; }
.mw-660 {	max-width: 660px; }
.mw-680 {	max-width: 680px; }
.mw-700 {	max-width: 700px; }
.mw-720 {	max-width: 720px; }
.mw-740 {	max-width: 740px; }
.mw-760 {	max-width: 760px; }
.mw-780 {	max-width: 780px; }
.mw-800 {	max-width: 800px; }
.mw-820 {	max-width: 820px; }
.mw-840 {	max-width: 840px; }
.mw-860 {	max-width: 860px; }
.mw-880 {	max-width: 880px; }
.mw-900 {	max-width: 900px; }
.mw-920 {	max-width: 920px; }
.mw-940 {	max-width: 940px; }
.mw-960 {	max-width: 960px; }
.mw-980 {	max-width: 980px; }
.mw-1000 {	max-width: 1000px; }
.mw-1020 {	max-width: 1020px; }
.mw-1040 {	max-width: 1040px; }
.mw-1060 {	max-width: 1060px; }
.mw-1080 {	max-width: 1080px; }
.mw-1100 {	max-width: 1100px; }
.mw-1120 {	max-width: 1120px; }
.mw-1140 {	max-width: 1140px; }
.mw-1160 {	max-width: 1160px; }
.mw-1180 {	max-width: 1180px; }
.mw-1200 {	max-width: 1200px; }
.mw-1220 {	max-width: 1220px; }
.mw-1240 {	max-width: 1240px; }
.mw-1260 {	max-width: 1260px; }
.mw-1280 {	max-width: 1280px; }
.mw-1300 {	max-width: 1300px; }
.mw-1320 {	max-width: 1320px; }
.mw-1340 {	max-width: 1340px; }
.mw-1360 {	max-width: 1360px; }
.mw-1380 {	max-width: 1380px; }
.mw-1400 {	max-width: 1400px; }
.mw-1420 {	max-width: 1420px; }
.mw-1440 {	max-width: 1440px; }
.mw-1460 {	max-width: 1460px; }
.mw-1480 {	max-width: 1480px; }
.mw-1500 {	max-width: 1500px; }
.mw-1520 {	max-width: 1520px; }
.mw-1540 {	max-width: 1540px; }
.mw-1560 {	max-width: 1560px; }
.mw-1580 {	max-width: 1580px; }
.mw-1600 {	max-width: 1600px; }
.mw-1620 {	max-width: 1620px; }
.mw-1640 {	max-width: 1640px; }
.mw-1660 {	max-width: 1660px; }
.mw-1680 {	max-width: 1680px; }
.mw-1700 {	max-width: 1700px; }
.mw-1720 {	max-width: 1720px; }
.mw-1740 {	max-width: 1740px; }
.mw-1760 {	max-width: 1760px; }
.mw-1780 {	max-width: 1780px; }
.mw-1800 {	max-width: 1800px; }
.mw-1820 {	max-width: 1820px; }
.mw-1840 {	max-width: 1840px; }
.mw-1860 {	max-width: 1860px; }
.mw-1880 {	max-width: 1880px; }
.mw-1900 {	max-width: 1900px; }
.mw-1920 {	max-width: 1920px; }
.mw-1940 {	max-width: 1940px; }
.mw-1960 {	max-width: 1960px; }
.mw-1980 {	max-width: 1980px; }
.mw-2000 {	max-width: 2000px; }

.fs-2 {	font-size: 2px; }
.fs-4 {	font-size: 4px; }
.fs-6 {	font-size: 6px; }
.fs-8 {	font-size: 8px; }
.fs-10 {	font-size: 10px; }
.fs-12 {	font-size: 12px; }
.fs-14 {	font-size: 14px; }
.fs-16 {	font-size: 16px; }
.fs-18 {	font-size: 18px; }
.fs-20 {	font-size: 20px; }
.fs-22 {	font-size: 22px; }
.fs-24 {	font-size: 24px; }
.fs-26 {	font-size: 26px; }
.fs-28 {	font-size: 28px; }
.fs-30 {	font-size: 30px; }
.fs-32 {	font-size: 32px; }
.fs-34 {	font-size: 34px; }
.fs-36 {	font-size: 36px; }
.fs-38 {	font-size: 38px; }
.fs-40 {	font-size: 40px; }
.fs-42 {	font-size: 42px; }
.fs-44 {	font-size: 44px; }
.fs-46 {	font-size: 46px; }
.fs-48 {	font-size: 48px; }
.fs-50 {	font-size: 50px; }
.fs-52 {	font-size: 52px; }
.fs-54 {	font-size: 54px; }
.fs-56 {	font-size: 56px; }
.fs-58 {	font-size: 58px; }
.fs-60 {	font-size: 60px; }
.fs-62 {	font-size: 62px; }
.fs-64 {	font-size: 64px; }
.fs-66 {	font-size: 66px; }
.fs-68 {	font-size: 68px; }
.fs-70 {	font-size: 70px; }
.fs-72 {	font-size: 72px; }
.fs-74 {	font-size: 74px; }
.fs-76 {	font-size: 76px; }
.fs-78 {	font-size: 78px; }
.fs-80 {	font-size: 80px; }
.fs-82 {	font-size: 82px; }
.fs-84 {	font-size: 84px; }
.fs-86 {	font-size: 86px; }
.fs-88 {	font-size: 88px; }
.fs-90 {	font-size: 90px; }
.fs-92 {	font-size: 92px; }
.fs-94 {	font-size: 94px; }
.fs-96 {	font-size: 96px; }
.fs-98 {	font-size: 98px; }
.fs-100 {	font-size: 100px; }
.fs-102 {	font-size: 102px; }
.fs-104 {	font-size: 104px; }
.fs-106 {	font-size: 106px; }
.fs-108 {	font-size: 108px; }
.fs-110 {	font-size: 110px; }
.fs-112 {	font-size: 112px; }
.fs-114 {	font-size: 114px; }
.fs-116 {	font-size: 116px; }
.fs-118 {	font-size: 118px; }
.fs-120 {	font-size: 120px; }
.fs-122 {	font-size: 122px; }
.fs-124 {	font-size: 124px; }
.fs-126 {	font-size: 126px; }
.fs-128 {	font-size: 128px; }
.fs-130 {	font-size: 130px; }
.fs-132 {	font-size: 132px; }
.fs-134 {	font-size: 134px; }
.fs-136 {	font-size: 136px; }
.fs-138 {	font-size: 138px; }
.fs-140 {	font-size: 140px; }
.fs-142 {	font-size: 142px; }
.fs-144 {	font-size: 144px; }
.fs-146 {	font-size: 146px; }
.fs-148 {	font-size: 148px; }
.fs-150 {	font-size: 150px; }
.fs-152 {	font-size: 152px; }
.fs-154 {	font-size: 154px; }
.fs-156 {	font-size: 156px; }
.fs-158 {	font-size: 158px; }
.fs-160 {	font-size: 160px; }
.fs-162 {	font-size: 162px; }
.fs-164 {	font-size: 164px; }
.fs-166 {	font-size: 166px; }
.fs-168 {	font-size: 168px; }
.fs-170 {	font-size: 170px; }
.fs-172 {	font-size: 172px; }
.fs-174 {	font-size: 174px; }
.fs-176 {	font-size: 176px; }
.fs-178 {	font-size: 178px; }
.fs-180 {	font-size: 180px; }
.fs-182 {	font-size: 182px; }
.fs-184 {	font-size: 184px; }
.fs-186 {	font-size: 186px; }
.fs-188 {	font-size: 188px; }
.fs-190 {	font-size: 190px; }
.fs-192 {	font-size: 192px; }
.fs-194 {	font-size: 194px; }
.fs-196 {	font-size: 196px; }
.fs-198 {	font-size: 198px; }
.fs-200 {	font-size: 200px; }

.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-32 { margin-bottom: 32px; }
.mb-34 { margin-bottom: 34px; }
.mb-36 { margin-bottom: 36px; }
.mb-38 { margin-bottom: 38px; }
.mb-40 { margin-bottom: 40px; }
.mb-42 { margin-bottom: 42px; }
.mb-44 { margin-bottom: 44px; }
.mb-46 { margin-bottom: 46px; }
.mb-48 { margin-bottom: 48px; }
.mb-50 { margin-bottom: 50px; }
.mb-52 { margin-bottom: 52px; }
.mb-54 { margin-bottom: 54px; }
.mb-56 { margin-bottom: 56px; }
.mb-58 { margin-bottom: 58px; }
.mb-60 { margin-bottom: 60px; }
.mb-62 { margin-bottom: 62px; }
.mb-64 { margin-bottom: 64px; }
.mb-66 { margin-bottom: 66px; }
.mb-68 { margin-bottom: 68px; }
.mb-70 { margin-bottom: 70px; }
.mb-72 { margin-bottom: 72px; }
.mb-74 { margin-bottom: 74px; }
.mb-76 { margin-bottom: 76px; }
.mb-78 { margin-bottom: 78px; }
.mb-80 { margin-bottom: 80px; }
.mb-82 { margin-bottom: 82px; }
.mb-84 { margin-bottom: 84px; }
.mb-86 { margin-bottom: 86px; }
.mb-88 { margin-bottom: 88px; }
.mb-90 { margin-bottom: 90px; }
.mb-92 { margin-bottom: 92px; }
.mb-94 { margin-bottom: 94px; }
.mb-96 { margin-bottom: 96px; }
.mb-98 { margin-bottom: 98px; }
.mb-100 { margin-bottom: 100px; }

.p-6 { padding: 6px; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }

.erow {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

.erow > * {
    flex: 1;
    min-width: 50px;
}

/* For very small screens */
@media (max-width: 480px) {
    .erow > * {
        width: 100%; 
        flex: 1 1 100%;
    }
}

.erow > * {

}

.drop-zone {
    border: 2px dashed #999;
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
}
.file-list {
    margin-top: 8px;
    text-align: left;
    font-size: 14px;
}
.file-list li {
    list-style: none;
    margin: 3px 0;
}

.post-media-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.post-media-item {
    margin-bottom: 20px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.post-image-wrapper {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Important for blur effect */
}

.post-image-background {
    position: absolute;
    top: -10px; /* Extra space for blur */
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(15px) brightness(0.7); /* Stronger blur and darker */
    z-index: 1;
}

.post-image {
    max-height: 500px;
    width: auto;
    max-width: 100%;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.post-video {
    width: 100%;
    max-width: 1000px;
    max-height: 500px;
    border-radius: 4px;
}

.delete-media-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #E80000;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.post-tag {
    background: var(--color-primary);
    color: var(--color-on-primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
}

.post-tag:hover {
    background: var(--color-primary-darker);
}

/* Modal styles */
.media-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.media-modal-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.media-modal-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
}

/* Explore Page Styles */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.post-card {
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}

.post-card-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
    background-color: #f0f0f0;
}

.post-card:hover .post-card-image {
    transform: scale(1.2); /* 20% zoom on hover */
}

/* Update your CSS - remove max-height and use webkit line clamp */
.post-card-title {
    padding: 0 0 0 0;
    font-size: 20px;
    line-height: 1.3;
    color: white;
    text-align: left;
    
    /* This should work for 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    /* Force 2 lines height */
    height: calc(1.3em * 2);
    max-height: calc(1.3em * 2);
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pagination-item {
    padding: 8px 16px;
    background: var(--color-bg-container);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-text-container);
    transition: background 0.3s ease;
}

.pagination-item:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pagination-item.active {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.pagination-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .explore-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .explore-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .post-card-image-container {
        height: 160px;
    }
    
    .post-card-title {
        font-size: 18px;
        height: 46px; /* Adjusted for smaller font */
    }
}

@media (max-width: 480px) {
    .explore-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .post-card-image-container {
        height: 200px;
    }
    
    .post-card-title {
        font-size: 20px;
        height: 52px;
    }
}

/* Post Actions Styles */
.post-actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

.post-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-text-container);
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 16px;
}

.post-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.post-action-btn.active {
    color: var(--color-primary);
}

.post-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.post-action-text {
    font-size: 14px;
}

.material-icons {
    font-size: 20px;
}

/* Profile Styles */
.profile-container {
    max-width: 1200px;
    margin: 0 auto;
}

.profile-picture-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-primary);
}

.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.profile-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.profile-picture-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-primary);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.profile-picture-fallback {
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    opacity: 0.3;
}

.profile-picture-container:has(img[src*="default_profile.jpg"]) .profile-picture-fallback {
    display: none;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: scale(1.1);
}

.profile-section {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 8px;
}

.section-title {
    font-weight: bold;
}

.see-more-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
}

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

.post-status-badge {
    display: inline-block;
    background: #ff9800;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.container-landing-ad-sec-t {
    min-height: 200px;
}

/* EXPLORE */
.button-explore-catg-up > a > div {
    padding: 8px 12px 8px 12px;
    border-radius: 10px;
    background-color: var(--color-bg-gbody);
    font-size: 20px;
} .button-explore-catg-up:hover > a > div {
    background-color: var(--color-primary-darker);
}

.button-explore-catg-up > a {
    color: white;
    text-decoration: none;
}

/* Post Card Icons */
.post-card-icons {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.post-card-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.post-card-image-container {
    position: relative;
}