:root {
    --vargin: 4ch;
    --nice-color: #6d72a9;
    --color-success: #6ca986;
    --color-warning: #a9906c;
    --color-error: #a96c6c;

    --current-highlight: yellow;
}


body {
    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    -webkit-font-smoothing: antialiased;
}

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

*, *::before, *::after {
    box-sizing: border-box; /* Makes padding/borders not break width */
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.a-util {
    text-decoration: 1px dotted underline;
}

.a-button {
    text-decoration: none;
}

/* Make button.a-button match a.a-button appearance */
button.a-button {
    background: none;
    border: none;
    color: var(--nice-color);
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.a-button:hover {
    cursor: pointer;
    color: hsl(0, 0%, 95%);
    background-color: var(--nice-color);
}

.a-button__loading {
    color: hsl(0, 0%, 90%) !important;
    background-color: hsl(0, 0%, 72%) !important;
    cursor: wait !important;
}

.a-button__disabled {
    color: hsl(0, 0%, 60%) !important;
    cursor: not-allowed !important;
}

.a-button__disabled:hover {
    cursor: not-allowed;
    background-color: hsl(0, 0%, 95%);
}

td {
    padding: 2px 8px;
}

.muted {
    color: #aaa;
}