:root {
    --blue: #888888;
    --dark-blue: #000000;
    --red: #f44336;
    --dark-red: #d32f2f;
    --moon-grey: #f2f2f2;
    --icon-red:    #656565;
    --icon-orange: #8f8f8f;
    --icon-yellow: #c2c2c2;
    --icon-green:  #a4a4a4;
    --icon-blue:   #858585;
    --icon-violet: #6e6e6e;
    --input-red: rgb(252, 208, 205);
    --input-green: rgb(201, 242, 218);
    --item-selected: white;
    --action: #000000;
    --background: #ffffff;
    --surfacePrimary: #ffffff;
    --surfaceSecondary: #eeeeee;
    --divider: rgba(0, 0, 0, .05);
    --iconPrimary: var(--icon-blue);
    --iconSecondary: rgb(255, 255, 255);
    --iconTertiary: rgb(204, 204, 204);
    --textPrimary: #000000;
    --textSecondary: #888888;
    --hover: rgba(0, 0, 0, .1);
    --borderPrimary: rgba(0, 0, 0, .1);
    --borderSecondary: rgba(0, 0, 0, .2);
    --dividerPrimary: rgba(255, 255, 255, .4);
    --dividerSecondary: rgba(255, 255, 255, .9);
}

:root.dark {
    --input-red: rgb(115, 48, 45);
    --input-green: rgb(20, 122, 65);
    --action: #000000;
    --background: rgb(20, 29, 36);
    --surfacePrimary: rgb(32, 41, 47);
    --surfaceSecondary: rgb(58, 65, 71);
    --textPrimary: #ffffff;
    --textSecondary: #888888;
    --divider: rgba(255, 255, 255, .12);
    --iconPrimary: rgb(255, 255, 255);
    --iconSecondary: rgb(255, 255, 255);
    --iconTertiary: rgb(255, 255, 255);
    --hover: rgba(255, 255, 255, .1);
    --borderPrimary: rgba(255, 255, 255, .05);
    --borderSecondary: rgba(255, 255, 255, .15);
    --dividerPrimary: rgba(30, 30, 30, .4);
    --dividerSecondary: rgba(30, 30, 30, .6);
}

body {
    font-family: ui-monospace, monospace;
    padding-top: 4em;
    background: var(--background);
    color: var(--textSecondary);
    font-size: 80%;
}

li {
    font-size: 110%;
    padding: 12px !important;
}

.vue-simple-progress-bar {
    background-color: #000000 !important;
}

.material-icons {
    font-size: 1rem;
}

/* Header: Icons größer */
header .material-icons {
    font-size: 1.2rem !important;
}

/* Breadcrumbs: Icons größer */
.breadcrumbs .material-icons {
    font-size: 1.2rem !important;
}

header {
    height: 3em;
    padding-left: 184px !important;
}

button, input, optgroup, select, textarea {
    font-size: 90%;
}

nav .action {
    height: 38px;
    margin-left: 8px !important;
}

.breadcrumbs {
    padding-top: 6px !important;
}

input[type="checkbox"] {
    accent-color: #000000;
}

.shell__text, .shell__prompt, .shell__prompt i {
    font-size: 80%;
}

.card.floating {
    padding: 1em;
}

#login h1 {
    font-size: 200%;
    text-align: left;
    color: var(--dark-blue);
    margin: .4em 0 2em;
}

#login h1::before {
    color: var(--dark-blue);
    content: "□→■ \A Büro Modal \A";
    white-space: pre-wrap; /* oder pre */
}

#search #result {
    color: #ffffff;
}

#search #result li {
    color: #000000;
}


@media (max-width: 736px) {

header {
    height: 3em;
    padding-left: 5px !important;
}
}