*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
  --app-background: skyblue;
  --app-foreground: #a7dbf1;
}

body {
  background: var(--app-background);
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
}

a {
  text-decoration: none;
}

span {
  white-space: nowrap;
}

h4 {
  margin-bottom: 0;
  border-top-left-radius: .5em; 
  border-top-right-radius: .5em; 
}

h4 .step-prog {
  float: right;
}

ul {
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

div.section {
  display: none;
  margin-top: 0;
  border-bottom-left-radius: .5em; 
  border-bottom-right-radius: .5em; 
  padding-left: 0;
  text-align: center;
}

.section, #activities ul {
  background-color: var(--app-foreground);
  padding: .5em;
}

li {
  margin-bottom: .5em;
}

select , button {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  font-family: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  font-size: .7em;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
  margin-right: .25em;
}

input[type="checkbox"] {
  height: 2em;
  width: 2em;
}

button.single > img {
  margin: -.3em -.5em;
}

button.single:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}

button.single:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}

button.single:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

button.single:focus {
  outline: 1px transparent;
}

.controls > textarea {
  width: 18em;
  height: 4em;
  margin: 0 .25em 0 .25em;
  vertical-align: top;
}

.controls > span {
  color: #666;
}

.controls > select, .controls > button {
  width: 2.25em;
  height: 2.25em;
  font-size: 1em;
}

option {
  color: green;
}

.toggle-icon {
  color: #666;
  font-size: x-small;
  vertical-align: top;
}

.activity-info {
  font-size: small;
  color: #666;
}

#top {
  position: sticky;
  width: 100%;
  top: 0px;
  background-color: skyblue;
  overflow: auto;
  font-size: 100%;
  /*border-radius: .5em;*/
  padding: .5em .5em 0;
  margin-top: -1em;
}

#top > .title {
  text-decoration: none;
  font-size: 1.35em;
  color: black;
}

@media only screen and (max-width: 370px) {
  #top > .title {
    font-size: 5vw;
  }
}

@media only screen and (max-width: 290px) {
  #top > .title {
    font-size: 1em;
    color: orange;
  }
}

#top > select {
  font-size: 1.15em;
}

#week {
  width: 8.5em;
}

#week_total {
  font-size: 1.15em;
}

#bottom {
  display: flex;
  background-color: var(--app-foreground);
  border-radius: .5em;
  margin-top: 2em;
  padding: 1em;
  vertical-align: top;
  overflow: hidden;
}

#bottom .col1 {
  flex: 0 0 1.5em;
  text-align: center;
  /*font-family: "Patrick Hand";*/
  font-style: italic;
  font-size: 1.25em;
  margin-right: .5em;
  line-height: .85em;
}

#bottom .col2 {
  flex: 1;
  font-size: 2.75vw;
}

@media screen and (min-width: 500px) {
  #bottom .col2 {
    font-size: .9em;
  }
}

.sep {
  color: gray;
}

.help {
  font-size: small;
}

.activity {
  display: flex;
}

.activity .col1 {
  flex: 0 0 1.5em;
  font-size: 1.25em;
  text-align: right;
  margin-right: .25em;
}

.activity .col2 {
  flex: 1;
}

#search-results {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#search-results > div {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

#search-results > div > .close {
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
  margin-top: -.5em;
}

#search-results a.result-item, #search-results div.result-item {
  display: block;
  margin-top: .5em;
}

#help-results {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#help-results > div {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

#help-results > div > div {
  margin-bottom: .5em;
}

#help-results > div > .close {
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
  margin-top: -.5em;
}

#tech a {
  white-space: nowrap;
}

#steps-view, #page-reload {
  font-size: 1.15em;
}