﻿#cqdlg .combo-arrow, #cqdlg .datebox-arrow,
#cqdlg.logger-window .combo-arrow, #cqdlg.logger-window .datebox-arrow {
  background-color: var(--ut-bg-elevated) !important;
  border-left: 1px solid var(--ut-cyan) !important;
  background-image: none !important;
}
#cqdlg .combo-arrow:after, #cqdlg.logger-window .combo-arrow:after {
  border-color: var(--ut-cyan) transparent transparent transparent !important;
}
#cqdlg .datebox-arrow:after, #cqdlg.logger-window .datebox-arrow:after {
  color: var(--ut-cyan) !important;
}
#cqdlg .combo-arrow:hover, #cqdlg .datebox-arrow:hover,
#cqdlg.logger-window .combo-arrow:hover, #cqdlg.logger-window .datebox-arrow:hover {
  background-color: var(--ut-cyan) !important;
}
#cqdlg .combo-arrow:hover:after, #cqdlg.logger-window .combo-arrow:hover:after {
  border-color: var(--ut-bg-primary) transparent transparent transparent !important;
}
#cqdlg .datebox-arrow:hover:after, #cqdlg.logger-window .datebox-arrow:hover:after {
  color: var(--ut-bg-primary) !important;
}

/* Ultra Technical Modern Theme for RaDAR Sport */
:root {
  --ut-bg-primary: #0a0e14;
  --ut-bg-secondary: #0d1117;
  --ut-bg-panel: #161b22;
  --ut-bg-elevated: #1c2128;
  --ut-cyan: #00f0ff;
  --ut-cyan-dim: #00a0b0;
  --ut-magenta: #ff00aa;
  --ut-lime: #39ff14;
  --ut-orange: #ff9500;
  --ut-text-primary: #e0e6ed;
  --ut-text-secondary: #8b949e;
  --ut-text-muted: #6e7681;
  --ut-border: rgba(0, 240, 255, 0.2);
  --ut-glow-cyan: 0 0 10px rgba(0, 240, 255, 0.4);
  --ut-glow-magenta: 0 0 10px rgba(255, 0, 170, 0.4);
  --ut-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: var(--ut-bg-primary); background-image: linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px), radial-gradient(ellipse at top left, rgba(0, 240, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(255, 0, 170, 0.05) 0%, transparent 50%); background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100%; background-attachment: fixed; color: var(--ut-text-primary); font-family: var(--ut-font-mono); font-size: 13px; line-height: 1.5; }
.header { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, var(--ut-bg-secondary), rgba(13, 17, 23, 0.95)); border-bottom: 1px solid var(--ut-border); padding: 12px 20px; backdrop-filter: blur(8px); }
.header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ut-cyan), transparent); box-shadow: 0 0 10px var(--ut-cyan); }
.header h1 { margin: 0 0 8px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ut-cyan); }
.filters, .controls-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.controls-row label { font-size: 11px; color: var(--ut-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.btn, .easyui-linkbutton { font-family: var(--ut-font-mono) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 14px !important; border: 1px solid var(--ut-border) !important; border-radius: 4px !important; background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; color: var(--ut-text-primary) !important; transition: all 0.2s ease !important; }
.btn:hover, .easyui-linkbutton:hover { border-color: var(--ut-cyan) !important; color: var(--ut-cyan) !important; box-shadow: var(--ut-glow-cyan) !important; transform: translateY(-1px); }
.cqde-btn, #cqde { background: linear-gradient(180deg, #1a0a0a, #0d0505) !important; border-color: var(--ut-magenta) !important; color: var(--ut-magenta) !important; box-shadow: 0 0 8px rgba(255, 0, 170, 0.3) !important; }
.cqde-btn:hover, #cqde:hover { box-shadow: var(--ut-glow-magenta) !important; }
.input-slim, .easyui-searchbox { font-family: var(--ut-font-mono) !important; font-size: 12px !important; background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-border) !important; border-radius: 4px !important; color: var(--ut-text-primary) !important; }
.content-card { background: var(--ut-bg-panel); border: 1px solid var(--ut-border); border-radius: 8px; padding: 16px; margin: 16px; position: relative; }
.content-card::before, .content-card::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--ut-cyan); opacity: 0.6; }
.content-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.content-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.card-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ut-border); }
.card-title-bar:empty, .card-title-bar:not(:has(*)) { display: none; }
.card-title-bar .title { font-size: 12px; color: var(--ut-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.datagrid, .datagrid-wrap { background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-border) !important; border-radius: 6px; }
.datagrid .panel-header, .datagrid .panel-title { background: var(--ut-bg-secondary) !important; border-color: var(--ut-border) !important; border-top: none !important; border-bottom: none !important; }
.datagrid .panel-header { border-top: none !important; border-bottom: none !important; border-left: 1px solid var(--ut-border) !important; border-right: 1px solid var(--ut-border) !important; }
.datagrid .panel-body { background: var(--ut-bg-secondary) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-border) !important; border: none !important; }
.datagrid .panel-title { font-family: var(--ut-font-mono) !important; font-size: 11px !important; color: var(--ut-cyan) !important; text-transform: uppercase; letter-spacing: 0.1em; }
.datagrid-header td { border-color: var(--ut-border) !important; font-family: var(--ut-font-mono) !important; font-size: 11px !important; text-transform: uppercase; }
.datagrid-header { border-bottom: none !important; border: none !important; }
.datagrid-header, .datagrid-header td, .datagrid-header tr { border-bottom: none !important; }
.datagrid-row { font-family: var(--ut-font-mono) !important; font-size: 12px !important; }
.datagrid-row:hover { background: var(--ut-bg-elevated) !important; }
.easyui-dialog { font-family: var(--ut-font-mono) !important; background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 12px !important; box-shadow: 0 10px 32px rgba(0,0,0,.50), 0 0 20px rgba(0, 240, 255, 0.3) !important; overflow: hidden !important; }
.easyui-dialog .panel { background: var(--ut-bg-panel) !important; border: none !important; }
.easyui-dialog .panel-header { background: var(--ut-bg-secondary) !important; border-bottom: none !important; border-radius: 12px 12px 0 0 !important; }
.easyui-dialog .panel-title { font-family: var(--ut-font-mono) !important; font-size: 12px !important; color: var(--ut-cyan) !important; font-weight: 700 !important; letter-spacing: .2px !important; margin: 0 !important; padding: 12px 16px !important; }
.easyui-dialog .panel-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; padding: 16px !important; }
.easyui-dialog .dialog-button { background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-cyan) !important; border-top: 1px solid var(--ut-cyan) !important; padding: 12px 16px !important; border-radius: 0 0 12px 12px !important; }
.easyui-dialog .window { background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 12px !important; box-shadow: 0 10px 32px rgba(0,0,0,.50), 0 0 20px rgba(0, 240, 255, 0.3) !important; overflow: hidden !important; }
.fitem { margin-bottom: 8px; }
.fitem label { display: inline-block; width: 110px; font-size: 10px; color: var(--ut-cyan) !important; text-transform: uppercase; letter-spacing: 0.05em; }
.fitem input, .fitem select, .easyui-textbox, .easyui-numberbox, .easyui-combobox { font-family: var(--ut-font-mono) !important; font-size: 12px !important; background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-border) !important; border-radius: 10px !important; color: var(--ut-text-primary) !important; }
.fitem input:focus, .easyui-textbox:focus { border-color: var(--ut-cyan) !important; box-shadow: var(--ut-glow-cyan) !important; outline: none; }
.user-status-bar { display: flex; gap: 20px; align-items: center; padding: 8px 20px; background: var(--ut-bg-secondary); border-bottom: 1px solid var(--ut-border); font-size: 11px; }
.status-item { display: flex; align-items: center; gap: 6px; }
.status-label { color: var(--ut-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.status-value { color: var(--ut-cyan); font-weight: 600; }
.status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--ut-lime); box-shadow: 0 0 6px var(--ut-lime); }
.status-indicator.readonly { background: var(--ut-orange); box-shadow: 0 0 6px var(--ut-orange); }
.login-backdrop { background: rgba(10, 14, 20, 0.95); backdrop-filter: blur(10px); }
.login-modal { background: var(--ut-bg-panel); border: 1px solid var(--ut-border); border-radius: 12px; padding: 30px; box-shadow: 0 0 40px rgba(0, 240, 255, 0.15); }
.modal-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ut-cyan); margin: 0 0 8px; }
.modal-subtitle { font-size: 10px; color: var(--ut-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 10px; color: var(--ut-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.form-group input { width: 100%; padding: 10px 12px; font-family: var(--ut-font-mono); font-size: 14px; background: var(--ut-bg-secondary); border: 1px solid var(--ut-border); border-radius: 6px; color: var(--ut-text-primary); }
.form-group input:focus { border-color: var(--ut-cyan); box-shadow: var(--ut-glow-cyan); outline: none; }
.btn-login, .btn-guest { flex: 1; padding: 12px; font-family: var(--ut-font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid var(--ut-border); border-radius: 6px; cursor: pointer; }
.btn-login { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)); color: var(--ut-cyan); }
.btn-login:hover { border-color: var(--ut-cyan); box-shadow: var(--ut-glow-cyan); }
.btn-guest { background: transparent; color: var(--ut-text-secondary); }
.login-message { text-align: center; font-size: 11px; color: var(--ut-magenta); min-height: 16px; margin-top: 8px; }

/* Global override for EasyUI focus styles to fix bottom border issue */
.textbox-focused, .combo-focused, .datebox-focused, .numberbox-focused, .timespinner-focused {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
}

/* Target the actual input elements inside EasyUI controls */
.textbox-focused input, 
.combo-focused input, 
.datebox-focused input, 
.numberbox-focused input, 
.timespinner-focused input,
.textbox-focused .textbox-text,
.combo-focused .textbox-text,
.datebox-focused .textbox-text,
.numberbox-focused .textbox-text,
.timespinner-focused .textbox-text {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
}

/* Override EasyUI's default focus styles with maximum specificity */
.window .textbox.textbox-focused, 
.window .combo.combo-focused, 
.window .datebox.datebox-focused, 
.window .numberbox.numberbox-focused, 
.window .timespinner.timespinner-focused,
.panel .textbox.textbox-focused, 
.panel .combo.combo-focused, 
.panel .datebox.datebox-focused, 
.panel .numberbox.numberbox-focused, 
.panel .timespinner.timespinner-focused,
.dialog-content .textbox.textbox-focused, 
.dialog-content .combo.combo-focused, 
.dialog-content .datebox.datebox-focused, 
.dialog-content .numberbox.numberbox-focused, 
.dialog-content .timespinner.timespinner-focused,
.window .easyui-textbox[readonly="readonly"],
.window .textbox[readonly="readonly"],
.panel .easyui-textbox[readonly="readonly"],
.panel .textbox[readonly="readonly"],
.dialog-content .easyui-textbox[readonly="readonly"],
.dialog-content .textbox[readonly="readonly"] {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
  background: var(--ut-bg-elevated) !important;
  transform: translateY(-1px) !important;
}

/* Also target the inner text elements with the same styling */
.window .textbox.textbox-focused .textbox-text,
.window .combo.combo-focused .textbox-text,
.window .datebox.datebox-focused .textbox-text,
.window .numberbox.numberbox-focused .textbox-text,
.window .timespinner.timespinner-focused .textbox-text,
.panel .textbox.textbox-focused .textbox-text,
.panel .combo.combo-focused .textbox-text,
.panel .datebox.datebox-focused .textbox-text,
.panel .numberbox.numberbox-focused .textbox-text,
.panel .timespinner.timespinner-focused .textbox-text,
.dialog-content .textbox.textbox-focused .textbox-text,
.dialog-content .combo.combo-focused .textbox-text,
.dialog-content .datebox.datebox-focused .textbox-text,
.dialog-content .numberbox.numberbox-focused .textbox-text,
.dialog-content .timespinner.timespinner-focused .textbox-text,
.window .easyui-textbox[readonly="readonly"] .textbox-text,
.window .textbox[readonly="readonly"] .textbox-text,
.panel .easyui-textbox[readonly="readonly"] .textbox-text,
.panel .textbox[readonly="readonly"] .textbox-text,
.dialog-content .easyui-textbox[readonly="readonly"] .textbox-text,
.dialog-content .textbox[readonly="readonly"] .textbox-text {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
  background: var(--ut-bg-elevated) !important;
  transform: translateY(-1px) !important;
}

/* Special handling for readonly fields - force focus styling regardless of readonly */
.window .textbox[readonly="readonly"],
.window .textbox.textbox-readonly,
.panel .textbox[readonly="readonly"],
.panel .textbox.textbox-readonly,
.dialog-content .textbox[readonly="readonly"],
.dialog-content .textbox.textbox-readonly,
.window .textbox[readonly="readonly"] .textbox-text,
.window .textbox.textbox-readonly .textbox-text,
.panel .textbox[readonly="readonly"] .textbox-text,
.panel .textbox.textbox-readonly .textbox-text,
.dialog-content .textbox[readonly="readonly"] .textbox-text,
.dialog-content .textbox.textbox-readonly .textbox-text {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
  background: var(--ut-bg-elevated) !important;
  transform: translateY(-1px) !important;
  color: var(--ut-text-primary) !important;
}

/* Add hover effect for readonly fields since they don't get focus */
.window .textbox[readonly="readonly"]:hover,
.window .textbox.textbox-readonly:hover,
.panel .textbox[readonly="readonly"]:hover,
.panel .textbox.textbox-readonly:hover,
.dialog-content .textbox[readonly="readonly"]:hover,
.dialog-content .textbox.textbox-readonly:hover,
.window .textbox[readonly="readonly"] .textbox-text:hover,
.window .textbox.textbox-readonly .textbox-text:hover,
.panel .textbox[readonly="readonly"] .textbox-text:hover,
.panel .textbox.textbox-readonly .textbox-text:hover,
.dialog-content .textbox[readonly="readonly"] .textbox-text:hover,
.dialog-content .textbox.textbox-readonly .textbox-text:hover {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  background: var(--ut-bg-elevated) !important;
  transform: translateY(-1px) !important;
}

/* Extra specific targeting for readonly fields with exact attribute match */
.window .easyui-textbox[readonly="readonly"]:hover,
.panel .easyui-textbox[readonly="readonly"]:hover,
.dialog-content .easyui-textbox[readonly="readonly"]:hover,
.window .easyui-textbox[readonly="readonly"] .textbox-text:hover,
.panel .easyui-textbox[readonly="readonly"] .textbox-text:hover,
.dialog-content .easyui-textbox[readonly="readonly"] .textbox-text:hover {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  background: var(--ut-bg-elevated) !important;
  transform: translateY(-1px) !important;
}

/* Also target the inner input element directly */
.window .easyui-textbox[readonly="readonly"] input:hover,
.panel .easyui-textbox[readonly="readonly"] input:hover,
.dialog-content .easyui-textbox[readonly="readonly"] input:hover {
  border: 2px solid var(--ut-cyan) !important;
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  background: var(--ut-bg-elevated) !important;
  transform: translateY(-1px) !important;
}

/* Dialog button fixes - prevent wrapping and reallyCOOL styling */
.easyui-dialog .dialog-button { display: flex !important; gap: 8px !important; justify-content: flex-end !important; flex-wrap: nowrap !important; }
.easyui-dialog .dialog-button a { white-space: nowrap; min-width: auto; padding: 0 16px !important; font-family: var(--ut-font-mono) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border: 1px solid var(--ut-cyan) !important; border-radius: 9999px !important; background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; color: var(--ut-text-primary) !important; transition: all .15s ease-in-out !important; overflow: hidden !important; min-height: 34px !important; line-height: 34px !important; }
.easyui-dialog .dialog-button a:hover { background: linear-gradient(180deg, var(--ut-bg-panel), var(--ut-bg-secondary)) !important; border-color: var(--ut-cyan) !important; color: var(--ut-cyan) !important; transform: translateY(-1px) !important; box-shadow: var(--ut-glow-cyan) !important; }

/* Force all EasyUI buttons in dialogs to match reallyCOOL styling */
.easyui-dialog .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 9999px !important; color: var(--ut-text-primary) !important; font-weight: 600 !important; box-shadow: 0 2px 6px rgba(0,0,0,.12) !important; transition: all .15s ease-in-out !important; overflow: hidden !important; min-height: 34px !important; }
.easyui-dialog .l-btn:hover { background: linear-gradient(180deg, var(--ut-bg-panel), var(--ut-bg-secondary)) !important; border-color: var(--ut-cyan) !important; color: var(--ut-cyan) !important; transform: translateY(-1px) !important; box-shadow: var(--ut-glow-cyan) !important; }
.easyui-dialog .l-btn .l-btn-left, .easyui-dialog .l-btn .l-btn-text { border-radius: 9999px !important; }
.easyui-dialog .l-btn .l-btn-left { padding: 0 16px !important; }
.easyui-dialog .l-btn .l-btn-text { line-height: 34px !important; }
.easyui-dialog .easyui-linkbutton, .easyui-dialog .easyui-linkbutton .l-btn, .easyui-dialog .easyui-linkbutton .l-btn-left, .easyui-dialog .easyui-linkbutton .l-btn-text { border-radius: 9999px !important; }
#dlg-buttons, #deldlg-buttons, #cqdlg-buttons, #rallydlg-buttons, #reallyCOOL-dlg-buttons, #messaging-dlg-buttons { display: flex !important; gap: 8px !important; flex-wrap: nowrap !important; justify-content: flex-end !important; }
#dlg-buttons a, #deldlg-buttons a, #cqdlg-buttons a, #rallydlg-buttons a, #reallyCOOL-dlg-buttons a, #messaging-dlg-buttons a { white-space: nowrap; min-width: auto; padding: 0 16px !important; font-family: var(--ut-font-mono) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border: 1px solid var(--ut-cyan) !important; border-radius: 9999px !important; background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; color: var(--ut-text-primary) !important; transition: all .15s ease-in-out !important; overflow: hidden !important; min-height: 34px !important; line-height: 34px !important; }
#dlg-buttons a:hover, #deldlg-buttons a:hover, #cqdlg-buttons a:hover, #rallydlg-buttons a:hover, #reallyCOOL-dlg-buttons a:hover, #messaging-dlg-buttons a:hover { background: linear-gradient(180deg, var(--ut-bg-panel), var(--ut-bg-secondary)) !important; border-color: var(--ut-cyan) !important; color: var(--ut-cyan) !important; transform: translateY(-1px) !important; box-shadow: var(--ut-glow-cyan) !important; }
/* Override cool-components.css specific rules for delete dialog buttons */
#deldlg .l-btn { border-radius: 9999px !important; }
#deldlg .l-btn .l-btn-left { border-radius: 9999px !important; }
#deldlg .l-btn .l-btn-text { border-radius: 9999px !important; }

/* Ensure rally dialog buttons are also rounded */
#rallydlg .l-btn { border-radius: 9999px !important; }
#rallydlg .l-btn .l-btn-left { border-radius: 9999px !important; }
#rallydlg .l-btn .l-btn-text { border-radius: 9999px !important; }

/* Override logger-window button styling for all dialogs */
.logger-window .dialog-button .l-btn { border-radius: 9999px !important; }
.logger-window .dialog-button .l-btn .l-btn-left { border-radius: 9999px !important; }
.logger-window .dialog-button .l-btn .l-btn-text { border-radius: 9999px !important; }

/* Override cool-components.css specific rules for cqdlg dialog */
#cqdlg.window { background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 12px !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important; }
#cqdlg.panel, #cqdlg .panel-header { background: var(--ut-bg-secondary) !important; border-color: var(--ut-cyan) !important; }
#cqdlg .panel-header { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
#cqdlg .panel-title { color: var(--ut-cyan) !important; font-family: var(--ut-font-mono) !important; }
#cqdlg .panel-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#cqdlg.panel-body, #cqdlg.window-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#cqdlg ~ #cqdlg-buttons.dialog-button, #cqdlg-buttons.dialog-button { background: var(--ut-bg-secondary) !important; border-top: 1px solid var(--ut-cyan) !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
#cqdlg .fitem label { color: var(--ut-cyan) !important; }
#cqdlg .textbox, #cqdlg .combo, #cqdlg .datebox, #cqdlg .numberbox, #cqdlg .timespinner { background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-border) !important; border-radius: 10px !important; color: var(--ut-text-primary) !important; }
#cqdlg .textbox .textbox-text, #cqdlg .combo .textbox-text, #cqdlg .datebox .textbox-text, #cqdlg .numberbox .textbox-text, #cqdlg .timespinner .textbox-text { background: var(--ut-bg-secondary) !important; color: var(--ut-text-primary) !important; }
#cqdlg .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 9999px !important; color: var(--ut-text-primary) !important; }
#cqdlg .l-btn .l-btn-left, #cqdlg .l-btn .l-btn-text { border-radius: 9999px !important; }
#cqdlg-buttons .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; color: var(--ut-text-primary) !important; border-radius: 9999px !important; }
#cqdlg-buttons .l-btn .l-btn-left, #cqdlg-buttons .l-btn .l-btn-text { border-radius: 9999px !important; }

/* Override cool-components.css specific rules for rallydlg dialog */
#rallydlg.window { background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 12px !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important; }
#rallydlg.panel, #rallydlg .panel-header { background: var(--ut-bg-secondary) !important; border-color: var(--ut-cyan) !important; }
#rallydlg .panel-header { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
#rallydlg .panel-title { color: var(--ut-cyan) !important; font-family: var(--ut-font-mono) !important; }
#rallydlg .panel-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#rallydlg.panel-body, #rallydlg.window-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#rallydlg ~ #rallydlg-buttons.dialog-button, #rallydlg-buttons.dialog-button { background: var(--ut-bg-secondary) !important; border-top: 1px solid var(--ut-cyan) !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
#rallydlg .fitem label { color: var(--ut-cyan) !important; }
#rallydlg .textbox, #rallydlg .combo, #rallydlg .datebox, #rallydlg .numberbox, #rallydlg .timespinner { background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-border) !important; border-radius: 10px !important; color: var(--ut-text-primary) !important; }
#rallydlg .textbox .textbox-text, #rallydlg .combo .textbox-text, #rallydlg .datebox .textbox-text, #rallydlg .numberbox .textbox-text, #rallydlg .timespinner .textbox-text { background: var(--ut-bg-secondary) !important; color: var(--ut-text-primary) !important; }
#rallydlg .combo-arrow, #rallydlg .datebox-arrow,
#rallydlg.logger-window .combo-arrow, #rallydlg.logger-window .datebox-arrow {
  background-color: var(--ut-bg-elevated) !important;
  border-left: 1px solid var(--ut-cyan) !important;
  background-image: none !important;
}
#rallydlg .combo-arrow:after, #rallydlg.logger-window .combo-arrow:after {
  border-color: var(--ut-cyan) transparent transparent transparent !important;
}
#rallydlg .datebox-arrow:after, #rallydlg.logger-window .datebox-arrow:after {
  color: var(--ut-cyan) !important;
}
#rallydlg .combo-arrow:hover, #rallydlg .datebox-arrow:hover,
#rallydlg.logger-window .combo-arrow:hover, #rallydlg.logger-window .datebox-arrow:hover {
  background-color: var(--ut-cyan) !important;
}
#rallydlg .combo-arrow:hover:after, #rallydlg.logger-window .combo-arrow:hover:after {
  border-color: var(--ut-bg-primary) transparent transparent transparent !important;
}
#rallydlg .datebox-arrow:hover:after, #rallydlg.logger-window .datebox-arrow:hover:after {
  color: var(--ut-bg-primary) !important;
}
#rallydlg .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 9999px !important; color: var(--ut-text-primary) !important; }
#rallydlg .l-btn .l-btn-left, #rallydlg .l-btn .l-btn-text { border-radius: 9999px !important; }
#rallydlg-buttons .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; color: var(--ut-text-primary) !important; border-radius: 9999px !important; }
#rallydlg-buttons .l-btn .l-btn-left, #rallydlg-buttons .l-btn .l-btn-text { border-radius: 9999px !important; }

/* Override cool-components.css specific rules for deldlg dialog */
#deldlg.window { background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 12px !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important; }
#deldlg.panel, #deldlg .panel-header { background: var(--ut-bg-secondary) !important; border-color: var(--ut-cyan) !important; }
#deldlg .panel-header { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
#deldlg .panel-title { color: var(--ut-cyan) !important; font-family: var(--ut-font-mono) !important; }
#deldlg .panel-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#deldlg.panel-body, #deldlg.window-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#deldlg ~ #deldlg-buttons.dialog-button, #deldlg-buttons.dialog-button { background: var(--ut-bg-secondary) !important; border-top: 1px solid var(--ut-cyan) !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
#deldlg .fitem label { color: var(--ut-cyan) !important; }
#deldlg .textbox, #deldlg .combo, #deldlg .datebox, #deldlg .numberbox, #deldlg .timespinner { background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-border) !important; border-radius: 10px !important; color: var(--ut-text-primary) !important; }
#deldlg .textbox-focused, #deldlg .combo-focused, #deldlg .datebox-focused, #deldlg .numberbox-focused, #deldlg .timespinner-focused { 
  border: 2px solid var(--ut-cyan) !important; 
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
  transform: scale(1.02) !important;
}
#deldlg .textbox .textbox-text, #deldlg .combo .textbox-text, #deldlg .datebox .textbox-text, #deldlg .numberbox .textbox-text, #deldlg .timespinner .textbox-text { background: var(--ut-bg-secondary) !important; color: var(--ut-text-primary) !important; }
#deldlg .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 9999px !important; color: var(--ut-text-primary) !important; }
#deldlg .l-btn .l-btn-left, #deldlg .l-btn .l-btn-text { border-radius: 9999px !important; }
#deldlg-buttons .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; color: var(--ut-text-primary) !important; border-radius: 9999px !important; }
#deldlg-buttons .l-btn .l-btn-left, #deldlg-buttons .l-btn .l-btn-text { border-radius: 9999px !important; }

/* Override cool-components.css specific rules for dlg dialog */
#dlg.window { background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 12px !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important; }
#dlg.panel, #dlg .panel-header { background: var(--ut-bg-secondary) !important; border-color: var(--ut-cyan) !important; }
#dlg .panel-header { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
#dlg .panel-title { color: var(--ut-cyan) !important; font-family: var(--ut-font-mono) !important; }
#dlg .panel-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#dlg.panel-body, #dlg.window-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#dlg ~ #dlg-buttons.dialog-button, #dlg-buttons.dialog-button { background: var(--ut-bg-secondary) !important; border-top: 1px solid var(--ut-cyan) !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
#dlg .fitem label { color: var(--ut-cyan) !important; }
#dlg form, #dlg .panel-body form, #dlg .dialog-content { background: var(--ut-bg-panel) !important; }
#dlg .textbox, #dlg .combo, #dlg .datebox, #dlg .numberbox, #dlg .timespinner { background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-border) !important; border-radius: 10px !important; color: var(--ut-text-primary) !important; }
#dlg .textbox-focused, #dlg .combo-focused, #dlg .datebox-focused, #dlg .numberbox-focused, #dlg .timespinner-focused { 
  border: 2px solid var(--ut-cyan) !important; 
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
  transform: scale(1.02) !important;
}
#dlg .textbox-focused .textbox-text, 
#dlg .combo-focused .textbox-text, 
#dlg .datebox-focused .textbox-text, 
#dlg .numberbox-focused .textbox-text, 
#dlg .timespinner-focused .textbox-text {
  border: 2px solid var(--ut-cyan) !important; 
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
}
#dlg .textbox .textbox-text, #dlg .combo .textbox-text, #dlg .datebox .textbox-text, #dlg .numberbox .textbox-text, #dlg .timespinner .textbox-text { background: var(--ut-bg-secondary) !important; color: var(--ut-text-primary) !important; }
#dlg .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 9999px !important; color: var(--ut-text-primary) !important; }
#dlg .l-btn .l-btn-left, #dlg .l-btn .l-btn-text { border-radius: 9999px !important; }
#dlg-buttons .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-cyan) !important; color: var(--ut-text-primary) !important; border-radius: 9999px !important; }
#dlg-buttons .l-btn .l-btn-left, #dlg-buttons .l-btn .l-btn-text { border-radius: 9999px !important; }

/* Override cool-components.css specific rules for reallyCOOL dialog */
#reallyCOOL-dlg.window { background: var(--ut-bg-panel) !important; border: 1px solid var(--ut-cyan) !important; border-radius: 12px !important; box-shadow: 0 0 20px rgba(0, 240, 255, 0.3) !important; }
#reallyCOOL-dlg.panel, #reallyCOOL-dlg .panel-header { background: var(--ut-bg-secondary) !important; border-color: var(--ut-cyan) !important; }
#reallyCOOL-dlg .panel-header { border-top-left-radius: 12px !important; border-top-right-radius: 12px !important; }
#reallyCOOL-dlg .panel-title { color: var(--ut-cyan) !important; font-family: var(--ut-font-mono) !important; }
#reallyCOOL-dlg .panel-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#reallyCOOL-dlg.panel-body, #reallyCOOL-dlg.window-body { background: var(--ut-bg-panel) !important; color: var(--ut-text-primary) !important; border-color: var(--ut-cyan) !important; }
#reallyCOOL-dlg ~ #reallyCOOL-dlg-buttons.dialog-button, #reallyCOOL-dlg-buttons.dialog-button { background: var(--ut-bg-secondary) !important; border-top: 1px solid var(--ut-cyan) !important; border-bottom-left-radius: 12px !important; border-bottom-right-radius: 12px !important; }
#reallyCOOL-dlg .fitem label { color: var(--ut-cyan) !important; }
#reallyCOOL-dlg .textbox, #reallyCOOL-dlg .combo, #reallyCOOL-dlg .datebox, #reallyCOOL-dlg .numberbox, #reallyCOOL-dlg .timespinner { background: var(--ut-bg-secondary) !important; border: 1px solid var(--ut-border) !important; border-radius: 10px !important; color: var(--ut-text-primary) !important; }
#reallyCOOL-dlg .textbox-focused, #reallyCOOL-dlg .combo-focused, #reallyCOOL-dlg .datebox-focused, #reallyCOOL-dlg .numberbox-focused, #reallyCOOL-dlg .timespinner-focused { 
  border: 2px solid var(--ut-cyan) !important; 
  box-shadow: 0 0 0 2px var(--ut-cyan), 0 0 8px rgba(56, 189, 248, 0.6) !important;
  outline: none !important;
  transform: scale(1.02) !important;
}
#reallyCOOL-dlg .textbox .textbox-text, #reallyCOOL-dlg .combo .textbox-text, #reallyCOOL-dlg .datebox .textbox-text, #reallyCOOL-dlg .numberbox .textbox-text, #reallyCOOL-dlg .timespinner .textbox-text { background: var(--ut-bg-secondary) !important; color: var(--ut-text-primary) !important; }
#reallyCOOL-dlg .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-border) !important; border-radius: 9999px !important; color: var(--ut-text-primary) !important; }
#reallyCOOL-dlg .l-btn .l-btn-left, #reallyCOOL-dlg .l-btn .l-btn-text { border-radius: 9999px !important; }
#reallyCOOL-dlg-buttons .l-btn { background: linear-gradient(180deg, var(--ut-bg-elevated), var(--ut-bg-panel)) !important; border: 1px solid var(--ut-border) !important; color: var(--ut-text-primary) !important; border-radius: 9999px !important; }
#reallyCOOL-dlg-buttons .l-btn .l-btn-left, #reallyCOOL-dlg-buttons .l-btn .l-btn-text { border-radius: 9999px !important; }

/* QSL dialog should have WHITE background */
#qsldlg { background-color: #ffffff !important; }
#qsldlg .panel { background-color: #ffffff !important; }
#qsldlg .panel-body { background-color: #ffffff !important; }
#qsldlg .window { background-color: #ffffff !important; }
#qsldlg .window-body { background-color: #ffffff !important; }
#qsldlg fieldset { background-color: #ffffff !important; border-color: var(--ut-cyan) !important; }
#qsldlg legend { background-color: #ffffff !important; color: var(--ut-cyan) !important; border-color: var(--ut-cyan) !important; }

/* Form inside QSL dialog - white background */
.window .window-body#qsldlg,
.window .window-body#qsldlg {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Override any form elements inside QSL dialog */
#qsldlg form,
#qsldlg .form,
.window-body#qsldlg form,
#qslfm,
#qsldlg table,
#qsldlg td,
#qsldlg tr {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Catch-all: any element inside QSL dialog gets white bg */
#qsldlg *,
.window-body#qsldlg * {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Fast dialog (ADIF Importer) should have dark theme background and centered button text */
#fastdlg { background-color: var(--ut-bg-panel) !important; }
#fastdlg .panel { background-color: var(--ut-bg-panel) !important; }
#fastdlg .panel-body { background-color: var(--ut-bg-panel) !important; }
#fastdlg .window { background-color: var(--ut-bg-panel) !important; }
#fastdlg .window-body { background-color: var(--ut-bg-panel) !important; }
#fastdlg fieldset { background-color: var(--ut-bg-secondary) !important; border-color: var(--ut-cyan) !important; }
#fastdlg legend { background-color: var(--ut-bg-panel) !important; color: var(--ut-cyan) !important; border-color: var(--ut-cyan) !important; }
#fastdlg .ftitle { color: var(--ut-cyan) !important; font-family: var(--ut-font-mono) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.08em; }
#fastdlg .fitem label { color: var(--ut-cyan) !important; }
#fastdlg .fitem p { color: var(--ut-text-primary) !important; margin: 8px 0; line-height: 1.4; }
#fastdlg .fitem h2 { color: var(--ut-text-primary) !important; font-family: var(--ut-font-mono) !important; font-size: 14px !important; font-weight: 600 !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ut-bg-primary); }
::-webkit-scrollbar-thumb { background: var(--ut-bg-elevated); border-radius: 4px; }
fieldset { border: 1px solid var(--ut-border); border-radius: 6px; padding: 12px; background: var(--ut-bg-secondary); }
legend { font-family: var(--ut-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ut-cyan); background: var(--ut-bg-panel); border: 1px solid var(--ut-border); border-radius: 4px; padding: 4px 10px; }
*:focus-visible { outline: 1px solid var(--ut-cyan); outline-offset: 2px; }

/* Button container styling - separate cyan rounded borders */
#dlg-buttons, #deldlg-buttons, #cqdlg-buttons, #rallydlg-buttons, #reallyCOOL-dlg-buttons, #messaging-dlg-buttons, #fastdlg-buttons {
  background: var(--ut-bg-secondary) !important;
  border: 1px solid var(--ut-cyan) !important;
  border-radius: 12px !important;
  margin-top: 8px !important;
  padding: 12px 16px !important;
}

/* Ensure button containers appear below forms */
.dialog-button {
  position: relative !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  border-left: 1px solid var(--ut-cyan) !important;
  border-right: 1px solid var(--ut-cyan) !important;
  border-bottom: 1px solid var(--ut-cyan) !important;
}

/* Combo and datebox arrow visibility for all dialogs */
.easyui-dialog .combo-arrow, .easyui-dialog .datebox-arrow {
  background-color: var(--ut-bg-elevated) !important;
  border-left: 1px solid var(--ut-cyan) !important;
  background-image: none !important;
}
.easyui-dialog .combo-arrow:after {
  border-color: var(--ut-cyan) transparent transparent transparent !important;
}
.easyui-dialog .datebox-arrow:after {
  color: var(--ut-cyan) !important;
}
.easyui-dialog .combo-arrow:hover, .easyui-dialog .datebox-arrow:hover {
  background-color: var(--ut-cyan) !important;
}
.easyui-dialog .combo-arrow:hover:after {
  border-color: var(--ut-bg-primary) transparent transparent transparent !important;
}
.easyui-dialog .datebox-arrow:hover:after {
  color: var(--ut-bg-primary) !important;
}

/* Extra specific targeting for cqdlg combo arrows */
#cqdlg.logger-window .combo .combo-arrow,
#cqdlg.logger-window .datebox .datebox-arrow,
#cqdlg .combo .combo-arrow,
#cqdlg .datebox .datebox-arrow {
  background-color: var(--ut-bg-elevated) !important;
  border-left: 1px solid var(--ut-cyan) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
#cqdlg.logger-window .combo .combo-arrow:after,
#cqdlg.logger-window .datebox .datebox-arrow:after,
#cqdlg .combo .combo-arrow:after,
#cqdlg .datebox .datebox-arrow:after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: -2px 0 0 -4px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: var(--ut-cyan) transparent transparent transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}


/* Messaging dialog combo and datebox arrow visibility */
#messaging-dlg .combo-arrow, #messaging-dlg .datebox-arrow,
#messaging-dlg.logger-window .combo-arrow, #messaging-dlg.logger-window .datebox-arrow {
  background-color: var(--ut-bg-elevated) !important;
  border-left: 1px solid var(--ut-cyan) !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#messaging-dlg .combo-arrow:after, #messaging-dlg.logger-window .combo-arrow:after {
  border-color: var(--ut-cyan) transparent transparent transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#messaging-dlg .datebox-arrow:after, #messaging-dlg.logger-window .datebox-arrow:after {
  color: var(--ut-cyan) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#messaging-dlg .combo-arrow:hover, #messaging-dlg .datebox-arrow:hover,
#messaging-dlg.logger-window .combo-arrow:hover, #messaging-dlg.logger-window .datebox-arrow:hover {
  background-color: var(--ut-cyan) !important;
}
#messaging-dlg .combo-arrow:hover:after, #messaging-dlg.logger-window .combo-arrow:hover:after {
  border-color: var(--ut-bg-primary) transparent transparent transparent !important;
}
#messaging-dlg .datebox-arrow:hover:after, #messaging-dlg.logger-window .datebox-arrow:hover:after {
  color: var(--ut-bg-primary) !important;
}

/* Extra specific targeting for messaging-dlg combo arrows */
#messaging-dlg.logger-window .combo .combo-arrow,
#messaging-dlg.logger-window .datebox .datebox-arrow,
#messaging-dlg .combo .combo-arrow,
#messaging-dlg .datebox .datebox-arrow {
  background-color: var(--ut-bg-elevated) !important;
  border-left: 1px solid var(--ut-cyan) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
#messaging-dlg.logger-window .combo .combo-arrow:after,
#messaging-dlg.logger-window .datebox .datebox-arrow:after,
#messaging-dlg .combo .combo-arrow:after,
#messaging-dlg .datebox .datebox-arrow:after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: -2px 0 0 -4px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: var(--ut-cyan) transparent transparent transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
