html {
    --main-font-color: #dddddd;
    --main-grey-color: #aaaaaa;
    --main-dark1-color: #3c3f41;
    --main-dark2-color: #323232;
    --main-background-color: #2b2b2b;
    --main-blue-color: #a9b7c6;
    --main-selected-color: #a4c35b;
    --main-error-color: #ff463f;
    --main-yellow-color: #e3bb68;
    --main-green-color: #6a8759;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(material.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons', fantasy;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    background-color: inherit;
}

button.thin {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    min-width: 100px;
    height: 20px;
    background-color: inherit;
    color: var(--main-font-color);
}

button.image {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 24px;
    width: 24px;
    background-color: inherit;
    color: var(--main-font-color);
    filter: invert(100);
}

button.image img {
    height: 100%;
    width: 100%;
}

button.thin:not([disabled]):hover {
    color: var(--main-background-color);
    background-color: var(--main-selected-color);
}

button.thin[disabled] {
    color: var(--main-dark1-color);
}

button.normal {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 24px;
    background-color: inherit;
    color: var(--main-font-color);
}

button.normal:not([disabled]):hover {
    color: var(--main-background-color);
    background-color: var(--main-selected-color);
}

button.normal[disabled] {
    color: var(--main-dark1-color);
}

button.material-icons {
    font-family: 'Material Icons', fantasy;
    font-size: x-large;
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    background-color: inherit;
    color: var(--main-font-color);
}

button.active {
    color: var(--main-selected-color);
}

body {
    color: var(--main-font-color);
    background-color: var(--main-background-color);
    font-family: Helvetica, serif;
    margin: 0;
    overflow: auto;
}

hr {
    border: none;
    height: 1px;
    margin: 0;
    color: var(--main-font-color);
    background-color: var(--main-font-color);
}

a {
    text-decoration: none;
}

a.normal.active {
    background-color: var(--main-dark2-color);
}

a.normal {
    display: block;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 5px;
    padding-right: 5px;
    height: 24px;
    line-height: 24px;
    background-color: var(--main-dark1-color);
}

a.normal:hover {
    background-color: var(--main-selected-color);
    color: var(--main-dark2-color);
}

a:link {
    color: var(--main-font-color);
}

a:visited {
    color: var(--main-font-color);
}

a:hover {
    color: var(--main-font-color);
}

a:active {
    color: var(--main-font-color);
}

viewport {
    display: block;
    position: relative;
    height: calc(100% - 40px);
}

select {
    border: 0;
    border-radius: 0;
    color: var(--main-font-color);
    background-color: var(--main-background-color);
    width: 100%;
    outline: 0
}