:root {
  --bs-primary: #ffce00;
  --on-primary: #00263a;

  --background-color: #ffffff;
  --default-color: #212529;
  --heading-color: #2d465e;
  --accent-color: var(--bs-primary);
  --surface-color: #ffffff;
  --contrast-color: var(--on-primary);
}

:root {
  --bs-primary: #25d366;
  --on-primary: #ffffff;

  --background-color: #ece5dd;
  --default-color: #075e54;
  --heading-color: #128c7e;
  --accent-color: var(--bs-primary);
  --surface-color: #ffffff;
  --contrast-color: var(--on-primary);
}

:root {
  --nav-color: #212529;
  --nav-hover-color: var(--bs-primary);
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #212529;
  --nav-dropdown-hover-color: var(--bs-primary);


  --border-color: #dfdfdf;
  --input-color: #3b548120;

  --background-color: #ffffff;
  --card-background-color: #f2f2f2;
}

.light-background {
  --background-color: #f3f9ff;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: var(--bs-primary);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #f0fd40;
  --contrast-color: #ffffff;
}

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--on-primary) !important;

  &:hover,
  &:focus,
  &:active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--on-primary) !important;
  }
}

.input {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-bottom: 1rem;
}

.input>label {
  font-size: var(--description-size);
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.input input,
.input select {
  height: 2.5rem;
  width: 100%;
  border: none;
  background-color: var(--background-color);
  transition: 0.2s;
  border-radius: 0.3rem;
  outline: none;
  padding: 0.5rem 1rem;
  border: 0.1rem solid var(--input-color);
}

.input textarea {
  width: 100%;
  border: none;
  background-color: var(--background-color);
  transition: 0.2s;
  border-radius: 0.3rem;
  outline: none;
  padding: 1rem 1rem;
  border: 0.1rem solid var(--input-color);
}

.alert-container {
  display: none;
  width: 100%;
  margin-bottom: 1rem;
}

.alert-container.visible {
  display: flex;
}

.alert {
  display: flex;
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  color: #fff;
}

.alert.success {
  background-color: rgba(28, 196, 28, 0.8);
}

.alert.error {
  background-color: rgba(196, 28, 28, 0.8);
}

[type="submit"]>.loading {
  display: none;
}

[type="submit"].is-loading>.loading {
  display: flex;
  height: 2rem;
  width: 2rem;
}

[type="submit"].is-loading-lg.is-loading>.loading {
  display: flex;
  height: 3rem;
  width: 3rem;
}

[type="submit"].is-loading>.text {
  display: none;
}