.theme-dark { /* This definitely was not yoinked partly from discord */
    --header-primary: #ffffff;
    --header-secondary: #b9bbbe;
    --text-normal: #dcddde;
    --text-sending: #9ca1a8;
    --text-muted: #72767d;
    --text-link: #00b0f4;
    --interactive-normal: #b9bbbe;
    --interactive-hover: #dcddde;
    --interactive-active: #ffffff;
    --interactive-muted: #4f545c;
    --background-primary: #36393f;
    --background-secondary: #2f3136;
    --background-secondary-alt: #292b2f;
    --background-tertiary: #202225;
    --background-floating: #18191c;
    --background-modifier-hover: rgba(79, 84, 92, 0.16);
    --background-modifier-selected: rgba(79, 84, 92, 0.32);
    --background-modifier-accent: hsla(0, 0%, 100%, 0.06);
    --background-message-hover: rgba(4, 4, 5, 0.07);
    --background-overlay: rgba(0, 0, 0, 0.85);
    --channels-default: #8e9297;
    --channeltextarea-background: #40444b;
    --brand: #7289ba; /* yea that's a direct copy from discord */
    --brand-hover: #677bc4; /* thicc */
    --error: #d71f28; /* In fact, not copied! */

    --online: #2b9537;
    --offline: #9ca1a8;
    --away: #dab01d;
    --busy: #ce1515;

    --item-red: #da4040;
}

/* contenteditable placeholders */

[placeholder]:empty::before {
    content: attr(placeholder);
    color: var(--text-muted); 
    cursor: text;
}

/* disable draggable "ghost" image elements */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Shaking Elements */
@keyframes shake-horizontal {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5px, 0); }
    50% { transform: translate(0, 0); }
    75% { transform: translate(5px, 0); }
    100% { transform: translate(0, 0); }
}

.shaking-horizontal {
    animation: shake-horizontal 0.1s;
    animation-iteration-count: infinite;
}

/* Status Circles */

.online .status-circle {
    background-color: var(--online);
}

.away .status-circle {
    background-color: var(--away);
}

.busy .status-circle {
    background-color: var(--busy);
}

.unknown .status-circle,
.connecting .status-circle,
.offline .status-circle,
.invisible .status-circle {
    background-color: var(--offline);
}

/* Contexts */

.context {
    position: fixed;
}

.context .menu {
    min-width: 180px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: var(--background-floating);
    color: var(--text-normal);
    padding: 8px;
    border-radius: 4px;
}

.context .menu .item-spacer {
    background-color: var(--background-secondary);
    height: 1;
    margin: 6px 0;
}

.context .menu .item {
    padding: 8px;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.context .menu .item:hover {
    color: var(--header-primary);
    background-color: var(--brand-hover);
}

.context .menu .item.red {
    color: var(--item-red);
    font-weight: 600;
}

.context .menu .item.red:hover {
    color: var(--header-primary);
    background-color: var(--item-red);
}

.context .menu .item .icon {
    margin-right: 8px;
}

.context .menu .server-title-context .item .icon img,
.context .menu .server-title-context .item .icon svg {
    width: 16px;
    height: 16px;
}

.context .menu .member-context .item {
    display: flex;
    align-items: center;
    line-height: 1;
}

.context .menu .member-context .item .icon img,
.context .menu .member-context .item .icon svg {
    width: 10px;
    height: 10px;
}

.context .menu .member-context .item .status-circle {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-right: 8px;
}

.context .menu .member-context .item .status-text {
    text-transform: capitalize;
}

.context .above,
.context .below {
    display: flex;
    flex-flow: column;
    align-items: center;
    color: var(--background-floating); /* for the tab */
}

.context .above .content,
.context .below .content {
    color: var(--header-primary);
    background-color: var(--background-floating);
    padding: 8px;
    border-radius: 4px;
}

.context .info {
    display: flex;
    align-items: center;
    color: var(--background-floating); /* for the tab */
}

.context .info .content {
    background-color: var(--background-floating);
    color: var(--header-primary);
    padding: 12px;
    border-radius: 4px;
}

.context .info .content.server {
    line-height: 1;
}

.context .info .content.server .name:not(:last-child) {
    margin-bottom: 4px;
}

.context .info .content.server .connection {
    display: flex;
    align-items: center;
}

.context .info .content.server .connection .status-circle {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-right: 4px;
}

.context .info .content.server .connection .display-name {
    font-size: 12px;
}

/* Buttons */
.button {
    background-color: var(--brand);
    color: var(--header-primary);
    border-radius: 4px;
    padding: 8px 24px;
    cursor: pointer;
}

.button:hover {
    background-color: var(--brand-hover);
}

.member {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* members are used in the member list and the connection information */

.member .icon {
    position: relative;
    margin-right: 8px;
}

.member .avatar {
    width: 32px;
    height: 32px;
    border-radius: 16px;
}

.member .status-circle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    border-radius: 22px;
    width: 10px;
    height: 10px;
    border-width: 4px;
    border-style: solid;
}

/* see specific cases for width */
.member .name {
    color: var(--header-primary);
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.member .status-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-transform: capitalize;
    color: var(--channels-default);
}

/* channel feed custom scrollbar */
/* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */
#channel-feed-content-wrapper::-webkit-scrollbar {
    width: 16px;
}

#channel-feed-content-wrapper::-webkit-scrollbar-track {
    visibility: visible; /* always visible, does not disappear when not hovered over */
    box-shadow: 0 0 12px 12px var(--background-secondary) inset;
    border: 4px solid transparent;
    border-radius: 12px;
}

#channel-feed-content-wrapper::-webkit-scrollbar-thumb {
    visibility: visible; /* always visible, does not disappear when not hovered over */
    box-shadow: 0 0 12px 12px var(--background-tertiary) inset;
    border: 4px solid transparent;
    border-radius: 12px;
}

#channel-feed-content-wrapper::-webkit-scrollbar-button {
    display: none;
}

/* General custom scrollbar (much thinner than channel feed) */
/* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */

:not(:hover)::-webkit-scrollbar-thumb {
    visibility: hidden;
}

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

::-webkit-scrollbar-thumb {
    box-shadow: 0 0 2px 2px var(--background-tertiary) inset;
    border: 2px solid transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-button {
    display: none;
}

/* Prevent transitions (most notably, border-radius) before page load */
.preload * {
    transition: none !important;
}

* {
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: Whitney, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
}

:root {
    background-color: var(--background-tertiary);
}

body {
    display: flex;
    flex-direction: column;
}

body > .overlay {
    /* Note: skip top 22px so we don't overlay on the title bar */
    position: absolute;
    width: 100vw;
    height: calc(100vh - 22px);
    top: 22px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-overlay);
}

.error-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--header-primary);
}

.error-indicator img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.error-indicator .retry-button {
    color: var(--text-link);
    cursor: pointer;
}

.error-indicator .retry-button:hover {
    text-decoration: underline;
}

#title-bar {
    display: flex;
}

#title-bar #title {
    color: var(--text-muted);
    padding: 6px 0px 0px 10px;
    flex: 1;
    -webkit-app-region: drag; /* Also allows for double-click maximise & right-click menu */
}

#title-bar #window-actions {
    display: flex;
}

#window-actions > * {
    color: var(--interactive-normal);
    background: none;
    border: none;
    width: 28px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#window-actions #minimize:hover,
#window-actions #maximize:hover {
    color: var(--interactive-hover);
    background-color: var(--background-modifier-hover);
}

#window-actions #close:hover {
    color: #fff;
    background-color: #f04747;
}

#content {
    flex: 1;
    display: flex;
}

#server-list-container {
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    box-sizing: border-box;
    flex: none; /* >:| NOT GONNA SHINK BOI */
    width: 72px; /* TODO: auto-calculated from content */
    height: calc(100vh - 22px);
    padding-top: 8px;
    overflow-y: scroll;
}

#server-list {
    display: flex;
    flex-flow: column;
}

#server-list::-webkit-scrollbar {
    display: none;
}

#add-server,
#server-list .server {
    cursor: pointer;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#add-server .pill,
#server-list .server .pill {
    background-color: var(--header-primary);
    width: 8px;
    height: 0;
    border-radius: 4px 4px;
    margin-left: -4px;
    margin-right: 8px;
    transition: height .1s ease-in-out;
}

#server-list .server.active .pill {
    height: 40px;
}

#server-list .server.unread:not(.active) .pill {
    height: 8px;
}

#add-server:hover .pill,
#server-list .server:not(.active):hover .pill {
    height: 20px;
}

#add-server img,
#server-list .server img {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    transition: border-radius .1s ease-in-out;
}

#add-server:hover img,
#server-list .server:hover img,
#server-list .server.active img {
    border-radius: 16px;
}

#server {
    flex: 1;
    display: flex;
}

#server-sidebar {
    flex: none; /* >:| NOT GONNA SHINK BOI */
    width: 240px;
    display: flex;
    flex-direction: column;
    background-color: var(--background-secondary);
    border-top-left-radius: 8px;
}

#server-name-container {
    padding: 0 16px;
    height: 48px;
    font-weight: 600;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--header-primary);
    border-bottom: 1px solid var(--background-secondary-alt);
}

#server-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#server.privilege-modify_profile #server-name,
#server.privilege-modify_members #server-name {
    cursor: pointer;
}

#channel-list {
    box-sizing: border-box;
    padding-top: 8px;
    overflow-y: scroll;
    height: calc(100vh - 71px - 51px); /* May be nice to figure out a way to do this without fixed heights */
}

#channel-list .channel {
    color: var(--channels-default);
    margin: 0 0 2px 8px;
    padding: 0 8px;
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

#channel-list .channel.active {
    color: var(--interactive-active);
    background-color: var(--background-modifier-selected);
}

#channel-list .channel:not(.active):hover {
    color: var(--interactive-hover);
    background-color: var(--background-modifier-hover);
}

#channel-list .channel .icon {
    margin-right: 6px
}

#channel-list .channel .icon svg {
    width: 20px;
    height: 20px;
}

#channel-list .channel .name {
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#channel-list .channel .modify {
    display: none;
    margin-left: 6px;
}

#server.privilege-modify_channels #channel-list .channel:hover .modify,
#server.privilege-modify_channels #channel-list .channel.active .modify {
    display: unset;
}

#connection.hidden {
    visibility: hidden;
}

#connection.member {
    background-color: var(--background-secondary-alt);
    padding: 8px;
    cursor: pointer; /* clicking on this brings up the select-status context menu */
}

#connection.member .name {
    width: calc(224px - 40px);
}

#member-name.name {
    font-weight: 600;
}

#member-status-circle.status-circle {
    border-color: var(--background-secondary-alt);
}

#channel {
    flex: 1;
    background-color: var(--background-primary);
    display: flex;
    flex-direction: column;
}

.channel-title {
    height: 48px;
    display: flex;
    align-items: center;
    color: var(--header-primary);
    background-color: var(--background-primary); /* Different from discrod */
    border-bottom: 1px solid var(--background-secondary-alt);
}

.channel-title:not(.preview) {
    width: calc(100vw - 240px - 72px); /* for ellipsis overflow */
}

.channel-title .channel-icon {
    margin: 0 8px;
    width: 24px;
    height: 24px;
}

.channel-title .channel-name {
    font-weight: 600;
    white-space: nowrap;
}

.channel-title .channel-flavor-divider {
    width: 1px;
    height: 24px;
    margin: 0 16px;
    background-color: var(--background-modifier-accent);
}

.channel-title .channel-flavor-text {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    padding-right: 16px;
    color: var(--header-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#channel-content {
    flex: 1;
    display: flex;
}

#channel-feed-wrapper {
    flex: 1;
    width: 0;
    display: flex;
    flex-direction: column;
}

#channel-feed-content-wrapper {
    /* https://stackoverflow.com/q/18614301 */
    /* to keep the scrollbar at the bottom by default */
    box-sizing: border-box;
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: calc(16px + 8px);
    margin-bottom: calc(65px - 4px - 8px); /* 4px for the bottom of the scrollbar, 8px for the border radius */
    height: calc(100vh - 71px - 65px + 4px + 8px); /* TODO: Going to have to find a way to do this without a fixed height since the message box needs to be scalable */
    overflow-y: scroll;
    overflow-x: hidden;
}

#channel-feed .date-spacer {
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
}

#channel-feed .date-spacer .line {
    flex: 1;
    height: 1;
    background-color: var(--background-modifier-accent);
}

#channel-feed .date-spacer .date {
    font-size: 12px;
    line-height: 13px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 2px 4px;
    margin: 0 8px;
}

#channel-feed .message:hover {
    background-color: var(--background-message-hover);
}

.message {
    display: flex;
    padding: 4px 16px;
}

.message .member-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
}

.message .right {
    flex: 1;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-left: 16px; /* putting the margin here rather than on the avatar makes selecting better */
    user-select: text;
}

.message .header {
    display: flex;
    align-items: baseline;
}

.message .member-name {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: var(--header-primary);
    cursor: pointer;
    white-space: nowrap;
}

.message .member-name:hover {
    text-decoration: underline;
}

.message .timestamp {
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 4px;
    white-space: nowrap;
}

.message .content {
    font-size: 16px;
    color: var(--text-normal);
    overflow-wrap: anywhere;
}

.message .content.text {
    white-space: pre-wrap;
}

.message .content.text .bold {
    font-weight: 600;
    color: var(--header-primary); /* a bit brighter for some more emphasis */
}

.message .content.text .underline {
    text-decoration: underline;
}

.message .content.text .italic {
    font-style: italic;
}

.message .content.image {
    /* Center the loading icon */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: var(--background-secondary-alt);
    cursor: pointer;
    overflow: hidden;
}

.message .content.image img {
    max-width: 400px;
    max-height: 300px;
    border-radius: 8px;
}

/* TODO: ellipse the overflow */
.message .content.resource {
    min-width: 300px;
    max-width: 400px;
    display: flex;
    align-items: center;
    background-color: var(--background-secondary-alt);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.message .content.resource > :not(:last-child) {
    margin-right: 8px;
}

.message .content.resource .icon {
    width: 26px;
    height: 26px;
    -webkit-user-select: none;
    user-select: none;
}

.message .content.resource .filename {
    color: var(--text-link);
}

.message .content.resource .download-status {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    -webkit-user-select: none;
    user-select: none;
}

.message .content.resource:hover .download-status {
    text-decoration: underline;
}

.message.continued {
    margin-top: -4px;
}

.message.continued .timestamp {
    flex: none; /* >:| NOT GONNA SHRINK BOI */
    margin: 0;
    width: 40px;
    visibility: hidden;
}

.message.continued:hover .timestamp {
    visibility: visible;
}

#channel-feed-input-wrapper {
    position: relative;
    height: 0;
}

#channel-feed-input {
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding-bottom: 16px;
    margin: 0 16px;
    width: calc(100% - 32px);
    display: flex;
    flex-flow: column-reverse;
    background-color: var(--background-primary);
    border-radius: 8px;
}

#error-bar {
    position: relative;
    height: 0;
}

#send-error:not(:empty) {
    cursor: pointer;
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 8px;
    line-height: 1;
    border: 1px solid var(--error);
    background-color: var(--background-secondary);
    color: var(--header-primary);
}

#input-bar {
    font-family: Whitney;
    background-color: var(--channeltextarea-background);
    border-radius: 8px;
    display: flex;
    align-items: center;
}

#resource-input-button {
    color: var(--text-normal);
    cursor: pointer;
    margin: 10px;
}

#resource-input-button svg {
    width: 24px;
    height: 24px;
}

#text-input {
    flex: 1;
    padding: 12px 12px 12px 0;
    color: var(--text-normal);
    overflow-wrap: anywhere;
    overflow-y: scroll;
    max-height: 300px;
}

#text-input:focus {
    outline: none;
}

#text-input.sending {
    color: var(--text-sending);
}

/* Popup Image Overlay */

.overlay .content.popup-image {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.overlay .content.popup-image > img {
    max-width: 70vw;
    max-height: 70vh;
}

.overlay .content.popup-image .download {
    background-color: var(--background-primary);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    margin-top: 8px;
    justify-content: space-between;
}

.overlay .content.popup-image .download .info {
    margin-right: 8px;
}

.overlay .content.popup-image .download .info .name {
    font-weight: 600;
    color: var(--text-normal);
}

.overlay .content.popup-image .download .info .size {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-sending);
}

/* Drop Target Overlay */

.overlay .content.drop-target {
    box-sizing: border-box;
    width: calc(100vw - 32px);
    height: calc(100vh - 22px - 32px);
    margin: 16px;
    border: 4px dashed var(--background-primary);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay .content.drop-target * {
    pointer-events: none;
}

.overlay .content.drop-target .message {
    border-radius: 8px;
    padding: 32px;
    background-color: var(--background-primary);
    color: var(--header-primary);
    font-size: 48px;
    font-weight: 600;
}

/* Upload Overlay */

.overlay .content.upload {
    background-color: var(--background-primary);
    width: 500px;
    border-radius: 12px;
    padding: 16px;
}

.overlay .content.upload .title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

.overlay .content.upload .title img {
    max-width: 128px;
    max-height: 128px;
    border-radius: 8px;
    margin-right: 16px;
}

.overlay .content.upload .title .right > *:not(:last-child) {
    margin-bottom: 8px;
}

.overlay .content.upload .title .right > * {
    color: var(--text-normal);
}

.overlay .content.upload .title .right > .name {
    font-weight: 600;
    font-size: 1.25em;
    color: var(--header-primary);
}

.overlay .content.upload .text-input {
    color: var(--text-normal);
    background-color: var(--channeltextarea-background);
    border-radius: 8px;
    max-height: 100px;
    overflow-y: scroll;
    padding: 14px 16px 14px 16px;
}

.overlay .content.upload .text-input:focus {
    outline: none;
}

.overlay .content.upload .lower {
    margin-top: 16px;
    display: flex;
    align-items: center;
}

.overlay .content.upload .lower .error {
    flex: 1;
    color: var(--header-primary);
}

.overlay .content.upload .buttons {
    display: flex;
    justify-content: flex-end;
}

/* General Submit Dialog Overlays */

.overlay .content.submit-dialog {
    background-color: var(--background-secondary);
    border-radius: 8px;
}

.overlay .content.submit-dialog .image-input {
    margin: 16px;
    display: flex;
    align-items: center;
}

.overlay .content.submit-dialog .text-input {
    margin: 16px;
    color: var(--text-normal);
    background-color: var(--channeltextarea-background);
    border-radius: 8px;
    max-height: 100px;
    overflow-y: scroll;
    padding: 14px 16px;
}

.overlay .content.submit-dialog .text-input:focus {
    outline: none;
}

.overlay .content.submit-dialog .lower {
    padding: 16px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-tertiary);
}

.overlay .content.submit-dialog .error {
    color: var(--text-normal);
}

.overlay .content.submit-dialog .buttons {
    margin-left: 16px;
    display: flex;
}

/* Personalization Overlay */

.overlay .content.personalize {
    min-width: 350px;
}

.overlay .content.personalize .message {
    margin: 16px;
    padding: 0 4px;
}

/* Server Settings Overlay */

.overlay .content.server-settings {
    min-width: 350px;
}

.overlay .content.server-settings .preview {
    display: flex;
    align-items: center;
    margin: 16px;
}

.overlay .content.server-settings .preview .icon img {
    width: 48px;
    height: 48px;
    border-radius: 24px;
}

.overlay .content.server-settings .preview .icon {
    margin-right: 16px;
}

.overlay .content.server-settings .preview .name {
    color: var(--header-primary);
    font-weight: 500;
}

/* Add Server Overlay */

.overlay .content.add-server {
    min-width: 350px;
    background-color: var(--background-secondary);
    border-radius: 12px;
}

.overlay .content.add-server .divider {
    margin: 16px;
    height: 1px;
    background-color: var(--background-primary);
}

.overlay .content.add-server .preview {
    margin: 16px;
    display: flex;
    align-items: center;
}

.overlay .content.add-server .preview .icon {
    width: 64px;
    height: 64px;
    margin-right: 16px;
    border-radius: 16px;
}

.overlay .content.add-server .preview .name {
    color: var(--header-primary);
    font-size: 1.25em;
    font-weight: 600;
}

.overlay .content.add-server .preview .url {
    color: var(--text-normal);
}

.overlay .content.add-server .preview .expires {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.overlay .content.add-server .message {
    margin: 16px;
    padding: 0;
}

.overlay .content.add-server .avatar-input {
    margin: 16px;
    display: flex;
    align-items: center;
}

.overlay .content.add-server .display-name-input {
    margin: 16px;
    color: var(--text-normal);
    background-color: var(--channeltextarea-background);
    border-radius: 8px;
    max-height: 100px;
    overflow-y: scroll;
    padding: 14px 16px;
}

.overlay .content.add-server .display-name-input:focus {
    outline: none;
}

.overlay .content.add-server .lower {
    padding: 16px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-tertiary);
}

.overlay .content.add-server .error {
    color: var(--text-normal);
}

.overlay .content.add-server .error::first-letter {
    text-transform: uppercase;
}

.overlay .content.add-server .buttons {
    margin-left: 16px;
    display: flex;
}

/* Modify Channel Overlay */

.overlay .content.modify-channel {
    min-width: 350px;
    max-width: calc(100vw - 80px);
}

.overlay .content.modify-channel .preview.channel-title {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding-right: 8px;
}

.overlay .content.modify-channel .text-input.channel-name {
    text-transform: lowercase;
}

/* Error Message Overlay */

.overlay .content.error-message {
    background-color: var(--background-secondary);
    padding: 16px;
    border-radius: 12px;
}

.overlay .content.error-message .title {
    color: var(--header-primary);
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
}

.overlay .content.error-message .message {
    padding: 0;
    color: var(--text-normal);
}

/* View Tokens Overlay */
.overlay .content.token-log {
    background-color: var(--background-secondary);
    padding: 16px;
    border-radius: 12px;
    color: var(--text-normal);
}

.overlay .content.token-log .tokens .token-display {
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
}

.overlay .content.token-log .tokens .token-display:hover {
    background-color: var(--background-secondary-alt);
}

.overlay .content.token-log .tokens .token-display:last-child {
    margin-bottom: 0;
}

.overlay .content.token-log .tokens .instance {
    display: flex;
    justify-content: space-between;
    width: 400px;
    margin-right: 8px;
}

.overlay .content.token-log .tokens .instance .left {
    text-align: left;
}

.overlay .content.token-log .tokens .instance .right {
    text-align: right;
}

.overlay .content.token-log .tokens .instance .member {
    font-weight: 600;
    font-size: 16px;
}

.overlay .content.token-log .tokens .instance .token {
    font-size: 12px;
    color: var(--text-muted);
}

.overlay .content.token-log .tokens .instance .expires,
.overlay .content.token-log .tokens .instance .created {
    font-size: 14px;
}

.overlay .content.token-log .tokens .buttons {
    display: flex;
}

.overlay .content.token-log .tokens .buttons .download {
    cursor: pointer;
    border-radius: 4px;
    padding: 8px;
    background-color: var(--away);
    margin-right: 8px;
}

.overlay .content.token-log .tokens .buttons .revoke {
    cursor: pointer;
    border-radius: 4px;
    padding: 8px;
    background-color: var(--busy)
}

#server-members {
    box-sizing: border-box;
    flex: none; /* >:| NOT GONNA SHINK BOI */
    background-color: var(--background-secondary);
    width: 240px;
    height: calc(100vh - 71px);
    overflow-y: scroll;
    padding: 8px 0 8px 8px;
}

#server-members .member {
    background-color: var(--background-secondary);
    padding: 4px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
}

#server-members .member .name {
    width: calc(208px - 40px);
}

#server-members .member .status-circle {
    border-color: var(--background-secondary);
}

#server-members .member:hover {
    background-color: var(--background-modifier-hover);
    cursor: pointer;
}