/* font 👇 */

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
div,
button,
input,
textarea {
  font-family: "Inter Tight", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* text 👇 */

.icon {
  background: -webkit-linear-gradient(#484fce, #202286);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon2 {
  background: -webkit-linear-gradient(#767fff, #262eb5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glowblue {
  background: -webkit-linear-gradient(#a6c5ff, #7179f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prisma {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#015281),
    to(#55c1ec)
  );
  background-image: linear-gradient(0deg, #015281 0%, #55c1ec 100%);
  color: #efe5ff;
}

.selectrow {
  -webkit-transition: -webkit-box-shadow 0s ease;
  transition: -webkit-box-shadow 0s ease;
  transition: box-shadow 0s ease;
  transition:
    box-shadow 0s ease,
    -webkit-box-shadow 0s ease;
}

.selectrow:hover {
  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

.tips {
  font-size: smaller;
  text-align: left;
  padding: 0.3rem;
  margin-bottom: 1rem;
  width: 100%;
  border: 1px;
  background: var(--bs-secondary-bg-subtle);
}

.infobanner {
  font-size: 13px;
  text-align: justify;
  padding: 10px;
  margin-bottom: 1rem;
  width: 100%;
  border: 1px solid #cfdeef;
  border-left-width: 6px;
  border-radius: 5px;
  background: var(--bs-secondary-bg-subtle);
  color: #6c757d;
}

.pill {
  font-size: 12px;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: 0.7rem;
  opacity: 50 !important;
  text-shadow: rgba(41, 41, 41, 0.85);
}

.pill-sm {
  font-size: 11px;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: 0.7rem;
  opacity: 50 !important;
  text-shadow: rgba(41, 41, 41, 0.85);
}

.pill-lg {
  font-size: 13px;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: 0.7rem;
  opacity: 50 !important;
  text-shadow: rgba(41, 41, 41, 0.85);
}

/* flex div 👇 */

.fullheight {
  height: calc(100vh - 180px) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flexheight {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow: auto;
}

.hidescroll::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.paymentmonth {
  min-width: 80px;
}

/* banner 👇 */

.flow {
  background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgb(18, 5, 92)),
      color-stop(40%, rgb(18, 5, 92)),
      color-stop(50%, rgba(27, 13, 107, 0.7)),
      to(rgba(255, 255, 255, 0))
    ),
    url("../assets/images/graphics/world.jpg");
  background-image: linear-gradient(
      90deg,
      rgb(18, 5, 92) 0%,
      rgb(18, 5, 92) 40%,
      rgba(27, 13, 107, 0.7) 50%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../assets/images/graphics/world.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  color: white;
}

.homebg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
  color: white;
  background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgb(18, 5, 92)),
      color-stop(45%, rgb(27, 13, 107)),
      to(rgba(255, 255, 255, 0))
    ),
    url("../assets/images/graphics/home2.jpg");
  background-image: linear-gradient(
      90deg,
      rgb(18, 5, 92) 0%,
      rgb(27, 13, 107) 45%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../assets/images/graphics/home2.jpg");
}

/* background 👇 */

.skybluebg {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#e9e6ef),
    to(#afc6e6)
  );
  background-image: linear-gradient(0deg, #e9e6ef 0%, #afc6e6 100%);
}

.darkbluebg {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#080924),
    to(#13155e)
  );
  background-image: linear-gradient(0deg, #080924 0%, #13155e 100%);
}

.idarkbluebg {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#0b0c30),
    to(#001951)
  );
  background-image: linear-gradient(0deg, #0b0c30 0%, #001951 100%);
}

.darkbluebgflat {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#0c0f52),
    to(#13155e)
  );
  background-image: linear-gradient(0deg, #0c0f52 0%, #13155e 100%);
}

.matrixbg {
  background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgb(18, 5, 92)),
      to(rgba(255, 255, 255, 0))
    ),
    url("../assets/images/graphics/matrix.webp");
  background-image: linear-gradient(
      90deg,
      rgb(18, 5, 92) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../assets/images/graphics/matrix.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.matrixbg2 {
  background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgb(18, 5, 92)),
      to(rgba(255, 255, 255, 0))
    ),
    url("../assets/images/graphics/matrix2.jpg");
  background-image: linear-gradient(
      90deg,
      rgb(18, 5, 92) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../assets/images/graphics/matrix2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.darkcard {
  background-color: #030625e8;
}

.tranparentcard {
  background-color: rgba(255, 255, 255, 0.1);
}

.glass {
  /* From https://css.glass */
  background: rgba(7, 59, 172, 0.25);
  -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

/* animated box */

.colorcard {
  background: linear-gradient(-45deg, #2e2eddcb, #8baad8b6, #0416b9a6);
  background-size: 400% 400%;
  -webkit-animation: bg 10s infinite;
  animation: bg 10s infinite;
}

@-webkit-keyframes bg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bg {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* switch settings 👇 */

.ui-switch {
  /* switch */
  --switch-bg: rgb(135, 150, 165);
  --switch-width: 48px;
  --switch-height: 20px;
  /* circle */
  --circle-diameter: 32px;
  --circle-bg: var(--bs-primary);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
  display: none;
}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

.slider .circle {
  top: calc(var(--circle-inset) * -1);
  left: 0;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  position: absolute;
  background: var(--circle-bg);
  border-radius: inherit;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition:
    left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition:
    left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  box-shadow:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.slider .circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}

/* actions */

.ui-switch input:checked + .slider .circle {
  left: calc(100% - var(--circle-diameter));
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active + .slider .circle::before {
  -webkit-transition: 0s;
  transition: 0s;
  opacity: 1;
  width: 0;
  height: 0;
}

/* glow div */

.glow {
  text-align: center;
  display: block;
}
.glow.ai {
  border-radius: 15px;
  color: #fff;
  -webkit-box-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 8px #0ba9ca,
    0 0 12px #0ba9ca,
    0 0 12px #0ba9ca,
    0 0 12px #0ba9ca;
  box-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 8px #0ba9ca,
    0 0 12px #0ba9ca,
    0 0 12px #0ba9ca,
    0 0 12px #0ba9ca;
  -webkit-animation: blink 0.9s infinite alternate;
  animation: blink 0.9s infinite alternate;
}

@-webkit-keyframes blink {
  100% {
    -webkit-box-shadow:
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 8px #fff,
      0 0 15px #0ba9ca,
      0 0 25px #0ba9ca,
      0 0 25px #0ba9ca;
    box-shadow:
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 8px #fff,
      0 0 15px #0ba9ca,
      0 0 25px #0ba9ca,
      0 0 25px #0ba9ca;
  }
}

@keyframes blink {
  100% {
    -webkit-box-shadow:
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 8px #fff,
      0 0 15px #0ba9ca,
      0 0 25px #0ba9ca,
      0 0 25px #0ba9ca;
    box-shadow:
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 8px #fff,
      0 0 15px #0ba9ca,
      0 0 25px #0ba9ca,
      0 0 25px #0ba9ca;
  }
}

/* fine tuning 👇 */

.table-group-divider {
  border-top: 3px solid #c3c5dd91;
}