@media all and (display-mode: standalone) {
  html {
    height: 100vh;
  }
  body {
    height: 100vh;
  }
}
@media all and (display-mode: fullscreen) {
  html {
    height: 100vh;
  }
  body {
    height: 100vh;
  }
}

.sj-tiny { font-size: 11px; }
.sj-small { font-size: 11px; font-weight: bold; }
.sj-medium { font-size: 13px; font-weight: bold; }
.sj-large { font-size: 15px; font-weight: bold; }
.sj-huge { font-size: 18px; font-weight: bold; }

.sj-icon-arrow { 
  display: inline-block; 
  position: absolute; 
  border-left: 5px solid transparent; 
  border-right: 5px solid transparent; 
  border-top: 8px solid;
  bottom: -7px; 
  left: 4px; 
  width: 0px; 
  height: 0px; 
}

.sj-arrow-warm {
  border-top-color: #ef4444;
}

.sj-arrow-mild {
  border-top-color: #eab308;
}

.sj-arrow-cold {
  border-top-color: #0ea5e9;
}

.sj-selected {
  box-shadow: 1px 2px 8px 5px #00000088; 
}