:root {
  --blue: #0052ff;
  --teal-bg-blue: #869fd4;
  --owhite: #f1f3f9;
  --lavender: #dfe6f6;
  --black: #0a090b;
  --dark-grey: #23252c;
  --radial-blue: #0052ffb5;
  --radial-grey: #6b6b6b;
  --radial-black: #0a090b;
  --sidebar-width: 320px;
}

body {
  height: 100%;
  background: var(--teal-bg-blue);
}

.main-class {
  overflow-x: hidden;
}

.main-container {
  padding: 0;
  background: var(--owhite);
}

.content-container {
  background: var(--owhite);
  height: 100%;
  padding: 0;
  color: var(--black);
}

@media only screen and (max-width: 991px) {
  .main-container,
  .content-container {
    max-width: 100%;
  }
}

@media only screen and (min-width: 992px) {
  .main-container {
    max-width: calc(100% - var(--sidebar-width));
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /*font-family: "Mona Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
  font-family:
    "Inter",
    sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-weight: 700;
  line-height: 1.2;
}

.alert-debug {
  color: var(--black);
  background-color: white;
  border-color: #d6e9c6;
}

.alert {
  background: var(--lavender);
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.page-circle-gradient-1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
  margin: 0;
  padding: 0;
  z-index: -1;
  background: radial-gradient(
    circle farthest-corner at 0% 30%,
    var(--radial-blue) 0%,
    var(--radial-grey) 50%
  );
}

.page-circle-gradient-2 {
  position: absolute;
  right: 0;
  height: 100%;
  width: 60%;
  margin: 0;
  padding: 0;
  z-index: -1;
  background: radial-gradient(
    circle farthest-corner at 110% 50%,
    var(--radial-blue) 0%,
    var(--radial-grey) 50%
  );
}

.btn-primary {
  background: var(--blue);
}