@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

a, .btn-link { color: #0366d6; }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.iz-button {
    color: black;
    font-weight: bold;
    padding: 5px 20px;
}

.title {
    color: white;
    font-weight: bold;
}

.highlighted { font-weight: bold; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

.invalid { outline: 1px solid red; }

.validation-message { color: red; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading {
    position: absolute;
    top: 100px;
    width: 10rem;
    height: 10rem;
    border-width: 50px;
}

.dialog-box-content {
    background-color: lightpink;
    color: black;
    border-radius: 20px;
    border-width: 5px;
    border-style: solid;
    border-color: orangered;
}

.challenge-dialog-box-scores {
    max-height: 175px;
    border-top: 1px solid green;
}

.game-clock {
    position: absolute;
    bottom: 0;
    right: 0;
}

.scoreboard {
    position: absolute;
    bottom: 0;
}

#vg-tooltip-element {
    /* Vega tooltip container */
    background-color: lightpink;
    color: black;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: orangered;
    padding: 10px;
    margin: 8px;
    text-align: center;
    font-size: medium; /* NOTE: all text except the H2 as overriden below */
}

#vg-tooltip-element h2 {
    /* Vega - Tooltip - Header */
    font-size: large;
}

#vg-tooltip-element img {
    /* Vega - Tooltip - Image */
    border: 2px outset;
}

#vg-tooltip-element table {
    /* Vega - Tooltip - Table of custom properties */
    margin-left: auto;
    margin-right: auto;
}

#vg-tooltip-element td.key {
    /* Vega - Tooltip - Captions of custom properties (NOTE: td.key must not have a space in between) */
    font-style: italic;
}

#vg-tooltip-element td.value {
    /* Vega - Tooltip - Values of custom properties (NOTE: td.value must not have a space in between) */
    font-weight: bold;
}