:root {
    --csstools-color-scheme--light: initial;
    /*color-scheme: light dark;*/
    --message-text-size: 10pt;
    --caption-panel-height: 4rem;
    --wallpaper-url: url(../img/bkg/a00.png);
    --wallpaper-repeat: repeat;
    --wallpaper-blur: 0px;
    --wallpaper-invert: 0;
    --wallpaper-brightness: 1;
    --wallpaper-size: contain;
    --wallpaper-position: center;
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) #181818;
    --clr-bright: var(--csstools-light-dark-toggle--0, #fff);
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) #fff;
    --clr-dark: var(--csstools-light-dark-toggle--1, #000);
    --clr-transparent: transparent;
    --clr-std-gray: grey;
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) #3f3f3f;
    --clr-std-ltgray: var(--csstools-light-dark-toggle--2, silver);
    --clr-std-teal: teal;
    --clr-std-grey: grey;
    --clr-std-orange: orange;
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) #0e6dba;
    --clr-primary-accent: var(--csstools-light-dark-toggle--3, #2094f3);
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #116ab4;
    --clr-primary-accent-hover: var(--csstools-light-dark-toggle--4, #0a6ebd);
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) rgba(3, 7, 12, .25);
    --clr-primary-accent-focus-shadow: var(--csstools-light-dark-toggle--5, rgba(33, 150, 243, .25));
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgba(20, 70, 120, .3);
    --clr-primary-accent-transparent-medium: var(--csstools-light-dark-toggle--6, rgba(33, 150, 243, .3));
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) #1571c1;
    --clr-primary-action: var(--csstools-light-dark-toggle--7, #1e89e6);
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) #0037b8;
    --clr-primary-action-hover: var(--csstools-light-dark-toggle--8, #2962ff);
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) #006570;
    --clr-secondary-accent: var(--csstools-light-dark-toggle--9, #0097a8);
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) #78a0be;
    --clr-primary-light-blue: var(--csstools-light-dark-toggle--10, #bcdefb);
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #0379b5;
    --clr-light-blue-accent: var(--csstools-light-dark-toggle--11, #0398e2);
    --clr-body-background: var(--clr-std-ltgray);
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #999;
    --clr-text-primary: var(--csstools-light-dark-toggle--12, #666);
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #8a8a8a;
    --clr-text-secondary: var(--csstools-light-dark-toggle--13, #757575);
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #787878;
    --clr-text-tertiary: var(--csstools-light-dark-toggle--14, #999);
    --clr-text-tertiary-activated: #888;
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #555;
    --clr-text-placeholder: var(--csstools-light-dark-toggle--15, #bbb);
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #777;
    --clr-text-disabled: var(--csstools-light-dark-toggle--16, #888);
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #555;
    --clr-border-light: var(--csstools-light-dark-toggle--17, #ccc);
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #444;
    --clr-border-muted: var(--csstools-light-dark-toggle--18, #ddd);
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #222;
    --clr-background-off-white: var(--csstools-light-dark-toggle--19, #fafafa);
    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #0f0f0f;
    --clr-background-light-gray: var(--csstools-light-dark-toggle--20, #f0f0f0);
    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #222;
    --clr-background-extra-light-gray: var(--csstools-light-dark-toggle--21, #eee);
    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #202c33;
    --clr-background-blue-gray-50: var(--csstools-light-dark-toggle--22, #edf0f2);
    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) #182124;
    --clr-background-blue-gray-75: var(--csstools-light-dark-toggle--23, #e1e8eb);
    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) #20272a;
    --clr-background-blue-gray-100: var(--csstools-light-dark-toggle--24, #cfd8dc);
    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) #354146;
    --clr-background-blue-gray-300: var(--csstools-light-dark-toggle--25, #b0bec5);
    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #22222d;
    --clr-blue-wash-light: var(--csstools-light-dark-toggle--26, #f0f0ff);
    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #123550;
    --clr-blue-wash-medium: var(--csstools-light-dark-toggle--27, #d8e8ff);
    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #072f45;
    --clr-primary-wash: var(--csstools-light-dark-toggle--28, #e3f2fd);
    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #1a2c44;
    --clr-indigo-50: var(--csstools-light-dark-toggle--29, #e8eaf6);
    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #931f1f;
    --clr-danger-text: var(--csstools-light-dark-toggle--30, #d33131);
    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #c10;
    --clr-danger-text-hover: var(--csstools-light-dark-toggle--31, #f44034);
    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #933;
    --clr-error-text-muted: var(--csstools-light-dark-toggle--32, #c66);
    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) #ff6675;
    --clr-error-bg-light: var(--csstools-light-dark-toggle--33, #ffccd1);
    --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #ff334e;
    --clr-error-border-light: var(--csstools-light-dark-toggle--34, #ffbdc6);
    --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) #de2323;
    --clr-error-text-dark: var(--csstools-light-dark-toggle--35, #b51c1c);
    --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #d81b0e;
    --clr-error-icon: var(--csstools-light-dark-toggle--36, #ef5552);
    --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #808020;
    --clr-warning-accent: var(--csstools-light-dark-toggle--37, #ffc107);
    --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #00060c;
    --clr-warning-bg-light: var(--csstools-light-dark-toggle--38, #fff9c4);
    --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #000a2b;
    --clr-warning-border-light: var(--csstools-light-dark-toggle--39, #fff59d);
    --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #a08356;
    --clr-warning-text-dark: var(--csstools-light-dark-toggle--40, #6d4c41);
    --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) #b48204;
    --clr-warning-icon: var(--csstools-light-dark-toggle--41, #fbc02d);
    --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #010a0e;
    --clr-info-bg-light: var(--csstools-light-dark-toggle--42, #e1f5fe);
    --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #001824;
    --clr-info-border-light: var(--csstools-light-dark-toggle--43, #b3e5fc);
    --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #00151f;
    --clr-info-text-dark: var(--csstools-light-dark-toggle--44, #0288d1);
    --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #12152f;
    --clr-header-stripe-bg: var(--csstools-light-dark-toggle--45, #3949ab);
    --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, .3);
    --clr-scrollbar-thumb: var(--csstools-light-dark-toggle--46, rgba(0, 0, 0, .3));
    --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) rgba(0, 0, 0, .1);
    --clr-scrollbar-track: var(--csstools-light-dark-toggle--47, hsla(0, 0%, 100%, .1));
    --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) #0a0a0a;
    --clr-menu-item-hover-bg: var(--csstools-light-dark-toggle--48, #f5f5f5);
    --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) hsla(0, 0%, 6%, .85);
    --clr-alert-overlay-bg: var(--csstools-light-dark-toggle--49, hsla(0, 0%, 94%, .85));
    --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #027db6;
    --clr-verified-accent: var(--csstools-light-dark-toggle--50, #02a6f2);
    --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #598830;
    --clr-staff-accent: var(--csstools-light-dark-toggle--51, #689f38);
    --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #cccd;
    --clr-badge-inv: var(--csstools-light-dark-toggle--52, #fffd);
    --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #2f3e43;
    --clr-cyan-50: var(--csstools-light-dark-toggle--53, #e0f7fa);
    --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) rgba(0, 0, 0, .9);
    --clr-overlay-white-strong: var(--csstools-light-dark-toggle--54, hsla(0, 0%, 100%, .9));
    --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) #444;
    --clr-gray-medium-bg: var(--csstools-light-dark-toggle--55, #777);
    --clr-toast-bg: #333;
    --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #aaa;
    --clr-toast-text: var(--csstools-light-dark-toggle--56, #eee);
    --clr-online: #4caf50;
    --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) #999;
    --clr-offline: var(--csstools-light-dark-toggle--57, #ccc);
    --clr-shadow-input-underline: rgba(0, 0, 0, .1);
    --clr-shadow-hr-inset: rgba(0, 0, 0, .15);
    --clr-shadow-scrollbar-track-webkit: rgba(0, 0, 0, .2);
    --clr-shadow-button: rgba(0, 0, 0, .25);
    --clr-shadow-button-inset-active: rgba(0, 0, 0, .125);
    --clr-shadow-dialog: rgba(0, 0, 0, .45);
    --clr-shadow-panel-divider: rgba(0, 0, 0, .1);
    --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #333;
    --clr-shadow-gray-strong: var(--csstools-light-dark-toggle--58, var(--clr-std-gray));
    --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) #333;
    --clr-shadow-silver-subtle: var(--csstools-light-dark-toggle--59, var(--clr-std-ltgray));
    --clr-shadow-bubble-drop: rgba(0, 0, 0, .3);
    --clr-button-primary-bg: var(--clr-primary-action);
    --clr-button-primary-text: var(--clr-bright);
    --clr-button-primary-hover-bg: var(--clr-primary-action-hover);
    --clr-button-secondary-bg: var(--clr-bright);
    --clr-button-secondary-text: var(--clr-primary-accent);
    --clr-button-secondary-hover-bg: var(--clr-primary-wash);
    --clr-button-outline-text: var(--clr-primary-accent);
    --clr-button-outline-border: var(--clr-std-ltgray);
    --clr-button-outline-hover-bg: var(--clr-indigo-50);
    --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #d74742;
    --clr-button-danger-bg: var(--csstools-light-dark-toggle--60, #ec645f);
    --clr-button-danger-text: var(--clr-bright);
    --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #a55;
    --clr-button-danger-hover-bg: var(--csstools-light-dark-toggle--61, #f77);
    --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #3f983e;
    --clr-button-positive-bg: var(--csstools-light-dark-toggle--62, #71c46f);
    --clr-button-positive-text: var(--clr-bright);
    --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #6ec26e;
    --clr-button-positive-hover-bg: var(--csstools-light-dark-toggle--63, #7fed7f);
    --clr-input-text: var(--clr-text-primary);
    --clr-input-border: var(--clr-border-light);
    --clr-input-border-focus: var(--clr-primary-accent);
    --clr-input-shadow: var(--clr-shadow-input-underline);
    --clr-input-shadow-focus: var(--clr-primary-accent-focus-shadow);
    --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) #561010;
    --clr-input-invalid-border: var(--csstools-light-dark-toggle--64, #e57171);
    --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) #1a0c0c40;
    --clr-input-invalid-shadow: var(--csstools-light-dark-toggle--65, #e5737340);
    --clr-input-placeholder-text: var(--clr-text-placeholder);
    --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #3e5c1f;
    --clr-bubble-left-bg: var(--csstools-light-dark-toggle--66, #c4e0a3);
    --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #2c4517;
    --clr-bubble-left-bg-flash: var(--csstools-light-dark-toggle--67, #94a97c);
    --clr-bubble-right-bg: var(--clr-background-off-white);
    --clr-bubble-right-bg-flash: var(--clr-border-light);
    --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) #bbc;
    --clr-bubble-text: var(--csstools-light-dark-toggle--68, #212121);
    --clr-bubble-meta-text: var(--clr-text-primary);
    --clr-bubble-meta-deleted-bg: var(--clr-primary-wash);
    --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) rgba(40, 40, 40, .8);
    --clr-bubble-meta-date-bg: var(--csstools-light-dark-toggle--69, hsla(0, 0%, 100%, .8));
    --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #888;
    --clr-bubble-timestamp-text: var(--csstools-light-dark-toggle--70, #777);
    --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #666;
    --clr-bubble-author-text: var(--csstools-light-dark-toggle--71, #777);
    --clr-reply-quote-border: var(--clr-light-blue-accent);
    --clr-reply-quote-text: var(--clr-text-primary);
    --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) rgba(0, 0, 0, .4);
    --clr-reply-quote-left-bg: var(--csstools-light-dark-toggle--72, hsla(0, 0%, 100%, .4));
    --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #c4c4c42e;
    --clr-reply-quote-right-bg: var(--csstools-light-dark-toggle--73, #8080801f);
    --clr-reply-quote-preview-bg: var(--clr-background-off-white);
    --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) #171717;
    --clr-badge-default-bg: var(--csstools-light-dark-toggle--74, #e8e8e8);
    --clr-badge-default-text: var(--clr-text-primary);
    --clr-badge-default-border: var(--clr-std-ltgray);
    --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) #131;
    --clr-badge-green-bg: var(--csstools-light-dark-toggle--75, #efe);
    --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #363;
    --clr-badge-green-text: var(--csstools-light-dark-toggle--76, #383);
    --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #242;
    --clr-badge-green-border: var(--csstools-light-dark-toggle--77, #aca);
    --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) #331;
    --clr-badge-yellow-bg: var(--csstools-light-dark-toggle--78, #ffe);
    --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) #660;
    --clr-badge-yellow-text: var(--csstools-light-dark-toggle--79, #660);
    --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #552;
    --clr-badge-yellow-border: var(--csstools-light-dark-toggle--80, #cc9);
    --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) #224;
    --clr-badge-blue-bg: var(--csstools-light-dark-toggle--81, #f0f0ff);
    --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #447;
    --clr-badge-blue-text: var(--csstools-light-dark-toggle--82, #339);
    --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #336;
    --clr-badge-blue-border: var(--csstools-light-dark-toggle--83, #aad);
    --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #522;
    --clr-badge-red-bg: var(--csstools-light-dark-toggle--84, #fee);
    --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) #744;
    --clr-badge-red-text: var(--csstools-light-dark-toggle--85, #933);
    --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #633;
    --clr-badge-red-border: var(--csstools-light-dark-toggle--86, #c99);
    --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #535;
    --clr-badge-magenta-bg: var(--csstools-light-dark-toggle--87, #fef);
    --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #747;
    --clr-badge-magenta-text: var(--csstools-light-dark-toggle--88, #939);
    --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #636;
    --clr-badge-magenta-border: var(--csstools-light-dark-toggle--89, #c9c);
    --clr-chip-bg: var(--clr-background-extra-light-gray);
    --clr-chip-invalid-text: var(--clr-error-text-muted);
    --clr-chip-invalid-bg: var(--clr-badge-red-bg);
    --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #555;
    --clr-chip-remove-icon-bg: var(--csstools-light-dark-toggle--90, #aaa);
    --clr-chip-remove-icon-text: var(--clr-background-extra-light-gray);
    --clr-chip-remove-icon-hover-bg: var(--clr-text-placeholder);
    --clr-chip-remove-icon-hover-text: var(--clr-bright);
    --clr-tabbar-bg: var(--clr-background-extra-light-gray);
    --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #165aa0;
    --clr-tabbar-inactive-text: var(--csstools-light-dark-toggle--91, rgba(33, 150, 243, .6));
    --clr-tabbar-active-text: var(--clr-primary-accent);
    --clr-tabbar-inactive-border: var(--clr-border-light);
    --clr-tabbar-active-border: var(--clr-primary-accent);
    --clr-highlight-text: var(--clr-std-teal);
    --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #205e60;
    --clr-highlight-preview-text: var(--csstools-light-dark-toggle--92, #5f9ea0);
    --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #0c0c0c;
    --clr-spinner-track: var(--csstools-light-dark-toggle--93, #f3f3f3);
    --clr-spinner-active: var(--clr-primary-action);
    --clr-cropper-bounding-box-border: var(--clr-primary-action);
    --clr-cropper-bounding-box-bg: var(--clr-text-tertiary);
    --clr-cropper-cutout-border: var(--clr-text-tertiary);
    --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) rgba(25, 10, 0, .66);
    --clr-cropper-cutout-shadow: var(--csstools-light-dark-toggle--94, rgba(230, 246, 255, .66));
    --clr-audio-bg: var(--clr-background-extra-light-gray);
    --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) hsla(0, 7%, 57%, .8);
    --clr-audio-icon: var(--csstools-light-dark-toggle--95, hsla(180, 7%, 43%, .8));
    --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) hsla(0, 0%, 40%, .75);
    --clr-audio-icon-disabled: var(--csstools-light-dark-toggle--96, hsla(0, 0%, 60%, .75));
    --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) hsla(0, 0%, 60%, .75);
    --clr-audio-timer-text: var(--csstools-light-dark-toggle--97, hsla(0, 0%, 40%, .75));
    --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #1a1a1a;
    --clr-pinned-menu-bg: var(--csstools-light-dark-toggle--98, #f8f8f8);
    --clr-drag-n-drop-border: var(--clr-std-grey);
    --clr-drag-n-drop-text: var(--clr-std-grey);
    --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) rgba(0, 0, 0, .95);
    --clr-drag-n-drop-bg: var(--csstools-light-dark-toggle--99, hsla(0, 0%, 100%, .95));
    --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) rgba(0, 0, 0, .95);
    --clr-drag-n-drop-outline: var(--csstools-light-dark-toggle--100, hsla(0, 0%, 100%, .95));
    --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) #dcdcdccc;
    --clr-lettertile-default-text: var(--csstools-light-dark-toggle--101, #fafafacc);
    --clr-lettertile-hover-text: var(--clr-bright);
    --clr-lt-bg-0: #ef9a9a;
    --clr-lt-bg-1: #90caf9;
    --clr-lt-bg-2: #b0bec4;
    --clr-lt-bg-3: #b49edb;
    --clr-lt-bg-4: #ffa98f;
    --clr-lt-bg-5: #a4d5a6;
    --clr-lt-bg-6: #ededed;
    --clr-lt-bg-7: #e6ee9b;
    --clr-lt-bg-8: #c4e0a3;
    --clr-lt-bg-9: #f0e57f;
    --clr-lt-bg-10: #f490b1;
    --clr-lt-bg-11: #a0a8da;
    --clr-lt-bg-12: #ffdf80;
    --clr-lt-bg-13: #bcaaa4;
    --clr-lt-bg-14: #80deea;
    --clr-lt-bg-15: #cd92d8;
    --clr-dk-bg-0: #c72929;
    --clr-dk-bg-1: #ad1457;
    --clr-dk-bg-2: #681b98;
    --clr-dk-bg-3: #4527a0;
    --clr-dk-bg-4: #293594;
    --clr-dk-bg-5: #1565c1;
    --clr-dk-bg-6: #0277bb;
    --clr-dk-bg-7: #00838f;
    --clr-dk-bg-8: #006b5f;
    --clr-dk-bg-9: #2f7f33;
    --clr-dk-bg-10: #54892f;
    --clr-dk-bg-11: #9e9e24;
    --clr-dk-bg-12: #f9a824;
    --clr-dk-bg-13: #ff9100;
    --clr-dk-bg-14: #f06c00;
    --clr-dk-bg-15: #d54215;
    --clr-lt-fg-0: var(--clr-lt-bg-0);
    --clr-lt-fg-1: var(--clr-lt-bg-1);
    --clr-lt-fg-2: var(--clr-lt-bg-2);
    --clr-lt-fg-3: var(--clr-lt-bg-3);
    --clr-lt-fg-4: var(--clr-lt-bg-4);
    --clr-lt-fg-5: var(--clr-lt-bg-5);
    --clr-lt-fg-6: var(--clr-lt-bg-6);
    --clr-lt-fg-7: var(--clr-lt-bg-7);
    --clr-lt-fg-8: var(--clr-lt-bg-8);
    --clr-lt-fg-9: var(--clr-lt-bg-9);
    --clr-lt-fg-10: var(--clr-lt-bg-10);
    --clr-lt-fg-11: var(--clr-lt-bg-11);
    --clr-lt-fg-12: var(--clr-lt-bg-12);
    --clr-lt-fg-13: var(--clr-lt-bg-13);
    --clr-lt-fg-14: var(--clr-lt-bg-14);
    --clr-lt-fg-15: var(--clr-lt-bg-15);
    --clr-dk-fg-0: var(--clr-dk-bg-0);
    --clr-dk-fg-1: var(--clr-dk-bg-1);
    --clr-dk-fg-2: var(--clr-dk-bg-2);
    --clr-dk-fg-3: var(--clr-dk-bg-3);
    --clr-dk-fg-4: var(--clr-dk-bg-4);
    --clr-dk-fg-5: var(--clr-dk-bg-5);
    --clr-dk-fg-6: var(--clr-dk-bg-6);
    --clr-dk-fg-7: var(--clr-dk-bg-7);
    --clr-dk-fg-8: var(--clr-dk-bg-8);
    --clr-dk-fg-9: var(--clr-dk-bg-9);
    --clr-dk-fg-10: var(--clr-dk-bg-10);
    --clr-dk-fg-11: var(--clr-dk-bg-11);
    --clr-dk-fg-12: var(--clr-dk-bg-12);
    --clr-dk-fg-13: var(--clr-dk-bg-13);
    --clr-dk-fg-14: var(--clr-dk-bg-14);
    --clr-dk-fg-15: var(--clr-dk-bg-15);

    & * {
        --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) #181818;
        --clr-bright: var(--csstools-light-dark-toggle--0, #fff);
        --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) #fff;
        --clr-dark: var(--csstools-light-dark-toggle--1, #000);
        --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) #3f3f3f;
        --clr-std-ltgray: var(--csstools-light-dark-toggle--2, silver);
        --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) #0e6dba;
        --clr-primary-accent: var(--csstools-light-dark-toggle--3, #2094f3);
        --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #116ab4;
        --clr-primary-accent-hover: var(--csstools-light-dark-toggle--4, #0a6ebd);
        --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) rgba(3, 7, 12, .25);
        --clr-primary-accent-focus-shadow: var(--csstools-light-dark-toggle--5, rgba(33, 150, 243, .25));
        --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgba(20, 70, 120, .3);
        --clr-primary-accent-transparent-medium: var(--csstools-light-dark-toggle--6, rgba(33, 150, 243, .3));
        --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) #1571c1;
        --clr-primary-action: var(--csstools-light-dark-toggle--7, #1e89e6);
        --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) #0037b8;
        --clr-primary-action-hover: var(--csstools-light-dark-toggle--8, #2962ff);
        --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) #006570;
        --clr-secondary-accent: var(--csstools-light-dark-toggle--9, #0097a8);
        --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) #78a0be;
        --clr-primary-light-blue: var(--csstools-light-dark-toggle--10, #bcdefb);
        --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #0379b5;
        --clr-light-blue-accent: var(--csstools-light-dark-toggle--11, #0398e2);
        --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #999;
        --clr-text-primary: var(--csstools-light-dark-toggle--12, #666);
        --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #8a8a8a;
        --clr-text-secondary: var(--csstools-light-dark-toggle--13, #757575);
        --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #787878;
        --clr-text-tertiary: var(--csstools-light-dark-toggle--14, #999);
        --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #555;
        --clr-text-placeholder: var(--csstools-light-dark-toggle--15, #bbb);
        --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #777;
        --clr-text-disabled: var(--csstools-light-dark-toggle--16, #888);
        --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #555;
        --clr-border-light: var(--csstools-light-dark-toggle--17, #ccc);
        --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #444;
        --clr-border-muted: var(--csstools-light-dark-toggle--18, #ddd);
        --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #222;
        --clr-background-off-white: var(--csstools-light-dark-toggle--19, #fafafa);
        --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #0f0f0f;
        --clr-background-light-gray: var(--csstools-light-dark-toggle--20, #f0f0f0);
        --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #222;
        --clr-background-extra-light-gray: var(--csstools-light-dark-toggle--21, #eee);
        --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #202c33;
        --clr-background-blue-gray-50: var(--csstools-light-dark-toggle--22, #edf0f2);
        --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) #182124;
        --clr-background-blue-gray-75: var(--csstools-light-dark-toggle--23, #e1e8eb);
        --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) #20272a;
        --clr-background-blue-gray-100: var(--csstools-light-dark-toggle--24, #cfd8dc);
        --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) #354146;
        --clr-background-blue-gray-300: var(--csstools-light-dark-toggle--25, #b0bec5);
        --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #22222d;
        --clr-blue-wash-light: var(--csstools-light-dark-toggle--26, #f0f0ff);
        --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #123550;
        --clr-blue-wash-medium: var(--csstools-light-dark-toggle--27, #d8e8ff);
        --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #072f45;
        --clr-primary-wash: var(--csstools-light-dark-toggle--28, #e3f2fd);
        --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #1a2c44;
        --clr-indigo-50: var(--csstools-light-dark-toggle--29, #e8eaf6);
        --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #931f1f;
        --clr-danger-text: var(--csstools-light-dark-toggle--30, #d33131);
        --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #c10;
        --clr-danger-text-hover: var(--csstools-light-dark-toggle--31, #f44034);
        --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #933;
        --clr-error-text-muted: var(--csstools-light-dark-toggle--32, #c66);
        --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) #ff6675;
        --clr-error-bg-light: var(--csstools-light-dark-toggle--33, #ffccd1);
        --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #ff334e;
        --clr-error-border-light: var(--csstools-light-dark-toggle--34, #ffbdc6);
        --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) #de2323;
        --clr-error-text-dark: var(--csstools-light-dark-toggle--35, #b51c1c);
        --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #d81b0e;
        --clr-error-icon: var(--csstools-light-dark-toggle--36, #ef5552);
        --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #808020;
        --clr-warning-accent: var(--csstools-light-dark-toggle--37, #ffc107);
        --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #00060c;
        --clr-warning-bg-light: var(--csstools-light-dark-toggle--38, #fff9c4);
        --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #000a2b;
        --clr-warning-border-light: var(--csstools-light-dark-toggle--39, #fff59d);
        --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #a08356;
        --clr-warning-text-dark: var(--csstools-light-dark-toggle--40, #6d4c41);
        --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) #b48204;
        --clr-warning-icon: var(--csstools-light-dark-toggle--41, #fbc02d);
        --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #010a0e;
        --clr-info-bg-light: var(--csstools-light-dark-toggle--42, #e1f5fe);
        --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #001824;
        --clr-info-border-light: var(--csstools-light-dark-toggle--43, #b3e5fc);
        --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #00151f;
        --clr-info-text-dark: var(--csstools-light-dark-toggle--44, #0288d1);
        --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #12152f;
        --clr-header-stripe-bg: var(--csstools-light-dark-toggle--45, #3949ab);
        --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, .3);
        --clr-scrollbar-thumb: var(--csstools-light-dark-toggle--46, rgba(0, 0, 0, .3));
        --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) rgba(0, 0, 0, .1);
        --clr-scrollbar-track: var(--csstools-light-dark-toggle--47, hsla(0, 0%, 100%, .1));
        --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) #0a0a0a;
        --clr-menu-item-hover-bg: var(--csstools-light-dark-toggle--48, #f5f5f5);
        --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) hsla(0, 0%, 6%, .85);
        --clr-alert-overlay-bg: var(--csstools-light-dark-toggle--49, hsla(0, 0%, 94%, .85));
        --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #027db6;
        --clr-verified-accent: var(--csstools-light-dark-toggle--50, #02a6f2);
        --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #598830;
        --clr-staff-accent: var(--csstools-light-dark-toggle--51, #689f38);
        --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #cccd;
        --clr-badge-inv: var(--csstools-light-dark-toggle--52, #fffd);
        --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #2f3e43;
        --clr-cyan-50: var(--csstools-light-dark-toggle--53, #e0f7fa);
        --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) rgba(0, 0, 0, .9);
        --clr-overlay-white-strong: var(--csstools-light-dark-toggle--54, hsla(0, 0%, 100%, .9));
        --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) #444;
        --clr-gray-medium-bg: var(--csstools-light-dark-toggle--55, #777);
        --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #aaa;
        --clr-toast-text: var(--csstools-light-dark-toggle--56, #eee);
        --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) #999;
        --clr-offline: var(--csstools-light-dark-toggle--57, #ccc);
        --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #333;
        --clr-shadow-gray-strong: var(--csstools-light-dark-toggle--58, var(--clr-std-gray));
        --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) #333;
        --clr-shadow-silver-subtle: var(--csstools-light-dark-toggle--59, var(--clr-std-ltgray));
        --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #d74742;
        --clr-button-danger-bg: var(--csstools-light-dark-toggle--60, #ec645f);
        --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #a55;
        --clr-button-danger-hover-bg: var(--csstools-light-dark-toggle--61, #f77);
        --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #3f983e;
        --clr-button-positive-bg: var(--csstools-light-dark-toggle--62, #71c46f);
        --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #6ec26e;
        --clr-button-positive-hover-bg: var(--csstools-light-dark-toggle--63, #7fed7f);
        --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) #561010;
        --clr-input-invalid-border: var(--csstools-light-dark-toggle--64, #e57171);
        --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) #1a0c0c40;
        --clr-input-invalid-shadow: var(--csstools-light-dark-toggle--65, #e5737340);
        --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #3e5c1f;
        --clr-bubble-left-bg: var(--csstools-light-dark-toggle--66, #c4e0a3);
        --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #2c4517;
        --clr-bubble-left-bg-flash: var(--csstools-light-dark-toggle--67, #94a97c);
        --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) #bbc;
        --clr-bubble-text: var(--csstools-light-dark-toggle--68, #212121);
        --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) rgba(40, 40, 40, .8);
        --clr-bubble-meta-date-bg: var(--csstools-light-dark-toggle--69, hsla(0, 0%, 100%, .8));
        --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #888;
        --clr-bubble-timestamp-text: var(--csstools-light-dark-toggle--70, #777);
        --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #666;
        --clr-bubble-author-text: var(--csstools-light-dark-toggle--71, #777);
        --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) rgba(0, 0, 0, .4);
        --clr-reply-quote-left-bg: var(--csstools-light-dark-toggle--72, hsla(0, 0%, 100%, .4));
        --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #c4c4c42e;
        --clr-reply-quote-right-bg: var(--csstools-light-dark-toggle--73, #8080801f);
        --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) #171717;
        --clr-badge-default-bg: var(--csstools-light-dark-toggle--74, #e8e8e8);
        --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) #131;
        --clr-badge-green-bg: var(--csstools-light-dark-toggle--75, #efe);
        --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #363;
        --clr-badge-green-text: var(--csstools-light-dark-toggle--76, #383);
        --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #242;
        --clr-badge-green-border: var(--csstools-light-dark-toggle--77, #aca);
        --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) #331;
        --clr-badge-yellow-bg: var(--csstools-light-dark-toggle--78, #ffe);
        --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) #660;
        --clr-badge-yellow-text: var(--csstools-light-dark-toggle--79, #660);
        --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #552;
        --clr-badge-yellow-border: var(--csstools-light-dark-toggle--80, #cc9);
        --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) #224;
        --clr-badge-blue-bg: var(--csstools-light-dark-toggle--81, #f0f0ff);
        --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #447;
        --clr-badge-blue-text: var(--csstools-light-dark-toggle--82, #339);
        --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #336;
        --clr-badge-blue-border: var(--csstools-light-dark-toggle--83, #aad);
        --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #522;
        --clr-badge-red-bg: var(--csstools-light-dark-toggle--84, #fee);
        --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) #744;
        --clr-badge-red-text: var(--csstools-light-dark-toggle--85, #933);
        --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #633;
        --clr-badge-red-border: var(--csstools-light-dark-toggle--86, #c99);
        --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #535;
        --clr-badge-magenta-bg: var(--csstools-light-dark-toggle--87, #fef);
        --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #747;
        --clr-badge-magenta-text: var(--csstools-light-dark-toggle--88, #939);
        --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #636;
        --clr-badge-magenta-border: var(--csstools-light-dark-toggle--89, #c9c);
        --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #555;
        --clr-chip-remove-icon-bg: var(--csstools-light-dark-toggle--90, #aaa);
        --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #165aa0;
        --clr-tabbar-inactive-text: var(--csstools-light-dark-toggle--91, rgba(33, 150, 243, .6));
        --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #205e60;
        --clr-highlight-preview-text: var(--csstools-light-dark-toggle--92, #5f9ea0);
        --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #0c0c0c;
        --clr-spinner-track: var(--csstools-light-dark-toggle--93, #f3f3f3);
        --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) rgba(25, 10, 0, .66);
        --clr-cropper-cutout-shadow: var(--csstools-light-dark-toggle--94, rgba(230, 246, 255, .66));
        --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) hsla(0, 7%, 57%, .8);
        --clr-audio-icon: var(--csstools-light-dark-toggle--95, hsla(180, 7%, 43%, .8));
        --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) hsla(0, 0%, 40%, .75);
        --clr-audio-icon-disabled: var(--csstools-light-dark-toggle--96, hsla(0, 0%, 60%, .75));
        --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) hsla(0, 0%, 60%, .75);
        --clr-audio-timer-text: var(--csstools-light-dark-toggle--97, hsla(0, 0%, 40%, .75));
        --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #1a1a1a;
        --clr-pinned-menu-bg: var(--csstools-light-dark-toggle--98, #f8f8f8);
        --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) rgba(0, 0, 0, .95);
        --clr-drag-n-drop-bg: var(--csstools-light-dark-toggle--99, hsla(0, 0%, 100%, .95));
        --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) rgba(0, 0, 0, .95);
        --clr-drag-n-drop-outline: var(--csstools-light-dark-toggle--100, hsla(0, 0%, 100%, .95));
        --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) #dcdcdccc;
        --clr-lettertile-default-text: var(--csstools-light-dark-toggle--101, #fafafacc)
    }
}

/*@media (prefers-color-scheme: dark) {*/
/*    :root {*/
/*        --csstools-color-scheme--light:*/
/*    }*/
/*}*/

* {
    box-sizing: border-box;
    font-family: Roboto, Arial, sans-serif;
    margin: 0;
    padding: 0;
    scrollbar-color: var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);
    scrollbar-width: thin;
    text-rendering: optimizeLegibility
}

body, html {
    background-color: var(--clr-body-background);
    box-shadow: inset 0 10rem var(--clr-header-stripe-bg);
    color: var(--clr-text-primary);
    font-size: 10pt;
    height: 100%;
    overflow: hidden;
    width: 100%
}

tt {
    font-family: Roboto Mono, Courier, monospace
}

a {
    color: var(--clr-primary-accent);
    text-decoration: none
}

a:focus, a:hover {
    color: var(--clr-primary-accent-hover);
    text-decoration: underline
}

a.danger {
    color: var(--clr-danger-text)
}

a.danger:focus, a.danger:hover {
    color: var(--clr-danger-text-hover)
}

a.gray:focus, a.gray:hover {
    color: var(--clr-text-tertiary)
}

form {
    line-height: 1.5;
    padding: .5rem .75rem
}

form, label {
    font-size: 1.1rem
}

label {
    margin-right: auto
}

label.small {
    font-size: .95rem
}

label.large, label.small {
    color: var(--clr-primary-action)
}

label.large {
    font-size: 1.1rem
}

label.invalid {
    color: var(--clr-danger-text)
}

img.avatar {
    border-radius: 50%;
    height: 100%;
    width: 100%
}

img.avatar.self {
    padding: 7%
}

button {
    border: 1px solid var(--clr-transparent);
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 var(--clr-shadow-button);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 400;
    height: 2.2rem;
    line-height: 2.2rem;
    margin: 0 .35rem;
    min-width: 5rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap
}

button[disabled], html input[disabled] {
    box-shadow: none;
    cursor: default;
    filter: grayscale(50%);
    opacity: .65
}

button.round {
    border-radius: 50%;
    box-shadow: 0 2px .5rem 0 var(--clr-shadow-button);
    height: 3rem;
    line-height: 3.5rem;
    margin: 0;
    outline: none;
    padding: 0;
    width: 3rem;
    z-index: 2
}

button.round.small {
    box-shadow: 0 2px .35rem 0 var(--clr-shadow-button);
    height: 2rem;
    line-height: 2rem;
    width: 2rem
}

button:active:not([disabled]), button:hover:not([disabled]) {
    color: var(--clr-bright)
}

button:active {
    box-shadow: inset 0 3px .5rem var(--clr-shadow-button-inset-active)
}

button:active.round.small {
    box-shadow: inset 0 2px .35rem var(--clr-shadow-button-inset-active)
}

button.primary {
    background-color: var(--clr-button-primary-bg);
    color: var(--clr-button-primary-text)
}

button.primary:active:not([disabled]), button.primary:hover:not([disabled]) {
    background-color: var(--clr-button-primary-hover-bg)
}

button.secondary {
    background-color: var(--clr-button-secondary-bg);
    color: var(--clr-button-secondary-text)
}

button.secondary:active:not([disabled]), button.secondary:hover:not([disabled]) {
    background-color: var(--clr-button-secondary-hover-bg)
}

button.outline {
    background-color: var(--clr-transparent);
    border: 1px solid var(--clr-button-outline-border);
    box-shadow: none;
    color: var(--clr-button-outline-text)
}

button.outline:active:not([disabled]), button.outline:hover:not([disabled]) {
    background-color: var(--clr-button-outline-hover-bg);
    color: var(--clr-button-outline-text)
}

button.danger {
    background-color: var(--clr-button-danger-bg);
    color: var(--clr-button-danger-text)
}

button.danger:active:not([disabled]), button.danger:hover:not([disabled]) {
    background-color: var(--clr-button-danger-hover-bg)
}

button.positive {
    background-color: var(--clr-button-positive-bg);
    color: var(--clr-button-positive-text)
}

button.positive:active:not([disabled]), button.positive:hover:not([disabled]) {
    background-color: var(--clr-button-positive-hover-bg)
}

input, textarea {
    background: var(--clr-transparent);
    border: none;
    color: var(--clr-input-text);
    font-family: inherit;
    font-size: 1.1rem;
    margin: .25rem 0;
    outline: none;
    padding: 0 .125rem
}

input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], textarea {
    border-bottom: 1px solid var(--clr-input-border);
    box-shadow: 0 1px 0 var(--clr-input-shadow);
    height: 2.5rem;
    transition: all .1s ease-in-out, height 0s
}

input[type=email], input[type=password], input[type=tel], input[type=text], textarea {
    width: 100%
}

input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, textarea:focus {
    border-bottom: 1px solid var(--clr-input-border-focus);
    box-shadow: 0 1px 0 var(--clr-input-shadow-focus)
}

input[type=email].invalid, input[type=password].invalid, input[type=search].invalid, input[type=tel].invalid, input[type=text].invalid, textarea.invalid {
    border-bottom: 1px solid var(--clr-input-invalid-border);
    box-shadow: 0 1px 0 var(--clr-input-invalid-shadow)
}

input[type=email]::placeholder, input[type=password]::placeholder, input[type=search]::placeholder, input[type=tel]::placeholder, input[type=text]::placeholder, textarea::placeholder {
    color: var(--clr-input-placeholder-text);
    font-weight: lighter
}

input[type=password].with-icon-right, input[type=text].with-icon-right {
    margin-right: -2rem;
    padding-right: 2rem
}

input[type=password].with-icon-left, input[type=text].with-icon-left {
    margin-left: -1.45rem;
    padding-left: 1.75rem
}

textarea {
    padding-top: .45rem;
    resize: none
}

input[type=range] {
    width: 90%
}

option {
    padding: 0
}

datalist {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%
}

::-webkit-scrollbar {
    width: .6rem
}

::-webkit-scrollbar-track {
    background-color: var(--clr-scrollbar-track);
    -webkit-box-shadow: inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit);
    box-shadow: inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit)
}

::-webkit-scrollbar-thumb {
    background-color: var(--clr-scrollbar-thumb)
}

ul.menu {
    background-color: var(--clr-bright);
    border-radius: .2rem;
    box-shadow: 0 1px 6px var(--clr-shadow-dialog);
    list-style: none;
    padding-bottom: .35rem;
    padding-top: .35rem;
    position: absolute;
    width: 12rem;
    z-index: 4
}

ul.menu > li {
    cursor: pointer;
    padding: .75rem .75rem .75rem 1.25rem
}

ul.menu > li:hover {
    background-color: var(--clr-menu-item-hover-bg)
}

ul.menu > li.separator {
    height: 1px;
    margin: 2px;
    padding: 0
}

ul.menu > li.separator, ul.menu > li.separator:hover {
    background-color: var(--clr-border-light)
}

ul.menu > li.disabled {
    opacity: .6;
    pointer-events: none
}

.menuTrigger {
    background-color: inherit;
    border-radius: .7rem;
    height: 1.4rem;
    line-height: 1.4rem;
    opacity: 0;
    position: absolute;
    right: .25rem;
    text-align: center;
    user-select: none;
    width: 1.4rem
}

.menuTrigger a {
    color: var(--clr-text-secondary)
}

li .menuTrigger {
    top: .25rem
}

li:hover .menuTrigger {
    opacity: .9
}

li:hover .menuTrigger a {
    color: var(--clr-text-secondary)
}

div.alert-container {
    align-items: center;
    background: var(--clr-alert-overlay-bg);
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    padding: 1rem;
    position: absolute;
    width: 100%;
    z-index: 3
}

div.alert {
    background-color: var(--clr-bright);
    border-radius: .3rem;
    box-shadow: .15rem .15rem 1.5rem var(--clr-shadow-dialog);
    height: min-content;
    margin: auto 2rem;
    max-height: 40rem;
    max-width: 24rem;
    min-width: 16rem;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    width: fit-content
}

div.alert-container .title {
    color: var(--clr-primary-accent);
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0 0 .35rem;
    position: relative;
    width: 100%
}

div.alert-container .title.with-control {
    align-items: center;
    display: flex;
    flex: none;
    justify-content: space-between;
    padding: .5rem .5rem 0;
    position: relative
}

div.alert-container .content {
    padding: .5rem 0;
    position: relative
}

div.trusted-badge {
    margin: .25rem 0
}

.blue {
    color: var(--clr-primary-accent) !important
}

.lt-blue {
    color: var(--clr-lt-fg-1) !important
}

.orange {
    color: var(--clr-std-orange) !important
}

.verified-color {
    color: var(--clr-verified-accent) !important
}

.staff-color {
    color: var(--clr-staff-accent) !important
}

.danger-color {
    color: var(--clr-warning-accent) !important
}

.green {
    --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) #1a9a1d;
    color: var(--csstools-light-dark-toggle--102, #388e3c)
}

.white {
    color: var(--clr-bright) !important
}

.red {
    color: var(--clr-danger-text) !important
}

.badge-inv {
    color: var(--clr-badge-inv) !important
}

.gray {
    color: var(--clr-text-secondary) !important
}

.light-gray {
    color: var(--clr-text-placeholder) !important
}

.large {
    font-size: 120%
}

.small {
    font-size: 90%
}

.float-right {
    position: absolute;
    right: .5rem
}

.hr {
    background-color: var(--clr-background-light-gray);
    box-shadow: inset 0 .25rem .25rem -.25rem var(--clr-shadow-hr-inset), inset 0 -.25rem .25rem -.25rem var(--clr-shadow-hr-inset);
    display: block;
    height: .45rem;
    min-height: .3rem;
    width: 100%
}

.hr.thin {
    height: .015rem
}

.ellipsized {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.flat-button {
    align-items: center;
    background-color: var(--clr-bright);
    display: flex;
    font-weight: 400;
    height: 2em;
    line-height: 2em;
    margin: .15rem .35rem;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    z-index: 1
}

.flat-button:focus, .flat-button:hover {
    text-decoration: none
}

.flat-button.faux {
    background-color: var(--clr-background-extra-light-gray);
    border: 1px solid var(--clr-text-tertiary);
    border-radius: 3px;
    display: inline-block;
    height: 1.4em;
    line-height: 1.4em;
    margin: .15rem;
    padding: 0 .35rem;
    text-transform: none
}

.action-button {
    background-color: var(--clr-background-off-white);
    border-radius: 50%;
    box-shadow: 0 2px .5rem 0 var(--clr-shadow-button);
    color: var(--clr-text-secondary);
    display: block;
    font-size: 1.8rem;
    height: 3.25rem;
    margin: 0;
    min-height: unset;
    min-width: unset;
    outline: none;
    padding: 0;
    position: absolute;
    transition: all .15s;
    width: 3.25rem;
    z-index: 2
}

.action-button:active:not([disabled]), .action-button:focus, .action-button:hover, .action-button:hover:not([disabled]) {
    background-color: var(--clr-primary-action-hover);
    color: var(--clr-text-tertiary-activated)
}

.action-button:active {
    background-color: var(--clr-primary-action);
    color: var(--clr-text-tertiary-activated)
}

.action-button.hidden {
    bottom: 2.625rem;
    font-size: 1px;
    height: 1px;
    line-height: 1px;
    opacity: 0;
    right: 2.625rem;
    width: 1px
}

.group-focus {
    outline: none
}

#mountPoint {
    height: 100%;
    padding-bottom: 1rem;
    padding-top: 1rem
}

#noscript-message {
    background-color: var(--clr-bright);
    border-radius: .25rem;
    box-shadow: 1px 2px .3rem var(--clr-shadow-gray-strong);
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
    max-width: 30rem;
    overflow: hidden;
    position: relative
}

#noscript-title {
    background-color: var(--clr-primary-accent);
    color: var(--clr-primary-light-blue);
    font-size: 120%;
    font-weight: bolder;
    padding: 1rem
}

#noscript-content {
    padding: 1rem
}

#app-container {
    background-color: var(--clr-bright);
    border-radius: .25rem;
    box-shadow: 1px 2px .3rem var(--clr-shadow-gray-strong);
    display: flex;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 84rem;
    overflow: hidden;
    position: relative
}

#sidepanel {
    flex-grow: 0;
    flex-shrink: 0.3;
    min-width: 18rem;
    width: 24rem
}

#sidepanel, #topic-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative
}

#topic-view {
    overflow-x: hidden;
    width: 100%
}

#info-view {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0.3;
    height: 100%;
    min-width: 18rem;
    position: relative;
    width: 24rem
}

.center-medium-text {
    align-items: center;
    display: flex;
    font-size: 1.4rem;
    height: 100%;
    justify-content: center;
    text-align: center;
    width: 100%
}

.nodisplay {
    display: none !important
}

.quoted {
    margin-left: 1rem
}

.space-right {
    margin-right: .25rem
}

.rounded-container {
    background-color: var(--clr-background-off-white);
    border-radius: .1rem;
    margin: .25rem;
    padding: .25rem;
    position: relative
}

div.in-place-edit, span.in-place-edit {
    border-bottom: 1px dashed var(--clr-border-muted);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    margin: .25rem .125rem 0;
    vertical-align: baseline;
    width: 100%
}

.in-place-edit.short {
    align-items: center;
    display: inline-flex;
    font-size: 1.1rem;
    height: 2.5rem;
    line-height: 2.25;
    white-space: nowrap
}

.in-place-edit.disabled {
    border-bottom: none;
    color: var(--clr-text-disabled);
    cursor: default
}

.in-place-edit.placeholder {
    color: var(--clr-text-placeholder)
}

.in-place-edit span {
    display: inline-block
}

.in-place-edit.short span {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.in-place-edit .material-icons {
    display: inline-block
}

.material-icons.invalid {
    color: var(--clr-error-text-muted)
}

textarea.in-place-edit {
    font-size: unset;
    height: unset
}

input.in-place-edit.invalid {
    color: var(--clr-error-text-muted)
}

table.permission-editor {
    width: 100%
}

table.permission-editor td {
    font-size: 1.1rem;
    margin: .35rem 0;
    vertical-align: middle
}

table.permission-editor td.checkbox {
    color: var(--clr-text-tertiary);
    text-align: center
}

.permission-editor .material-icons {
    font-size: 1.3rem;
    line-height: 1.3rem
}

.material-icons.clickable {
    border-bottom: none;
    cursor: pointer
}

.clickable {
    border-bottom: 1px dashed var(--clr-border-muted)
}

.clean-clickable, .clickable, .image-clickable {
    cursor: pointer
}

.panel-title {
    font-size: 1.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.panel-title.deleted {
    text-decoration: line-through
}

.caption-panel {
    box-shadow: 0 1px 2px var(--clr-shadow-gray-strong);
    flex: none;
    height: var(--caption-panel-height);
    overflow-x: hidden;
    white-space: nowrap;
    z-index: 1
}

.caption-panel, .dialog-buttons {
    align-items: center;
    display: flex;
    padding: .5rem
}

.dialog-buttons {
    justify-content: flex-end
}

.dialog-buttons button {
    margin: 0 .5rem
}

.avatar-box {
    flex-grow: 0;
    flex-shrink: 0;
    position: relative
}

.bot-form {
    display: flex;
    flex-direction: column;
    line-height: 2rem;
    min-width: 8rem;
    overflow: hidden
}

.bot-form div {
    min-height: 2rem;
    vertical-align: middle
}

.bot-form button {
    background-color: var(--clr-blue-wash-light);
    color: var(--clr-primary-accent);
    display: inline-block;
    font-size: inherit;
    height: 2rem;
    line-height: 2rem;
    margin: .15rem;
    text-transform: none
}

.bot-form > div > button {
    width: auto
}

.bot-form button:active, .bot-form button:focus, .bot-form button:hover {
    background-color: var(--clr-primary-wash);
    color: var(--clr-dk-fg-5);
    outline: 0
}

#side-caption-panel {
    background-color: var(--clr-primary-accent);
    color: var(--clr-primary-light-blue)
}

#side-caption-panel a {
    color: var(--clr-primary-light-blue);
    line-height: 1;
    padding-left: .5rem
}

#side-caption-panel :hover {
    color: var(--clr-bright)
}

#sidepanel-title {
    margin-left: .5rem;
    margin-right: auto
}

#self-avatar {
    border-radius: 50%;
    flex: none;
    height: 3rem;
    min-width: 3rem;
    width: 3rem
}

#self-avatar.avatar-box {
    font-size: 1.8rem
}

#settings-form ul {
    list-style: none
}

#settings-form li {
    vertical-align: middle
}

#settings-form label {
    display: inline-block;
    padding-left: .5rem
}

input#host-name {
    width: 100%
}

input.search {
    text-indent: 1.4rem
}

i.search {
    left: .6rem;
    position: absolute
}

.info-box {
    display: none;
    overflow: hidden;
    padding: 1rem 1.5rem .75rem .5rem;
    position: relative
}

.info-box > span {
    line-height: 1.35rem
}

.info-box .cancel {
    position: absolute;
    right: .25rem;
    top: .5rem
}

.info-box.error {
    background-color: var(--clr-error-bg-light);
    border-bottom: 1px solid var(--clr-error-border-light);
    color: var(--clr-error-text-dark);
    display: flex
}

.info-box.warning {
    background-color: var(--clr-warning-bg-light);
    border-bottom: 1px solid var(--clr-warning-border-light);
    color: var(--clr-warning-text-dark);
    display: flex
}

.info-box.info {
    background-color: var(--clr-info-bg-light);
    border-bottom: 1px solid var(--clr-info-border-light);
    color: var(--clr-info-text-dark);
    display: flex
}

.info-box .cancel .material-icons {
    color: var(--clr-text-secondary);
    font-size: 1rem
}

.info-box.error .cancel .material-icons {
    color: var(--clr-error-text-dark)
}

.info-box .icon {
    display: block;
    margin-right: .5rem
}

.info-box .icon .material-icons {
    font-size: 1.5rem
}

.info-box.warning .icon .material-icons {
    color: var(--clr-warning-icon)
}

.info-box.error .icon .material-icons {
    color: var(--clr-error-icon)
}

.info-box.info .icon .material-icons {
    color: var(--clr-info-text-dark)
}

.flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden
}

.flex-column.narrow {
    height: auto
}

.scrollable-panel {
    height: 100%;
    margin-bottom: auto;
    margin-top: .25rem;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth
}

.contact-box {
    list-style: none;
    overflow-x: hidden
}

.contact-box > li {
    background: linear-gradient(to right, var(--clr-transparent) 3.5rem, var(--clr-background-extra-light-gray) 1px, var(--clr-background-extra-light-gray) 100%) 0 100% /100% 1px no-repeat, var(--clr-bright);
    cursor: pointer;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    min-height: 3.75rem;
    overflow-x: hidden;
    padding: .35rem .25rem .5rem .35rem;
    position: relative
}

.contact-box.small > li {
    min-height: 2.5rem;
    padding: .25rem .25rem .35rem .35rem
}

.contact-box > li:last-child {
    background: var(--clr-bright)
}

.contact-box > li:hover {
    background-color: var(--clr-background-blue-gray-50)
}

.contact-box > li.selected {
    background-color: var(--clr-background-blue-gray-100)
}

.contact-box > li.tpinned {
    background-color: var(--clr-background-blue-gray-75);
    border-right: 1.5px solid var(--clr-secondary-accent)
}

.contact-box > li.action {
    border-bottom: none;
    min-height: 2.5rem
}

.contact-box .text-box {
    overflow-x: hidden
}

.contact-box .contact-title {
    font-size: 1.05rem;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.contact-box .contact-title.deleted {
    opacity: .66;
    text-decoration: line-through;
    text-decoration-thickness: .5px
}

.contact-box .contact-comment {
    font-weight: lighter
}

.contact-box .contact-comment, .contact-box .contact-comment > span {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.contact-box .contact-comment b {
    font-weight: bolder
}

.contact-box .contact-comment .material-icons {
    margin-bottom: .2rem;
    --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) #666;
    color: var(--csstools-light-dark-toggle--103, #777)
}

.contact-box .avatar-box {
    font-size: 1.8rem;
    height: 3rem;
    margin-right: .35rem;
    min-height: 3rem;
    min-width: 3rem;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 3rem
}

.contact-box .avatar {
    border-radius: 50%;
    height: 3rem;
    width: 3rem
}

.contact-box.small .avatar-box {
    font-size: 1.2rem;
    height: 2rem;
    min-height: 2rem;
    min-width: 2rem;
    width: 2rem
}

.contact-box.small .avatar {
    height: 2rem;
    width: 2rem
}

.avatar.deleted {
    filter: grayscale(1);
    opacity: .75
}

.contact-box .avatar-box > .material-icons {
    display: flex;
    flex-direction: column;
    font-size: 2.4rem;
    justify-content: space-around;
    line-height: 3rem
}

.contact-box.small .avatar-box > .material-icons {
    font-size: 1.6rem;
    line-height: 2rem
}

.contact-box .text-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around
}

.contact-box .text-box > div {
    align-items: center;
    display: flex;
    flex-direction: row
}

.contact-box .action-text {
    cursor: pointer;
    font-size: .95rem;
    line-height: 2.5rem;
    margin: 0 auto;
    text-align: center
}

img.channel {
    height: 1.25rem;
    margin-left: .3rem;
    vertical-align: middle;
    width: 1.25rem
}

.large img.channel {
    height: 1.45rem;
    margin-bottom: .15rem;
    margin-left: .5rem;
    width: 1.45rem
}

.avatar-box .online, .offline {
    border-radius: 50%;
    bottom: .1rem;
    flex-shrink: 0;
    height: .75rem;
    min-height: .75rem;
    min-width: .75rem;
    position: absolute;
    right: 0;
    width: .75rem
}

.avatar-box .online {
    background-color: var(--clr-online)
}

.avatar-box .offline {
    background-color: var(--clr-offline)
}

.online.typing {
    animation: typing .5s infinite
}

@keyframes typing {
    0%, to {
        transform: translateX(0)
    }
    50% {
        transform: translateX(-.3rem)
    }
}

.contact-box .checkmark.material-icons {
    border: 0 solid var(--clr-transparent);
    color: var(--clr-secondary-accent);
    overflow: visible;
    padding-left: .5px
}

.contact-box .checkmark.material-icons, .contact-box .deleted.material-icons {
    background-color: var(--clr-bright);
    bottom: 0;
    font-size: 1.5rem;
    height: 1.5rem;
    position: absolute;
    right: 0;
    width: 1.5rem
}

.contact-box .deleted.material-icons {
    color: var(--clr-text-tertiary)
}

#add-topic {
    bottom: 1rem;
    position: absolute;
    right: 1rem
}

.panel-form {
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative
}

.panel-form-row {
    align-items: center;
    flex-shrink: 0
}

.panel-form-column, .panel-form-row {
    display: flex;
    flex-grow: 0;
    line-height: 1.5;
    padding: .5rem .75rem;
    position: relative
}

.panel-form-column {
    flex-direction: column;
    overflow-x: clip
}

.panel-form-column > .panel-form-column, .panel-form-row > .panel-form-column {
    flex-grow: 1;
    padding: 0 !important
}

.panel-form-column > .panel-form-row, .panel-form-row > .panel-form-row {
    padding: 0 !important
}

.panel-form-column > .group {
    margin-bottom: .25rem;
    margin-top: .25rem
}

.avatar-upload {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-size: 4.5rem;
    height: 10.5rem;
    margin: .25rem;
    padding: 0;
    position: relative;
    width: 10rem
}

.avatar-upload.read-only {
    height: auto
}

.avatar-upload .clear-avatar {
    background-image: radial-gradient(var(--clr-bright) 40%, var(--clr-transparent) 75%);
    font-size: 1rem;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0
}

.avatar-upload:hover .clear-avatar {
    opacity: 1
}

.avatar-upload .avatar-box {
    height: 10rem;
    position: relative;
    width: 10rem
}

.avatar-upload .avatar-box > .material-icons {
    font-size: 4rem;
    line-height: 10rem;
    position: relative;
    vertical-align: middle
}

.avatar-upload:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden
}

.avatar-upload .blank {
    border: 1px dashed var(--clr-text-tertiary);
    color: var(--clr-text-tertiary);
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 10rem;
    text-align: center;
    vertical-align: middle
}

.avatar-upload .blank, .avatar-upload img.preview {
    border-radius: 50%;
    height: 10rem;
    overflow: hidden;
    width: 10rem
}

.avatar-upload img.preview:before {
    background: 50% no-repeat url(../img/broken_image.png);
    border-radius: 50%;
    color: var(--clr-text-primary);
    content: " ";
    display: flex;
    font-size: .9rem;
    font-weight: lighter;
    height: 10rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 10rem
}

.avatar-upload .inputfile.hidden {
    height: .1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: .1px
}

.avatar-upload .inputfile + label.round {
    align-items: center;
    background-color: var(--clr-background-off-white);
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 1px 4px var(--clr-shadow-dialog);
    cursor: pointer;
    display: flex;
    height: 3rem;
    justify-content: center;
    line-height: 3rem;
    position: absolute;
    right: 0;
    width: 3rem;
    z-index: 1
}

.avatar-upload .inputfile:focus + label.round {
    outline: none
}

.avatar-upload .inputfile + label:hover, .avatar-upload .inputfile:focus + label {
    background-color: var(--clr-primary-wash);
    color: var(--clr-primary-accent)
}

#topic-caption-panel {
    background-color: var(--clr-background-blue-gray-300)
}

#topic-caption-panel a {
    color: var(--clr-text-secondary);
    text-decoration: none
}

#topic-caption-panel :hover {
    color: var(--clr-dark)
}

#topic-caption-panel .avatar-box {
    font-size: 1.8rem;
    height: 3rem;
    margin-right: .35rem;
    min-width: 3rem;
    position: relative;
    width: 3rem
}

#topic-caption-panel .avatar-box > .material-icons {
    font-size: 2.4rem;
    line-height: 3rem
}

#topic-title-group {
    overflow-x: hidden
}

#hide-message-view {
    display: block;
    margin-right: .35rem
}

#topic-users {
    margin-left: auto;
    margin-right: 1rem;
    width: min-content
}

#topic-users .avatar-box {
    display: inline-block;
    font-size: 1rem;
    height: 1.8rem;
    margin-right: .2rem;
    min-height: 1.8rem;
    min-width: 1.8rem;
    width: 1.8rem
}

#topic-users .avatar-box > .material-icons {
    font-size: 1.4rem;
    line-height: 1.8rem
}

#topic-users > span {
    line-height: 2rem;
    vertical-align: top
}

.qr-code {
    align-self: center
}

#messages-container {
    height: 100%;
    overflow-y: hidden;
    position: relative
}

#messages-container:before {
    background-color: var(--clr-background-blue-gray-50);
    background-image: var(--wallpaper-url);
    background-position: var(--wallpaper-position);
    background-repeat: var(--wallpaper-repeat);
    background-size: var(--wallpaper-size);
    content: "";
    filter: blur(var(--wallpaper-blur)) invert(var(--wallpaper-invert)) brightness(var(--wallpaper-brightness));
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

#messages-panel {
    height: 100%;
    overflow-y: scroll;
    padding: .75rem;
    position: relative
}

#write-only-background {
    background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .5) .5rem, hsla(0, 0%, 100%, .8) 0, hsla(0, 0%, 100%, .8) 1rem);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

#write-only-note {
    height: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto
}

#peer-messaging-disabled-note, #write-only-note {
    background-color: var(--clr-bright);
    border-radius: .5rem;
    box-shadow: 0 1px .5px var(--clr-shadow-button-inset-active);
    color: var(--clr-text-primary);
    left: 50%;
    line-height: 2rem;
    padding: .75rem 1.25rem;
    position: absolute;
    text-align: center
}

#peer-messaging-disabled-note {
    bottom: 4.3rem;
    transform: translate(-50%);
    width: fit-content
}

#send-message-panel {
    align-items: center;
    background-color: var(--clr-background-blue-gray-50);
    display: flex;
    flex: none;
    min-height: 4rem;
    padding: .4rem .4rem .4rem .6rem;
    z-index: 2
}

#send-message-panel #writing-disabled {
    font-size: 1.2rem;
    text-align: center;
    width: 100%
}

#send-message-wrapper {
    background-color: var(--clr-background-blue-gray-50);
    box-shadow: 0 -2px 3px -1px var(--clr-shadow-panel-divider);
    z-index: 2
}

#sendMessage {
    overflow: hidden;
    overflow-wrap: break-word
}

#send-message-panel .material-icons {
    font-size: 1.6rem;
    min-width: 2rem
}

#send-message-panel .material-icons.secondary, .material-icons.disabled {
    color: var(--clr-text-tertiary) !important
}

#send-message-panel .material-icons.secondary:hover {
    color: var(--clr-primary-accent) !important
}

#send-message-input {
    max-height: 6rem;
    min-height: 2.5rem;
    overflow: hidden auto
}

.accept-invite-panel {
    background-color: var(--clr-background-blue-gray-50);
    box-shadow: 0 -2px 3px -1px var(--clr-shadow-panel-divider);
    width: 100%;
    z-index: 1
}

.accept-invite-panel .title {
    font-size: 1.2rem;
    padding: .75rem
}

.accept-invite-panel .footer {
    background-color: var(--clr-background-off-white);
    padding-bottom: .35rem;
    text-align: center;
    white-space: nowrap
}

.accept-invite-panel button {
    border: 1px solid var(--clr-transparent);
    box-shadow: 0 1px 2px 0 var(--clr-shadow-button);
    font-size: 1rem;
    height: 2em;
    line-height: 2em;
    margin: .25rem
}

#dummy-view {
    align-items: center;
    background-color: var(--clr-cyan-50);
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

#dummy-view a {
    display: block;
    text-align: center;
    text-decoration: none
}

#image-preview {
    background-color: var(--clr-overlay-white-strong);
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2
}

#image-preview-caption-panel {
    background-color: var(--clr-background-blue-gray-50);
    box-shadow: 0 1px 2px var(--clr-shadow-silver-subtle);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--caption-panel-height);
    justify-content: space-between;
    line-height: 2rem;
    padding: 1rem .75rem 0;
    z-index: 3
}

#image-preview-caption-panel a {
    color: var(--clr-text-secondary);
    text-decoration: none
}

#image-preview-caption-panel a:hover {
    color: var(--clr-dark)
}

#image-preview-container {
    align-items: center;
    background-color: var(--clr-gray-medium-bg);
    display: flex;
    height: 100%;
    justify-content: space-around;
    overflow: hidden;
    width: 100%
}

#image-preview-footer {
    background-color: var(--clr-background-blue-gray-50);
    box-shadow: 0 -2px 3px -1px var(--clr-shadow-panel-divider);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    height: 3.2rem;
    justify-content: space-around;
    line-height: 1.5rem;
    z-index: 1
}

#image-preview-container .material-icons {
    font-size: 6rem
}

#image-preview-container .doc-card {
    background-color: var(--clr-std-ltgray);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    padding: 1rem
}

#video-container {
    background-color: var(--clr-overlay-white-strong);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3
}

#video-container.minimized {
    background-color: unset;
    border-radius: .5rem;
    box-shadow: .15rem .15rem 1.5rem var(--clr-shadow-dialog);
    cursor: grab;
    height: 18rem;
    left: auto;
    right: 1rem;
    top: 1rem;
    user-select: none;
    width: 18rem
}

#controls {
    align-items: center;
    align-self: center;
    bottom: 2.5rem;
    column-gap: 1rem;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 1
}

#controls.minimized {
    bottom: 1.75rem;
    column-gap: .5rem
}

.incoming-call #controls {
    bottom: 1rem
}

#controls button {
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 var(--clr-shadow-button);
    display: flex;
    height: 4rem;
    justify-content: center;
    min-width: auto;
    position: relative;
    width: 4rem
}

#controls.minimized button {
    box-shadow: 0 2px 4px 0 var(--clr-shadow-button);
    height: 2.75rem;
    width: 2.75rem
}

#controls button .material-icons {
    font-size: 1.8rem
}

#controls.minimized button .material-icons {
    font-size: 1.4rem
}

button.full-screen {
    background-color: transparent;
    border-radius: .5rem;
    box-shadow: none;
    height: 2.5rem;
    left: 2rem;
    min-width: unset;
    padding: 0;
    position: absolute;
    top: 2rem;
    width: 2.5rem;
    z-index: 1
}

.minimized button.full-screen {
    height: 2rem;
    left: 1rem;
    top: 1rem;
    width: 2rem
}

button.full-screen:hover:not([disabled]), button:active:not([disabled]) {
    color: var(--clr-text-secondary)
}

button.full-screen .material-icons {
    font-size: x-large
}

.minimized button.full-screen .material-icons {
    font-size: large
}

#video-container-panel {
    height: 100%;
    position: relative;
    width: 100%
}

.call-party {
    background-color: var(--clr-background-extra-light-gray);
    border: 2px solid var(--clr-border-light);
    border-radius: .5rem;
    overflow: hidden
}

.call-party:hover {
    border-color: var(--clr-primary-accent)
}

.minimized .call-party {
    border-width: 1px
}

.call-party.peer {
    bottom: 1rem;
    left: 1rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 1
}

.minimized .call-party.peer {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

.call-party.self {
    bottom: .5rem;
    height: 10rem;
    position: absolute;
    right: .5rem;
    width: 10rem;
    z-index: 2
}

.call-party.self[disabled] {
    display: none
}

video {
    height: 100%;
    object-fit: contain;
    width: 100%
}

.call-party.self video {
    transform: scaleX(-1)
}

.call-party[disabled] video {
    display: none
}

.caller-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.caller-card .avatar-box {
    font-size: 6rem;
    height: 10rem;
    width: 10rem
}

.caller-card.pulse .lettertile, .caller-card.pulse img.avatar {
    animation: active-call 1.5s linear infinite
}

.caller-card .avatar-box .material-icons {
    font-size: 6rem;
    line-height: 1.6
}

.minimized .caller-card .avatar-box {
    font-size: 3.6rem;
    height: 6rem;
    width: 6rem
}

.call-party .caller-name {
    background-color: var(--clr-background-off-white);
    border-radius: .35rem;
    max-width: 12rem;
    overflow-x: hidden;
    padding: .15rem .5rem;
    text-overflow: ellipsis;
    text-shadow: 0 0 1px var(--clr-bright);
    white-space: nowrap;
    z-index: 1
}

.call-party.self .caller-name.inactive {
    bottom: .25rem;
    position: absolute;
    right: .25rem
}

.caller-card .caller-name {
    font-size: larger;
    margin-top: .5rem
}

.caller-card .trusted-badge {
    display: inline-block
}

.call-party.peer .caller-name.inactive {
    bottom: .5rem;
    font-size: larger;
    left: 1rem;
    margin: 0 auto;
    position: absolute
}

.minimized .caller-name {
    border-radius: .25rem;
    font-weight: lighter;
    padding: .1rem .35rem
}

.incoming-call {
    background-color: var(--clr-bright);
    border-radius: .3rem;
    box-shadow: .15rem .15rem 1.5rem var(--clr-shadow-dialog);
    margin: auto 2rem;
    max-width: 24rem;
    min-width: 16rem;
    width: fit-content
}

.incoming-call, .incoming-call .caller-card {
    display: flex;
    flex-direction: column;
    position: relative
}

.incoming-call .caller-card {
    align-items: center;
    height: 100%;
    justify-content: center;
    left: auto;
    padding: 4rem 3.5rem 5.5rem;
    top: auto;
    width: 100%
}

.incoming-call .caller-name {
    background-color: var(--clr-background-off-white);
    border-radius: .35rem;
    overflow-x: hidden;
    padding: .15rem .5rem;
    text-overflow: ellipsis;
    text-shadow: 0 0 1px var(--clr-bright);
    white-space: nowrap;
    z-index: 1
}

.call-message {
    display: flex;
    flex-direction: row
}

.call-message .duration {
    font-weight: lighter
}

#go-to-latest {
    bottom: 1rem;
    right: 1.5rem
}

@keyframes active-call {
    0% {
        box-shadow: 0 0 0 .1rem var(--clr-primary-accent-transparent-medium), 0 0 0 .3rem var(--clr-primary-accent-transparent-medium), 0 0 0 .5rem var(--clr-primary-accent-transparent-medium)
    }
    to {
        box-shadow: 0 0 0 .4rem var(--clr-primary-accent-transparent-medium), 0 0 0 2rem rgba(33, 150, 243, 0), 0 0 0 3rem rgba(33, 150, 243, 0)
    }
}

.chat-box {
    list-style: none;
    margin: 0 .5rem;
    padding: 0 0 3.5rem;
    scroll-behavior: smooth
}

.chat-box.group {
    margin-left: -.4rem
}

.chat-box li {
    align-items: flex-end;
    display: flex;
    margin: 0;
    padding: 0
}

.chat-box .right {
    justify-content: flex-end
}

.bubble {
    border-radius: .5rem;
    color: var(--clr-bubble-text);
    display: flex;
    filter: drop-shadow(.5px .5px .7px var(--clr-shadow-bubble-drop));
    height: auto;
    margin: 0;
    max-width: 36rem;
    min-width: 9rem;
    padding: .75rem .5rem;
    position: relative;
    text-align: left;
    transition: background-color .5s ease-out;
    transition-delay: .3s
}

.chat-box li.single {
    margin-bottom: .75rem;
    margin-top: .25rem
}

.chat-box li.first {
    margin-bottom: .15rem;
    margin-top: .25rem
}

.chat-box li.middle {
    margin-bottom: .15rem;
    margin-top: .15rem
}

.chat-box li.last {
    margin-bottom: .75rem;
    margin-top: .15rem
}

.left .bubble {
    background-color: var(--clr-bubble-left-bg);
    margin-right: .5rem
}

.left.flash .bubble {
    background-color: var(--clr-bubble-left-bg-flash)
}

.left .bubble.tip {
    border-bottom-left-radius: 0
}

.right .bubble {
    background-color: var(--clr-bubble-right-bg);
    margin-left: 1.75rem
}

.right.flash .bubble {
    background-color: var(--clr-bubble-right-bg-flash)
}

.right .bubble.tip {
    border-bottom-right-radius: 0
}

.chat-box .meta {
    justify-content: center;
    margin-bottom: .5rem;
    margin-top: .5rem
}

.chat-box .meta .bubble {
    color: var(--clr-bubble-meta-text);
    min-width: unset
}

.meta .bubble.deleted {
    background-color: var(--clr-bubble-meta-deleted-bg);
    padding: .75rem .75rem .5rem
}

.meta .bubble.date {
    background-color: var(--clr-bubble-meta-date-bg);
    font-size: smaller;
    padding: .5rem;
    text-transform: uppercase;
    user-select: none
}

.left .bubble.tip:before {
    background-color: var(--clr-bubble-left-bg);
    border-bottom-left-radius: .3rem;
    bottom: 0;
    clip-path: polygon(100% 0, 0 110%, 100% 110%);
    -webkit-clip-path: polygon(100% 0, 0 110%, 100% 110%);
    content: "";
    height: .85rem;
    left: -.8rem;
    position: absolute;
    transition: background-color .5s ease-out;
    transition-delay: .3s;
    width: .85rem
}

.left.flash .bubble.tip:before {
    background-color: var(--clr-bubble-left-bg-flash)
}

.right .bubble.tip:before {
    background-color: var(--clr-bubble-right-bg);
    border-bottom-right-radius: .3rem;
    bottom: 0;
    clip-path: polygon(0 0, 100% 110%, 0 110%);
    -webkit-clip-path: polygon(0 0, 100% 110%, 0 110%);
    content: "";
    height: .85rem;
    left: 99.8%;
    position: absolute;
    transition: background-color .5s ease-out;
    transition-delay: .3s;
    width: .85rem
}

.right.flash .bubble.tip:before {
    background-color: var(--clr-bubble-right-bg-flash)
}

.chat-box .avatar-box {
    font-size: .8rem;
    height: 1.4rem;
    margin-bottom: .8rem;
    margin-right: .8rem;
    min-height: 1.4rem;
    min-width: 1.4rem;
    position: relative;
    width: 1.4rem
}

.bubble div.content-meta {
    width: 100%
}

.bubble div.message-content {
    font-size: var(--message-text-size);
    margin: 0;
    max-width: 36rem;
    overflow-wrap: anywhere;
    padding: 0 .75rem;
    position: relative;
    width: 100%
}

.bubble div.message-content.emoji-1 {
    font-size: 300%
}

.bubble div.message-content.emoji-2 {
    font-size: 241%
}

.bubble div.message-content.emoji-3 {
    font-size: 193%
}

.bubble div.message-content.emoji-4 {
    font-size: 155%
}

.bubble div.message-content.emoji-5 {
    font-size: 125%
}

.bubble div.message-content:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden
}

.chat-box .timestamp-padding {
    display: inline-block;
    height: 0;
    width: 4rem
}

.chat-box .timestamp {
    color: var(--clr-bubble-timestamp-text);
    float: right;
    font-size: 80%;
    position: relative;
    top: .35rem;
    user-select: none;
    white-space: nowrap
}

.chat-box .author {
    color: var(--clr-bubble-author-text);
    font-size: 80%;
    max-width: 12em;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.image-preview, .inline-image {
    border-radius: .1rem;
    overflow: hidden;
    position: relative
}

.inline-image {
    max-height: 24rem;
    max-width: 36rem
}

.inline-image > .rounded-container {
    border-left: .25rem solid var(--clr-transparent);
    border-right: .25rem solid var(--clr-transparent);
    bottom: 2rem;
    margin: .25rem auto;
    position: relative
}

img.image-preview:before, img.inline-image:before {
    background: center no-repeat var(--clr-border-light) url(../img/broken_image.png);
    color: var(--clr-text-primary);
    display: flex;
    font-size: .9rem;
    font-weight: lighter;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

img.inline-image:before {
    background-size: 3rem 3rem;
    content: attr(alt)
}

img.image-preview:before {
    background-size: 10rem 10rem;
    content: " "
}

.inline-image.video > img.inline-image:before, img.image-preview.video:before {
    background: center no-repeat var(--clr-border-light) url(../img/broken_video.png)
}

.inline-image.video > img.inline-image:before {
    background-size: 3rem 3rem
}

.inline-video {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative
}

.inline-video > img.inline-image:before {
    background: var(--clr-border-light)
}

.inline-video .duration {
    background-color: hsla(0, 0%, 100%, .5);
    border-radius: .3rem;
    bottom: .25rem;
    color: var(--clr-toast-bg);
    font-size: 80%;
    left: .25rem;
    padding: .25rem .5rem;
    position: absolute
}

.inline-video .play-control {
    align-items: center;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 4rem;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    width: 4rem
}

.attachment {
    display: flex
}

.attachment:last-of-type {
    margin-bottom: -.45rem
}

#info-caption-panel {
    background-color: var(--clr-background-blue-gray-300)
}

#info-caption-panel a {
    color: var(--clr-text-secondary);
    line-height: 1;
    text-decoration: none
}

#info-caption-panel :hover {
    color: var(--clr-dark)
}

#info-title {
    margin-right: auto
}

#group-manager {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
    position: relative
}

#group-manager-buttons {
    background-color: var(--clr-background-blue-gray-50);
    border-left: 1px solid var(--clr-border-light);
    box-shadow: 0 -1px var(--clr-shadow-panel-divider);
    display: flex;
    height: 4rem;
    justify-content: space-around;
    padding: .4rem;
    z-index: 2
}

ul.tabbar {
    background: var(--clr-tabbar-bg);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0 0 0 1rem;
    width: 100%
}

ul.tabbar > li {
    box-shadow: inset 0 -2px 2.5px -1px var(--clr-shadow-button);
    height: 2.4rem;
    position: relative
}

ul.tabbar li.active {
    background: var(--clr-bright)
}

ul.tabbar li:after {
    background: var(--clr-tabbar-inactive-border);
    bottom: 0;
    content: "";
    height: .1rem;
    left: 0;
    position: absolute;
    width: 100%
}

ul.tabbar li.active:after {
    animation: tabbar-border-expand .2s cubic-bezier(.4, 0, .4, 1) 0s alternate forwards;
    background: var(--clr-tabbar-active-border);
    bottom: 0;
    content: "";
    height: .15rem;
    left: 0;
    position: absolute
}

@keyframes tabbar-border-expand {
    0% {
        opacity: 0;
        width: 0
    }
    to {
        opacity: 1;
        width: 100%
    }
}

ul.tabbar > li > a {
    color: var(--clr-tabbar-inactive-text);
    font-size: 1.3rem;
    font-variant: small-caps;
    font-weight: 400;
    line-height: 2.4rem;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    text-align: center;
    text-decoration: none
}

ul.tabbar li.active > a {
    color: var(--clr-tabbar-active-text)
}

.unread {
    background-color: var(--clr-secondary-accent);
    border-radius: 50%;
    color: var(--clr-bright);
    display: inline-block;
    font-size: .75rem;
    font-weight: bolder;
    height: 1.35rem;
    line-height: 1.45rem;
    margin-left: .5rem;
    text-align: center;
    vertical-align: middle;
    width: 1.35rem
}

.material-icons.as-badge {
    color: var(--clr-chip-remove-icon-bg);
    font-size: 1.15rem;
    padding-left: .2rem
}

.badge {
    align-self: flex-start;
    background-color: var(--clr-badge-default-bg);
    border: 1px solid var(--clr-badge-default-border);
    border-radius: .2rem;
    color: var(--clr-badge-default-text);
    display: inline-block;
    font-family: Roboto Mono, Courier, monospace, sans-serif;
    font-size: .8rem;
    margin: .05rem .1rem;
    padding: .05rem .25rem
}

.badge.green {
    background-color: var(--clr-badge-green-bg);
    border-color: var(--clr-badge-green-border);
    color: var(--clr-badge-green-text)
}

.badge.yellow {
    background-color: var(--clr-badge-yellow-bg);
    border-color: var(--clr-badge-yellow-border);
    color: var(--clr-badge-yellow-text)
}

.badge.blue {
    background-color: var(--clr-badge-blue-bg);
    border-color: var(--clr-badge-blue-border);
    color: var(--clr-badge-blue-text)
}

.badge.red {
    background-color: var(--clr-badge-red-bg);
    border-color: var(--clr-badge-red-border);
    color: var(--clr-badge-red-text)
}

.badge.magenta {
    background-color: var(--clr-badge-magenta-bg);
    border-color: var(--clr-badge-magenta-border);
    color: var(--clr-badge-magenta-text)
}

.lettertile {
    border-radius: 50%;
    padding-bottom: 100%;
    user-select: none;
    width: 100%
}

.lettertile > div {
    align-items: center;
    border-radius: 50%;
    bottom: 0;
    color: var(--clr-lettertile-default-text);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    left: 0;
    line-height: 1;
    padding-top: .1em;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0
}

.lettertile:hover {
    color: var(--clr-lettertile-hover-text)
}

.lettertile.disabled {
    opacity: .5
}

.lt-bg-0 {
    background-color: var(--clr-lt-bg-0)
}

.lt-bg-1 {
    background-color: var(--clr-lt-bg-1)
}

.lt-bg-2 {
    background-color: var(--clr-lt-bg-2)
}

.lt-bg-3 {
    background-color: var(--clr-lt-bg-3)
}

.lt-bg-4 {
    background-color: var(--clr-lt-bg-4)
}

.lt-bg-5 {
    background-color: var(--clr-lt-bg-5)
}

.lt-bg-6 {
    background-color: var(--clr-lt-bg-6)
}

.lt-bg-7 {
    background-color: var(--clr-lt-bg-7)
}

.lt-bg-8 {
    background-color: var(--clr-lt-bg-8)
}

.lt-bg-9 {
    background-color: var(--clr-lt-bg-9)
}

.lt-bg-10 {
    background-color: var(--clr-lt-bg-10)
}

.lt-bg-11 {
    background-color: var(--clr-lt-bg-11)
}

.lt-bg-12 {
    background-color: var(--clr-lt-bg-12)
}

.lt-bg-13 {
    background-color: var(--clr-lt-bg-13)
}

.lt-bg-14 {
    background-color: var(--clr-lt-bg-14)
}

.lt-bg-15 {
    background-color: var(--clr-lt-bg-15)
}

.dk-bg-0 {
    background-color: var(--clr-dk-bg-0)
}

.dk-bg-1 {
    background-color: var(--clr-dk-bg-1)
}

.dk-bg-2 {
    background-color: var(--clr-dk-bg-2)
}

.dk-bg-3 {
    background-color: var(--clr-dk-bg-3)
}

.dk-bg-4 {
    background-color: var(--clr-dk-bg-4)
}

.dk-bg-5 {
    background-color: var(--clr-dk-bg-5)
}

.dk-bg-6 {
    background-color: var(--clr-dk-bg-6)
}

.dk-bg-7 {
    background-color: var(--clr-dk-bg-7)
}

.dk-bg-8 {
    background-color: var(--clr-dk-bg-8)
}

.dk-bg-9 {
    background-color: var(--clr-dk-bg-9)
}

.dk-bg-10 {
    background-color: var(--clr-dk-bg-10)
}

.dk-bg-11 {
    background-color: var(--clr-dk-bg-11)
}

.dk-bg-12 {
    background-color: var(--clr-dk-bg-12)
}

.dk-bg-13 {
    background-color: var(--clr-dk-bg-13)
}

.dk-bg-14 {
    background-color: var(--clr-dk-bg-14)
}

.dk-bg-15 {
    background-color: var(--clr-dk-bg-15)
}

.lt-fg-0 {
    color: var(--clr-lt-fg-0) !important
}

.lt-fg-1 {
    color: var(--clr-lt-fg-1) !important
}

.lt-fg-2 {
    color: var(--clr-lt-fg-2) !important
}

.lt-fg-3 {
    color: var(--clr-lt-fg-3) !important
}

.lt-fg-4 {
    color: var(--clr-lt-fg-4) !important
}

.lt-fg-5 {
    color: var(--clr-lt-fg-5) !important
}

.lt-fg-6 {
    color: var(--clr-lt-fg-6) !important
}

.lt-fg-7 {
    color: var(--clr-lt-fg-7) !important
}

.lt-fg-8 {
    color: var(--clr-lt-fg-8) !important
}

.lt-fg-9 {
    color: var(--clr-lt-fg-9) !important
}

.lt-fg-10 {
    color: var(--clr-lt-fg-10) !important
}

.lt-fg-11 {
    color: var(--clr-lt-fg-11) !important
}

.lt-fg-12 {
    color: var(--clr-lt-fg-12) !important
}

.lt-fg-13 {
    color: var(--clr-lt-fg-13) !important
}

.lt-fg-14 {
    color: var(--clr-lt-fg-14) !important
}

.lt-fg-15 {
    color: var(--clr-lt-fg-15) !important
}

.dk-fg-0 {
    color: var(--clr-dk-fg-0) !important
}

.dk-fg-1 {
    color: var(--clr-dk-fg-1) !important
}

.dk-fg-2 {
    color: var(--clr-dk-fg-2) !important
}

.dk-fg-3 {
    color: var(--clr-dk-fg-3) !important
}

.dk-fg-4 {
    color: var(--clr-dk-fg-4) !important
}

.dk-fg-5 {
    color: var(--clr-dk-fg-5) !important
}

.dk-fg-6 {
    color: var(--clr-dk-fg-6) !important
}

.dk-fg-7 {
    color: var(--clr-dk-fg-7) !important
}

.dk-fg-8 {
    color: var(--clr-dk-fg-8) !important
}

.dk-fg-9 {
    color: var(--clr-dk-fg-9) !important
}

.dk-fg-10 {
    color: var(--clr-dk-fg-10) !important
}

.dk-fg-11 {
    color: var(--clr-dk-fg-11) !important
}

.dk-fg-12 {
    color: var(--clr-dk-fg-12) !important
}

.dk-fg-13 {
    color: var(--clr-dk-fg-13) !important
}

.dk-fg-14 {
    color: var(--clr-dk-fg-14) !important
}

.dk-fg-15 {
    color: var(--clr-dk-fg-15) !important
}

.material-icons {
    font-size: 1.4rem;
    line-height: 1;
    text-align: center;
    user-select: none;
    vertical-align: middle
}

.material-icons.small {
    font-size: 1rem
}

.material-icons.medium {
    font-size: 1.2rem
}

.material-icons.large {
    font-size: 1.6rem
}

.material-icons.big {
    font-size: 2.2rem
}

.material-icons.x-big {
    font-size: 3rem
}

.material-icons.huge {
    font-size: 4rem
}

.composed-material {
    display: inline-block;
    position: relative
}

.composed-material .second {
    font-size: 85%;
    font-weight: 700;
    left: 39%;
    position: absolute;
    top: 7%
}

.composed-material .second-small {
    font-size: 62%;
    font-weight: 700;
    left: 30%;
    position: absolute;
    top: 14%
}

.material-icons.outline {
    position: relative;
    text-shadow: -1px 1px var(--clr-bright), 1px 1px var(--clr-bright), 1px -1px var(--clr-bright), -1px -1px var(--clr-bright)
}

#self-avatar .material-icons {
    font-size: 2.4rem;
    line-height: 3rem
}

.avatar-box .material-icons {
    border-radius: 50%;
    color: var(--clr-lettertile-default-text);
    height: inherit;
    width: inherit
}

.chip-input {
    align-items: center;
    background: var(--clr-transparent);
    border-bottom: 1px solid var(--clr-input-border);
    box-shadow: 0 1px 0 var(--clr-input-shadow);
    color: var(--clr-input-text);
    cursor: text;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    font-size: 1.1rem;
    font-weight: 400;
    justify-content: flex-start;
    margin: .25rem 0;
    max-height: 10rem;
    min-height: 4rem;
    outline: none;
    overflow-y: scroll;
    text-align: center;
    transition: all .1s ease-in-out
}

.chip-input.focused {
    border-bottom: 1px solid var(--clr-input-border-focus);
    box-shadow: 0 1px 0 var(--clr-input-shadow-focus)
}

.chip-input > input[type=text] {
    border: none;
    box-shadow: none;
    display: inline-block;
    flex: 1 0 auto;
    min-width: 4rem;
    width: auto
}

.chip, .chip-input > input[type=text] {
    height: 1.8rem;
    line-height: 1.8;
    margin: .125rem
}

.chip {
    align-items: center;
    background-color: var(--clr-chip-bg);
    border-radius: .9rem;
    display: flex;
    flex: 0 0 auto;
    font-size: 90%;
    max-width: 12rem;
    overflow: hidden
}

.chip, .chip > span {
    text-overflow: ellipsis;
    white-space: nowrap
}

.chip > span {
    overflow-x: hidden
}

.chip.invalid {
    background-color: var(--clr-chip-invalid-bg);
    color: var(--clr-chip-invalid-text)
}

.chip > a {
    background-color: var(--clr-chip-remove-icon-bg);
    border-radius: 50%;
    color: var(--clr-chip-remove-icon-text);
    display: inline-block;
    height: 1.175rem;
    line-height: 1.15;
    margin: .3rem;
    min-width: 1.175rem;
    text-decoration: none;
    width: 1.175rem
}

.chip > a:focus, .chip > a:hover {
    background-color: var(--clr-chip-remove-icon-hover-bg);
    color: var(--clr-chip-remove-icon-hover-text);
    text-decoration: none
}

.chip .avatar-box {
    font-size: 1rem;
    height: 1.8rem;
    margin-right: .2rem;
    min-height: 1.8rem;
    min-width: 1.8rem;
    position: relative;
    width: 1.8rem
}

.chip .avatar-box .material-icons {
    font-size: 1.4rem;
    line-height: 1.8rem
}

.chip .spacer {
    display: inline-block;
    height: 1.175rem;
    margin: .3rem;
    width: .25rem
}

.load-spinner-box {
    --size-small: 2.5rem;
    --size-large: 4rem;
    background-color: var(--clr-bright);
    border-radius: 50%;
    box-shadow: .1rem .1rem .15rem 1px var(--clr-shadow-button);
    height: var(--size-small);
    left: 0;
    margin-left: auto;
    margin-right: auto;
    padding: .25rem;
    position: absolute;
    right: 0;
    top: 5rem;
    width: var(--size-small);
    z-index: 2
}

.load-spinner-box.large {
    height: var(--size-large);
    width: var(--size-large)
}

.load-spinner-box.clear {
    background-color: hsla(0, 0%, 100%, .5);
    box-shadow: .1rem .1rem .15rem 1px var(--clr-shadow-button-inset-active)
}

.load-spinner-box.centered {
    top: calc(var(--size-small) / 2 - .25rem)
}

.load-spinner-box.large.centered {
    top: calc(var(--size-large) / 2 - .25rem)
}

.loader-spinner {
    animation: spin 1.5s linear infinite;
    border-radius: 50%;
    border-top: .35rem solid var(--clr-spinner-track);
    border: .35rem solid var(--clr-spinner-track);
    border-top-color: var(--clr-spinner-active);
    height: 2rem;
    width: 2rem
}

.load-spinner-box.large .loader-spinner {
    height: 3.5rem;
    width: 3.5rem
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.uploader {
    display: flex
}

.uploader > div {
    background-color: var(--clr-background-blue-gray-100);
    border-radius: .1rem;
    height: .6rem;
    line-height: 0;
    margin: .35rem;
    padding: .15rem;
    position: relative;
    width: 6rem
}

.uploader > div > span {
    background-color: var(--clr-primary-action);
    border-radius: .08rem;
    display: inline-block;
    height: .3rem
}

.highlight {
    color: var(--clr-highlight-text);
    font-weight: bolder
}

.highlight .preview {
    color: var(--clr-highlight-preview-text);
    font-weight: inherit
}

.cropper {
    align-self: center;
    height: 21rem;
    margin: 1rem auto auto;
    transform: translateZ(0)
}

.cropper, .cropper .bounding-box {
    border-radius: .25rem;
    position: relative;
    width: 18rem
}

.cropper .bounding-box {
    background-color: var(--clr-cropper-bounding-box-bg);
    border: 2px solid var(--clr-cropper-bounding-box-border);
    box-shadow: 1px 1px 3px var(--clr-shadow-cropper-gray);
    height: 18rem;
    overflow: hidden;
    z-index: 1
}

.cropper .preview {
    max-height: none;
    max-width: none;
    position: absolute;
    z-index: -1
}

.cropper .cutout {
    border: 1px dashed var(--clr-cropper-cutout-border);
    bottom: 0;
    box-shadow: 0 0 150rem 150rem var(--clr-cropper-cutout-shadow);
    height: 17.8rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 17.8rem;
    z-index: 0
}

.cropper .cutout.circle {
    border-radius: 50%
}

.cropper .overlay {
    cursor: move;
    position: absolute;
    touch-action: none;
    z-index: 1
}

.cropper .zoom-wrapper {
    height: 2rem;
    margin: 1rem auto;
    text-align: center;
    width: 80%
}

.cropper .zoom {
    box-shadow: none;
    pointer-events: none;
    z-index: 2
}

.cropper .zoom:focus {
    outline: none
}

.reply-quote {
    border-left: .25rem solid var(--clr-reply-quote-border);
    border-radius: .25rem;
    color: var(--clr-reply-quote-text);
    cursor: pointer;
    font-weight: lighter;
    line-height: 1.5em;
    padding: .15rem .5rem .25rem;
    position: relative
}

.chat-box .bubble .reply-quote {
    margin: .15rem -.75rem .3rem
}

.chat-box .bubble .reply-quote:first-child {
    margin-top: -.25rem
}

.chat-box .left .reply-quote {
    background-color: var(--clr-reply-quote-left-bg)
}

.chat-box .right .reply-quote {
    background-color: var(--clr-reply-quote-right-bg)
}

.reply-quote .inline-image {
    margin-bottom: .1rem;
    vertical-align: middle
}

.reply-quote img.inline-image:before {
    content: ""
}

#reply-quote-preview {
    align-items: center;
    display: flex
}

#reply-quote-preview .reply-quote {
    background-color: var(--clr-reply-quote-preview-bg);
    cursor: auto;
    margin: .35rem .5rem 0 0;
    width: 100%
}

#reply-quote-preview .cancel {
    min-width: 2.4rem;
    text-align: center
}

#reply-quote-preview .inline-image {
    background-color: var(--clr-border-light)
}

#reply-quote-preview img.inline-image:before {
    content: ""
}

#send-message-panel #reply-quote-preview {
    width: 100%
}

#send-message-panel #reply-quote-preview .reply-quote {
    margin-bottom: .35rem
}

.forwarding-quote {
    font-size: 200%;
    line-height: 200%
}

.mention {
    font-weight: 500
}

.forward-dialog {
    background-color: var(--clr-bright);
    border-radius: .3rem;
    box-shadow: .15rem .15rem 1.5rem var(--clr-shadow-dialog);
    height: 80%;
    margin: auto 1rem;
    overflow: hidden;
    padding: .5rem;
    position: relative;
    width: 24rem
}

.forward-dialog .scrollable-panel {
    height: 80%
}

.audio {
    align-items: center;
    background-color: var(--clr-audio-bg);
    border-radius: 1.5rem;
    display: flex;
    flex: none;
    height: 3rem;
    margin-left: auto
}

.audio canvas {
    height: 2.6rem;
    margin-right: 2rem;
    width: 14rem
}

.audio canvas.playback {
    margin-right: 0
}

.audio .duration {
    font-size: large
}

.audio-player {
    align-items: center;
    display: flex
}

.audio-player .material-icons.large {
    color: var(--clr-audio-icon);
    font-size: 2.4rem
}

.audio-player .material-icons.disabled {
    color: var(--clr-audio-icon-disabled);
    cursor: default
}

.audio-player .playback {
    height: 2.6rem;
    width: 14rem
}

.audio-player canvas.playback {
    display: block
}

.audio-player div.playback {
    align-items: center;
    color: var(--clr-audio-icon);
    display: flex;
    font-size: small;
    justify-content: center
}

.audio-player .timer {
    color: var(--clr-audio-timer-text);
    font-size: smaller
}

#pinned-wrapper {
    margin-right: .5rem
}

#pinned-wrapper, .pinned {
    align-items: center;
    display: flex;
    height: 100%;
    position: relative
}

.pinned {
    background-color: var(--clr-background-off-white);
    background-position: 50%;
    border-radius: 0 .25rem .25rem 0;
    color: var(--clr-text-primary);
    cursor: pointer;
    font-weight: lighter;
    min-width: 0;
    padding: .15rem .5rem .25rem;
    transition: background .4s;
    width: 24rem
}

.pinned > p {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pinned:hover {
    background-color: var(--clr-bright)
}

.pinned:active {
    background-color: var(--clr-blue-wash-medium);
    transition: background 0s
}

.pinned-scroll {
    align-items: center;
    background-color: var(--clr-background-extra-light-gray);
    border-radius: .25rem 0 0 .25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
    margin-left: .35rem;
    padding: .2rem;
    position: relative;
    user-select: none
}

.pinned-scroll .dot {
    background-color: var(--clr-text-tertiary);
    border-radius: 50%;
    height: .3rem;
    user-select: none;
    width: .3rem
}

.pinned-scroll .adot {
    background-color: var(--clr-light-blue-accent);
    border-radius: 50%;
    height: .45rem;
    user-select: none;
    width: .45rem
}

#pinned-wrapper:hover .menuTrigger {
    opacity: .9
}

#pinned-wrapper:hover .menuTrigger a {
    color: var(--clr-text-secondary)
}

.pinned-menu {
    background-color: var(--clr-pinned-menu-bg);
    border-radius: 0 .25rem .25rem 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: absolute;
    right: 0;
    top: 0
}

.pinned-menu .menuTrigger {
    position: relative;
    right: 0
}

.drag-n-drop {
    align-items: center;
    background-color: var(--clr-drag-n-drop-bg);
    border: .15rem dashed var(--clr-drag-n-drop-border);
    border-radius: 1rem;
    bottom: 1.5rem;
    color: var(--clr-drag-n-drop-text);
    display: flex;
    font-size: 2rem;
    justify-content: center;
    left: 1.5rem;
    outline: .5rem solid var(--clr-drag-n-drop-outline);
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    z-index: 3
}

.country-flag {
    display: inline-block;
    font-size: larger
}

.dial-code {
    cursor: pointer;
    display: inline-block;
    margin-bottom: .15rem;
    vertical-align: middle;
    white-space: nowrap
}

ul.phone-country-selector {
    list-style: none;
    overflow-x: hidden
}

ul.phone-country-selector > li {
    cursor: pointer;
    font-weight: lighter;
    padding: .25rem .5rem .15rem;
    position: relative;
    width: 100%
}

ul.phone-country-selector > li:hover {
    background-color: var(--clr-background-blue-gray-50)
}

ul.phone-country-selector > li.selected {
    background-color: var(--clr-background-blue-gray-100)
}

ul.phone-country-selector .dial-code {
    color: var(--clr-primary-action);
    font-weight: 400;
    position: absolute;
    right: .5rem
}

ul.phone-country-selector span {
    display: inline-block
}

ul.phone-country-selector span.country {
    overflow-x: hidden;
    text-overflow: ellipsis
}

.image-grid {
    display: grid;
    gap: .35rem;
    grid-template-columns:repeat(auto-fill, minmax(7rem, 1fr));
    padding: .25rem;
    position: relative
}

.image-grid-cell {
    border: 1.5px solid transparent;
    border-radius: .25rem;
    box-shadow: 0 0 .2rem var(--clr-shadow-hr-inset);
    cursor: pointer;
    height: 7rem;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%
}

.image-grid-cell img {
    object-fit: cover
}

.image-grid-cell.selected {
    border: 1.5px solid var(--clr-secondary-accent)
}

img.inverted {
    filter: invert(1)
}

div.toast {
    align-items: center;
    background-color: var(--clr-toast-bg);
    border-radius: .5rem;
    bottom: 2rem;
    box-shadow: 1px 2px .3rem var(--clr-shadow-gray-strong);
    color: var(--clr-toast-text);
    display: flex;
    font-weight: lighter;
    height: 3rem;
    justify-content: center;
    left: 50%;
    min-width: 10rem;
    padding: .5rem 1rem;
    position: absolute;
    translate: -50%;
    visibility: hidden;
    z-index: 3
}

div.toast.show {
    animation: fadein .5s, fadeout .5s 2.5s;
    visibility: visible
}

@keyframes fadein {
    0% {
        bottom: 0;
        opacity: 0
    }
    to {
        bottom: 2rem;
        opacity: 1
    }
}

@keyframes fadeout {
    0% {
        bottom: 2rem;
        opacity: 1
    }
    to {
        bottom: 0;
        opacity: 0
    }
}

@media (min-width: 1440px) {
    #app-container {
        max-width: 114rem
    }
}

@media (max-width: 960px) {
    #mountPoint {
        padding: 0
    }

    .pinned {
        width: 16rem
    }
}

@media (max-width: 640px) {
    #app-container {
        border-radius: 0;
        box-shadow: none;
        width: 100%
    }

    #info-view, #sidepanel {
        width: 100%
    }

    .forward-dialog {
        border-radius: .3rem .3rem 0 0;
        margin: auto 0 0;
        width: 100%
    }

    .menuTrigger {
        opacity: .3
    }

    #send-message-input {
        transition-property: -tinode-mobile
    }

    #pinned-wrapper {
        height: 3.5rem;
        margin: .25rem
    }

    .pinned {
        width: unset
    }

    #video-container.minimized {
        border-radius: unset;
        box-shadow: 0 0 .5rem var(--clr-shadow-gray-strong);
        flex-direction: row;
        height: 11rem;
        left: 0;
        top: var(--caption-panel-height);
        width: 100%
    }

    #controls.minimized {
        bottom: auto;
        column-gap: unset;
        flex-direction: column;
        right: 1rem;
        row-gap: .5rem
    }

    .minimized .call-party {
        border-radius: unset;
        box-shadow: unset
    }

    .call-party.self {
        border-radius: unset;
        bottom: 8.5rem
    }
}