header, .side-popup, .overlay {
    border-radius: 0;
}

body {
    background: var(--gray-97);
}

#app {
    border-radius: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gray-95);
    background-size: cover !important;
    background-position: center center !important;
}

/* .main-layout {
    display: grid;
    grid-template-rows: var(--header-height) calc(100vh - var(--header-height));
} */

header {
    position: relative; /* So it overlaps the menu */
    width: 100vw;
    height: var(--header-height);
    color: var(--theme-color);
    padding: 0.7rem var(--side-margin);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--gray-97);
    border-top: var(--top-highlight-height) solid;
    
    
    /* --white-overlay-opacity: 0;
    --bg-img: url('https://images.unsplash.com/photo-1486639107311-064febaff1c5?ixlib=rb-0.3.5&s=f669fca4f87a6d8826d21c895cc565ce&auto=format&fit=crop&w=1352&q=80');
    --bg-img: url('https://images.unsplash.com/photo-1496307653780-42ee777d4833?ixlib=rb-0.3.5&s=334d4949c37cedd717f2541a0fe6b7e8&auto=format&fit=crop&w=1350&q=80');
    --bg-img: url('https://images.unsplash.com/photo-1463130456064-77fda7f96d6b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=79bdbfab5955b53c76579a14e61c62aa&auto=format&fit=crop&w=1350&q=80');
    background: linear-gradient(rgba(255,255,255,var(--white-overlay-opacity)), rgba(255,255,255,var(--white-overlay-opacity))), var(--bg-img);
    background-size: cover;
    background-position: center center; */
}

#app:not(.custom-bg) header, #app:not(.custom-bg) .board-column {
    box-shadow: 0 0 0 1px var(--gray-90);
}

:root.electron {
    --top-highlight-height: 0px;
    --header-height: 5rem;
}

.electron header {
    padding-top: 2rem;
    -webkit-app-region: drag;
}

.electron header button, .electron header a.btn {
    -webkit-app-region: no-drag;
}

header h1,
.overlay#loading h1,
.overlay#loading h3,
.overlay#login h2 {
    margin: 0;
    color: var(--theme-color);
    /* font-family: "Myriad Pro"; */
    font-family: 'Nexa Bold', var(--sans-serif);
    /* text-shadow: 0 0 0.3em white; */
}

header h1 .beta-sign {
    font-family: var(--sans-serif);
    font-weight: 300;
    font-variant: all-small-caps;
    font-size: .8em;
    opacity: .5;
}

header * {
    display: inline;
}

header .logo {
    font-size: .9em;
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
}

header .logo img {
    height: 1.5rem;
    display: none;
}

.profile-img {
    padding: 0;
    height: 4.8rem;
    vertical-align: bottom;
    box-shadow: 0 3px 19px 0 hsla(219, 34%, 16%, 0.2);
    border-radius: 10px;
}

header .right {
    display: block;
}

header button,
header a.btn,
header nav > * {
    padding: .6em;
    margin: 0 1px;
    box-shadow: none;
    background: transparent;
    position: relative;
    transition-duration: .15s;
}

header button,
header a.btn {
    color: var(--theme-color);
}

header button:hover,
header a.btn:hover {
    text-shadow: 0 0 2em;
}

button.highlight,
a.btn.highlight {
    color: var(--theme-color);
    background: var(--theme-color-lighter) !important;
}

button.highlight:hover,
a.btn.highlight:hover {
    color: var(--theme-color) !important;
    text-shadow: none;
    box-shadow: 0 0 2em -0.75em !important;
}

header .sync.syncing .fa {
    -webkit-animation: spin 0.5s infinite ease-in-out;
            animation: spin 0.5s infinite ease-in-out;
    /* text-shadow: 0 0 2em; */
}

header .sync *:last-child:not(.fa) {
    margin-left: .25em;
}

.sync-wrapper.full-sync {
    background: var(--theme-color-even-lighter);
    padding-left: 0;
    border-radius: 2rem;
}

.sync-wrapper:not(.full-sync) {
    padding: 0;
}

header .compose-btn {
    background: var(--theme-color);
    color: white;
    border-radius: 3em;
    padding: 0.6em 0.7em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: .3em;
    transition: var(--global-transition);
}

header .compose-btn i {
    text-shadow: none !important;
}

header .compose-btn.has-text i {
    margin-right: 0.4em;
}

header .compose-btn:last-child {
    margin-right: 0;
}

header .compose-btn.edge {
    margin-left: 0.5em;
    margin-right: calc(var(--side-margin) * -1) !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

header .compose-btn:hover {
    color: white;
    background: var(--theme-color);
    box-shadow: 0 0.2em 1em -0.1em var(--theme-color) !important;
}

header nav > * * {
    transition: unset;
}

header button:last-child,
header a.btn:last-child {
    margin-right: 0;
}

header .offline-warning {
    padding: 0.2em 1em;
    /* background: var(--important-color-lighter);
    color: #eb5d7c !important; */
    margin-right: 0.7rem;
    height: 100%;
    display: flex;
    align-items: center;

    font-weight: 500;
    color: var(--theme-color);
    background: var(--theme-color-lighter);
}

header .offline-warning .fa {
    margin-right: 0.5em;
}

main {
    padding: 0;
    padding-top: var(--main-padding-top);
    padding-bottom: var(--main-padding-bottom);
    height: calc(var(--viewport-height) - var(--header-height));
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(100vh - var(--header-height));
}

#board {
    display: flex;
    padding: 0 var(--side-margin);
    padding-right: 0 !important;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: var(--max-column-height);
    position: relative;
    --board-column-width: calc((100vw - (4rem * var(--minimized-columns)) - (var(--maximized-columns) + var(--minimized-columns)) * (var(--side-margin))) / var(--maximized-columns) - (var(--side-margin) / var(--maximized-columns)));
}

.board-column {
    overflow: hidden;
    min-height: calc(var(--board-column-header-height) + 5.2em + 10px);
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    max-height: var(--max-column-height);
    width: var(--board-column-width);
    min-width: 11.25rem;
    background: white;
    /* border-bottom: 10px solid var(--theme-color); */
    position: relative;
    /* transition: var(--global-transition), width 0s; */
    margin-right: var(--side-margin);
}

.board-column-header, .side-popup-header {
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    border-radius: 3px 3px 0 0;
    margin: 0;
    font-size: 1em;
    color: var(--theme-color);
    height: var(--board-column-header-height);
    line-height: var(--board-column-header-height);
    transition-duration: 0s;
}

.board-column-header, .side-popup-header.other-column-viewer {
    border-bottom: 1px solid var(--background-color);
}

.side-popup .board-column-header .back, .side-popup .side-popup-header .back {
    position: absolute;
    top: 1.5rem;
    right: calc(var(--menu-width) - 1em - 20px );
    cursor: pointer;
}

.board-column-header .board-column-count, .side-popup .board-column-count {
    margin-left: .25em;
    font-weight: normal;
    opacity: .5;
}

.board-column-header .board-column-action-button {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 0;
    right: 1rem;
    line-height: inherit;
    box-shadow: none;
    color: var(--theme-color);
    background: transparent;
    padding: 0;
}

.board-column-header .board-column-add-note-button {
    left: 1rem;
    right: unset !important;
    font-size: 0.8em;
}

.side-popup-header {
    color: var(--gray-30);
}

.board-column.minimized {
    width: var(--board-column-header-height);
    min-width: var(--board-column-header-height);
    max-width: var(--board-column-header-height);
    height: 100%;
    cursor: pointer;
}

.board-column.minimized .board-column-content {
    width: 0;
    opacity: 0;
}

.board-column.minimized .board-column-content::-webkit-scrollbar {
    width: 0;
}

.board-column.minimized .board-column-header {
    transform: rotate(90deg);
    transform-origin: left bottom;
    position: absolute;
    top: calc(var(--board-column-header-height) * -1);
    left: 0;
    right: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    text-align: left;
    border: none;
}

.board-column.minimized .board-column-action-button {
    display: none;
}

.board-column.board-column.minimized.hover-column {
    background: var(--theme-color-lighter);
}

.board-column-load-more {
    background: var(--theme-color-even-lighter);
    box-shadow: none;
    width: 100%;
    padding: 1em 0;
    border-radius: 0;
}

.board-column-load-more:hover {
    background: var(--theme-color-lighter);
    color: var(--theme-color);
}

.side-popup .side-popup-body:not(.menu) {
    padding: 0 20px;
    padding-bottom: 20px;
    line-height: 1.5em;
}

.side-popup:not(.signature):not(.background) .side-popup-body:not(.menu) button, .side-popup .side-popup-body:not(.menu) a.btn {
    box-shadow: none;
    margin: 10px 0;
    padding: 1em;
    width: 100%;
}

.side-popup.signature .ck.ck-editor {
    min-height: 12em;
}

.side-popup.signature .ck.ck-toolbar__separator {
    display: none;
}

.side-popup form * {
    height: unset;
    line-height: unset;
}

.side-popup form button, .side-popup.signature button:not(.close-btn) {
    margin-top: 0.5em;
    padding: 0.5em 1em;
    box-shadow: none;
    background: var(--theme-color-lighter);
    width: 100%;
}

.side-popup form input {
    background: white;
    width: 100%;
    padding: 0.5em;
    padding-right: 0;
}

.side-popup.shortcuts span.shortcut {
    display: block;
    font-weight: bold;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: 0 0.5em;
    background: var(--background-color-more-slightly-darker);
    color: var(--blackish-color);
    margin-bottom: 0.3em;
}

.new-badge {
    display: inline;
    color: var(--theme-color-lighter);
    background: var(--theme-color);
    font-size: .8rem;
    text-transform: uppercase;
    padding: .2rem .4rem;
    /* margin: 0 0.5rem; */
    margin-left: auto;
    margin-right: 0;
    transition: inherit;
}

button:hover .new-badge, a.btn:hover .new-badge {
    background: var(--theme-color-lighter);
    color: var(--theme-color);
}

.new-badge.red {
    color: var(--important-color-lighter);
    background: var(--important-color);
}

button:hover .new-badge.red, a.btn:hover .new-badge.red {
    background: white;
    color: var(--important-color);
}

.category-switcher {
    height: 100%;
}

.category-switcher-top {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1em;
}

.category-switcher ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: white;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 4px 14px -13px var(--blackish-color-lighter);
    display: none;
}

.category-switcher.open ul {
    display: flex;
}

.category-switcher ul li {
    padding: 0.75em;
    cursor: pointer;
}

.category-switcher ul li:hover {
    background: var(--background-color);
}

.board-column-content {
    border-radius: 0;
    padding: 0;
    /* padding-bottom: 10px; */
    /* padding-right: calc(10px - var(--board-column-content-scrollbar-width)); */
    overflow-y: scroll;
    overflow-x: hidden;
    overflow-wrap: break-word;
    position: relative;
    min-height: calc(5.2em + 10px);
    max-height: calc(100vh - var(--header-height) - var(--main-padding-top) - var(--main-padding-bottom) - var(--board-column-header-height));
}

.other-column-viewer .board-column-content {
    max-height: calc(var(--viewport-height) - var(--header-height) - var(--board-column-header-height));
}

.board-item, .incoming-card-spacer, .board-column-empty-spacer, .note-to-self-composer {
    cursor: pointer;
    background: var(--background-color);
    /* box-shadow: inset 0 0 3.5em -2em var(--blackish-color); */
}

.board-item {
    transition: none;
    border-bottom: 1px solid var(--background-color);
    border-radius: 0;
}

.board-item-content, .incoming-card-spacer {
    font-size: 14px;
    padding: 1em;
    cursor: pointer;
    --board-item-content-bg-color: white;
    background: var(--board-item-content-bg-color);
    /* border-left: 5px solid transparent; */ /* For email bars */
    line-height: 1.4em;
    display: flex;
    min-height: 5rem;
    border-radius: 0;
}

.board-item-content {
    display: flex;
    flex-direction: column;
}

.board-item.has-labels .board-item-content {
    grid-template-rows: -webkit-max-content -webkit-max-content -webkit-max-content 1fr;
    grid-template-rows: max-content max-content max-content 1fr;
}

.board-item:hover .board-item-content {
    background: hsl(0, 0%, 97%);
}

.board-item:active .board-item-content {
    background: hsl(0, 0%, 95%);
}

.board-item.pinned {
    border-color: hsl(57, 75%, 75%);
}

.board-item-dragging {
    height: calc(var(--drag-target-height) + 1px);
}

.board-item-dragging .board-item-content {
    border-radius: 5px;
    position: fixed;
    top: 0;
    left: 0;
    transition: none;
    /* pointer-events: all; */
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
    height: var(--drag-target-height);
    width: var(--drag-target-width);
    z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}

.board-item.selected .board-item-content {
    background: var(--theme-color-lighter) !important;
    color: var(--theme-color);
}

.board-item.selected .board-item-sender {
    color: var(--theme-color);
}

/*
.board-item.selected.most-recently-selected {
    box-shadow: 0 0 0 1px var(--theme-color);
}
*/

.email-checkbox {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: white;
    border-radius: 50%;
    /* border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 3px; */
    /* box-shadow: 0 0 6px -2px var(--background-color-more-slightly-darker); */
    pointer-events: initial !important;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background-color-slightly-darker);
    cursor: inherit;
    font-weight: 900 !important;
    font-size: 7px;
    margin: -10px 0 !important;
    margin-left: 5px !important;
    grid-column: 2/2;
    grid-row: 1/1;
    box-shadow: 0 0 0 1px var(--background-color-slightly-darker);
    display: none;
    padding-top: 2px;
}

.board-item.selected .email-checkbox {
    background: var(--theme-color);
}

.board-item:hover .email-checkbox,
.board-item.selected .email-checkbox {
    display: flex !important;
}

.board-item:hover:not(.selected) .board-item-first-line > *:not(.board-item-sender):not(.contact-img) {
    display: none;
}

.board-item:hover:not(.selected) .board-item-first-line {
    color: transparent !important;
}


/* Hack from https://stackoverflow.com/a/8539107 */
.board-column-content > .board-item {
    margin-top: 0;
}
/* .board-column-content > .board-item ~ .board-item {
    margin-top: 10px;
} */
/*************************************************/

.incoming-card-spacer {
    background: var(--theme-color-lighter);
    padding: 0;
    transition-duration: 0.1s;
    position: relative; /* for z-index */
    z-index: 1;
    transition: none;
    min-height: 0;
    height: 0;
    margin: 0;
    border-radius: 0;
}

#board.board-dragging .incoming-card-spacer {
    transition: height var(--global-transition-duration) var(--global-transition-timing-function);
}

.board-column.hover-column .incoming-card-spacer {
    height: var(--drag-target-height);
    transition: height var(--global-transition-duration) var(--global-transition-timing-function);
}

.board-column-empty-spacer {
    height: 5.2em;
    overflow: hidden;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: var(--background-color-more-slightly-darker);
    background: transparent;
    cursor: default;
    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* right: calc(10px - var(--board-column-content-scrollbar-width)); */
    z-index: 0;
}

.note-to-self-composer {
    cursor: auto;
    position: relative;
    z-index: 1;
    border-radius: 0;
}

.note-to-self-composer input {
    font-size: 0.9em;
    width: calc(100% - 2rem);
    border: none;
    margin: 1rem;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
    border-radius: 0;
    border-bottom: 1px solid var(--background-color-slightly-darker);
    font-weight: 600;
}

.note-to-self-composer textarea {
    font-size: 0.8em;
    display: block;
    min-height: 4.8rem;
    max-height: 10rem;
    min-width: 100%;
    max-width: 100%;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 1.75rem;
    transition-duration: 0s;
    resize: none;
}

.note-to-self-composer input::-webkit-input-placeholder, .note-to-self-composer textarea::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.4;
}

.note-to-self-composer input::-moz-placeholder, .note-to-self-composer textarea::-moz-placeholder {
    color: inherit;
    opacity: 0.4;
}

.note-to-self-composer input:-ms-input-placeholder, .note-to-self-composer textarea:-ms-input-placeholder {
    color: inherit;
    opacity: 0.4;
}

.note-to-self-composer input::-ms-input-placeholder, .note-to-self-composer textarea::-ms-input-placeholder {
    color: inherit;
    opacity: 0.4;
}

.note-to-self-composer input::placeholder, .note-to-self-composer textarea::placeholder {
    color: inherit;
    opacity: 0.4;
}

.note-to-self-composer .buttons {
    padding: 0.5rem;
    display: flex;
}

.note-to-self-composer .buttons button {
    box-shadow: none;
    background: var(--background-color-slightly-darker);
    color: var(--blackish-color);
    font-weight: 500;
    font-size: 0.8em;
    padding: 0.3em /*1*/0.7em;
    border-radius: 5px;
    width: 100%;
    transition: var(--global-transition);
    transition-property: opacity;
}

.note-to-self-composer .buttons button.add {
    background: var(--theme-color);
    color: white;
    margin-right: 0.25rem;
    flex-grow: 1;
}

.note-to-self-composer .buttons button.discard {
    background: transparent;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.note-to-self-composer .buttons button[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* .board-item:first-child {
    margin-top: 10px;
} */

.board-item:last-child {
    margin-bottom: 10px;
    border-bottom: none;
}

.board-item *,
.board-item *:not(.fa):before,
.board-item *:not(.fa):after {
    pointer-events: none;
    /* So that click event target shows up as .board-item itself */
    margin: 0;
    font-weight: normal;
}

.board-item-content *,
.board-item-content:before,
.board-item-content:after {
    transition: none;
    line-height: 1.2em;
    --line-clamp-line-height: 1.2em;
    --line-clamp-fade-bg-color: var(--board-item-content-bg-color);
}

.board-item-content > *:not(.email-checkbox) {
    pointer-events: none;
}

.board-item-first-line {
    order: -1;
    display: flex;
    align-items: center;
    font-size: 0.9em !important;
    color: hsla(219, 34%, 16%, 0.25);
}

.board-item-first-line.bad-time-since-sent {
    color: hsla(347, 78%, 64%, 0.75); /* var(--important-color) */
}

.board-item-first-line * {
    flex-shrink: 0;
}

.board-item-first-line .contact-img {
    width: calc(1em + var(--extra));
    height: calc(1em + var(--extra));
    margin: calc(var(--extra) / -2) 0;
    --extra: 0.6em;
    /* border: 1px solid var(--gray-75); */
    margin-right: .5em;
    border-radius: 5px;
}

.board-item-sender {
    font-weight: 500 !important;
    font-size: 1em !important; /* 0.9em from .board-item-first-line */
    opacity: 0.7 !important;
    flex-shrink: 1;
    margin-right: auto;
    color: var(--blackish-color);
}

.board-item-content:before { /* Used to be .board-item-title */
    content: attr(subject);
    font-size: 1em !important;
    opacity: 0.8 !important;
    margin-top: 0.3rem !important;
    grid-row: 2 !important;
    font-weight: 600 !important;
}

.board-item-content:after { /* Used to be .board-item-snippet */
    content: attr(snippet);
    font-size: calc((11/14) * 1em);
    opacity: .3;
    margin-top: 0.3rem !important;
    grid-column: 1/1;
    grid-row: 3/3;
}

#app.shift-key-down:not(.selecting-threads) .board-item:hover .board-item-sender,
#app.shift-key-down:not(.selecting-threads) .board-item:hover .board-item-content:before,
#app.shift-key-down:not(.selecting-threads) .board-item:hover .board-item-content:after {
    white-space: normal;
    overflow: unset;
}

.board-item-labels {
    order: 1;
    font-size: 0.7em;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(0.4rem - 0.3em);
    grid-column: 1/1;
}

.board-item-labels .label {
    margin-top: 0.3em;
}

.label {
    padding: 0.3em 0.5em;
    /* text-transform: uppercase; */
    font-weight: 500;
    border-radius: 3px;
    margin-right: 0.3em;
    background: var(--background-color-slightly-darker);
    color: var(--background-color-even-more-slightly-darker);
}

/* Email symbols */

.email-symbol {
    background: var(--symbol-color);
    font-weight: bold;
    margin-right: 0.25rem;
    font-size: 7px;
    color: var(--board-item-content-bg-color);
    border-radius: 50%;
    vertical-align: text-top;
    width: 2em;
    height: 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.email-symbol.unread {
    --symbol-color: var(--unread-color);
}
.email-symbol.flag {
    --symbol-color: var(--flag-color);
}
.email-symbol.important {
    --symbol-color: var(--important-color);
}
.email-symbol.pinned {
    background: transparent;
    color: var(--pinned-color-darker);
    font-size: 1em;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: unset;
    margin-right: 0.5em;
}

/* Email bars */
.board-item.unread .board-item-content {
    border-color: var(--unread-color);
}
.board-item.pinned .board-item-content {
    border-color: var(--pinned-color);
    background: var(--pinned-color-lighter) !important;
}
/* .board-item.flagged .board-item-content {
    border-color: var(--flag-color);
}
.board-item.important .board-item-content {
    border-color: var(--important-color);
} */

.fa-thumbtack {
    transform: rotate(45deg);
}

.load-more {
    text-align: center;
    padding: 1em 0;
    margin: 10px 0;
    cursor: pointer;
    opacity: .5;
}

.overlay {
    position: fixed;
    top: 0;
    width: 100vw;
    height: var(--viewport-height);
    z-index: 999;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: opacity var(--global-transition-duration) var(--global-transition-timing-function);
}

.overlay.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.overlay-content {
    max-width: 100%;
}

.overlay#loading {
    background: linear-gradient(var(--gray-97), hsl(0, 0%, 100%));
    cursor: wait;
    z-index: 999999999999999;
    padding: 4em;
    padding-bottom: calc(4em + 4.5rem);
}

.overlay#loading img {
    width: 35vw;
}

.overlay#loading h1 {
    font-size: 3.5em;
    color: var(--theme-color);
    font-family: 'Nexa Light', var(--sans-serif);
    letter-spacing: 1px;
}

.overlay#loading h2 {
    font-size: 1.2em;
    font-weight: normal;
    opacity: 0;
    overflow: hidden;
    margin-bottom: -2em;
}

.overlay#loading h2.on {
    opacity: 0.3;
}
.overlay#loading h3 {
    background: var(--theme-color) !important;
    color: white !important;
}

.overlay#loading .loader {
    margin: 0 auto;
    margin-bottom: 2em;
}

.loader {
    width: 10em;
    height: 10em;
    position: relative;
}

.loader-ring {
    display: block;
    width: 100%;
    height: 100%;
    border-width: calc(10px + var(--num) * 6px);
    border-color: var(--theme-color);
    border-radius: 50%;
    border-top-style: solid;
    border-bottom-style: solid;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotate(calc(var(--num) * 40deg - 40deg));
    opacity: calc(0.9 - var(--num)/9);
    -webkit-animation: spin infinite alternate linear;
            animation: spin infinite alternate linear;
    -webkit-animation-delay: calc(var(--num)*0.1s);
            animation-delay: calc(var(--num)*0.1s);
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
}

.overlay#login {
    color: var(--blackish-color);
    background: var(--background-color);
    /* border-top: var(--top-highlight-height) solid var(--theme-color); */
}

.overlay#login h1 {
    font-size: /*5*/3em;
    margin: 0;
    margin-bottom: 1em;
}

.overlay#login h2, .overlay#loading h3 {
    /* margin-top: 1em;
    color: var(--blackish-color); */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1em 0;
    background: var(--blackish-color);
    color: var(--background-color);
    border-radius: 0;
    font-size: 1.5rem;
}

.overlay#login .buttons {
    margin: 3em auto;
    width: 18rem;
}

.overlay#login #has-account:target { /* #has-account in URL */
    grid-template-columns: 1fr;
}

.overlay#login button, .overlay#login a.btn {
    width: 100%;
    --button-vertical-padding: 0.3em;
    --button-horizontal-padding: 1.5em;
    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    height: 3.725em;
    font-weight: 500;
}

.overlay#login button.no-account, .overlay#login a.btn.no-account {
    grid-row: 1/3;
    grid-column: 2/2;
    justify-content: center;
}

.overlay#login #has-account:target button.no-account, .overlay#login #has-account:target a.btn.no-account {
    display: none;
}

.overlay#login button img, .overlay#login a.btn img {
    height: 3em;
    width: 3em;
    margin-right: 1em;
    background: white;
    border: 1px solid var(--gray-93);
    padding: 0.8em;
    margin-left: calc(var(--button-vertical-padding) - var(--button-horizontal-padding));
}

.overlay#login button span, .overlay#login a.btn span {
    margin: 0 auto;
}

.overlay#login p.legal {
    margin: 2rem;
    font-size: 0.8em;
    opacity: 0.8;
}

.overlay#login label.agreement {
    display: none;
}

.overlay#login label.agreement, .overlay#login label.agreement * {
    cursor: pointer;
}

.overlay#login label.agreement a {
    color: var(--theme-color);
    text-decoration: none;
}

/* SIGNUP */

.overlay#login.signup label.agreement {
    display: block;
}

.overlay#login.signup .buttons {
    margin-top: 2em;
}

.overlay#login.signup .buttons[disabled] button {
    pointer-events: none;
    -webkit-filter: blur(2px);
            filter: blur(2px);
    opacity: 0.75;
    cursor: not-allowed;
}

.overlay#login.signup a.btn.no-account {
    display: none;
}

.overlay#login.signup p.legal {
    display: none;
}

.overlay#login .signup-privacy {
    display: none;
    grid-column: 2/2;
    grid-row: 1/3;
    background: var(--gray-93);
    padding: 1em;
    text-align: left;
    flex-direction: column;
    justify-content: center;
}

.overlay#login .signup-privacy h3 {
    margin: 0;
    font-size: 1em;
    font-weight: bold;
}

.overlay#login .signup-privacy p {
    font-size: 0.9em;
    opacity: .8;
    margin: 0;
    margin-top: 0.5em;
}

.overlay#login.signup .signup-privacy {
    display: flex;
}


.menu nav {
    padding-bottom: 6rem;
    min-height: calc(var(--viewport-height) - var(--header-height));
}

.menu nav > * {
    display: flex;
    align-items: center;
}

.menu nav hr {
    padding: 0;
    border: 1px solid var(--background-color-more-slightly-darker);
    margin: 0 1em;
    margin-left: 0;
    width: auto;
    opacity: .7;
}

.menu nav:hover hr {
    opacity: 0;
}

.side-popup.settings {
    padding-bottom: 3rem;
}

.menu .logout {
    position: fixed;
    bottom: 0;
    width: 100%;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-left: -20px !important;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.menu .logout:hover {
    background: var(--important-color);
}

.menu nav .fa {
    margin-right: 0.75em;
}

.menu button#feedback-button {
    justify-content: center;
    background: var(--theme-color) !important;
    color: white !important;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.user-info * {
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info .text {
    max-width: calc(var(--menu-width) - 6rem);
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 1rem;
}

.user-info .text .email {
    font-weight: normal;
}

.user-info .text .subscription-status {
    font-weight: normal;
    font-size: 0.9em;
    color: var(--background-color-even-more-slightly-darker);
    margin-top: 0.3rem;
}

.user-info .text .subscription-status button {
    display: inline;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
    margin: 0 !important;
    background: var(--theme-color);
    color: white;
    padding: 0.2rem 0.3rem !important;
    font-weight: 600;
    font-size: 0.9em;
    margin-left: 0.4rem !important;
}

.version-num {
    font-size: 1.2em;
    line-height: 1em;
    color: var(--background-color-more-slightly-darker);
    font-weight: 300;
    cursor: default;
    margin-top: calc(1em + 20px);
    margin-bottom: 1em;
}

.side-popup:not(.menu) .menu nav {
    min-height: 0 !important;
    padding: 0;
}

.side-popup:not(.menu) .menu nav > * {
    border-radius: inherit;
}

.on-off {
    --width: 2.5em;
    --height: 1.5em;
    width: var(--width);
    height: var(--height);
    border-radius: var(--height);
    position: relative;
    background: var(--background-color-more-slightly-darker);
    cursor: pointer;
    flex-shrink: 0;
}

.on-off.on {
    background: limegreen;
}

.on-off:before {
    content: '';
    display: block;
    width: var(--height);
    height: var(--height);
    border-radius: var(--height);
    background: white;
    box-shadow: 0 0 5px -1px var(--background-color-more-slightly-darker);
}

.on-off.on:before {
    transform: translate(calc(var(--width) - var(--height)));
}

.on-off, .on-off:before {
    transition-duration: .1s;
}

.on-off-couples {
    margin: 1.5rem 0;
}

.on-off-couple {
    display: flex;
    align-items: center;
    padding: 0.5em 0;
    border-radius: 0;
    /* border-bottom: 2px solid var(--background-color-slightly-darker); */
    min-height: 4em;
}

/* .on-off-couple:first-child {
    border-top: 2px solid var(--background-color-slightly-darker);
} */

.on-off-couple span {
    margin: 0;
    margin-right: 1rem;
    flex-grow: 1;
}

.on-off-couple span > * {
    margin: 0;
}

.side-popup-body hr {
    border-radius: 0;
    border: none;
    border-top: 2px solid var(--background-color-slightly-darker);
    margin: 1em 0;
}

.unsplash-suggestion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5em;
}

.unsplash-suggestion {
    width: 100%;
    height: 5rem;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    position: relative;
}

.unsplash-suggestion * {
    pointer-events: none;
}

.unsplash-suggestion span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(transparent, black);
    color: white;
    display: flex;
    align-items: flex-end;
    text-align: left;
    font-size: 0.7rem;
    line-height: 1.2em;
    padding: 0.5em 0.6em;
    cursor: pointer;
    opacity: 0;
    transition-duration: 0.1s;
}

.unsplash-suggestion:hover span {
    opacity: 1;
}

.unsplash-suggestion.special {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.unsplash-suggestion.special i {
    font-size: 1.5em;
    margin-bottom: 0.1rem;
}

button {
    border: none;
}

a.btn {
    text-decoration: none;
}

button,
a.btn {
    -webkit-appearance: none;
    font-family: var(--sans-serif);
    font-size: 1em;
    cursor: pointer;
    font-weight: normal;
}

button *,
a.btn *,
button *:before,
a.btn *:before,
button *:after,
a.btn *:after {
    transition: none;
}

button:focus,
a.btn:focus,
textarea:focus,
input:focus,
input::-webkit-file-upload-button:focus {
    outline: none;
}

button[disabled],
a.btn[disabled] {
    cursor: not-allowed;
}

.email-popup {
    position: fixed;
    left: var(--side-margin);
    right: var(--side-margin);
    top: calc(var(--header-height) + var(--side-margin));
    bottom: var(--side-margin);
    height: calc(var(--viewport-height) - var(--header-height) - 2 * var(--side-margin));
    max-width: 100rem;
    margin: 0 auto;
    overflow: hidden;
    
    display: flex;
    
    --email-popup-bg-color: var(--gray-97);
    --email-popup-text-color: var(--blackish-color);
    
    border-radius: 10px;
    background-color: var(--email-popup-bg-color);
    color: var(--email-popup-text-color);
    z-index: 99999999999;
    transform-origin: bottom;
    /* transform: rotateX(90deg); */
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
}

.email-popup {
    background: transparent;
}

.email-popup.open, .email-composer.open {
    /* transform: none; */
    opacity: 1;
    pointer-events: auto;
}

.email-popup-left {
    flex-grow: 1;
    /*box-shadow: 0 0 30px hsla(219, 34%, 16%, 0.15);*/ /* var(--blackish-color) */
    border-radius: inherit;
    overflow: hidden;
    background: var(--email-popup-bg-color);
    display: flex;
    flex-direction: column;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid var(--background-color-slightly-darker);
}

.email-popup-behind, .popup-window-behind, .onboarding-behind, .account-profile-behind {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--gray-15);
    opacity: .3;
    z-index: 99999;
    color: rgba(255,255,255,0.75);
    font-weight: bold;
    display: flex;
    justify-content: center;
    border-radius: 0;
}

.email-popup-behind > div, .popup-window-behind > div, .onboarding-behind > div {
    display: flex;
    align-items: center;
    height: calc(var(--header-height) - var(--top-highlight-height));
    padding-top: var(--top-highlight-height);
}

.email-popup .email-popup-meta {
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    border-radius: 0;
}

.email-popup .email-popup-meta.desktop-only {
    border-bottom: 1px solid var(--gray-95);
    background: white;
}

.email-popup .email-popup-meta.mobile-only {
    display: none;
}

.email-popup-sent-date {
    margin-top: 0 !important;
    margin-left: auto !important;
    font-weight: 500;
    opacity: .5;
    flex-shrink: 0;
}

.email-popup h1,
.email-popup h2,
.email-popup h3,
.email-popup h4,
.email-popup h5,
.email-popup h6,
.email-composer h1,
.email-composer h2,
.email-composer h3,
.email-composer h4,
.email-composer h5,
.email-composer h6 {
    margin: 0;
    font-weight: normal;
}

.contact-img {
    position: relative;
    overflow: hidden;
}

.contact-img * {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition-duration: none;
    border-radius: inherit;
}

.contact-img .contact-img-default {
    background: hsl(var(--hue), 75%, 45%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1em;
}

.contact-img .contact-img-api {
    background-color: white;
}

.email-popup .email-popup-meta .contact-img {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    flex-shrink: 0;
}

.email-popup .email-popup-meta .contact-img-default {
    background: var(--email-popup-text-color);
    color: var(--email-popup-bg-color);
    font-size: 2em;
}

.email-popup .email-popup-meta .contact-img-api {
    background-color: var(--email-popup-bg-color);
}

.email-popup-meta-first-line {
    display: flex;
    align-items: center;
    width: 100%;
}

.email-popup .email-popup-meta h2 {
    font-weight: bold;
}

.email-popup .subject {
    font-weight: 600 !important;
    display: inline-block; /* For column name */
}

.email-popup .subject .email-symbol {
    font-size: 0.45em;
    margin-top: 1px;
    margin: 3px;
    color: white;
    opacity: .8;
}

.email-popup .sidebar-labels h3 {
    margin-bottom: 0.5rem;
}

.email-popup .email-popup-labels {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -0.175rem;
    margin-bottom: -0.175rem;
    margin-right: -0.51rem;
}

.email-popup .email-popup-labels .label {
    font-size: 0.85em;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    height: 1.65em;
    flex-grow: 1;
    text-align: center;
}

.email-popup .email-popup-labels.editable .label {
    cursor: pointer;
}

.email-popup .email-popup-labels > * {
    margin-right: 0.51rem; /* 0.6 x 0.85*/
}

.email-popup .email-popup-meta-fields {
    display: flex;
    margin-top: .5rem;
}

.email-popup .email-popup-meta-fields h3 {
    color: var(--email-popup-text-color);
    /* opacity: 0.8; */
    font-weight: 300 !important;
    display: inline-block;
    padding: 0 .5em;
    border-left: 1px solid;
    border-radius: 0;
}

.email-popup .email-popup-meta-fields h3:first-child {
    padding-left: 0;
    border-left: 0;
}

.email-popup-attachments {
    display: flex;
    padding: 1em;
    overflow-y: scroll;
    border-top: 1px solid var(--background-color-slightly-darker);
    border-radius: 0;
}

.attachment {
    display: flex;
    align-items: center;
    padding: 0.5em;
    background: white;
    color: var(--gray-30);
    border: 1px solid var(--gray-90);
    font-size: 0.95em;
    position: relative;
    margin-right: 0.5em;
}

.attachment-icon {
    grid-row: 1/3;
    height: 2.25em;
    width: 2.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--gray-90);
    margin-right: 0.75em;
    flex-shrink: 0;
}

.attachment-size {
    opacity: .5;
    font-size: .8em;
    margin-top: .1em;
}

.attachment-name {
    font-size: 0.9em;
}

.attachment-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5em;
    background: white;
    opacity: 0;
    pointer-events: none;
}

.attachment-buttons.single {
    grid-template-columns: 1fr;
}

.attachment-buttons button {
    box-shadow: none;
    background: var(--gray-90);
    color: inherit;
    border: 1px solid var(--gray-85);
    font-weight: 500;
    font-size: 0.95em;
}

.attachment-buttons button:hover {
    background: var(--gray-85);
    border-color: var(--gray-80);
}

.attachment:hover .attachment-buttons,
.attachment-buttons.force-open {
    opacity: 1;
    pointer-events: all;
}

.email-popup .email-popup-actions {
    /* margin-top: .75rem !important; */
    display: flex;
}

.email-popup .email-popup-actions > * {
    list-style: none;
    height: 2.2em;
    margin-right: 0.4em !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.7em;
    cursor: pointer;
    padding: 0 0.8em;
}

.email-popup .email-popup-actions > *:last-child {
    margin-right: 0 !important;
}

.email-popup .email-popup-actions > .back {
    display: none;
}

.email-popup .email-popup-actions > * > span {
    margin-left: 0.6em !important;
    line-height: 1em;
    display: none;
}

.email-popup .email-popup-actions > *.on {
    background: var(--gray-90);
    border-color: var(--gray-85);
}

.email-popup .email-popup-actions > * * {
    transition-duration: 0s;
}

.email-popup .email-popup-actions > *.email-action-btn {
    text-decoration: none;
}

.email-popup .email-popup-actions > *.email-action-btn > span {
    display: block;
}

.email-popup .email-popup-actions > *.email-action-btn > i.fa {
    margin-top: -0.05em;
}

.email-popup .email-popup-actions > *.email-action-btn .external-link-warning {
    opacity: .5;
    margin-left: 0.2em;
    font-style: italic;
}

.column-name {
    margin: 0;
    text-align: center;
    line-height: 2em;
    display: block !important;
    flex-grow: 1;
    overflow: hidden;
    padding: 0 !important;
    cursor: default;
}

.column-name .current {
    height: 1.5rem;
    padding: 0 0.75em;
    width: 100%;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.column-name .options, .email-popup-menu {
    position: relative;
    width: 100%;
    background: var(--gray-90);
    border: 1px solid var(--gray-85);
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;
    width: calc(100% + 2px);
    margin-left: -1px;
    margin-top: -1px;
}

.column-name .option, .email-popup-menu li {
    height: 1.5rem;
    cursor: pointer;
    padding: 0 0.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.column-name .option:hover, .email-popup-menu li:hover {
    background: var(--gray-85);
}

.column-name .option .keyboard-shortcut, .email-popup-menu li .keyboard-shortcut {
    margin-left: auto;
    opacity: .5;
}

.column-name[disabled] {
    cursor: default;
}

.column-name:focus {
    outline: none;
}

.column-name:hover:not([disabled]):not(.force-close) {
    overflow: visible;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* .column-name:hover:not([disabled]):not(.force-close) .current {
    text-align: left;
} */



.email-popup-menu-button {
    position: relative;
    overflow: hidden;
}

.email-popup-menu-button:hover {
    overflow: visible;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.email-popup-menu {
    position: absolute;
    right: 0;
    top: 100%;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    border-top-right-radius: 0;
}

.email-popup .email-popup-body {
    border: none;
    width: 100%;
    flex-grow: 1;
    background-color: white;
    border-radius: 0;
    /* box-shadow: inset 0 0 10px -7px var(--blackish-color);
    border-top-right-radius: 5px; */
}

.email-popup > .email-popup-body { /* > means it won't effect bodies inside .split */
    grid-column: 1/3;
}

.email-composer {
    position: fixed;
    left: var(--side-margin);
    right: var(--side-margin);
    top: calc(var(--header-height) + var(--side-margin));
    bottom: var(--side-margin);
    height: calc(var(--viewport-height) - var(--header-height) - 2 * var(--side-margin));
    overflow: hidden;
    display: flex;
    --email-popup-bg-color: var(--gray-97);
    --email-popup-text-color: var(--blackish-color);
    border-radius: 10px;
    background-color: var(--email-popup-bg-color);
    color: var(--email-popup-text-color);
    z-index: 99999999999;
    transform-origin: bottom;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    /* width: var(--editor-max-width); */
    width: calc(2 * var(--editor-max-width));
    max-width: calc(100vw - 2 * var(--side-margin));
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    flex-direction: column;
    /* IDK about this */
    width: calc(2 * var(--editor-max-width));
}

.email-composer.split {
    width: calc(2 * var(--editor-max-width));
}

.email-composer-meta > * {
    border-bottom: 1px solid var(--gray-90);
    --bottom-border-vertical-space: 0.5em;
    margin-bottom: var(--bottom-border-vertical-space) !important;
    padding-bottom: var(--bottom-border-vertical-space);
    border-radius: 0;
}

.email-composer-meta > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border: none;
}

.email-composer input:not([type="file"]) {
    border-radius: 0;
    min-width: 7em;
    transition: width 0s;
}

.email-composer input:not([type="file"]), .email-composer textarea {
    width: 100%;
}

.email-composer input::-webkit-input-placeholder, .email-composer textarea::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.75;
}

.email-composer input::-moz-placeholder, .email-composer textarea::-moz-placeholder {
    color: inherit;
    opacity: 0.75;
}

.email-composer input:-ms-input-placeholder, .email-composer textarea:-ms-input-placeholder {
    color: inherit;
    opacity: 0.75;
}

.email-composer input::-ms-input-placeholder, .email-composer textarea::-ms-input-placeholder {
    color: inherit;
    opacity: 0.75;
}

.email-composer input::placeholder, .email-composer textarea::placeholder {
    color: inherit;
    opacity: 0.75;
}

.email-composer h2 {
    font-size: 1.3em;
}

.email-composer h2 input {
    font-weight: 600;
}

.email-composer .field {
    margin-top: 0;
    display: flex;
    align-items: center;
    font-size: 1em;
    /*cursor: text;*/ /* It's a <label> so any click on the element will let them input */
}
    
.email-composer .email-recipients-container {
    display: flex;
    flex-wrap: wrap;
    max-height: 6em;
    overflow-y: scroll;
    margin: -0.25em 0; /* To make up for email recipients having margin top & bottom */
    margin-left: 0.2em;
    flex-grow: 1;
}

.email-composer .email-recipient, .email-composer .add-email-recipient, .email-composer input[type="file"]::-webkit-file-upload-button {
    margin: 0.25em;
    display: block;
    padding: 0.5em;
    font-size: 0.9em;
    background: var(--background-color-slightly-darker);
    border-radius: 0.6rem;
}

.email-composer .email-recipient {
    cursor: default;
    display: flex;
    align-items: center;
    border-radius: 1em;
    height: 2em;
    background: white;
    border: 1px solid var(--gray-90);
    color: var(--gray-30);
}

.email-composer .email-recipient .contact-img {
    --padding: 3px;
    width: calc(2em - 2*var(--padding));
    height: calc(2em - 2*var(--padding));
    margin-top: calc(-0.5em + var(--padding));
    margin-bottom: calc(-0.5em + var(--padding));
    margin-left: calc(-0.5em + var(--padding));
    margin-right: 0.4em;
    border-radius: 50%;
}

.email-composer .email-recipient .fa-times {
    margin-left: 0.4em;
    cursor: pointer;
}

.email-composer .add-email-recipient {
    color: white;
    background: transparent;
    cursor: pointer;
}

.email-composer .email-recipients-container input:not([type="file"]) {
    width: 0; /* has a min-width */
    margin: 0.5em;
    flex-grow: 1;
}

.email-composer .field.show-plus input, .email-composer .field:not(.show-plus) .add-email-recipient {
    display: none;
}

.email-composer .field.attachments {
    cursor: auto;
}

.email-composer input[type="file"] {
    color: transparent; /* Removes text */
    -webkit-line-clamp: unset; /* Removes ... */
    margin: 0;
    border-radius: 0.6rem;
    display: none;
}

.email-composer input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none;
    border: none;
    border-radius: inherit;
    cursor: pointer;
    transition: var(--global-transition);
}

.email-composer input[type="file"]:focus::-webkit-file-upload-button {
    background: var(--background-color-more-slightly-darker);
}

.email-composer .field > select {
    margin-left: 0.5rem !important;
    width: auto!important;
    font-size: 0.9em;
    height: 2.1em;
    cursor: pointer;
}

.email-composer .show-field-button {
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
    padding: 0.26em;
    margin: 0 0.2em;
}

.email-composer #suggestions-box {
    list-style: none;
    position: fixed;
    margin-top: .5rem;
    background: var(--background-color);
    color: var(--email-popup-text-color);
    font-size: 0.9em;
    padding: 0;
    overflow: hidden; /* To keep border-radius of children */
    z-index: 2;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
}

.email-composer #suggestions-box li {
    display: flex;
    align-items: center;
    padding: .5rem;
    border-radius: 0;
    cursor: pointer;
}

.email-composer #suggestions-box li:hover, .email-composer #suggestions-box:not(:hover) li.selected {
    background: var(--background-color-slightly-darker);
}

.email-composer #suggestions-box li * {
    transition: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-composer #suggestions-box li .contact-img {
    margin-right: 1em;
    height: 2em;
    width: 2em;
}

.email-composer textarea {
    padding: 1em;
    background: white;
    color: var(--blackish-color);
    border-bottom: none;
    border-radius: 0;
    resize: none;
}

.email-composer-reference-body {
    border: none;
    width: 100%;
    background-color: white;
    border-radius: 0;
}

.email-composer .split {
    display: flex;
}

.email-composer .split .email-composer-reference-body { /* original email for reply/forward */
    /* box-shadow: 0 0 0 3px var(--background-color-slightly-darker); */
    width: var(--editor-max-width);
    min-width: 0;
    flex-shrink: 1;
    background: white;
    border: 1px solid var(--gray-90);
    border-left: none;
    border-bottom: none;
}

.email-composer .split .email-editor {
    width: var(--editor-max-width);
    flex-shrink: 0;
}

.email-composer .controls {
    position: absolute;
    right: 1em;
    bottom: 1em;
    text-align: right;
}

.email-composer .controls button, .email-composer .controls a.btn {
    padding: 1em;
    margin-left: 1em;
    background: var(--theme-color);
    color: white;
    box-shadow: none;
}

.email-composer .controls button:hover, .email-composer .controls a.btn:hover {
    background: white;
    color: var(--theme-color);
    box-shadow: inset 0 0 0 2px;
}

.email-composer .controls button.close-fullscreen-editor {
    display: none;
}

.email-composer-meta {
    padding: 0.8em 1em;
}

.email-composer-bottom-half {
    flex-grow: 1;
}

.email-editor {
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
}

.email-composer-action-bar a {
    display: block;
    width: calc(1.5rem + 4px);
    height: calc(1.5rem + 4px);
    border-radius: 4px;
    margin: 2px;
    margin-top: 0.5rem;
    margin-right: calc(0.5rem - 4px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 0.8em;
    background: var(--background-color);
    font-weight: bold;
    transition-duration: var(--global-transition-duration);
}

.email-composer-action-bar a *, .email-composer-action-bar a *:before {
    transition-duration: 0s;
}

.email-composer-action-bar a.on, .email-composer-action-bar a:not(.on):not(.highlight):hover, .email-composer-action-bar a:not(.on):not(.highlight):focus {
    outline: none;
    background: var(--background-color-slightly-darker);
}

.email-composer-action-bar a.highlight.on, .email-composer-action-bar a.highlight:not(.on):hover, .email-composer-action-bar a.highlight:not(.on):focus {
    outline: none;
    box-shadow: 0 5px 22px -5px var(--theme-color);
}

.email-composer-action-bar a.close-btn.on, .email-composer-action-bar a.close-btn:not(.on):hover, .email-composer-action-bar a.close-btn:not(.on):focus {
    outline: none;
    background: var(--important-color-lighter-slightly-darker) !important;
}

.email-composer-action-bar a.with-text {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    padding: 0 0.4em;
}

.email-composer-action-bar a.with-text > *:first-child {
    margin-right: 0.3em;
}

.email-composer-action-bar a.highlight {
    color: white;
    background: var(--theme-color);
}

.email-composer-action-bar {
    padding: calc(1rem - 2px);
    width: 100%;
    /* min-height: 4.35rem; */
    height: 4.1rem;
    background: white;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.email-composer-action-bar a {
    font-size: 1em;
    padding: calc(0.5em + 2px) calc(1em + 2px) !important;
    height: -webkit-max-content !important;
    height: -moz-max-content !important;
    height: max-content !important;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
    margin-right: calc(1rem - 4px);
    min-width: calc(10em + 4px);
    margin-top: 0;
    cursor: pointer;
}

.email-composer-action-bar a.close-btn {
    min-width: 0;
    margin-left: auto;
    margin-right: 0;
    background: var(--important-color-lighter) !important;
    color: var(--important-color);
}

.email-composer-action-bar label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.email-composer-action-bar input {
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
    margin-right: 0.5em;
}

.saved-as-draft {
    margin-left: auto;
    margin-right: 1em;
    opacity: .5;
    font-style: italic;
}

.email-editor iframe {
    width: 100%;
    border: none;
    border-radius: 0;
    flex-grow: 1;
    border: 1px solid var(--gray-90);
    border-left: none;
    border-right: none;
}

/* EMAIL COMPOSER BODY */

.email-editor-body:focus {
    outline: none;
}

.email-editor-body {
    padding: 1em;
    padding-top: 0.5rem;
    color: var(--blackish-color);
    overflow: scroll;
    line-height: 1.25em;
}

.email-editor-body.empty:before {
    content: attr(placeholder);
    opacity: .5;
    position: absolute; /* So lagging doesn't cause layout changes */
}

.email-composer .email-editor-body {
    padding-bottom: 5.75rem;
}

.email-editor-body * {
    font-family: var(--sans-serif);
}

.email-editor-body a {
    color: var(--theme-color);
    /* text-decoration: none; */
}

.email-editor-body a * {
    color: var(--theme-color) !important;
}

.email-editor-body img {
    max-width: 100%;
}

.email-editor-body code, .email-editor-body pre.code {
    display: block;
    font-family: 'IBM Plex Mono', 'Courier', monospace;
    padding: .1em .4em;
    background: #222;
    color: white;
    border-radius: 5px;
}
.email-editor-body pre.code, .email-editor-body code {
    line-height: 1.25em;
    padding: 0.8em;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}
.email-editor-body pre.code *, .email-editor-body code * {
    font-family: 'Courier', monospace;
    margin: 0;
}

.email-editor-body figure {
    margin: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.email-editor-body figcaption {
    text-align: center;
    margin: 0.5em 0;
}

/* ================== */

@-webkit-keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.context-menu {
    position: absolute;
    z-index: 999999999999;
    list-style: none;
    margin: 0;
    padding: 0;
    background: white;
    color: var(--theme-color);
    border-radius: 5px;
    -webkit-filter: drop-shadow(0 4px 20px rgba(0,0,0,0.1));
            filter: drop-shadow(0 4px 20px rgba(0,0,0,0.1));
    overflow: hidden; /* Keeps border-radius even when children have backgrounds */
    transform-origin: top left;
    pointer-events: none;
}

.context-menu.open {
    pointer-events: auto;
}

.context-menu.circular {
    width: 8em;
    height: 8em;
    border-radius: 50%;
    margin-left: -4em;
    margin-top: -4em;
    /* background: radial-gradient(transparent 1.5em, white 1.5em); */
    transform: scale(0);
    transform-origin: center center;
}

.context-menu.circular.open {
    transform: scale(1);
}

.context-menu.circular > div {
    width: 100%;
    height: 100%;
    position: relative;
}

.context-menu li {
    padding: 0.75em 1em;
    border-radius: 0;
    cursor: pointer;
}

.context-menu.circular li {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin: -1em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    --angle: calc((360deg / var(--num-of-items)) * var(--item-num));
    transform: rotate(calc(var(--angle) - 90deg)) translate(2.75em) rotate(calc((var(--angle) - 90deg) * -1));
}

.context-menu li:nth-of-type(1)  { --item-num: 0 }
.context-menu li:nth-of-type(2)  { --item-num: 1 }
.context-menu li:nth-of-type(3)  { --item-num: 2 }
.context-menu li:nth-of-type(4)  { --item-num: 3 }
.context-menu li:nth-of-type(5)  { --item-num: 4 }
.context-menu li:nth-of-type(6)  { --item-num: 5 }
.context-menu li:nth-of-type(7)  { --item-num: 6 }
.context-menu li:nth-of-type(8)  { --item-num: 7 }
.context-menu li:nth-of-type(9)  { --item-num: 8 }
.context-menu li:nth-of-type(10) { --item-num: 9 }

.context-menu.circular li span {
    display: none;
}

.context-menu li, .context-menu li i.fa, .context-menu li i.fas {
    color: var(--theme-color);
    background: white;
    transition-duration: .1s;
}

.context-menu li:hover, .context-menu li:hover i.fa, .context-menu li:hover i.fas, .context-menu li.on, .context-menu li.on i.fa, .context-menu li.on i.fas {
    background: var(--theme-color-lighter);
    color: var(--theme-color);
}

.context-menu li.on:hover, .context-menu li.on:hover i.fa, .context-menu li.on:hover i.fas {
    background: var(--important-color-lighter);
    color: var(--important-color);
}

.context-menu li i.fa, .context-menu li i.fas {
    margin-right: 0.5em;
    opacity: .8;
}

.context-menu.circular li i.fa, .context-menu.circular li i.fas {
    margin-right: 0;
}

.context-menu li:hover i.fa, .context-menu li:hover i.fas {
    opacity: 1;
}

.context-menu li:last-child {
    border-bottom: none;
}

.context-menu .explainer-text {
    position: absolute;
    left: 3em;
    right: 3em;
    top: 3em;
    bottom: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.75em;
    cursor: default;
    pointer-events: none;
}

/* INBOX ZERO */

#app:not(.custom-bg).inbox-zero {
    --bg-img: url(../img/inbox-zero.jpg) !important;
}

#app.inbox-zero:not(.split-view) .board-column:not(#archived):not(.hover-column) {
    opacity: 0.5;
    -webkit-filter: blur(1px);
            filter: blur(1px);
    transform: scale(0.9);
}

#app.inbox-zero:not(.split-view) .board-column:not(#archived):not(.hover-column) * {
    pointer-events: none;
}

.inbox-zero-message {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: calc(var(--board-column-width) + var(--side-margin));
    bottom: 0;
    padding: 0 var(--side-margin);
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    font-size: 9em;
    font-weight: bold;
    color: white;
    mix-blend-mode: overlay;
}

#app.inbox-zero:not(.split-view) .inbox-zero-message {
    opacity: .9;
    pointer-events: auto;
}

.inbox-zero-message a {
    font-size: 1.5rem;
    font-weight: normal;
    text-decoration: none;
    padding-bottom: 0.05em;
    margin-left: 1em;
    margin-bottom: 1.7rem;
    display: flex;
    flex-direction: column;
    padding: 0.25em 0.5em;
    border-radius: 5px;
    box-shadow: 0 0 0 3px white;
    text-align: center;
    justify-content: center;
    
    DISPLAY: NONE;
}

.inbox-zero-message a:hover {
    background: white;
    color: #555;
}

/* END INBOX ZERO */

.scroll-extensions * {
    height: var(--viewport-height);
    width: 100vw;
    position: fixed;
    z-index: 99999999999999999999999999999999999;
    border-radius: 0;
}

.scroll-extensions .top {
    top: calc((-1 * var(--viewport-height)) + var(--top-highlight-height));
    left: -99.99999vw;
    width: 300vw;
    background: var(--theme-color);
}

.scroll-extensions .bottom {
    bottom: -99.99999vh;
    left: -99.99999vw;
    width: 300vw;
    background: var(--body-background-color);
}

.scroll-extensions .right { /* To hide the menu when it isn't out */
    right: -99.99999vw;
    background: var(--body-background-color);
}

.scroll-extensions .left {
    left: -99.99999vw;
    background: var(--body-background-color);
}

.search {
    flex-grow: 1;
    color: var(--blackish-color);
    position: relative;

    height: 100%;
    padding: 0.5rem 0.75rem;
    margin: 0 0.7rem;
    margin-left: var(--side-margin);
    background: white;
    border: 1px solid var(--gray-90);
    display: flex;
    /* Font Awesome in placeholder */
    font-family: 'Font Awesome Solid', var(--sans-serif);
    font-weight: 600; /* The icon will still work if I remove this */
}

.search input {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    padding: 0;
}

.search .keyboard-hint {
    flex-shrink: 0;
    font-size: 0.9em;
    font-weight: normal;
    opacity: 0.25;
    color: inherit;
    margin-right: 0.5rem;
}

.search button {
    flex-shrink: 0;
    padding: 0 0.5rem;
    font-size: 0.8em;
    background: var(--background-color-even-more-slightly-darker) !important;
    color: var(--background-color) !important;
    margin-left: 0.3rem;
    height: 100%;
    text-shadow: none !important;
}

.search .fa {
    transition-duration: .15s;
}

header .search-btn, header .search-close-btn {
    display: none;
}

header .menu-btn {
    display: none;
}

.search-suggestions {
    list-style: none;
    margin: 0 -1px;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    background: var(--gray-97);
    border: 1px solid var(--gray-90);
    line-height: normal;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;
}

.search-suggestions:empty {
    opacity: 0;
}

.search-suggestions li {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    line-height: normal;
    padding: 0.5em 0.75em;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: normal;
    border-radius: 0;
}

.search-suggestions li:hover {
    background: var(--gray-95);
}

.search-suggestions li.selected {
    background: var(--gray-93);
}

.search-suggestions li .fa {
    line-height: normal;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    margin-right: 0.75em;
}

/* CRISP */
.crisp-client .crisp-1rjpbb7 .crisp-1rf4xdh .crisp-kquevr span.crisp-x94m06, /* span. required to have higher importance */
.crisp-client .crisp-1rjpbb7[data-full-view=true] .crisp-1rf4xdh .crisp-kquevr span.crisp-x94m06 {
    display: none !important;
}

#app.onboarding-open main {
    opacity: 0;
    pointer-events: none;
}

#app:not(.onboarding-open) .onboarding-behind {
    opacity: 0;
    pointer-events: none;
}

.onboarding-flex-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: var(--header-height);
    pointer-events: none;
}

.onboarding {
    width: 50rem;
    height: 40rem;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 10px;
    background: white;
    overflow: hidden;
    position: relative;
    pointer-events: auto;
}

#app:not(.onboarding-open) .onboarding {
    opacity: 0;
    pointer-events: none;
}

.onboarding .progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--theme-color);
    width: 100%; /* Will be overwritten */
    transition: var(--global-transition);
    transition-property: width;
}

.onboarding .onboarding-page {
    text-align: left;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--global-transition);
    transition-property: transform;
    padding: 2rem;
    text-align: center;
    overflow-y: scroll;
}

.onboarding .onboarding-page.onboarding-before-current {
    transform: translate(-100%);
}

.onboarding .onboarding-page.onboarding-after-current {
    transform: translate(100%);
}

.onboarding .onboarding-page-inner {
    margin-top: auto;
    margin-bottom: auto;
}

.onboarding .onboarding-page-inner > * {
    width: 30rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.onboarding .onboarding-page-inner > img {
    margin-bottom: 1em;
    border-radius: 10px;
    width: auto;
}

.onboarding h1 {
    color: var(--theme-color);
    margin: 0;
    font-size: 2.5em;
    font-weight: 800;
}

.onboarding h2 {
    color: var(--theme-color);
    font-weight: 600;
}

.onboarding p {
    opacity: 0.5;
}

.onboarding .next {
    cursor: pointer;
    font-weight: bold;
    opacity: .4;
    transition-duration: .15s;
    margin-top: 1em;
}

.onboarding .next:hover {
    opacity: .6;
}

.onboarding a.btn {
    display: block;
    text-align: center;
    margin-top: 1em;
    padding: 1em;
    background: var(--theme-color);
    color: white;
    box-shadow: 0 0 2em -0.5em var(--theme-color);
    transition-property: transform, box-shadow;
    transition-duration: .15s;
}

.onboarding a.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 2.5em -0.5em var(--theme-color);
}

.onboarding .skip {
    margin-top: 2rem;
    display: block;
    font-weight: 500;
    font-size: .8em;
    opacity: .5;
    width: -webkit-max-content !important;
    width: -moz-max-content !important;
    width: max-content !important;
}

.onboarding .skip:hover {
    opacity: .6;
}

.onboarding .dark-mode-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.onboarding .dark-mode-toggle span {
    font-size: 0.8em;
    font-weight: 600;
}

.onboarding .dark-mode-toggle .on-off {
    margin: 0 1rem;
}

.onboarding .unsplash-suggestion-grid {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 20rem;
    overflow-y: scroll;
    padding-bottom: 2rem;
}

.onboarding .unsplash-suggestion-grid-overlay {
    background: linear-gradient(/*white, transparent 2rem, */transparent 18rem, white);
    height: 20rem;
    margin-top: -20rem;
    width: 100%;
    border-radius: 0;
    position: relative;
    pointer-events: none;
}


.line-clamp {
    position: relative;
    max-height: calc(var(--line-clamp-lines) * var(--line-clamp-line-height) + 0.1rem); /* A bit extra to be safe */
    overflow: hidden;
}

.line-clamp:after {
    content: '';
    text-align: right;
    position: absolute;
    top: calc((var(--line-clamp-lines) - 1) * var(--line-clamp-line-height));
    right: 0;
    width: 70%;
    height: calc(var(--line-clamp-line-height) * 2); /* To be VERY safe, what's the worst that could happen? */
    background: linear-gradient(to right, rgba(255,255,255,0), var(--line-clamp-fade-bg-color) 50%);
}

@supports (-webkit-line-clamp: 2) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: var(--line-clamp-lines);
        -webkit-box-orient: vertical;
    }
    .line-clamp:after {
        display: none;
    }
}

.line-clamp-single, .board-item-content:before, .board-item-content:after {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Scrollbar */
.board-column-content::-webkit-scrollbar {
    width: var(--board-column-content-scrollbar-width);
    border-radius: var(--board-column-content-scrollbar-width);
}

/* Scrollbar track */
.board-column-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--board-column-content-scrollbar-width);
}

/* Scrollbar track on hover
.board-column-content::-webkit-scrollbar-track:hover {
    background: var(--background-color-slightly-darker);
}
*/

/* Scrollbar handle */
.board-column-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--board-column-content-scrollbar-width);
}

/* Scrollbar handle on hover, Scrollbar handle on track hover */
.board-column-content:hover::-webkit-scrollbar-thumb {
    background: var(--background-color-more-slightly-darker); 
}


.hover-column {
    cursor: copy;
}

#board.board-dragging {
    cursor: move;
}

/* #board.board-dragging .board-column-content::-webkit-scrollbar-thumb {
    background: transparent !important;
} */

#board.board-dragging > .board-column > .board-column-header,
#board.board-dragging > .board-column > .board-column-content {
    pointer-events: none !important;
}

form * {
    height: 1.5em;
    line-height: 1.5em;
}

.side-popup {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    right: -1px;
    overflow-y: scroll;
    z-index: 9;
    width: var(--menu-width);
    transform: translateX(var(--menu-width));
    background: white;
    border-top: 1px solid var(--gray-93);
    /* transition: transform .15s var(--global-transition-timing-function); */
}

.side-popup.open {
    transform: none;
    box-shadow: 0 0 20px -5px rgba(0,0,0,0.3);
}

.side-popup:not(.other-column-viewer) {
    background: var(--gray-97);
}

.side-popup.livechat {
    display: flex;
    flex-direction: column;
}

.side-popup.livechat iframe {
    border: none;
    border-radius: 0;
    width: 100%;
    flex-grow: 1;
}

.column-picker-dots {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--main-padding-bottom);
}

.ios-app .column-picker-dots {
    height: calc((2/3) * var(--main-padding-bottom));
    bottom: calc((1/3) * var(--main-padding-bottom));
}

.column-picker-dots .column-picker-dot {
    width: 7px;
    height: 7px;
    margin: 2px;
    background: white;
    opacity: .5;
    border-radius: 50%;
}

.column-picker-dots .column-picker-dot.current {
    opacity: 1;
}

#app.split-view #board {
    grid-template-columns: 25em 1fr;
    grid-template-rows: repeat(calc(var(--maximized-columns) + var(--minimized-columns) - 1), -webkit-max-content);
    grid-template-rows: repeat(calc(var(--maximized-columns) + var(--minimized-columns) - 1), max-content);
    width: 100%;
    display: grid;
    grid-gap: 0.3rem var(--side-margin);
    padding-right: var(--side-margin) !important;
    --board-column-header-height: 3em;
}
#app.split-view .email-popup-placeholder {
    background: rgba(255, 255, 255, 0.5);
    /* background: rgba(0,0,0, 0.75); */
    box-shadow: 0 0 100px -30px rgba(0,0,0,0.9);
    mix-blend-mode: overlay;
    /* opacity: 0; */
}
#app.split-view .email-popup-placeholder, #app.split-view .email-popup {
    grid-column: 2/3;
    grid-row: 1/calc(var(--minimized-columns) + var(--maximized-columns) + 1);
}
#app.split-view .email-popup {
    position: static;
    z-index: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    border-radius: 5px !important;
}
#app.split-view .email-popup.open,
#app.split-view .email-composer.open {
    opacity: 1;
    pointer-events: auto;
}

#app.split-view .email-popup-behind {
    display: none;
}

#app.split-view .board-column {
    width: 100%;
    max-height: calc(var(--max-column-height) - var(--minimized-columns) * (var(--board-column-header-height) + 0.3rem));
}

#app.split-view .board-column .board-column-header {
    text-align: left;
}

#app.split-view .board-column .board-column-header .board-column-count {
    transition-duration: 0s;
    float: right;
}

#app.split-view .board-column:not(.minimized) .board-column-header .board-column-count {
    margin-right: 0.8rem;
}

#app.split-view .board-column:not(.minimized) .board-column-header .board-column-add-note-button {
    position: static;
    display: inline-block;
    margin-left: 0.5em;
}

#app.split-view .board-column .board-column-content {
    max-height: calc(var(--max-column-height) - var(--minimized-columns) * (var(--board-column-header-height) + 0.3rem) - var(--board-column-header-height));
}

#app.split-view .board-column.minimized {
    width: 100%;
    max-width: 100%;
    height: var(--board-column-header-height);
    min-height: var(--board-column-header-height);
    max-height: var(--board-column-header-height);
}

#app.split-view .board-column.minimized .board-column-header {
    transform: none;
    width: 100%;
    top: 0;
}

#app.split-view .board-column.minimized .board-column-content {
    min-height: 0;
}

.tooltip {
    position: fixed;
    padding: 0.5em;
    background: var(--blackish-color-lighter);
    color: white;
    margin-top: 0.3rem;
    z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
    left: 0;
    right: 0;
    bottom: calc(var(--side-margin) * 2);
    margin: 0 auto;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    min-width: 20rem;
    max-width: calc(100vw - 2 * var(--side-margin));
    height: 2.1rem;
    display: flex;
    align-items: center;
    text-align: center;
    pointer-events: none;
}

.tooltip.has-shortcut {
    text-align: left;
}

.tooltip-text {
    flex-grow: 1;
}

.tooltip-keys {
    display: flex;
}

.tooltip-key {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.15em 0.4em;
    margin-left: 0.4em;
    border-radius: 3px;
}

[tooltip]:not([tooltip='']) *,
[tooltip]:not([tooltip='']) *:before,
[tooltip]:not([tooltip='']) *:after {
    pointer-events: none;
}

.selected-tooltip {
    background: var(--theme-color-lighter);
    color: var(--theme-color);
    z-index: 999;
    pointer-events: auto;
}

.selected-tooltip button {
    font-size: .8em;
    height: 1.45rem;
    line-height: 1.45rem;
    background: var(--theme-color);
    color: var(--theme-color-even-lighter);
}

.selecting-area {
    background: rgba(71, 132, 246, .25); /* var(--theme-color) */
    position: fixed;
    transition-duration: 0s;
    z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}

.popup-window-behind {
    opacity: 0;
    pointer-events: none;
    background: rgb(27, 37, 55);
    transition: var(--global-transition);
    transition-property: opacity;
}

#app.popup-window-open .popup-window-behind {
    opacity: 0.6;
    pointer-events: auto;
    z-index: 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}

.popup-window {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.2);
    transition: var(--global-transition);
    transition-property: opacity, transform;
    
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: white;
    z-index: 99999;
    max-height: calc(100vh - 2rem);
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    max-width: calc(100vw - 2rem);
    width: 25em;
    border-radius: 5px;
    box-shadow: 0 5px 50px -10px var(--blackish-color);
    overflow: hidden;
    
    z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}

#app.popup-window-open .popup-window {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.popup-window.popup-window-error-colors .popup-window-text {
    color: var(--important-color);
}

.popup-window .popup-window-text {
    padding: 1rem;
    font-weight: 500;
    text-align: center;
    white-space: pre-wrap;
}

.popup-window .popup-window-input {
    /* background: var(--background-color); */
    box-shadow: inset 0 0 15px -7px var(--blackish-color);
    margin: 1rem;
    margin-top: 0;
    width: calc(100% - 2rem);
    font-size: 0.9rem;
    padding: 0.5rem 0.5rem;
}

.popup-window .popup-window-buttons {
    display: grid;
    grid-gap: 1rem;
    padding: 1rem;
    padding-top: 0;
}

.popup-window.popup-window-alert .popup-window-buttons {
    grid-template-columns: 1fr;
}

.popup-window.popup-window-confirm .popup-window-buttons, .popup-window.popup-window-prompt .popup-window-buttons {
    grid-template-columns: 1fr 1fr;
}

.popup-window .popup-window-button {
    padding: 0.65rem 1rem;
    text-align: center;
    border-radius: 0;
    text-transform: uppercase;
    background: var(--background-color);
    border-radius: 5px;
    background: var(--theme-color);
    color: white;
    box-shadow: 0 5px 22px -5px var(--theme-color);
    font-weight: bold;
    font-size: 0.9em;
    position: relative;
    cursor: pointer;
}

.popup-window.popup-window-error-colors .popup-window-button {
    background: var(--important-color);
    box-shadow: 0 5px 22px -5px var(--important-color);
}

.popup-window-button-shortcut {
    opacity: .5;
    margin-left: 0.3rem;
    background: white;
    color: var(--theme-color);
    font-size: 0.6em;
    padding: 0.15rem 0.3rem;
    position: absolute;
    right: 0.65rem;
    top: 0;
    bottom: 0;
    margin: auto;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
}

.popup-window.popup-window-error-colors .popup-window-button-shortcut {
    color: var(--important-color);
}

.mobile-column-dropzones {
    position: fixed;
    left: calc(var(--side-margin)/2 + 2.5px);
    right: calc(var(--side-margin)/2 + 2.5px);
    width: calc(100vw - var(--side-margin) - 5px);
    background: var(--blackish-color-lighter);
    z-index: 9999;
    text-align: center;
    color: white;
    margin: 10px 0;
    padding: 5px 10px;
    height: 40vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
}

.mobile-column-dropzones span {
    font-size: 0.8em;
    text-align: left;
    opacity: .5;
    margin: 5px 0;
    padding-left: 1rem;
}

.mobile-column-dropzone {
    display: flex;
    justify-content: left;
    text-align: left;
    align-items: center;
    background: white;
    color: var(--theme-color);
    font-weight: bold;
    font-size: 0.9em;
    padding: 0 1rem;
    height: 100%;
    margin: 5px 0;
    transition: var(--global-transition);
    transition-property: background;
    transition-duration: 0.1s;
}

.mobile-column-dropzone.hover-column {
    background: var(--theme-color-lighter);
}

.electron-window-buttons {
    align-items: center;
    position: fixed;
    top: 0;
    left: var(--side-margin);
    height: 2rem;
    z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
    display: none;
}

.electron .electron-window-buttons {
    display: flex;
}

.electron-window-buttons * {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    background: hsl(var(--h), var(--s), var(--l));
    color: hsl(var(--h), var(--s), calc(var(--l) - 35%));
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid hsl(var(--h), var(--s), calc(var(--l) - 5%));
}

.electron-window-buttons:not(:hover) * {
    color: transparent;
}

.email-popup-sidebar-wrapper {
    display: flex;
    flex-direction: column;
}

.email-popup-sidebar {
    width: var(--email-viewer-sidebar-width);
    flex-shrink: 0;
    padding: 1.5em;
    border-radius: inherit;
    overflow-y: auto;
    background: var(--email-popup-bg-color);
    /* margin-top: 1em; */
    /* margin-bottom: 1em; */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex-grow: 1;
    flex-shrink: 1;
    border-radius: 0;
}

.email-popup-sidebar > *:not(:last-child) {
    margin-bottom: 1em;
}

.email-popup-sidebar-address-bar {
    font-size: 0.8em;
    color: var(--gray-60);
    text-align: center;
    padding: 1rem;
    border-radius: 0;
    border-top: 1px solid var(--gray-90);
    background: var(--email-popup-bg-color);
}

.email-popup-sidebar-address-bar b {
    font-weight: 600;
}

.event-card {
    margin-bottom: 1em;
    padding: 1em;
    background: var(--background-color-slightly-darker);
    border-radius: 10px;
    display: grid;
    grid-template-columns: -webkit-max-content 1fr;
    grid-template-columns: max-content 1fr;
    grid-gap: 0.5rem 1rem;
    align-items: center;
}

.event-card-name {
    margin: 0;
    /* margin-bottom: 0.25em; */
    font-weight: 600;
    grid-column: 1/3;
}

/* .event-card-location {
    
} */

.event-card .fa {
    /* margin-top: 0.2rem; */
    color: var(--background-color-even-more-slightly-darker);
}

.event-card-calendar-btn {
    grid-column: 1/3;
    text-decoration: none;
    padding: 0.5em;
    text-align: center;
    background: var(--background-color-more-slightly-darker);
    border-radius: 5px;
    margin-top: 0.5rem;
}

/* .thread-pane {

} */

.thread-pane h3 {
    margin: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.thread-pane h3 .thread-pane-message-count {
    margin-left: auto;
    opacity: .5;
    font-size: 0.7em;
}

.thread-pane ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.thread-item {
    margin: 0.25em 0;
    display: grid;
    grid-template-columns: -webkit-max-content 1fr;
    grid-template-columns: max-content 1fr;
    padding: 0.5em;
    border-radius: 10px;
    cursor: pointer;
}

.thread-item:hover {
    background: var(--gray-93);
}
.thread-item:active {
    background: var(--gray-90);
}

.thread-item.current {
    background: var(--background-color-slightly-darker);
}

.thread-item .contact-img {
    grid-row: 1/3;
    display: inline-block;
    width: 2.25em;
    height: 2.25em;
    margin-right: 0.5em;
    border-radius: 6px;
}

.thread-item-date {
    opacity: .5;
    font-size: 0.8em;
}

.sidebar-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5em;
}

.sidebar-action-buttons button,
.sidebar-action-buttons  a.btn {
    font-size: 0.95em;
}

.sidebar-action-buttons button i,
.sidebar-action-buttons  a.btn i {
    margin-right: 0.3em;
}

.sidebar-action-buttons button.reply,
.sidebar-action-buttons button.trash,
.sidebar-action-buttons button.unsub,
.sidebar-action-buttons .email-action-btn,
.sidebar-action-buttons button.move-to-archived {
    grid-column: 1/3;
}

.sidebar-sender-profile {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5em;
    margin-left: -0.5em;
    margin-right: -0.5em;
    margin-top: -0.5em;
    /* border-radius: 3em; */
    border-radius: 10px;
}

.sidebar-sender-profile:hover {
    background: var(--gray-93);
}

.sidebar-sender-profile:active {
    background: var(--gray-90);
}

.sidebar-sender-profile .contact-img {
    height: 4em;
    width: 4em;
    margin-right: 1em;
    flex-shrink: 0;
    border-radius: 7px;
}

.sidebar-sender-profile .sender-name {
    margin: 0;
    font-size: 1em;
}

.sidebar-sender-profile .sender-name b {
    font-weight: 600;
}

.sidebar-sender-profile .sender-address {
    font-size: 0.8em;
    opacity: .5;
    margin-top: 0.4rem;
}

.sidebar-sender-profile .show-all-from-sender-btn {
    box-shadow: none;
    font-size: 0.8em;
    background: var(--background-color-slightly-darker);
    color: var(--email-popup-text-color);
    font-weight: 500;
    margin-top: 0.4rem;
    padding: 0.4em 1em;
    border-radius: 5px;
}

.sidebar-recipients {
    display: flex;
    flex-wrap: wrap;
}

.sidebar-recipients h3 {
    width: 100%;
    margin-bottom: 0.5rem;
}

.sidebar-recipients .contact-img {
    width: 2em;
    height: 2em;
    margin-bottom: .25em;
    margin-right: .25em;
    cursor: pointer;
}

/* .sidebar-state-actions {
    margin-top: calc(-1em + 2px) !important;
} */

.sidebar-state-actions select {
    flex-grow: 1;
}

.update-card {
    padding: 1em;
    margin-bottom: 1em;
}

.update-card h2 {
    margin: 0;
    font-size: 1em;
    margin-bottom: 0.2rem;
    font-weight: 600;
    color: var(--theme-color);
    line-height: 1em;
}

.update-card h3 {
    margin: 0;
    font-size: 0.8em;
    line-height: 1em;
    font-weight: normal;
    margin-top: 0.5em;
    margin-bottom: 1em;
    color: var(--background-color-even-more-slightly-darker);
    font-style: italic;
    font-weight: 300;
}

.update-card .update-description {
    font-size: 0.8em;
    line-height: 1.4em;
    color: var(--background-color-even-more-slightly-darker);
}

.update-card .update-description > *:first-child {
    margin-top: 0;
}

.update-card .update-description > *:last-child {
    margin-bottom: 0;
}

.update-card .update-description img {
    max-width: 100%;
}

.update-card .update-description ul {
    padding-left: 1.5em;
}

.update-card .update-description ul li {
    margin: 1em 0;
}

.update-card .update-description ul li:last-child {
    margin-bottom: 0.5em;
}

.update-card .update-description ul li img {
    margin-top: 0.5em;
}

.update-card.view-more-updates {
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    color: var(--background-color-even-more-slightly-darker);
}

.guide-card {
    display: block;
    padding: .8em;
    margin: 1em 0;
    text-align: left;
}

.guide-card:hover {
    background: var(--gray-95);
}

.guide-title {
    font-size: 1em;
    font-weight: 600;
    margin: 0;
    margin-bottom: 0.3em;
}

.guide-preview {
    font-size: 0.8em;
    margin: 0;
    line-height: 1.5em;
    opacity: .8;
}

.nav-dot  {
    width: 10px;
    height: 10px;
    background: var(--important-color);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
    box-shadow: 0 0 0 0px white;
}

/* .label-changer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 20rem;
    height: max-content;
    max-width: 100vw;
    max-height: 25rem;
    overflow: scroll;
    background: white;
}

.label-changer-row {
    display: flex;
    padding: 0.7rem;
}

.label-changer-row-checkbox {
    width: 1rem;
    height: 1rem;
    font-size: 0.7em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-right: 0.7rem;
    background: var(--theme-color-lighter);
    color: transparent;
}

.label-changer-row-checkbox.checked {
    background: var(--theme-color);
    color: white;
} */

.add-label-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.add-label-btn-icon {
    margin-right: 0.2em;
}

.label-picker {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: var(--email-viewer-sidebar-width);
    background: var(--background-color);
    z-index: 1;
    cursor: auto;
    border-radius: 5px;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    color: var(--background-color-even-more-slightly-darker);
    font-size: 0.85em;
}

.label-picker-input {
    font-size: 1em;
    margin: 1rem;
    width: calc(100% - 2rem);
    padding: 0.5em;
    background: white;
    color: var(--blackish-color);
    flex-shrink: 0;
}

.label-picker-labels {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.label-picker-label {
    padding: 1rem;
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
}

.label-picker-label:hover {
    background: var(--gray-95);
}

.label-picker-label.selected {
    background: var(--gray-93);
}

.label-picker-checkbox {
    width: 1.75em;
    height: 1.75em;
    background: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 100%);
    border: 1px solid var(--gray-90);
    margin: -0.375em 0;
    margin-right: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    text-align: center;
}

.label-picker-checkbox.checked {
    background: var(--gray-90);
    border-color: var(--gray-85);
    color: var(--gray-30);
}

.label-picker-close-btn {
    box-shadow: none;
    padding: 1em;
    margin: 1rem;
    background: var(--gray-90);
    color: var(--gray-45);
}

.label-picker-close-btn:hover {
    background: var(--gray-85);
    color: var(--gray-45);
}

.label-picker-close-btn:active {
    background: var(--gray-80);
    color: var(--gray-45);
}

.install-web-app-btn {
    margin-top: 0 !important;
    margin-bottom: 2em !important;
}

.account-profile-behind {
    z-index: 9999999999;
}

.account-profile {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999999999;
    background: white;
    margin: auto;
    width: 60em;
    height: 30em;
    max-width: calc(100vw - 2 * var(--side-margin));
    max-height: calc(100vh - 2 * var(--side-margin));
    box-shadow: 0 2px 20px -11px var(--blackish-color);
    border-radius: 15px;
    display: flex;
    overflow: hidden;
}

.account-profile-info {
    max-width: 20em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5em;
}

.account-profile-contact-img {
    width: 7rem;
    height: 7rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    font-size: 3em;
}

.account-profile-name {
    font-size: 1.75em;
    font-weight: 600;
    margin: 0;
    overflow-wrap: break-word;
}

.account-profile-email-address {
    font-size: 1.25em;
    font-weight: normal;
    margin: 0;
    margin-top: 0.2em;
    overflow-wrap: break-word;
}

.account-profile-emails {
    overflow: scroll;
    background: var(--background-color);
    padding: 1.5em;
    flex-grow: 1;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.account-profile-emails-dropdown {
    margin: 0;
    font-size: 1.5em;
    /* margin-left: 0.5rem; */
    margin-bottom: 1rem;
    font-weight: 600;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    color: inherit;
}

.account-profile-email {
    padding: 0.5em;
    margin-bottom: 1em;
    border-radius: 5px;
    cursor: pointer;
}

.account-profile-email-subject {
    font-size: 1em;
    font-weight: 600;
    margin: 0;
}

.account-profile-email-snippet {
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    margin-top: 0.3em;
}

.account-profile-email:last-child {
    margin-bottom: 0;
}

.account-profile-email:hover {
    background: var(--background-color-slightly-darker);
}

.account-profile-buttons {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
}

.account-profile-button {
    box-shadow: none;
    font-weight: 500;
    background: var(--theme-color-even-lighter);
    border-radius: 5px;
    padding: 0.5em 1em;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    position: relative;
}

.account-profile-button:hover {
    background: var(--theme-color-lighter);
    color: var(--theme-color);
}

.account-profile-button i.fa.fa-arrow-up {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    transform: rotate(45deg);
    font-size: 0.7em;
}

#board.focus-mode {
    width: 100%;
    justify-content: center;
}

#board.focus-mode .board-column:not(.focus-mode-column) {
    display: none;
}

#board.focus-mode .focus-mode-column {
    width: 25em;
}

.bg-image {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
    border-radius: 0;
    background: var(--gray-95);
    --blur: 0px;
    -webkit-filter: blur(var(--blur));
            filter: blur(var(--blur));
    margin: calc(var(--blur) * -2);
}

.bg-image.blurred {
    --blur: 10px;
}

.bg-image img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: inherit;
       object-fit: inherit;
    -o-object-position: inherit;
       object-position: inherit;
    border-radius: 0;
}

.label-buttons {
    padding: 0 var(--side-margin);
    margin-bottom: var(--main-padding-top);
    display: flex;
    overflow-x: auto;
    border-radius: 0;
}

.label-buttons button {
    flex-shrink: 0;
    flex-grow: 1;
    margin-right: 0.3rem;
    padding: 0.3rem;
    font-size: 0.8em;
}

#app.custom-bg .label-buttons button {
    padding: calc(0.3rem + 1px); /* To emulate border */
    border: none;
}

.label-buttons button.off {
    opacity: .5;
}

/* PWA styles */
@media screen and (display-mode: standalone) {
    header .logo {
        display: none;
    }
    .search {
        margin-left: 0;
    }
}

/* MEDIA QUERIES */

@media screen and (max-width: 878px) {
    header .logo h1 {
        display: none;
    }
    header .logo img {
        display: inherit;
    }
    header .logo {
        display: block !important;
    }
}

/* Mobile landscape */
@media screen and (max-device-width: 850px) {
    :root {
        --menu-width: 50vw;
    }
    
    body {
        /* Disables pull to refresh — https://developers.google.com/web/updates/2017/11/overscroll-behavior#disablp2r */
        overscroll-behavior-y: contain;
    }

    .board-column {
        width: 12rem;
    }
    
    header .logo {
        font-size: .6em;
        /* margin-top: .2em; */
    }
    header .search {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0;
        border-radius: 0;
        opacity: 0;
        pointer-events: none;
        background: white;
    }
    header.search-open .search {
        opacity: 1;
        pointer-events: auto;
    }
    header .search-btn, header .search-close-btn {
        display: inherit;
    }
    header .sync {
        margin-right: -0.3em;
    }
    header button .text, header a.btn .text {
        display: none;
    }
    
    .email-popup, .email-composer {
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        height: var(--viewport-height);
        border-radius: 0;
    }

    .popup-window-button-shortcut {
        display: none;
    }

    .email-composer {
        width: 100vw;
        max-width: 100vw;
    }
}
/* Mobile */
@media screen and (max-device-width: 500px) {
    :root {
        --side-margin: 2rem;
        --menu-width: 100vw;
        --top-highlight-height: /*6px*/0px;
        --max-column-height: calc(var(--viewport-height) - var(--header-height) - var(--main-padding-top) - var(--main-padding-bottom));
        --main-padding-top: calc(var(--side-margin)/2);
        --main-padding-bottom: calc(var(--side-margin) * 1.5);
        --header-height: 3.2rem;
    }
    :root.ios-app {
        --side-margin: var(--ios-app-bottom-offset);
        --viewport-height: calc(100vh - var(--ios-app-top-offset));
        --top-highlight-height: 0px;
        --main-padding-bottom: calc(var(--side-margin) * 1.5);
    }
    main {
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
    }
    #board {
        padding: 0 calc(var(--side-margin)/2 + 5px);
    }
    .board-column {
        width: calc(100vw - var(--side-margin) - 5px);
        scroll-snap-align: center;
        margin-right: calc(var(--side-margin)/2 - 5px);
    }
    .column-picker-dots {
        display: flex;
    }
    .incoming-card-spacer {
        display: none;
    }
    .board-item-content {
        min-height: 5rem;
    }
    
    .email-popup {
        overflow: scroll;
        flex-direction: column-reverse;
    }
    .email-popup .email-popup-sidebar {
        padding: 1em;
        margin: 0;
        width: 100%;
        z-index: 1;
        /* padding-top: 4em; */
    }
    .email-popup .email-popup-left {
        box-shadow: none;
        border: none;
        flex-shrink: 0;
    }
    .email-popup .email-popup-meta {
        padding: 0;
    }
    .email-popup .email-popup-meta.mobile-only {
        display: flex;
    }
    .email-popup .email-popup-meta.desktop-only {
        display: none;
    }
    .email-popup-meta-first-line {
        flex-wrap: wrap;
    }
    .email-popup .subject {
        margin-bottom: 0.51rem;
        font-weight: 600 !important;
    }
    .email-popup .email-popup-body {
        height: var(--email-height);
        flex-shrink: 0;
    }
    .email-popup .email-popup-header {
        box-sizing: content-box;
        height: calc(1.4em + 4px);
        padding: 1em;
        border-radius: 0;
    }
    .email-popup-sidebar-address-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    /* .email-popup .email-popup-actions > .back {
        position: fixed;
        top: 1rem;
        margin-top: 2px;
        left: 1.5rem;
        margin-left: 2px;
        margin-right: 0 !important;
        display: flex;
    } */
    .email-popup .email-popup-actions {
        margin-top: 0 !important;
    }
    .email-popup .email-popup-meta .contact-img {
        display: none;
    }
    .email-popup .email-popup-meta-fields {
        flex-wrap: wrap;
    }
    .email-popup .email-popup-meta-fields h3.sender-name {
        width: 100%;
        padding: 0;
    }
    .email-popup .email-popup-meta-fields h3:not(.sender-name) {
        border: none;
        padding: 0;
        margin: 1em 0;
        margin-right: 0.75em;
        font-size: 1em;
    }
    .email-popup-sent-date {
        width: 100%;
    }

    .event-card {
        display: none;
    }
    .thread-pane {
        width: 100%;
        padding: 0;
    }
    .thread-pane h3 {
        font-size: 1em;
        margin-left: 0;
        margin-bottom: 0.25rem;
    }
    .thread-pane ul {
        display: flex;
        max-width: 100%;
        margin-left: -0.25rem;
        overflow-x: scroll;
    }
    .thread-item {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        border-radius: 3em;
        padding: 0.25em;
    }
    .thread-item .contact-img {
        margin-right: 0;
        width: 1.5em;
        height: 1.5em;
    }
    .thread-item > *:not(.contact-img) {
        display: none;
    }

    .sidebar-action-buttons {
        grid-template-columns: 1fr 1fr 1fr;
        font-size: 0.8em;
    }
    .sidebar-action-buttons button, .sidebar-action-buttons a.btn {
        grid-column: unset !important;
    }
    .sidebar-action-buttons button .non-compact, .sidebar-action-buttons a.btn .non-compact {
        display: none;
    }
    .sidebar-sender-profile {
        padding: 0;
        margin: 0;
        background: transparent !important;
        border-radius: 0;
    }
    .sidebar-sender-profile .contact-img {
        width: 2.5em;
        height: 2.5em;
    }
    
    .email-composer .split {
        display: block; /* Instead of grid */
    }
    .email-composer .split .email-composer-reference-body {
        display: none;
    }

    .email-composer-action-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        grid-gap: 1em;
    }

    .email-composer-action-bar a {
        margin: 0;
        min-width: 0;
        width: 100% !important;
        height: 100% !important;
    }
    
    .overlay#login {
        font-size: 3em;
        padding: var(--side-margin);
    }
    .overlay#login #has-account:target {
        grid-template-rows: 1fr 1fr;
    }
    .overlay#login button.no-account, .overlay#login a.btn.no-account {
        grid-row: unset;
        grid-column: unset;
    }
    
    header {
        font-size: 0.8em;
        justify-content: center;
    }

    header .menu-btn {
        display: inline;
        position: fixed;
        left: calc(var(--side-margin)/2 - 2.5px);
    }

    header .right {
        position: fixed;
        right: calc(var(--side-margin)/2 - 2.5px);
    }
    
    header nav > * {
        display: none;
    }

    .side-popup.nav {
        width: 50%;
    }
    
    .side-popup {
        transform: translateX(calc(-1 * var(--menu-width)));
        right: unset;
        left: -1px;
    }

    #board.board-dragging .mobile-column-dropzones {
        opacity: 1;
        pointer-events: auto;
    }

    .account-profile {
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        max-height: 100vh;
        max-width: 100vw;
        border-radius: 0;
        overflow-y: scroll;
    }
    .account-profile-info {
        max-width: 100vw;
        align-items: center;
        text-align: center;
    }
    .account-profile-buttons {
        align-items: center;
    }
    .account-profile-emails {
        flex-shrink: 0;
    }

    .label-picker {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
    }
}