@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900');

:root {
    --clr-light: #ffffff;
    --clr-dark: #1f1f1f;
    --clr-night: #101010;
    --clr-chat-light-blue: linear-gradient(90deg, #d5e3ff 0%, #e3dbfd 100%);
    --clr-hidden_1_disabled: linear-gradient(90deg, #a8b3cc 0%, #b8a9d1 100%);
    --clr-chat-dark-blue: linear-gradient(90deg, #1c2331 0%, #261e2f 100%);
    --clr-hidden_2_disabled: linear-gradient(90deg, #4a4f60 0%, #504556 100%);;
}

:root.light {
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    --clr-primary-a0: #895bf5;
    --clr-primary-a10: #996df7;
    --clr-primary-a20: #a87ff8;
    --clr-primary-a30: #b691fa;
    --clr-primary-a40: #c3a3fb;
    --clr-primary-a50: #d0b5fc;

    --clr-primary-a30-20: #b691fa7e;

    --clr-surface-a0: #ffffff;
    --clr-surface-a10: #f2f2f2;
    --clr-surface-a20: #e5e5e5;
    --clr-surface-a30: #d9d9d9;
    --clr-surface-a40: #cccccc;
    --clr-surface-a50: #bfbfbf;

    --clr-surface-tonal-a0: #f5f2f7;
    --clr-surface-tonal-a10: #eae6ed;
    --clr-surface-tonal-a20: #dfdae4;
    --clr-surface-tonal-a30: #d4d0db;
    --clr-surface-tonal-a40: #c9c5d2;
    --clr-surface-tonal-a50: #bebacf;

    --clr-secondary-a0: #2cd4bd;
    --clr-secondary-a10: #55d9c4;
    --clr-secondary-a20: #71decb;
    --clr-secondary-a30: #89e3d3;
    --clr-secondary-a40: #9fe8da;
    --clr-secondary-a50: #b4ede1;
    
    --clr-input-bg-darkest: #f5f5f5;
    --clr-input-bg-dark: #e0e0e0;

    --clr-input-border-bg-darkest: #cccccc;
    --clr-input-border-bg-dark: #f7f7f7;

    --clr-popup-a0: #f0f0f0;
    --clr-popup-a10: #e0e0e0;
    --clr-popup-a20: #d1d1d1;
    --clr-popup-a30: #c2c2c2;
    --clr-popup-a40: #b3b3b3;
    --clr-popup-a50: #a4a4a4;

    --clr-text-a0: #000000;
    --clr-text-a10: #1a1a1a;
    --clr-text-a20: #333333;
    --clr-text-a30: #4d4d4d;
    --clr-text-a40: #666666;
    --clr-text-a50: #808080;

    --clr-text-white-a0: #ffffff;
    --clr-text-white-a10: #e0e0e0;
    --clr-text-white-a20: #c4c4c4;
    --clr-text-white-a30: #B2B2B2;
    --clr-text-white-a40: #8c8c8c;
    --clr-text-white-a50: #707070;

    --clr-text-black-a0: #000000;
    --clr-text-black-a10: #1a1a1a;
    --clr-text-black-a20: #333333;
    --clr-text-black-a30: #4d4d4d;
    --clr-text-black-a40: #666666;
    --clr-text-black-a50: #808080;

    --clr-error-a0: #ff00007e;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --clr-status-online: #68C25C;
    --clr-status-offline: #686868;
    --clr-status-busy: #BA3939;
    --clr-status-idle: #ffcd43;
    
    --clr-danger: #ff7c7c;

    --clr-logs-orange: orange;
    --clr-logs-green: green;
    --clr-logs-blue: blue;
    --clr-logs-purple: purple;

    --clr-success-a0: #1b7f5c;
    --clr-success-a10: #28be8a;
    --clr-success-a20: #58dbad;

    --clr-warning-a0: #b8871f;
    --clr-warning-a10: #dfae44;
    --clr-warning-a20: #ebca85;

    --clr-danger-a0: #b13535;
    --clr-danger-a10: #d06262;
    --clr-danger-a20: #e29d9d;

    --clr-info-a0: #1e56a3;
    --clr-info-a10: #347ada;
    --clr-info-a20: #74a4e6;
}

:root.dark {
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    --clr-primary-a0: #895bf5;
    --clr-primary-a10: #996df7;
    --clr-primary-a20: #a87ff8;
    --clr-primary-a30: #b691fa;
    --clr-primary-a40: #c3a3fb;
    --clr-primary-a50: #d0b5fc;

    --clr-primary-a30-20: #b691fa7e;

    --clr-surface-a0: #1f1f1f;
    --clr-surface-a10: #343434;
    --clr-surface-a20: #4a4a4a;
    --clr-surface-a30: #5E5E5E;
    --clr-surface-a40: #797979;
    --clr-surface-a50: #939393;

    --clr-surface-tonal-a0: #2a2531;
    --clr-surface-tonal-a10: #3e3945;
    --clr-surface-tonal-a20: #544f5a;
    --clr-surface-tonal-a30: #6a666f;
    --clr-surface-tonal-a40: #817e86;
    --clr-surface-tonal-a50: #99969d;

    --clr-secondary-a0: #2cd4bd;
    --clr-secondary-a10: #55d9c4;
    --clr-secondary-a20: #71decb;
    --clr-secondary-a30: #89e3d3;
    --clr-secondary-a40: #9fe8da;
    --clr-secondary-a50: #b4ede1;
    
    --clr-input-bg-darkest: #141414;
    --clr-input-bg-dark: #323232;

    --clr-input-border-bg-darkest: #3B3B3B;
    --clr-input-border-bg-dark: #282828;

    --clr-popup-a0: #303030;
    --clr-popup-a10: #404040;
    --clr-popup-a20: #505050;
    --clr-popup-a30: #616161;
    --clr-popup-a40: #727272;
    --clr-popup-a50: #838383;

    --clr-text-a0: #dfdfdf;
    --clr-text-a10: #e0e0e0;
    --clr-text-a20: #c4c4c4;
    --clr-text-a30: #B2B2B2;
    --clr-text-a40: #8c8c8c;
    --clr-text-a50: #707070;

    --clr-text-white-a0: #ffffff;
    --clr-text-white-a10: #e0e0e0;
    --clr-text-white-a20: #c4c4c4;
    --clr-text-white-a30: #B2B2B2;
    --clr-text-white-a40: #8c8c8c;
    --clr-text-white-a50: #707070;

    --clr-text-black-a0: #000000;
    --clr-text-black-a10: #1a1a1a;
    --clr-text-black-a20: #333333;
    --clr-text-black-a30: #4d4d4d;
    --clr-text-black-a40: #666666;
    --clr-text-black-a50: #808080;

    --clr-error-a0: #ff00007e;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --clr-status-online: #68C25C;
    --clr-status-offline: #686868;
    --clr-status-busy: #BA3939;
    --clr-status-idle: #ffcd43;
    
    --clr-danger: #ff7c7c;

    --clr-logs-orange: orange;
    --clr-logs-green: green;
    --clr-logs-blue: rgb(77, 77, 255);
    --clr-logs-purple: rgb(189, 0, 189);

    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

:root.night {
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    --clr-primary-a0: #895bf5;
    --clr-primary-a10: #996df7;
    --clr-primary-a20: #a87ff8;
    --clr-primary-a30: #b691fa;
    --clr-primary-a40: #c3a3fb;
    --clr-primary-a50: #d0b5fc;

    --clr-primary-a30-20: #b691fa7e;

    --clr-surface-a0: #101010;
    --clr-surface-a10: #1c1c1c;
    --clr-surface-a20: #2a2a2a;
    --clr-surface-a30: #383838;
    --clr-surface-a40: #4a4a4a;
    --clr-surface-a50: #5c5c5c;

    --clr-surface-tonal-a0: #1c1822;
    --clr-surface-tonal-a10: #2d2934;
    --clr-surface-tonal-a20: #3f3b45;
    --clr-surface-tonal-a30: #525056;
    --clr-surface-tonal-a40: #65626a;
    --clr-surface-tonal-a50: #79757e;

    --clr-secondary-a0: #2cd4bd;
    --clr-secondary-a10: #55d9c4;
    --clr-secondary-a20: #71decb;
    --clr-secondary-a30: #89e3d3;
    --clr-secondary-a40: #9fe8da;
    --clr-secondary-a50: #b4ede1;
    
    --clr-input-bg-darkest: #0c0c0c;
    --clr-input-bg-dark: #1f1f1f;

    --clr-input-border-bg-darkest: #252525;
    --clr-input-border-bg-dark: #1a1a1a;

    --clr-popup-a0: #181818;
    --clr-popup-a10: #222222;
    --clr-popup-a20: #2e2e2e;
    --clr-popup-a30: #3a3a3a;
    --clr-popup-a40: #474747;
    --clr-popup-a50: #555555;

    --clr-text-a0: #dfdfdf;
    --clr-text-a10: #e0e0e0;
    --clr-text-a20: #c4c4c4;
    --clr-text-a30: #B2B2B2;
    --clr-text-a40: #8c8c8c;
    --clr-text-a50: #707070;

    --clr-text-white-a0: #ffffff;
    --clr-text-white-a10: #e0e0e0;
    --clr-text-white-a20: #c4c4c4;
    --clr-text-white-a30: #B2B2B2;
    --clr-text-white-a40: #8c8c8c;
    --clr-text-white-a50: #707070;

    --clr-text-black-a0: #000000;
    --clr-text-black-a10: #1a1a1a;
    --clr-text-black-a20: #333333;
    --clr-text-black-a30: #4d4d4d;
    --clr-text-black-a40: #666666;
    --clr-text-black-a50: #808080;

    --clr-error-a0: #ff00007e;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --clr-status-online: #68C25C;
    --clr-status-offline: #686868;
    --clr-status-busy: #BA3939;
    --clr-status-idle: #ffcd43;
    
    --clr-danger: #ff7c7c;    

    --clr-logs-orange: orange;
    --clr-logs-green: green;
    --clr-logs-blue: rgb(72, 72, 255);
    --clr-logs-purple: rgb(207, 0, 207);

    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

:root.chat_light_blue {
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    --clr-primary-a0: #98a0ff;
    --clr-primary-a10: #98a0ff;
    --clr-primary-a20: #7f92fc;
    --clr-primary-a30: #5274fe;
    --clr-primary-a40: #4a5fb7;
    --clr-primary-a50: #4a5fb7;

    --clr-primary-a30-20: #7f92fc7e;

    --clr-surface-a0: #ffffff;
    --clr-surface-a10: #fff;
    --clr-surface-a20: #e1edff;
    --clr-surface-a30: #c3dbff;
    --clr-surface-a40: #a1c6ff;
    --clr-surface-a50: #a1c6ff;

    --clr-surface-tonal-a0: #f5f2f7;
    --clr-surface-tonal-a10: #eae6ed;
    --clr-surface-tonal-a20: #dfdae4;
    --clr-surface-tonal-a30: #d4d0db;
    --clr-surface-tonal-a40: #c9c5d2;
    --clr-surface-tonal-a50: #bebacf;

    --clr-secondary-a0: #2cd4bd;
    --clr-secondary-a10: #55d9c4;
    --clr-secondary-a20: #71decb;
    --clr-secondary-a30: #89e3d3;
    --clr-secondary-a40: #9fe8da;
    --clr-secondary-a50: #b4ede1;
    
    --clr-input-bg-darkest: #f5f5f5;
    --clr-input-bg-dark: #e0e0e0;

    --clr-input-border-bg-darkest: #cccccc;
    --clr-input-border-bg-dark: #f7f7f7;

    --clr-popup-a0: #ffffff;
    --clr-popup-a10: #c3dbff;
    --clr-popup-a20: #e1edff;
    --clr-popup-a30: #c3dbff;
    --clr-popup-a40: #a1c6ff;
    --clr-popup-a50: #a1c6ff;

    --clr-text-a0: #000000;
    --clr-text-a10: #1a1a1a;
    --clr-text-a20: #333333;
    --clr-text-a30: #4d4d4d;
    --clr-text-a40: #666666;
    --clr-text-a50: #808080;

    --clr-text-white-a0: #ffffff;
    --clr-text-white-a10: #e0e0e0;
    --clr-text-white-a20: #c4c4c4;
    --clr-text-white-a30: #B2B2B2;
    --clr-text-white-a40: #8c8c8c;
    --clr-text-white-a50: #707070;

    --clr-text-black-a0: #000000;
    --clr-text-black-a10: #1a1a1a;
    --clr-text-black-a20: #333333;
    --clr-text-black-a30: #4d4d4d;
    --clr-text-black-a40: #666666;
    --clr-text-black-a50: #808080;

    --clr-error-a0: #ff00007e;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --clr-status-online: #68C25C;
    --clr-status-offline: #686868;
    --clr-status-busy: #BA3939;
    --clr-status-idle: #ffcd43;
    
    --clr-danger: #ff7c7c;

    --clr-logs-orange: orange;
    --clr-logs-green: green;
    --clr-logs-blue: blue;
    --clr-logs-purple: purple;

    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}



:root.chat_dark_blue {
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    --clr-primary-a0: #354ca8;
    --clr-primary-a10: #415fd4;
    --clr-primary-a20: #5274fe;
    --clr-primary-a30: #7f92fc;
    --clr-primary-a40: #98a0ff;
    --clr-primary-a50: #98a0ff;

    --clr-primary-a30-20: #b691fa7e;

    --clr-surface-a0: #40455c;
    --clr-surface-a10: #373c53;
    --clr-surface-a20: #202331;
    --clr-surface-a30: #202331;
    --clr-surface-a40: #202331;
    --clr-surface-a50: #202331;

    --clr-surface-tonal-a0: #2a2531;
    --clr-surface-tonal-a10: #3e3945;
    --clr-surface-tonal-a20: #544f5a;
    --clr-surface-tonal-a30: #6a666f;
    --clr-surface-tonal-a40: #817e86;
    --clr-surface-tonal-a50: #99969d;

    --clr-secondary-a0: #2cd4bd;
    --clr-secondary-a10: #55d9c4;
    --clr-secondary-a20: #71decb;
    --clr-secondary-a30: #89e3d3;
    --clr-secondary-a40: #9fe8da;
    --clr-secondary-a50: #b4ede1;
    
    --clr-input-bg-darkest: #141414;
    --clr-input-bg-dark: #323232;

    --clr-input-border-bg-darkest: #3B3B3B;
    --clr-input-border-bg-dark: #282828;

    --clr-popup-a0: #40455c;
    --clr-popup-a10: #373c53;
    --clr-popup-a20: #202331;
    --clr-popup-a30: #202331;
    --clr-popup-a40: #202331;
    --clr-popup-a50: #202331;

    --clr-text-a0: #dfdfdf;
    --clr-text-a10: #e0e0e0;
    --clr-text-a20: #c4c4c4;
    --clr-text-a30: #B2B2B2;
    --clr-text-a40: #8c8c8c;
    --clr-text-a50: #707070;

    --clr-text-white-a0: #ffffff;
    --clr-text-white-a10: #e0e0e0;
    --clr-text-white-a20: #c4c4c4;
    --clr-text-white-a30: #B2B2B2;
    --clr-text-white-a40: #8c8c8c;
    --clr-text-white-a50: #707070;

    --clr-text-black-a0: #000000;
    --clr-text-black-a10: #1a1a1a;
    --clr-text-black-a20: #333333;
    --clr-text-black-a30: #4d4d4d;
    --clr-text-black-a40: #666666;
    --clr-text-black-a50: #808080;

    --clr-error-a0: #ff00007e;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --clr-status-online: #68C25C;
    --clr-status-offline: #686868;
    --clr-status-busy: #BA3939;
    --clr-status-idle: #ffcd43;
    
    --clr-danger: #ff7c7c;

    --clr-logs-orange: orange;
    --clr-logs-green: green;
    --clr-logs-blue: rgb(77, 77, 255);
    --clr-logs-purple: rgb(189, 0, 189);

    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

:root.chat_light_red {
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    --clr-primary-a0: #832525;
    --clr-primary-a10: #a72d2d;
    --clr-primary-a20: #d75151;
    --clr-primary-a30: #fc7f7f;
    --clr-primary-a40: #ff9898;
    --clr-primary-a50: #ff9898;

    --clr-primary-a30-20: #fc7f7f7e;

    --clr-surface-a0: #fff;
    --clr-surface-a10: #ffd2d2;
    --clr-surface-a20: #ffeded;
    --clr-surface-a30: #ffeded;
    --clr-surface-a40: #a1c6ff;
    --clr-surface-a50: #a1c6ff;

    --clr-surface-tonal-a0: #f5f2f7;
    --clr-surface-tonal-a10: #eae6ed;
    --clr-surface-tonal-a20: #dfdae4;
    --clr-surface-tonal-a30: #d4d0db;
    --clr-surface-tonal-a40: #c9c5d2;
    --clr-surface-tonal-a50: #bebacf;

    --clr-secondary-a0: #2cd4bd;
    --clr-secondary-a10: #55d9c4;
    --clr-secondary-a20: #71decb;
    --clr-secondary-a30: #89e3d3;
    --clr-secondary-a40: #9fe8da;
    --clr-secondary-a50: #b4ede1;
    
    --clr-input-bg-darkest: #f5f5f5;
    --clr-input-bg-dark: #e0e0e0;

    --clr-input-border-bg-darkest: #cccccc;
    --clr-input-border-bg-dark: #f7f7f7;

    --clr-popup-a0: #fff;
    --clr-popup-a10: #ffd2d2;
    --clr-popup-a20: #ffeded;
    --clr-popup-a30: #ffeded;
    --clr-popup-a40: #a1c6ff;
    --clr-popup-a50: #a1c6ff;

    --clr-text-a0: #000000;
    --clr-text-a10: #1a1a1a;
    --clr-text-a20: #333333;
    --clr-text-a30: #4d4d4d;
    --clr-text-a40: #666666;
    --clr-text-a50: #808080;

    --clr-text-white-a0: #ffffff;
    --clr-text-white-a10: #e0e0e0;
    --clr-text-white-a20: #c4c4c4;
    --clr-text-white-a30: #B2B2B2;
    --clr-text-white-a40: #8c8c8c;
    --clr-text-white-a50: #707070;

    --clr-text-black-a0: #000000;
    --clr-text-black-a10: #1a1a1a;
    --clr-text-black-a20: #333333;
    --clr-text-black-a30: #4d4d4d;
    --clr-text-black-a40: #666666;
    --clr-text-black-a50: #808080;

    --clr-error-a0: #ff00007e;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --clr-status-online: #68C25C;
    --clr-status-offline: #686868;
    --clr-status-busy: #BA3939;
    --clr-status-idle: #ffcd43;
    
    --clr-danger: #ff7c7c;

    --clr-logs-orange: orange;
    --clr-logs-green: green;
    --clr-logs-blue: blue;
    --clr-logs-purple: purple;

    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

:root.chat_dark_red {
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    --clr-primary-a0: #ff7979;
    --clr-primary-a10: #f06d6d;
    --clr-primary-a20: #f25656;
    --clr-primary-a30: #b92f2f;
    --clr-primary-a40: #a82e2e;
    --clr-primary-a50: #a82e2e;

    --clr-primary-a30-20: #b92f2f7e;

    --clr-surface-a0: #40455c;
    --clr-surface-a10: #373c53;
    --clr-surface-a20: #202331;
    --clr-surface-a30: #202331;
    --clr-surface-a40: #202331;
    --clr-surface-a50: #202331;


    --clr-surface-tonal-a0: #2a2531;
    --clr-surface-tonal-a10: #3e3945;
    --clr-surface-tonal-a20: #544f5a;
    --clr-surface-tonal-a30: #6a666f;
    --clr-surface-tonal-a40: #817e86;
    --clr-surface-tonal-a50: #99969d;

    --clr-secondary-a0: #2cd4bd;
    --clr-secondary-a10: #55d9c4;
    --clr-secondary-a20: #71decb;
    --clr-secondary-a30: #89e3d3;
    --clr-secondary-a40: #9fe8da;
    --clr-secondary-a50: #b4ede1;
    
    --clr-input-bg-darkest: #141414;
    --clr-input-bg-dark: #323232;

    --clr-input-border-bg-darkest: #3B3B3B;
    --clr-input-border-bg-dark: #282828;

    --clr-popup-a0: #40455c;
    --clr-popup-a10: #373c53;
    --clr-popup-a20: #40455c;
    --clr-popup-a30: #40455c;
    --clr-popup-a40: #202331;
    --clr-popup-a50: #202331;

    --clr-text-a0: #ffffff;
    --clr-text-a10: #e0e0e0;
    --clr-text-a20: #c4c4c4;
    --clr-text-a30: #B2B2B2;
    --clr-text-a40: #8c8c8c;
    --clr-text-a50: #707070;

    --clr-text-white-a0: #ffffff;
    --clr-text-white-a10: #e0e0e0;
    --clr-text-white-a20: #c4c4c4;
    --clr-text-white-a30: #B2B2B2;
    --clr-text-white-a40: #8c8c8c;
    --clr-text-white-a50: #707070;

    --clr-text-black-a0: #000000;
    --clr-text-black-a10: #1a1a1a;
    --clr-text-black-a20: #333333;
    --clr-text-black-a30: #4d4d4d;
    --clr-text-black-a40: #666666;
    --clr-text-black-a50: #808080;

    --clr-error-a0: #ff00007e;

    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --clr-status-online: #68C25C;
    --clr-status-offline: #686868;
    --clr-status-busy: #BA3939;
    --clr-status-idle: #ffcd43;
    
    --clr-danger: #ff7c7c;

    --clr-logs-orange: orange;
    --clr-logs-green: green;
    --clr-logs-blue: rgb(77, 77, 255);
    --clr-logs-purple: rgb(189, 0, 189);

    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--clr-text-a0);
    margin: 0;
    height: 100%;
    overflow: hidden;
}

body::-webkit-scrollbar {
  width: 12px;
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--clr-popup-a20); 
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}

body {
  scrollbar-width: thin;
  scrollbar-color: var(--clr-popup-a20) transparent;
}

.login-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
}

.bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.bg-img.visible {
    opacity: 1;
}

:root.dark {
    background-color: var(--clr-surface-a0);
}

:root.night {
    background-color: var(--clr-surface-a0);
}

:root.light {
    background-color: var(--clr-surface-a0);
}

:root.chat_light_blue {
    background-image: linear-gradient(90deg, #d5e3ff 0%, #e3dbfd 100%);
    overflow: visible;
    height: 1px;
}

:root.chat_dark_blue {
    background-image: linear-gradient(90deg, #1c2331 0%, #261e2f 100%);
    overflow: visible;
    height: 1px;
}

:root.chat_light_red {
    background-image: linear-gradient(90deg, #f0d1d1 0%, #e8b099 100%);
    overflow: visible;
    height: 1px;
}
:root.chat_dark_red {
    background-image: linear-gradient(90deg, #1c2331 0%, #261e2f 100%);
    overflow: visible;
    height: 1px;
}

h2 {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.switch input {
  display:none;
}

.slider {
  background-color: var(--clr-surface-a20);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider:before {
  background-color: var(--clr-text-white-a10);
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 26px;
}

input:checked + .slider {
  background-color: var(--clr-primary-a0);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.login-form,
.register-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-form-content,
.register-form-content {
    background-color: var(--clr-popup-a0);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

@media screen and (max-width: 600px) {
    .login-form-content,
    .register-form-content {
        padding: 20px;
        border-radius: 10px;
        width: calc(100% - 60px);
    }
}

@media screen and (max-width: 380px){
    .login-form-content,
    .register-form-content {
        padding: 20px;
        border-radius: 10px;
        width: calc(100% - 40px);
    }        
}

.input-text-dark-bg,
input#clr-color-value {
    background: var(--clr-input-bg-dark);
    border: 1px solid var(--clr-text-a50);
    border-radius: 9px;
    padding: 10px 15px;
    font-size: 16px;
    color: var(--clr-text-a0);
    -webkit-box-shadow: 0 0 0 1000px var(--clr-input-bg-dark) inset !important;
    transition: outline 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out,--webkit-box-shadow 0.3s ease-in-out;
}

.input-text-dark-bg:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--clr-input-bg-darkest) inset !important;
    -webkit-text-fill-color: var(--clr-text-a0) !important;
    border: 1px solid var(--clr-primary-a20) !important;
    background: var(--clr-input-bg-darkest) !important;
}

.input-text-dark-bg:-moz-autofill {
    box-shadow: 0 0 0 1000px var(--clr-input-bg-darkest) inset !important;
    -moz-text-fill-color: var(--clr-text-a0) !important;
    border: 1px solid var(--clr-primary-a20) !important;
    background: var(--clr-input-bg-darkest) !important;
}

.input-text-dark-bg:focus {
    outline: var(--clr-primary-a0) solid 1px;
    box-shadow: 0 0 0 2px var(--clr-primary-a20);
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.w270 {
    width: calc(100% - 30px) !important;
    min-width: 270px !important;
}

@media screen and (max-width: 370px) {
    .w270 {
        width: calc(100% - 30px) !important;
        min-width: 0px !important;
    }
}

.button-primary-filled {
    background-color: var(--clr-primary-a0);
    color: var(--clr-text-white-a0);
    border: none;
    border-radius: 9px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary-filled:hover {
    background-color: var(--clr-primary-a10);
}

.button-primary-filled:disabled {
    opacity: 0.7;
    background-color: var(--clr-primary-a0);
    cursor: not-allowed;
}

.button-primary-outline {
    background-color: transparent;
    color: var(--clr-text-a0);
    border: 1px solid var(--clr-primary-a0);
    border-radius: 9px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary-outline:hover {
    background-color: var(--clr-primary-a10);
}

.button-secondary-filled {
    background-color: var(--clr-secondary-a0);
    color: var(--clr-text-a0);
    border: none;
    border-radius: 9px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-secondary-filled:hover {
    background-color: var(--clr-secondary-a10);
}

.button-secondary-outline {
    background-color: transparent;
    color: var(--clr-text-a0);
    border: 1px solid var(--clr-secondary-a0);
    border-radius: 9px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-secondary-outline:hover {
    background-color: var(--clr-secondary-a10);
}

.link {
    color: var(--clr-primary-a0);
    text-decoration: none;
    transition: color 0.3s ease;
}

.link:hover {
    color: var(--clr-primary-a20);
}

.error-message,
.success-message {
    background-color: var(--clr-error-a0);
    color: var(--clr-text-a0);
    padding: 10px;
    border-radius: 5px;
    margin-top: -20px;
    display: none;
}

.success-message {
    background-color: var(--clr-success-a0);
}

.server-bar {
    position: fixed;
    background-color: var(--clr-popup-a0);
    overflow-y: auto;
    overflow-x: hidden;
}

:root.floaty .server-bar {
    top: 15px;
    left: 15px;
    height: calc(100vh - 30px);
    width: 67px;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

:root.floaty .server-bar.hidden {
    transform: translateX(calc(-100% - 16px));
}

:root.compact .server-bar {
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 67px;
    border-radius: 0px;
    border-right: 1px solid var(--clr-input-border-bg-darkest);
    transition: transform 0.3s ease;
}

:root.compact .server-bar.hidden {
    transform: translateX(-100%);
}

.server-bar-dms,
.server-bar-channels,
.server-bar-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.server-bar-options {
    padding-top: 0px !important;
}

.server-bar-item,
.server-bar-option {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    margin: 0px;
    padding: 0px;
    height: 47px;
    position: relative;
    transition: background-color 0.3s ease, border-left 0.3s ease;
    border-left: 2px solid transparent;
}

.server-bar-item.server-position-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 9px;
    background-color: var(--clr-primary-a0);
}

.server-bar-item.server-position-line[data-line="top"]::after {
    top: 0;
    bottom: unset;
}

.server-bar-item.server-position-line[data-line="bottom"]::after {
    bottom: 0;
    top: unset;
}

.server-bar-item:hover {
    background-color: var(--clr-popup-a10);
    border-left: 2px solid var(--clr-primary-a20);
}

.server-bar-item img {
    border-radius: 9px;
    width: 47px;
    height: 47px;
    cursor: pointer;
    user-select: none;
    object-fit: cover;
}

.server-bar-item.active {
    background-color: var(--clr-popup-a20);
    border-left: 2px solid var(--clr-primary-a0);
}
.server-bar-item.active::before {
    transform: translate(-50%, -50%) scale(1);
}

.server-bar-item.active > * {
    position: relative;
    z-index: 1;
}

.server-bar-item .tooltip,
.server-bar-option .tooltip {
    display: none;
    user-select: none;
    z-index: 1000;
}

.server-bar-item:hover .tooltip,
.server-bar-option:hover .tooltip {
    display: block;
    position: fixed;
    left: 79px;
    background-color: var(--clr-popup-a20);
    color: var(--clr-text-a0);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    white-space: nowrap;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.server-bar-option {
    cursor: pointer;
    user-select: none;
}

.server-bar-option-icon {
    position: relative;
    background-color: var(--clr-surface-a30);
    border-radius: 9px;
    width: 47px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
}

.server-bar-option-icon::before {
    content: '';
    position: absolute;
    background-color: var(--clr-primary-a0);
    inset: 50%; 
    transform: translate(-50%, -50%) scale(0);
    border-radius: 9px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 0;
    width: 100%;
    height: 100%;
}

.server-bar-option-icon:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.server-bar-option-icon > * {
    position: relative;
    z-index: 1;
}

.server-bar-option span {
    font-size: 26px;
    color: var(--clr-text-a0);
    user-select: none !important;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.divider {
    height: 1px;
    background-color: var(--clr-text-a30);
    margin: 0px 10px;
    border-radius: 1px;
    width: 47px;
}

.channel-bar {
    position: fixed;
    background-color: var(--clr-popup-a0);
    z-index: -1;
    overflow-y: auto;
}

:root.floaty .channel-bar {
    width: 278px;
    top: 15px;
    left: calc(15px + 67px + 15px);
    height: calc(100vh - 30px);
    border-radius: 16px;
}

:root.compact .channel-bar {
    width: 278px;
    top: 0px;
    left: 67px;
    height: 100vh;
    border-radius: 0px;
    border-right: 1px solid var(--clr-input-border-bg-darkest);
}

.self-info {
    position: fixed;
    background-color: var(--clr-popup-a0);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

:root.floaty .self-info {
    bottom: 15px;
    right: 15px;
    width: 356px;
    height: 58px;
    border-radius: 16px;
}

:root.compact .self-info {
    bottom: 0px;
    right: 0px;
    width: 356px;
    height: 58px;
    border-radius: 0px;
    border-top: 1px solid var(--clr-input-border-bg-darkest);
    border-left: 1px solid var(--clr-input-border-bg-darkest);
}

.dm-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-info-profile-popup-banner {
    width: 100%;
    height: 150px;
    object-fit: cover;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    mask-repeat: no-repeat;
    mask-size: cover;
}

.self-info-left,
.self-info-right,
.dm-info-profile-picture-username-status,
.user-info-profile-popup-profile-picture-username-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px;
    user-select: none;
    height: calc(100% - 20px);
}
.self-info-status-username,
.dm-info-status-username,
.user-info-profile-popup-status-username {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.self-info-username,
.dm-info-username,
.user-info-profile-popup-username {
    margin: 0px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--clr-text-a0);
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="true"] .user-info-profile-popup-username {
    color: var(--clr-text-white-a0);
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="false"] .user-info-profile-popup-username {
    color: var(--clr-text-black-a0);
}

.self-info-username {
    max-width: calc(278px - 20px - 41px - 10px);
}

.dm-info-username,
.user-info-profile-popup-username {
    font-size: 20px !important;
}

.user-info-profile-popup-username {
    font-size: 16px !important;
    max-width: calc(300px - 20px - 60px - 10px);
}
.user-info-profile-popup-username-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: calc(300px - 20px - 60px - 10px);
}

.self-info-status,
.dm-info-status,
.user-info-profile-popup-status {
    margin: 0px;
    color: var(--clr-text-a30);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
}

.dm-info-status,
.user-info-profile-popup-status {
    font-size: 14px !important;
}

.user-info-profile-popup-status {
    font-size: 12px !important;
}

.self-info-profile-status {
    width: 41px;
    height: 41px;
    position: relative;
}

.dm-info-profile-status,
.user-info-profile-popup-profile-status {
    width: 80px;
    height: 80px;
    position: relative;
}

.user-info-profile-popup-profile-status {
    width: 60px;
    height: 60px;
}

.self-info-profile-picture {
    border-radius: 50%;
    width: 41px;
    height: 41px;
    object-fit: cover;
    user-select: none;
}

.dm-info-profile-status img,
.user-info-profile-popup-profile-status img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
    user-select: none;
}

.user-info-profile-popup-profile-status img {
    width: 60px;
    height: 60px;
}

.self-info-profile-username-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 20px);
}

.self-info-status-circle-outer,
.profile-item-status-circle-outer {
    width: 16.57px;
    height: 16.57px;
    border-radius: 50%;
    background-color: var(--clr-popup-a0);
    position: absolute;
    bottom: -1.5px;
    right: -1.5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-item-status-circle-outer {
    width: 37px;
    height: 37px;
}

.dm-info-status-circle-outer,
.user-info-profile-popup-status-circle-outer {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background-color: var(--clr-popup-a0);
    position: absolute;
    bottom: -1.5px;
    right: -1.5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-info-profile-popup-status-circle-outer {
    width: 20px;
    height: 20px;
}

.self-info-status-circle-inner,
.profile-item-status-circle-inner {
    width: 11.34px;
    height: 11.34px;
    border-radius: 50%;
    background-color: var(--clr-status-online);
}

.profile-item-status-circle-inner {
    width: 25px;
    height: 25px;
}

.dm-info-status-circle-inner,
.user-info-profile-popup-status-circle-inner {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: var(--clr-status-online);
}

.user-info-profile-popup-status-circle-inner {
    width: 13px;
    height: 13px;
}

.self-info-status-circle-inner.offline,
.dm-info-status-circle-inner.offline,
.user-info-profile-popup-status-circle-inner.offline {
    background-color: var(--clr-status-offline);
}
.self-info-status-circle-inner.busy,
.dm-info-status-circle-inner.busy,
.user-info-profile-popup-status-circle-inner.busy {
    background-color: var(--clr-status-busy);
}
.self-info-status-circle-inner.idle,
.dm-info-status-circle-inner.idle,
.user-info-profile-popup-status-circle-inner.idle {
    background-color: var(--clr-status-idle);
}

.self-info-right-settings {
    cursor: pointer;
    user-select: none;
    color: var(--clr-text-a30);
    font-size: 24px;
    transition: all 0.3s ease;
    padding: 5px;
    border-radius: 9px;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.self-info-right-settings:hover {
    color: var(--clr-text-a0);
    background-color: var(--clr-popup-a10);
}

.channel-bar-server-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 15px;
    user-select: none;
    cursor: pointer;
    justify-content: space-between;
}

.channel-bar-server-settings {
    cursor: pointer;
    user-select: none;
    color: var(--clr-text-a30);
    font-size: 24px;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.channel-bar-channels,
.dm-users {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    user-select: none;
}

.channel-bar-channel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    user-select: none;
    text-decoration: none !important;
    color: var(--clr-text-a30);
    transition: color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 9px;
    cursor: pointer;
    position: relative;
}

.channel-bar-channel.channel-position-line::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 9px;
    background-color: var(--clr-primary-a0);
}

.channel-bar-channel.channel-position-line[data-line="top"]::after {
	top: 0;
	bottom: unset;
}

.channel-bar-channel.channel-position-line[data-line="bottom"]::after {
	bottom: 0;
	top: unset;
}

.channel-bar-channel-icon-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.channel-bar-channel-icon {
    font-size: 22px !important;
}

.channel-bar-channel.new-channel {
    border: 2px dotted var(--clr-text-a30);
    margin-bottom: 5px;
}

.channel-bar-channel:hover {
    color: var(--clr-text-a10);
}

.channel-settings {
    opacity: 0;
    font-size: 22px !important;
    font-variation-settings:  
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.channel-bar-channel:hover .channel-settings {
    opacity: 1;
}

.channel-bar-channel.active .channel-settings {
    opacity: 1;
}

.channel-bar-channel.active {
    color: var(--clr-text-a0);
    background-color: var(--clr-popup-a10);
}

.channel-bar-channel-name {
    margin: 0px;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    user-select: none;    
    text-decoration: none !important;
}

.channel-group-name,
.channel-group-expand {
    font-size: 14px !important;
    font-weight: var(--font-weight-semibold);
    color: var(--clr-text-a30);
    user-select: none;
    margin-bottom: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.channel-group-expand {
    margin-bottom: 0px;
}

.channel-group-content {
    display: block;
    margin-left: 10px;
}
.channel-group.expanded .channel-group-content {
    display: none;
}
.channel-group.expanded .channel-group-expand {
    transform: rotate(-90deg);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.channel-group-expand {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.channel-group {
    position: relative;
}

.channel-group.group-position-line::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 9px;
    background-color: var(--clr-primary-a0);
}

.channel-group.group-position-line[data-line="top"]::after {
    top: 0;
    bottom: unset;
}

.channel-group.group-position-line[data-line="bottom"]::after {
    bottom: 0;
    top: unset;
}

.top-bar {
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--clr-popup-a0);
    padding: 10px 15px;
}

:root.floaty .top-bar {
    top: 15px;
    left: calc(15px + 67px + 15px + 278px + 15px);
    width: calc(100% - 15px - 67px - 15px - 278px - 15px - 45px);
    border-radius: 9px;
    height: 35px;
}

:root.compact .top-bar {
    top: 0px;
    left: calc(67px + 278px);
    width: calc(100% - 67px - 278px - 30px);
    border-radius: 0px;
    height: 35px;
    border-bottom: 1px solid var(--clr-input-border-bg-darkest);
    border-left: 1px solid var(--clr-input-border-bg-darkest);
}

.top-bar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    user-select: none;
    color: var(--clr-text-a30);
}
.top-bar-channel-name {
    margin: 0px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
    color: var(--clr-text-a30);
}

.main-content {
    position: fixed;
}

:root.floaty .main-content {
    left: calc(15px + 67px + 15px + 278px + 15px);
    width: calc(100% - 15px - 67px - 15px - 278px - 15px - 356px - 30px);
    top: calc(15px + 35px + 35px);
    height: calc(100% - 15px - 35px - 15px - 35px);
}

:root.compact .main-content {
    left: calc(67px + 278px + 1px);
    width: calc(100% - 67px - 278px - 356px - 2px);
    top: calc(35px + 20px + 1px);
    height: calc(100% - 35px - 20px - 1px);
}

.input-container-2 {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--clr-input-bg-darkest);
    border: 1px solid var(--clr-input-border-bg-darkest);
    width: calc(100% - 20px);
    border-radius: 16px;
    padding: 5px;
    cursor: text;
}

:root.compact .input-container-2 {
    width: calc(100% - 32px);
    border-radius: 8px;
    margin: 0px 2px 10px 10px;
}

.input-container-2-inline {
    position: relative;
    margin: 0px !important;
    width: calc(100% - 10px) !important;
    background-color: var(--clr-input-bg-dark);
    border: 1px solid var(--clr-text-a50);
    min-height: 30px !important;
}

.input-container-2-inline .message-input-bg,
.input-container-2-inline .message-input {
    margin-top: 0px !important;
    padding: 5px !important;
}

.input-container-2-inline .message-input:empty::before {
    left: 5px !important;
}

.input-container-2-inline .max-message-length {
    right: 10px !important;
}

.textarea-container {
    height: 100%;
}

.message-input-wrapper {
    width: 100%;
    position: relative;
    overflow-y: auto;
}

.message-input {
    width: calc(100% - 25px);
    padding: 0 10px;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    border: none;
    outline: none;
    border-radius: 16px;
    background: transparent;
    color: transparent;
    caret-color: var(--clr-text-a0);
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word;
    flex-grow: 1;
    z-index: 1;
    margin-top: 10px;
    position: absolute;
    left: 5px;
}

.message-input:empty::before {
    content: attr(data-placeholder);
    color: var(--clr-text-a30);
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.message-input-bg {
    position: absolute;
    left: 5px;
    width: calc(100% - 25px);
    padding: 0 10px;
    color: var(--clr-text-a0);
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: 10px;
    z-index: 0;
}


.message-container {
    overflow-y: auto;
    height: calc(100% - 58px - 35px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.username-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.username {
    font-weight: var(--font-weight-semibold);
    margin: 0px;
    user-select: none;
    cursor: pointer;
}
.date {
    color: var(--clr-text-a30);
    margin: 0px;
    font-size: 12px;
    user-select: none;
}

.message-text {
    margin: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.message {
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.message-static {
    background-color: var(--clr-popup-a0);
    user-select: none;
}
.message-static:hover {
    background-color: var(--clr-popup-a0) !important;
}

.message-content {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}

.message:hover {
    background-color: var(--clr-input-bg-darkest);
}

.mentioned {
    background-color: rgba(136, 136, 0, 0.459) !important;
}

.users {
    position: fixed;
    background-color: var(--clr-popup-a0);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

:root.floaty .users {
    bottom: calc(30px + 58px);
    right: 15px;
    width: 356px;
    height: calc(100% - 58px - 35px - 65px - 15px);
    border-radius: 16px;
}

:root.compact .users {
    width: 356px;
    height: calc(100% - 35px - 21px - 59px);
    right: 0px;
    top: calc(35px + 21px);
    border-radius: 0px;
    border-left: 1px solid var(--clr-input-border-bg-darkest);
}

.top-bar-menu {
    display: none !important;
    cursor: pointer;
    padding-right: 15px;
    border-right: 1px solid var(--clr-input-border-bg-darkest);
}

@media screen and (max-width: 1400px) {
    .settings-content {
        width: 70% !important;
    }
}

@media screen and (max-width: 980px) {
    .settings-content {
        width: 90% !important;
    }
    
}

@media screen and (max-width: 735px) {
    .settings-content {
        width: 100% !important;
    }
    .settings-tabs {
        width: max-content !important;
        position: unset !important;
        height: 100vh !important;
    }
    .setting-page {
        position: unset !important;
        margin-left: 15px !important;
        height: 100vh !important;
    }
    .profile-picture-name-status-edit-container {
        flex-direction: column !important;
        align-items: start !important;
    }
}

@media screen and (max-width: 1190px) {
    .users {
        display: none !important;
    }
    
    :root.floaty .main-content {
        width: calc(100% - 15px - 67px - 15px - 278px - 15px - 15px);
    }

    :root.compact .main-content {
        width: calc(100% - 67px - 278px - 2px);
    }

    :root.floaty .self-info {
        left: calc(15px + 67px + 15px);
        width: 278px;
    }

    :root.compact .self-info {
        width: 277px;
        left: calc(67px);
        border-right: 1px solid var(--clr-input-border-bg-darkest);
    }

    :root.floaty .channel-bar {
        bottom: calc(30px + 58px);
        top: unset;
        height: calc(100vh - 30px - 58px - 15px);
    }

    :root.compact .channel-bar {
        bottom: calc(59px);
        top: unset;
        height: calc(100vh - 59px);
    }
}

@media screen and (max-width: 920px) {
    .top-bar-menu {
        display: block !important;
    }
    .channel-bar {
        display: none;
    }
    .channel-bar.active {
        display: block;
        position: fixed;
        z-index: 502;
        padding: 15px;
        border-radius: 0px !important;
        padding-top: 0px;
    }
    :root.floaty .channel-bar.active {
        height: calc(100vh - 30px - 58px - 15px - 35px - 30px - 30px);
        max-width: calc(100% - 98px - 30px);
        border-bottom: 1px solid var(--clr-input-border-bg-darkest);
        top: calc(55px + 15px + 10px);
        border-right: 1px solid var(--clr-input-border-bg-darkest);
        border-top-right-radius: 16px !important;
        border-top-left-radius: 16px !important;
    }

    :root.compact .channel-bar.active {
        height: calc(100vh - 59px - 55px - 45px);
        max-width: calc(100% - 98px - 30px);
        border-bottom: 1px solid var(--clr-input-border-bg-darkest);
        border-left: 1px solid var(--clr-input-border-bg-darkest);
        top: calc(56px);
    }

    .self-info.active {
        display: flex;
        position: fixed;
        z-index: 503;
    }

    :root.floaty .self-info.active {
        bottom: 15px;
        padding: 15px;
        border-radius: 0px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        max-width: calc(100% - 98px - 30px);
        border-top: 1px solid var(--clr-input-border-bg-darkest);
        border-right: 1px solid var(--clr-input-border-bg-darkest);
    }

    :root.compact .self-info.active {
        bottom: 0px;
        padding: 15px;
        border-radius: 0px;
        width: 278px !important;
        max-width: calc(100% - 98px - 29px) !important;
        border-top: 1px solid var(--clr-input-border-bg-darkest);
        border-right: 1px solid var(--clr-input-border-bg-darkest);
    }

    .self-info {
        display: none;
    }
    :root.floaty .main-content {
        left: calc(15px + 67px + 15px);
        width: calc(100% - 15px - 67px - 15px - 15px);
    }

    :root.compact .main-content {
        left: calc(67px);
        width: calc(100% - 67px);
    }

    :root.floaty .top-bar {
        left: calc(15px + 67px + 15px);
        width: calc(100% - 15px - 67px - 30px - 30px);
        right: unset;
    }

    :root.compact .top-bar {
        left: calc(67px);
        width: calc(100% - 67px - 30px);
        right: unset;
    }
}

@media screen and (max-width: 525px) {
    .server-bar {
        display: none;
    }
    .server-bar.active {
        display: block;
        position: fixed;
        z-index: 503;
        border-radius: 0px !important;
    }
    :root.floaty .server-bar.active {
        height: calc(100vh - 30px - 35px);
        bottom: 0px;
        top: 55px;
        left: 0px;
        padding: 15px;
        padding-top: 0px;
        border-right: 1px solid var(--clr-input-border-bg-darkest);
        border-bottom: 1px solid var(--clr-popup-a0);
    }

    :root.compact .server-bar.active {
        height: calc(100vh - 30px - 35px);
        bottom: 0px;
        top: 55px;
        left: 0px;
        padding-top: 0px;
    }

    :root.floaty .channel-bar.active {
        height: calc(100vh - 30px - 58px - 15px - 35px - 15px) !important;
        max-height: calc(100vh - 30px - 58px - 15px - 35px - 15px) !important;
        top: 55px !important;
        bottom: unset;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }

    :root.floaty .self-info.active {
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        width: 277px !important;
        border-left: 1px solid var(--clr-input-border-bg-darkest);
        bottom: 0px;
    }

    :root.floaty .top-bar,
    :root.compact .top-bar {
        left: 0px;
        width: calc(100%);
        top: 0px;
        border-radius: 0px;
        right: unset;
        border-bottom: 1px solid var(--clr-input-border-bg-darkest);
        z-index: 504;
    }

    :root.floaty .main-content {
        left: 15px;
        width: calc(100% - 15px - 15px);
    }

    :root.compact .main-content {
        left: 0px;
        width: calc(100%);
    }
}

.info-profile,
.available-command,
.mention-item,
.request-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px;
    user-select: none;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.1s ease;
    text-decoration: none;
    color: var(--clr-text-a20);
}

.info-profile {
    position: relative;
    overflow: hidden;
}
.info-profile:hover {
    background-color: var(--clr-popup-a10);
}

.info-profile.active {
    background-color: var(--clr-popup-a10);
    color: var(--clr-text-a0);
}

.available-command:hover,
.mention-item:hover,
.request-item:hover {
    background-color: var(--clr-popup-a0);
}

.availible-command-bot-profile-picture,
.mention-pfp {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    user-select: none;
    object-fit: cover;
}
.request-pfp {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    user-select: none;
    object-fit: cover;
}

.availible-command-username-command { 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.availible-command-command,
.mention-username,
.request-username {
    margin: 0px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
    color: var(--clr-text-a0) !important;
}

.availible-command-username {
    margin: 0px;
    color: var(--clr-text-a30);
    font-size: 12px;
    user-select: none;
}

.online-users,
.offline-users {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}
.online-msg,
.offline-msg {
    margin: 0px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
}

.compact {
    margin-top: -15px;
}

.profile-picture,
.profile-picture-large {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    user-select: none;
    object-fit: cover;
}

.profile-picture-large {
    width: 150px;
    height: 150px;
}

.channel-link,
.user-link {
    background-color: var(--clr-primary-a30-20);
    color: var(--clr-text-a0);
    border-radius: 5px;
    padding: 0px 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}


.premium-tag,
.bot-tag,
.staff-tag {
    background-color: var(--clr-popup-a20);
    color: var(--clr-text-a0);
    border-radius: 5px;
    padding: 2px 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-size: 12px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-variation-settings: 
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    ;
    user-select: none;
    
}

.premium-tag img,
.bot-tag img,
.staff-tag img {
    width: 17px;
    height: 17px;
    object-fit: cover;
}

.premium-tag-tooltip,
.staff-tag-tooltip {
    display: none;
}

.premium-tag:hover .premium-tag-tooltip,
.staff-tag:hover .staff-tag-tooltip {
    display: block;
    position: absolute;
    background-color: var(--clr-popup-a10);
    color: var(--clr-text-a0);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    white-space: nowrap;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    bottom: 40px;
}


.bot-tag {
    background-color: var(--clr-primary-a0);
}

.premium-tag span,
.bot-tag span,
.staff-tag span {
    font-size: 16px !important;
}

.premium-popup,
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.premium-popup-content,
.modal-content {
    width: 400px;
    background-color: var(--clr-popup-a0);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid var(--clr-popup-a20);
}

.premium-popup-icon {
    font-size: 48px;
    color: var(--clr-text-a0);
}

.premium-popup-icon-icon {
    font-size: 48px !important;
    color: var(--clr-text-a0);
    font-variation-settings: 
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    ;

}

.modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.close-modal-btn {
    cursor: pointer;
    user-select: none;
    color: var(--clr-text-a30);
    font-size: 24px;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.create-category-form,
.create-channel-form,
.leave-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.typing-indicator {
    margin: 0px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
    position: fixed;
    bottom: calc(15px + 58px + 5px);
    left: calc(15px + 67px + 15px + 278px + 15px + 9px);
}

.message-options {
    display: none;
    position: absolute;
    flex-direction: row;
    top: 5px;
    right: 5px;
    background-color: var(--clr-popup-a0);
    border-radius: 9px;
    padding: 2px 5px;
    z-index: 1;
}

.message:hover .message-options {
    display: flex;
}

.message-option {
    cursor: pointer;
    user-select: none;
    color: var(--clr-text-a30);
    font-size: 20px !important;
    border-radius: 5px;
    transform: scale(0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.message-option.danger {
    color: var(--clr-danger) !important;
}

.message-option:hover {
    color: var(--clr-text-a0);
    transform: scale(1);
    background-color: var(--clr-popup-a10);
}

.message-reply,
.message-command {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    margin-bottom: 5px;
    margin-left: 40px;
    font-size: 14px !important;
    font-weight: normal !important;
}

.message-command p {
    margin: 0px;
    user-select: none;
    word-break: break-all;
}

.username-reply,
.username-command {
    margin: 0px;
    color: var(--clr-text-a30);
    font-weight: var(--font-weight-semibold);
    user-select: none;
}

.message-text-reply,
.used-command {
    margin: 0px;
    user-select: none;
    word-break: break-all;
}

.used-command {
    background-color: var(--clr-primary-a30-20);
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 12px !important;
}

.identification {
    margin-left: -27px;
    margin-bottom: -14px;
    user-select: none;
}

.replying-to {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid var(--clr-input-border-bg-dark);
}

.available-commands,
.mentions-popup {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--clr-input-border-bg-dark);
    max-height: 500px;
    overflow-y: auto;
}

.replying-to-username-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.replying-to-username {
    margin: 0px;
    color: var(--clr-text-a30);
    font-weight: var(--font-weight-semibold);
}

.replying-to-username-container p {
    margin: 0px;
}

.close-replying-to {
    cursor: pointer;
    user-select: none;
    color: var(--clr-text-a30);
    font-size: 24px;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.highlight-parent-msg {
  background-color: rgba(255, 255, 0, 0.3);
  transition: background-color 0.5s ease;
}

.settings-dropdown {
    position: absolute;
    top: calc(55px + 5px);
    right: 15px;
    width: 220px;
    height: auto;
    background-color: var(--clr-popup-a20);
    border-radius: 16px;
    display: none;
    flex-direction: column;
    z-index: 1;
}

.settings-dropdown.show {
    display: flex;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.settings-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}

.settings-dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 14px;
    user-select: none;
    transition: all 0.2s ease;
}

.settings-dropdown-item.danger {
    color: var(--clr-danger) !important;
}

.settings-dropdown-item:hover {
    background: var(--clr-popup-a30);
}

.settings-dropdown-item p {
    margin: 0px;
    font-weight: var(--font-weight-semibold);
}

.settings-dropdown-item span {
    color: var(--clr-text-a30);
    font-size: 24px;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.settings-dropdown-item.danger span {
    color: var(--clr-danger) !important;
}

.settings-dropdown .divider {
    width: calc(100% - 20px) !important;;
}

.input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.max-message-length {
    position: absolute;
    right: 30px;
    bottom: 10px;
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--clr-text-a30);
    user-select: none;
}

.max-characters-left {
    margin: 0px;
    font-weight: var(--font-weight-semibold);
    color: var(--clr-text-a30);
    user-select: none;
}

.debt {
    color: var(--clr-danger) !important;
}

.textarea-container {
    display: flex;
    flex-direction: row;
}

.options {
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: 38px;
    align-items: center;
    user-select: none;
}

.option {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-a30);
    transition: all 0.2s ease;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.option:hover {
    color: var(--clr-text-a0);
}

.option-icon {
    font-size: 26px !important;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.file-uploads {
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
}
.file-upload-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    user-select: none;
    padding-left: 5px;
    padding-right: 5px;
}

.file-preview {
    margin: 10px;
    margin-right: 5px;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 9px;
    user-select: none;
    transition: all 0.2s ease;
    width: 200px;
    height: 200px;
    background-color: var(--clr-popup-a0);
    position: relative;
}

.upload-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.upload-preview .video-preview,
.upload-preview .image-preview,
.upload-preview .audio-icon-upload,
.upload-preview .text-icon-upload {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    object-fit: cover;
    font-size: 100px !important;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.file-name {
    margin: 0px;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--clr-text-a0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-options {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: absolute;
    transition: all 0.2s ease;
    flex-direction: row;
    top: 10px;
    right: 10px;
    background-color: var(--clr-popup-a10);
    border-radius: 9px;
    padding: 2px 5px;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.file-remove-icon {
    color: var(--clr-danger);
    border-radius: 9px;
    padding: 2px 5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.9);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.file-remove-icon:hover {
    background-color: var(--clr-popup-a20);
    transform: scale(1);
}

.message-assets {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 45%;
    overflow: visible;
    margin-top: 10px;
}

.message-asset-video,
.message-asset-image {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
}


.message-asset-profile-picture {
    width: 350px;
    height: 350px;
    object-fit: cover;
}

.message-asset-audio {
    display: none;
}

.name-text {
    width: 100%;
}

pre {
    width: calc(100% - 50px);
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px;
    justify-content: left;
    display: flex;
    flex-direction: column;
}

code {
    background-color: var(--clr-input-border-bg-darkest) !important;
}

.lang-bar {
    font-family: "Inter", sans-serif;    
    padding: 5px 10px;
    background-color: var(--clr-input-border-bg-dark);
    font-size: 14px !important;
    user-select: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
}

.lang-bar span {
    cursor: pointer;
    font-size: 18px !important;
    user-select: none;
    color: var(--clr-text-a30);
    transition: all 0.3s ease;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.lang-bar span:hover {
    color: var(--clr-text-a0);
}

.lang-bar p {
    margin: 0px;
    user-select: none;
}

.custom-player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--clr-input-border-bg-darkest);
  padding: 10px;
  border-radius: 12px;
  font-size: 14px;
  color: white;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.custom-player .seek-bar {
  flex: 1;
  cursor: pointer;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--clr-input-border-bg-dark);
  margin: 0;
}


.custom-player .seek-bar::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
}

.custom-player .seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  background: transparent;
  cursor: default;
  border: none;
  margin-top: 0;
}

.custom-player .seek-bar::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--clr-input-border-bg-dark);
}

.custom-player .seek-bar::-moz-range-progress {
  background-color: var(--clr-primary-a0);
  height: 6px;
  border-radius: 3px;
}

.custom-player .seek-bar::-moz-range-thumb {
  width: 0;
  height: 0;
  background: transparent;
  border: none;
  cursor: default;
}

.custom-player .play-pause {
  cursor: pointer;
  font-size: 24px !important;
  user-select: none;
  color: var(--clr-text-a30);
  transition: all 0.3s ease;
  font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24
}

.custom-player .play-pause:hover {
  color: var(--clr-text-a0);
}

.time-left-current {
    user-select: none;
    display: flex;
    gap: 4px;
    white-space: nowrap;
    font-feature-settings: "tnum";
}

.player-options {
    display: none;
    position: absolute;
    flex-direction: row;
    top: -10px;
    right: -10px;
    background-color: var(--clr-popup-a10);
    border-radius: 9px;
    padding: 2px 5px;
    z-index: 1;
}

.custom-player:hover .player-options,
.player-options:hover {
    display: flex;
}

.player-option {
    cursor: pointer;
    user-select: none;
    color: var(--clr-text-a30);
    font-size: 20px !important;
    border-radius: 5px;
    transform: scale(0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.player-option:hover {
    color: var(--clr-text-a0);
    transform: scale(1);
    background-color: var(--clr-popup-a20);
}

.icon-preview {
    display: inline-block;
    width: 150px; 
    height: 150px; 
    border-radius: 9px; 
    overflow: hidden; 
    cursor: pointer; 
    background-color: var(--clr-popup-a20); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin: auto;
}

.icon-preview span {
    color: var(--clr-text-a30);
    font-size: 70px !important;
    user-select: none;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.settings-content {
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: row;
    position: relative;
}

.settings-tabs {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 15px;
    gap: 10px;
    z-index: 1;
    background-color: var(--clr-popup-a0);
    height: calc(100vh - 30px);
    width: 250px;
    border-radius: 16px;
    overflow-y: auto;
    color: var(--clr-text-a10);
}

.settings-tab {
    cursor: pointer;
    padding: 10px;
    border-radius: 16px;
    user-select: none;
    display: flex;
    margin: 0px 10px;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    background-color: var(--clr-popup-a10);
    color: var(--clr-text-a10);
    transition: background-color 0.3s ease;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.settings-tab.active {
    background-color: var(--clr-popup-a30);
}

.settings-tab:hover {
    background-color: var(--clr-popup-a20);
}

.settings-tab p {
    margin: 0px;
}

.settings-tab-title {
    margin: 10px 16px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
}

.setting-page {
    top: 15px;
    margin-left: calc(250px + 15px);
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    height: calc(100vh - 30px);
    width: calc(100% - 250px - 15px);
}

.close-settings-container {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--clr-text-a30);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.close-settings-container:hover,
.close-settings-container:hover .close-settings {
    color: var(--clr-text-a0);
    border-color: var(--clr-text-a0) !important;
}

.close-settings-container p {
    margin: 0px;
}

.close-settings {
    font-size: 28px !important;
    border-radius: 50%;
    padding: 5px;
    border: 2px solid var(--clr-text-a30);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-page-title {
    margin-top: 15px;
    user-select: none;
}
.settings-page-subtitle {
    margin: 0px;
    user-select: none;
    color: var(--clr-text-a30);
}

.profile-container,
.developer-bot-profile {
    margin-top: 50px;
    background-color: var(--clr-popup-a10);
    padding: 10px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-container {
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
}

@media screen and (max-width: 1600px) {
    .profile-container {
        flex-direction: column;
    }
}

.edit-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-picture-name-status-edit-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    justify-content: space-between;

}

.profile-picture-name-status-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.profile-picture-status-container {
    width: 70px;
    height: 70px;
    position: relative;
}

.profile-picture-preview {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    user-select: none;
    transition: filter 0.3s ease;
}

.developer-bot-profile .profile-picture-preview {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    object-fit: cover;
    user-select: none;
    transition: filter 0.3s ease;
}

.developer-bot-profile-picture-preview-container {
    position: relative;
    width: max-content;
}

.profile-picture-preview-container.editing img.profile-picture-preview,
.developer-bot-profile-picture-preview-container img.profile-picture-preview {
    transition: filter 0.3s ease;
}

.profile-picture-preview-container.editing:hover img.profile-picture-preview,
.developer-bot-profile-picture-preview-container:hover img.profile-picture-preview  {
    cursor: pointer;
    filter: brightness(0.6);
}

.profile-picture-preview-container .hover-text,
.developer-bot-profile-picture-preview-container .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--clr-text-a0);
    font-weight: var(--font-weight-semibold);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    user-select: none;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    ;
    font-size: 30px !important;

}

.developer-bot-profile-picture-preview-container .hover-text {
    font-size: 50px !important;
}
.profile-picture-preview-container.editing:hover .hover-text,
.developer-bot-profile-picture-preview-container:hover .hover-text {
    cursor: pointer;
    opacity: 1;
}

.profile-status-circle-outer {
    width: 20.57px;
    height: 20.57px;
    border-radius: 50%;
    background-color: var(--clr-popup-a10);
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-status-circle-inner {
    width: 15.34px;
    height: 15.34px;
    border-radius: 50%;
    background-color: var(--clr-status-online);
}
.profile-status-circle-inner.offline {
    background-color: var(--clr-status-offline);
}
.profile-status-circle-inner.busy {
    background-color: var(--clr-status-busy);
}
.profile-status-circle-inner.idle {
    background-color: var(--clr-status-idle);
}

.profile-name-status-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-name-status-container p {
    margin: 0px;
}

.profile-name {
    margin: 0px;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    display: flex;
    flex-direction: row;
    gap: 5px;
    user-select: none;
}

.profile-status {
    margin: 0px;
    color: var(--clr-text-a30);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
}

.call-options {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: row;
    width: auto;
    gap: 20px;
}

.call-option-group {
    border-radius: 15px;
    padding: 5px;
    background-color: var(--clr-input-bg-darkest);
    border: 1px solid var(--clr-input-border-bg-darkest);
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.call-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.call-option-icon {
    font-size: 28px;
}

.call-option:hover {
    background-color: var(--clr-popup-a0);
}

.call-hangup {
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    background-color: var(--clr-status-busy);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.call-hangup:hover {
    background-color: var(--clr-danger);
}

.participants {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: 200px;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 10px;
    overflow-y: auto;
    max-height: 100vh;
}

.participant {
    width: 200px;
    height: 200px;
    user-select: none;
    display: flex;
    background-color: var(--clr-popup-a10);
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.participant img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid transparent;
}

.participant.talking img {
    border: 2px solid var(--clr-status-online);
}

.participant p {
    margin: 0px;
    text-align: center;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
}

.command-input {
    font-weight: var(--font-weight-semibold);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.command-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.command-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    background-color: var(--clr-popup-a0);
    overflow: hidden;
    gap: 5px;
    padding-left: 5px;
    border: 1px solid transparent
}

.command-option.input-error {
    border-color: var(--clr-danger);
}

.command-option-input {
    padding: 2px 5px;
    height: 25px;
    font-family: "Inter", sans-serif;
    resize: none;
    background-color: var(--clr-input-border-bg-dark);
    border: none;
    max-lines: 1;
    overflow: hidden;
    outline: none;
    color: var(--clr-text-a0);
    border-radius: 5px;
    line-height: calc(25px - 2px);
    font-size: 16px;
    width: auto;
}

.bots-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    padding: 20px;
}

.developer-title {
    font-size: 30px;
    font-weight: var(--font-weight-semibold);
}

.developer-description {
    font-size: 20px;
    margin: 0px;
    color: var(--clr-text-a30);
}

.developer-content {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

.developer-bots {
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: calc(180px + 20px);
    grid-template-columns: repeat(auto-fill, calc(150px + 20px));
    gap: 10px;
    overflow-y: auto;
    max-height: 100vh;
}

.developer-bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background-color: var(--clr-popup-a10);
    border-radius: 15px;
    width: 150px;
    height: 180px;
    user-select: none;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.developer-bot-profile-picture {
    border-radius: 10px;
    width: 150px;
    height: 150px;
    object-fit: cover;
    user-select: none;
}

.add-bot-container {
    border-radius: 10px;
    width: 150px;
    height: 150px;
    user-select: none;
    background-color: var(--clr-input-bg-darkest);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-bot {
    font-size: 60px !important;
    color: var(--clr-text-a0);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.developer-bot-name {
    margin: 0px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.developer-bot:hover {
    background-color: var(--clr-popup-a0);
}

.developer-bot-profile {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.developer-bot-profile-info {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    width: 100%;
}

.developer-bot-profile-info-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#save-bot-button,
.developer-bot-profile-picture-preview-container {
    height: fit-content;
}

.bot-token-buttons {
    display: flex;
    flex-direction: row;
    width: 300px;
    justify-content: space-between;
}

h4,
h5,
h6 {
    font-weight: normal;
}

h5,
h6 {
    color: var(--clr-text-a30);
}

.embed {
  border-left: 4px solid var(--clr-primary-a0);
  padding: 10px;
  margin-bottom: 8px;
  background: var(--clr-input-border-bg-dark);
  border-radius: 6px;
}

.embed-title {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: bold;
}

.embed-description {
  margin: 0 0 15px 0;
  font-size: 16px;
}

.embed-fields {
  margin-bottom: 10px;
}

.embed-field {
  font-size: 15px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.embed-components {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.embed-button-row {
  display: flex;
  gap: 6px;
}

.embed-footer {
  margin-top: 10px;
  opacity: 0.7;
  margin-bottom: 0px;
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dynamic-time {
    background-color: var(--clr-input-border-bg-darkest);
    border-radius: 5px;
    padding: 5px 10px;
    color: var(--clr-text-a0);
}

.dm_with {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--clr-text-a0);
}

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

.dm-info-container,
.profile-item-info,
.profile-item-info-tags {
    padding: 10px;
    background-color: var(--clr-popup-a10);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-info-profile-link {
    border-radius: 5px;
    background-color: var(--clr-popup-a20);
    border: 1px solid var(--clr-popup-a40);
}

.dm-info-profile-link:hover {
    background-color: var(--clr-popup-a30);
}

.dm-info-profile-link[data-custom-style="true"]:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.profile-item-info-tags {
    padding: 0px;
}

.dm-info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dm-info-item-key,
.profile-item-info-key {
    color: var(--clr-text-a0);
    margin: 0px;
    font-size: 16px;
    user-select: none;
    font-weight: var(--font-weight-semibold);
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="true"] .dm-info-item,
.user-info-profile-static[data-custom-style="true"][data-light-text="true"] .dm-info-item {
    color: var(--clr-text-white-a0);
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="false"] .dm-info-item,
.user-info-profile-static[data-custom-style="true"][data-light-text="false"] .dm-info-item {
    color: var(--clr-text-black-a0);
}

.dm-info-item-value {
    color: var(--clr-text-a20);
    margin: 0px;
    font-size: 16px;
}

.dm-info-item-username-original {
    color: var(--clr-text-a0);
    font-size: 14px;
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="true"] .dm-info-item-username-original {
    color: var(--clr-text-white-a0) !important;
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="false"] .dm-info-item-username-original {
    color: var(--clr-text-black-a0) !important;
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="true"] .dm-info-item-value,
.user-info-profile-static[data-custom-style="true"][data-light-text="true"] .dm-info-item-value {
    color: var(--clr-text-white-a20);
}

.user-info-profile-popup[data-custom-style="true"][data-light-text="false"] .dm-info-item-value,
.user-info-profile-static[data-custom-style="true"][data-light-text="false"] .dm-info-item-value {
    color: var(--clr-text-black-a20);
}

.top-bar-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.pending-requests {
    background-color: var(--clr-popup-a10);
    color: var(--clr-text-a0);
    border: none;
    border-radius: 9px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;    
}

.pending-requests p {
    color: var(--clr-text-a0);
    margin: 0px;
}

.pending-requests:hover {
    background-color: var(--clr-popup-a20);
}

.pending-friend-requests-title,
.outgoing-friend-requests-title {
    color: var(--clr-text-a0);
    margin: 0px;
    font-size: 16px;
    user-select: none;
    font-weight: var(--font-weight-semibold);
}

.pending-friend-requests-list,
.outgoing-friend-requests-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0px 10px;
    color: var(--clr-text-a30);
    font-size: 16px;
    user-select: none;
    margin-top: 10px;
}

.request-item-options-username {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.request-item {
    cursor: default;
}

.request-cancel,
.request-accept,
.request-decline {
    padding: 5px 10px;
    background-color: var(--clr-popup-a10);
    border-radius: 5px;
    color: var(--clr-text-a0);
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: max-content;
}

.request-accept {
    background-color: var(--clr-status-online);
}
.request-decline {
    background-color: var(--clr-status-busy);
}

.request-cancel:hover {
    background-color: var(--clr-popup-a20);
}


.image-viewer-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.image-viewer-popup-image {
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 100%;
    max-height: 100%;
    user-select: none;
}

.image-viewer-popup-options {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    gap: 5px;
    transition: all 0.2s ease;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-popup-a10);
    border-radius: 10px;
    padding: 5px;
    z-index: 1;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.image-viewer-popup-option {
    color: var(--clr-text-a30);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    padding: 5px;
}

.image-viewer-popup-option:hover {
    background-color: var(--clr-popup-a20);
    color: var(--clr-text-a0);
}

.image-viewer-popup-option-icon {
    font-size: 25px !important;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24

}

.image-viewer-popup-option-text {
    display: none;  
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--clr-popup-a20);
    color: var(--clr-text-a0);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    white-space: nowrap;
}

.image-viewer-popup-option:hover .image-viewer-popup-option-text {
    display: block;
    animation: pop-in-image-viewer 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in-image-viewer {
    0% {
        transform: translate(-50%) scale(0.9);
    }
    100% {
        transform: translate(-50%) scale(1);
    }
}

.magnifier-circle {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
    border: 2px solid var(--clr-popup-a30);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 9999;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #000;
}

.quote {
    border-left: 3px solid var(--clr-primary-a0);
    padding-left: 5px;
    border-radius: 5px;
}

.md-syntax {
    color: var(--clr-popup-a50);
}

.no-member {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 16px;
    padding: 10px;
    background-image: url('../images/login-bg.png');
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px
}

.no-member-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.no-member-title {
    color: var(--clr-text-a0);
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin: 0px;
}

.no-member-description {
    color: var(--clr-text-a30);
    font-size: 16px;
    text-align: center;
    margin: 0px;
}

.dm-info-tags {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-bottom: 5px;
}

.dm-info-tag,
.profile-item-info-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.profile-item-info-tag {
    cursor: default;
    gap: 10px;
}


.dm-info-tag-icon,
.profile-item-info-tag-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    user-select: none;    
}

.profile-item-info-tag-icon {
    width: 30px;
    height: 30px;
}

.dm-info-tag-tooltip{
    display: none;  
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--clr-popup-a20);
    color: var(--clr-text-a0);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
}

.dm-info-tag:hover .dm-info-tag-tooltip {
    display: block;
    animation: pop-in-image-viewer 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.md-escape {
  color: var(--clr-primary-a0);
}


.profile-item-status-profile {
    position: relative;
    width: 150px;
    height: 150px;
}

.profile-item {
    background-color: var(--clr-popup-a0);
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    gap: 25px;
    padding: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--clr-text-a20);
}

.profile-item-right {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.profile-item-username {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    margin: 0px;
    color: var(--clr-text-a0);
}

.profile-item-info-tag-info {
    margin: 0px;
    color: var(--clr-text-a0);
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.profile-item-info-tag-info-name {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    margin: 0px;
    color: var(--clr-text-a0);
    user-select: none;
}

.profile-item-info-tag-info-description {
    font-size: 14px;
    margin: 0px;
    color: var(--clr-text-a30);
    user-select: none;
}

.profile-item-info-tag {
    margin-left: 5px;
}

.profile-item-info-bio .no-bio {
    color: var(--clr-text-a30);
}

.user-info-profile-popup,
.user-info-profile-static {
    width: 300px;
    padding: 10px;
    background-color: var(--clr-popup-a0);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.user-info-profile-popup {
    position: absolute;
    right: calc(356px + 15px + 10px);
    z-index: 10;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 3px solid var(--clr-popup-a0);
    overflow: hidden;
}

.invite-item-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background-color: var(--clr-input-border-bg-dark);
    border: 1.5px solid var(--clr-input-bg-dark);
    border-radius: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--clr-text-a20);
    width: max-content;
    margin-top: 10px;
}

.invite-item-name-icon-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.invite-item-name-date-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.invite-item-name {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    margin: 0px;
    color: var(--clr-text-a0);
}

.invite-item-date {
    font-size: 14px;
    margin: 0px;
    color: var(--clr-text-a30);
}

.invite-item-icon {
    border-radius: 9px;
    width: 47px;
    height: 47px;
    object-fit: contain;
}

.invite-item-join-button {
    margin-top: 5px;
    font-size: 14px;
}

.theme-options-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.theme-option {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 1px solid var(--clr-text-a20);
    cursor: pointer;
    transition: all 0.2s ease
}
.theme-option.light {
    background-color: var(--clr-light);
}
.theme-option.dark {
    background-color: var(--clr-dark);
}
.theme-option.night {
    background-color: var(--clr-night);
}
.theme-option.chat_light_blue {
    background-image: var(--clr-chat-light-blue);
}
.theme-option.chat_dark_blue {
    background-image: var(--clr-chat-dark-blue);
}
.theme-option.hidden_1_disabled {
    background-image: var(--clr-hidden_1_disabled);
    cursor: default;
}
.theme-option.hidden_2_disabled {
    background-image: var(--clr-hidden_2_disabled);
    cursor: default;
}

.theme-option.active {
    border: 2px solid var(--clr-primary-a0);
}

@media screen and (max-width: 440px) {
    .message-content .username-date .staff-tag,
    .message-content .username-date .premium-tag {
        display: none;
    }
}

.logs-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logs-textarea {
    width: calc(100% - 100px);
    height: calc(100% - 60px);
    resize: none;
    border: none;
    background-color: var(--clr-popup-a10);
    padding: 10px;
    border-radius: 16px;
    overflow: auto;
    color: var(--clr-text-a0);
    font-size: 14px;
    font-family: 'Roboto Mono', monospace;
}

.logs-options-container {
    display: flex;
    flex-direction: row;
    gap: 15px;
}
.log-option {
    display: flex;
    flex-direction: column;
    align-items: start;
    font-size: 14px;
    color: var(--clr-text-a0);
    user-select: none;
}

.connections-container {
    width: 100%;
    height: 100%;
    margin-top: 50px;
}

.all-connections-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-auto-rows: minmax(100px, auto);
    gap: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    overflow-y: auto;
    padding: 10px;
    background-color: var(--clr-popup-a10);
    border-radius: 16px;
}

.connection-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--clr-popup-a20);
    border: 1.5px solid var(--clr-input-bg-dark);
    border-radius: 6px;
    transition: all 0.2s ease;
    color: var(--clr-text-a20);
    width: 100px;
    height: 100px;
    cursor: pointer;
    user-select: none;
}

.connection-name {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    margin: 0px;
    color: var(--clr-text-a0);
}

.connection-status {
    font-size: 14px;
    margin: 0px;
    color: var(--clr-text-a30);
}

.connection-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.connection-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.connection-modal-userimage {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid var(--clr-input-border-bg-darkest);
    user-select: none;
}
.connection-modal-username {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    margin: 0px;
    color: var(--clr-text-a0);
    user-select: none;
}
.connection-modal-connected-since {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 0px;
    color: var(--clr-text-a30);
    user-select: none;
}
.connection-modal-connected-since-title {
    font-size: 14px;
    margin: 0px;
    color: var(--clr-text-a30);
    user-select: none;
}
.connection-modal-connected-since-date {
    font-size: 14px;
    margin: 0px;
    color: var(--clr-text-a30);
    user-select: none;
}

.connection-modal-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
}

.appearance-type-title {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    margin: 0px;
    color: var(--clr-text-a0);
    user-select: none;
}
.appearance-type-description {
    font-size: 14px;
    margin: 0px;
    color: var(--clr-text-a30);
    user-select: none;
    margin-bottom: 5px;
}

.appearance-type-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.chat-account-only {
    border: 2px solid var(--clr-primary-a0);
    border-radius: 16px;
}

.kudos-amount-container {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    gap: 5px;
    background-color: var(--clr-popup-a10);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.kudos-amount-value {
    font-size: 24px;
    margin: 0px;
    color: var(--clr-text-a10);
    user-select: none;
}

.kudos-amount-title {
    font-size: 26px;
    font-weight: var(--font-weight-semibold);
    margin: 0px;
    color: var(--clr-text-a0);
    user-select: none;
}

.kudos-items-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: minmax(350px, 1fr);
    width: calc(100%);
    gap: 10px;
}

.kudos-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--clr-popup-a20);
    border: 1.5px solid var(--clr-popup-a30);
    border-radius: 16px;
    transition: all 0.2s ease;
    color: var(--clr-text-a20);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    position: relative;
}

.kudos-item-image {
    width: 100%;
    height: calc(100% - 100px);
    background-color: var(--clr-popup-a0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-bottom: 1.5px solid var(--clr-popup-a30);
}

.kudos-item-extra-message {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    background-color: var(--clr-popup-a30);
    border-radius: 80px;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--clr-text-a10);
    user-select: none;
    margin: 0px;
}

.kudos-item-name {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    margin: 0px;
    color: var(--clr-text-a10);
    user-select: none;
    max-width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kudos-item-amount {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 15px;
    margin-right: 20px;
    margin-top: 10px;
    max-width: calc(100% - 40px);
    color: var(--clr-text-a30);
    gap: 5px;
    font-size: 16px;
}

.kudos-item-amount-value {
    margin: 0px;
    font-weight: var(--font-weight-semibold);
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kudos-item-view-details-button {
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: calc(100% - 30px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(20px);
}

.kudos-item:hover .kudos-item-view-details-button {
    opacity: 1;
    transform: translateY(0px);
}

.kudo-item-modal-image-container {
    width: 100%;
    height: 300px;
    background-color: var(--clr-popup-a0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    border-bottom: 1.5px solid var(--clr-popup-a30);
}

.kudo-item-modal-name {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    margin: 0px;
    color: var(--clr-text-a10);
    user-select: none;
    max-width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kudo-item-modal-price-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    max-width: calc(100% - 20px);
    color: var(--clr-text-a30);
    gap: 5px;
    font-size: 16px;
    user-select: none;
}

.kudo-item-modal-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: normal;
    width: 100%;
}
.kudo-item-modal-button * {
    margin: 0px;
}

.kudos-amount {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: calc(100% - 20px);
    color: var(--clr-text-a30);
}

.kudo-item-modal-description {
    font-size: 16px;
    margin: 0px;
    color: var(--clr-text-a30);
    user-select: none;
    max-width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

.no-underline {
    text-decoration: none;
}

.maintenance {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    color: var(--clr-text-a0);
    border-radius: 10px;
    background-color: var(--clr-warning-a0);
    user-select: none;
    position: absolute;
    z-index: 1000;
}

:root.compact .maintenance {
    border-radius: 0px;
}

.maintenance-message {
    margin: 0px;
}

.maintenance-close {
    cursor: pointer;
    user-select: none;
    font-size: 24px;
    justify-self: flex-end;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

.main-content-title {
    font-weight: var(--font-weight-semibold);
    color: var(--clr-text-a0);
    user-select: none;
    margin: 15px;
}

.profile-picture-preview-wrapper,
.dm-info-banner-picture-upload-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 60px;
    height: 60px;
}

.dm-info-banner-picture-upload-wrapper {
    width: 300px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
}

.dm-info-profile-picture.user-preview-picture,
.dm-info-banner-picture-upload {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.dm-info-banner-picture-upload {
    background-color: var(--clr-popup-a20);
}

.profile-picture-preview-wrapper:hover .dm-info-profile-picture.user-preview-picture,
.dm-info-banner-picture-upload-wrapper:hover .dm-info-banner-picture-upload {
    filter: brightness(0.6);
}

.dm-info-banner-picture-upload-wrapper .profile-banner-options:hover ~ .dm-info-banner-picture-upload {
    filter: brightness(1);
}

.hover-text.material-symbols-rounded {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    font-size: 30px;
    color: white;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dm-info-banner-picture-upload-wrapper .hover-text.material-symbols-rounded {
    font-size: 50px;
}

.profile-picture-preview-wrapper:hover .hover-text.material-symbols-rounded,
.dm-info-banner-picture-upload-wrapper:hover .hover-text.material-symbols-rounded {
    opacity: 1;
}

.dm-info-banner-picture-upload-wrapper .profile-banner-options:hover ~ .hover-text.material-symbols-rounded {
    opacity: 0;
}

.profile-input-label,
.profile-preview-title {
    font-weight: var(--font-weight-semibold);
    color: var(--clr-text-a0);
    user-select: none;
    margin: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.profile-edit-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.unsaved-changes-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100% - 40px);
    justify-content: space-between;
    gap: 10px;
    padding: 5px 10px;
    color: var(--clr-text-a0);
    border-radius: 10px;
    background-color: var(--clr-input-bg-dark);
    border: 1px solid var(--clr-text-a50);
    user-select: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 1000;
    margin: 10px;
    animation: forwards fade-in-unsaved-changes 0.3s ease;
}

@keyframes fade-in-unsaved-changes {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.unsaved-changes-buttons {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.reset-account-changes-button {
    background-color: transparent;
    border: none;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    font-family: "Inter", sans-serif;
}

.unsaved-changes-message {
    margin: 0px;
}

.unsaved-changes-buttons .button-primary-filled {
    padding: 7px 13px;
    border-radius: 5px;
    font-size: 14px !important;
    font-weight: var(--font-weight-semibold);
    font-family: "Inter", sans-serif;
}

.profile-color-buttons {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.profile-color-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.profile-color {
    width: 60px;
    height: 45px;
    border-radius: 5px;
    border: none;
	cursor: pointer;
	padding: 0;
	text-indent: -9999px;
    overflow: hidden;
}

.profile-color-text {
    font-size: 12px;
    color: var(--clr-text-a0);
    user-select: none;
    margin: 0px;
    text-align: center;
}

button[aria-labelledby="clr-open-label"] {
    display: none;
}

#clr-color-preview {
    display: none !important;
}

input#clr-color-value {
    width: 100% !important;
    border-radius: 5px !important;
    margin: 10px 0px !important;
    text-align: start !important;
}

#clr-picker {
    justify-content: start !important;
    padding: 10px !important;
    background-color: var(--clr-popup-a0);
    border: 1px solid var(--clr-text-black-a20);
}

.clr-hue {
    width: 100% !important;
    margin: 0px !important;
    border-radius: 5px !important;
    height: 15px !important;
}

input#clr-hue-slider {
    width: calc(100%) !important;
    left: 0px !important;
}

#clr-hue-marker {
    width: 10px;
    height: 20px !important;
    border-radius: 2px;
    background-color: var(--clr-popup-a30);
    border-color: var(--clr-popup-a30) !important;
}

.profile-previews {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0px;
}

.profile-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px;
}

.spotify-info {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 0;
    align-items: center;
}

.spotify-info-cover {
    width: 60px;
    height: 60px;
    padding: 0px;
    margin: 0px;
}

.spotify-info-cover img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    user-select: none;
    flex-shrink: 0;
}

.spotify-info-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

.spotify-track-name {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none;
    color: var(--clr-text-a0);
    text-decoration: none;
}

.spotify-track-name:hover {
    text-decoration: underline;
}

.spotify-artists {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin: 0;
    color: var(--clr-text-a30);
    flex-wrap: wrap;
    font-size: 14px;
    overflow: hidden;
}

.spotify-artists a {
    color: var(--clr-text-a30);
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}

.spotify-artists a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .spotify-info-cover img {
        border-radius: 4px;
        width: 50px;
        height: 50px;
    }

    .spotify-track-name {
        font-size: 14px;
    }

    .spotify-artists {
        font-size: 12px;
        gap: 3px;
    }
}

@media (max-width: 480px) {
    .spotify-info {
        flex-direction: column;
        gap: 5px;
    }

    .spotify-info-cover img {
        width: 40px;
        height: 40px;
        border-radius: 4px;
    }

    .spotify-info-text {
        text-align: center;
    }

    .spotify-track-name {
        font-size: 13px;
    }

    .spotify-artists {
        font-size: 11px;
        justify-content: center;
        gap: 2px;
    }
}

.spotify-progress-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.spotify-time-left,
.spotify-time-right {
    font-size: 12px;
    color: var(--clr-text-a0);
    white-space: nowrap;
    width: 4ch;
    text-align: left;
}

.spotify-progress-bar-wrapper {
    flex: 1;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.spotify-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--clr-text-a0);
}

.connection-modal-spotify-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0px;
}

.option-description-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin: 0px;
}

.option-title {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    margin: 0px;
}

.option-description {
    font-size: 14px;
    color: var(--clr-text-a30);
    margin: 0px;
}

.profile-input-label-description {
    font-size: 12px;
    color: var(--clr-text-a30);
    margin: 0px;
}

.profile-input-labels-container {
    display: flex;
    flex-direction: column;
}
.profile-banner-options {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    background-color: var(--clr-popup-a10);
    border-radius: 8px;
    z-index: 5;
    color: var(--clr-text-a0);
    user-select: none;
    overflow: hidden;
}

.profile-banner-option {
    cursor: pointer;
    padding: 5px;
    transition: all 0.3s ease-in-out;
}

.profile-banner-option:hover {
    background-color: var(--clr-popup-a20);
}

.profile-banner-option-delete {
    color: var(--clr-danger-a20);
}

.profile-banner-option-delete:hover {
    color: var(--clr-danger-a10);
}

.popup-text {
    font-size: 18px;
    margin: 0px;
    color: var(--clr-text-a0);
}

.popup-subtext {
    font-size: 14px;
    margin: 0px;
    color: var(--clr-text-a30);
}

.popup {
    background-color: var(--clr-popup-a0) !important;
    color: var(--clr-text-a0) !important;
    border-color: var(--clr-input-border-bg-darkest) !important;
}

.popup-header {
    border-color: var(--clr-input-border-bg-darkest) !important;
}

.channel-preview {
    max-width: 278px;
    padding-right: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.channel-preview a {
    background-color: var(--clr-popup-a10) !important;
    color: var(--clr-text-a0) !important;
    pointer-events: none;
}