@charset 'UTF-8';

@import 'fonts/solid.min.css';
@import 'fonts/fontawesome.min.css';
@import 'variables.css';
@import 'inputs.css';
@import 'components/table.css';
@import 'components/itp-button.css';
@import 'components/dialog.css';
@import 'components/itp-grid.css';
@import 'components/itp-card.css';
@import 'components/spa-message.css';
@import 'components/spa-chip.css';
@import 'components/tab.css';
@import 'mawa-deltas.css';

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    display: grid;
    grid-template-rows: 50px auto;
    background-color: var(--itp-background-color);

    h2 {
        margin-bottom: 1rem;
    }

    /* ### home button ### */
    .push-home {
        cursor: pointer;
    }

    .pushable {
        cursor: pointer;
    }



    section {

        &.top {
            display: block;
            background: var(--mawa-background-color) linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
            color: var(--mawa-foreground-color);

            h1.title {
                line-height: var(--itp-topbar-height);
                margin: 0 0 0 1rem;
                font-size: 1.5em;
                color: rgb(0, 159, 227);
            }
        }

        &.main-content {
            display: grid;
            grid-template-columns: var(--itp-topbar-heigth) auto;
            height: calc(100vh - var(--itp-topbar-heigth));
        }
    }

    .output {
        padding: 0.5rem;
    }
}

label {
    font-size: .8rem;
    font-weight: bold;
    display: block;
    opacity: .6;
}


/* Chromium delta! */
body h2 {
    margin-bottom: 1rem;
}

body section {

    &.top {
        display: block;
        background: var(--mawa-background-color) linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
        color: var(--mawa-foreground-color);

    }

    &.main-content {
        display: grid;
        grid-template-columns: var(--itp-topbar-heigth) auto;
        height: calc(100vh - var(--itp-topbar-heigth));
    }
}

body section.top h1.title {
    line-height: var(--itp-topbar-height);
    margin: 0 0 0 1rem;
    font-size: 1.5em;
    color: rgb(0, 159, 227);
}

body section.top .user-info {
    position: absolute;
    top: 0;
    right: 0.5rem;
    line-height: 50px;
}

body .output {
    padding: 0.5rem;
}

.buttons {
    text-align: right;
}

/* ##### Alignments ###### */
.center {
    text-align: center;
}

.right {
    text-align: right;
}

/* ### Shaltung linkq quality ### */
.ampel {
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 16px;
    position: absolute;
    top: 3.5rem;
    right: 0.3rem;
    z-index: 1;
}

.ampel.rating-red {
    background: red;
    padding: 1rem;
    color: white;
}

.ampel.rating-yellow {
    background: rgb(255, 252, 60);
    padding: 1rem;
    color: white;
}

.ampel.rating-green {
    background: rgb(31, 255, 31);
    padding: 1rem;
    color: white;
}

.as-link {
    cursor: pointer;
}

.as-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}