body,
form,
datalist {
display: grid;
}
.profiles{  
width:100%;
display:flex;
justify-content: space-between;
padding: 1em;
}
.profiles img {
width:10%;
cursor: pointer;
border-radius: 5px !important;
background: linear-gradient(145deg, #e6e6e6, #ffffff);
box-shadow: 3px 3px 4px #cfcfcf, -3px -3px 4px #ffffff;
padding: 0px;
}
.profiles img:hover{
background: linear-gradient(0deg, #e6e6e6, #ffffff);
}
.chartmenu{
display: flex;
flex-direction: row;
gap: 1rem;
}
.chartmenu img{height: 30px;}
.push {
margin-left: auto;
}
.copyw{
padding-top: inherit;
font-family: 'Roboto Condensed';
color: #999;
font-weight: 600;
}
.bandwidth-summary{
position: sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
z-index:10;
height: 461px;
margin: 0 -1rem 1rem -1rem;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.bandwidth-data{
display:flex;
text-align:center;
width:100px;
font-family:roboto condensed;
font-size:.7rem;
line-height:1.rem; flex-direction: column;
justify-content: space-evenly;
height: 100%;	
}
.bandwidth-data div div{
font-size:1.5rem;
font-family:Roboto Condensed;
font-weight:600;
}
.bandwidth-charts{
display:grid;
grid-template-columns: 1fr 100px 1fr;
position:relative;
}
.chart-style{
position:relative;
width:95%;
height:30vh;
max-width:1860px;
min-height:300px;
text-align:center;
}
.canvas-style{ }
.bwc{
padding:1em;
margin-bottom: 1rem;
position:relative;
}
.triupall{
position:absolute;
left:8px;
top:80px;
width:24px;
height:24px;
min-width: 20px;
padding: 0 0;
}
.tridoall{
position:absolute;
left:8px;
top:112px;
width:24px;
height:24px;
min-width: 20px;
padding: 0 0;
}
.bwc-sticky {
position: sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
top: 150px;
margin-bottom: 1em;
display: grid; text-align:center;
}
div.bwc_title {
padding-top: 0px;
font-weight: 700;
font-family: "Roboto Condensed";
padding-bottom: 0.5em;
}
div.bwc_subtitle {
padding-top: 0px;
font-weight: 400;
font-family: "Roboto Condensed";
padding-bottom: 0.5em;
}
.bwc_total span {
font-size: 3em;
display: block;
}
.bwc_total {
text-align: end;
}
.bwc_volume ul li {
text-align: end;
padding-right: 1rem;
}
.matrix-container{
display:grid;
grid-template-columns:repeat(25, 1fr);
text-align:left;
}
.session-container{
display:grid;
grid-template-columns:repeat(24, 1fr);
text-align:left;
margin-left:2%;
margin-right:2%;
}
.matrix-time{
font-size: 0.5em;  
font-family: monospace;
text-align: center;
}
svg{
margin: auto;
padding:2px;
max-width:25px;
position:relative;
display:block;
cursor: pointer;
fill:#bbb;
}
svg:hover{
fill:#aaa;
}
.bwc-counter{
text-align:center;
border-left:1px solid #0000001a;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.bwc-counter input[type="number"]{
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
padding:0;
width:2em;
text-align: center;
border:none;
font-size: small;
display: inline;
min-height: 0px;
}
.bwc-counter input[type="number"]::-webkit-inner-spin-button, 
.bwc-counter input[type="number"]::-webkit-outer-spin-button { 
-webkit-appearance: none;
}
.shadow {
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .1));
filter: drop-shadow( -3px 3px 2px rgba(0, 0, 0, .1));
}
body {
overflow-x: hidden;
min-height: 100vh;
background: linear-gradient(#f8f8f8, #d9d9d9);
}
@media (max-width: 240px) {
body {
font-size: 0.75em;
}
}
form {
--k: calc((var(--val) - var(--min)) / (var(--max) - var(--min)));
--pos: calc(1.125em + var(--k) * (100% - 2.25em));
grid-gap: 0.25em;
place-self: center;
min-width: 8em;
width: calc(100% - 1.5em);
max-width: 19.5em;
filter: Saturate(var(--hl, 0));
transition: filter 0.3s ease-out;
}
form:focus-within,
form:hover {
--hl: 1;
}
input[type="range"] {
height: 2.25em;
border-radius: 2.25em;
box-shadow: 0 -1px #eaeaea, 0 1px #fff;
background: linear-gradient(#c3c3c3, #f1f1f1);
cursor: pointer;
border: 0px solid #bbb;
display: block;
padding: 0em;
width: 100%;
}
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type="range"][list]::-webkit-slider-container {
min-height: 1.5em;
}
input[type="range"]::-webkit-slider-container {
-webkit-user-modify: read-write !important;
margin: 0.375em;
height: 1.5em;
border-radius: 0.75em;
box-shadow: inset 0 1px 4px #8c8c8c;
background: linear-gradient(#f8dd36, #d68706) 0 / var(--pos) no-repeat,
linear-gradient(#efefef, #c9c9c9);
}
input[type="range"]::-webkit-slider-runnable-track {
margin: -0.375em;
}
input[type="range"]::-moz-range-track {
margin: 0.375em;
height: 1.5em;
border-radius: 0.75em;
box-shadow: inset 0 1px 4px #8c8c8c;
background: linear-gradient(#f8dd36, #d68706) 0 / var(--pos) no-repeat,
linear-gradient(#efefef, #c9c9c9);
}
input[type="range"]::-webkit-slider-thumb {
box-sizing: border-box;
border: solid 0.375em transparent;
width: 2.25em;
height: 2.25em;
border-radius: 50%;
box-shadow: 0 2px 5px #7d7d7d;
background: linear-gradient(#c5c5c5, whitesmoke) padding-box,
linear-gradient(#fbfbfb, #c2c2c2) border-box;
cursor: ew-resize;
}
input[type="range"]::-moz-range-thumb {
box-sizing: border-box;
border: solid 0.375em transparent;
width: 2.25em;
height: 2.25em;
border-radius: 50%;
box-shadow: 0 2px 5px #7d7d7d;
background: linear-gradient(#c5c5c5, whitesmoke) padding-box,
linear-gradient(#fbfbfb, #c2c2c2) border-box;
cursor: ew-resize;
}
input[type="range"]:focus {
outline: none;
}
datalist {
grid-row: 1;
grid-template-columns: 3em 1fr 3em;
place-content: end center;
margin: 0 -0.375em;
color: #bababa;
text-align: center;
text-transform: uppercase;
}
datalist::after { }
.bwc_volume ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
list-style-type: none;
font-weight: 700;
font-family: "Roboto Condensed";
} .modal {
display: none; position: fixed; z-index: 100; left: 0;
top: 0;
width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
.modal-inside-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
} .modal-content {
background-color: #fefefe;
margin: 15% auto; padding: 20px;
border: 1px solid #888;
width: 80%; } .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}