:root {
  --sura-header-height: 45px;
  --sura-sidebar-width: 260px;
  --sura-sidebar-bg: #ffffff;
  --sura-sidebar-border: #dee2e6;
  --sura-sidebar-link: #4a5568;
  --sura-sidebar-link-hover: #198754;
  --sura-sidebar-muted: #94a3b8;
  --sura-veo-navy: #002d62;
  --sura-veo-navy-gradient: #024270;
  --sura-veo-red: #e71b24;
  --sura-veo-gray: #d5d3e3;
  --sura-veo-gray-gradient: #f2f1f9;
  --sura-body-bg: #f5f7fb;
  --sura-body-text: #0f172a;
  --sura-surface-bg: #ffffff;
  --sura-surface-border: rgba(148, 163, 184, 0.25);
  --sura-main-gradient: linear-gradient(180deg, rgba(248, 249, 252, 0.9), rgba(241, 245, 249, 0.7));
  --sura-header-btn-bg: rgba(255, 255, 255, 0.12);
  --sura-header-btn-border: rgba(255, 255, 255, 0.24);
  --sura-header-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --sura-header-btn-active-bg: rgba(255, 255, 255, 0.22);
  --sura-topbar-bg: var(--sura-veo-gray);
}

html,
body {
  height: 100%;
}

body {
  min-height: 100vh;
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  background-color: var(--sura-body-bg);
  color: var(--sura-body-text);
  overflow: hidden;
}

main {
  max-height: 95vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: lightgrey transparent;
}

body.sura-dark-theme {
  --sura-body-bg: #d5d3e3;
  --sura-surface-bg: #111c34;
  --sura-surface-border: rgba(30, 41, 59, 0.65);
  --sura-main-gradient: var(--sura-veo-gray-gradient) 0.5;
  --sura-header-btn-bg: rgba(255, 255, 255, 0.18);
  --sura-header-btn-border: rgba(255, 255, 255, 0.32);
  --sura-header-btn-hover-bg: rgba(255, 255, 255, 0.26);
  --sura-header-btn-active-bg: rgba(255, 255, 255, 0.32);
  --sura-sidebar-bg: #0f172a;
  --bs-table-bg: rgba(20, 20, 20, 0.35);
  --sura-topbar-bg: var(--sura-surface-bg);
  --bs-body-bg: var(--sura-sidebar-muted);
  --sura-body-text: var(--sura-surface-bg);
  --bs-secondary-bg: var(--sura-veo-navy);
}

body.sura-dark-theme .sura-main-content a {
  color: #93c5fd;
}

body.sura-dark-theme .sura-main-content a:hover,
body.sura-dark-theme .sura-main-content a:focus {
  color: #dbeafe;
}

.sura-veo-navy {
  background-color: var(--sura-veo-navy) !important;
  color: #f8fafc !important;
}

.sura-veo-navy-gradient {
  background: linear-gradient(135deg, var(--sura-veo-navy), var(--sura-veo-navy-gradient)) !important;
  color: #f8fafc !important;
}

.sura-veo-red {
  color: var(--sura-veo-red) !important;
}

.sura-header {
  height: var(--sura-header-height);
  position: sticky;
  top: 0;
  background-color: var(--sura-veo-navy);
  color: #f8fafc;
  box-shadow: 0 0.4rem 1.2rem rgba(2, 66, 112, 0.25);
}

.sura-header .sura-logo {
  color: #f8fafc;
}

.sura-header .btn,
.sura-header .btn:focus,
.sura-header .btn:active {
  color: #f8fafc;
}

.sura-header .btn i {
  color: currentColor;
}

.sura-route-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  padding-inline: 0.75rem;
}

.sura-breadcrumb-nav {
  --bs-breadcrumb-divider: "›";
  width: 100%;
}

.sura-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
  color: inherit;
  flex-wrap: nowrap;
  overflow: hidden;
  font-size: 0.95rem;
}

.sura-breadcrumb .breadcrumb-item {
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex-shrink: 1;
  white-space: nowrap;
}

.sura-breadcrumb .breadcrumb-item:first-child {
  flex-shrink: 0;
}

.sura-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(248, 250, 252, 0.55);
  padding-inline: 0.2rem;
}

.sura-breadcrumb .breadcrumb-item.active {
  color: rgba(248, 250, 252, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sura-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
  color: inherit;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.sura-breadcrumb-link:hover,
.sura-breadcrumb-link:focus {
  background-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.18);
}

.sura-breadcrumb-link:focus-visible {
  outline: none;
}

.sura-breadcrumb-link i {
  font-size: 0.85rem;
}

.sura-head-link {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  color: inherit;
}

.sura-head-link:hover,
.sura-head-link:focus {
  transform: scale(1.05);
  box-shadow: 0 0 0 0.2rem rgba(0, 45, 98, 0.25);
}

.sura-header-btn {
  background-color: var(--sura-header-btn-bg);
  border: 1px solid var(--sura-header-btn-border);
  color: #f8fafc;
  border-radius: 0.65rem;
  padding: 0.35rem;
  line-height: 1;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.sura-header-btn:hover,
.sura-header-btn:focus {
  background-color: var(--sura-header-btn-hover-bg);
  color: #ffffff;
  border-color: var(--sura-header-btn-border);
  box-shadow: 0 0 0 0.2rem rgba(0, 45, 98, 0.25);
}

.sura-header-btn:active {
  background-color: var(--sura-header-btn-active-bg);
  color: #ffffff;
}

.sura-theme-toggle {
  position: relative;
}

.sura-head-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.sura-head-user {
  color: inherit;
}

.sura-head-user:hover {
  color: #198754;
}

.sura-main-layout {
  min-height: calc(100vh - var(--sura-header-height));
  position: relative;
}

.sura-sidebar {
  background-color: var(--sura-sidebar-bg) !important;
  border-right: 1px solid var(--sura-veo-red) !important;
  flex: 0 0 var(--sura-sidebar-width);
  width: var(--sura-sidebar-width);
  transition:
    transform 0.35s ease,
    width 0.35s ease,
    flex-basis 0.35s ease;
  overflow: hidden;
}

.sura-sidebar-scroll {
  height: calc(100vh - var(--sura-header-height));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.sura-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sura-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

.sura-sidebar-brand h1 {
  letter-spacing: 0.08em;
}

.sura-sidebar-nav {
  padding: 1rem 0.5rem;
  gap: 0.25rem;
}

.sura-nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  color: var(--sura-sidebar-link);
  border-radius: 0.75rem;
  background: transparent;
  border: none;
  text-align: left;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.sura-nav-link span,
.sura-nav-link i {
  pointer-events: none;
}

.sura-nav-link:hover,
.sura-nav-link:focus {
  color: var(--sura-sidebar-link-hover);
  background-color: rgba(25, 135, 84, 0.08);
  box-shadow: inset 2px 0 0 rgba(25, 135, 84, 0.4);
}

.sura-nav-link.active,
.sura-nav-link-open {
  color: var(--sura-sidebar-link-hover);
  background-color: rgba(25, 135, 84, 0.12);
  box-shadow: inset 2px 0 0 rgba(25, 135, 84, 0.8);
}

.sura-nav-caret {
  transition: transform 0.25s ease;
}

.sura-rotate-90 {
  transform: rotate(90deg);
}

.sura-submenu {
  padding-left: 0.5rem;
}

.sura-submenu .sura-sub-link {
  display: block;
  padding: 0.45rem 0.55rem;
  border-radius: 0.65rem;
  color: var(--sura-sidebar-muted);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.sura-submenu .sura-sub-link:hover,
.sura-submenu .sura-sub-link:focus {
  color: var(--sura-sidebar-link-hover);
  background-color: rgba(25, 135, 84, 0.08);
}

.sura-main-content {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--sura-main-gradient);
  color: inherit;
}

.sura-stat-card {
  background-color: var(--sura-surface-bg);
  color: inherit;
  border-radius: 1rem;
  border: 1px solid var(--sura-surface-border);
}

.sura-stat-label {
  color: var(--sura-sidebar-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.sura-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.75rem;
  font-size: 0.95rem;
}

.sura-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 0.75rem;
}

.sura-progress {
  height: 6px;
  border-radius: 999px;
  background-color: rgba(148, 163, 184, 0.25);
}

.sura-placeholder-chart {
  min-height: 210px;
  border: 1px dashed var(--sura-surface-border);
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: inherit;
  font-size: 0.95rem;
}

.sura-legend .list-group-item {
  border: 1px solid var(--sura-surface-border);
  padding-left: 0;
  padding-right: 0;
  background-color: var(--sura-surface-bg);
  border-radius: 0.75rem;
}

.sura-team-list .list-group-item {
  border: 1px solid var(--sura-surface-border);
  padding-left: 0;
  padding-right: 0;
  background-color: var(--sura-surface-bg);
  border-radius: 0.75rem;
}

.sura-sidebar-overlay {
  position: fixed;
  top: var(--sura-header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body:not(.sura-sidebar-hidden) .sura-sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.sura-sidebar-hidden .sura-sidebar {
  transform: translateX(-100%);
  width: 0;
  flex-basis: 0;
  box-shadow: none;
}

body.sura-sidebar-hidden .sura-sidebar .sura-sidebar-scroll {
  pointer-events: none;
}

@media (min-width: 992px) {
  .sura-sidebar-overlay {
    display: none;
  }

  .sura-main-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.1rem;
  }
}

@media (max-width: 991.98px) {
  .sura-sidebar {
    position: fixed;
    top: var(--sura-header-height);
    left: 0;
    height: calc(100vh - var(--sura-header-height));
    box-shadow: 0 1.5rem 2.5rem rgba(15, 23, 42, 0.2);
  }

  .sura-main-content {
    padding: 1.25rem 1rem 2rem;
  }
}

@media (min-width: 992px) {
  body.sura-sidebar-hidden .sura-sidebar .sura-sidebar-scroll {
    pointer-events: auto;
  }

  body.sura-sidebar-hidden .sura-sidebar {
    transform: translateX(-100%);
  }

  body.sura-sidebar-hidden .sura-main-content {
    padding-left: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .sura-header {
    padding-inline: 0.75rem;
  }

  .sura-head-link {
    width: 32px;
    height: 32px;
  }

  .sura-stat-value {
    font-size: 1.55rem;
  }
}

/*====== width, Height css starts ======*/

.wid-10 {
  min-width: 10px;
  max-width: 10px;
  width: 10px;
}

.hei-10 {
  height: 10px;
  max-height: 10px;
  min-height: 10px;
}

.wid-15 {
  min-width: 15px;
  max-width: 15px;
  width: 15px;
}

.hei-15 {
  height: 15px;
  max-height: 15px;
  min-height: 15px;
}

.wid-20 {
  min-width: 20px;
  max-width: 20px;
  width: 20px;
}

.hei-20 {
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

.wid-25 {
  min-width: 25px;
  max-width: 25px;
  width: 25px;
}

.hei-25 {
  height: 25px;
  max-height: 25px;
  min-height: 25px;
}

.wid-30 {
  min-width: 30px;
  max-width: 30px;
  width: 30px;
}

.hei-30 {
  height: 30px;
  max-height: 30px;
  min-height: 30px;
}

.wid-35 {
  min-width: 35px;
  max-width: 35px;
  width: 35px;
}

.hei-35 {
  height: 35px;
  max-height: 35px;
  min-height: 35px;
}

.wid-40 {
  min-width: 40px;
  max-width: 40px;
  width: 40px;
}

.hei-40 {
  height: 40px;
  max-height: 40px;
  min-height: 40px;
}

.wid-45 {
  min-width: 45px;
  max-width: 45px;
  width: 45px;
}

.hei-45 {
  height: 45px;
  max-height: 45px;
  min-height: 45px;
}

.wid-50 {
  min-width: 50px;
  max-width: 50px;
  width: 50px;
}

.hei-50 {
  height: 50px;
  max-height: 50px;
  min-height: 50px;
}

.wid-55 {
  min-width: 55px;
  max-width: 55px;
  width: 55px;
}

.hei-55 {
  height: 55px;
  max-height: 55px;
  min-height: 55px;
}

.wid-60 {
  min-width: 60px;
  max-width: 60px;
  width: 60px;
}

.hei-60 {
  height: 60px;
  max-height: 60px;
  min-height: 60px;
}

.wid-65 {
  min-width: 65px;
  max-width: 65px;
  width: 65px;
}

.hei-65 {
  height: 65px;
  max-height: 65px;
  min-height: 65px;
}

.wid-70 {
  min-width: 70px;
  max-width: 70px;
  width: 70px;
}

.hei-70 {
  height: 70px;
  max-height: 70px;
  min-height: 70px;
}

.wid-75 {
  min-width: 75px;
  max-width: 75px;
  width: 75px;
}

.hei-75 {
  height: 75px;
  max-height: 75px;
  min-height: 75px;
}

.wid-80 {
  min-width: 80px;
  max-width: 80px;
  width: 80px;
}

.hei-80 {
  height: 80px;
  max-height: 80px;
  min-height: 80px;
}

.wid-85 {
  min-width: 85px;
  max-width: 85px;
  width: 85px;
}

.hei-85 {
  height: 85px;
  max-height: 85px;
  min-height: 85px;
}

.wid-90 {
  min-width: 90px;
  max-width: 90px;
  width: 90px;
}

.hei-90 {
  height: 90px;
  max-height: 90px;
  min-height: 90px;
}

.wid-95 {
  min-width: 95px;
  max-width: 95px;
  width: 95px;
}

.hei-95 {
  height: 95px;
  max-height: 95px;
  min-height: 95px;
}

.wid-100 {
  min-width: 100px;
  max-width: 100px;
  width: 100px;
}

.hei-100 {
  height: 100px;
  max-height: 100px;
  min-height: 100px;
}

.wid-105 {
  min-width: 105px;
  max-width: 105px;
  width: 105px;
}

.hei-105 {
  height: 105px;
  max-height: 105px;
  min-height: 105px;
}

.wid-110 {
  min-width: 110px;
  max-width: 110px;
  width: 110px;
}

.hei-110 {
  height: 110px;
  max-height: 110px;
  min-height: 110px;
}

.wid-115 {
  min-width: 115px;
  max-width: 115px;
  width: 115px;
}

.hei-115 {
  height: 115px;
  max-height: 115px;
  min-height: 115px;
}

.wid-120 {
  min-width: 120px;
  max-width: 120px;
  width: 120px;
}

.hei-120 {
  height: 120px;
  max-height: 120px;
  min-height: 120px;
}

.wid-125 {
  min-width: 125px;
  max-width: 125px;
  width: 125px;
}

.hei-125 {
  height: 125px;
  max-height: 125px;
  min-height: 125px;
}

.wid-130 {
  min-width: 130px;
  max-width: 130px;
  width: 130px;
}

.hei-130 {
  height: 130px;
  max-height: 130px;
  min-height: 130px;
}

.wid-135 {
  min-width: 135px;
  max-width: 135px;
  width: 135px;
}

.hei-135 {
  height: 135px;
  max-height: 135px;
  min-height: 135px;
}

.wid-140 {
  min-width: 140px;
  max-width: 140px;
  width: 140px;
}

.hei-140 {
  height: 140px;
  max-height: 140px;
  min-height: 140px;
}

.wid-145 {
  min-width: 145px;
  max-width: 145px;
  width: 145px;
}

.hei-145 {
  height: 145px;
  max-height: 145px;
  min-height: 145px;
}

.wid-150 {
  min-width: 150px;
  max-width: 150px;
  width: 150px;
}

.hei-150 {
  height: 150px;
  max-height: 150px;
  min-height: 150px;
}

.wid-175 {
  min-width: 175px;
  max-width: 175px;
  width: 175px;
}

.hei-175 {
  height: 175px;
  max-height: 175px;
  min-height: 175px;
}

.wid-200 {
  min-width: 200px;
  max-width: 200px;
  width: 200px;
}

.hei-200 {
  height: 200px;
  max-height: 200px;
  min-height: 200px;
}

.wid-225 {
  min-width: 225px;
  max-width: 225px;
  width: 225px;
}

.hei-225 {
  height: 225px;
  max-height: 225px;
  min-height: 225px;
}

.wid-250 {
  min-width: 250px;
  max-width: 250px;
  width: 250px;
}

.hei-250 {
  height: 250px;
  max-height: 250px;
  min-height: 250px;
}

.wid-275 {
  min-width: 275px;
  max-width: 275px;
  width: 275px;
}

.hei-275 {
  height: 275px;
  max-height: 275px;
  min-height: 275px;
}

.wid-300 {
  min-width: 300px;
  max-width: 300px;
  width: 300px;
}

.hei-300 {
  height: 300px;
  max-height: 300px;
  min-height: 300px;
}

/*====== width, Height css ends ======*/
/*====== border-width css starts ======*/
.b-wid-1 {
  border-width: 1px;
}

.b-wid-2 {
  border-width: 2px;
}

.b-wid-3 {
  border-width: 3px;
}

.b-wid-4 {
  border-width: 4px;
}

.b-wid-5 {
  border-width: 5px;
}

.b-wid-6 {
  border-width: 6px;
}

.b-wid-7 {
  border-width: 7px;
}

.b-wid-8 {
  border-width: 8px;
}

/*====== border-width css ends ======*/
/*====== text-color css starts ======*/
.text-xs {
  font-size: 0.625rem !important;
}

.text-sm {
  font-size: 0.75rem !important;
}

.text-md {
  font-size: 0.8125rem !important;
}

.text-base {
  font-size: 0.875rem !important;
}

.text-lg {
  font-size: 1rem !important;
}

.text-xl {
  font-size: 1.125rem !important;
}

.text-2xl {
  font-size: 1.25rem !important;
}

.text-3xl {
  font-size: 1.5rem !important;
}

.text-4xl {
  font-size: 2rem !important;
}

.text-5xl {
  font-size: 2.25rem !important;
}

.text-6xl {
  font-size: 2.5rem !important;
}

.text-7xl {
  font-size: 3rem !important;
}

.text-8xl {
  font-size: 4rem !important;
}

.text-9xl {
  font-size: 6rem !important;
}

.text-10xl {
  font-size: 8rem !important;
}

/*====== text-color css ends ======*/
/*====== more bootstrap colors start ======*/
.bg-blue-100 {
  background: #d1e9ff !important;
}

.bg-blue-100:hover {
  opacity: 0.85;
}

.text-blue-100 {
  color: #d1e9ff !important;
}

.bg-blue-200 {
  background: #a3d3ff !important;
}

.bg-blue-200:hover {
  opacity: 0.85;
}

.text-blue-200 {
  color: #a3d3ff !important;
}

.bg-blue-300 {
  background: #74bcff !important;
}

.bg-blue-300:hover {
  opacity: 0.85;
}

.text-blue-300 {
  color: #74bcff !important;
}

.bg-blue-400 {
  background: #46a6ff !important;
}

.bg-blue-400:hover {
  opacity: 0.85;
}

.text-blue-400 {
  color: #46a6ff !important;
}

.bg-blue-500 {
  background: #1890ff !important;
}

.bg-blue-500:hover {
  opacity: 0.85;
}

.text-blue-500 {
  color: #1890ff !important;
}

.bg-blue-600 {
  background: #1373cc !important;
}

.bg-blue-600:hover {
  opacity: 0.85;
}

.text-blue-600 {
  color: #1373cc !important;
}

.bg-blue-700 {
  background: #0e5699 !important;
}

.bg-blue-700:hover {
  opacity: 0.85;
}

.text-blue-700 {
  color: #0e5699 !important;
}

.bg-blue-800 {
  background: #0a3a66 !important;
}

.bg-blue-800:hover {
  opacity: 0.85;
}

.text-blue-800 {
  color: #0a3a66 !important;
}

.bg-blue-900 {
  background: #051d33 !important;
}

.bg-blue-900:hover {
  opacity: 0.85;
}

.text-blue-900 {
  color: #051d33 !important;
}

.bg-indigo-100 {
  background: #e0cffc !important;
}

.bg-indigo-100:hover {
  opacity: 0.85;
}

.text-indigo-100 {
  color: #e0cffc !important;
}

.bg-indigo-200 {
  background: #c29ffa !important;
}

.bg-indigo-200:hover {
  opacity: 0.85;
}

.text-indigo-200 {
  color: #c29ffa !important;
}

.bg-indigo-300 {
  background: #a370f7 !important;
}

.bg-indigo-300:hover {
  opacity: 0.85;
}

.text-indigo-300 {
  color: #a370f7 !important;
}

.bg-indigo-400 {
  background: #8540f5 !important;
}

.bg-indigo-400:hover {
  opacity: 0.85;
}

.text-indigo-400 {
  color: #8540f5 !important;
}

.bg-indigo-500 {
  background: #6610f2 !important;
}

.bg-indigo-500:hover {
  opacity: 0.85;
}

.text-indigo-500 {
  color: #6610f2 !important;
}

.bg-indigo-600 {
  background: #520dc2 !important;
}

.bg-indigo-600:hover {
  opacity: 0.85;
}

.text-indigo-600 {
  color: #520dc2 !important;
}

.bg-indigo-700 {
  background: #3d0a91 !important;
}

.bg-indigo-700:hover {
  opacity: 0.85;
}

.text-indigo-700 {
  color: #3d0a91 !important;
}

.bg-indigo-800 {
  background: #290661 !important;
}

.bg-indigo-800:hover {
  opacity: 0.85;
}

.text-indigo-800 {
  color: #290661 !important;
}

.bg-indigo-900 {
  background: #140330 !important;
}

.bg-indigo-900:hover {
  opacity: 0.85;
}

.text-indigo-900 {
  color: #140330 !important;
}

.bg-purple-100 {
  background: #e2d9f3 !important;
}

.bg-purple-100:hover {
  opacity: 0.85;
}

.text-purple-100 {
  color: #e2d9f3 !important;
}

.bg-purple-200 {
  background: #c5b3e6 !important;
}

.bg-purple-200:hover {
  opacity: 0.85;
}

.text-purple-200 {
  color: #c5b3e6 !important;
}

.bg-purple-300 {
  background: #a98eda !important;
}

.bg-purple-300:hover {
  opacity: 0.85;
}

.text-purple-300 {
  color: #a98eda !important;
}

.bg-purple-400 {
  background: #8c68cd !important;
}

.bg-purple-400:hover {
  opacity: 0.85;
}

.text-purple-400 {
  color: #8c68cd !important;
}

.bg-purple-500 {
  background: #6f42c1 !important;
}

.bg-purple-500:hover {
  opacity: 0.85;
}

.text-purple-500 {
  color: #6f42c1 !important;
}

.bg-purple-600 {
  background: #59359a !important;
}

.bg-purple-600:hover {
  opacity: 0.85;
}

.text-purple-600 {
  color: #59359a !important;
}

.bg-purple-700 {
  background: #432874 !important;
}

.bg-purple-700:hover {
  opacity: 0.85;
}

.text-purple-700 {
  color: #432874 !important;
}

.bg-purple-800 {
  background: #2c1a4d !important;
}

.bg-purple-800:hover {
  opacity: 0.85;
}

.text-purple-800 {
  color: #2c1a4d !important;
}

.bg-purple-900 {
  background: #160d27 !important;
}

.bg-purple-900:hover {
  opacity: 0.85;
}

.text-purple-900 {
  color: #160d27 !important;
}

.bg-pink-100 {
  background: #fad8e8 !important;
}

.bg-pink-100:hover {
  opacity: 0.85;
}

.text-pink-100 {
  color: #fad8e8 !important;
}

.bg-pink-200 {
  background: #f6b2d1 !important;
}

.bg-pink-200:hover {
  opacity: 0.85;
}

.text-pink-200 {
  color: #f6b2d1 !important;
}

.bg-pink-300 {
  background: #f18bba !important;
}

.bg-pink-300:hover {
  opacity: 0.85;
}

.text-pink-300 {
  color: #f18bba !important;
}

.bg-pink-400 {
  background: #ed65a3 !important;
}

.bg-pink-400:hover {
  opacity: 0.85;
}

.text-pink-400 {
  color: #ed65a3 !important;
}

.bg-pink-500 {
  background: #e83e8c !important;
}

.bg-pink-500:hover {
  opacity: 0.85;
}

.text-pink-500 {
  color: #e83e8c !important;
}

.bg-pink-600 {
  background: #ba3270 !important;
}

.bg-pink-600:hover {
  opacity: 0.85;
}

.text-pink-600 {
  color: #ba3270 !important;
}

.bg-pink-700 {
  background: #8b2554 !important;
}

.bg-pink-700:hover {
  opacity: 0.85;
}

.text-pink-700 {
  color: #8b2554 !important;
}

.bg-pink-800 {
  background: #5d1938 !important;
}

.bg-pink-800:hover {
  opacity: 0.85;
}

.text-pink-800 {
  color: #5d1938 !important;
}

.bg-pink-900 {
  background: #2e0c1c !important;
}

.bg-pink-900:hover {
  opacity: 0.85;
}

.text-pink-900 {
  color: #2e0c1c !important;
}

.bg-red-100 {
  background: #ffdbdc !important;
}

.bg-red-100:hover {
  opacity: 0.85;
}

.text-red-100 {
  color: #ffdbdc !important;
}

.bg-red-200 {
  background: #ffb8b9 !important;
}

.bg-red-200:hover {
  opacity: 0.85;
}

.text-red-200 {
  color: #ffb8b9 !important;
}

.bg-red-300 {
  background: #ff9495 !important;
}

.bg-red-300:hover {
  opacity: 0.85;
}

.text-red-300 {
  color: #ff9495 !important;
}

.bg-red-400 {
  background: #ff7172 !important;
}

.bg-red-400:hover {
  opacity: 0.85;
}

.text-red-400 {
  color: #ff7172 !important;
}

.bg-red-500 {
  background: #ff4d4f !important;
}

.bg-red-500:hover {
  opacity: 0.85;
}

.text-red-500 {
  color: #ff4d4f !important;
}

.bg-red-600 {
  background: #cc3e3f !important;
}

.bg-red-600:hover {
  opacity: 0.85;
}

.text-red-600 {
  color: #cc3e3f !important;
}

.bg-red-700 {
  background: #992e2f !important;
}

.bg-red-700:hover {
  opacity: 0.85;
}

.text-red-700 {
  color: #992e2f !important;
}

.bg-red-800 {
  background: #661f20 !important;
}

.bg-red-800:hover {
  opacity: 0.85;
}

.text-red-800 {
  color: #661f20 !important;
}

.bg-red-900 {
  background: #330f10 !important;
}

.bg-red-900:hover {
  opacity: 0.85;
}

.text-red-900 {
  color: #330f10 !important;
}

.bg-orange-100 {
  background: #ffe5d0 !important;
}

.bg-orange-100:hover {
  opacity: 0.85;
}

.text-orange-100 {
  color: #ffe5d0 !important;
}

.bg-orange-200 {
  background: #fecba1 !important;
}

.bg-orange-200:hover {
  opacity: 0.85;
}

.text-orange-200 {
  color: #fecba1 !important;
}

.bg-orange-300 {
  background: #feb272 !important;
}

.bg-orange-300:hover {
  opacity: 0.85;
}

.text-orange-300 {
  color: #feb272 !important;
}

.bg-orange-400 {
  background: #fd9843 !important;
}

.bg-orange-400:hover {
  opacity: 0.85;
}

.text-orange-400 {
  color: #fd9843 !important;
}

.bg-orange-500 {
  background: #fd7e14 !important;
}

.bg-orange-500:hover {
  opacity: 0.85;
}

.text-orange-500 {
  color: #fd7e14 !important;
}

.bg-orange-600 {
  background: #ca6510 !important;
}

.bg-orange-600:hover {
  opacity: 0.85;
}

.text-orange-600 {
  color: #ca6510 !important;
}

.bg-orange-700 {
  background: #984c0c !important;
}

.bg-orange-700:hover {
  opacity: 0.85;
}

.text-orange-700 {
  color: #984c0c !important;
}

.bg-orange-800 {
  background: #653208 !important;
}

.bg-orange-800:hover {
  opacity: 0.85;
}

.text-orange-800 {
  color: #653208 !important;
}

.bg-orange-900 {
  background: #331904 !important;
}

.bg-orange-900:hover {
  opacity: 0.85;
}

.text-orange-900 {
  color: #331904 !important;
}

.bg-yellow-100 {
  background: #feefd0 !important;
}

.bg-yellow-100:hover {
  opacity: 0.85;
}

.text-yellow-100 {
  color: #feefd0 !important;
}

.bg-yellow-200 {
  background: #fddea1 !important;
}

.bg-yellow-200:hover {
  opacity: 0.85;
}

.text-yellow-200 {
  color: #fddea1 !important;
}

.bg-yellow-300 {
  background: #fcce72 !important;
}

.bg-yellow-300:hover {
  opacity: 0.85;
}

.text-yellow-300 {
  color: #fcce72 !important;
}

.bg-yellow-400 {
  background: #fbbd43 !important;
}

.bg-yellow-400:hover {
  opacity: 0.85;
}

.text-yellow-400 {
  color: #fbbd43 !important;
}

.bg-yellow-500 {
  background: #faad14 !important;
}

.bg-yellow-500:hover {
  opacity: 0.85;
}

.text-yellow-500 {
  color: #faad14 !important;
}

.bg-yellow-600 {
  background: #c88a10 !important;
}

.bg-yellow-600:hover {
  opacity: 0.85;
}

.text-yellow-600 {
  color: #c88a10 !important;
}

.bg-yellow-700 {
  background: #96680c !important;
}

.bg-yellow-700:hover {
  opacity: 0.85;
}

.text-yellow-700 {
  color: #96680c !important;
}

.bg-yellow-800 {
  background: #644508 !important;
}

.bg-yellow-800:hover {
  opacity: 0.85;
}

.text-yellow-800 {
  color: #644508 !important;
}

.bg-yellow-900 {
  background: #322304 !important;
}

.bg-yellow-900:hover {
  opacity: 0.85;
}

.text-yellow-900 {
  color: #322304 !important;
}

.bg-green-100 {
  background: #dcf3d1 !important;
}

.bg-green-100:hover {
  opacity: 0.85;
}

.text-green-100 {
  color: #dcf3d1 !important;
}

.bg-green-200 {
  background: #bae7a3 !important;
}

.bg-green-200:hover {
  opacity: 0.85;
}

.text-green-200 {
  color: #bae7a3 !important;
}

.bg-green-300 {
  background: #97dc76 !important;
}

.bg-green-300:hover {
  opacity: 0.85;
}

.text-green-300 {
  color: #97dc76 !important;
}

.bg-green-400 {
  background: #75d048 !important;
}

.bg-green-400:hover {
  opacity: 0.85;
}

.text-green-400 {
  color: #75d048 !important;
}

.bg-green-500 {
  background: #52c41a !important;
}

.bg-green-500:hover {
  opacity: 0.85;
}

.text-green-500 {
  color: #52c41a !important;
}

.bg-green-600 {
  background: #429d15 !important;
}

.bg-green-600:hover {
  opacity: 0.85;
}

.text-green-600 {
  color: #429d15 !important;
}

.bg-green-700 {
  background: #317610 !important;
}

.bg-green-700:hover {
  opacity: 0.85;
}

.text-green-700 {
  color: #317610 !important;
}

.bg-green-800 {
  background: #214e0a !important;
}

.bg-green-800:hover {
  opacity: 0.85;
}

.text-green-800 {
  color: #214e0a !important;
}

.bg-green-900 {
  background: #102705 !important;
}

.bg-green-900:hover {
  opacity: 0.85;
}

.text-green-900 {
  color: #102705 !important;
}

.bg-teal-100 {
  background: #d2f4ea !important;
}

.bg-teal-100:hover {
  opacity: 0.85;
}

.text-teal-100 {
  color: #d2f4ea !important;
}

.bg-teal-200 {
  background: #a6e9d5 !important;
}

.bg-teal-200:hover {
  opacity: 0.85;
}

.text-teal-200 {
  color: #a6e9d5 !important;
}

.bg-teal-300 {
  background: #79dfc1 !important;
}

.bg-teal-300:hover {
  opacity: 0.85;
}

.text-teal-300 {
  color: #79dfc1 !important;
}

.bg-teal-400 {
  background: #4dd4ac !important;
}

.bg-teal-400:hover {
  opacity: 0.85;
}

.text-teal-400 {
  color: #4dd4ac !important;
}

.bg-teal-500 {
  background: #20c997 !important;
}

.bg-teal-500:hover {
  opacity: 0.85;
}

.text-teal-500 {
  color: #20c997 !important;
}

.bg-teal-600 {
  background: #1aa179 !important;
}

.bg-teal-600:hover {
  opacity: 0.85;
}

.text-teal-600 {
  color: #1aa179 !important;
}

.bg-teal-700 {
  background: #13795b !important;
}

.bg-teal-700:hover {
  opacity: 0.85;
}

.text-teal-700 {
  color: #13795b !important;
}

.bg-teal-800 {
  background: #0d503c !important;
}

.bg-teal-800:hover {
  opacity: 0.85;
}

.text-teal-800 {
  color: #0d503c !important;
}

.bg-teal-900 {
  background: #06281e !important;
}

.bg-teal-900:hover {
  opacity: 0.85;
}

.text-teal-900 {
  color: #06281e !important;
}

.bg-cyan-100 {
  background: #d0f3f3 !important;
}

.bg-cyan-100:hover {
  opacity: 0.85;
}

.text-cyan-100 {
  color: #d0f3f3 !important;
}

.bg-cyan-200 {
  background: #a1e7e7 !important;
}

.bg-cyan-200:hover {
  opacity: 0.85;
}

.text-cyan-200 {
  color: #a1e7e7 !important;
}

.bg-cyan-300 {
  background: #71dada !important;
}

.bg-cyan-300:hover {
  opacity: 0.85;
}

.text-cyan-300 {
  color: #71dada !important;
}

.bg-cyan-400 {
  background: #42cece !important;
}

.bg-cyan-400:hover {
  opacity: 0.85;
}

.text-cyan-400 {
  color: #42cece !important;
}

.bg-cyan-500 {
  background: #13c2c2 !important;
}

.bg-cyan-500:hover {
  opacity: 0.85;
}

.text-cyan-500 {
  color: #13c2c2 !important;
}

.bg-cyan-600 {
  background: #0f9b9b !important;
}

.bg-cyan-600:hover {
  opacity: 0.85;
}

.text-cyan-600 {
  color: #0f9b9b !important;
}

.bg-cyan-700 {
  background: #0b7474 !important;
}

.bg-cyan-700:hover {
  opacity: 0.85;
}

.text-cyan-700 {
  color: #0b7474 !important;
}

.bg-cyan-800 {
  background: #084e4e !important;
}

.bg-cyan-800:hover {
  opacity: 0.85;
}

.text-cyan-800 {
  color: #084e4e !important;
}

.bg-cyan-900 {
  background: #042727 !important;
}

.bg-cyan-900:hover {
  opacity: 0.85;
}

.text-cyan-900 {
  color: #042727 !important;
}

.bg-gray-100 {
  background: #f8f9fa !important;
}

.bg-gray-100:hover {
  opacity: 0.85;
}

.text-gray-100 {
  color: #f8f9fa !important;
}

.bg-gray-200 {
  background: #e9ecef !important;
}

.bg-gray-200:hover {
  opacity: 0.85;
}

.text-gray-200 {
  color: #e9ecef !important;
}

.bg-gray-300 {
  background: #dee2e6 !important;
}

.bg-gray-300:hover {
  opacity: 0.85;
}

.text-gray-300 {
  color: #dee2e6 !important;
}

.bg-gray-400 {
  background: #ced4da !important;
}

.bg-gray-400:hover {
  opacity: 0.85;
}

.text-gray-400 {
  color: #ced4da !important;
}

.bg-gray-500 {
  background: #adb5bd !important;
}

.bg-gray-500:hover {
  opacity: 0.85;
}

.text-gray-500 {
  color: #adb5bd !important;
}

.bg-gray-600 {
  background: #6c757d !important;
}

.bg-gray-600:hover {
  opacity: 0.85;
}

.text-gray-600 {
  color: #6c757d !important;
}

.bg-gray-700 {
  background: #495057 !important;
}

.bg-gray-700:hover {
  opacity: 0.85;
}

.text-gray-700 {
  color: #495057 !important;
}

.bg-gray-800 {
  background: #343a40 !important;
}

.bg-gray-800:hover {
  opacity: 0.85;
}

.text-gray-800 {
  color: #343a40 !important;
}

.bg-gray-900 {
  background: #212529 !important;
}

.bg-gray-900:hover {
  opacity: 0.85;
}

.text-gray-900 {
  color: #212529 !important;
}

.bg-white-100 {
  background: #ffffff !important;
}

.bg-white-100:hover {
  opacity: 0.85;
}

.text-white-100 {
  color: #ffffff !important;
}

.bg-white-200 {
  background: #f8f8f8 !important;
}

.bg-white-200:hover {
  opacity: 0.85;
}

.text-white-200 {
  color: #f8f8f8 !important;
}

.bg-white-300 {
  background: #f0f0f0 !important;
}

.bg-white-300:hover {
  opacity: 0.85;
}

.text-white-300 {
  color: #f0f0f0 !important;
}

.bg-white-400 {
  background: #e8e8e8 !important;
}

.bg-white-400:hover {
  opacity: 0.85;
}

.text-white-400 {
  color: #e8e8e8 !important;
}

.bg-white-500 {
  background: #e0e0e0 !important;
}

.bg-white-500:hover {
  opacity: 0.85;
}

.text-white-500 {
  color: #e0e0e0 !important;
}

.bg-white-600 {
  background: #d8d8d8 !important;
}

.bg-white-600:hover {
  opacity: 0.85;
}

.text-white-600 {
  color: #d8d8d8 !important;
}

.bg-white-700 {
  background: #d0d0d0 !important;
}

.bg-white-700:hover {
  opacity: 0.85;
}

.text-white-700 {
  color: #d0d0d0 !important;
}

.bg-white-800 {
  background: #c8c8c8 !important;
}

.bg-white-800:hover {
  opacity: 0.85;
}

.text-white-800 {
  color: #c8c8c8 !important;
}

.bg-white-900 {
  background: #c0c0c0 !important;
}

.bg-white-900:hover {
  opacity: 0.85;
}

.text-white-900 {
  color: #c0c0c0 !important;
}

/*====== more bootstrap colors end ======*/

/*====== custom padding & margin admin css starts ======*/
.p-pxl-1 {
  padding: 1px !important;
}

.p-pxl-1_5 {
  padding: 1.5px !important;
}

.p-pxl-2 {
  padding: 2px !important;
}

.p-pxl-2_5 {
  padding: 2.5px !important;
}

.p-pxl-3 {
  padding: 3px !important;
}

.p-pxl-3_5 {
  padding: 3.5px !important;
}

.p-pxl-4 {
  padding: 4px !important;
}

.p-pxl-4_5 {
  padding: 4.5px !important;
}

.p-pxl-x-1 {
  padding-left: 1px !important;
  padding-right: 1px !important;
}

.p-pxl-x-1_5 {
  padding-left: 1.5px !important;
  padding-right: 1.5px !important;
}

.p-pxl-x-2 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.p-pxl-x-2_5 {
  padding-left: 2.5px !important;
  padding-right: 2.5px !important;
}

.p-pxl-x-3 {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.p-pxl-x-3_5 {
  padding-left: 3.5px !important;
  padding-right: 3.5px !important;
}

.p-pxl-x-4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.p-pxl-x-4_5 {
  padding-left: 4.5px !important;
  padding-right: 4.5px !important;
}

.p-pxl-y-1 {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.p-pxl-y-1_5 {
  padding-top: 1.5px !important;
  padding-bottom: 1.5px !important;
}

.p-pxl-y-2 {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.p-pxl-y-2_5 {
  padding-top: 2.5px !important;
  padding-bottom: 2.5px !important;
}

.p-pxl-y-3 {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.p-pxl-y-3_5 {
  padding-top: 3.5px !important;
  padding-bottom: 3.5px !important;
}

.p-pxl-y-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.p-pxl-y-4_5 {
  padding-top: 4.5px !important;
  padding-bottom: 4.5px !important;
}

.p-pxl-t-1 {
  padding-top: 1px !important;
}

.p-pxl-t-1_5 {
  padding-top: 1.5px !important;
}

.p-pxl-t-2 {
  padding-top: 2px !important;
}

.p-pxl-t-2_5 {
  padding-top: 2.5px !important;
}

.p-pxl-t-3 {
  padding-top: 3px !important;
}

.p-pxl-t-3_5 {
  padding-top: 3.5px !important;
}

.p-pxl-t-4 {
  padding-top: 4px !important;
}

.p-pxl-t-4_5 {
  padding-top: 4.5px !important;
}

.p-pxl-b-1 {
  padding-bottom: 1px !important;
}

.p-pxl-b-1_5 {
  padding-bottom: 1.5px !important;
}

.p-pxl-b-2 {
  padding-bottom: 2px !important;
}

.p-pxl-b-2_5 {
  padding-bottom: 2.5px !important;
}

.p-pxl-b-3 {
  padding-bottom: 3px !important;
}

.p-pxl-b-3_5 {
  padding-bottom: 3.5px !important;
}

.p-pxl-b-4 {
  padding-bottom: 4px !important;
}

.p-pxl-b-4_5 {
  padding-bottom: 4.5px !important;
}

.p-pxl-l-1 {
  padding-left: 1px !important;
}

.p-pxl-l-1_5 {
  padding-left: 1.5px !important;
}

.p-pxl-l-2 {
  padding-left: 2px !important;
}

.p-pxl-l-2_5 {
  padding-left: 2.5px !important;
}

.p-pxl-l-3 {
  padding-left: 3px !important;
}

.p-pxl-l-3_5 {
  padding-left: 3.5px !important;
}

.p-pxl-l-4 {
  padding-left: 4px !important;
}

.p-pxl-l-4_5 {
  padding-left: 4.5px !important;
}

.p-pxl-r-1 {
  padding-right: 1px !important;
}

.p-pxl-r-1_5 {
  padding-right: 1.5px !important;
}

.p-pxl-r-2 {
  padding-right: 2px !important;
}

.p-pxl-r-2_5 {
  padding-right: 2.5px !important;
}

.p-pxl-r-3 {
  padding-right: 3px !important;
}

.p-pxl-r-3_5 {
  padding-right: 3.5px !important;
}

.p-pxl-r-4 {
  padding-right: 4px !important;
}

.p-pxl-r-4_5 {
  padding-right: 4.5px !important;
}

.m-pxl-1 {
  margin: 1px !important;
}

.m-pxl-1_5 {
  margin: 1.5px !important;
}

.m-pxl-2 {
  margin: 2px !important;
}

.m-pxl-2_5 {
  margin: 2.5px !important;
}

.m-pxl-3 {
  margin: 3px !important;
}

.m-pxl-3_5 {
  margin: 3.5px !important;
}

.m-pxl-4 {
  margin: 4px !important;
}

.m-pxl-4_5 {
  margin: 4.5px !important;
}

.m-pxl-x-1 {
  margin-left: 1px !important;
  margin-right: 1px !important;
}

.m-pxl-x-1_5 {
  margin-left: 1.5px !important;
  margin-right: 1.5px !important;
}

.m-pxl-x-2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.m-pxl-x-2_5 {
  margin-left: 2.5px !important;
  margin-right: 2.5px !important;
}

.m-pxl-x-3 {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

.m-pxl-x-3_5 {
  margin-left: 3.5px !important;
  margin-right: 3.5px !important;
}

.m-pxl-x-4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.m-pxl-x-4_5 {
  margin-left: 4.5px !important;
  margin-right: 4.5px !important;
}

.m-pxl-y-1 {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
}

.m-pxl-y-1_5 {
  margin-top: 1.5px !important;
  margin-bottom: 1.5px !important;
}

.m-pxl-y-2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.m-pxl-y-2_5 {
  margin-top: 2.5px !important;
  margin-bottom: 2.5px !important;
}

.m-pxl-y-3 {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.m-pxl-y-3_5 {
  margin-top: 3.5px !important;
  margin-bottom: 3.5px !important;
}

.m-pxl-y-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.m-pxl-y-4_5 {
  margin-top: 4.5px !important;
  margin-bottom: 4.5px !important;
}

.m-pxl-t-1 {
  margin-top: 1px !important;
}

.m-pxl-t-1_5 {
  margin-top: 1.5px !important;
}

.m-pxl-t-2 {
  margin-top: 2px !important;
}

.m-pxl-t-2_5 {
  margin-top: 2.5px !important;
}

.m-pxl-t-3 {
  margin-top: 3px !important;
}

.m-pxl-t-3_5 {
  margin-top: 3.5px !important;
}

.m-pxl-t-4 {
  margin-top: 4px !important;
}

.m-pxl-t-4_5 {
  margin-top: 4.5px !important;
}

.m-pxl-b-1 {
  margin-bottom: 1px !important;
}

.m-pxl-b-1_5 {
  margin-bottom: 1.5px !important;
}

.m-pxl-b-2 {
  margin-bottom: 2px !important;
}

.m-pxl-b-2_5 {
  margin-bottom: 2.5px !important;
}

.m-pxl-b-3 {
  margin-bottom: 3px !important;
}

.m-pxl-b-3_5 {
  margin-bottom: 3.5px !important;
}

.m-pxl-b-4 {
  margin-bottom: 4px !important;
}

.m-pxl-b-4_5 {
  margin-bottom: 4.5px !important;
}

.m-pxl-l-1 {
  margin-left: 1px !important;
}

.m-pxl-l-1_5 {
  margin-left: 1.5px !important;
}

.m-pxl-l-2 {
  margin-left: 2px !important;
}

.m-pxl-l-2_5 {
  margin-left: 2.5px !important;
}

.m-pxl-l-3 {
  margin-left: 3px !important;
}

.m-pxl-l-3_5 {
  margin-left: 3.5px !important;
}

.m-pxl-l-4 {
  margin-left: 4px !important;
}

.m-pxl-l-4_5 {
  margin-left: 4.5px !important;
}

.m-pxl-r-1 {
  margin-right: 1px !important;
}

.m-pxl-r-1_5 {
  margin-right: 1.5px !important;
}

.m-pxl-r-2 {
  margin-right: 2px !important;
}

.m-pxl-r-2_5 {
  margin-right: 2.5px !important;
}

.m-pxl-r-3 {
  margin-right: 3px !important;
}

.m-pxl-r-3_5 {
  margin-right: 3.5px !important;
}

.m-pxl-r-4 {
  margin-right: 4px !important;
}

.m-pxl-r-4_5 {
  margin-right: 4.5px !important;
}

/*====== custom padding & margin admin css ends ======*/
/* ===========   SPIN STATES   ===========*/
.cover-spin {
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  position: fixed;
}

.cover-spin.cover-spin-sidebar {
  position: absolute;
}

.cover-spin.cover-spin-sidebar::after {
  left: 25%;
}

.cover-spin.cover-spin-modal {
  height: auto;
  position: absolute;
}

.cover-spin.spin-on {
  display: block;
}

.cover-spin.spin-off {
  display: none;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.cover-spin::after {
  content: "";
  display: block;
  position: absolute;
  left: 47%;
  top: 40%;
  width: 50px;
  height: 50px;
  border-style: solid;
  border-color: black;
  border-top-color: transparent;
  border-width: 4px;
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

/* ===========  END SPIN STATES   ===========*/
/* ===========  INI: SELECT CUSTOM =========== */
select.form-control:focus {
  border: 1px solid var(--bs-primary);
  border-radius: 5px;
  box-shadow: 0 0 10px 2px #8bbeff;
  margin: -1px !important;
}

select.form-control:focus {
  margin: 0px;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ===========  END: SELECT CUSTOM =========== */
/* ========================================== */
/* ===== DataTables Custom Styles =========== */
/* ========================================== */

/* Reducir padding de las celdas de la tabla */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td,
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
  padding: 0.25rem 0.25rem !important;
}

/* Filas seleccionadas */
table.dataTable > tbody > tr.selected > *,
table.table.dataTable > tbody > tr.selected > *,
table.dataTable.stripe > tbody > tr:nth-child(odd).selected > *,
table.dataTable.display > tbody > tr:nth-child(odd).selected > * {
  box-shadow: inset 0 0 0 9999px #c5ffa8db;
  color: #00602c;
  font-weight: 400;
}

/* Filas seleccionadas con hover */
table.dataTable.hover > tbody > tr.selected:hover > *,
table.dataTable.display > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px #fffe008f !important;
  color: #f00;
  font-weight: bolder;
}

/* Columnas ordenadas en filas seleccionadas */
table.dataTable.order-column > tbody tr.selected > .sorting_1,
table.dataTable.order-column > tbody tr.selected > .sorting_2,
table.dataTable.order-column > tbody tr.selected > .sorting_3,
table.dataTable.display > tbody tr.selected > .sorting_1,
table.dataTable.display > tbody tr.selected > .sorting_2,
table.dataTable.display > tbody tr.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px #d2ff54f2;
  color: #1212ff;
}

table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_1 {
  box-shadow: inset 0 0 0 9999px #d2ff54f2;
  color: #1212ff;
}

/* Columnas ordenadas en filas seleccionadas con hover */
table.dataTable.hover > tbody > tr.selected:hover > .sorting_1,
table.dataTable.hover > tbody > tr.selected:hover > .sorting_2,
table.dataTable.hover > tbody > tr.selected:hover > .sorting_3 {
  box-shadow: inset 0 0 0 9999px #fffe008f !important;
  color: #f00;
  font-weight: bolder;
}

.dt-scroll .dt-scroll-body table.table.table-bordered.display.dataTable thead {
  display: none !important;
}

.dt-scroll-body-dynamic-height {
  height: 83.3dvh;
  max-height: 83.3dvh;
}

/* Media query para pantallas pequeñas (16" y celulares) */
@media (max-width: 960px) {
  .dt-scroll-body-dynamic-height {
    height: 78dvh;
    max-height: 78dvh;
  }
}

/* ===========  END DataTables Custom Styles   =========== */
/* ===========  Object appear/disappear animations   =========== */
.sura-anim-fade-in {
  animation: suraFadeIn 220ms ease-out forwards;
}

.sura-anim-fade-out {
  animation: suraFadeOut 180ms ease-in forwards;
}

@keyframes suraFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes suraFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* "shake" rápido o efecto de salida */
.sura-anim-shake {
  animation: suraShake 260ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes suraShake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }

  100% {
    transform: translateX(0);
  }
}

/* "salida rápida" hacia la derecha parecida a salir de pantalla */
.sura-anim-slide-out {
  animation: suraSlideOut 250ms ease-in forwards;
}

@keyframes suraSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(120%);
  }
}

/* ===========  END Object appear/disappear animations   =========== */
/* ===========  LABELS STYLING   =========== */
label {
  color: #000000;
}

body.sura-dark-theme label {
  color: #ffffff;
}

body.sura-dark-theme .sura-nav-link {
  color: #d8d8d8;
}

body.sura-dark-theme [class*="btn-outline-"] {
  /* Estilos comunes para todos los btn-outline-* */
  --bs-btn-bg: var(--sura-veo-gray);
}

/* ===========  END LABELS STYLING   =========== */
/* ===========  TEXT THEME CONTRAST   =========== */
.text-theme-contrast {
  color: #000000 !important;
}

body.sura-dark-theme .text-theme-contrast {
  color: #ffffff !important;
}

/* ===========  END TEXT THEME CONTRAST   =========== */
/* ===========   BUTTONS TOP BARS  ===========*/
.card-body.card-bars {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  background-color: var(--sura-topbar-bg);
  width: 100%;
  height: auto;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
  min-height: auto;
}

.card-body.card-bars.active {
  box-shadow: 0px 0px 0px 5px rgba(158, 222, 253, 0.4);
  -webkit-box-shadow: 0px 0px 0px 5px rgba(158, 222, 253, 0.4);
  -moz-box-shadow: 0px 0px 0px 5px rgba(158, 222, 253, 0.4);
  opacity: 1;
  visibility: visible;
  transition: opacity 1s;
}

.btn-app {
  border-radius: 5px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  color: #6c757d;
  font-size: 15px;
  height: 60px;
  min-width: 95px;
  padding: 10px 0px;
  position: relative;
  text-align: center;
}

.btn-app > .bi,
.btn-app > .fa,
.btn-app > .fab,
.btn-app > .fad,
.btn-app > .fal,
.btn-app > .far,
.btn-app > .fas,
.btn-app > .ion,
.btn-app > .svg-inline--fa {
  display: block;
  font-size: 20px;
}

.btn-app > .svg-inline--fa {
  margin: 0 auto;
}

.btn-app:hover {
  background-color: #f8f9fa;
  border-color: #aaa;
  color: #444;
}

.btn-app:active,
.btn-app:focus {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-app > .badge {
  font-size: 10px;
  font-weight: 400;
  position: absolute;
  right: -10px;
  top: -3px;
}

.btn-app.btn-topbars {
  margin: auto;
  border: 1px solid #3498db;
}

.btn-pipe {
  width: 1px;
  height: 50px;
}

@media (max-width: 960px) {
  .btn-pipe {
    margin: auto;
    border: 1px solid #3498db;
    display: none;
  }
}

.btn-app-active {
  background-color: #60ff60;
}

.btn-app-active:hover {
  background-color: #fcffa3;
}

/* ===========  END BUTTONS BARS =========== */
/* ===========  INI: PATH THINS  ===========*/
.active > .page-link,
.page-link.active {
  z-index: 1;
}
/* ===========  END PATH THINS  ===========*/
/* =========== INI: BUTTON SEPARATOR  ===========*/
.btn-separator {
  display: flex;
  align-items: center;
}

.btn-separator .separator {
  width: 1px;
  height: 24px;
  background-color: white;
  margin: 0 8px;
}
/* =========== END BUTTON SEPARATOR  ===========*/
/* =========== INI: FORM CONTROL  ===========*/
/* overwrite default height of form controls (.form-control from Bootstrap) */
.form-control {
  height: 43.33px;
}
/* =========== END FORM CONTROL  ===========*/
/* =========== INI: CUSTOM CONTAINER  ===========*/
.sub-container {
  min-height: 94dvh;
}

/* =========== END CUSTOM CONTAINER  ===========*/