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

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}


h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: normal;
}

input,
select,
button,
textarea {
  font-size: inherit;
  font-family: inherit;
}

input:focus,
button:focus,
select:focus {
  outline: 0;
}

ul {
  list-style: disc;
  margin-left: 1.2rem;
}

.divider {
    border-bottom:solid 1px var(--divider-color);
    align-self: stretch;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.divider-90 {
    border-bottom:solid 1px var(--divider-color);
    align-self: stretch;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: 5%;
    margin-right: 5%;
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}
.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}
.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}
.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}
.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}
.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.col-5 {
  width: 5%;
}
.col-10 {
  width: 10%;
}
.col-15 {
  width: 15%;
}
.col-20 {
  width: 20%;
}
.col-25 {
  width: 25%;
}
.col-30 {
  width: 30%;
}
.col-35 {
  width: 35%;
}
.col-40 {
  width: 40%;
}
.col-50 {
  width: 50%;
}
.col-60 {
  width: 60%;
}
.col-70 {
  width: 70%;
}
.col-75 {
  width: 75%;
}
.col-80 {
  width: 80%;
}
.col-90 {
  width: 90%;
}
.col-100 {
  width: 100%;
}
.col-3em {
  width: 3em;
}
.col-4em {
  width: 4em;
}
.col-5em {
  width: 5em;
}
.col-6em {
  width: 6em;
}
.col-7em {
  width: 7em;
}
.col-8em {
  width: 8em;
}
.col-9em {
  width: 9em;
}
.col-10em {
  width: 10em;
}
.col-15em {
  width: 15em;
}
.col-20em {
  width: 20em;
}
.col-25em {
  width: 25em;
}
.col-30em {
  width: 30em;
}
.col-40em {
  width: 40em;
}
.col-50em {
  width: 50em;
}
.min-3em {
  min-width: 3em;
}
.min-4em {
  min-width: 4em;
}
.min-5em {
  min-width: 5em;
}
.min-6em {
  min-width: 6em;
}
.min-7em {
  min-width: 7em;
}
.min-8em {
  min-width: 8em;
}
.min-9em {
  min-width: 9em;
}
.min-10em {
  min-width: 10em;
}
.min-15em {
  min-width: 15em;
}
.min-20em {
  min-width: 20em;
}
.min-30em {
  min-width: 30em;
}
.flex-row {
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-col {
  flex-direction: column;
  flex-wrap: wrap;
}
.flex-0 {
  flex-grow: 0;
}
.flex-1 {
  flex-grow: 1;
}
.flex-2 {
  flex-grow: 2;
}


.cursor-pointer {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

[v-cloak] {
  display: none;
}

.margin-top {
  margin-top: 0.5rem;
}