:root{
    --gray-color-1: #dcdcdc;
    --gray-color-2: #d3d3d3;
    --gray-color-3: #c9c9c9;
    --gray-color-4: #bdbdbd;
    --gray-color-5: #a7a7a7;
    --inverted-gray-color-1: #232323;
    --inverted-gray-color-2: #2c2c2c;
    --inverted-gray-color-3: #363636;
    --inverted-gray-color-4: #424242;
    --inverted-gray-color-5: #585858;
}
*{
    box-sizing: border-box;
}
body, html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body{
    color: var(--gray-color-1)!important;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--inverted-gray-color-1)!important;
}
/* offset-x | offset-y | blur-radius | spread-radius | color */
.down-shad{
    box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.3);
}
.up-shad{
    box-shadow: 0px -5px 7px rgba(0, 0, 0, 0.3);
}
.change-color-header{
    background-color: var(--inverted-gray-color-2)!important;
}
.change-font-gray-color-2{
    color: var(--gray-color-2)!important;
}
.sensor-info-background{
    color: var(--inverted-gray-color-3);
    background-color: var(--gray-color-3);
}
.sensor-info-format{
    border-radius: 3px;
}
.graphs-background{
    background-color: var(--gray-color-4);
    border-radius: 3px;
}
.fade-sensor{
    display: none;
    opacity: 0;
    transition: all 500ms ease-in-out;
}
.color-text-2{
    color: var(--inverted-gray-color-2)!important;
}
.link-style{
    text-decoration: none;
}