:root {
    
/* Sitewide Overrides */
   
    /* sidebar */
    --sw-sidebar-edge: #c6c6c6;
    --sw-sidebar-menu-bg: #2e3436;
    --sw-sidebar-menu-bg-hover: #464440;
    --sw-sidebar-menu-fg: var(--sw-bg);
    --sw-sidebar-menu-fg-hover: white;
    --sw-sidebar-menu-indicator-checked: white;
    --sw-sidebar-menu-indicator-hover: gray;
    --sw-sidebar-submenu-bg: #797d83;
    --sw-sidebar-submenu-bg-hover: #6d7075;
    --sw-sidebar-submenu-fg: #222b34;
    --sw-sidebar-submenu-fg-hover: #13191f;
    --sw-sidebar-submenu-indicator-checked: #5b8dd7;
    --sw-sidebar-submenu-indicator-hover: #2b5696;
    --sw-sidebar-user-fg: orange;
    --sw-sidebar-user-fg-hover: white;

    /* footer */
    --sw-footer-text-fg: var(--sw-bg);
}

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  src: url(/static/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf) format('truetype');
}

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: italic;
  src: url(/static/fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf) format('truetype');
}

@font-face {
  font-family: "Exo 2";
  font-weight: 100 900;
  font-style: normal;
  src: url(/static/fonts/Exo2-VariableFont_wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Exo 2";
  font-weight: 100 900;
  font-style: italic;
  src: url(/static/fonts/Exo2-Italic-VariableFont_wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Noto Sans";
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  src: url(/static/fonts/NotoSans-VariableFont_wdth,wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Noto Sans";
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: italic;
  src: url(/static/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Open Sans";
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  src: url(/static/fonts/OpenSans-VariableFont_wdth,wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Open Sans";
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  src: url(/static/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Merriweather Sans";
  font-weight: 300 800;
  font-style: normal;
  src: url(/static/fonts/MerriweatherSans-VariableFont_wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Merriweather Sans";
  font-weight: 300 800;
  font-style: italic;
  src: url(/static/fonts/MerriweatherSans-Italic-VariableFont_wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 100 700;
  font-style: italic;
  src: url(/static/fonts/RobotoMono-Italic-VariableFont_wght.ttf) format('truetype') tech(variations);
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 100 700;
  font-style: normal;
  src: url(/static/fonts/RobotoMono-VariableFont_wght.ttf) format('truetype') tech(variations);
}

.h2-name {
    color: var(--rope); /*#51237d;*/
    margin: 10px 0px;
    width: 100%;
}

option {
    padding: 5px;
}

input[type="checkbox"]:checked ~ .rim {
    border-color: green;
}

input[type="checkbox"]:checked ~ .rim .track {
    background: #8c9c74;
}

input[type="checkbox"]:checked ~ .rim .lever {
    background: #f0eae4;
    box-shadow: -2px 0px 2px 2px rgba(0, 0, 0, 0.4);
    transform: translateX(calc(var(--wgt-height) - 5px));
}

.serious {
    background: #ffdede;
    border: 2px dashed red;
    color: maroon;
}

.serious .msg {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 
        calc(2 * var(--ms))
        calc(2 * var(--ms)) 
        calc(0.5 * var(--ms))
        calc(2 * var(--ms));
}

.serious .object {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    font-size: 0.9em;
    padding: 
        calc(0.5 * var(--ms))
        calc(2 * var(--ms))
        calc(2 * var(--ms)) 
        calc(2 * var(--ms));
}

.serious ~ .confirm {
    color: maroon;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 20px;
}

.serious .object label {
    font-weight: bold;
}

.serious .object dd {
    margin-bottom: calc(0.5 * var(--ms));
}

.tag-f textarea, .tag textarea {
    resize: none;
}

.after-img-wrapper {
    min-width: var(--width-device-margins);
    max-width: calc(100% - var(--width-device-margins));
}

.handwriting {
    font-family: 'Shantell Sans', sans-serif;
}

.prompt {
    font-size: 1.5em;
    font-weight: bold;
    margin: 40px auto;
}

.warning {
    background: #6c0000;/* #ffd7d7; */
    border: 1px solid grey;/* #ffb6b6; */
    border-radius: 20px;
    color: #ffd7d7;
    margin: auto;
    padding: 40px;
}

.warning, .prompt, .options {
    min-width: var(--screen-width-outer-ms);
    max-width: 65%;
    text-align: center;
}

.warning .msg, .warning dt, .options dt {
    font-weight: bold;
}

.warning dd, .warning dt {
    color: var(--ash); /* #6d6d6d; */
    font-size: 0.85em;
}

.warning dt {
    margin-top: 20px;
}

.warning hr {
    border-color: grey;
}

.options {
    margin: 20px auto;
}

.wgt-toggle {
    height: calc(0.75 * var(--wgt-height));
    width: calc(2 * var(--wgt-height));
}

.wgt-toggle input[type="checkbox"] {
    visibility: hidden;
}

.wgt-toggle-label:hover {
    cursor: pointer;
}

.wgt-toggle .rim {
    border: 1px dashed red;
    border-radius: calc(0.25 * var(--wgt-height));
    height: calc(0.75 * var(--wgt-height));
    position: relative;
    top: calc(-1 * var(--label-mb));
    padding: 3px;
    transition: border 0.5s ease;
}

.wgt-toggle .track {
    background: #c69898;
    border: 1px solid var(--pale-brown);
    border-radius: calc((0.25 * var(--wgt-height)) - 4px);
    box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 100%;
    transition: background 0.5s ease;
}

.wgt-toggle .lever {
    background: var(--bg);
    border: 1px solid var(--pale-brown);
    border-radius: calc((0.25 * var(--wgt-height)) - 4px);
    box-shadow: 2px 0px 2px 2px rgba(0, 0, 0, 0.4);
    height: 100%;
    width: 50%;
    transition: 
        background 0.5s ease, 
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

.wgt-value {
    background: var(--child-even-bg);
    border: None;
    font-family: 'Karla', sans-serif;
    font-weight: bold;
    padding: 10px;
}

.wgt-false {
    background: var(--highlight-red);
}

.wgt-true {
    background: var(--highlight-green);
}

.wgt-h120px {
    -webkit-appearance: menulist-button;
    height: 120px;
}

.tag-f .value,
.tag .value,
label ~ .value {
    font-weight: bold;
}

input[type="checkbox"] ~ label {
    font-size: 0.85em;
}