body {
    font-family: "Atma", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dx-widget {
    font-family: "Atma", "Assistant", sans-serif;
    font-size: 15px;
}

.dx-widget:not(.dx-icon):not(i),
.dx-overlay-content,
.dx-popup-content,
.dx-button-text,
.dx-texteditor-input,
input,
.dx-list-item-content,
.dx-treeview-item-content,
.dx-toolbar-item-content,
.dx-datagrid-text-content,
.dx-selectbox-container,
.dx-dropdowneditor-input-wrapper,
.dx-tag-content,
.dx-dropdowneditor-overlay {
    font-family: "Atma", "Inter", sans-serif !important;
    font-size: 15px;
}

.dx-layout-manager .dx-field-item {
    font-family: "Atma", "Nunito", sans-serif;
    font-size: 15px;
}

.mdl-save-metadata-popup .dx-texteditor-input {
    font-family: "Atma", "Assistant", sans-serif !important;
}

.feedback-toast .dx-toast-content {
    font-family: "Atma", sans-serif;
}

#toolbar {
    position: fixed;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    z-index: 10;
}

#bottom-toolbar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    z-index: 10;
}

.toolbar-separator {
    color: #DDD;
    margin: 10px;
    cursor: default;
}

.dx-toolbar-after,
.dx-toolbar-before,
.dx-toolbar-center {
    top: 0;
    display: table;
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: rgba(0,0,0,.12) 0 2px 7.2px 0,rgba(0,0,0,.14) 0 8px 16px 0;
}

.dx-popup-title .dx-toolbar-after,
.dx-popup-title .dx-toolbar-before,
.dx-popup-title .dx-toolbar-center {
    box-shadow: none;
    background-color: transparent;
}

.dx-popup-bottom .dx-toolbar-after,
.dx-popup-bottom .dx-toolbar-before,
.dx-popup-bottom .dx-toolbar-center {
    box-shadow: none;
    background-color: transparent;
}

.dx-chat .dx-toolbar-after,
.dx-chat .dx-toolbar-before,
.dx-chat .dx-toolbar-center {
    box-shadow: none;
    background-color: transparent;
}

.dx-datagrid-header-panel .dx-toolbar-after,
.dx-datagrid-header-panel .dx-toolbar-before,
.dx-datagrid-header-panel .dx-toolbar-center {
    box-shadow: none;
    background-color: transparent;
}

.dx-slider-tooltip-position-top {
    padding-top: 0 !important;
}

.dx-slider-tooltip-position-top .dx-popup-content {
    font-family: KaTeX_Main, serif !important;
    font-size: 16px !important;
}

.mdl-switch-color-probe {
    position: absolute;
    left: -10000px;
    top: -10000px;
    opacity: 0;
    pointer-events: none;
}


/* The degree mark is a dot standing where a degree sign stands, which is what the player's angle-unit
   key and the protractor's both draw it as. A component's mode key writes its icon on its own with no
   word beside it, so the mark is given its size here rather than in a template of its own. */
.mdl-component-mode-selector .fa-dot {
    font-size: 20px;
    position: relative;
    top: -4px;
}

/* Pill button groups: one small icon per choice, with the chosen one under a sliding pill.
   Shared by the player toolbar and the shape toolbars so a choice looks the same wherever it is made. */
.mdl-small-icon .dx-icon {
    font-size: 10px !important;
    transition: font-size 0.2s ease, font-weight 0.2s ease;
}

.mdl-small-icon.dx-button-mode-outlined .dx-icon {
    font-size: 12px !important;
}

.mdl-small-icon .dx-button-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mdl-pill-group {
    position: relative;
    padding: 3px;
    border-radius: 10px;
}

.mdl-pill-group .mdl-pill {
    position: absolute;
    top: 3px;
    height: calc(100% - 6px);
    background: white;
    border-radius: 7px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: left 0.22s cubic-bezier(0.34, 1.3, 0.64, 1),
                width 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.mdl-pill-group .dx-icon,
.mdl-display-group .dx-icon {
    font-weight: 300;
}

/* A notation pill shows its tenth as maths, sized as the pill's text would be and letting the
   click through to the button. */
.mdl-notation-group .mdl-notation-field {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    border: none;
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    vertical-align: middle;
}

.mdl-notation-group .mdl-notation-field::part(container) {
    padding: 0;
    min-height: 0;
}

.mdl-notation-group .mdl-notation-field::part(menu-toggle) {
    display: none;
}

/* A pill group whose choices are named rather than iconed: the words carry the meaning, so they are
   given room to be read and the chosen one is weighted the way a chosen icon is. */
.mdl-named-pill-group .dx-button-content {
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.mdl-named-pill-group .dx-item-selected .dx-button-content {
    font-weight: 600;
}

.mdl-pill-group .dx-item-selected .dx-icon,
.mdl-display-group .dx-item-selected .dx-icon,
.mdl-display-group.dx-button-mode-outlined .dx-icon {
    font-weight: 900;
}

:root {
    --math-variable: #183b66;
    --math-number: #c65d00;
    --math-operator: #626b75;
    --math-function: #2e7d4f;
    --math-derivative: #b0185b;
    --math-qualifier-index: #347dac;
    --math-iteration-index: #7047b8;
    --math-independent: #7047b8;
    --math-error: #d32f2f;
    --math-caret: #0f6cbd;
    --math-error-panel-background: #ffffff;
    --math-error-panel-color: #1f2430;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --math-variable: #a9c8ee;
        --math-number: #ffb066;
        --math-operator: #a7b0ba;
        --math-function: #7bd6a2;
        --math-derivative: #ff8ab9;
        --math-qualifier-index: #7fc4e8;
        --math-iteration-index: #c3a9ff;
        --math-independent: #c3a9ff;
        --math-error: #ff8a80;
        --math-caret: #4fa8ff;
        --math-error-panel-background: #2a2d33;
        --math-error-panel-color: #e6e8eb;
    }
}

:root[data-theme="dark"] {
    --math-variable: #a9c8ee;
    --math-number: #ffb066;
    --math-operator: #a7b0ba;
    --math-function: #7bd6a2;
    --math-derivative: #ff8ab9;
    --math-qualifier-index: #7fc4e8;
    --math-iteration-index: #c3a9ff;
    --math-independent: #c3a9ff;
    --math-error: #ff8a80;
    --math-caret: #4fa8ff;
    --math-error-panel-background: #2a2d33;
    --math-error-panel-color: #e6e8eb;
}

math-field {
    --selection-background-color: rgba(15, 108, 189, 0.28);
    --selection-color: inherit;
    --caret-color: var(--math-caret);
}

math-field.mdl-expression-aligned {
    text-align: center;
}

#units-grid .mdl-units-name-cell {
    font-size: 16px;
}

#units-grid .mdl-units-name-cell .form-math-field {
    vertical-align: middle;
}

#units-grid .mdl-units-unit-cell {
    font-size: 15px;
}

.mdl-units-item .form-math-field {
    font-size: 15px;
    padding: 0;
    line-height: 1;
}

.mdl-units-item .form-math-field::part(container) {
    padding: 0;
    min-height: 0;
}

.mdl-units-item .form-math-field::part(menu-toggle) {
    display: none;
}

.mdl-units-warm-host {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 200px;
    visibility: hidden;
    pointer-events: none;
}

.mdl-units-dropdown .dx-overlay-content {
    padding: 0;
}

.mdl-units-dropdown .dx-popup-content {
    padding: 0;
    height: 100%;
}

.mdl-units-dropdown .dx-list-item-content {
    padding: 5px 8px;
}

.mdl-units-item {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* The chart's tick labels are compiled from blocks, so they carry no class of their own. Every
   piece of text the block layer writes for a chart is a label, and none of it is to be selected
   or to take the pointer away from the plot underneath. */
.chart-block-layer text {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}