/* Apple-style glass surfaces for all portal UIs (light + dark). */

html.portal-app {
  --glass-blur: 22px;
  --glass-saturate: 180%;
  --glass-fill: rgba(255, 255, 255, 0.28);
  --glass-fill-strong: rgba(255, 255, 255, 0.48);
  --glass-fill-soft: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.24);
  --glass-border-soft: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.40);
  --glass-shadow: 0 8px 32px rgba(31, 50, 92, 0.1), inset 0 1px 0 var(--glass-highlight);
  --glass-input: rgba(255, 255, 255, 0.48);
  --glass-fill-modal: rgba(255, 255, 255, 0.72);
  --glass-border-modal: rgba(47, 43, 61, 0.16);
  --glass-input-modal: rgba(232, 237, 245, 0.94);
  --glass-input-border-modal: rgba(47, 43, 61, 0.42);
  --glass-mesh:
    radial-gradient(ellipse 90% 70% at 50% 28%, rgba(120, 176, 255, 0.55), transparent 62%),
    radial-gradient(ellipse 70% 55% at 18% 48%, rgba(186, 154, 255, 0.42), transparent 58%),
    radial-gradient(ellipse 70% 50% at 82% 52%, rgba(255, 176, 150, 0.38), transparent 56%),
    radial-gradient(ellipse 80% 55% at 8% -10%, rgba(120, 176, 255, 0.62), transparent 58%),
    radial-gradient(ellipse 70% 50% at 96% 4%, rgba(186, 154, 255, 0.5), transparent 52%),
    radial-gradient(ellipse 65% 50% at 78% 100%, rgba(255, 176, 150, 0.42), transparent 55%),
    radial-gradient(ellipse 50% 40% at 12% 92%, rgba(128, 220, 198, 0.38), transparent 52%),
    #dce7f4;
}

html.portal-app.dark-style {
  --glass-fill: rgba(18, 22, 32, 0.48);
  --glass-fill-strong: rgba(22, 26, 38, 0.66);
  --glass-fill-soft: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-soft: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 var(--glass-highlight);
  --glass-input: rgba(255, 255, 255, 0.07);
  --glass-fill-modal: rgba(22, 26, 38, 0.82);
  --glass-border-modal: rgba(255, 255, 255, 0.2);
  --glass-input-modal: rgba(15, 17, 22, 0.72);
  --glass-input-border-modal: rgba(255, 255, 255, 0.38);
  --glass-mesh:
    radial-gradient(ellipse 80% 55% at 6% -8%, rgba(56, 110, 220, 0.45), transparent 58%),
    radial-gradient(ellipse 70% 50% at 98% 6%, rgba(124, 82, 210, 0.38), transparent 52%),
    radial-gradient(ellipse 60% 48% at 80% 100%, rgba(40, 90, 180, 0.32), transparent 55%),
    radial-gradient(ellipse 48% 38% at 10% 90%, rgba(30, 150, 140, 0.22), transparent 50%),
    #0b0e16;
}

html.portal-app,
html.portal-app body {
  background: transparent !important;
}

html.portal-app body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--glass-mesh);
}

html.portal-app .portal-shell,
html.portal-app .portal-main,
html.portal-app .portal-page,
html.portal-app .authentication-wrapper,
html.portal-app .portal-login__wrap,
html.portal-app #form1,
html.portal-app .portal-main > form,
html.portal-app .portal-main > form > div {
  background: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 1;
}

html.portal-app .portal-header,
html.portal-app .portal-footer {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

html.portal-app .portal-header {
  box-shadow: inset 0 -1px 0 var(--glass-border-soft), inset 0 1px 0 var(--glass-highlight);
}

html.portal-app .portal-nav-tier-2 > .portal-nav-sub,
html.portal-app .portal-nav-tier-3 > .portal-nav-sub {
  background: var(--glass-fill-soft);
  backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

@media (max-width: 991.98px) {
  html.portal-app .portal-nav {
    background: var(--glass-fill-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-right: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }

  html.portal-app .portal-nav-backdrop {
    background: rgba(31, 50, 92, 0.18);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }

  html.portal-app.dark-style .portal-nav-backdrop {
    background: rgba(0, 0, 0, 0.42);
  }

  html.portal-app .portal-nav-link:hover {
    background: var(--glass-fill-soft);
  }
}

html.portal-app .dropdown-menu,
html.portal-app .ts-dropdown {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-profile-dropdown {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(28px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(28px) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 0.875rem;
}

html.portal-app.dark-style .portal-profile-dropdown {
  background: rgba(22, 26, 38, 0.94);
}

html.portal-app .portal-card,
html.portal-app .portal-page__actions,
html.portal-app .card {
  background: var(--glass-fill) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  overflow: visible !important;
}

html.portal-app .portal-card,
html.portal-app .portal-page__actions {
  border-radius: 1.125rem;
}

html.portal-app .portal-card.portal-search-card,
html.portal-app .portal-card.portal-table-card,
html.portal-app .portal-card.portal-accordion {
  background: var(--glass-fill) !important;
  overflow: visible !important;
}

html.portal-app .portal-accordion__trigger,
html.portal-app .portal-accordion__header-row,
html.portal-app .portal-card.portal-search-card > .portal-accordion__trigger {
  background: transparent !important;
}

html.portal-app .portal-accordion__trigger:hover,
html.portal-app .portal-accordion__header-row:hover,
html.portal-app .portal-accordion__header-row:hover .portal-accordion__trigger,
html.portal-app .portal-card.portal-search-card > .portal-accordion__trigger:hover {
  background: var(--glass-fill-soft) !important;
}

html.portal-app .portal-page__actions.is-scrolled,
html.portal-app.dark-style .portal-page__actions,
html.portal-app.dark-style .portal-page__actions.is-scrolled {
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-field .form-control,
html.portal-app .portal-field .form-select,
html.portal-app .form-control,
html.portal-app .form-select,
html.portal-app .ts-wrapper .ts-control,
html.portal-app .portal-main .ts-wrapper.form-select .ts-control,
html.portal-app .portal-main .ts-wrapper.form-select.single.input-active .ts-control,
html.portal-app .portal-card.portal-search-card .ts-wrapper.form-select .ts-control {
  background-color: var(--glass-input) !important;
  border-color: var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

html.portal-app .portal-field .form-control:focus,
html.portal-app .portal-field .form-select:focus,
html.portal-app .form-control:focus,
html.portal-app .form-select:focus,
html.portal-app .portal-main .ts-wrapper.form-select.focus .ts-control,
html.portal-app .portal-main .ts-wrapper.form-select.dropdown-active .ts-control {
  background-color: var(--glass-fill-strong) !important;
  border-color: rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.55) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 0.2rem rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.18) !important;
}

html.portal-app .portal-main .ts-wrapper.form-select.disabled .ts-control {
  background-color: var(--glass-fill-soft) !important;
  border-color: var(--glass-border-soft) !important;
}

html.portal-app .portal-main .ts-dropdown,
html.portal-app .portal-main .ts-dropdown.form-control,
html.portal-app .portal-main .ts-dropdown.form-select {
  background: var(--glass-fill-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

html.portal-app .dataTables_paginate,
html.portal-app .dt-paging ul.pagination,
html.portal-app .pagination {
  background: var(--glass-fill-soft) !important;
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

html.portal-app .dataTables_paginate .paginate_button,
html.portal-app .dt-paging .dt-paging-button,
html.portal-app .pagination .page-item,
html.portal-app .pagination .page-link,
html.portal-app .pagination li > a:not(.page-link) {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html.portal-app .dataTables_paginate > .paginate_button,
html.portal-app .dataTables_paginate > span > .paginate_button,
html.portal-app .pagination .page-link,
html.portal-app .pagination li > a:not(.page-link),
html.portal-app .dt-paging button.dt-paging-button {
  color: var(--portal-text-primary) !important;
  border-right: 1px solid var(--glass-border-soft) !important;
}

html.portal-app .dataTables_paginate > .paginate_button:hover,
html.portal-app .dataTables_paginate > span > .paginate_button:hover,
html.portal-app .pagination .page-link:hover,
html.portal-app .pagination li > a:not(.page-link):hover,
html.portal-app .dt-paging button.dt-paging-button:hover {
  background: var(--glass-fill-strong) !important;
  color: var(--portal-text-primary) !important;
}

html.portal-app .dataTables_paginate .paginate_button.current,
html.portal-app .dataTables_paginate .paginate_button.current:hover,
html.portal-app .dt-paging .dt-paging-button.current,
html.portal-app .dt-paging .dt-paging-button.current:hover,
html.portal-app .page-item.active .page-link,
html.portal-app .page-link.active,
html.portal-app .pagination li.active > a:not(.page-link) {
  background: var(--portal-brand-blue, #1e7ae6) !important;
  border-color: var(--portal-brand-blue, #1e7ae6) !important;
  color: #fff !important;
  box-shadow: none !important;
}

html.portal-app .dataTables_paginate .paginate_button.disabled,
html.portal-app .dataTables_paginate .paginate_button.disabled:hover,
html.portal-app .dt-paging .dt-paging-button.disabled,
html.portal-app .dt-paging .dt-paging-button.disabled:hover,
html.portal-app .page-item.disabled .page-link {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--portal-text-muted, #6d6b77) !important;
}

html.portal-app .dataTables_paginate > span,
html.portal-app .dt-paging,
html.portal-app .dt-paging > nav {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html.portal-app .portal-page__actions .btn-outline-secondary,
html.portal-app .btn-outline-secondary,
html.portal-app .btn-outline-primary,
html.portal-app .portal-btn-outline {
  background: var(--glass-fill-soft);
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft);
  color: var(--portal-text-primary);
}

html.portal-app .portal-page__actions .btn-outline-secondary:hover,
html.portal-app .btn-outline-secondary:hover,
html.portal-app .btn-outline-primary:hover,
html.portal-app .portal-btn-outline:hover {
  background: var(--glass-fill-strong);
  border-color: var(--glass-border-soft);
  color: var(--portal-text-primary);
}

html.portal-app .btn-primary,
html.portal-app .btn-primary:hover,
html.portal-app .btn-primary:focus,
html.portal-app .btn-primary:active,
html.portal-app .btn-primary:disabled {
  box-shadow: 0 8px 20px rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.22);
}

html.portal-app .portal-footer__version {
  background: var(--glass-fill-soft);
  border-color: var(--glass-border-soft);
}

html.portal-app .portal-form-loading__panel,
html.portal-app .portal-docs__banner,
html.portal-app .alert {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(28px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(28px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html.portal-app .alert-primary {
  background: color-mix(in srgb, var(--portal-brand-blue, #1e7ae6) 14%, var(--glass-fill-strong));
  color: var(--portal-text-primary, #3f3b4d);
  border-color: color-mix(in srgb, var(--portal-brand-blue, #1e7ae6) 36%, var(--glass-border, transparent));
}

html.portal-app .alert-primary a {
  color: var(--portal-brand-blue, #1e7ae6);
  font-weight: 600;
}

html.portal-app.dark-style .alert-primary,
html.portal-app[data-theme="theme-dark"] .alert-primary {
  background: color-mix(in srgb, var(--portal-brand-blue, #3b94eb) 22%, var(--glass-fill-strong));
  color: #d7e8fc;
  border-color: color-mix(in srgb, var(--portal-brand-blue, #3b94eb) 45%, transparent);
}

html.portal-app.dark-style .alert-primary a,
html.portal-app[data-theme="theme-dark"] .alert-primary a {
  color: #9ec5f8;
}

html.portal-app .alert-warning {
  background: color-mix(in srgb, var(--portal-warning, #ff9f43) 18%, var(--glass-fill-strong));
}

html.portal-app .alert-success {
  background: color-mix(in srgb, var(--portal-success, #28c76f) 16%, var(--glass-fill-strong));
}

html.portal-app .alert-danger {
  background: color-mix(in srgb, var(--portal-danger, #ea5455) 16%, var(--glass-fill-strong));
}

html.portal-app .modal-backdrop.show {
  opacity: 1;
  background: rgba(31, 50, 92, 0.28);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

html.portal-app.dark-style .modal-backdrop.show,
html.portal-app[data-theme="theme-dark"] .modal-backdrop.show {
  background: rgba(0, 0, 0, 0.42);
}

html.portal-app .modal .modal-content,
html.portal-app .portal-confirm-modal .modal-content,
html.portal-app .portal-dialog-modal .modal-content,
html.portal-app .portal-api-secret-modal .modal-content {
  background: var(--glass-fill-modal) !important;
  background-color: var(--glass-fill-modal) !important;
  backdrop-filter: blur(28px) saturate(var(--glass-saturate)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(var(--glass-saturate)) !important;
  border: 1px solid var(--glass-border-modal) !important;
  box-shadow: 0 16px 48px rgba(31, 50, 92, 0.22), inset 0 1px 0 var(--glass-highlight) !important;
  border-radius: 1.125rem;
}

html.portal-app .modal .form-control,
html.portal-app .modal .form-select,
html.portal-app .modal textarea.form-control,
html.portal-app .modal .portal-field .form-control,
html.portal-app .modal .portal-field .form-select,
html.portal-app .modal .ts-wrapper .ts-control,
html.portal-app .modal .ts-wrapper.form-select .ts-control,
html.portal-app .modal .portal-main .ts-wrapper.form-select .ts-control,
html.portal-app .modal .portal-main .ts-wrapper.form-select.single.input-active .ts-control,
html.portal-app .portal-confirm-modal__input {
  background-color: var(--glass-input-modal) !important;
  border: 1px solid var(--glass-input-border-modal) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
  color: var(--portal-text-primary, #3f3b4d) !important;
}

html.portal-app .modal .form-control:focus,
html.portal-app .modal .form-select:focus,
html.portal-app .modal textarea.form-control:focus,
html.portal-app .modal .portal-field .form-control:focus,
html.portal-app .modal .portal-field .form-select:focus,
html.portal-app .modal .ts-wrapper.form-select.focus .ts-control,
html.portal-app .modal .ts-wrapper.form-select.dropdown-active .ts-control,
html.portal-app .modal .portal-main .ts-wrapper.form-select.focus .ts-control,
html.portal-app .modal .portal-main .ts-wrapper.form-select.dropdown-active .ts-control,
html.portal-app .portal-confirm-modal__input:focus {
  background-color: var(--glass-input-modal) !important;
  border-color: rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.65) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 0.2rem rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.18) !important;
}

html.portal-app .modal .form-control:disabled,
html.portal-app .modal .form-control[readonly],
html.portal-app .modal .form-select:disabled,
html.portal-app .modal .ts-wrapper.disabled .ts-control,
html.portal-app .modal .portal-main .ts-wrapper.form-select.disabled .ts-control {
  background-color: color-mix(in srgb, var(--glass-input-modal) 70%, var(--portal-surface-inset, #f4f4f6)) !important;
  border-color: var(--glass-input-border-modal) !important;
  opacity: 1;
}

html.portal-app .modal .btn-outline-secondary,
html.portal-app .modal .btn-outline-primary,
html.portal-app .modal .portal-btn-outline,
html.portal-app .portal-confirm-modal .modal-footer .btn-outline-secondary {
  background: var(--glass-input-modal) !important;
  border: 1px solid var(--glass-input-border-modal) !important;
  color: var(--portal-text-primary, #3f3b4d) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.portal-app .modal .btn-outline-secondary:hover,
html.portal-app .modal .btn-outline-primary:hover,
html.portal-app .modal .portal-btn-outline:hover,
html.portal-app .portal-confirm-modal .modal-footer .btn-outline-secondary:hover {
  background: var(--glass-fill-strong) !important;
  border-color: rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.45) !important;
  color: var(--portal-text-primary, #3f3b4d) !important;
}

html.portal-app .modal .modal-header .btn-close {
  opacity: 0.72;
  background-color: var(--glass-input-modal);
  border: 1px solid var(--glass-input-border-modal);
  border-radius: 0.5rem;
  box-sizing: content-box;
}

html.portal-app .modal .modal-header,
html.portal-app .modal .modal-footer,
html.portal-app .portal-confirm-modal .modal-header,
html.portal-app .portal-confirm-modal .modal-footer,
html.portal-app .portal-dialog-modal .modal-header,
html.portal-app .portal-dialog-modal .modal-footer,
html.portal-app.dark-style .modal .modal-header,
html.portal-app.dark-style .modal .modal-footer,
html.portal-app[data-theme="theme-dark"] .modal .modal-header,
html.portal-app[data-theme="theme-dark"] .modal .modal-footer {
  background: transparent !important;
  border-color: var(--glass-border-soft) !important;
}

html.portal-app .portal-toast,
html.portal-app.dark-style .portal-toast,
html.portal-app[data-theme="theme-dark"] .portal-toast {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-toast--success {
  background: color-mix(in srgb, var(--portal-success, #28c76f) 16%, var(--glass-fill-strong));
  border-color: color-mix(in srgb, var(--portal-success, #28c76f) 40%, var(--glass-border));
}

html.portal-app .portal-toast--error {
  background: color-mix(in srgb, var(--portal-danger, #ea5455) 16%, var(--glass-fill-strong));
  border-color: color-mix(in srgb, var(--portal-danger, #ea5455) 40%, var(--glass-border));
}

html.portal-app .portal-toast--warning {
  background: color-mix(in srgb, var(--portal-warning, #ff9f43) 16%, var(--glass-fill-strong));
  border-color: color-mix(in srgb, var(--portal-warning, #ff9f43) 40%, var(--glass-border));
}

html.portal-app .portal-docs__banner {
  background: color-mix(in srgb, var(--portal-brand-blue, #1e7ae6) 12%, var(--glass-fill));
}

html.portal-app table.portal-table,
html.portal-app table.portal-table thead th,
html.portal-app table.portal-table tbody td,
html.portal-app table.dataTable,
html.portal-app table.dataTable thead th,
html.portal-app table.dataTable tbody td {
  background-color: transparent !important;
}

html.portal-app table.portal-table thead th,
html.portal-app table.dataTable thead th {
  border-bottom-color: var(--glass-border-soft) !important;
}

html.portal-app table.portal-table tbody tr:hover td,
html.portal-app table.dataTable tbody tr:hover td {
  background-color: var(--glass-fill-soft) !important;
}

html.portal-app .portal-table-wrap,
html.portal-app .dataTables_wrapper {
  background: transparent;
}

html.portal-app .portal-table-toolbar {
  border-bottom-color: var(--glass-border-soft);
}

html.portal-app .portal-table-footer {
  border-top-color: var(--glass-border-soft);
}

html.portal-app .portal-main .widget-box {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-table-toolbar__search input,
html.portal-app .portal-table-toolbar__size,
html.portal-app .portal-table-toolbar__export,
html.portal-app .portal-table-toolbar__export-select {
  background-color: var(--glass-input) !important;
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

html.portal-app .portal-api-service-list {
  background: var(--glass-fill-soft);
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft);
}

html.portal-app .portal-api-service-list .portal-accordion {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--glass-border-soft);
}

html.portal-login .authentication-wrapper.authentication-bg,
html.portal-login.light-style .authentication-wrapper.authentication-bg,
html.dark-style.portal-login .authentication-wrapper.authentication-bg,
html.portal-login .portal-login__wrap,
html.portal-login.light-style .portal-login__wrap,
html.dark-style.portal-login .portal-login__wrap {
  background: transparent !important;
  background-image: none !important;
}

html.portal-login .auth-cover-bg,
html.portal-login .auth-cover-bg-color,
html.portal-login.light-style .auth-cover-bg-color,
html.dark-style.portal-login .auth-cover-bg-color,
html.portal-login .portal-login__cover,
html.portal-login.light-style .portal-login__cover,
html.dark-style.portal-login .portal-login__cover {
  background-color: var(--glass-fill) !important;
  background-image: none !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 1.125rem;
}

html.portal-login .w-px-400,
html.portal-login .portal-login__form,
html.portal-login .portal-hub__chooser {
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 1.125rem;
  padding: 1.75rem 1.5rem 1.5rem;
}

html.portal-login .w-px-400,
html.portal-login .portal-login__form {
  width: 26.5rem !important;
  max-width: calc(100% - 2rem);
  padding: 1.5rem 1.5rem 1.25rem;
}

html.portal-login .form-control,
html.portal-login .form-select,
html.portal-login .input-group-text {
  background-color: var(--glass-input) !important;
  border-color: var(--glass-border-soft);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

html.portal-login .form-control:focus,
html.portal-login .input-group .form-control:focus + .input-group-text,
html.portal-login .input-group:focus-within .input-group-text {
  background-color: var(--glass-fill-strong) !important;
  border-color: rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.55);
}

html.portal-login .portal-login__dev-mfa {
  background: var(--glass-fill-soft);
  border-color: var(--glass-border-soft);
  backdrop-filter: blur(12px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate));
}

html.portal-login .login-theme-toggle .portal-login-theme-toggle,
html.portal-login .login-theme-toggle .style-switcher-toggle {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-hub__tile {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft);
  box-shadow: var(--glass-shadow);
}

html.portal-app a.portal-hub__tile:hover {
  background: var(--glass-fill-strong);
  border-color: rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.55);
  box-shadow: var(--glass-shadow);
}

html.portal-hub .portal-hub__login-pane,
html.portal-hub .portal-hub__login-pane.d-flex {
  border-color: transparent;
}

html.portal-app .portal-shell:has(.portal-role-selection),
html.portal-app.dark-style .portal-shell:has(.portal-role-selection),
html.portal-app[data-theme="theme-dark"] .portal-shell:has(.portal-role-selection) {
  background: transparent !important;
}

html.portal-app .portal-role-selection-search {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-role-section,
html.portal-app .portal-role-accordion .accordion-item.portal-role-section,
html.portal-app .portal-role-accordion .accordion-button.portal-role-section__trigger,
html.portal-app .portal-role-accordion .accordion-button.portal-role-section__trigger:not(.collapsed),
html.portal-app .portal-role-section__body,
html.portal-app .portal-role-accordion .accordion-body.portal-role-section__body {
  background: var(--glass-fill) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-role-card-grid .portal-role-card,
html.portal-app .portal-role-section__body .portal-role-card {
  background: var(--glass-fill) !important;
  background-color: var(--glass-fill) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft) !important;
  box-shadow: var(--glass-shadow);
}

html.portal-app .portal-role-card-grid .portal-role-card:hover,
html.portal-app .portal-role-section__body .portal-role-card:hover,
html.portal-app .portal-role-card-grid .portal-role-card:focus-visible,
html.portal-app .portal-role-section__body .portal-role-card:focus-visible {
  background: var(--glass-fill) !important;
  background-color: var(--glass-fill) !important;
  border-color: rgba(var(--portal-brand-blue-rgb, 30, 122, 230), 0.55) !important;
}

html.portal-app .portal-dashboard-refresh {
  background: var(--glass-fill) !important;
  background-color: var(--glass-fill) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft) !important;
  box-shadow: var(--glass-shadow);
  color: var(--portal-text-muted, #6d6b77);
}

html.portal-app .tooltip {
  --bs-tooltip-bg: var(--glass-fill-modal);
  --bs-tooltip-color: var(--portal-text-primary, #3f3b4d);
}

html.portal-app .tooltip-inner {
  background: var(--glass-fill-modal) !important;
  background-color: var(--glass-fill-modal) !important;
  color: var(--portal-text-primary, #3f3b4d) !important;
  backdrop-filter: blur(20px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html.portal-app .datepicker,
html.portal-app .datepicker-dropdown,
html.portal-app .datepicker.dropdown-menu {
  background: var(--glass-fill-strong) !important;
  background-color: var(--glass-fill-strong) !important;
  backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  color: var(--portal-text-primary, #3f3b4d);
}

html.portal-app .datepicker-dropdown:after,
html.portal-app .datepicker-dropdown.datepicker-orient-bottom:after {
  border-bottom-color: var(--glass-fill-strong);
}

html.portal-app .datepicker-dropdown.datepicker-orient-top:after {
  border-top-color: var(--glass-fill-strong);
}

html.portal-app .datepicker table,
html.portal-app .datepicker table tr,
html.portal-app .datepicker table tr td,
html.portal-app .datepicker table tr th {
  background: transparent !important;
  background-color: transparent !important;
}

html.portal-app .datepicker table tr td.day:hover,
html.portal-app .datepicker table tr td.focused,
html.portal-app .datepicker table tr td span:hover {
  background: var(--glass-fill) !important;
  background-color: var(--glass-fill) !important;
}

html.portal-app .datepicker table tr td.active,
html.portal-app .datepicker table tr td.active:hover,
html.portal-app .datepicker table tr td.active.highlighted,
html.portal-app .datepicker table tr td span.active {
  background: var(--portal-brand-blue, #1e7ae6) !important;
  background-color: var(--portal-brand-blue, #1e7ae6) !important;
  color: #fff !important;
}

html.portal-app .portal-richtext {
  background: var(--glass-input) !important;
  backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--glass-saturate));
  border-color: var(--glass-border-soft) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

html.portal-app .modal .portal-richtext {
  background: var(--glass-input-modal) !important;
  border-color: var(--glass-input-border-modal) !important;
}

html.portal-app .portal-richtext__toolbar {
  background: var(--glass-fill-soft) !important;
  border-bottom-color: var(--glass-border-soft) !important;
}

html.portal-app .portal-richtext__select {
  background: var(--glass-input) !important;
  border-color: var(--glass-border-soft) !important;
  color: var(--portal-text-primary, #3f3b4d) !important;
}

html.portal-app .modal .portal-richtext__select {
  background: var(--glass-input-modal) !important;
  border-color: var(--glass-input-border-modal) !important;
}

html.portal-app .portal-richtext__sep {
  background: var(--glass-border-soft);
}

html.portal-app table.dataTable thead th.dtfc-fixed-left,
html.portal-app table.dataTable thead th.dtfc-fixed-right,
html.portal-app table.dataTable tbody td.dtfc-fixed-left,
html.portal-app table.dataTable tbody td.dtfc-fixed-right,
html.portal-app .dtfh-floatingparent,
html.portal-app .dtfh-floatingparent table.dataTable thead th {
  background: var(--glass-fill-strong) !important;
  background-color: var(--glass-fill-strong) !important;
}

@media (prefers-reduced-transparency: reduce) {
  html.portal-app {
    --glass-fill: rgba(255, 255, 255, 0.92);
    --glass-fill-strong: #fff;
    --glass-fill-soft: rgba(255, 255, 255, 0.82);
    --glass-fill-modal: #fff;
    --glass-border-modal: #d4d4d8;
    --glass-input-modal: #eef1f6;
    --glass-input-border-modal: #8b93a0;
    --glass-blur: 0px;
  }

  html.portal-app.dark-style {
    --glass-fill: rgba(26, 29, 36, 0.94);
    --glass-fill-strong: #1a1d24;
    --glass-fill-soft: rgba(255, 255, 255, 0.08);
    --glass-fill-modal: #22252e;
    --glass-input-modal: #0f1116;
    --glass-input-border-modal: rgba(255, 255, 255, 0.28);
  }
}