html{
    font-size:24px;
}

@media (min-width: 1440px) and (orientation: portrait) {
    html{
        font-size: 60px;
    }
}

body {
    background-color: #555555;
    color: white;
    font-family: "Source Sans Pro", sans-serif;
}

.tracker-header {

}

.tracker-body {

}

.header-row {
    margin-top: 1% !important;
}

.something-stupid{
    height:100%;
}

.box {
    background-color: #363636;
    padding: 20px;
}

    .box .title {
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
    }

    .box p {
        padding: 0;
        margin: 0;
    }

    .box .content {
        font-size: 6vw;
        font-weight:600;
        text-align: center;
        margin-top:-2%;
    }
    .box .title {
        font-size: 2.5vw;
        text-align: center;
    }
    .box .byline {
        font-size: 2.5vw;
        text-align: center;
        font-weight:600;
        margin-top:-3%;
    }

.overtime.done {
    color: #f79321 !important;
}

.section-title {
    margin-top: 20px;
}

.box.overtime {
    background-color: #ed5153;
}


.agenda-item {
    padding: 1%;
    background-color: #363636;
    position: relative;
    margin-top: 1%;
    font-size: 3.8vw;
    aspect-ratio: 100/15;
    line-height: 4vw;
    cursor:pointer;
}

    .agenda-item .item-progress {
        height: 100%;
    }

    .agenda-item.complete {
        font-size:3.2vw;
        aspect-ratio:100/10;
        line-height:3.2vw;
    }

    .agenda-item .status {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        left: 4%;
    }

        .agenda-item .status.done {
            color: #19b764;
        }

    .agenda-item .title {
        position: absolute;
        transform: translateY(-50%);
        top:50%;
        left: 10%;
        right:25%;
    }

    .agenda-item .time {
        position: absolute;
        transform: translateY(-50%);
        top: 50%;
        right: 3%;
    }

    .agenda-item.in-progress {
        color: white !important;
    }

.spacer {
    height: 20px;
}

.alert {
    word-wrap: break-word;
}


.bad-background {
    background-color: #ed5153;
}

.warn-background {
    background-color: #f79321;
}

.good-background {
    background-color: #19b764;
}

.rotate {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}