:root {
    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;
    --clr-bright: light-dark(#fff, #181818);
    --clr-dark: light-dark(#000, #fff);
    --clr-transparent: transparent;
    --clr-std-gray: grey;
    --clr-std-ltgray: light-dark(silver, #3f3f3f);
    --clr-std-teal: teal;
    --clr-std-grey: grey;
    --clr-std-orange: orange;
    --clr-primary-accent: light-dark(#2094f3, #0e6dba);
    --clr-primary-accent-hover: light-dark(#0a6ebd, #116ab4);
    --clr-primary-accent-focus-shadow: light-dark(rgba(33, 150, 243, .25), rgba(3, 7, 12, .25));
    --clr-primary-accent-transparent-medium: light-dark(rgba(33, 150, 243, .3), rgba(20, 70, 120, .3));
    --clr-primary-action: light-dark(#1e89e6, #1571c1);
    --clr-primary-action-hover: light-dark(#2962ff, #0037b8);
    --clr-secondary-accent: light-dark(#0097a8, #006570);
    --clr-primary-light-blue: light-dark(#bcdefb, #78a0be);
    --clr-light-blue-accent: light-dark(#0398e2, #0379b5);
    --clr-body-background: var(--clr-std-ltgray);
    --clr-text-primary: light-dark(#666, #999);
    --clr-text-secondary: light-dark(#757575, #8a8a8a);
    --clr-text-tertiary: light-dark(#999, #787878);
    --clr-text-tertiary-activated: #888;
    --clr-text-placeholder: light-dark(#bbb, #555);
    --clr-text-disabled: light-dark(#888, #777);
    --clr-border-light: light-dark(#ccc, #555);
    --clr-border-muted: light-dark(#ddd, #444);
    --clr-background-off-white: light-dark(#fafafa, #222);
    --clr-background-light-gray: light-dark(#f0f0f0, #0f0f0f);
    --clr-background-extra-light-gray: light-dark(#eee, #222);
    --clr-background-blue-gray-50: light-dark(#edf0f2, #202c33);
    --clr-background-blue-gray-75: light-dark(#e1e8eb, #182124);
    --clr-background-blue-gray-100: light-dark(#cfd8dc, #20272a);
    --clr-background-blue-gray-300: light-dark(#b0bec5, #354146);
    --clr-blue-wash-light: light-dark(#f0f0ff, #22222d);
    --clr-blue-wash-medium: light-dark(#d8e8ff, #123550);
    --clr-primary-wash: light-dark(#e3f2fd, #072f45);
    --clr-indigo-50: light-dark(#e8eaf6, #1a2c44);
    --clr-danger-text: light-dark(#d33131, #931f1f);
    --clr-danger-text-hover: light-dark(#f44034, #c10);
    --clr-error-text-muted: light-dark(#c66, #933);
    --clr-error-bg-light: light-dark(#ffccd1, #ff6675);
    --clr-error-border-light: light-dark(#ffbdc6, #ff334e);
    --clr-error-text-dark: light-dark(#b51c1c, #de2323);
    --clr-error-icon: light-dark(#ef5552, #d81b0e);
    --clr-warning-accent: light-dark(#ffc107, #808020);
    --clr-warning-bg-light: light-dark(#fff9c4, #00060c);
    --clr-warning-border-light: light-dark(#fff59d, #000a2b);
    --clr-warning-text-dark: light-dark(#6d4c41, #a08356);
    --clr-warning-icon: light-dark(#fbc02d, #b48204);
    --clr-info-bg-light: light-dark(#e1f5fe, #010a0e);
    --clr-info-border-light: light-dark(#b3e5fc, #001824);
    --clr-info-text-dark: light-dark(#0288d1, #00151f);
    --clr-header-stripe-bg: light-dark(#3949ab, #12152f);
    --clr-scrollbar-thumb: light-dark(rgba(0, 0, 0, .3), hsla(0, 0%, 100%, .3));
    --clr-scrollbar-track: light-dark(hsla(0, 0%, 100%, .1), rgba(0, 0, 0, .1));
    --clr-menu-item-hover-bg: light-dark(#f5f5f5, #0a0a0a);
    --clr-alert-overlay-bg: light-dark(hsla(0, 0%, 94%, .85), hsla(0, 0%, 6%, .85));
    --clr-verified-accent: light-dark(#02a6f2, #027db6);
    --clr-staff-accent: light-dark(#689f38, #598830);
    --clr-badge-inv: light-dark(#fffd, #cccd);
    --clr-cyan-50: light-dark(#e0f7fa, #2f3e43);
    --clr-overlay-white-strong: light-dark(hsla(0, 0%, 100%, .9), rgba(0, 0, 0, .9));
    --clr-gray-medium-bg: light-dark(#777, #444);
    --clr-toast-bg: #333;
    --clr-toast-text: light-dark(#eee, #aaa);
    --clr-online: #4caf50;
    --clr-offline: light-dark(#ccc, #999);
    --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);
    --clr-shadow-gray-strong: light-dark(var(--clr-std-gray), #333);
    --clr-shadow-silver-subtle: light-dark(var(--clr-std-ltgray), #333);
    --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);
    --clr-button-danger-bg: light-dark(#ec645f, #d74742);
    --clr-button-danger-text: var(--clr-bright);
    --clr-button-danger-hover-bg: light-dark(#f77, #a55);
    --clr-button-positive-bg: light-dark(#71c46f, #3f983e);
    --clr-button-positive-text: var(--clr-bright);
    --clr-button-positive-hover-bg: light-dark(#7fed7f, #6ec26e);
    --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);
    --clr-input-invalid-border: light-dark(#e57171, #561010);
    --clr-input-invalid-shadow: light-dark(#e5737340, #1a0c0c40);
    --clr-input-placeholder-text: var(--clr-text-placeholder);
    --clr-bubble-left-bg: light-dark(#c4e0a3, #3e5c1f);
    --clr-bubble-left-bg-flash: light-dark(#94a97c, #2c4517);
    --clr-bubble-right-bg: var(--clr-background-off-white);
    --clr-bubble-right-bg-flash: var(--clr-border-light);
    --clr-bubble-text: light-dark(#212121, #bbc);
    --clr-bubble-meta-text: var(--clr-text-primary);
    --clr-bubble-meta-deleted-bg: var(--clr-primary-wash);
    --clr-bubble-meta-date-bg: light-dark(hsla(0, 0%, 100%, .8), rgba(40, 40, 40, .8));
    --clr-bubble-timestamp-text: light-dark(#777, #888);
    --clr-bubble-author-text: light-dark(#777, #666);
    --clr-reply-quote-border: var(--clr-light-blue-accent);
    --clr-reply-quote-text: var(--clr-text-primary);
    --clr-reply-quote-left-bg: light-dark(hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .4));
    --clr-reply-quote-right-bg: light-dark(#8080801f, #c4c4c42e);
    --clr-reply-quote-preview-bg: var(--clr-background-off-white);
    --clr-badge-default-bg: light-dark(#e8e8e8, #171717);
    --clr-badge-default-text: var(--clr-text-primary);
    --clr-badge-default-border: var(--clr-std-ltgray);
    --clr-badge-green-bg: light-dark(#efe, #131);
    --clr-badge-green-text: light-dark(#383, #363);
    --clr-badge-green-border: light-dark(#aca, #242);
    --clr-badge-yellow-bg: light-dark(#ffe, #331);
    --clr-badge-yellow-text: light-dark(#660, #660);
    --clr-badge-yellow-border: light-dark(#cc9, #552);
    --clr-badge-blue-bg: light-dark(#f0f0ff, #224);
    --clr-badge-blue-text: light-dark(#339, #447);
    --clr-badge-blue-border: light-dark(#aad, #336);
    --clr-badge-red-bg: light-dark(#fee, #522);
    --clr-badge-red-text: light-dark(#933, #744);
    --clr-badge-red-border: light-dark(#c99, #633);
    --clr-badge-magenta-bg: light-dark(#fef, #535);
    --clr-badge-magenta-text: light-dark(#939, #747);
    --clr-badge-magenta-border: light-dark(#c9c, #636);
    --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);
    --clr-chip-remove-icon-bg: light-dark(#aaa, #555);
    --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);
    --clr-tabbar-inactive-text: light-dark(rgba(33, 150, 243, .6), #165aa0);
    --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);
    --clr-highlight-preview-text: light-dark(#5f9ea0, #205e60);
    --clr-spinner-track: light-dark(#f3f3f3, #0c0c0c);
    --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);
    --clr-cropper-cutout-shadow: light-dark(rgba(230, 246, 255, .66), rgba(25, 10, 0, .66));
    --clr-audio-bg: var(--clr-background-extra-light-gray);
    --clr-audio-icon: light-dark(hsla(180, 7%, 43%, .8), hsla(0, 7%, 57%, .8));
    --clr-audio-icon-disabled: light-dark(hsla(0, 0%, 60%, .75), hsla(0, 0%, 40%, .75));
    --clr-audio-timer-text: light-dark(hsla(0, 0%, 40%, .75), hsla(0, 0%, 60%, .75));
    --clr-pinned-menu-bg: light-dark(#f8f8f8, #1a1a1a);
    --clr-drag-n-drop-border: var(--clr-std-grey);
    --clr-drag-n-drop-text: var(--clr-std-grey);
    --clr-drag-n-drop-bg: light-dark(hsla(0, 0%, 100%, .95), rgba(0, 0, 0, .95));
    --clr-drag-n-drop-outline: light-dark(hsla(0, 0%, 100%, .95), rgba(0, 0, 0, .95));
    --clr-lettertile-default-text: light-dark(#fafafacc, #dcdcdccc);
    --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)
}

* {
    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 {
    margin-top: 10px;
    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 {
    margin-top: 20px;
    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 {
    color: light-dark(#388e3c, #1a9a1d)
}

.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 {
    position: relative;
    top: -2px;
    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: center
}

.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 {
    color: light-dark(#777, #666);
    margin-bottom: .2rem
}

.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
    }
}