@font-face {
  font-family: TTNorms;
  src: url("./TTNorms/TTNormsPro-Medium.ttf");
}

/* hide wp admin menu  */

#wpbody-content > div:not(.wizard) {
  display: none !important;
}

#wpadminbar,
#adminmenumain,
#wpfooter {
  display: none;
}

/* wizard */
body {
  --green: #31aa52;
  --blue: #3e84ad;
  --blue-dark: #234e77;
  --red: #bf5777;
  --red-dark: #98004d;
  --yellow: #ffd858;
  --yellow-light: #ffe99f;
  --gray: #dedede;
  --gray-light: #f2f2f2;
  --gray-dark: #808080;
  --radius: 30px;
  font-family: TTNorms;

  height: 100vh;
  width: 100vw;
  max-height: 100vh;

  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wizard {
  height: 100vh;
  width: 1424px;
  display: grid;
  box-sizing: border-box;
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 4rem;
  background: var(--blue);
  color: white;
  gap: 1.5rem;
}

header nav {
  display: flex;
  align-items: center;
  margin: auto;
}

.step-label {
  background: white;
  color: var(--blue);
  /* border-radius: var(--radius); */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6rem 2rem;

  font-size: 12pt;
  font-weight: bold;

  cursor: pointer;
  user-select: none;
}

.step-label.active {
  background: var(--blue-dark);
  color: white;
}

.step-label.done {
  background: var(--green);
  color: white;
}


.line {
  height: 4px;
  width: 20px;
  background: white;
}

/* BODY */

main {
  display: flex;
  margin: 3rem 0rem;
  /* overflow: hidden; */
}

main > section {
  min-width: 100%;
  height: 100%;
  /* opacity: 0; */

  /* transition: opacity 0.1s ease-in, transform 0.1s ease-in; */
}

/* main > section.active {
  opacity: 1;
} */

/* FOOTER */

footer {
  margin: 3rem 2rem;
  margin-top: 1rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer div {
  gap: 1rem;
  display: flex;
  /* justify-content: start; */
}

/* Buttons */

button {
  background: white;
  border: solid 2px var(--blue-dark);
  /* border-radius: 20px; */
  padding: 0.5rem 2rem;
  font-weight: bold;
  color: var(--blue-dark);

  transition: scale 0.1s ease-in;

  cursor: pointer;
}

button:hover {
  scale: 1.1;
}

.hidden {
  display: none;
}

button.primary {
  background: var(--yellow);
  border: solid 1px var(--yellow-light);
  box-shadow: 0px 3px 6px #00000029;
}

button:disabled {
  opacity: 50%;
  cursor: not-allowed;
}

/* Helpers */

/* font colors */
.green {
  color: var(--green);
}
.blue {
  color: var(--blue);
}
.blue-dark {
  color: var(--blue-dark);
}
.red {
  color: var(--red);
}
.red-dark {
  color: var(--red-dark);
}
.yellow {
  color: var(--yellow);
}
.yellow-light {
  color: var(--yellow-light);
}
.gray {
  color: var(--gray);
}
.gray-dark {
  color: var(--gray-dark);
}
.gray-light {
  color: var(--gray-light);
}

/* bg colors */
.bg-green {
  background: var(--green);
}
.bg-blue {
  background: var(--blue);
}
.bg-blue-dark {
  background: var(--blue-dark);
}
.bg-red {
  background: var(--red);
}
.bg-red-dark {
  background: var(--red-dark);
}
.bg-yellow {
  background: var(--yellow);
}
.bg-yellow-light {
  background: var(--yellow-light);
}
.bg-gray {
  background: var(--gray);
}
.bg-gray-light {
  background: var(--gray-light);
}
.bg-gray-dark {
  background: var(--gray-dark);
}