snappymail/integrations/nextcloud/snappymail/app/themes/Nextcloud25/styles.css

/**
 * Nextcloud - SnappyMail mail plugin
 *
 * @author Rene Hampölz (@hampoelz), SnappyMail, Nextcloud Team
 */

/*
 * app layout changes, background & color
 */

#rl-app {
    color: var(--color-main-text);
    background-color: transparent;
    font-family: var(--font-face);
    font-size: var(--default-font-size);
}

#rl-app #rl-left {
    background-color: var(--color-main-background-blur, var(--color-main-background));
    -webkit-backdrop-filter: var(--filter-background-blur, none);
    backdrop-filter: var(--filter-background-blur, none);
}

#rl-app #rl-left,
#rl-app #V-AdminPane>.b-toolbar {
    width: 300px;
}

html.rl-left-panel-disabled #rl-app #rl-left {
    width: 65px !important;
}

#rl-app #rl-right {
    background-color: var(--color-main-background);
}

#rl-app hr {
    border-bottom-color: var(--color-border-dark);
}

#rl-app .resizer {
    opacity: 1;
    background-color: unset;
    border-right: solid 1px var(--color-border);
}

#rl-app .row {
    margin-left: unset;
}

#rl-app .messageList,
#rl-app .messageView {
    margin: 0 5px;
    border: none;
    box-shadow: none !important;
    background: var(--color-main-background);
}

/*
 * links
 */

:root {
    --link-color: var(--color-primary-light-text);
}

#rl-app a[target="_blank"],
#rl-app #messageItem .b-text-part a {
    color: var(--color-primary-light-text);
}

#rl-app a[target="_blank"]:visited,
#rl-app a[target="_blank"]:active,
#rl-app #messageItem .b-text-part a:visited,
#rl-app #messageItem .b-text-part a:active {
    color: var(--color-primary);
}

/*
 * error tips
 */

#rl-app [data-rainloopErrorTip]::before,
#rl-app #V-PopupsPlugin .help-block span {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px var(--color-box-shadow);
    background-color: var(--color-background-dark);
    font-size: 13px;
    color: unset;
    left: 10px;
    right: unset;
    padding: 5px;
    margin: 7px;
}

#rl-app [data-rainloopErrorTip]::before {
    color: var(--color-error);
    font-weight: 700;
}


/*
 * loading and login screen
 */

#rl-app #rl-loading,
#rl-app #rl-loading-error,
#rl-app #V-Login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    top: unset;
    position: unset;
    min-width: unset;
    max-width: unset;
    transform: unset;
    text-shadow: none;
    transition: none;

    background-color: var(--color-main-background-blur, var(--color-main-background));
    -webkit-backdrop-filter: var(--filter-background-blur, none);
    backdrop-filter: var(--filter-background-blur, none);

    color: var(--color-main-text);
    width: 100%;
    height: 100%;
}

#rl-app .LoginView .descWrapper {
    color: var(--color-main-text);
}

#rl-app .LoginView .alert {
    position: unset;
}

#rl-app .LoginView form {
    min-width: 250px;
    max-width: 500px;
    width: 90%;

    background-color: var(--color-main-background);
    border: unset;
    border-radius: var(--border-radius-large);
    box-shadow: 0 0 10px var(--color-box-shadow);
    color: var(--color-main-text);
}

#rl-app .LoginView .controls > .fontastic:first-child {
    padding: unset;
    left: 10px;
}

#rl-app .LoginView .controls span.fontastic {
    user-select: none;
}

#rl-app .LoginView .controls span.fontastic:active,
#rl-app .LoginView .controls span.fontastic:hover {
    background: unset;
}

#rl-app #rl-loading[hidden],
#rl-app #rl-loading-error[hidden],
#rl-app .LoginView .alert[hidden] {
    display: none;
}

/*
 * icons
 */

#rl-app .iconcolor-green {
    color: var(--color-success) !important;
}

#rl-app .iconcolor-red {
    color: var(--color-error) !important;
}

#rl-app i.fontastic {
    line-height: unset;
}

#rl-app [data-icon]::before {
    vertical-align: -10%;
}

#rl-app .drag-handle {
    color: var(--color-text-lighter);
}

/*
 * alerts
 */

#rl-app .alert {
    text-shadow: unset;
    border: unset;
    color: var(--color-main-text);
    background-color: rgba(var(--color-warning-rgb), 0.1);
    border-inline-start: 4px solid var(--color-warning);
    border-radius: var(--border-radius);
    margin: 1rem;
    padding: 1rem;
}

#rl-app .alert h4 {
    font-weight: bold;
    font-size: 20px;
    margin-top: unset;
    margin-bottom: 12px;
    line-height: 30px;
    color: var(--color-text-light);
}

#rl-app .alert.alert-info {
    background-color: var(--color-background-dark);
    border-color: var(--color-background-darker);
}

#rl-app .alert.alert-warning {
    background-color: rgba(var(--color-warning-rgb), 0.1);
    border-color: var(--color-warning);
}

#rl-app .alert.alert-success {
    background-color: rgba(var(--color-success-rgb), 0.1);
    border-color: var(--color-success);
}

#rl-app .alert.alert-error {
    background-color: rgba(var(--color-error-rgb), 0.1);
    border-color: var(--color-error);
}

#rl-app .alert .close {
    top: -0.6rem;
    right: unset;
}

#rl-app .alert br {
    display: none;
}

/*
 * side panel
 */

#rl-app #V-AdminPane>.b-toolbar,
#rl-app #V-SettingsMenu>.b-toolbar {
    top: 0;
    left: 0;
    height: auto !important;
    padding-top: calc(var(--default-grid-baseline) * 2) !important;
    padding-bottom: calc(var(--default-grid-baseline) * 2) !important;
    font-weight: bold;
}

html.rl-left-panel-disabled #rl-app #rl-left:has(#V-SettingsMenu:not([hidden])) {
    width: 250px !important;
}

#rl-app .b-folders .b-toolbar {
    height: unset;
    display: flex;
    flex-direction: row;
    padding: 8px;
}

html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar {
    flex-direction: column;
}

#rl-app #V-AdminMenu nav,
#rl-app #V-SettingsMenu nav,
#rl-app .b-folders .b-content {
    padding: calc(var(--default-grid-baseline) * 2);
}

#rl-app .b-folders .b-content {
    top: 60px;
    bottom: 162px;
}

#rl-app .b-folders .b-content.show-on-panel-disabled {
    bottom: 56px;
}

#rl-app #V-AdminMenu nav a,
#rl-app #V-AdminPane>.b-toolbar,
#rl-app #V-SettingsMenu nav a,
#rl-app #V-SettingsMenu>.b-toolbar,
#rl-app .b-folders li a.selectable {
    margin: 2px;
    padding: 0 2em 0 15px;
    height: 38px;
    line-height: 38px !important;
    border-radius: var(--border-radius-pill);
    color: unset;
    border: none;
}

#rl-app #V-AdminMenu nav a,
#rl-app #V-AdminPane>.b-toolbar,
#rl-app #V-SettingsMenu nav a,
#rl-app #V-SettingsMenu>.b-toolbar {
    height: 44px;
    min-height: 44px;
    line-height: 44px !important;
}

#rl-app #V-AdminMenu nav a.selected,
#rl-app #V-SettingsMenu nav a.selected,
#rl-app .b-folders li a.selectable.selected {
    color: unset;
    background-color: var(--color-primary-light);
}

#rl-app #V-AdminMenu nav a:not(.selected):hover,
#rl-app #V-AdminMenu nav a:not(.selected):focus,
#rl-app #V-SettingsMenu nav a:not(.selected):hover,
#rl-app #V-SettingsMenu nav a:not(.selected):focus,
#rl-app .b-folders li a.selectable:not(.selected):hover,
#rl-app .b-folders li a.selectable:not(.selected):focus {
    color: unset;
    background-color: var(--color-background-hover);
}

#rl-app .b-folders .b-folders-system a[data-unread]::after,
#rl-app .b-folders .b-folders-user a[data-unread]::after {
    display: block;
    margin: 0 ; 
    padding: 2px 6px;
    top: 50%;
    transform: translateY(-50%);

    color: var(--color-primary-element);
    background-color: var(--color-primary-light);

    font-size: 12px;
    text-shadow: none;
}

#rl-app .b-folders hr {
    border-top: solid var(--color-main-text);
    border-radius: var(--border-radius-pill);
    opacity: .1;
}

#rl-app .b-folders input {
    width: calc(100% - 10px);
    margin: 5px;
    opacity: .7;
}

#rl-app .b-footer.btn-toolbar.hide-mobile,
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: flex-start;
    height: unset;
    box-sizing: border-box;
}

#rl-app #V-SettingsMenu .b-footer,
#rl-app .b-footer.btn-toolbar.hide-mobile,
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled {
    margin: 0;
    padding: 0;
    bottom: 0;
}

#rl-app #V-SettingsMenu .b-footer,
#rl-app .b-footer.btn-toolbar {
    overflow: unset;
    padding: 3px;
}

#rl-app .b-footer .btn[data-bind*="toggleLeftPanel"] {
    width: unset !important;
}

/*
 * buttons
 */

#rl-app .btn,
#rl-app button,
#rl-app button.btn:not(.button-vue) {
    min-height: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 8px 14px;
    line-height: 20px;
    color: var(--color-main-text);
    background-color: var(--color-background-dark);
    border: 1px solid var(--color-border-dark) !important;
    border-radius: var(--border-radius-pill);
    font-size: var(--default-font-size);
}

#rl-app .btn.fontastic {
    border-radius: var(--border-radius-large);
}

#rl-app .btn.btn-thin {
    padding-right: 9px;
    padding-left: 9px;
}

#rl-app .btn.btn-transparent {
    background: unset !important;
    border: unset !important;
    opacity: 0.6;
}

#rl-app .btn:hover,
#rl-app .btn:focus,
#rl-app .btn:active,
#rl-app .btn.active {
    outline: none;
    opacity: unset;
}


#rl-app .btn.disabled, .btn[disabled],
#rl-app .btn.disabled:hover, .btn[disabled]:hover,
#rl-app .btn.disabled:focus, .btn[disabled]:focus,
#rl-app .btn.disabled:active, .btn[disabled]:active {
    opacity: .5;
    filter: saturate(0.7);
}

#rl-app .btn:not(.disabled, [disabled]):hover,
#rl-app button:not(.disabled, [disabled]):hover,
#rl-app .btn:not(.disabled, [disabled]):focus,
#rl-app button:not(.disabled, [disabled]):focus {
    border-color: var(--color-primary-element) !important;
}

#rl-app .btn:not(.disabled, [disabled]):active,
#rl-app button:not(.disabled, [disabled]):active,
#rl-app .btn:not(.disabled, [disabled]).active,
#rl-app button:not(.disabled, [disabled]).active {
    background-color: var(--color-main-background);
    color: var(--color-text-light);
}

#rl-app .btn,
#rl-app button,
#rl-app .btn.active,
#rl-app button.active,
#rl-app .btn:active,
#rl-app button:active,
#rl-app .btn.disabled,
#rl-app button.disabled,
#rl-app .btn[disabled],
#rl-app button[disabled] {
    text-shadow: none;
    box-shadow: none;
}

#rl-app .btn.buttonCompose {
    font-weight: bold;
    max-width: 100%;
    box-sizing: content-box !important;
}

#rl-app .btn.buttonCompose:active {
    color: var(--color-primary-text-dark);
}

#rl-app button.btn.buttonLogin,
#rl-app .btn.btn-success {
    color: var(--color-primary-element-text);
    background-color: var(--color-primary-element);
    border-color: var(--color-primary-element) !important;
}

#rl-app button.btn.buttonLogin:hover,
#rl-app .btn.btn-success:hover,
#rl-app button.btn.buttonLogin:focus,
#rl-app .btn.btn-success:focus {
    color: var(--color-primary-element-text);
    background-color: var(--color-primary-element-hover);
    border-color: var(--color-primary-element-hover) !important;
}

#rl-app .btn.btn-warning {
    color: var(--color-primary-element-text);
    background-color: var(--color-warning);
    border-color: var(--color-warning) !important;
}

#rl-app .btn.btn-warning:hover,
#rl-app .btn.btn-warning:focus {
    color: var(--color-primary-element-text);
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-hover) !important;
}

#rl-app .btn.btn-danger {
    color: var(--color-primary-element-text);
    background-color: var(--color-error);
    border-color: var(--color-error) !important;
}

#rl-app .btn.btn-danger:hover,
#rl-app .btn.btn-danger:focus {
    color: var(--color-primary-element-text);
    background-color: var(--color-error-hover);
    border-color: var(--color-error-hover) !important;
}

#rl-app .btn-group .btn,
#rl-app .btn-group button,
#rl-app .btn-group button.btn {
    border-radius: 0;
    margin: 0 0.5px;
}

#rl-app .btn-group .btn:first-of-type,
#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) {
    border-top-left-radius: var(--border-radius-pill);
    border-bottom-left-radius: var(--border-radius-pill);
}

#rl-app .btn-group .btn:last-of-type,
#rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) {
    border-top-right-radius: var(--border-radius-pill);
    border-bottom-right-radius: var(--border-radius-pill);
}

#rl-app .btn-group .btn.fontastic:first-of-type,
#rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])) {
    border-top-left-radius: var(--border-radius-large);
    border-bottom-left-radius: var(--border-radius-large);
}

#rl-app .btn-group .btn.fontastic:last-of-type,
#rl-app .btn-group .btn.fontastic:nth-last-child(1 of :not([style*="display: none;"])) {
    border-top-right-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large) ;
}

#rl-app .btn.buttonCompose,
#rl-app .b-folders .btn.buttonContacts,
#rl-app .b-footer.btn-toolbar .btn {
    box-sizing: border-box;
    padding: 4px 14px;
    line-height: 36px;
    height: 44px;
    min-width: fit-content;
    width: stretch;
    width: -moz-available;
    width: -webkit-fill-available;
    margin: 3px !important;

    font-size: var(--default-font-size);
    border-radius: var(--border-radius-pill) !important;
}

#rl-app .b-folders .btn.buttonCompose {
    min-width: 16px;
}

#rl-app .b-folders .btn.buttonContacts {
    min-width: 44px;
    width: 44px;
}

@media screen and (min-width: 1000px) {
    #rl-app .b-folders .btn.buttonContacts {
        transition: none;
    }
}

#rl-app .b-footer.btn-toolbar .btn,
#rl-app #V-SettingsPane .btn-toolbar .btn {
    background: transparent;
    border: unset !important;
}

#rl-app .b-footer.btn-toolbar .btn {
    text-align: left;
    font-size: 22px;
    user-select: none;
}

#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    overflow: hidden;
}

#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic {
    background-color: var(--color-main-background);
}

#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after {
    font-family: var(--font-face);
    font-size: var(--default-font-size);
    position: absolute;
    margin-left: 15px;
}

#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:after {
    content: 'SnappyMail-Settings';
}

#rl-app .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after {
    content: 'Create new folder';
}

html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic:after,
html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after {
    content: '';
}

#rl-app .icon-folder-add::before,
#rl-app .icon-resize-in::before {
    line-height: unset;
}

#rl-app span.fontastic {
    padding: 6px;
    border-radius: var(--border-radius);
}

#rl-app span.fontastic:hover,
#rl-app .b-footer.btn-toolbar .btn:hover,
#rl-app .b-footer.btn-toolbar .btn.fontastic:hover,
#rl-app #V-SettingsPane .btn-toolbar .btn:hover {
    background-color: var(--color-background-hover);
}

#rl-app span.fontastic:active,
#rl-app .b-footer.btn-toolbar .btn:active,
#rl-app .b-footer.btn-toolbar .btn.fontastic:active,
#rl-app #V-SettingsPane .btn-toolbar .btn:active {
    background-color: var(--color-primary-element-light);
}

#rl-app span.fontastic:focus,
#rl-app .b-footer.btn-toolbar .btn:focus,
#rl-app .b-footer.btn-toolbar .btn.fontastic:focus,
#rl-app #V-SettingsPane .btn-toolbar .btn:focus {
    outline: none;
}

#rl-app #V-MailMessageList .btn-toolbar {
    text-align: center;
}

#rl-app #V-MailMessageView .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit {
    padding: 4px 8px;
    min-height: 28px;
    height: 28px;
    opacity: 0.8;
}

#rl-app #V-MailMessageView .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:hover,
#rl-app #V-MailMessageView .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:focus,
#rl-app #V-MailMessageView .messageView .b-message .message-fixed-button-toolbar .btn.buttonEdit:active {
    opacity: unset;
}

/*
 * inputs
 */

#rl-app input {
    box-shadow: none;
}

#rl-app input:hover,
#rl-app input:active,
#rl-app input:focus {
    border-color: var(--color-primary-element);
}

#rl-app input:not([type="checkbox"]) {
    padding: 0 12px;
    font-size: var(--default-font-size);
    color: var(--color-main-text);
    background-color: unset;
    height: 36px;
    outline: none;
    border: 2px solid var(--color-border-dark);
    border-radius: var(--border-radius-large);
}

#rl-app input[type="search"]::-webkit-search-decoration,
#rl-app input[type="search"]::-webkit-search-cancel-button,
#rl-app input[type="search"]::-webkit-search-results-button,
#rl-app input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

#rl-app input::-webkit-outer-spin-button,
#rl-app input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#rl-app input[type=number] { 
    -moz-appearance: textfield;
    -webkit-appearance: textfield; 
    appearance: textfield;
    margin: 0;
    /* ? margin: 0 5px 0 0; */
}

/*
 * select
 */

#rl-app .emailaddresses,
#rl-app .select, #rl-app select {
    padding: 8px 12px;
    font-size: var(--default-font-size);
    color: var(--color-main-text);
    background-color: unset;
    height: 44px;
    outline: none;
    border: 2px solid var(--color-border-dark);
    border-radius: var(--border-radius-large);
    line-height: 24px;
    box-sizing: border-box;
}

#rl-app .emailaddresses:hover,
#rl-app .emailaddresses:active,
#rl-app .emailaddresses:focus,
#rl-app .select:hover, #rl-app select:hover,
#rl-app .select:active, #rl-app select:active,
#rl-app .select:focus, #rl-app select:focus {
    border-color: var(--color-primary-element);
}

select option {
    background-color: var(--color-background-dark);
    color: var(--color-main-text);
}

/*
 * email address select
 */

#rl-app .emailaddresses {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    /* max-height: padding*2 [top & bottom] + gap*(lines + 1) + li-height*lines [= li-height + li-padding*2 + li-border*2 ]  */
    max-height: calc(8px*2 + 5px*3 + 26px*2);
    height: auto;
    width: 100%;
}

#rl-app .emailaddresses.emailaddresses-focused {
    border: 2px solid var(--color-primary-element);
}

#rl-app .emailaddresses li[draggable] {
    line-height: 20px;
    padding: 2px 5px;
    color: var(--color-main-text);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--border-radius);
    margin: 0;
    box-shadow: none;
    background-color: unset;
}

#rl-app .emailaddresses li a {
    position: unset;
    color: var(--color-main-text);
}

/*
 * textareas
 */

#rl-app .squire-toolbar {
    height: 50px;
    padding: 5px;
    box-sizing: content-box;
    border: none;
}

#rl-app textarea,
#rl-app div[contenteditable],
#rl-app .squire-wysiwyg,
#rl-app .squire-plain {
    padding: 8px 12px;
    margin: unset;
    font-size: var(--default-font-size);
    color: var(--color-main-text);
    background-color: unset;
    outline: none;
    border: 2px solid var(--color-border-dark);
    border-radius: var(--border-radius-large);
}

#rl-app textarea:hover,
#rl-app div[contenteditable=true]:hover,
#rl-app .squire-wysiwyg:hover,
#rl-app .squire-plain:hover,
#rl-app textarea:active,
#rl-app div[contenteditable=true]:active,
#rl-app .squire-wysiwyg:active,
#rl-app .squire-plain:active,
#rl-app textarea:focus,
#rl-app div[contenteditable=true]:focus,
#rl-app .squire-wysiwyg:focus,
#rl-app .squire-plain:focus {
    border-color: var(--color-primary-element);
}

/*
 * checkboxes
 */

#rl-app .e-component.e-checkbox.material-design {
    width: fit-content !important;
    width: -moz-fit-content !important;
    display: flex;
    position: relative;
    align-items: center;
    user-select: none;
    height: 44px;
    border-radius: 44px;
    padding: 0 14px;
    margin: 0;
}

#rl-app .e-component.e-checkbox.material-design:hover,
#rl-app .e-component.e-checkbox.material-design:focus-within {
    background-color: var(--color-primary-light);
    outline: none;
}

#rl-app .e-component.e-checkbox.material-design:focus {
    outline: none;
}

#rl-app .e-component.e-checkbox input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] {
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

#rl-app .e-checkbox.material-design>div {
    position: relative;
    width: 18px;
    top: 2px;
}

input[type="checkbox"],
#rl-app .e-checkbox.material-design input+div {
    position: unset;
    height: 18px;
    width: 18px;
    flex-shrink: 0 !important;
    border: 2px solid var(--color-primary-element);
    border-radius: 2px;
    box-sizing: border-box;
    animation: none;
    transform: unset;
}

input[type="checkbox"]:checked,
#rl-app .e-checkbox.material-design input:checked+div {
    --svg-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'><path d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'></path></svg>");
    -webkit-mask-image: var(--svg-checked);
    mask-image: var(--svg-checked);
    background: var(--color-primary-element);
    border-width: 0;
    animation: none;
    transform: unset;
}

/*
 * message list
 */

#rl-app #V-MailMessageList {
    overflow: unset;
}

#rl-app #V-MailMessageList .messageList {
    min-width: 350px;
}

#rl-app .thm-message-list-top-toolbar,
#rl-app .thm-message-list-bottom-toolbar {
    background: unset !important;
}

#rl-app .messageList .second-toolbar {
    align-items: center;
}

#rl-app .messageList .b-footer {
    padding-bottom: 10px;
}

#rl-app .messageList .second-toolbar,
#rl-app .messageList .b-footer {
    border-color: var(--color-border);
}

#rl-app .messageList .inputSearch {
    max-width: unset;
}

#rl-app .messageList .closeSearch {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: unset;
    min-height: unset;
    height: 32px;
    font-size: 20px;
    line-height: 30px;
}

#rl-app .messageList .checkboxCheckAll {
    margin: 0 12px;
}

#rl-app .messageList .checkboxCheckAll:hover,
#rl-app .messageList .checkboxCheckAll:focus {
    color: var(--color-primary-element);
}

#rl-app .messageList .checkboxCheckAll:active {
    color: var(--color-primary-element-hover);
}

html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll {
    display: none;
}

#rl-app .messageList .btn.buttonMoreSearch {
    background: unset;
    border-radius: var(--border-radius-large);
    margin: 0 0 0 8px;
    line-height: 20px !important;
}

#rl-app .messageList .checkboxCheckAll,
#rl-app .messageList .btn.buttonMoreSearch {
    font-size: var(--default-font-size);
    height: 28px;
    line-height: 28px;
}

#rl-app .messageList .b-content .listThreadUidDesc {
    margin: 8px;
    color: var(--color-main-text);
    background: unset;
    border: solid 1px;
    border-radius: var(--border-radius-large);
    border-color: var(--color-border-dark);
}

#rl-app .messageList .b-content .listThreadUidDesc:hover,
#rl-app .messageList .b-content .listThreadUidDesc:focus {
    background: var(--color-background-hover);
}

#rl-app .messageList .b-content .listThreadUidDesc:active {
    background-color: var(--color-primary-light);
}

#rl-app .messageList .b-content .listSearchDesc {
    border-color: var(--color-border);
}

#rl-app .messageList .b-content .listError {
    color: var(--color-error);
}

#rl-app .messageList .b-content .listDragOver.dragOverEnter {
    background-color: var(--color-background-dark);
    border-radius: var(--border-radius);
    margin: 5px;
}

#rl-app .messageList .b-content .listDragOver,
#rl-app .messageList .b-content .listEmptyMessage,
#rl-app .messageList .b-content .listError,
#rl-app .messageList .b-content .listLoading {
    color: var(--color-text-lighter);
}

#rl-app .messageListItem .checkboxMessage {
    border-color: var(--color-text-lighter);
    color: var(--color-text-lighter);
}

#rl-app .messageListItem .checkboxMessage:hover,
#rl-app .messageListItem .checkboxMessage:focus {
    background-color: var(--color-background-darker);
}

#rl-app .messageListItem .checkboxMessage:active {
    background-color: var(--color-primary-light-hover);
}

#rl-app .messageListItem .threads-len {
    color: var(--color-text-light);
    border-color: var(--color-text-light);
    padding: 0 4px;
}

#rl-app .messageListItem .threads-len:hover,
#rl-app .messageListItem .threads-len:focus {
    background-color: var(--color-background-darker);
    border-color: unset;
}

#rl-app .messageListItem .threads-len:active {
    background-color: var(--color-primary-light-hover);
}

#rl-app .messageListItem {
    padding: 8px;
    margin: 2px 0;
    border-bottom: unset;
    border-radius: var(--border-radius);
}

#rl-app .messageListItem,
#rl-app .messageListItem.focused {
    background-color: var(--color-background);
    border-left-color: var(--color-border);
}

#rl-app .messageListItem:hover,
#rl-app .messageListItem.focused:hover {
    background-color: var(--color-background-hover);
    border-left-color: var(--color-primary-light-hover);
}

#rl-app .messageListItem.selected,
#rl-app .messageListItem.selected:hover {
    background-color: var(--color-primary-element-light) !important;
    border-left-color: var(--color-primary-element-light-text);
}

#rl-app .messageListItem.unseen,
#rl-app .messageListItem.hasUnseenSubMessage {
    background-color: unset;
    border-left-color: var(--color-primary-element);
}

#rl-app .messageListItem.unseen.focused,
#rl-app .messageListItem.unseen.focused:hover,
#rl-app .messageListItem.hasUnseenSubMessage.focused,
#rl-app .messageListItem.hasUnseenSubMessage.focused:hover {
    background-color: var(--color-primary-light);
    border-left-color: var(--color-primary-element);
}

#rl-app .messageListItem.unseen:hover,
#rl-app .messageListItem.hasUnseenSubMessage:hover {
    background-color: var(--color-background-hover);
    border-left-color: var(--color-primary-element-hover);
}

#rl-app .messageListItem.hasUnseenSubMessage .threads-len {
    border-color: var(--color-primary-element);
    border-width: 2px;
    font-weight: 700;
}

#rl-app .messageListItem.hasUnseenSubMessage .threads-len:hover {
    border-color: var(--color-primary-element-hover);
}

#rl-app .messageListItem.checked {
    background-color: unset;
    border-left-color: var(--color-primary-light-text);
}

#rl-app .messageListItem.checked.focused {
    background-color: inherit;
    border-left-color: var(--color-primary-element-light-text);
}

#rl-app .messageListItem.checked:hover,
#rl-app .messageListItem.checked.focused:hover {
    background-color: var(--color-background-hover);
    border-left-color: inherit;
}

#rl-app .messageList .groupLabel {
    background-color: var(--color-background-dark);
    border-radius: var(--border-radius);
    margin: 2px 0;
}

#rl-app #messagesDragImage {
    padding: 5px 5px 5px 10px;
    color: var(--color-text-lighter);
    background-color: var(--color-background-darker);
    border-radius: var(--border-radius);
    box-shadow: 0 0 4px var(--color-box-shadow);
    height: unset;
    min-width: unset;
}

/*
 * message view
 */

#rl-app #V-MailMessageView {
    bottom: 0;
}

#rl-app #V-MailMessageList .btn-toolbar,
#rl-app #V-MailMessageView .btn-toolbar {
    padding: 10px;
}

#rl-app .messageList,
#rl-app .messageView {
    height: calc(100% - 60px);
}

html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar {
    /* TODO Improve mobile experience */
}

#rl-app .messageView .b-message-view-desc,
#rl-app .messageView .b-message-view-checked-helper {
    color: var(--color-text-lighter);
}

#rl-app .messageView .b-message-view-desc.error {
    color: var(--color-error);
}

#rl-app meter::-webkit-meter-bar {
    background-color: var(--color-border-dark);
    border-color: var(--color-border-dark);
    border-width: 2px;
    height: 10px;
}

#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-optimum-value {
    background-color: var(--color-success);
    border-radius: var(--border-radius-pill);
}

#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-suboptimum-value {
    background-color: var(--color-warning);
    border-radius: var(--border-radius-pill);
}

#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-even-less-good-value {
    background-color: var(--color-error);
    border-radius: var(--border-radius-pill);
}

#rl-app .messageView .messageItemHeader .hasVirus {
    background: unset;
    border: solid 2px var(--color-error);
    border-radius: var(--border-radius);
    margin: 5px;
}

#rl-app .messageView .messageItemHeader .subject {
    line-height: 30px;
    height: 30px;
}

#rl-app .messageView .openpgp-control.encrypted,
#rl-app .messageView .openpgp-control.signed {
    border-radius: var(--border-radius);
}

#rl-app #V-MailMessageView .b-message-view-backdrop {
    background-color: var(--color-main-background-blur);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#rl-app #V-MailMessageView .b-message-view-backdrop .backdrop-message {
    background-color: var(--color-main-background);
    border: solid 1px var(--color-primary);
    border-radius: var(--border-radius-large);
    text-shadow: none;
    margin: 10px;
}

#rl-app .messageView .messageAssignedTags {
    margin: 0 5px;
}

#rl-app .messageView .messageAssignedTags span {
    border-radius: var(--border-radius-pill);
    background: unset;
    padding: 2px 5px;
}

#rl-app #messageItem .bodySubHeader {
    background-color: unset;
}

#rl-app #messageItem .bodySubHeader>* {
    border-color: var(--color-border);
}

#rl-app #messageItem .readReceipt,
#rl-app #messageItem .showImages {
    margin: 8px;
    padding: 10px;
    color: var(--color-main-text);
    border: solid 1px var(--color-primary-element);
    background-color: var(--color-primary-light);
    border-radius: var(--border-radius-large);
}

#rl-app #messageItem .showImages>.btn,
#rl-app #messageItem .showImages>.btn-group {
    margin: 2px;
}

#rl-app #messageItem .readReceipt:hover {
    background-color: var(--color-primary-light-hover);
}

#rl-app .messageView .messageItemHeader,
#rl-app #messageItem .attachmentsPlace {
    background-color: unset;
    border-color: var(--color-border);
    color: var(--color-main-text);
}

#rl-app #messageItem .attachmentsPlace {
    border-top: 1px solid var(--color-border);
    top: -1px;
}

#rl-app #messageItem .attachmentsPlace .controls-handle {
    -webkit-user-select: none;
    user-select: none;
}

#rl-app #messageItem .attachmentsControls {
    background-color: unset;
    border-color: var(--color-border);
    -webkit-user-select: none;
    user-select: none;
}

#rl-app #messageItem .attachmentsControls .icon-file-archive,
#rl-app #messageItem .attachmentsControls .fontastic {
    color: var(--color-main-text);
}

#rl-app #messageItem .attachmentListSimple .attachmentName {
    margin: 5px;
}

/*
 * attachment item
 */

#rl-app .attachmentItem {
    background-color: var(--color-background-dark);
    border-radius: var(--border-radius);
    box-shadow: none;
    padding: 2px;
}

#rl-app .attachmentItem:hover,
#rl-app .attachmentItem:active {
    background-color: var(--color-background-darker);
}

#rl-app .attachmentItem:focus {
    outline: none;
}

#rl-app .attachmentItem .iconProgress {
    background-color: var(--color-background-darker);
}

#rl-app .attachmentItem .iconBG {
    font-weight: 700;
    line-height: 48px;
    font-size: unset;
    text-shadow: unset;
}

#rl-app .attachmentItem .attachmentNameParent {
    border-color: var(--color-border-dark);
}

#rl-app .attachmentItem .iconMain,
#rl-app .attachmentItem .iconPreview {
    color: var(--color-text-light);
}

/*
 * message flags
 */

:root {
    --msgflag-\$label1-color: #ae2c35;
    --msgflag-\$label1-color-hover: #e13a45;
    --msgflag-\$label2-color: #cc9827;
    --msgflag-\$label2-color-hover: #ffbf31;
    --msgflag-\$label3-color: #005235;
    --msgflag-\$label3-color-hover: #008557;
    --msgflag-\$label4-color: #005cc4;
    --msgflag-\$label4-color-hover: #0074f8;
    --msgflag-\$label5-color: #5631c0;
    --msgflag-\$label5-color-hover: #6d3ff3;

    --msgflag-\\flagged-color: #ffca32;
}

#rl-app .msgflag-\$label5:not(.focused) { border-color: var(--msgflag-\$label5-color); }
#rl-app .msgflag-\$label4:not(.focused) { border-color: var(--msgflag-\$label4-color); }
#rl-app .msgflag-\$label3:not(.focused) { border-color: var(--msgflag-\$label3-color); }
#rl-app .msgflag-\$label2:not(.focused) { border-color: var(--msgflag-\$label2-color); }
#rl-app .msgflag-\$label1:not(.focused) { border-color: var(--msgflag-\$label1-color); }

#rl-app .msgflag-\$label5.focused:not(.selected) { border-color: var(--msgflag-\$label5-color) !important; }
#rl-app .msgflag-\$label4.focused:not(.selected) { border-color: var(--msgflag-\$label4-color) !important; }
#rl-app .msgflag-\$label3.focused:not(.selected) { border-color: var(--msgflag-\$label3-color) !important; }
#rl-app .msgflag-\$label2.focused:not(.selected) { border-color: var(--msgflag-\$label2-color) !important; }
#rl-app .msgflag-\$label1.focused:not(.selected) { border-color: var(--msgflag-\$label1-color) !important; }

#rl-app .msgflag-\$label5:not(.focused):hover { border-color: var(--msgflag-\$label5-color-hover); }
#rl-app .msgflag-\$label4:not(.focused):hover { border-color: var(--msgflag-\$label4-color-hover); }
#rl-app .msgflag-\$label3:not(.focused):hover { border-color: var(--msgflag-\$label3-color-hover); }
#rl-app .msgflag-\$label2:not(.focused):hover { border-color: var(--msgflag-\$label2-color-hover); }
#rl-app .msgflag-\$label1:not(.focused):hover { border-color: var(--msgflag-\$label1-color-hover); }

#rl-app .msgflag-\$label1:not(.focused), #rl-app .msgflag-\$label1 .checkboxMessage,
#rl-app .msgflag-\$label2:not(.focused), #rl-app .msgflag-\$label2 .checkboxMessage,
#rl-app .msgflag-\$label3:not(.focused), #rl-app .msgflag-\$label3 .checkboxMessage,
#rl-app .msgflag-\$label4:not(.focused), #rl-app .msgflag-\$label4 .checkboxMessage,
#rl-app .msgflag-\$label5:not(.focused), #rl-app .msgflag-\$label5 .checkboxMessage {
    background-color: unset;
    color: unset;
}

#rl-app .messageListItem.msgflag-\$label1:hover,
#rl-app .messageListItem.msgflag-\$label2:hover,
#rl-app .messageListItem.msgflag-\$label3:hover,
#rl-app .messageListItem.msgflag-\$label4:hover,
#rl-app .messageListItem.msgflag-\$label5:hover {
    background-color: var(--color-background-hover);
}

#rl-app a.msgflag-\$label1,
#rl-app a.msgflag-\$label2,
#rl-app a.msgflag-\$label3,
#rl-app a.msgflag-\$label4,
#rl-app a.msgflag-\$label5 {
    border-left: solid 5px;
}

#rl-app .btn-group.show .dropdown-menu div li a[class^='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5),
#rl-app .btn-group.show .dropdown-menu div li a[class*='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5) {
    border-left: solid 5px transparent;
}

#rl-app .b-folders .is-flagged .flag-icon::after,
#rl-app .messageListItem.hasFlaggedSubMessage .flagParent::after,
#rl-app .messageListItem.msgflag-\\flagged .flagParent::after {
    color: var(--msgflag-\\flagged-color);
}

/*
 * dropdown menus
 */

#rl-app .dropdown.show {
    box-shadow: none;
}

#rl-app .dropdown-menu {
    background-color: var(--color-main-background);
    filter: drop-shadow(0 1px 5px var(--color-box-shadow));
    border-radius: var(--border-radius-large);
    color: var(--color-main-text);
    padding: 4px;
}

#rl-app .dropdown-menu a {
    background-color: unset;
    color: unset;
    height: 22px;
    line-height: 22px;
    border-radius: 3px;
    margin: 2px;
    box-sizing: content-box;
}

#rl-app .dropdown-menu li.disabled > a,
#rl-app .dropdown-menu li.disabled > a:hover,
#rl-app .dropdown-menu li.disabled > a:focus,
#rl-app .dropdown-menu li.disabled > a:active {
    opacity: .5;
    filter: saturate(0.7);
}

#rl-app .dropdown-menu li:not(.disabled) > a:hover,
#rl-app .dropdown-menu li:not(.disabled) > a:focus {
    background-color: var(--color-background-hover);
    color: unset;
    opacity: unset;
}

#rl-app .dropdown-menu li:not(.disabled) > a:active {
    background-color: var(--color-primary-light);
}

#rl-app .dropdown-menu *+.dividerbar {
    border-color: var(--color-border);
}

#rl-app .dropdown-menu::-webkit-scrollbar-track-piece {
    background-color: inherit;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

/*
 * account selector
 */

#rl-app #V-SystemDropDown .btn-toolbar.g-ui-user-select-none {
    border: solid 1px var(--color-border-dark);
    border-radius: var(--border-radius-large);
    height: 36px;
    padding: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: content-box;
}

#rl-app #V-SystemDropDown .accountPlace {
    background: unset;
    color: unset;
    text-shadow: none;
    border-right-color: var(--color-border);
}

#rl-app #V-SystemDropDown #top-system-dropdown-id {
    background-color: unset;
    border: unset !important;
    border-radius: var(--border-radius-large) !important;
    height: 20px;
}

#rl-app #V-SystemDropDown #top-system-dropdown-id:hover,
#rl-app #V-SystemDropDown #top-system-dropdown-id:focus {
    background-color: var(--color-background-hover);
}

#rl-app #V-SystemDropDown #top-system-dropdown-id:active {
    background-color: var(--color-background-dark);
}

/*
 * settings 
 */

#rl-app #V-SettingsPane {
    margin: 62px 0 8px 0;
    height: calc(100% - 62px - 8px);
    background-color: unset;
    box-shadow: none;
    border: none;
}

#rl-app #V-SettingsPane .btn-toolbar {
    padding: 8px;
}

#rl-app .legend,
#rl-app #V-AdminPane hr,
#rl-app #V-SettingsPane hr {
    color: unset;
    border-color: var(--color-border);
}

#rl-app .form-horizontal .control-group {
    display: flex;
    align-items: center;
    margin-left: 0;
}

#rl-app .form-horizontal .control-group {
    margin-bottom: 1em;
}

#rl-app .control-group {
    margin-bottom: 0.5em;
}

#rl-app .table-bordered,
#rl-app .table td,
#rl-app .table th {
    border-color: var(--color-border-dark);
}

#rl-app .table-hover tbody tr:hover td,
#rl-app .table-hover tbody tr:hover th {
    background-color: var(--color-background-hover);
}

#rl-app .table-striped tbody tr:nth-child(odd) td,
#rl-app .table-striped tbody tr:nth-child(odd) th {
    background-color: var(--color-background-dark);
}

#rl-app #V-Settings-Themes figure,
#rl-app #V-Settings-Themes img {
    border-radius: var(--border-radius-large);
}

#rl-app #V-Settings-Themes figure:not(.selected):hover {
    background-color: var(--color-background-hover);
    border-color: transparent;
}

#rl-app #V-Settings-Themes figure:not(.selected):active {
    background-color: var(--color-primary-element-light);
}

#rl-app #V-Settings-Themes figure:not(.selected):focus {
    outline: none;
}

#rl-app #V-Settings-Themes figure.selected {
    background-color: var(--color-primary-element);
    border-color: transparent;
    color: var(--color-primary-text);
}

/* hide additional theme settings, as these are made via Nextcloud theming */

/* fonts */
#rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal:nth-of-type(3) {
    display: none !important;
}

/* background */
#content.app-snappymail #rl-app #V-SettingsPane #V-Settings-Themes .form-horizontal:nth-of-type(4) {
    display: none !important;
}

/*
 * admin settings 
 */

#rl-app #V-AdminPane {
    margin: 8px 0px;
    height: calc(100% - 8px - 8px);
    background-color: unset;
    box-shadow: none;
    border: none;
}

#rl-app #V-Settings-Config th {
    background-color: var(--color-background-dark);
}

#rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] {
    align-self: self-start;
}

#rl-app #V-Settings-General label[data-i18n="TAB_GENERAL/LABEL_ATTACHMENT_SIZE_LIMIT"] ~ div .alert.alert-info {
    margin-left: -130px;
}

#rl-app #V-Settings-Domains .btn[data-i18n="GLOBAL/TEST"] {
    margin-left: 1rem;
}

/*
 * scrollbar
 */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar);
    border-radius: var(--border-radius-large);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track-piece {
    background-color: transparent;
}

::-webkit-resizer {
    border: 10px solid transparent;
    border-radius: var(--border-radius);
    border-bottom-color: var(--color-border-dark);
    border-right-color: var(--color-border-dark);
}

#rl-app::selection {
    background-color: var(--color-primary-element);
    color: var(--color-primary-text);
}

/* TODO: Improve popup layout and theming */
/*
 * Popups
 */

#rl-app dialog {
    background: var(--color-main-background);
    color: var(--color-main-text);
    border-radius: var(--border-radius-large);
    filter: drop-shadow(0 1px 5px var(--color-box-shadow));
    box-shadow: none;
    border-color: var(--color-border);
}

#rl-app dialog > header,
#rl-app dialog > footer {
    border-color: var(--color-border);
}

#rl-app dialog > footer .btn+.btn,
#rl-app dialog > footer button+button {
    margin: 0 0 0 5px;
}

#rl-app #V-PopupsPlugin .help-block {
    margin-left: 5px;
}

#rl-app #V-PopupsIdentity .e-signature-place {
    border: none;
}

#rl-app #V-PopupsDomain .domain-form .tab-content input,
#rl-app #V-PopupsDomain .domain-form .tab-content select {
    height: 44px;
    padding: 8px 12px;
}

#rl-app #V-PopupsLanguages label {
    background-color: var(--color-background-dark) !important;
    border-color: var(--color-border);
    border-radius: var(--border-radius);
    padding: 8px 15px;
}

#rl-app #V-PopupsLanguages label:hover {
    border-color: var(--color-primary-element);
    background-color: unset;
}

#rl-app #V-PopupsLanguages label.user {
    background-color: var(--color-main-background) !important;
    color: var(--color-text-light);
}

#rl-app #V-PopupsLanguages label.selected {
    background-color: var(--color-primary-element-light) !important;
    border-color: var(--color-primary-element);
}

/*
 * compose
 */

#rl-app #V-PopupsCompose header {
    background-color: unset;
    color: unset;
}

#rl-app #V-PopupsCompose header .close,
#rl-app #V-PopupsCompose header .minimize-custom {
    border-color: unset;
}

#rl-app #V-PopupsCompose .b-header {
    background: unset;
}

#rl-app #V-PopupsCompose .b-header .error-to {
    color: var(--color-error);
}

#rl-app #V-PopupsCompose .pull-right>.btn,
#rl-app #V-PopupsCompose .pull-right>.btn-group {
    margin-left: 3px;
}

#rl-app #V-PopupsCompose .no-attachments-desc {
    text-shadow: unset;
}

#rl-app #V-PopupsCompose .attachmentAreaParent .attachmentItem:hover,
#rl-app #V-PopupsCompose .attachmentAreaParent .attachmentItem:active {
    background-color: var(--color-background-dark);
}

#rl-app #V-PopupsCompose .b-attachment-place {
    border-color: var(--color-border);
    background-color: var(--color-background-dark);
}

#rl-app #V-PopupsCompose .b-attachment-place.dragAndDropOver {
    border-color: var(--color-border);
}

/*
 * nextcloud file picker
 */

#rl-app #V-PopupsCompose .btn[data-bind*="nextcloudAttach"] {
    font-size: 0;
}

#rl-app #V-PopupsCompose .btn[data-bind*="nextcloudAttach"]::before {
    display: block;
    content: "";
    height: 100%;
    width: 30px;
    --nc-logo: url("data:image/svg+xml,<svg height='29' width='64' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='m32.028 0c-6.6304 0-12.249 4.4952-13.991 10.564-1.5172-3.259-4.7762-5.5066-8.5971-5.5066-5.1694 0-9.4398 4.2704-9.4398 9.496s4.2704 9.4961 9.496 9.4961c3.7647 0 7.0799-2.2476 8.5971-5.5066 1.6856 6.0685 7.3046 10.564 13.935 10.564 6.5742 0 12.193-4.4389 13.991-10.451 1.5171 3.1466 4.7761 5.338 8.4846 5.338 5.2257 0 9.4961-4.2704 9.4961-9.4961s-4.2704-9.4398-9.4961-9.4398c-3.7085 0-6.9675 2.1914-8.4846 5.338-1.7981-5.9561-7.3608-10.395-13.991-10.395zm0 5.5628c5.0009 0 8.9903 3.9894 8.9903 8.9903s-3.9894 8.9904-8.9903 8.9904-8.9903-3.9895-8.9903-8.9904 3.9894-8.9903 8.9903-8.9903zm-22.532 5.057c2.1914 0 3.9333 1.7419 3.9333 3.9333s-1.7419 3.9333-3.9333 3.9333-3.9332-1.7419-3.9332-3.9333 1.7419-3.9333 3.9332-3.9333zm45.008 0c2.1915 0 3.9333 1.7419 3.9333 3.9333s-1.7418 3.9333-3.9333 3.9333-3.9332-1.7419-3.9332-3.9333c0.0562-2.1914 1.7418-3.9333 3.9332-3.9333z' fill-rule='nonzero'></path></svg>");
    -webkit-mask-image: var(--nc-logo);
    mask-image: var(--nc-logo);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 30px;
    mask-size: 30px;
    background-color: var(--color-main-text);
}

#rl-app #V-PopupsNextcloudFiles {
    user-select: none;
}

#rl-app #V-PopupsNextcloudFiles li {
    line-height: unset;
}

#rl-app #V-PopupsNextcloudFiles li[data-icon],
#rl-app #V-PopupsNextcloudFiles li:has(>button[name="create"]),
#rl-app #V-PopupsNextcloudFiles li details summary {
    padding: 5px 10px;
    display: flex;
    align-items: center !important;
    overflow-wrap: anywhere;
}

#rl-app #V-PopupsNextcloudFiles li button,
#rl-app #V-PopupsNextcloudFiles li input {
    margin-left: auto !important;
    align-self: center;
}

#rl-app #V-PopupsNextcloudFiles li input {
    min-width: 100px;
    flex-shrink: 1;
}

#rl-app #V-PopupsNextcloudFiles li button {
    flex-shrink: 0;
}

#rl-app #V-PopupsNextcloudFiles li button[name="create"] {
    margin-left: 10px !important;
}

#rl-app #V-PopupsNextcloudFiles li:not(:last-child),
#rl-app #V-PopupsNextcloudFiles li details[open]>summary {
    border-bottom: 1px solid var(--color-border);
}

#rl-app #V-PopupsNextcloudFiles li details[open]>summary {
    background-color: var(--color-primary-light);
    border-bottom-color: var(--color-primary-element-hover);
}

#rl-app #V-PopupsNextcloudFiles li:hover {
    background-color: unset;
}

#rl-app #V-PopupsNextcloudFiles li[data-icon]:hover,
#rl-app #V-PopupsNextcloudFiles li details:not([open]):hover,
#rl-app #V-PopupsNextcloudFiles li details[open]>summary:hover {
    background-color: var(--color-background-hover);
}

#rl-app #V-PopupsNextcloudFiles li details summary[data-icon] {
    list-style-type: none;
}

#rl-app #V-PopupsNextcloudFiles li details summary[data-icon]::before {
    color: var(--color-primary);
    font-size: 20px;
}

#rl-app #V-PopupsNextcloudFiles li[data-icon]::before,
#rl-app #V-PopupsNextcloudFiles li details summary[data-icon]::before {
    margin: 5px 10px 5px 0;
}

/*
 * nextcloud calendar select
 */

#rl-app #V-PopupsNextcloudCalendars li {
    padding: 5px;
    display: flex;
    align-items: center !important;
    border-bottom: solid 1px var(--color-border);
}

#rl-app #V-PopupsNextcloudCalendars li button {
    margin-left: auto !important;
    align-self: center;
}

/*
 * contacts
 */

#rl-app #V-PopupsContacts .right,
#rl-app #V-PopupsContacts .b-list-toolbar,
#rl-app #V-PopupsContacts .b-list-footer-toolbar,
#rl-app #V-PopupsContacts .b-view-content-toolbar {
    border-color: var(--color-border);
}

#rl-app #V-PopupsContacts .b-list-toolbar {
    height: 55px;
}

#rl-app #V-PopupsContacts .b-list-toolbar .e-search {
    margin: 9px 5px;
    width: unset;
}

#rl-app #V-PopupsContacts .b-view-content {
    height: calc(100% - 72px);
    margin-top: 20px;
}

#rl-app #V-PopupsContacts .b-list-content {
    height: calc(100% - 35px - 72px);
}

#rl-app #V-PopupsContacts .e-contact-item {
    padding: 4px;
    margin: 2px 4px;
    max-height: unset;
    border-bottom: unset;
    border-radius: var(--border-radius);
}

#rl-app #V-PopupsContacts .e-contact-item,
#rl-app #V-PopupsContacts .e-contact-item.focused {
    background-color: var(--color-background);
    border-left-color: var(--color-border);
}

#rl-app #V-PopupsContacts .e-contact-item:hover,
#rl-app #V-PopupsContacts .e-contact-item.focused:hover {
    background-color: var(--color-background-hover);
    border-left-color: var(--color-primary-light-hover);
}

#rl-app #V-PopupsContacts .e-contact-item.selected,
#rl-app #V-PopupsContacts .e-contact-item.selected:hover {
    background-color: var(--color-primary-element-light);
    border-left-color: var(--color-primary-element-light-text);
}

#rl-app #V-PopupsContacts .e-contact-item.checked {
    background-color: unset;
    border-left-color: var(--color-primary-light-text);
}

#rl-app #V-PopupsContacts .e-contact-item.checked.focused {
    background-color: inherit;
    border-left-color: var(--color-primary-element-light-text);
}

#rl-app #V-PopupsContacts .e-contact-item.checked:hover,
#rl-app #V-PopupsContacts .e-contact-item.checked.focused:hover {
    background-color: var(--color-background-hover);
    border-left-color: inherit;
}

/*
 * tabs
 */

#rl-app .tabs > [id^=tab]:checked+label {
    background-color: var(--color-main-background);
    border-color: var(--color-primary-element);
    border-bottom-color: transparent;
}

#rl-app .tabs > label {
    margin: 0 2px -1px 2px;
    border-radius: 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

#rl-app .tabs > label:hover {
    border-color: transparent;
    border-bottom-color: var(--color-primary-element);
    background-color: var(--color-background-hover)
}

#rl-app .tabs .tab-content {
    border-top: solid 1px;
    border-radius: 4px;
    border-color: var(--color-primary-element);
}