/* vh = Desktop | vw = Mobile */
:root {
  --calamp: #02ABCA;
  --calamp-offset: #026BCA;
  --background: linear-gradient(to right, #7D6BB8, #994F95);
  --background: #252525;
  --primary: var(--calamp);
  --secondary: #FFA500;
  --border-color: var(--secondary);

  --text-color: #B3E5FC;
  --font-size: min(3vh, 5vw);
  --font-multiplier: 1.3;
}

/* GENERAL STYLING */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: inherit;
  overflow: auto;
}
*:disabled { cursor: not-allowed; }

html { background: var(--background); }
html, body {
  color: var(--text-color);
  height: 100%;
  width: 100%;
}

html, button, input, label, td, p { font-size: var(--font-size); }
h4 { color: var(--primary); font-size: calc(var(--font-size) * var(--font-multiplier) * 1); }
h3 { color: var(--primary); font-size: calc(var(--font-size) * var(--font-multiplier) * 2); }
h2 { color: var(--primary); font-size: calc(var(--font-size) * var(--font-multiplier) * 3); }
h1 { color: var(--primary); font-size: calc(var(--font-size) * var(--font-multiplier) * 4); }
tr { font-size: calc(var(--font-size) * var(--font-multiplier)); }


input[type=checkbox],
input[type=radio],
button,
.link { cursor: pointer; }

input[type=radio] {
  height: 1rem;
  width: 1rem;
  vertical-align: middle;
  margin-right: 1rem;
}

.padding { padding: 1rem; }
.margin  { margin : 1rem; }
.tall    { height : 100%; }
.wide    { width  : 100%; }
.center  { text-align: center; }
.border  { border : 0.15rem solid var(--border-color); border-radius: 1rem; }
.nowrap  { white-space: nowrap; }

.invis { display: none !important; }
#flash {
  position: absolute;
  z-index: 2;
  padding: 1rem;
  background-color: black;
  border-radius: 5px;
}
#flash:empty { display: none; }
#flash .error { background-color: red; }

.vertical-space {
  height: 1px;
  width: 0px;
  margin-bottom: 5rem;
}

/* Flex Stuff */
.row-between-center  { display: flex; justify-content: space-between; align-items: center;     gap: 1rem; }
.col-between-center  { display: flex; justify-content: space-between; align-items: center;     gap: 1rem; flex-direction: column; }
.row-between-stretch { display: flex; justify-content: space-between; align-items: stretch;    gap: 1rem; }
.col-between-stretch { display: flex; justify-content: space-between; align-items: stretch;    gap: 1rem; flex-direction: column; }

.row-center-center   { display: flex; justify-content: center;        align-items: center;     gap: 1rem; }
.col-center-center   { display: flex; justify-content: center;        align-items: center;     gap: 1rem; flex-direction: column; }
.row-center-start    { display: flex; justify-content: center;        align-items: flex-start; gap: 1rem; }
.col-center-start    { display: flex; justify-content: center;        align-items: flex-start; gap: 1rem; flex-direction: column; }
.row-center-stretch  { display: flex; justify-content: center;        align-items: stretch;    gap: 1rem; }
.col-center-stretch  { display: flex; justify-content: center;        align-items: stretch;    gap: 1rem; flex-direction: column; }

.row-even-center     { display: flex; justify-content: space-evenly;  align-items: center;     gap: 1rem; }
.col-even-center     { display: flex; justify-content: space-evenly;  align-items: center;     gap: 1rem; flex-direction: column; }
.row-even-start      { display: flex; justify-content: space-evenly;  align-items: flex-start; gap: 1rem; }
.col-even-start      { display: flex; justify-content: space-evenly;  align-items: flex-start; gap: 1rem; flex-direction: column; }
.row-even-stretch    { display: flex; justify-content: space-evenly;  align-items: stretch;    gap: 1rem; }
.col-even-stretch    { display: flex; justify-content: space-evenly;  align-items: stretch;    gap: 1rem; flex-direction: column; }

.row-start-center    { display: flex; justify-content: flex-start;    align-items: center;     gap: 1rem; }
.col-start-center    { display: flex; justify-content: flex-start;    align-items: center;     gap: 1rem; flex-direction: column; }
.row-start-start     { display: flex; justify-content: flex-start;    align-items: flex-start; gap: 1rem; }
.col-start-start     { display: flex; justify-content: flex-start;    align-items: flex-start; gap: 1rem; flex-direction: column; }
.row-start-stretch   { display: flex; justify-content: flex-start;    align-items: stretch;    gap: 1rem; }
.col-start-stretch   { display: flex; justify-content: flex-start;    align-items: stretch;    gap: 1rem; flex-direction: column; }

/* END FLEX */
.flex-wrap     { flex-wrap: wrap; }
.flex-grow { flex: 1 1 auto; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }







button, input {
  border: none;
  outline: none;
  border-radius: 1.5rem;
  background: var(--primary);
  font-size: calc(var(--font-size) * var(--font-multiplier) * 0.9);
  padding: 0.5rem 1rem;
}

.header {
  font-size: max(9vw);
}
#not-login-view .header { margin-bottom: 1rem; }

#profile {
  display: grid;
  place-items: baseline;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(4, 1fr);
}

#profile div *,
#profile div { max-width: 100%; }

#vehicle-type-select div,
#vehicle-type-select button {
  width: 100%;
  max-width: 50vw;
}

#vehicle-type-select div { border-bottom: 1px dotted black; }



/* progress bar */
.progress-bar {
  position: relative;
  width: 100%;
  height: 3em;
  background-color: #111;
  border-radius: 1.5rem;
}
.progress-bar::before {
  content: '';
  position: absolute;
  width: calc(var(--width, 0) * 1%);
  min-width: 2rem;
  max-width: calc(100% - 1rem);
  top: 0.5rem;
  left: 0.5rem;
  bottom: 0.5rem;
  background-color: white;
  border-radius: 1rem;
}

#debug li {
  margin-top: 1rem;
  border: 1px solid red;
}
#debug { padding-bottom: 5rem; }