/*
* This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.hidden {
  display: none;
}

.showing {
  display: block;
}

h2 {
  font-size: large;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  --bg-color: #f1ecff;
  --text-color: rgba(80, 54, 157, 0.92);
  background-color: var(--bg-color);
  color: var(--text-color);
}

input {
  font-size: 16px;
}

header {
  position: sticky;
  text-align: center;
  top: 10px;
  background-color: var(--bg-color);
  display: flex;
  justify-content: space-around;
}

header h2 {
  text-align: center;
  font-size: 16px;
}

header form {
  font-size: 16px;
  align-self: center;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: var(--bg-color);
}

.mainbtn {
  padding: 20px;
  margin: 10px;
  background-color: #700070;
  color: rgb(188, 170, 241);
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mainbtn a {
  color: var(--bg-color);
}

#dashboard {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.list {
  border: 2px solid black;
  bottom: 10px;
}

.line {
  border: 1px dotted black;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  .date {
    text-align: left;
  }

  .who {
    text-align: center;
  }

  .note {
    text-align: right;
  }
}

.wiz-view {
  background-color: rgb(219, 247, 202);
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wiz-tab {
  padding: 20px;
  background-color: antiquewhite;
  flex: 4;
}

.wiz-nav {
  flex: 1;
}

div.choose-one:not([hidden]){
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

div.choose-one input[type="radio"]{
  display: none;
}

label:has(> input[type="radio"]) {
  flex-basis: 40%;
  padding: 1%;
  margin: 2%;
  background-color: #700070;
  color: rgb(188, 170, 241);
  font-size: large;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

label:has(> input:checked) {
  border:2px solid #12b74c;
  background-color: rgb(188, 170, 241);
  color: #700070;
}


.desktop #wizprev { display: none; }
.desktop #wiznext { display: none; }
.desktop .wiz-tab { padding-top: 1rem; }
.desktop #wiz-nav { padding-top: 1rem; }


footer {
  position: fixed;
  bottom: 5px;
  width: 100%;
  justify-content: center;
  text-align: center;
  background-color: var(--bg-color);
}

/* This is an accessability thing that basically turns off animations
for folks who have that set up on their device. It's important because
animations can cause sezures and vertigo in a bunch of people. */

@media screen and (prefers-reduced-motion: reduce) {
  * {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}