:root {
    --background-primary: #e9f6ff;         
    --background-secondary: #cbe9ff;       
    --text-primary: #012a4a;               
    --text-secondary: #3a7ca5;             
    --accent-color: #00b7ff;               
    --danger-color: #ff5e6c;               
    --input-background: #ffffff;           
    --input-notice: #0077cc80;             
}


/* Light theme colors */

[data-theme="light"] {
    --background-primary: #FFFFFF;
    --background-secondary: #F5F5F5;
    --text-primary: #15131A;
    --text-secondary: #666666;
    --accent-color: #71CAC7;
    --danger-color: #FF5B42;
    --input-background: #EEEEEE;
    --input-notice: #e65900c4
}

[data-theme="monokai"] {
    --background-primary: #272822;
    --background-secondary: #3E3D32;
    --text-primary: #F8F8F2;
    --text-secondary: #75715E;
    --accent-color: #A6E22E;
    --danger-color: #F92672;
    --input-background: #49483E;
    --input-notice: #FD971Fc4;
}


/* Solarized theme - easy on the eyes */

[data-theme="solarized"] {
    --background-primary: #002B36;
    --background-secondary: #073642;
    --text-primary: #93A1A1;
    --text-secondary: #586E75;
    --accent-color: #2AA198;
    --danger-color: #DC322F;
    --input-background: #094652;
    --input-notice: #CB4B16c4;
}


/* Nord theme - cool and calming */

[data-theme="nord"] {
    --background-primary: #2E3440;
    --background-secondary: #3B4252;
    --text-primary: #ECEFF4;
    --text-secondary: #D8DEE9;
    --accent-color: #88C0D0;
    --danger-color: #BF616A;
    --input-background: #434C5E;
    --input-notice: #D08770c4;
}


/* Dracula theme - vibrant and modern */

[data-theme="dracula"] {
    --background-primary: #282A36;
    --background-secondary: #44475A;
    --text-primary: #F8F8F2;
    --text-secondary: #fff;
    /* --text-secondary: #6272A4; */
    --accent-color: #50FA7B;
    --danger-color: #FF5555;
    --input-background: #383A59;
    --input-notice: #FFB86Cc4;
}

[data-theme="midnight"] {
    --background-primary: #0B0F1A;
    --background-secondary: #161A2B;
    --text-primary: #FFFFFF;
    --text-secondary: #8C8C8C;
    --accent-color: #5561FF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="eclipse"] {
    --background-primary: #1B1B1B;
    --background-secondary: #2C2C2C;
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;
    --accent-color: #BB86FC;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="matrix"] {
    --background-primary: #0D0208;
    --background-secondary: #162615;
    --text-primary: #00FF41;
    --text-secondary: #72FF8F;
    --accent-color: #008F11;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="sunset"] {
    --background-primary: #2B1A1F;
    --background-secondary: #3E2A30;
    --text-primary: #FFFFFF;
    --text-secondary: #CCA8AA;
    --accent-color: #FF7E5F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="aurora"] {
    --background-primary: #1A1F2B;
    --background-secondary: #252B38;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --accent-color: #00C9A7;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="ocean"] {
    --background-primary: #0E1B1F;
    --background-secondary: #182C30;
    --text-primary: #FFFFFF;
    --text-secondary: #95A3A3;
    --accent-color: #00ADB5;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="forest"] {
    --background-primary: #0F1A0E;
    --background-secondary: #1D2B1C;
    --text-primary: #FFFFFF;
    --text-secondary: #B7CBB0;
    --accent-color: #4CAF50;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="desert"] {
    --background-primary: #2A2417;
    --background-secondary: #3B3523;
    --text-primary: #F5F5DC;
    --text-secondary: #C7C2A2;
    --accent-color: #E2B964;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="royal"] {
    --background-primary: #141227;
    --background-secondary: #1F1B3A;
    --text-primary: #FFFFFF;
    --text-secondary: #C4C1E0;
    --accent-color: #7D5FFF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="blush"] {
    --background-primary: #1E0D13;
    --background-secondary: #2C141C;
    --text-primary: #FFFFFF;
    --text-secondary: #E2BFC3;
    --accent-color: #F28CA6;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="slate"] {
    --background-primary: #1C1E24;
    --background-secondary: #2A2C34;
    --text-primary: #FFFFFF;
    --text-secondary: #999999;
    --accent-color: #748CAB;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="coral"] {
    --background-primary: #2B1C1A;
    --background-secondary: #3D2A27;
    --text-primary: #FFFFFF;
    --text-secondary: #D8C2C0;
    --accent-color: #FF857F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="vapor"] {
    --background-primary: #1F1A2B;
    --background-secondary: #2C2740;
    --text-primary: #FFFFFF;
    --text-secondary: #D1C9F0;
    --accent-color: #F0A6FF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="mint"] {
    --background-primary: #101712;
    --background-secondary: #1C2A20;
    --text-primary: #FFFFFF;
    --text-secondary: #B1CAB5;
    --accent-color: #98FF98;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="amber"] {
    --background-primary: #2E2517;
    --background-secondary: #473924;
    --text-primary: #FFFFFF;
    --text-secondary: #E0C5A3;
    --accent-color: #FFBF00;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="arctic"] {
    --background-primary: #E0F7FA;
    --background-secondary: #B2EBF2;
    --text-primary: #000000;
    --text-secondary: #3A3A3A;
    --accent-color: #006064;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="latte"] {
    --background-primary: #F3E9DC;
    --background-secondary: #E5D6C5;
    --text-primary: #000000;
    --text-secondary: #5C534A;
    --accent-color: #D2B48C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="cherry"] {
    --background-primary: #2C0F13;
    --background-secondary: #40151B;
    --text-primary: #FFFFFF;
    --text-secondary: #ECAAB0;
    --accent-color: #F44336;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="meadow"] {
    --background-primary: #F1F8E9;
    --background-secondary: #DCECC5;
    --text-primary: #000000;
    --text-secondary: #4B5B43;
    --accent-color: #7CB342;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4
}

[data-theme="berry"] {
    --background-primary: #2E1228;
    --background-secondary: #42173B;
    --text-primary: #FFFFFF;
    --text-secondary: #E3C3DD;
    --accent-color: #D81B60;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="linen"] {
    --background-primary: #FAF0E6;
    --background-secondary: #E9DCD1;
    --text-primary: #000000;
    --text-secondary: #5F544E;
    --accent-color: #CCAE94;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="marine2"] {
    --background-primary: #0E2A30;
    --background-secondary: #1A3942;
    --text-primary: #FFFFFF;
    --text-secondary: #A3BDC3;
    --accent-color: #00B8D4;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="lilac"] {
    --background-primary: #EDE7F6;
    --background-secondary: #D1C4E9;
    --text-primary: #000000;
    --text-secondary: #5A4E66;
    --accent-color: #9575CD;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="fungi"] {
    --background-primary: #2A1E17;
    --background-secondary: #3B2F27;
    --text-primary: #FFFFFF;
    --text-secondary: #C9B8AE;
    --accent-color: #8D6E63;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="neon"] {
    --background-primary: #141414;
    --background-secondary: #1F1F1F;
    --text-primary: #FFFFFF;
    --text-secondary: #808080;
    --accent-color: #39FF14;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="frost"] {
    --background-primary: #ECF0F1;
    --background-secondary: #D5DBDB;
    --text-primary: #000000;
    --text-secondary: #5C5C5C;
    --accent-color: #76D7C4;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="hazel"] {
    --background-primary: #2A241B;
    --background-secondary: #3B3226;
    --text-primary: #FFFFFF;
    --text-secondary: #D2C7B8;
    --accent-color: #8E6B23;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="tango"] {
    --background-primary: #2F1303;
    --background-secondary: #44200A;
    --text-primary: #FFFFFF;
    --text-secondary: #E8C5B4;
    --accent-color: #FF6F00;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="orchid"] {
    --background-primary: #3B2C3A;
    --background-secondary: #4A3A48;
    --text-primary: #FFFFFF;
    --text-secondary: #D5C2D8;
    --accent-color: #DA70D6;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="citrus"] {
    --background-primary: #FAFCEB;
    --background-secondary: #E6EDC7;
    --text-primary: #000000;
    --text-secondary: #5B5F41;
    --accent-color: #C6FF00;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="smoke2"] {
    --background-primary: #121212;
    --background-secondary: #222222;
    --text-primary: #FFFFFF;
    --text-secondary: #9A9A9A;
    --accent-color: #5F5F5F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="clay"] {
    --background-primary: #211A17;
    --background-secondary: #302620;
    --text-primary: #FFFFFF;
    --text-secondary: #C7BAB4;
    --accent-color: #B87333;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="bubblegum"] {
    --background-primary: #FCE4EC;
    --background-secondary: #F8BBD0;
    --text-primary: #000000;
    --text-secondary: #5B4046;
    --accent-color: #FF80AB;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="azure"] {
    --background-primary: #F0FFFF;
    --background-secondary: #D9F6F6;
    --text-primary: #000000;
    --text-secondary: #5E6E6E;
    --accent-color: #0080FF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="olive"] {
    --background-primary: #3B3B17;
    --background-secondary: #515129;
    --text-primary: #FFFFFF;
    --text-secondary: #C8C8A9;
    --accent-color: #808000;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sienna"] {
    --background-primary: #3D1F1A;
    --background-secondary: #4F2923;
    --text-primary: #FFFFFF;
    --text-secondary: #D1B4AF;
    --accent-color: #A0522D;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="shadow"] {
    --background-primary: #202124;
    --background-secondary: #2C2D2F;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --accent-color: #60646D;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="honey"] {
    --background-primary: #FFF8E1;
    --background-secondary: #FFECB3;
    --text-primary: #000000;
    --text-secondary: #5E4F2B;
    --accent-color: #FFC107;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="glacier"] {
    --background-primary: #E0F7FA;
    --background-secondary: #B2EBF2;
    --text-primary: #000000;
    --text-secondary: #4F7072;
    --accent-color: #00BCD4;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ember"] {
    --background-primary: #1C0A02;
    --background-secondary: #2E1306;
    --text-primary: #FFFFFF;
    --text-secondary: #CCB8AF;
    --accent-color: #FF5722;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="pollen"] {
    --background-primary: #FEF9E7;
    --background-secondary: #FCF3CF;
    --text-primary: #000000;
    --text-secondary: #666240;
    --accent-color: #F9E79F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="raven"] {
    --background-primary: #111111;
    --background-secondary: #1C1C1C;
    --text-primary: #FFFFFF;
    --text-secondary: #7A7A7A;
    --accent-color: #424242;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="rust"] {
    --background-primary: #2F1B16;
    --background-secondary: #45291F;
    --text-primary: #FFFFFF;
    --text-secondary: #D8B8AC;
    --accent-color: #B7410E;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="powder"] {
    --background-primary: #F5F5F5;
    --background-secondary: #E0E0E0;
    --text-primary: #000000;
    --text-secondary: #707070;
    --accent-color: #90A4AE;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="polar"] {
    --background-primary: #FFFFFF;
    --background-secondary: #ECEFF1;
    --text-primary: #000000;
    --text-secondary: #616161;
    --accent-color: #B0BEC5;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="plum"] {
    --background-primary: #2E1A2F;
    --background-secondary: #3F2850;
    --text-primary: #FFFFFF;
    --text-secondary: #D5C2DD;
    --accent-color: #B96AC9;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="brick"] {
    --background-primary: #3A1F1F;
    --background-secondary: #4C2828;
    --text-primary: #FFFFFF;
    --text-secondary: #D7B3B3;
    --accent-color: #CB4154;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="navy"] {
    --background-primary: #0B132B;
    --background-secondary: #1C2541;
    --text-primary: #FFFFFF;
    --text-secondary: #A1ACC3;
    --accent-color: #3A506B;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="cobalt"] {
    --background-primary: #051D4D;
    --background-secondary: #0A2C6B;
    --text-primary: #FFFFFF;
    --text-secondary: #A0B2D4;
    --accent-color: #003399;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="coral2"] {
    --background-primary: #FFF5F3;
    --background-secondary: #FFE6E3;
    --text-primary: #000000;
    --text-secondary: #7F6261;
    --accent-color: #FF6F61;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="orchid2"] {
    --background-primary: #F3E5F5;
    --background-secondary: #E1BEE7;
    --text-primary: #000000;
    --text-secondary: #5F4B5B;
    --accent-color: #9C27B0;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="bronze"] {
    --background-primary: #2F1A11;
    --background-secondary: #44281C;
    --text-primary: #FFFFFF;
    --text-secondary: #D8C4BD;
    --accent-color: #CD7F32;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="galaxy"] {
    --background-primary: #110B1F;
    --background-secondary: #1D1334;
    --text-primary: #FFFFFF;
    --text-secondary: #B9AEC9;
    --accent-color: #5E3D9F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mint2"] {
    --background-primary: #E0F2F1;
    --background-secondary: #B2DFDB;
    --text-primary: #000000;
    --text-secondary: #507571;
    --accent-color: #26A69A;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="smoke3"] {
    --background-primary: #181818;
    --background-secondary: #282828;
    --text-primary: #FFFFFF;
    --text-secondary: #8E8E8E;
    --accent-color: #666666;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sand2"] {
    --background-primary: #FAF8EF;
    --background-secondary: #ECE2C6;
    --text-primary: #000000;
    --text-secondary: #5F5B45;
    --accent-color: #DCC694;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="regal"] {
    --background-primary: #1A0E2B;
    --background-secondary: #2B1840;
    --text-primary: #FFFFFF;
    --text-secondary: #C7B1D8;
    --accent-color: #6A0DAD;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="velvet"] {
    --background-primary: #200B15;
    --background-secondary: #300F20;
    --text-primary: #FFFFFF;
    --text-secondary: #E4C5D6;
    --accent-color: #AD1457;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="storm"] {
    --background-primary: #212121;
    --background-secondary: #2F2F2F;
    --text-primary: #FFFFFF;
    --text-secondary: #BDBDBD;
    --accent-color: #757575;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sky"] {
    --background-primary: #E3F2FD;
    --background-secondary: #BBDEFB;
    --text-primary: #000000;
    --text-secondary: #4A5B6A;
    --accent-color: #2196F3;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ash"] {
    --background-primary: #2E2E2E;
    --background-secondary: #3C3C3C;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --accent-color: #7F7F7F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mint3"] {
    --background-primary: #E6F7F5;
    --background-secondary: #CCEEEB;
    --text-primary: #000000;
    --text-secondary: #527977;
    --accent-color: #70EFDE;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sangria"] {
    --background-primary: #3A0D11;
    --background-secondary: #4F171C;
    --text-primary: #FFFFFF;
    --text-secondary: #DFA5A9;
    --accent-color: #8C1C1C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="linen2"] {
    --background-primary: #F9F4EF;
    --background-secondary: #E8DFD6;
    --text-primary: #000000;
    --text-secondary: #6A5E58;
    --accent-color: #C3B091;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="lapis"] {
    --background-primary: #0C1C28;
    --background-secondary: #142D40;
    --text-primary: #FFFFFF;
    --text-secondary: #A8B5C6;
    --accent-color: #26619C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="peach2"] {
    --background-primary: #FFF2E6;
    --background-secondary: #FFE0CC;
    --text-primary: #000000;
    --text-secondary: #6A5347;
    --accent-color: #FFB999;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mahogany"] {
    --background-primary: #300D0D;
    --background-secondary: #421515;
    --text-primary: #FFFFFF;
    --text-secondary: #D8B7B7;
    --accent-color: #C04000;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="winter"] {
    --background-primary: #F0F3F4;
    --background-secondary: #D6DBDF;
    --text-primary: #000000;
    --text-secondary: #5B5B5B;
    --accent-color: #5DADE2;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="avocado"] {
    --background-primary: #3D5229;
    --background-secondary: #4F6835;
    --text-primary: #FFFFFF;
    --text-secondary: #C4D4B2;
    --accent-color: #A3CB38;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="denim2"] {
    --background-primary: #1E2D47;
    --background-secondary: #293A5B;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B7C6;
    --accent-color: #4C5C7C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="serene"] {
    --background-primary: #E8F5E9;
    --background-secondary: #C8E6C9;
    --text-primary: #000000;
    --text-secondary: #4E5E4F;
    --accent-color: #81C784;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="candy"] {
    --background-primary: #FCE8F8;
    --background-secondary: #F9C5EE;
    --text-primary: #000000;
    --text-secondary: #5B4C57;
    --accent-color: #FF9FF3;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="cloud"] {
    --background-primary: #F4F6F7;
    --background-secondary: #E2E3E5;
    --text-primary: #000000;
    --text-secondary: #646464;
    --accent-color: #BDC3C7;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="denim3"] {
    --background-primary: #141E30;
    --background-secondary: #1F2B44;
    --text-primary: #FFFFFF;
    --text-secondary: #A3ADC1;
    --accent-color: #243B55;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="champagne"] {
    --background-primary: #FAEBD7;
    --background-secondary: #EADBCB;
    --text-primary: #000000;
    --text-secondary: #5C5248;
    --accent-color: #F7E7CE;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="moss"] {
    --background-primary: #293220;
    --background-secondary: #36412B;
    --text-primary: #FFFFFF;
    --text-secondary: #C2C8B8;
    --accent-color: #6B8E23;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="stone"] {
    --background-primary: #2C2C2A;
    --background-secondary: #3A3A38;
    --text-primary: #FFFFFF;
    --text-secondary: #BDBDBD;
    --accent-color: #7E7E7C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="coral3"] {
    --background-primary: #FCE6E3;
    --background-secondary: #F8CFCB;
    --text-primary: #000000;
    --text-secondary: #6D4C4B;
    --accent-color: #FF867C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mauve"] {
    --background-primary: #23182B;
    --background-secondary: #35243F;
    --text-primary: #FFFFFF;
    --text-secondary: #CABBCF;
    --accent-color: #AD7FA8;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="citrine"] {
    --background-primary: #FAF6E6;
    --background-secondary: #ECE4C8;
    --text-primary: #000000;
    --text-secondary: #6E674F;
    --accent-color: #E4D00A;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="denim4"] {
    --background-primary: #182039;
    --background-secondary: #232E4C;
    --text-primary: #FFFFFF;
    --text-secondary: #9BA2B3;
    --accent-color: #3A4C79;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="aqua"] {
    --background-primary: #E0FFFF;
    --background-secondary: #C2F0F0;
    --text-primary: #000000;
    --text-secondary: #536969;
    --accent-color: #40E0D0;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ember2"] {
    --background-primary: #2B1004;
    --background-secondary: #3E1A07;
    --text-primary: #FFFFFF;
    --text-secondary: #CCB0A2;
    --accent-color: #FF7043;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="foam"] {
    --background-primary: #EBF8F6;
    --background-secondary: #D6F0EC;
    --text-primary: #000000;
    --text-secondary: #527674;
    --accent-color: #80CBC4;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="orchid3"] {
    --background-primary: #F6E6FA;
    --background-secondary: #E7C8F0;
    --text-primary: #000000;
    --text-secondary: #5F4C5D;
    --accent-color: #B565A7;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="blush2"] {
    --background-primary: #2A0E13;
    --background-secondary: #3B141C;
    --text-primary: #FFFFFF;
    --text-secondary: #DCB2B7;
    --accent-color: #EC407A;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="marble"] {
    --background-primary: #EAEAEA;
    --background-secondary: #D0D0D0;
    --text-primary: #000000;
    --text-secondary: #666666;
    --accent-color: #A6A6A6;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="turquoise"] {
    --background-primary: #00E5EE;
    --background-secondary: #AFEEEE;
    --text-primary: #000000;
    --text-secondary: #4C6666;
    --accent-color: #40E0D0;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="magma"] {
    --background-primary: #2C0608;
    --background-secondary: #3A0A0E;
    --text-primary: #FFFFFF;
    --text-secondary: #DAB4B6;
    --accent-color: #FF4500;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mist"] {
    --background-primary: #F0F0F0;
    --background-secondary: #D9D9D9;
    --text-primary: #000000;
    --text-secondary: #5A5A5A;
    --accent-color: #9E9E9E;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="jungle"] {
    --background-primary: #1E2D24;
    --background-secondary: #2B4135;
    --text-primary: #FFFFFF;
    --text-secondary: #B3C8BA;
    --accent-color: #4C9A2A;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="silk"] {
    --background-primary: #FAF4FF;
    --background-secondary: #E8DFF0;
    --text-primary: #000000;
    --text-secondary: #6F6273;
    --accent-color: #C9A0DC;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sapphire"] {
    --background-primary: #0D1A26;
    --background-secondary: #14283A;
    --text-primary: #FFFFFF;
    --text-secondary: #AEBECC;
    --accent-color: #0F52BA;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="leaf"] {
    --background-primary: #EEF7EE;
    --background-secondary: #D8EED8;
    --text-primary: #000000;
    --text-secondary: #5C6A5C;
    --accent-color: #8BC34A;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="rouge"] {
    --background-primary: #2C0E12;
    --background-secondary: #3F141A;
    --text-primary: #FFFFFF;
    --text-secondary: #E0A7AC;
    --accent-color: #C81E3C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="fog"] {
    --background-primary: #E8E8E8;
    --background-secondary: #D0D0D0;
    --text-primary: #000000;
    --text-secondary: #606060;
    --accent-color: #9A9A9A;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="umber"] {
    --background-primary: #2F2217;
    --background-secondary: #45331F;
    --text-primary: #FFFFFF;
    --text-secondary: #D5C1B0;
    --accent-color: #635147;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="dahlia"] {
    --background-primary: #3B1620;
    --background-secondary: #4F1E2B;
    --text-primary: #FFFFFF;
    --text-secondary: #E0BFC6;
    --accent-color: #BB3385;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="onyx"] {
    --background-primary: #0F0F0F;
    --background-secondary: #1B1B1B;
    --text-primary: #FFFFFF;
    --text-secondary: #808080;
    --accent-color: #444444;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="velvet2"] {
    --background-primary: #2A0D17;
    --background-secondary: #3C131F;
    --text-primary: #FFFFFF;
    --text-secondary: #D8AEB6;
    --accent-color: #9D2235;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="latte2"] {
    --background-primary: #F7EFE7;
    --background-secondary: #E7D6C8;
    --text-primary: #000000;
    --text-secondary: #5F4F44;
    --accent-color: #C2A37F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="salmon"] {
    --background-primary: #FFF3F2;
    --background-secondary: #FFE0DE;
    --text-primary: #000000;
    --text-secondary: #7C5B5A;
    --accent-color: #FA8072;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ruby"] {
    --background-primary: #2C0000;
    --background-secondary: #400000;
    --text-primary: #FFFFFF;
    --text-secondary: #D8B4B4;
    --accent-color: #9B111E;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mellow"] {
    --background-primary: #F3F9E3;
    --background-secondary: #DFEBC2;
    --text-primary: #000000;
    --text-secondary: #586444;
    --accent-color: #AEE571;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mauve2"] {
    --background-primary: #EEE2EE;
    --background-secondary: #DCC4DC;
    --text-primary: #000000;
    --text-secondary: #5F4E5F;
    --accent-color: #E0B0FF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="bronze2"] {
    --background-primary: #4D3026;
    --background-secondary: #5E3B2F;
    --text-primary: #FFFFFF;
    --text-secondary: #DBC8C2;
    --accent-color: #CD7F32;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="dove"] {
    --background-primary: #E8E8E8;
    --background-secondary: #D5D5D5;
    --text-primary: #000000;
    --text-secondary: #5B5B5B;
    --accent-color: #9C9C9C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="indigo"] {
    --background-primary: #1A237E;
    --background-secondary: #283593;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B2D1;
    --accent-color: #3F51B5;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ebony"] {
    --background-primary: #161616;
    --background-secondary: #232323;
    --text-primary: #FFFFFF;
    --text-secondary: #8A8A8A;
    --accent-color: #2E2E2E;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="honey2"] {
    --background-primary: #FFFBEA;
    --background-secondary: #FFF3C9;
    --text-primary: #000000;
    --text-secondary: #6B5C2E;
    --accent-color: #FBC02D;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="pine"] {
    --background-primary: #1B3A2E;
    --background-secondary: #244D3F;
    --text-primary: #FFFFFF;
    --text-secondary: #AEC7BD;
    --accent-color: #4CAf50;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="charcoal"] {
    --background-primary: #2E2E2E;
    --background-secondary: #3C3C3C;
    --text-primary: #FFFFFF;
    --text-secondary: #BFBFBF;
    --accent-color: #666666;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="papaya"] {
    --background-primary: #FFF1E6;
    --background-secondary: #FFE2CC;
    --text-primary: #000000;
    --text-secondary: #6F5342;
    --accent-color: #FFDAB9;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="shadow2"] {
    --background-primary: #222326;
    --background-secondary: #2E2F33;
    --text-primary: #FFFFFF;
    --text-secondary: #AAAAAA;
    --accent-color: #585C63;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="gold"] {
    --background-primary: #FDF5E6;
    --background-secondary: #F8ECC2;
    --text-primary: #000000;
    --text-secondary: #6E613F;
    --accent-color: #FFD700;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="lilac2"] {
    --background-primary: #F3E8FF;
    --background-secondary: #E2CCFF;
    --text-primary: #000000;
    --text-secondary: #6A5780;
    --accent-color: #BBA2FF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="pearl2"] {
    --background-primary: #F8F8F8;
    --background-secondary: #ECECEC;
    --text-primary: #000000;
    --text-secondary: #7A7A7A;
    --accent-color: #D9D9D9;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mustard"] {
    --background-primary: #FFF9C4;
    --background-secondary: #FFF59D;
    --text-primary: #000000;
    --text-secondary: #5E5B2F;
    --accent-color: #FFD54F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ash2"] {
    --background-primary: #3A3A3A;
    --background-secondary: #4C4C4C;
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8B8;
    --accent-color: #949494;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="orchid4"] {
    --background-primary: #3D273E;
    --background-secondary: #4C3250;
    --text-primary: #FFFFFF;
    --text-secondary: #D7C2DA;
    --accent-color: #BA55D3;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="coral4"] {
    --background-primary: #FFEBE6;
    --background-secondary: #FFD6CC;
    --text-primary: #000000;
    --text-secondary: #6F524C;
    --accent-color: #FF5E4D;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="spice"] {
    --background-primary: #2B170D;
    --background-secondary: #3E2413;
    --text-primary: #FFFFFF;
    --text-secondary: #D6B9A8;
    --accent-color: #B3520D;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="glacier2"] {
    --background-primary: #E1F5FE;
    --background-secondary: #B3E5FC;
    --text-primary: #000000;
    --text-secondary: #4D6C77;
    --accent-color: #03A9F4;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="marine3"] {
    --background-primary: #0C1F2B;
    --background-secondary: #1B3645;
    --text-primary: #FFFFFF;
    --text-secondary: #A4BDC8;
    --accent-color: #0277BD;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="storm2"] {
    --background-primary: #292929;
    --background-secondary: #383838;
    --text-primary: #FFFFFF;
    --text-secondary: #ADADAD;
    --accent-color: #6D6D6D;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="macaron"] {
    --background-primary: #FFF7FD;
    --background-secondary: #FEE3FA;
    --text-primary: #000000;
    --text-secondary: #6C5569;
    --accent-color: #F7A8E0;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ink2"] {
    --background-primary: #121212;
    --background-secondary: #1B1B1B;
    --text-primary: #FFFFFF;
    --text-secondary: #888888;
    --accent-color: #37474F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="powder2"] {
    --background-primary: #FAFAFA;
    --background-secondary: #ECECEC;
    --text-primary: #000000;
    --text-secondary: #767676;
    --accent-color: #B0BEC5;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="linen3"] {
    --background-primary: #F8EFE8;
    --background-secondary: #E6DBD3;
    --text-primary: #000000;
    --text-secondary: #5D514B;
    --accent-color: #C7A48A;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="peach3"] {
    --background-primary: #FFF4EC;
    --background-secondary: #FFE2D1;
    --text-primary: #000000;
    --text-secondary: #70584C;
    --accent-color: #FFA781;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="forest2"] {
    --background-primary: #102212;
    --background-secondary: #1C371F;
    --text-primary: #FFFFFF;
    --text-secondary: #A6C4A6;
    --accent-color: #3B9F3C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sky2"] {
    --background-primary: #E1F0FF;
    --background-secondary: #C2E0FF;
    --text-primary: #000000;
    --text-secondary: #546F88;
    --accent-color: #64B5F6;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="blush3"] {
    --background-primary: #3A1319;
    --background-secondary: #4F1A22;
    --text-primary: #FFFFFF;
    --text-secondary: #DFA5AB;
    --accent-color: #F48FB1;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="clay2"] {
    --background-primary: #291F1B;
    --background-secondary: #3A2D27;
    --text-primary: #FFFFFF;
    --text-secondary: #CCBCB5;
    --accent-color: #B66A50;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="arctic2"] {
    --background-primary: #ECFBFE;
    --background-secondary: #D4F6FD;
    --text-primary: #000000;
    --text-secondary: #5E7E80;
    --accent-color: #66D3FA;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="iris"] {
    --background-primary: #241D4F;
    --background-secondary: #302A6B;
    --text-primary: #FFFFFF;
    --text-secondary: #CABFE0;
    --accent-color: #5A4FCF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mist2"] {
    --background-primary: #EFEFEF;
    --background-secondary: #DEDEDE;
    --text-primary: #000000;
    --text-secondary: #616161;
    --accent-color: #AEAEAE;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="denim5"] {
    --background-primary: #1C2533;
    --background-secondary: #263244;
    --text-primary: #FFFFFF;
    --text-secondary: #A5AEBD;
    --accent-color: #3B4A61;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ruby2"] {
    --background-primary: #400000;
    --background-secondary: #5A0000;
    --text-primary: #FFFFFF;
    --text-secondary: #DDBBBB;
    --accent-color: #AA0000;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="honey3"] {
    --background-primary: #FFF9D9;
    --background-secondary: #FFF3B3;
    --text-primary: #000000;
    --text-secondary: #6F5E28;
    --accent-color: #FFCA28;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="terra"] {
    --background-primary: #2D1F14;
    --background-secondary: #3C2D22;
    --text-primary: #FFFFFF;
    --text-secondary: #D1BFB5;
    --accent-color: #8B4513;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="pearl3"] {
    --background-primary: #FBFBFB;
    --background-secondary: #EFEFEF;
    --text-primary: #000000;
    --text-secondary: #777777;
    --accent-color: #CFCFCF;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="marble2"] {
    --background-primary: #F2F2F2;
    --background-secondary: #DBDBDB;
    --text-primary: #000000;
    --text-secondary: #616161;
    --accent-color: #B8B8B8;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="smoke4"] {
    --background-primary: #111111;
    --background-secondary: #202020;
    --text-primary: #FFFFFF;
    --text-secondary: #8A8A8A;
    --accent-color: #505050;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="frost2"] {
    --background-primary: #E3F6F5;
    --background-secondary: #CFEDEC;
    --text-primary: #000000;
    --text-secondary: #587272;
    --accent-color: #A7D8DE;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="velvet3"] {
    --background-primary: #2C0F1D;
    --background-secondary: #3F172C;
    --text-primary: #FFFFFF;
    --text-secondary: #D4A9BB;
    --accent-color: #8B2252;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="bloom"] {
    --background-primary: #FCE4EC;
    --background-secondary: #F8BBD0;
    --text-primary: #000000;
    --text-secondary: #6B4C57;
    --accent-color: #F06292;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="fog2"] {
    --background-primary: #E4E4E4;
    --background-secondary: #CCCCCC;
    --text-primary: #000000;
    --text-secondary: #5F5F5F;
    --accent-color: #999999;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sepia"] {
    --background-primary: #F4ECD8;
    --background-secondary: #E2D3BB;
    --text-primary: #000000;
    --text-secondary: #6E5D4B;
    --accent-color: #A67B5B;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="peach4"] {
    --background-primary: #FFF3EA;
    --background-secondary: #FFDCCB;
    --text-primary: #000000;
    --text-secondary: #6F564A;
    --accent-color: #FFAB91;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="galaxy2"] {
    --background-primary: #1B0A2A;
    --background-secondary: #29103F;
    --text-primary: #FFFFFF;
    --text-secondary: #C2B4D4;
    --accent-color: #482880;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="meadow2"] {
    --background-primary: #F5FBEF;
    --background-secondary: #E4F3D5;
    --text-primary: #000000;
    --text-secondary: #586B4D;
    --accent-color: #AED581;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="cherry2"] {
    --background-primary: #3A0F15;
    --background-secondary: #4E151C;
    --text-primary: #FFFFFF;
    --text-secondary: #EAA2A9;
    --accent-color: #F44336;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="ocean2"] {
    --background-primary: #0A1E1F;
    --background-secondary: #123032;
    --text-primary: #FFFFFF;
    --text-secondary: #9DB5B5;
    --accent-color: #26C6DA;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="fog3"] {
    --background-primary: #EAEAEA;
    --background-secondary: #DADADA;
    --text-primary: #000000;
    --text-secondary: #666666;
    --accent-color: #AAAAAA;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="orchid5"] {
    --background-primary: #4C3750;
    --background-secondary: #5E4563;
    --text-primary: #FFFFFF;
    --text-secondary: #DCC6DE;
    --accent-color: #CE93D8;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="night"] {
    --background-primary: #0D0F19;
    --background-secondary: #1B1E2C;
    --text-primary: #FFFFFF;
    --text-secondary: #9A9AAC;
    --accent-color: #5961A3;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="pearl4"] {
    --background-primary: #F9F9F9;
    --background-secondary: #EDEDED;
    --text-primary: #000000;
    --text-secondary: #7A7A7A;
    --accent-color: #D8D8D8;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="marine4"] {
    --background-primary: #0A2633;
    --background-secondary: #153746;
    --text-primary: #FFFFFF;
    --text-secondary: #A6B8BF;
    --accent-color: #0097A7;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="linen4"] {
    --background-primary: #F7ECE5;
    --background-secondary: #E4D4CC;
    --text-primary: #000000;
    --text-secondary: #5F514C;
    --accent-color: #C8AD9E;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="plum2"] {
    --background-primary: #3D2440;
    --background-secondary: #4E2F52;
    --text-primary: #FFFFFF;
    --text-secondary: #D9C0DD;
    --accent-color: #9F5F9F;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="coral5"] {
    --background-primary: #FFEAE5;
    --background-secondary: #FFD2CB;
    --text-primary: #000000;
    --text-secondary: #7C524C;
    --accent-color: #FF5E57;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="lilac3"] {
    --background-primary: #F5EEFA;
    --background-secondary: #DFD1EB;
    --text-primary: #000000;
    --text-secondary: #64567B;
    --accent-color: #B39DDB;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="graphite"] {
    --background-primary: #212121;
    --background-secondary: #2E2E2E;
    --text-primary: #FFFFFF;
    --text-secondary: #9E9E9E;
    --accent-color: #424242;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="desert2"] {
    --background-primary: #352A1A;
    --background-secondary: #483A25;
    --text-primary: #FFFFFF;
    --text-secondary: #D8C7AD;
    --accent-color: #D2B48C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="latte3"] {
    --background-primary: #F9F0E4;
    --background-secondary: #EBDCC8;
    --text-primary: #000000;
    --text-secondary: #6F5E51;
    --accent-color: #D2B48C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="crimson"] {
    --background-primary: #2E0002;
    --background-secondary: #400005;
    --text-primary: #FFFFFF;
    --text-secondary: #DBB5B7;
    --accent-color: #DC143C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="mint4"] {
    --background-primary: #DFF7F2;
    --background-secondary: #C3EBE2;
    --text-primary: #000000;
    --text-secondary: #557873;
    --accent-color: #6EE7C5;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="bronze3"] {
    --background-primary: #4F2D1F;
    --background-secondary: #5F392A;
    --text-primary: #FFFFFF;
    --text-secondary: #E1CFC7;
    --accent-color: #CD7F32;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="arctic3"] {
    --background-primary: #ECFCFF;
    --background-secondary: #D4F7FB;
    --text-primary: #000000;
    --text-secondary: #5E7C7F;
    --accent-color: #8EE0F8;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sangria2"] {
    --background-primary: #4D0E17;
    --background-secondary: #60131E;
    --text-primary: #FFFFFF;
    --text-secondary: #E2A7AD;
    --accent-color: #8C1C1C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="smoke5"] {
    --background-primary: #1A1A1A;
    --background-secondary: #2B2B2B;
    --text-primary: #FFFFFF;
    --text-secondary: #929292;
    --accent-color: #666666;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="marine5"] {
    --background-primary: #0A2734;
    --background-secondary: #143345;
    --text-primary: #FFFFFF;
    --text-secondary: #A2B7BF;
    --accent-color: #0277BD;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="terra2"] {
    --background-primary: #3B271B;
    --background-secondary: #4C372A;
    --text-primary: #FFFFFF;
    --text-secondary: #DCC7B9;
    --accent-color: #8B5A2B;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="sand3"] {
    --background-primary: #FBF8E5;
    --background-secondary: #EDE7C6;
    --text-primary: #000000;
    --text-secondary: #6E6A49;
    --accent-color: #D9C592;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="denim6"] {
    --background-primary: #131A2B;
    --background-secondary: #1C2740;
    --text-primary: #FFFFFF;
    --text-secondary: #A3ABC1;
    --accent-color: #345D7E;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="orchid6"] {
    --background-primary: #5A3D5E;
    --background-secondary: #6E4B73;
    --text-primary: #FFFFFF;
    --text-secondary: #E1CBEC;
    --accent-color: #B784B8;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="coral6"] {
    --background-primary: #FFEAE6;
    --background-secondary: #FFD2CE;
    --text-primary: #000000;
    --text-secondary: #7B524F;
    --accent-color: #FF5F52;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="shadow3"] {
    --background-primary: #202224;
    --background-secondary: #2B2D2F;
    --text-primary: #FFFFFF;
    --text-secondary: #B1B1B1;
    --accent-color: #6C6C6C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="milkshake"] {
    --background-primary: #FFF9F6;
    --background-secondary: #FFEFEA;
    --text-primary: #000000;
    --text-secondary: #7E5F58;
    --accent-color: #FDD5C2;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="basil"] {
    --background-primary: #1F3B2C;
    --background-secondary: #2D4F3C;
    --text-primary: #FFFFFF;
    --text-secondary: #B0CABA;
    --accent-color: #6AB187;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="galaxy3"] {
    --background-primary: #0E0522;
    --background-secondary: #1A0A3C;
    --text-primary: #FFFFFF;
    --text-secondary: #B8A4CC;
    --accent-color: #5D3FD3;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="blush4"] {
    --background-primary: #4A1B22;
    --background-secondary: #5F232B;
    --text-primary: #FFFFFF;
    --text-secondary: #E3A9AF;
    --accent-color: #F48FB1;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="dusk2"] {
    --background-primary: #2F2740;
    --background-secondary: #3D3350;
    --text-primary: #FFFFFF;
    --text-secondary: #CFC4E2;
    --accent-color: #8E72BB;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="latte4"] {
    --background-primary: #FAF2E8;
    --background-secondary: #E8D9CA;
    --text-primary: #000000;
    --text-secondary: #68584E;
    --accent-color: #C2A78C;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

[data-theme="matrix"] {
    --background-primary: #0D0208;
    --background-secondary: #162615;
    --text-primary: #00FF41;
    --text-secondary: #72FF8F;
    --accent-color: #008F11;
    --danger-color: #FF5B42;
    --input-background: #333036;
    --input-notice: #e65900c4;
}

.body {
    background: var(--background-primary);
}

.dark {
    background-color: #e9f6ff !important;
    color: #012a4a !important;
    opacity: 0.8;
}

.light {
    background-color: #FFFFFF !important;
    color: #15131A !important;
    opacity: 0.8;
}

.monokai {
    background-color: #272822 !important;
    color: #F8F8F2 !important;
    opacity: 0.8;
}

.solarized {
    background-color: #002B36 !important;
    color: #93A1A1 !important;
    opacity: 0.8;
}

.nord {
    background-color: #2E3440 !important;
    color: #ECEFF4 !important;
    opacity: 0.8;
}

.dracula {
    background-color: #282A36 !important;
    opacity: 0.8;
    color: #F8F8F2 !important;
}


/* Theme classes */

.midnight {
    background-color: #0B0F1A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.eclipse {
    background-color: #1B1B1B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.matrix {
    background-color: #0D0208 !important;
    color: #00FF41 !important;
    opacity: 0.8;
}

.sunset {
    background-color: #2B1A1F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.aurora {
    background-color: #1A1F2B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.ocean {
    background-color: #0E1B1F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.forest {
    background-color: #0F1A0E !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.desert {
    background-color: #2A2417 !important;
    color: #F5F5DC !important;
    opacity: 0.8;
}

.royal {
    background-color: #141227 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.blush {
    background-color: #1E0D13 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.slate {
    background-color: #1C1E24 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.coral {
    background-color: #2B1C1A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.vapor {
    background-color: #1F1A2B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.mint {
    background-color: #101712 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.amber {
    background-color: #2E2517 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.arctic {
    background-color: #E0F7FA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.latte {
    background-color: #F3E9DC !important;
    color: #000000 !important;
    opacity: 0.8;
}

.cherry {
    background-color: #2C0F13 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.meadow {
    background-color: #F1F8E9 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.berry {
    background-color: #2E1228 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.linen {
    background-color: #FAF0E6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.marine2 {
    background-color: #0E2A30 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.lilac {
    background-color: #EDE7F6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.fungi {
    background-color: #2A1E17 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.neon {
    background-color: #141414 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.frost {
    background-color: #ECF0F1 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.hazel {
    background-color: #2A241B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.tango {
    background-color: #2F1303 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.orchid {
    background-color: #3B2C3A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.citrus {
    background-color: #FAFCEB !important;
    color: #000000 !important;
    opacity: 0.8;
}

.smoke2 {
    background-color: #121212 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.clay {
    background-color: #211A17 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.bubblegum {
    background-color: #FCE4EC !important;
    color: #000000 !important;
    opacity: 0.8;
}

.azure {
    background-color: #F0FFFF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.olive {
    background-color: #3B3B17 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.sienna {
    background-color: #3D1F1A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.shadow {
    background-color: #202124 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.honey {
    background-color: #FFF8E1 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.glacier {
    background-color: #E0F7FA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.ember {
    background-color: #1C0A02 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.pollen {
    background-color: #FEF9E7 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.raven {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.rust {
    background-color: #2F1B16 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.powder {
    background-color: #F5F5F5 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.polar {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.plum {
    background-color: #2E1A2F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.brick {
    background-color: #3A1F1F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.navy {
    background-color: #0B132B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.cobalt {
    background-color: #051D4D !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.coral2 {
    background-color: #FFF5F3 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.orchid2 {
    background-color: #F3E5F5 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.bronze {
    background-color: #2F1A11 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.galaxy {
    background-color: #110B1F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.mint2 {
    background-color: #E0F2F1 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.smoke3 {
    background-color: #181818 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.sand2 {
    background-color: #FAF8EF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.regal {
    background-color: #1A0E2B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.velvet {
    background-color: #200B15 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.storm {
    background-color: #212121 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.sky {
    background-color: #E3F2FD !important;
    color: #000000 !important;
    opacity: 0.8;
}

.ash {
    background-color: #2E2E2E !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.mint3 {
    background-color: #E6F7F5 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.sangria {
    background-color: #3A0D11 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.linen2 {
    background-color: #F9F4EF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.lapis {
    background-color: #0C1C28 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.peach2 {
    background-color: #FFF2E6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.mahogany {
    background-color: #300D0D !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.winter {
    background-color: #F0F3F4 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.avocado {
    background-color: #3D5229 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.denim2 {
    background-color: #1E2D47 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.serene {
    background-color: #E8F5E9 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.candy {
    background-color: #FCE8F8 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.cloud {
    background-color: #F4F6F7 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.denim3 {
    background-color: #141E30 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.champagne {
    background-color: #FAEBD7 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.moss {
    background-color: #293220 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.stone {
    background-color: #2C2C2A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.coral3 {
    background-color: #FCE6E3 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.mauve {
    background-color: #23182B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.citrine {
    background-color: #FAF6E6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.denim4 {
    background-color: #182039 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.aqua {
    background-color: #E0FFFF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.ember2 {
    background-color: #2B1004 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.foam {
    background-color: #EBF8F6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.orchid3 {
    background-color: #F6E6FA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.blush2 {
    background-color: #2A0E13 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.marble {
    background-color: #EAEAEA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.turquoise {
    background-color: #00E5EE !important;
    color: #000000 !important;
    opacity: 0.8;
}

.magma {
    background-color: #2C0608 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.mist {
    background-color: #F0F0F0 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.jungle {
    background-color: #1E2D24 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.silk {
    background-color: #FAF4FF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.sapphire {
    background-color: #0D1A26 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.leaf {
    background-color: #EEF7EE !important;
    color: #000000 !important;
    opacity: 0.8;
}

.rouge {
    background-color: #2C0E12 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.fog {
    background-color: #E8E8E8 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.umber {
    background-color: #2F2217 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.dahlia {
    background-color: #3B1620 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.onyx {
    background-color: #0F0F0F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.velvet2 {
    background-color: #2A0D17 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.latte2 {
    background-color: #F7EFE7 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.salmon {
    background-color: #FFF3F2 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.ruby {
    background-color: #2C0000 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.mellow {
    background-color: #F3F9E3 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.mauve2 {
    background-color: #EEE2EE !important;
    color: #000000 !important;
    opacity: 0.8;
}

.bronze2 {
    background-color: #4D3026 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.dove {
    background-color: #E8E8E8 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.indigo {
    background-color: #1A237E !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.ebony {
    background-color: #161616 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.honey2 {
    background-color: #FFFBEA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.pine {
    background-color: #1B3A2E !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.charcoal {
    background-color: #2E2E2E !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.papaya {
    background-color: #FFF1E6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.shadow2 {
    background-color: #222326 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.gold {
    background-color: #FDF5E6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.lilac2 {
    background-color: #F3E8FF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.pearl2 {
    background-color: #F8F8F8 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.mustard {
    background-color: #FFF9C4 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.ash2 {
    background-color: #3A3A3A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.orchid4 {
    background-color: #3D273E !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.coral4 {
    background-color: #FFEBE6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.spice {
    background-color: #2B170D !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.glacier2 {
    background-color: #E1F5FE !important;
    color: #000000 !important;
    opacity: 0.8;
}

.marine3 {
    background-color: #0C1F2B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.storm2 {
    background-color: #292929 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.macaron {
    background-color: #FFF7FD !important;
    color: #000000 !important;
    opacity: 0.8;
}

.ink2 {
    background-color: #121212 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.powder2 {
    background-color: #FAFAFA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.linen3 {
    background-color: #F8EFE8 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.peach3 {
    background-color: #FFF4EC !important;
    color: #000000 !important;
    opacity: 0.8;
}

.forest2 {
    background-color: #102212 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.sky2 {
    background-color: #E1F0FF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.blush3 {
    background-color: #3A1319 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.clay2 {
    background-color: #291F1B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.arctic2 {
    background-color: #ECFBFE !important;
    color: #000000 !important;
    opacity: 0.8;
}

.iris {
    background-color: #241D4F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.mist2 {
    background-color: #EFEFEF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.denim5 {
    background-color: #1C2533 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.ruby2 {
    background-color: #400000 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.honey3 {
    background-color: #FFF9D9 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.terra {
    background-color: #2D1F14 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.pearl3 {
    background-color: #FBFBFB !important;
    color: #000000 !important;
    opacity: 0.8;
}

.marble2 {
    background-color: #F2F2F2 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.smoke4 {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.galaxy3 {
    background-color: #0E0522 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.blush4 {
    background-color: #4A1B22 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.dusk2 {
    background-color: #2F2740 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.latte4 {
    background-color: #FAF2E8 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.matrix {
    background-color: #0D0208 !important;
    color: #00FF41 !important;
    opacity: 0.8;
}


/* Additional Theme Classes */

.frost2 {
    background-color: #E3F6F5 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.velvet3 {
    background-color: #2C0F1D !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.bloom {
    background-color: #FCE4EC !important;
    color: #000000 !important;
    opacity: 0.8;
}

.fog2 {
    background-color: #E4E4E4 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.sepia {
    background-color: #F4ECD8 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.peach4 {
    background-color: #FFF3EA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.galaxy2 {
    background-color: #1B0A2A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.meadow2 {
    background-color: #F5FBEF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.cherry2 {
    background-color: #3A0F15 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.ocean2 {
    background-color: #0A1E1F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.fog3 {
    background-color: #EAEAEA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.orchid5 {
    background-color: #4C3750 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.night {
    background-color: #0D0F19 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.pearl4 {
    background-color: #F9F9F9 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.marine4 {
    background-color: #0A2633 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.linen4 {
    background-color: #F7ECE5 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.plum2 {
    background-color: #3D2440 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.coral5 {
    background-color: #FFEAE5 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.lilac3 {
    background-color: #F5EEFA !important;
    color: #000000 !important;
    opacity: 0.8;
}

.graphite {
    background-color: #212121 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.desert2 {
    background-color: #352A1A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.latte3 {
    background-color: #F9F0E4 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.crimson {
    background-color: #2E0002 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.mint4 {
    background-color: #DFF7F2 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.bronze3 {
    background-color: #4F2D1F !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.arctic3 {
    background-color: #ECFCFF !important;
    color: #000000 !important;
    opacity: 0.8;
}

.sangria2 {
    background-color: #4D0E17 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.smoke5 {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.marine5 {
    background-color: #0A2734 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.terra2 {
    background-color: #3B271B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.sand3 {
    background-color: #FBF8E5 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.denim6 {
    background-color: #131A2B !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.orchid6 {
    background-color: #5A3D5E !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.coral6 {
    background-color: #FFEAE6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.shadow3 {
    background-color: #202224 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}

.milkshake {
    background-color: #FFF9F6 !important;
    color: #000000 !important;
    opacity: 0.8;
}

.basil {
    background-color: #1F3B2C !important;
    color: #FFFFFF !important;
    opacity: 0.8;
}


/* Add to your existing CSS */

* {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}


/* width */

 ::-webkit-scrollbar {
    width: 10px;
}


/* Track */

 ::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey; */
    border-radius: 10px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

.header img {
    width: 50%;
}

.header ul {
    display: flex;
    list-style: none !important;
    align-items: center;
    justify-content: flex-end;
    gap: 35px;
    padding: 0;
    margin: 0;
}

.header li {
    color: var(--text-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: ease 0.2s;
}

.header li:hover {
    color: var(--accent-color);
}

.m-0 {
    margin: 0 !important;
}


/* Dropdown container */

.menu .dropdown .dropdown-menu {
    display: none;
    background-color: var(--background-secondary);
    position: absolute;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    top: 100%;
    left: 0;
    list-style: none;
    /* padding: 10px 0; */
    min-width: 130px;
    z-index: 1000;
    border-radius: 4px;
    transition: ease 0.2s;
}

.custom-align {
    align-items: center !important;
}

.menu .dropdown:hover .dropdown-menu {
    display: block;
}


/* Dropdown items */

.dropdown-menu li {
    transition: ease 0.2s;
    padding: 10px 20px;
    white-space: nowrap;
}

.dropdown-menu li a {
    color: var(--text-primary);
    font-size: 14px;
    text-decoration: none;
    display: block;
}

.dropdown-menu li:hover {
    color: var(--accent-color);
    background-color: var(--background-secondary);
}

.lobby-menu.cs-timer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .cs-logo {
        transition: 0.3s all;
        opacity: 0;
        width: 40%;
        img {
            width: 100%;
            object-fit: cover;
        }
    }
}

.lobby-menu ul {
    list-style: none;
    display: flex;
    gap: 10px;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 15px 0px;
}

.lobby-menu button {
    padding: 10px;
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 5px;
}

.lobby-menu button.active {
    padding: 10px;
    color: var(--background-primary);
    background-color: var(--accent-color);
    border-radius: 5px;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.lobby-menu li {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.lobby-menu button:hover {
    color: var(--background-primary);
    background-color: var(--accent-color);
    /* padding: 10px; */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.lobby-menu h4 {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 27px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.lobby-menu h4 span {
    font-size: 20px;
}

.typing-area {
    border-radius: 28px;
    /* background: #1F1D21; */
    width: 100%;
    height: 182px;
    overflow-y: auto;
    position: relative;
}

.typing-area-cursor {
    border-left: 2px solid var(--text-primary);
    animation: blink 1s infinite;
    margin-left: 2px;
    display: inline-block;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.typing-area::-webkit-scrollbar {
    width: 0px;
}

.lobby-area {
    padding: 0px 100px 0px 100px;
}

.typing-area {
    cursor: "text";
    padding: 0 24px;
}

.text-active {
    color: var(--accent-color) !important;
}

.text-wrong {
    color: var(--danger-color) !important;
}

.text-idle {
    color: var(--text-secondary) !important;
}

.bg-idle {
    background-color: var(--text-secondary) !important;
}

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

.underline {
    text-decoration: underline;
}

.reset span {
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.reset {
    font-size: 19px;
}

.reset {
    padding: 14px 14px 0px 0px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.css-k14mpy option {
    background: var(--background-secondary) !important;
    color: #71CAC7 !important;
    border: none !important;
}

.css-1kyvvrm>option,
.css-1kyvvrm>optgroup {
    border: 1px solid var(--accent-color) !important;
    background: var(--background-secondary) !important;
}

.footer ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 3px;
    gap: 8px;
}

.footer-cs ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 0;
    margin: 3px;
}

.footer .custom {
    justify-content: flex-start;
    gap: 15px;
}

.footer ul a {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.footer ul .footer-design {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.footer ul a:hover {
    color: var(--accent-color);
}

.status div {
    height: 100px;
    width: 20%;
    text-align: center !important;
}

.status div h4 {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.status div h1 {
    color: var(--text-primary);
    text-align: center;
    font-family: Inter;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.status div h1 span {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 70px;
    /* padding: 100px 0px 30px 0px; */
}

.profile-layout {
    border-radius: 28px;
    background: var(--background-secondary);
    position: relative;
    padding: 30px;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.profile-layout .profile-sec1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-layout .profile-sec1 img {
    border-radius: 50%;
    position: absolute;
    width: 100px;
    height: 100px;
    top: -75px;
    right: 50%;
    transform: translateX(50%);
}

.profile-upload {
    opacity: 0;
    position: absolute;
    top: -75px;
    right: 0;
    bottom: 0;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s all;
    transform: translateX(-50%);
}

.profile-layout .profile-upload-main {
    position: relative;
    width: 100%;
}

.profile-layout .profile-upload-main .profile-upload:hover {
    position: absolute;
    top: -75px;
    right: 0;
    bottom: 0;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    opacity: 0.9;
    backdrop-filter: blur(5px);
}

.font-active {
    color: var(--accent-color);
    text-align: center;
    font-family: Inter;
    font-size: 27px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

.font-idle {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.font-primary {
    color: var(--text-primary);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.mt-12 {
    margin-top: 12px;
}

.mt-24 {
    margin-top: 24px;
}

.profile-input div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-input.cs div:first-child {
    display: grid;
    align-items: center;
    justify-content: start;
    gap: 20px;
    grid-template-columns: 1fr 2fr;
}

.profile-input {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-input label {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

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

.profile-input input {
    width: 100%;
    background-color: transparent;
    border-radius: 8px;
    padding: 10px 12px;
    /* border-radius: 20px; */
    color: var(--text-primary);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    height: 50px;
}

.profile-input input:focus-visible {
    border: none !important;
    box-shadow: none;
    outline: none;
}

.profile-sec3 {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.theme-btn {
    background: var(--accent-color);
    border-radius: 10px;
    color: var(--background-primary);
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 10px 40px;
    text-align: center;
}

.theme-btn:hover,
.theme-btn.lg:hover,
.theme-btn.sm:hover {
    background: var(--background-primary);
    color: var(--accent-color);
}

.theme-btn-danger:hover,
.theme-btn-danger.sm:hover,
.theme-btn-danger.lg:hover {
    background: var(--text-primary) !important;
    /* Change background on hover */
    color: var(--danger-color) !important;
    /* Change text color on hover */
}

.theme-btn-danger {
    background: var(--danger-color) !important;
    color: var(--text-primary) !important;
    border-radius: 10px;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 10px 40px;
    text-align: center;
}

.add-more-para .theme-btn {
    background: transparent;
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 10px 11px;
    text-align: center;
    /* width: 14%; */
}

.add-more-para {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-para-btn {
    background: var(--accent-color);
    border-radius: 10px;
    color: var(--background-primary);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 10px 15px;
    text-align: center;
}

.theme-btn-danger.sm {
    background: var(--danger-color) !important;
    color: var(--text-primary) !important;
    border-radius: 10px;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 10px 14px;
    text-align: center;
}

.theme-btn.lg {
    border-radius: 10px;
    background: var(--accent-color);
    color: var(--background-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 15px 30px;
    text-align: center;
}

button.google-sign-btn img {
    width: 25px;
}

.auth-input input::placeholder {
    font-size: 16px;
    color: var(--accent-color);
}

.theme-btn.sm {
    border-radius: 10px;
    background: var(--accent-color);
    color: var(--background-primary);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 10px 14px;
    text-align: center;
}

.delete-btn {
    color: var(--danger-color);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.width-100 {
    width: 100%;
}

.width-15 {
    width: 15%;
}

.width-36px {
    width: 36px;
}

.profile-stacs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* padding: 20px; */
}

.stacs table th,
.stacs table td {
    cursor: default;
    padding: 10px;
}

.stacs table th {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

.stacs table td {
    color: var(--text-secondary);
    text-align: center;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left !important;
    margin: 0;
}

.profile-stacs .stacs {
    padding: 20px;
    border-radius: 28px;
    background: var(--background-secondary);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border: 1px solid transparent;
    transition: 0.5s all;
}

.profile-stacs>a:hover .stacs.mob {
    border: 1px solid var(--accent-color);
    box-shadow: 0px 0px 20px -6px var(--accent-color)57;
}

.profile-stacs .stacs h4 {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

.profile-stacs .stacs h2 {
    color: var(--text-primary);
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-transform: uppercase;
    margin: 0;
}

.profile-stacs.cs {
    .stacs {
        .cs-profile {
            display: flex;
            flex-direction: row !important;
            align-items: center;
            justify-content: center;
            gap: 15px;
            .profile-img img {
                width: 100px;
                aspect-ratio: 1;
                height: 100px;
                border-radius: 50%;
            }
            .content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;
            }
        }
        h2 {
            color: var(--text-primary);
            font-family: Inter;
            font-size: 28px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin: 0;
        }
        .data {
            font-family: Inter;
            color: var(--text-primary) !important;
            /* color: blue; */
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin: 0;
        }
    }
}

.profile-stacs .stacs p {
    color: var(--text-secondary);
    text-align: center;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left !important;
    margin: 0;
}

.profile-stacs .stacs div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.footer-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


/* .footer-layout div {
    width: 28%;
} */

.footer p {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
}

.footer span {
    color: var(--accent-color);
}

.width-80 {
    width: 80%;
}

.bg-popup {
    background-color: var(--background-secondary) !important;
}

.pass-modal .pass-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pass-modal .prof-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pass-modal .pass-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.text-left {
    text-align: left !important;
}

.auth-input .auth {
    border-radius: 10px;
    background: var(--background-secondary);
    width: 90%;
    height: 55px;
    flex-shrink: 0;
    outline: none;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auth-input .auth input {
    background-color: transparent;
    width: 90%;
    height: 55px;
    flex-shrink: 0;
    outline: none;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.auth-input {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 20px;
}

.width-90 {
    width: 90%;
}

.google-sign-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px 20px !important;
    color: var(--text-primary);
    border-radius: 50px;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 2px 20px;
    border: 1px solid var(--accent-color);
}

.stats-layout {
    position: fixed;
    z-index: 9999;
    top: 50%;
    bottom: 0;
    transform: translateY(-50%);
    /* height: 80%; */
    border-radius: 30px;
    right: 0;
    left: 0;
    background: var(--background-primary);
    /* backdrop-filter: blur(10px); */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    margin: 0 auto;
    padding: 50px;
}

.statistics-layout {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 155px;
    justify-content: center;
}

.statistics-layout h4 {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.statistics-layout h1 {
    color: var(--text-primary);
    text-align: center;
    font-family: Inter;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.below-graph {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.below-graph-btn {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.below-graph h4 {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.below-graph h1 {
    color: var(--text-primary);
    text-align: center;
    font-family: Inter;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.statistics-main {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--background-primary);
}

.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
}

.overlay-message {
    display: flex;
    color: var(--accent-color);
    text-align: center;
    font-family: Inter;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.font-50 {
    font-size: 50px !important;
}

.leaderboard-head h1 {
    color: var(--accent-color);
    /* text-align: center; */
    font-family: Inter;
    font-size: 50px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

.leaderboard-head .filter button {
    padding: 10px;
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.leaderboard-head .filter button.active {
    padding: 10px;
    color: var(--background-primary);
    background-color: var(--accent-color);
    border-radius: 10px;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.leaderboard-head .filter button:hover {
    color: var(--background-primary);
    background-color: var(--accent-color);
    /* padding: 10px; */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.leaderboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leaderboard-head.admin {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
}

.leaderboard-head .filter {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.leaderboard-head .filter .filter-btn {
    display: flex;
    border: 1px solid var(--accent-color);
    justify-content: space-evenly;
    align-items: center;
    gap: 22px;
    padding: 10px;
    border-radius: 10px;
}

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

.profile img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.leaderboard-table table tbody tr:nth-child(odd) {
    background-color: var(--background-secondary);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


/* .leaderboard-table table tbody tr:nth-child(odd) .fa-solid, .leaderboard-table table tbody tr:nth-child(odd) .fa-regular{
    color:#1f1d21 ;
}
.leaderboard-table table tbody tr:nth-child(even) .fa-solid, .leaderboard-table table tbody tr:nth-child(even) .fa-regular{
    color:#71CAC7 ;
} */

.leaderboard-table table tr:nth-child(even) td {
    color: var(--text-primary);
    /* text-align: center; */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

.leaderboard-table table th {
    color: var(--background-secondary);
    /* text-align: center; */
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    background-color: var(--accent-color);
    margin: 0;
}

.leaderboard-table table tr:nth-child(odd) td {
    color: var(--text-primary);
    /* text-align: center; */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

.leaderboard-table table tbody tr:nth-child(even) td {
    background-color: var(--background-secondary);
}

.leaderboard-table table {
    cursor: default;
    width: 100%;
}

.leaderboard-table table td,
.leaderboard-table table th {
    padding: 20px;
}

.leaderboard-table {
    /* border: 1px solid #71CAC7; */
    border-radius: 10px;
    overflow: hidden;
    min-height: 250px;
}

.swal2-popup {
    background-color: var(--background-secondary) !important;
}

.swal2-title {
    color: var(--accent-color) !important;
}

.swal2-html-container {
    color: var(--text-primary) !important;
}

.swal2-custom-btn {
    display: inline-block;
    border: 1px solid var(--accent-color);
    background-color: var(--accent-color);
    margin-top: 30px;
    border-radius: 10px;
}

.swal2-timer-progress-bar {
    background: var(--accent-color)78 !important;
}

.swal2-confirm {
    background-color: var(--accent-color);
}

.p-30 {
    padding: 30px !important;
}


/* tooltip */

.item {
    padding: 5px 12px;
    background: transparent;
    border-radius: 4px;
    color: var(--accent-color);
    font-weight: 600;
    cursor: pointer;
    transform: translateY(0);
    z-index: 12;
    transition: 0.1s;
    position: relative;
    span {
        position: absolute;
        z-index: 12;
        bottom: calc(100% + 12px);
        width: max-content;
        left: 50%;
        pointer-events: none;
        transform: translateX(-50%);
        opacity: 0;
        font-weight: 400;
        font-size: 16px;
        background: var(--background-secondary);
        padding: 6px 10px;
        color: var(--accent-color);
        border-radius: 4px;
        &::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 8px solid var(--background-secondary);
        }
    }
    &:hover,
    &.active {
        /* transform: translateY(-2px); */
        span {
            animation: show-tool-tip 10s;
            animation-delay: 0.1s;
        }
    }
}

.item-cs {
    padding: 5px 12px;
    background: transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transform: translateY(0);
    z-index: 12;
    transition: 0.1s;
    position: relative;
    span {
        position: absolute;
        z-index: 12;
        bottom: calc(100% + 12px);
        width: max-content;
        left: 50%;
        pointer-events: none;
        transform: translateX(-50%);
        opacity: 0;
        font-weight: 400;
        font-size: 16px;
        background: var(--background-secondary);
        padding: 6px 10px;
        color: var(--accent-color);
        border-radius: 4px;
        &::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 8px solid var(--background-secondary);
        }
    }
    &:hover {
        /* transform: translateY(-2px); */
        span {
            animation: show-tool-tip 10s;
            animation-delay: 0.1s;
        }
    }
    &.active {
        color: var(--accent-color)
    }
}

@keyframes show-tool-tip {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/* tooltip */


/* Spinner */

.loading {
    width: 54px;
    height: 54px;
    position: relative;
    transform: rotate(15deg);
    transition: all .3s ease;
}

.loading .orange {
    position: absolute;
    stroke-width: 4;
    stroke: var(--accent-color);
    stroke-dasharray: 20, 180;
    animation: dash 1s linear infinite;
}

@keyframes dash {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -200;
    }
}


/* Spinner */


/* Loader for leaderboard */

.rl-loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.rl-loading-thumb {
    width: 6px;
    height: 30px;
    background-color: var(--accent-color);
    margin: 4px;
    box-shadow: 0 0 12px 2px #68fffa;
    animation: rl-loading 1.5s ease-in-out infinite;
}

.rl-loading-thumb-1 {
    animation-delay: 0s;
}

.rl-loading-thumb-2 {
    animation-delay: 0.5s;
}

.rl-loading-thumb-3 {
    animation-delay: 1s;
}

@keyframes rl-loading {
    0% {}
    20% {
        background: #68fffa;
        transform: scale(1.3);
    }
    40% {
        background: var(--accent-color);
        transform: scale(1);
    }
}


/* Loader for leaderboard */

.show-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    h1 span {
        font-size: 14px;
        cursor: pointer;
    }
}


/* Loader for Delete button */

.wrapper-cs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    transition: 2s ease;
    cursor: progress;
}

.wrapper-cs:hover {
    transform: scale(1.2);
}

.dot-cs {
    background: var(--text-primary);
    height: 0.65em;
    width: 0.65em;
    border-radius: 50%;
    animation: move 0.6s ease infinite;
}

@keyframes move {
    0% {
        transform: translateX(50%);
    }
    50% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(50%);
    }
}


/* Loader for Delete button */

.blog-post {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    /* border: 1px solid #fff; */
    background-color: var(--background-secondary);
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgb(255 255 255 / 9%) 1px 1px 20px 5px;
}

.blog-post .blog-img {
    width: 100%;
}

.blog-post .blog-img img {
    width: 100%;
    height: 220px;
    border-radius: 20px;
}

.blog-post .blog-content h1 {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 16px;
}

.blog-post .blog-content p {
    color: var(--text-secondary);
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

.blog-content a {
    color: var(--accent-color) !important;
    text-decoration: underline;
}

.blog-post a {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.blog-layout {
    display: grid;
    min-height: 400px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.blog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-header h1 {
    width: 80%;
}

.blog-header h6 {
    width: 20%;
}

.blog-header .heading {
    color: var(--accent-color);
    font-family: Inter;
    font-size: 35px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.blog-header .post-time {
    color: var(--text-secondary);
    text-align: right;
    font-family: Inter;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.blog-banner img {
    width: 100%;
    border-radius: 18px;
    height: 500px;
    object-fit: cover;
    object-position: top;
}

.blog-content {
    color: var(--text-primary);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px;
    /* 172.727% */
    text-transform: capitalize;
}

.p-10-15 {
    padding: 10px 15px !important;
}

.p-0 {
    padding: 0 !important;
}

.para-layout {
    border-radius: 28px;
    /* border: 1px solid rgb(113, 202, 199); */
    padding: 30px;
    display: flex;
    flex-direction: column;
    background-color: var(--background-secondary);
    gap: 30px;
}

.para-layout .form {
    border-radius: 28px;
    /* background: #26212c; */
    /* border: 1px solid #71CAC7; */
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.add-para {
    border-radius: 10px;
    background: var(--background-secondary);
    padding: 20px;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.add-para .para-writer {
    width: 100%;
    /* Full width */
    resize: none;
    /* Disable manual resizing */
    overflow: hidden;
    /* Hide scrollbars */
    min-height: 50px;
    /* Minimum height */
    background: var(--background-secondary);
    flex-shrink: 0;
    outline: none;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.para-layout .form .add-para {
    background: var(--background-secondary);
    border: 1px solid var(--accent-color);
}

.para-layout .form .add-para .para-writer {
    background: var(--background-secondary);
}

.add-para .para-btns {
    display: flex;
    justify-content: end;
    gap: 10px;
    align-items: center;
}


/* Custom Loader */

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Slightly dark background */
    backdrop-filter: blur(5px);
    /* Blur effect for background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Ensures overlay is on top of all elements */
}


/* Loader container */

.loader-cs {
    position: relative;
    width: 80px;
    aspect-ratio: 1;
    border-radius: 100vmin;
    overflow: hidden;
    padding: 20px;
}

.loader-cs::before {
    content: '';
    display: block;
    padding-top: 100%;
}

.circular-cs {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    transform-origin: center center;
    animation: 2s linear 0s infinite rotate;
}

.path-cs {
    stroke: var(--text-primary);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: 1.5s ease-in-out 0s infinite dash;
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
        stroke: var(--text-primary);
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}


/* Custom Loader */


/* Blog Editor */

.blog-editor {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: var(--text-primary);
}

.blog-editor .header {
    text-align: center;
}

.blog-editor .ql-container {
    height: 300px;
}

.blog-editor button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--accent-color);
    /* Green background */
    color: var(--background-primary);
    /* White text */
    border: none;
    /* No border */
    border-radius: 4px;
    /* Rounded corners */
    cursor: pointer;
    /* Pointer cursor on hover */
}

.blog-editor button:hover {
    background-color: var(--accent-color);
    /* Darker green on hover */
}

.blog-form-cs {
    background-color: transparent;
    /* border: 1px solid #71CAC7; */
    background-color: var(--background-secondary);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: start;
}

.blog-form-cs input {
    background-color: var(--background-secondary);
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    padding: 15px;
    height: 50px;
    flex-shrink: 0;
    outline: none;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.blog-form-cs .featured-image-layout {
    border: 1px solid var(--accent-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.blog-form-cs .featured-image-layout img {
    width: 100%;
}

.blog-form-cs .font-active {
    font-size: 18px !important;
    margin-bottom: 10px;
}

.add-blog-btn {
    border: 3px dashed var(--accent-color);
    border-radius: 20px;
    padding: 20px;
    color: var(--accent-color);
    font-family: Inter;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


/* Blog Editor */

.table-equal {
    table-layout: fixed;
}

.table-equal td {
    width: 33%;
}

.switcher {
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.display-para-sec .add-para {
    width: 95% !important;
}

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

.display-para-sec .para-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* width: 5% !important; */
}

.display-para-sec .para-btns button {
    border: 1px solid var(--accent-color);
    border-radius: 50%;
}

.blog-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select-container {
    position: relative;
    /* Position relative for absolute positioning of the arrow */
    width: 25%;
    /* Same width as the select */
}

.blog-main-header select {
    width: 100%;
    /* Make select take the full width of the container */
    background-color: var(--background-secondary);
    /* Dark background */
    border: none;
    color: var(--text-primary);
    /* Text color */
    padding: 15px;
    /* Add padding for better spacing */
    border-radius: 4px;
    /* Rounded corners */
    appearance: none;
    /* Remove default styling for better control */
    padding-right: 30px;
    /* Add padding on the right to make space for the arrow */
}

.blog-main-header select:focus {
    color: var(--text-primary);
    /* Text color */
    background-color: var(--background-secondary);
    /* Keep the same dark background on focus */
    border: none;
    outline: none;
    /* Remove default outline */
    box-shadow: none;
}

.arrow {
    position: absolute;
    /* Position the arrow absolutely */
    top: 50%;
    /* Center vertically */
    right: 10px;
    /* Position from the right */
    transform: translateY(-50%);
    /* Adjust for vertical centering */
    color: var(--accent-color);
    /* Arrow color */
    pointer-events: none;
    /* Prevent mouse events on the arrow */
    font-size: 22px;
    /* Size of the arrow */
}

.p-custom {
    padding: 40px 0px !important;
}

.mob-show {
    display: none !important;
}

.cutom-lobby-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-footer-lobby {
    display: flex;
    justify-content: flex-end;
}

.profile-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dynamic-paglayout {
    border-radius: 10px;
    background: var(--background-secondary);
    padding: 20px;
    overflow-y: scroll;
    min-height: 200px;
    max-height: 550px;
    color: var(--text-primary) !important;
}

.header-dynamic-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-section {
    color: var(--text-primary);
    padding: 40px 0px;
}

.contact-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
}

.contact-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.cd-heigth-200 {
    height: 200px !important;
}

.contact-section .auth {
    border-radius: 10px;
    background: var(--background-secondary);
    width: 100%;
    height: 55px;
    flex-shrink: 0;
    outline: none;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.contact-section .auth-cs {
    width: 100%;
}

.contact-section button {
    width: 50%;
}

.contact-section .auth input {
    background-color: transparent;
    height: 55px;
    flex-shrink: 0;
    outline: none;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    &::placeholder {
        color: var(--accent-color);
    }
}

.contact-section .auth-cs textarea {
    background-color: transparent;
    flex-shrink: 0;
    height: 190px;
    outline: none;
    width: 100% !important;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 10px;
    background: var(--background-secondary);
    width: 50%;
    height: 200px;
    flex-shrink: 0;
    outline: none;
    color: var(--text-primary);
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 18px;
    &::placeholder {
        color: var(--accent-color);
    }
}

.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 20px;
}

.about-img img {
    width: 100%;
    border-radius: 10px;
}

.about-section a {
    font-size: 16px !important;
}

.header-dynamic-page h4 {
    font-size: 50px !important;
}

.about-main .about-section:nth-child(even) .row {
    flex-direction: row-reverse;
}

.caps-alert {
    position: absolute;
    background-color: var(--accent-color);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-primary);
    top: 20%;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
    animation: capsblink 0.5s infinite alternate;
}

@keyframes capsblink {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

.text-dec-none {
    text-decoration: none !important;
}


/* Notification container */

.cs-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    /* Initially hidden */
    background-color: var(--background-secondary);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    max-width: 400px;
    width: 100%;
    animation: slide-in 0.5s forwards;
    /* Animation to slide in */
}

.cs-notification-show {
    display: block;
    /* Show when triggered */
}

.cs-notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cs-notification-text {
    max-width: 250px;
    /* Limit the width for text */
}

.cs-notification-title {
    font-size: 18px;
    margin: 0;
}

.cs-notification-body {
    font-size: 14px;
    margin: 5px 0;
}

.cs-notification-url {
    font-size: 14px;
    color: var(--accent-color);
    text-decoration: none;
}

.cs-notification-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    margin-left: 10px;
}

@keyframes slide-in {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.badge-icon.cs {
    font-size: 25px !important;
}

.header-profile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.header-profile img {
    width: 30px;
    border-radius: 50%;
    height: 30px;
    object-fit: cover;
}

.main-input-cs {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 30px;
    white-space: pre-wrap;
    overflow: hidden;
    resize: none;
    line-height: 1.5;
}

.leaderboard-profile-font {
    margin: 0;
    font-size: 18px;
}

.custom-width {
    width: 90%;
}


/* Blur Effect Overlay */

.typing-overlay {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 26%);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-primary)59;
    z-index: 10;
    border-radius: 8px;
    backdrop-filter: blur(11px);
    text-align: center;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
}

.z-10 {
    z-index: 10;
    position: relative;
}


/* Blur Effect for Text */

.text-blur {
    /* filter: blur(5px); */
    opacity: 0.5;
}

.paragraph-container {
    position: relative;
    white-space: pre-wrap;
    /* Preserve spaces and line breaks */
    /* font-family: "Roboto Mono", "Roboto Mono", Vazirmatn, monospace;
  font-style: normal;
  font-weight: 400; */
    /* font-size: 30px; */
    height: 182px;
    /* line-height: 48px; */
}

.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-category-pill {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--accent-color);
    color: var(--background-secondary);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
    user-select: none;
    transition: background-color 0.3s ease;
}

.blog-category-pill:hover {
    background-color: var(--text-primary);
}

.img-404 img {
    width: 100%;
}

.img-404 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.custom-alert {
    background-color: var(--accent-color)29 !important;
    border: 1px solid var(--accent-color);
    color: var(--text-primary);
}

.cs-border {
    border: 1px solid var(--text-primary);
}


/*----------------------------- */

.cursor {
    position: absolute;
    width: 2px;
    height: 1.5em;
    background-color: red;
    animation: blink 0.8s infinite;
}

#game {
    overflow: hidden;
}

#game:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#words {
    position: relative;
    display: flex;
    cursor: default;
    font-family: "Roboto Mono", "Roboto Mono", Vazirmatn, monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 40px;
    letter-spacing: 3px;
    height: 182px;
    gap: 30px;
    color: var(--text-primary);
    flex: 1;
    flex-wrap: wrap;
    transition: 0.3s all;
    .letter.correct {
        color: var(--accent-color);
        /* Or any color to indicate correct input */
    }
    .letter.incorrect {
        color: red;
        /* Color for incorrect input */
    }
    .letter.extra {
        color: rgba(251, 8, 8, 0.783);
        /* Extra characters will be in red */
    }
    .word.current .letter {
        text-decoration: underline;
        /* Optional for current word emphasis */
        transition: 0.3s all !important;
    }
}

.tooltip {
    font-size: 14px;
    line-height: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-tooltip {
    position: relative;
}

.custom-tooltip::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: var(--background-secondary);
    z-index: -1;
    border: 1px solid var(--accent-color);
    opacity: .9;
}

.skip-underline {
    text-decoration: underline !important;
    text-decoration-color: red !important;
    transition: 0.3s all;
}

.radio-options {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.radio-box {
    width: 100px;
    height: 100px;
    border: 3px solid var(--accent-color);
    border-radius: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.radio-box.selected {
    border-color: var(--accent-color) !important;
    box-shadow: 0px 0px 10px 4px var(--accent-color)57;
}

.radio-content {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
}

.cropper-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--text-primary);
    padding: 20px;
    border-radius: 8px;
}

.cropper-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
}

.cropper-actions button {
    background-color: var(--accent-color);
    color: var(--background-primary);
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cropper-actions button:nth-child(1) {
    background-color: var(--danger-color);
}

.profile-preview {
    margin-top: 20px;
    text-align: center;
}

.crop-controls {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    bottom: -45px;
    right: 0;
}

.reactEasyCrop_Container {
    background: var(--background-secondary);
    border: 1px solid var(--accent-color);
}

.notice-bar {
    background-color: var(--input-notice);
    width: 100%;
    /* height: 50px; */
    padding: 10px;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: auto max-content;
}

.notice-bar .notice-content {
    /* width: 85%; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.notice-bar .notice {
    /* width: 85%; */
    grid-template-columns: auto max-content;
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.notice-bar .notice-content h3 {
    color: var(--text-primary);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.notice-bar .notice-content p {
    color: var(--text-primaryary);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.notice-bar .button {
    /* width: 15%; */
    text-align: end;
}

.position-rel {
    position: relative;
}

.blinking-cursor {
    display: inline-block;
    /* position: absolute; */
    width: 3px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--accent-color);
    vertical-align: text-bottom;
    /* Aligns with text baseline */
    /* animation: blink 1.5s linear infinite; */
    margin: 0;
    transition: 0.3s all !important;
    /* Prevent spacing issues */
}

.blinking-cursor.blink {
    animation: blink 1.5s linear infinite;
}

@keyframes blink {
    0%,
    100% {
        background-color: var(--accent-color);
    }
    50% {
        background-color: var(--background-secondary);
    }
}

#caret {
    position: absolute;
    transition: left 0.1s ease, top 0.1s ease;
    /* Optional smooth movement */
}

@media screen and (min-width: 1140px) {
    body,
    html,
    #root {
        height: 100vh;
    }
    #root {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.cs-tooltip {
    width: 300px;
    /* height: auto; */
    border: 1px solid var(--accent-color);
    background-color: var(--background-secondary);
    position: absolute;
    padding: 10px;
    transition: opacity 0.3s ease;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    right: -310px;
    bottom: 30%;
    transform: translateY(30%);
    /* box-shadow: 0px 0px 10px 4px #bcc9bc57; */
}

.cs-tooltip.active {
    opacity: 1;
}

.cs-tooltip-container {
    position: relative;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.cs-btn-notice {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--text-primary);
    color: var(--danger-color);
    text-decoration: none;
}


/* Theme Selector Styles */

.theme-selector {
    position: relative;
    width: 180px;
}

.theme-selector select {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    font-family: Inter;
    color: var(--text-primary);
    background: var(--background-secondary);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.theme-selector::after {
    content: '▼';
    font-size: 12px;
    color: var(--accent-color);
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}


/* Theme preview dots in dropdown */

.theme-selector option {
    padding: 10px;
    background-color: var(--background-secondary);
    color: var(--text-primary);
}


/* Hover effect */

.theme-selector select:hover {
    border-color: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
}


/* Focus effect */

.theme-selector select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
}


/* Theme preview container */

.theme-preview {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.theme-layout {
    display: grid;
    padding: 25px 20px;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    .main-button {
        padding: 10px;
        color: var(--text-primary);
        background-color: transparent;
        border: 1px solid var(--accent-color);
        font-family: Inter;
        font-size: 18px;
        height: 60px;
        font-style: normal;
        font-weight: 400;
        transition: background-color 0.3s ease;
        /* Smooth background transition */
        .cs-theme-btn {
            border: none !important;
            background-color: transparent !important;
        }
        &.active {
            padding: 10px;
            /* color: var(--background-primary)!important; */
            /* background-color: var(--accent-color) !important; */
            border: 4px solid var(--accent-color) !important;
            border-radius: 5px;
            font-family: Inter;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            animation: float 0.6s ease-in-out infinite;
            /* Added floating animation */
        }
        &:hover {
            /* color: var(--background-primary); */
            background-color: var(--accent-color);
            /* padding: 10px; */
            border-radius: 5px;
            animation: float 0.6s ease-in-out infinite;
            /* Added floating animation */
        }
    }
    &.selector {
        padding: 0;
        gap: 20px;
        button {
            padding: 10px;
            color: var(--text-primary);
            background-color: transparent;
            border: 1px solid var(--accent-color);
            font-family: Inter;
            font-size: 14px;
            height: 45px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            .cs-theme-btn {
                border: none !important;
            }
            &.active {
                padding: 10px;
                color: var(--background-primary)!important;
                background-color: var(--accent-color) !important;
                border-radius: 5px;
                font-family: Inter;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
            &:hover {
                color: var(--background-primary);
                background-color: var(--accent-color);
                /* padding: 10px; */
                border-radius: 5px;
            }
        }
    }
}

.modal-content.modal-header {
    border-bottom: 1px solid var(--accent-color);
    color: var(--accent-color) !important;
    text-align: center;
    font-family: Inter;
    font-size: 27px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin: 10px;
}

.modal-content {
    background-color: var(--background-secondary);
    .custom-font-input {
        background-color: transparent !important;
        height: 50px;
        flex-shrink: 0;
        border: 1px solid var(--accent-color);
        outline: none;
        color: var(--text-primary);
        font-family: Inter;
        font-size: 16px;
        padding: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        width: 100%;
        border-radius: 10px;
    }
}


/* Custom Fonts  */

.JosefinSans {
    font-family: 'Josefin Sans', sans-serif !important;
}

.Raleway {
    font-family: 'Raleway', sans-serif !important;
}

.RobotoSlab {
    font-family: 'Roboto Slab', serif !important;
}

.OpenSans {
    font-family: 'Open Sans', sans-serif !important;
}

.Rubik {
    font-family: 'Rubik', sans-serif !important;
}

.DMSans {
    font-family: 'DM Sans', sans-serif !important;
}

.Poppins {
    font-family: 'Poppins', sans-serif !important;
}

.Lato {
    font-family: 'Lato', sans-serif !important;
}

.Nunito {
    font-family: 'Nunito', sans-serif !important;
}

.Ubuntu {
    font-family: 'Ubuntu', sans-serif !important;
}

.SourceSansPro {
    font-family: 'Source Sans Pro', sans-serif !important;
}

.Manrope {
    font-family: 'Manrope', sans-serif !important;
}

.Montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

.PlayfairDisplay {
    font-family: 'Playfair Display', serif !important;
}

.LibraBaskerville {
    font-family: 'Libre Baskerville', serif !important;
}

.Neuton {
    font-family: 'Neuton', serif !important;
}

.Lora {
    font-family: 'Lora', serif !important;
}

.Arvo {
    font-family: 'Arvo', serif !important;
}

.Default {
    font-family: "Roboto Mono", "Roboto Mono", Vazirmatn, monospace !important;
}


/* Custom Fonts  */

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
        /* Move up */
    }
    100% {
        transform: translateY(0);
        /* Move back down */
    }
}

.flex-cs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.paragraph-display {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 10px;
    .layout {
        width: 70%;
        display: flex;
        position: relative;
        cursor: default;
        font-family: "Roboto Mono", "Roboto Mono", Vazirmatn, monospace;
        font-style: normal;
        font-weight: 400;
        font-size: 25px;
        line-height: 40px;
        letter-spacing: 1px;
        gap: 25px;
        color: var(--text-primary);
        /* flex: 1; */
        flex-wrap: wrap;
        transition: 0.3s all;
        .letter.correct {
            color: var(--accent-color);
            /* Or any color to indicate correct input */
        }
        .letter.incorrect {
            color: red;
            /* Color for incorrect input */
        }
        .letter.extra {
            color: rgba(251, 8, 8, 0.783);
            /* Extra characters will be in red */
        }
        .word.current .letter.current {
            text-decoration: underline;
            /* Optional for current word emphasis */
            transition: 0.3s all !important;
        }
    }
}

.font-select {
    width: 100%;
    height: 50px;
    padding: 0px 0px;
    border-radius: 5px;
    background: var(--background-secondary);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    &:focus,
    &:focus-visible {
        border: 1px solid var(--accent-color);
        outline: none;
        box-shadow: none;
    }
}


/* Corrected selector for option elements */

.font-select option {
    border-radius: 5px;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    background-color: var(--background-secondary);
    &:hover {
        background-color: var(--accent-color) !important;
        color: var(--background-secondary) !important;
    }
}

.modal.customise {
    .modal-content {
        background-color: var(--background-secondary);
    }
    /* .modal-body {
        height: 100vh;
    } */
    .layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: start;
        justify-content: center;
        gap: 15px;
        .section-1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            textarea {
                width: 100%;
                height: 100%;
                border: 1px solid var(--accent-color);
                border-radius: 8px;
                background-color: var(--background-primary);
                padding: 20px;
                color: var(--accent-color);
                font-size: 20px;
                font-family: 'Roboto Slab', serif;
            }
        }
        .section-2 {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            gap: 15px;
            .controls {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: center;
                gap: 4px;
                h6 {
                    color: var(--text-secondary);
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin: 0;
                }
                h4 {
                    color: var(--accent-color);
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                    margin: 0;
                }
                .theme-btn {
                    border-radius: 8px;
                    background: var(--background-primary);
                    color: var(--text-primary);
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal;
                    text-transform: lowercase;
                    padding: 7px 8px;
                    text-align: center;
                    &:hover {
                        background: var(--accent-color);
                        color: var(--background-primary);
                    }
                    &.active {
                        background: var(--accent-color);
                        color: var(--background-primary);
                    }
                }
                input {
                    background-color: var(--background-primary);
                    padding: 10px;
                    border: none;
                    color: var(--text-primary);
                    border-radius: 8px;
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin: 0;
                    width: 100%;
                    height: 30px;
                    &::placeholder {
                        color: var(--accent-color);
                    }
                }
            }
        }
    }
}

.grid-cs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;
}

.gtc-3 {
    grid-template-columns: 1fr 1fr 1fr !important;
}

.gtc-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

.gtc-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
}

.gtc-1m1 {
    grid-template-columns: 1fr max-content 1fr !important;
}

gtc-1m1 {
    grid-template-columns: 1fr max-content 1fr !important;
}

.cutom-lobby-head-v2 {
    padding: 0px 20px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 67px;
}

.keyboard-stats {
    display: flex;
    padding: 26px 0;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 20px;
    div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .keys {
        display: grid;
        align-items: center;
        gap: 5px;
        grid-template-columns: repeat(26, 1fr);
        .letter {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px 8px;
            border: 2px solid var(--accent-color);
            background-color: var(--background-secondary);
            border-radius: 3px;
            color: var(--text-primary);
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-transform: capitalize;
            cursor: pointer;
            transition: 0.3s all !important;
            /* &:hover {
                padding: 6px 10px;
            } */
            &.locked {
                /* background-color: ; */
                opacity: 0.6;
            }
            .divide {
                position: absolute;
                width: 100%;
                /* Width of the line */
                height: 2px;
                /* Thickness of the line */
                background-color: var(--accent-color);
                /* Color of the line */
                transform: rotate(45deg);
                /* Rotate the line by 45 degrees */
            }
        }
    }
}

.gtc-1 {
    grid-template-columns: 1fr !important;
}

.progress-bar {
    position: relative;
    height: 20px;
    width: 100%;
    background-color: var(--background-secondary);
    /* Light gray for the unfilled portion */
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: start !important;
    border: 1px solid var(--accent-color);
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--accent-color);
    /* Color for the filled portion */
    transition: width 0.3s ease-in-out !important;
    /* Smooth transition for width changes */
}

.progress-bar-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
    left: 0;
    line-height: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    /* White text for contrast */
}

.language-layout {
    display: grid;
    padding: 25px 20px;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    .main-button {
        padding: 10px;
        color: var(--text-primary);
        background-color: transparent;
        border: 1px solid var(--accent-color);
        font-family: Inter;
        font-size: 18px;
        height: 60px;
        font-style: normal;
        font-weight: 400;
        transition: background-color 0.3s ease;
        border-radius: 5px;
        /* Smooth background transition */
        .cs-theme-btn {
            border: none !important;
            background-color: transparent !important;
        }
        &.active {
            padding: 10px;
            /* color: var(--background-primary)!important; */
            /* border: 4px solid var(--accent-color) !important; */
            background-color: var(--accent-color);
            font-family: Inter;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            /* Added floating animation */
        }
        &:hover {
            /* color: var(--background-primary); */
            background-color: var(--accent-color);
            /* padding: 10px; */
            border-radius: 5px;
            /* Added floating animation */
        }
    }
}

.language-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    border-bottom: 1px solid var(--accent-color);
}

.language-footer {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 15px;
    padding: 20px 20px;
    border-top: 1px solid var(--accent-color);
}