body.mobile {
    --topbar_height: 0px;
    --disconnect_bar_height: 30px;
    --chat_text_size: 17px;
    --popup_top: 30%;
}
body.mobile div#content {
    margin: 0px 8px;
    overflow-x: hidden;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}
body.mobile div.header {
    padding-top: 2px;
}
body.mobile div#content.disabled * {
    pointer-events: none;
}

body.mobile div#rightbar {
    display: none;
}

:root {
    --link_color: inherit;
    --bar_width: 16vw;
    --logo_height: 40px;
    --bar_min_width: 240px;
    --bar_max_width: 300px;
    --button_offset_top: 2px;
    --button_offset_side: 6px;
    --button_size: 28px;
    --menu_border_radius: 10px;
    --button_border_radius: 20px;
    --hidden_bar_width: 30px;
    --topbar_height: 60px;
    --font: "EB Garamond";
    --detail_font: sans-serif;
    --zerowidth: 0.00000001%;
    --space_view_offset: 96px;
    --header_text_size: 1.75rem;
    --chat_text_size: 1rem;
    --form_text_size: 1.125rem;
    --icon_size: 40px;
    --icon_color_old_rose: #B56874;
    --icon_color_rosy_brown: #D4A7AC;
    --icon_color_chinese_violet: #876172;
    --icon_color_lilac: #B89BC5;
    --icon_color_purple: #c8bede;
    --icon_color_ultra_violet: #4B4F7D;
    --icon_color_cadet_gray: #8B9BA3;
    --icon_color_wild_blue_yonder: #9BA8C5;
    --icon_color_reseda_green: #647048;
    --icon_color_reseda_green2: #73877B;
    --icon_color_sage: #9FA88C;
    --icon_color_shadow_green: #9BC5B8;
    --icon_color_norway: #A8C59B;
    --icon_color_brown: #6F584B;
    --icon_color_cooper: #A17340;
    /* colors */
    --active_green: #69C57B;
    --heart_red: #f75064;
    --heart_pink: #FFA9B3;
    --heart_pink: #FFC5CC;
    --highlight_text: #fff8c0c0;
    --highlight: #FDF8E1;
    --star_yellow: #FDCC0D;
    /* layer */
    --content_layer: 1;
    --menu_overlay_layer: 10;
    --menu_layer: 11;
    --modal_overlay_layer: 100;
    --modal_layer: 101;
    --dropdown_layer: 201;
    --fullscreen_layer: 1000;
    --scaler: 1;
    /* radius */
    --card_radius: 10px;
    --header_radius: 5px;
    /* spinner */
    --spinner_size: 40px;
}
body.light {
    --gold: #c5b89b;
    --gold_shade: #cfc4a9;
    --blue: #698eb5;
    --blue_shade: #698eb544;
    --green: #69b58e;
    --green_shade: #69b58e44;
    --green: #4e7a51dd;
    --green_shade: #4e7a5144;
    --green: #00856c;
    --green_shade: #00856c44;
    --green_shade: #BADDD5;
//    --green: #30856c;
//    --green_shade: #30856c44;
--green: #2E8C7C;
    --primary_color: var(--blue);
    --primary_shade: var(--blue_shade);
    --primary_color: var(--green);
    --primary_shade: var(--green_shade);
    --text_color: #222;
//    --text_color: var(--shade6);
    --text_color_inverted: #eee;
    --text_color_header: var(--shade6);
    --text_color_light: var(--shade5);
    --text_color_med: var(--shade7);
    --text_color_faint: var(--shade4);
    --text_color_form: var(--primary_color);
    --button_color: var(--gold);
    --button_text_color: var(--shade6-1);
    --button_hover_color: var(--gold_shade);
    --form_underline_border: 1px solid var(--shade4);
    --form_border: 1px solid var(--shade4);
    --background: #fff;
    --shade0: #fafbfb;
    --shade1: #f8f7f7;
    --shade1-1: #f1f0f0;
    --shade2: #ede9e9;
    --shade3: #ddd9d9;
    --shade3-1: #cdc9c9;
    --shade4: #bab3b3;
    --shade5: #818283;
    --shade6: #4a4848;
    --shade6-1: #3a3838;
    --shade7: #2a2b2c;
    --shade9: #0a0b0c;
    --icon_foreground_color: #fff;
    --icon_user_background: var(--shade5);
    --bar_color: var(--shade1);
    --topbar_bg: var(--shade6);
    --disabled_color: var(--shade3);
    --error: #ffc2be;
    --archive_hover: #f7ede2;
    --archive_shade: #fff5eb;
    --archive_shade: var(--shade2);
    --archive_hover: var(--shade3);
    --blocker_filter: blur(2px);
    --blocker_text_color: var(--text_color);
    --blocker_background: var(--shade1);
    --blocker_overlay: rgba(255, 255, 255, 0.6);
    --box_shadow: 0 2px 8px #808080;
    --scrollbar_color: transparent;
    --scrollbar_show_color: var(--shade4);
    --scrollbar_border: var(--background);
    --scrollbar_background: transparent;
    --card_color: var(--shade1);
    --card_border: 1px solid var(--shade2);
}
body.dark {
    --text_color: #ddd;
    --background: #111213;
    --shade1: #1d1e1f;
    --shade2: #2a2b2c;
    --shade3: #818283;
    --shade4: #ede9e9;
    --shade5: #f8f7f7;
    --icon_foreground_color: #fff;
    --icon_user_background: var(--shade3);
    --bar_color: var(--shade1);
    --topbar_bg: var(--shade2);
}

body {
    font-family: var(--font);
    background: var(--background);
    color: var(--text_color);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

/* text selection */
body.light ::-moz-selection {
    color: var(--background);
    background: var(--shade5);
}
body.light ::selection {
    color: var(--background);
    background: var(--shade5);
}

a {
    color: var(--link_color);
    font-size: inherit;
}

a:not(.selected) {
    text-decoration: none;
}

h1 {
    font-size: 30px;
    font-weight: lighter;
    text-align: center;
    margin: 2px 0;
}
h2 {
    font-weight: lighter;
    text-align: center;
    margin: 0.2em;
}
h3 {
    font-weight: lighter;
    text-align: center;
    margin: 0.2em;
}
p {
    margin: 0;
}

/* search */
input[type="search"]::-webkit-search-cancel-button {
    position: relative;
    right: -4px;
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    background: url(/static/img/x.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}
input[type="search"]:hover::-webkit-search-cancel-button,
input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: 0.5;
    pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
    filter: invert(1);
}

label.button input[type="file"] {
    display: none;
}
button, label.button {
    font-family: var(--font);
    font-size: 16px;
    color: var(--button_text_color);
    background: var(--button_color);
    border: 0;
    border-radius: var(--button_border_radius);
    width: fit-content;
    padding: 4px 16px;
    cursor: pointer;
    margin: 10px 5px 0;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}
button.error, label.button.error {
    background: var(--error);
}
.no_selection {
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

button.big,
label.button.big
{
    font-size: 20px;
    padding: 6px 50px;
    margin: 20px 5px;
}
body.mobile button.big,
body.mobile label.button.big {
    font-size: 24px;
}
button:hover, label.button:hover {
    background: var(--button_hover_color);
}
button:disabled {
    color: var(--disabled_color);
    background: var(--shade2);
    cursor: auto;
}
button:disabled:hover {
    background: var(--shade2);
}

.hidden {
    display: none ! important;
}

div#main_row {
    position: fixed;
    top: var(--topbar_height);
    margin: 0;
    display: flex;
    width: 100%;
    height: calc(100dvh - var(--topbar_height));
}

body.mobile.disconnected div#main_row {
    height: calc(100dvh - var(--topbar_height) - var(--disconnect_bar_height));
}
div#disconnected {
    position: fixed;
    bottom: 0;
    width: 100dvw;
    height: var(--disconnect_bar_height);
    background: var(--error);
    display: none;
    justify-content: center;
    align-items: center;
}
body.mobile.disconnected div#disconnected {
    display: flex;
}
div#content {
    text-align: left;
    margin: 10px 20px;
    /* LEVY: removed this for cutting off box-shadow, but not sure how important it is! */
    /*overflow-y: hidden; */
    flex-grow: 1;
    width: 60vw;
    display: flex;
    flex-flow: column;
    position: relative;
}

/* hide the server select dropdown */
div#content div#server_switch div.dropdown_label {
    display: none;
}

/* view content scrolling */
div#content div.view {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}
div#content > div.view > div.wrapper {
    flex-grow: 1;
    position: relative;
}

div#content div.view div.wrapper div.content {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--header_radius);
}
div#content > div.view > div.wrapper > div.content.noscroll {
    overflow: hidden;
}
div#content > div.view > div.wrapper > div.content:not(.noscroll) {
    overflow-y: scroll;
    will-change: scroll-position;
}
body.desktop div#content > div.view > div.wrapper > div.content:not(.noscroll) {
    padding-left: 12px;
}


/* global fix for font bolding on chrome */
* {
    -webkit-font-smoothing: antialiased;
}

/* react to small windows */
html.desktop {
    @media only screen and (max-device-width: 1400px) {
        font-size: 15px;
    }
}

body.desktop.leftbar_compact div#content {
    margin-left: calc(var(--hidden_bar_width) + 20px);
}
body.desktop.rightbar_compact div#content {
    margin-right: calc(var(--hidden_bar_width) + 20px);
}
body.desktop {
    @media only screen and (max-width: 1000px) {
        div#content {
            margin-left: calc(var(--hidden_bar_width) + 20px);
            margin-right: calc(var(--hidden_bar_width) + 20px);
        }
        div#rightbar div.hide, div#leftbar div.hide {
            display: none;
        }
        div#rightbar:not(:hover), div#leftbar:not(:hover) {
            width: var(--hidden_bar_width) ! important;
            min-width: var(--hidden_bar_width) ! important;
        }
        div#leftbar {
            position: fixed;
            top: var(--topbar_height);
            left: 0;
        }
        div#rightbar {
            position: fixed;
            top: var(--topbar_height);
            right: 0;
        }
        div#leftbar:hover,
        div#rightbar:hover {
            filter: drop-shadow(var(--box_shadow));
        }
        div#leftbar > *,
        div#rightbar > * {
            visibility: hidden;
        }
        div#leftbar:hover > *,
        div#rightbar:hover > * {
            visibility: visible;
        }
    }
}

img {
    user-select: none;
}
img.pic_preview {
    max-width: 90vw;
    height: auto;
    width: auto;
    max-height: calc(100vh - 140px);
}

div.header {
    padding: 10px;
    color: var(--text_color_header);
    font-size: var(--header_text_size);
    text-align: center;
}

/* content editable placeholder styling */
[contenteditable="true"]:empty::before {
    content: attr(placeholder);
    color: var(--shade4);
    pointer-events: none; /* Prevents interference with cursor */
    display: block;
}

svg.archived {
    width: 1em;
    height: 1em;
    vertical-align: -0.22em;
    margin-right: 0.4em;
    fill: var(--shade5);
}
div.form, div.form * {
    box-sizing: border-box;
}

input,
select,
div.form div.textarea {
    font-family: "EB Garamond";
    font-size: var(--form_text_size);
    color: var(--text_color_form);
    width: 100%;
    padding: 4px 6px 2px;
    background: var(--background);
}

label.disabled input,
label.disabled select,
div.form label.disabled div.textarea {
    pointer-events: none;
    color: var(--text_color);
}


body.mobile input,
body.mobile select {
    padding-top: 4px;
    padding-bottom: 4px;
}
/* Change the white to any color */
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: var(--text_color_form);
}
input::placeholder {
    color: var(--shade3);
}

input:focus,
select:focus,
div.form div.textarea {
    outline: inherit;
}
input.error, select.error {
    border-color: red ! important;
}

label {
    color: var(--text_color_light);
    display: inline-block;
}

div.form.centered div.form_contents {
    display: flex;
    flex-flow: column;
    align-items: center;
}

div.form div.form_contents {
    box-sizing: border-box;
    height: 100%;
    padding-bottom: 73px;
}

/* modal */
div.modal div.form {
    height: 100%;
}

/* levy: leave space for the title */
div.modal:has(h2) div.form {
    height: calc(100% - 40px);
}
div.modal div.form_inner {
    position: unset;
}

body.desktop div.modal div.form_inner {
    will-change: unset;
    overflow-y: unset;
    padding-left: unset ! important;
}
div.modal div.form {
    position: relative;
}

/* dropdown styling */
body.desktop div.form div.dropdown_element,
body.mobile div.form div.dropdown_element {
    font-size: var(--form_text_size);
    border-bottom: var(--form_underline_border);
    border-radius: 0;
    --label_padding: 3px 6px 1px;
}
div.form div.dropdown_element div.dropdown_label {
    color: var(--text_color_form);
    background: transparent;
    outline: unset;
    width: 100%;
}
div.form div.dropdown_element.disabled div.dropdown_label {
    color: var(--text_color);
}
/* tree_select styling */
body.desktop div.form div.tree_select.dropdown,
body.mobile div.form div.tree_select.dropdown {
    font-size: var(--form_text_size);
    border-bottom: var(--form_underline_border);
    border-radius: 0;
    --label_padding: 3px 6px 1px;
}
div.form div.tree_select.dropdown div.dropdown_label {
    color: var(--text_color_form);
    background: transparent;
    outline: unset;
    width: 100%;
}
div.form div.tree_select.disabled div.dropdown_label {
    color: var(--text_color);
}

div.form input,
div.form select,
div.form div.textarea {
    border: none;
    border-bottom: var(--form_underline_border);
}
div.form input:focus {
    border-bottom: 1px solid var(--shade5);
}
div.form select {
    width: 100%;
}

div.form label.form {
    text-align: left;
    padding: 4px 4px;
    color: var(--text_color_light);
}

div.form .form {
    margin: 10px;
}

div.form div.textarea {
    cursor: text;
    white-space: pre-wrap;
    display: inline-block;
}

/* submitted message */
div.form_submitted {
    width: 80%;
    margin: auto;
    margin-top: 100px;
    text-align: center;
    font-size: 32px;
}


/* help card */
div.form div.card {
    color: var(--text_color);
    padding: 10px 20px;
    margin: 0 20px 10px;
    width: calc(100% - 40px);
    text-align: center;
}

/* section */
div.form div.form.section > div.content {
    width: 100%;
}
div.form.centered div.form.section > div.content {
    display: flex;
    flex-flow: column;
    align-items: center;
}
div.form div.form.section {
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 50px 6px 20px;
    margin: 50px 0px 0px;
    border-top: 1px solid var(--shade3);
    width: 100%;
//    scroll-snap-align: start;

//    border: 1px solid var(--shade3);
//    border-radius: var(--card_radius);
}
div.form div.form.section > span {
    font-size: 1.25rem;
    font-weight: bold;
    padding: 0 8px;
    background: var(--background);
    transform: translateY(-60%);
    background: var(--shade1);
    padding: 2 8px;
    border: var(--card_border);
    border-radius: var(--header_radius);
}

/* buttons */
div.form > div.button_wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: var(--background);
    z-index: calc(var(--menu_layer) + 1);
}
div.form div.button_wrapper button{
    margin-bottom: 10px;
}
/* scrollbar: leave space for the buttons */
body.desktop div.form div.form_contents::-webkit-scrollbar-track {
    margin-bottom: 60px;
}

/* form wrapping / scroll */
div.form_outer {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    position: relative;
}
div.form_inner {
    position: absolute;
    height: 100%;
    width: 100%;
    will-change: scroll-position;
    overflow-y: scroll;
    box-sizing: border-box;
//    scroll-snap-type: y mandatory;
//    scroll-padding-top: 20px;
}
body.desktop div.form_inner {
    padding-left: 12px; /* for the scrollbar */
}

/* field spacer */
div.spacer {
    display: inline-block;
}


/* tooltips */
div.form div.tooltip {
    position: absolute;
    background: var(--background);
    color: var(--text_color);
    box-shadow: var(--box_shadow);
    padding: 6px 8px;
    border-radius: 4px;
    pointer-events: none; /* so it doesn't block mouse events */
    font-size: 1rem;
    margin-top: 8px;
    display: none;
}
div.form span.label:hover div.tooltip,
div.form label:hover div.tooltip {
    display: block;
}

div.form label.checkbox {
    display: flex;
    white-space: nowrap;
}
div.form label.checkbox input {
    width: unset;
    margin: 2px 0 0 10px;
}
/* family */
div.form div#family_settings {
    margin-top: 30px;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
}

div.form div#family_settings table.form {
    border-collapse: collapse;
}
body.desktop div.form div#family_settings table.form {
    min-width: 400px;
    width: max-content;
}

div.form div#family_settings table.form tr {
    position: relative;
}
div.form div#family_settings table.form select {
    width: 125px;
    margin: 8px 2px;
    padding: 2px 4px;
}
div.form div#family_settings table.form input {
    width: calc(100% - 2px);
    margin: 8px 2px;
    padding: 3px 8px;
}
div.form div#family_settings table.form td div.results_wrapper {
    display: none;
    background: var(--background);
    z-index: var(--dropdown_layer);
    border-radius: var(--menu_border_radius);
    position: absolute;
    flex-flow: column;
    gap: 4px;
    left: 8px;
    box-shadow: var(--box_shadow);
}
div.form div#family_settings table.form td div.results_wrapper.upward div.badge.select:hover {
    background: var(--primary_shade);
}
div.form div#family_settings table.form td div.results_wrapper.upward {
    bottom: 100%;
}
div.form div#family_settings table.form tr td:first-child {
    padding-right: 20px;
}
div.form div#family_settings table.form tr td:last-child {
    width: 1%;
    white-space: nowrap;
}
div.form div#family_settings table.form thead {
    background: var(--shade1);
    color: var(--shade6);
    border-bottom: 1px solid var(--shade3);
}
div.form div#family_settings table.form th {
    text-align: left;
    white-space: nowrap;
    padding: 2px 10px;
}
div.form div#family_settings table.form div#selected {
    max-height: 220px;
    text-align: center;
    padding: 0px 0px;
    border-bottom: var(--form_underline_border);
}

div.form div#family_settings table.form div#relationship_select {
    justify-content: left;
    padding: 6px 2px;
    border-bottom: var(--form_underline_border);
    --label_padding: 5px 10px;
}

div.form label.count div.wrapper {
    display: flex;
    align-items: center;
}
div.form label.count div.wrapper span#unit {
    padding-left: 4px;
    flex-grow: 1;
}
div.form label.count div.wrapper input {
    width: 3em;
    text-align: center;
}

div.form label.select_and_sort_mobile, div.form label.select_and_sort_mobile * {
    box-sizing: border-box;
}

div.form label.select_and_sort_mobile div#wrapper {
    display: flex;
    flex-flow: column;
    align-items: center;
}

div.form label.select_and_sort_mobile div#wrapper > div {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}

div.form label.select_and_sort_mobile h2 {
    margin: 0;
}

div.form label.select_and_sort_mobile ul.ui-sortable {
    border: 1px solid var(--shade3);
    list-style-type: none;
    padding: 0 4px;
    margin: 8px;
}
div.form label.select_and_sort_mobile ul.ui-sortable li {
    position: relative;
    cursor: grab;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    padding: 4px 3rem;
    margin: 4px 0px;
    background: var(--shade2);
    border: 1px solid var(--shade3);
}
body.mobile div.form label.select_and_sort_mobile ul.ui-sortable li {
    font-size: 1.2rem;
    padding: 8px 3rem;
}

div.form label.select_and_sort_mobile ul.ui-sortable li div {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 4px 8px;
    cursor: pointer;
}
div.form label.select_and_sort_mobile ul.ui-sortable li svg {
    width: 1em;
    height: 1em;
    fill: var(--shade4);
}
div.form label.select_and_sort_mobile ul.ui-sortable li:first-child div.up {
    display: none;
}
div.form label.select_and_sort_mobile ul.ui-sortable li:last-child div.down {
    display: none;
}
body.desktop div.form label.select_and_sort_mobile ul.ui-sortable li div:hover {
    fill: var(--shade5);
}
div.form label.select_and_sort_mobile ul.ui-sortable li div.up {
    right: 0;
}
div.form label.select_and_sort_mobile ul.ui-sortable li div.down {
    left: 0;
}

/* style the selector label */
div.form label.select_and_sort_mobile div.dropdown_element {
    border-bottom: none;
}
div.form label.select_and_sort_mobile div.dropdown_label {
    background: var(--button_color);
    color: var(--text_color);
    border-radius: var(--button_border_radius);
    padding: 4px 16px;
    margin-bottom: 10px;
}
div.form label.select_tree_multiple, div.form label.select_tree_multiple * {
    box-sizing: border-box;
}

div.form label.select_tree_multiple > div.button_wrapper {
    text-align: center;
}
div.form label.select_tree_multiple div.selected {
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

div.form label.select_tree_multiple ul.ui-sortable {
    display: flex;
    flex-flow: column;
    gap: 8px;
    max-height: 40vh;
    will-change: scroll-position;
    overflow-y: auto;
    list-style-type: none;
    padding: 8px;
    margin: 4px;
    width: fit-content;
    border: var(--card_border);
    border-radius: var(--header_radius);
}

div.form label.select_tree_multiple div.selected li {
    display: flex;
    align-items: center;
}

div.form label.select_tree_multiple div.selected li div.label {
    display: flex;
    justify-content: center;
    position: relative;
    background: var(--card_color);
    border: var(--card_border);
    border-radius: var(--header_radius);
    padding: 4px 8px;
    flex-grow: 1;
}

body.mobile div.form label.select_tree_multiple div.selected li div.label {
    font-size: 1.2rem;
    padding: 8px 16px;
}
div.form label.select_tree_multiple div.selected div.remove {
    margin-left: 0.2em;
    padding: 4px;
    cursor: pointer;
}
div.form label.select_tree_multiple div.selected div.remove svg {
    width: 1.3em;
    height: 1.3em;
    fill: var(--shade5);
}
div.form label.select_tree_multiple div.selected div.remove:hover svg {
    fill: var(--shade6);
}
div.form label.select_tree_multiple div.selected div.empty {
    margin: 8px;
    font-size: 1.2rem;
}

/* sorting style */

/* drag/drop */
body.desktop div.form label.select_tree_multiple.sort div.selected li.dragging svg {
    visibility: hidden;
}
body.desktop div.form label.select_tree_multiple.sort div.selected li div.label {
    cursor: grab;
}

div.form label.select_tree_multiple.sort div.selected li div.label {
    padding: 4px 3rem;
}
body.mobile div.form label.select_tree_multiple.sort div.selected li div.label {
    padding: 8px 3rem;
}
div.form label.select_tree_multiple.sort div.selected li div.label div {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 4px 8px;
    cursor: pointer;
}
div.form label.select_tree_multiple.sort div.selected li div.up {
    right: 0;
}
div.form label.select_tree_multiple.sort div.selected li div.down {
    left: 0;
}
div.form label.select_tree_multiple.sort div.selected li div.label svg {
    width: 1em;
    height: 1em;
    fill: var(--shade4);
}
div.form label.select_tree_multiple.sort div.selected li:first-child div.up {
    display: none;
}
div.form label.select_tree_multiple.sort div.selected li:last-child div.down {
    display: none;
}
body.desktop div.form label.select_tree_multiple.sort div.selected li div.label div:hover svg {
    fill: var(--shade5);
}

div.form label.timepicker {
    position: relative;
    z-index: 100;
}
div.form label.timepicker div.timepicker_dropdown {
    position: absolute;
    top: calc(100% + 4px);
    background: var(--background);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    box-shadow: var(--box_shadow);
    border: 1px solid #dbdbdb;
    width: calc(100% - 32px);
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    --thumb_height: 14px;
    --thumb_width: 6px;
    --thumb_color: var(--primary_color);
    --thumb_radius: 4px;
    --bar_height: 2px;
    --slider_margin: 14px 10px 10px;
    --label_margin: 0;
}
body.mobile div.form label.timepicker div.timepicker_dropdown {
    --thumb_height: 32px;
    --thumb_width: 12px;
    --thumb_radius: 6px;
    --bar_height: 4px;
    --slider_margin: 30px 10px 10px;
    --label_margin: 14px 0px 0px;
}
body.mobile div.form label.timepicker div.timepicker_dropdown {
    position: fixed;
    margin: auto;
    width: 90vw;
    top: var(--popup_top) ! important;
    left: 0;
    right: 0;
}
body.mobile div.form label.timepicker div.timepicker_dropdown * {
    z-index: var(--menu_layer);
}
body.mobile div.form label.timepicker div.overlay {
    backdrop-filter: var(--blocker_filter);
    background: var(--blocker_overlay);
    z-index: 0;
}
body.desktop div.form label.timepicker button.timepicker_submit {
    display: none;
}
div.form label.timepicker div.timepicker_dropdown > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
body.desktop div.form label.timepicker div.timepicker_dropdown div.timepicker_display {
    display: none;
}

body.mobile div.form label.timepicker div.timepicker_dropdown div.timepicker_display {
    font-size: 2em;
    padding: 10px;
}

div.form label.timepicker div.timepicker_dropdown label {
    margin: var(--label_margin);
    text-align: right;
    width: 4em;
}

div.form label.timepicker input.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    height: var(--bar_height);
    background: #ddd;
    border-bottom: 0;
    outline: none;
    margin: var(--slider_margin);
    z-index: var(--menu_layer);
    width: 100%;
    flex-grow: 1;
}

div.form label.timepicker input.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: var(--thumb_width);
    height: var(--thumb_height);
    background: var(--thumb_color);
    border-radius: var(--thumb_radius);
    cursor: pointer;
}

div.form label.timepicker input.slider::-moz-range-thumb {
    width: var(--thumb_width);
    height: var(--thumb_height);
    background: var(--thumb_color);
    border-radius: var(--thumb_radius);
    cursor: pointer;
}

div.form label.filter_builder div#wrapper div.group {
    display: inline-flex;
    justify-content: center;
    position: relative;
    color: var(--text_color);
    background: var(--card_color);
    border: var(--card_border);
    border-color: var(--shade3);
    border-radius: var(--card_radius);
    margin: 20px 0;
    padding: 14px 50px;
    min-height: 80px;
    min-width: 200px;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    --selected_color: var(--shade2);
}
div.form label.filter_builder div#wrapper div.group.dragging {
    border-radius: 0;
    cursor: grab;
}
div.form label.filter_builder div#wrapper div.group.dragging div#plus_menu,
div.form label.filter_builder div#wrapper div.group.dragging > div.remove {
    display: none ! important;
}
div.form label.filter_builder div#wrapper div.group.dragover {
    background: var(--shade3);
}
div.form label.filter_builder div#wrapper div.group div.empty {
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    width: 160px;
    text-align: center;
    color: var(--shade5);
    cursor: pointer;
}
div.form label.filter_builder div#wrapper div.group div.empty svg {
    width: 30px;
    height: 30px;
    fill: var(--shade5);
    position: absolute;
    left: 24px;
    bottom: 20px;
}

div.form label.filter_builder div#wrapper div.group div.content div.group {
    flex-basis: 100%;
    margin-top: 0;
}

div.form label.filter_builder div#wrapper div.group div.content {
    display: flex;
    flex-flow: column;
    //flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* plus menu */
div.form label.filter_builder div#wrapper div.group div#plus_menu {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0px 12px;
}
div.form label.filter_builder div#wrapper div.group div#plus_menu div#plus_menu_btn {
    padding: 10px;
}
div.form label.filter_builder div#wrapper div.group div#plus_menu svg {
    width: 12px;
}

div.form label.filter_builder div#wrapper div.group div#plus_menu div#plus_menu_btn_wrapper {
    background: none;
    position: absolute;
    padding: 0;
    left: 0;
    bottom: 0;
}
div.form label.filter_builder div#wrapper div.group div#plus_menu div#plus_menu_btn_wrapper div#plus_menu_btn {
    transform: translateY(50%);
}

div.form label.filter_builder div#wrapper div.group div#plus_menu div#plus_menu_items {
    bottom: 22px;
}
/* parenthesis button */
div.form label.filter_builder div#wrapper div.group > div.parenthesis {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px 12px;
    padding: 9px;
    border-radius: 50%;
    background: var(--primary_color);
    fill: #fff;
    cursor: pointer;
    transform: translateY(50%);
}
div.form label.filter_builder div#wrapper div.group > div.parenthesis svg {
    cursor: pointer;
    width: 14px;
}

/* minus button */
div.form label.filter_builder div#wrapper div.group > div.remove {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px;
    fill: var(--x_color);
    cursor: pointer;
}
body.mobile div.form label.filter_builder div#wrapper div.group:has(div.filter) > div.remove {
    display: block;
}

div.form label.filter_builder div#wrapper div.group:has(div.filter):hover:not(:has(div.group:hover),
                                :has(div.filter:hover)) > div.remove,
div.form label.filter_builder div#wrapper div.group div.group:hover:not(:has(div.group:hover),
                          :has(div.filter:hover)) > div.remove {
    display: block;
}

div.form label.filter_builder div#wrapper div.group > div.remove:hover {
    fill: var(--x_color_hover);
}

div.form label.filter_builder div#wrapper div.group > div.parenthesis:hover {
    opacity: 0.9;
}


div.form label.filter_builder div#wrapper div.group > div.remove svg {
    cursor: pointer;
    width: 12px;
}

/* operator */
div.form label.filter_builder div#wrapper div.group span.operator {
    font-style: italic;
    cursor: pointer;
    padding: 5px;
}
body.mobile div.form label.filter_builder div#wrapper div.group span.operator {
    padding: 12px;
}

/* drag image */
div.form label.filter_builder div#wrapper div.group div#drag_image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--shade1);
//    visibility: hidden;
    position: absolute;
}
div.form label.filter_builder div#wrapper div.group div#drag_image svg {
    fill: var(--shade4);
    width: 20px;
}

div.form label.recurrence div#day_picker {
    display: none;
}

div.form label.recurrence div#n_picker {
    margin-top: 10px;
    width: 50%;
}
div.form label.recurrence div#n_picker input {
    width: 2em;
    text-align: center;
}
div.form label.recurrence div#until {
    margin-top: 10px;
    width: 50%;
}
div.form label.filter_builder {
    text-align: center;
    --x_color: var(--shade5);
    --x_color_hover: var(--shade6);
}

div.form label.filter_builder div#wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
div.form label.filter_builder div#wrapper, div.form label.filter_builder div#wrapper * {
    box-sizing: border-box;
}

div.form label.filter_builder div#wrapper svg.filter_move {
    fill: var(--card_color);
}

div.form label.form label.file {
    display: block;
    border: none;
    border-bottom: 1px solid #aaa;
    font-size: 18px;
    padding: 1px 2px;
    color: var(--text_color_form);
    cursor: pointer;
    position: relative;
}
div.form label.form label.file svg {
    width: 15px;
    height: 15px;
    fill: var(--shade4);
    position: absolute;
    right: 4px;
    top: 4px;
}

div.form label.select_and_sort, div.form label.select_and_sort * {
    box-sizing: border-box;
}

div.form label.select_and_sort {
    display: flex;
    flex-flow: column;
    --scrollbar_color: var(--shade4);
}

div.form label.select_and_sort div.outer_wrapper {
    display: flex;
    justify-content: center;
}

div.form label.select_and_sort div.outer_wrapper > div {
    display: flex;
    flex-flow: column;
}

div.form label.select_and_sort h2 {
    margin: 0;
}

div.form label.select_and_sort div.wrapper {
    border: 1px solid var(--shade3);
    padding: 0;
    margin: 8px;
    flex-grow: 1;
    border-radius: var(--card_radius);
}

div.form label.select_and_sort ul.ui-sortable {
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 100%;
    max-height: 40vh;
    will-change: scroll-position;
    overflow-y: auto;
}
div.form label.select_and_sort ul.ui-sortable li {
    cursor: grab;
    width: calc(100% - 8px);
    max-width: 300px;
    border-radius: 5px;
    padding: 4px 8px;
    margin: 4px;
    background: var(--shade2);
    border: 1px solid var(--shade3);
}
div.form label.select_and_sort input.search {
    background: transparent;
    border-bottom: var(--card_border);
    color: var(--text_color_light);
    font-size: var(--form_text_size);
    padding: 4px 10px;
}

div.form div.select_users_wrapper div#results_wrapper {
    position: relative;
    z-index: var(--menu_overlay_layer);
}
div.form div.select_users_wrapper div#results {
    position: absolute;
    border: 1px solid var(--shade3);
}
div.form div.select_users_wrapper input[type=search] {
    border: 1px solid var(--shade3);
    padding: 4px 8px;
    margin-top: 4px;
    border-radius: 6px;
}
div.form div.select_users_wrapper div#selected {
    max-height: 220px;
    overflow-y: auto;
    text-align: center;
    padding: 10px 0px 50px;
    position: relative;
    display: none;
}
div.form div.select_users_wrapper input#filter {
    width: 200px;
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
div.form div.select_users_wrapper div#no_results {
    height: 103px;
    align-items: center;
    justify-content: center;
}

div.form label.filter_builder div.filter {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--text_color);
    background: var(--background);
    border: var(--card_border);
    border-color: var(--shade3);
    border-radius: var(--card_radius);
    padding: 10px 20px;
}
div.form label.filter_builder div.filter.dragging {
    border-radius: 0;
    cursor: grab;
    z-index: var(--modal_layer);
}
div.form label.filter_builder div.filter.dragging > div.remove {
    display: none ! important;
}

/* minus button */
div.form label.filter_builder div.filter > div.remove {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px;
    stroke: var(--x_color);
    cursor: pointer;
}
body.mobile div.form label.filter_builder div.filter > div.remove {
    display: block;
}

div.form label.filter_builder div.filter:hover:not(:has(div.dropdown)) > div.remove {
    display: block;
}

div.form label.filter_builder div.filter > div.remove:hover {
    stroke: var(--x_color_shade);
}

div.form label.filter_builder div.filter > div.remove svg {
    cursor: pointer;
    width: 12px;
}

div.form label.filter_builder div.filter div.details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Summary styling */
div.form label.filter_builder div.filter span.summary {
    cursor: pointer;
    letter-spacing: 0.3px;
    font-size: 1.1em;
    padding: 6px 5px;// 8px;
    white-space: nowrap;
}
div.form label.filter_builder div.filter span.summary.missing {
    font-weight: normal ! important;
    font-style: italic;
    color: var(--text_color_light);
    font-size: 1em;
    padding: 6px 6px 6px 5px;
}
div.group:not(.dragover) div.form label.filter_builder div.filter span.summary:hover {
//    text-decoration: underline;
    background: var(--shade2);
    border-radius: 10px;
}
div.form label.filter_builder div.filter span.summary.field {
    font-weight: bold;
}

div.form label.filter_builder div.filter span.comparator {
    font-style: italic;
//    margin: 0px 5px;
}

div.form label.filter_builder div.filter span.value {
    font-weight: bold;
}

div.form label.filter_builder div.filter div.label {
    display: none ! important;
    text-align: center;
    font-style: italic;
    padding: 0px 8px 2px;
    position: absolute;
    transform: translateY(-100%);
    left: 0;
    top: -4;
    width: 100%;
    background: var(--shade1);
    border-radius: 5px;
    box-shadow: var(--box_shadow);
}

/* dropdown styling */
div.form label.filter_builder div.filter div.dropdown_element {
    margin: 4px 10px 4px 4px;
}
body.desktop div.form label.filter_builder div.filter div.dropdown_element div.dropdown {
    position: absolute;
}
div.form label.filter_builder div.filter div.dropdown_element div.dropdown_label {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    min-width: var(--min_width);
}

div.form label.filter_builder div.filter div.value_select.input {
    min-width: 20px;
    font-family: "EB Garamond";
    font-size: var(--form_text_size);
    color: var(--text_color_form);
    padding: 4px 2px 2px;
    background: var(--background);
    border: none;
    border-bottom: 1px solid var(--shade4);
    outline: none;
}
/* profile picture */
div.prof_pic_uploader {
    padding: 10px;
    text-align: center;
}
div.prof_pic_uploader img {
    width: 120px;
    height: 120px;
    display: block;
    margin: 10px auto;
    border-radius: 50%;
}

div#cropper {
    width: 350px;
    height: 390px;
    padding: 20px 20px 60px;
}

div.form label.select_space div#results_wrapper {
    position: relative;
    z-index: 101;
}
div.form label.select_space div#results {
    position: absolute;
    margin-top: 4px;
    border: 1px solid var(--shade3);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--shade1);
    --scrollbar_color: var(--shade4);
    --scrollbar_border: var(--shade1);
}
div.form label.select_space div#selected {
    max-height: 220px;
    text-align: center;
    padding: 0px 0px;
}

div.form label.daypicker div#daypicker {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

body.desktop div.form label.daypicker div#daypicker {
    max-width: calc(14em + 24px);
}

div.form label.daypicker span {
    background: var(--shade2);
    width: 3em;
    height: 3em;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 4px 0;
    cursor: pointer;
}
body.desktop div.form label.daypicker span:not(.selected):hover {
    background: var(--primary_shade);
}

body.desktop div.form label.daypicker span {
    width: 2em;
    height: 2em;
}
div.form label.daypicker span.selected {
    background: var(--primary_color);
    color: var(--text_color_inverted);
}
div.form label.daypicker span.selected.locked {
    background: var(--primary_color);
    cursor: default;
}

div.form label.select_tree div.tree_select div#tree {
    min-height: unset;
    max-height: calc(100dvh - 430px) ;
}

div.select_people_wrapper {
    --scrollbar_color: var(--shade4);
    --scrollbar_border: var(--card_color);
    --border_radius: 5px;
    --highlight_background: var(--primary_shade);
}
div.select_people_wrapper div.overlay {
    display: none;
    overflow: hidden;
}
div.select_people_wrapper div.dropdown {
    display: none;
    flex-flow: column;
    position: fixed;
    margin-bottom: 4px;
    overflow: hidden;
    background-color: var(--card_color);
    border-radius: var(--border_radius);
    box-shadow: var(--box_shadow);
    z-index: var(--dropdown_layer);
}

div.select_people_wrapper input[type=search] {
    border: 1px solid var(--shade3);
    padding: 4px 8px;
    margin-top: 4px;
    border-radius: 6px;
}
div.select_people_wrapper div#selected {
    max-height: 220px;
    overflow-y: auto;
    text-align: center;
    padding: 10px 0px;
    position: relative;
    display: none;
}
div.select_people_wrapper input#filter {
    width: 200px;
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
div.select_people_wrapper div#no_results {
    padding: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
}
div.select_people_wrapper div.results {
    overflow: auto;
    max-height: var(--dropdown_max_height);
}
div.select_people_wrapper div.results div.empty {
    padding: 20px;
    text-align: center;
    white-space: nowrap;
}

div.select_people_wrapper div.badge.select.highlighted {
    background-color: var(--highlight_background);
}

/* mobile popup */
/*
body.mobile div.select_people_wrapper div.dropdown {
    background: var(--background);
    font-size: 1.4rem;
    z-index: var(--modal_layer);
    position: fixed;
    margin: auto;
    width: 90vw;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
}

body.mobile div.select_people_wrapper div.overlay {
    backdrop-filter: var(--blocker_filter);
    background: var(--blocker_overlay);
    z-index: var(--modal_overlay_layer);
}

body.mobile div.select_people_wrapper {
    --option_padding: 10px 18px;
}
body.mobile div.select_people_wrapper div.results {
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
}
body.mobile div.select_people_wrapper div.option {
    width: 100%;
    overflow-x: auto;
}
*/
div.form div.space_icon_configurator div#settings {
    margin: auto;
    width: fit-content;
    position: relative;
    padding: 10px 60px 50px;
}
div.form div.space_icon_configurator div.icon_wrapper {
    --icon_size: 50px;
}
div.form div.space_icon_configurator div#settings label {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 72px;
}
div.form div.space_icon_configurator div#settings label#icon_color {
    left: 0px;
}
div.form div.space_icon_configurator div#settings label#icon_image {
    right: 0px;
}

/* color drawer */
div.form div.space_icon_configurator div#settings div#colors {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--shade2);
    padding: 10px;
    position: absolute;
    left: -11px;
    top: 104px;
    width: 100%;
    visibility: hidden;
    background: white;
    z-index: 10;
    border-radius: 5px;
}

div.form div.space_icon_configurator div#settings div#colors div.color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 2px;
    cursor: pointer;
}
div.form div.space_icon_configurator div#settings div#colors div.color:hover {
    opacity: 50%;
}

/* icon drawer */
div.form div.space_icon_configurator div#settings div#icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid var(--shade2);
    padding: 10px;
    position: absolute;
    left: calc(-41% - 11px);
    top: 104px;
    width: 182%;
    visibility: hidden;
    background: white;
    z-index: 10;
    border-radius: 5px;
}

div.form div.space_icon_configurator div#settings div#icons div.icon_wrapper {
    --icon_size: 40px;
    margin: 2px;
}
div.form div.space_icon_configurator div#settings div#icons div.icon_wrapper svg {
    cursor: pointer;
}
div.form div.space_icon_configurator div#settings div#icons div.icon_wrapper:hover {
    opacity: 50%;
}


div.form label.select_household div#results_wrapper {
    position: relative;
    z-index: 101;
}
div.form label.select_household div#results {
    position: absolute;
    margin-top: 4px;
    border: 1px solid var(--shade3);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--shade1);
    --scrollbar_color: var(--shade4);
    --scrollbar_border: var(--shade1);
}
div.form label.select_household div#selected {
    max-height: 220px;
    text-align: center;
    padding: 0px 0px;
    border-bottom: var(--form_underline_border);
}
div.form label.form.location input:last-of-type {
    margin-top: 6px;
}
div.air-datepicker-global-container {
    z-index: 102;
}
body div.air-datepicker {
    --addp-z-index: 9;
    --adp-font-family: var(--font);
    --adp-font-size: 1em;
    --adp-padding: 4px 10px 6px;
    --adp-mobile-font-size: 5vw;
    --adp-mobile-width: 90vw;
    --adp-day-name-color: var(--primary_color);
    --adp-cell-background-color-selected: var(--primary_color);
    --adp-cell-background-color-selected-hover: var(--primary_color);
    --adp-color-current-date: var(--primary_color);
    --adp-background-color-selected-other-month: var(--primary_color);
    --adp-background-color-selected-other-month-focused: var(--primary_color);
    --adp-color-other-month: var(--shade3);
    box-shadow: var(--box_shadow);
}
body.mobile div.air-datepicker {
    --adp-background-color-hover: var(--background);
    --adp-background-color-hover: var(--background);
    top: var(--popup_top) ! important;
    left: 0 ! important;
    right: 0 ! important;
    margin: auto;
    transform: none !important;
}

/* disable transition */
body .air-datepicker {
    transition: none !important;
    overflow: hidden;
}

body .air-datepicker-cell {
    transition: none !important;
}
body.mobile .air-datepicker-nav--title {
    font-size: 6vw;
}

/* update the font for timepicker */
body .air-datepicker-time--current-hours,
body .air-datepicker-time--current-minutes {
    font-family: var(--font);
}

body.mobile .air-datepicker-nav--action:hover {
    background: unset;
}
body.mobile .air-datepicker-nav--action:active {
    background: var(--adp-background-color-active);
}

body .air-datepicker-cell.-current- {
    background: var(--primary_shade);
    color: var(--adp-color-current-date);
}
body div.air-datepicker-overlay {
    transition: none !important;
}
body div.air-datepicker-overlay.-active- {
    backdrop-filter: var(--blocker_filter);
    background: var(--blocker_overlay);
}
/* profile picture */
label.event_pic_uploader {
    padding: 10px;
    text-align: left;
}
label.event_pic_uploader div#pic_wrapper {
    text-align: center;
    object-fit: contain;
}
label.event_pic_uploader div#pic_wrapper img {
    width: 100%;
    max-width: 600px;
    margin: auto;
    margin-top: 10px;
    border-radius: 10px;
}


label.event_pic_uploader label.button {
    display: block;
    margin-top: 10px;
}

div#event_cropper {
    --max-width: 800px;
    --offset: 8px;
    width: calc(80dvw + var(--offset));
    height: calc(80dvw / 3);
    max-width: calc(var(--max-width) + var(--offset));
    max-height: calc(var(--max-width) / 3);
    padding: 20px 20px 60px;
}

body.mobile div#event_cropper {
    --width: calc(100dvw - 52px);
    width: calc(var(--width) + var(--offset));
    height: calc(var(--width) / 3);
    padding: 0px;
    padding-bottom: 40px;
}
body.select {
    background: var(--shade1);
    background-image: url(/static/img/background.jpg);
    background-size: cover;
}

body.select div#topbar,
body.select div#leftbar,
body.select div#rightbar {
    display: none;
}

div#select_server_view, div#select_server_view * {
    box-sizing: border-box;
}
div#select_server_view div.overlay {
    background: var(--blocker_overlay);
}

div#select_server_view {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
}
div#select_server_view div.wrapper {
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
    background: var(--background);
    padding: 110px 30px 0px;
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box_shadow);
    z-index: var(--modal_overlay_layer);
}

div#select_server_view div#select {
    width: 100%;
}

div#select_server_view div.dropdown_element div.dropdown_label,
div#select_server_view div.dropdown_element div.dropdown,
div#select_server_view div.dropdown_element {
    width: 100%;
}

div#select_server_view button {
    width: 200px;
    font-family: var(--font);
}

div#select_server_view div#logo {
    padding: 14px 30px 10px;
    margin-bottom: 30px;
    background: var(--shade6);
    width: 300px;
    position: absolute;
    left:0;
    top:0;
    margin: auto;
}

div#new_user_view div.success {
    display: flex;
    flex-flow: column;
    margin: auto;
    align-items: center;
    gap: 20px;
    font-size: 2rem;
    font-weight: bold;
//    justify-content: center;
}
div#new_user_view div.success svg {
    fill: var(--primary_color);
    width: 80px;
    height: 80px;

}

div.map_wrapper {
    width: 100%;
    height: 100%;
}

div.map_wrapper, div.map_wrapper * {
    box-sizing: border-box;
}

div.map_wrapper div.content {
    border-radius: var(--header_radius);
}

div.map_wrapper .map-tooltip .maplibregl-popup-content {
    border-radius: var(--header_radius);
    box-shadow: var(--box_shadow);
    padding: 4px 8px;
    pointer-events: none;
    width: fit-content;
}
div.map_wrapper .map-tooltip .maplibregl-popup-tip {
    visibility: hidden;
    padding-top: 2px;
}

div.map_wrapper div.marker {
    pointer-events: none;
    --icon_size: 30px;
    --marker_size: 40px;
}
div.map_wrapper div.marker div.icon_wrapper svg:not(.active),
div.map_wrapper div.marker div.icon_wrapper img.pic {
    border: 2px solid var(--border_color);
}

body.mobile div.map_wrapper div.marker {
    --icon_size: 30px;
    --marker_size: 44px;
}
div.map_wrapper div.marker svg.church_marker {
    fill: var(--shade7);
    width: var(--marker_size);
    height: var(--marker_size);
}

/* osm attribution */
div.map_wrapper details.maplibregl-ctrl-attrib {
    background-color: rgba(255, 255, 255, 0.6);
    border-bottom-right-radius: var(--header_radius);
}

div.map_wrapper details.maplibregl-ctrl-attrib a {
    color: var(--text_color_light);
    font-size: 12px;
}

/* legend */
div.map_wrapper div.map-legend {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 8;
    padding: 4px 8px;
    background: var(--background);
    font-size: 0.75rem;
    font-style: italic;
    border-radius: var(--card_radius);
    box-shadow: var(--box_shadow);
    touch-action: none;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    --scrollbar_color: var(--shade4);
}
body.mobile div.map_wrapper div.map-legend *::-webkit-scrollbar {
    display: block;
}
div.map_wrapper div.map-legend h2 {
    font-size: 1rem;
}
div.map_wrapper div.map-legend div.entries {
    max-height: 10rem;
    overflow-y: auto;
    -ms-overflow-style: unset;
    scrollbar-width: unset;
}
div.map_wrapper div.map-legend div.entry {
    cursor: pointer;
    font-family: var(--detail_font);
    font-style: normal;
    line-height: 18px;
    display: flex;
    align-items: center;
}
body.mobile div.map_wrapper div.map-legend div.entry {
    line-height: 20px;
}
div.map_wrapper div.map-legend:has(div.selected) div.entry:not(.selected) {
    font-style: italic;
    color: var(--text_color_light);
}
div.map_wrapper .map-legend span {
    display: inline-block;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

/* fullscreen */
div.map_wrapper div.controls {
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-flow: column;
    position: absolute;
    bottom: 0;
    right: 0;
    box-shadow: var(--box_shadow);
}
div.map_wrapper div.controls:not(.top) {
    border-top-left-radius: var(--card_radius);
}

div.map_wrapper div.controls.top {
    bottom: unset;
    top: 0;
    border-bottom-left-radius: var(--card_radius);
}
div.map_wrapper div.controls svg {
    margin: 8px;
    padding: 4px;
    width: 24px;
    height: 24px;
    stroke: var(--shade5);
    fill: var(--shade5);
    cursor: pointer;
}
div.map_wrapper div.controls svg:hover {
    stroke: var(--shade6);
    fill: var(--shade6);
}
div.map_wrapper div.controls svg.refresh {
    display: none;

}
div.map_wrapper div.controls svg.refreshh {
    display: none;
    position: absolute;
    right: 40px;
    bottom: 0px;
    width: 30px;
    height: 30px;
    opacity: 1;
}

div.map_wrapper:not(.fullscreen) svg.minimize {
    display: none;
}
div.map_wrapper.fullscreen svg.fullscreen {
    display: none;
}
div.map_wrapper.fullscreen {
    width: 100vw ! important;
    height: calc(100vh - var(--topbar_height)) ! important;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: var(--fullscreen_layer);
}

div.map_card, div.map_card * {
    box-sizing: border-box;
}
div.map_card {
    background: var(--card_color);
    border-radius: var(--card_radius);
    border: var(--card_border);
    position: relative;
    width: 100%;
    height: 50%;
    min-height: 300px;
    overflow: hidden;
}

bbody.mobile div.map_card div.map_wrapper div.content {
    pointer-events: none;
}
bbody.mobile div.map_card div.map_wrapper.fullscreen div.content {
    pointer-events: auto;
}

div#map_popup, div#map_popup * {
    box-sizing: border-box;
}
div#map_popup {
    width: 100%;
}

div#map_popup div#person_list {
    text-align: left;
    display: flex;
    flex-flow: column;
}

div#map_popup div#person_list div.card {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--card_radius);
    display: flex;
    gap: 12px;
}
body.mobile div#map_popup div#person_list div.card:active,
body.desktop div#map_popup div#person_list div.card:hover {
    background: var(--card_color);
}
div#map_popup ddiv#person_list div.card:not(:last-of-type) {
    padding-bottom: 8px;
    border-bottom: var(--card_border);
}
div#map_popup div#person_list div.label {
    margin-top: 3px;
    display: flex;
    align-items: start;
}

div#map_popup div#person_list div.name {
    font-size: 1.1rem;
    font-weight: bold;
}

div#map_popup div#person_list div.fields {
//    margin-left: 12px;
}

body.mobile div#content div#maps_view {
    touch-action: none;
}

/* tree scrollbar:  leavespace for the plus menu */
body.desktop div#content div#maps_view div#header div.tree_select *::-webkit-scrollbar-track {
    margin-bottom: 40px;
}

/* convert to blue for custom map */
div#content div#maps_view div#header.custom {
//    --bar_color: var(--primary_shade);
    --label_color: var(--primary_color);
    --dropdown_arrow_color: var(--shade1);
    --label_text_color: var(--shade1);
}

div#content div#maps_view div#header.custom div.button svg {
    --button_color: var(--label_color);
    --button_hover: var(--label_color);
}

/* tree select */
div#content div#maps_view div.tree_select {
    position: absolute;
    top: calc(100% + 7px);
    z-index: var(--dropdown_layer);
    --disabled_background: none;
}
div#content div#maps_view div.tree_select div.dropdown_label,
div#content div#maps_view div.tree_select div#dropdown {
    display: none;
}

/* plus menu */
div#content div#maps_view div.tree_select div#plus_menu {
    --plus_button_size: 12px;
    --menu_item_padding: 0px 12px;
}
div#content div#maps_view div.tree_select div#plus_menu div#plus_menu_items {
    bottom: 41px;
}

/* tree management popups */
div#map_rename_popup h3 span,
div#map_move_popup h3 span {
//    font-style: italic;
    background: var(--shade2);
    border-radius: var(--header_radius);
    padding: 2px 8px;
}

div#content div#maps_view div.count {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 8px 16px;// 8px 0 8px;
    font-size: 1.3rem;
    background: var(--shade2);
    border-radius: var(--button_border_radius);
}
body.mobile div#content div#maps_view div.count {
    right: 10px;
    bottom: 8px;
}

/* bottom menu */
div#content div#maps_view_BOTTOM {
    display: flex;
    width: fit-content;
    position: absolute;
    bottom: 0;
    background: var(--background);
    border-top-right-radius: 50%;
}

div#content div#maps_view_BOTTOM div#plus_menu div#plus_menu_btn_wrapper {
    position: static;
}

div#content div#maps_view_BOTTOM div#plus_menu:first-of-type div#plus_menu_btn_wrapper {
    padding: 8px 0 0 10px;
}
div#content div#maps_view_BOTTOM div#plus_menu:last-of-type div#plus_menu_btn_wrapper {
    padding: 8px 8px 0 8px;
}
body.mobile div#content div#maps_view_BOTTOM div#plus_menu_btn_wrapper {
    padding: 0 0px 8px 10px ! important;
}

/*
div#content div#maps_view div#results_wrapper {
    position: relative;
    z-index: var(--menu_overlay_layer);
}
div#content div#maps_view div#results_wrapper div#results {
    display: flex;
    flex-flow: column-reverse;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 20px;
    border: 1px solid var(--shade3);
}
div#content div#maps_view div#results_wrapper div#results div.empty {
    font-size: 1.125em;
    white-space: nowrap;
    padding: 4px 8px;
}
*/
/* search results */
div#content div#maps_view div#header div.search_results label.select_people {
    width: 100% ! important;
}
div#content div#maps_view div#header div.search_results input.search {
    height: 0;
    border: 0;
    margin: 0;
    padding: 0;
    visibility: hidden;
}

/* fullscreen */
div#content div#maps_view.fullscreen div#header div#header_title,
div#content div#maps_view.fullscreen div#header div#header_bar {
    display: none;
}
div#content div#maps_view.fullscreen div#header div.search_results,
div#content div#maps_view.fullscreen div#header input#search {
    z-index: 10000;
}
div#content div#maps_view.fullscreen div#header input#search {
    display: inline-block ! important;
}
body.mobile div#content div#maps_view.fullscreen div#header {
    align-items: flex-start;
}
body.mobile div#content div#maps_view.fullscreen div#header input#search {
    width: calc(100% - 60px);
}

body.login {
    background: var(--shade1);
    background-image: url(/static/img/background.jpg);
    background-size: cover;
}

body.login div.overlay {
    background: var(--blocker_overlay);
}

body.login div#login-box {
    background: var(--background);
    position: absolute;
    padding: 110px 30px 0px;
    width: 360px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box_shadow);
    z-index: var(--modal_overlay_layer);
}
/* desktop */
body.login div#login-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* mobile */
body.mobile.loginn div#login-box {
    top: 0;
    left: 0;
    transform: none;
    width: 100dvw;
    height: 100dvh;
    border-radius: 0px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
}
body.login div#login-box input {
    padding: 4px;
    margin: 8px 0;
}
body.mobile.loginn div#login-box input {
    padding: 8px;
    margin: 16px 0;
}

/* button */
body.login div#login-box button {
    width: 200px;
    font-family: var(--font);
}
body.mobile.loginn div#login-box button {
    bottom: 60px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;

}
body.login form {
    margin-block-end: 0;
}
body.mobile.loginn form {
    margin-top: 30dvh;
}
body.login div#logo {
    padding: 14px 30px 10px;
    margin-bottom: 30px;
    background: var(--shade6);
    width: 360px;
    position: absolute;
    left:0;
    top:0;
    margin: auto;
}

body.mobile.loginn div#logo {
    box-sizing: border-box;
    width: 100dvw;
    padding: 20px 30px;
}

body.login div.invalid {
    font-style: italic;
    font-size: 1.1rem;
    margin-top: 10px;
    color: red;
    width: 100%;
}

div#leftbar {
    position: relative;
    float:left;
    width: var(--bar_width);
    max-width: var(--bar_max_width);
    min-width: var(--bar_min_width);
    color: #ccc;
    background: var(--bar_color);
    z-index: var(--modal_layer);
    padding-top: 28px;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    outline: 0;
    display: flex;
    flex-flow: column;
/*    border-right: var(--card_border); */
}

/* compact styling */
body.leftbar_compact div#leftbar {
    position: fixed;
    top: var(--topbar_height);
    left: 0;
}
body.leftbar_compact div#leftbar:not(:hover) {
    width: var(--hidden_bar_width) ! important;
    min-width: var(--hidden_bar_width) ! important;
}
body.leftbar_compact div#leftbar:hover {
    filter: drop-shadow(var(--box_shadow));
}
body.leftbar_compact div#leftbar > * {
    visibility: hidden;
}
body.leftbar_compact div#leftbar:hover > * {
    visibility: visible;
}
body.desktop div#leftbar {
    box-sizing: border-box;
    height: calc(100dvh - var(--topbar_height));
}
body.mobile div#leftbar {
    height: calc(100dvh - var(--topbar_height));
}

div#leftbar div {
    white-space: nowrap;
}
div#menu {
    font-size: 20px;
    color: var(--text_color);
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}
/* hide button */
div#leftbar div.hide {
    position: absolute;
    height: fit-content;
    top: 0;
    right: 0;
    padding: 7px;
    border-bottom-right-radius: 50%;//var(--card_radius);
    border-top-right-radius: 50%;//var(--card_radius);
    cursor: pointer;
//    transform: translateX(100%);
}
div#leftbar:hover div.hide {
    background: var(--bar_color);
    visibility: visible;
}
div#leftbar div.hide svg {
    width: 18px;
    height: 18px;
    fill: none;
}
body.leftbar_compact div#leftbar div.hide svg {
    stroke: var(--shade4);
    fill: none;
}
body.leftbar_compact div#leftbar div.hide:hover svg {
    stroke: var(--shade4);
}
div#leftbar:hover div.hide svg {
    fill: var(--shade3);
}
div#leftbar:hover div.hide:hover svg {
    fill: var(--shade5);
}
div#menu div.menu_item {
    display: flex;
    align-items: center;
    margin: 1px 2px;
    padding: 7px 20px;
//    padding-left: 25%;
//    max-width: calc(75% - 20px);
    max-width: calc(100% - 40px);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    position: relative;
    flex-grow: 0;
    --icon_size: 32px;
}
div#menu div.menu_item div.icon_wrapper {
    position: absolute;
    margin: 0px 20px 5px;
    margin-left: calc(25% - 40px);
    left: 0;
    bottom: 0;
}
div#menu div.menu_item div.icon_wrapper svg:not(.active) {
    stroke: var(--shade5);
    fill: transparent;
}
div#menu div.menu_item div.icon_wrapper svg.calendar {
    stroke: transparent;
    fill: var(--shade5);
}
div#menu div.menu_item p {
    overflow: hidden;
    text-overflow: ellipsis;
}
body.desktop div#menu div.menu_item:hover,
body.mobile div#menu div.menu_item:active,
div#menu div.menu_item.selected {
    background: var(--shade2);
}

/* mobile modifications */
body.mobile div#leftbar {
    padding-top: 0px;
    position: absolute;
    max-width: 50vw;
    width: 50vw;
    transform: translateX(calc(-100% - 8px));
    will-change: transform;
    z-index: 1000;
    background: var(--background);
    border-top-right-radius: 15px;
    box-shadow: var(--box_shadow);
}
body.mobile div#leftbar.ready {
    transition: transform 0.2s linear 0s;
}
body.mobile div#leftbar.show {
    transform: translateX(0);
}

/* logo bar */
body.mobile div#leftbar div#logo {
    background: var(--topbar_bg);
    margin-bottom: 2px;
    border-top-right-radius: 15px;
}
body.mobile div#leftbar div#logo img {
    margin: 12px 20px 12px 14px;
}
div#leftbar div#user,
div#leftbar div#report_issue {
    margin-top: auto;
}
div#leftbar div#admin,
div#leftbar div#user,
div#leftbar div#log_in_child,
div#leftbar div#report_issue,
div#leftbar div#admin_settings,
div#leftbar div#switch_server,
div#leftbar div#logout,
div#leftbar div#invite_user {
    font-size: 0.9em;
    color: var(--text_color_light);
//    padding-left: 30%;
}

div#leftbar div#settings {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: calc(26px + var(--icon_size));
    --icon_size: 40px;
}
div#leftbar div#settings div.icon_wrapper {
    margin-left: 16px;
}
div#leftbar div#settings svg.logout {
    position: absolute;
    right: 0;
    width: 24px;
    height: 24px;
    padding: 8px;
    fill: var(--shade4);
}
body.mobile div#leftbar div#settings svg.logout:active,
body.desktop div#leftbar div#settings svg.logout:hover {
    fill: var(--shade6);
}


/* message divider */
div#leftbar div.divider {
    margin-bottom: 10px;
//    width: calc(100% - 16px);
    height: 10px;
    text-align: center;
    border-bottom: 1px solid var(--shade2);
}
div#leftbar div.divider span {
    font-size: 0.75em;
    color: var(--shade4);
    background: var(--bar_color);
    transform: translateY(250%);
    padding: 0 16px;
}
body.mobile div#leftbar div.divider span {
    background: var(--background);
}
div#chat_toggle svg {
    width: 36px;
    height: 36px;
    padding: 3px;
    fill: var(--shade3);
    stroke: var(--shade3);
    cursor: pointer;
    margin: 8px 4px;
}
div#chat_toggle svg:hover {
    fill: var(--shade2);
    stroke: var(--shade2);
}
div#rightbar {
    position: relative;
    display: flex;
    flex-flow: column;
    width: var(--bar_width);
    min-width: var(--bar_min_width);
    max-width: var(--bar_max_width);
    height: calc(100vh - var(--topbar_height));
    color: #ccc;
    background: var(--bar_color);
    z-index: 100;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    /*    border-left: var(--card_border); */
    --background: var(--bar_color);
    --scrollbar_show_color: var(--shade5);
}

div#rightbar div#header div#header_bar {
    border-radius: 0;
}

div#rightbar div{
    white-space: nowrap;
}

/* compact styling */
body.rightbar_compact div#rightbar {
    position: fixed;
    top: var(--topbar_height);
    right: 0;
}
body.rightbar_compact div#rightbar:not(:hover) {
    width: var(--hidden_bar_width) ! important;
    min-width: var(--hidden_bar_width) ! important;
}
body.rightbar_compact div#rightbar:hover {
    filter: drop-shadow(var(--box_shadow));
}
body.rightbar_compact div#rightbar > * {
    visibility: hidden;
}
body.rightbar_compact div#rightbar:hover > * {
    visibility: visible;
}
body.desktop div#rightbar {
    box-sizing: border-box;
    height: calc(100dvh - var(--topbar_height));
}
body.mobile div#rightbar {
    height: calc(100dvh - var(--topbar_height));
}

/* hide button */
div#rightbar div.hide {
    position: absolute;
    height: fit-content;
    top: 0;
    right: 0;
    padding: 7px;
    border-bottom-left-radius: 50%;//var(--card_radius);
    border-top-left-radius: 50%;//var(--card_radius);
    cursor: pointer;
//    transform: translateX(-100%);
}
div#rightbar:hover div.hide {
    background: var(--bar_color);
    visibility: visible;
}
div#rightbar div.hide svg {
    width: 18px;
    height: 18px;
    fill: none;
}
body.rightbar_compact div#rightbar div.hide svg {
    stroke: var(--shade4);
    fill: none;
}
body.rightbar_compact div#rightbar div.hide:hover svg {
    stroke: var(--shade4);
}
div#rightbar:hover div.hide svg {
    fill: var(--shade3);
}
div#rightbar:hover div.hide:hover svg {
    fill: var(--shade5);
}

/* user menu */
div#user_menu {
    float: right;
    display: inline-block;
    position: relative;
    z-index: var(--dropdown_layer);
    --icon_size: 42px;
    --icon_background: var(--topbar_bg);
}
div#user_menu div.icon_wrapper {
    margin: 8px 10px;
    border-radius: 50%;
    cursor: pointer;
}
div#user_menu img:hover {
    filter: brightness(110%);
}
div#user_menu div#user_menu_items {
    position: absolute;
    top: var(--topbar_height);
    right: 0;
    border: 1px solid var(--shade3);
    border-top: 0;
    border-right: 0;
    width: fit-content;
    font-size: 1.25rem;
    background: var(--bar_color);
    color: var(--text_color);
    display: none;
    z-index: var(--dropdown_layer);
    box-shadow: var(--box_shadow);
    border-bottom-left-radius: var(--menu_border_radius);
}
div#user_menu div.menu_item {
    margin: 1px 2px;
    padding: 7px 20px;
    white-space: nowrap;
    cursor: pointer;
    width: fit-content;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    float: right;
}
div#user_menu div.menu_item.selected {
    background: var(--shade2);
}

div#user_menu div.menu_item:hover {
    background: var(--shade2);
}

/* mobile */
body.mobile div#leftbar div#user_menu {
    float: unset;
    width: 50vw;
    --icon_background: var(--shade1);
}
body.mobile div#user_menu div#user_menu_items {
    position: unset;
    float: left;
}
div#topbar {
    display: flex;
    position: fixed;
    justify-content: right;
    top: 0px;
    left: 0px;
    height: var(--topbar_height);
    width: 100%;
    background: var(--topbar_bg);
    z-index: var(--menu_layer);
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}

/* logo */
div#topbar div#logo {
    display: flex;
    padding: 10px 0 10px 4px;
    position: absolute;
    left: 0;
    cursor: pointer;
}
div#topbar div#logo img {
    width: 230px;
    height: var(--logo_height);
}

div#topbar div#logo div#admin_flag {
    display: flex;
    align-items: end;
    font-size: 1.6em;
    line-height: calc(var(--logo_height) + 4px);
    color: var(--shade2);
    margin-left: 0.2em;
    margin-bottom: 0.05em;
}

/* notifications */
div#topbar div#notifications {
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 54px;
    margin: 8px 10px;
    background: var(--shade4);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}
div#topbar div#notifications:hover {
    background: var(--shade2);
}

div#topbar div#notifications img {
    width: 24px;
    height: 24px;
}

div#event_view div#event_display {
    max-width: 800px;
    position: relative;
    padding-bottom: 4px;
    margin: 10px auto;
    border-radius: 10px;
    background: var(--shade1);
    display: flex;
    flex-flow: column;
    color: var(--text_color);
    overflow-y: hidden;
    font-size: 1.1rem;
    border: 1px solid var(--shade2);
    --icon_size: 1.25rem;
}
body.desktop div#event_view div#event_display {
    width: calc(100% - 14px);
}

div#event_view div#event_display > div#space_badge {
    margin-top: 14px;
    cursor: pointer;
}
div#event_view div#event_display div#space_badge div.icon_wrapper {
    margin: 4px;
}
div#event_view div#event_display > div.row {
    display: flex;
    align-items: start;
    margin: 2px 10px;
}
div#event_view div#event_display > div.row > svg {
    stroke: var(--shade5);
    fill: transparent;
    width: var(--icon_size);;
    margin: 4px;
}
div#event_view div#event_display > div.row > svg.calendar {
    stroke: transparent;
    fill: var(--shade5);
}
div#event_view div#event_display div#space_badge div.name,
div#event_view div#event_display span {
    padding: 3px 0;
    margin-left: 4px;
    flex-grow: 1;
}

div#event_view div#event_display div#space_badge div.name,
div#event_view div#event_display div.row:not(:last-child) span {
    border-bottom: 1px solid var(--shade2);
}

div#event_view div#event_display div#description {
    margin: 20px 30px 10px;
    font-size: 1.2rem;
}

/* picture */
div#event_view div#event_display div#pic_wrapper {
    padding: 0;
    margin: 0;
    display: flex;
    aspect-ratio: 3 / 1;
}
div#event_view div#event_display div#pic_wrapper img {
    width: 100%;
}

div#event_list_view div.event_card {
    --icon_size: 1.25rem;
    --underline_color: var(--shade2);
    width: calc(100% - 8px);
    max-width: 600px;
    position: relative;
    padding-bottom: 4px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    color: var(--text_color);
    cursor: pointer;
    overflow-y: hidden;
    background: var(--card_color);
    border: var(--card_border);
    border-radius: var(--card_radius);
}

div#event_list_view div.event_card.selected,
body.mobile div#event_list_view div.event_card:active,
body.desktop div#event_list_view div.event_card:hover {
    --card_color: var(--shade2);
    --underline_color: var(--shade3);
}

div#event_list_view div.event_card div.title {
    font-size: 1.3em;
//    margin: auto;
//    align-items: center;
    width: calc(100% - 15px);
    margin: 10px 0 10px 15px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

div#event_list_view div.event_card div.space_badge {
    width: calc(100% - 20px);
}
div#event_list_view div.event_card div.space_badge div.icon_wrapper {
    margin: 4px;
}
div#event_list_view div.event_card > div.row {
    display: flex;
    align-items: center;
    margin: 2px 10px;
    width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*
body.desktop div#event_list_view div.event_card > div.row {
    width: calc(50% - 20px);
}*/
div#event_list_view div.event_card > div.row > svg {
    stroke: var(--shade5);
    fill: transparent;
    width: var(--icon_size);
    margin: 4px;
}
div#event_list_view div.event_card > div.row > svg.calendar {
    stroke: transparent;
    fill: var(--shade5);
}
div#event_list_view div.event_card div.space_badge div.name,
div#event_list_view div.event_card span {
    padding: 3px 0;
    margin-left: 4px;
    font-size: 1rem;
    flex-grow: 1;
}

div#event_list_view div.event_card div.space_badge div.name,
div#event_list_view div.event_card div.row:not(:nth-last-child(-n+1)) span {
    border-bottom: 1px solid var(--underline_color);
}

body.mobile div#event_list_view div.event_card span {
    padding-top: 4px;
    font-size: 1em;
}

/* picture */
div#event_list_view div.event_card div#pic_wrapper {
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    width: 100%; /* don't need this if we don't have 2 columns */
    aspect-ratio: 3 / 1;
}
div#event_list_view div.event_card div#pic_wrapper img {
    width: 100%;
}
div#event_list_view div.event_card div#pic_wrapper div.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
div#event_list_view div.event_card.selected div#pic_wrapper div.overlay,
body.mobile div#event_list_view div.event_card:active div#pic_wrapper div.overlay,
body.desktop div#event_list_view div.event_card:hover div#pic_wrapper div.overlay {
    background: var(--shade4);
    opacity: 0.2;
}
div#create_event_view div.form {
    text-align: left;
}

div#events_view {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    position: relative;
}

body.mobile div#events_view {
    margin-bottom: 8px;
}

div#events_view div#calendar_content {
    position: absolute;
    height: 100%;
    width: 100%;
}

body.mobile div#events_view div#plus_menu {
    --offset_bottom: 0px;
}

div#event_list_view {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    position: relative;
}

body.mobile div#event_list_view {
    margin-bottom: 8px;
}


/* events feed */
div#event_list_view div#events {
    display: flex;
    flex-flow: column;
    flex-grow : 1;
    height: 100%;
    width: calc(100% - 28px);
    margin-top: 10px;
    padding: 0px 8px 0px 20px;
    margin-bottom: 52px;
    overflow-y: scroll;
    overflow-x: hidden;
    visibility: hidden;
}

/* modifications for mobile */
body.mobile div#event_list_view div#events {
    width: 100%;
    padding: 0;
}

/* Events Empty */
div#event_list_view div#events_empty {
    visibility: hidden;
    width: 100%;
    font-size: 20px;
    color: var(--text_color_light);
    text-align: center;
    position: absolute;
    margin-top: 160px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* date wrapper */
div#event_list_view div.date_wrapper {
    display: flex;
    flex-flow: column;
    justify-content: center;
}
div#event_list_view div.date_wrapper > span {
    font-size: 1em;
    color: var(--shade5);
    background: var(--background);
    padding: 4 8px;
    flex-grow: 1;
    border-bottom: 1px solid var(--shade3);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

div#event_list_view div.date_wrapper > span span.duration {
    float: right;
}

/* date range footer */
div#event_list_view div#date_range_footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    width: calc(100% - 20px);
    margin: 0px 10px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding-top: 8px;
    background: var(--background);
    z-index: var(--menu_overlay_layer);
    border-top: 1px solid var(--shade3);
}
div#event_list_view div#date_range_footer {
    justify-content: center;
    align-content: bottom;
    min-height: 43px;
}

div#event_list_view div#date_range_footer span {
    border-radius: 15px;
    cursor: pointer;
    padding: 6px 2px;
    margin-top: auto;
    margin-bottom: 5px;
    font-size: clamp(12px, 1em, 1em);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.desktop div#event_list_view div#date_range_footer span {
    padding: 6px 19px;
    margin-bottom: 4px;
}
body.mobile div#event_list_view div#date_range_footer span {
    margin-left: 48px;
    margin-right: 100px;
}
body.desktop div#event_list_view div#date_range_footer span:hover {
    background-color: var(--shade1);
}

/* nav buttons */
div#event_list_view div#nav_buttons {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: var(--menu_overlay_layer);
}
div#event_list_view div#nav_buttons svg {
    padding: 11px;
    border-radius: 50%;
    background: var(--shade2);
    cursor: pointer;
    margin-right: 10px;
}

div#event_list_view div#nav_buttons svg {
    height: 21px;
    width: 21px;
    fill: var(--shade4);
}

body.desktop div#event_list_view div#nav_buttons svg:hover,
body.mobile div#event_list_view div#nav_buttons svg:active {
    fill: var(--shade5);
}
/* Define keyframes for the animation */
@keyframes slideIn {
    0% {transform: translateY(70px); }
    100% {transform: translateY(0); }
}

/* Define keyframes for the animation */
@keyframes slideOut {
    0% {transform: translateY(0); }
    100% {transform: translateY(70px); }
}


div#slideup_menu, div#slideup_menu * {
    box-sizing: border-box;
}
div#slideup_menu {
    display: flex;
    position: fixed;
    width: 100vw;
    bottom: 0px;
    left: 0px;
    justify-content: space-evenly;
    border-top: 1px solid var(--shade3);
    background: var(--background);
    z-index: var(--menu_layer);
    animation: slideIn 0.2s ease;
}
div#slideup_menu.removing {
    animation: slideOut 0.2s ease;
}

div#slideup_menu div.menu_item {
    color: var(--text_color);
    margin: 2px 4px 6px;
    white-space: nowrap;
    cursor: pointer;
    width: fit-content;
    text-align: center;
    display: block;
}

div#slideup_menu div.menu_item svg {
    fill: var(--shade4);
    stroke: var(--shade4);
    width: 22px;
    height: 22px;
    position: relative;
    margin: 8px;
    top: 3px;
    padding: 2px;
}
div#slideup_menu div.menu_item:active svg {
    fill: var(--shade5);
    stroke: var(--shade5);
}

div#slideup_menu div.menu_item.red svg.heart {
    fill: var(--heart_red);
    stroke: var(--heart_red);
}

/* yellow for stars */
div#slideup_menu div.menu_item.yellow svg.star {
    fill: var(--star_yellow);
    stroke: var(--star_yellow);
}
div#user_popup {
    display: flex;
    flex-flow: column;
    justify-contents: center;
    align-items: center;
}

div#household_cluster_popup div.content {
    display: flex;
    flex-flow: column;
    text-align: left;
    gap: 4px;
}

div#household_cluster_popup div.content div.entry {
    padding: 0.2em 0.4em;
    border-radius: var(--card_radius);
}

body.mobile div#household_cluster_popup div.content div.entry {
    padding: 0.4em 0.8em;
    border: var(--card_border);
    background: var(--card_color);
}

body.desktop div#household_cluster_popup div.content div.entry:hover {
    cursor: pointer;
    background: var(--shade1);
}

div.tree_select, div.tree_select * {
    box-sizing: border-box;
}
div.tree_select {
    width: 100%;
    line-height: 1.75em;
    font-size: 1.1rem;
    --disabled_background: var(--shade3);
    --selected_background: var(--primary_color);
    --highlight_background: var(--primary_shade);
    --selected_color: #fff;
    --option_padding: 0 8px;
    --border_radius: 5px;
    --bullet_size: 1.6rem;
    --carat_size: 16px;
    --carat_padding: 1px;
    --default_min_width: 50px;
    --min_width: var(--default_min_width);
}
body.mobile div.tree_select {
    --option_padding: 4px 16px;
}
div.tree_select div.wrapper {
    position: relative;
}
div.tree_select div.dropdown {
    text-align: center;
    margin-top: 1px;
    padding-bottom: 8px;
    background: white;
    border-radius: var(--card_radius);
    border: var(--form_border);
    width: 100%;
    z-index: var(--dropdown_layer);
    --scrollbar_color: var(--shade4);
}
div.tree_select:not(.embed) div.dropdown {
    position: fixed;
    width: var(--min_width);
    display: none;
}

/* played with drop-shadow, but it's cut-off
*/
div.tree_select:not(.embed) div.dropdown {
    box-shadow: var(--box_shadow);
/*    box-shadow: 0px 8px 8px -3px #808080 */

}
/* mobile popup */
body.mobile div.tree_select div.dropdown {
    font-size: 1.2rem;
}
body.mobile div.tree_select:not(.embed) div.dropdown {
    background: var(--background);
    z-index: var(--modal_layer);
    width: 90vw;
}
body.mobile div.tree_select:not(.embed) div.dropdown div#tree {
    max-height: calc(100dvh - 10em);
}

body.mobile div.tree_select div.wrapper > div.overlay {
    display: none;
    backdrop-filter: var(--blocker_filter);
    background: var(--blocker_overlay);
    z-index: var(--modal_overlay_layer);
    align-items: center;
    justify-content: center;
}

body.mobile div.tree_select div.option {
    width: 100%;
    overflow-x: auto;
}

div.tree_select div#tree {
    text-align: left;
    overflow-y: auto;
    padding: 4px 0 2px;
    z-index: var(--menu_layer);
}
div.tree_select ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
div.tree_select li {
    cursor: default;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

div.tree_select li span.label {
    border-radius: var(--border_radius);
    padding: var(--option_padding);
    margin: 2px 4px;
    position: relative;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}
div.tree_select li:not(.folder) span:not(.disabled) {
    cursor: pointer;
}

div.tree_select li.folder span.label {
    font-style: italic;
}
div.tree_select:not(:has(li span.highlighted, li span.focus)) li span.selected {
    background: var(--selected_background);
    color: var(--selected_color);
}
div.tree_select li:not(.folder) span.disabled {
    pointer-events: none;
    background: var(--disabled_background) ! important;
}
div.tree_select li:not(.folder) span.highlighted,
div.tree_select li:not(.folder) span.highlight,
body.desktop div.tree_select li:not(.folder) span.label:not(.selected):hover {
    color: var(--text_color);
    background: var(--highlight_background) ! important;
}
div.tree_select div#tree li span.focus {
    background: var(--shade2);
}

body.mobile div.tree_select li:not(.folder) span {
    background: var(--shade1);
}
div.tree_select li > div.bullet,
div.tree_select li > div.carat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bullet_size);
    height: var(--bullet_size);
    text-align: center;
    color: var(--text_color_light);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    margin-top: 1px;
}
div.tree_select li div.carat {
    cursor: pointer;
    border-radius: 50%;
    fill: var(--shade5);
}
div.tree_select li div.carat svg {
    padding: var(--carat_padding);
    width: var(--carat_size);
    height: var(--carat_size);
}
body.desktop div.tree_select li div.carat:hover,
body.mobile div.tree_select li div.carat:active {
    background: var(--shade1);
}
div.tree_select li div.bullet {
    font-family: none;
    padding: 0px 4px;
    color: var(--shade4);
}

div.tree_select li.nested {
    padding-left: 4px;
}
div.tree_select li:not(.nested) {
    padding-left: 10px;
}
div.tree_select ul:not(.root) {
    margin-left: 25px;
//    border-left: var(--form_border);
}
div.tree_select ul.collapsed {
    display: none;
}
div.tree_select label#hide_unused_label {
    float: right;
    margin: 2px 6px;
}

div.tree_select input.input {
    cursor: pointer;
}
div.tree_select.embed input.input {
    display: none;
}
div.tree_select input.search {
    margin: 0;
    border: unset;
    z-index: var(--menu_layer);
    padding: 4px 10px;
    border: 0;
    border-bottom: var(--card_border);
    border-top-right-radius: var(--card_radius);
    border-top-left-radius: var(--card_radius);
}
body.mobile div.tree_select input.search {
    background: transparent;
    color: var(--text_color_light);
    padding: 4px 10px;
    font-size: 1.2rem;
}

/* title */
body.desktop div.tree_select div.title {
    display: none;
}
body.mobile div.tree_select div.title {
    position: relative;
    text-align: center;
    color: var(--text_color_light);
    font-style: italic;
    padding: 10px;
    border-bottom: var(--card_border);
}

/* search button */
div.tree_select svg.search {
    display: none;
}
body.mobile div.tree_select input.search {
    display: none;
}
body.mobile div.tree_select svg.search {
    display: block;
    position: absolute;
    width: 1.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.6rem;
    stroke: var(--shade4);
}

body.mobile div.tree_select.search svg.search:active {
    stroke: var(--shade5);
}


/* kebab menu */
div.tree_select div#kebab_menu {
    position: relative;
    top: 1px;
    --text_size: 1.1rem;
    --kebab_size: 1.2rem;
    --kebab_padding: 0;
    --kebab_padding_top: 0;
    --kebab_padding_bottom: 0;
    --dropdown_padding_side: 4px;
    --menu_item_padding: 0px 10px;
}
div.tree_select div#kebab_menu div#kebab_menu_dropdown {
    position: fixed;
}

/* empty search */
div.tree_select div.empty {
    text-align: center;
    font-size: 1.2rem;
    padding: 10px;
}

/* done button */
body.mobile div.tree_select button {
    margin: 10px 0 4px;
}

/* option / label */
div.tree_select.disabled div.dropdown_label {
    pointer-events: none;
    color: var(--text_color);
}
div.tree_select div.dropdown_label {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    border-radius: var(--border_radius);
    cursor: pointer;
    margin: 1px 0;
    padding: var(--label_padding);
    padding-right: 26px;
    background-color: var(--card_color);
    outline: var(--card_border);
}

/* arrow */
div.tree_select div.dropdown_label svg.down {
    fill: var(--shade4);
    width: 10px;
    height: 10px;
    position: absolute;
    top: calc(50% - 3px);
    right: 6px;
}

/* mobile hamburger */
div#hamburger_menu svg.hamburger {
    position: absolute;
    top: var(--button_offset_top);
    left: var(--button_offset_side);
    width: var(--button_size);
    height: var(--button_size);
    stroke: var(--shade4);
    stroke-width: 2.5;
    z-index: 100;
    padding: 8px;
}
/* back button */
div#back_button {
    cursor: pointer;
    --icon_size: 24px;
}

div#back_button svg.left {
    position: fixed;
    top: var(--button_offset_top);
    left: calc(var(--button_offset_side) - 2px);
    width: calc(var(--button_size) - 6px);
    height: calc(var(--button_size) - 6px);
    fill: var(--shade4);
    background: var(--background);
    border-radius: 50%;
    padding: 10px;
    z-index: 100;
}
body.desktop div#back_button svg.left {
    position: absolute;
}
body.mobile div#back_button:active svg.left,
body.desktop div#back_button:hover svg.left {
    background: var(--shade1);
    fill: var(--shade5);
}

/* icon */
div#back_button div.icon_wrapper {
    position: absolute;
    top: calc(var(--button_size) / 2.5);
    left: calc(var(--button_size) * 1.1);
    z-index: 101;
}
body.desktop div#back_button div.icon_wrapper {
    left: calc(var(--button_size) * 1.3);
}

/* space label */
div#header {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    width: 100%;
    color: var(--text_color);
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    --bar_color: var(--shade1);
    --label_color: var(--shade2);
    --label_text_color: var(--text_color);
    --selected_color: var(--shade2);
    --dropdown_arrow_color: var(--shade5);
    --min_width: 0;
    --icon_size: 24px;
    --button_color: var(--shade4);
    --button_hover: var(--shade5);
}
div#header div#header_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 80px);
    color: var(--text_color_header);
    font-size: var(--header_text_size);
    padding-bottom: 1px;
    z-index: 0;
}

/* content menu */
div#header div#header_bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--bar_color);
    border-radius: var(--header_radius);
    width: 100%;
    margin: 8px;
    position: relative;
}
div#header div#header_bar.line {
    border-bottom: 1px solid var(--shade3);
}

div#header div.header_bar_label,
div#header div.header_bar_item {
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4px 36px;
    border-radius: var(--menu_border_radius);
    z-index: var(--menu_layer);
}
div#header div.header_bar_label {
    margin: 5px;
}
div#header div.header_bar_item {
    min-width: var(--min_width);
}

/* dropdown */
div#header div.header_bar_dropdown {
    display: flex;
    padding: 5px;
    gap: 5px;
    flex-flow: column;
    position: absolute;
    background-color: var(--bar_color);
    z-index: var(--menu_layer);
    border-radius: var(--menu_border_radius);
    visibility: hidden;
    box-shadow: var(--box_shadow);
}

div#header div.header_bar_label:not(.empty).dropdown,
div#header div.header_bar_item:not(.selected) {
    cursor: pointer;
}

div#header div.header_bar_label.dropdown div.header_bar_button {
    position: absolute;
    right: -30px;
    right: 2px;
    width: 10px;
    height: 10px;
    padding: 10px;
}
div#header div.header_bar_label.dropdown div.header_bar_button svg.down {
    fill: var(--dropdown_arrow_color);
}
div#header div.header_bar_label.dropdown.empty div.header_bar_button {
    display: none;
}

div#header div.header_bar_label {
    background-color: var(--label_color);
    color: var(--label_text_color);
}

div#header div.header_bar_item.selected,
body.desktop div#header div.header_bar_item:hover,
body.mobile div#header div.header_bar_item:active {
    background-color: var(--selected_color);
}

/* buttons */
div#header div.button {
    position: absolute;
    right: 2;
    height: 100%;
    display: flex;
}

div#header div.button div {
    cursor: pointer;
    margin-right: 8px;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 2px;
}
/* left button */
div#header div.left_button {
    position: absolute;
    left: 2;
    height: 100%;
    display: flex;
}

div#header div.left_button div {
    cursor: pointer;
    margin-left: 8px;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 2px;
}
div#header div.left_button svg,
div#header div.button svg {
    fill: var(--background);
    width: 20px;
    height: 20px;
}

/* button color */
div#header div.left_button svg,
div#header div.button svg {
    stroke: var(--button_color);
    fill: var(--button_color);
}

body.mobile div#header div.button div:active svg,
body.desktop div#header div.button div:hover svg,
body.mobile div#header div.left_button div:active svg,
body.desktop div#header div.left_button div:hover svg {
    stroke: var(--button_hover);
    fill: var(--button_hover);
}

/* active */
div#header div.button div.active,
div#header div.left_button div.active {
    --button_color: var(--primary_color);
    --button_hover: var(--primary_color);
}

/* save button */
div#header div.button svg.save {
    display: none;
}
div#header div.button div#save_btn.active svg.save {
    display: block;
}

/* search bar */
div#header input#search.toggle {
    display: none;
}
div#header input#search {
    color: var(--text_color_light);
    font-size: var(--form_text_size);
    border: 1px solid var(--shade4);
    border-radius: var(--menu_border_radius);
    padding: 4px 10px;
    margin: 0px 10px 8px;
}
div#header div#search_btn svg.cancel{
    position: absolute;
    right: 16px;
    top: 41px;
}
/* search results */
div#header div.search_results {
    width: 100%;
}
/* icon */
div#header > div.icon_wrapper {
    position: absolute;
    top: 12px;
    right: calc(var(--button_offset_side) - 2px);
}



/* plus menu */
div#plus_menu {
    position: relative;
    //    z-index: var(--menu_overlay_layer);
    --offset_bottom: -8px;
    --plus_button_size: 21px;
    --menu_item_padding: 7px 20px;
}
bbody.mobile div#plus_menu {
    --offset_bottom: 0px;
}
body.mobile div#plus_menu div.overlay {
    z-index: -1;
}

div#plus_menu img {
    width: 42px;
    margin: 8px 10px;
    border-radius: 50%;
    cursor: pointer;
}
div#plus_menu img:hover {
    filter: brightness(110%);
}
div#plus_menu div#plus_menu_items {
    position: absolute;
    bottom: calc(58px + var(--offset_bottom));
    padding: 4px 0;
    border: 1px solid var(--shade3);
    border-radius: var(--menu_border_radius);
    width: fit-content;
    font-size: 18px;
    background: var(--bar_color);
    color: var(--text_color);
    display: none;
    z-index: var(--menu_layer);
    box-shadow: var(--box_shadow);
}
body.mobile div#plus_menu div#plus_menu_items {
    bottom: 60px;
}
div#plus_menu.left div#plus_menu_items {
    left: 10px;
}
div#plus_menu.right div#plus_menu_items {
    right: 10px;
}
div#plus_menu label {
    display: block;
}
div#plus_menu div.menu_item {
    margin: 1px 4px;
    padding: var(--menu_item_padding);
    white-space: nowrap;
    cursor: pointer;
    width: fit-content;
    display: block;
}

div#plus_menu.left div.menu_item {
    margin-left: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    float: left;
}
div#plus_menu.right div.menu_item {
    margin-right: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    float: right;
}

div#plus_menu div.menu_item.selected,
div#plus_menu div.menu_item:hover {
    background: var(--shade2);
}

/* chat input button */
div#plus_menu div#plus_menu_btn_wrapper {
    z-index: var(--menu_overlay_layer);
    background: var(--background);
    position: absolute;
    bottom: var(--offset_bottom);
}
div#plus_menu.left div#plus_menu_btn_wrapper {
    border-top-right-radius: 50%;
    padding: 8px 8px 8px 10px;
    left: 0px;
}
div#plus_menu.right div#plus_menu_btn_wrapper {
    border-radius: 50%;
    padding: 8px;
    right: 0;
}

div#plus_menu div#plus_menu_btn {
    padding: 11px;
    border-radius: 50%;
    background: var(--shade2);
    background: var(--primary_color);
    cursor: pointer;
}
div#plus_menu div#plus_menu_btn svg {
    width: var(--plus_button_size);
    fill: var(--shade4);
    fill: #fff;
}

/* customaizations for cancel button */
div#plus_menu div#plus_menu_btn svg.cancel {
    stroke-width: 30 ! important;
    stroke: #fff;
}

body.desktop div#plus_menu div#plus_menu_btn:hover,
body.mobile div#plus_menu div#plus_menu_btn:active {
    opacity: 0.9;
}
/*
body.desktop div#plus_menu div#plus_menu_btn:hover svg,
body.mobile div#plus_menu div#plus_menu_btn:active svg {
    fill: var(--shade5);
    fill: #fff;
}*/

div.dropdown_element, div.dropdown_element * {
    box-sizing: border-box;
}
div.dropdown_element {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    color: var(--text_color);
    --scrollbar_color: var(--shade4);
    --scrollbar_border: var(--card_color);
    --border_radius: 5px;
    --label_text_color: var(--text_color);
    --selected_background: var(--primary_color);
    --highlight_background: var(--primary_shade);
    --dropdown_arrow_color: var(--shade5);
    --default_min_width: 50px;
    --min_width: var(--default_min_width);
    --option_padding: 2px 10px;
    --label_padding: var(--option_padding);
}
div.dropdown_element:focus {
    outline: none;
}

div.dropdown_element div.overlay {
    display: none;
    overflow: hidden;
}

/* dropdown */
div.dropdown_element div.dropdown {
    display: flex;
    flex-flow: column;
    position: fixed;
    margin-bottom: 4px;
    background-color: var(--card_color);
    border-radius: var(--border_radius);
    visibility: hidden;
    box-shadow: var(--box_shadow);
    z-index: var(--dropdown_layer);
}
body.desktop div.dropdown_element.multiple div.dropdown {
    top: 100%;
}

/* mobile popup */
body.mobile div.dropdown_element div.dropdown {
    background: var(--background);
    font-size: 1.4rem;
    z-index: var(--modal_layer);
    position: fixed;
    margin: auto;
    width: 90vw;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
}

body.mobile div.dropdown_element div.overlay {
    backdrop-filter: var(--blocker_filter);
    background: var(--blocker_overlay);
    z-index: var(--modal_overlay_layer);
}

body.mobile div.dropdown_element {
    --option_padding: 10px 18px;
}
body.mobile div.dropdown_element div.options {
    max-height: calc(100dvh - 12rem);
    overflow-y: auto;
}
body.mobile div.dropdown_element div.option {
    width: 100%;
    overflow-x: auto;
}

/* options container */
div.dropdown_element div.options {
    overscroll-behavior: contain;
    overflow-y: auto;
    margin: 1px 2px;
}
body.desktop div.dropdown_element div.options {
    display: flex;
    flex-flow: column;
    max-height: 40vh;
}

/* upward modifications */
body.desktop div.dropdown_element div.dropdown.upward {
    bottom: 0;
    flex-flow: column-reverse;
}
body.desktop div.dropdown_element.multiple div.dropdown.upward {
    bottom: calc(100% + 5px);
    top: unset;
}
body.desktop div.dropdown_element div.dropdown.upward div.options {
    flex-flow: column-reverse;
}

/* option / label */
div.dropdown_element.disabled div.dropdown_label {
    pointer-events: none;
    color: var(--text_color);
}
div.dropdown_element div.dropdown_label,
div.dropdown_element div.option {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    padding: var(--option_padding);
    border-radius: var(--border_radius);
    cursor: pointer;
    margin: 1px 0;
}

div.dropdown_element div.dropdown_label {
    padding: var(--label_padding);
    padding-right: 26px;
    background-color: var(--card_color);
    outline: var(--card_border);
}
div.dropdown_element div.dropdown_label span.label {
    overflow: hidden;
    text-overflow: ellipsis;
}
div.dropdown_element:not(:has(div.option.highlighted)) div.option.selected,
div.dropdown_element.multiple div.option.selected {
    background-color: var(--selected_background) ! important;
    color: #fff ! important;
}
body.desktop div.dropdown_element div.option.selected:hover {
    background-color: var(--selected_background);
}
body.desktop div.dropdown_element div.option:hover,
div.dropdown_element div.options:not(:hover) div.option.highlighted {
    color: var(--text_color);
    background-color: var(--highlight_background);
}

/* arrow */
div.dropdown_element svg.down {
    fill: var(--shade4);
    width: 10px;
    height: 10px;
    position: absolute;
    top: calc(50% - 3px);
    right: 6px;
}

/* header */
body.mobile div.dropdown_element div.options_header {
    border-bottom: var(--card_border);
}
/* title */
body.desktop div.dropdown_element div.title {
    display: none;
}
body.mobile div.dropdown_element div.title {
    position: relative;
    text-align: center;
    color: var(--text_color_light);
    font-style: italic;
    padding: 10px;
}

/* hide the search input off screen by default */
body.desktop div.dropdown_element:not(.search) input.search {
    position: absolute;
    left: -400vw;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* no search bar for mobile */
body.mobile div.dropdown_element:not(.search) input.search {
    display: none;
}

div.dropdown_element.search input.search {
    padding: var(--option_padding);
    margin: 2px;
    width: calc(100% - 4px);
    border-radius: var(--border_radius);
    border-bottom: none;
}
body.mobile div.dropdown_element.search input.search {
    display: none;
    font-size: 1.4rem;
    border-radius: 0;
    border-top: var(--card_border);
    padding: 4px 20px;
}

div.dropdown_element svg.search {
    display: none;
}
body.mobile div.dropdown_element.search svg.search {
    display: block;
    position: absolute;
    width: 1.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0.6rem;
    stroke: var(--shade4);
}

body.mobile div.dropdown_element.search svg.search:active {
    stroke: var(--shade5);
}

/* hidden select for autofill */
div.dropdown_element select.hidden_select {
    position: absolute;
    left: -400vw;
    width: 1px;
    height: 1px;
}

/* done button */
body.mobile div.dropdown_element button {
    margin: 10px auto;
}

div.dropdown_element span.placeholder {
    font-style: italic;
    color: var(--text_color_light);
}
/* general */
div.badge {
    height: fit-content;
    padding: 10px;
    display: flex;
    align-items: center;
    --icon_background: var(--background);
    --badge_radius: 6px;
}
div.badge img.pic {
    border-radius: 50%;
}
div.badge div.details {
    font-size: 1.125em;
    padding: 10px 20px 10px 0;
}
div.badge span.type {
    font-style: italic;
}

/* search */
div.badge.search {
    box-sizing: border-box;
    margin: 4px 0;
    width: 100%;
    flex-grow: 1;
    flex: 1;
    cursor: pointer;
    background: var(--card_color);
    border: var(--card_border);
    border-radius: var(--badge_radius);
    position: relative;
    --icon_size: 5rem;
    --icon_background: var(--shade1);
}
div.badge.search.archive {
    background: var(--archive_shade);
}

div.badge.search div.details {
    display: flex;
    flex-flow: column;
    overflow-x: auto;
}
div.badge.search span.distance {
    position: absolute;
    right: 0;
    top: 0px;
    padding: 4px 8px;
    border-top-right-radius: var(--badge_radius);
    border-bottom-left-radius: var(--badge_radius);
    background: var(--button_hover_color);
    font-family: var(--detail_font);
    font-size: 0.6em;
}
div.badge.search:hover span.distance {
    background: var(--button_color);
}
div.badge.search div.icon_wrapper {
    margin: 10px 20px 4px;
}
body.desktop div.badge.search:hover svg.active,
body.mobile div.badge.search:active svg.active,
div.badge.space.selected svg.active {
    stroke: var(--shade2);
}
body.mobile div.badge.search:active,
body.desktop div.badge.search:hover {
    background: var(--shade2);
}
body.mobile div.badge.search.archive:active,
body.desktop div.badge.search.archive:hover {
    background: var(--archive_hover);
}
div.badge.search span.name {
    font-size: 1.1em;
    font-weight: bold;
}

/* basic */
div.badge.basic {
    height: fit-content;
    border-radius: var(--badge_radius);
    padding: 4px 8px;
    margin: 8px 8px;
    font-size: 1.4em;
    cursor: pointer;
    display: flex;
    align-items: center;
    --icon_size: 40px;
}
div.badge.basic div.icon_wrapper {
    margin-right: 14px;
}
div.badge.basic div.wrapper {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}
div.badge.basic span.label {
    font-size: 14px;
    font-style: italic;
}
body.desktop div.badge.basic:hover,
body.mobile div.badge.basic:active {
    background: var(--shade2);
}

/* small */
div.badge.small {
    height: fit-content;
    text-align: center;
    border-radius: var(--badge_radius);
    display: inline-block;
    padding: 10px 0 4px;
    cursor: pointer;
    min-width: 100px;
    --icon_size: 80px;
}

div.badge.small.selected,
body.desktop div.badge.small:hover,
body.mobile div.badge.small:active {
    background: var(--shade2);
}
div.badge.small.selected {
    cursor: unset;
}
div.badge.small div.icon_wrapper {
    margin: auto;
    margin-bottom: 6px;
}
div.badge.small span.name {
    font-size: 18px;
    padding: 10px;
}
div.badge.small span.label {
    font-size: 14px;
    font-weight: 100;
    font-style: italic;
    padding: 0px 10px;
    display: block;
}

/* profile */
div.badge.profile {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    --icon_size: 180px;
}
div.badge.profile div.icon_wrapper {
    margin: 14px 30px;
}
div.badge.profile div.icon_wrapper img {
    cursor: pointer;
}
div.badge.profile div.icon_wrapper div.spinner {
    margin-top: calc((var(--icon_size) - 40px) / 2);
}
div.badge.profile span.name {
    font-weight: bold;
}
div.badge.profile div.details {
    display: flex;
    flex-flow: column;
    padding: 26px 40px 20px 0;
}
div.badge.profile div.details span {
    padding: 1px 0;
}
body.mobile div.badge.profile div.details span {
    padding: 2px 0;
}

div.badge.profile div.details span.status {
    position: absolute;
    right: 0;
    top: 0px;
    padding: 4px 8px ! important;
    border-top-right-radius: var(--badge_radius);
    border-bottom-left-radius: var(--badge_radius);
    background: var(--button_hover_color);
    font-family: var(--detail_font);
    font-size: 0.6em;
}
div.badge.profile button.chat_me {
    margin-left: 0;
}
div.badge.profile button.chat_me img {
    width: 14px;
    height: 14px;
    position: relative;
    margin-right: 10px;
    top: 3px;
}

/* mobile profile */
body.mobile div.badge.profile {
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
}

body.mobile div.badge.profile div.details {
    padding: 20px;
}

body.mobile div.badge.profile button.chat_me{
    margin: 15 auto 5;
}

/* family */
div.badge.family {
    cursor: pointer;
    background: var(--card_color);
    border: var(--card_border);
    padding: 4px;
    --icon_size: 40px;
}
body.desktop div.badge.family:hover,
body.mobile div.badge.family:active {
    background: var(--shade2);
}
div.badge.family div.icon_wrapper {
    margin: 0 10px 0 0;
}

/* select */
div.badge.select {
    padding: 4px;
    padding-left: 8px;
    cursor: pointer;
//    background: var(--shade1);
}
div.badge.select div.details {
    color: var(--text_color);
    display: flex;
    flex-flow: column;
    padding: 2px 10px;
    font-size: 18px;
}
div.badge.select div.details span.members,
div.badge.select div.details span.email {
    font-size: 0.75em;
    font-style: italic;
}

/* space selected */
div.badge.space_selected {
    padding: 4px 0 3px 1.4em;
    border-radius: 8px;
    position: relative;
    background: var(--shade1);
    outline: var(--card_border);
    top: 4px;
    --icon_size: 18px;
}
div.badge.space_selected div.icon_wrapper {
    position: absolute;
    left: 0.4em;
}
div.badge.space_selected div.details {
    padding: 0px 10px;
    display: flex;
    align-items: center;
}

label.select_space.static div.badge.space_selected span.remove {
    display: none;
}
div.badge.space_selected span.remove {
    cursor: pointer;
    position: relative;
    top: 1px;
    left: 2px;
    padding-left: 4px;
}
div.badge.space_selected span.remove svg {
    width: 18px;
    height: 18px;
    fill: var(--shade5);
    stroke: var(--shade5);
    stroke-width: 4;
}
div.badge.space_selected span.remove:hover svg {
    stroke: var(--shade9);
    fill: var(--shade9);
}

/* family selected */
div.badge.family_selected {
    padding: 5px 0 3px 1.4em;
    border-radius: 8px;
    position: relative;
    margin: 6px 2px;
    background: var(--shade1);
    outline: var(--card_border);
    --icon_size: 20px;
}
div.badge.family_selected div.icon_wrapper {
    position: absolute;
    left: 0.4em;
}
div.badge.family_selected div.details {
    padding: 0px 10px;
    display: flex;
    align-items: center;
}
div.locked div.badge.family_selected span.remove {
    display: none;
}
div.badge.family_selected span.remove {
    cursor: pointer;
    position: relative;
    top: 0;
    left: 2px;
    padding-left: 4px;
}
div.badge.family_selected span.remove svg {
    width: 18px;
    height: 18px;
    fill: var(--shade5);
    stroke: var(--shade5);
    stroke-width: 4;
}
div.badge.family_selected span.remove:hover svg {
    stroke: var(--shade9);
    fill: var(--shade9);
}

/* chosen */
div.badge.chosen {
    height: fit-content;
    text-align: center;
    border-radius: 20px;
    display: inline-block;
    padding: 20px 5px 0px;
    position: relative;
    --icon_size: 60px;
}
div.badge.chosen div.icon_wrapper {
    margin-bottom: 6px;
    margin: auto;
}
div.badge.chosen span.name {
    font-size: 18px;
    padding: 10px;
}
body.desktop div.badge.chosen span.remove {
    visibility: hidden;
}
div.badge.chosen span.remove {
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: calc(50% + var(--icon_size) / 2 - 2px);
}
div.badge.chosen span.remove svg {
    width: 18px;
    height: 18px;
    fill: var(--shade5);
    stroke: var(--shade5);
    stroke-width: 4;
}
div.badge.chosen span.remove:hover svg {
    stroke: var(--shade9);
    fill: var(--shade9);
}
body.desktop div.badge.chosen:hover:not(.locked) span.remove {
    visibility: visible;
}

/* space */
div.badge.space {
    --icon_background: var(--shade1);
    --details_bottom_offset: -2px;
    --details_top_offset: 2px;
    --unread_top_offset: 7px;
    color: var(--text_color);
    padding: 4px;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid var(--background);
}

body.desktop div.badge.space:hover,
body.mobile div.badge.space:active,
div.badge.space.selected {
    background: var(--shade2);
}
body.desktop div.badge.space:hover svg.active,
body.mobile div.badge.space:active svg.active,
div.badge.space.selected svg.active {
    stroke: var(--shade2);
}

/* unread dot */
div.badge.space svg.unread {
    fill: var(--shade5);
    position: relative;
    left: 10px;
    top: var(--unread_top_offset);

}
div.badge.space:not(.unread) svg.unread {
    display: none;
}
div.badge.space .pic {
    padding: 0;
    width: var(--icon_size);
    height: var(--icon_size);
}
/* timestamp */
div.badge.space span.timestamp {
    color: var(--text_color_light);
    font-family: var(--detail_font);
    font-style: italic;
    font-size: .6em;
    position: absolute;
    bottom: var(--details_bottom_offset);
    right: 10px;
}
/* space type */
div.badge.space span.type {
    color: var(--text_color_light);
    font-family: var(--detail_font);
    font-style: italic;
    font-size: .6em;
    position: absolute;
    bottom: var(--details_bottom_offset);
    left: 1px;
    visibility: hidden;
}
/* icons */
div.badge.space div.icon_wrapper {
    margin: 3px 10px;
}
/* space label */
div.badge.space div.details {
    display: flex;
    width: 100%;
    position: relative;
}
div.badge.space div.name {
    flex-grow: 1;
    width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    bottom: 1px;
}
div.badge.space.unread div.name {
    font-weight: bold;
}

/* space (mobile) */
body.mobile div.badge.space {
    --details_top_offset: 4px;
    --unread_top_offset: 12px;
    --icon_size: 48px;
    --icon_background: var(--background);
    padding: 6px;
    border-bottom: 1px solid var(--shade1);
}
body.mobile div.badge.space div.icon_wrapper {
    margin: 3px 16px 3px 10px;
}
body.mobile div.badge.space div.name {
    font-size: 1.28em;
}

/* space header */
div.badge.space_header {
    z-index: 100;
    position: relative;
    padding: 0;
    margin-bottom: 2px;
    --icon_size: 40px;
}
div.badge.space_header.direct {
    cursor: pointer;
}
div.badge.space_header div.icon_wrapper {
    margin-right: 14px;
}

/* space header (mobile) */
body.mobile div.badge.space_header {
    --icon_size: 46px;
}
/* chat */
div.badge.chat {
    --icon_size: 42px;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0;
}
div.badge.chat {
    cursor: pointer;
}

/* header */
div.badge.header {
    padding: 0;
    margin-bottom: 2px;
    --icon_size: 40px;
}
div.badge.header div.icon_wrapper {
    margin-right: 2px;
    position: relative;
    right: 4px;
}
div.badge.header div.icon_wrapper svg {
    stroke: var(--shade5);
    fill: var(--shade5);
}
div.badge.header div.icon_wrapper svg.chat {
    padding: 6px 6px 0;
}
div.badge.header div.icon_wrapper svg.location {
    padding: 8 0 4 8;
}


/* household */
div.badge.household {
    margin: 4px 0;
    width: 100%;
    flex-grow: 1;
    flex: 1;
    background: var(--card_color);
    border: var(--card_border);
    border-radius: var(--badge_radius);
    position: relative;
    --icon_size: 60px;
    --icon_background: var(--shade1);
}
div.badge.household.card {
    --icon_size: 80px;
}
div.badge.household div.details {
    overflow-x: auto;
    display: flex;
    flex-flow: column;
    align-items: left;
    flex-grow: 1;
    margin: 0 20px;
    padding: 0;
}
div.badge.household div.details div.member_list {
    display: flex;
    justify-content: center;
}
div.badge.household span.member {
    padding: 6px 10px 4px;
    border-radius: var(--badge_radius);
    cursor: pointer;
}
div.badge.household span.member:hover {
    background: var(--shade2);
}
div.badge.household div.details span.member {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
div.badge.household span.distance {
    position: absolute;
    right: 0;
    top: 0px;
    padding: 4px 8px;
    border-top-right-radius: var(--badge_radius);
    border-bottom-left-radius: var(--badge_radius);
    background: var(--button_hover_color);
    font-family: var(--detail_font);
    font-size: 0.6em;
}
div.badge.household:hover span.distance {
    background: var(--button_color);
}
div.badge.household div.icon_wrapper {
    margin: 4px;
}
body.desktop div.badge.household:hover svg.active,
body.mobile div.badge.household:active svg.active,
div.badge.space.selected svg.active {
    stroke: var(--shade2);
}
div.badge.household.card span.name {
    font-size: 1.33em;
}
div.badge.household span.name {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2px;
}

/* household 2 */
div.badge.household2 {
    box-sizing: border-box;
    margin: 4px 0;
    padding: 0;
    width: 100%;
    flex-grow: 1;
    flex: 1;
    flex-flow: column;
    align-items: flex-start;
    background: var(--card_color);
    border: var(--card_border);
    border-radius: var(--badge_radius);
    position: relative;
    --icon_size: 5rem;
    --icon_background: var(--shade1);
}
div.badge.household2 div.member {
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    border-radius: var(--badge_radius);
    width: 100%;
    cursor: pointer;
}

body.mobile div.badge.household2 div.member:active,
body.desktop div.badge.household2 div.member:hover {
    background: var(--shade2);
}
/* archive style */
div.badge.household2 div.member.archive {
    background: var(--archive_shade);
}
body.mobile div.badge.household2 div.member.archive:active,
body.desktop div.badge.household2 div.member.archive:hover {
    background: var(--archive_hover);
}
div.badge.household2 div.member div.details {
    overflow-x: auto;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    flex-grow: 1;
}
div.badge.household2 div.details div.member_list {
    display: flex;
    justify-content: center;
}
div.badge.household2 span.member {
    padding: 6px 10px 4px;
    border-radius: var(--badge_radius);
    cursor: pointer;
}
div.badge.household2 div.details span.member {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
div.badge.household2 span.distance {
    position: absolute;
    right: 0;
    top: 0;
    padding: 4px 8px;
    border-top-right-radius: var(--badge_radius);
    border-bottom-left-radius: var(--badge_radius);
    background: var(--button_hover_color);
    font-family: var(--detail_font);
    font-size: 0.6em;
}
body.mobile div.badge.household2:active span.distance,
body.desktop div.badge.household2:hover span.distance {
    background: var(--button_color);
}
div.badge.household2 div.icon_wrapper {
    margin: 10px 20px 4px
}
body.desktop div.badge.household2:hover svg.active,
body.mobile div.badge.household2:active svg.active,
div.badge.space.selected svg.active {
    stroke: var(--shade2);
}
div.badge.household2.card span.name {
    font-size: 1.33em;
}
div.badge.household2 span.name {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2px;
}

/* household selected */
div.badge.household_selected {
    padding: 4px 0 3px 0.2em;
    border-radius: 8px;
    position: relative;
    background: var(--shade1);
    outline: var(--card_border);
    bottom: 1px;
    margin-left: 2px;
    --icon_size: 18px;
}
div.badge.household_selected div.icon_wrapper {
    position: absolute;
    left: 0.4em;
}
div.badge.household_selected div.details {
    padding: 0px 10px;
    display: flex;
    align-items: center;
}

div.badge.household_selected span.remove {
    cursor: pointer;
    position: relative;
    top: 1px;
    left: 2px;
    padding-left: 4px;
}
div.badge.household_selected span.remove svg {
    width: 18px;
    height: 18px;
    fill: var(--shade5);
    stroke: var(--shade5);
    stroke-width: 4;
}
body.mobile div.badge.household_selected span.remove:hover svg,
body.desktop div.badge.household_selected span.remove:hover svg {
    stroke: var(--shade9);
    fill: var(--shade9);
}


div#kebab_menu {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    --kebab_size: calc(var(--button_size) * 0.8);
    --kebab_padding: 10px;
    --kebab_padding_top: var(--kebab_padding);
    --kebab_padding_bottom: var(--kebab_padding);
    --kebab_height: calc(var(--kebab_size) + var(--kebab_padding_top) + var(--kebab_padding_bottom));
    --menu_item_padding: 2px 14px;
    --icon_color: var(--shade3-1);
    --icon_hover_color: var(--shade4);
    --dropdown_padding: 6px;
    --dropdown_padding_side: 6px;
    --text_size: 1.2rem;
}

div#kebab_menu.upward {
    flex-flow: column-reverse;
    top: unset;
    bottom: calc(100% - var(--kebab_height));
}
div#kebab_menu svg {
    stroke: var(--icon_color);
    fill: var(--icon_color);
    width: var(--kebab_size);
    height: var(--kebab_size);
    padding: var(--kebab_padding_top) var(--kebab_padding) var(--kebab_padding_bottom) var(--kebab_padding);
    cursor: pointer;
}
div#kebab_menu div.menu_item svg {
    width: 0.9em;
    height: 0.9em;
    margin: 1px 0.4em 0 0;
    padding: 0;
}
body.desktop div#kebab_menu div.menu_item:hover svg,
body.desktop div#kebab_menu svg:hover {
    stroke: var(--icon_hover_color);
    fill: var(--icon_hover_color);
}
div#kebab_menu div.menu_item:hover svg:hover {
    stroke: var(--icon_hover_color);
    fill: var(--icon_hover_color);
}
div#kebab_menu div#kebab_menu_dropdown {
    display: none;
    flex-flow: column;
    position: fixed;
    background: var(--bar_color);
    color: var(--text_color);
    border: 1px solid var(--shade3);
    width: fit-content;
    box-shadow: var(--box_shadow);
    border-radius: var(--menu_border_radius);
    z-index: var(--menu_layer);
    padding: 4px 0;
    margin: var(--dropdown_padding);
}
div#kebab_menu.right div#kebab_menu_dropdown {
    align-items: end;
    text-align: right;
    margin-right: var(--dropdown_padding_side);
}
div#kebab_menu.left div#kebab_menu_dropdown {
    align-items: start;
    text-align: left;
    margin-left: var(--dropdown_padding_side);
}
div#kebab_menu.upward div#kebab_menu_dropdown {
    margin-bottom: var(--dropdown_padding);
    flex-flow: column-reverse;
}
div#kebab_menu div#kebab_menu_dropdown div.menu_item {
    font-size: var(--text_size);
    padding: var(--menu_item_padding);
    white-space: nowrap;
    cursor: pointer;
    width: fit-content;
    display: flex;
    align-items: center;
    color: var(--text_color_light);
    z-index: var(--menu_layer);
}
body.mobile div#kebab_menu div#kebab_menu_dropdown div.menu_item {
    font-size: 1.4rem;
    margin-top: 2px;
    margin-bottom: 2px;
}
div#kebab_menu.right div#kebab_menu_dropdown div.menu_item {
    margin: 1px 0px 1px 4px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
div#kebab_menu.left div#kebab_menu_dropdown div.menu_item {
    margin: 1px 4px 1px 0px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

div#kebab_menu div.menu_item.selected,
body.mobile div#kebab_menu div.menu_item:active,
body.desktop div#kebab_menu div.menu_item:hover {
    background: var(--shade2);
}

/* red for hearts */
div#kebab_menu div.menu_item.red svg.heart {
    fill: var(--heart_red);
    stroke: var(--heart_red);
}
/* yellow for stars */
div#kebab_menu div.menu_item.yellow svg.star {
    fill: var(--star_yellow) ! important;
    stroke: var(--star_yellow) ! important;
}

/* header menu */
div#header > div#kebab_menu {
    --dropdown_padding: 0px;
}
/* message menu */
div.message div#kebab_menu {
    --kebab_size: 1.2em;
    --kebab_padding: 3px;
    --kebab_padding_top: 2px;
    --kebab_padding_bottom: 0px;
}
div.message div#kebab_menu div#kebab_menu_dropdown {
    position: relative;
    top: 0 !important;
    right: 0 ! important;
}
div.message div#kebab_menu div.menu_item {
    font-size: 1em;
}

/* divider */
div#kebab_menu div.divider {
    width: 100%;
    margin: 6px 0;
    text-align: center;
    border-bottom: 1px solid var(--shade4);
}
/* Icons */
div.icon_wrapper {
    border-radius: 50%;
    width: var(--icon_size);
    height: var(--icon_size);
    position: relative;
    border-radius: 50%;
    padding: 0;
}
div.icon_wrapper img {
    border-radius: 50%;
    padding: 0;
    height: 100%;
}
div.icon_wrapper > svg:not(.active) {
    box-sizing: border-box;
    padding: 2px;
    width: var(--icon_size);
    height: var(--icon_size);
    fill: var(--icon_foreground_color);
    border-radius: 50%;
}
div.icon_wrapper > svg text {
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: sans-serif;
  font-size: 22px;
}

/* active dot */
div.icon_wrapper svg.active {
    fill: var(--active_green);
    border-radius: 50%;
    stroke-width: 2px;
    stroke: var(--icon_background);
    width: calc(var(--icon_size) * 0.25);
    height: calc(var(--icon_size) * 0.25);
    position: absolute;
    bottom: calc(var(--icon_size) * 0.02);
    right: calc(var(--icon_size) * -0.02);
}
div.icon_wrapper:not(.active) svg.active {
    display: none;
}
/* mobile */

body.mobile div#modal {
    z-index: var(--modal_layer);
    outline: 0;
    display: flex;
    width: 100dvw;
    height: 100dvh;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: var(--modal_layer);
    background: var(--background);
    outline: 0;
    min-width: unset ! important;
}
body.mobile div#modal.hidden {
    display: none;
}

body.mobile div.modal {
    width: 90vw;
    min-width: unset ! important;
//    top: var(--popup_top) ! important;
//    transform: none ! important;
//    left: 0;
//    right: 0;
//    margin: auto;
}

/* regular */
div.modal {
    width: auto;
    height: auto;
    max-width: 90dvw;
    max-height: 90dvh;
    box-shadow: var(--box_shadow);
    background: var(--background);
    border-radius: var(--card_radius);
    text-align: center;
    z-index: var(--modal_layer);
    outline: 0;
    position: relative;
    flex-flow: column;
}
div.modal, div.modal * {
    box-sizing: border-box;
}

div.modal-overlay {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: var(--modal_overlay_layer);
}

body.mobile div.modal-overlay {
    backdrop-filter: var(--blocker_filter);
    background: var(--blocker_overlay);
}

body.mobile div.modal-overlay.typing {
    align-items: start;
}

body.mobile div.modal-overlay.typing div.modal {
    margin-top: 1em;
}

/* modify the widget css for modal */
div.modal div#widget_popup div.widget {
    padding: 0;
}
div.modal div#widget_popup table#button_wrapper_inner {
    display: none;
}
.popup_table {
    border-collapse: collapse;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
    font-size: 1.2em;
}

.popup_table tr.hover:not(.hdr):hover {
  background: rgba(0, 40, 86, 0.15);
}
.popup_table:not(.borderless) td {
   border: 1px solid #ccc;
}

.popup_table td {
    padding: 3px 10px;
    vertical-align: middle;
    text-align: center;
}

.popup_table th.label1 {
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    font-size: 18px;
    padding: 5px;
    background-color: #424242;
    color: #ccc;
    border-style: solid;
    border-color: #ccc;
    border-width: 0 1px 0 1px;
}

.popup_table th.label2 {
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    background-color: gray;
    color: #eee;
    font-size: 16px;
    padding: 2px 5px;
    border-style: solid;
    border-color: #ccc;
    border-width: 0 1px 0 1px;
}

.popup_table th {
    font-family: "Consolas", Monaco, monospace;
    padding: 0 5px;
    white-space: nowrap;
    font-weight: normal;
    border: 1px solid #eee;
    background: rgba(0, 0, 0, 0.2);
    color: black;
}

.popup_table th.row-hdr {
    text-align: right;
    width: 1px;
}

.popup_table th.col-hdr {
    min-width: 60px;
}

div.modal > div.options {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
}
div.modal > div.options div.header {
    color: var(--text_color_header);
    font-size: 1.5em;
    margin-bottom: 4px;
}
div.modal > div.options label.option {
    width: auto;
    box-sizing: border-box;
    margin: 5px 0px;
}
/*
 *  dataTable changes
 */

/* scrollbar:  leavespace for the header */
body.desktop div#table_wrapper *::-webkit-scrollbar-track {
    margin-top: 40px;
}


table.dataTable {
    border-collapse: collapse;
    border-collapse: separate;
}

/* remove the header hover styling */
table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline: none;
    outline-offset: 0;
}

/* Hide the sort/order indicator */
table.dataTable span.dt-column-order {
    display: none;
}

/* set the row hover color */
table.dataTable > tbody > tr.selected,
body.mobile table.dataTable > tbody > tr:active,
body.desktop table.dataTable > tbody > tr:hover {
    background-color: var(--shade1);
}

body.desktop table.dataTable > tbody > tr:has(td.dt-empty) {
    pointer-events: none;
}

table.dataTable > tbody > tr.selected > * {
    box-shadow: unset;
    color: unset;
}

table.dataTable > tbody > tr.disabled {
    pointer-events: none;
}
table.dataTable > tbody > tr.disabled:not(.selected) {
    opacity: 0.3;
}
/*
table.dataTable > tbody > tr.archive {
    background-color: var(--archive_shade);
}
body.mobile table.dataTable > tbody > tr.archive:active,
body.desktop table.dataTable > tbody > tr.archive:hover {
    background-color: var(--archive_hover);
}
*/
/* fixed header */
table.dataTable.fixedHeader thead {
    position: sticky;
    z-index: var(--content_layer);
    top: 0;
    background: white;
}

thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background : none;
}

div.dt-buttons {
    display: none;
}
h1.blocker {
    font-size: 18px;
    font-weight: lighter;
    text-align: center;
}

div#blocker {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

div#blocker div#blocker_overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    backdrop-filter: var(--blocker_filter);
    background: var(--blocker_overlay);
    z-index: 100000;
}

div#blocker div#blocker_message {
    padding: 20px;
    background: var(--blocker_background);
    font-size: 18px;
    font-weight: lighter;
    text-align: center;
    border-radius: 10px;
    z-index: 100001;
}
.nowrap {
    white-space: nowrap;
}

.clickable {
    cursor: pointer;
}
svg.left {
    transform: rotate(90deg);
}
svg.right {
    transform: rotate(-90deg);
}
.spinner {
    border: 2px solid var(--shade2);
    border-top: 2px solid var(--shade5);
    border-radius: 50%;
    min-width: var(--spinner_size);
    min-height: var(--spinner_size);
    width: var(--spinner_size);
    height: var(--spinner_size);
    animation: spin 0.8s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Content loading */
div#spinner {
    display: none;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
div#spinner > div.spinner {
    margin: 0;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
*::-webkit-scrollbar-track:vertical {
    background: var(--scrollbar_background);
}
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar_color);
    border-radius: 16px;
    border: 4px solid var(--scrollbar_border);
    min-height: 50px;
    cursor: pointer;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:horizontal {
    background: var(--scrollbar_show_color);
}

.show_scrollbar::-webkit-scrollbar-thumb:vertical {
    --scrollbar_color: var(--scrollbar_show_color);
}
*::-webkit-scrollbar-button {
    display:none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body.mobile *::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body.mobile * {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
div.overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--menu_overlay_layer);
}
svg.circle-progress {
  --size: 64px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 2px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
}

svg.circle-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}

svg.circle-progress circle.bg {
  stroke: var(--shade2);
}

svg.circle-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: var(--shade5);
}

svg.circle-progress.done circle.fg {
  animation: progress_spin 2s linear infinite;
  stroke-dasharray: calc(var(--circumference) / 4) calc(var(--circumference) * 3/4);
  transition: unset;
}

@keyframes progress_spin {
  0% { transform: rotate(-90deg); }
  100% { transform: rotate(270deg); }
}

div#directory_view input {
    color: var(--text_color_light);
    border: 1px solid #aaa;
    border-radius: 10px;
    width: calc(100% - 20px);
    padding: 4px 10px;
    margin: 0px 10px 5px;
}
div#directory_view div#results {
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
    width: calc(100% - 20px);
}
body.desktop div#directory_view div#results {
    max-width: 600px;
}
div#directory_view div#results_wrapper {
    display: none;
    overflow-y: auto;
    width: 100%;
//    height: calc(100vh - 240px);
    will-change: scroll-position;
    flex-flow: column;
    align-items: center;
    padding-bottom: 30px;
}
body.mobile div#directory_view div#results_wrapper {
//    height: calc(100vh - 140px);
}
div#directory_view h2 {
    color: var(--shade6);
}

div#directory_view tr {
    cursor: pointer;
}

body.mobile div#directory_view div#plus_menu {
    --offset_bottom: 0px;
}

/* home */
div#directory_view div#home_wrapper {
    display: flex;
    flex-flow: column;
    gap: 20px;
    padding-bottom: 56px;
}
body.mobile div#directory_view div#home_wrapper div.map_card {
    height: 200px;
    min-height: 200px;
}
div#directory_view div#home_wrapper div.card {
    border-radius: var(--card_radius);
}

/* tables */
div#directory_view div.dt-container {
    padding-bottom: 54px;
    overflow: auto;
    will-change: scroll-position;
    box-sizing: border-box;
    height: 100%;
}
/* table scrollbar: leave space for bottom */
body.desktop div#directory_view div.dt-container::-webkit-scrollbar-track {
    margin-bottom: 54px;
}

/* section */
div#directory_view div.section > div.content {
    width: 100%;
}
div#directory_view.centered div.section > div.content {
    display: flex;
    flex-flow: column;
    align-items: center;
}
div#directory_view div.section {
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 50px 6px 20px;
    margin: 50px 0px 0px;
    border-top: 1px solid var(--shade3);
    width: 100%;
//    scroll-snap-align: start;

//    border: 1px solid var(--shade3);
//    border-radius: var(--card_radius);
}
div#directory_view div.section > span {
    font-size: 1.25rem;
    font-weight: bold;
    padding: 0 8px;
    background: var(--background);
    transform: translateY(-60%);
    background: var(--shade1);
    padding: 2 8px;
    border: var(--card_border);
    border-radius: var(--header_radius);
}

/* card */
div#directory_view div.card {
    background: var(--card_color);
    border: var(--card_border);
    border-radius: var(--card_radius);;
    padding: 10px 20px;
    text-align: center;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    --min_width: unset;
}
div#directory_view div.card div.contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px;
}
div#directory_view div.card div.label {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding: 4px 10px 10px;
}

div#directory_view div.card div.contents div.badge.small {
    min-width: var(--min_width);
}

div#profile_view > div.wrapper > div.content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    height: unset ! important;
    max-height: 100%;
}

div#profile_view div.card {
    display: flex;
    flex-flow: column;
    align-items: center;
    background: var(--card_color);
    border: var(--card_border);
    border-radius: var(--card_radius);
    padding: 10px 20px;
    text-align: center;
    flex-grow: 1;
    min-width: 200px;
}
body.desktop div#profile_view div.card div.text {
    max-width: 1000px;
}
div#profile_view div.card div.label {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding: 4px 10px 10px;
}
div#profile_view div.card div.text {
    text-align: center;
    font-size: 16px;
    padding: 4px 10px 10px;
}
div#profile_view div.card.family {
    text-align: center;
}
div#profile_view.blocked div.badge.profile button.chat_me {
    display: none;
}
div#profile_view div.card div.contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 1px;
}
/*div#profile_view div.card div.contents div.badge.small {
    min-width: var(--min_width);
}*/

/* field table */
body.desktop div#profile_view div.card:has(table) {
    flex-grow: 0;
}

div#profile_view div.card table {
    margin: auto;
}
div#profile_view div.card table th {
    text-align: right;
    vertical-align: top;
}
div#profile_view div.card table td {
    padding-left: 8px;
    border-bottom: 1px solid var(--shade3);
}
div#table_manage_view, div#table_manage_view * {
    box-sizing: border-box;
}
div#table_manage_view, div#table_manage_view * {
    box-sizing: border-box;
}

div#table_manage_view div.dropdown {
    border: none;
}
div#table_manage_view div.dropdown div.title,
div#table_manage_view div.dropdown input.search {
    display: none;
}

div#tables_view div.dt-container {
    padding-bottom: 54px;
    overflow: auto;
    will-change: scroll-position;
    box-sizing: border-box;
    height: 100%;
}

/* table scrollbar: leave space for bottom */
body.desktop div#tables_view div.dt-container::-webkit-scrollbar-track {
    margin-bottom: 54px;
}

/* tree scrollbar:  leavespace for the plus menu */
body.desktop div#tables_view div#header div.tree_select *::-webkit-scrollbar-track {
    margin-bottom: 40px;
}

div#tables_view tr {
    cursor: pointer;
}

/* convert to blue for custom table */
div#tables_view div#header.custom {
//    --bar_color: var(--primary_shade);
    --label_color: var(--primary_color);
    --dropdown_arrow_color: var(--shade1);
    --label_text_color: var(--shade1);
}

div#tables_view div#header.custom div.button svg {
    --button_color: var(--label_color);
    --button_hover: var(--label_color);
}

/* hide config button for split_tables */
div#tables_view.split_table div#header div#config_btn {
    display: none;
}

/* tree select */
div#tables_view div.tree_select {
    position: absolute;
    top: calc(100% + 7px);
    z-index: var(--dropdown_layer);
}
div#tables_view div.tree_select div.dropdown_label,
div#tables_view div.tree_select div#dropdown {
    display: none;
}

/* plus menu */
div#tables_view div.tree_select div#plus_menu {
    --plus_button_size: 12px;
    --menu_item_padding: 0px 12px;
}
div#tables_view div.tree_select div#plus_menu div#plus_menu_items {
    bottom: 41px;
}

/* tree management popups */
div#table_rename_popup h3 span,
div#table_move_popup h3 span {
//    font-style: italic;
    background: var(--shade2);
    border-radius: var(--header_radius);
    padding: 2px 8px;
}

div#tables_view div.count {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 8px 16px;// 8px 0 8px;
    font-size: 1.3rem;
    background: var(--shade2);
    border-radius: var(--button_border_radius);
}
body.mobile div#tables_view div.count {
    right: 10px;
    bottom: 8px;
}

/* bottom menu */
div#tables_view div#bottom_menu {
    display: flex;
    width: fit-content;
    position: absolute;
    bottom: 0;
    background: var(--background);
    border-top-right-radius: 50%;
}

div#tables_view div#bottom_menu div#plus_menu div#plus_menu_btn_wrapper {
    position: static;
}

div#tables_view div#bottom_menu div#plus_menu:first-of-type div#plus_menu_btn_wrapper {
    padding: 8px 0 0 10px;
}
div#tables_view div#bottom_menu div#plus_menu:last-of-type div#plus_menu_btn_wrapper {
    padding: 8px 8px 0 8px;
}
body.mobile div#tables_view div#bottom_menu div#plus_menu_btn_wrapper {
    padding: 0 0px 8px 10px ! important;
}

div#tables_view div#bottom_menu div#results_wrapper {
    position: relative;
    z-index: var(--menu_overlay_layer);
}
div#tables_view div#bottom_menu div#results_wrapper div#results {
    display: flex;
    flex-flow: column-reverse;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 20px;
    border: 1px solid var(--shade3);
}
div#tables_view div#bottom_menu div#results_wrapper div#results div.empty {
    font-size: 1.125em;
    white-space: nowrap;
    padding: 4px 8px;
}


div#table_settings label.form.select {
    width: fit-content;
}
div#table_settings label.form.select select {
    width: fit-content;
}

div#chat_view div#chat div.message_group {
    width: calc(100% - 44px);
    position: relative;
    padding: 10px;
    margin: 0px 10px;
}
div#chat_view div#chat div.message_group.above {
    padding-bottom: 0 ! important;
}
div#chat_view div#chat div.message_group.below {
    padding-top: 0 ! important;
}
div#chat_view div#chat div.message_group div.me_bar {
position: absolute;
    width: 4px;
    height: 16px;
    top: 24px;
    left: 2px;
    border-radius: 4px;
    background: var(--blue);
}

div#chat_view div#chat div.message_group div.message {
    margin-left: 52px;
    padding: 1px 4px;
    position: relative;
    border-bottom: 1px solid var(--shade1);
    min-height: 21px;
}
div#chat_view div#chat div.message_group div.message div.deleted {
    font-family: var(--detail_font);
    font-size: 0.75em;
    color: var(--shade4);
    text-align: left;
    padding: 0 16px;
    margin: 12px 8px;
}
body.mobile div#chat_view div#chat div.message_group div.message.selected,
body.desktop div#chat_view div#chat div.message_group div.message:hover {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: var(--card_color);
}
div#chat_view div#chat div.message_group div.message.highlighted,
body.desktop div#chat_view div#chat div.message_group div.message.highlighted:hover div.timestamp,
body.mobile div#chat_view div#chat div.message_group div.message.highlighted.selected div.timestamp {
    background: var(--highlight) ! important;
}

div#chat_view div#chat div.message_group div.message.error,
body.desktop div#chat_view div#chat div.message_group div.message.error:hover div.timestamp,
body.mobile div#chat_view div#chat div.message_group div.message.error.selected div.timestamp {
    background: var(--error) ! important;
}

div#chat_view div#chat div.message_group div.name {
    margin-left: 56px;
    font-size: 1.125em;
    font-weight: bold;
    display: inline-block;
}

/*
 * heart button
 */
div#chat_view div#chat div.message_group div.message div.heart {
    color: var(--text_color_light);
    float: right;
    padding: 1px 4px;
}
/* set the button sizes */
div#chat_view div#chat div.message_group div.message div.heart svg {
    padding: 2px 3px;
    width: calc(1em * var(--scaler));
    height: calc(1em * var(--scaler));
}
/* hide the heart button by default */
div#chat_view div#chat div.message_group div.message div.heart {
    visibility: hidden;
}
div#chat_view div#chat div.message_group div.message.pending div.heart {
    visibility: hidden ! important;
}
/* heart button color */
div#chat_view div#chat div.message_group div.message div.heart svg.heart {
    stroke: var(--shade3-1);
    fill: var(--shade3-1);
}
/* heart button hover color */
div#chat_view div#chat div.message_group div.message div.heart:hover svg.heart {
    fill: var(--shade4);
    stroke: var(--shade4);
}
/* show heart when full or when hovering on messages of others */
div#chat_view div#chat div.message_group div.message div.heart.show,
body.desktop div#chat_view div#chat div.message_group div.message:not(.mine):hover div.heart {
    visibility: visible;
}
/* full heart styling */
div#chat_view div#chat div.message_group div.message div.heart.show:hover svg.heart,
div#chat_view div#chat div.message_group div.message div.heart.show svg.heart {
    fill: var(--heart_pink);
    stroke: var(--heart_pink);
}
/* red heart styling */
div#chat_view div#chat div.message_group div.message div.heart.show.red:hover svg.heart,
div#chat_view div#chat div.message_group div.message div.heart.show.red svg.heart {
    fill: var(--heart_red);
    stroke: var(--heart_red);
}
/* heart is clickable for messages of others */
div#chat_view div#chat div.message_group div.message:not(.mine) div.heart svg.heart {
    cursor: pointer;
}
/* style the heart count */
div#chat_view div#chat div.message_group div.message div.heart span.heart_count {
    font-family: var(--detail_font);
    font-size: 0.75em;
    display: none;
    color: var(--text_color_light);
    padding: 3px;
    position: relative;
    bottom: 5.5px;
    cursor: default;
    line-height: 0;
}
/* style the heart tooltip */
div#chat_view div#chat div.message_group div.heart span.heart_count div.heart_tooltip {
    font-size: 14px;
    font-family: var(--font);
    color: var(--text_color);
    position: absolute;
    visibility: hidden;
    right: -28px;
    top: 26px;
    background: var(--shade1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    padding: 2px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    line-height: normal;
    z-index: 11;
}
/* When hovering over the heart div, show the list of people who hearted */
body.desktop div#chat_view div#chat div.message_group div.heart:hover span.heart_count div.heart_tooltip {
    visibility: visible;
}

/* message menu container */
div#chat_view div#chat div.message_group div.message div.menu {
    height: 100%;
    position: absolute;
    top: 0;
    right: -1.4em;
    min-width: 1.4em;
    display: flex;
    flex-flow: column;
}

/*
 * Message timestamp
 */
div#chat_view div#chat div.message_group div.message div.timestamp {
    font-family: var(--detail_font);
    font-size: 0.75em;
    background: var(--card_color);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    color: var(--text_color_light);
    display: inline-block;
    text-align: center;
    position: absolute;
    padding: 5px 10px 1px;
    right: 0;
    top: 0;
    transform: translateY(-100%);
    display: none;
    pointer-events: none;
}
body.mobile div#chat_view div#chat div.message_group div.message.selected div.timestamp,
body.desktop div#chat_view div#chat div.message_group div.message:hover div.timestamp {
    display: inline-block;
}

/* seen bubble */
div#chat_view div#chat div.message_group div.message_wrapper div.seen {
    padding: 0px 9px;
    width: 50%;
    margin-left: auto;
    text-align: right;
    --icon_size: 16px;
}
div#chat_view div#chat div.message_group div.message_wrapper div.seen div.icon_wrapper {
    margin-right: 2px;
}
div#chat_view div#chat div.message_group div.message_wrapper div.seen div.seen_bubble {
    position: relative;
    width: fit-content;
    display: inline-block;
    padding: 14px 0 8px;
}
div#chat_view div#chat div.message_group div.message_wrapper div.seen div.seen_bubble span {
    position: absolute;
    visibility: hidden;
    right: -10px;
    top: -14px;
    font-size: 14px;
    background: var(--shade1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    ttransform: translate(-100%);
    padding: 2px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}
body.desktop div#chat_view div#chat div.message_group div.message_wrapper div.seen div.seen_bubble:hover span {
    visibility: visible;
}

/* Picture */
div#chat_view div#chat div.message_group div.message div.pic_message img {
    height: 100px;
    width: 100px;
    object-fit: cover;
    margin: 4px;
    cursor: zoom-in;
    border-radius: 5px;
}
div#chat_view div#chat div.message_group div.message div.pic_message .spinner {
    margin: 32px;
}
div#chat_view div#chat div.message_group div.message div.pic_reply img {
    height: 80px;
    margin: 4px;
    border-radius: 5px;
    opacity: 0.6;
}

/* markdown support */
div#chat_view div#chat div.message table {
    margin-top: 10px;
}

div#chat_view div#chat div.message ul {
    margin: 4px 0;
}

div#chat_view div#chat div.message pre {
    background: var(--shade2);
    padding: 4px 8px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid var(--shade3);
    font-size: 0.8em;
    line-height: 18px;
    width: fit-content;
    max-width: calc(100% - 16px);
    overflow-x: auto;
}
div#chat_view div#chat div.message p {
    overflow-x: auto;
}

div#chat_view div#chat div.message p code {
    background: var(--shade2);
    padding: 2px 4px;
    margin: 0 2px;
    border-radius: 4px;
    border: 1px solid var(--shade3);
    line-height: 18px;
    width: fit-content;
}

div#chat_view div#chat div.message h1 {
    text-align: left;
}

div#chat_view div#chat div.message a {
    color: var(--blue);
}

/*
 * Upload progress
 */
div#chat_view div.progress svg:not(.cancel) {
    padding: 20px;
    background: var(--shade2);
    border-radius: 5px;
}
div#chat_view div.progress {
    position: relative;
    cursor: pointer;
}
div#chat_view div.progress svg.cancel {
    position: absolute;
    left: 32px;
    top: 32px;
    stroke: var(--shade4);
    fill: var(--shade4);
    width: 40px;
    height: 40px;
}
div#chat_view div.progress:hover svg.cancel {
    stroke: #000;
    fill: #000;
}

/*
 * Reply indicator
 */
div#chat_view div.message_wrapper div.reply_link {
    font-style: italic;
    border-top: 1px solid var(--shade4);
    border-bottom:  1px solid var(--shade4);
    border: 0;
    font-size: 14px;
    padding: 4px 0px;
    padding-left: 8px;
    color: var(--shade5);
    cursor: pointer;
    width: fit-content;
    position: relative;
}
div#chat_view div.message_wrapper div.message div.reply_bar {
    height: calc(100% - 0px);
    width: 3px;
    background: var(--shade3);
    position: absolute;
    left: -3px;
    top: 7px;
    height: calc(100% - 13px);
}

/* search */
div#chat_view.search div#chat div.message_group {
    border-radius: 5px;
    background: var(--shade1);
    cursor: pointer;
    margin-top: 6px;
}
body.desktop div#chat_view.search div#chat div.message_group:hover
body.mobile div#chat_view.search div#chat div.message_group:active {
    background: var(--shade2);
}
div#chat_view.search div#chat div.message_group div.message {
    border-bottom: 0;
    pointer-events: none;
}

/* don't show hearts or seen bubbles when searching */
div#chat_view.search div#chat div.message_group div.seen,
div#chat_view.search div#chat div.message_group div.message div.heart {
    display: none;
}
div#chat_view.search div#chat div.message_group div.message div.timestamp {
    top: -30px;
    right: -10px;
    display: block;
    background: transparent;
    transform: none;
}
div#chat_view div#chat mark {
    background: transparent;
}
div#chat_view.search div#chat mark {
    background: var(--highlight_text);
}
div#chat_view.search div#input_menu,
div#chat_view.search div#chat_input_wrapper {
    display: none;
}

/*
 * Mobile modifications
 */
body.mobile div#chat_view div#chat div.message_group {
    margin-right: 0;
    margin-left: 0;
    width: calc(100% - 12px);
    padding: 10px 0px 10px 10px;
    word-wrap: break-word;
}
body.mobile div#chat_view div#chat div.message_group div.message p {
    pointer-events: none;
}
body.mobile div#chat_view div#chat div.message_group div.message.selected p {
    pointer-events: auto;
}
body.mobile div#chat_view div#chat div.message_group div.message {
    padding: 3px 4px;
    width: calc(100% - 68px);
    margin-left: 50px;
}
body.mobile div#chat_view div#chat div.message_group div.name{
    margin-left: 54px;
}
body.mobile div#chat_view div#chat div.message_group div.message_wrapper div.seen {
    padding: 0px 17px;
}

/* share card */
div#chat_view div#chat div.message_notice {
    margin-left: 60px;
    padding: 0 4px;
}
div#chat_view div#chat div.message_notice span {
    font-family: var(--detail_font);
    font-size: 12px;
    color: var(--shade5);
}
div#chat_view div#chat div.message_notice span.share {
    cursor: pointer;
}

div#chat_view {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    position: relative;
}

body.mobile div#chat_view {
    font-size: 1.0625em;
}

/* chat history */
div#chat_view div#chat {
    display: flex;
    flex-flow: column-reverse;
    flex-grow : 1;
    width: calc(100% - 12px);
    /* leave 12px on the right for the scrollbar */
    padding: 10px 0 0 12px;
    overflow-y: scroll;
    will-change: scroll-position;
    font-size: var(--chat_text_size);
}

body.mobile div#chat_view div#chat {
    width: 100%;
    padding: 10px 0 0;
}

div#chat_view div#chat_loading {
    display: none;
}

/* Chat input */
div#chat_view div#chat_input_wrapper {
    position: relative;
    width: calc(100% - 64px);
    height: fit-content;
    margin-left: 60px;
    margin-top: 10px;
}
body.mobile div#chat_view div#chat_input_wrapper {
    width: calc(100% - 120px);
}
div#chat_view div#chat_input_wrapper.reply {
    background: var(--shade2);
    border-radius: 20px;
}


div#chat_view div#chat_input_wrapper.reply div#chat_input {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
div#chat_view div#chat_input {
    box-sizing: border-box;
    width: 100%;
    white-space: pre-wrap;
    display: inline-block;
    background: var(--shade1);
    border: 1px solid var(--shade1);
    border-radius: 20px;
    outline: inherit;
    padding: 10px 50px 10px 20px;
    margin-left: 1px;
    max-height: 50dvh;
    overflow-y: auto;
}
body.mobile div#chat_view div#chat_input {
    padding: 10px 20px;
}

div#chat_view div#chat_input_wrapper div#emoji {
    position: absolute;
    right: 10px;
    bottom: 6px;
    cursor: pointer;
}
div#chat_view div#chat_input_wrapper div#emoji img {
    width: 30px;
    height: 30px;
    opacity: 0.1;
}
div#chat_view div#chat_input_wrapper div#emoji img:hover {
    opacity: 0.2;
}

em-emoji-picker {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
}

/* message divider */
div#chat_view div#chat div.divider {
    margin: 12px 8px;
    width: calc(100% - 16px);
    height: 8px;
    text-align: center;
}
div#chat_view div#chat div.divider.timestamp {
    border-bottom: 1px solid var(--shade4);
}
div#chat_view div#chat div.divider span {
    font-family: var(--detail_font);
    font-size: 0.75em;
    color: var(--shade4);
    background: var(--background);
    padding: 0 16px;
}

div#chat_view div#chat div.divider.typing {
    margin-top: 0px;
    padding-bottom: 4px;
}

/* return to bottom */
div#chat_view div#return_to_bottom {
    width: calc(100% - 42px);
    text-align: center;
    display: none;
    z-index: 100;
    position: relative;
}
body.mobile div#chat_view div#return_to_bottom {
    width: calc(100% - 55px);
}
div#chat_view div#return_to_bottom svg {
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: 10px;
    background: var(--shade2);
    fill: var(--shade4);
    padding: 10px;
    border-radius: 50%;
    overflow: visible;
    border: 3px solid var(--background);
    cursor: pointer;
}
body.mobile div#chat_view div#return_to_bottom svg {
    width: 20;
    height: 20;
    padding: 15;
}
div#chat_view div#return_to_bottom.unread svg {
    border: 2px solid var(--shade5);
}
body.desktop div#chat_view div#return_to_bottom:hover svg,
body.mobile div#chat_view div#return_to_bottom:active svg {
    fill: var(--shade5);
}
body.mobile div#chat_view div#return_to_bottom:active svg {
    background: var(--shade3);
}

/*
 * reply box
 */
div#chat_view div#reply_box {
    display: none;
    padding: 10px 4px 10px 20px;
    position: relative;
    color: var(--shade6);
    font-size: 0.875em;
}
div#chat_view div#reply_box svg.cancel {
    width: 22px;
    height: 22px;
    padding: 2px 3px;
    position: absolute;
    right: 12px;
    top: 8px;
    cursor: pointer;
    stroke: var(--shade4);
}
div#chat_view div#reply_box svg.cancel:hover {
    stroke: var(--shade6);
}

div#chat_view div#reply_box p {
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 40px;
}

/* searching */
/* align the search results to the top */
div#chat_view.search div#chat div:first-of-type{
    margin-bottom: auto ! important;
}

/* empty search notice */
div#chat_view.search div#empty_search {
    text-align: center;
}

/*
 * Mobile Only
 */
body.mobile div#chat_view div#send {
    position: absolute;
    right: -50px;
    bottom: 0px;
    padding: 11px;
    border-radius: 50%;
    background: var(--shade2);
    cursor: pointer;
}
body.mobile div#chat_view div#send svg {
    width: 21px;
    height: 21px;
    fill: var(--shade4);
}
body.mobile div#chat_view div#send:active {
    background: var(--shade3);
}
body.mobile div#chat_view div#send:active svg {
    fill: var(--shade5);
}
div.modal img.pic_popup {
    max-width: calc(90dvw - 100px);
    max-height: calc(100dvh - 200px);
    object-fit: contain;
}

div.modal div.pic_popup div svg {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    background: white;
    fill: var(--shade4);
    padding: 10px;
    border-radius: 50%;
    overflow: visible;
    cursor: pointer;
}
div.modal div.pic_popup div svg.left {
    left: -50px;
    box-shadow: 10px 0 25px 0 rgba(0, 0, 0, 0.5);
}
div.modal div.pic_popup div svg.right {
    right: -50px;
    box-shadow: -10px 0 25px 0 rgba(0, 0, 0, 0.5);
}
div.modal div.pic_popup div:hover svg {
    fill: var(--shade5);
}


/* mobile */
body.mobile div.modal img.pic_popup {
    max-height: 100%;
    max-width: 100%;
}
body.mobile div.pic_popup {
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform;
}
body.mobile div.pic_popup img {
    max-height: 100vh;
    max-width: 100vw;
}

body.mobile div.pic_popup img.pic_popup_prev {
    position: absolute;
    right: calc(100vw + 4px);
}

body.mobile div.pic_popup img.pic_popup_next {
    position: absolute;
    left: calc(100vw + 4px);
}

div#feed_view div#feed div.post_wrapper {
    width: calc(100% - 60px);
    position: relative;
    padding: 10px;
    margin: 14px 20px 0;
    border-radius: 5px;
    background: var(--shade1);
}
div#feed_view div#feed div.post_wrapper div.name {
    margin-top: 6px;
    margin-left: 50px;
    font-size: 1.25em;
    font-weight: bold;
}

div#feed_view div#feed div.post_wrapper div.post {
    margin-top: 20px;
    padding: 1px 4px;
    position: relative;
    min-height: 21px;
}

div#feed_view.search div#feed div.post_wrapper:first-of-type{
    margin-bottom: auto ! important;
}


/*
 * Post timestamp
 */
div#feed_view div#feed div.post_wrapper div.timestamp {
    font-family: var(--detail_font);
    font-size: 12px;
    color: var(--text_color_light);
    float: right;
//    display: inline-block;
//    text-align: center;
//    position: absolute;
    right: 0;
    top: 0px;
}
div.comments div#chat_view div#chat {
    width: calc(100% - 40px);
    padding: 10px;
    padding-left: 0;
    overflow-y: auto;
    height: unset;
    flex-grow: unset;
    margin: 10px;
    border-radius: 10px;
    font-size: 16px;
    background: var(--background);
    background: var(--shade1);
    will-change: scroll-position;
}
div.comments div#chat_view div#chat:empty {
    display: none;
}


div.comments div#input_menu {
    display: none;
}
div.comments div#chat_view div#chat_input_wrapper {
    position: relative;
    width: calc(100% - 14px);
    height: fit-content;
    margin-left: 10px;
    margin-top: 10px;
}
div.comments div#chat_view div#chat_input {
    background: var(--background);
    background: var(--shade1);
    border: 1px solid var(--shade1);
    width: calc(100% - 72px);
}
div.comments div#chat_view div#chat_input::before {
    content: 'Write a comment...';
    color: var(--text_color_light);
}
div.comments div#chat_view div#chat div.divider {
    display: none;
}
body.mobile div#feed_view div#feed {
    width: 100%;
    padding: 10px 0 54px 0;
    font-size: 17px;
}
/* post input */
div#create_post div#post_input {
    width: 400px;
    max-width: 90vw;
    white-space: pre-wrap;
    display: inline-block;
    background: var(--shade1);
    border: 1px solid var(--shade1);
    border-radius: 5px;
    outline: inherit;
    padding: 10px 20px;
    text-align: left;
}

div#feed_view {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    position: relative;
}

/* feed history */
div#feed_view div#feed {
    display: flex;
    flex-flow: column;
    flex-grow : 1;
    width: calc(100% - 12px);
    /* leave 12px on the right for the scrollbar */
    padding: 10px 0px 54px 12px;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    font-size: 16px;
    will-change: scroll-position;
}

/* return to top */
div#feed_view div#return_to_top {
    width: calc(100% - 36px);
    text-align: center;
    display: none;
    z-index: 100;
    position: relative;
}
div#feed_view div#return_to_top svg {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 10px;
    background: var(--shade2);
    fill: var(--shade4);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}
div#feed_view div#return_to_top.unread svg {
    border: 2px solid var(--shade5);
}
body.desktop div#feed_view div#return_to_top:hover svg,
body.mobile div#feed_view div#return_to_top:active svg {
    fill: var(--shade5);
}
body.mobile div#feed_view div#return_to_top:active svg {
    background: var(--shade3);
}

/* message divider */
div#feed_view div#feed div.divider {
    margin: 12px 8px;
    width: calc(100% - 16px);
    height: 8px;
    text-align: center;
}
div#feed_view div#feed div.divider.timestamp {
    border-bottom: 1px solid var(--shade4);
}
div#feed_view div#feed div.divider span {
    font-family: var(--detail_font);
    font-size: 0.75em;
    color: var(--shade4);
    background: var(--background);
    padding: 0 16px;
}

/* padding on in put button */
div#feed_view div#input_menu_btn_wrapper {
    background: var(--background);
}
body.desktop div.modal div#edit_space,
body.desktop div.modal div#space_settings {
    width: 600px;
    max-width: 100vw;
}

/* mobile */
body.mobile div#modal div#space_settings,
body.mobile div#modal div#edit_space {
    width: 100%;
}

div#sharing_view {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    position: relative;
}

/* sharing table */
div#sharing_view div#sharing {
    display: flex;
    flex-flow: column;
    flex-grow : 1;
    width: calc(100% - 28px);
    margin-top: 10px;
    padding: 0px 8px 54px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    visibility: hidden;
}
body.mobile div#sharing_view div#sharing {
    width: 100%;
    padding: 0px 0px 54px 0px;
    overflow-y: auto;
}
div#sharing_view div#sharing.disabled {
    pointer-events: none;
}

div#sharing_view svg.edit,
div#sharing_view svg.delete {
    width: 16px;
    height: 16px;
    padding: 2px;
    display: inline-block;
    fill: var(--shade4);
}
div#sharing_view svg:hover {
    fill: var(--shade5);
}

/* cell/header padding */
div#sharing_view table#shared_list th > span.dt-column-title:not(:empty),
div#sharing_view table#shared_list td:not(:empty)  {
    padding: 8px 20px;
    white-space: nowrap;
}

body.mobile div#sharing_view table#shared_list td {
    padding: 10px 20px 10px 24px;
}

/* Use ellipsis if labels are too long */
div#sharing_view table#shared_list td.label {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 50vw;
}

div#sharing_view table#shared_list th.min_width,
div#sharing_view table#shared_list td.min_width {
    width: var(--zerowidth);
}
div#sharing_view table#shared_list th.icon,
div#sharing_view table#shared_list th.icon > span.dt-column-title,
div#sharing_view table#shared_list td.icon {
    padding-left: 0 ! important;
    padding-right: 0 ! important;
}

/* dataTables modes */
div#sharing_view table#shared_list td {
    cursor: pointer;
}

div#sharing_view table#shared_list.row-border>tbody>tr>*,
div#sharing_view table#shared_list.display>tbody>tr>* {
    border-top: 1px solid var(--shade3);
    border-bottom: 1px solid var(--shade3);
}

/* Sharing Empty */
div#sharing_view div#sharing_empty {
    visibility: hidden;
    width: 100%;
    font-size: 20px;
    color: var(--text_color_light);
    text-align: center;
    position: absolute;
    margin-top: 160px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*
 * Upload progress
 */
div#sharing_view div.progress svg {
    width: 27px;
    height: 27px;
}
div#sharing_view tr.progress div.progress {
    position: relative;
    cursor: pointer;
}
div#sharing_view tr.progress div.progress svg.cancel {
    position: absolute;
    right: 5px;
    top: 5px;
    stroke: var(--shade4);
    fill: var(--shade4);
    width: 17px;
    height: 17px;
}
body.desktop div#sharing_view tr.progress div.progress:hover svg.cancel {
    stroke: #000;
    fill: #000;
}
/* faded text color for progress row */
div#sharing_view table#shared_list tr.progress {
    color: var(--shade4);
}
/* remove hover indicators from progress row */
div#sharing_view table#shared_list tr.progress td {
    cursor: default;
}
body.desktop div#sharing_view table#shared_list tr.progress:hover {
    background-color: transparent;
}

/*
 * Share icon
 */
div#sharing_view table#shared_list div.icon {
    position: relative;
    left: 6px;
    top: 1px;
    padding-left: 6px;
}
div#sharing_view table#shared_list div.icon svg {
    width: 22px;
    height: 22px;
}

/*
 * input menu modifications
 */
div#sharing_view div#input_menu_btn_wrapper {
    background: var(--background);
}

/* spinner */
div#sharing_view div.spinner {
    margin-top: 20vh;
}

body.desktop div#sharing_view *::-webkit-scrollbar-track {
    margin-top: 40px;
    margin-bottom: 50px;
}
div#space_view {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    position: relative;
}

body.mobile div#space_view {
    margin-bottom: 8px;
}

div#space_view div#space_content {
    position: absolute;
    height: 100%;
    width: 100%;
}
/*
 * Chat Menu
 */


div#space_list {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    position: relative;
}
body.desktop div#space_list {
    --scrollbar_border: var(--shade1);
}

/* sidebar styling for desktop version */
body.desktop div#space_list div#header div#header_title {
    padding-top: 6px;
    color: var(--shade5);
}
body.desktop div#space_list div#header {
    --bar_color: var(--shade2);
    --label_color: var(--shade3);
    --selected_color: var(--shade3);
}
body.desktop div#space_list div#header div#search_btn svg {
    fill: var(--shade1);
}

div#space_list div#results_wrapper {
    flex-grow: 1;
    position: relative;
}
div#space_list div#results {
    overflow-y: auto;
    position: absolute;
    height: 100%;
    width: 100%;
    will-change: scroll-position;
    padding-bottom: 56px;
    box-sizing: border-box;
}
/* add chat button */
div#space_list div#create_space_btn svg {
    position: absolute;
    top: 22px;
    right: 16px;
    width: 20px;
    fill: var(--shade4);
    cursor: pointer;
}
body.mobile div#space_list div#create_space_btn svg {
    padding: 8px;
    top: calc(var(--button_offset_top) + 5px);
    right: var(--button_offset_side);
    width: calc(var(--button_size) - 8px);
}
div#space_list div#create_space_btn:hover svg {
    fill: var(--shade5);
}
div#space_list input {
    color: var(--text_color_light);
    border: 1px solid #aaa;
    border-radius: 10px;
    width: calc(100% - 20px);
    padding: 4px 10px;
    margin: 0px 10px 5px;
}
/* mobile */
/* mobile spacing */
body.mobile div#space_list input {
    margin: 0px 10px 10px;
}

div#content div.space_label {
    font-size: 20px;
    cursor: pointer;
    padding: 10px 20px;
    margin: 4px;
    border-radius: 5px;
    background: var(--shade1);
}

body.desktop div#space_list *::-webkit-scrollbar-track {
    margin-bottom: 50px;
}

/* plus menu */
div#space_list div#plus_menu {
    --offset_bottom: 0px;
}

div#members_view div#results {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;
    text-align: center;
}
div#members_view div.badge {
    margin: 10px;
}

/* manual entry input */
div#members_view div#bottom_menu {
    display: flex;
    width: fit-content;
    position: absolute;
    bottom: 0;
    background: var(--background);
    border-top-right-radius: 50%;
}

div#members_view div#bottom_menu div#plus_menu div#plus_menu_btn_wrapper {
    position: static;
}

div#members_view div#bottom_menu div#plus_menu:first-of-type div#plus_menu_btn_wrapper {
    padding: 8px 0 0 10px;
}
div#members_view div#bottom_menu div#plus_menu:last-of-type div#plus_menu_btn_wrapper {
    padding: 8px 8px 0 8px;
}
body.mobile div#members_view div#bottom_menu div#plus_menu_btn_wrapper {
    padding: 0 0px 8px 10px;
}