body * {
        font-family: Poppins;
    }
    body {
        padding: 0 20px;
        background: #595959;
    }
    div#filters-container {
        margin-bottom: 15px;
        text-align: center;
        color: white;
        position: relative;
    }
    div#filters-container select, div#filters-container input {
        height: 29px;
        line-height: 34px;
        text-align: center;
        min-width: 220px;
        margin-right: 15px;
        padding-right: 10px;
        margin: 5px;
        background: none;
        border: none;
        color: #ffff8b;
        font-size: 19px;
    }        
    div#filters-container button {
        height: 38px;
        line-height: 34px;
        text-align: center;
        padding: 0 10px;
    }
    .counters-container {
        display: flex;
        margin-bottom: 15px;
    }
    .counter {
        width: 16%;
        padding: 5px;
        text-align: center;
        box-shadow: 2px 2px 3px #2d2c2c;
        /* margin: 0px; */
        /* border-radius: 4px; */
        line-height: 25px;
        font-size: 20px;
        background: #2f2f2f;
        border: 1px solid #0000002b;
    }        
    .counter#totalTimeCard {
        background: #2d2d62;
    }
    .counter#activeTimeCard {
        background: #006000;
    }
    .counter#deadTimeCard {
        background: #a90000;
    }
    .counter#avgCutsCard .counter_data {
        font-size: 30px;
    }
    .counter#scrapCard .counter_data {
        font-size: 30px;
    }

    .counter span {
        display: block;
    }
    .counter span.counter_title {
        font-size: 15px;
        line-height: 20px;
        color: #ffc24d;
    }
    .counter span.counter_data {
        font-size: 35px;
        line-height: 40px;
        color: white;
    }
    
    span#totalTime, span#deadTime, span#activeTime {
        font-size: 19px;
    }

    div#charts-container {
        background: #ffffff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 2px 2px 5px #0e0e0e;
    }
/* From Uiverse.io by njesenberger */ 
.toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: .5em;
    padding: .125em;
    background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);
    box-shadow: 0 1px 1px rgb(255 255 255 / .6);
    font-size: 15px;
    width: 50px;
    top: 0;
}
.toggle-checkbox {
appearance: none;
position: absolute;
z-index: 1;
border-radius: inherit;
width: 100%;
height: 100%;
/* fix em sizing */
font: inherit;
opacity: 0;
cursor: pointer;
}

.toggle-container {
display: flex;
align-items: center;
position: relative;
border-radius: .375em;
width: 3em;
height: 1.5em;
background-color: #e8e8e8;
box-shadow: inset 0 0 .0625em .125em rgb(255 255 255 / .2), inset 0 .0625em .125em rgb(0 0 0 / .4);
transition: background-color .4s linear;
}

.toggle-checkbox:checked + .toggle-container {
    animation: colorTransition 1s infinite;
}

.toggle-button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: .0625em;
border-radius: .3125em;
width: 1.375em;
height: 1.375em;
background-color: #e8e8e8;
box-shadow: inset 0 -.0625em .0625em .125em rgb(0 0 0 / .1), inset 0 -.125em .0625em rgb(0 0 0 / .2), inset 0 .1875em .0625em rgb(255 255 255 / .3), 0 .125em .125em rgb(0 0 0 / .5);
transition: left .4s;
}

.toggle-checkbox:checked + .toggle-container > .toggle-button {
left: 1.5625em;
}

.toggle-button-circles-container {
display: grid;
grid-template-columns: repeat(3, min-content);
gap: .125em;
position: absolute;
margin: 0 auto;
}

.toggle-button-circle {
border-radius: 50%;
width: .125em;
height: .125em;
background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);
}

div#filters-container input.toggle-checkbox {
    height: 28px;
    line-height: 34px;
    text-align: center;
    min-width: 56px;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
}


@keyframes colorTransition {
0% {
    background-color: #3dff41;
}
50% {
    background-color: #317f33;
}
100% {
    background-color: #3dff41;
}
}

.elemento {
animation: colorTransition 1s infinite;
}

.title-icon img {
    max-height: 95px;
    height: 100%;
    filter: invert(1);
}

.title-device {
    display: inline-flex;
    height: 45px;
    color: white;
    width: 100%;
    margin-bottom: 6px;
}

.title-device h1 {
    font-weight: 500;
    margin: 0;
    font-size: 28px;
}

.live-container {
    position: relative;
    min-width: 300px;
    margin: 9px;
    margin-left: 25px;
}

.live-container select#hours-select {
    height: 28px;
    margin-left: 5px;
    background: none;
    border: none;
    color: white;
    font-size: 15px;
    line-height: 28px;
    padding: 0px;
    text-align: center;
}
.live-container select#hours-select option, .time-filter-container select option{
    background: #595959;
}

.show-last-time {
    position: absolute;
    left: 65px;
    display: flex;
    width: 225px;
}

.show-last-time label {
    line-height: 28px;
    font-size: 15px;
}

input#start, input#end {
    width: 185px;
}