:root {
    --h-padding-base: 6px;
    --h-padding-info: 20px;
    
    --v-margin-small: 4px;
    --v-margin-large: 14px;
    
    --column-gap-small: 4px;
    --column-gap-large: 18px;
    
    --row-gap-small: 8px;
    --row-gap-large: 14px;

    --sec1-v-margin: 4px;
    --sec2-v-margin: 8px;
    --sec3-v-margin: 14px;
    
    --sec1-edge: 4px;
    --sec2-edge: 8px;
    --sec3-edge: 16px;
    
    --sec1-corner-radius: 4px;
    --sec2-corner-radius: 8px;
    --sec3-corner-radius: 16px;
    
    color-scheme: light dark;
    --fg-color: black;
    --bg-color: hsl(236, 45%, 91%);
    --bg-color-navbar-sticky: hsla(236, 45%, 91%, 0.3);
    --placeholder-text-color: hsl(250, 20%, 60%);
    --text-input-outline: none;
    --text-input-bg-color: hsl(250, 20%, 99%);
    --text-input-box-shadow: inset 5px 5px 0px hsla(264, 78%, 55%, 0.06),
                             inset 0.5px 0.5px 2.5px hsla(276.06, 68.78%, 17.18%, 0.18),
                             -1px -1px 0px hsla(264.87, 32.01%, 45.83%, 0.11),
                             1px 1.5px 0px hsla(346.94, 0%, 100%, 0.99);
    --h1-text-shadow: 3px 3px 0px hsla(268.82, 85%, 23%, 0.06);
    --toolbar-color:  hsl(236, 58%, 92%);
    --toolbar-lesser-color:  hsl(236, 45%, 89%);
    --toolbar-box-shadow: 0 0 40px hsla(264.87, 50%, 37%, 0.12),
                          7px 7px 0px hsla(229.01, 38%, 56%, 0.07),
                          1px 1px 3px hsla(242.49, 100%, 30%, 0.5),
                          -10px -10px 15px hsla(250, 100%, 97%, 0.5);
    --toolbar-outline: 1px solid hsla(251.81, 0%, 100%, 0.76);
    --reg-text-color: #050070;
    --link-color: hsl(250, 93%, 57%);
    --link-color-tap: hsla(250, 93%, 57%, 0.5);
    --link-color-hover: hsl(270, 100%, 45%);
    --link-color-active: hsl(280.95, 100%, 50%);
    --link-text-shadow-hover: 1px 1px 1px hsla(270, 100%, 50%, 0.2);
    --link-text-shadow-active: 1px 1px 1px hsla(260, 100%, 100%, 1.0);
    --divider-color: hsla(236, 70%, 30%, 0.1);
    --fade-text-color: hsl(236, 50%, 70%);
    --slight-fade-text-color: hsl(236, 30%, 50%);
    --super-fade-text-color: hsl(236, 50%, 85%);
    --super-duper-fade-text-color: hsla(236, 50%, 85%, 0.7);
    --log-time-color: hsl(236, 50%, 89%);
    --log-line-color-1: hsla(236, 50%, 80%, 0.15);
    --log-line-color-2: hsla(236, 50%, 95%, 0.0);
    --button-bg-color: hsl(236, 80%, 96%);
    --button-bg-color-hover: hsl(236, 80%, 98%);
    --button-bg-color-active: hsl(238, 90%, 75%);
    --button-submit-bg-color: hsl(240, 80%, 82%);
    --button-submit-bg-color-hover: hsl(242.49, 94%, 78%);
    --button-submit-bg-color-active: hsl(238, 95%, 67%);
    --button-text-color-active: hsl(238, 90%, 98%);
    --button-text-shadow-hover: none;
    --button-text-shadow-active: none;
    --button-border: none;
    --button-disabled-bg-color: hsl(238, 45%, 85%);
    --button-box-shadow: -9px -7px 10px hsla(250, 70%, 96%, 0.3),
                         8px 8px 1px hsla(229.43, 25%, 40%, 0.09),
                         2px 2px 6px hsla(268.6, 85%, 34%, 0.22),
                         inset 1px 1px 0px hsla(240.47, 100%, 99%, 1.0),
                         inset -1px -1px 0px hsla(240.47, 100%, 0%, 0.3);
    --button-box-shadow-checkbox: -7px -5px 10px hsla(250, 70%, 96%, 0.5),
                         3px 3px 0px hsla(229.43, 25%, 40%, 0.08),
                         2px 2px 4px hsla(270.47, 100%, 37%, 0.12),
                         inset 1px 1px 0px hsla(240.47, 100%, 99%, 1.0),
                         inset -1px -1px 0px hsla(240.47, 100%, 0%, 0.3);
    /* --select-icon: url("/static/dropdown_black.svg"); */
    --select-icon: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22black%22%3E%3Cpolygon%20points%3D%220%2C6%2010%2C6%205%2C0%22/%3E%3Cpolygon%20points%3D%220%2C10%2010%2C10%205%2C16%22/%3E%3C/svg%3E);
    /* --checkbox-check: url("/static/check_black.svg"); */
    --checkbox-check: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E);
    /* --checkbox-check-active: url("/static/check_white.svg"); */
    --checkbox-check-active: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E);
    --green-text-color: rgb(0, 160, 120);
    --orange-text-color: rgb(255, 130, 0);
    --grid-large-color: rgba(0, 0, 0, 0.03);
    --grid-small-color: rgba(0, 0, 0, 0.03);
    --graph-outline-color: rgba(180, 180, 200, 1.0);
    --subgraph-outline-color: rgba(160, 160, 200, 0.7);
    
    --innie1-bg-color: hsla(248, 74%, 84%, 0.06);
    --innie2-bg-color: hsla(248, 74%, 84%, 0.13);
    --innie3-bg-color: hsla(248, 74%, 84%, 0.19);
    
    --innie1-outline: solid 1px hsla(320.83, 0%, 100%, 0.1);
    --innie2-outline: solid 1px hsla(320.83, 0%, 100%, 0.2);
    --innie3-outline: solid 1px hsla(320.83, 0%, 100%, 0.3);
    
    --innie1-box-shadow: inset 0 0 20px hsla(238.76, 91.88%, 63.05%, 0.03),
                         inset 4px 4px 0px hsla(264.87, 38.41%, 45.52%, 0.04),
                         inset 0px 1px 2px hsla(253.68, 100%, 22.75%, 0.12),
                         1px 1px 0px hsla(54.09, 100%, 95.75%, 0.15);
    --innie2-box-shadow: inset 0 0 30px hsla(238.76, 91.88%, 63.05%, 0.05),
                         inset 4px 6px 0px hsla(264.87, 38.41%, 45.52%, 0.05),
                         inset 0px 1px 2px hsla(253.68, 100%, 22.75%, 0.17),
                         1px 1px 0px hsla(54.09, 100%, 95.75%, 0.53);
    --innie3-box-shadow: inset 0 0 40px hsla(238.76, 91.88%, 63.05%, 0.07),
                         inset 6px 8px 0px hsla(264.87, 38.41%, 45.52%, 0.05),
                         inset 0px 1px 2px hsla(253.68, 100%, 22.75%, 0.22),
                         1px 1px 0px hsla(54.09, 100%, 95.75%, 0.63);
    
    --outie1-bg-color: hsla(236, 70%, 92%, 0.25);
    --outie2-bg-color: hsla(236, 70%, 93%, 0.5);
    --outie3-bg-color: hsla(236, 70%, 94%, 1.0);
    
    --outie1-outline: 1px solid hsla(251.81, 0%, 100%, 0.4);
    --outie2-outline: 1px solid hsla(251.81, 0%, 100%, 0.53);
    --outie3-outline: 1px solid hsla(251.81, 0%, 100%, 0.66);
    
    --outie1-box-shadow: 0 0 20px hsla(264.87, 63%, 37%, 0.05),
                         2px 2px 2px hsla(252, 100%, 38%, 0.06);
    --outie2-box-shadow: 0 0 30px hsla(264.87, 57%, 37%, 0.1),
                         2px 2px 2px hsla(252, 100%, 38%, 0.12);
    --outie3-box-shadow: 0 0 40px hsla(264.87, 50%, 37%, 0.12),
                         2px 2px 3px hsla(252, 60%, 38%, 0.24);
    
    --samie1-outline: none;
    --samie2-outline: none;
    --samie3-outline: none;
    
    --samie1-box-shadow: inset -1px -1px 1px hsla(264.87, 100%, 30%, 0.05),
                         1px 1px 0px hsla(263.87, 100%, 99.25%, 0.25),
                         -1px -1px 1px hsla(264.87, 100%, 30%, 0.05),
                         inset 1px 1px 0px hsla(264.87, 100%, 99.25%, 0.25);
    --samie2-box-shadow: inset -1px -1px 1px hsla(264.87, 100%, 30%, 0.1),
                         1px 1px 0px hsla(263.87, 100%, 99.25%, 0.5),
                         -1px -1px 1px hsla(264.87, 100%, 30%, 0.1),
                         inset 1px 1px 0px hsla(264.87, 100%, 99.25%, 0.5);
    --samie3-box-shadow: inset -1px -1px 1px hsla(264.87, 100%, 30%, 0.2),
                         1px 1px 0px hsla(263.87, 100%, 99.25%, 1),
                         -1px -1px 1px hsla(264.87, 100%, 30%, 0.2),
                         inset 1px 1px 0px hsla(264.87, 100%, 99.25%, 1);
    
    --select-box-bg-color: hsla(248.08, 80%, 60%, 1.0);
    --select-box-text-color: hsl(236, 50%, 100%);

    /* Basic colors (should be clearly visible over BG) */
    --mono-color: #000000;
    --red-color: rgb(230, 50, 50);
    --green-color: rgb(0, 180, 0);
    --blue-color: rgb(10, 80, 255);
    --yellow-color: rgb(200, 140, 0);
    --magenta-color: rgb(200, 0, 200);
    --teal-color: rgb(0, 200, 200);

    /* Graph tinting using our basic colors */
    --mono-graph-tint-color: rgba(230, 230, 255, 0.5);
    --red-graph-tint-color: rgba(255, 0, 0, 0.1);
    --green-graph-tint-color: rgba(0, 255, 0, 0.1);
    --blue-graph-tint-color: rgba(0, 100, 255, 0.1);
    --yellow-graph-tint-color: rgba(255, 220, 0, 0.1);
    --magenta-graph-tint-color: rgba(200, 0, 200, 0.1);
    --teal-graph-tint-color: rgba(0, 200, 200, 0.1);

    /* Dropdown Menu */
    --dropdown-color: rgba(255, 255, 255, 0.3);
    --dropdown-shadow-color: rgba(30, 0, 100, 0.2);
    --dropdown-border-color: rgba(20, 0, 50, 0.2);
    --dropdown-hover-bg-color: rgba(50, 100, 255, 0.5);
    --dropdown-hover-color: rgba(255, 255, 255, 1.0);

    --meter-bg-color: hsla(251.79, 44%, 55%, 0.04);
    --meter-box-shadow: inset 0 0 10px hsla(277.93, 38%, 38%, 0.2),
                        inset 5px 5px 0px hsla(287.25, 38%, 38%, 0.05),
                        1px 1px 0px hsla(287.25, 100%, 100%, 1.0),
                        -1px -1px 0px hsla(287.25, 0%, 0%, 0.3);

    --account-large-bg-color: hsla(94.86, 100%, 79%, 0.4117647058823529);
    --account-large-bg-color-hover: hsla(94.86, 100%, 79%, 0.7);
    --account-large-bg-color-active: hsla(94.86, 100%, 79%, 0.9);
    --account-large-box-shadow: 1px 1px 3px hsla(263.01, 100%, 11%, 0.07),
            3px 5px 6px hsla(263.01, 18%, 55%, 0.23),
            11px 10px 2px hsla(277.93, 93%, 25%, 0.04),
            4px 3px 2px hsla(110.05, 100%, 93%, 0.85) inset,
            -3px -3px 2px hsla(121.24, 86%, 41%, 0.19) inset;
    --account-large-text-shadow: 2px 2px 0px hsla(229.43, 90%, 37%, 0.16);
    
    --account-small-bg-color: hsla(94.86, 100%, 79%, 0.4117647058823529);
    --account-small-bg-color-hover: hsla(94.86, 100%, 79%, 0.7);
    --account-small-bg-color-active: hsla(94.86, 100%, 79%, 0.9);
    --account-small-box-shadow: 1px 1px 0px hsla(110.05, 100%, 93%, 0.85) inset,
                        -1px -1px 0px hsla(121.24, 86%, 41%, 0.19) inset,
                        1px 1px 3px hsla(121.24, 100%, 21%, 0.41);
    --account-small-text-shadow: none;

    /* Note to self: use 'tools/pcommand urlencodesvg filename' to get these. */
    --folder-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20id%3D%22obj%22%20d%3D%22M59.2%2C17.2h-26.1l-4.5-9.3H4.8L.6%2C17.1v34.7l4.2%2C4.2h54.4l4.2-4.2v-30.5l-4.2-4.2ZM6.8%2C50.2l-2.2-2.4v-31.1l2.7-5.2h16.8l3.9%2C9.2h26.9l2.4%2C2.3v24.8l-2%2C2.4H6.8Z%22/%3E%3C/svg%3E);
    --document-mask-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20id%3D%22obj%22%20d%3D%22M38.8%2C1.1H10.8v61.7l43.6-.3V17.1L38.8%2C1.1ZM47.8%2C56.6H15V4.8h19.2l13.6%2C13.9v37.9Z%22/%3E%3C/svg%3E);
    
    
}
@media (prefers-color-scheme: dark) {
    :root {
        --fg-color: hsl(270, 100%, 95%);
        --bg-color: hsl(276, 15%, 15%);
        --bg-color-navbar-sticky: hsla(276, 15%, 15%, 0.3);
        --placeholder-text-color: hsl(270, 10%, 40%);
        --text-input-outline: 1px solid hsla(240, 40%, 61%, 0.15);
        --text-input-bg-color: hsl(250.91, 28%, 13%);
        --text-input-box-shadow: 0 0 8px hsla(268.6, 0%, 0%, 1.0) inset;
        --h1-text-shadow: 0px 0px 4px hsla(280, 84%, 50%, 1.0);
        --toolbar-color: hsl(280, 17%, 20%);
        --toolbar-lesser-color: rgba(100%, 80%, 100%, 3%);
        --toolbar-box-shadow: 0 2px 5px hsla(246, 91%, 65%, 0.16);
        --toolbar-outline: 1px solid hsla(266, 85%, 70%, 0.13);
        --reg-text-color: hsl(250, 100%, 90%);
        --link-color: hsl(253.68, 54%, 64%);
        --link-color-tap: hsla(253.68, 54%, 64%, 0.5);
        --link-color-hover: hsl(283.68, 83%, 90%);
        --link-color-active: hsl(253.68, 0%, 100%);
        --link-text-shadow-hover: 0px 0px 10px hsl(295, 100%, 50%);
        --link-text-shadow-active: 0px 0px 12px hsl(335.75, 100%, 50%),
                                   0px 0px 8px hsl(295, 100%, 50%),
                                   0px 0px 2px hsl(296.58, 100%, 100%);
        --divider-color: rgba(129, 81, 189, 0.15);
        --super-fade-text-color: rgba(255, 200, 255, 0.1);
        --super-duper-fade-text-color: rgba(255, 200, 255, 0.06);
        --fade-text-color: rgba(255, 200, 255, 0.2);
        --slight-fade-text-color: rgba(225, 200, 255, 0.5);
        --log-time-color: #241d24;
        --log-line-color-1: hsla(276, 25%, 20%, 0.2);
        --log-line-color-2: hsla(270, 100%, 30%, 0.00);
        --button-bg-color: hsl(270, 17%, 34%);
        --button-bg-color-hover: hsl(270, 17%, 38%);
        --button-bg-color-active: hsl(260, 85%, 50%);
        --button-submit-bg-color: hsl(244, 24%, 44%);
        --button-submit-bg-color-hover: hsl(260, 50%, 50%);
        --button-submit-bg-color-active: hsl(260, 85%, 50%);
        --button-text-color-active: hsla(260, 100%, 100%, 1.0);
        --button-text-shadow-hover: 0px 0px 4px hsl(290, 100%, 70%);
        --button-text-shadow-active: 0px 0px 15px hsl(290, 100%, 60%),
                                     0px 0px 3px hsl(290, 100%, 100%);
        --button-border: 1px solid hsla(242.49, 88%, 46%, 0.05);
        --button-disabled-bg-color: #333344;
        --button-box-shadow: 0 2px 5px hsla(246, 95%, 30%, 0.2);
        --button-box-shadow-checkbox: 0 2px 5px hsla(246, 95%, 30%, 0.2);
        /* --select-icon: url("/static/dropdown_white.svg"); */
        --select-icon: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22white%22%3E%3Cpolygon%20points%3D%220%2C6%2010%2C6%205%2C0%22/%3E%3Cpolygon%20points%3D%220%2C10%2010%2C10%205%2C16%22/%3E%3C/svg%3E);
        /* --checkbox-check: url("/static/check_white.svg"); */
        --checkbox-check: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E);
        /* --checkbox-check-active: url("/static/check_black.svg"); */
        --checkbox-check-active: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%203L6%2011L3%207.5%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E);
        --green-text-color: #83ff6a;
        --orange-text-color: rgb(255, 150, 0);
        --grid-large-color: rgba(255, 255, 255, 0.03);
        --grid-small-color: rgba(255, 255, 255, 0.03);
        --graph-outline-color: rgba(85, 85, 105, 1.0);
        --subgraph-outline-color: rgba(85, 85, 105, 1.0);
        
        --innie1-bg-color: hsla(253.68, 15%, 13%, 0.2);
        --innie2-bg-color: hsla(253.68, 15%, 13%, 0.3);
        --innie3-bg-color: hsla(253.68, 15%, 10%, 0.5);
        
        --innie1-outline: solid 1px hsla(279.79, 8.99%, 23.86%, 0.2);
        --innie2-outline: solid 1px hsla(279.79, 8.99%, 23.86%, 0.55);
        --innie3-outline: solid 1px hsla(279.79, 8.99%, 23.86%, 0.65);
        
        --innie1-box-shadow: inset 0 0 8px hsla(223.83, 50%, 10%, 0.5);
        --innie2-box-shadow: inset 0 0 40px hsla(223.83, 50%, 10%, 0.35);
        --innie3-box-shadow: inset 0 0 40px hsla(223.83, 50%, 10%, 0.6);
        
        --outie1-bg-color: hsla(274.2, 24%, 34%, 0.10);
        --outie2-bg-color: hsla(274.2, 24%, 34%, 0.20);
        --outie3-bg-color: hsla(274.2, 24%, 34%, 0.30);
        
        --outie1-outline: 1px solid hsla(251.81, 50%, 64%, 0.1);
        --outie2-outline: 1px solid hsla(251.81, 50%, 64%, 0.20);
        --outie3-outline: solid 1px hsl(261.14, 27.8%, 32.08%);
        
        --outie1-box-shadow: inset 0 0 8px hsla(277.93, 47%, 48%, 0.08);
        --outie2-box-shadow: inset 0 0 20px hsla(277.93, 47%, 48%, 0.12);
        --outie3-box-shadow: 0px 3px 25px 0px rgba(40,5,30,0.2);
        
        --samie1-outline: solid 1px hsla(279.79, 15%, 50%, 0.12);
        --samie2-outline: solid 1px hsla(279.79, 15%, 50%, 0.24);
        --samie3-outline: solid 1px hsla(279.79, 15%, 50%, 0.45);
        
        --samie1-box-shadow: none;
        --samie2-box-shadow: none;
        --samie3-box-shadow: none;
        
        --select-box-bg-color: hsl(255, 69%, 55%);
        --select-box-text-color: hsl(226, 50%, 100%);

        /* Basic colors (should be clearly visible over BG) */
        --mono-color: #FFFFFF;
        --red-color: rgb(255, 0, 0);
        --green-color: rgb(0, 160, 0);
        --blue-color: rgb(0, 100, 255);
        --yellow-color: rgb(215, 140, 0);
        --magenta-color: rgb(255, 0, 220);
        --teal-color: rgb(0, 200, 200);

        /* Graph tinting using our basic colors */
        --mono-graph-tint-color: rgba(40, 35, 55, 0.5);
        --red-graph-tint-color: rgba(200, 0, 0, 0.1);
        --green-graph-tint-color: rgba(0, 140, 0, 0.1);
        --blue-graph-tint-color: rgba(0, 0, 255, 0.1);
        --yellow-graph-tint-color: rgba(255, 220, 0, 0.1);
        --magenta-graph-tint-color: rgba(200, 0, 200, 0.1);
        --teal-graph-tint-color: rgba(0, 200, 200, 0.1);

        /* Dropdown Menu */
        --dropdown-color: rgba(30, 20, 50, 0.35);
        --dropdown-shadow-color: rgba(0, 0, 0, 0.7);
        --dropdown-border-color: rgba(235, 200, 255, 0.2);
        --dropdown-hover-bg-color: rgba(200, 150, 255, 0.2);
        --dropdown-hover-color: #ddccff;

        --meter-bg-color: hsla(285.39, 17%, 9%, 0.76);
        --meter-box-shadow: inset 0 0 10px hsla(260.49, 100%, 5%, 0.4),
                            0 0 1px hsla(260, 30%, 58%, 0.4);
        
        --account-large-bg-color: hsla(130.57, 100%, 50%, 0.13);
        --account-large-bg-color-hover: hsla(130.57, 100%, 50%, 0.16);
        --account-large-bg-color-active: hsla(130.57, 100%, 50%, 0.2);
        --account-large-box-shadow: 0px 0px 4px hsla(111.92, 100%, 51%, 0.8),
                           0px 0px 4px hsla(111.92, 100%, 51%, 0.2) inset;
        --account-large-text-shadow: 0px 0px 9px hsla(108.19, 89%, 53%, 0.5);
        
        --account-small-bg-color: hsla(130.57, 100%, 50%, 0.13);
        --account-small-bg-color-hover: hsla(130.57, 100%, 50%, 0.16);
        --account-small-bg-color-active: hsla(130.57, 100%, 50%, 0.2);
        --account-small-box-shadow: 0px 0px 2px hsla(111.92, 100%, 51%, 0.68),
                               0px 0px 3px hsla(111.92, 100%, 51%, 0.14) inset;
        --account-small-text-shadow: 0px 0px 5px hsla(108.19, 89%, 53%, 0.5);
        
    }
}


/* We don't want safari tweaking our font sizes. */
body {
    -webkit-text-size-adjust: none;
    -text-size-adjust: none;

    /* ace wants this */
    /* overflow: hidden; */

}
@media (max-width: 500px) {
    /* Squeeze a few extra pixels out of the side on phone screens; all our
   stuff is padded so this looks ok. */
    body {
        margin: 4px 4px;
        padding: 0;
    }
}


html {
    background-color: var(--bg-color);
    color: var(--reg-text-color);
    scroll-behavior: smooth;
    
    /* font-family: Helvetica, Arial, sans-serif; */
    /* font-size: 12px; */

    /* Google Fonts link for the below fonts: */
    /* https://fonts.google.com/share?selection.family=Electrolize|Exo+2:ital,wght@0,100..900;1,100..900|Inter+Tight:ital,wght@0,100..900;1,100..900|Play:wght@400;700|Red+Hat+Display:ital,wght@0,300..900;1,300..900|Russo+One|Saira:ital,wght@0,100..900;1,100..900|Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700|Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900*/

    /* Nice but very heavy */
    /* font-family: "Russo One", sans-serif; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* font-size: 13px; */

    /* Good */
    /* font-family: "Exo 2", sans-serif; */
    /* font-optical-sizing: auto; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* font-size: 13px; */
    
    /* Nice; just very tall. */
    /* font-family: "Titillium Web", sans-serif; */
    /* font-weight: 600; */
    /* font-style: normal; */
    /* font-size: 14px; */

    /* Looks classy and neutral. */
    /* font-family: "Red Hat Display", sans-serif; */
    /* font-optical-sizing: auto; */
    /* font-weight: 500; */
    /* font-style: normal; */
    /* font-size: 13px; */

    /* Looks good but maybe a bit hard to read. */
    /* font-family: "Play", sans-serif; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* font-size: 13px; */

    /* Looks good; slight hint of techno but classy.
       Can't get stretching/wdth working though. */
    /* font-family: "Saira", sans-serif; */
    /* font-optical-sizing: auto; */
    /* font-weight: 500; */
    /* font-style: normal; */
    /* font-variation-settings: "wdth" 50; */
    /* font-size: 13px; */

    /* Good but not too different than Helvetica */
    /* font-family: "Inter Tight", sans-serif; */
    /* font-optical-sizing: auto; */
    /* font-weight: 500; */
    /* font-style: normal; */
    /* font-size: 13px; */

    /* Fun; just a bit wonky vertical spacing. */
    /* font-family: "Electrolize", sans-serif; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /*   font-size: 12px; */

    /* Looks almost pixel-font-y due to angles; fun and video-gamey but almost
       looks like lack of antialiasing sometimes. */
    font-family: "Tomorrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    
}

/* In full-height mode we need to keep things 100% all the way down. */
html.fullheight {
    height: 100%;
}
html.fullheight > body {
    /* Compensating for various things such as body margin and our
    debug info at screen bottom. Should make this more exact. */
    height: calc(100% - 32px);
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

.centertxt {
    text-align: center;
}
.redtxt {
    color: red;
}


path.gridlarge {
    stroke: var(--grid-large-color);
}
path.gridsmall {
    stroke: var(--grid-small-color);
}
rect.graphoutline {
    stroke: var(--graph-outline-color);
    fill: none;
}

rect.subgraphoutline {
    stroke: var(--subgraph-outline-color); 
    fill: none;
}

/* Strokes in our major colors */
.monostroke {
    stroke: var(--mono-color);
}
.redstroke {
    stroke: var(--red-color);
}
.greenstroke {
    stroke: var(--green-color);
}
.bluestroke {
    stroke: var(--blue-color);
}
.yellowstroke {
    stroke: var(--yellow-color);
}
.magentastroke {
    stroke: var(--magenta-color);
}
.tealstroke {
    stroke: var(--teal-color);
}

/* Fills in various colors */
.regulartxtfill {
    fill: var(--reg-text-color);
}
.graphoutlinefill {
    fill: var(--graph-outline-color);
}
.subgraphoutlinefill {
    fill: var(--subgraph-outline-color);
}
.monofill {
    fill: var(--mono-color);
}
.redfill {
    fill: var(--red-color);
}
.greenfill {
    fill: var(--green-color);
}
.bluefill {
    fill: var(--blue-color);
}
.yellowfill {
    fill: var(--yellow-color);
}
.magentafill {
    fill: var(--magenta-color);
}
.tealfill {
    fill: var(--teal-color);
}

/* Subtle bg tinting for graph rects */
.monographtint {
    fill: var(--mono-graph-tint-color);
}
.redgraphtint {
    fill: var(--red-graph-tint-color);
}
.greengraphtint {
    fill: var(--green-graph-tint-color);
}
.bluegraphtint {
    fill: var(--blue-graph-tint-color);
}
.yellowgraphtint {
    fill: var(--yellow-graph-tint-color);
}
.magentagraphtint {
    fill: var(--magenta-graph-tint-color);
}
.tealgraphtint {
    fill: var(--teal-graph-tint-color);
}


.darkredtxt {
    color: #990066;
}

.greentxt {
    color: var(--green-text-color);
}

.bluetxt {
    color: #059bff;
}

.orangetxt {
    color: var(--orange-text-color);
}

.regulartxt {
    color: var(--reg-text-color);
}

.slightfaded {
    color: var(--slight-fade-text-color);
}
.superfaded {
    color: var(--super-fade-text-color);
}
.superduperfaded {
    color: var(--super-duper-fade-text-color);
}

.subtext {
    color: var(--fade-text-color);
    text-shadow: none;
    font-size: 80%;
}

.faded {
    color: var(--fade-text-color);
}

.small {
    font-size: 75%;
}

/* Should try to calibrate this to the smallest value where our full size
 interfaces show up without going offscreen or otherwise breaking. */

@media (max-width: 599px) {
    /* Hide desktop-only stuff when screen is narrow. */
    .onlydesktop {
        display: none;
    }
}
@media (min-width: 600px) {
    /* Hide mobile-only stuff when screen is wide. */
    .onlymobile {
        display: none;
    }
}
@media (max-width: 599px) {
    /* Shrink text when screen is narrow */
    .textshrinkmobile {
        font-size: 75%;
    }
}

tr.controlrow {
    border-spacing: 5px;
    white-space: nowrap;
}
tr.controlrowtopspace td {
    border-spacing: 5px;
    white-space: nowrap;
    padding-top: 10px;
}
tr.controlrowbotspace td {
    border-spacing: 5px;
    white-space: nowrap;
    padding-bottom: 10px;
}

table.log {
    /* table-layout: fixed; */
    width:100%;
    max-width:100%;
    border-spacing: 0;
}
div.lognm {
    padding-right: 10px;
    display: inline-block;
}

div.accountlarge {
    word-break: break-all;
    margin: 2px;
    background-color: var(--account-large-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    max-width: fit-content;
    padding: 7px 20px 7px 7px;
    border-radius: 100px;
    box-shadow: var(--account-large-box-shadow);
    font-weight: bold;
    font-size: 32px;
    color: var(--green-text-color);
    text-shadow: var(--account-large-text-shadow);
}

/* Add some hover glow but only when part of a link. */
a>div.accountlarge:hover {
    background-color: var(--account-large-bg-color-hover);
}
a>div.accountlarge:active {
    background-color: var(--account-large-bg-color-active);
}

div.accountsmall {
    word-break: break-all;
    margin: 2px;
    background-color: var(--account-small-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2px;
    max-width: fit-content;
    padding: 4px 10px 4px 4px;
    border-radius: 100px;
    box-shadow: var(--account-small-box-shadow);
    font-weight: bold;
    font-size: 125%;
    color: var(--green-text-color);
    text-shadow: var(--account-small-text-shadow);
}

/* Add some hover glow but only when part of a link. */
a>div.accountsmall:hover {
    background-color: var(--account-small-bg-color-hover);
}
a>div.accountsmall:active {
    background-color: var(--account-small-bg-color-active);
}

/* We use nested tables for logs; want no padding in outer one. */
/* table.log td { */
/*     padding: 0 4px; */
/* } */

div.clouddivdisabled {
    opacity: 0.3;
    pointer-events: none;
}
div.clouddivdisablednofade {
    opacity: 0.5;
    pointer-events: none;
}

div.clouddivenabled {
    animation: fadein 1.0s;
}

pre.hideaceflash {
    animation: fadein2 1.0s;
}

@keyframes fadein {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes fadein2 {
    0% { opacity: 0.0; }
    20% { opacity: 0.0; }
    100% { opacity: 1; }
}

div.navbar {
    margin: 0;
    padding: 5px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* In vertical flex layouts, we don't budge. */
    flex: 0 0 auto;
}

div.navbarsticky {
    margin: -4px -4px 0px -4px;
    padding: 9px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    top: 0;
    background-image: linear-gradient(
        var(--bg-color),var(--bg-color-navbar-sticky)
    );
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    mask-image: linear-gradient(#ffff 85%,#0000);
}
/* Have a special version that extends out more left and right on large
screens so we cover shadows and glows and whatnot. Doing this on narrow
pages affects the overall page size on phones which isn't good. Though we
need to watch out since this could still be a problem on large pages on
phones. */
@media (min-width: 600px) {
    div.navbarsticky {
    margin: -4px -16px 0px -16px;
    padding: 9px 21px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    }
}
div.toolbar {
    margin: var(--v-margin-small) 0;
    border-radius:6px;
    box-shadow: var(--toolbar-box-shadow);
    outline: var(--toolbar-outline);
    background-color: var(--toolbar-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:2px 8px;
    /* In vertical flex layouts, we don't budge. */
    flex: 0 0 auto;
}

/* table.toolbar { */
/*     border-collapse: collapse; */
/*     width:100%; */
/*     border-radius:4px; */
/*     overflow: hidden; */
/*     margin: 8px 0px; */
/*     box-shadow: var(--toolbar-box-shadow); */
/*     outline: var(--toolbar-outline); */
/* } */

/* table.toolbarlesser { */
/*     border-collapse: collapse; */
/*     border-radius:8px; */
/*     overflow: hidden; */
/* } */

/* td.logtime { */
/*     background-color: var(--log-time-color);; */
/* } */

tr.log td {
    padding: 3px 5px;
}
tr.log:nth-child(even) {
    background-color: var(--log-line-color-1);
}

tr.log:nth-child(odd) {
    background-color: var(--log-line-color-2);
}

pre {
    margin: 2px 0;
}

pre.log {
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

a {
    color: var(--link-color);
    text-decoration: none;
    -webkit-tap-highlight-color: var(--link-color-tap);
}

/* For things like clickable anchors that aren't really links. */
a.fakelink {
    color: inherit;
}

a:hover {
    /* text-decoration: underline; */
    color: var(--link-color-hover);
    text-shadow: var(--link-text-shadow-hover);
    /* outline: var(--link-outline-hover); */
    
    /* border-radius: 5px; */
    /* outline-offset: 2px; */
    /* outline-offset: 3px; */
    /* background: hsla(270, 30%, 40%, 0.1); */
}
a:active {
    /* text-decoration: underline; */
    color: var(--link-color-active);
    text-shadow: var(--link-text-shadow-active);;
    
    /* outline: 3px solid hsla(270, 30%, 40%, 1.0); */
    /* border-radius: 5px; */
    /* outline-offset: 3px; */
    /* background: hsla(270, 30%, 40%, 1.0); */
}

a.noglow {
    text-shadow: none;
}

h1, h2, h3, h4, h5 {
    margin: var(--v-margin-small) 0;
}
h1 {
    text-shadow: var(--h1-text-shadow);
    font-size:1.8em;
}
h2 {
    font-size:1.5em;
}
h3 {
    font-size:1.25em;
}
h4 {
    font-size:1.1em;
}

hr {
    margin: var(--v-margin-large) 0;
    border: 0.5px solid var(--divider-color);
}

ol, ul {
    margin: var(--v-margin-small) 0;
    padding-inline-start: 24px;
}

div.meter {
    /* outline: var(--meter-outline); */
    box-shadow: var(--meter-box-shadow);
    background-color: var(--meter-bg-color);
}

/* select { */
/*     color: var(--fg-color); */
/*     background-color: var(--select-bg-color); */
/*     margin-right: 5px; */
/* } */

/* @arrowColor: #ffcc00; */
/* @arrow: escape('@{arrowColor}'); */

/* checkboxes */
input[type=checkbox] {
    /* accent-color: #84C; */
    /* outline: 2px solid var(--button-bg-color-hover); */
    /* border-radius:3px; */
    /* box-shadow: 0px 3px 10px 0px rgba(255,0,255, 1.0); */

    width: 16px;
    height: 16px;
    margin:0;
    /* display: inline-block; */
    /* padding: 0; */
    /* vertical-align: middle; */

    /* position: relative; */
    /* bottom: 30px; */
    
    background-color: var(--button-bg-color);
    border-radius: 4px;
    outline: none;
    color: var(--fg-color);
    
    box-shadow: var(--button-box-shadow-checkbox);

    border: var(--button-border);
  /* disable default appearance */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type=checkbox]:checked {
    background-image: var(--checkbox-check);
}

input[type=checkbox]:hover {
    background-color: var(--button-bg-color-hover);
}

input[type=checkbox]:active {
    background-image: var(--checkbox-check-active);
    background-color: var(--button-bg-color-active);
}

/* input[type=checkbox]:active { */
/*     accent-color:red; */
    /* outline: 2px solid var(--button-bg-color-active); */
    /* border-radius:5px; */
/* } */

select {  
    background-color: var(--button-bg-color);
    background-image: var(--select-icon);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: auto 50%;

    border-radius: 6px;
    outline: none;
    color: var(--fg-color);

    border: var(--button-border);
    
    padding-right: 26px;
    padding-left: 11px;
    padding-bottom: 6px;
    padding-top: 6px;
    
    /* margin: 2px; */

    box-shadow: var(--button-box-shadow);
    
  /* disable default appearance */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* &::-ms-expand { display: none }; */
}

select:hover {
    background-color: var(--button-bg-color-hover);
}
select:focus {
    /* Mac Safari sets this to -2; we don't want that. */
    outline-offset: initial;
}

/* Simple spacing for forms; gives every input its own margin. Use this for
simple cases when not wrapping everything in a flexbox. */
form.simplespaced select {
    margin: 2px;
}
form.simplespaced label {
    margin: 2px;
}
form.simplespaced input {
    margin: 2px;
}
form.simplespaced input[type=checkbox] {
    margin: 5px;
}
form.simplespaced input[type=number] {
    width: 70px;
}
form.simplespaced textarea {
    margin: 2px;
}

input[type=submit], button {
    background: var(--button-bg-color);
    outline: none;
    border: var(--button-border);
    border-radius: 6px;
    color: var(--fg-color);
    padding: 6px 11px;

    box-shadow: var(--button-box-shadow);
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button,
input[type=submit] {
    background: var(--button-submit-bg-color);
    font-weight: bold;
}


input[type=submit]:hover:enabled, button:hover:enabled {
    text-shadow: var(--button-text-shadow-hover);
    background: var(--button-submit-bg-color-hover);
}

input[type=submit]:active:hover:enabled, button:active:hover:enabled {
    color: var(--button-text-color-active);
    text-shadow: var(--button-text-shadow-active);
    background: var(--button-submit-bg-color-active);
}


input[type=submit]:disabled, button:disabled {
    color: var(--fade-text-color);
    background: var(--button-disabled-bg-color);
    text-shadow: none;
}

textarea,
input[type=text],
input[type=email],
input[type=number],
input[type=password] {
    background: var(--text-input-bg-color);
    color: var(--reg-text-color);
    box-shadow: var(--text-input-box-shadow);

    /* margin: 3px; */
    
    /* disable default appearance */
    border: none;
    border-radius: 3px;
    outline: var(--text-input-outline);
    padding: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* We don't need number inputs to be huge. Keeping them narrow-ish causes
less wrapping in our flex layouts. */
input[type=number] {
    width: 100px;
}

textarea::placeholder,
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder {
    color: var(--placeholder-text-color);
}

textarea:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus {
    /* Mac Safari sets this to -2; we don't want that. */
    outline-offset: initial;
}

/* Filter red icons so they fit the current theme. */
/* img.iconfilterwhite { */
/*     filter: grayscale() brightness(1000%); */
/* } */
/* img.iconfilterlink { */
/*     filter: var(--icon-filter-link); */
/* } */

.svgiconwhite {
    fill: white;
}
.svgiconregtext {
    fill: var(--reg-text-color);
}

.svgiconlink {
    fill: var(--link-color);
}

div.bgwhite {
    background-color: white;
}
div.bglink {
    background-color: var(--link-color);
}
div.bgregtext {
    background-color: var(--reg-text-color);
}

div.iconfolder {
    -webkit-mask-image: var(--folder-mask-image);
    mask-image: var(--folder-mask-image);
}
div.icondocument {
    -webkit-mask-image: var(--document-mask-image);
    mask-image: var(--document-mask-image);
}

div.selectboxselected {
    display: inline-block;
    padding: 3px;
    width: fit-content;
    background-color: var(--select-box-bg-color);
    border-radius: 5px;
}

div.selectboxselected {
    color: var(--select-box-text-color);
}

div.selectboxunselected {
    display: inline-block;
    padding: 3px;
    width: fit-content;
    /* border-radius: 12px; */
}


/* Our sections are divided into size and depth values. For size, sec1 is
   the smallest radius and sec3 the biggest. For depth, innie3 is deepest and
   outie3 is highest. samie is neutral. */

/* Note: Even though we're doing a trick to use margin instead of padding
for top/bottom (see notes below), we still need to set a 1px padding or else
margins will collapse with ones outside the sec which we don't want. */
div.sec3 {
    border-radius: var(--sec3-corner-radius);
    padding: 1px var(--sec3-edge);
    margin: var(--sec3-v-margin) 0;
}
div.sec2 {
    border-radius: var(--sec2-corner-radius);
    padding: 1px var(--sec2-edge);
    margin: var(--sec2-v-margin) 0;
}
div.sec1 {
    border-radius: var(--sec1-corner-radius);
    padding: 1px var(--sec1-edge);
    margin: var(--sec1-v-margin) 0;
}

/* Same spacing; tighter corners. */
div.sec3t {
    border-radius: var(--sec2-corner-radius);
    padding: 1px var(--sec3-edge);
    margin: var(--sec3-v-margin) 0;
}
div.sec3t2 {
    border-radius: var(--sec1-corner-radius);
    padding: 1px var(--sec3-edge);
    margin: var(--sec3-v-margin) 0;
}
div.sec2t {
    border-radius: var(--sec1-corner-radius);
    padding: 1px var(--sec2-edge);
    margin: var(--sec2-v-margin) 0;
}

/* We want stuff within our sections to be padded from the top and bottom,
but if we use padding for this then item margins cause things to appear too
far from the edge. So instead we set margins for first and last items to do
what padding would have, but this allows them to sub their own margins which
will be based off section edges instead of the padding inset. */
.sec3 > :first-child,
.sec3t > :first-child,
.sec3t2 > :first-child {
    margin-top: calc(var(--sec3-edge) - 1px);
}
.sec2 > :first-child,
.sec2t > :first-child {
    margin-top: calc(var(--sec2-edge) - 1px);
}
.sec1 > :first-child {
    margin-top: calc(var(--sec1-edge) - 1px);
}

.sec3 > :last-child,
.sec3t > :last-child,
.sec3t2 > :last-child {
    margin-bottom: calc(var(--sec3-edge) - 1px);
}
.sec2 > :last-child,
.sec2t > :last-child {
    margin-bottom: calc(var(--sec2-edge) - 1px);
}
.sec1 > :last-child {
    margin-bottom: calc(var(--sec1-edge) - 1px);
}

div.innie3 {
    background-color: var(--innie3-bg-color);
    outline: var(--innie3-outline);
    box-shadow: var(--innie3-box-shadow);
}

div.innie2 {
    background-color: var(--innie2-bg-color);
    outline: var(--innie2-outline);
    box-shadow: var(--innie2-box-shadow);
}

div.innie1 {
    background-color: var(--innie1-bg-color);
    outline: var(--innie1-outline);
    box-shadow: var(--innie1-box-shadow);
}

div.outie3 {
    background-color: var(--outie3-bg-color);
    outline: var(--outie3-outline);
    box-shadow: var(--outie3-box-shadow);
}

div.outie2 {
    background-color: var(--outie2-bg-color);
    outline: var(--outie2-outline);
    box-shadow: var(--outie2-box-shadow);
}

div.outie1 {
    background-color: var(--outie1-bg-color);
    outline: var(--outie1-outline);
    box-shadow: var(--outie1-box-shadow);
}

div.samie1 {
    outline: var(--samie1-outline);
    box-shadow: var(--samie1-box-shadow);
}

div.samie2 {
    outline: var(--samie2-outline);
    box-shadow: var(--samie2-box-shadow);
}
div.samie3 {
    outline: var(--samie3-outline);
    box-shadow: var(--samie3-box-shadow);
}


div.nonie {
}

/* Old */
/* div.innielarge { */
/*     background-color: var(--innie2-bg-color); */
/*     border-radius: var(--section-large-corner-radius); */
/*     padding: var(--section-large-edge); */
/*     margin: var(--v-margin-large) 0; */
/*     min-width: fit-content; */
/*     min-height: fit-content; */
/*     outline: var(--innie2-outline); */
/*     box-shadow: var(--innie2-box-shadow); */
/* } */
/* div.outielarge { */
/*     background-color: var(--outie2-bg-color); */
/*     border-radius: var(--section-large-corner-radius); */
/*     outline: var(--outie2-outline); */
/*     padding: var(--section-large-edge); */
/*     margin: var(--v-margin-large) 0; */
/*     min-width: fit-content; */
/*     min-height: fit-content; */
/*     box-shadow: var(--outie2-box-shadow); */
/* } */
/* div.samielarge { */
/*     border-radius: var(--section-large-corner-radius); */
/*     outline: var(--samie2-outline); */
/*     padding: var(--section-large-edge); */
/*     margin: var(--v-margin-large) 0; */
/*     min-width: fit-content; */
/*     min-height: fit-content; */
/* } */
/* div.samiesmall { */
/*     border-radius: var(--section-small-corner-radius); */
/*     outline: var(--samie1-outline); */
/*     padding: var(--section-small-edge); */
/*     margin: var(--section-small-v-margin) 0; */
/*     min-width: fit-content; */
/*     min-height: fit-content; */
/* } */
/* div.inniesmall { */
/*     background-color: var(--innie1-bg-color); */
/*     border-radius: var(--section-small-corner-radius); */
/*     padding: var(--section-small-edge); */
/*     margin: var(--section-small-v-margin) 0; */
/*     min-width: fit-content; */
/*     min-height: fit-content; */
/*     outline: var(--innie1-outline); */
/*     box-shadow: var(--innie1-box-shadow); */
/* } */
/* div.outiesmall { */
/*     background-color: var(--outie1-bg-color); */
/*     border-radius: var(--section-small-corner-radius); */
/*     outline: var(--outie1-outline); */
/*     padding: var(--section-small-edge); */
/*     margin: var(--section-small-v-margin) 0; */
/*     min-width: fit-content; */
/*     min-height: fit-content; */
/*     box-shadow: var(--outie1-box-shadow); */
/* } */
/* div.popup { */
/*     background-color: var(--outie3-bg-color); */
/*     border-radius: var(--section-large-corner-radius); */
/*     padding: var(--section-large-edge); */
/*     margin: var(--v-margin-large) 0; */
/*     min-width: fit-content; */
/*     min-height: fit-content; */
/*     outline: var(--outie3-outline); */
/*     box-shadow: var(--outie3-box-shadow); */
/* } */

/* /\* Our sections above provide padding to child elements, but this causes */
/*    vertical margins on first/last elements to create excessive space. So */
/*    let's automatically zero the top margin on the first thing and bottom on */
/*    the last, which should save us some manual tweaking. *\/ */
/* .inniesmall > :first-child, */
/* .outiesmall > :first-child, */
/* .samiesmall > :first-child, */
/* .innielarge > :first-child, */
/* .outielarge > :first-child, */
/* .samielarge > :first-child { */
/*     margin-top: 0; */
/* } */
/* .inniesmall > :last-child, */
/* .outiesmall > :last-child, */
/* .samiesmall > :last-child, */
/* .innielarge > :last-child, */
/* .outielarge > :last-child, */
/* .samielarge > :last-child { */
/*     margin-bottom: 0; */
/* } */

/* Centers content horizontally with standard spacing vertically. Note that
this will support margin collapsing, unlike the flex box version below. */
div.flowcenter {
    width: fit-content;
    margin: var(--v-margin-large) auto;
}

/* Start-justifies content horizontally and centers vertically using a
   flexbox. */
.flexstart {
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: var(--column-gap-small);
    
    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;

}

/* Centers content horizontally and vertically using a flexbox. */
.flexcenter {
    display: flex;
    justify-content: center;
    align-items: center;
    /* row-gap: var(--row-gap-small); */
    column-gap: var(--column-gap-small);
    
    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;

}


/* End-justifies content horizontally and centers vertically using a
   flexbox. */
.flexend {
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: var(--column-gap-small);
    
    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;

}


/* Stretches content to fill parent horizontally using flexbox
Also wires children to have equal basis, left justification for labels,
etc. */
.flex2colfill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--column-gap-small);
    width: 100%;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}

.flexfill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--column-gap-small);
    width: 100%;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexfillwide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--column-gap-large);
    width: 100%;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexfillaround {
    display: flex;
    justify-content: space-around;
    align-items: center;
    column-gap: var(--column-gap-small);
    width: 100%;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}

.flexwrapstart {
    display: flex;
    justify-content: start;
    align-items: center;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-small);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexwrapstartwide {
    display: flex;
    justify-content: start;
    align-items: center;
    row-gap: var(--row-gap-large);
    column-gap: var(--column-gap-large);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexwrapstartwideshort {
    display: flex;
    justify-content: start;
    align-items: center;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-large);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexwrapcenter {
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-small);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexwrapcenterwide {
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: var(--row-gap-large);
    column-gap: var(--column-gap-large);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexwrapcenterwideshort {
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-large);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}

.flexwrapfill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-small);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}
.flexwrapfillwide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--row-gap-large);
    column-gap: var(--column-gap-large);
    flex-flow: row wrap;

    /* We need this or else stuff under us isn't able to shrink */
    min-width: 10px;
}

.flex2colfill label {
    flex: 1 1 100px;
    text-align: left;
    word-wrap: anywhere;
}
.flex2colfill textarea,
.flex2colfill input:not([type="checkbox"]),
.flex2colfill select {
    box-sizing: border-box;
    flex: 1 1 100px;
}

/* Stuff under our fill classes should expand to fill space. */
.flexwrapfill textarea,
.flexwrapfill input:not([type="checkbox"]),
.flexwrapfill button,
.flexwrapfill .flexstart,
.flexwrapfill .flexcenter,
.flexwrapfill .flexend,
.flexwrapfill select,
.flexwrapfillwide textarea,
.flexwrapfillwide input:not([type="checkbox"]),
.flexwrapfillwide button,
.flexwrapfillwide .flexstart,
.flexwrapfillwide .flexcenter,
.flexwrapfillwide .flexend,
.flexwrapfillwide select {
    flex: 1 1 auto;
}

.flexcentercol {
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: var(--row-gap-small);
    flex-flow: column;
}
.flexcentercolwide {
    display: flex;
    justify-content: center;
    align-items: center;
    row-gap: var(--row-gap-large);
    flex-flow: column;
}
.flexstartcol {
    display: flex;
    justify-content: center;
    align-items: start;
    row-gap: var(--row-gap-small);
    flex-flow: column;
}
.flexstartcoltall {
    display: flex;
    justify-content: center;
    align-items: start;
    row-gap: var(--row-gap-large);
    flex-flow: column;
}
.flexstretchcol {
    display: flex;
    align-items: stretch;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-small);
    flex-flow: column;
}
.flexstretchcoltall {
    display: flex;
    align-items: stretch;
    row-gap: var(--row-gap-large);
    column-gap: var(--column-gap-small);
    flex-flow: column;
}
.flexwrapstartcol {
    display: flex;
    align-items: start;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-small);
    flex-flow: column wrap;
}
.flexwrapcentercol {
    display: flex;
    align-items: center;
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-small);
    flex-flow: column wrap;
}
.flexwrapstartcolwide {
    display: flex;
    align-items: start;
    row-gap: var(--row-gap-large);
    column-gap: var(--column-gap-large);
    flex-flow: column wrap;
}
.flexwrapcentercolwide {
    display: flex;
    align-items: center;
    row-gap: var(--row-gap-large);
    column-gap: var(--column-gap-large);
    flex-flow: column wrap;
}

/* A faded fixed size standin for tables with no data. */
div.emptytable {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fade-text-color);
    font-size: 10px;
    min-height: 30px;
}

div.settingrow {
    display: flex;
    justify-content: space-between;
    align-items:center;
}

/* /\* For making buttons that look like links. *\/ */
/* .link-button { */
/*     background: none; */
/*     /\* background-color: none; *\/ */
/*     border-radius:0; */
/*     padding:0; */
/*     /\* border: none; *\/ */
/*     color: var(--link-color); */
/*     cursor: pointer; */
/*     font-family: Helvetica, Arial, sans-serif; */
/*     font-size: 12px; */
/* } */
/* .link-button:focus { */
/*   outline: none; */
/* } */

div.dropdown {
    background-color: var(--dropdown-color);
    border-radius: 12px;
    font-size: 125%;
    padding: 6px;
    box-shadow: 0px 6px 20px 0 var(--dropdown-shadow-color);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    outline: 1px solid var(--dropdown-border-color);
}

div.dropdown div {
    display: block;
    padding: 12px;
    border-radius: 6px;
}

div.dropdown div:hover {
    background-color: var(--dropdown-hover-bg-color);
    color: var(--dropdown-hover-color);
    cursor: pointer;
}


/* dl { */
/*     margin: 0 */
/* } */
/* Wrapping each dt/dd pair in a div allows nicer formatting such as
   preventing putting each on a different column. */
/* dl > div { */
/*     break-inside: avoid; */
/*     /\* margin: 5px 0; *\/ */
/* } */

/* dt { */
/*     font-size: 75%; */
/*     color: var(--fade-text-color); */
/* } */
/* dd { */
/*     margin-bottom: 5px; */
/*     margin-inline-start: 0; */
/* } */
/* dl { */
/*     margin: 0; */
/*     display: grid; */
/*     grid-template-columns: max-content auto; */
/*     /\* grid-auto-rows: 18px; *\/ */
/*     align-items: center; */
/* } */
/* dt { */
/*     font-size: 75%; */
/*     color: var(--slight-fade-text-color); */
/*     grid-column-start: 1; */
/*     grid-column-end: 2; */
/*     /\* margin-right: 10px; *\/ */
/*     margin:3px 0; */
/* } */
/* dd { */
/*     grid-column-start: 2; */
/*     margin:0; */
/*     margin:2px 0 2px 10px; */
/*     white-space: nowrap; */
/*     overflow: hidden; */
/*     text-overflow: ellipsis; */
/* } */

/* Tweaky bits. We flag these as important so they always have the last
   word. */

.hpaddingcontent {
    padding-left: var(--h-padding-base) !important;
    padding-right: var(--h-padding-base) !important;
}

.hpaddinginfo {
    padding-left: var(--h-padding-info) !important;
    padding-right: var(--h-padding-info) !important;
}

.vmarginsmall {
    margin-top: var(--v-margin-small) !important;
    margin-bottom: var(--v-margin-small) !important;
}

.vmarginlarge {
    margin-top: var(--v-margin-large) !important;
    margin-bottom: var(--v-margin-large) !important;
}

.vmarginlargetop {
    margin-top: var(--v-margin-large) !important;
}

.vmarginlargebottom {
    margin-bottom: var(--v-margin-large) !important;
}

.vmarginsmalltop {
    margin-top: var(--v-margin-small) !important;
}

.vmarginsmallbottom {
    margin-bottom: var(--v-margin-small) !important;
}

.vmarginzerotop {
    margin-top: 0 !important;
}
.vmarginzerobottom {
    margin-bottom: 0 !important;
}

.marginzero {
    margin: 0 !important;
}

.cliptxt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.hscroll {
    min-width: unset;
    max-width: unset;
    overflow-x: scroll;
}
div.vscroll {
    min-height: unset;
    max-height: unset;
    overflow-y: scroll;
}

/* Some magic to get table cell text to compress. Don't quite understand how
   this works. */
/* .controlrow td { */
/*     max-width: 100px; */
/*     overflow: hidden; */
/*     text-overflow: ellipsis; */
/* } */
/* .controlrow div { */
/*     overflow: hidden; */
/*     text-overflow: ellipsis; */
/* } */

/* td { */
/*     padding: 0 1px; */
/* } */

div.workspace {
    margin: 8px 0;
    display: flex;
    align-items: stretch;
    gap: 6px;
    justify-content: stretch;
    flex-flow: column-reverse;
}
@media (min-width: 700px) {
    div.workspace {
        flex-flow: row;
    }
}

div.dragover {
    outline: 1px dashed #7777
}

div.dragoverhl {
    outline: 1px dashed #0a0f;
    background-color: #0f01;
}