/* Vanguard skin v3 — app shell first: sidebar, top bar, map chrome, windows.
   Mirrors the insurance app shell (Card variant="sidebar" = glass-neutral + rounded-card,
   nav items rounded 16px, brand-blue active tile, Urbanist display / Inter body).
   Tokens from variables.css (same build as the insurance frontend). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Urbanist:wght@500;600;700&display=swap");

:root {
  /* One surface language everywhere, same as the sidebar / top bar and the insurance app's glass
     cards: dark translucent panel + 12 px blur + hairline white border, light text, brand accents. */
  --vg-glass-dark: rgba(37, 48, 66, 0.9);
  --vg-glass-dark-border: rgba(255, 255, 255, 0.14);
  --vg-glass-light: var(--vg-glass-dark); /* no light variant any more */
  --vg-glass-light-border: var(--vg-glass-dark-border);
  --vg-glass-blur: 12px;
  --vg-surface: var(--vg-glass-dark); /* cards, windows, popups */
  --vg-surface-2: rgba(255, 255, 255, 0.06); /* headers, hover rows, secondary buttons */
  --vg-field: rgba(255, 255, 255, 0.08); /* inputs */
  --vg-border: rgba(255, 255, 255, 0.14);
  --vg-text: #e6edf3;
  --vg-text-muted: rgba(230, 237, 243, 0.62);
  --vg-brand: var(--vanguard-ref-color-brand-500, #3771d5);
  --vg-brand-hover: var(--vanguard-ref-color-brand-600, #2260be);
  --vg-brand-soft: rgba(55, 113, 213, 0.28);
  --vg-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --vg-shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
  --vg-shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.45), 0 8px 8px -4px rgba(0, 0, 0, 0.3);
  --vg-radius-card: 16px;
  --vg-radius: 8px;
  --vg-font: "Inter", system-ui, sans-serif;
  --vg-font-display: "Urbanist", "Inter", sans-serif;
}

/* ---------- typography (icon fonts excluded) ---------- */
/* Inherit-based, not universal: icon fonts (FontAwesome .fa*, Telerik .p-icon/.rbIcon/.rtbIcon,
   Kendo .k-icon) keep their own families. Form controls do not inherit by default, hence listed. */
body {
  font-family: var(--vg-font) !important;
}
input,
button,
select,
textarea,
table,
.RadComboBox,
.RadDropDownList,
.RadGrid,
.RadWindow,
.RadButton,
.RadTabStrip,
.RadInput,
.RadToolBar,
.RadMenu,
.RadNotification,
.k-drawer,
.k-widget,
.toolbar_window,
.rcbInput,
.rddlFakeInput {
  font-family: var(--vg-font) !important;
}
.p-icon,
[class*="p-i-"] {
  font-family: "WebComponentsIcons" !important;
}
.rcbButtonText {
  display: none !important;
}
h1,
h2,
h3,
.title,
.sub_title,
.subtitle,
.rwTitle,
.header_row {
  font-family: var(--vg-font-display) !important;
  color: var(--vg-text) !important;
}

/* =====================================================================
   SIDEBAR  (#RadDrawer_Main.k-drawer, 51 px rail, Kendo drawer in mini mode)
   ===================================================================== */
#RadDrawer_Main.k-drawer {
  background: var(--vg-glass-dark) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border-right: 1px solid var(--vg-glass-dark-border) !important;
  box-shadow: var(--vg-shadow-lg);
  padding-top: 6px;
}
/* NOTE: no `display … !important` here. The vendor hides 6 items (Saved Vessels, Alerts v3,
   Vessel Schedules, Insurance Check, Data Analytics, About) with inline display:none; an
   !important display would resurrect them (that was the "duplicate ship icon"). */
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 8px !important;
  padding: 0 !important; /* Kendo adds 8px padding -> icon drifted right */
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  box-shadow: none !important;
  outline: none !important;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
/* Kendo hover/focus/selected states: class-based AND pseudo-class based, all four need overriding */
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator):hover,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).k-state-hover,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).k-hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator):focus,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).k-state-focused,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).k-focus,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator):focus:hover {
  background: rgba(
    255,
    255,
    255,
    0.1
  ) !important; /* was: white + inset shadow from the Bootstrap skin */
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).k-selected,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).k-state-selected,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).k-state-selected:hover,
#RadDrawer_Main .k-drawer-item:not(.k-drawer-separator).active {
  background: var(--vg-brand) !important;
  color: #fff !important;
}
#RadDrawer_Main .k-drawer-item .k-icon.drawIcon {
  margin: 0 !important; /* Kendo: margin 0 8px -> second cause of the right shift */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit !important; /* vendor: .k-drawer-item:hover > .drawIcon { color: rgb(0,56,102) !important } */
}
#RadDrawer_Main .k-drawer-item:hover > .drawIcon,
#RadDrawer_Main .k-drawer-item.k-state-selected > .drawIcon {
  color: #fff !important;
}
#RadDrawer_Main .k-drawer-item i {
  color: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
#RadDrawer_Main .k-drawer-item i.fad {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
  --fa-secondary-opacity: 0.45;
}
#RadDrawer_Main .k-drawer-separator {
  background: var(--vg-glass-dark-border) !important;
  margin: 4px 12px !important;
  padding: 0 !important;
  height: 1px !important;
  width: auto !important;
}
/* rail fits 20 visible items + 4 separators in ~790 px; hide the scrollbar if a viewport is shorter */
#RadDrawer_Main .k-drawer-wrapper {
  scrollbar-width: none;
}
#RadDrawer_Main .k-drawer-wrapper::-webkit-scrollbar {
  display: none;
}

/* =====================================================================
   TOP BAR  (nav#nav_mapControls: search combo + "Vessels" scope + 4 icon buttons)
   ===================================================================== */
#nav_mapControls.navbar {
  background: var(--vg-glass-dark) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: var(--vg-radius-card) !important;
  box-shadow: var(--vg-shadow-lg) !important;
  padding: 6px 8px !important;
}
#nav_mapControls .navbar-nav {
  align-items: center;
  gap: 6px;
}
#nav_mapControls .nav-item {
  padding: 0 !important;
  margin: 0 !important;
}

/* search field: our glass-input (white 78 % + blur, 12 px radius, brand focus ring) */
#nav_mapControls .RadComboBox_Bootstrap .rcbInner {
  background: var(--vg-glass-light) !important;
  border: 1px solid var(--vg-glass-light-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  min-height: 36px;
  padding: 0 10px !important;
  display: flex;
  align-items: center;
}
#nav_mapControls .RadComboBox_Bootstrap .rcbInner.rcbFocused,
#nav_mapControls .RadComboBox_Bootstrap .rcbInner:focus-within {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: var(--vg-brand) !important;
  box-shadow: 0 0 0 3px var(--vg-brand-soft) !important;
}
#nav_mapControls .rcbInput {
  color: var(--vg-text) !important;
  font-size: 14px !important;
}
#nav_mapControls .rcbInput.rcbEmptyMessage {
  color: var(--vg-text-muted) !important;
  font-style: normal !important;
}
#nav_mapControls .rcbActionButton,
#nav_mapControls .rcbArrowCell {
  background: transparent !important;
  border: 0 !important;
  color: var(--vg-text-muted) !important;
}

/* "Vessels" scope dropdown */
#nav_mapControls .RadDropDownList_Bootstrap .rddlInner,
#nav_mapControls .RadDropDownList .rddlInner {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: 12px !important;
  color: #fff !important;
  min-height: 36px;
  box-shadow: none !important;
}
#nav_mapControls .rddlFakeInput,
#nav_mapControls .rddlInner span {
  color: #fff !important;
}
#nav_mapControls .rddlIcon {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* icon buttons on the right (RadButtons) -> 36 px tiles like our nav icon containers */
#nav_mapControls .searchBarOtherControls .RadButton.rbButton,
#nav_mapControls .RadButton.rbButton {
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid var(--vg-glass-dark-border) !important;
  color: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
#nav_mapControls .RadButton.rbButton:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
#nav_mapControls .RadButton.rbButton.rbChecked,
#nav_mapControls .RadButton.rbButton.rbSelected,
#nav_mapControls .RadButton.rbButton[aria-pressed="true"] {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
#nav_mapControls .RadButton.rbButton .rbIcon,
#nav_mapControls .RadButton.rbButton i {
  color: #fff !important;
  font-size: 15px !important;
}

/* dropdown panels of the search combo */
.RadComboBoxDropDown_Bootstrap,
.RadComboBoxDropDown,
.RadDropDownList_Bootstrap .rddlPopup,
.rddlPopup {
  border: 1px solid var(--vg-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-xl) !important;
  overflow: hidden;
  margin-top: 6px;
}
.RadComboBoxDropDown .rcbItem,
.rddlPopup .rddlItem {
  padding: 8px 12px !important;
  border-radius: 8px;
  margin: 2px 6px;
  color: var(--vg-text) !important;
}
.RadComboBoxDropDown .rcbItem:hover,
.RadComboBoxDropDown .rcbHovered,
.rddlPopup .rddlItem:hover,
.rddlPopup .rddlHovered {
  background: var(--vg-brand-soft) !important;
  color: var(--vg-text) !important;
}

/* =====================================================================
   MAP CHROME  (canvas itself is untouchable; this is controls, chips, logo)
   ===================================================================== */
.mapboxgl-ctrl-bottom-left {
  padding: 0 0 12px 12px;
}
.mapboxgl-ctrl-group {
  background: var(--vg-glass-light) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-light-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-md) !important;
  overflow: hidden;
}
.mapboxgl-ctrl-group button {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-top: 1px solid var(--vg-border) !important;
  background: transparent !important;
}
.mapboxgl-ctrl-group button:first-child {
  border-top: 0 !important;
}
.mapboxgl-ctrl-group button:hover {
  background: var(--vg-brand-soft) !important;
}
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: brightness(0) saturate(100%) invert(9%) sepia(20%) saturate(1500%) hue-rotate(190deg);
} /* ~gray-900 */

#mapLatLng {
  background: var(--vg-glass-light) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-light-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--vg-shadow-md) !important;
  color: var(--vg-text) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  padding: 4px 12px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

#application_logo.mapLogoProduct {
  height: 56px !important;
  width: auto !important;
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(16, 24, 40, 0.25));
}

.mapboxgl-ctrl-attrib {
  background: var(--vg-glass-light) !important;
  border-radius: 999px 0 0 0 !important;
  font-size: 10px !important;
}
.mapboxgl-popup-content {
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-xl) !important;
  border: 1px solid var(--vg-border);
  font-family: var(--vg-font) !important;
  color: var(--vg-text) !important;
  padding: 12px 14px !important;
}
.mapboxgl-popup-tip {
  display: none;
}

/* =====================================================================
   WINDOWS / PANELS  (vendor .toolbar_window shells + Telerik RadWindow)
   ===================================================================== */
.toolbar_window,
.RadWindow_Bootstrap,
.RadWindow {
  border-radius: var(--vg-radius-card) !important;
  border: 1px solid var(--vg-border) !important;
  box-shadow: var(--vg-shadow-xl) !important;
  overflow: hidden;
  background: var(--vg-surface) !important;
}
.toolbar_window .header_row,
.RadWindow .rwTitleBar,
.RadWindow .rwTitleRow {
  background: var(--vg-surface) !important;
  border-bottom: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  font-weight: 600;
  padding: 12px 16px !important;
}
.RadWindow .rwTitle {
  color: var(--vg-text) !important;
  font-weight: 600 !important;
}
.toolbar_window .tab {
  color: var(--vg-text-muted) !important;
  border-radius: var(--vg-radius) var(--vg-radius) 0 0;
}
.toolbar_window .tab.active_tab {
  color: var(--vg-brand) !important;
  border-bottom: 2px solid var(--vg-brand) !important;
}

/* ---------- Telerik Bootstrap-skin controls inside windows ---------- */
.RadButton.RadButton_Bootstrap.rbButton:not(#nav_mapControls *) {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  color: #fff !important;
  border-radius: var(--vg-radius) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.RadButton.RadButton_Bootstrap.rbButton:not(#nav_mapControls *):hover {
  background: var(--vg-brand-hover) !important;
  border-color: var(--vg-brand-hover) !important;
}
.RadCheckBox .rbToggleCheckbox.rbToggleCheckboxChecked,
.RadCheckBox_Bootstrap .rbToggleCheckboxChecked {
  color: var(--vg-brand) !important;
}

.RadComboBox_Bootstrap .rcbInner,
.RadDropDownList_Bootstrap .rddlInner,
.RadInput_Bootstrap .riTextBox,
.RadInput_Bootstrap input {
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-radius);
  background: var(--vg-surface);
  color: var(--vg-text);
  box-shadow: none;
}
.RadComboBox_Bootstrap .rcbInner:focus-within,
.RadInput_Bootstrap input:focus {
  border-color: var(--vg-brand) !important;
  box-shadow: 0 0 0 3px var(--vg-brand-soft) !important;
}

.RadGrid_Bootstrap,
.RadGrid_Bootstrap .rgMasterTable {
  border-color: var(--vg-border) !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgHeader,
.RadGrid_Bootstrap th.rgHeader {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  border-color: var(--vg-border) !important;
}
.RadGrid_Bootstrap .rgRow td,
.RadGrid_Bootstrap .rgAltRow td {
  border-color: var(--vg-border) !important;
}
.RadGrid_Bootstrap .rgAltRow {
  background: var(--vg-surface) !important;
}
.RadGrid_Bootstrap .rgRow:hover,
.RadGrid_Bootstrap .rgAltRow:hover {
  background: var(--vg-brand-soft) !important;
}
.RadGrid_Bootstrap .rgSelectedRow {
  background: var(--vg-brand-soft) !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgFilterBox {
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  padding: 4px 8px !important;
}
.RadGrid_Bootstrap .rgPager,
.RadGrid_Bootstrap .rgCommandRow {
  background: var(--vg-surface-2) !important;
  border-color: var(--vg-border) !important;
}
.RadGrid_Bootstrap .rgPager .rgCurrentPage,
.RadGrid_Bootstrap .rgPager .rgCurrentPage span {
  background: var(--vg-brand) !important;
  color: #fff !important;
  border-radius: 6px;
}

.RadTabStrip_Bootstrap .rtsLink {
  border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important;
  color: var(--vg-text-muted) !important;
}
.RadTabStrip_Bootstrap .rtsSelected .rtsLink {
  color: var(--vg-brand) !important;
  border-bottom: 2px solid var(--vg-brand) !important;
  background: transparent !important;
}
.RadNotification_Bootstrap {
  border-radius: 12px !important;
  border-color: var(--vg-border) !important;
  box-shadow: var(--vg-shadow-xl) !important;
}

/* ---------- M3 (Bootstrap 5 markup, inside iframes) ---------- */
body {
  background: var(--vg-surface) !important;
  color: var(--vg-text) !important;
}
.form-label,
.col-form-label,
.text,
.info_text,
.small_text {
  color: var(--vg-text) !important;
}
.subtitle,
h5.subtitle {
  color: var(--vg-text-muted) !important;
  font-weight: 600 !important;
}
.form-control {
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  color: var(--vg-text) !important;
}
.form-control:focus {
  border-color: var(--vg-brand) !important;
  box-shadow: 0 0 0 3px var(--vg-brand-soft) !important;
}
.form-check-input {
  border: 1px solid var(--vg-border) !important;
  border-radius: 4px !important;
  width: 18px;
  height: 18px;
}
.form-check-input:checked {
  background-color: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
.nav-tabs {
  border-bottom: 1px solid var(--vg-border) !important;
}
.nav-tabs .nav-link {
  color: var(--vg-text-muted) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.nav-tabs .nav-link.active {
  color: var(--vg-brand) !important;
  border-bottom: 2px solid var(--vg-brand) !important;
  background: transparent !important;
}
.btn-primary {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  border-radius: var(--vg-radius) !important;
}
.btn-primary:hover {
  background: var(--vg-brand-hover) !important;
  border-color: var(--vg-brand-hover) !important;
}
.total_row {
  background: var(--vg-surface-2) !important;
  border-radius: var(--vg-radius);
}

/* ---------- RS (plain class names) ---------- */
.top_menu_item {
  color: var(--vg-text) !important;
}
.top_menu_item:hover,
.top_menu_item.selected {
  color: var(--vg-brand) !important;
}
.button_style {
  background: var(--vg-brand) !important;
  color: #fff !important;
  border-radius: var(--vg-radius) !important;
  border: 0 !important;
}
.report_row {
  border-color: var(--vg-border) !important;
}
.vessel_report_table th {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text-muted) !important;
}

/* =====================================================================
   DROPDOWN POPUPS  (top-bar "Vessels" scope list + search suggestions; Telerik Bootstrap skin)
   ===================================================================== */
.rddlSlide .rddlPopup,
.rddlPopup.rddlPopup_Bootstrap,
.rcbSlide .RadComboBoxDropDown,
.RadComboBoxDropDown.RadComboBoxDropDown_Bootstrap {
  background: var(--vg-surface) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-xl) !important;
  overflow: hidden !important;
  padding: 4px !important;
  margin-top: 6px !important;
}
.rddlPopup .rddlList,
.RadComboBoxDropDown .rcbList {
  padding: 0 !important;
  margin: 0 !important;
}
.rddlPopup .rddlItem,
.RadComboBoxDropDown .rcbItem,
.RadComboBoxDropDown .rcbHovered,
.RadComboBoxDropDown .rcbDisabled {
  padding: 8px 12px !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  border: 0 !important;
  color: var(--vg-text) !important;
  background: transparent !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
.rddlPopup .rddlItem:hover,
.rddlPopup .rddlItemHovered,
.rddlPopup .rddlHovered,
.RadComboBoxDropDown .rcbItem:hover,
.RadComboBoxDropDown .rcbHovered {
  background: var(--vg-brand-soft) !important;
  color: var(--vg-text) !important;
}
.rddlPopup .rddlItemSelected,
.rddlPopup .rddlItemSelected:hover,
.RadComboBoxDropDown .rcbSelected {
  background: var(--vg-brand) !important;
  color: #fff !important;
  font-weight: 500;
}
.RadComboBoxDropDown .rcbHeader,
.RadComboBoxDropDown .rcbFooter,
.RadComboBoxDropDown .rcbMoreResults {
  background: var(--vg-surface-2) !important;
  border-color: var(--vg-border) !important;
  color: var(--vg-text-muted) !important;
  font-size: 12px !important;
}
.RadComboBoxDropDown .rcbNoWrap,
.RadComboBoxDropDown .rcbScroll {
  background: transparent !important;
}

/* =====================================================================
   WINDOW CONTENT  (Tracked Assets, Saved Vessels, Layers … = .toolbar_window and RadWindow bodies)
   ===================================================================== */
.toolbar_window,
.toolbar_window .modal-body,
.RadWindow .rwContent,
.RadWindow .rwWindowContent {
  color: var(--vg-text) !important;
}
.toolbar_window .header_row .text,
.toolbar_window .header_row h4,
.toolbar_window .header_row span:not(.close) {
  font-family: var(--vg-font-display) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--vg-text) !important;
}
.toolbar_window .close,
.toolbar_window .header_row .close {
  color: var(--vg-text-muted) !important;
  opacity: 1 !important;
  border-radius: 8px !important;
  width: 28px;
  height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-shadow: none !important;
}
.toolbar_window .close:hover {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text) !important;
}
.toolbar_window .tab,
.toolbar_window .meta_tab .tab {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--vg-text-muted) !important;
  padding: 8px 12px !important;
  font-weight: 500;
}
.toolbar_window .tab:hover {
  color: var(--vg-text) !important;
}
.toolbar_window .tab.active_tab {
  color: var(--vg-brand) !important;
  border-bottom-color: var(--vg-brand) !important;
}
.toolbar_window .meta_tab {
  border-bottom: 1px solid var(--vg-border) !important;
}

/* quota bar (Tracked Assets) */
.quota-progress {
  background: var(--vanguard-ref-color-gray-200, #eaecf0) !important;
  border-radius: 99px !important;
  height: 6px !important;
  overflow: hidden;
}
.quota-fill,
.quota-fill--ok {
  background: var(--vg-brand) !important;
  border-radius: 99px !important;
}
.quota-fill--warn {
  background: var(--vanguard-ref-color-warning-500, #f79009) !important;
}
.quota-fill--danger,
.quota-fill--over {
  background: var(--vanguard-ref-color-error-500, #d92d20) !important;
}
.quota-caption,
.quota-caption--ok {
  color: var(--vg-text-muted) !important;
  font-size: 12px !important;
}

/* vendor file tree (fleets / folders / vessels) */
.main_file_tree_cont,
.main_file_tree_cont ul {
  list-style: none !important;
  padding-left: 0 !important;
}
/* tree geometry: folder row = [caret 14][box 16][icon+name]; children start under the folder icon */
#main_tracked_vessels li.folder {
  position: relative;
  padding-left: 20px !important;
}
#main_tracked_vessels li.folder > .fa-triangle[style*="block"] {
  position: absolute !important;
  left: 2px;
  top: 8px;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  margin: 0 !important;
}
#main_tracked_vessels li.folder > .fa-triangle[style*="block"]::before {
  display: block !important;
  width: 14px;
  height: 14px;
  line-height: 14px !important;
  text-align: center;
  margin: 0 !important;
}
#main_tracked_vessels li.folder > .fa-triangle[style*="block"] {
  display: block;
}
#main_tracked_vessels li.folder > button {
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 8px 0 6px !important;
}
.main_file_tree_cont ul.sub_tree,
.main_file_tree_cont ul.file_tree_content {
  margin: 0 0 2px 8px !important;
  padding-left: 24px !important;
  border-left: 1px solid var(--vg-border);
}
.main_file_tree_cont ul.sub_tree li.tree_element_item {
  padding-left: 0 !important;
}
.main_file_tree_cont ul.sub_tree li.folder {
  padding-left: 20px !important;
}
.tree_folder,
.tree_item {
  border-radius: 8px !important;
}
.tree_folder > button,
.tree_item > button,
.main_file_tree_cont button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--vg-text) !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  line-height: 22px !important;
  text-align: left;
  box-shadow: none !important;
}
.main_file_tree_cont button:hover,
.tree_item_name:hover {
  background: var(--vg-brand-soft) !important;
}
.tree_item_name {
  color: var(--vg-text) !important;
  font-size: 14px !important;
}
.tree_folder .fa-folder-open,
.tree_folder .fa-folder {
  color: var(--vg-brand) !important;
}
.expand_element,
.expand_element .fa-triangle {
  color: var(--vg-text-muted) !important;
  font-size: 10px !important;
}
/* FontAwesome-drawn checkboxes: unchecked square = border colour, checked = brand */
.custom_checkbox_class .fa-square,
.custom_checkbox_item_class .fa-square {
  color: var(--vanguard-ref-color-gray-300, #d0d5dd) !important;
}
.custom_checkbox_class .fa-square-check,
.custom_checkbox_item_class .fa-square-check,
.custom_checkbox_class .fa-check-square,
.custom_checkbox_item_class .fa-check-square,
.custom_checkbox_class .fa-square-minus,
.custom_checkbox_item_class .fa-square-minus {
  color: var(--vg-brand) !important;
}

/* any plain form control inside a window / panel / legend */
.toolbar_window input[type="text"],
.toolbar_window input[type="number"],
.toolbar_window input[type="search"],
.toolbar_window input[type="email"],
.toolbar_window input[type="date"],
.toolbar_window select,
.toolbar_window textarea,
.RadWindow input[type="text"],
.RadWindow input[type="number"],
.RadWindow select,
.RadWindow textarea,
.legend input,
.legend select,
.rgFilterRow input[type="text"] {
  background: var(--vg-surface) !important;
  color: var(--vg-text) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  padding: 6px 10px !important;
  min-height: 34px;
  box-shadow: none !important;
  font-size: 14px !important;
}
.toolbar_window input:focus,
.toolbar_window select:focus,
.toolbar_window textarea:focus,
.RadWindow input:focus,
.RadWindow select:focus {
  border-color: var(--vg-brand) !important;
  box-shadow: 0 0 0 3px var(--vg-brand-soft) !important;
  outline: none !important;
}
.toolbar_window input::placeholder,
.RadWindow input::placeholder {
  color: var(--vg-text-muted) !important;
}
.toolbar_window input[type="checkbox"],
.RadWindow input[type="checkbox"],
.legend input[type="checkbox"] {
  accent-color: var(--vg-brand);
  width: 16px;
  height: 16px;
}
.toolbar_window input[type="radio"],
.RadWindow input[type="radio"] {
  accent-color: var(--vg-brand);
}
.toolbar_window input[type="range"],
.RadWindow input[type="range"] {
  accent-color: var(--vg-brand);
}
/* plain buttons inside windows: secondary look, primary when vendor marks them */
.toolbar_window .btn,
.toolbar_window button.btn-secondary,
.RadWindow .btn {
  border-radius: var(--vg-radius) !important;
  border: 1px solid var(--vg-border) !important;
  background: var(--vg-surface) !important;
  color: var(--vg-text) !important;
  box-shadow: none !important;
  font-weight: 500;
}
.toolbar_window .btn:hover,
.RadWindow .btn:hover {
  background: var(--vg-surface-2) !important;
}
.toolbar_window .btn-primary,
.RadWindow .btn-primary,
.toolbar_window .btn-success {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  color: #fff !important;
}
.toolbar_window .btn-danger {
  background: var(--vanguard-ref-color-error-500, #d92d20) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* =====================================================================
   LEGEND  (#at-legend "Vessels - AIS Type") and other fixed light panels on the map
   ===================================================================== */
#at-legend.legend,
.legend {
  background: var(--vg-glass-light) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-light-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-lg) !important;
  padding: 10px 12px !important;
  color: var(--vg-text) !important;
}
.legend h3,
.legend h4,
.legend .title,
.legend b {
  font-family: var(--vg-font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--vg-text) !important;
  margin-bottom: 6px;
}
.legend li,
.legend .legend-item,
.legend p {
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--vg-text) !important;
}

/* =====================================================================
   GLASS EVERYWHERE — overrides that turn every panel surface into the shell's dark glass
   ===================================================================== */
.toolbar_window,
.RadWindow_Bootstrap,
.RadWindow,
.rddlSlide .rddlPopup,
.rddlPopup.rddlPopup_Bootstrap,
.rcbSlide .RadComboBoxDropDown,
.RadComboBoxDropDown.RadComboBoxDropDown_Bootstrap,
#at-legend.legend,
.legend,
.mapboxgl-popup-content,
.RadNotification_Bootstrap,
.RadMenu_Bootstrap .rmRootGroup,
.RadMenu_Bootstrap .rmGroup {
  background: var(--vg-glass-dark) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-dark-border) !important;
  color: var(--vg-text) !important;
}
.toolbar_window .header_row,
.RadWindow .rwTitleBar,
.RadWindow .rwTitleRow {
  background: transparent !important;
  border-bottom: 1px solid var(--vg-border) !important;
}
.toolbar_window *,
.RadWindow .rwContent *,
.legend *,
.rddlPopup *,
.RadComboBoxDropDown * {
  color: inherit;
}
.toolbar_window .text,
.toolbar_window label,
.toolbar_window td,
.toolbar_window th,
.toolbar_window p,
.toolbar_window span,
.toolbar_window a:not(.btn) {
  color: var(--vg-text);
}
.toolbar_window a:not(.btn):hover {
  color: #fff;
}
.toolbar_window .text-muted,
.toolbar_window small,
.toolbar_window .small_text {
  color: var(--vg-text-muted) !important;
}

/* fields on glass */
.toolbar_window input[type="text"],
.toolbar_window input[type="number"],
.toolbar_window input[type="search"],
.toolbar_window input[type="email"],
.toolbar_window input[type="date"],
.toolbar_window select,
.toolbar_window textarea,
.RadWindow input[type="text"],
.RadWindow input[type="number"],
.RadWindow select,
.RadWindow textarea,
.legend input,
.legend select,
.rgFilterRow input[type="text"],
.form-control,
.RadComboBox_Bootstrap .rcbInner,
.RadDropDownList_Bootstrap .rddlInner,
.RadInput_Bootstrap .riTextBox,
.RadInput_Bootstrap input,
.RadGrid_Bootstrap .rgFilterBox {
  background: var(--vg-field) !important;
  color: var(--vg-text) !important;
  border: 1px solid var(--vg-border) !important;
}
.toolbar_window select option,
.form-control option {
  background: #1f2937;
  color: var(--vg-text);
}
.rcbInput,
.rddlFakeInput,
.RadInput_Bootstrap input {
  color: var(--vg-text) !important;
}
.rcbInput.rcbEmptyMessage,
.toolbar_window input::placeholder,
.form-control::placeholder {
  color: var(--vg-text-muted) !important;
}
.toolbar_window input[type="checkbox"],
.legend input[type="checkbox"],
.form-check-input {
  background-color: var(--vg-field) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.form-check-input:checked {
  background-color: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
.custom_checkbox_class .fa-square,
.custom_checkbox_item_class .fa-square {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* grid on glass */
.RadGrid_Bootstrap,
.RadGrid_Bootstrap .rgMasterTable,
.RadGrid_Bootstrap .rgDataDiv,
.RadGrid_Bootstrap .rgHeaderDiv,
.RadGrid_Bootstrap .rgHeaderWrapper {
  background: transparent !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgRow,
.RadGrid_Bootstrap .rgAltRow {
  background: transparent !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgRow:hover,
.RadGrid_Bootstrap .rgAltRow:hover,
.RadGrid_Bootstrap .rgSelectedRow {
  background: var(--vg-brand-soft) !important;
}
.RadGrid_Bootstrap .rgHeader,
.RadGrid_Bootstrap th.rgHeader,
.RadGrid_Bootstrap .rgPager,
.RadGrid_Bootstrap .rgCommandRow,
.RadGrid_Bootstrap .rgFilterRow td {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text-muted) !important;
  border-color: var(--vg-border) !important;
}
.RadGrid_Bootstrap .rgRow td,
.RadGrid_Bootstrap .rgAltRow td {
  border-color: var(--vg-border) !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgPager a,
.RadGrid_Bootstrap .rgPager span {
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgPager .rgCurrentPage span {
  background: var(--vg-brand) !important;
  color: #fff !important;
}
.RadGrid_Bootstrap .rgInfoPart {
  color: var(--vg-text-muted) !important;
}

/* secondary buttons on glass */
.toolbar_window .btn,
.RadWindow .btn,
.main_file_tree_cont button {
  background: transparent !important;
  color: var(--vg-text) !important;
  border-color: var(--vg-border) !important;
}
.toolbar_window .btn:hover,
.RadWindow .btn:hover,
.main_file_tree_cont button:hover {
  background: var(--vg-surface-2) !important;
}
.toolbar_window .btn-primary,
.RadWindow .btn-primary,
.btn-primary {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  color: #fff !important;
}

/* map chips / controls on glass */
.mapboxgl-ctrl-group {
  background: var(--vg-glass-dark) !important;
  border-color: var(--vg-glass-dark-border) !important;
}
.mapboxgl-ctrl-group button {
  border-top-color: var(--vg-border) !important;
}
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: invert(1) brightness(1.4);
}
#mapLatLng {
  color: var(--vg-text) !important;
}
.mapboxgl-ctrl-attrib {
  background: rgba(37, 48, 66, 0.75) !important;
  color: var(--vg-text-muted) !important;
}
.mapboxgl-ctrl-attrib a {
  color: var(--vg-text-muted) !important;
}
.mapboxgl-popup-content {
  color: var(--vg-text) !important;
}
.mapboxgl-popup-close-button {
  color: var(--vg-text-muted) !important;
}

/* M3 (inside iframes) follows the same glass */
body {
  background: transparent !important;
  color: var(--vg-text) !important;
}
.form-label,
.col-form-label,
.text,
.info_text,
.small_text,
.subtitle,
h5.subtitle,
h1.title {
  color: var(--vg-text) !important;
}
.nav-tabs .nav-link {
  color: var(--vg-text-muted) !important;
}
.nav-tabs .nav-link.active {
  color: #fff !important;
}
.total_row {
  background: var(--vg-surface-2) !important;
}
img[src*="logotransparent"],
img[src*="Maritrace/Logo"] {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* page ground: dark behind everything (login page, M3 opened standalone, iframes while loading) */
html {
  background: #121722 !important;
}
.card,
.login_card,
#loginPanel {
  background: var(--vg-glass-dark) !important;
  color: var(--vg-text) !important;
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: var(--vg-radius-card) !important;
}
#loginPanel label,
#loginPanel .form-label,
#loginPanel span {
  color: var(--vg-text) !important;
}
#loginPanel input[type="text"],
#loginPanel input[type="password"],
#loginPanel input[type="email"] {
  background: var(--vg-field) !important;
  color: var(--vg-text) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
}

/* RadWindow content pane + the vendor pages loaded inside it (vesselDetailsWindow.aspx etc.) */
.RadWindow .rwContent,
.RadWindow .rwWindowContent,
.RadWindow .rwExternalContent,
.RadWindow iframe {
  background: transparent !important;
}
html,
body {
  background: #121722 !important;
} /* opaque dark ground also inside same-origin iframes */
body {
  color: var(--vg-text) !important;
}
.vesselWindowDataHeader,
.vesselWindowDataItem,
.lead,
.courier,
.text-uppercase,
.container-fluid,
.row,
p,
li,
td,
th,
label,
span:not(.fa):not([class*="fa-"]):not(.k-icon):not(.p-icon) {
  color: inherit;
}
.vesselWindowDataHeader {
  color: var(--vg-text-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}
.vesselWindowDataItem,
.courier {
  color: var(--vg-text) !important;
}
.small,
small,
.text-muted {
  color: var(--vg-text-muted) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.sub_title,
.subtitle,
.rwTitle,
.header_row,
.toolbar_window .header_row *,
.toolbar_window h1,
.toolbar_window h2,
.toolbar_window h3,
.toolbar_window h4,
.toolbar_window h5 {
  color: var(--vg-text) !important;
}
.toolbar_window i.fa-solid,
.toolbar_window i.fa-regular,
.toolbar_window .chevron_open,
.toolbar_window .chevron_closed {
  color: var(--vg-text-muted) !important;
}
hr {
  border-color: var(--vg-border) !important;
  opacity: 1;
}
table,
.table {
  color: var(--vg-text) !important;
}
.table td,
.table th,
table td,
table th {
  border-color: var(--vg-border) !important;
}
.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
  background: var(--vg-surface-2) !important;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--vg-text-muted) !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: #fff !important;
  background: transparent !important;
}
.bg-light,
.bg-white {
  background: transparent !important;
}
.border,
.border-top,
.border-bottom {
  border-color: var(--vg-border) !important;
}
/* Telerik calendar / date pickers (rc*) and multipage views */
.RadCalendar,
.RadCalendar_Bootstrap,
.rcMain,
.rcTitlebar,
.RadPicker_Bootstrap .riTextBox,
.rmpView {
  background: transparent !important;
  color: var(--vg-text) !important;
  border-color: var(--vg-border) !important;
}
.RadCalendar .rcRow td {
  color: var(--vg-text) !important;
  border-color: var(--vg-border) !important;
}
.RadCalendar .rcOtherMonth,
.RadCalendar .rcOutOfRange {
  color: var(--vg-text-muted) !important;
  opacity: 0.6;
}
.RadCalendar .rcSelected a,
.RadCalendar .rcHover a {
  background: var(--vg-brand) !important;
  color: #fff !important;
  border-radius: 6px;
}
/* RadButton in content pages = secondary glass button unless it is the primary action */
.RadButton.RadButton_Bootstrap.rbButton:not(#nav_mapControls *) {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
}
.RadButton.RadButton_Bootstrap.rbButton:not(#nav_mapControls *):hover {
  background: var(--vg-surface-2) !important;
}
.RadButton.RadButton_Bootstrap.rbButton.rbPrimaryButton,
.RadButton.RadButton_Bootstrap.rbButton.rbChecked {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  color: #fff !important;
}
.rbButton .rbIcon,
.rbButton .rbText,
.t-font-icon {
  color: inherit !important;
}

/* RadWindow title-bar commands (pin / reload / minimize / maximize / close): one look for all five */
.RadWindow .rwCommands {
  right: 8px !important;
}
.RadWindow .rwCommands .rwListItem {
  margin: 0 2px !important;
}
.RadWindow .rwCommandButton,
.RadWindow .rwCommandButton.rwCloseButton {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--vg-text-muted) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.RadWindow .rwCommandButton::before {
  font-size: 14px !important;
  color: inherit !important;
  margin: 0 !important;
}
.RadWindow .rwCommandButton:hover,
.RadWindow_Bootstrap .rwCommandButton:hover {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text) !important;
  border-color: transparent !important;
}
.RadWindow .rwTitleBar {
  padding: 10px 14px !important;
  min-height: 48px;
}
.RadWindow .rwIcon {
  color: var(--vg-text-muted) !important;
}
.RadWindow .rwTitle {
  font-family: var(--vg-font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* window title strips and Telerik toolbars inside content pages */
.toolbar_window .meta_tab,
.meta_tab {
  background: transparent !important;
  border-bottom: 1px solid var(--vg-border) !important;
}
.RadToolBar,
.RadToolBar_Bootstrap,
.RadToolBar_Material,
.RadToolBar .rtbOuter,
.RadToolBar .rtbMiddle,
.RadToolBar .rtbInner,
.RadToolBar .rtbUL {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.RadToolBar .rtbButton,
.RadToolBar_Bootstrap .rtbButton,
.RadToolBar .rtbMenuButton,
.RadToolBar .rtbTemplate {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  color: var(--vg-text) !important;
  box-shadow: none !important;
  min-height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 8px !important;
}
.RadToolBar .rtbButton:hover,
.RadToolBar .rtbItemHovered .rtbButton,
.RadToolBar .rtbItemFocused .rtbButton {
  background: var(--vg-surface-2) !important;
  border-color: var(--vg-border) !important;
}
.RadToolBar .rtbItemChecked .rtbButton,
.RadToolBar .rtbChecked .rtbButton {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  color: #fff !important;
}
.RadToolBar .rtbIcon,
.RadToolBar .rtbImage,
.RadToolBar .rtbText,
.RadToolBar .rtbIcon::before,
.RadToolBar .rtbExpandDown::after,
.RadToolBar .rtbExpandDown::before {
  color: inherit !important;
}
.RadToolBar .rtbSeparator,
.RadToolBar .rtbSep {
  border-color: var(--vg-border) !important;
  background: var(--vg-border) !important;
}
.RadToolBar .rtbItem {
  margin: 0 2px !important;
}
.RadToolBar .rtbGroup,
.RadToolBar .rtbSlide,
.RadToolBar .rtbDropDown {
  background: var(--vg-glass-dark) !important;
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-xl) !important;
}
.RadToolBar .rtbGroup .rtbItem .rtbWrap,
.RadToolBar .rtbGroup .rtbItem a {
  color: var(--vg-text) !important;
}
.RadToolBar .rtbGroup .rtbItem:hover .rtbWrap {
  background: var(--vg-brand-soft) !important;
}

/* search field on the dark bar: a field, not a card */
#nav_mapControls .RadComboBox_Bootstrap .rcbInner {
  background: var(--vg-field) !important;
  border-color: var(--vg-border) !important;
}
#nav_mapControls .rcbInput,
#nav_mapControls .rcbInput.rcbFocused {
  color: var(--vg-text) !important;
}

/* visible-vessels list (top right, #detailedvessellegend): inline-styled table from the vendor */
#detailedvessellegend {
  background: var(--vg-glass-dark) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-lg) !important;
  padding: 6px !important;
  color: var(--vg-text) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
#detailedvessellegend::-webkit-scrollbar {
  width: 6px;
}
#detailedvessellegend::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}
#detailedvessellegend table {
  color: var(--vg-text) !important;
  font-size: 11px !important;
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
  width: 332px !important;
  table-layout: fixed !important;
}
#detailedvessellegend .detailedvessellegendcell:nth-child(1) {
  width: 124px !important;
}
#detailedvessellegend .detailedvessellegendcell:nth-child(2) {
  width: 56px !important;
}
#detailedvessellegend .detailedvessellegendcell:nth-child(3) {
  width: 46px !important;
}
#detailedvessellegend .detailedvessellegendcell:nth-child(4) {
  width: 42px !important;
}
#detailedvessellegend .detailedvessellegendcell:nth-child(5) {
  width: 64px !important;
}
#detailedvessellegend {
  width: 352px !important;
  max-width: 352px !important;
  max-height: 40vh;
}
#detailedvessellegend .detailedvessellegendrow {
  border-radius: 6px;
  transition: background 0.12s ease;
}
#detailedvessellegend .detailedvessellegendrow:hover .detailedvessellegendcell {
  background: var(--vg-brand-soft) !important;
}
#detailedvessellegend .detailedvessellegendcell {
  padding: 3px 4px !important;
  color: var(--vg-text) !important;
  border: 0 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px !important;
  vertical-align: middle;
}
#detailedvessellegend .detailedvessellegendcell:first-child {
  border-radius: 6px 0 0 6px;
  font-weight: 500;
}
#detailedvessellegend .detailedvessellegendcell:nth-child(2),
#detailedvessellegend .detailedvessellegendcell:nth-child(3),
#detailedvessellegend .detailedvessellegendcell:nth-child(4) {
  color: var(--vg-text-muted) !important;
  font-variant-numeric: tabular-nums;
}
/* risk cell: vendor paints High/Medium inline (kept); the grey "n/a" (#ccc) becomes a quiet chip */
#detailedvessellegend .detailedvessellegendcell:last-child {
  border-radius: 0 6px 6px 0;
  text-align: center !important;
  padding-left: 6px !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#detailedvessellegend .detailedvessellegendcell[style*="#ccc"],
#detailedvessellegend .detailedvessellegendcell[style*="#CCC"],
#detailedvessellegend .detailedvessellegendcell[style*="rgb(204, 204, 204)"],
#detailedvessellegend .detailedvessellegendcell[style*="lightgray"],
#detailedvessellegend .detailedvessellegendcell[style*="lightgrey"] {
  background: var(--vg-field) !important;
  color: var(--vg-text-muted) !important;
}

/* Tracked Assets tree checkboxes: vendor draws them as 10 px FontAwesome Sharp glyphs.
   Redrawn as our 16 px checkbox: the <i> becomes the box, the glyph is the check mark. */
.toolbar_window i.custom_checkbox_class,
.toolbar_window i.custom_checkbox_item_class {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 4px !important;
  background: var(--vg-field) !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
/* unchecked: the square glyph itself is hidden, the box is the border */
.toolbar_window i.custom_checkbox_class.fa-square::before,
.toolbar_window i.custom_checkbox_item_class.fa-square::before {
  content: none !important;
}
.toolbar_window i.custom_checkbox_class:hover,
.toolbar_window i.custom_checkbox_item_class:hover {
  border-color: var(--vg-brand) !important;
}
/* checked / mixed: brand fill, white glyph (FontAwesome check = \f00c, minus = \f068) */
.toolbar_window i.custom_checkbox_class.fa-square-check,
.toolbar_window i.custom_checkbox_item_class.fa-square-check,
.toolbar_window i.custom_checkbox_class.fa-check-square,
.toolbar_window i.custom_checkbox_item_class.fa-check-square,
.toolbar_window i.custom_checkbox_class.fa-square-minus,
.toolbar_window i.custom_checkbox_item_class.fa-square-minus,
.toolbar_window i.custom_checkbox_class.fa-minus-square,
.toolbar_window i.custom_checkbox_item_class.fa-minus-square {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  color: #fff !important;
}
.toolbar_window i.custom_checkbox_class.fa-square-check::before,
.toolbar_window i.custom_checkbox_item_class.fa-square-check::before,
.toolbar_window i.custom_checkbox_class.fa-check-square::before,
.toolbar_window i.custom_checkbox_item_class.fa-check-square::before {
  content: "\f00c" !important;
  font-weight: 900 !important;
}
.toolbar_window i.custom_checkbox_class.fa-square-minus::before,
.toolbar_window i.custom_checkbox_item_class.fa-square-minus::before,
.toolbar_window i.custom_checkbox_class.fa-minus-square::before,
.toolbar_window i.custom_checkbox_item_class.fa-minus-square::before {
  content: "\f068" !important;
  font-weight: 900 !important;
}
/* row layout around the box */
/* rows are plain <li>s whose children are inline: align them on one baseline, keep sub-trees below */
#main_tracked_vessels li.tree_element_item,
#main_tracked_vessels li.folder {
  line-height: 30px;
}
#main_tracked_vessels li.tree_element_item > i,
#main_tracked_vessels li.tree_element_item > span,
#main_tracked_vessels li.folder > i:not(.fa-triangle),
#main_tracked_vessels li.folder > span,
#main_tracked_vessels li.folder > button {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
} /* the caret keeps the vendor's inline display:none when a folder has nothing to expand */
#main_tracked_vessels .tree_item_name {
  display: inline !important;
  vertical-align: middle;
  line-height: 30px;
}
#main_tracked_vessels .expand_element > .fa-triangle[style*="block"] {
  display: inline-flex !important;
  width: 14px;
  height: 14px;
  justify-content: center;
  align-items: center;
  font-size: 9px !important;
  color: var(--vg-text-muted) !important;
  cursor: pointer;
}
#main_tracked_vessels input.item_checkbox {
  display: none !important;
}
#main_tracked_vessels .tree_folder .fa-folder-open,
#main_tracked_vessels .tree_folder .fa-folder {
  margin-right: 6px;
}

/* caret direction from the real state (vendor class names are not reliable): down when the folder
   has visible children, right when collapsed. FA "triangle" points up natively. */
/* own chevron instead of the FontAwesome triangle (vendor rotates/swaps it unpredictably) */
#main_tracked_vessels li.folder > .fa-triangle[style*="block"] {
  left: 0 !important;
  top: 7px !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important; /* same box as the checkbox, 4 px gap */
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform: none !important;
  rotate: none !important;
  color: var(--vg-text-muted) !important;
} /* vendor rotates via the `rotate` property (90deg / 180deg); our chevron handles direction */
#main_tracked_vessels li.folder > .fa-triangle[style*="block"]::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: translateX(-1.5px) rotate(-45deg);
  transition: transform 0.15s ease; /* > collapsed, optically centred */
}
#main_tracked_vessels li.folder > .fa-triangle.triangle_down[style*="block"]::before {
  transform: translateY(-1.5px) rotate(45deg);
} /* v expanded (vendor .triangle_down = open) */
#main_tracked_vessels li.folder > .fa-triangle[style*="block"]:hover {
  color: var(--vg-text) !important;
}

/* folder checkboxes carry a vendor ::after layer (second glyph) that children do not have: drop it */
.toolbar_window i.custom_checkbox_class::after,
.toolbar_window i.custom_checkbox_item_class::after {
  content: none !important;
  display: none !important;
}

/* =====================================================================
   FLEET LIST (RadGrid inside FleetOverview.aspx): footer, pager, headers, mono font, risk cells
   ===================================================================== */
.RadGrid_Bootstrap .rgFooterWrapper,
.RadGrid_Bootstrap .rgFooter,
.RadGrid_Bootstrap .rgFooter td,
.RadGrid_Bootstrap .rgCommandCell,
.RadGrid_Bootstrap .rgPagerCell,
.RadGrid_Bootstrap .rgPager,
.RadGrid_Bootstrap .rgPagerWrapper,
.RadGrid_Bootstrap .rgCommandRow,
.RadGrid_Bootstrap .rgCommandTable,
.RadGrid_Bootstrap .rgHeaderWrapper,
.RadGrid_Bootstrap .rgFilterRow td,
.RadGrid_Bootstrap .rgFilterRow {
  background: var(--vg-surface-2) !important;
  border-color: var(--vg-border) !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgDataDiv,
.RadGrid_Bootstrap .rgMasterTable tbody {
  background: transparent !important;
}
/* column headers: group row stays muted/uppercase, column row readable */
.RadGrid_Bootstrap th.rgHeader,
.RadGrid_Bootstrap th.rgHeader a,
.RadGrid_Bootstrap .rgHeader .rgHeaderText {
  color: var(--vg-text) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
.RadGrid_Bootstrap th.rgHeader[colspan] {
  color: var(--vg-text-muted) !important;
  letter-spacing: 0.06em;
}
.RadGrid_Bootstrap .rgSortAsc,
.RadGrid_Bootstrap .rgSortDesc,
.RadGrid_Bootstrap .rgActionButton,
.RadGrid_Bootstrap .t-button,
.RadGrid_Bootstrap .t-font-icon {
  color: var(--vg-text-muted) !important;
  opacity: 1 !important;
}
.RadGrid_Bootstrap .rgActionButton:hover {
  color: var(--vg-text) !important;
  background: var(--vg-brand-soft) !important;
  border-radius: 6px;
}
/* vendor forces Courier on data cells; our table style is the UI font with tabular figures */
.Courier,
.courier,
.RadGrid_Bootstrap td.Courier,
.RadGrid_Bootstrap .rgRow td,
.RadGrid_Bootstrap .rgAltRow td {
  font-family: var(--vg-font) !important;
  font-variant-numeric: tabular-nums;
  font-size: 12px !important;
  letter-spacing: 0;
}
.RadGrid_Bootstrap .rgRow td,
.RadGrid_Bootstrap .rgAltRow td {
  padding: 4px 10px !important;
  line-height: 16px !important;
  height: auto !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
} /* compact rows; full text via title tooltip (skin.js) */
.RadGrid_Bootstrap .rgRow td.vessel_mmsi,
.RadGrid_Bootstrap .rgRow td.latitude,
.RadGrid_Bootstrap .rgRow td.longitude,
.RadGrid_Bootstrap .rgAltRow td.vessel_mmsi,
.RadGrid_Bootstrap .rgAltRow td.latitude,
.RadGrid_Bootstrap .rgAltRow td.longitude {
  white-space: nowrap !important;
  overflow-wrap: normal;
} /* identifiers and coordinates stay on one line (hidden columns shift nth-child, so classes) */
.RadGrid_Bootstrap .rgRow .RadButton.rbIconButton,
.RadGrid_Bootstrap .rgAltRow .RadButton.rbIconButton {
  width: 28px !important;
  height: 28px !important;
  min-height: 0 !important;
  padding: 0 !important;
}
/* risk cells keep the vendor's inline colour; the text on them must be dark again */
.RadGrid_Bootstrap td[style*="background"],
.RadGrid_Bootstrap td[style*="background"] * {
  color: #101828 !important;
  font-weight: 600 !important;
}
/* pager */
.RadGrid_Bootstrap .rgPager .rgNumPart a,
.RadGrid_Bootstrap .rgPager .rgPagerButton,
.RadGrid_Bootstrap .rgPager .rgPageFirst,
.RadGrid_Bootstrap .rgPager .rgPagePrev,
.RadGrid_Bootstrap .rgPager .rgPageNext,
.RadGrid_Bootstrap .rgPager .rgPageLast {
  color: var(--vg-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  padding: 0 8px !important;
  margin: 0 2px !important;
  opacity: 1 !important;
}
.RadGrid_Bootstrap .rgPager .rgNumPart a:hover,
.RadGrid_Bootstrap .rgPager .rgPagerButton:hover {
  background: var(--vg-brand-soft) !important;
}
.RadGrid_Bootstrap .rgPager .rgNumPart a.rgCurrentPage,
.RadGrid_Bootstrap .rgPager .rgCurrentPage span {
  background: var(--vg-brand) !important;
  color: #fff !important;
  border-radius: 6px !important;
}
.RadGrid_Bootstrap .rgPager .rgInfoPart,
.RadGrid_Bootstrap .rgPager .rgPagerLabel,
.RadGrid_Bootstrap .rgPager label {
  color: var(--vg-text-muted) !important;
}
.RadGrid_Bootstrap .rgPager .RadComboBox .rcbInner,
.RadGrid_Bootstrap .rgPager .RadInput input {
  background: var(--vg-field) !important;
  border-color: var(--vg-border) !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgPager .rgPagerButton::before,
.RadGrid_Bootstrap .rgPager .rgIcon {
  color: inherit !important;
}
/* command row (export / refresh / open) as glass tiles */
.RadGrid_Bootstrap .rgCommandCell .RadToolBar .rtbButton,
.RadGrid_Bootstrap .rgCommandCell .rtbButton,
.RadGrid_Bootstrap .rgCommandCell button,
.RadGrid_Bootstrap .rgCommandCell .rgCommandButton {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  color: var(--vg-text) !important;
  opacity: 1 !important;
}
.RadGrid_Bootstrap .rgCommandCell .rtbButton:hover {
  background: var(--vg-surface-2) !important;
}
/* the RadWindow holding the grid: no inner white frame */
.RadWindow .rwContent .RadGrid,
.RadWindow .rwContent .RadGrid_Bootstrap {
  border: 0 !important;
  background: transparent !important;
}

/* vendor pages set Poppins / Helvetica on grid chrome: UI font everywhere except icon glyphs */
.RadGrid_Bootstrap
  *:not(.t-font-icon):not(.rgIcon):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(
    .p-icon
  ):not([class*="p-i-"]):not(.rbIcon):not(.rtbIcon):not([class*="rgSort"]),
.RadWindow .rwTitleBar *:not([class*="fa-"]):not(.rwIcon):not(.rwCommandButton) {
  font-family: var(--vg-font) !important;
}

/* Telerik icon-font buttons (grid sort / filter / pager / combo arrows) must keep their glyph font;
   the base `button { font-family }` rule above would turn them into letters */
.t-font-icon,
.t-font-icon::before,
.rgActionButton::before,
.rgSortAsc::before,
.rgSortDesc::before,
.rgFilter::before,
.rgPagerButton::before,
.rgPageFirst::before,
.rgPagePrev::before,
.rgPageNext::before,
.rgPageLast::before,
.rgExpand::before,
.rgCollapse::before,
.rcbActionButton::before,
.rddlIcon::before,
.rwCommandButton::before,
.p-icon::before,
[class*="p-i-"]::before {
  font-family: "WebComponentsIcons" !important;
}

/* keep the grid footer inside the window: vendor sizes the data area, so header rows stay compact */
.RadGrid_Bootstrap th.rgHeader {
  padding: 4px 10px !important;
  height: 30px !important;
  line-height: 22px !important;
}
.RadGrid_Bootstrap .rgFilterRow td {
  padding: 3px 6px !important;
  height: 32px !important;
}
.RadGrid_Bootstrap .rgFilterRow .rgFilterBox,
.RadGrid_Bootstrap .rgFilterRow input,
.RadGrid_Bootstrap .rgFilterRow .riTextBox {
  min-height: 26px !important;
  height: 26px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
}
.RadGrid_Bootstrap .rgCommandCell {
  padding: 6px 8px !important;
  height: 44px !important;
}
.RadGrid_Bootstrap .rgCommandCell .rtbButton,
.RadGrid_Bootstrap .rgCommandCell button {
  min-height: 30px !important;
  height: 30px !important;
}
.RadGrid_Bootstrap .rgPagerCell {
  padding: 4px 8px !important;
}
.RadGrid_Bootstrap .rgCommandCell img {
  height: 28px !important;
  width: auto !important;
  opacity: 0.9;
} /* vendor logo in the command row was 55 px tall */

/* risk badges (built by skin.js from the vendor's inline cell colours) */
.vg-risk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vg-risk) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--vg-risk) 60%, transparent);
  color: var(--vg-risk) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
  text-align: left;
  line-height: 16px !important; /* ellipsis lands at the end, not both sides */ /* '4 - MEDIUM-HIGH' wraps to two lines, nothing hidden */
}
.vg-risk--na {
  background: var(--vg-field);
  border-color: var(--vg-border);
  color: var(--vg-text-muted) !important;
}
.RadGrid_Bootstrap td[data-vg-badged],
#detailedvessellegend .detailedvessellegendcell[data-vg-badged] {
  background: transparent !important;
  text-align: center !important;
}
.RadGrid_Bootstrap td[data-vg-badged] *,
#detailedvessellegend .detailedvessellegendcell[data-vg-badged] * {
  color: var(--vg-risk) !important;
}
.RadGrid_Bootstrap td[data-vg-badged] .vg-risk--na,
#detailedvessellegend .vg-risk--na {
  color: var(--vg-text-muted) !important;
}
/* the earlier full-cell dark-text rule must not fight the badge */
.RadGrid_Bootstrap td[style*="background"][data-vg-badged],
.RadGrid_Bootstrap td[style*="background"][data-vg-badged] * {
  color: var(--vg-risk) !important;
}

/* dark scrollbars inside the grid and windows */
.rgDataDiv,
.rgHeaderDiv,
.toolbar_window,
.RadWindow .rwContent,
.main_file_tree_cont,
.thinScroll,
.RadTreeView,
.rnContentWrapper,
.RadNotification {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.rgDataDiv::-webkit-scrollbar,
.toolbar_window::-webkit-scrollbar,
.RadWindow .rwContent::-webkit-scrollbar,
.RadTreeView::-webkit-scrollbar,
.rnContentWrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.rgDataDiv::-webkit-scrollbar-track,
.toolbar_window::-webkit-scrollbar-track {
  background: transparent;
}
.rgDataDiv::-webkit-scrollbar-thumb,
.toolbar_window::-webkit-scrollbar-thumb,
.RadWindow .rwContent::-webkit-scrollbar-thumb,
.RadTreeView::-webkit-scrollbar-thumb,
.rnContentWrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}
.RadTreeView::-webkit-scrollbar-track,
.rnContentWrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* Fleet List risk column: vendor 100 px clips "4 - MEDIUM-HIGH"; the header / data / footer tables
   share the same colgroup order, so one rule keeps all three aligned */
.RadGrid_Bootstrap .rgMasterTable colgroup col:nth-child(23) {
  width: 150px !important;
}

/* selected / hovered grid rows: tint the cells, vendor paints solid blue on the <td>s */
.RadGrid_Bootstrap .rgSelectedRow td,
.RadGrid_Bootstrap tr.rgSelectedRow > td,
.RadGrid_Bootstrap .rgRow.rgSelectedRow td,
.RadGrid_Bootstrap .rgAltRow.rgSelectedRow td {
  background: var(--vg-brand-soft) !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgRow:hover td,
.RadGrid_Bootstrap .rgAltRow:hover td,
.RadGrid_Bootstrap .rgHoveredRow td {
  background: rgba(255, 255, 255, 0.06) !important;
}
.RadGrid_Bootstrap .rgSelectedRow td[data-vg-badged],
.RadGrid_Bootstrap .rgRow:hover td[data-vg-badged] {
  background: inherit !important;
}

/* RadWindow content pane: vendor draws a 1 px #dedede frame (the light line under the title bar) */
.RadWindow .rwContent,
.RadWindow .rwExternalContent,
.RadWindow .rwContentWrapper,
.RadWindow .rwWindowContent {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.RadWindow .rwTitleBar {
  border-bottom: 1px solid var(--vg-border) !important;
}
/* toolbar icon buttons: vendor adds a Bootstrap pt-1.5 (5.9 px top padding) on the glyph, which sank it */
.RadToolBar .rtbButton.rtbIconOnly,
.rgCommandCell .rtbButton.rtbIconOnly {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.RadToolBar .rtbButton .rtbImage,
.RadToolBar .rtbButton .rtbIcon,
.RadToolBar .rtbButton i {
  padding: 0 !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.RadToolBar .rtbButton .rtbImage::before,
.RadToolBar .rtbButton i::before {
  line-height: 1 !important;
  vertical-align: middle;
}

/* grid header / footer scroll-filler frames (vendor #dedede): the thin light line at the top-right of the window */
.RadGrid_Bootstrap .rgHeaderDiv,
.RadGrid_Bootstrap .rgFooterDiv,
.RadGrid_Bootstrap .rgHeaderWrapper,
.RadGrid_Bootstrap .rgFooterWrapper {
  border-right: 0 !important;
  border-left: 0 !important;
  border-top: 0 !important;
}
.RadGrid_Bootstrap .rgHeaderDiv {
  border-bottom: 1px solid var(--vg-border) !important;
}

/* =====================================================================
   MAP LAYERS (RadNotification + RadTreeView, Bootstrap skin)
   ===================================================================== */
.RadNotification_Bootstrap .rnTitleBar,
.RadNotification .rnTitleBar {
  background: transparent !important;
  border-bottom: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  padding: 10px 14px !important;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.RadNotification .rnTitleBarTitle {
  font-family: var(--vg-font-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--vg-text) !important;
}
.RadNotification .rnIcon {
  display: none !important;
}
.RadNotification .rnCommands {
  margin-left: auto !important;
  position: static !important;
}
.RadNotification .rnCloseIcon a {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  color: var(--vg-text-muted) !important;
  background: transparent !important;
  border: 0 !important;
}
.RadNotification .rnCloseIcon a:hover {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text) !important;
}
.RadNotification .rnCloseIcon a::before {
  font-family: "WebComponentsIcons" !important;
  color: inherit !important;
}
.RadNotification .rnContentWrapper,
.RadNotification .RadXmlHttpPanel {
  background: transparent !important;
  color: var(--vg-text) !important;
  padding: 8px 6px !important;
}

/* tree */
.RadTreeView_Bootstrap,
.RadTreeView {
  background: transparent !important;
  color: var(--vg-text) !important;
  font-family: var(--vg-font) !important;
}
.RadTreeView .rtUL,
.RadTreeView .rtLI,
.RadTreeView .rtLines,
.RadTreeView .rtLines .rtLI,
.RadTreeView .rtLines .rtUL {
  background-image: none !important;
} /* dotted connector sprites */
.RadTreeView .rtIn,
.RadTreeView .rtText,
.RadTreeView .rtIn * {
  color: var(--vg-text) !important;
  font-size: 14px !important;
}
.RadTreeView .rtOut {
  display: flex !important;
  align-items: center;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 6px 0 2px !important;
}
.RadTreeView .rtIn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
}
.RadTreeView .rtHover .rtIn,
.RadTreeView .rtIn:hover {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text) !important;
}
.RadTreeView .rtSelected > .rtOut > .rtIn,
.RadTreeView .rtSelected .rtIn {
  background: var(--vg-brand-soft) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.RadTreeView .rtUL .rtUL {
  margin-left: 22px !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--vg-border);
}
/* expanders: sprite -> chevron */
.RadTreeView .rtPlus,
.RadTreeView .rtMinus {
  width: 16px !important;
  height: 16px !important;
  margin: 0 4px 0 0 !important;
  background: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--vg-text-muted) !important;
  cursor: pointer;
  flex: 0 0 16px;
}
.RadTreeView .rtPlus::before,
.RadTreeView .rtMinus::before {
  content: "" !important;
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
}
.RadTreeView .rtPlus::before {
  transform: translateX(-1.5px) rotate(-45deg);
}
.RadTreeView .rtMinus::before {
  transform: translateY(-1.5px) rotate(45deg);
}
.RadTreeView .rtPlus:hover,
.RadTreeView .rtMinus:hover {
  color: var(--vg-text) !important;
}
/* tree checkboxes (RadTreeView .rtChk) */
.RadTreeView .rtChk {
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  background: var(--vg-field) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.RadTreeView .rtChk:hover {
  border-color: var(--vg-brand) !important;
}
.RadTreeView .rtChk.rtChecked,
.RadTreeView .rtChk.rtIndeterminate,
.RadTreeView .rtChecked .rtChk {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
.RadTreeView .rtChk.rtChecked::before {
  content: "\f00c" !important;
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  color: #fff !important;
}
.RadTreeView .rtChk.rtIndeterminate::before {
  content: "\f068" !important;
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  color: #fff !important;
}
.RadTreeView .rtChk input,
.RadTreeView input[type="checkbox"].rtChkBox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.RadTreeView input[type="checkbox"] {
  accent-color: var(--vg-brand);
  width: 16px;
  height: 16px;
}
/* sliders inside tree nodes (RadSlider) */
.RadSlider_Bootstrap .rslTrack,
.RadSlider .rslTrack {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 999px !important;
  height: 6px !important;
}
.RadSlider .rslSelectedregion {
  background: var(--vg-brand) !important;
  border-radius: 999px !important;
}
.RadSlider .rslHandle,
.RadSlider .rslDraghandle {
  background: #fff !important;
  border: 2px solid var(--vg-brand) !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  box-shadow: var(--vg-shadow-md) !important;
}
.RadSlider .rslDecrease,
.RadSlider .rslIncrease {
  display: none !important;
}

/* RadTreeView checkboxes in this build are .rtChkTristate + state class (rtUnchecked / rtChecked / rtIndeterminate) */
.RadTreeView .rtChkTristate,
.RadTreeView .rtChkBox {
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  background: var(--vg-field) !important;
  background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  cursor: pointer;
}
.RadTreeView .rtChkTristate::before {
  content: none !important;
}
.RadTreeView .rtChkTristate:hover {
  border-color: var(--vg-brand) !important;
}
.RadTreeView .rtChkTristate.rtChecked,
.RadTreeView .rtChkTristate.rtIndeterminate {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
.RadTreeView .rtChkTristate.rtChecked::before {
  content: "\f00c" !important;
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  color: #fff !important;
  line-height: 1;
}
.RadTreeView .rtChkTristate.rtIndeterminate::before {
  content: "\f068" !important;
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  color: #fff !important;
  line-height: 1;
}
/* RadListBox (Base Map chooser) */
.RadListBox_Bootstrap,
.RadListBox {
  background: transparent !important;
  border: 0 !important;
  color: var(--vg-text) !important;
  width: 100% !important;
}
.RadListBox .rlbGroup {
  background: transparent !important;
  border: 0 !important;
}
.RadListBox .rlbList {
  padding: 2px 0 !important;
  margin: 0 !important;
}
.RadListBox .rlbItem {
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--vg-text) !important;
  padding: 6px 10px !important;
  margin: 2px 0 !important;
  font-size: 13px !important;
  cursor: pointer;
}
.RadListBox .rlbItem:hover,
.RadListBox .rlbHovered {
  background: var(--vg-surface-2) !important;
}
.RadListBox .rlbItem.rlbSelected,
.RadListBox .rlbSelected {
  background: var(--vg-brand) !important;
  color: #fff !important;
}
.RadTreeView .rtTemplate {
  width: 100%;
}
.RadTreeView .rtTemplate .rtIn {
  display: block !important;
}

/* =====================================================================
   WEATHER (RadNotification + RadPanelBar + RadDatePicker/RadCalendar + sliders + checkboxes)
   ===================================================================== */
/* panel bar */
.RadPanelBar,
.RadPanelBar_Bootstrap,
.RadPanelBar .rpRootGroup,
.RadPanelBar .rpGroup,
.RadPanelBar .rpSlide,
.RadPanelBar .rpTemplate,
.RadPanelBar .rpItem {
  background: transparent !important;
  border: 0 !important;
  color: var(--vg-text) !important;
}
.RadPanelBar .rpRootGroup > .rpItem {
  border-bottom: 1px solid var(--vg-border) !important;
}
.RadPanelBar .rpRootGroup > .rpItem:last-child {
  border-bottom: 0 !important;
}
.RadPanelBar .rpLink,
.RadPanelBar .rpRootGroup .rpLink,
.RadPanelBar .rpRootGroup .rpExpanded,
.RadPanelBar .rpRootGroup .rpLink:hover {
  background: transparent !important;
  border: 0 !important;
  color: var(--vg-text) !important;
  padding: 12px 10px !important;
  display: flex !important;
  align-items: center;
  min-height: 44px;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.RadPanelBar .rpLink:hover {
  background: var(--vg-surface-2) !important;
}
.RadPanelBar .rpText {
  color: var(--vg-text) !important;
}
.RadPanelBar .rpExpandHandle {
  background: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--vg-text-muted) !important;
  order: 9;
}
.RadPanelBar .rpExpandHandle::before {
  content: "" !important;
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: translateY(-1.5px) rotate(45deg);
}
.RadPanelBar .rpExpanded > .rpExpandHandle::before,
.RadPanelBar .rpExpanded .rpExpandHandle::before {
  transform: translateY(1.5px) rotate(-135deg);
}
.RadPanelBar .rpSlide .rpTemplate,
.RadPanelBar .rpLevel2 {
  padding: 4px 10px 12px !important;
  color: var(--vg-text) !important;
}
.RadPanelBar .rpTemplate label,
.RadPanelBar .rpTemplate span,
.RadPanelBar .rpTemplate td,
.RadPanelBar .rpTemplate div {
  color: var(--vg-text);
}
/* RadCheckBox / RadToggleButton (Bootstrap skin): the box is .rbToggleCheckbox with a ::before glyph */
.RadButton.rbToggleButton,
.RadToggleButton {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--vg-text) !important;
  padding: 0 !important;
}
.rbToggleCheckbox,
.rbToggleRadio {
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 4px !important;
  background: var(--vg-field) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 10px !important;
  line-height: 1 !important;
  color: #fff !important;
}
.rbToggleRadio {
  border-radius: 50% !important;
}
.rbToggleCheckbox::before,
.rbToggleRadio::before {
  content: none !important;
}
.rbToggleCheckboxChecked,
.rbToggleRadioChecked {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
.rbToggleCheckboxChecked::before {
  content: "\f00c" !important;
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  color: #fff !important;
}
.rbToggleRadioChecked::before {
  content: "" !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.rbToggleCheckboxFilled {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
.rbToggleCheckboxFilled::before {
  content: "\f068" !important;
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro" !important;
  font-weight: 900 !important;
  color: #fff !important;
}
.RadButton .rbText {
  color: var(--vg-text) !important;
}
/* RadButton switch (ToggleType="Switch" -> .rbSwitch / .rbToggleSwitch) */
.RadButton.rbSwitch,
.RadButton.rbToggleSwitch,
.RadToggleButton.rbSwitch {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 999px !important;
  width: 40px !important;
  height: 22px !important;
}
.RadButton.rbSwitch .rbSwitchKnob,
.RadButton.rbToggleSwitch .rbSwitchKnob,
.rbSwitchKnob {
  background: #fff !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  box-shadow: var(--vg-shadow-md) !important;
  border: 0 !important;
}
.RadButton.rbSwitch.rbSwitchOn,
.RadButton.rbToggleSwitch.rbChecked,
.rbSwitchOn {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
/* date picker */
.RadPicker,
.RadPicker_Bootstrap {
  background: transparent !important;
}
.RadPicker .riTextBox,
.RadPicker input.riTextBox,
.RadInput_Bootstrap.RadPicker .riTextBox {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  border-radius: var(--vg-radius) !important;
  min-height: 34px;
  padding: 4px 10px !important;
}
.RadPicker .rcCalPopup,
.RadPicker .rcTimePopup,
.RadPicker_Bootstrap .rcCalPopup {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  color: var(--vg-text) !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.RadPicker .rcCalPopup::before,
.RadPicker .rcTimePopup::before {
  font-family: "WebComponentsIcons" !important;
  color: var(--vg-text) !important;
}
/* calendar (opens in a popup, same skin) */
.RadCalendar,
.RadCalendar_Bootstrap,
.RadCalendarPopup,
.RadCalendarPopupShadows,
.RadCalendar .rcMain,
.RadCalendar .rcMainTable {
  background: var(--vg-glass-dark) !important;
  border: 0 !important;
  color: var(--vg-text) !important;
}
.RadCalendarPopup,
.RadCalendarPopupShadows {
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-xl) !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
}
.RadCalendar .rcTitlebar {
  background: transparent !important;
  border-bottom: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  padding: 8px !important;
}
.RadCalendar .rcTitle {
  color: var(--vg-text) !important;
  font-weight: 600 !important;
}
.RadCalendar .rcTitlebar .t-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--vg-text-muted) !important;
  border-radius: 6px !important;
}
.RadCalendar .rcTitlebar .t-button:hover {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text) !important;
}
.RadCalendar .rcWeek th,
.RadCalendar th.rcViewSel,
.RadCalendar .rcMainTable th {
  background: transparent !important;
  color: var(--vg-text-muted) !important;
  border: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}
.RadCalendar .rcRow th {
  background: transparent !important;
  color: var(--vg-text-muted) !important;
  border: 0 !important;
  font-size: 11px !important;
} /* week numbers */
.RadCalendar .rcRow td {
  background: transparent !important;
  border: 0 !important;
  color: var(--vg-text) !important;
}
.RadCalendar .rcRow td a {
  color: var(--vg-text) !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  width: 32px;
  height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.RadCalendar .rcRow td a:hover,
.RadCalendar .rcRow .rcHover a {
  background: var(--vg-surface-2) !important;
}
.RadCalendar .rcRow .rcOtherMonth a,
.RadCalendar .rcRow .rcOutOfRange a {
  color: var(--vg-text-muted) !important;
  opacity: 0.5;
}
.RadCalendar .rcRow .rcWeekend a {
  color: var(--vg-text) !important;
}
.RadCalendar .rcRow .rcToday a {
  box-shadow: inset 0 0 0 1px var(--vg-brand) !important;
}
.RadCalendar .rcRow .rcSelected a {
  background: var(--vg-brand) !important;
  color: #fff !important;
}
/* sliders (RadSlider, Bootstrap skin) */
.RadSlider,
.RadSlider_Bootstrap {
  background: transparent !important;
}
.RadSlider .rslHorizontal .rslTrack,
.RadSlider .rslTrack {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 999px !important;
  height: 6px !important;
}
.RadSlider .rslSelectedregion {
  background: var(--vg-brand) !important;
  border-radius: 999px !important;
  height: 6px !important;
}
.RadSlider .rslHandle,
.RadSlider .rslDraghandle {
  background: #fff !important;
  border: 2px solid var(--vg-brand) !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  box-shadow: var(--vg-shadow-md) !important;
}
.RadSlider .rslDecrease,
.RadSlider .rslIncrease {
  display: none !important;
}
.RadSlider .rslItem,
.RadSlider .rslTick,
.RadSlider .rslLabel {
  color: var(--vg-text-muted) !important;
}
/* RadNumericTextBox / RadTextBox inside */
.RadInput_Bootstrap .riTextBox,
.RadInput .riTextBox,
.RadInput_Bootstrap input {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  border-radius: var(--vg-radius) !important;
}
.RadInput .riSpinButtons,
.riSpinButtons .riUp,
.riSpinButtons .riDown {
  background: transparent !important;
  border-color: var(--vg-border) !important;
  color: var(--vg-text-muted) !important;
}

/* weather window leftovers */
.RadPanelBar .rpExpandHandle .p-icon,
.RadPanelBar .rpExpandHandle [class*="p-i-"] {
  display: none !important;
} /* our chevron replaces the Telerik glyph */
.RadInput.RadInput_Bootstrap,
.RadInput,
.RadPicker .rcSelect,
.RadPicker td,
.RadPicker table {
  background: transparent !important;
  border: 0 !important;
}
.RadPicker .rcCalPopup {
  background: var(--vg-field) !important;
}
.RadLabel,
.RadLabel_Bootstrap,
.weather_settings_row label {
  color: var(--vg-text) !important;
  font-size: 13px !important;
}
.weather_settings_row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.RadDropDownList_Bootstrap .rddlInner,
.RadDropDownList .rddlInner {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  min-height: 34px;
  color: var(--vg-text) !important;
}
.RadDropDownList .rddlFakeInput,
.RadDropDownList .rddlInner span,
.RadDropDownList .rddlSelect .p-icon {
  color: var(--vg-text) !important;
}
.RadButton.rbDisabled,
.RadButton.rbDisabled .rbIcon,
.RadButton.rbDisabled i {
  opacity: 0.45 !important;
  cursor: default;
}
/* native checkboxes used by the weather sections */
input[type="checkbox"].weather_options_enabled_checkbox,
.RadPanelBar input[type="checkbox"],
.RadNotification input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px !important;
  height: 16px !important;
  margin: 0 8px 0 0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 4px !important;
  background: var(--vg-field) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
}
input[type="checkbox"].weather_options_enabled_checkbox:hover,
.RadPanelBar input[type="checkbox"]:hover {
  border-color: var(--vg-brand) !important;
}
input[type="checkbox"].weather_options_enabled_checkbox:checked,
.RadPanelBar input[type="checkbox"]:checked,
.RadNotification input[type="checkbox"]:checked {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
}
input[type="checkbox"].weather_options_enabled_checkbox:checked::before,
.RadPanelBar input[type="checkbox"]:checked::before,
.RadNotification input[type="checkbox"]:checked::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 10px;
  color: #fff;
  line-height: 1;
}
.RadPanelBar .rpLink input[type="checkbox"] {
  margin-left: auto !important;
  margin-right: 10px !important;
  order: 8;
}
/* "courier" value cells in the panel */
.RadPanelBar .courier,
.RadNotification .courier {
  font-family: var(--vg-font) !important;
  font-variant-numeric: tabular-nums;
  color: var(--vg-text-muted) !important;
}
.RadPanelBar .row,
.RadPanelBar [class*="col-"] {
  color: var(--vg-text);
}

/* RadNotification windows (Weather, Map Layers): fixed-position, grow with content, overflow hidden ->
   bottom was cut off below the viewport. Cap to the viewport; title stays, content scrolls. */
.RadNotification {
  max-height: calc(100vh - 20px) !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* only lay out windows the vendor has not hidden: an !important display would beat their inline display:none */
.RadNotification:not([style*="display: none"]):not([style*="display:none"]):not(
    [style*="visibility: hidden"]
  ) {
  display: flex !important;
}
.RadNotification .rnTitleBar {
  flex: 0 0 auto;
}
.RadNotification .RadXmlHttpPanel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.RadNotification .rnContentWrapper {
  height: auto !important;
  display: flow-root !important;
}
.RadNotification .RadPanelBar,
.RadPanelBar[float] {
  float: none !important;
}

/* notification polish: opaque title (content scrolls beneath it), no focus frames, UI font, inline smalls */
.RadNotification .rnTitleBar {
  background: rgb(37, 48, 66) !important;
  position: relative;
  z-index: 2;
}
.RadNotification .RadXmlHttpPanel {
  padding-top: 6px;
}
.RadPanelBar .rpLink.rpFocused,
.RadPanelBar .rpLink.rpHovered,
.RadPanelBar .rpLink:focus,
.RadPanelBar .rpRootGroup .rpFocused,
.RadPanelBar .rpRootGroup .rpHovered {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background: var(--vg-surface-2) !important;
}
.RadPanelBar .rpExpandHandle,
.RadPanelBar .rpFocused .rpExpandHandle,
.RadPanelBar .rpHovered .rpExpandHandle {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}
.RadNotification
  *:not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not([class*="fa-"]):not(.p-icon):not(
    [class*="p-i-"]
  ):not(.t-font-icon):not(.rbIcon):not(.rnCloseIcon a):not(.rcCalPopup):not(.rtPlus):not(.rtMinus) {
  font-family: var(--vg-font) !important;
}
.RadPanelBar small,
.RadNotification small {
  font-size: 12px !important;
  vertical-align: baseline !important;
  line-height: 18px;
}
.RadPanelBar .row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 !important;
}
.RadPanelBar .rpTemplate .weather_settings_row > .row {
  flex: 0 0 auto;
}
.RadLabel,
.RadLabel_Bootstrap {
  width: 100px;
  flex: 0 0 100px;
}
.RadNotification .RadButton.rbIconOnly {
  width: 28px !important;
  height: 28px !important;
}

/* Weather on/off toggle + loader: vendor floats them up into the title area with negative margins;
   with our taller, opaque title they vanished. Pin them into the title bar instead. */
.RadNotification .rnContentWrapper {
  position: static !important;
}
#RadNotification_Weather_C_RadButton_Weather_toggle_activation {
  position: absolute !important;
  top: 10px !important;
  right: 48px !important;
  margin: 0 !important;
  float: none !important;
  z-index: 3;
  width: 28px !important;
  height: 28px !important;
  color: var(--vg-text) !important;
}
#RadNotification_Weather_C_RadButton_Weather_toggle_activation .rbIcon,
#RadNotification_Weather_C_RadButton_Weather_toggle_activation i {
  color: inherit !important;
  font-size: 16px !important;
}
#weather_temp_loader {
  position: absolute !important;
  top: 11px !important;
  right: 84px !important;
  margin: 0 !important;
  float: none !important;
  z-index: 3;
}

/* =====================================================================
   TOASTS: #RadNotification_alert_popup = full-width bottom bar with a Bootstrap .alert inside.
   Becomes a centred glass toast; the alert variant only colours an accent bar + icon.
   ===================================================================== */
#RadNotification_alert_popup,
.RadNotification_RadWindow_settings {
  width: auto !important;
  min-width: 280px;
  max-width: min(560px, calc(100vw - 32px));
  left: 50% !important;
  transform: translateX(-50%);
  height: auto !important;
  border-radius: 12px !important;
  flex-direction: column;
  overflow: hidden !important;
}
#RadNotification_alert_popup:not([style*="display: none"]):not([style*="display:none"]):not(
    [style*="visibility: hidden"]
  ) {
  display: flex !important;
}
#RadNotification_alert_popup .rnTitleBar {
  display: none !important;
}
#RadNotification_alert_popup .RadXmlHttpPanel,
#RadNotification_alert_popup .rnContentWrapper {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}
#RadNotification_alert_popup .alert,
.RadNotification .alert {
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid var(--vg-brand) !important;
  border-radius: 0 !important;
  color: var(--vg-text) !important;
  margin: 0 !important;
  padding: 12px 18px 12px 16px !important;
  font-family: var(--vg-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: none !important;
}
#RadNotification_alert_popup .alert::before,
.RadNotification .alert::before {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Sharp";
  font-weight: 900;
  font-size: 14px;
  flex: 0 0 auto;
}
#RadNotification_alert_popup .alert-info,
.RadNotification .alert-info {
  border-left-color: var(--vg-brand) !important;
}
#RadNotification_alert_popup .alert-info::before,
.RadNotification .alert-info::before {
  content: "\f05a";
  color: var(--vg-brand);
} /* circle-info */
#RadNotification_alert_popup .alert-success,
.RadNotification .alert-success {
  border-left-color: var(--vanguard-ref-color-success-500, #12b76a) !important;
}
#RadNotification_alert_popup .alert-success::before,
.RadNotification .alert-success::before {
  content: "\f058";
  color: var(--vanguard-ref-color-success-500, #12b76a);
} /* circle-check */
#RadNotification_alert_popup .alert-warning,
.RadNotification .alert-warning {
  border-left-color: var(--vanguard-ref-color-warning-500, #f79009) !important;
}
#RadNotification_alert_popup .alert-warning::before,
.RadNotification .alert-warning::before {
  content: "\f071";
  color: var(--vanguard-ref-color-warning-500, #f79009);
} /* triangle-exclamation */
#RadNotification_alert_popup .alert-danger,
.RadNotification .alert-danger {
  border-left-color: var(--vanguard-ref-color-error-500, #d92d20) !important;
}
#RadNotification_alert_popup .alert-danger::before,
.RadNotification .alert-danger::before {
  content: "\f057";
  color: var(--vanguard-ref-color-error-500, #d92d20);
} /* circle-xmark */
#RadNotification_alert_popup .alert a,
.RadNotification .alert a {
  color: var(--vg-brand) !important;
  text-decoration: underline;
}
/* generic Bootstrap alerts anywhere else on the glass */
.alert {
  background: var(--vg-surface-2) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  border-radius: var(--vg-radius) !important;
}

/* =====================================================================
   VESSEL WINDOW (vesselDetailsWindow.aspx): tab strip, header card, links, muted text
   ===================================================================== */
.RadTabStrip,
.RadTabStrip_Bootstrap,
.RadTabStrip .rtsLevel,
.RadTabStrip .rtsUL {
  background: transparent !important;
  border: 0 !important;
}
.RadTabStrip .rtsLevel1 {
  border-bottom: 1px solid var(--vg-border) !important;
  margin: 0 0 8px !important;
}
.RadTabStrip .rtsUL {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px;
}
.RadTabStrip .rtsLI {
  float: none !important;
  margin: 0 !important;
}
.RadTabStrip .rtsLink,
.RadTabStrip_Bootstrap .rtsLink,
.RadTabStrip .rtsLink:hover,
.RadTabStrip .rtsSelected .rtsLink,
.RadTabStrip .rtsSelected .rtsLink:hover {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  color: var(--vg-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  font-family: var(--vg-font) !important;
}
.RadTabStrip .rtsLink:hover {
  color: var(--vg-text) !important;
}
.RadTabStrip .rtsSelected .rtsLink,
.RadTabStrip .rtsSelected .rtsLink:hover {
  color: var(--vg-brand) !important;
  border-bottom-color: var(--vg-brand) !important;
}
.RadTabStrip .rtsTxt,
.RadTabStrip .rtsIn,
.RadTabStrip .rtsOut {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}
.RadTabStrip .rtsDisabled .rtsLink {
  opacity: 0.4;
}
.RadMultiPage,
.rmpView {
  background: transparent !important;
  color: var(--vg-text) !important;
}
/* header card */
.card,
.card-body {
  background: transparent !important;
  border: 0 !important;
  color: var(--vg-text) !important;
}
.card-title {
  color: var(--vg-text) !important;
  font-family: var(--vg-font-display) !important;
  font-weight: 600 !important;
}
.card-subtitle,
.text-muted,
.text-secondary,
.small.text-muted {
  color: var(--vg-text-muted) !important;
}
.image_container img,
.ship_photo_slide img {
  border-radius: 10px;
}
a,
a:visited {
  color: #8fb4f2;
}
a:hover {
  color: #b7cff7;
}
.underline,
.underline a {
  text-decoration-color: rgba(143, 180, 242, 0.6);
}
.vesselWindowDataItem a {
  color: #8fb4f2 !important;
}
.vesselWindowDataHeader {
  font-weight: 600 !important;
}
hr {
  border-color: var(--vg-border) !important;
}

/* vessel window tabs: Port Calls grid, Route switches, Timeline pickers, Risk alert, Workspace panels */
/* Port Calls: sorted-column highlight (#e4e4e4 / #ececec) on every cell */
.RadGrid_Bootstrap .rgSorted,
.RadGrid_Bootstrap td.rgSorted,
.RadGrid_Bootstrap .rgRow .rgSorted,
.RadGrid_Bootstrap .rgAltRow .rgSorted {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--vg-text) !important;
}
.RadGrid_Bootstrap .rgCommandRow .rgCommandCell,
.RadGrid_Bootstrap .rgCommandCellLeft,
.RadGrid_Bootstrap .rgCommandCellRight {
  background: transparent !important;
  border: 0 !important;
}
.RadGrid_Bootstrap .rgRefresh,
.RadGrid_Bootstrap .t-button-icontext {
  color: var(--vg-text) !important;
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  padding: 4px 10px !important;
}
.RadGrid_Bootstrap .rgRefresh .rgIcon,
.RadGrid_Bootstrap .rgRefreshIcon::before {
  color: inherit !important;
}
.RadGrid_Bootstrap td.pointer:hover {
  background: var(--vg-brand-soft) !important;
}
/* Route: switch-style toggle buttons */
.RadToggleButton.switchButton,
.RadButton.switchButton {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--vg-text-muted) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 4px 0 !important;
}
.RadToggleButton.switchButton .rbIcon,
.RadToggleButton.switchButton i {
  font-size: 22px !important;
  color: var(--vg-text-muted) !important;
}
.RadToggleButton.switchButton.switchButtonOn .rbIcon,
.RadToggleButton.switchButton.switchButtonOn i,
.RadToggleButton.switchButton.rbChecked i {
  color: var(--vg-brand) !important;
}
.RadToggleButton.switchButton .rbText {
  color: var(--vg-text) !important;
}
/* Timeline / any RadDateInput "go" button and wrapper */
.RadInput .riSelect,
.RadInput .riContButton .riSelect {
  background: transparent !important;
  border: 0 !important;
}
.RadInput .riButton,
.RadInput_Bootstrap .riButton,
.RadPicker .riButton {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: var(--vg-radius) !important;
  color: var(--vg-text) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.RadInput .riButton::before,
.RadPicker .riButton::before {
  font-family: "WebComponentsIcons" !important;
  color: inherit !important;
}
.RadInput .riButton:hover,
.RadPicker .riButton:hover {
  background: var(--vg-surface-2) !important;
}
/* Risk: Bootstrap alert-primary + spin buttons */
.alert-primary {
  background: var(--vg-brand-soft) !important;
  border: 1px solid color-mix(in srgb, var(--vg-brand) 50%, transparent) !important;
  color: var(--vg-text) !important;
}
.RadInput .riContSpinButtons .riTextBox {
  border-radius: var(--vg-radius) 0 0 var(--vg-radius) !important;
}
.RadInput .riSpinButtons {
  border: 1px solid var(--vg-border) !important;
  border-left: 0 !important;
  border-radius: 0 var(--vg-radius) var(--vg-radius) 0 !important;
  background: var(--vg-field) !important;
}
.RadInput .riSpinButtons .riUp,
.RadInput .riSpinButtons .riDown {
  color: var(--vg-text-muted) !important;
  background: transparent !important;
  border: 0 !important;
}
/* Workspace: vendor notes / attachments panels */
.vessel-notes-panel,
.vessel-notes-editor,
.vessel-attachments-table-wrap {
  background: var(--vg-surface-2) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 12px !important;
  color: var(--vg-text) !important;
  box-shadow: none !important;
}
.vessel-notes-heading,
.vessel-notes-column h5,
.vessel-notes-column h6 {
  color: var(--vg-text) !important;
  font-family: var(--vg-font-display) !important;
  font-weight: 600 !important;
}
.vessel-notes-editor .riTextBox,
.RadInputMultiline .riTextBox,
.RadInputMultiline_Bootstrap .riTextBox,
textarea.riTextBox {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  border-radius: var(--vg-radius) !important;
  min-height: 90px;
}
.riEmpty {
  color: var(--vg-text-muted) !important;
}
.vessel-dropzone {
  background: var(--vg-field) !important;
  border: 2px dashed rgba(255, 255, 255, 0.28) !important;
  border-radius: 12px !important;
  color: var(--vg-text-muted) !important;
}
.vessel-dropzone:hover,
.vessel-dropzone.is-dragover {
  border-color: var(--vg-brand) !important;
  background: var(--vg-brand-soft) !important;
}
.vessel-dropzone-title {
  color: var(--vg-text) !important;
  font-weight: 600;
}
.vessel-dropzone-subtitle,
.vessel-attachments-stats,
.vessel-attachments-empty {
  color: var(--vg-text-muted) !important;
}
.vessel-attachments-table th {
  background: transparent !important;
  color: var(--vg-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--vg-border) !important;
}
.vessel-attachments-table td {
  color: var(--vg-text) !important;
  border-color: var(--vg-border) !important;
}
.vessel-attachments-toolbar .btn,
.vessel-notes-panel .btn {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
}
.vessel-attachments-toolbar .btn-primary,
.vessel-notes-panel .btn-primary {
  background: var(--vg-brand) !important;
  border-color: var(--vg-brand) !important;
  color: #fff !important;
}

/* =====================================================================
   REPORT MODAL (legacy #report_modal, Bootstrap modal holding an RS report iframe)
   ===================================================================== */
#report_modal.modal {
  background: rgba(8, 12, 20, 0.55) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#report_modal .modal-content {
  background: var(--vg-glass-dark) !important;
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--vg-shadow-xl) !important;
  color: var(--vg-text) !important;
  overflow: hidden;
}
#report_modal .modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--vg-border) !important;
  padding: 12px 16px !important;
}
#report_modal .modal-title {
  font-family: var(--vg-font-display) !important;
  font-weight: 600 !important;
  color: var(--vg-text) !important;
}
#report_modal .modal-body {
  padding: 0 !important;
  background: transparent !important;
}
#report_modal .close,
#report_modal button.close {
  color: var(--vg-text-muted) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  font-size: 22px;
}
#report_modal .close:hover {
  background: var(--vg-surface-2) !important;
  color: var(--vg-text) !important;
}
#report_iframe {
  background: transparent !important;
  border: 0 !important;
}

/* =====================================================================
   RS REPORT PAGES (rs.maritrace.com via :8089): timeline / route / incident / vessel reports
   ===================================================================== */
.title {
  font-family: var(--vg-font-display) !important;
  color: var(--vg-text) !important;
  font-weight: 600 !important;
}
.sub_title {
  color: var(--vg-text) !important;
  font-weight: 600 !important;
  font-family: var(--vg-font-display) !important;
}
.report_row {
  background: var(--vg-surface-2) !important;
  border: 1px solid var(--vg-border) !important;
  border-radius: 12px !important;
  color: var(--vg-text) !important;
  box-shadow: none !important;
  margin-bottom: 12px;
}
.report_row .inner_padding {
  color: var(--vg-text) !important;
}
.left,
.display_area_controls {
  background: transparent !important;
  color: var(--vg-text) !important;
}
.right {
  background: transparent !important;
}
.page_break {
  border-color: var(--vg-border) !important;
}
.loading_section,
.loading_section_container {
  background: var(--vg-glass-dark) !important;
  color: var(--vg-text) !important;
}
/* controls column */
.datepicker-wrapper input,
.form-control,
select.form-control,
input[type="date"],
input[type="text"],
select {
  background: var(--vg-field) !important;
  border: 1px solid var(--vg-border) !important;
  color: var(--vg-text) !important;
  border-radius: var(--vg-radius) !important;
}
select option {
  background: #1f2937;
  color: var(--vg-text);
}
label {
  color: var(--vg-text) !important;
}
.button_style,
button.button_style,
.download_button {
  background: var(--vg-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--vg-radius) !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.button_style:hover {
  background: var(--vg-brand-hover) !important;
}
input[type="checkbox"]:not(.weather_options_enabled_checkbox) {
  accent-color: var(--vg-brand);
  width: 16px;
  height: 16px;
}
/* tables */
.timeline_report_table table,
.area_table,
.area_report_table table,
.detailed_class,
.singleIncident_table,
.vessel_report_table,
.report_row table {
  color: var(--vg-text) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
}
.report_row th,
.timeline_report_table th,
.area_table th,
.detailed_class th {
  background: transparent !important;
  color: var(--vg-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--vg-border) !important;
  padding: 8px 10px !important;
}
.report_row td,
.timeline_report_table td,
.area_table td,
.detailed_class td {
  background: transparent !important;
  color: var(--vg-text) !important;
  border-bottom: 1px solid var(--vg-border) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}
.report_row tr:nth-child(even) td,
.timeline_report_table tr:nth-child(even) td,
.area_table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03) !important;
}
.report_row tr:hover td {
  background: var(--vg-brand-soft) !important;
}
/* plotly charts: transparent paper, light text */
.js-plotly-plot .main-svg,
.js-plotly-plot .plot-container,
.js-plotly-plot .svg-container,
.js-plotly-plot .bg {
  background: transparent !important;
  fill: transparent !important;
}
.js-plotly-plot text {
  fill: var(--vg-text) !important;
}
.js-plotly-plot .gridlayer path,
.js-plotly-plot .zerolinelayer path {
  stroke: rgba(255, 255, 255, 0.12) !important;
}
.js-plotly-plot .legend rect.bg {
  fill: transparent !important;
  stroke: transparent !important;
}
/* after "Download PDF" the vendor swaps live plots for opaque JPEG snapshots (img.converted_img, white paper) and leaves them in page: invert + hue-rotate keeps hues, turns the paper dark */
#report_container img.converted_img {
  filter: invert(0.93) hue-rotate(180deg) saturate(1.15);
  border-radius: 8px;
}
/* report footer (date / site / logo) */
.rotating-arrows {
  color: var(--vg-text-muted) !important;
}
.top_menu_item.selected,
.top_menu_item.active {
  color: var(--vg-brand) !important;
}

/* RS report tables: vendor stripes rows with #e2e2e2 on the <tr> */
.report_row tr,
.area_table tr,
.timeline_report_table tr,
.detailed_class tr,
.singleIncident_table tr,
.vessel_report_table tr,
table tr[style*="background"] {
  background: transparent !important;
}
.report_row tr:nth-child(even),
.area_table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* RS report: fixed controls panel (#top_btn_panel, 190 px at left:10) overlapped the report (#report_container at margin-left 156) */
#top_btn_panel {
  background: var(--vg-glass-dark) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-lg) !important;
  color: var(--vg-text) !important;
  padding: 10px !important;
  width: 210px !important;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  scrollbar-width: thin;
}
#report_container {
  margin-left: 240px !important;
  width: auto !important;
  max-width: calc(100% - 260px) !important;
  min-width: 0 !important;
}
#report_container > div,
#timeline_container,
#report_container .report_row,
#report_container table.report_table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
/* vendor two-column rows are fixed 570 px + 570 px inside 1200: make them fluid halves */
#report_container .report_row .left,
#report_container .left {
  width: calc(50% - 10px) !important;
  max-width: none !important;
  float: left;
  box-sizing: border-box;
}
#report_container .report_row .right,
#report_container .right {
  width: calc(50% - 10px) !important;
  max-width: none !important;
  float: right;
  box-sizing: border-box;
}
#report_container .report_row::after {
  content: "";
  display: table;
  clear: both;
}
/* header row: flag (narrow) + title, not two halves */
#report_container #timeline_report_header .left {
  width: 120px !important;
}
#report_container #timeline_report_header .right {
  width: calc(100% - 140px) !important;
}
#timeline_report_header .title {
  font-size: 22px !important;
  line-height: 1.2;
}
#report_container .title,
#timeline_report_header {
  white-space: normal;
}
#report_container .mapboxgl-map,
#report_container .map_container,
#report_container [id*="map"] {
  max-width: 100% !important;
}
#report_container .js-plotly-plot,
#report_container .svg-container,
#report_container .mapboxgl-map,
#report_container canvas {
  max-width: 100% !important;
}
html,
body {
  overflow-x: hidden;
}
#top_btn_panel button,
#download_pdf_btn,
#top_btn_panel .button_style {
  background: var(--vg-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--vg-radius) !important;
  padding: 8px 12px !important;
  font-weight: 500 !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  font-family: var(--vg-font) !important;
}
#top_btn_panel button:hover {
  background: var(--vg-brand-hover) !important;
}
#top_btn_panel button:disabled {
  opacity: 0.5;
}
#top_btn_panel label,
#top_btn_panel span,
#top_btn_panel td,
#top_btn_panel p,
#top_btn_panel div {
  color: var(--vg-text) !important;
  font-family: var(--vg-font) !important;
  font-size: 13px !important;
}
#top_btn_panel input[type="text"],
#top_btn_panel input[type="date"],
#top_btn_panel select {
  width: 100% !important;
  margin: 4px 0 10px !important;
  min-height: 34px;
}
#top_btn_panel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  accent-color: var(--vg-brand);
  vertical-align: middle;
}
#top_btn_panel .display_area_controls {
  width: 100% !important;
}
#top_btn_panel .display_area_controls th,
#top_btn_panel .display_area_controls td {
  padding: 4px 2px !important;
  border: 0 !important;
  background: transparent !important;
}
#top_btn_panel .top_menu_item {
  margin: 4px 0;
}
/* report header strip */
#timeline_report_header .title,
.report_row .title {
  font-size: 20px !important;
}
#main_container {
  background: transparent !important;
}

/* react-datepicker popup (RS report date fields) */
.react-datepicker-popper {
  z-index: 50;
}
.react-datepicker {
  background: var(--vg-glass-dark) !important;
  -webkit-backdrop-filter: blur(var(--vg-glass-blur));
  backdrop-filter: blur(var(--vg-glass-blur));
  border: 1px solid var(--vg-glass-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--vg-shadow-xl) !important;
  color: var(--vg-text) !important;
  font-family: var(--vg-font) !important;
  overflow: hidden;
}
.react-datepicker__triangle {
  display: none !important;
}
.react-datepicker__header {
  background: transparent !important;
  border-bottom: 1px solid var(--vg-border) !important;
  padding-top: 10px;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  color: var(--vg-text) !important;
  font-weight: 600 !important;
}
.react-datepicker__day-name {
  color: var(--vg-text-muted) !important;
  font-size: 11px;
  text-transform: uppercase;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__year-text {
  color: var(--vg-text) !important;
  border-radius: 8px !important;
  width: 32px;
  line-height: 32px;
  margin: 2px;
}
.react-datepicker__day:hover {
  background: var(--vg-surface-2) !important;
}
.react-datepicker__day--outside-month,
.react-datepicker__day--disabled {
  color: var(--vg-text-muted) !important;
  opacity: 0.5;
}
.react-datepicker__day--today {
  box-shadow: inset 0 0 0 1px var(--vg-brand);
  font-weight: 600;
}
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected,
.react-datepicker__day--in-range {
  background: var(--vg-brand) !important;
  color: #fff !important;
}
.react-datepicker__navigation {
  top: 12px;
}
.react-datepicker__navigation-icon::before {
  border-color: var(--vg-text-muted) !important;
}
.react-datepicker__navigation:hover .react-datepicker__navigation-icon::before {
  border-color: var(--vg-text) !important;
}
.react-datepicker__month-container {
  background: transparent !important;
}
.react-datepicker__input-container input.form-control {
  width: 100% !important;
}

/* react-datepicker inside the 210 px controls panel: fit the month grid, keep nav buttons small */
#top_btn_panel .react-datepicker-popper {
  left: 0 !important;
}
#top_btn_panel .react-datepicker {
  width: 100%;
}
#top_btn_panel .react-datepicker__month-container {
  width: 100%;
}
#top_btn_panel .react-datepicker__day,
#top_btn_panel .react-datepicker__day-name {
  width: 22px !important;
  line-height: 22px !important;
  margin: 1px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}
#top_btn_panel .react-datepicker__header {
  padding: 8px 4px 4px !important;
}
#top_btn_panel .react-datepicker__current-month {
  font-size: 13px !important;
}
#top_btn_panel button.react-datepicker__navigation,
#top_btn_panel .react-datepicker__navigation {
  width: 28px !important;
  height: 28px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  position: absolute !important;
  top: 6px !important;
  text-indent: -999px;
  overflow: hidden;
}
#top_btn_panel .react-datepicker__navigation--previous {
  left: 4px !important;
  right: auto !important;
}
#top_btn_panel .react-datepicker__navigation--next {
  right: 4px !important;
  left: auto !important;
}
#top_btn_panel .react-datepicker__navigation:hover {
  background: var(--vg-surface-2) !important;
}
#top_btn_panel .react-datepicker__navigation-icon::before {
  border-color: var(--vg-text-muted) !important;
  border-width: 2px 2px 0 0 !important;
  height: 7px !important;
  width: 7px !important;
}

/* spike marker */
#vg-skin-badge {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 99999;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--vg-brand);
  color: #fff;
  font: 600 12px var(--vg-font);
}

/* ============================================================================
   RS "Download PDF" = jsPDF.html(): each report section is CLONED into
   body > .html2pdf__overlay > .html2pdf__container (off-screen, left:-100000px) and rendered by
   html2canvas. The clone is outside #report_container, so this is the paper theme for the PDF:
   white paper, dark ink, brand table headers. Nothing here touches the live (dark) view.
   ============================================================================ */
.html2pdf__container {
  background: #ffffff !important;
  color: #1f2733 !important;
}
.html2pdf__container :is(p, span, td, th, div, h1, h2, h3, h4, h5, li, b, strong, label, a, small) {
  color: #1f2733 !important;
  text-shadow: none !important;
}
.html2pdf__container .report_row {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  color: #1f2733 !important;
} /* vendor geometry: 1200 px rows, no frame */
.html2pdf__container :is(.title, .sub_title, h1, h2, h3) {
  color: #101828 !important;
}
.html2pdf__container th {
  background: #3771d5 !important;
  color: #ffffff !important;
  border-bottom: 0 !important;
}
.html2pdf__container td {
  background: transparent !important;
  color: #1f2733 !important;
  border-bottom: 1px solid #e3e7ed !important;
}
.html2pdf__container tr {
  background: transparent !important;
}
.html2pdf__container tr:nth-child(even),
.html2pdf__container tr:nth-child(even) td {
  background: #f3f5f8 !important;
}
.html2pdf__container a {
  color: #2b5fb8 !important;
}
.html2pdf__container img.converted_img {
  filter: none !important;
}
.html2pdf__container .js-plotly-plot text {
  fill: #1f2733 !important;
}
.html2pdf__container .js-plotly-plot .gridlayer path {
  stroke: rgba(0, 0, 0, 0.12) !important;
}
/* chart JPEGs are generated at the LIVE plot size (vendor: pie 290 px, bars 850 px); keep those vendor
   widths live, and never upscale the JPEG in the clone (an upscaled 595 px bar chart overflowed the
   350 px plot box and was clipped) */
#report_container .pie_bar_plot_container .left {
  width: 290px !important;
  max-width: 290px !important;
}
#report_container .pie_bar_plot_container .right {
  width: calc(100% - 310px) !important;
  max-width: 850px !important;
}
.html2pdf__container .converted_plot img,
.html2pdf__container img.converted_img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 350px !important;
}
/* vendor page-break marker rows (3 px .report_row holding a .page_break) must not render as framed cards */
#report_container .report_row:has(> .page_break),
.html2pdf__container .report_row:has(> .page_break) {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
/* PDF pagination: the vendor inserts page-break rows from LIVE row heights (offsetHeight) but renders
   the clone at its own 1200 px geometry, so live rows must match the clone: 1200 px rows, vendor
   column splits for the rows it sizes explicitly (page 1 = 25 % / 75 %). */
#report_container .report_row {
  max-width: 1200px !important;
}
#report_container #timeline_report_page1 .left {
  width: calc(25% - 50px) !important;
  max-width: calc(25% - 50px) !important;
}
#report_container #timeline_report_page1 .right {
  width: calc(75% - 10px) !important;
  max-width: calc(75% - 10px) !important;
}
/* page 1 of the timeline report must fit one PDF page (1200x800, content from y=80): header 102 +
   page-1 row. The vessel-info table (9 rows) is kept no taller than the 490 px map, live and in the
   clone (ids survive cloning, so no #report_container scope here). */
#timeline_report_page1 .singleIncident_table td {
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: 16px !important;
}
#timeline_report_page1 .singleIncident_table .title {
  font-size: 14px !important;
  line-height: 18px !important;
}
#timeline_report_page1 .sub_title {
  margin-bottom: 4px !important;
}