body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: white;
  position: fixed;
  --grid-cols: 7;
  --grid-rows: 8;
  --fill-sometimes: span 5 / auto;
}

.allGrid {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  grid-template-rows: repeat(var(--grid-rows), calc(100 / var(--grid-rows) * 1%));
  grid-template-columns: repeat(var(--grid-cols), calc(100 / var(--grid-cols) * 1%));
}

.timegrid {
  grid-column: var(--fill-sometimes);
  grid-row: span 2 / auto;
}

.time {
  font-size: calc(500% + 19vmin);
  position: relative;
  font-family: 'Times New Roman', Times, serif;
  width: min-content;
  margin: auto;
}

#insptime {
  z-index: 4;
}

#onlytime {
  background: white;
  z-index: 4;
}

#timealert {
  float: right;
  font-size: calc(14px + 14vmin);
  position: absolute;
  right: 8vw;
  bottom: 11vh;
  color: red;
  z-index: 4;
}

#scramblediv {
  grid-column: var(--fill-sometimes);
  grid-row: span 4 / auto;
  text-align: center;
  z-index: 1;
}

#scrambletxt {
  font-family: monospace;
  font-size: calc(16px + 2vmin);
  z-index: 3;
  max-height: 50vh;
  overflow: auto;
  white-space: pre-line;
  margin: 4px 4px 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#scrambletxt[overflow = true] {
  box-shadow: inset 0 -10px 5px -10px #333, inset 0 10px 5px -10px #333;
}

#scrambletxt::-webkit-scrollbar {
  display: none;
}

#multiScram {
  grid-column: span 3 / auto;
  text-align: center;
  z-index: 2;
  margin-bottom: 0.6vmin;
  font-size: calc(8px + 1.4vmin);
  align-self: end;
}

#multiScram p {
  display: inline;
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: calc(8px + 1.4vmin);
}

#multiScram u {
  cursor: pointer;
}

.rdropdown {
  float: right;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.rdropcontent {
  display: none;
  position: absolute;
  background: rgb(180, 180, 180);
  z-index: 3;
  margin-left: 4px;
}

.rdropcontent p {
  font-size: calc(12px + 0.7vw);
  color: black;
  padding: 0.5vw 1vw 0.8vw;
  display: block;
  margin: 0;
  cursor: pointer;
}

.rdropbtn {
  border: none;
  font-size: calc(12px + 0.7vw);
  background: rgb(215, 215, 215);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 0.8vmin 0.8vmin;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.rdropcontent p:hover {
  background: rgb(150, 150, 150);
}

#timetable {
  display: block;
  font-size: calc(12px + 0.9vw);
  text-align: left;
  color: black;
  padding: 2px 0 0 2px;
  text-decoration: none;
  overflow: hidden;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
}

.times, .avgofive, .avgotwelve {
  min-width: 5.5vw;
  padding: 5px auto;
}

.number {
  min-width: 2vw;
}

#ttsize {
  grid-column: span 2 / auto;
  grid-row: span 7 / auto;
  z-index: 1;
  place-self: start;
}

#blank {
  width: 2.1vw;
  background: rgb(215, 215, 215);
}

#timebody {
  overflow-y: auto;
  display: block;
  max-height: 83vh;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#timebody::-webkit-scrollbar { display: none; }

.idAll:nth-child(odd) { background: #f2f2f2; }

.idAll:hover {
  cursor: pointer;
  background: #AAAAAA;
}

.header {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-family: Arial, Helvetica, sans-serif;
  background: rgb(215, 215, 215);
  padding: 5px 3px;
  text-align: center;
  min-width: 5.3vw;
  font-size: calc(9px + 0.8vw);
}

#inoutcell {
  padding: 0;
}

#inicon {
  height: calc(24px + 0.7vw);
  display: block;
  cursor: pointer;
}

#outicon {
  height: calc(24px + 0.7vw);
  position: absolute;
  left: 3px;
  top: 4px;
  cursor: pointer;
  z-index: 2;
}

#sessions {
  margin: 0;
  margin-left: 0.6vmin;
  padding: 0;
  z-index: 2;
  align-self: end;
  justify-self: start;
}

#sessions button {
  margin-bottom: 0.6vmin;
}

.sesedit {
  display: inline-block;
  font-size: calc(8px + 0.7vw);
  background: rgb(215, 215, 215);
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 0;
  cursor: pointer;
}

.dropup {
  display: inline-block;
  position: relative;
  z-index: 3;
}

.dropupcontent {
  display: none;
  background: rgb(180, 180, 180);
  position: relative;
  bottom: 4px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#sesdrop p {
  font-size: calc(8px + 0.7vw);
  color: black;
  padding: 0.5vw 1vw 0.8vw;
  display: block;
  text-decoration: none;
  margin: 0;
}

#sesdrop p:hover {
  cursor: pointer;
  background: rgb(150, 150, 150);
}

#sespopup button {
  display: inline-block;
  margin-bottom: 4px;
}

#sespopup ul {
  list-style-type: none;
}

#sescrip {
  vertical-align: top;
  margin: 4px;
  width: 20vw;
  height: 7vh;
  resize: none;
}

#sesname {
  vertical-align: top;
  margin: 4px;
  width: 20.1vw;
}

#sespopup li {
  text-align: right;
}

#sescreate, #sescancel {
  margin-left: 2vw;
}

#sescancel {
  background: transparent;
}

#changesesname {
  font-size: calc(14px + 0.7vw);
  border-radius: 5px;
  background: transparent;
  border: 1px solid black;
  text-align: center;
}

#sesoptpopup {
  justify-content: center;
  text-align: center;
}

#sesoptpopup label {
  display: block;
}

#optbuttons {
  justify-content: center;
  width: 100%;
}

.deletebtn {
  background: #FF000060;
}

.clearbtn {
  background: #FF990060;
}

.exportbtn {
  background: rgba(0, 100, 255, 0.376);
}

.csv {
  font-size: calc(8px + 0.7vw);
}

#sesoptpopup button {
  display: inline-block;
  margin: 4px auto;
  width: 17vw;
}

#seesescrip {
  vertical-align: top;
  margin: 4px;
  width: 96%;
  resize: none;
  height: 10vh;
}

#optbuttons {
  display: block;
  margin: 0 4px ;
}

#optbuttons tr td {
  margin: 0;
  row-gap: 0;
  padding: 0 auto;
  border-spacing: 0;
}

#timenterpopup table {
  text-align: right;
  margin: 4px;
}

#timenterpopup textarea {
  vertical-align: top;
  max-width: 50vw;
  max-height: 40vh;
}

button {
  background: rgb(215, 215, 215);
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(12px + 0.7vw);
  padding: 5px 12px;
  cursor: pointer;
  margin: 4px;
}

input, textarea {
  padding: 4px;
  border: 0.5px solid rgb(150, 150, 150);
}

#shadow {
  background: rgba(255, 255, 255, 0.8);
  z-index: 5;
}

#touch {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: white;
  z-index: 0;
}

#centerpop {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 6;
}

#overtop {
  position: absolute;
  text-align: center;
  z-index: 7;
  top: 0;
  width: 100%;
}

.popup {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: none;
  background: rgb(180, 180, 180);
  margin: 5px;
  font-size: calc(12px + 0.7vw);
  box-shadow: 5px 5px 5px gray;
  padding: 5px 15px;
}

.coverall {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}

.modtime { cursor: pointer; }

#timepopup p {
  font-size: calc(12px + 0.7vw);
  padding: 5px 9px;
  display: inline;
}

#timepopup h3 {
  margin: 9px;
  margin-top: 12px;
}

#timepopup button {
  display: block;
  margin: 19px auto 5px;
}

#morepopup {
  font-size: calc(9px + 0.7vw);
  max-height: 80vh;
  overflow: auto;
  width: max-content;
  max-width: 45vw;
}

#timepops {
  width: 100vw;
}

#comment {
  width: 96%;
  height: 12vh;
  resize: none;
  vertical-align: top;
  margin-bottom: 4px;
}

#seethings td {
  vertical-align: top;
  text-align: left;
  white-space: pre-line;
}

#inmore {
  font-size: calc(6px + 0.8vw);
  position: relative;
  cursor: pointer;
}

#iconsize {
  width: calc(27px + 1vw);
  height: calc(27px + 1vw);
  float: right;
}

#lighticon {
  width: 100%;
  height: 100%;
  float: left;
  border-radius: 50%;
  position: relative;
  bottom: 0.5vh;
  cursor: pointer;
}

#settingsIcon {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.topstats {
  padding-right: 12px;
  position: relative;
  font-size: calc(12px + 1.2vmin);
  display: inline;
}

#bestworst {
  float: right;
}

#infobtn {
  border-radius: 50%;
  width: calc(20px + 1vw);
  height: calc(20px + 1vw);
  position: absolute;
  bottom: 0.6vh;
  right: 0.6vh;
  margin: 0;
  z-index: 2;
  cursor: pointer;
  display: none;
}

#infopopup h3 {
  margin: 9px;
  margin-top: 12px;
}

#infopopup em, a, p {
  font-size: calc(7px + 0.7vw);
}

#infopopup ul {
  text-align: left;
  font-size: calc(10px + 0.7vw);
  margin-right: 4px;
}

#infopopup button {
  display: block;
  margin-left: 33%;
  margin-bottom: 4px;
  width: 33%;
}

#codeLink {
  margin-bottom: 15px;
  display: inline-block;
}

#undone {
  position: relative;
  top: 45vh;
  color: rgb(255, 255, 255);
  border-radius: 10px;
  background: rgb(80, 80, 80);
}

#undotxt {
  margin: 6px;
  font-size: calc(16px + 0.7vw);
  font-weight: 200;
}

#undobtn {
  padding: 0;
  border-radius: 50%;
  height: calc(19px + 0.7vw);
  width: calc(19px + 0.7vw);
  margin: 0 3px 3px 0;
  position: relative;
  place-self: end;
}

.undoIcon {
  width: 80%;
  height: 80%;
}

#settings {
  margin-top: 4px;
  margin-right: 4px;
  grid-column: var(--fill-sometimes);
  align-self: start;
  justify-self: end;
}

#cubeDrop {
  right: 4px;
}

#setpopup ul {
  list-style-type: none;
  text-align: left;
  margin: 5px;
  position: relative;
  padding-left: 0;
}

#setpopup button {
  margin: 4px;
}

.indented {
  margin-left: 10px;
}

.indented label {
  display: block;
}

#popSpot { display: inline-block; }

#centerThisOne {
  margin-top: 9px;
  text-align: center;
}

#settingsIconSize {
  width: calc(21px + 1vw);
  height: calc(21px + 1vw);
  float: right;
  cursor: pointer;
  z-index: 1;
}

#icons, #hsSpot { float: right; z-index: 1;}

@media screen and (max-width: 1051px) {
  #sesoptpopup button { width: 25vw; }
}

@media screen and (max-width: 950px) {
  #morepopup { max-width: 55vw; }
}

@media screen and (max-width: 800px) {
  #morepopup { max-width: 94vw; }
  #scrambletxt { font-size: calc(6px + 3.2vmin); }
}

@media screen and (max-width: 650px) {
  #settingslist { padding-left: 2vw; }
  #sesoptpopup button { width: 29vw; }
}

@media screen and (max-width: 420px) {
  #settings { grid-row: span 2 / auto;}
  #scramblediv { grid-row: span 3 / auto; }
  #bestworst { float: initial; }
  #scrambletxt { max-height: 43vh; }
  .time { margin-top: 30px; }
  .timegrid { grid-column: span var(--grid-cols) / auto; }
  #ttsize { grid-row: span 5 / auto; }
  #timebody { max-height: 60vh; }
  #morepopup {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  #sesname, #sescrip { width: 48vw; }
  #seesescrip { width: 58vw; }
  #sesoptpopup button { width: 45vw; }
  .popup {
    padding: 5px 3px;
    margin: 5px 3px;
  }
}
@media screen and (max-width: 420px) and (max-height: 454px) {
  #scrambletxt { max-height: 35vh; margin-top: 25px; }
  #timebody { max-height: 52vh; }
}

@media screen and (max-width: 370px) {
  body { --fill-sometimes: span 4 / auto; }
  #ttsize { grid-column: span 3 / auto; }
}

@media all and (orientation: landscape) and (max-height: 420px) {
  #cubeDrop {
    max-height: 80vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  #setpopup h3 { margin: 5px auto 5px; }
  #centerThisOne { margin: 0; }
  .indented label { display: inline; }
  #morepopup { max-height: 50vh; }
}

.initial { display: initial; }

.inlineBlock { display: inline-block; }

.block { display: block; }

.none { display: none; }

.oneforty { background: rgb(140, 140, 140); }

.twotwenty { background: rgb(220, 220, 220) }

.red { color: red; }

.cyan { color: cyan; }

.green { color: rgb(0, 255, 0); }

.magenta { color: rgb(255, 0, 255); }

.orange { color: orange; }

.transXsixty { transform: translateX(-60vw); }

.transXhundred { transform: translateX(-100vw); }

.transOneSec { transition: all 1s; }

.opZero { opacity: 0; }

.zOne { z-index: 1; }

.zfour { z-index: 4; }

.disabled { cursor: not-allowed; color: rgb(80, 80, 80); }

.threeWide { grid-column: span 3 / auto; }

body[lmode = false] {
  background: black;
  filter: invert(87%);
}
body[lmode = false] #insptime {
  filter: invert(100%);
}
body[lmode = false] #timealert {
  color: cyan;
}
body[lmode = false] .popup {
  background: rgb(180, 180, 180);
  box-shadow: 5px 5px 10px #E6E6E6;
}

body[round = true] #timetable td, #inicon, #outicon {
  border-radius: 3px;
}
body[round = true] .popup, input, textarea {
  border-radius: 5px;
}
body[round = true] button, .rdropcontent, .pointer, .dropupcontent {
  border-radius: 4px;
}
body[round = true] .top {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
body[round = true] .bottom {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}