:root {
  --sb-bg-color-bright: #32ade1;
  --sb-bg-color: #0099db;
  --sb-bg-color-dark: #0183bb;
  --sb-tab-text: #2f318b;
}
.text-blue {
  color: var(--sb-bg-color);
}
.bg-blue {
  background-color: var(--sb-bg-color);
}
.button-blue {
  color: white;
  background-color: var(--sb-bg-color);
  border-color: var(--sb-bg-color);
}
.button-blue:hover,
.button-blue:active,
.button-blue:hover:active {
  color: white;
  background-color: var(--sb-bg-color-dark);
  border-color: var(--sb-bg-color-dark);
}
.button-blue:disabled {
  color: white;
  background-color: var(--sb-bg-color-bright);
  border-color: var(--sb-bg-color-bright);
}
.button-outline-blue {
  color: var(--sb-bg-color);
  border-color: var(--sb-bg-color);
}
.button-outline-blue:hover {
  color: white;
  background-color: var(--sb-bg-color);
  border-color: var(--sb-bg-color);
}
input:invalid {
  background-color: pink;
}
.postfix-box-arrow-up-right-icon::after {
  margin-left: 0.25rem !important;

  display: inline-block;
  font-family: bootstrap-icons !important;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f1c5";
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body > section.bg-body-tertiary {
  animation: fadeInAnimation ease 0.3s;
}

.dropdown-menu.show {
  animation: fadeInAnimation ease 0.3s;
}