:root {
  --color-primary-100: #008771;
  --dark-color-background: #0a1222;
  --dark-color-surface-100: #151f31;
  --dark-color-surface-200: #222d42;
  --dark-color-surface-300: #2c3950;
  --dark-color-surface-400: rgba(65, 85, 119, 0.5);
  --dark-color-surface-500: #2c3950;
  --dark-color-surface-600: #313f5a;
  --dark-color-surface-700: #111929;
  --dark-color-surface-700-rgb: 17, 25, 41;
  --dark-color-table-hover: rgba(44, 57, 80, 0.2);
  --dark-color-text-primary: rgba(255, 255, 255, 0.75);
  --dark-color-stroke: #2c3950;
  --dark-color-btn-danger: #cd3838;
  --dark-color-btn-danger-border: transparent;
  --dark-color-btn-danger-hover: #e94b4b;
  --dark-color-tag-bg: rgba(255, 255, 255, 0.05);
  --dark-color-tag-border: rgba(255, 255, 255, 0.15);
  --dark-color-tag-color: rgba(255, 255, 255, 0.75);
  --dark-color-tag-green-bg: 17, 36, 33;
  --dark-color-tag-green-border: 25, 81, 65;
  --dark-color-tag-green-color: #3ad3ba;
  --dark-color-tag-purple-bg: #201425;
  --dark-color-tag-purple-border: #5a2969;
  --dark-color-tag-purple-color: #d988cd;
  --dark-color-tag-red-bg: #291515;
  --dark-color-tag-red-border: #5c2626;
  --dark-color-tag-red-color: #e04141;
  --dark-color-tag-orange-bg: #312313;
  --dark-color-tag-orange-border: #593914;
  --dark-color-tag-orange-color: #ffa031;
  --dark-color-tag-blue-bg: #111a2c;
  --dark-color-tag-blue-border: #1348ab;
  --dark-color-tag-blue-color: #529fff;
  --dark-color-codemirror-line-hover: rgba(0, 135, 113, 0.2);
  --dark-color-codemirror-line-selection: rgba(0, 135, 113, 0.3);
  --dark-color-login-background: var(--dark-color-background);
  --dark-color-login-wave: var(--dark-color-surface-200);
  --dark-color-tooltip: rgba(61, 76, 104, 0.9);
  --dark-color-back-top: rgba(61, 76, 104, 0.9);
  --dark-color-back-top-hover: rgba(61, 76, 104, 1);
  --dark-color-scrollbar: #313f5a;
  --dark-color-scrollbar-webkit: #7484a0;
  --dark-color-scrollbar-webkit-hover: #90a4c7;
  --dark-color-table-ring: rgb(38 52 77);
  --dark-color-spin-container: #151f31;
}
html[data-theme-animations="off"] {
  .ant-menu,
  .ant-layout-sider,
  .ant-card,
  .ant-tag,
  .ant-progress-circle > *,
  .ant-input,
  .ant-table-row-expand-icon,
  .ant-switch,
  .ant-table-thead > tr > th,
  .ant-select-selection,
  .ant-btn,
  .ant-input-number,
  .ant-input-group-addon,
  .ant-checkbox-inner,
  .ant-progress-bg,
  .ant-progress-success-bg,
  .ant-radio-button-wrapper:not(:first-child):before,
  .ant-radio-button-wrapper,
  #login,
  .cm-s-xq.CodeMirror {
    transition: border 0s, background 0s !important;
  }
  .ant-menu.ant-menu-inline .ant-menu-item:not(.ant-menu-sub .ant-menu-item),
  .ant-layout-sider-trigger,
  .ant-alert-close-icon .anticon-close,
  .ant-tabs-nav .ant-tabs-tab,
  .ant-input-number-input,
  .ant-collapse > .ant-collapse-item > .ant-collapse-header,
  .Line-Hover,
  .ant-menu-theme-switch,
  .ant-menu-submenu-title {
    transition: color 0s !important;
  }
  .wave-btn-bg {
    transition: width 0s !important;
  }
  .index-page .ant-row .ant-col .ant-card {
    animation: none !important;
    opacity: 1 !important;
  }
}
html[data-theme="ultra-dark"] {
  --dark-color-background: #21242a;
  --dark-color-surface-100: #0c0e12;
  --dark-color-surface-200: #222327;
  --dark-color-surface-300: #32353b;
  --dark-color-surface-400: rgba(255, 255, 255, 0.1);
  --dark-color-surface-500: #3b404b;
  --dark-color-surface-600: #505663;
  --dark-color-surface-700: #101113;
  --dark-color-surface-700-rgb: 16, 17, 19;
  --dark-color-table-hover: rgba(89, 89, 89, 0.15);
  --dark-color-text-primary: rgb(255 255 255 / 85%);
  --dark-color-stroke: #202025;
  --dark-color-tag-green-bg: 17, 36, 33;
  --dark-color-tag-green-border: 29, 95, 77;
  --dark-color-tag-green-color: #59cbac;
  --dark-color-tag-purple-bg: #241121;
  --dark-color-tag-purple-border: #5a2969;
  --dark-color-tag-purple-color: #d686ca;
  --dark-color-tag-red-bg: #2a1215;
  --dark-color-tag-red-border: #58181c;
  --dark-color-tag-red-color: #e84749;
  --dark-color-tag-orange-bg: #2b1d11;
  --dark-color-tag-orange-border: #593815;
  --dark-color-tag-orange-color: #e89a3c;
  --dark-color-tag-blue-bg: #111a2c;
  --dark-color-tag-blue-border: #0f367e;
  --dark-color-tag-blue-color: #3c89e8;
  --dark-color-codemirror-line-hover: rgba(82, 84, 94, 0.2);
  --dark-color-codemirror-line-selection: rgba(82, 84, 94, 0.3);
  --dark-color-login-background: #0a2227;
  --dark-color-login-wave: #0f2d32;
  --dark-color-tooltip: rgba(88, 93, 100, 0.9);
  --dark-color-back-top: rgba(88, 93, 100, 0.9);
  --dark-color-back-top-hover: rgba(88, 93, 100, 1);
  --dark-color-scrollbar: rgb(107, 107, 107);
  --dark-color-scrollbar-webkit: #9f9f9f;
  --dark-color-scrollbar-webkit-hover: #d1d1d1;
  --dark-color-table-ring: rgb(37 39 42);
  --dark-color-spin-container: #1d1d1d;
  .ant-dropdown-menu-dark,
  .dark .ant-dropdown-menu {
    background-color: var(--dark-color-surface-500);
  }
  .dark .ant-dropdown-menu-submenu-title:hover,
  .dark
    .ant-select-dropdown-menu-item-active:not(
      .ant-select-dropdown-menu-item-disabled
    ),
  .dark
    .ant-select-dropdown-menu-item:hover:not(
      .ant-select-dropdown-menu-item-disabled
    ) {
    background-color: rgb(0 93 78 / 0.3);
  }
  .dark .waves-header {
    background-color: #0a2227;
  }
  .dark .ant-calendar-year-panel-year:hover,
  .dark .ant-calendar-month-panel-month:hover,
  .dark .ant-calendar-decade-panel-decade:hover {
    background-color: var(--dark-color-surface-600);
  }
}
html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  color: rgb(0 0 0 / 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  background-color: #fff;
  font-feature-settings: "tnum";
}
html {
  --antd-wave-shadow-color: var(--color-primary-100);
  line-height: 1.15;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -moz-tap-highlight-color: #fff0;
  -webkit-tap-highlight-color: #fff0;
}
html[data-glass-morphism="true"] {
  --color-primary-100: #008771;
  --antd-wave-shadow-color: #008771;
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --saturation: 150%;
}
@supports (scrollbar-width: auto) and (not selector(::-webkit-scrollbar)) {
  :not(.dark) {
    scrollbar-color: #9a9a9a #fff0;
    scrollbar-width: thin;
  }
  .dark * {
    scrollbar-color: var(--dark-color-scrollbar) #fff0;
    scrollbar-width: thin;
  }
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #fff0;
}
::-webkit-scrollbar-track {
  background-color: #fff0;
  margin-block: 0.5em;
}
.ant-modal-wrap::-webkit-scrollbar-track {
  background-color: #fff;
  margin-block: 0;
}
::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background-color: #9a9a9a;
  border: 2px solid #fff0;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: #828282;
}
.dark .ant-modal-wrap::-webkit-scrollbar-track {
  background-color: var(--dark-color-background);
}
.dark::-webkit-scrollbar-thumb {
  background-color: var(--dark-color-scrollbar-webkit);
}
.dark::-webkit-scrollbar-thumb:hover,
.dark::-webkit-scrollbar-thumb:active {
  background-color: var(--dark-color-scrollbar-webkit-hover);
}
::-moz-selection {
  color: var(--color-primary-100);
  background-color: #cfe8e4;
}
::selection {
  color: var(--color-primary-100);
  background-color: #cfe8e4;
}
html[data-glass-morphism="true"] ::-moz-selection {
  color: rgba(0, 0, 0, 0.85);
  background-color: rgba(255, 255, 255, 0.3);
}
html[data-glass-morphism="true"] ::selection {
  color: rgba(0, 0, 0, 0.85);
  background-color: rgba(255, 255, 255, 0.3);
}
#app {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.ant-layout,
.ant-layout * {
  box-sizing: border-box;
}
.ant-spin-container:after {
  border-radius: 1.5rem;
}
.dark .ant-spin-container:after {
  background: var(--dark-color-spin-container);
}
style attribute {
  text-align: center;
}
.ant-table-thead > tr > th {
  padding: 12px 8px;
}
.ant-table-tbody > tr > td {
  padding: 10px 8px;
}
.ant-table-thead > tr > th {
  color: rgb(0 0 0 / 0.85);
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
  transition: background 0.3s ease;
}
.ant-table table {
  border-radius: 1rem;
}
.ant-table-content,
.ant-table-body,
.ant-table-header,
.ant-table-container,
.ant-table-scroll,
.ant-table-content table,
.ant-table-body table,
.ant-table-header table {
  border-radius: 1rem;
}
.inbounds-page .ant-table:not(.ant-table-expanded-row .ant-table),
.clients-page .ant-table,
.hosts-page .ant-table,
.nodes-page .ant-table,
.groups-page .ant-table,
.xray-core-config-profiles-page .ant-table {
  border-radius: 1rem !important;
}
.inbounds-page .ant-table .ant-table-content,
.inbounds-page .ant-table .ant-table-body,
.inbounds-page .ant-table .ant-table-header,
.clients-page .ant-table .ant-table-content,
.clients-page .ant-table .ant-table-body,
.clients-page .ant-table .ant-table-header,
.hosts-page .ant-table .ant-table-content,
.hosts-page .ant-table .ant-table-body,
.hosts-page .ant-table .ant-table-header,
.nodes-page .ant-table .ant-table-content,
.nodes-page .ant-table .ant-table-body,
.nodes-page .ant-table .ant-table-header,
.groups-page .ant-table .ant-table-content,
.groups-page .ant-table .ant-table-body,
.groups-page .ant-table .ant-table-header,
.xray-core-config-profiles-page .ant-table .ant-table-content,
.xray-core-config-profiles-page .ant-table .ant-table-body,
.xray-core-config-profiles-page .ant-table .ant-table-header {
  border-radius: 1rem !important;
}
.ant-table-bordered
  .ant-table-tbody:not(
    .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody
  )
  > tr:last-child
  > td:first-child {
  border-bottom-left-radius: 1rem;
}
.ant-table-bordered
  .ant-table-tbody:not(
    .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody
  )
  > tr:last-child
  > td:last-child {
  border-bottom-right-radius: 1rem;
}
.ant-table {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgb(0 0 0 / 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  clear: both;
}
.ant-table .ant-table-body:not(.ant-table-expanded-row .ant-table-body) {
  overflow-x: auto !important;
}
.ant-card-hoverable {
  cursor: auto;
  cursor: pointer;
}
.ant-card {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgb(0 0 0 / 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  position: relative;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}
.ant-space {
  width: 100%;
}
.ant-layout-sider-zero-width-trigger {
  display: none;
}
@media (max-width: 768px) {
  .ant-layout-sider {
    display: none;
  }
  .ant-card,
  .ant-alert-error {
    margin: 0.5rem;
  }
  .ant-tabs {
    margin: 0.5rem;
    padding: 0.5rem;
  }
  .ant-modal-body {
    padding: 20px;
  }
  .ant-form-item-label {
    line-height: 1.5;
    padding: 8px 0 0;
  }
  :not(.dark)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff0;
  }
  .dark::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fff0;
  }
}
.ant-layout-content {
  min-height: auto;
}
.ant-card,
.ant-tabs {
  border-radius: 1.5rem;
}
.ant-card-hoverable {
  cursor: auto;
}
.ant-card + .ant-card {
  margin-top: 20px;
}
.drawer-handle {
  position: absolute;
  top: 72px;
  width: 41px;
  height: 40px;
  cursor: pointer;
  z-index: 0;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  right: -40px;
  box-shadow: 2px 0 8px rgb(0 0 0 / 0.15);
  border-radius: 0 4px 4px 0;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #006655 !important;
  background-image: linear-gradient(270deg, #fff0 30%, #009980, #fff0 100%);
  background-repeat: no-repeat;
  animation: ma-bg-move linear 6.6s infinite;
  color: #fff;
  border-radius: 0.5rem;
}
.ant-layout-sider-collapsed
  .ant-menu:not(.ant-menu-horizontal)
  .ant-menu-item-selected {
  border-radius: 0;
}
.ant-menu-item-active,
.ant-menu-item:hover,
.ant-menu-submenu-title:hover,
.ant-menu-item:active,
.ant-menu-submenu-title:active {
  color: var(--color-primary-100);
  background-color: #e8f4f2;
}
.ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title {
  border-radius: 0.5rem;
}
.ant-menu-inline .ant-menu-item:after,
.ant-menu {
  border-right-width: 0;
}
.ant-layout-sider:not(.ant-layout-sider-collapsed) {
  width: auto !important;
  min-width: 200px !important;
  max-width: none !important;
}
.ant-menu-item,
.ant-menu-submenu-title {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
}
.ant-menu-item span,
.ant-menu-submenu-title span {
  display: inline-block !important;
  max-width: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.ant-layout-sider-children,
.ant-pagination ul {
  padding: 0.5rem;
}
.ant-layout-sider-collapsed .ant-layout-sider-children {
  padding: 0.5rem 0;
}
.ant-dropdown-menu,
.ant-select-dropdown-menu {
  padding: 0.5rem;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-item:hover,
.ant-select-dropdown-menu-item,
.ant-select-dropdown-menu-item:hover,
.ant-select-selection--multiple .ant-select-selection__choice {
  border-radius: 0.5rem;
}
.ant-select-dropdown--multiple
  .ant-select-dropdown-menu
  .ant-select-dropdown-menu-item,
.ant-select-dropdown--single
  .ant-select-dropdown-menu
  .ant-select-dropdown-menu-item-selected {
  margin-block: 2px;
}
@media (min-width: 769px) {
  .drawer-handle {
    display: none;
  }
  .ant-tabs {
    padding: 2rem;
  }
}
.fade-in-enter,
.fade-in-leave-active,
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active,
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
  opacity: 0;
}
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.fade-in-enter-active,
.fade-in-leave-active {
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.zoom-in-center-enter-active,
.zoom-in-center-leave-active {
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.zoom-in-center-enter,
.zoom-in-center-leave-active {
  opacity: 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
  opacity: 1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform-origin: center top;
  transform-origin: center top;
}
.zoom-in-top-enter,
.zoom-in-top-leave-active {
  opacity: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.zoom-in-bottom-enter-active,
.zoom-in-bottom-leave-active {
  opacity: 1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.zoom-in-bottom-enter,
.zoom-in-bottom-leave-active {
  opacity: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.zoom-in-left-enter-active,
.zoom-in-left-leave-active {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.zoom-in-left-enter,
.zoom-in-left-leave-active {
  opacity: 0;
  -webkit-transform: scale(0.45, 0.45);
  transform: scale(0.45, 0.45);
}
.list-enter-active,
.list-leave-active {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.list-enter,
.list-leave-active {
  opacity: 0;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}
.ant-tooltip-inner {
  min-height: 0;
  padding-inline: 1rem;
}
.ant-list-item-meta-title {
  font-size: 14px;
}
.ant-progress-inner {
  background-color: #ebeef5;
}
.deactive-client .ant-collapse-header {
  color: #ffffff !important;
  background-color: #ff7f7f;
}
.ant-table-expand-icon-th,
.ant-table-row-expand-icon-cell {
  width: 30px;
  min-width: 30px;
}
.ant-tabs {
  background-color: #fff;
}
.ant-form-item {
  margin-bottom: 0;
}
.ant-setting-textarea {
  margin-top: 1.5rem;
}
.client-table-header {
  background-color: #f0f2f5;
}
.client-table-odd-row {
  background-color: #fafafa;
}
.ant-table-pagination.ant-pagination {
  float: left;
}
.ant-tag {
  margin-right: 0;
  margin-inline: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
}
.ant-tag:not(.qr-tag) {
  column-gap: 4px;
}
#inbound-info-modal .ant-tag {
  margin-block: 2px;
}
.tr-info-table {
  display: inline-table;
  margin-block: 10px;
  width: 100%;
}
#inbound-info-modal .tr-info-table .ant-tag {
  margin-block: 0;
  margin-inline: 0;
}
.tr-info-row {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  margin-block: 10px;
}
.tr-info-row a {
  margin-left: 6px;
}
.tr-info-row code {
  padding-inline: 8px;
  max-height: 80px;
  overflow-y: auto;
}
.tr-info-tag {
  max-width: 100%;
  text-wrap: balance;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tr-info-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 4px;
}
.ant-tag-blue {
  background-color: #edf4fa;
  border-color: #a9c5e7;
  color: #0e49b5;
}
.ant-tag-green {
  background-color: #eafff9;
  border-color: #76ccb4;
  color: #199270;
}
.ant-tag-purple {
  background-color: #f2eaf1;
  border-color: #d5bed2;
  color: #7a316f;
}
.ant-tag-orange,
.ant-alert-warning {
  background-color: #ffeee1;
  border-color: #fec093;
  color: #f37b24;
}
.ant-tag-red,
.ant-alert-error {
  background-color: #ffe9e9;
  border-color: #ff9e9e;
  color: #cf3c3c;
}
.ant-input::placeholder {
  opacity: 0.5;
}
.ant-input:hover,
.ant-input:focus {
  background-color: #e8f4f2;
}
.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
  background-color: #e8f4f2;
}
.delete-icon:hover {
  color: #e04141;
}
.normal-icon:hover {
  color: var(--color-primary-100);
}
.dark ::-moz-selection {
  color: #fff;
  background-color: var(--color-primary-100);
}
.dark ::selection {
  color: #fff;
  background-color: var(--color-primary-100);
}
.dark .normal-icon:hover {
  color: #fff;
}
.dark .ant-layout-sider,
.dark .ant-drawer-content,
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub,
.dark .ant-card,
.dark .ant-table,
.dark .ant-collapse-content,
.dark .ant-tabs {
  background-color: var(--dark-color-surface-100);
  color: var(--dark-color-text-primary);
}
.dark .ant-card-hoverable:hover,
.dark .ant-space-item > .ant-tabs:hover {
  box-shadow: 0 2px 8px #fff0;
}
.dark > .ant-layout,
.dark .drawer-handle,
.dark .ant-table-thead > tr > th,
.dark .ant-table-expanded-row,
.dark .ant-table-expanded-row:hover,
.dark .ant-table-expanded-row .ant-table-tbody,
.dark .ant-calendar {
  background-color: var(--dark-color-background);
  color: var(--dark-color-text-primary);
}
.dark .ant-table-expanded-row .ant-table-thead > tr:first-child > th {
  border-radius: 0;
}
.dark .ant-calendar,
.dark .ant-card-bordered {
  border-color: var(--dark-color-background);
}
.dark .ant-table-bordered,
.dark .ant-table-bordered.ant-table-empty .ant-table-placeholder,
.dark .ant-table-bordered .ant-table-body > table,
.dark .ant-table-bordered .ant-table-fixed-left table,
.dark .ant-table-bordered .ant-table-fixed-right table,
.dark .ant-table-bordered .ant-table-header > table,
.dark .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th,
.dark .ant-table-bordered .ant-table-tbody > tr > td,
.dark .ant-table-bordered .ant-table-thead > tr > th {
  border-color: var(--dark-color-surface-400);
}
.dark .ant-table-tbody > tr > td,
.dark .ant-table-thead > tr > th,
.dark .ant-card-head,
.dark .ant-modal-header,
.dark .ant-collapse > .ant-collapse-item,
.dark .ant-tabs-bar,
.dark .ant-list-split .ant-list-item,
.dark .ant-popover-title,
.dark .ant-calendar-header,
.dark .ant-calendar-input-wrap {
  border-bottom-color: var(--dark-color-surface-400);
}
.dark .ant-modal-footer,
.dark .ant-collapse-content,
.dark .ant-calendar-footer,
.dark .ant-divider-horizontal.ant-divider-with-text-left:before,
.dark .ant-divider-horizontal.ant-divider-with-text-left:after,
.dark .ant-divider-horizontal.ant-divider-with-text-center:before,
.dark .ant-divider-horizontal.ant-divider-with-text-center:after {
  border-top-color: var(--dark-color-surface-300);
}
.ant-divider-horizontal.ant-divider-with-text-left:before {
  width: 10%;
}
.dark .ant-progress-text,
.dark .ant-card-head,
.dark .ant-form,
.dark .ant-collapse > .ant-collapse-item > .ant-collapse-header,
.dark .ant-modal-close-x,
.dark .ant-form .anticon,
.dark .ant-tabs-tab-arrow-show:not(.ant-tabs-tab-btn-disabled),
.dark .anticon-close,
.dark .ant-list-item-meta-title,
.dark .ant-select-selection i,
.dark .ant-modal-confirm-title,
.dark .ant-modal-confirm-content,
.dark .ant-popover-message,
.dark .ant-modal,
.dark .ant-divider-inner-text,
.dark .ant-popover-title,
.dark .ant-popover-inner-content,
.dark h2,
.dark .ant-modal-title,
.dark .ant-form-item-label > label,
.dark .ant-checkbox-wrapper,
.dark .ant-form-item,
.dark .ant-calendar-footer .ant-calendar-today-btn,
.dark .ant-calendar-footer .ant-calendar-time-picker-btn,
.dark .ant-calendar-day-select,
.dark .ant-calendar-month-select,
.dark .ant-calendar-year-select,
.dark .ant-calendar-date,
.dark .ant-calendar-year-panel-year,
.dark .ant-calendar-month-panel-month,
.dark .ant-calendar-decade-panel-decade {
  color: var(--dark-color-text-primary);
}
.dark
  .ant-pagination-options-size-changer
  .ant-select-arrow
  .anticon.anticon-down.ant-select-arrow-icon {
  color: rgb(255 255 255 / 35%);
}
.dark .ant-pagination-item a,
.dark .ant-pagination-next a,
.dark .ant-pagination-prev a {
  color: var(--dark-color-text-primary);
}
.dark .ant-pagination-item:focus a,
.dark .ant-pagination-item:hover a,
.dark .ant-pagination-item-active a,
.dark .ant-pagination-next:hover .ant-pagination-item-link {
  color: var(--color-primary-100);
}
.dark .ant-pagination-item-active {
  background-color: #fff0;
}
.dark .ant-list-item-meta-description {
  color: rgb(255 255 255 / 0.45);
}
.dark .ant-pagination-disabled i,
.dark .ant-tabs-tab-btn-disabled {
  color: rgb(255 255 255 / 0.25);
}
.dark .ant-input,
.dark .ant-input-group-addon,
.dark .ant-collapse,
.dark .ant-select-selection,
.dark .ant-input-number,
.dark .ant-input-number-handler-wrap,
.dark .ant-table-placeholder,
.dark .ant-empty-normal,
.dark .ant-select-dropdown,
.dark .ant-select-dropdown li,
.dark .ant-select-dropdown-menu-item,
.dark .client-table-header,
.dark .client-table-header th,
.dark .ant-select-selection--multiple .ant-select-selection__choice {
  background-color: var(--dark-color-surface-200);
  border-color: var(--dark-color-surface-300);
  color: var(--dark-color-text-primary);
}
.dark
  .ant-select-dropdown--multiple
  .ant-select-dropdown-menu
  .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected
  :not(.ant-dropdown-menu-submenu-title:hover) {
  background-color: var(--dark-color-surface-300);
}
.dark .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected {
  background-color: var(--dark-color-surface-300);
}
.dark .ant-calendar-time-picker-inner {
  background-color: var(--dark-color-background);
}
.dark .ant-select-selection:hover,
.dark .ant-calendar-picker-clear,
.dark .ant-input-number:hover,
.dark .ant-input-number:focus,
.dark .ant-input:hover,
.dark .ant-input:focus {
  background-color: rgb(0 135 113 / 0.3);
  border-color: var(--color-primary-100);
}
.dark .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
  border-color: var(--color-primary-100);
  background-color: rgb(0 135 113 / 0.3);
}
.dark .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) {
  color: var(--dark-color-text-primary);
  background-color: rgb(10 117 87 / 30%);
  border: 1px solid var(--color-primary-100);
}
.dark .ant-radio-button-wrapper,
.dark .ant-radio-button-wrapper:before {
  color: var(--dark-color-text-primary);
  background-color: rgb(0 135 113 / 0.3);
  border-color: var(--color-primary-100);
}
.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
  background-color: #e8f4f2;
}
.dark .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
.dark .ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
  color: #fff;
  background-color: rgb(10 117 87 / 50%);
  border-color: var(--color-primary-100);
}
.dark .ant-btn-primary[disabled],
.dark .ant-btn-danger[disabled],
.dark .ant-calendar-ok-btn-disabled {
  color: rgb(255 255 255 / 35%);
  background-color: var(--dark-color-surface-200);
  border-color: var(--dark-color-surface-300);
}
.dark
  .ant-table-tbody
  > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td,
.dark .client-table-odd-row {
  background-color: var(--dark-color-table-hover);
}
.dark .ant-table-row-expand-icon {
  color: #fff;
  background-color: #fff0;
  border-color: rgb(255 255 255 / 20%);
}
.dark .ant-table-row-expand-icon:hover {
  color: var(--color-primary-100);
  background-color: #fff0;
  border-color: var(--color-primary-100);
}
.dark .ant-switch:not(.ant-switch-checked),
.dark .ant-progress-line .ant-progress-inner {
  background-color: var(--dark-color-surface-500);
}
.dark .ant-progress-circle-trail {
  stroke: var(--dark-color-stroke) !important;
}
.dark .ant-popover-inner {
  background-color: var(--dark-color-surface-500);
}
.dark > .ant-popover-content > .ant-popover-arrow {
  border-color: var(--dark-color-surface-500);
}
@media (max-width: 768px) {
  .dark .ant-popover-inner {
    background-color: var(--dark-color-surface-200);
  }
  .dark > .ant-popover-content > .ant-popover-arrow {
    border-color: var(--dark-color-surface-200);
  }
}
.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,
.dark .ant-select-dropdown-menu-item-selected,
.dark .ant-calendar-time-picker-select-option-selected {
  background-color: var(--dark-color-surface-600);
}
.ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-submenu-title:hover {
  background-color: var(--dark-color-surface-300);
}
.dark .ant-menu-item:active,
.dark .ant-menu-submenu-title:active {
  color: #fff;
  background-color: var(--dark-color-surface-300);
}
.dark .ant-alert-message {
  color: rgb(255 255 255 / 0.85);
}
.dark .ant-tag {
  color: var(--dark-color-tag-color);
  background-color: var(--dark-color-tag-bg);
  border-color: var(--dark-color-tag-border);
}
.dark .ant-tag-blue {
  background-color: var(--dark-color-tag-blue-bg);
  border-color: var(--dark-color-tag-blue-border);
  color: var(--dark-color-tag-blue-color);
}
.dark .ant-tag-red,
.dark .ant-alert-error {
  background-color: var(--dark-color-tag-red-bg);
  border-color: var(--dark-color-tag-red-border);
  color: var(--dark-color-tag-red-color);
}
.dark .ant-tag-orange,
.dark .ant-alert-warning {
  background-color: var(--dark-color-tag-orange-bg);
  border-color: var(--dark-color-tag-orange-border);
  color: var(--dark-color-tag-orange-color);
}
.dark .ant-tag-green {
  background-color: rgb(var(--dark-color-tag-green-bg));
  border-color: rgb(var(--dark-color-tag-green-border));
  color: var(--dark-color-tag-green-color);
}
.dark .ant-tag-purple {
  background-color: var(--dark-color-tag-purple-bg);
  border-color: var(--dark-color-tag-purple-border);
  color: var(--dark-color-tag-purple-color);
}
.dark .ant-modal-content,
.dark .ant-modal-header {
  background-color: var(--dark-color-surface-700);
}
.dark .ant-calendar-next-month-btn-day .ant-calendar-date,
.dark .ant-calendar-last-month-cell .ant-calendar-date {
  color: var(--dark-color-surface-300);
}
.dark .ant-calendar-selected-day .ant-calendar-date {
  background-color: var(--color-primary-100) !important;
  color: #fff;
}
.dark .ant-calendar-date:hover,
.dark .ant-calendar-time-picker-select li:hover {
  background-color: var(--dark-color-surface-600);
  color: #fff;
}
.dark .ant-calendar-header a:hover,
.dark .ant-calendar-header a:hover::before,
.dark .ant-calendar-header a:hover::after {
  border-color: #fff;
}
.dark .ant-calendar-time-picker-select {
  border-right-color: var(--dark-color-surface-300);
}
.has-warning .ant-select-selection,
.has-warning .ant-select-selection:hover,
.has-warning .ant-input,
.has-warning .ant-input:hover {
  background-color: #ffeee1;
  border-color: #fec093;
}
.has-warning .ant-input::placeholder {
  color: #f37b24;
}
.has-warning .ant-input:not([disabled]):hover {
  border-color: #fec093;
}
.dark .has-warning .ant-select-selection,
.dark .has-warning .ant-select-selection:hover,
.dark .has-warning .ant-input,
.dark .has-warning .ant-input:hover {
  border-color: #784e1d;
  background: #312313;
}
.dark .has-warning .ant-input::placeholder {
  color: rgb(255 160 49 / 70%);
}
.dark .has-warning .anticon {
  color: #ffa031;
}
.dark .has-success .anticon {
  color: var(--color-primary-100);
  animation-name: diffZoomIn1 !important;
}
.dark .anticon-close-circle {
  color: #e04141;
}
.dark .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
  text-shadow: 0 1px 2px #0007;
}
.dark .ant-spin {
  color: #fff;
}
.dark .ant-spin-dot-item {
  background-color: #fff;
}
.ant-checkbox-wrapper,
.ant-input-group-addon,
.ant-tabs-tab,
.ant-input::placeholder,
.ant-collapse-header,
.ant-menu,
.ant-radio-button-wrapper {
  -webkit-user-select: none;
  user-select: none;
}
.ant-calendar-date,
.ant-calendar-year-panel-year,
.ant-calendar-decade-panel-decade,
.ant-calendar-month-panel-month {
  border-radius: 4px;
}
.ant-checkbox-inner,
.ant-checkbox-checked:after,
.ant-table-row-expand-icon {
  border-radius: 6px;
}
.ant-calendar-date:hover {
  background-color: #e8f4f2;
}
.ant-calendar-date:active {
  background-color: #e8f4f2;
  color: rgb(0 0 0 / 0.65);
}
.ant-calendar-today .ant-calendar-date {
  color: var(--color-primary-100);
  font-weight: 400;
  border-color: var(--color-primary-100);
}
.dark .ant-calendar-today .ant-calendar-date {
  color: #fff;
  border-color: var(--color-primary-100);
}
.ant-calendar-selected-day .ant-calendar-date {
  background: var(--color-primary-100);
  color: #fff;
}
li.ant-select-dropdown-menu-item:empty:after {
  content: "None";
  font-weight: 400;
  color: rgb(0 0 0 / 0.25);
}
.dark li.ant-select-dropdown-menu-item:empty:after {
  content: "None";
  font-weight: 400;
  color: rgb(255 255 255 / 0.3);
}
.ant-select-dropdown.ant-select-dropdown--multiple
  .ant-select-dropdown-menu-item:hover
  .ant-select-selected-icon {
  color: rgb(0 0 0 / 0.87);
}
.dark.ant-select-dropdown.ant-select-dropdown--multiple
  .ant-select-dropdown-menu-item:hover
  .ant-select-selected-icon {
  color: #fff;
}
.ant-select-dropdown.ant-select-dropdown--multiple
  .ant-select-dropdown-menu-item-selected
  .ant-select-selected-icon,
.ant-select-dropdown.ant-select-dropdown--multiple
  .ant-select-dropdown-menu-item-selected:hover
  .ant-select-selected-icon {
  color: var(--color-primary-100);
}
.ant-select-selection:hover,
.ant-input-number-focused,
.ant-input-number:hover {
  background-color: #e8f4f2;
}
.dark .ant-input-number-handler:active {
  background-color: var(--color-primary-100);
}
.dark .ant-input-number-handler:hover .ant-input-number-handler-down-inner,
.dark .ant-input-number-handler:hover .ant-input-number-handler-up-inner {
  color: #fff;
}
.dark .ant-input-number-handler-down {
  border-top: 1px solid rgb(217 217 217 / 0.3);
}
.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-century-select,
.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select,
.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-month-select,
.dark .ant-calendar-year-panel-header .ant-calendar-year-panel-year-select,
.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-century-select,
.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select,
.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-month-select,
.dark .ant-calendar-month-panel-header .ant-calendar-month-panel-year-select {
  color: rgb(255 255 255 / 0.85);
}
.dark .ant-calendar-year-panel-header {
  border-bottom: 1px solid var(--dark-color-surface-200);
}
.dark .ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year,
.dark .ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year {
  color: rgb(255 255 255 / 0.35);
}
.dark
  .ant-divider:not(
    .ant-divider-with-text-center,
    .ant-divider-with-text-left,
    .ant-divider-with-text-right
  ),
.ant-dropdown-menu-dark,
.dark .ant-calendar-year-panel-year:hover,
.dark .ant-calendar-month-panel-month:hover,
.dark .ant-calendar-decade-panel-decade:hover {
  background-color: var(--dark-color-surface-200);
}
.dark .ant-calendar-header a:hover {
  color: #fff;
}
.dark .ant-calendar-month-panel-header {
  background-color: var(--dark-color-background);
  border-bottom: 1px solid var(--dark-color-surface-200);
}
.dark .ant-calendar-year-panel,
.dark .ant-calendar table {
  background-color: var(--dark-color-background);
}
.dark .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
.dark
  .ant-calendar-year-panel-selected-cell
  .ant-calendar-year-panel-year:hover,
.dark .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
.dark
  .ant-calendar-month-panel-selected-cell
  .ant-calendar-month-panel-month:hover,
.dark
  .ant-calendar-decade-panel-selected-cell
  .ant-calendar-decade-panel-decade,
.dark
  .ant-calendar-decade-panel-selected-cell
  .ant-calendar-decade-panel-decade:hover {
  color: #fff;
  background-color: var(--color-primary-100) !important;
}
.dark .ant-calendar-last-month-cell .ant-calendar-date,
.dark .ant-calendar-last-month-cell .ant-calendar-date:hover,
.dark .ant-calendar-next-month-btn-day .ant-calendar-date,
.dark .ant-calendar-next-month-btn-day .ant-calendar-date:hover {
  color: rgb(255 255 255 / 25%);
  background: #fff0;
  border-color: #fff0;
}
.dark .ant-calendar-today .ant-calendar-date:hover {
  color: #fff;
  border-color: var(--color-primary-100);
  background-color: var(--color-primary-100);
}
.dark
  .ant-calendar-decade-panel-last-century-cell
  .ant-calendar-decade-panel-decade,
.dark
  .ant-calendar-decade-panel-next-century-cell
  .ant-calendar-decade-panel-decade {
  color: rgb(255 255 255 / 25%);
}
.dark .ant-calendar-decade-panel-header {
  border-bottom: 1px solid var(--dark-color-surface-200);
  background-color: var(--dark-color-background);
}
.dark .ant-checkbox-inner {
  background-color: rgb(0 135 113 / 0.3);
  border-color: rgb(0 135 113 / 0.3);
}
.dark .ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-100);
}
.dark .ant-calendar-input {
  background-color: var(--dark-color-background);
  color: var(--dark-color-text-primary);
}
.dark .ant-calendar-input::placeholder {
  color: rgb(255 255 255 / 0.25);
}
.ant-input-group.ant-input-group-compact-addon:not(:first-child):not(
    :last-child
  ),
.ant-input-group.ant-input-group-compact-wrap:not(:first-child):not(
    :last-child
  ),
.ant-input-group.ant-input-group-compact
  > .ant-input:not(:first-child):not(:last-child),
.ant-input-number-handler,
.ant-input-number-handler-wrap {
  border-radius: 0;
}
.ant-input-number {
  overflow: clip;
}
.ant-modal-body,
.ant-collapse-content > .ant-collapse-content-box {
  overflow-x: auto;
}
.ant-modal-body {
  overflow-y: hidden;
}
.ant-calendar-year-panel-year:hover,
.ant-calendar-decade-panel-decade:hover,
.ant-calendar-month-panel-month:hover,
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover,
.ant-select-dropdown-menu-item-active:not(
    .ant-select-dropdown-menu-item-disabled
  ),
.ant-select-dropdown-menu-item:hover:not(
    .ant-select-dropdown-menu-item-disabled
  ),
.ant-table-tbody
  > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(
    .ant-table-row-selected
  )
  > td,
.ant-table-tbody
  > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td,
.ant-table-thead
  > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(
    .ant-table-row-selected
  )
  > td,
.ant-table-thead
  > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td {
  background-color: #e8f4f2;
}
.dark .ant-dropdown-menu-submenu-title:hover,
.dark
  .ant-select-dropdown-menu-item-active:not(
    .ant-select-dropdown-menu-item-disabled
  ),
.dark
  .ant-select-dropdown-menu-item:hover:not(
    .ant-select-dropdown-menu-item-disabled
  ) {
  background-color: rgb(0 93 78 / 0.3);
}
.ant-select-dropdown,
.ant-popover-inner {
  overflow-x: hidden;
}
.ant-popover-inner-content {
  max-height: 450px;
  overflow-y: auto;
}
@media (max-height: 900px) {
  .ant-popover-inner-content {
    max-height: 400px;
  }
}
@media (max-height: 768px) {
  .ant-popover-inner-content {
    max-height: 300px;
  }
}
@media (max-width: 768px) {
  .ant-popover-inner-content {
    max-height: 300px;
  }
}
.qr-modal {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-direction: column;
  flex-wrap: wrap;
  row-gap: 24px;
}
.qr-box {
  width: 220px;
}
.qr-cv {
  width: 100%;
  height: 100%;
}
.dark .qr-cv {
  background-color: #fff;
  padding: 1px;
  border-radius: 0.25rem;
}
.qr-bg {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 0.8rem;
  border-radius: 1rem;
  border: solid 1px #e8e8e8;
  height: 220px;
  width: 220px;
  transition: all 0.1s;
}
.qr-bg:hover {
  border-color: #76ccb4;
  background-color: #eafff9;
}
.qr-bg:hover:active {
  border-color: #76ccb4;
  background-color: rgb(197 241 228 / 70%);
}
.dark .qr-bg {
  background-color: var(--dark-color-surface-700);
  border-color: var(--dark-color-surface-300);
}
.dark .qr-bg:hover {
  background-color: rgb(var(--dark-color-tag-green-bg));
  border-color: rgb(var(--dark-color-tag-green-border));
}
.dark .qr-bg:hover:active {
  background-color: #17322e;
}
@property --tr-rotate {
  syntax: "<angle>";
  initial-value: 45deg;
  inherits: false;
}
.qr-bg-sub {
  background-image: linear-gradient(
    var(--tr-rotate),
    #76ccb4,
    transparent,
    #d5bed2
  );
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 1px;
  border-radius: 1rem;
  height: 220px;
  width: 220px;
}
.dark .qr-bg-sub {
  background-image: linear-gradient(
    var(--tr-rotate),
    #195141,
    transparent,
    #5a2969
  );
}
.qr-bg-sub:hover {
  animation: tr-rotate-gradient 3.5s linear infinite;
}
@keyframes tr-rotate-gradient {
  from {
    --tr-rotate: 45deg;
  }
  to {
    --tr-rotate: 405deg;
  }
}
.qr-bg-sub-inner {
  background-color: #fff;
  padding: 0.8rem;
  border-radius: 1rem;
  transition: all 0.1s;
}
.qr-bg-sub-inner:hover {
  background-color: rgb(255 255 255 / 60%);
  backdrop-filter: blur(25px);
}
.qr-bg-sub-inner:hover:active {
  background-color: rgb(255 255 255 / 30%);
}
.dark .qr-bg-sub-inner {
  background-color: rgb(var(--dark-color-surface-700-rgb));
}
.dark .qr-bg-sub-inner:hover {
  background-color: rgba(var(--dark-color-surface-700-rgb), 0.5);
  backdrop-filter: blur(25px);
}
.dark .qr-bg-sub-inner:hover:active {
  background-color: rgba(var(--dark-color-surface-700-rgb), 0.2);
}
.qr-tag {
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
  margin-inline: 0;
}
@media (min-width: 769px) {
  .qr-modal {
    flex-direction: row;
    max-width: 680px;
  }
}
.tr-marquee {
  justify-content: flex-start;
}
.tr-marquee span {
  padding-right: 25%;
  white-space: nowrap;
  transform-origin: center;
}
@keyframes move-ltr {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.ant-input-group-addon:not(:first-child):not(:last-child) {
  border-radius: 0rem 1rem 1rem 0rem;
}
b,
strong {
  font-weight: 500;
}
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 10px 16px 10px 40px;
}
.dark .ant-message-notice-content {
  background-color: var(--dark-color-surface-200);
  border: 1px solid var(--dark-color-surface-300);
  color: var(--dark-color-text-primary);
}
.ant-btn-danger {
  background-color: var(--dark-color-btn-danger);
  border-color: var(--dark-color-btn-danger-border);
}
.ant-btn-danger:focus,
.ant-btn-danger:hover {
  background-color: var(--dark-color-btn-danger-hover);
  border-color: var(--dark-color-btn-danger-hover);
}
.dark .ant-alert-close-icon .anticon-close:hover {
  color: #fff;
}
.ant-empty-small {
  margin: 4px 0;
  background-color: transparent !important;
}
.ant-empty-small .ant-empty-image {
  height: 20px;
}
.ant-menu-theme-switch,
.ant-menu-theme-switch:hover {
  background-color: transparent !important;
  cursor: default !important;
}
.dark .ant-tooltip-inner,
.dark .ant-tooltip-arrow:before {
  background-color: var(--dark-color-tooltip);
}
.ant-select-sm .ant-select-selection__rendered {
  margin-left: 10px;
}
.ant-collapse {
  -moz-animation: collfade 0.3s ease;
  -webkit-animation: 0.3s collfade 0.3s ease;
  animation: collfade 0.3s ease;
}
@-webkit-keyframes collfade {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes collfade {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
.ant-table-tbody > tr > td {
  border-color: #f0f0f0;
}
.ant-table-row-expand-icon {
  vertical-align: middle;
  margin-inline-end: 8px;
  position: relative;
  transform: scale(0.9411764705882353);
}
.ant-table-row-collapsed::before {
  transform: rotate(-180deg);
  top: 7px;
  inset-inline-end: 3px;
  inset-inline-start: 3px;
  height: 1px;
  position: absolute;
  background: currentcolor;
  transition: transform 0.3s ease-out;
  content: "";
}
.ant-table-row-collapsed::after {
  transform: rotate(0deg);
  top: 3px;
  bottom: 3px;
  inset-inline-start: 7px;
  width: 1px;
  position: absolute;
  background: currentcolor;
  transition: transform 0.3s ease-out;
  content: "";
}
.ant-table-row-expanded::before {
  top: 7px;
  inset-inline-end: 3px;
  inset-inline-start: 3px;
  height: 1px;
  position: absolute;
  background: currentcolor;
  transition: transform 0.3s ease-out;
  content: "";
}
.ant-table-row-expanded::after {
  top: 3px;
  bottom: 3px;
  inset-inline-start: 7px;
  width: 1px;
  transform: rotate(90deg);
  position: absolute;
  background: currentcolor;
  transition: transform 0.3s ease-out;
  content: "";
}
.ant-menu-theme-switch.ant-menu-item
  .ant-switch:not(.ant-switch-disabled):active:after,
.ant-switch:not(.ant-switch-disabled):active:before {
  width: 16px;
}
.dark .ant-select-disabled .ant-select-selection {
  background: var(--dark-color-surface-100);
  border-color: var(--dark-color-surface-200);
  color: rgb(255 255 255 / 0.25);
}
.dark .ant-select-disabled .anticon {
  color: rgb(255 255 255 / 0.25);
}
.dark .ant-input-number-handler-down-disabled,
.dark .ant-input-number-handler-up-disabled {
  background-color: rgb(0 0 0 / 0.1);
}
.dark .ant-input-number-handler-down-disabled .anticon,
.dark .ant-input-number-handler-up-disabled .anticon,
.dark
  .ant-input-number-handler-down:hover.ant-input-number-handler-down-disabled
  .anticon,
.dark
  .ant-input-number-handler-up:hover.ant-input-number-handler-up-disabled
  .anticon {
  color: rgb(255 255 255 / 0.25);
}
.dark
  .ant-input-number-handler-down:active.ant-input-number-handler-down-disabled,
.dark .ant-input-number-handler-up:active.ant-input-number-handler-up-disabled {
  background-color: rgb(0 0 0 / 0.2);
}
.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  background: var(--dark-color-surface-100);
  box-shadow: none;
}
.dark .ant-layout-sider-trigger {
  background: var(--dark-color-surface-100);
  color: rgb(255 255 255 / 65%);
}
.ant-layout-sider {
  overflow: auto;
}
.dark .ant-back-top-content {
  background-color: var(--dark-color-back-top);
}
.dark .ant-back-top-content:hover {
  background-color: var(--dark-color-back-top-hover);
}
.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
  text-transform: capitalize;
}
.ant-calendar {
  border-color: #fff0;
  border-width: 0;
}
.ant-calendar-time-picker-select li:focus,
li.ant-calendar-time-picker-select-option-selected {
  color: rgb(0 0 0 / 0.65);
  font-weight: 400;
  background-color: #e8f4f2;
}
.dark li.ant-calendar-time-picker-select-option-selected {
  color: var(--dark-color-text-primary);
  font-weight: 400;
}
.dark .ant-calendar-time-picker-select li:focus {
  color: #fff;
  font-weight: 400;
  background-color: var(--color-primary-100);
}
.ant-calendar-time-picker-select li:hover {
  background: #f5f5f5;
}
.ant-calendar-date {
  transition: background 0.3s ease, color 0.3s ease;
}
li.ant-calendar-time-picker-select-option-selected {
  margin-block: 2px;
}
.ant-calendar-time-picker-select {
  padding: 4px;
}
.ant-calendar-time-picker-select li {
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
}
@media (min-width: 769px) {
  .index-page .ant-layout-content {
    margin: 24px 16px;
  }
}
.index-page .ant-card-dark h2 {
  color: var(--dark-color-text-primary);
}
.index-page ~ div .ant-backup-list-item {
  gap: 10px;
}
.index-page ~ div .ant-version-list-item {
  --padding: 12px;
  padding: var(--padding) !important;
  gap: var(--padding);
}
.index-page.dark ~ div .ant-version-list-item svg {
  color: var(--dark-color-text-primary);
}
.index-page.dark ~ div .ant-backup-list-item svg,
.index-page.dark .ant-badge-status-text,
.index-page.dark .ant-card-extra {
  color: var(--dark-color-text-primary);
}
.index-page.dark .ant-card-actions > li {
  color: rgb(255 255 255 / 0.55);
}
.index-page.dark ~ div .ant-radio-inner {
  background-color: var(--dark-color-surface-100);
  border-color: var(--dark-color-surface-600);
}
.index-page.dark ~ div .ant-radio-checked .ant-radio-inner {
  border-color: var(--color-primary-100);
}
.index-page.dark ~ div .ant-backup-list,
.index-page.dark ~ div .ant-version-list,
.index-page.dark .ant-card-actions,
.index-page.dark .ant-card-actions > li:not(:last-child) {
  border-color: var(--dark-color-stroke);
}
.index-page .ant-card-actions {
  background: #fff0;
}
.index-page .ip-hidden {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  filter: blur(10px);
}
.index-page .xray-running-animation .ant-badge-status-dot,
.index-page .xray-processing-animation .ant-badge-status-dot {
  animation: runningAnimation 1.2s linear infinite;
}
.index-page .xray-running-animation .ant-badge-status-processing:after {
  border-color: var(--color-primary-100);
}
.index-page .xray-stop-animation .ant-badge-status-processing:after {
  border-color: #fa8c16;
}
.index-page .xray-error-animation .ant-badge-status-processing:after {
  border-color: #f5222d;
}
@keyframes runningAnimation {
  0%,
  50%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  10% {
    transform: scale(1.5);
    opacity: 0.2;
  }
}
.index-page .card-placeholder {
  text-align: center;
  padding: 30px 0;
  margin-top: 10px;
  background: #fff0;
  border: none;
}
@keyframes cardGrow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.index-page .ant-row .ant-col .ant-card {
  animation: cardGrow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}
.index-page .ant-row .ant-col:nth-child(1) .ant-card {
  animation-delay: 0.15s;
}
.index-page .ant-row .ant-col:nth-child(2) .ant-card {
  animation-delay: 0.45s;
}
.index-page .ant-row .ant-col:nth-child(3) .ant-card {
  animation-delay: 0.75s;
}
.index-page .ant-row .ant-col:nth-child(4) .ant-card {
  animation-delay: 0.3s;
}
.index-page .ant-row .ant-col:nth-child(5) .ant-card {
  animation-delay: 0.6s;
}
.index-page .ant-row .ant-col:nth-child(6) .ant-card {
  animation-delay: 0.9s;
}
.index-page .ant-row .ant-col:nth-child(7) .ant-card {
  animation-delay: 0.36s;
}
.index-page .ant-row .ant-col:nth-child(8) .ant-card {
  animation-delay: 0.66s;
}
.index-page .ant-row .ant-col:nth-child(9) .ant-card {
  animation-delay: 0.96s;
}
.index-page .ant-row .ant-col:nth-child(10) .ant-card {
  animation-delay: 0.54s;
}
.index-page .ant-row .ant-col:nth-child(11) .ant-card {
  animation-delay: 0.84s;
}
.index-page .ant-row .ant-col:nth-child(12) .ant-card {
  animation-delay: 1.14s;
}
.index-page .ant-row .ant-col:nth-child(13) .ant-card {
  animation-delay: 0.24s;
}
.index-page .ant-row .ant-col:nth-child(14) .ant-card {
  animation-delay: 0.48s;
}
.index-page .ant-row .ant-col:nth-child(15) .ant-card {
  animation-delay: 0.72s;
}
.index-page ~ div .log-container {
  height: auto;
  max-height: 500px;
  overflow: auto;
  margin-top: 0.5rem;
}
#app.login-app * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app.login-app h1 {
  text-align: center;
  height: 110px;
}
#app.login-app .ant-form-item-children .ant-btn,
#app.login-app .ant-input {
  height: 50px;
  border-radius: 30px;
}
#app.login-app .ant-input-group-addon {
  border-radius: 0 30px 30px 0;
  width: 50px;
  font-size: 18px;
}
#app.login-app .ant-input-affix-wrapper .ant-input-prefix {
  left: 23px;
}
#app.login-app .ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 50px;
}
#app.login-app .centered {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#app.login-app .title {
  font-size: 2rem;
  margin-block-end: 2rem;
}
#app.login-app .title b {
  font-weight: bold !important;
}
#app.login-app {
  overflow: hidden;
}
#app.login-app #login {
  animation: charge 0.5s both;
  background-color: #fff;
  border-radius: 2rem;
  padding: 4rem 3rem;
  transition: all 0.3s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
#app.login-app #login:hover {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.09);
}
@keyframes charge {
  from {
    transform: translateY(5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
#app.login-app .under {
  background-color: #c7ebe2;
  z-index: 0;
}
#app.login-app.dark .under {
  background-color: var(--dark-color-login-wave);
}
#app.login-app.dark #login {
  background-color: var(--dark-color-surface-100);
}
#app.login-app.dark h1 {
  color: #fff;
}
#app.login-app .ant-btn-primary-login {
  width: 100%;
}
#app.login-app .ant-btn-primary-login:focus,
#app.login-app .ant-btn-primary-login:hover {
  color: #fff;
  background-color: #065;
  border-color: #065;
  background-image: linear-gradient(270deg, #fff0 30%, #009980, #fff0 100%);
  background-repeat: no-repeat;
  animation: ma-bg-move ease-in-out 5s infinite;
  background-position-x: -500px;
  width: 95%;
  animation-delay: -0.5s;
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.045);
}
#app.login-app .ant-btn-primary-login.active,
#app.login-app .ant-btn-primary-login:active {
  color: #fff;
  background-color: #065;
  border-color: #065;
}
@keyframes ma-bg-move {
  0% {
    background-position: -500px 0;
  }
  50% {
    background-position: 1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
#app.login-app .wave-btn-bg {
  position: relative;
  border-radius: 25px;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#app.login-app.dark .wave-btn-bg {
  color: #fff;
  position: relative;
  background-color: #0a7557;
  border: 2px double #fff0;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 300%;
  width: 100%;
  z-index: 1;
}
#app.login-app.dark .wave-btn-bg:hover {
  animation: wave-btn-tara 4s ease infinite;
}
#app.login-app.dark .wave-btn-bg-cl {
  background-image: linear-gradient(#fff0, #fff0),
    radial-gradient(circle at left top, #006655, #009980, #006655) !important;
  border-radius: 3em;
}
#app.login-app.dark .wave-btn-bg-cl:hover {
  width: 95%;
}
#app.login-app.dark .wave-btn-bg-cl:before {
  position: absolute;
  content: "";
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  z-index: -1;
  background: inherit;
  background-size: inherit;
  border-radius: 4em;
  opacity: 0;
  transition: 0.5s;
}
#app.login-app.dark .wave-btn-bg-cl:hover::before {
  opacity: 1;
  filter: blur(20px);
  animation: wave-btn-tara 8s linear infinite;
}
@keyframes wave-btn-tara {
  to {
    background-position: 300%;
  }
}
#app.login-app.dark .ant-btn-primary-login {
  font-size: 14px;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(rgb(13 14 33 / 0.45), rgb(13 14 33 / 0.35));
  border-radius: 2rem;
  border: none;
  outline: none;
  background-color: #fff0;
  height: 46px;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0 15px;
  width: 100%;
  animation: none;
  background-position-x: 0;
  box-shadow: none;
}
#app.login-app .waves-header {
  position: fixed;
  width: 100%;
  text-align: center;
  background-color: #dbf5ed;
  color: #fff;
  z-index: -1;
}
#app.login-app.dark .waves-header {
  background-color: var(--dark-color-login-background);
}
#app.login-app .waves-inner-header {
  height: 50vh;
  width: 100%;
  margin: 0;
  padding: 0;
}
#app.login-app .waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -8px;
  min-height: 100px;
  max-height: 150px;
}
#app.login-app .parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
#app.login-app.dark .parallax > use {
  fill: var(--dark-color-login-wave);
}
#app.login-app .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 4s;
  opacity: 0.2;
}
#app.login-app .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 7s;
  opacity: 0.4;
}
#app.login-app .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 10s;
  opacity: 0.6;
}
#app.login-app .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 13s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
@media (max-width: 768px) {
  #app.login-app .waves {
    height: 40px;
    min-height: 40px;
  }
}
#app.login-app .words-wrapper {
  width: 100%;
  display: inline-block;
  position: relative;
  text-align: center;
}
#app.login-app .words-wrapper b {
  width: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}
#app.login-app .words-wrapper b.is-visible {
  position: relative;
}
#app.login-app .headline.zoom .words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
#app.login-app .headline {
  display: flex;
  justify-content: center;
  align-items: center;
}
#app.login-app .headline.zoom b {
  opacity: 0;
}
#app.login-app .headline.zoom b.is-visible {
  opacity: 1;
  -webkit-animation: zoom-in 0.8s;
  -moz-animation: zoom-in 0.8s;
  animation: cubic-bezier(0.215, 0.61, 0.355, 1) zoom-in 0.8s;
}
#app.login-app .headline.zoom b.is-hidden {
  -webkit-animation: zoom-out 0.8s;
  -moz-animation: zoom-out 0.8s;
  animation: cubic-bezier(0.215, 0.61, 0.355, 1) zoom-out 0.4s;
}
@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
  }
}
@-moz-keyframes zoom-in {
  0% {
    opacity: 0;
    -moz-transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateZ(0);
  }
}
@keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@-webkit-keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
  }
}
@-moz-keyframes zoom-out {
  0% {
    opacity: 1;
    -moz-transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateZ(-100px);
  }
}
@keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    -ms-transform: translateZ(-100px);
    -o-transform: translateZ(-100px);
    transform: translateZ(-100px);
  }
}
#app.login-app .setting-section {
  position: absolute;
  top: 0;
  right: 0;
  padding: 22px;
}
#app.login-app .ant-space-item .ant-switch {
  margin: 2px 0 4px;
}
#app.login-app .ant-layout-content {
  transition: none;
}
.inbounds-page .ant-table:not(.ant-table-expanded-row .ant-table),
.clients-page .ant-table,
.hosts-page .ant-table,
.nodes-page .ant-table {
  outline: 1px solid #f0f0f0;
  outline-offset: -1px;
  border-radius: 1rem;
  overflow-x: hidden;
}
.inbounds-page.dark .ant-table:not(.ant-table-expanded-row .ant-table),
.clients-page.dark .ant-table,
.hosts-page.dark .ant-table,
.nodes-page.dark .ant-table {
  outline-color: var(--dark-color-table-ring);
}

.clients-page.dark .ant-table,
.clients-page.dark .ant-table-content,
.clients-page.dark .ant-table-body,
.clients-page.dark .ant-table-header,
.clients-page.dark .ant-table-scroll,
.clients-page.dark .ant-table-container {
  outline-color: var(--dark-color-table-ring) !important;
  background-color: transparent !important;
}
.clients-page.dark .ant-table-container {
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
}
.clients-page.dark .ant-table-content {
  background-color: transparent !important;
  border: none !important;
}
.clients-page.dark .ant-table-body {
  background-color: transparent !important;
  border: none !important;
}
.clients-page.dark .ant-table-header {
  background-color: transparent !important;
  border: none !important;
}
.clients-page.dark .ant-table-wrapper {
  background-color: transparent !important;
  border: none !important;
}
.clients-page.dark .ant-table {
  background-color: transparent !important;
}
.clients-page.dark .ant-table-placeholder {
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  border: none !important;
}
.clients-page.dark .ant-table-thead {
  background-color: transparent !important;
  border: none !important;
}
.clients-page.dark .ant-table-thead > tr {
  background-color: transparent !important;
  border: none !important;
}
.clients-page.dark .ant-table-thead > tr > th {
  background-color: transparent !important;
  border-bottom: 1px solid var(--dark-color-table-ring) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.clients-page.dark .ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--dark-color-table-ring) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.clients-page.dark .ant-table-thead > tr > th,
.clients-page.dark .ant-table-tbody > tr > td,
.hosts-page.dark .ant-table-thead > tr > th,
.hosts-page.dark .ant-table-tbody > tr > td,
.nodes-page.dark .ant-table-thead > tr > th,
.nodes-page.dark .ant-table-tbody > tr > td {
  border-bottom-color: var(--dark-color-table-ring) !important;
  border-top-color: var(--dark-color-table-ring) !important;
  border-left-color: var(--dark-color-table-ring) !important;
  border-right-color: var(--dark-color-table-ring) !important;
  border-color: var(--dark-color-table-ring) !important;
}
.clients-page.dark .client-table-header,
.clients-page.dark .client-table-header th {
  background-color: var(--dark-color-surface-200) !important;
  color: var(--dark-color-text-primary) !important;
  outline-color: var(--dark-color-table-ring) !important;
}
.clients-page.dark .client-table-odd-row {
  background-color: var(--dark-color-surface-100) !important;
}
.clients-page.dark .ant-table-tbody > tr > td {
  background-color: transparent !important;
  color: var(--dark-color-text-primary) !important;
}
.clients-page.dark .ant-table-thead > tr > th {
  color: var(--dark-color-text-primary) !important;
}
.clients-page .ant-table-thead > tr > th {
  white-space: nowrap;
}
.inbounds-page .ant-table .ant-table-content .ant-table-scroll .ant-table-body {
  overflow-y: hidden;
}
.inbounds-page
  .ant-table
  .ant-table-content
  .ant-table-tbody
  tr:last-child
  .ant-table-wrapper {
  margin: -10px 22px !important;
}
.inbounds-page
  .ant-table
  .ant-table-content
  .ant-table-tbody
  tr:last-child
  .ant-table-wrapper
  .ant-table {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.inbounds-page
  .ant-table
  .ant-table-content
  .ant-table-tbody
  tr:last-child
  tr:last-child
  td {
  border-bottom-color: #fff0;
}
.inbounds-page
  .ant-table
  .ant-table-tbody
  tr:last-child.ant-table-expanded-row
  .ant-table-wrapper
  .ant-table-tbody
  > tr:last-child
  > td:first-child {
  border-bottom-left-radius: 6px;
}
.inbounds-page
  .ant-table
  .ant-table-tbody
  tr:last-child.ant-table-expanded-row
  .ant-table-wrapper
  .ant-table-tbody
  > tr:last-child
  > td:last-child {
  border-bottom-right-radius: 6px;
}
@media (min-width: 769px) {
  .inbounds-page .ant-layout-content {
    margin: 24px 16px;
  }
}
@media (max-width: 768px) {
  .inbounds-page .ant-card-body {
    padding: 0.5rem;
  }
  .inbounds-page
    .ant-table
    .ant-table-content
    .ant-table-tbody
    tr:last-child
    .ant-table-wrapper {
    margin: -10px 2px !important;
  }
}
.inbounds-page.dark ~ div .ant-switch-small:not(.ant-switch-checked) {
  background-color: var(--dark-color-surface-100);
}
.inbounds-page .ant-custom-popover-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
}
.inbounds-page .ant-col-sm-24 {
  margin: 0.5rem -2rem 0.5rem 2rem;
}
.inbounds-page tr.hideExpandIcon .ant-table-row-expand-icon {
  display: none;
}
.inbounds-page .infinite-tag,
.inbounds-page ~ div .infinite-tag {
  padding: 0 5px;
  border-radius: 2rem;
  min-width: 50px;
  min-height: 22px;
}
.inbounds-page .infinite-bar .ant-progress-inner .ant-progress-bg {
  background-color: #f2eaf1;
  border: #d5bed2 solid 1px;
}
.inbounds-page.dark .infinite-bar .ant-progress-inner .ant-progress-bg {
  background-color: #7a316f !important;
  border: #7a316f solid 1px;
}
.inbounds-page ~ div .ant-collapse {
  margin: 5px 0;
}
.inbounds-page .info-large-tag,
.inbounds-page ~ div .info-large-tag {
  max-width: 200px;
  overflow: hidden;
}
.inbounds-page .client-comment {
  font-size: 12px;
  opacity: 0.75;
  cursor: help;
}
.inbounds-page .client-email {
  font-weight: 500;
}
.inbounds-page .client-popup-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.inbounds-page .online-animation .ant-badge-status-dot {
  animation: onlineAnimation 1.2s linear infinite;
}
@keyframes onlineAnimation {
  0%,
  50%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  10% {
    transform: scale(1.5);
    opacity: 0.2;
  }
}
.inbounds-page .tr-table-box {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.inbounds-page .tr-table-rt {
  flex-basis: 70px;
  min-width: 70px;
  text-align: end;
}
.inbounds-page .tr-table-lt {
  flex-basis: 70px;
  min-width: 70px;
  text-align: start;
}
.inbounds-page .tr-table-bar {
  flex-basis: 160px;
  min-width: 60px;
}
.inbounds-page .tr-infinity-ch {
  font-size: 14pt;
  max-height: 24px;
  display: inline-flex;
  align-items: center;
}
.inbounds-page .ant-table-expanded-row .ant-table .ant-table-body {
  overflow-x: hidden;
}
.inbounds-page .ant-table-expanded-row .ant-table-tbody > tr > td {
  padding: 10px 2px;
}
.inbounds-page .ant-table-expanded-row .ant-table-thead > tr > th {
  padding: 12px 2px;
}
.idx-cpu-history-svg {
  display: block;
  overflow: unset !important;
}
.dark .idx-cpu-history-svg .cpu-grid-line {
  stroke: rgb(255 255 255 / 0.08);
}
.dark .idx-cpu-history-svg .cpu-grid-h-line {
  stroke: rgb(255 255 255 / 0.25);
}
.dark .idx-cpu-history-svg .cpu-grid-y-text,
.dark .idx-cpu-history-svg .cpu-grid-x-text {
  fill: rgb(200 200 200 / 0.8);
}
.idx-cpu-history-svg .cpu-grid-text {
  stroke-width: 3;
  paint-order: stroke;
  stroke: rgb(0 0 0 / 0.05);
}
.dark .idx-cpu-history-svg .cpu-grid-text {
  fill: #fff;
  stroke: rgb(0 0 0 / 0.35);
}
.inbounds-page ~ div #inbound-modal form textarea.ant-input {
  margin: 4px 0;
}
@media (min-width: 769px) {
  .settings-page .ant-layout-content {
    margin: 24px 16px;
  }
}
@media (max-width: 768px) {
  .settings-page .ant-tabs-nav .ant-tabs-tab {
    margin: 0;
    padding: 12px 0.5rem;
  }
}
.settings-page .ant-tabs-bar {
  margin: 0;
}
.settings-page .ant-list-item {
  display: block;
}
.settings-page .alert-msg {
  color: #c27512;
  font-weight: 400;
  font-size: 16px;
  padding: 0.5rem 1rem;
  text-align: center;
  background: rgb(255 145 0 / 15%);
  margin: 1.5rem 2.5rem 0rem;
  border-radius: 0.5rem;
  transition: all 0.5s;
  animation: settings-page-signal 3s cubic-bezier(0.18, 0.89, 0.32, 1.28)
    infinite;
}
.settings-page .alert-msg:hover {
  cursor: default;
  transition-duration: 0.3s;
  animation: settings-page-signal 0.9s ease infinite;
}
@keyframes settings-page-signal {
  0% {
    box-shadow: 0 0 0 0 rgb(194 118 18 / 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px #fff0;
  }
  100% {
    box-shadow: 0 0 0 6px #fff0;
  }
}
.settings-page .alert-msg > i {
  color: inherit;
  font-size: 24px;
}
.settings-page.dark .ant-input-password-icon {
  color: var(--dark-color-text-primary);
}
.settings-page .ant-collapse-content-box .ant-alert {
  margin-block-end: 12px;
}
@media (min-width: 769px) {
  .xray-page .ant-layout-content {
    margin: 24px 16px;
  }
}
@media (max-width: 768px) {
  .xray-page .ant-tabs-nav .ant-tabs-tab {
    margin: 0;
    padding: 12px 0.5rem;
  }
  .xray-page .ant-table-thead > tr > th,
  .xray-page .ant-table-tbody > tr > td {
    padding: 10px 0;
  }
}
.xray-page .ant-tabs-bar {
  margin: 0;
}
.xray-page .ant-list-item {
  display: block;
}
.xray-page .ant-list-item > li {
  padding: 10px 20px !important;
}
.xray-page .ant-collapse-content-box .ant-alert {
  margin-block-end: 12px;
}
#app.login-app #login input.ant-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #f8f8f8 inset;
  box-shadow: 0 0 0 100px #f8f8f8 inset;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
  background-clip: text;
}
#app.login-app
  #login
  .ant-input-affix-wrapper:hover
  .ant-input:-webkit-autofill:not(.ant-input-disabled),
#app.login-app #login input.ant-input:-webkit-autofill:hover,
#app.login-app #login input.ant-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #e8f4f2 inset;
  box-shadow: 0 0 0 100px #e8f4f2 inset;
}
#app.login-app.dark
  #login
  .ant-input-affix-wrapper:hover
  .ant-input:-webkit-autofill:not(.ant-input-disabled),
#app.login-app.dark #login input.ant-input:-webkit-autofill {
  -webkit-text-fill-color: var(--dark-color-text-primary);
  caret-color: var(--dark-color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--dark-color-surface-200) inset;
  box-shadow: 0 0 0 1000px var(--dark-color-surface-200) inset;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
#app.login-app.dark
  #login
  .ant-input-affix-wrapper:hover
  .ant-input:-webkit-autofill:not(.ant-input-disabled),
#app.login-app.dark #login input.ant-input:-webkit-autofill:hover,
#app.login-app.dark #login input.ant-input:-webkit-autofill:focus {
  border-color: var(--dark-color-surface-300);
}
.dark .ant-descriptions-bordered .ant-descriptions-item-label {
  background-color: var(--dark-color-background);
}
.dark .ant-descriptions-bordered .ant-descriptions-view,
.dark .ant-descriptions-bordered .ant-descriptions-row,
.dark .ant-descriptions-bordered .ant-descriptions-item-label,
.dark .ant-list-bordered {
  border-color: var(--dark-color-surface-400);
}
.dark .ant-descriptions-bordered .ant-descriptions-item-label,
.dark .ant-descriptions-bordered .ant-descriptions-item-content {
  color: var(--dark-color-text-primary);
}
.dark .ant-dropdown-menu {
  background-color: var(--dark-color-surface-200);
}
.dark .ant-dropdown-menu .ant-dropdown-menu-item {
  color: hsl(0 0% 100% / 0.65);
}
.dark .ant-dropdown-menu .ant-dropdown-menu-item:hover {
  background-color: var(--dark-color-surface-600);
}
.subscription-page .ant-list.ant-list-split.ant-list-bordered {
  overflow: hidden;
}
.subscription-page .ant-list.ant-list-split.ant-list-bordered .ant-list-item {
  overflow-x: auto;
}
.subscription-page .ant-btn.ant-btn-primary.ant-btn-lg.ant-dropdown-trigger {
  border-radius: 4rem;
  padding: 0 20px;
}
.subscription-page .subscription-card {
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-color: transparent !important;
}
.dark .subscription-page .subscription-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  background-color: transparent !important;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mt-5 {
  margin-top: 5px;
}
.mr-8 {
  margin-right: 8px;
}
.ml-10 {
  margin-left: 10px;
}
.mr-05 {
  margin-right: 0.5rem;
}
.fs-1rem {
  font-size: 1rem;
}
.w-100 {
  width: 100%;
}
.w-70 {
  width: 70px;
}
.w-95 {
  width: 95px;
}
.text-center {
  text-align: center;
}
.cursor-pointer {
  cursor: pointer;
}
.float-right {
  float: right;
}
.va-middle {
  vertical-align: middle;
}
.d-flex {
  display: flex;
}
.justify-end {
  justify-content: flex-end;
}
.max-w-400 {
  max-width: 400px;
  display: inline-block;
}
.ant-space.jc-center {
  justify-content: center;
}
.min-h-0 {
  min-height: 0;
}
.min-h-100vh {
  min-height: 100vh;
}
.h-100 {
  height: 100%;
}
.h-50px {
  height: 50px;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-auto {
  overflow-x: auto;
}
.mt-1rem {
  margin-top: 1rem;
}
.my-3rem {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.nodes-page .ant-table .ant-table-tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 1rem;
}
.nodes-page .ant-table .ant-table-tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 1rem;
}
@media (min-width: 769px) {
  .nodes-page .ant-layout-content {
    margin: 24px 16px;
  }
}
html[data-glass-morphism="true"] {
  background: #f0f0f3 !important;
  background-attachment: fixed;
}
html[data-glass-morphism="true"] body {
  background: #f0f0f3 !important;
  background-color: #f0f0f3 !important;
  color: #333 !important;
  position: relative;
}
html[data-glass-morphism="true"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 25% 30%, #ffd6d6, transparent 40%),
    radial-gradient(circle at 75% 70%, #c8f7dc, transparent 40%),
    radial-gradient(circle at 50% 50%, #cce4ff, transparent 50%);
  background-size: 200% 200%;
  animation: bgMove 25s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes bgMove {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  50% {
    background-position: 50% 50%, 0% 100%, 50% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
}
html[data-glass-morphism="true"] > .ant-layout,
html[data-glass-morphism="true"] .ant-layout {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-glass-morphism="true"] .ant-layout-content {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-glass-morphism="true"] .ant-menu:not(.ant-menu-dark),
html[data-glass-morphism="true"] .ant-menu-light {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-menu-item,
html[data-glass-morphism="true"] .ant-menu-submenu-title {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-menu-item:hover,
html[data-glass-morphism="true"] .ant-menu-submenu-title:hover {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-layout-sider:not(.ant-layout-sider-dark) {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-glass-morphism="true"] .ant-layout-sider,
html[data-glass-morphism="true"] .ant-menu-dark,
html[data-glass-morphism="true"] .ant-menu-dark .ant-menu-sub,
html[data-glass-morphism="true"] .ant-table,
html[data-glass-morphism="true"] .ant-collapse-content,
html[data-glass-morphism="true"] .ant-tabs,
html[data-glass-morphism="true"] .ant-drawer-content {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-table {
  position: relative;
  overflow: hidden;
}
html[data-glass-morphism="true"] .ant-table > * {
  position: relative;
  z-index: 2;
}
html[data-glass-morphism="true"] .ant-table::after {
  z-index: 1;
}
html[data-glass-morphism="true"] .ant-table:hover::after {
  animation: appleSweep 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes rotateBorder {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}
@keyframes floatGlass {
  0% {
    transform: translateY(0) rotateX(0) rotateY(0);
  }
  50% {
    transform: translateY(-4px) rotateX(1deg) rotateY(1deg);
  }
  100% {
    transform: translateY(0) rotateX(0) rotateY(0);
  }
}
html[data-glass-morphism="true"] .ant-card::after,
html[data-glass-morphism="true"] .ant-table::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 65%,
    transparent 100%
  );
  opacity: 0;
  transform: translate(-150%, -150%) scale(2);
  mix-blend-mode: overlay;
  z-index: 1;
}
html[data-glass-morphism="true"] .ant-card:hover::after,
html[data-glass-morphism="true"] .ant-table:hover::after {
  animation: appleSweep 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
html[data-glass-morphism="true"] .ant-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
html[data-glass-morphism="true"] .ant-card > * {
  position: relative;
  z-index: 2;
}
html[data-glass-morphism="true"] .ant-card::after {
  z-index: 1;
}
html[data-glass-morphism="true"] .ant-card:hover::after {
  animation: appleSweep 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
html[data-glass-morphism="true"] .ant-table:hover {
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
@keyframes appleSweep {
  0% {
    opacity: 0;
    transform: translate(-150%, -150%) scale(2);
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(50%, 50%) scale(2);
  }
}
html[data-glass-morphism="true"] .ant-layout-sider {
  background: color-mix(in srgb, var(--c-glass) 8%, transparent) !important;
}
html[data-glass-morphism="true"] .ant-card:hover,
html[data-glass-morphism="true"] .ant-card-hoverable:hover,
html[data-glass-morphism="true"] .ant-space-item > .ant-tabs:hover {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
}
html[data-glass-morphism="true"] .ant-table:hover {
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2) !important;
}
html[data-glass-morphism="true"] .ant-input,
html[data-glass-morphism="true"] .ant-input-group-addon,
html[data-glass-morphism="true"] .ant-collapse,
html[data-glass-morphism="true"] .ant-select-selection,
html[data-glass-morphism="true"] .ant-input-number,
html[data-glass-morphism="true"] .ant-select-dropdown,
html[data-glass-morphism="true"] .ant-select-dropdown-menu-item,
html[data-glass-morphism="true"]
  .ant-select-selection--multiple
  .ant-select-selection__choice {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-input:hover,
html[data-glass-morphism="true"] .ant-input:focus,
html[data-glass-morphism="true"] .ant-select-selection:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.1)
  ) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
}
html[data-glass-morphism="true"]
  .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger) {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
html[data-glass-morphism="true"]
  .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):hover {
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
}
html[data-glass-morphism="true"] .ant-btn-primary {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  color: rgba(0, 0, 0, 0.85) !important;
  border-radius: 999px !important;
}
html[data-glass-morphism="true"] .ant-btn-primary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}
html[data-glass-morphism="true"]
  .ant-table-tbody
  > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
  > td {
  background: rgba(255, 255, 255, 0.3) !important;
}
html[data-glass-morphism="true"] .ant-menu-item:hover,
html[data-glass-morphism="true"] .ant-menu-submenu-title:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-glass-morphism="true"]
  .ant-menu:not(.ant-menu-horizontal)
  .ant-menu-item-selected {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-popover-inner,
html[data-glass-morphism="true"] .ant-tooltip-inner {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-dropdown-menu {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-dropdown-menu-item:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
html[data-glass-morphism="true"]
  .ant-tag:not(.ant-tag-red):not(.ant-tag-orange):not(.ant-tag-green):not(
    .ant-tag-blue
  ):not(.ant-tag-purple) {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-switch {
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
html[data-glass-morphism="true"] .ant-switch-checked {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
html[data-glass-morphism="true"] .ant-switch:after,
html[data-glass-morphism="true"] .ant-switch-checked:after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.7)
  ) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
html[data-glass-morphism="true"] .ant-checkbox-inner {
  background: color-mix(in srgb, var(--c-glass) 12%, transparent) !important;
  backdrop-filter: blur(5px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(5px) saturate(var(--saturation));
  border: none !important;
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0 -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0 1px 5px 0
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0 6px 16px 0
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      ) !important;
}
html[data-glass-morphism="true"] .ant-checkbox-checked .ant-checkbox-inner {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}
html[data-glass-morphism="true"] .ant-progress-inner {
  background: color-mix(in srgb, var(--c-glass) 8%, transparent) !important;
  backdrop-filter: blur(5px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(5px) saturate(var(--saturation));
  box-shadow: inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
      transparent
    ) !important;
}
html[data-glass-morphism="true"] .ant-progress-bg {
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}
html[data-glass-morphism="true"] .ant-layout-header {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-input-affix-wrapper {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
html[data-glass-morphism="true"] .ant-input-affix-wrapper:hover,
html[data-glass-morphism="true"] .ant-input-affix-wrapper-focused {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.1)
  ) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
}
html[data-glass-morphism="true"] .ant-input-affix-wrapper .ant-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-glass-morphism="true"] textarea.ant-input {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
html[data-glass-morphism="true"] .ant-modal-body .ant-input,
html[data-glass-morphism="true"] .ant-modal-body .ant-input-affix-wrapper,
html[data-glass-morphism="true"] .ant-modal-body textarea.ant-input,
html[data-glass-morphism="true"] .ant-modal-body .ant-select-selection,
html[data-glass-morphism="true"] .ant-modal-body .ant-input-number {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-modal-content,
html[data-glass-morphism="true"] .ant-modal-header {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-modal-title,
html[data-glass-morphism="true"] .ant-modal-close-x,
html[data-glass-morphism="true"] .ant-modal-body,
html[data-glass-morphism="true"] .ant-modal-footer,
html[data-glass-morphism="true"] .ant-modal-header-title {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-modal-body * {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-modal-body label,
html[data-glass-morphism="true"] .ant-modal-body .ant-form-item-label > label {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-table-thead > tr > th {
  background: rgba(255, 255, 255, 0.3) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
html[data-glass-morphism="true"] .ant-table-tbody > tr > td {
  color: rgba(0, 0, 0, 0.65) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-glass-morphism="true"] .ant-card-head,
html[data-glass-morphism="true"] .ant-card-head-title,
html[data-glass-morphism="true"] .ant-card-extra {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-tabs-tab {
  color: rgba(0, 0, 0, 0.65) !important;
}
html[data-glass-morphism="true"] .ant-tabs-tab-active {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] h1,
html[data-glass-morphism="true"] h2,
html[data-glass-morphism="true"] h3,
html[data-glass-morphism="true"] h4,
html[data-glass-morphism="true"] h5,
html[data-glass-morphism="true"] h6 {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] {
  background: #e8e8e9;
  background-attachment: fixed;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
html[data-glass-morphism="true"] .ant-modal-mask {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
html[data-glass-morphism="true"] .ant-table-placeholder {
  background: color-mix(in srgb, var(--c-glass) 12%, transparent) !important;
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  border: none !important;
  border-radius: 0 0 1rem 1rem !important;
  box-shadow: inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--c-light) calc(var(--glass-reflex-light) * 10%),
        transparent
      ),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
          calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
        transparent
      ),
    inset -1.5px 2.5px 0 -2px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
        transparent
      ),
    inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark)
          calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0 1px 5px 0
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
        transparent
      ),
    0 6px 16px 0
      color-mix(
        in srgb,
        var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
        transparent
      ) !important;
  color: rgba(0, 0, 0, 0.25) !important;
}
html[data-glass-morphism="true"] .ant-tag-red,
html[data-glass-morphism="true"] .ant-alert-error,
html[data-glass-morphism="true"] .ant-tag-orange,
html[data-glass-morphism="true"] .ant-alert-warning,
html[data-glass-morphism="true"] .ant-tag-green,
html[data-glass-morphism="true"] .ant-tag-blue,
html[data-glass-morphism="true"] .ant-tag-purple {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-tag-red,
html[data-glass-morphism="true"] .ant-alert-error {
  color: #cf3c3c !important;
}
html[data-glass-morphism="true"] .ant-tag-orange,
html[data-glass-morphism="true"] .ant-alert-warning {
  color: #f37b24 !important;
}
html[data-glass-morphism="true"] .ant-tag-green {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  box-shadow: none !important;
}
html[data-glass-morphism="true"]
  .ant-radio-group-solid
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
html[data-glass-morphism="true"]
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  color: rgba(0, 0, 0, 0.85) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
}
html[data-glass-morphism="true"] .ant-tag-blue {
  color: #0e49b5 !important;
}
html[data-glass-morphism="true"] .ant-tag-purple {
  color: #7a316f !important;
}
html[data-glass-morphism="true"] .ant-input,
html[data-glass-morphism="true"] .ant-input-affix-wrapper,
html[data-glass-morphism="true"] textarea.ant-input,
html[data-glass-morphism="true"] .ant-select-selection,
html[data-glass-morphism="true"] .ant-select-selector,
html[data-glass-morphism="true"] .ant-input-number {
  border-radius: 24px !important;
}
html[data-glass-morphism="true"]
  .ant-menu:not(.ant-menu-horizontal)
  .ant-menu-item-selected {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  color: rgba(0, 0, 0, 0.85) !important;
  background-image: none !important;
  animation: none !important;
}
html[data-glass-morphism="true"]
  .ant-radio-button-wrapper-checked:not(
    .ant-radio-button-wrapper-disabled
  ):before,
html[data-glass-morphism="true"]
  .ant-radio-button-wrapper-checked:not(
    .ant-radio-button-wrapper-disabled
  ):hover:before {
  background-color: rgba(255, 255, 255, 0.25) !important;
}
html[data-glass-morphism="true"] .ant-tabs-ink-bar {
  background-color: rgba(255, 255, 255, 0.25) !important;
  height: 2px !important;
}
html[data-glass-morphism="true"]
  .ant-progress-inner:not(.ant-progress-circle-gradient)
  .ant-progress-circle-path,
html[data-glass-morphism="true"] .ant-progress-circle-path,
html[data-glass-morphism="true"] .ant-progress-circle-trail {
  stroke: rgb(59 45 45 / 22%) !important;
}
html[data-glass-morphism="true"]
  .index-page
  .xray-running-animation
  .ant-badge-status-processing:after {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
html[data-glass-morphism="true"] #app.login-app .under {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-glass-morphism="true"] #app.login-app .under::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 25% 30%, #ffd6d6, transparent 40%),
    radial-gradient(circle at 75% 70%, #c8f7dc, transparent 40%),
    radial-gradient(circle at 50% 50%, #cce4ff, transparent 50%);
  background-size: 200% 200%;
  animation: bgMove 25s linear infinite;
  z-index: -1;
  pointer-events: none;
}
html[data-glass-morphism="true"] #app.login-app #login {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
html[data-glass-morphism="true"] #app.login-app #login::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 65%,
    transparent 100%
  );
  opacity: 0;
  transform: translate(-150%, -150%) scale(2);
  mix-blend-mode: overlay;
  z-index: 1;
}
html[data-glass-morphism="true"] #app.login-app #login:hover::after {
  animation: appleSweep 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
html[data-glass-morphism="true"] #app.login-app .waves-header {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-glass-morphism="true"] #app.login-app .waves {
  opacity: 0.3;
}
html[data-glass-morphism="true"] .ant-layout.ant-layout-has-sider > .ant-layout,
html[data-glass-morphism="true"]
  .ant-layout.ant-layout-has-sider
  > .ant-layout-content {
  position: relative;
  overflow-x: hidden;
}
html[data-glass-morphism="true"]
  .ant-layout.ant-layout-has-sider
  > .ant-layout::before,
html[data-glass-morphism="true"]
  .ant-layout.ant-layout-has-sider
  > .ant-layout-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 30%, #ffd6d6, transparent 40%),
    radial-gradient(circle at 75% 70%, #c8f7dc, transparent 40%),
    radial-gradient(circle at 50% 50%, #cce4ff, transparent 50%);
  background-size: 200% 200%;
  animation: bgMove 25s linear infinite;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}
html[data-glass-morphism="true"] .ant-sidebar .ant-layout-sider {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
html[data-glass-morphism="true"]
  .ant-layout-sider:not(.ant-layout-sider-collapsed) {
  width: auto !important;
  min-width: 200px !important;
  max-width: none !important;
}
html[data-glass-morphism="true"] .ant-menu-item,
html[data-glass-morphism="true"] .ant-menu-submenu-title,
html[data-glass-morphism="true"] .ant-menu-theme-switch .ant-menu-item {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
}
html[data-glass-morphism="true"] .ant-menu-item span,
html[data-glass-morphism="true"] .ant-menu-submenu-title span,
html[data-glass-morphism="true"] .ant-menu-theme-switch .ant-menu-item span {
  display: inline-block !important;
  max-width: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
html[data-glass-morphism="true"] .ant-message-notice-content {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-glass-morphism="true"] .ant-spin-dot-item {
  background-color: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}
html[data-glass-morphism="true"] .ant-drawer-mask {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
html[data-glass-morphism="true"]
  .ant-drawer-content-wrapper
  .ant-drawer-content {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.15)
  ) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
html[data-glass-morphism="true"] .drawer-handle {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.15)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
.offline-tag {
  border: 1px solid #000 !important;
}
.dark .offline-tag {
  border-color: var(--dark-color-surface-400) !important;
}
html[data-glass-morphism="true"] .offline-tag {
  border: 1px solid #cf3c3c !important;
  color: #cf3c3c !important;
}
.dark .ant-alert-info {
  background-color: var(--dark-color-tag-blue-bg);
  border-color: var(--dark-color-tag-blue-border);
  color: var(--dark-color-tag-blue-color);
}
.dark .ant-alert-info .ant-alert-message,
.dark .ant-alert-info .ant-alert-description,
.dark .ant-alert-info .ant-alert-description * {
  color: var(--dark-color-text-primary) !important;
}
.dark .ant-alert-info .ant-alert-icon {
  color: var(--dark-color-tag-blue-color);
}
html[data-glass-morphism="true"] .ant-alert-info {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
html[data-glass-morphism="true"] .ant-alert-info .ant-alert-message,
html[data-glass-morphism="true"] .ant-alert-info .ant-alert-description {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* ============================================
   FIX: Select dropdown arrow icon hover state
   Prevents white square on hover
   ============================================ */
/* Target all possible arrow containers */
.ant-select-arrow,
.ant-select-selection__arrow,
.ant-select-arrow *,
.ant-select-selection__arrow * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Arrow wrapper styling */
.ant-select-arrow,
.ant-select-selection__arrow {
  color: rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease;
  background: transparent !important;
  background-color: transparent !important;
}
.ant-select:hover .ant-select-arrow,
.ant-select:hover .ant-select-selection__arrow,
.ant-select-focused .ant-select-arrow,
.ant-select-focused .ant-select-selection__arrow,
.ant-select-open .ant-select-arrow,
.ant-select-open .ant-select-selection__arrow {
  color: rgba(0, 0, 0, 0.45);
  background: transparent !important;
  background-color: transparent !important;
}
.dark .ant-select-arrow,
.dark .ant-select-selection__arrow {
  color: rgba(255, 255, 255, 0.35);
}
.dark .ant-select:hover .ant-select-arrow,
.dark .ant-select:hover .ant-select-selection__arrow,
.dark .ant-select-focused .ant-select-arrow,
.dark .ant-select-focused .ant-select-selection__arrow,
.dark .ant-select-open .ant-select-arrow,
.dark .ant-select-open .ant-select-selection__arrow {
  color: rgba(255, 255, 255, 0.65);
  background: transparent !important;
  background-color: transparent !important;
}
/* Fix all icon variants - no background ever */
.ant-select-arrow .anticon,
.ant-select-arrow .anticon-down,
.ant-select-arrow .anticon-up,
.ant-select-arrow .anticon.anticon-down,
.ant-select-arrow .anticon.anticon-down.ant-select-arrow-icon,
.ant-select-selection__arrow .anticon,
.ant-select-selection__arrow .anticon-down,
.ant-select-selection__arrow .anticon-up,
.ant-select-selection__arrow .anticon.anticon-down,
.ant-select-selection__arrow .anticon.anticon-down.ant-select-arrow-icon,
.ant-select-arrow i,
.ant-select-arrow svg,
.ant-select-selection__arrow i,
.ant-select-selection__arrow svg {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  fill: currentColor;
  box-shadow: none !important;
}
/* Override any hover/active/focus states */
.ant-select-arrow:hover,
.ant-select-arrow:active,
.ant-select-arrow:focus,
.ant-select-selection__arrow:hover,
.ant-select-selection__arrow:active,
.ant-select-selection__arrow:focus,
.ant-select-arrow .anticon:hover,
.ant-select-arrow .anticon:active,
.ant-select-arrow .anticon:focus,
.ant-select-selection__arrow .anticon:hover,
.ant-select-selection__arrow .anticon:active,
.ant-select-selection__arrow .anticon:focus,
.ant-select-arrow i:hover,
.ant-select-arrow i:active,
.ant-select-arrow i:focus,
.ant-select-selection__arrow i:hover,
.ant-select-selection__arrow i:active,
.ant-select-selection__arrow i:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Special case for when select has value (selected state) */
.ant-select-selection-selected-value + .ant-select-arrow,
.ant-select-selection-selected-value + .ant-select-selection__arrow,
.ant-select-selection-selected-value ~ .ant-select-arrow,
.ant-select-selection-selected-value ~ .ant-select-selection__arrow {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* When select has value AND is hovered */
.ant-select-selection:hover .ant-select-selection-selected-value ~ .ant-select-arrow,
.ant-select-selection:hover .ant-select-selection-selected-value ~ .ant-select-selection__arrow,
.ant-select:hover .ant-select-selection-selected-value ~ .ant-select-arrow,
.ant-select:hover .ant-select-selection-selected-value ~ .ant-select-selection__arrow {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Ensure parent selection element doesn't create background */
.ant-select-selection:hover .ant-select-arrow,
.ant-select-selection:hover .ant-select-selection__arrow,
.ant-select-selection:focus .ant-select-arrow,
.ant-select-selection:focus .ant-select-selection__arrow,
.ant-select:hover .ant-select-arrow,
.ant-select:hover .ant-select-selection__arrow,
.ant-select:focus .ant-select-arrow,
.ant-select:focus .ant-select-selection__arrow {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* CRITICAL: Override any hover background on arrow when parent is hovered */
.ant-select-selection:hover .ant-select-arrow *,
.ant-select-selection:hover .ant-select-selection__arrow *,
.ant-select:hover .ant-select-arrow *,
.ant-select:hover .ant-select-selection__arrow *,
.ant-select-selection:focus .ant-select-arrow *,
.ant-select-selection:focus .ant-select-selection__arrow *,
.ant-select:focus .ant-select-arrow *,
.ant-select:focus .ant-select-selection__arrow * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Fix for Ant Design v1.x structure */
.ant-select-selection__rendered + .ant-select-selection__arrow,
.ant-select-selection__rendered ~ .ant-select-arrow {
  background: transparent !important;
  background-color: transparent !important;
}
/* Nuclear option - target any element inside select that might have background */
.ant-select .ant-select-arrow *,
.ant-select .ant-select-selection__arrow *,
.ant-select-selection .ant-select-arrow *,
.ant-select-selection .ant-select-selection__arrow * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Fix pseudo-elements that might create white square */
.ant-select-arrow::before,
.ant-select-arrow::after,
.ant-select-selection__arrow::before,
.ant-select-selection__arrow::after,
.ant-select-arrow .anticon::before,
.ant-select-arrow .anticon::after,
.ant-select-selection__arrow .anticon::before,
.ant-select-selection__arrow .anticon::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* ABSOLUTE OVERRIDE: When selection is hovered, arrow must stay transparent */
.ant-select-selection:hover .ant-select-arrow,
.ant-select-selection:hover .ant-select-selection__arrow,
.ant-select:hover .ant-select-selection .ant-select-arrow,
.ant-select:hover .ant-select-selection .ant-select-selection__arrow {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.ant-select-selection:hover .ant-select-arrow .anticon,
.ant-select-selection:hover .ant-select-arrow .anticon-down,
.ant-select-selection:hover .ant-select-selection__arrow .anticon,
.ant-select-selection:hover .ant-select-selection__arrow .anticon-down,
.ant-select:hover .ant-select-arrow .anticon,
.ant-select:hover .ant-select-arrow .anticon-down,
.ant-select:hover .ant-select-selection__arrow .anticon,
.ant-select:hover .ant-select-selection__arrow .anticon-down {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* FINAL OVERRIDE: Maximum specificity for arrow in hover state */
.ant-select.ant-select-enabled:hover .ant-select-selection .ant-select-arrow,
.ant-select.ant-select-enabled:hover .ant-select-selection .ant-select-selection__arrow,
.ant-select.ant-select-enabled.ant-select-focused:hover .ant-select-selection .ant-select-arrow,
.ant-select.ant-select-enabled.ant-select-focused:hover .ant-select-selection .ant-select-selection__arrow,
.ant-select-selection:hover .ant-select-arrow,
.ant-select-selection:hover .ant-select-selection__arrow,
.ant-select-selection.ant-select-selection--single:hover .ant-select-arrow,
.ant-select-selection.ant-select-selection--single:hover .ant-select-selection__arrow {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.ant-select.ant-select-enabled:hover .ant-select-selection .ant-select-arrow *,
.ant-select.ant-select-enabled:hover .ant-select-selection .ant-select-selection__arrow *,
.ant-select-selection:hover .ant-select-arrow *,
.ant-select-selection:hover .ant-select-selection__arrow * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================
   FIX: Clients page selection actions bar
   Better styling for bulk action buttons
   ============================================ */
.clients-page .clients-selection-actions {
  background: linear-gradient(135deg, rgba(0, 135, 113, 0.08), rgba(0, 135, 113, 0.04));
  border: 1px solid rgba(0, 135, 113, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.dark .clients-page .clients-selection-actions {
  background: linear-gradient(135deg, rgba(0, 135, 113, 0.15), rgba(0, 135, 113, 0.08));
  border: 1px solid rgba(0, 135, 113, 0.3);
}
html[data-glass-morphism="true"] .clients-page .clients-selection-actions {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ============================================
   FIX: Mobile filters responsiveness
   Compact, modern filter design
   ============================================ */
.clients-filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.clients-filters-wrapper .ant-select,
.clients-filters-wrapper .ant-input-search {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .clients-filters-wrapper {
    gap: 6px;
  }
  .clients-filters-wrapper .ant-select {
    min-width: 90px !important;
    flex: 1 1 auto;
    max-width: 140px;
  }
  .clients-filters-wrapper .ant-input-search {
    flex: 1 1 auto;
    max-width: 160px !important;
  }
}
@media (max-width: 480px) {
  .clients-filters-wrapper {
    gap: 4px;
  }
  .clients-filters-wrapper .ant-select {
    min-width: 80px !important;
    max-width: 110px !important;
  }
  .clients-filters-wrapper .ant-input-search {
    max-width: 130px !important;
  }
}

/* ============================================
   FIX: Group description text truncation
   ============================================ */
.groups-table .group-description {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
/* Subscription page themes */
@property --sub-theme-rotate {
  syntax: "<angle>";
  initial-value: 45deg;
  inherits: false;
}
/* Rainbow theme - animated gradient like QR codes - applied only to subscription card */
/* Rainbow theme - applied to subscription card body background (not header) */
.subscription-page.subscription-theme-rainbow .subscription-card .ant-card-body {
  background-image: linear-gradient(
    var(--sub-theme-rotate),
    #76ccb4,
    #ff6b9d,
    #c44569,
    #f8b500,
    #76ccb4
  );
  background-size: 200% 200%;
  animation: sub-rainbow-gradient 8s linear infinite;
}
.dark .subscription-page.subscription-theme-rainbow .subscription-card .ant-card-body {
  background-image: linear-gradient(
    var(--sub-theme-rotate),
    #195141,
    #5a2969,
    #8b2d4a,
    #7a5a1a,
    #195141
  );
}
/* Rainbow theme - card header in theme color */
.subscription-page.subscription-theme-rainbow .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #76ccb4, #ff6b9d);
  border-bottom: 1px solid rgba(118, 204, 180, 0.3);
}
.dark .subscription-page.subscription-theme-rainbow .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #195141, #5a2969);
  border-bottom: 1px solid rgba(25, 81, 65, 0.3);
}
.subscription-page.subscription-theme-rainbow .subscription-card .ant-card-head-title,
.subscription-page.subscription-theme-rainbow .subscription-card .ant-card-extra {
  color: #fff;
}
@keyframes sub-rainbow-gradient {
  from {
    --sub-theme-rotate: 0deg;
    background-position: 0% 50%;
  }
  to {
    --sub-theme-rotate: 360deg;
    background-position: 100% 50%;
  }
}
/* Coffee theme - brown, beige, cream tones - applied to subscription card body background (not header) */
.subscription-page.subscription-theme-coffee .subscription-card .ant-card-body {
  background: linear-gradient(135deg, #8b6f47 0%, #d4a574 25%, #f5e6d3 50%, #d4a574 75%, #8b6f47 100%);
  background-size: 200% 200%;
  animation: sub-coffee-gradient 10s ease infinite;
}
.dark .subscription-page.subscription-theme-coffee .subscription-card .ant-card-body {
  background: linear-gradient(135deg, #3d2817 0%, #5c3a1f 25%, #8b6f47 50%, #5c3a1f 75%, #3d2817 100%);
  background-size: 200% 200%;
  animation: sub-coffee-gradient 10s ease infinite;
}
/* Coffee theme - card header in theme color */
.subscription-page.subscription-theme-coffee .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #8b6f47, #d4a574);
  border-bottom: 1px solid rgba(139, 111, 71, 0.3);
}
.dark .subscription-page.subscription-theme-coffee .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #3d2817, #5c3a1f);
  border-bottom: 1px solid rgba(61, 40, 23, 0.3);
}
.subscription-page.subscription-theme-coffee .subscription-card .ant-card-head-title,
.subscription-page.subscription-theme-coffee .subscription-card .ant-card-extra {
  color: #fff;
}
@keyframes sub-coffee-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Banana theme - yellow, light yellow, golden tones - applied to subscription card body background (not header) */
.subscription-page.subscription-theme-banana .subscription-card .ant-card-body {
  background: linear-gradient(135deg, #ffd700 0%, #ffeb3b 25%, #fff9c4 50%, #ffeb3b 75%, #ffd700 100%);
  background-size: 200% 200%;
  animation: sub-banana-gradient 10s ease infinite;
}
.dark .subscription-page.subscription-theme-banana .subscription-card .ant-card-body {
  background: linear-gradient(135deg, #8b6914 0%, #b8860b 25%, #daa520 50%, #b8860b 75%, #8b6914 100%);
  background-size: 200% 200%;
  animation: sub-banana-gradient 10s ease infinite;
}
/* Banana theme - card header in theme color */
.subscription-page.subscription-theme-banana .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #ffd700, #ffeb3b);
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}
.dark .subscription-page.subscription-theme-banana .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #8b6914, #b8860b);
  border-bottom: 1px solid rgba(139, 105, 20, 0.3);
}
.subscription-page.subscription-theme-banana .subscription-card .ant-card-head-title,
.subscription-page.subscription-theme-banana .subscription-card .ant-card-extra {
  color: #333;
}
.dark .subscription-page.subscription-theme-banana .subscription-card .ant-card-head-title,
.dark .subscription-page.subscription-theme-banana .subscription-card .ant-card-extra {
  color: #fff;
}
@keyframes sub-banana-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Sunset theme - orange, pink, red, peach tones - applied to subscription card body background (not header) */
.subscription-page.subscription-theme-sunset .subscription-card .ant-card-body {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 25%, #ffa07a 50%, #ffb347 75%, #ff6b6b 100%);
  background-size: 200% 200%;
  animation: sub-sunset-gradient 10s ease infinite;
}
.dark .subscription-page.subscription-theme-sunset .subscription-card .ant-card-body {
  background: linear-gradient(135deg, #8b2d4a 0%, #a0522d 25%, #cd5c5c 50%, #b8860b 75%, #8b2d4a 100%);
  background-size: 200% 200%;
  animation: sub-sunset-gradient 10s ease infinite;
}
/* Sunset theme - card header in theme color */
.subscription-page.subscription-theme-sunset .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  border-bottom: 1px solid rgba(255, 107, 107, 0.3);
}
.dark .subscription-page.subscription-theme-sunset .subscription-card .ant-card-head {
  background: linear-gradient(135deg, #8b2d4a, #a0522d);
  border-bottom: 1px solid rgba(139, 45, 74, 0.3);
}
.subscription-page.subscription-theme-sunset .subscription-card .ant-card-head-title,
.subscription-page.subscription-theme-sunset .subscription-card .ant-card-extra {
  color: #fff;
}
@keyframes sub-sunset-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Branding styles */
.subscription-page .subscription-card .ant-card-head-title img {
  border-radius: 4px;
  object-fit: contain;
}
.subscription-page .subscription-card .ant-card-head-title .brand-text {
  font-weight: 500;
  margin-left: 8px;
}
/* Theme-specific styles for subscription card elements */
/* Rainbow theme elements */
.subscription-theme-rainbow .subscription-card .ant-btn-primary {
  background: linear-gradient(135deg, #76ccb4, #ff6b9d, #c44569);
  border: none;
  background-size: 200% 200%;
  animation: sub-rainbow-gradient 8s linear infinite;
}
.subscription-theme-rainbow .subscription-card .ant-btn-primary:hover {
  background: linear-gradient(135deg, #5aa895, #e55a8a, #a83652);
  background-size: 200% 200%;
  animation: sub-rainbow-gradient 8s linear infinite;
}
.subscription-theme-rainbow .subscription-card .ant-descriptions-bordered .ant-descriptions-item-label,
.subscription-theme-rainbow .subscription-card .ant-descriptions-bordered .ant-descriptions-item-content {
  border-color: rgba(118, 204, 180, 0.3);
}
.subscription-theme-rainbow .subscription-card .ant-tag {
  background: rgba(118, 204, 180, 0.2);
  border-color: rgba(118, 204, 180, 0.5);
  color: #fff;
}
.subscription-theme-rainbow .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #76ccb4, transparent, #ff6b9d);
}
.dark .subscription-theme-rainbow .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #195141, transparent, #5a2969);
}
/* Coffee theme elements */
.subscription-theme-coffee .subscription-card .ant-btn-primary {
  background: linear-gradient(135deg, #8b6f47, #d4a574);
  border: none;
}
.subscription-theme-coffee .subscription-card .ant-btn-primary:hover {
  background: linear-gradient(135deg, #6d5638, #b8945f);
}
.subscription-theme-coffee .subscription-card .ant-descriptions-bordered .ant-descriptions-item-label,
.subscription-theme-coffee .subscription-card .ant-descriptions-bordered .ant-descriptions-item-content {
  border-color: rgba(139, 111, 71, 0.3);
}
.subscription-theme-coffee .subscription-card .ant-tag {
  background: rgba(139, 111, 71, 0.2);
  border-color: rgba(139, 111, 71, 0.5);
  color: #fff;
}
.subscription-theme-coffee .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #8b6f47, transparent, #d4a574);
}
.dark .subscription-theme-coffee .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #3d2817, transparent, #5c3a1f);
}
/* Banana theme elements */
.subscription-theme-banana .subscription-card .ant-btn-primary {
  background: linear-gradient(135deg, #ffd700, #ffeb3b);
  border: none;
  color: #333;
}
.subscription-theme-banana .subscription-card .ant-btn-primary:hover {
  background: linear-gradient(135deg, #e6c200, #e6d133);
}
.subscription-theme-banana .subscription-card .ant-descriptions-bordered .ant-descriptions-item-label,
.subscription-theme-banana .subscription-card .ant-descriptions-bordered .ant-descriptions-item-content {
  border-color: rgba(255, 215, 0, 0.3);
}
.subscription-theme-banana .subscription-card .ant-tag {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  color: #333;
}
.subscription-theme-banana .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #ffd700, transparent, #ffeb3b);
}
.dark .subscription-theme-banana .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #8b6914, transparent, #b8860b);
}
/* Sunset theme elements */
.subscription-theme-sunset .subscription-card .ant-btn-primary {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  border: none;
}
.subscription-theme-sunset .subscription-card .ant-btn-primary:hover {
  background: linear-gradient(135deg, #e55a5a, #e67e48);
}
.subscription-theme-sunset .subscription-card .ant-descriptions-bordered .ant-descriptions-item-label,
.subscription-theme-sunset .subscription-card .ant-descriptions-bordered .ant-descriptions-item-content {
  border-color: rgba(255, 107, 107, 0.3);
}
.subscription-theme-sunset .subscription-card .ant-tag {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.5);
  color: #fff;
}
.subscription-theme-sunset .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #ff6b6b, transparent, #ff8e53);
}
.dark .subscription-theme-sunset .subscription-card .qr-bg-sub {
  background-image: linear-gradient(var(--tr-rotate), #8b2d4a, transparent, #a0522d);
}
/* Common theme styles for card content */
.subscription-theme-rainbow .subscription-card .ant-card-body,
.subscription-theme-coffee .subscription-card .ant-card-body,
.subscription-theme-banana .subscription-card .ant-card-body,
.subscription-theme-sunset .subscription-card .ant-card-body {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}
.dark .subscription-theme-rainbow .subscription-card .ant-card-body,
.dark .subscription-theme-coffee .subscription-card .ant-card-body,
.dark .subscription-theme-banana .subscription-card .ant-card-body,
.dark .subscription-theme-sunset .subscription-card .ant-card-body {
  background: rgba(17, 25, 41, 0.95);
  backdrop-filter: blur(10px);
}