@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
  font-family: 'Inter';
}

div.subtitle, h2.subtitle { 
  font-size: 2rem;
}

div.content-text { 
  font-size: 1rem;
}

div.content-text ul { }

div.content-text a {
  font-weight: 500;
  text-decoration: none;
  color: #0E2C27;
}

div.content-text a:hover {
  color: #0E2C27;
}

aside.tip { 
  text-align: left;
  border-radius: 8px;
  padding: 20px !important;
  background-color: #f5fbff;
  color: #38afff;
  border: 1px solid #d1edff !important;
  border-left: 1px solid #d1edff !important;
}

aside.warning {
  text-align: center;
  border-radius: 8px;
  padding: 20px !important;
  background-color: #fffbf5;
  color: #ffac05;
  border: 1px solid #ffefd6 !important;
  border-left: 1px solid #ffefd6 !important;
}

/* =========================
   PRIMARY BUTTONS ONLY
   ========================= */

.button-wrap button:not(.back-button) { 
  height: 48px;
  border-radius: 8px;
  background-color: #0E2C27;
  color: #71E6C0;
  font-size: 1rem;
  text-transform: none;
}

.button-wrap button:not(.back-button):hover,
.button-wrap button:not(.back-button):focus,
.button-wrap button:not(.back-button):active { 
  background-color: #0E2C27 !important;
  color: #71E6C0 !important;
}

.button-wrap button:not(.back-button):hover *,
.button-wrap button:not(.back-button):focus *,
.button-wrap button:not(.back-button):active * {
  color: #71E6C0 !important;
}

.button-wrap button:not(.back-button) svg,
.button-wrap button:not(.back-button) svg path,
.button-wrap button:not(.back-button):hover svg,
.button-wrap button:not(.back-button):hover svg path,
.button-wrap button:not(.back-button):focus svg,
.button-wrap button:not(.back-button):focus svg path,
.button-wrap button:not(.back-button):active svg,
.button-wrap button:not(.back-button):active svg path {
  fill: #71E6C0 !important;
  stroke: #71E6C0 !important;
  color: #71E6C0 !important;
}

.button-wrap button:disabled {
  opacity: 50%;
  cursor: default;
}

/* =========================
   BACK BUTTON (SECONDARY)
   ========================= */

.button-wrap .back-button { 
  background-color: #ffffff;
  border: 1px solid #0E2C27;
  color: #0E2C27;
  width: 70px;
  height: 48px;
  border-radius: 8px;
}

.button-wrap .back-button:hover,
.button-wrap .back-button:focus,
.button-wrap .back-button:active {
  background-color: #EFEFF6 !important;
  color: #0E2C27 !important;
  border: 1px solid #0E2C27 !important;
}

.button-wrap .back-button:hover *,
.button-wrap .back-button:focus *,
.button-wrap .back-button:active * {
  color: #0E2C27 !important;
}

.button-wrap .back-button:after { 
  content: "Back";
}

.button-wrap .back-button span {
  display: none;
}

.button-wrap .back-button svg  {
  display: none;
}

/* =========================
   OTHER ELEMENTS
   ========================= */

a.tile { }

a.tile svg path { }

div.radio-wrap { }

div.radio-wrap label { }

div.radio-wrap .radio-check { }

div.dropdown-wrap { }

div.dropdown-wrap li { }