:root {
    --space-factor: 1;
    --white: #fff;
    --black: #000;
    --black-bg: color-mix(in srgb, var(--black) 95%, var(--blue));
    --red: red;
    --red-bg-color: #de1600;
    --yellow: #ffee64;
    --yellow-bg: color-mix(in srgb, var(--yellow) 35%, var(--white));
    --yellow-bg-transparent: color-mix(in srgb, var(--yellow) 35%, transparent);
    --yellow-bright-bg: color-mix(in srgb, var(--yellow) 75%, var(--white));
    --green: #4CBB17;
    --limegreen: color-mix(in srgb, var(--green) 60%, var(--yellow));
    --green-bg: color-mix(in srgb, var(--limegreen) 30%, transparent);
    --green-bg-no-transparency: color-mix(in srgb, var(--limegreen) 30%, var(--white));
    --blue: #1134a6;
    --bright-blue: #003cff;
    --blue-bg: color-mix(in srgb, var(--bright-blue) 30%, white);
    --app-color: color-mix(in srgb, var(--blue) 99%, white);
    --app-color-1: var(--app-color);
    --app-color-4: color-mix(in srgb, var(--black) 40%, var(--white));
    --app-color-5: color-mix(in srgb, var(--black) 15%, var(--white));
    --app-color-6: var(--base-bg-color-1);
    --app-color-7: color-mix(in srgb, var(--black) 35%, var(--white));
    --app-color-8: var(--base-bg-color-2);
    --app-color-9: var(--base-bg-color-3);
    --app-color-14: #ccc;
    --app-color-15: #f3f3f3;
    --a-color: color-mix(in srgb, var(--blue) 99%, white);
    --toned-down-app-color: color-mix(in srgb, var(--app-color-1) 70%, var(--black));
    --hightlighted-prompt-backgroun-color: var(--our-todo-bg-color);
    --slightly-transparent-white-background: color-mix(in srgb, var(--white), transparent var(--bg-darkness));
    --app-theme-color-1: #5923af;
    --text-color: var(--black);
    --a-hover-text-decoration-line: underline;
    --bg-darkness: 4%;
    --base-bg-color-0: var(--white);
    --base-bg-color-05: color-mix(in srgb, var(--black-bg) calc(var(--bg-darkness) / 2), var(--base-bg-color-0));
    --base-bg-color-1: color-mix(in srgb, var(--black-bg) var(--bg-darkness), var(--base-bg-color-0));
    --base-bg-color-2: color-mix(in srgb, var(--black-bg) calc(var(--bg-darkness) / 1.3), var(--base-bg-color-1));
    --base-bg-color-3: color-mix(in srgb, var(--black-bg) calc(var(--bg-darkness) / 1.3), var(--base-bg-color-2));
    --layered-bg-color: color-mix(in srgb, var(--black-bg) 5%, transparent); /* you can add layers of items with this background, and each new layer will be slightly darker */
    --layered-bg-color-darker: color-mix(in srgb, var(--black-bg) 10%, transparent);
    --border-color-layer-step: 10%; /* EM: change in color toward --black that is needed for borders */
    --selected-category-bg-color: var(--layered-bg-color-darker);
    --bg-color: hsl(195, 100%, 32%);
    --bg-color-2: hsl(219, 62%, 86%);
    --bg-color-3: #ff7300;
    --bg-color-main-info-block: color-mix(in srgb, var(--limegreen) 20%, white); /*color-mix(in srgb, hsl(from var(--green) calc(h - 20) s l) 20%, var(--white));*/
    --bg-color-7: #d3d6ff;
    --static-value-bg-color: var(--layered-bg-color);
    --empty-field-prompt-bg-color: color-mix(in srgb, var(--white) 97%, var(--black-bg));
    --empty-field-prompt-bg-color-2: color-mix(in srgb, var(--section-padding-bg-color) 97%, var(--black));
    --section-padding-bg-color: var(--base-bg-color-1);
    --section-border-width: 1px;
    --section-border-color: color-mix(in srgb, var(--section-padding-bg-color) 93%, var(--black));
    --section-border: solid var(--section-border-width) var(--section-border-color);
    --loading-placeholder-bg-color: color-mix(in srgb, var(--black-bg) var(--bg-darkness), transparent);
    --today-text-color: var(--white);
    --today-bg-color: var(--bg-color-3);
    --today: var(--bg-color-3);
    --border-color-mix-ratio: 93%; /* EM: changed from 95% to 90% for compact grid, especially in sticky mode; changed to 93% as 90% seems to look to dark on dashboard */
    --border-color-1: color-mix(in srgb, var(--section-padding-bg-color) 98%, var(--black));
    --public-main-font-family: 'Roboto', sans-serif;
    --main-font-family: 'Roboto', sans-serif;
    --fa-style-family: var(--main-font-family);
    --compact-font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    --border-1: var(--border1) var(--border-color-1);
    --border-1x2: solid 2px var(--border-color-1);
    --paging-color: var(--base-bg-color-2);
    --margin: var(--padding15);
    --empty-text-color: color-mix(in srgb, var(--black), var(--white));
    --hint-text-color: color-mix(in srgb, var(--black), var(--white));
    --font-size-08: .8rem;
    --font-size-085: .85rem;
    --font-size-09: .9rem;
    --font-size-10: 1rem;
    --font-size-11: 1.1rem;
    --form-h3-font-size: var(--font-size-09);
    --smaller-font-size: var(--font-size-08);
    --form-h4-font-size: var(--smaller-font-size);
    --small-font-size-1: .72rem;
    --small-font-size-2: .63rem;
    --regular-font-size: var(--font-size-09);
    --h1-font-size: 1.25rem;
    --text-content-line-height: 1.6em;
    --line-height: var(--text-content-line-height);
    --compact-line-height: calc(.75 * var(--line-height));
    --tight-line-height: 60%; /* for better vertical middle alignment */
    --base-p-margin: 1em;
    --p-margin: var(--base-p-margin);
    --bold-border-radius: var(--border-radius);
    --transition-delay: 100ms;
    --transition-duration: .25s;
    --event-bg-color: var(--blue-bg);
    --past-event-bg-color: color-mix(in srgb, var(--black) 7%, var(--white));
    --presemibold: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 900;
    --issue-bg-color: var(--our-todo-bg-color);
    --highlighted-color: var(--yellow-bright-bg);
    --hover-bg-color: var(--layered-bg-color);
    --border-radius-min: 1px;
    --border-radius: 2px;
    --border-radius-10: 10px;
    --control-border-radius: var(--border-radius);
    --rounded-control-border-radius: 20px;
    --control-border-color: color-mix(in srgb, var(--section-padding-bg-color) 80%, var(--black));
    --bold: 700;
    --font-weight-bold: var(--bold);
    --font-weight-700: var(--bold);
    --font-weight-900: var(--bold);
    --control-font-weight: var(--font-weight-700);
    --control-border-width: 1px;
    --control-border: solid var(--control-border-width) var(--control-border-color);
    --control-padding: 0 var(--control-inline-padding);
    --control-left-padding: var(--padding5);
    --control-inline-padding: var(--control-left-padding);
    --control-block-padding: 4px;
    --control-height: 30px;
    --select-arrow-width: 20px;
    --compact-control-height: calc(var(--control-height) * 9/10);
    --slim-control-height: calc(var(--control-height) * 22/30);
    --us-state-control-width: 8ch;
    --zip-control-width: 12ch;
    --default-state-control-width: var(--width-150);
    --country-control-width: var(--width-150);
    --date-time-control-width: 170px;
    --date-control-width: 130px;
    --date-column-width: var(--money-column-width);
    --num-control-width: var(--width-100);
    --money-control-width: var(--num-control-width);
    --money-column-width: 15ch;
    --default-control-width: 24ch;
    --border-color: var(--control-border-color);
    --item-height-1: calc(var(--control-height) - 2px);
    --poll-bg-color: hsl(59, 98%, 80%);
    --narrower-column-width: var(--width-250);
    --narrower-column-width-2: 280px;
    --filter-bg-color: var(--yellow);
    --task-completed: hsl(112deg 72% 75%);
    --task-busy: color-mix(in srgb, var(--app-color-1) 20%, var(--white));
    --profile-image-size: 120px;
    --width-50: 50px;
    --width-70: 70px;
    --width-90: 90px;
    --width-100: 100px;
    --width-110: 110px;
    --width-120: 120px;
    --width-130: 130px;
    --width-140: 140px;
    --width-150: 150px;
    --width-200: 200px;
    --width-1000: 1000px;
    --size5_25-width: 225px;
    --width-250: 250px;
    --width-300: 300px;
    --width-400: 400px;
    --width-450: 450px;
    --width-500: 500px;
    --size12-width: 600px;
    --height-100: 100px;
    --height-150: 150px;
    --height-300: 300px;
    --max-usable-height: 500px;
    --compact-text-area-height: var(--height-100);
    --created-color: hsl(0, 0%, 100%);
    --our-todo-bg-color: var(--yellow-bg);
    --their-todo-color: hsl(0, 0%, 78%);
    --in-progress-color: hsl(120, 68%, 63%);
    --completed-bg-color: color-mix(in srgb, var(--green-bg) 80%, var(--white));
    --completed-bg-color-no-transparency: color-mix(in srgb, var(--green-bg-no-transparency) 80%, var(--white));
    --change-bg-color: var(--yellow-bg);
    --published-color: hsl(120, 68%, 63%);
    --closed-color: var(--app-color-4);
    --closed-bg-color: color-mix(in srgb, var(--app-color-4) 15%, var(--white));
    --chat-bg-color: var(--base-bg-color-1);
    --popup-header-backgroud-color: color-mix(in srgb, var(--section-padding-bg-color) 98%, var(--black)); /* EM: making it slightly darker 
    so that it is different from the popup background */
    --hover-outline-color: var(--app-color-5);
    --hover-outline-width: 2px;
    --subsection-width-200: min(200px, calc(100vw - 2 * var(--section-padding)), 100%);
    --subsection-width-250: min(250px, calc(100vw - 2 * var(--section-padding)), 100%);
    --subsection-width-300: min(300px, calc(100vw - 2 * var(--section-padding)), 100%);
    --subsection-width-350: min(calc(350px * var(--space-factor)), calc(100vw - 2 * var(--section-padding)), 100%);
    --subsection-width-400: min(400px, calc(100vw - 2 * var(--section-padding)), 100%);
    --subsection-width-450: min(450px, calc(100vw - 2 * var(--section-padding)), 100%);
    --text-content-width: 1000px;
    --progressbar-common-color: var(--base-bg-color-2);
    --progressbar-common-border-color: var(--base-bg-color-2);
    --progressbar-completed-color: var(--limegreen);
    --progressbar-completed-border-color: var(--limegreen);
    --border-width: 1px;
    --border1: var(--border-width) solid;
    --border2: calc(var(--border-width) * 2) solid;
    --border-decor-width: 5px;
    --border-decor: var(--border-decor-width) solid;
    --cancel-margin: var(--gap15);
    --smaller-scale: .95;
    --larger-scale: 1.25;
    --section-header-font-size: .95rem; /* EM: 1rem seems too large */
    --selected-border-color: var(--app-color-1);
    --selected-border-width: var(--gap5);
    --selected-border: solid var(--selected-border-width) var(--selected-border-color);
    --warn-bg-color: #fffcde;
    --selected-bg-color: #fff962;
    --participant-item-height: 26px;
    --participant-item-width: 26px;
    --gap2: 2px;
    --gap5: calc(5px * var(--space-factor));
    --gap10: calc(var(--gap5) * 2);
    --gap15: calc(var(--gap5) * 3);
    --gap20: calc(var(--gap5) * 4);
    --related-items-gap: var(--gap5);
    --unrelated-items-gap: var(--gap10);
    --unrelated-items-gap-x2: var(--gap20);
    --section-gap: calc(var(--section-padding) / 2);
    --section-padding-to-subsection-gap-ratio: 2;
    --subsection-gap: calc(var(--section-padding) / var(--section-padding-to-subsection-gap-ratio));
    --vetical-label-field-gap: var(--gap2);
    --padding5: var(--gap5);
    --padding10: var(--gap10);
    --padding15: var(--gap15);
    --padding20: var(--gap20);
    --margin5: var(--gap5);
    --margin10: var(--gap10);
    --margin15: var(--gap15);
    --section-padding: var(--padding10);
    --icon-option-color: #bbb;
    --selected-icon-option-color: #333;
    --opacity-95: .95;
    --disabled-opacity: .5;
    --deleted-restorable-opacity: .4; /* EM: deleted but can be restored in place */
    --notification-bg-color: var(--completed-bg-color);
    --overdue-color: rgb(215 16 16);
    --overdue-text-color: var(--white);
    --icon-text-gap: 2px;
    --pending-color: var(--app-color-8);
    --layer1: 1;
    --layer2: calc(var(--layer1) + 1);
    --layer3: calc(var(--layer1) + 4);
    --layer5: calc(var(--layer1) + 9);
    --layer6: calc(var(--layer1) + 10);
    --layer7: calc(var(--layer1) + 14);
    --layer9: calc(var(--layer1) + 94);
    --layer10: calc(var(--layer1) + 99);
    --layer11: calc(var(--layer1) + 104);
    --layer14: calc(var(--layer1) + 994);
    --layer15: calc(var(--layer1) + 999);
    --layer16: calc(var(--layer1) + 1004);
    --layer17: calc(var(--layer1) + 1999);
    --layer18: calc(var(--layer1) + 9999);
    --layer20: calc(var(--layer1) + 19999);
    --layerMaxLess4: calc(var(--layerMaxLess3) - 5);
    --layerMaxLess3: calc(var(--layerMaxLess2) - 5);
    --layerMaxLess2: calc(var(--layerMaxLess1) - 5);
    --layerMaxLess1: calc(var(--layerMax) - 5);
    --layerMax: calc(var(--layer1) + 99999);
    --layerMax1: calc(var(--layerMax) + 1);
    --menu-item-padding: var(--padding5);
    --menu-item-color: var(--toned-down-app-color);
    --min-clickable-size-1: 20px;
    --min-clickable-width-size-1: var(--min-clickable-size-1);
    --min-clickable-size-2: 26px;
    --clickable-size-3: 34px;
    --min-th-width: 80px;
    --icon-font-size: 1rem;
    --icon-font-weight: 400;
    --larger-icon-font-size: 1.1rem;
    --overlay-shadow-color: color-mix(in srgb, var(--black) 25%, var(--white));
    --overlay-shadow: 0px 2px 7px var(--overlay-shadow-color);
    --scrollbar-width: 16px;
    --checkbox-size: 18px;
    --checkbox-label-gap: 2px;
    --toolnav-menu-bg-color: var(--section-padding-bg-color);
    --toolnav-height: 40px;
    --header-decor-height: 5px;
    --header-height: calc(var(--header-decor-height) + var(--toolnav-height));
    --modal-height: calc(100dvh - var(--toolnav-height) - 2 * var(--gap20));
    --comfortable-text-content-width: min(90ch, 100%);
    --min-comfortable-text-content-width: calc(var(--comfortable-text-content-width) / 1.5);
    --h1-margin: 1em;
    --box-shadow-2: 0 1px 1px var(--app-color-4);
    --box-shadow-3: 0 0 5px #bdbdbd;
    --box-shadow-4: 0 0 3px var(--app-color-7);
    --box-shadow-5: 0 0 20px color-mix(in srgb, white 50%, black);
    --app-viewport-height: calc(100dvh - var(--header-height));
    --checkbox-column-gap: var(--related-items-gap);
    --modal-header-height: 54px;
    --color-preview-min-width: 40px;
    --color-preview-min-height: 15px;
    --editable-outline-width: 2px;
    --editable-outline-color: color-mix(in srgb, var(--app-color-5) 50%, transparent);
    --editable-outline: solid var(--editable-outline-width) var(--editable-outline-color);
    --dropdown-type1-width: 23px;
    --inline-help-margin: var(--gap5);
    --icon-text-block-top-alignment-margin: 2px;
    --map-loading-background: var(--loading-placeholder-bg-color);
    --obsolete: solid 5px black;
    --blob-background: #fafafa;
    --blob-padding: var(--gap5) var(--gap10);
    --blob-border: none;
    --text-wrap-pretty: pretty;
    --help-button-gap: var(--related-items-gap);
    --superscript-transform: translateY(calc(0px - var(--gap5)));
    --td-padding: var(--padding5);
    --head-with-menu-gap: var(--gap10) var(--gap20);
    --transition-opacity: opacity .25s;
    --box-shadow-blur-radius: 2px;
    --actionable-thumbnail-outline: solid var(--hover-outline-width);
    --entity-preview-modal-width: 1100px;
    --html-editor-height: 150px;
    --inner-scrollable-list-max-height: 300px;
    --test-if-used: solid 2px black; /* EM: This highlights presumably unused CSS selectors by adding an extra outline if they are used, 
    without significantly impacting the UI. */
    --button-hover-bg-color-change: 10%;
    --button-pressed-bg-color-change: 15%;
    --button-border-to-bg-color-change: 20%;
    --button-hover-bg-color: color-mix( in srgb, var(--black-bg) calc(var(--button-hover-bg-color-change) * var(--button-bg-color-change-multiplier, 1)), var(--_base-bg-color, transparent));
    --button-hover-bg-color-no-transparency: color-mix( in srgb, var(--black-bg) calc(var(--button-hover-bg-color-change) * var(--button-bg-color-change-multiplier, 1)), var(--_base-bg-color, var(--white)));
    --button-pressed-bg-color: color-mix( in srgb, var(--black-bg) calc(var(--button-pressed-bg-color-change) * var(--button-bg-color-change-multiplier, 1)), var(--_base-bg-color, transparent));
    --button-pressed-bg-color-no-transparency: color-mix( in srgb, var(--black-bg) calc(var(--button-pressed-bg-color-change) * var(--button-bg-color-change-multiplier, 1)), var(--_base-bg-color, var(--white)));
    --button-pressed-background: linear-gradient(var(--button-pressed-bg-color), var(--button-hover-bg-color));
    --button-hover-background-type2: linear-gradient(var(--app-color-1), #0c159e);
    --button-pressed-background-type2: #2701a7;
    --button-pressed-background-type3: linear-gradient(var(--button-pressed-bg-color), var(--button-hover-bg-color));
    --button-padding-inline: .8rem;
    --button-padding: 0 var(--button-padding-inline);
    --button-border-color: var(--app-color-14);
    --button-border: var(--border1) var(--button-border-color);
    --button-bg-color-change-multiplier: 1;
    --button-line-height: 105%; /* EM: line height less that 105% seems to result in text getting cut off when
	overflow hidden is applied, e.g. for ellipsis.
*/
    --o-size: var(--min-clickable-size-1);
    --x-o-size: 24px;
    --x-boldness: 2px;
    --x-o-height: var(--x-o-size);
    --o-padding: 1px;
    --o-padding-3: 3px;
    --o-padding-5: var(--gap5);
    --o-outline-width: var(--o-outline-width-5);
    --o-outline-width-3: 3px;
    --o-outline-width-5: calc(var(--o-outline-width-3) * 5 / 3);
    --o-outline-width-7: calc(var(--o-outline-width-3) * 7 / 3);
}

:is(.x, .o, .select2-selection__clear) {
    --b-color: inherit;
    --border-radius: 50%;
    height: var(--x-o-height);
    position: relative;
    &::before, &::after
    {
        margin: 0;
    }
}

/* a.o is for icon-only buttons that have a circular background on hover */
:is(body, #a #b) :is(.x, .o, .select2-selection__clear) {
    --_size: var(--o-size);

    outline: solid var(--o-outline-width) var(--_bg-color, var(--b-color));
    outline-offset: -2px;
    background: var(--_bg-color, var(--b-color));
    cursor: pointer;
    overflow: hidden;
    padding: var(--o-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius);
    text-decoration-line: none;
    box-shadow: var(--_box-shadow, none);
    width: unset;
    min-height: var(--_size);
    min-width: var(--_size);
    border: none;

    &:not(:disabled) {
        &:is(:hover, :focus) {
            --_bg-color: var(--button-hover-bg-color-no-transparency); /* EM: have to use no-transparency versions here because 
                outline color overlaps with background color creating darker regions on round buttons, like (x) */
        }

        &:active {
            --_bg-color: var(--button-pressed-bg-color-no-transparency);
        }
    }

    &.part-of-text {
        display: inline-flex;
    }
}

body .o::before {
    margin: 0;
    /*line-height: var(--tight-line-height); EM: doesn't work for the (i) icon next to file name in file library, it's not well centered */
    /*line-height: 1; EM: doesn't work for the ext button in the mail link attachment help */
    line-height: var(--tight-line-height);
}

.fa-arrow-up-right-from-square.o::before {
    /* EM: special accomidation for this icon because it's visually larger and offset, and gets cut off on hover */
    font-size: calc(var(--icon-font-size) * .9);
    translate: 2px 0px;
}

body .x {
    &::before, &::after {
        background: var(--text-color);
        content: '';
        opacity: .8;
        position: absolute;
        width: calc(100% - 2px - var(--o-padding) * 2);
        height: var(--x-boldness);
    }

    &::before {
        transform: rotate(45deg);
    }

    &::after {
        transform: rotate(-45deg);
    }

    &:hover {
        &::before, &::after {
            opacity: 1;
        }
    }
}

button.o,
.playground button.o {
    background: none;
}

.o-icon-buttons {
    gap: var(--gap10);
}