html,
body {
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}

body {
    padding: 0;
    margin: 0;
}

.special {
    background: linear-gradient(var(--rb0), var(--rb10), var(--rb20), var(--rb30), var(--rb40), var(--rb50), var(--rb60), var(--rb70), var(--rb80), var(--rb90), var(--rb100));
    background-size: 100% 1000%;
    background-position: 0 200%;
    animation: rb 40s linear infinite;
    text-shadow: var(--text-shadow);
}

@keyframes rb {
    to {
        background-position: 0 -1000%;
    }
}

#status_bar {
    display: none;
    position: absolute;
    z-index: 2000;
    height: 4px;
    width: 100%;
    background-color: var(--gray);
}

#input_area {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-end;
}

#addons_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#citation_container {
    visibility: hidden;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 20px;
    bottom: 75px;
    max-width: calc(35vw);
    background-color: var(--chat-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    color: var(--font-color);
    opacity: 0.9;
    transition: opacity 0.2s;
    z-index: 3;
}

#citation_container:hover {
    opacity: 1;
}

#citation_flag {
    position: absolute;
    width: 5px;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--red);
}

#citation_body {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#citation_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4px;
}

#citation_title {
    font-weight: bold;
}

#citation_del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s;
    margin-left: 8px;
}

#citation_del:hover {
    box-shadow: var(--box-shadow);
}

#citation_text {
    word-break: break-all;
    overflow-y: auto;
    max-height: 200px;
    padding-right: 8px;
}

.message_citation {
    position: relative;
    margin: 8px;
    display: flex;
    flex-direction: column;
    background-color: var(--chat-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    color: var(--font-color);
    opacity: 0.9;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
}

.message_citation_flag {
    position: absolute;
    width: 5px;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--red);
}

.message_citation_header {
    margin-bottom: 4px;
}

.message_citation_body {
    white-space: pre-wrap;
    overflow-x: auto;
}

#input_addons_wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 20px;
    bottom: 75px;
}

#file_display {
    z-index: 5;
    display: flex;
    align-self: flex-end;
    visibility: hidden;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    max-width: calc(50vw - 64px);
    height: 120px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
}

#editor {
    display: flex;
    width: calc(100% - 64px - 74px);
    margin-left: 32px;
    min-height: 37px;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 8px;
    background-color: var(--chat-bg-color);
    color: var(--chat-text-color);
    border: 1px solid #ccc;
    box-sizing: border-box;
    overflow-wrap: break-word;
    outline: none;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-color: var(--primary-color);
    z-index: 5;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 40vh;
}

#pick_emoji {
    color: var(--font-color-neg);
    display: flex;
    align-items: center;
    justify-content: center;
}

#pick_file {
    color: var(--font-color-neg);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

#send_msg {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-color-neg);
    border-radius: 100px;
    width: 48px;
    height: 48px;
    background-color: var(--primary-color);
    box-shadow: var(--box-shadow);
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#send_msg:hover {
    background-color: var(--primary-color-dark);
}

.inputBtn {
    display: flex;
    width: 37px;
    height: 37px;
    margin-top: 16px;
    margin-bottom: 16px;
    background-color: var(--primary-color);
    transition: background-color 0.2s;
    cursor: pointer;
    user-select: none;
    align-self: flex-end;
}

.inputBtn:hover {
    background-color: var(--primary-color-dark);
}

#menu_wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#menu_bar {
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--font-color-neg);
    padding: 8px;
    min-height: 24px;
    max-height: 24px;
}

#chat_wrapper {
    width: 100%;
    display: flex;
    flex: 1;
    overflow: hidden;
}

#list_area {
    background-color: var(--chat-bg-color-alt);
    color: var(--font-color);
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#user_info {
    display: flex;
    /* display: none; */
    position: relative;
    height: var(--chat-info-height);
    width: 100%;
    background-color: var(--chat-bg-color-alt);
    border-bottom: 1px solid var(--gray);
    box-sizing: border-box;
}

#user_info_image {
    position: relative;
    min-width: calc(var(--chat-info-height) - 1px);
    min-height: calc(var(--chat-info-height) - 1px);
    max-width: calc(var(--chat-info-height) - 1px);
    max-height: calc(var(--chat-info-height) - 1px);
}

#user_info_name {
    padding: 8px;
    font-size: 18px;
    width: calc(100% - 10px);
    height: 21px;
}

#user_info_status {
    padding-left: 8px;
    font-size: calc(var(--font-size) - 2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 10px);
    height: 37px;
}

#user_info_name,
#user_info_status {
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
    user-select: none;
}

#user_info_name:hover,
#user_info_status:hover {
    background-color: var(--chat-bg-color);
}

#user_info_profile_image {
    object-fit: cover;
    transition: border-radius 0.2s;
}

#user_info_image:hover * {
    border-radius: 15%;
}

#user_info_profile_static_image {
    position: absolute;
    visibility: collapse;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: border-radius 0.2s;
}

.online_status_blob {
    height: 24px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    z-index: 1;
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

#user_status_container {
    z-index: 2;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 48px;
    left: -32px;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, left 0.2s;
    background-color: var(--chat-bg-color);
    padding: 12px 16px;
    border-radius: var(--border-radius);
}

#user_status_container.visible {
    opacity: 1;
    left: 12px;
    visibility: visible;
}

.online_status_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--font-color);
    gap: 8px;
    padding: 4px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.online_status_wrapper:hover {
    background-color: var(--chat-bg-color-alt);
}

#online_status_1 .online_status_blob {
    background-color: var(--online);
}

#online_status_2 .online_status_blob {
    background-color: var(--yellow);
}

#online_status_3 .online_status_blob {
    background-color: var(--red);
}

#user_info_online_status {
    background-color: var(--gray);
}

#online_status_wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

#online_status_wrapper:hover #user_info_online_status_caption {
    opacity: 1;
}

#user_info_online_status_caption {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* #user_settings_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    transition: background-color 0.2s;
    background-color: var(--chat-bg-color-alt);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    height: 34px;
    width: 37px;
    user-select: none;
}

#user_settings_btn:hover {
    background-color: var(--chat-bg-color);
} */

/* #user_mute_btn {
    position: absolute;
    top: 0;
    right: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    transition: background-color 0.2s, height 0.2s;
    background-color: var(--chat-bg-color-alt);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    height: 7px;
    width: 37px;
    user-select: none;
    overflow: hidden;
}

#user_mute_btn:hover {
    background-color: var(--chat-bg-color);
    height: 34px;
}

#user_mute_btn:hover svg {
    visibility: visible;
    opacity: 1;
}

#user_mute_btn svg {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
} */

#user_mute_btn {
    gap: 0px;
}

#user_mute_btn .fa-bell-slash {
    color: var(--font-color);
    transition: color 0.2s ease;
}

#user_mute_btn.muted .fa-bell-slash {
    visibility: visible;
    color: var(--red);
}

#user_mute_btn:not(.muted) .fa-bell-slash {
    visibility: collapse;
    height: 0;
    margin: 0;
    padding: 0;
}

#user_mute_btn .fa-bell {
    color: var(--font-color);
    transition: color 0.2s ease;
}

#user_mute_btn.muted .fa-bell {
    visibility: collapse;
    color: var(--red);
    height: 0;
    margin: 0;
    padding: 0;
}

#broadcast_btn {
    visibility: hidden;
}

/* #broadcast_btn {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    transition: background-color 0.2s, height 0.2s;
    background-color: var(--chat-bg-color-alt);
    box-shadow: var(--box-shadow);
    cursor: pointer;
    height: 7px;
    width: 37px;
    user-select: none;
    overflow: hidden;
    visibility: hidden;
}

#broadcast_btn:hover {
    height: 34px;
    background-color: var(--chat-bg-color-alt);
}

#broadcast_btn:hover svg {
    display: block;
    opacity: 1;
}

#broadcast_btn svg {
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
} */

.user_info_row {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 8px;
}

.user_info_column {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.icon_btn {
    opacity: 0.2;
    transition: opacity 0.2s;
    cursor: pointer;
    padding: 4px;
}

.icon_btn:hover {
    opacity: 1;
}

.sidebar_wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    height: calc(100% - 75px);
    flex: 1;
    /* height: 500px; */
    overflow: hidden;
}

.tab {
    display: flex;
    flex-direction: column;
    background-color: var(--chat-bg-color-alt);
    box-shadow: var(--box-shadow);
    /* height: 35px; */
}

.tab button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: inherit;
    color: inherit;
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    /* padding: 8px; */
    transition: 0.2s;
}

.tab button:hover {
    background-color: var(--chat-bg-color);
}

.tab button.active {
    position: relative;
    /* background-color: var(--chat-bg-color); */
    color: var(--accent-color);
}

.tab button.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--accent-color);
}

.tab.extended .tab-caption {
    display: block;
}

.tablinks {
    padding: 12px;
}

.tab-caption {
    display: none;
}

.tab-caption.visible {
    display: block;
}

.tab-filler {
    flex: 1;
}

.tabcontent {
    display: none;
    min-height: 0;
}

.tabcontent.visible {
    display: flex;
    flex-direction: column;
}

#tab_wrapper {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.tab_head {
    display: flex;
}

#user_container,
#group_container {
    display: flex;
    flex-direction: column;
    overflow: auto;
    /* overflow: hidden; */
    /* padding-bottom: 16px; */
    flex: 1;
}

#user_container::-webkit-scrollbar,
#group_container::-webkit-scrollbar {
    display: none;
}

#user_container > * {
    min-height: 50px;
    max-height: 50px;
}

.seperator {
    height: 100%;
    width: 1px;
    user-select: none;
    border-left: 1px solid var(--gray);
    box-sizing: border-box;
}

#chat_area_wrapper {
    position: relative;
    display: block;
    width: calc(100% - 301px);
    flex: 1;
    height: 100%;
    background-color: var(--chat-bg-color);
    /* box-shadow: var(--box-shadow); */
}

#load_more {
    visibility: hidden;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--font-color-neg);
    top: 0;
    left: 0;
    right: 0;
    font-size: 20px;
    padding: 8px;
    background-color: var(--chat-bg-color-alt);
    cursor: pointer;
    transition: backgroundColor 0.2s, box-shadow 0.2s;
}

#load_more.visible {
    visibility: visible;
}

#load_more:hover {
    box-shadow: var(--box-shadow);
}

#load_more.loading {
    cursor: wait;
}

#load_more:not(.loading) svg {
    display: none;
}

#load_more.loading svg {
    display: block;
}

#chat_area {
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: calc(100% - var(--chat-info-height));
    width: 100%;
    background-color: var(--chat-bg-color);
}

#chat_area.hidden {
    visibility: hidden;
}

#chat_info {
    display: flex;
    flex-direction: row;
    position: relative;
    height: var(--chat-info-height);
    width: 100%;
    background-color: var(--chat-bg-color-alt);
    justify-content: space-between;
    color: var(--font-color);
}

#chat_info_detail_wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
    position: relative;
}

#chat_info_image {
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

#chat_info_details {
    display: flex;
    flex-direction: column;
}

#chat_info_name,
#chat_info_status {
    font-size: 18px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#chat_info_status {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: calc(var(--font-size) - 2px);
}

.memberCard {
    background-color: var(--primary-color-light);
    color: var(--font-color-neg);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    /* flex-grow: 1; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
}

#chat_info_action {
    display: none;
    flex-direction: row;
    justify-content: flex-end;
    padding-left: 16px;
    padding-right: 16px;
}

.user_card,
.group_card,
.bot_card {
    display: flex;
    position: relative;
    cursor: pointer;
    transition: 0.2s;
    padding: 4px 0;
    /* min-height: 100px; */
    /* flex: 1; */
}

.user_card:hover,
.group_card:hover,
.bot_card:hover {
    box-shadow: var(--box-shadow);
}

.user_card {
    flex-direction: row;
    padding-left: 8px;
    overflow: hidden;
}

.user_image,
.bot_image {
    width: 42px;
    height: 42px;
    align-self: center;
    margin-right: 8px;
}

/* .user_name {
    padding-top: 16px;
} */

.bot_name {
    padding-top: 16px;
    padding-bottom: 16px;
}

.user_status {
    /* padding-bottom: 16px; */
    font-size: calc(var(--font-size) - 2px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 85%;
    display: none;
}

.profileImage {
    border-radius: 100px;
    /* border-radius: 8px; */
    object-fit: cover;
    /* box-shadow: var(--box-shadow); */
    border: 3px solid var(--gray);
    box-sizing: border-box;
}

.user_image .profileImage {
    border: none;
}

.staticProfileImage {
    position: absolute;
    visibility: collapse !important;
}

.user_image {
    position: relative;
}

.user_image::after {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--chat-bg-color-alt);
}

.user_image.online::after {
    content: '';
    background-color: var(--online);
}

.user_image.busy::after {
    content: '';
    background-color: var(--yellow);
}

.user_image.absent::after {
    content: '';
    background-color: var(--red);
}

.user_image.offline::after {
    content: '';
    background-color: var(--gray);
}

.user_card .profileImage,
.bot_card .profileImage {
    width: 42px;
    height: 42px;
}

#user_info_profile_image {
    width: 74px;
    height: 74px;
}

.profileImage[src=''],
.profileImage:not([src]),
.user_info_profile_image[src=''],
.user_info_profile_image:not([src]) {
    visibility: hidden;
}

.group_name {
    padding: 16px;
    display: flex;
    align-items: center;
}

.group_name::before {
    content: '#';
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 4px;
    transition: color 0.2s ease;
}

.group_card.chat_selected.is_part_of .group_name::before {
    color: var(--accent-color);
}

.group_card:not(.is_part_of) .group_name::before {
    opacity: 0.2;
}

.user_card.chat_selected,
.group_card.chat_selected.is_part_of,
.bot_card.chat_selected {
    color: var(--accent-color);
    box-shadow: var(--box-shadow);
}

.user_card.chat_selected::before,
.group_card.chat_selected::before,
.bot_card.chat_selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--accent-color);
}

.group_card {
    cursor: default;
    color: var(--darker-gray);
}

.group_card.is_part_of {
    cursor: pointer;
    color: var(--font-color);
}

.group_manip_btn {
    display: none;
    border: none;
    background-color: var(--chat-bg-color);
    color: var(--font-color);
    padding: 8px;
    margin: 8px;
    height: 40px;
    align-self: flex-end;
    transition: 0.2s;
    width: 150px;
    border-radius: var(--border-radius);
}

.group_manip_btn:hover {
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

#btn_join_group {
    background-color: var(--green);
    color: white;
}

#btn_leave_group {
    opacity: 0.1;
    background-color: var(--red);
    color: white;
}

#btn_leave_group:hover {
    opacity: 1;
}

#create_poll,
#view_poll {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: var(--chat-bg-color);
    color: var(--font-color);
    padding: 8px;
    margin: 8px;
    height: 40px;
    align-self: flex-end;
    transition: 0.2s;
    border-radius: var(--border-radius);
}

#view_poll_after {
    position: absolute;
    right: -8px;
    top: 0px;
    background-color: var(--red);
    color: white;
    padding: 4px;
    border-radius: var(--border-radius);
}

#view_poll_after:empty {
    display: none;
}

#create_poll:hover,
#view_poll:hover {
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

#create_poll_text,
#view_poll_text {
    margin-left: 0;
    width: 0;
    transition: width 0.2s ease-in-out, margin-left 0.2s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
}

#create_poll:hover #create_poll_text {
    width: 110px;
    margin-left: 4px;
}

#view_poll:hover #view_poll_text {
    width: 120px;
    margin-left: 4px;
}

.group_wrapper_btn,
.user_wrapper_btn {
    width: 30px;
    height: 30px;
    border: none;
    margin: 4px;
    background-color: var(--chat-bg-color);
    color: var(--font-color);
    cursor: pointer;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

.group_wrapper_btn:hover,
.user_wrapper_btn:hover {
    background-color: var(--chat-bg-color-alt);
}

#chat_log {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 70px;
    gap: 8px;
}

.message {
    position: relative;
    display: flex;
    padding: 8px;
    /* width: calc(100% - 16px); */
    /* max-width: 60%; */
    width: 80%;
    flex-direction: row;
    color: var(--font-color);
    transition: filter 0.2s ease;
    border-radius: 24px;
    margin: 0px 16px;
}

.message.self {
    background-color: var(--own-message);
    margin-left: auto;
}

.message:not(.self) {
    background-color: var(--other-message);
    margin-right: auto;
}

.message:not(.self) .message_seen {
    display: none !important;
}

.message:hover {
    filter: brightness(97%);
}

.message:hover .message_options {
    background-color: var(--chat-bg-color);
}

.message:not(.seen) .message_seen {
    display: none;
}

.message_no_bottom_radius {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.message_options {
    position: absolute;
    right: 8px;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
    background-color: var(--chat-bg-color-alt);
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.message:hover .message_options {
    opacity: 1;
}

.message:not(.message_no_header) .message_date {
    display: none;
}

.message_no_header .message_body_header {
    display: none;
}

.message_no_header .message_header {
    margin-bottom: 0px;
}

.message_date2 {
    display: none;
    margin-left: 8px;
}

.message:not(.message_no_header) .message_date2 {
    display: block;
}

.message_no_header .message_profile_image {
    display: none;
}

.message_no_header {
    border-top: 1px dashed var(--gray);
    margin-top: -8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.message_header {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 42px;
}

.message_header_wrapper {
    display: flex;
    flex-direction: row;
    align-items: inherit;
}

.message_sender {
    font-weight: bold;
    margin-left: 8px;
}

.message_profile_image {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    object-fit: cover;
    /* box-shadow: var(--box-shadow); */
}

.message_body {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 48px);
}

.message_body_header {
    display: flex;
    flex-direction: row;
}

.message_body_content {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-left: 8px;
}

.message:not(.message_no_header) .message_body_content {
    margin-top: 8px;
}

.message_text {
    margin-left: 8px;
    width: calc(100% - 32px);
    overflow-wrap: break-word;
    white-space: pre-wrap;
    overflow-x: auto;
}

.message_text.edited::before {
    content: '(bearbeitet) ';
    color: var(--gray2);
}

.message_text.deleted::before {
    content: '(gelöscht) ';
    color: var(--gray2);
}

.message_edit {
    margin-left: 8px;
    width: calc(100% - 48px);
    resize: none;
    overflow: auto;
    white-space: pre-wrap;
}

.message_file_info {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
}

.message_file_size {
    color: var(--gray2);
    font-size: calc(var(--font-size) - 2px);
}

.message_file_download {
    display: flex;
    align-content: center;
    justify-content: center;
    height: 10vh;
    width: 10vh;
    margin-top: auto;
    margin-bottom: auto;
    background-color: var(--primary-color);
    color: var(--font-color-neg);
    border-radius: 20vh;
    cursor: pointer;
    transition: box-shadow 0.2s;
    z-index: 2;
}

.message_file_download:hover {
    box-shadow: var(--box-shadow);
}

.message_preview {
    width: 20vw;
    height: 20vh;
    object-fit: contain;
    transition: box-shadow 0.2s;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    /* background-color: var(--chat-bg-color-alt); */
    backdrop-filter: brightness(98%);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.message_preview:hover {
    box-shadow: var(--box-shadow);
}

.message_preview_icon {
    z-index: 2;
    position: absolute;
    bottom: 5px;
    left: calc(20vw - 20px);
    pointer-events: none;
}

.message_preview_file {
    object-fit: contain;
    cursor: default;
}

.message_date,
.message_date2 {
    color: var(--gray2);
}

#drop_display {
    display: flex;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    background-color: var(--chat-bg-color);
    color: var(--chat-text-color);
    z-index: 100;
    font-size: 5vw;
    text-shadow: var(--text-shadow);
    pointer-events: none;
}

#image_display {
    display: flex;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    color: var(--chat-text-color);
    z-index: 100;
    font-size: 5vw;
    text-shadow: var(--text-shadow);
}

#image_display.visible {
    visibility: visible;
    backdrop-filter: blur(2px);
}

#image_display_src {
    max-width: 80%;
    max-height: 80%;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    object-fit: contain;
}

#image_display_src:not(.visible) {
    visibility: collapse;
}

#image_display_src.visible {
    opacity: 1;
}

.file_preview {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    min-width: 90px;
    max-width: 90px;
    height: 90px;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: var(--border-radius);
    color: var(--font-color-neg);
    text-shadow: var(--text-shadow);
    font-size: 10px;
    box-shadow: var(--box-shadow);
    background-repeat: no-repeat;
    background-size: cover;
    transition: 0.2s;
    cursor: pointer;
    user-select: none;
}

.file_preview:hover {
    filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}

.file_preview:hover::after {
    content: 'X';
    font-size: 90px;
    position: absolute;
    padding-right: 18px;
    margin-bottom: -10px;
}

.preview_text {
    max-width: 80px;
    max-height: 80px;
    z-index: 10;
    word-break: break-all;
    text-align: right;
    overflow: hidden;
    padding: 2px;
    -webkit-text-stroke: 0.2px black;
}

#input_file,
#input_profile_image {
    display: none;
}

#input_search_user {
    visibility: hidden;
}

.emoji {
    font-size: calc(var(--font-size) + var(--emoji-size));
}

#emoji_box {
    z-index: 5;
    display: none;
    margin-top: 16px;
    align-self: flex-end;
    width: calc(50vw - 64px);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    background-color: var(--chat-bg-color);
    color: var(--font-color);
    overflow: hidden;
}

#emoji_box_content {
    height: 300px;
}

#emoji_recent_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--primary-color);
    padding: 8px;
    box-shadow: var(--box-shadow);
}

#emoji_recent_title {
    font-size: 18px;
    color: var(--font-color-neg);
}

#emoji_recent_content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#emoji_bar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 40px;
    background-color: var(--primary-color);
}

#emoji_content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: 8px;
}

.emoji_content {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.emoji_btn {
    display: flex;
    width: 100%;
    height: 100%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.emoji_btn:first-child {
    border-top-left-radius: var(--border-radius);
}

.emoji_btn:last-child {
    border-bottom-left-radius: var(--border-radius);
}

.emoji_btn:hover {
    background-color: var(--primary-color);
    box-shadow: var(--box-shadow);
}

.emoji_input {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    width: 35px;
    height: 35px;
    cursor: pointer;
    border-radius: var(--border-radius);
    font-size: 20px;
}

.emoji_input:hover {
    background-color: var(--primary-color-dark);
    box-shadow: var(--box-shadow);
}

.emoji_header {
    font-size: calc(var(--font-size) + 4px);
    margin-top: 8px;
    margin-bottom: 8px;
}

.emoji_header:not(:first-child) {
    border-top: 1px solid var(--gray);
}

.input_elem {
    background-color: var(--chat-bg-color-alt);
    color: var(--font-color);
    /* color: var(--font-color-neg); */
    border: none;
    outline: none;
}

#user_preference_modal {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(8px);
    width: 100vw;
    height: 100vh;
}

#user_preference_modal.visible {
    visibility: visible;
    opacity: 1;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_user_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_user_management + .upm_section {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_btn_user_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_group_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_group_management + .upm_section {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_btn_group_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_permission_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_permission_management + .upm_section {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_btn_permission_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_bot_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_heading_bot_management + .upm_section {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_btn_bot_management {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_cleanup_1month {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_cleanup_all {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_disable_email {
    display: none;
}

#user_preference_modal:not(.show_admin_panel) #upm_admin_spacer {
    display: none;
}

#upm_container {
    display: flex;
    width: 90%;
    height: 90%;
    background-color: var(--chat-bg-color);
    color: var(--font-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

#upm_navigation_bar {
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 100%;
    background-color: var(--primary-color);
    color: var(--font-color-neg);
}

#upm_content {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: calc(100% - 32px);
    padding: 16px;
    overflow-y: auto;
}

.upm_btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;
    cursor: pointer;
}

.upm_btn:hover {
    background-color: var(--primary-color-dark);
    box-shadow: var(--box-shadow);
}

.upm_heading {
    font-weight: bold;
    border-radius: var(--border-radius);
}

.upm_heading:not(:first-child) {
    margin-top: 16px;
}

#upm_heading_permission_management {
    display: flex;
    justify-content: space-between;
}

#upm_admin_pw {
    caret-color: var(--accent-color);
    margin-left: 8px;
    width: 75px;
}

.upm_section {
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 2px;
    margin-top: 4px;
}

.upm_entry {
    padding: 8px;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-top: 2px;
    margin-bottom: 2px;
    user-select: none;
}

.upm_checkbox_entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: var(--border-radius);
}

.upm_checkbox_entry:hover {
    background-color: var(--primary-color);
    box-shadow: var(--box-shadow);
    color: var(--font-color-neg);
}

.upm_checkbox_entry:hover .upm_checkbox {
    border-color: var(--font-color-neg);
}

.upm_checkbox_entry:hover .upm_checkbox::before {
    color: var(--font-color-neg);
}

.upm_checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
}

.upm_checkbox.checked::before {
    color: var(--primary-color);
    display: block;
    content: '✓';
    margin-left: 4px;
    margin-top: -1px;
}

.upm_theme_entry {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.upm_theme_wrapper {
    display: flex;
    flex-direction: row;
}

.upm_theme {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 16px;
    cursor: pointer;
    user-select: none;
}

.upm_theme_color {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    transition: box-shadow 0.2s;
    transition: border-color 0.2s;
}

.upm_theme:hover .upm_theme_color {
    box-shadow: var(--box-shadow);
    border-color: var(--primary-color-dark);
}

.upm_theme.selected .upm_theme_color {
    border-color: var(--green);
    box-shadow: var(--box-shadow);
}

#upm_theme_hell .upm_theme_color {
    background-color: #f2f2f2;
}

#upm_theme_dunkel .upm_theme_color {
    background-color: #343333;
}

#upm_theme_cookie .upm_theme_color {
    background-color: #322c2c;
}

.upm_button_entry {
    user-select: none;
    cursor: pointer;
    border-radius: var(--border-radius);
}

.upm_button_entry:hover {
    background-color: var(--primary-color);
    color: var(--font-color-neg);
    box-shadow: var(--box-shadow);
}

.upm_panel {
    overflow: hidden;
    transition: transform 0.2s;
    transform-origin: top;
    transform: scaleY(1);
}

.upm_panel:not(.visible) {
    transform: scaleY(0);
    height: 0px;
}

.upm_grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 8px;
    max-height: 500px;
    overflow-y: auto;
}

.upm_grid_row,
.upm_grid_row_bot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px;
    border-radius: var(--border-radius);
}

.upm_grid_row_bot {
    grid-template-columns: repeat(3, 1fr);
}

.upm_grid_row:not(:first-child),
.upm_grid_row_bot:not(:first-child) {
    border-top: 1px solid var(--primary-color);
}

.upm_grid_entry {
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    padding: 2px;
    margin-right: 20px;
}

.upm_grid_entry.editable {
    background-color: var(--primary-color);
    color: var(--font-color-neg);
    box-shadow: var(--box-shadow);
}

.upm_tm_data {
    justify-content: space-between;
}

.action-sliders {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.reset-password-slider {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7px;
    top: 0;
    height: calc(50% - 6px);
    right: 0;
    transition: width 0.2s;
    z-index: 71;
    background-color: var(--yellow);
    cursor: pointer;
    margin-top: 3px;
    margin-bottom: 3px;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    overflow: hidden;
    color: white;
}

.reset-password-slider div {
    opacity: 0;
    transition: opacity 0.2s;
}

.reset-password-slider:hover div {
    opacity: 1;
}

.reset-password-slider:hover {
    width: 42px;
}

.reset-password-slider.commit .fa-check {
    display: block;
}

.reset-password-slider .fa-check {
    display: none;
}

.reset-password-slider.commit .fa-key {
    display: none;
}

.delete_slider {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7px;
    height: calc(50% - 6px);
    right: 0;
    top: 50%;
    transition: width 0.2s;
    z-index: 201;
    background-color: var(--red);
    cursor: pointer;
    margin-top: 3px;
    margin-bottom: 3px;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    overflow: hidden;
}

.delete_slider div {
    opacity: 0;
    transition: opacity 0.2s;
}

.delete_slider:hover div {
    opacity: 1;
}

.delete_slider:hover {
    width: 42px;
}

.delete_slider.commit .fa-check {
    display: block;
}

.delete_slider .fa-check {
    display: none;
}

.delete_slider.commit .fa-trash {
    display: none;
}

.chat_selection {
    background-color: var(--primary-color);
    color: var(--font-color-neg);
    border: none;
    outline: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 8px;
    appearance: none;
    cursor: pointer;
}

.upm_perm {
    display: flex;
    justify-content: space-between;
    padding: 4px;
    cursor: pointer;
}

.upm_perm:hover {
    background-color: var(--primary-color);
    color: var(--font-color-neg);
    box-shadow: var(--box-shadow);
}

.upm_perm:hover .upm_checkbox {
    border-color: var(--font-color-neg);
}

.upm_perm:hover .upm_checkbox::before {
    color: var(--font-color-neg);
}

#upm_permission_detail {
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    margin: 8px;
}

#upm_permission_detail.disabled {
    user-select: none;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.2);
    filter: grayscale(100%) brightness(60%) sepia(100%) saturate(0%) contrast(0.3);
}

#upm_permission_panel_heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upm_add_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: var(--primary-color-dark);
    color: var(--font-color-neg);
    box-shadow: var(--box-shadow);
    margin-right: 8px;
    cursor: pointer;
    user-select: none;
}

.upm_add_btn:hover {
    background-color: var(--primary-color);
    color: var(--font-color-neg);
}

#upm_permission_name {
    opacity: 0;
    max-width: 0px;
    margin-right: 8px;
    transition: max-width 0.2s;
}

#upm_permission_name.visible {
    opacity: 1;
    max-width: 120px;
}

.upm_add_btn .fa-check {
    display: none;
}

.upm_add_btn.commit .fa-check {
    display: block;
}

.upm_add_btn.commit .fa-plus {
    display: none;
}

.upm_remove_btn .fa-check {
    display: none;
}

.upm_remove_btn.commit .fa-check {
    display: block;
}

.upm_remove_btn.commit .fa-minus {
    display: none;
}

.upm_group_grid {
    overflow: auto;
}

.upm_group_row {
    display: flex;
    flex-direction: row;
}

.upm_group_caption {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--grid-cell-size);
    min-width: 100px;
    /* overflow: hidden; */
    padding-right: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upm_group_user {
    width: calc(var(--grid-cell-size) - 2px);
    height: calc(var(--grid-cell-size) - 2px);
    opacity: 0.8;
    transition: opacity 0.2s, box-shadow 0.2s;
    cursor: pointer;
    margin: 1px;
    border-radius: var(--border-radius);
    color: var(--font-color-neg);
}

.upm_group_user.member {
    background-color: var(--green);
}

.upm_group_user::before {
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--grid-cell-size);
    width: calc(var(--grid-cell-size) - 2px);
    height: calc(var(--grid-cell-size) - 8px - 2px);
    transition: opacity 0.2s;
    pointer-events: none;
}

.upm_group_user:hover::before {
    opacity: 1;
}

.upm_group_user.member::before {
    content: '-';
}

.upm_group_user:not(.member)::before {
    content: '+';
}

.upm_group_user:not(.member) {
    background-color: var(--red);
    opacity: 0.2;
}

.upm_group_user:hover {
    box-shadow: var(--box-shadow);
    opacity: 1;
}

.upm_empty_caption {
    min-width: 100px;
    padding-right: 16px;
}

.upm_user_caption {
    min-width: var(--grid-cell-size);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#broadcast_modal {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(8px);
    width: 100vw;
    height: 100vh;
}

#broadcast_modal.visible {
    visibility: visible;
    opacity: 1;
}

#broadcast_container {
    display: flex;
    width: 90%;
    background-color: var(--yellow);
    color: var(--font-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    flex-direction: column;
}

#broadcast_body {
    padding: 16px;
}

#broadcast_input {
    background-color: var(--yellow-dark);
    max-width: calc(100% - 8px);
    min-width: calc(100% - 8px);
    min-height: 43px;
    height: 43px;
    caret-color: var(--yellow);
    font-size: 32px;
}

#broadcast_input::placeholder {
    color: var(--yellow);
}

#broadcast_footer {
    padding: 16px;
}

#broadcast_send {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    color: var(--font-color-neg);
    padding: 16px;
    transition: background-color 0.2s;
    box-shadow: var(--box-shadow);
}

#broadcast_send:hover {
    background-color: var(--yellow-dark);
}

#message_menu {
    position: fixed;
    visibility: hidden;
    background-color: var(--chat-bg-color);
    color: var(--font-color);
    z-index: 7;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

#message_menu > div {
    padding: 8px;
    margin: 0;
    user-select: none;
    cursor: pointer;
}

#message_menu > div.disabled {
    filter: grayscale(100%) brightness(40%) sepia(100%) saturate(0%) contrast(0.3);
    cursor: default;
}

#message_menu > div:not(.disabled):hover {
    background-color: var(--chat-bg-color-alt);
}

#mention_menu {
    z-index: 6;
    position: absolute;
    background-color: var(--chat-bg-color);
    color: var(--font-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.mention_entry {
    padding: 8px;
    margin: 0;
    user-select: none;
    cursor: pointer;
}

.mention_entry:hover,
.mention_hover {
    background-color: var(--chat-bg-color-alt);
}

#typing_info {
    font-size: calc(var(--font-size) - 2px);
    margin-left: 16px;
    margin-bottom: -8px;
    z-index: 8;
    color: var(--gray2);
    text-shadow: var(--text-shadow);
}

:root[data-theme='dark'] #typing_info,
:root[data-theme='cookie'] #typing_info[data-theme='cookie'] {
    color: var(--primary-color-light);
}

.message_splitter {
    position: relative;
    width: 100%;
    min-height: 1px;
    max-height: 1px;
    background-color: var(--red);
    z-index: 4;
}

.message_splitter::after {
    position: absolute;
    height: 0;
    display: flex;
    justify-content: center;
    content: 'Neu';
    color: var(--red);
    left: 0;
    right: 0;
}

.message_count {
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 8px;
    top: 14px;
    min-width: 23px;
    bottom: 14px;
    background-color: var(--red);
    color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.name_wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.code_block {
    position: relative;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--code-bg);
    color: var(--code-color);
    box-shadow: var(--box-shadow);
    margin-top: 4px;
    margin-bottom: 4px;
}

.code_flag {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--turqoise);
    z-index: 2;
}

.code_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px;
    background-color: var(--code-bg-dark);
    height: 24px;
    width: 100%;
}

.code_buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.code_collapse,
.code_copy {
    margin-right: 16px;
    padding: 4px;
    border-radius: var(--border-radius);
    cursor: pointer;
    user-select: none;
}

.code_copy {
    margin-right: 8px;
}

.code_collapse:hover,
.code_copy:hover {
    background-color: var(--code-bg);
}

.code_block.collapsed .code_body {
    display: none;
}

.code_block.collapsed .fa-angle-down {
    display: block;
}

.code_block.collapsed .fa-angle-up {
    display: none;
}

.code_block:not(.collapsed) .fa-angle-down {
    display: none;
}

.code_body {
    position: relative;
    overflow: auto;
    max-height: 20vh;
    white-space: pre;
}

.code_line {
    position: relative;
    margin-left: 32px;
    line-height: 19px;
    min-height: 19px;
    font-family: consolas;
}

.code_line::before {
    position: absolute;
    top: 0;
    bottom: 0;
    display: inline-block;
    text-align: right;
    width: 24px;
    margin-left: -32px;
    content: attr(data-before);
    overflow-x: hidden;
}

.code_line:hover {
    background-color: var(--code-bg-light);
}

.code_keyword {
    color: var(--code-keyword);
}

#upm_bot_bar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 4px;
}

#upm_bot_bar .chat_input {
    margin-right: 16px;
}

.bot_msg {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 50%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--chat-bg-color-alt);
    padding: 8px;
    margin: 10px;
}

.bot_msg_heading {
    font-weight: bold;
    padding: 4px;
}

.bot_msg_fields {
    width: 100%;
}

.bot_msg_field {
    display: flex;
    flex-direction: row;
    width: calc(100% - 16px);
    padding: 4px;
    margin: 4px;
    background-color: var(--chat-bg-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.bot_msg_field:hover {
    background-color: var(--chat-bg-color-alt);
    box-shadow: var(--box-shadow);
}

.bot_msg_name {
    display: flex;
    flex-direction: row;
    width: 50%;
    border-right: 1px solid var(--chat-bg-color-alt);
}

.bot_msg_value {
    width: 50%;
    margin-left: 8px;
}

.date_splitter {
    z-index: 3;
    /* position: sticky; */
    /* top: -20; */
    /* width: calc(100% - 16px); */
    display: inline-block;
    color: var(--font-color);
    /* background-color: var(--primary-color-light); */
    color: var(--font-color);
    /* border-top: 1px solid var(--gray); */
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    margin: 4px;
    border-radius: 100px;
    align-self: center;
}

#show_user_btn,
#show_group_btn {
    position: relative;
}

.new_message::after {
    content: '';
    position: absolute;
    height: 16px;
    aspect-ratio: 1/1;
    background-color: var(--red);
    border-radius: 50%;
    right: 8px;
    top: 4px;
    box-shadow: var(--box-shadow);
}

/* .date_splitter {
    margin-top: 4px;
}

.date_splitter::before,
.date_splitter::after {
    border-bottom: 5px solid var(--chat-bg-color-alt);
}

.date_splitter::before {
    content: '';
    position: absolute;
    margin-bottom: 29px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background-size: 20px 40px;
    background-image: radial-gradient(circle at 10px -15px, transparent 20px, var(--chat-bg-color-alt) 21px);
}

.date_splitter::after {
    content: '';
    position: absolute;
    margin-bottom: 29px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15px;
    background-size: 40px 40px;
    background-image: radial-gradient(circle at 10px 26px, var(--chat-bg-color-alt) 20px, transparent 21px);
} */
#add_group_modal {
    z-index: 9;
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    display: none;
}

#add_group_modal_content {
    position: absolute;
    width: 80%;
    max-height: 80%;
    background-color: var(--chat-bg-color);
    left: 10%;
    top: 10%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

#add_group_modal_head {
    padding: 16px;
    font-size: calc(var(--font-size) + 4px);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

#add_group_modal_body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

#add_group_pin {
    background-color: var(--chat-bg-color-alt);
    height: 0;
    transition: height 0.2s, opacity 0.2s;
    overflow: hidden;
    opacity: 0;
}

#add_group_pin.visible {
    height: 23px;
    opacity: 1;
}

#add_group_submit {
    width: 100%;
    color: var(--font-color);
    background-color: var(--chat-bg-color-alt);
    /* border: 1px solid var(--primary-color-dark); */
    border: none;
    border-radius: var(--border-radius);
    padding: 12px;
    /* box-shadow: var(--box-shadow); */
    transition: box-shadow 0.2s;
    cursor: pointer;
}

#add_group_submit:hover {
    box-shadow: var(--box-shadow);
}

#add_group_label {
    color: var(--chat-text-color);
}

#pin_modal {
    z-index: 9;
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    display: none;
}

#pin_modal_content {
    position: absolute;
    width: 80%;
    max-height: 80%;
    background-color: var(--chat-bg-color);
    left: 10%;
    top: 10%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

#pin_modal_head {
    padding: 16px;
    font-size: calc(var(--font-size) + 4px);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

#pin_modal_body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    justify-content: center;
    align-items: center;
}

.pin_field {
    display: flex;
    flex-direction: row;
}

.pin_column {
    display: flex;
    flex-direction: column;
}

.pin_num,
.pin_act {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: var(--font-color-neg);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 8px;
    cursor: pointer;
    transition: box-shadow 0.2s;
    user-select: none;
}

.pin_num:hover,
.pin_act:hover {
    box-shadow: var(--box-shadow);
}

#pin_display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    outline: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    opacity: 1;
    transition: opacity 0.2s, width 0.2s;
    height: 19px;
    color: var(--chat-text-color);
}

#pin_display:empty {
    opacity: 0;
}

.modal_head {
    color: var(--chat-text-color);
}

#input_groupname {
    padding: 8px;
    /* background-color: var(--primary-color); */
}

.mention {
    color: var(--red);
    cursor: pointer;
}

.mention_self {
    background-color: var(--red);
    color: white;
    cursor: pointer;
}

.mention:hover,
.mention_self:hover {
    text-decoration: underline;
}

#poll_modal,
#view_poll_modal {
    z-index: 9;
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    display: none;
}

#poll_modal_content,
#view_poll_modal_content {
    position: absolute;
    width: 80%;
    max-height: 80%;
    background-color: var(--chat-bg-color);
    left: 10%;
    top: 10%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

#poll_modal_head,
#view_poll_modal_head {
    padding: 16px;
    font-size: calc(var(--font-size) + 4px);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

#poll_modal_body,
#view_poll_modal_body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

#view_poll_modal_body {
    max-height: 50vh;
    overflow-y: auto;
}

.poll_option {
    background-color: var(--primary-color-light);
    border-radius: var(--border-radius);
    padding: 8px;
    margin-bottom: 8px;
    color: var(--font-color-neg);
    transition: box-shadow 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.poll_option:hover {
    box-shadow: var(--box-shadow);
}

.poll_option_text {
    background: none;
    border: none;
    outline: none;
    color: var(--font-color-neg);
    width: 100%;
}

#poll_option_bar {
    display: flex;
    gap: 8px;
}

#add_poll_option {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

#poll_preset_week {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    color: var(--font-color);
    background-color: var(--primary-color-light);
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
}

#poll_preset_week:hover {
    cursor: pointer;
    box-shadow: var(--box-shadow);
}

#poll_preset_yn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    color: var(--font-color);
    background-color: var(--primary-color-light);
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
}

#poll_preset_yn:hover {
    cursor: pointer;
    box-shadow: var(--box-shadow);
}

#add_poll_option:hover {
    cursor: pointer;
}

.poll_option_del {
    background-color: var(--red);
    color: white;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
}

.poll_option_del:hover {
    box-shadow: var(--box-shadow);
    cursor: pointer;
}

#poll_modal_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px;
}

.submit,
.cancel {
    padding: 8px;
    color: white;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.submit {
    background-color: var(--green);
}

.cancel {
    background-color: var(--red);
}

.submit:hover,
.cancel:hover {
    box-shadow: var(--box-shadow);
}

#poll_deadline_container {
    color: var(--font-color-neg);
}

#poll_deadline {
    background-color: var(--primary-color-light);
    border: none;
    outline: none;
    color: white;
    padding: 8px;
    border-radius: var(--border-radius);
}

#poll_window {
    z-index: 30;
    position: absolute;
    right: 32px;
    bottom: 0;
    width: 250px;
    height: 200px;
    pointer-events: none;
    overflow: hidden;
}

#poll_popup {
    position: absolute;
    background-color: var(--chat-bg-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    width: calc(100% - 16px);
    height: 120px;
    top: 200px;
    margin: 8px;
    transition: top 0.2s ease-in-out;
    pointer-events: all;
    color: var(--font-color);
    padding: 4px;
}

#poll_popup.visible {
    top: 0;
}

#poll_popup_close {
    position: absolute;
    right: 8px;
    top: 4px;
    cursor: pointer;
}

#poll_options {
    height: 105px;
    overflow-y: auto;
}

.poll_option_small {
    width: calc(100% - 32px);
    padding: 4px;
    margin: 4px;
    background-color: var(--chat-bg-color-alt);
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease-in-out;
}

.poll_option_small:hover {
    cursor: pointer;
    background-color: var(--green);
}

.poll_chart {
    margin-left: 20%;
    margin-right: 20%;
}

.poll_chart:not(:last-child) {
    margin-bottom: 32px;
}

.poll_container {
    position: relative;
    border-radius: var(--border-radius);
}

.poll_icon_container {
    position: absolute;
    left: 8px;
    top: 8px;
    display: flex;
    gap: 8px;
}

.poll_voted {
    color: var(--chat-text-color);
    cursor: help;
}

.poll_deadline {
    color: var(--chat-text-color);
    position: absolute;
    right: 8px;
    top: 8px;
}

.poll_expired {
    color: var(--red);
    cursor: help;
}

.poll_delete {
    position: absolute;
    top: 8px;
    right: 8px;
    color: white;
    padding: 8px;
    border-radius: var(--border-radius);
    background-color: var(--red);
    transition: box-shadow 0.2s ease-in-out;
}

.poll_delete:hover {
    cursor: pointer;
    box-shadow: var(--box-shadow);
}

.poll_container.voted {
    background-color: var(--chat-bg-color-alt);
}

.poll_container.voted .poll_expired {
    color: var(--green);
}

.poll_container.voteable::after {
    content: '';
    background-color: #ffffff00;
    transition: background-color 0.2s ease-in-out;
    pointer-events: none;
}

.poll_container.voteable:hover::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff30;
    content: 'Jetzt abstimmen!';
}

#chat_pb {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

#chat_pb.visible {
    visibility: visible;
    opacity: 0.2;
}

.eye_container {
    display: none;
    position: absolute;
    top: 18px;
    left: 11px;
}
.eye {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background: #fff;
}
.eye:after {
    /*pupil*/
    position: absolute;
    top: 1px;
    right: 4px;
    width: 2px;
    height: 2px;
    background: #000;
    border-radius: 50%;
    content: ' ';
}

#chat_back_btn {
    display: none;
    aspect-ratio: 1/2;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 768px) {
    #emoji_box {
        width: 98%;
    }

    #emoji_box_content {
        height: 15rem;
    }
}

#chat_info_wrapper {
    display: flex;
    flex-direction: column;
}

#chat_info.group #chat_info_wrapper {
    flex-direction: row;
}

#chat_info.group #chat_info_status {
    overflow-y: auto;
    padding: 4px 0;
    gap: 4px;
    margin-top: auto;
    margin-bottom: auto;
    max-height: 68px;
    align-self: flex-end;
    opacity: 0.2;
    transition: opacity 0.4s ease;
}

#chat_info.group:hover #chat_info_status {
    opacity: 1;
}

#chat_info:not(.group) #view_poll {
    display: none;
}

#chat_info:not(.group) #create_poll {
    display: none;
}

#chat_info_name_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#chat_info_name {
    display: flex;
    align-items: center;
    font-weight: 500;
    white-space: pre;
}

#chat_info.group #chat_info_name::before {
    content: '#';
    font-weight: bold;
    font-size: 2rem;
    color: var(--primary-color);
    margin-right: 4px;
}

#chat_info_name_edit {
    display: none;
    visibility: hidden;
    background-color: var(--chat-bg-color-alt);
    box-shadow: var(--box-shadow);
    padding: 4px;
    border-radius: var(--border-radius);
    cursor: pointer;
}

#chat_info_name_edit:hover {
    box-shadow: var(--box-shadow);
}

#edit_group_modal {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(8px);
    width: 100vw;
    height: 100vh;
}

#edit_group_modal.visible {
    visibility: visible;
    opacity: 1;
}

#edit_group_modal_content {
    position: absolute;
    width: 80%;
    max-height: 80%;
    background-color: var(--chat-bg-color);
    left: 10%;
    top: 10%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    display: flex;
    padding: 8px;
    flex-direction: column;
    color: var(--font-color);
}

#edit_group_modal_content > * {
    margin: 8px 16px;
}

#edit_group_modal_caption {
    font-size: 18px;
}

.yn {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: end;
}

#search_modal {
    z-index: 9;
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    display: none;
}

#search_modal_content {
    position: absolute;
    width: 80%;
    max-height: 80%;
    background-color: var(--chat-bg-color);
    color: var(--chat-text-color);
    left: 10%;
    top: 10%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

#search_modal_head {
    padding: 16px;
    font-size: calc(var(--font-size) + 4px);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

#search_modal_body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

#search_modal_body {
    max-height: 50vh;
    overflow-y: auto;
}

#search_modal_footer {
    display: flex;
    flex-direction: column;
    margin: 16px;
    max-height: 40vh;
    overflow-y: auto;
}

#search_modal_footer:not(:empty)::before {
    position: absolute;
    content: 'Ergebnisse';
    margin-top: -24px;
}

#search_restrictions {
    display: flex;
    gap: 16px;
}

#search_users,
#search_groups {
    background-color: var(--chat-bg-color-alt);
    height: 32px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
    box-sizing: border-box;
}

#search_users:hover,
#search_groups:hover {
    box-shadow: var(--box-shadow);
}

#search_users.active,
#search_groups.active {
    border: 3px solid var(--green);
}

#search_users.active::after,
#search_groups.active::after {
    content: '';
    position: absolute;
    width: 32px;
    aspect-ratio: 1/1;
    pointer-events: none;
    background-color: var(--green);
    opacity: 0.3;
}

#search_btn {
    background-color: var(--primary-color-dark);
    color: var(--font-color-neg);
    cursor: pointer;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: 16px;
    border: none;
    transition: background-color 0.2s ease-in-out;
}

#search_btn:hover {
    background-color: var(--primary-color);
}

.search_result {
    position: relative;
    background-color: var(--primary-color);
    margin: 4px;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
}

.search_result:hover {
    box-shadow: var(--box-shadow);
}

.search_result:hover::after {
    position: absolute;
    content: '➔';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: #43f89b33;
    border-radius: var(--border-radius);
    backdrop-filter: brightness(50%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.result_header {
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
    opacity: 0.6;
}

.result_sender::after {
    content: '➔';
}

.result_date {
    margin-left: auto;
}

.result_highlight {
    background-color: var(--red);
    color: var(--white);
}

#editor_bottom > * {
    z-index: 5;
}

#upload_progress,
.message_progress {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100% - 8px);
    opacity: 0.7;
    z-index: 0;
    background-color: var(--green);

    background: linear-gradient(to left, var(--rb0), var(--rb10), var(--rb20), var(--rb30), var(--rb40), var(--rb50), var(--rb60), var(--rb70), var(--rb80), var(--rb90), var(--rb100));
    background-size: 1000% 100%;
    background-position: 200% 0;
    animation: rbh 40s linear infinite;
    text-shadow: var(--text-shadow);
}

@keyframes rbh {
    to {
        background-position: -1000% 0%;
    }
}

.message > * {
    z-index: 1;
}

#chat_warning {
    position: absolute;
    top: 0;
    z-index: 100;
    opacity: 0.6;
    padding: 8px;
    background-color: var(--red);
    color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: collapse;
}

#chat_warning.visible {
    visibility: visible;
}

.typing-indicator-wrapper {
    position: absolute;
    left: 8px;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 2px;
    z-index: 3;
}

.typing-indicator {
    width: 8px;
    height: 8px;
    background: rgb(61, 61, 61);
    background: linear-gradient(45deg, rgba(61, 61, 61, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 50%;
    animation: bump 1.5s ease infinite;
}

.typing-indicator:nth-child(2) {
    animation-delay: 100ms;
}

.typing-indicator:nth-child(3) {
    animation-delay: 200ms;
}

@keyframes bump {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-4px);
    }

    40% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}