html,
body {
    font-family: sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

#app {
    width: 100%;
    flex: 1;
}

#epc-control {
    height: 150px;
}

#controls {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.switcher {
    display: flex;
    justify-content: center;
    align-items: center;
}

.switcher .button-group {
    display: flex;
    background: white;
    border-radius: 3px;
}

.switcher button {
    border: none;
    padding: 6px;
    background: white;
    color: rgb(68,73,82);
}

.switcher button.selected {
    background: #f0f0f0;
}

.switcher button:first-of-type {
    border-radius: 3px 0 0 3px;
}

.switcher button:last-of-type {
    border-radius: 0 3px 3px 0;
}

.switcher button:not(:last-of-type) {
    border-right: 1px solid #0000001c;
}

.switcher button:hover {
    cursor: pointer;
    background: #f0f0f0;
}

#elapsed-time {
    width: auto;
    background: white;
    border-radius: 3px;
    padding: 6px;
    color: rgb(68,73,82);
    text-align: center;
}