:root {
  --m-out: cubic-bezier(.16, 1, .3, 1);
  --m-spring: cubic-bezier(.34, 1.56, .64, 1);
  --m-in: cubic-bezier(.5, 0, .75, 0);
}

@keyframes bsiUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes bsiFade {
  from {
    opacity: 0;
  }
}

@keyframes bsiFadeOut {
  to {
    opacity: 0;
  }
}

body > main, body > .wrap, .hub {
  animation: bsiUp .55s var(--m-out) both;
}

@keyframes bsiDlgIn {
  from {
    opacity: 0;
    transform: translateY(18px)scale(.96);
  }
}

@keyframes bsiDlgOut {
  to {
    opacity: 0;
    transform: translateY(10px)scale(.975);
  }
}

dialog[open] {
  animation: bsiDlgIn .42s var(--m-out) both;
}

dialog[open]::backdrop {
  backdrop-filter: blur(6px);
  background: rgba(9, 20, 38, .48);
  animation: .35s both bsiFade;
}

dialog.bsi-out {
  animation: bsiDlgOut .2s var(--m-in) forwards !important;
}

dialog.bsi-out::backdrop {
  animation: .22s forwards bsiFadeOut;
}

dialog.login[open] {
  animation: .45s both bsiFade;
}

dialog > * {
  animation: none;
}

@keyframes bsiPop {
  from {
    opacity: 0;
    transform: translateY(-8px)scale(.94);
  }
}

.pf-menu:not([hidden]), .mpop:not([hidden]), .stmenu:not([hidden]) {
  transform-origin: 100% 0;
  animation: bsiPop .3s var(--m-spring) both !important;
}

.bsi-nav .m:not([hidden]) {
  animation: bsiPop .3s var(--m-spring) both;
  transform-origin: 0 100%;
}

.btn, .tab, .tabs button, .seg button, .pk, .chipclear, .pf-btn, .pf-item, .ib, .bsi-nav > button {
  transition: transform .28s var(--m-out), box-shadow .28s var(--m-out), background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease !important;
}

.btn:hover:not(:disabled), .pk:hover, .bsi-nav > button:hover {
  transform: translateY(-1.5px);
}

.btn.primary:hover:not(:disabled) {
  box-shadow: 0 10px 22px -10px rgba(16, 95, 161, .75);
}

.btn:active:not(:disabled), .tab:active, .tabs button:active, .seg button:active, .pk:active, .pf-item:active, .ib:active, .bsi-nav > button:active {
  transform: scale(.96);
  transition-duration: 80ms !important;
}

.bsi-nav > button:hover {
  box-shadow: 0 14px 30px rgba(16, 95, 161, .55), 0 0 0 3px rgba(255, 255, 255, .95);
}

input, select, textarea {
  transition: border-color .2s ease, box-shadow .25s var(--m-out), background-color .2s ease !important;
}

input:focus-visible {
  box-shadow: 0 0 0 4px rgba(25, 169, 232, .2);
}

select:focus-visible {
  box-shadow: 0 0 0 4px rgba(25, 169, 232, .2);
}

textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(25, 169, 232, .2);
}

.kpi, .bucket, .stat, .kc, .erow, .row, .card.kcard {
  transition: transform .3s var(--m-out), box-shadow .3s var(--m-out), background-color .2s ease, border-color .2s ease !important;
}

.kpi:hover, .bucket:hover, .stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -20px rgba(10, 30, 60, .35);
}

@keyframes bsiToast {
  from {
    opacity: 0;
    transform: translate(-50%, 16px)scale(.96);
  }
}

.toast:not([hidden]) {
  animation: bsiToast .45s var(--m-spring) both;
}

#toast {
  transition: opacity .3s var(--m-out), transform .45s var(--m-spring) !important;
}