body {
  font: 1.125rem sans-serif;
  margin: 0;
  padding: 1rem;
  overflow: hidden;
}

#table_wrapper {
  overflow-y: auto;
  margin-bottom: -10px;
}

table {
  width: 100%;
  margin-bottom: 10px;
}
table th,
table td {
  background: white;
  font-family: inherit;
  border-bottom: 1px #BDBDBD solid;
  padding: 0;
  position: relative;
  z-index: 0;
}
table th.current_time div,
table td.current_time div {
  min-width: 4.5em;
}
table th > div,
table td > div {
  display: flex;
  padding: 1rem 0.5rem;
  position: relative;
  z-index: 1;
  height: 100%;
  min-width: 3.5em;
}
table th.inc div,
table td.inc div {
  justify-content: center;
  text-align: center;
}
table th.inc .hour,
table td.inc .hour {
  font-weight: bold;
}
table th.inc .minutes,
table td.inc .minutes {
  opacity: 0.5;
}
table tr th.offset {
  font-family: monospace;
}
table tr th.name {
  text-align: left;
  min-width: 13em;
  position: sticky;
  left: 0;
  z-index: 1;
}
table tr th.name div {
  gap: 0.4rem;
  background: inherit;
}
table tr.current th,
table tr.current td {
  background: aquamarine;
}
table tr.current th.inc > div,
table tr.current td.inc > div {
  min-width: 2.5em;
}
table tr:last-child th,
table tr:last-child td {
  border-bottom: 3px #000 solid;
}
table .offset .minutes {
  opacity: 0.5;
}

#add_timezone_inner {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 1rem 0.5rem 0.5rem;
  position: sticky;
  left: 0;
}

select {
  -webkit-appearance: none;
  width: 20em;
  display: block;
  border: none;
  background: none;
  padding: 0.3rem 0;
  font-weight: bold;
  font-size: 1em;
  font-family: inherit;
  cursor: pointer;
}
select option {
  font-weight: normal;
  cursor: inherit;
}

button {
  cursor: pointer;
  display: block;
  border: none;
  overflow: hidden;
  text-indent: -100px;
  flex: 0 0 100%;
  max-width: 1rem;
  height: 1rem;
  background: no-repeat center/contain;
}
button[disabled] {
  opacity: 0.25;
  cursor: default;
}
button.delete {
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 49.75 49.75%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23000b44%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22cls-1%22 d%3D%22M83.38%2C0a24.88%2C24.88%2C0%2C1%2C0%2C24.87%2C24.88A24.88%2C24.88%2C0%2C0%2C0%2C83.38%2C0ZM97%2C28.15H69.74V21.6H97Z%22 transform%3D%22translate%28-58.5%29%22%2F%3E%3C%2Fsvg%3E");
}
button.delete:hover:not([disabled]), button.delete:focus:not([disabled]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 49.75 49.75%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23bc1717%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D%22cls-1%22 d%3D%22M83.38%2C0a24.88%2C24.88%2C0%2C1%2C0%2C24.87%2C24.88A24.88%2C24.88%2C0%2C0%2C0%2C83.38%2C0ZM97%2C28.15H69.74V21.6H97Z%22 transform%3D%22translate%28-58.5%29%22%2F%3E%3C%2Fsvg%3E");
}
button.home {
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 576 512%22%3E%3C%21--%21 Font Awesome Pro 6.0.0 by %40fontawesome - https%3A%2F%2Ffontawesome.com License - https%3A%2F%2Ffontawesome.com%2Flicense %28Commercial License%29 Copyright 2022 Fonticons%2C Inc. --%3E%3Cpath fill%3D"%23000b44" d%3D%22M511.8 287.6L512.5 447.7C512.6 483.2 483.9 512 448.5 512H128.1C92.75 512 64.09 483.3 64.09 448V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L416 100.7V64C416 46.33 430.3 32 448 32H480C497.7 32 512 46.33 512 64V185L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6L511.8 287.6z%22%2F%3E%3C%2Fsvg%3E');
}
button.home:focus:not([disabled]), button.home:hover:not([disabled]) {
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 576 512%22%3E%3C%21--%21 Font Awesome Pro 6.0.0 by %40fontawesome - https%3A%2F%2Ffontawesome.com License - https%3A%2F%2Ffontawesome.com%2Flicense %28Commercial License%29 Copyright 2022 Fonticons%2C Inc. --%3E%3Cpath fill%3D"%237d51af" d%3D%22M511.8 287.6L512.5 447.7C512.6 483.2 483.9 512 448.5 512H128.1C92.75 512 64.09 483.3 64.09 448V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L416 100.7V64C416 46.33 430.3 32 448 32H480C497.7 32 512 46.33 512 64V185L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6L511.8 287.6z%22%2F%3E%3C%2Fsvg%3E');
}
button[type=submit] {
  margin-top: -0.2rem;
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox%3D"0 0 49.75 49.75" width%3D"49.75" height%3D"49.75"%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23000b44%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D"cls-1" d%3D"M24.38%2C0A24.88%2C24.88%2C0%2C1%2C0%2C49.25%2C24.88%2C24.88%2C24.88%2C0%2C0%2C0%2C24.38%2C0ZM38%2C28.15H27.65V38.51H21.1V28.15H10.74V21.6H21.1V11.24h6.55V21.6H38Z" transform%3D"translate(0.5)"%2F%3E%3C%2Fsvg%3E');
}
button[type=submit]:hover:not([disabled]), button[type=submit]:focus:not([disabled]) {
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox%3D"0 0 49.75 49.75" width%3D"49.75" height%3D"49.75"%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%2300c671%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath class%3D"cls-1" d%3D"M24.38%2C0A24.88%2C24.88%2C0%2C1%2C0%2C49.25%2C24.88%2C24.88%2C24.88%2C0%2C0%2C0%2C24.38%2C0ZM38%2C28.15H27.65V38.51H21.1V28.15H10.74V21.6H21.1V11.24h6.55V21.6H38Z" transform%3D"translate(0.5)"%2F%3E%3C%2Fsvg%3E');
}

#icons {
  text-align: right;
  margin-bottom: 2rem;
}