@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4 {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
}
h1 a { text-decoration: none; color: inherit; }
h1 a:hover { text-decoration: none; color: inherit; }
h1 a:visited { text-decoration: none; color: inherit; }

nav.breadcrumb {
  padding: 6px 12px;
}

#exposure_list th {
  white-space: nowrap;
}
.exposure td {
  white-space: nowrap;
  padding: 0.2vw 1vw;
}
.exposure td.left {
  text-align: left;
}

.tmqview {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tmq1 {
  order: 2;
  margin: 10px;
}
.tmq2 {
  order: 1;
  margin: 10px;
}
.tmq3 {
  order: 3;
  margin: 10px;
}
.tmq4 {
  order: 4;
  margin: 10px;
}
@media ( max-width: 768px ){
  .tmqview {
    grid-template-columns: 1fr;
  }
  .tmq1,
  .tmq2,
  .tmq3,
  .tmq4 {
    order: 0;
  }
}

input[type="range"] {
  --c: orange; /* active color */
  --g: 8px; /* the gap */
  --l: 5px; /* line thickness*/
  --s: 30px; /* thumb size*/
  -webkit-appearance :none;
  -moz-appearance :none;
  appearance :none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

/* chromium */
input[type="range" i]::-webkit-slider-thumb{
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--l) inset var(--c);
  border-image: linear-gradient(90deg,var(--c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g)); 
  -webkit-appearance: none;
  appearance: none;
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
  height: var(--s);
  width: var(--s);
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--l) inset var(--c);
  border-image: linear-gradient(90deg,var(--c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g)); 
  -moz-appearance: none;
  appearance: none;
}