/* Screens */
/* Phones (default) */
/* Tablets */
/* Desktops */
/* Wide desktops */
:root {
  --header-h: 66px;
  --primary-expanded: 260px;
  --primary-collapsed: 60px;
  --secondary-w: 200px;
  --primary-collapsed-secondary: 320px;
  --accent: #16a34a;
  --muted: #6b7280;
  --bgcard: #f9fafb;
  --card: #fff;
  --border: rgba(0, 0, 0, 0.1);
  --dash-ease: cubic-bezier(0.25, 1.25, 0.4, 1);
}
/* =========================================
   LAYOUT.CSS - Header, Sidebar, Dashboard, Main, Footer
   ========================================= */
/* ---------- NEW HEADER / NAVBAR / SIDEBAR / MAIN ---------- */
/* ---------- NEW HEADER ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  z-index: 1001;
}
.header .left {
  padding-left: 20px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  z-index: 10;
  line-height: 1;
  transform: translateX(102px);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.header.notification-open .left {
  transform: translateX(36px);
}
.header .left.no-transition,
#mainArea.no-transition {
  transition: none !important;
}
.header .left .breadcrumbs {
  padding-left: 0;
  line-height: 1.4;
}
.header .left .mobile-menu {
  display: none;
}
.header .left .mobile-menu .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.logo {
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.logo img {
  width: 170px;
  height: auto;
}
.header .center {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.header .right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.header.less-padding {
  padding: 0 12px;
}
body.createserver .header .left {
  transform: translateX(20px);
}
/* ---------- NEW TOP NAVBAR ---------- */
.top-nav {
  display: flex;
  gap: 1.5rem;
  height: auto !important;
  background-color: transparent;
  align-items: center;
  padding-right: 16px;
}
.top-nav .top-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-nav .top-nav-item a {
  height: 24px;
}
.top-nav .top-nav-item .top-nav-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.top-nav .top-nav-item .top-nav-icon:hover {
  transform: scale(1);
}
.top-nav .top-nav-item .top-nav-icon-org {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.top-nav .top-nav-item .nav-tooltip {
  position: absolute;
  bottom: -38px;
  /* distance below the icon */
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 1002;
  opacity: 0;
  transform: translateY(10px) scale(1);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.top-nav .top-nav-item .ai-field {
  background-color: transparent;
  background-image: url("/application/themes/webdock/img/dash/search-outline.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 20px;
  border: 1px solid var(--icon-color);
  padding-left: 35px;
  height: 32px;
  border-radius: 8px;
  width: 160px;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
}
.top-nav .top-nav-item .ai-field:focus {
  outline: none;
  border: 1px solid var(--icon-color);
  box-shadow: none;
}
.top-nav .top-nav-item .ai-field::placeholder {
  color: var(--icon-color);
}
.top-nav .top-nav-item.ai {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.top-nav .top-nav-item.ai .icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.top-nav .top-nav-item.ai .icon-ai {
  opacity: 0;
  transform: translateX(-20px) rotate(0deg);
  animation: iconIn 0.8s ease-out forwards;
}
.top-nav .top-nav-item.ai .ai-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--icon-color);
  opacity: 0;
  transform: translateX(-12px);
  animation: textIn 0.6s ease-out forwards;
  animation-delay: 0.3s;
}
.top-nav .top-nav-item.ai:hover .icon {
  background-color: var(--black);
}
.top-nav .top-nav-item.cart-item a {
  position: relative;
}
.top-nav .top-nav-item.cart-item a .green-dot {
  position: absolute;
  bottom: 0;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--neon-green);
  border: 2px solid var(--bg);
}
.top-nav .top-nav-item-notification {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-nav .top-nav-item-notification a {
  position: relative;
  height: 24px;
}
.top-nav .top-nav-item-notification a .green-dot {
  position: absolute;
  top: 2px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--neon-green);
  border: 2px solid var(--bg);
}
.top-nav .top-nav-item-notification .top-nav-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.top-nav .top-nav-item-notification .top-nav-icon:hover {
  transform: scale(1);
}
.top-nav .top-nav-item-notification .top-nav-icon-org {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.top-nav .top-nav-item-notification .nav-tooltip {
  position: absolute;
  bottom: -38px;
  /* distance below the icon */
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px) scale(1);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.top-nav .top-nav-divider {
  width: 1px;
  height: 16px;
  background: rgba(0, 0, 0, 0.15);
}
.top-nav .create-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  border: 1px solid #01FF48;
  background: #01FF48;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 4px;
  height: auto;
}
.top-nav .create-btn img {
  width: 10px;
  height: auto;
}
.top-nav .top-nav-item.refer a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.top-nav .top-nav-item.refer a .refer-text {
  line-height: 1;
  font-size: 11px;
  font-weight: 500;
  color: var(--icon-color);
}
@keyframes iconIn {
  0% {
    opacity: 0;
    transform: translateX(-20px) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(720deg);
  }
}
@keyframes textIn {
  0% {
    opacity: 0;
    transform: translateX(-12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.top-nav-item:hover a .top-nav-icon-org,
.top-nav-item-notification:hover a .top-nav-icon-org {
  background-color: var(--black);
}
.top-nav-item:hover .nav-tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.top-nav-item-notification:hover .nav-tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.top-nav-item.tooltip-disabled .nav-tooltip,
.top-nav-item-notification.tooltip-disabled .nav-tooltip {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
.account-item.tooltip-disabled .nav-tooltip,
.cart-item.tooltip-disabled .nav-tooltip {
  opacity: 0 !important;
  transform: translateY(10px) scale(1) !important;
  pointer-events: none !important;
}
.top-nav-item.account-item.is-current .top-nav-icon-org {
  background-color: var(--black);
}
/* ---------- NAVBAR PUBLIC ---------- */
.header_sec.fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 997 !important;
  background: #022213;
  padding: 0 50px;
}
.navbar-public {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.nav_top .navbar-brand img {
  max-width: 100%;
  height: 34px;
}
.login-bt {
  padding: 10px 40px;
  border: 2px solid var(--white);
  font-weight: 700 !important;
  border-radius: 4px;
  font-size: 16px;
  color: var(--white) !important;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}
.login-bt:hover {
  color: var(--black) !important;
  background-color: var(--neon-green);
}
.nav_top {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  min-height: auto;
  box-shadow: none;
  border-radius: 0;
  height: 68px;
}
.container-fluid {
  max-width: 1360px;
  width: auto;
  margin-right: auto;
  margin-left: auto;
}
/* ---------- NAVBAR SUBMENUS ---------- */
.account-item {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 34px;
  /* adjust for your navbar height */
  right: 0;
  background: var(--card-bg);
  padding: 0;
  width: max-content;
  max-width: 400px;
  /* optional safety */
  white-space: nowrap;
  border-radius: 10px;
  box-shadow: var(--big-shadow);
  flex-direction: column;
  opacity: 0;
  transform: translateY(25px);
  /* start slightly below */
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dropdown-menu.open {
  opacity: 1;
  transform: translateY(0);
  /* slide to final position */
  pointer-events: auto;
}
.dropdown-menu.closing {
  opacity: 0;
  transform: translateY(15px);
  /* slide down */
  pointer-events: none;
}
.dropdown-menu .no-link {
  color: var(--black);
  padding: 12px 16px;
  font-size: 0.875rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  gap: 1px;
  border-bottom: 1px solid var(--menu-border);
  height: auto;
}
.dropdown-menu .no-link .name {
  font-size: 14px;
  font-weight: 600;
}
.dropdown-menu .no-link .email {
  font-size: 13px;
  font-weight: 400;
}
.dropdown-menu a.dropdown-menuitem {
  background: linear-gradient(var(--bg), var(--bg)) right bottom / 100% 0 no-repeat;
  color: #000;
  padding: 16px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid var(--menu-border);
  height: auto;
}
.dropdown-menu a.dropdown-menuitem .dropdown-menuitem-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.dropdown-menu a.dropdown-menuitem .dropdown-menu-item-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}
.dropdown-menu a.dropdown-menuitem .dropdown-menu-item-content .title {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
}
.dropdown-menu a.dropdown-menuitem .dropdown-menu-item-content .subtitle {
  font-size: 12px;
  color: var(--sub-menu-color);
}
.dropdown-menuitem-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.dropdown-menu a.dropdown-menuitem.is-current {
  background-color: var(--bg);
}
.dropdown-menu a.dropdown-menuitem.is-current .dropdown-menuitem-icon {
  background-color: var(--black);
}
.dropdown-menu a.dropdown-menuitem.logout {
  border: none;
}
.dropdown-menu a.dropdown-menuitem:hover {
  background-size: 100% 100%;
}
.dropdown-menu a.dropdown-menuitem:hover .dropdown-menuitem-icon {
  background-color: var(--black);
}
.dropdown-menu a.dropdown-menuitem.logout:hover {
  background: none !important;
}
.account-card-profile-image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
/* ---------- NOTIFICATION CENTER ---------- */
.notification-draw {
  position: fixed;
  top: 56px;
  /* adjust for your navbar height */
  right: 0;
  background: var(--card-bg);
  padding: 0;
  width: 420px;
  height: 100vh;
  white-space: nowrap;
  border-radius: 10px 0px 0px 0px;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
  flex-direction: column;
  opacity: 0;
  transform: translateX(100%);
  /* start off-screen right */
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.25, 0.9, 0.25, 1), opacity 0.35s cubic-bezier(0.25, 1.25, 0.5, 1);
  z-index: 1000;
}
.notification-draw.open {
  transform: translateX(0);
  /* slide in */
  opacity: 1;
  pointer-events: auto;
  /* enable interaction */
}
.notification-draw.closing {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
.notification-close {
  position: absolute;
  right: 6px;
  top: 3px;
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.notification-close .close-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: var(--black);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.notification-content {
  padding: 0;
  height: 100%;
  overflow: hidden;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 70px;
}
.notification-content h3 {
  font-size: 16px;
  font-weight: 600;
  padding: 16px;
  line-height: 1;
  margin: 0;
}
/* ---------- APP ---------- */
.app {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 66px;
  overflow-x: hidden;
  overflow-y: hidden;
}
/* ---------- DASHBOARD ---------- */
.dashboard {
  display: flex;
  flex: 1;
  height: calc(36vh);
  /* Fill remaining viewport below header */
  margin-top: 64px;
  overflow: hidden;
  /* prevent double scrollbars */
}
/* ---------- PRIMARY SIDEBAR ---------- */
/* Only when hover expansion is allowed */
#primarySidebar.hover-expand-enabled:hover {
  /* purely visual hint, JS does the real work */
}
.sidebar.primary {
  position: fixed;
  top: 66px;
  left: 0;
  bottom: 0;
  width: 260px;
  height: 100vh;
  transition: width 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  display: flex;
  flex-direction: column;
  padding: 0 0 64px 0;
  z-index: 1002;
  overflow: hidden;
}
.sidebar.primary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--divider-color) 0px, var(--divider-color) 100%);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.4s ease, background-position 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.sidebar.primary.collapsed {
  width: 60px;
  overflow: visible;
}
.sidebar.primary.border-anim::after {
  transform: scaleY(1);
  opacity: 1;
}
.sidebar.primary.border-anim.secondary-visible::after {
  transform: scaleY(1);
  opacity: 1;
}
.sidebar.primary.collapsed::after {
  background: linear-gradient(to bottom, transparent 20px, var(--divider-color) 20px, var(--divider-color) 100%);
}
.sidebar.primary.collapsed.secondary-visible::after {
  background: linear-gradient(to bottom, transparent 20px, var(--divider-color) 20px, var(--divider-color) 100%);
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.sidebar .brand .logo-small {
  font-weight: 700;
  color: var(--accent);
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  align-items: center;
}
.primary-nav {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  height: auto;
}
.primary-item-container {
  padding-left: 16px;
}
.primary-item {
  margin: 0 0 4px 16px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 8px 12px;
  color: var(--icon-color);
  text-decoration: none;
  background: linear-gradient(var(--card-bg), var(--card-bg)) right bottom / 100% 0 no-repeat;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.primary-item-help {
  background-color: var(--card-bg);
}
/*.primary-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #01FF48;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}*/
.primary-item-with-submenu::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  height: 24px;
  width: 24px;
  opacity: 1;
  /* default */
  transform: translateY(-50%);
  background-image: var(--submenu-arrow);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity .25s ease;
}
.sidebar-expanded .primary-item-with-submenu::before {
  opacity: 1;
}
.sidebar.collapsed .primary-item-with-submenu::before {
  display: none !important;
}
.primary-item-with-submenu.active .icon-bg {
  background-color: #01FF48;
}
.primary-item-with-submenu.active .icon-bg .icon {
  background-color: var(--icon-active-color);
}
/*.primary-item:hover::after,
.primary-item.active::after {
  transform: scaleY(1);
}*/
.sidebar.collapsed .bottom-icons .primary-item:hover .icon-bg .icon {
  background: #000;
}
.primary-item .icon {
  width: 24px;
  height: 24px;
}
.primary-item.minimize-sidebar .icon {
  width: 16px;
  height: 16px;
  margin: 0 !important;
}
.primary-item .label {
  line-height: 1;
  opacity: 1;
  white-space: nowrap;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.primary-item .label-below {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--icon-color);
  text-align: center;
  line-height: 1.2;
  padding-top: 4px;
}
.primary-item:hover {
  background-size: 100% 100%;
}
.primary-item:hover .icon-bg .icon {
  background-color: var(--black);
}
.primary-item .icon-bg {
  display: flex;
  background-color: var(--card-bg);
  border-radius: 10px;
  padding: 8px;
}
.primary-item .icon-bg .icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.primary-item-help .icon-bg {
  background-color: #01FF48;
}
.primary-item-help .icon-bg .icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: #000;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.primary-item-help:hover .icon-bg .icon {
  background-color: #000;
}
.primary-item.is-current {
  background: var(--card-bg);
  font-weight: 700;
  color: var(--black);
}
.primary-item.is-current .icon-bg {
  background-color: #01FF48;
}
.primary-item.is-current .icon-bg .icon {
  background-color: var(--icon-active-color);
}
.primary-item .help-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-left: 47px;
  margin-top: -26px;
}
.primary-item .help-label {
  padding-top: 3px;
}
.sidebar.primary.collapsed .bottom-icons .primary-item .help-text {
  display: none;
}
.primary-item .help-text {
  font-size: 12px;
  font-weight: 400;
}
.primary-item .help-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary-link-text);
}
.minimize-divider {
  margin: 0 0 8px 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, var(--divider-color-transparent) 0%, var(--divider-color) 40%, var(--divider-color) 60%, var(--divider-color-transparent) 100%);
}
.minimize-divider.secondary-open {
  width: calc(var(--primary-collapsed) + var(--secondary-w));
}
.primary-nav .divider.menus {
  margin: 6px 0 12px 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, var(--divider-color-transparent) 0%, var(--divider-color) 40%, var(--divider-color) 60%, var(--divider-color-transparent) 100%);
}
.minimize-sidebar .icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.coupons-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.icon-home {
  mask-image: url("/application/themes/webdock/img/dash/home-new.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/home-new.svg");
}
.icon-vps-servers {
  mask-image: url("/application/themes/webdock/img/dash/vps-servers.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/vps-servers.svg");
}
.icon-load-balancer {
  mask-image: url("/application/themes/webdock/img/dash/load-balancer.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/load-balancer.svg");
}
.icon-waf {
  mask-image: url("/application/themes/webdock/img/dash/waf.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/waf.svg");
}
.icon-events {
  mask-image: url("/application/themes/webdock/img/dash/events.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/events.svg");
}
.icon-team {
  mask-image: url("/application/themes/webdock/img/dash/team.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/team.svg");
}
.icon-scripts {
  mask-image: url("/application/themes/webdock/img/dash/scripts.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/scripts.svg");
}
.icon-monitoring {
  mask-image: url("/application/themes/webdock/img/dash/monitoring.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/monitoring.svg");
}
.icon-help-center {
  mask-image: url("/application/themes/webdock/img/dash/help-center.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/help-center.svg");
}
.icon-refer {
  mask-image: url("/application/themes/webdock/img/dash/refer-outline.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/refer-outline.svg");
}
.icon-refer-mobile {
  mask-image: url("/application/themes/webdock/img/dash/refer.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/refer.svg");
}
.icon-notification {
  mask-image: url("/application/themes/webdock/img/dash/notification-outline.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/notification-outline.svg");
}
.icon-account {
  mask-image: url("/application/themes/webdock/img/dash/account-outline.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/account-outline.svg");
}
.icon-account-mobile {
  mask-image: url("/application/themes/webdock/img/dash/account.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/account.svg");
}
.icon-cart {
  mask-image: url("/application/themes/webdock/img/dash/cart-outline.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/cart-outline.svg");
}
.icon-billing {
  mask-image: url("/application/themes/webdock/img/dash/billing.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/billing.svg");
}
.icon-authentication {
  mask-image: url("/application/themes/webdock/img/dash/authentication.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/authentication.svg");
}
.icon-abuse {
  mask-image: url("/application/themes/webdock/img/dash/abuse-outline.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/abuse-outline.svg");
}
.icon-abuse-mobile {
  mask-image: url("/application/themes/webdock/img/dash/abuse.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/abuse.svg");
}
.icon-dark-mode {
  mask-image: url("/application/themes/webdock/img/dash/dark-mode.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/dark-mode.svg");
}
.icon-light-mode {
  mask-image: url("/application/themes/webdock/img/dash/light-mode.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/light-mode.svg");
}
.icon-logout {
  mask-image: url("/application/themes/webdock/img/dash/logout.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/logout.svg");
}
.icon-minimize {
  mask-image: url("/application/themes/webdock/img/dash/minimize-outline.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/minimize-outline.svg");
}
.icon-system-status {
  --mask-icon: url("/application/themes/webdock/img/hwicons2023/check-square.svg");
}
.icon-contact-support {
  mask-image: url("/application/themes/webdock/img/hwicons2023/contact-support.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/contact-support.svg");
}
.icon-ai-chat {
  mask-image: url("/application/themes/webdock/img/hwicons2023/ai-chat.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/ai-chat.svg");
}
.icon-wallet {
  mask-image: url("/application/themes/webdock/img/hwicons2023/wallet.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/wallet.svg");
}
.icon-invoice {
  mask-image: url("/application/themes/webdock/img/hwicons2023/invoice.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/invoice.svg");
}
.icon-roadmap {
  mask-image: url("/application/themes/webdock/img/hwicons2023/roadmap.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/roadmap.svg");
}
.icon-feature-request {
  mask-image: url("/application/themes/webdock/img/hwicons2023/feature-request.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/feature-request.svg");
}
.icon-api {
  mask-image: url("/application/themes/webdock/img/hwicons2023/api.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/api.svg");
}
.icon-docs {
  mask-image: url("/application/themes/webdock/img/hwicons2023/docs.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/docs.svg");
}
.icon-mobile {
  mask-image: url("/application/themes/webdock/img/dash/mobile-menu.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/mobile-menu.svg");
}
.icon-not-found {
  mask-image: url("/application/themes/webdock/img/hwicons2023/not-found.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/not-found.svg");
}
.icon-coupon-tag {
  mask-image: url("/application/themes/webdock/img/hwicons2023/coupon-tag.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/coupon-tag.svg");
}
.icon-thumbs-up {
  mask-image: url("/application/themes/webdock/img/hwicons2023/thumbs-up.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/thumbs-up.svg");
}
.icon-arrow {
  mask-image: url("/application/themes/webdock/img/hwicons2023/arrow.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/arrow.svg");
}
.icon-arrow-chevron {
  mask-image: url("/application/themes/webdock/img/hwicons2023/arrow-chevron.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/arrow-chevron.svg");
}
.icon-terms {
  mask-image: url("/application/themes/webdock/img/hwicons2023/terms.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/terms.svg");
}
.icon-gdpr {
  mask-image: url("/application/themes/webdock/img/hwicons2023/gdpr.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/gdpr.svg");
}
.icon-data-protection {
  mask-image: url("/application/themes/webdock/img/hwicons2023/data-protection.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/data-protection.svg");
}
.icon-error {
  mask-image: url("/application/themes/webdock/img/hwicons2023/toast-error.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/toast-error.svg");
}
.icon-info {
  mask-image: url("/application/themes/webdock/img/hwicons2023/toast-info.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/toast-info.svg");
}
.icon-success {
  mask-image: url("/application/themes/webdock/img/hwicons2023/toast-success.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/toast-success.svg");
}
.icon-warning {
  mask-image: url("/application/themes/webdock/img/hwicons2023/toast-info.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/toast-info.svg");
}
.icon-password {
  mask-image: url("/application/themes/webdock/img/hwicons2023/password.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/password.svg");
}
.icon-add-circle {
  mask-image: url("/application/themes/webdock/img/hwicons2023/add-circle.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/add-circle.svg");
}
.icon-api-hooks {
  mask-image: url("/application/themes/webdock/img/hwicons2023/api-hooks.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/api-hooks.svg");
}
.icon-search {
  mask-image: url("/application/themes/webdock/img/hwicons2023/search.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/search.svg");
}
.icon-close {
  mask-image: url("/application/themes/webdock/img/hwicons2023/close.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/close.svg");
}
.icon-server-activity {
  mask-image: url("/application/themes/webdock/img/hwicons2023/server-activity.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/server-activity.svg");
}
.icon-upgrade-downgrade {
  mask-image: url("/application/themes/webdock/img/hwicons2023/upgrade-downgrade.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/upgrade-downgrade.svg");
}
.icon-snapshots {
  mask-image: url("/application/themes/webdock/img/hwicons2023/snapshots.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/snapshots.svg");
}
.icon-cron-jobs {
  mask-image: url("/application/themes/webdock/img/hwicons2023/cron-jobs.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/cron-jobs.svg");
}
.icon-server-scripts {
  mask-image: url("/application/themes/webdock/img/hwicons2023/server-scripts.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/server-scripts.svg");
}
.icon-shell-user {
  mask-image: url("/application/themes/webdock/img/hwicons2023/shell-user.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/shell-user.svg");
}
.icon-manage-php {
  mask-image: url("/application/themes/webdock/img/hwicons2023/manage-php.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/manage-php.svg");
}
.icon-databases {
  mask-image: url("/application/themes/webdock/img/hwicons2023/databases.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/databases.svg");
}
.icon-manage-ftp {
  mask-image: url("/application/themes/webdock/img/hwicons2023/manage-ftp.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/manage-ftp.svg");
}
.icon-file-manager {
  mask-image: url("/application/themes/webdock/img/hwicons2023/file-manager.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/file-manager.svg");
}
.icon-server-identity {
  mask-image: url("/application/themes/webdock/img/hwicons2023/server-identity.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/server-identity.svg");
}
.icon-ssl-certificate {
  mask-image: url("/application/themes/webdock/img/hwicons2023/ssl-certificate.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/ssl-certificate.svg");
}
.icon-manage-addons {
  mask-image: url("/application/themes/webdock/img/hwicons2023/manage-addons.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/manage-addons.svg");
}
.icon-manage-email {
  mask-image: url("/application/themes/webdock/img/hwicons2023/manage-email.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/manage-email.svg");
}
.icon-manage-wordpress {
  mask-image: url("/application/themes/webdock/img/hwicons2023/manage-wordpress.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/manage-wordpress.svg");
}
.icon-manage-botguard {
  mask-image: url("/application/themes/webdock/img/hwicons2023/manage-botguard.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/manage-botguard.svg");
}
.icon-status-down {
  mask-image: url("/application/themes/webdock/img/hwicons2023/status-down.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/status-down.svg");
}
.icon-status-issues {
  mask-image: url("/application/themes/webdock/img/hwicons2023/status-issues.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/status-issues.svg");
}
.icon-status-maintenance {
  mask-image: url("/application/themes/webdock/img/hwicons2023/status-maintenance.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/status-maintenance.svg");
}
.icon-status-up {
  mask-image: url("/application/themes/webdock/img/hwicons2023/status-up.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/status-up.svg");
}
.icon-info-view {
  mask-image: url("/application/themes/webdock/img/hwicons2023/info.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/info.svg");
}
.icon-resource-view {
  mask-image: url("/application/themes/webdock/img/hwicons2023/resource.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/resource.svg");
}
.icon-metadata-view {
  mask-image: url("/application/themes/webdock/img/hwicons2023/metadata.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/metadata.svg");
}
.icon-archive-view {
  mask-image: url("/application/themes/webdock/img/hwicons2023/archive.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/archive.svg");
}
.icon-ai {
  mask-image: url("/application/themes/webdock/img/dash/ai.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/ai.svg");
}
.icon-refer-bold {
  mask-image: url("/application/themes/webdock/img/hwicons2023/refer.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/refer.svg");
}
.icon-my-earnings {
  mask-image: url("/application/themes/webdock/img/hwicons2023/my-earnings.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/my-earnings.svg");
}
.icon-affiliate {
  mask-image: url("/application/themes/webdock/img/hwicons2023/affiliate.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/affiliate.svg");
}
.icon-link {
  mask-image: url("/application/themes/webdock/img/hwicons2023/link.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/hwicons2023/link.svg");
}
.icon-integrations {
  mask-image: url("/application/themes/webdock/img/dash/integrations.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/integrations.svg");
}
/* Quick bottom icons area */
.sidebar .spacer {
  flex: 1;
}
.sidebar .bottom-icons {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}
.sidebar .bottom-icons .sidebar-spacer {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0 16px;
}
.minimize-sidebar {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  height: 60px;
  padding: 0 1rem;
  margin: 0 0 0 6px;
  color: #000;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: default;
  pointer-events: auto;
  font-size: 13px;
  font-weight: 400;
  width: 100%;
}
.minimize-sidebar[href] {
  pointer-events: none;
  /* prevent unwanted navigation */
}
.minimize-sidebar.secondary-open {
  width: calc(var(--primary-collapsed) + var(--secondary-w));
}
.minimize-sidebar::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 0px;
  background: transparent;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.minimize-sidebar:hover::after,
.minimize-sidebar.active::after {
  transform: none;
}
.minimize-sidebar .icon {
  width: 16px;
  height: 16px;
}
.minimize-sidebar .label {
  position: absolute;
  bottom: -16px;
  /* distance below the icon */
  right: 10%;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 1002;
  opacity: 0;
  transform: translateY(10px) scale(1);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.minimize-sidebar .label.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  visibility: visible !important;
}
.sidebar-logo {
  height: 29px !important;
  /* adjust to your real logo height */
  transition: transform 0.28s cubic-bezier(0.25, 1.25, 0.4, 1), opacity 0.2s ease;
  transform-origin: left center;
}
.sidebar-logo.is-animating {
  pointer-events: none;
  /* avoid double clicks during animation */
}
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-logo-icon {
  height: 29px;
  width: auto;
}
.sidebar-logo-text {
  height: 20px;
  width: auto;
  transition: opacity .22s ease, transform .22s ease;
  transform-origin: left center;
}
.sidebar-logo-text.hidden {
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}
/* ---------- SECONDARY SIDEBAR ---------- */
.secondary-item,
.quick-actions h4 {
  opacity: 0;
  transform: translateX(-10px) scale(0.8);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  font-size: 15px;
}
body.servers .upgrade-server-link {
  display: none;
}
.sidebar.secondary {
  position: fixed;
  top: 0;
  left: 200px;
  bottom: 0;
  width: 200px;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  z-index: 1001;
  overflow-y: auto;
  display: none;
  transition: transform 0.35s cubic-bezier(0.25, 0.9, 0.25, 1), opacity 0.25s ease, left 0.35s cubic-bezier(0.25, 0.9, 0.25, 1);
  will-change: opacity, transform;
}
.sidebar.secondary.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
  top: 64px !important;
}
.sidebar.secondary.hidden {
  display: none !important;
}
.sidebar.secondary h3 {
  margin: 0 0 .75rem 0;
  font-size: 0.95rem;
  color: #111827;
}
.secondary-nav {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  height: auto;
  padding: 20px 0 6px 8px;
}
.secondary-nav .secondary-item,
.quick-actions .secondary-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 4px 4px;
  padding: 6px 10px;
  color: var(--icon-color);
  text-decoration: none;
  background: linear-gradient(var(--secondary-menu-bg), var(--secondary-menu-bg)) right bottom / 100% 0 no-repeat;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.secondary-nav .secondary-item:hover,
.quick-actions .secondary-item:hover {
  background-size: 100% 100%;
}
.secondary-nav .secondary-item.active {
  background: var(--secondary-menu-bg);
  font-weight: 700;
}
.secondary .quick-actions {
  margin-top: 2rem;
  font-size: 0.9rem;
  padding: 16px 16px 6px 12px;
}
.secondary .quick-actions h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
}
.secondary-item.is-current {
  background: var(--secondary-menu-bg);
  font-weight: 700;
}
.sidebar.secondary.is-ready .secondary-item,
.sidebar.secondary.is-ready h4 {
  opacity: 1;
  transform: translateX(0) scale(1);
}
/* ---------- NEW MAIN CONTENT ---------- */
body.login .main {
  visibility: visible;
}
.main {
  margin-left: 260px;
  /* default primary expanded */
  margin-right: 0;
  /* adjusted via JS for notification drawer */
  flex: 1 1 auto;
  min-width: 0;
  /* allow overflowing content inside to scroll */
  display: flex;
  flex-direction: column;
  height: auto;
  transition: margin-left 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), margin-right 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  min-height: 0;
  visibility: hidden;
}
/* content inner area scrolls */
.main .content-main {
  flex: 1;
  /* <— makes it fill remaining space inside .main */
  overflow-y: auto;
  /* <— enables scrolling only in the content area */
  padding: 10px 40px 40px 40px;
  scrollbar-gutter: stable both-edges;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
}
/* ---------- COLLAPSED PRIMARY (icons only) ---------- */
.primary.collapsed {
  width: 60px !important;
}
.sidebar.primary.collapsed .primary-item:hover {
  background: none;
}
.sidebar.primary.collapsed .primary-item .label {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: calc(112%);
  /* ← Position to the right of the icon */
  transform: translateY(-50%) translateX(-6px) scale(1);
  background: rgba(0, 0, 0, 0.85);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .75rem;
  white-space: nowrap;
  color: #fff;
  transition: none;
  z-index: 2000;
  line-height: normal;
  font-weight: 500;
}
.sidebar.primary.collapsed .primary-item:hover .label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) scale(1);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.25s ease;
}
.sidebar.primary.collapsed .minimize-sidebar {
  margin: 0 0 0 6px;
}
.sidebar.primary.collapsed .minimize-sidebar .label {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  bottom: auto;
  right: auto;
  top: 50%;
  left: calc(112%);
  /* ← Position to the right of the icon */
  transform: translateY(-50%) translateX(-6px) scale(1);
  background: rgba(0, 0, 0, 0.85);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: .75rem;
  white-space: nowrap;
  color: #fff;
  transition: none;
  z-index: 2000;
  line-height: normal;
  font-weight: 500;
}
.sidebar.primary.collapsed .minimize-sidebar:hover .label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) scale(1);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.25s ease;
}
.sidebar.primary.collapsed .primary-item {
  justify-content: space-between;
  gap: 0;
  overflow: visible;
  background: none;
  margin-left: 0;
  padding: 8px 12px;
}
.sidebar.primary.collapsed nav.primary-nav > a.primary-item:nth-of-type(2) {
  padding-top: 8px !important;
}
.sidebar.primary.collapsed .primary-item .icon {
  margin: 0 auto;
}
.sidebar.primary.collapsed .primary-item-help .icon-bg {
  background-color: var(--card-bg);
}
.sidebar.primary.collapsed .primary-item-help .icon-bg .icon {
  background-color: var(--icon-color);
}
.sidebar.secondary.visible {
  /*transform: translateX(var(--primary-collapsed));*/
}
.sidebar.primary.expanded ~ .sidebar.secondary.visible {
  /*transform: translateX(var(--primary-expanded));*/
}
/* When primary is collapsed AND secondary visible: position secondary at collapsed offset, and main margin adjusts */
/*
  .secondary.visible + .main,
  .main.secondary-visible {
    margin-left: calc(60px + 260px);
  }
    */
.sidebar.primary.collapsed + .sidebar.secondary.visible {
  left: 60px;
}
/* If secondary hidden but primary expanded, main should use just primary width */
.main.only-primary {
  margin-left: 260px;
}
/* If only collapsed primary visible and no secondary, main uses collapsed width */
.main.only-collapsed {
  margin-left: 60px;
}
.main,
.header-left {
  transition: transform 0.35s var(--dash-ease);
  will-change: transform;
}
.main.only-primary,
.main.only-collapsed {
  margin-left: 0;
  /* let JS handle it */
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
}
/* allows overshoot pop without jitter */
.main.animating,
.header-left.animating {
  transition: transform 0.45s var(--dash-ease);
}
/* small niceties */
.card {
  background: var(--card);
  border-radius: var(--border-radius);
}
/* LOGIN - HIDDENS */
body.login .app {
  margin-top: 0;
}
body.login .main.only-primary {
  /*margin-left: 0;*/
}
body.login .main.only-primary .content-main {
  padding: 0;
}
/* PROVISIONING */
body.createserver-provisioning {
  background-color: var(--bg);
}
body.createserver-provisioning header {
  padding-left: 10px;
}
body.createserver-provisioning header .right {
  display: flex;
}
body.login .app .sidebar.primary {
  display: none;
}
body.createserver-provisioning .app .sidebar.primary {
  background-color: var(--bg);
  display: flex;
}
body.createserver-provisioning .app .sidebar.secondary {
  background-color: var(--bg);
  display: flex;
}
body.createserver-provisioning .app .sidebar.primary .primary-nav .minimize-divider {
  display: none;
}
body.createserver-provisioning .app .sidebar.primary .primary-nav .primary-item .label-below {
  display: none;
}
body.createserver-provisioning .app .main {
  margin-left: 60px;
  height: 100vh;
}
body.createserver-provisioning .app .sidebar.secondary {
  display: none;
}
body.createserver-provisioning .app .main .content-main {
  padding-left: 0;
}
body.createserver-provisioning .server-provisioning-card {
  transition: transform 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
body.createserver-provisioning.primary-hover-expanded .server-provisioning-card {
  transform: translateX(200px);
  /* difference between collapsed & expanded */
}
.provisioning-video {
  position: absolute;
  bottom: 16px;
  left: 0px;
  padding: 0 16px !important;
  margin-bottom: 0;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1279px) {
  #primarySidebar .minimize-sidebar .label {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .primary-item.minimize-sidebar {
    flex-direction: row;
  }
  .primary-item .label-below {
    display: none;
  }
  .sidebar.secondary {
    display: none;
  }
  .sidebar.secondary.visible {
    display: none;
  }
  .header .left {
    transform: translateX(20px);
  }
}
@media (max-width: 992px) {
  .header .left {
    transform: translateX(0) !important;
    padding-left: 8px;
  }
  .header .left .mobile-menu {
    display: block;
    max-height: 24px;
  }
  .top-nav {
    padding-right: 8px;
  }
  .sidebar.primary {
    display: none;
    width: 0;
  }
  .sidebar.primary.mobile-open {
    transform: translateX(0);
  }
  .sidebar.secondary {
    display: none !important;
  }
  .main.only-primary,
  .main.only-collapsed {
    margin-left: 0 !important;
  }
  .main .content-main {
    padding: 10px 20px 60px 20px;
  }
  .primary-item-mobile {
    margin: 0;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 8px 12px;
    color: var(--icon-color);
    text-decoration: none;
    background: linear-gradient(var(--card-bg), var(--card-bg)) right bottom / 100% 0 no-repeat;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
  }
  .primary-item-mobile.is-current {
    background: var(--bg);
    font-weight: 700;
    color: var(--black);
  }
  .primary-item-mobile .icon-bg {
    display: flex;
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 6px;
  }
  .primary-item-mobile.is-current .icon-bg {
    background-color: #01FF48;
  }
  .primary-item-mobile.is-current .icon-bg .icon {
    background-color: var(--icon-active-color);
  }
  .primary-item-mobile .icon-bg .icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: var(--icon-color);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
  }
  .account-item {
    display: none !important;
  }
  .top-nav .top-nav-item.refer {
    display: none;
  }
  .logo-header {
    display: none;
  }
  body.createserver-provisioning .app .sidebar.primary {
    display: none;
  }
}
@media (max-width: 992px) {
  .header .left .breadcrumbs {
    display: none;
  }
}
@media (max-width: 600px) {
  .top-nav .top-nav-item .ai-field {
    max-width: 120px;
  }
  .notification-draw {
    width: 100%;
  }
}
/* tiny scrollbar styling for nicer look */
.app .main .content-main::-webkit-scrollbar {
  width: 12px;
}
.app .main .content-main::-webkit-scrollbar-track,
.event-nc-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.app .main .content-main::-webkit-scrollbar-thumb,
.event-nc-wrapper::-webkit-scrollbar-track {
  background: #d9d9d9;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.app .main .content-main::-webkit-scrollbar-thumb:hover,
.event-nc-wrapper::-webkit-scrollbar-thumb:hover {
  background: #b6b6b6;
}
/* ---------- OLD HEADER / NAVBAR / SIDEBAR ---------- */
/* ---------- HEADER ---------- */
body.login header {
  display: none;
}
header.main-header {
  height: 65px;
}
.header .brand-logo {
  font-size: 1.5rem;
  font-weight: 500;
}
.header nav a {
  color: var(--black);
}
.header-nav-logo {
  width: auto;
  height: 68px;
}
.hide-header {
  display: none;
  height: 0 !important;
}
/* ---------- NAVBAR ---------- */
nav {
  line-height: inherit;
  box-shadow: none;
}
nav .button-collapse {
  height: 64px;
  line-height: 64px;
}
nav .button-collapse i {
  height: 64px;
  line-height: 64px;
}
.createserver-provisioning .main-header {
  z-index: 1;
}
.createserver-provisioning #sidenav-overlay {
  z-index: auto !important;
}
nav.loggedin {
  position: relative;
  height: 68px;
  background-color: #022213;
}
nav .brand-logo {
  position: inherit;
  float: left;
}
nav.loggedin .nav-desktop.left a {
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}
.navbar-login {
  background: transparent !important;
}
.navbar-login-logo {
  padding: 24px !important;
}
.navbar-login-logo img {
  width: 100%;
  height: 43px !important;
}
.dropdown-button {
  position: relative;
}
.left .nav-icon {
  margin-right: 5px;
}
.nav-icon {
  width: 25px;
  vertical-align: middle;
}
.nav-desktop li span {
  line-height: 64px;
  font-size: 1.125rem;
}
.nav-desktop-right li a {
  padding: 0 12px;
}
.logged-out-actions li .ligin-user:hover {
  color: #000 !important;
  border: 2px solid #fff !important;
}
.logged-out-actions li.slct .ligin-user {
  color: #000 !important;
}
.logged-out-actions li.slct .ligin-user:hover {
  border: 2px solid #01FF48 !important;
}
.nav_top .navbar-brand img {
  max-width: 100%;
  height: 34px;
}
/* ---------- NEW MOBILE MENU---------- */
.side-nav-mobile {
  background: var(--card-bg);
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  z-index: 1001;
}
.side-nav-mobile li {
  width: 100%;
  line-height: normal;
  overflow: visible;
}
.side-nav {
  background: var(--card-bg);
  max-width: 250px;
  display: flex;
  flex-direction: column;
  z-index: 1003;
  scrollbar-gutter: stable both-edges;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
}
#sidenav-overlay {
  z-index: 1002;
}
.side-nav li {
  width: 100%;
  line-height: normal;
  overflow: visible;
}
.side-nav li > a.padtop {
  padding-top: 10px;
}
.side-nav li > a.padtop img {
  margin-left: -6px;
}
.side-nav li.mobile-last-li {
  margin-top: auto;
  /* Push it to the bottom */
}
.side-nav li.mobile-last-li a {
  border-top: 1px solid #e0e0e0;
}
.side-nav li.mobile-last-li a.no-top-border {
  border-top: 0px solid #e0e0e0;
}
.side-nav .dropdown-content li.divider {
  margin: 0px;
}
.side-nav li > a > i.material-icons {
  margin: 0 18px 0 0;
}
.side-nav li > a {
  color: var(--black);
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: auto;
  line-height: normal;
}
.side-nav .divider {
  border-bottom: 1px solid #e0e0e0;
  padding: 0;
  margin-bottom: 8px;
  height: auto;
}
.close-mobile-menu {
  display: none;
  position: absolute;
  font-size: 16px;
  color: #000;
  top: 8px;
  left: 260px;
  z-index: 1003;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.close-mobile-menu img {
  width: 32px;
  height: 32px;
}
.close-mobile-menu.show {
  display: block;
}
.mobile-submenu {
  display: none;
  padding-left: 12px !important;
  margin-top: 6px;
  margin-left: 30px;
  border-left: 1px solid var(--divider-color);
}
.mobile-menu li {
  padding-left: 8px;
}
.mobile-submenu li a {
  display: block;
  padding: 10px 10px;
  font-size: 13px;
  color: var(--icon-color);
}
.mobile-submenu li a.active {
  color: var(--icon-active-color);
  font-weight: 500;
}
.mobile-has-submenu .primary-item-mobile .label {
  flex-grow: 1;
}
/* Chevron */
.mobile-has-submenu .primary-item-mobile .mobile-chevron {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
/* Rotate when open */
.mobile-has-submenu.open .mobile-chevron {
  transform: rotate(90deg);
}
/* ---------- DROPDOWN MENU ---------- */
.dropdown-content {
  background: var(--card-bg);
  border-radius: 10px;
  box-shadow: var(--big-shadow);
}
.dropdown-content li:hover {
  background-color: var(--bg);
}
.dropdown-content li a {
  color: var(--black) !important;
}
.dropdown-content li a i {
  color: var(--icon-color) !important;
}
.submenuright {
  display: none;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  transition: all 0.2s ease;
}
#profile_menu,
#help_menu {
  border-radius: 10px;
  margin-top: -3px;
  margin-left: 0;
  box-shadow: var(--big-shadow);
  width: fit-content !important;
  padding-bottom: 15px;
  overflow: visible;
  max-width: 440px;
  min-width: 400px;
  max-height: 650px;
  top: 64px;
  right: -16px;
  z-index: 999;
  background: var(--sub-menu-bg);
}
#profile_menu::before,
#help_menu::before {
  width: 32px;
  height: 20px;
  background: var(--sub-menu-bg);
  position: absolute;
  left: 0;
  top: -16px;
  transform: translate(50px, 0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  content: "";
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}
#profile_menu img,
#help_menu img {
  width: 32px;
}
#profile_menu li,
#help_menu li {
  display: flex;
  align-items: center;
  font-family: 'Raleway', sans-serif;
  min-height: 45px;
  padding: 12px 20px;
  background: transparent;
  width: 100%;
}
#profile_menu li.divider,
#help_menu li.divider {
  margin-bottom: 16px;
  margin-top: 8px;
  min-height: 0;
  padding: 0 !important;
}
#profile_menu li a,
#help_menu li a {
  padding: 0;
  min-width: 230px;
  width: 100%;
  margin-left: 0;
  vertical-align: middle;
  color: #686666;
  display: inline-flex;
  align-items: flex-start;
}
#profile_menu li a div,
#help_menu li a div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
#profile_menu li a div h4,
#help_menu li a div h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--sub-menu-header);
  margin: 0;
  line-height: 1;
}
#profile_menu li a div p,
#help_menu li a div p {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 5px;
  color: var(--sub-menu-color);
}
#profile_menu li a:hover,
#help_menu li a:hover {
  background-color: transparent !important;
}
#profile_menu li img,
#help_menu li img {
  margin-right: 10px;
}
#profile_menu li:not(:first-child),
#help_menu li:not(:first-child) {
  padding-top: 10px;
}
#profile_menu li:first-child,
#help_menu li:first-child {
  padding-top: 20px;
}
#profile_menu h6,
#help_menu h6 {
  color: #0B2114;
  font-size: 18px;
  font-weight: 700;
  padding: 20px 20px 5px;
  margin: 0;
}
#help_menu {
  padding: 16px;
  max-width: 630px;
  min-width: 630px;
}
#help_menu div {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
#help_menu div li {
  padding: 0 10px;
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
  width: 100%;
  min-height: 1px;
}
#help_menu div li div {
  margin-bottom: 13px;
  display: flex;
  align-items: flex-start;
}
#help_menu div li div a {
  padding: 0;
  background: none !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--sub-menu-color);
  text-transform: capitalize;
  display: inline-flex;
}
#help_menu div li div a span {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 10px;
  /* spacing before text */
}
#help_menu div li div a img {
  width: 24px;
  height: 24px;
}
#help_menu div li div a div {
  gap: 0;
}
#help_menu div li div a div h4 {
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  color: var(--sub-menu-header);
  margin: 0px;
}
#help_menu div li div a div p {
  color: var(--sub-menu-color);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  margin: 0px;
}
#create_menu,
#manage_menu,
#cart_menu {
  border-radius: 10px;
  overflow: visible;
  margin-top: -3px;
  margin-left: 0;
  box-shadow: var(--big-shadow);
  width: auto !important;
  padding-bottom: 15px;
  max-width: 440px;
}
#create_menu::before,
#manage_menu::before,
#cart_menu::before {
  width: 32px;
  height: 20px;
  background: var(--sub-menu-bg);
  position: absolute;
  left: 0;
  top: -16px;
  transform: translate(50px, 0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  content: "";
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}
#create_menu img,
#manage_menu img,
#cart_menu img {
  width: 32px;
}
#create_menu li,
#manage_menu li,
#cart_menu li {
  display: flex;
  align-items: center;
  font-family: 'Raleway', sans-serif;
  min-height: 45px;
  padding: 12px 20px;
  background: transparent;
}
#create_menu li.divider,
#manage_menu li.divider,
#cart_menu li.divider {
  margin-bottom: 16px;
  margin-top: 8px;
  min-height: 0;
  padding: 0 !important;
}
#create_menu li a,
#manage_menu li a,
#cart_menu li a {
  padding: 0;
  min-width: 230px;
  width: 100%;
  margin-left: 0;
  vertical-align: middle;
  color: #686666;
  display: inline-flex;
  align-items: flex-start;
}
#create_menu li a div,
#manage_menu li a div,
#cart_menu li a div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
#create_menu li a div h4,
#manage_menu li a div h4,
#cart_menu li a div h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--sub-menu-header);
  margin: 0;
  line-height: 1;
}
#create_menu li a div p,
#manage_menu li a div p,
#cart_menu li a div p {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 5px;
  color: var(--sub-menu-color);
}
#create_menu li a:hover,
#manage_menu li a:hover,
#cart_menu li a:hover {
  background-color: transparent !important;
}
#create_menu li img,
#manage_menu li img,
#cart_menu li img {
  margin-right: 10px;
}
#create_menu li:not(:first-child),
#manage_menu li:not(:first-child),
#cart_menu li:not(:first-child) {
  padding-top: 10px;
}
#create_menu li:first-child,
#manage_menu li:first-child,
#cart_menu li:first-child {
  padding-top: 20px;
}
#create_menu h6,
#manage_menu h6,
#cart_menu h6 {
  color: #0B2114;
  font-size: 18px;
  font-weight: 700;
  padding: 20px 20px 5px;
  margin: 0;
}
#create_menu,
#profile_menu {
  padding-bottom: 0;
}
#help_menu::before,
#profile_menu::before,
#cart_menu::before {
  width: 32px;
  height: 20px;
  background: var(--sub-menu-bg);
  position: absolute;
  left: auto;
  right: 12px;
  top: -16px;
  transform: translate(-12px, 0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  content: "";
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}
#cart_menu {
  max-width: 360px;
  padding: 0;
}
#cart_menu li {
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  min-height: auto;
}
#cart_menu li:last-child {
  padding: 16px;
  min-height: auto;
  border-top: 1px solid #01FF48;
}
#cart_menu li:last-child a {
  width: 100%;
  justify-content: center;
  padding: 5px 20px;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  background: #01FF48;
  border-radius: 4px;
  border: 2px solid #01FF48;
  height: fit-content;
  transition: all 0.3s ease-out;
  text-align: center;
}
#cart_menu li:last-child a:hover {
  background: #fff;
  border: 2px solid #01FF48;
  transition: all 0.3s ease-out;
}
#cart_menu li:first-child {
  border-bottom: 2px solid #01FF48;
  line-height: 1;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  min-height: auto;
  border-bottom: 1px solid #01FF48;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
#cart_menu li:first-child .headline {
  width: 100%;
  line-height: 1.2;
  color: #000;
}
#cart_menu li:first-child .profile-price {
  background: #01FF48;
  padding: 4px 8px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1;
  width: fit-content;
}
#cart_menu li:not(:first-child) {
  padding-top: 16px;
}
#cart_menu li.cart-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
#cart_menu li.cart-info h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #000;
}
#cart_menu li.cart-info p {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  color: #000;
}
#cart_menu li.cart-info span.cart-price {
  background: #01FF48;
  padding: 4px 8px;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1;
}
#cart_menu li.price-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #01FF48;
}
#cart_menu li.price-info span.monthly {
  font-size: 14px;
  font-weight: 600;
  height: auto;
  line-height: 1;
  padding: 0;
  color: #000;
}
#cart_menu li.price-info span.price {
  font-size: 15px;
  font-weight: 700;
  height: auto;
  line-height: 1;
  padding: 0;
  color: #000;
}
.create-bottom-bar {
  background-color: var(--sub-menu-bottom) !important;
  padding: 30px !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center !important;
  border-radius: 0px 0px 10px 10px;
  grid-gap: 12px;
}
.create-bottom-bar h5 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 !important;
  color: var(--sub-menu-header);
}
.create-bottom-bar p {
  color: var(--sub-menu-color) !important;
  font-weight: 300;
  font-size: 14px !important;
  margin: 0;
  line-height: 20px;
  padding-top: 5px;
}
.create-bottom-bar .bottom {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.create-bottom-bar .menu-btn {
  background: #01FF48;
  border: 2px solid #01FF48;
  color: #000 !important;
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 20px !important;
  height: fit-content;
  min-width: fit-content !important;
  text-transform: capitalize;
  font-weight: 600;
}
.create-bottom-bar .menu-btn:hover {
  color: var(--black) !important;
}
.create-bottom-bar .menu-btn.secondary-btn {
  background: transparent;
  color: var(--black) !important;
}
@media (max-width: 993px) {
  .nav-desktop-right li {
    display: none;
  }
  .cart-container .cart-container-li .cart {
    right: 16px !important;
  }
  .cart-container .cart-container-li .cart::before {
    right: -20px !important;
  }
}
@media (max-width: 480px) {
  .cart-container .cart-container-li .cart {
    min-width: 280px !important;
  }
}
/* ---------- SECTIONS, ROWS AND COLUMNS ---------- */
.container .row {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.row .col {
  padding: 0 1.25rem;
}
.row .col .card {
  margin-bottom: 2.375rem;
}
.row .col:last-child .card {
  margin-bottom: 0;
}
.login-check .container .row {
  margin-left: auto;
  margin-right: auto;
}
.login-check .app #mainArea {
  margin-left: 0 !important;
}
body.login-check-challengeuser .row .col {
  max-width: 440px;
  margin: 0 auto;
  float: none;
}
@media (min-width: 993px) {
  .row .col .card {
    margin-bottom: 1rem;
  }
  .row .col:last-child .card {
    margin-bottom: 1rem;
  }
}
/* ---------- LIGHT/DARK ICONS IN MENU ---------- */
.sub-nav-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 10px;
  /* spacing before text */
}
/* Light mode (default) */
.sub-nav-icon[data-icon="epycvps"] {
  background-image: url("/static/common/images/amd_epyc_full_logo.svg");
}
.sub-nav-icon[data-icon="loadbalancer"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/loadbalancer.svg");
}
.sub-nav-icon[data-icon="waf"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/waf.svg");
}
.sub-nav-icon[data-icon="addons"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/add-ons-new.svg");
}
.sub-nav-icon[data-icon="vpsservers"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/servers-icon.svg");
}
.sub-nav-icon[data-icon="profile"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/profile-icon.svg");
}
.sub-nav-icon[data-icon="billing"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/billing-icon-green.svg");
}
.sub-nav-icon[data-icon="abusealerts"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/alert-icon.svg");
}
#help_menu div li div a span[data-icon="documentation"] {
  background-image: url("/application/themes/webdock/img/help_menu/document_green.svg");
}
#help_menu div li div a span[data-icon="contactsupport"] {
  background-image: url("/application/themes/webdock/img/help_menu/support_green.svg");
}
#help_menu div li div a span[data-icon="status"] {
  background-image: url("/application/themes/webdock/img/help_menu/status_green.svg");
}
#help_menu div li div a span[data-icon="webdockapi"] {
  background-image: url("/application/themes/webdock/img/help_menu/api_green.svg");
}
#help_menu div li div a span[data-icon="featurerequest"] {
  background-image: url("/application/themes/webdock/img/help_menu/request_green.svg");
}
#help_menu div li div a span[data-icon="roadmap"] {
  background-image: url("/application/themes/webdock/img/help_menu/roadmap_green.svg");
}
#help_menu div li div a span[data-icon="aboutus"] {
  background-image: url("/application/themes/webdock/img/help_menu/about-us_green.svg");
}
#help_menu div li div a span[data-icon="webdocknews"] {
  background-image: url("/application/themes/webdock/img/help_menu/news_green.svg");
}
.mobile-nav-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.mobile-nav-icon[data-icon="home"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/home-icon.svg");
}
.mobile-nav-icon[data-icon="servers"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/vps-servers.svg");
}
.mobile-nav-icon[data-icon="loadbalancer"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/loadbalancer.svg");
}
.mobile-nav-icon[data-icon="waf"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/waf.svg");
}
.mobile-nav-icon[data-icon="allevents"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/events-icon.svg");
}
.mobile-nav-icon[data-icon="team"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/team-icon.svg");
}
.mobile-nav-icon[data-icon="scripts"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/scripts-icon.svg");
}
.mobile-nav-icon[data-icon="monitoring"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/monitoring-icon.svg");
}
.mobile-nav-icon[data-icon="contact"] {
  background-image: url("/application/themes/webdock/img/help_menu/support_green.svg");
}
.mobile-nav-icon[data-icon="request"] {
  background-image: url("/application/themes/webdock/img/help_menu/request_green.svg");
}
.mobile-nav-icon[data-icon="status"] {
  background-image: url("/application/themes/webdock/img/help_menu/status_green.svg");
}
.mobile-nav-icon[data-icon="documentation"] {
  background-image: url("/application/themes/webdock/img/help_menu/document_green.svg");
}
.mobile-nav-icon[data-icon="api"] {
  background-image: url("/application/themes/webdock/img/help_menu/api_green.svg");
}
.mobile-nav-icon[data-icon="account"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/profile-icon.svg");
}
.mobile-nav-icon[data-icon="billing"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/billing.svg");
}
.mobile-nav-icon[data-icon="abuse"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/alert-icon.svg");
}
.mobile-nav-icon[data-icon="logout"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/logout-icon.svg");
}
.mobile-nav-icon[data-icon="refer"] {
  background-image: url("/application/themes/webdock/img/help_menu/refer_friend.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="home"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-home-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="servers"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-vps-servers.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="loadbalancer"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/load-balancer.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="waf"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/waf.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="allevents"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-events-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="team"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-teams-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="scripts"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-scripts-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="monitoring"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-monitoring-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="contact"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-support-green.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="request"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-request-green.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="status"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-status-green.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="documentation"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-document-green.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="api"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-api-green.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="account"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-profile-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="billing"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-billing-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="abuse"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-alert-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="logout"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-logout-icon.svg");
}
[data-theme="dark"] .mobile-nav-icon[data-icon="refer"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-refer-friend.svg");
}
/* …add more icons as needed */
/* Dark mode overrides */
[data-theme="dark"] .sub-nav-icon[data-icon="epycvps"] {
  background-image: url("/application/themes/webdock/img/amd_epyc_full_logo_white.svg");
}
[data-theme="dark"] .sub-nav-icon[data-icon="loadbalancer"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/load-balancer.svg");
}
[data-theme="dark"] .sub-nav-icon[data-icon="waf"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/waf.svg");
}
[data-theme="dark"] .sub-nav-icon[data-icon="addons"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-addons-icon.svg");
}
[data-theme="dark"] .sub-nav-icon[data-icon="vpsservers"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-vps-servers.svg");
}
[data-theme="dark"] .sub-nav-icon[data-icon="profile"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-profile-icon.svg");
}
[data-theme="dark"] .sub-nav-icon[data-icon="billing"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-billing-icon.svg");
}
[data-theme="dark"] .sub-nav-icon[data-icon="abusealerts"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/dark-alert-icon.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="documentation"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-document-green.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="contactsupport"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-support-green.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="status"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-status-green.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="webdockapi"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-api-green.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="featurerequest"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-request-green.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="roadmap"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-roadmap.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="aboutus"] {
  background-image: url("/application/themes/webdock/img/help_menu/about-us_white.svg");
}
[data-theme="dark"] #help_menu div li div a span[data-icon="webdocknews"] {
  background-image: url("/application/themes/webdock/img/help_menu/help_menu_dark/dark-news.svg");
}
/* ---------- FLOATING CART ---------- */
.floating-cart {
  position: absolute;
  top: 0;
  right: 148px;
}
.cart-container .cart-container-li .cart {
  position: absolute;
  border: none;
  background: var(--sub-menu-bg);
  right: -16px;
  transform: translate(32px, 0);
  top: 64px;
  box-shadow: var(--big-shadow);
  max-width: 360px;
  min-width: 360px;
  border-radius: 10px;
  z-index: 10;
}
.cart-container .cart-container-li .cart.public {
  transform: translate(0, 0);
}
.cart-container .cart-container-li .cart::before {
  width: 32px;
  height: 20px;
  background: var(--sub-menu-bg);
  position: absolute;
  right: 12px;
  top: -16px;
  transform: translate(-44px, 0);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  content: "";
}
.cart-container .cart-container-li .cart.public::before {
  transform: translate(-18px, 0);
}
.cart-container li {
  padding: 22px 0;
}
.cart-container li a {
  position: relative;
  padding: 0 12px;
}
.cart-container li a span.dot {
  width: 12px;
  height: 12px;
  border-radius: 24px;
  background: #01FF48;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(2px, 13px);
}
.close-cart {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}
.close-cart i {
  font-size: 24px;
  margin-right: 0 !important;
  width: auto;
  height: auto;
  display: block;
  color: var(--black);
  line-height: 1 !important;
}
.cart-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  position: relative;
}
.cart-content .headline {
  width: 100%;
  line-height: 1.2;
  color: var(--black);
  font-size: 14px;
  font-weight: 600;
  padding: 16px;
  border-bottom: 1px solid var(--menu-border);
}
.cart-content .headline-container {
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  min-height: auto;
  border-bottom: 1px solid #01FF48;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cart-content .headline-container .headline {
  width: 100%;
  line-height: 1.2;
}
.cart-content .headline-container .profile-price {
  background: #01FF48;
  padding: 4px 8px;
  color: var(--cart-price-color);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1;
  width: fit-content;
}
.cart-content .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--menu-border);
}
.cart-content .content .profile-info {
  padding: 0 16px 16px 16px;
}
.cart-content .content .profile-info h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--cart-price-color);
}
.cart-content .content .profile-info p {
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  color: var(--black);
}
.cart-content .content .profile-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  color: var(--cart-price-color);
  width: 100%;
  line-height: 1;
  padding: 16px 16px 0 16px;
  border-top: 1px solid var(--menu-border);
}
.cart-content .content .profile-price span.monthly {
  font-size: 14px;
  font-weight: 600;
}
.cart-content .content .profile-price span.price {
  font-size: 15px;
  font-weight: 700;
}
.cart-content .continue-bt {
  padding: 16px;
  min-height: auto;
  display: flex;
}
.cart-content .continue-bt a {
  width: 100%;
  justify-content: center;
  padding: 5px 20px;
  color: #000 !important;
  font-size: 15px;
  font-weight: 600;
  background: #01FF48;
  border-radius: 4px;
  border: 2px solid #01FF48;
  height: fit-content;
  transition: all 0.3s ease-out;
  text-align: center;
}
.cart-content .continue-bt a:hover {
  color: var(--black) !important;
  border: 2px solid #01FF48;
  transition: all 0.3s ease-out;
  background-color: transparent;
}
.clear-cart-btn-container {
  margin-right: 16px;
  margin-left: 16px;
}
.clear-cart-btn {
  text-transform: none !important;
  width: 100%;
}
.cart-mobile-view {
  display: none;
}
@media (max-width: 1201px) {
  .floating-cart {
    right: 198px;
  }
}
@media (max-width: 993px) {
  .floating-cart {
    right: 16px;
  }
}
/* ---------- BREADCRUMBS ---------- */
.dash-breadcrumbs {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  margin-bottom: 15px;
  font-size: 14px;
  color: var(--grey);
}
.dash-breadcrumbs a {
  color: var(--grey);
  display: flex;
  align-items: center;
}
.dash-breadcrumbs img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.dash-breadcrumbs p {
  margin: 0;
}
.dash-breadcrumbs a.current-page {
  font-weight: 600;
}
.dash-breadcrumbs .home {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 5px;
  /* spacing before text */
}
.dash-breadcrumbs .home[data-icon="home"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/home.svg");
}
[data-theme="dark"] .dash-breadcrumbs .home[data-icon="home"] {
  background-image: url("/application/themes/webdock/img/navigation_icons/dark-theme-icons/home.svg");
}
.dash-new-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
}
.dash-new-breadcrumbs a {
  text-decoration: none;
  transition: color 0.15s ease;
}
.dash-new-breadcrumbs a:hover {
  color: var(--secondary-link-text);
}
.dash-new-breadcrumbs .current-page {
  color: var(--grey);
  font-weight: 600;
  line-height: 1;
}
.dash-new-breadcrumbs .sep {
  color: var(--grey);
}
.dash-new-breadcrumbs .home-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: var(--icon-color);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.home {
  mask-image: url("/application/themes/webdock/img/dash/home-new.svg");
  -webkit-mask-image: url("/application/themes/webdock/img/dash/home-new.svg");
}
/* ---------- MAIN CONTENT ---------- */
main {
  flex: 1 0 auto;
}
/* ---------- FOOTER ---------- */
/* Hide cookie bar button when logged in */
.server-admin .cky-btn-revisit-wrapper {
  display: none !important;
}