* {
  --padding: 5px;

  --background-color: hsl(0, 0%, 99%);
  --secondary-background: hsl(0, 0%, 90%);
  --text-color: hsl(0, 0%, 5%);

  --img-whiteness: 0%;

  --color-blue: hsl(207, 76%, 50%);
  --color-blueP: hsl(207, 76%, 40%);

  --color-green: hsl(103, 87%, 30%);
  --color-greenP: hsl(103, 87%, 20%);

  --color-yellow: hsl(56, 75%, 45%);
  --color-yellowP: hsl(56, 75%, 40%);

  --color-red: hsl(0, 71%, 50%);
  --color-redP: hsl(0, 71%, 40%);

  --tableHeadColor: #4b565f;

  --gray: #77777777;

  --sex-M: #e78e0e; /* Men */
  --sex-W: #0896c6; /* Women */
  --sex-U: #28c608; /* Universal */
  --sex-N: #d1e70e; /* Mixex */
}

@container root style(--darkmode: 1) {
  * {
    --background-color: hsl(220, 6%, 20%);
    --secondary-background: hsl(220, 6%, 10%);
    --text-color: hsl(0, 0%, 95%);

    --img-whiteness: 100%;
  }
}

* {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: var(--padding);
  color: var(--text-color);
  overflow: hidden;
  position: relative;
}

body {
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  min-height: 100dvh;
}

html {
  padding: 0;
  overflow: auto;

  /*DarkMode*/
  --darkmode: 0;
  container-name: root;
  container-type: normal;
}

html:has(#darkModeToggle:checked) {
  --darkmode: 1;
}

/* main {
  overflow: auto;
  flex-grow: 1;
} */

strong,
b,
i,
span,
a {
  padding: 0;
}

/* CONTENT BOXES */

.contentBox {
  background-color: var(--secondary-background);
  border: 1px solid var(--text-color);
  border-radius: var(--padding);
  padding: var(--padding);
}

/* HR */
hr {
  border: none;
  border-top: 1px solid var(--text-color);
  padding: 0;
}

/* DETAILS */
details summary {
  cursor: pointer;
}

/* INPUTS */

input,
select {
  background-color: var(--background-color);
  border: 1px solid var(--text-color);
  border-radius: 5px;
}

input:focus,
select:focus {
  outline: 3px solid var(--text-color);
}

input:disabled,
select:disabled {
  background-color: var(--secondary-background);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid var(--text-color);
  background-color: var(--background-color);
  border-radius: 0.5em;
}

input[type="checkbox"]:checked {
  background-color: var(--text-color);
}

/* BUTTONS */

button {
  border: none;
  border-radius: var(--padding);
  background-color: var(--color-blue);
  color: white;
  font-weight: bold;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(100%);
}

button:hover {
  background-color: var(--color-blueP);
}

button.buttonGreen {
  background-color: var(--color-green);
}
button.buttonGreen:hover {
  background-color: var(--color-greenP);
}

button.buttonYellow {
  background-color: var(--color-yellow);
}
button.buttonYellow:hover {
  background-color: var(--color-yellowP);
}

button.buttonRed {
  background-color: var(--color-red);
}
button.buttonRed:hover {
  background-color: var(--color-redP);
}

button.buttonClose {
  position: absolute;
  top: 0;
  right: 0;

  width: fit-content;
  height: fit-content;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.1rem;
  background-color: unset;
  color: color-mix(in srgb, var(--text-color) 50%, transparent);
}

button.buttonClose:hover {
  color: red;
}

button.buttonExpand span {
  color: white;
  font-weight: bold;
}

button.buttonExpand span.less {
  display: none;
}

button.buttonExpand.expanded span.more {
  display: none;
}
button.buttonExpand.expanded span.less {
  display: unset;
}

button.buttonHide,
button.buttonShow {
  border-radius: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  background-image: url("/img/eyeClosed.svg");
  filter: invert(var(--darkmode));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  right: var(--padding);
  width: 1.5rem;
  height: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

button.buttonHide.p2,
button.buttonShow.p2 {
  right: calc(2 * var(--padding));
}

button.buttonShow {
  background-image: url("/img/eyeOpen.svg");
}

button.buttonHide:hover,
button.buttonShow:hover {
  background-size: 90%;
}

/* CUSTOM STYLES */

.setH {
  height: var(--padding);
}

.setW {
  width: var(--padding);
}

.container {
  display: flex;
  padding: 0;
}

.fh {
  display: flex;
  flex-direction: row;
}

.fv {
  display: flex;
  flex-direction: column;
}

.fg {
  flex-grow: 1;
  flex-shrink: 1;
}

.fg {
  flex-grow: 1;
  flex-shrink: 1;
}

.oa {
  overflow: auto;
}

.center {
  justify-content: center;
  align-items: center;
}

.centerMain {
  justify-content: center;
}

.centerCross {
  align-items: center;
}

.p0 {
  padding: 0;
}

.p1 {
  padding: var(--padding);
}

.p2 {
  padding: calc(2 * var(--padding));
}

.p3 {
  padding: calc(3 * var(--padding));
}

.p4 {
  padding: calc(4 * var(--padding));
}

.p5 {
  padding: calc(5 * var(--padding));
}

.g0 {
  gap: 0;
}

.g1 {
  gap: var(--padding);
}

.g2 {
  gap: calc(2 * var(--padding));
}

.g3 {
  gap: calc(3 * var(--padding));
}

.g4 {
  gap: calc(4 * var(--padding));
}

.g5 {
  gap: calc(5 * var(--padding));
}

.w100 {
  width: 100%;
}

.w50 {
  width: 50%;
}

.w33 {
  width: 33%;
}

.w25 {
  width: 25%;
}

.w20 {
  width: 20%;
}

.w10 {
  width: 10%;
}

.w5 {
  width: 5%;
}

.h100 {
  height: 100%;
}

.h50 {
  height: 50%;
}

.h33 {
  height: 33%;
}

.h25 {
  height: 25%;
}

.h20 {
  height: 20%;
}

.h10 {
  height: 10%;
}

.h5 {
  height: 5%;
}