:root {
    --button-color: #dddddd;
    --button-color-hover: white;

    --button-background: #36465d;
    --button-background-hover: #3e7aa8;
    --button-border-color: var(--button-background);
    --button-border-color-hover: var(--button-background-hover);

    --button-color-red: var(--button-color);
    --button-color-red-hover: var(--button-color-hover);
    --button-background-red: #ad1457;
    --button-background-red-hover: #d81b60;
    --button-border-color-red: var(--button-background-red);
    --button-border-color-red-hover: var(--button-background-red-hover);

    --button-background-green: #2e7d32;
    --button-background-green-hover: #43a047;
    --button-border-color-green: var(--button-background-green);
    --button-border-color-green-hover: var(--button-background-green-hover);

    --button-background-orange: #e64a19;
    --button-background-orange-hover: #ff5722;
    --button-border-color-orange: var(--button-background-orange);
    --button-border-color-orange-hover: var(--button-background-orange-hover);

    --button-background-grey: grey;
    --button-background-grey-hover: var(--button-background-grey);
    --button-border-color-grey: var(--button-background-grey);
    --button-border-color-grey-hover: var(--button-background-grey-hover);

    --button-border-width: 1px;

    --button-min-width: 4em;
    --button-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);

    --button-color-grey: var(--button-color);
}

:root.high-contrast {
    --button-color: LightSkyBlue;
    --button-color-hover: black;

    --button-background: black;
    --button-background-hover: var(--button-color);
    --button-border-color: var(--button-color);
    --button-border-color-hover: var(--button-color);
    
    --button-color-red: HotPink;
    --button-color-red-hover: var(--button-color-hover);
    --button-background-red: var(--button-background);
    --button-background-red-hover: var(--button-color-red);
    --button-border-color-red: var(--button-color-red);
    --button-border-color-red-hover: var(--button-color-red);

    --button-background-green: var(--button-background);
    --button-background-green-hover: var(--button-background-hover);;
    --button-border-color-green: var(--button-color);
    --button-border-color-green-hover: var(--button-border-color-hover);

    --button-background-orange: var(--button-background);
    --button-background-orange-hover: var(--button-background-hover);
    --button-border-color-orange: var(--button-color);
    --button-border-color-orange-hover: var(--button-border-color-hover);

    --button-background-grey: var(--button-background);
    --button-background-grey-hover: var(--button-background);
    --button-border-color-grey: grey;
    --button-border-color-grey-hover: grey;
    --button-color-grey: grey;

    --button-border-width: 1px;
}

@media print {
    .sm-button {
        display: none !important;
    }
}

@media not print {
    .sm-button {
        display: inline-block;
    }
}

.sm-button {
    background: var(--button-background);
    text-decoration: none;
    color: var(--button-color);
    font-size: 1em;
    font-weight: 400;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border-radius: 0.25em;
    cursor: pointer;
    box-shadow: var(--button-box-shadow);
    text-align: center;
    white-space: nowrap;
    border: var(--button-border-width) solid var(--button-border-color);
    min-width: 1.1em;
}

.sm-button:hover {
    color: var(--button-color-hover);
    background-color: var(--button-background-hover);
    border: var(--button-border-width) solid var(--button-border-color-hover);
}
.sm-button:focus {
    color: var(--button-color-hover);
    background-color: var(--button-background-hover);
    border: var(--button-border-width) solid var(--button-border-color-hover);
    text-decoration: underline;
    outline: none;
}
.sm-button.red-button {
    color: var(--button-color-red);
    background: var(--button-background-red);
    border: var(--button-border-width) solid var(--button-border-color-red);
}
.sm-button.red-button:hover {
    color: var(--button-color-red-hover);
    background: var(--button-background-red-hover);
    border: var(--button-border-width) solid var(--button-border-color-red-hover);
}
.sm-button.red-button:focus {
    color: var(--button-color-red-hover);
    background: var(--button-background-red-hover);
    border: var(--button-border-width) solid var(--button-border-color-red-hover);
}
.sm-button.green-button {
    background: var(--button-background-green);
    border: var(--button-border-width) solid var(--button-border-color-green);
}
.sm-button.green-button:hover {
    color: var(--button-color-hover);
    background: var(--button-background-green-hover);
    border: var(--button-border-width) solid var(--button-border-color-green-hover);
}
.sm-button.green-button:focus {
    color: var(--button-color-hover);
    background: var(--button-background-green-hover);
    border: var(--button-border-width) solid var(--button-border-color-green-hover);
}
.sm-button.orange-button {
    background: var(--button-background-orange);
    border: var(--button-border-width) solid var(--button-border-color-orange);
}
.sm-button.orange-button:hover {
    color: var(--button-color-hover);
    background: var(--button-background-orange-hover);
    border: var(--button-border-width) solid var(--button-border-color-orange-hover);
}
.sm-button.orange-button:focus {
    color: var(--button-color-hover);
    background: var(--button-background-orange-hover);
    border: var(--button-border-width) solid var(--button-border-color-orange-hover);
}
.sm-button.grey-button {
    background: var(--button-background-grey);
    border: var(--button-border-width) solid var(--button-border-color-grey);
}
.sm-button.grey-button:hover {
    color: var(--button-color-hover);
    background: var(--button-background-hover);
    border: var(--button-border-width) solid var(--button-border-color-grey-hover);
}
.sm-button.grey-button:focus {
    color: var(--button-color-hover);
    background: var(--button-background-hover);
    border: var(--button-border-width) solid var(--button-border-color-grey-hover);
}

.sm-button:disabled,
.sm-button[disabled],
.sm-button.disabled {
    color: var(--button-color-grey) !important;
    background: var(--button-background-grey) !important;
    border: var(--button-border-width) solid var(--button-border-color-grey) !important;
    cursor: default;
}
.sm-button:disabled:hover,
.sm-button[disabled]:hover,
.sm-button.disabled:hover {
    color: var(--button-color-grey)  !important;
    background: var(--button-background-grey) !important;
    border: var(--button-border-width) solid var(--button-border-color-grey-hover) !important;
    outline: none !important;
}
.sm-button:disabled:focus
.sm-button[disabled]:focus
.sm-button.disabled:focus {
    color: var(--button-color-grey)  !important;
    background: var(--button-background-grey) !important;
    border: var(--button-border-width) solid var(--button-border-color-grey-hover) !important;
    text-decoration: underline !important;
    outline: none !important;
}