html {
    --link-color: var(--text-color);
    --header-color: #008dc3;
    --footer-bg: #0d4358;
    --on-footer-bg: var(--on-background-color);
    --on-primary-color: #fff;
    --textfield-bg: var(--header-color);
    --primary-color: #ff58aa;
    --secondary-color: #ed008a;

    --background-color: #008dc3;
    --on-background-color: white;

    --selection-color: var(--secondary-color);
    --on-selection-color: white;
    --scrollbar-track: var(--footer-bg);
    --scrollbar-handle: white;
    --scrollbar-hanlde-hover: var(--background-color);

    --text-color: var(--on-background-color);
    --font-size: 1rem;
    --text-shadow: -1px -1px 15px #c2f3ff42, -1px -1px 2px #ffffff3d,
        1px 1px 2px #ffffff3d;
    --background-color-light: #53c0ea;
    --background-color-dark: #006d97;
}

html.dark-mode {
    --text-shadow: -1px -1px 18px #00000042, -1px -1px 2px #0000003d, 1px 1px 2px #0000003d;
}

html {
    --body-padding: .4rem;
    --background-color-blue: transparent;
    --background-color-turquoise: transparent;
    --box-shadow: none;
    --textfield-bg: #002408;
    /* background-color: var(--background-color); */
    color: var(--on-background-color);
    scroll-behavior: smooth;
    background-repeat: repeat-y;
    background-size: 100%;
    color: var(--text-color);
}

@font-face {
    font-family: "Sunny-Spells";
    font-display: swap;
    src:
        local("Sunny Spells"),
        url("https://z10.info/styles/fonts/Sunny-Spells.woff2") format("woff2");
    size-adjust: 150%;
    descent-override: 0%;
}

#layout-content,
#layout-list,
#layout-sidebar,
#layout>div>.footer,
#layout>div>.header,
.menu.pagenav.pagenav-list,
.menu.pagenav.pagenav-list+.navlist,
.menu.pagenav.pagenav-list.expanded+.navlist,
.popup .listbox .footer,
html.dark-mode body {
    background-color: transparent;
}

html #layout {
    background-color: var(--background-color-light);
    background-image: url(/imgs/ss24/water_background_w500.webp);
    background-size: 100% auto;
    background-repeat: repeat-y;
}

.dark-mode #layout {
    background-color: var(--background-color-dark);
    background-image: url(/imgs/ss24/water_background_dark_w500.webp);
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /** double resolution **/
    html #layout {
        background-image: url(/imgs/ss24/water_background_w1000.webp);
        background-size: 100% auto;
        background-repeat: repeat-y;
    }

    .dark-mode #layout {
        background-image: url(/imgs/ss24/water_background_dark_w1000.webp);
    }
}

@media screen and (min-width: 600px) {
    html #layout {
        background-image: url(/imgs/ss24/water_background_w1080.webp);
    }

    #messagelist-content {
        background: none;
    }
}

@media screen and (min-width: 1200px) {
    html #layout {
        background-image: url(/imgs/ss24/water_background_w1920.webp);
    }

    html.dark-mode #layout {
        background-image: url(/imgs/ss24/water_background_dark_w2339.webp);
    }

    html.dark-mode #layout {
        background-image: url(/imgs/ss24/water_background_dark.webp);
    }
}


::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-handle);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hanlde-hover);
}

::selection {
    background: var(--selection-color);
    color: var(--on-selection-color);
}

#layout-content .btn-primary,
#layout-content .formbuttons .btn-primary {
    background-color: var(--primary-color);
    font-family: "Sunny-Spells";
    border: none;
}

.dark-mode #layout-content .btn-primary,
.dark-mode #layout-content .formbuttons .btn-primary {
    background-color: var(--secondary-color);
}

.dark-mode #layout-content .btn-primary:hover,
.dark-mode #layout-content .formbuttons .btn-primary:hover {
    background-color: var(--primary-color);
}

html.dark-mode .btn-primary:hover:not(:disabled) {
    background-color: var(--primary-color);
}

#layout-content .custom-file-label:focus,
#layout-content .form-control:focus,
#layout-content .custom-file-label,
#layout-content .form-control,
#layout-content .input-group-text.icon,
#layout .html-editor {
    background-color: var(--background-color-light);
    color: black;
    border-color: white;
}

.compose-headers .form-group {
    text-shadow: var(--text-shadow);
}

.dark-mode #layout-content .custom-file-label:focus,
.dark-mode #layout-content .form-control:focus,
.dark-mode #layout-content .custom-file-label,
.dark-mode #layout-content .form-control,
.dark-mode #layout-content .input-group-text.icon,
.dark-mode #layout .custom-select,
.dark-mode #layout .btn-secondary,
html.dark-mode .html-editor .editor-toolbar,
.dark-mode #layout .html-editor,
html.dark-mode .tox .tox-dialog,
html.dark-mode .tox .tox-dialog__body,
html.dark-mode .tox .tox-dialog__footer,
html.dark-mode .tox .tox-dialog__header,
html.dark-mode .tox .tox-dialog__title,
html.dark-mode .custom-file-label,
html.dark-mode .form-control,
html.dark-mode .custom-file-label:focus,
html.dark-mode .form-control:focus {
    background-color: var(--background-color-dark);
    color: white;
    text-shadow: var(--text-shadow);
    border-color: #2c373a;
}

html.dark-mode .tox .tox-toolbar-overlord>div {
    background-color: var(--background-color-dark);
}

html.dark-mode .tox .tox-split-button svg,
html.dark-mode .tox .tox-swatches__picker-btn svg,
html.dark-mode .tox .tox-tbtn svg {
    fill: white !important;
}

.tox .tox-tbtn:hover {
    background-color: var(--secondary-color);
}

html.dark-mode .tox .tox-split-button:focus,
html.dark-mode .tox .tox-split-button:hover,
html.dark-mode .tox .tox-swatches__picker-btn:focus,
html.dark-mode .tox .tox-swatches__picker-btn:hover,
html.dark-mode .tox .tox-tbtn:focus,
html.dark-mode .tox .tox-tbtn:hover,
html.dark-mode .html-editor .editor-toolbar .mce-i-html:focus,
html.dark-mode .html-editor .editor-toolbar .mce-i-html:hover {
    background-color: var(--primary-color);
}

html.dark-mode .tox .tox-tbtn--enabled {
    background-color: var(--secondary-color);
}

html.dark-mode .tox .tox-dialog__footer .tox-button {
    background-color: var(--secondary-color);
}

html.dark-mode .tox .tox-dialog__footer .tox-button:hover {
    background-color: var(--primary-color);
}

html.dark-mode .file-upload {
    backdrop-filter: blur(2px);
    border-color: #2c373a;
}

html.dark-mode .file-upload.droptarget.hover {
    backdrop-filter: blur(1rem);
    background-color: unset;
}

html.dark-mode .custom-switch .custom-control-label::before {
    background-color: var(--background-color-dark);
}

#layout .custom-switch .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--primary-color);
}

#layout-content .form-control::placeholder,
#layout-content .form-control:focus::placeholder,
html.dark-mode #contacthead.readonly .source.row,
html.dark-mode #login-footer,
html.dark-mode .contactlist span.email,
html.dark-mode .file-upload .hint,
html.dark-mode .formcontent .hint,
html.dark-mode .listing span.secondary,
html.dark-mode .listing-info,
html.dark-mode ::-webkit-input-placeholder,
html.dark-mode ::placeholder {
    color: rgb(211, 211, 211);
    text-shadow: none;
}

#layout-menu,
html.dark-mode #layout-menu,
html.dark-mode.layout-phone #layout-menu,
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
    background-color: var(--footer-bg);
}


@media screen and (min-width: 481px) {
    #taskmenu .special-buttons {
        background-color: unset;
    }

    #layout-menu .popover-header {
        background-color: unset !important;
    }
}

.messagelist td.subject span.msgicon.status.unread:before,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before {
    color: var(--primary-color);
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
    color: #ffffffc4;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
    color: white;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected>a,
html.dark-mode .listing li.selected>div>a,
html.dark-mode .listing tr.selected td {
    background-color: var(--background-color-dark);
    color: var(--primary-color);
}

html.dark-mode #taskmenu .action-buttons a {
    color: var(--on-footer-bg);
}

html.dark-mode #taskmenu a.selected {
    background-color: var(--secondary-color);
}

html.dark-mode #taskmenu a:hover {
    background-color: var(--primary-color);
}

html.dark-mode .menu.toolbar a.selected {
    background-color: var(--background-color-dark);
}

#taskmenu a.logout,
#taskmenu a.logout:hover {
    color: var(--primary-color) !important;
}

html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus,
html.dark-mode .menu a:not(.disabled):hover,
html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover,
html.dark-mode .popupmenu .listing li>a:not(.disabled):hover {
    background-color: unset;
}

.menu.pagenav.pagenav-list,
.menu.pagenav.pagenav-list+.navlist,
.popup .listbox .footer,
.searchbar {
    background-color: var(--background-color-light);
    backdrop-filter: saturate(.8);
}

html:not(.dark-mode) table.messagelist {
    background-color: #b3e2f354;
}

html body .ui-widget-content,
html body .ui-widget-header,
.frame-content {
    background-color: #d0e6f5;
}

.dark-mode body .ui-widget-content,
.dark-mode body .ui-widget-header,
.frame-content {
    background-color: white;
}

.dark-mode #message-header {
    color: black;
}

html.dark-mode .messagelist,
html.dark-mode .messagelist span.attachment span {
    color: white;
}

html.dark-mode .folderlist li.mailbox .unreadcount {
    background-color: var(--footer-bg);
}

.listing li a,
.listing tbody td,
.searchbar a,
.form-control,
.form-control:focus,
.messagelist td.subject span.fromto {
    color: black;
}

.messagelist td.subject span.date,
.messagelist td.subject span.size {
    color: black;
}

html.watermark {
    opacity: .4;
}

.messagelist span.attachment span {
    color: rgb(41 41 41 / 75%);
}

.menu.pagenav .pagenav-text {
    color: rgba(0, 0, 0, 0.75);
}

.message:hover,
ul.listing li a:hover {
    background-color: var(--background-color-light);
    background-color: color-mix(in srgb, var(--background-color-light) 65%, transparent 35%);
}

.dark-mode .message:hover,
.dark-mode ul.listing li a:hover {
    background-color: var(--background-color-dark);
    background-color: color-mix(in srgb, var(--background-color-dark) 65%, transparent 35%);
}

.dark-mode #layout .message,
.dark-mode #layout .searchbar {
    color: white;
    background-color: #00000014;
    backdrop-filter: blur(1px);
}

ul.listing li a {
    backdrop-filter: blur(2px);
    color: black;
}

.folderlist li.mailbox .unreadcount,
.listing span.secondary,
.listing-info {
    color: black;
}

ul.treelist li.selected>a,
ul.treelist li.selected>div>a,
.form-control {
    background-color: var(--background-color-light);
}

@media (prefers-contrast: more) {

    ul.listing li,
    table.messagelist,
    #layout>div>.footer,
    #layout>div>.header {
        background-color: var(--background-color-light);
    }
}

.floating-action-buttons a.button {
    background-color: var(--primary-color);
    box-shadow: unset;
}

html.dark-mode .floating-action-buttons a.button {
    background-color: var(--secondary-color);
}

html.dark-mode .menu.pagenav .pagenav-text,
html.dark-mode .menu.pagenav a,
html.dark-mode .popover .menu li a[aria-haspopup]::after,
html.dark-mode pre,
html.dark-mode #layout>div>.footer,
html.dark-mode #layout>div>.header,
html.dark-mode #layout>div>.footer a.button,
html.dark-mode #layout>div>.header a.button {
    color: white;
    text-shadow: var(--text-shadow);
}

.popover {
    background-color: var(--background-color-light);
}

a {
    color: var(--secondary-color);
}

html #message-htmlpart1 div.rcmBody a:link,
html #message-htmlpart1 div.rcmBody span.v1MsoHyperlink {
    color: var(--secondary-color);
}

.btn-primary:focus,
.btn-primary:hover {
    background-color: var(--primary-color);
}

#layout-sidebar,
#layout-list {
    text-shadow: var(--text-shadow);
}

html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a,
html.dark-mode .proplist li.with-sublist>a.dropdown {
    color: white;
}

html body {
    font-family: var(--font-family-sans-serif);
}

html.dark-mode .html-editor .editor-toolbar {
    background-color: var(--background-color-light);
}

html.dark-mode .html-editor .editor-toolbar {
    background-color: var(--background-color-dark);
}