:root {
  /* color schemes */
  /* samples:
  <div style="background-color:whitesmoke; color:black">day-background-color / day-color</div>
  <div style="background-color:#b1d6e7; color:black">btn-day-background-color / btn-day-color</div>
  <div style="background-color:#ccffcc; color:black">btn-sm-day-background-color / btn-sm-day-color</div>
  <hr>
  <div style="background-color:#cce7ff; color:rebeccapurple">sky-background-color / sky-color</div>
  <div style="background-color:cornflowerblue; color:lemonchiffon">btn-sky-background-color / btn-sky-color</div>
  <div style="background-color:lemonchiffon; color:blue">btn-sm-night-background-color / btn-sm-night-color</div>
  <hr>
  <div style="background-color:#222222; color:#c4e0ed">night-background-color / night-color</div>
  <div style="background-color:#555555; color:#c4e0ed">btn-night-background-color / btn-night-color</div>
  <div style="background-color:#333333; color:greenyellow">btn-sm-night-background-color / btn-sm-night-color</div>
  */
  /* day */
  --day-background-color: whitesmoke;
  --day-background-color-light: white;
  --day-color: black;
  --btn-day-background-color: #b1d6e7;
  --btn-day-color: black;
  --btn-sm-day-background-color: #ccffcc;
  --btn-sm-day-color: black;
  /* night */
  --night-background-color: #222;
  --night-background-color-light: #111;
  --night-color: #c4e0ed;
  --btn-night-background-color: #555;
  --btn-night-color: #c4e0ed;
  --btn-sm-night-background-color: #333;
  --btn-sm-night-color: greenyellow;
  /* dawn */
  --dawn-background-color: #555;
  --dawn-background-color-light: #444;
  --dawn-color: #ffeb00;
  --btn-dawn-background-color: #888;
  --btn-dawn-color: #ffeb00;
  --btn-sm-dawn-background-color: #444;
  --btn-sm-dawn-color: #c2ff66;
  /* dusk */
  --dusk-background-color: #bbb;
  --dusk-background-color-light: #ddd;
  --dusk-color: #2040c0;
  --btn-dusk-background-color: #a0c0e0;
  --btn-dusk-color: #2040c0;
  --btn-sm-dusk-background-color: #8fff8f;
  --btn-sm-dusk-color: #2040c0;
  /* sky */
  --sky-background-color: #cce7ff;
  --sky-background-color-light: aliceblue;
  --sky-color: rebeccapurple;
  --btn-sky-background-color: cornflowerblue;
  --btn-sky-color: lemonchiffon;
  --btn-sm-sky-background-color: lemonchiffon;
  --btn-sm-sky-color: blue;
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
  margin: auto;
  text-align: center;
  max-width: 1000px;
}

body.day {
  background-color: var(--day-background-color);
  color: var(--day-color);
}

body.night {
  background-color: var(--night-background-color-light);
  color: white;
}

body.dawn {
  background-color: var(--dawn-background-color);
  color: var(--dawn-color);
}

body.dusk {
  background-color: var(--dusk-background-color);
  color: var(--dusk-color);
}

body.sky {
  background-color: var(--sky-background-color);
  color: var(--sky-color);
}

h1 {
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  font-size: 2.5rem;
  line-height: 1.0;
  padding-bottom: 4px;
}

h1 a {
  text-decoration: none;
  cursor: pointer;
}

h1 a.day {
  color: var(--day-color);
}

h1 a.night {
  color: var(--night-color);
}

h1 a.dawn {
  color: var(--dawn-color);
}

h1 a.dusk {
  color: var(--dusk-color);
}

h1 a.sky {
  color: yellow;
}

.tagline {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 1rem;
  font-weight: bold;
}

.banner {
  border-bottom-right-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
}

.banner.day {
  background-image: linear-gradient(to bottom, white, var(--btn-day-background-color));
  color: var(--btn-day-color);
}

.banner.night {
  background-image: linear-gradient(to bottom, black, var(--btn-night-background-color));
  color: var(--btn-night-color);
}

.banner.dawn {
  background-image: linear-gradient(to bottom, #000066, var(--btn-dawn-background-color));
  color: var(--btn-dawn-color);
}

.banner.dusk {
  background-image: linear-gradient(to bottom, #ddd, var(--btn-dusk-background-color));
  color: var(--btn-dusk-color);
}

.banner.sky {
  background-image: linear-gradient(to bottom, darkblue, var(--btn-sky-background-color));
  color: var(--btn-sky-color);
}

h2 {
  font-size: 1.5rem;
  font-weight: bold;
}

h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: crimson;
}

h4 {
  font-size: 1.2rem;
  font-style: italic;
  border-bottom: 1px solid silver;
  margin-top: 10px;
}

h5 {
  font-size: 1.5rem;
  font-weight: bold;
}

/* links */
a:-webkit-any-link.day {
  color: var(--day-color);
}

a:-webkit-any-link.night {
  color: var(--night-color);
}

a:-webkit-any-link.dawn {
  color: var(--dawn-color);
}

a:-webkit-any-link.dusk {
  color: var(--dusk-color);
}

.help-item {
  display: block;
  max-width: 600px;
  margin: auto;
}

.help-topic {
  font-weight: bold;
  font-size: 110%;
  display: inline-block;
  width: 250px;
}

.help-icon {
  font-size: 140%;
  padding-left: 25px;
  display: inline-block;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.help-text {
  font-size: 90%;
  border: 1px solid silver;
  padding: 0px 10px 10px 10px;
  margin-bottom: 10px;
  animation: fadeIn 1s;
}

.para-help {
  font-size: 1.1rem;
  max-width: 600px;
  margin: auto;
  padding: 5px;
  border: none;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.justify {
  text-align: justify;
}

.cols-2 {
  column-count: 2;
  column-gap: 1px;
}

.text95 {
  font-size: 95%;
}

.text110 {
  font-size: 110%;
}

.text120 {
  font-size: 120%;
}

.crimson {
  color: crimson;
}

.main {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 10px 0px 0px 0px;
}

.main.day {
  background-color: var(--day-background-color);
  color: var(--day-color);
}

.main.night {
  background-color: var(--night-background-color);
  color: var(--night-color);
}

.main.dawn {
  background-color: var(--dawn-background-color);
  color: var(--dawn-color);
}

.main.dusk {
  background-color: var(--dusk-background-color);
  color: var(--dusk-color);
}

.main.sky {
  background-color: var(--sky-background-color);
  color: var(--sky-color);
}

.msg {
  font-weight: bold;
  margin: 5px 10px;
}

.msg.day {
  background-color: var(--day-background-color);
  color: var(--day-color);
}

.msg.night {
  background-color: var(--night-background-color);
  color: var(--night-color);
}

.msg.dawn {
  background-color: var(--dawn-background-color);
  color: var(--dawn-color);
}

.msg.dusk {
  background-color: var(--dusk-background-color);
  color: var(--dusk-color);
}

.msg.sky {
  background-color: var(--sky-background-color);
  color: var(--sky-color);
}

.panel.navbar {
  text-align: center;
}

.unlocked {
  background-color: green;
  color: white;
}

.locked {
  background-color: firebrick;
  color: white;
}

.btn-nav {
  display: inline-block;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  /* max-width: 70px; */
  height: 50px;
  text-align: center;
  padding: 0.5rem;
  margin: 0px 1px 0px 1px;
  border-top: none;
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
  border-left: 1px solid silver;
  border-bottom-right-radius: 0.4rem;
  border-bottom-left-radius: 0.4rem;
}

.btn-nav.day {
  background-color: var(--btn-day-background-color);
  color: var(--btn-day-color);
}

.btn-nav.night {
  background-color: var(--btn-night-background-color);
  color: var(--btn-night-color);
}

.btn-nav.dawn {
  background-color: var(--btn-dawn-background-color);
  color: var(--btn-dawn-color);
}

.btn-nav.dusk {
  background-color: var(--btn-dusk-background-color);
  color: var(--btn-dusk-color);
}

.btn-nav.sky {
  background-color: var(--btn-sky-background-color);
  color: var(--btn-sky-color);
}

.btn-nav-float {
  display: inline-block;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  width: 65px;
  height: 30px;
  text-align: center;
  padding: 0.5rem;
  margin: 20px 1px;
  border-radius: 0.4rem;
}

.btn-nav-float.day {
  background-color: var(--btn-day-background-color);
  color: var(--btn-day-color);
  border: 1px solid gray;
}

.btn-nav-float.night {
  background-color: var(--btn-night-background-color);
  color: var(--btn-night-color);
  border: 1px solid silver;
}

.btn-nav-float.dawn {
  background-color: var(--btn-dawn-background-color);
  color: var(--btn-dawn-color);
  border: 1px solid silver;
}

.btn-nav-float.dusk {
  background-color: var(--btn-dusk-background-color);
  color: var(--btn-dusk-color);
  border: 1px solid gray;
}

.btn-nav-float.sky {
  background-color: var(--btn-sky-background-color);
  color: var(--btn-sky-color);
  border: 1px solid navy;
}

.btn-nav-sm {
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1.5;
  min-width: 50px;
  text-align: center;
  border-top: none;
  border: 1px solid silver;
  border-radius: 0.5rem;
  margin: 5px;
}

.btn-nav-sm.day {
  background-color: var(--btn-sm-day-background-color);
  color: var(--btn-sm-day-color);
}

.btn-nav-sm.night {
  background-color: var(--btn-sm-night-background-color);
  color: var(--btn-sm-night-color);
}

.btn-nav-sm.dawn {
  background-color: var(--btn-sm-dawn-background-color);
  color: var(--btn-sm-dawn-color);
}

.btn-nav-sm.dusk {
  background-color: var(--btn-sm-dusk-background-color);
  color: var(--btn-sm-dusk-color);
}

.btn-nav-sm.sky {
  background-color: var(--btn-sm-sky-background-color);
  color: var(--btn-sm-sky-color);
}

.btn-full {
  display: inline-block;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  width: 165px;
  text-align: center;
  padding: 10px;
  border-top: none;
  border: 1px solid silver;
  margin: 10px;
  border-radius: 0.5rem;
}

.btn-full.day {
  background-color: var(--btn-day-background-color);
  color: var(--btn-day-color);
}

.btn-full.night {
  background-color: var(--btn-night-background-color);
  color: var(--btn-night-color);
}

.btn-full.dawn {
  background-color: var(--btn-dawn-background-color);
  color: var(--btn-dawn-color);
}

.btn-full.dusk {
  background-color: var(--btn-dusk-background-color);
  color: var(--btn-dusk-color);
}

.btn-full.sky {
  background-color: var(--btn-sky-background-color);
  color: var(--btn-sky-color);
}

.btn-small {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  width: 120px;
  text-align: center;
  padding: 4px;
  border-top: none;
  border: 1px solid silver;
  margin-bottom: 20px;
  border-radius: 0.4rem;
}

.btn-small.day {
  background-color: var(--btn-day-background-color);
  color: var(--btn-day-color);
}

.btn-small.night {
  background-color: var(--btn-night-background-color);
  color: var(--btn-night-color);
}

.btn-small.dawn {
  background-color: var(--btn-dawn-background-color);
  color: var(--btn-dawn-color);
}

.btn-small.dusk {
  background-color: var(--btn-dusk-background-color);
  color: var(--btn-dusk-color);
}

.btn-small.sky {
  background-color: var(--btn-sky-background-color);
  color: var(--btn-sky-color);
}

.btn-tiny {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  /* width: 120px; */
  text-align: center;
  padding: 4px;
  border: 1px solid silver;
  margin-left: 10px;
  border-radius: 0.4rem;
}

.btn-tiny.day {
  background-color: var(--btn-day-background-color);
  color: var(--btn-day-color);
}

.btn-tiny.night {
  background-color: var(--btn-night-background-color);
  color: var(--btn-night-color);
}

.btn-tiny.dawn {
  background-color: var(--btn-dawn-background-color);
  color: var(--btn-dawn-color);
}

.btn-tiny.dusk {
  background-color: var(--btn-dusk-background-color);
  color: var(--btn-dusk-color);
}

.btn-tiny.sky {
  background-color: var(--btn-sky-background-color);
  color: var(--btn-sky-color);
}

.container.day {
  background-color: var(--day-background-color);
  color: var(--day-color);
}

.container.night {
  background-color: var(--night-background-color);
  color: var(--night-color);
}

.container.dawn {
  background-color: var(--dawn-background-color);
  color: var(--dawn-color);
}

.container.dusk {
  background-color: var(--dusk-background-color);
  color: var(--dusk-color);
}

.container.sky {
  background-color: var(--sky-background-color);
  color: var(--sky-color);
}

.thought {
  font-size: 1.3rem;
  text-align: center;
  padding: 5px;
  margin: auto;
  overflow-y: auto;
  width: calc(100vw - 25px);
  max-width: 900px;
  height: calc(100vh - 250px);
  border-radius: 1rem;
  border: 1px solid silver;
  white-space: pre-wrap;
}

.thought.day {
  background-color: var(--day-background-color-light);
  color: var(--day-color);
}

.thought.night {
  background-color: var(--night-background-color-light);
  color: var(--night-color);
}

.thought.dawn {
  background-color: var(--dawn-background-color-light);
  color: var(--dawn-color);
}

.thought.dusk {
  background-color: var(--dusk-background-color-light);
  color: var(--dusk-color);
}

.thought.sky {
  background-color: var(--sky-background-color-light);
  color: var(--sky-color);
}

.thought-edit {
  font-size: 1.3rem;
  padding: 5px;
  margin: auto;
  width: calc(100vw - 25px);
  max-width: 900px;
  height: calc(100vh - 250px);
  border-radius: 1rem;
  border: 1px solid silver;
}

.thought-edit.day {
  background-color: var(--day-background-color-light);
  color: var(--day-color);
}

.thought-edit.night {
  background-color: var(--night-background-color-light);
  color: var(--night-color);
}

.thought-edit.dawn {
  background-color: var(--dawn-background-color-light);
  color: var(--dawn-color);
}

.thought-edit.dusk {
  background-color: var(--dusk-background-color-light);
  color: var(--dusk-color);
}

.thought-edit.sky {
  background-color: var(--sky-background-color-light);
  color: var(--sky-color);
}

.thought-empty {
  font-size: 1.3rem;
  text-align: center;
  padding: 5px;
  margin: auto;
  overflow-y: auto;
  width: calc(100vw - 25px);
  max-width: 900px;
  height: calc(100vh - 250px);
  border-radius: 1rem;
  border: 1px solid silver;
}

.thought-empty p {
  margin: 10px 20px;
}

.thought-empty.day {
  background-color: var(--day-background-color-light);
  color: var(--day-color);
}

.thought-empty.night {
  background-color: var(--night-background-color);
  color: var(--night-color);
}

.thought-empty.dawn {
  background-color: var(--dawn-background-color-light);
  color: var(--dawn-color);
}

.thought-empty.dusk {
  background-color: var(--dusk-background-color-light);
  color: var(--dusk-color);
}

.thought-empty.sky {
  background-color: var(--sky-background-color-light);
  color: var(--sky-color);
}

.thought-search-text {
  font-size: 1.3rem;
  padding: 5px;
  margin: auto;
  width: calc(100vw - 25px);
  max-width: 600px;
  border-radius: 1rem;
  border: 1px solid silver;
}

/* scrollbar */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.thought-group-date {
  display: block;
  font-size: 90%;
  font-weight: bold;
  margin-top: 5px;
  max-width: 900px;
  margin: auto;
}

.thought-group {
  display: block;
  float: left;
  margin-left: 15px;
}

.thought-date {
  display: block;
  float: right;
  margin-right: 15px;
  font-weight: bold;
}

#panel-navbar-thought {
  display: block;
  margin: auto;
  max-width: 900px;
}

.thought-id {
  display: block;
  margin: auto;
  font-weight: normal;
  font-size: 70%;
  text-align: right;
  max-width: 900px;
  padding-right: 10px;
}

form {
  margin: none;
}

select .day {
  background-color: var(--day-background-color-light);
  color: var(--day-color);
}

select .night {
  background-color: var(--night-background-color-light);
  color: var(--night-color);
}

select .dawn {
  background-color: var(--dawn-background-color-light);
  color: var(--dawn-color);
}

select .dusk {
  background-color: var(--dusk-background-color-light);
  color: var(--dusk-color);
}

select .sky {
  background-color: var(--sky-background-color-light);
  color: var(--sky-color);
}

.input-fields label {
  display: block;
  font-weight: bold;
}

.input-fields input[type=text],
.input-fields input[type=password],
.input-fields input[type=email] {
  width: 250px;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.delete-div {
  padding: 10px 0px 10px 15px;
  font-size: 1rem;
  text-align: left;
  max-width: 600px;
  margin: auto;
  border-radius: 1rem;
  border: 1px solid silver;
}

.delete-div.day {
  background-color: var(--day-background-color-light);
  color: var(--day-color);
}

.delete-div.night {
  background-color: var(--night-background-color-light);
  color: var(--night-color);
}

.delete-div.dawn {
  background-color: var(--dawn-background-color-light);
  color: var(--dawn-color);
}

.delete-div.dusk {
  background-color: var(--dusk-background-color-light);
  color: var(--dusk-color);
}

.delete-div.sky {
  background-color: var(--sky-background-color-light);
  color: var(--sky-color);
}

.delete-fields label {
  display: inline-block;
  font-weight: bold;
}

.delete-fields input[type=text] {
  width: 300px;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.delete-fields input[type=checkbox] {
  margin-right: 10px;
}

#done-user-email,
#done-username {
  font-size: 1.3rem;
}

textarea.day {
  background-color: var(--day-background-color-light);
  color: var(--day-color);
}

textarea.night {
  background-color: var(--night-background-color-light);
  color: var(--night-color);
}

textarea.dawn {
  background-color: var(--dawn-background-color-light);
  color: var(--dawn-color);
}

textarea.dusk {
  background-color: var(--dusk-background-color-light);
  color: var(--dusk-color);
}

textarea.sky {
  background-color: var(--sky-background-color-light);
  color: var(--sky-color);
}

.footer {
  display: block;
  margin: auto;
  bottom: 0;
  width: 100%;
  max-width: 900px;
}

.djs-copyright {
  font-size: 80%;
}

.djs-copyright.day {
  background-color: var(--day-background-color);
  color: var(--day-color);
}

.djs-copyright.night {
  background-color: var(--night-background-color);
  color: var(--night-color);
}

.djs-copyright.dawn {
  background-color: var(--dawn-background-color);
  color: var(--dawn-color);
}

.djs-copyright.dusk {
  background-color: var(--dusk-background-color);
  color: var(--dusk-color);
}

.djs-copyright.sky {
  background-color: var(--sky-background-color);
  color: var(--sky-color);
}

.debug {
  max-width: 900px;
  margin: auto;
}

table.debug {
  border: 1px solid silver;
  border-collapse: collapse;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 90%;
}

th.debug,
td.debug {
  border: 1px solid silver;
  border-collapse: collapse;
  padding: 3px;
}

caption.debug {
  border: 1px solid silver;
  border-collapse: collapse;
  padding: 5px;
  font-weight: bold;
  background-color: #555;
  color: #eee;
}

tr.debug:nth-child(even) .day {
  background-color: #ccc;
}

tr.debug:nth-child(even) .night {
  background-color: #444;
}

tr.debug:nth-child(even) .dawn {
  background-color: #bbb;
}

tr.debug:nth-child(even) .dusk {
  background-color: #bbb;
}

tr.debug:nth-child(even) .sky {
  background-color: #aaa;
}