@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,greek,greek-ext,cyrillic,cyrillic-ext,latin-ext,vietnamese);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap);

html,
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-size: 11px;
	font-family: "open sans";
	color: #444444;
	overflow: hidden;
}

/*#################################################*/
/* MAP - Speed Tooltip (anchored on map)
/*#################################################*/

.gs-map-speed-tooltip {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 1000;
	max-width: calc(100% - 20px);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: 6px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	overflow: visible;
	font-size: 12px;
	line-height: 16px;
	pointer-events: none;
	display: flex;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 4px; /* match Leaflet control spacing */
	white-space: nowrap;
}

.gs-map-speed-tooltip__sign {
	position: relative;
	width: 36px; /* match .leaflet-bar a */
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.gs-map-speed-tooltip__sign-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 36px;
	height: 36px;
}

.gs-map-speed-tooltip__sign-circle {
	fill: #ffffff;
}

.gs-map-speed-tooltip__sign-value {
	position: relative;
	font-size: 13px;
	line-height: 13px;
	font-weight: 800;
	color: #111111;
}

.gs-map-speed-tooltip__speed {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	min-width: 0;
}

.gs-map-speed-tooltip__speed-value {
	font-size: 13px;
	line-height: 13px;
	font-weight: 800;
	color: #111111;
}

.gs-map-speed-tooltip--overspeed .gs-map-speed-tooltip__speed-value {
	color: #e03131;
}

.gs-map-speed-tooltip__speed-unit {
	margin-top: 0;
	font-size: 13px;
	line-height: 13px;
	font-weight: 800;
	color: #111111;
}

.gs-map-speed-tooltip__speed-unit:empty {
	display: none;
}

a,
a:hover {
	text-decoration: none;
	color: #3970ca;
}

b,
strong {
	font-weight: 600;
}

*:focus {
	outline: 0;
}

/*#################################################*/
/* OBJECTS STATUS FILTER BAR (All, Offline, Moving, Idle, Stopped) */
/*#################################################*/
.objects-status-filter {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 10px 0;
	padding: 4px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f8fafc;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

#side_panel_objects .objects-status-filter {
	flex: 0 0 auto;
}

.objects-status-filter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 10px;
	border: none;
	background: transparent;
	color: #475569;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 120ms ease;
	min-height: 30px;
	white-space: nowrap;
	flex: 1 1 0;
	min-width: 0;
}

.objects-status-filter__btn:hover,
.objects-status-filter__btn:focus-visible {
	background: #eef2f7;
	color: #0f172a;
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.objects-status-filter__btn--active {
	background: #ffffff;
	color: #0f172a;
	box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}

.objects-status-filter__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.objects-status-filter__icon {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #94a3b8;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.15);
	flex: 0 0 12px;
}

.objects-status-filter__icon--all {
	background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
}

.objects-status-filter__icon--offline {
	background: #ef4444;
}

.objects-status-filter__icon--moving {
	background: #22c55e;
}

.objects-status-filter__icon--idle {
	background: #f59e0b;
}

.objects-status-filter__icon--stopped {
	background: #94a3b8;
}

.objects-status-filter__badge {
	min-width: 16px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #e2e8f0;
	color: #334155;
	font-size: 9.5px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 120ms ease;
}

.objects-status-filter__btn[data-filter="offline"].objects-status-filter__btn--active {
	color: #b42318;
	background: #fff1f2;
	box-shadow: 0 3px 10px rgba(180, 35, 24, 0.18), inset 0 0 0 1px rgba(180, 35, 24, 0.18);
}

.objects-status-filter__btn[data-filter="moving"].objects-status-filter__btn--active {
	color: #027a48;
	background: #ecfdf3;
	box-shadow: 0 3px 10px rgba(2, 122, 72, 0.18), inset 0 0 0 1px rgba(2, 122, 72, 0.18);
}

.objects-status-filter__btn[data-filter="idle"].objects-status-filter__btn--active {
	color: #b54708;
	background: #fff7ed;
	box-shadow: 0 3px 10px rgba(181, 71, 8, 0.18), inset 0 0 0 1px rgba(181, 71, 8, 0.18);
}

.objects-status-filter__btn[data-filter="stopped"].objects-status-filter__btn--active {
	color: #475569;
	background: #f1f5f9;
	box-shadow: 0 3px 10px rgba(71, 85, 105, 0.16), inset 0 0 0 1px rgba(71, 85, 105, 0.16);
}

/* END OBJECTS STATUS FILTER BAR
/*#################################################*/

.clearfix {
	display: table;
	width: 100%;
	height: 100%;
}

#login ::-webkit-input-placeholder {
	color: #ececec;
}

#login :-moz-placeholder {
	/* Firefox 18- */
	color: #ececec;
}

#login ::-moz-placeholder {
	/* Firefox 19+ */
	color: #ececec;
}

#login :-ms-input-placeholder {
	color: #ececec;
}

/*#################################################*/
/* INPUTBOXES, SELECT
/*#################################################*/

input.checkbox {
	vertical-align: middle;
}

input[type="checkbox"] {
	height: 13px;
	margin: 5px 0 6px 0;
}

.sensor-select-cb {
	cursor: pointer;
}

#sensor_select_all {
	cursor: pointer;
}

.inputbox {
	width: 100%;
	padding: 0 5px;
}

textarea.inputbox {
	padding: 5px;
}

input,
textarea {
	-webkit-box-sizing: border-box;
	‌​ -moz-box-sizing: border-box;
	box-sizing: border-box;
}

input.color,
input.color:focus,
input.color:hover {
	border: none;
}

input,
select,
.inputbox,
.textarea {
	margin: 0;
	height: 24px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	color: #7a7a7a;
	font-family: "open sans";
	font-size: 11px;
	background: #fbfbfb;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

input:focus,
textarea:focus {
	background-color: #ffffff;
	color: #444444;
}

select {
	height: 24px;
}

.inputbox:hover,
.textarea:hover,
select:hover {
	border: 1px solid #cccccc;
}

.inputbox:disabled,
.textarea:disabled,
select:disabled {
	border: 1px solid #dddddd;
	background: #eeeeee;
}

optgroup {
	font-style: normal;
}

.inputbox-calendar,
.inputbox-calendar-mmdd {
	color: #7a7a7a;
	border: 1px solid #e5e5e5;
	-webkit-inline-box: none;
	background: #fbfbfb url("images/inputbox_calendar.svg") right 5px no-repeat;
	background-size: 14px 14px;
}

.inputbox-calendar:disabled,
.inputbox-calendar-mmdd:disabled {
	-webkit-inline-box: none;
	background: #eeeeee url("images/inputbox_calendar.svg") right 5px no-repeat;
	background-size: 14px 14px;
}

.inputbox-search {
	width: 100%;
	height: 28px;
	text-indent: 30px;
	background: #f5f5f5 url("images/inputbox_search.svg") 10px center no-repeat;
	background-size: 14px 14px;
	float: left;
}

/*#################################################*/
/* BUTTONS
/*#################################################*/

.panel-button img:not([src$=".svg"]) {
	display: block;
	padding: 5px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

input.button {
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background-color: #fbfbfb;
	height: 24px;
	min-width: 78px;
	color: #555555;
	cursor: pointer;
	text-align: center;
	margin-bottom: 0px;
	padding: 0 5px;
}

input.button.icon {
	text-align: left;
	padding-left: 25px;
	margin-bottom: 0;
	background-repeat: no-repeat;
	background-position: 10px center;
}

input.button:hover {
	background-color: #eeeeee;
	color: #212121;
}

input.button:active {
	background-color: #eeeeee;
	color: #555555;
}

input.button:disabled {
	background-color: #eeeeee;
	color: #555555;
}

input.button.icon-key {
	background-image: url(images/key-white.svg);
	background-color: #9cc602;
	border-color: #8bb001;
	color: #ffffff;
}

input.button.icon-key:hover {
	background-color: #8bb100;
}

/*#################################################*/
/* ICONS
/*#################################################*/

.icon-new,
.icon-save,
.icon-delete,
.icon-follow,
.icon-street,
.icon-create,
.icon-copy,
.icon-show,
.icon-hide,
.icon-close,
.icon-edit,
.icon-search,
.icon-time,
.icon-refresh,
.icon-objects,
.icon-objects-disabled,
.icon-markers,
.icon-markers-disabled,
.icon-routes,
.icon-routes-disabled,
.icon-zones,
.icon-zones-disabled,
.icon-labels,
.icon-labels-disabled,
.icon-clusters,
.icon-clusters-disabled,
.icon-traffic,
.icon-traffic-disabled {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.icon-new {
	background-image: url(images/plus.svg);
}

.icon-save {
	background-image: url(images/save-small.svg);
}

.icon-delete {
	background-image: url(images/close.svg);
}

.icon-follow {
	background-image: url(images/follow.svg);
}

.icon-street {
	background-image: url(images/street.svg);
}

.icon-create {
	background-image: url(images/create.svg);
}

.icon-copy {
	background-image: url(images/copy.svg);
}

.icon-show {
	background-image: url(images/eye.svg);
}

.icon-hide {
	background-image: url(images/eye-crossed.svg);
}

.icon-close {
	background-image: url(images/close.svg);
}

.icon-edit {
	background-image: url(images/pen.svg);
}

.icon-search {
	background-image: url(images/search2.svg);
}

.icon-time {
	background-image: url(images/time.svg);
}

.icon-refresh {
	background-image: url(images/refresh.svg);
}

.icon-objects {
	background-image: url(images/objects-white.svg);
	background-color: #3970ca;
}

.icon-objects-disabled {
	background-image: url(images/objects.svg);
	opacity: 0.5;
}

.icon-markers {
	background-image: url(images/markers-white.svg);
	background-color: #3970ca;
}

.icon-markers-disabled {
	background-image: url(images/markers.svg);
	opacity: 0.5;
}

.icon-routes {
	background-image: url(images/routes-white.svg);
	background-color: #3970ca;
}

.icon-routes-disabled {
	background-image: url(images/routes.svg);
	opacity: 0.5;
}

.icon-zones {
	background-image: url(images/zones-white.svg);
	background-color: #3970ca;
}

.icon-zones-disabled {
	background-image: url(images/zones.svg);
	opacity: 0.5;
}

.icon-labels {
	background-image: url(images/labels-white.svg);
	background-color: #3970ca;
}

.icon-labels-disabled {
	background-image: url(images/labels.svg);
	opacity: 0.5;
}

.icon-clusters {
	background-image: url(images/clusters-white.svg);
	background-color: #3970ca;
}

.icon-clusters-disabled {
	background-image: url(images/clusters.svg);
	opacity: 0.5;
}

.icon-traffic {
	background-image: url(images/traffic-white.svg);
	background-color: #3970ca;
}

.icon-traffic-disabled {
	background-image: url(images/traffic.svg);
	opacity: 0.5;
}

.icon-places-marker {
	position: relative;
	width: 44px;
}

.icon-places-marker img {
	width: 32px;
	height: 32px;
}

.icon-object-edit {
	position: relative;
	width: 44px;
}

.icon-object-edit img {
	width: 32px;
	height: 32px;
}

.icon-custom-delete {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

/*#################################################*/
/* SVG ICON SIZING - Match original PNG sizes
/*#################################################*/

/* Standard UI icons - 16x16 (most common size) */
img[src$=".svg"] {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* Panel button icons with padding/border */
.panel-button img[src$=".svg"] {
	width: 16px;
	height: 16px;
	display: block;
	padding: 5px;
	background: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	box-sizing: content-box;
}

/* Arrow icons - 12x12 */
img[src*="arrow.svg"],
img[src*="arrow_left.svg"],
img[src*="arrow_right.svg"] {
	width: 12px;
	height: 12px;
}

/* Navigation arrows - 16x16 */
img[src*="arrow-next.svg"],
img[src*="arrow-next2.svg"],
img[src*="arrow-prev.svg"],
img[src*="arrow-prev2.svg"] {
	width: 16px;
	height: 16px;
}

/* Plus/Minus icons - 10x10 */
img[src*="plus.svg"],
img[src*="minus.svg"] {
	width: 10px;
	height: 10px;
}

/* Import/Export small icons - 14x10 */
img[src*="import_small.svg"],
img[src*="export-small.svg"] {
	width: 14px;
	height: 10px;
}

/* Connection status icons - 16x16 */
img[src*="connection_gsm.svg"],
img[src*="connection_gsm_gps.svg"],
img[src*="connection_no.svg"] {
	width: 16px;
	height: 16px;
}

/* Engine status icons - 16x16 */
img[src*="engine-on.svg"],
img[src*="engine-off.svg"] {
	width: 16px;
	height: 16px;
}

/* Logo - 300x75 */
img[src*="logo.svg"] {
	width: 300px;
	height: 75px;
}

/* Person/User empty image - larger */
img[src*="person_empty.svg"],
img[src*="no_image.svg"] {
	width: 64px;
	height: 64px;
}

/* Browser icons - 48x48 */
img[src*="chrome.svg"],
img[src*="firefox.svg"] {
	width: 48px;
	height: 48px;
}

/* Object/Vehicle marker icons on map - scale with Leaflet container */
.leaflet-marker-icon {
	/* Allow Leaflet iconSize to control dimensions (match mobile) */
	max-width: none !important;
	max-height: none !important;
}

/* Cluster divIcon image sizing (for MarkerCluster plugin) */
.marker-cluster img,
.leaflet-marker-icon.marker-cluster img,
.cluster-small img,
.cluster-medium img,
.cluster-large img {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.leaflet-marker-icon img[src*="/markers/objects/"][src$=".svg"],
.leaflet-marker-icon img[src*="/markers/places/"][src$=".svg"] {
	width: 100%;
	height: 100%;
}

/* Object/Vehicle marker icons in selectors/lists - 33x33 */
img[src*="/markers/objects/"][src$=".svg"],
img[src*="/markers/places/"][src$=".svg"] {
	width: 33px;
	height: 33px;
}

/* Cluster markers on map - scale with Leaflet container */
.leaflet-marker-icon img[src*="/markers/clusters/"][src$=".svg"] {
	width: 100%;
	height: 100%;
}

/* Cluster markers in lists - 33x33 */
img[src*="/markers/clusters/"][src$=".svg"] {
	width: 33px;
	height: 33px;
}

/* Map arrow markers on map - scale with Leaflet container */
.leaflet-marker-icon img[src*="/markers/arrow_"][src$=".svg"] {
	width: 100%;
	height: 100%;
}

/* Map arrow markers in lists */
img[src*="/markers/arrow_"][src$=".svg"] {
	width: 24px;
	height: 24px;
}

/* Route markers on map - scale with Leaflet container */
.leaflet-marker-icon img[src*="/markers/route_"][src$=".svg"] {
	width: 100%;
	height: 100%;
}

/* Route markers in lists - 33x33 */
img[src*="/markers/route_"][src$=".svg"] {
	width: 33px;
	height: 33px;
}

/* Route data point markers - 10x10 static (always) */
img[src*="/markers/route_data_point"][src$=".svg"] {
	width: 10px !important;
	height: 10px !important;
}

/* History panel icons */
img[src*="history-arrows.svg"],
img[src*="history-datapoints.svg"],
img[src*="history-events.svg"],
img[src*="history-refills.svg"],
img[src*="history-route.svg"],
img[src*="history-snap.svg"],
img[src*="history-stops.svg"],
img[src*="history-thefts.svg"] {
	width: 16px;
	height: 16px;
}

/* Route visualization icons */
img[src*="route-drive.svg"],

/* Graph: refill reference dots (Before/After) */
.fuel-refill-ref-dot {
	position: absolute;
	width: 7px;
	height: 7px;
	background: #dc3545;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	z-index: 90;
}

/* Graph: top shaded band (visual headroom) */
.graph-top-band {
	position: absolute;
	background: transparent;
	pointer-events: none;
	z-index: 5;
}

img[src*="route-end.svg"],
img[src*="route-start.svg"],
img[src*="route-stop.svg"],
img[src*="route_"][src$=".svg"]:not([src*="/markers/"]) {
	width: 16px;
	height: 16px;
}

/* Grid table action icons */
.ui-jqgrid-btable img[src$=".svg"],
.ui-jqgrid-btable a img[src$=".svg"] {
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: none;
}

/* Object/vehicle icon column in side panel list - larger icons */
#side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_icon"] img,
#chat_object_list_grid td[aria-describedby="chat_object_list_grid_icon"] img {
	width: 26px;
	height: 26px;
}

/* Side panel ignition indicator */
.ignition-indicator,
#side_panel_objects_object_list_grid span[id^="object_engine_"] img {
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
}

/*#################################################*/
/* DIMENSIONS
/*#################################################*/

.width1 {
	width: 1%;
}

.width2 {
	width: 2%;
}

.width4 {
	width: 4%;
}

.width5 {
	width: 5%;
}

.width8 {
	width: 8%;
}

.width10 {
	width: 10%;
}

.width11 {
	width: 11%;
}

.width12 {
	width: 12%;
}

.width13 {
	width: 13.33333%;
}

.width14 {
	width: 14%;
}

.width15-left {
	width: 15%;
	float: left;
}

.width15 {
	width: 15%;
}

.width16 {
	width: 16%;
}

.width17 {
	width: 17%;
}

.width18 {
	width: 18%;
}

.width19 {
	width: 19%;
}

.width20 {
	width: 20%;
}

.width21 {
	width: 21%;
}

.width24 {
	width: 24%;
}

.width25 {
	width: 25%;
}

.width27 {
	width: 27%;
}

.width28 {
	width: 28%;
}

.width29 {
	width: 29%;
}

.width30 {
	width: 30%;
}

.width31 {
	width: 31%;
}

.width33 {
	width: 33.33333%;
}

.width34 {
	width: 34%;
}

.width35 {
	width: 35%;
}

.width39 {
	width: 39%;
}

.width40 {
	width: 40%;
}

.width44 {
	width: 44%;
}

.width45 {
	width: 45%;
}

.width50 {
	width: 50%;
}

.width55 {
	width: 55%;
}

.width60 {
	width: 60%;
}

.width65 {
	width: 65%;
}

.width70 {
	width: 70%;
}

.width75 {
	width: 75%;
}

.width80 {
	width: 80%;
}

.width85 {
	width: 85%;
}

.width90 {
	width: 90%;
}

.width95 {
	width: 95%;
}

.width100 {
	width: 100%;
}

.width-1000 {
	max-width: 1000px;
}

.width235 {
	width: 235px;
}

/*#################################################*/
/* FLOATING AND SPACING
/*#################################################*/

.float-left,
.block {
	float: left;
}

.float-right {
	float: right;
}

.container {
	margin-right: 10px;
}

.container.last,
.last .title-block,
.container.last fieldset {
	margin-right: 0;
}

.container.prev {
	margin-left: 10px;
}

.absolute-right {
	position: absolute;
	right: 10px;
	top: 36px;
	margin: 0;
}

/*#################################################*/
/* TABLELESS STYLING
/*#################################################*/

.row {
	margin-bottom: 10px;
	display: table;
	width: 100%;
	line-height: 12px;
	font-size: 0;
}

.row div {
	display: inline-block;
	vertical-align: middle;
	font-size: 11px;
}

/* display: table-cell; */
.row2 {
	margin-bottom: 3px;
	display: table;
	width: 100%;
	text-align: left;
	line-height: 12px;
	font-size: 0;
}

.row2 div {
	display: inline-block;
	vertical-align: middle;
	font-size: 11px;
}

/* display: table-cell; */
.row2.empty {
	height: 24px;
}

.row2.right {
	text-align: right;
}

.row3 {
	margin-bottom: 10px;
	display: table;
	width: 100%;
}

/* FIX if something goes wrong with css. This row doesn't have vertical alignment, suitable just to split lines and add spacing at the bottom */
.row4 {
	margin-bottom: 0px;
	display: table;
	width: 100%;
	text-align: left;
	line-height: 12px;
	font-size: 0;
}

.row4 div {
	display: inline-block;
	vertical-align: middle;
	font-size: 11px;
}

/* display: table-cell; */

/* Side panel (tracking): keep search + actions in one row */
#gbox_side_panel_objects_object_list_grid .row4,
#gview_side_panel_objects_object_list_grid .row4 {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}

#gbox_side_panel_objects_object_list_grid .row4>div,
#gview_side_panel_objects_object_list_grid .row4>div {
	display: block;
}

#gbox_side_panel_objects_object_list_grid .row4>div.width80,
#gview_side_panel_objects_object_list_grid .row4>div.width80 {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
}

#gbox_side_panel_objects_object_list_grid .row4>div.float-right,
#gview_side_panel_objects_object_list_grid .row4>div.float-right {
	float: none;
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

#gbox_side_panel_objects_object_list_grid .row4 .inputbox-search,
#gview_side_panel_objects_object_list_grid .row4 .inputbox-search {
	float: none;
	min-width: 90px;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	background-color: #ffffff;
}

#gbox_side_panel_objects_object_list_grid .row4 .panel-button img,
#gview_side_panel_objects_object_list_grid .row4 .panel-button img {
	border-radius: 12px;
}

/* Side panel (Places): keep search + actions in one row */
#gbox_side_panel_places_marker_list_grid .row4,
#gview_side_panel_places_marker_list_grid .row4,
#gbox_side_panel_places_route_list_grid .row4,
#gview_side_panel_places_route_list_grid .row4,
#gbox_side_panel_places_zone_list_grid .row4,
#gview_side_panel_places_zone_list_grid .row4 {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}

#gbox_side_panel_places_marker_list_grid .row4>div,
#gview_side_panel_places_marker_list_grid .row4>div,
#gbox_side_panel_places_route_list_grid .row4>div,
#gview_side_panel_places_route_list_grid .row4>div,
#gbox_side_panel_places_zone_list_grid .row4>div,
#gview_side_panel_places_zone_list_grid .row4>div {
	display: block;
}

#gbox_side_panel_places_marker_list_grid .row4>div.width45,
#gview_side_panel_places_marker_list_grid .row4>div.width45,
#gbox_side_panel_places_route_list_grid .row4>div.width45,
#gview_side_panel_places_route_list_grid .row4>div.width45,
#gbox_side_panel_places_zone_list_grid .row4>div.width45,
#gview_side_panel_places_zone_list_grid .row4>div.width45 {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
}

#gbox_side_panel_places_marker_list_grid .row4>div.float-right,
#gview_side_panel_places_marker_list_grid .row4>div.float-right,
#gbox_side_panel_places_route_list_grid .row4>div.float-right,
#gview_side_panel_places_route_list_grid .row4>div.float-right,
#gbox_side_panel_places_zone_list_grid .row4>div.float-right,
#gview_side_panel_places_zone_list_grid .row4>div.float-right {
	float: none;
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

#gbox_side_panel_places_marker_list_grid .row4 .inputbox-search,
#gview_side_panel_places_marker_list_grid .row4 .inputbox-search,
#gbox_side_panel_places_route_list_grid .row4 .inputbox-search,
#gview_side_panel_places_route_list_grid .row4 .inputbox-search,
#gbox_side_panel_places_zone_list_grid .row4 .inputbox-search,
#gview_side_panel_places_zone_list_grid .row4 .inputbox-search {
	float: none;
	min-width: 80px;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	background-color: #ffffff;
}

#side_panel_events .row4 .inputbox-search,
#side_panel_history_reports .row4 .inputbox-search {
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	background-color: #ffffff;
}

#side_panel_events .row4 .panel-button img,
#side_panel_history_reports .row4 .panel-button img,
#gbox_side_panel_places_marker_list_grid .row4 .panel-button img,
#gview_side_panel_places_marker_list_grid .row4 .panel-button img,
#gbox_side_panel_places_route_list_grid .row4 .panel-button img,
#gview_side_panel_places_route_list_grid .row4 .panel-button img,
#gbox_side_panel_places_zone_list_grid .row4 .panel-button img,
#gview_side_panel_places_zone_list_grid .row4 .panel-button img {
	border-radius: 12px;
}

/* History panel controls: object/filter/time/stops + show/hide/import-export */
#side_panel_history_reports_parameters {
	flex-shrink: 0;
}

#side_panel_history_reports_parameters select,
#side_panel_history_reports_parameters .inputbox,
#side_panel_history_reports_parameters .inputbox-calendar,
#side_panel_history_reports_parameters input.button {
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	background-color: #ffffff;
}

#side_panel_history_reports_object_list {
	border-radius: 12px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #ffffff;
}

/* Custom History objects dropdown (searchable) */
.history-object-dropdown-display {
	border-radius: 12px !important;
	border: 1px solid #e5e7eb !important;
	background-color: #ffffff !important;
}

.history-object-dropdown-list {
	border-radius: 12px !important;
	border: 1px solid #e5e7eb !important;
	overflow: hidden;
}

.history-object-search-input {
	border-radius: 10px !important;
	border: 1px solid #e5e7eb !important;
	background-color: #ffffff !important;
}

/*#################################################*/
/* OBJECTS (tracking) - Group filter dropdown */
/*#################################################*/

.objects-group-filter {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.objects-group-filter--active .panel-button img[src$=".svg"] {
	background: #eaf2ff;
	border-color: #b7cdf7;
}

.objects-group-filter__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 4000;
	min-width: 170px;
	max-width: 240px;
	max-height: 320px;
	overflow: auto;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	padding: 6px;
}

/* Override `.row4 div { display: inline-block; }` so the menu stacks correctly */
.objects-group-filter__menu .objects-group-filter__list {
	display: block;
}

/* Header removed intentionally */

.objects-group-filter__item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 8px;
	color: #222222;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.objects-group-filter__item:hover {
	background: #f5f8ff;
}

.objects-group-filter__item input[type="checkbox"] {
	position: absolute;
	left: -9999px;
	opacity: 0;
}

.objects-group-filter__box {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid #cfd7e3;
	background: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
}

.objects-group-filter__item input[type="checkbox"]:focus + .objects-group-filter__box {
	box-shadow: 0 0 0 3px rgba(57, 112, 202, 0.18);
	border-color: #3970ca;
}

.objects-group-filter__item input[type="checkbox"]:checked + .objects-group-filter__box {
	border-color: #3970ca;
	background: #3970ca;
}

.objects-group-filter__item input[type="checkbox"]:checked + .objects-group-filter__box:after {
	content: "";
	width: 8px;
	height: 4px;
	border-left: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(-45deg);
	margin-top: -1px;
}

.objects-group-filter__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.objects-group-filter__count {
	flex: 0 0 auto;
	min-width: 18px;
	padding: 0 5px;
	height: 16px;
	line-height: 16px;
	border-radius: 999px;
	background: #f0f2f5;
	color: #555555;
	font-size: 10px;
	text-align: center;
}

.objects-group-filter__divider {
	display: none;
	height: 1px;
	background: #eeeeee;
	margin: 0;
}

/*#################################################*/
/* OBJECTS (tracking) - jqGrid Group header (match mobile) */
/*#################################################*/

#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr.jqgroup td {
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	background: #f8f8f8;
	border: none;
	border-bottom: 1px solid #e9ecef;
	position: relative;
}

#gview_side_panel_objects_object_list_grid .group-header-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
	min-height: 28px;
	padding: 4px 10px;
	box-sizing: border-box;
}

#gview_side_panel_objects_object_list_grid .group-name {
	flex: 0 1 auto;
	max-width: calc(100% - 70px);
	text-align: left;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.2;
}

#gview_side_panel_objects_object_list_grid .group-count {
	flex: 0 0 auto;
	min-width: 22px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	color: #333;
	font-size: 11px;
	line-height: 14px;
	text-align: center;
}

/* Move jqGrid expand/collapse icon to the right */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr.jqgroup td > span.ui-icon {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	float: none !important;
	margin: 0 !important;
}

/*#################################################*/
/* OBJECTS GRID ROWS - Match Mobile Style */
/*#################################################*/

/* Object rows - larger padding, modern look */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr.jqgrow td {
	padding: 6px 4px !important;
	height: auto !important;
	min-height: 20px !important;
	font-size: 12px !important;
	border-right: none;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
	overflow: hidden;
	background: inherit; /* inherit from tr for status coloring */
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr.jqgrow:hover td {
	background: inherit; /* preserve status color on hover */
}

/*#################################################*/
/* HISTORY ROUTE LIST - Mobile-style HTML Cards */
/*#################################################*/

/* History Route container */
#side_panel_history_reports_route {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 340px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* History Route List - scrollable card container */
#side_panel_history_reports_route_list {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
	background: #fff;
	/* Hide scrollbar but keep scroll functionality */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#side_panel_history_reports_route_list::-webkit-scrollbar {
	display: none;
}

/* History Route Data container - hidden for simpler layout */
#side_panel_history_reports_route_data_list {
	display: none;
}

/* History dragbar - hidden for simpler layout */
#side_panel_history_reports_dragbar {
	display: none;
}

/* =========================================
   HISTORY ROUTE ITEMS - Mobile-style Cards
   ========================================= */

.history-route-item {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	margin-bottom: 5px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
	border-left: 4px solid #ccc;
	position: relative;
}

.history-route-item:last-child {
	margin-bottom: 0;
}

.history-route-item:hover {
	background: #f5f9ff;
	border-color: #d0e0f0;
	box-shadow: 0 2px 6px rgba(57, 112, 202, 0.1);
}

.history-route-item:active {
	background: #eef5ff;
	border-color: #3970CA;
}

.history-route-item.selected {
	background: #eef5ff;
	border-color: #b8d4f0;
	border-left-color: #3970CA !important;
}

/* Icon container */
.history-route-item-icon {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	margin-right: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.history-route-item-icon img {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	object-fit: contain;
}

/* Content container */
.history-route-item-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Header: time on top, info below (like mobile) */
.history-route-item-header {
	display: flex;
	flex-direction: column;
}

.history-route-item-time {
	font-size: 12px;
	font-weight: 600;
	color: #333;
	margin-bottom: 1px;
}

.history-route-item-info {
	font-size: 11px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================================
   ROUTE ITEM TYPE COLORS
   ========================================= */

.history-route-item[data-type="start"] {
	border-left-color: #28a745;
}

.history-route-item[data-type="end"] {
	border-left-color: #dc3545;
}

.history-route-item[data-type="stop"] {
	border-left-color: #ffc107;
}

.history-route-item[data-type="event"] {
	border-left-color: #6f42c1;
}

.history-route-item[data-type="drive"] {
	border-left-color: #17a2b8;
}

.history-route-item[data-type="refill"] {
	border-left-color: #20c997;
}

.history-route-item[data-type="theft"] {
	border-left-color: #e74c3c;
}

/* =========================================
   EXPANDABLE DETAILS
   ========================================= */

.history-route-item.has-details {
	flex-wrap: wrap;
}

.history-route-item.has-details .history-route-item-content {
	padding-right: 32px;
}

/* Always expanded (start card) - no padding for expand button */
.history-route-item.always-expanded {
	flex-wrap: wrap;
}

.history-route-item.always-expanded .history-route-item-content {
	padding-right: 0;
}

/* Always expanded details - show immediately without animation */
.history-route-item.always-expanded .history-route-item-details {
	display: block !important;
	animation: none;
}

.history-route-item-details {
	display: none;
	width: 100%;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #e0e0e0;
	animation: historySlideDown 0.2s ease-out;
}

@keyframes historySlideDown {
	from { opacity: 0; max-height: 0; }
	to { opacity: 1; max-height: 300px; }
}

.history-route-item.expanded .history-route-item-details {
	display: block;
}

.history-route-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3px 0;
	font-size: 11px;
}

.history-route-detail-label {
	color: #666;
	flex-shrink: 0;
	margin-right: 8px;
}

.history-route-detail-value {
	color: #333;
	font-weight: 500;
	text-align: right;
}

/* Green color for refill values */
.history-route-detail-value.refill-value {
	color: #28a745;
	font-weight: 600;
}

/* Expand button */
.history-route-item-expand {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f0f0f0;
	transition: all 0.15s;
	cursor: pointer;
}

.history-route-item-expand:hover {
	background: #e0e0e0;
}

.history-route-item-expand .expand-icon {
	width: 14px;
	height: 14px;
	stroke: #666;
	transition: transform 0.2s;
}

.history-route-item.expanded .history-route-item-expand {
	background: #3970CA;
}

.history-route-item.expanded .history-route-item-expand .expand-icon {
	stroke: #fff;
	transform: rotate(180deg);
}
/* History Route Data Grid - hidden for now */
#gview_side_panel_history_reports_route_data_list_grid .ui-jqgrid-btable tr.jqgrow td {
	padding: 6px 4px !important;
	height: auto !important;
	min-height: 20px !important;
	font-size: 12px !important;
	border-right: none;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
	overflow: hidden;
}

/* Data label column */
#gview_side_panel_history_reports_route_data_list_grid td[aria-describedby="side_panel_history_reports_route_data_list_grid_data"] {
	width: 100px !important;
	padding: 4px 2px !important;
	font-weight: 600;
	color: #666;
	font-size: 11px !important;
}

/* Value column */
#gview_side_panel_history_reports_route_data_list_grid td[aria-describedby="side_panel_history_reports_route_data_list_grid_value"] {
	width: auto !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px !important;
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr.jqgrow.ui-state-highlight td {
	background: inherit; /* preserve status color when selected */
}

/* Object Name and Status - 2 lines like Mobile */
#gview_side_panel_objects_object_list_grid .object-name {
	color: #333;
	font-weight: 600;
	font-size: 12px !important;
	line-height: 15px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 100%;
}

#gview_side_panel_objects_object_list_grid .object-status {
	color: #6c757d;
	font-size: 10.5px !important;
	line-height: 13px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 100%;
	margin-top: 2px;
}

/* Object/vehicle icon - 26x26 like Mobile */
#gview_side_panel_objects_object_list_grid .object-icon {
	width: 26px;
	height: 26px;
	display: block;
}

/* Speed badge - compact pill to fit 42px column */
#gview_side_panel_objects_object_list_grid .object-speed {
	font-weight: 600;
	font-size: 11px;
	line-height: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	padding: 2px 4px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.04);
	color: #333;
	white-space: nowrap;
}

/* Connection and engine icons - 16x16 */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable td img {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

/* But vehicle/object icons should be 26x26 */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable td .object-icon {
	width: 26px;
	height: 26px;
}

/* Icon column - center align */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_icon"] {
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
}

/* Speed column - center align */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_speed"] {
	text-align: center;
}

/* Engine column - center align */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_engine"] {
	text-align: center;
}

/* Connection column - center align */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_connection"] {
	text-align: center;
}

/* Gear column - center align */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_gear"] {
	text-align: center;
}

/* Hide the table header row - app-like list */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-hdiv {
	display: none;
}

/* Remove top margin from btable - fixed layout to fit 340px panel */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable {
	margin: 0;
	table-layout: fixed !important;
	width: 100% !important;
	max-width: 340px !important;
}

/* ========================================
   OBJECT LIST GRID - Column Width Fix
   Force fixed columns to stay small, name to expand
   ======================================== */

/* Icon column - 30px */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_icon"],
#gview_side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_icon"] {
	width: 30px !important;
	min-width: 30px !important;
	max-width: 30px !important;
	padding: 2px !important;
}

/* Speed column - 42px */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_speed"],
#gview_side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_speed"] {
	width: 42px !important;
	min-width: 42px !important;
	max-width: 42px !important;
	padding: 2px 1px !important;
}

/* Engine column - 20px */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_engine"],
#gview_side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_engine"] {
	width: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	padding: 2px 1px !important;
}

/* Connection column - 20px */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_connection"],
#gview_side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_connection"] {
	width: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	padding: 2px 1px !important;
}

/* Gear column - 20px */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_gear"],
#gview_side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_gear"] {
	width: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	padding: 2px 1px !important;
}

/* Name column - takes remaining space, allow content to wrap/ellipsis */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_name"],
#gview_side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_name"] {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

/* Name column content should overflow with ellipsis */
#gview_side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_name"] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ========================================
   OBJECT LIST GRID - Colgroup/Col Width Fix
   Override jqGrid inline styles on col elements
   ======================================== */

/* Reset colgroup col widths - let CSS control them */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable colgroup col {
	width: auto !important;
}

/* jqGrid's hidden first row - prevent it from affecting column widths */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr.jqgfirstrow td {
	width: auto !important;
	min-width: 0 !important;
}

/* Ensure all fixed columns have explicit widths on their tds */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr td[aria-describedby="side_panel_objects_object_list_grid_icon"] {
	width: 30px;
	min-width: 30px;
	max-width: 30px;
	box-sizing: border-box;
	padding: 2px !important;
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr td[aria-describedby="side_panel_objects_object_list_grid_speed"] {
	width: 42px;
	min-width: 42px;
	max-width: 42px;
	box-sizing: border-box;
	padding: 2px 1px !important;
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr td[aria-describedby="side_panel_objects_object_list_grid_engine"] {
	width: 20px;
	min-width: 20px;
	max-width: 20px;
	box-sizing: border-box;
	padding: 2px 1px !important;
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr td[aria-describedby="side_panel_objects_object_list_grid_connection"] {
	width: 20px;
	min-width: 20px;
	max-width: 20px;
	box-sizing: border-box;
	padding: 2px 1px !important;
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable tr td[aria-describedby="side_panel_objects_object_list_grid_gear"] {
	width: 20px;
	min-width: 20px;
	max-width: 20px;
	box-sizing: border-box;
	padding: 2px 1px !important;
}

.scroll-y {
	height: 100%;
	overflow-y: scroll
}

.title-block {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #dddddd;
	font-weight: 600;
	font-size: 12px;
	color: #3970ca;
}

.table {
	display: table;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.table-cell {
	display: table-cell;
	margin: 0;
	padding: 0;
}

.center-middle {
	vertical-align: middle;
	text-align: center;
}

.margin-right-3 {
	margin-right: 3px;
}

.margin-left-3 {
	margin-left: 3px;
}

/*#################################################*/
/* LOADING AND BLOCKING PANELS
/*#################################################*/

#loading_panel,
#loading_data {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(248, 249, 250, 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 16px;
	padding-top: calc(16px + env(safe-area-inset-top, 0px));
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

#loading_panel .table,
#loading_data .table {
	height: 100%;
	width: 100%;
}

#loading_panel_msg {
	text-align: center;
}

#blocking_panel {
	background-color: rgba(170, 170, 170, 0.3);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 99999;
}

#blocking_panel_msg {
	background-color: #FFFFFF;
	padding: 20px;
}

/*#################################################*/
/* LOADER
/*#################################################*/

.loader {
	text-align: center;
	color: #696969;
	font-size: 11px;
	position: relative;
	width: 200px;
	margin: 0px auto;
}

#loading_panel .loader,
#loading_data .loader {
	width: 260px;
	max-width: 92vw;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	padding: 18px 16px 14px 16px;
	color: #333;
	font-size: 13px;
	font-weight: 600;
}

#loading_panel .loader .loader-logo,
#loading_data .loader .loader-logo {
	display: block;
	max-width: 160px;
	max-height: 80px;
	width: auto;
	height: auto;
	margin: 0 auto 10px auto;
}

#loading_panel .loader>span,
#loading_data .loader>span {
	height: 6px;
	border-radius: 999px;
	background-color: rgba(57, 112, 202, 0.18);
	background-image: none;
	margin-top: 10px;
}

#loading_panel .loader>span:after,
#loading_data .loader>span:after,
#loading_panel .animate>span>span,
#loading_data .animate>span>span {
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,
			color-stop(.25, rgba(57, 112, 202, .25)),
			color-stop(.25, transparent),
			color-stop(.5, transparent),
			color-stop(.5, rgba(57, 112, 202, .25)),
			color-stop(.75, rgba(57, 112, 202, .25)),
			color-stop(.75, transparent),
			to(transparent));
	background-image: -moz-linear-gradient(-45deg,
			rgba(57, 112, 202, .25) 25%,
			transparent 25%,
			transparent 50%,
			rgba(57, 112, 202, .25) 50%,
			rgba(57, 112, 202, .25) 75%,
			transparent 75%,
			transparent);
	-webkit-animation: move 1.2s linear infinite;
	-moz-animation: move 1.2s linear infinite;
	animation: move 1.2s linear infinite;
}

.loader>span {
	display: block;
	height: 100%;
	background-color: #efefef;
	background-image: -moz-linear-gradient(top, #c5c5c5, #c5c5c5);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c5c5c5), color-stop(1, #c5c5c5));
	background-image: -webkit-linear-gradient(#c5c5c5, #c5c5c5);
	position: relative;
	overflow: hidden;
	height: 4px;
	margin-top: 3px;
}

.loader>span:after,
.animate>span>span {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	z-index: 1;
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	background-size: 50px 50px;
	-webkit-animation: move 2s linear infinite;
	-moz-animation: move 2s linear infinite;
	overflow: hidden;
}

@-webkit-keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 50px 50px;
	}
}

@-moz-keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 50px 50px;
	}
}

/*#################################################*/
/* JQGRID.CSS OVERRIDE
/*#################################################*/

.ui-jqgrid {
	border-radius: 4px;
	overflow: hidden;
}

.ui-jqgrid .loading {
	background: #ffffff;
	font-weight: 600;
}

.ui-jqgrid .ui-jqgrid-bdiv {
	position: relative;
	margin: 0em;
	padding: 0;
	overflow: auto;
	text-align: left;
}

.ui-jqgrid tr.ui-row-ltr td {
	text-align: left;
	border-right-width: 0px;
	border-right-color: inherit;
	border-right-style: solid;
	border-color: #dddddd
}

.ui-jqgrid .ui-jqgrid-pager {
	border-left: 0px none !important;
	border-right: 0px none !important;
	border-bottom: 0px none !important;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	border-radius: 0 0 4px 4px;
}

.ui-jqgrid .ui-jqgrid-pager {
	background: #f5f5f5;
	border-top: 1px solid #dddddd;
	margin: 3px -15px 0px -15px !important;
	padding: 2px 15px 0px 15px !important;
	height: 25px;
}

.ui-jqgrid .ui-pg-table td {
	font-weight: normal;
	vertical-align: middle;
	padding: 0px;
}

.ui-jqgrid .ui-pg-button {
	border-left: 1px hidden;
	border-right: 1px hidden;
	border-top: 0px;
	border-bottom: 0px;
	height: 19px !important;
}

.ui-jqgrid .ui-state-disabled:hover {
	padding: 0px;
}

.ui-jqgrid .ui-jqgrid-view {
	font-size: 11px;
}

.ui-jqgrid .ui-jqgrid-titlebar {
	margin: 0 0 10px 0;
	padding: 0;
}

.ui-jqgrid .ui-jqgrid-htable th div {
	height: auto;
}

.ui-jqgrid .ui-jqgrid-hdiv {
	margin: 0 0 3px 0;
	background: #f5f5f5;
	clear: both;
	border-radius: 4px 4px 0 0;
}

.ui-jqgrid .ui-jqgrid-hdiv thead {
	font-size: 12px;
	height: 24px;
}

.ui-jqgrid .ui-jqgrid-htable th {
	height: 13px;
}

.ui-th-column,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
	height: 24px;
}

.ui-th-ltr,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
	border-left: 1px solid #e5e5e5;
	padding-top: 0px;
}

.ui-th-ltr:first-child,
.ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr:first-child {
	border-left: none;
}

.ui-jqgrid .ui-icon-asc,
.ui-jqgrid .ui-icon-desc {
	margin-left: 7px;
	margin-top: 7px;
	height: 5px;
	width: 9px;
}

.ui-jqgrid .ui-pg-input {
	font-size: 10px;
	height: 18px;
	margin: 2px 0;
	text-align: center;
}

.ui-jqgrid .ui-pg-selbox {
	display: block;
	font-size: 10px;
	height: 18px;
	line-height: 18px;
	margin: 0;
}

.ui-jqgrid .ui-separator {
	height: 0;
	border: none;
}

.ui-jqgrid .ui-pg-table {
	padding: 0;
}

.ui-jqgrid tr.jqgrow td {
	padding: 1px 2px;
	height: 17px;
}

.ui-jqgrid tr.ui-row-ltr td span {
	display: inline-block;
	height: 17px;
}

.ui-jqgrid .ui-jqgrid-btable {
	table-layout: fixed;
	margin: 3px 0 0 0;
	outline-style: none;
}

.ui-jqgrid .ui-state-hover {
	background: #f5f5f5;
	opacity: 0.9;
}

.ui-jqgrid th.ui-state-hover {
	background: none;
}

.ui-jqgrid .ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	background: #f5f5f5;
	opacity: 0.9;
}

/*#################################################*/
/* JQGRID PAGER
/*#################################################*/

.ui-jqgrid .ui-jqgrid-pager .ui-pg-button.ui-state-default {
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 4px;
}

.ui-jqgrid .ui-jqgrid-pager .ui-pg-button.ui-state-hover {
	background: #ffffff;
}

#cpanel .ui-jqgrid .ui-jqgrid-pager .ui-pg-button .ui-pg-div {
	padding: 0;
}

#cpanel .ui-jqgrid .ui-jqgrid-pager .ui-pg-button span.ui-icon {
	margin: 0;
	width: 20px;
	height: 20px;
}

.ui-pg-div .ui-icon-plus {
	background: #3970ca url(images/plus-white.svg ) center center no-repeat;
	background-size: 10px 10px;
	width: 20px;
	height: 20px;
	border-radius: 4px;
}

.ui-pg-div .ui-icon-import {
	background: url(images/import_small.svg ) center center no-repeat;
	background-size: 14px 10px;
	width: 24px;
}

.ui-pg-div .ui-icon-export {
	background: url(images/export-small.svg ) center center no-repeat;
	background-size: 14px 10px;
	width: 24px;
}

.ui-pg-div .ui-icon-delete-all {
	background: url(images/close.svg ) center center no-repeat;
	width: 24px;
}

#cpanel #cpanel_user_list .ui-pg-div,
#cpanel #cpanel_object_list .ui-pg-div,
#cpanel #cpanel_unused_object_list .ui-pg-div {
	margin-left: 0px;
	margin-right: 2px;
}

#cpanel #cpanel_user_list .ui-pg-div .ui-icon-plus,
#cpanel #cpanel_object_list .ui-pg-div .ui-icon-plus,
#cpanel #cpanel_unused_object_list .ui-pg-div .ui-icon-plus {
	margin: 0px 5px 0px 0px;
}

#cpanel #cpanel_user_list .ui-jqgrid .ui-jqgrid-pager,
#cpanel #cpanel_object_list .ui-jqgrid .ui-jqgrid-pager,
#cpanel #cpanel_unused_object_list .ui-jqgrid .ui-jqgrid-pager {
	overflow: visible;
	height: auto;
	min-height: 25px;
	margin: 3px -8px 0px -8px !important;
	padding: 2px 8px 0px 8px !important;
	padding-bottom: 4px !important;
}

#cpanel #dialog_user_edit .ui-pg-div .ui-icon-plus,
#dialog_settings .ui-pg-div .ui-icon-plus,
#dialog_settings_object_edit .ui-pg-div .ui-icon-plus,
#dialog_cmd .ui-pg-div .ui-icon-plus,
#dialog_places_groups .ui-pg-div .ui-icon-plus {
	margin: -4px 5px -5px -15px;
}

#side_panel .ui-jqgrid .ui-jqgrid-pager,
#bottom_panel .ui-jqgrid .ui-jqgrid-pager {
	border-top: none;
	margin: 3px 0 0 0 !important;
	padding: 2px 10px !important;
	height: auto;
}

#dialog_image_gallery .ui-jqgrid .ui-jqgrid-pager {
	margin: 10px -15px -15px -15px !important;
	padding: 2px 12px 0px 15px !important;
}

/*#################################################*/
/* JQGRID CUSTOM
/*#################################################*/

.ui-jqgrid-btable a img {
	padding-left: 1px;
	padding-right: 1px;
}

.ui-jqgrid .tree-wrap-ltr {
	float: right;
	margin-top: 0px;
	margin-right: 1px;
	margin-left: 8px;
}

.ui-jqgrid tr.ui-row-ltr td {
	border-color: #e5e5e5;
}

#cpanel .ui-jqgrid .ui-jqgrid-title {
	float: right;
	margin: auto;
}

#cpanel .ui-jqgrid tr.ui-row-ltr td {
	padding: 3px;
}

#cpanel .ui-jqgrid .ui-jqgrid-titlebar {
	margin-bottom: 12px;
}

#gview_image_gallery_list_grid,
#gview_chat_object_list_grid,
#gview_settings_object_sensor_calibration_list_grid,
#gview_cpanel_manage_server_custom_map_list_grid,
#gview_cpanel_manage_server_log_list_grid,
#gview_cpanel_manage_server_template_list_grid,
#gview_cpanel_db_user_storage_grid {
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 3px;
}

.ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_show,
.ui-jqgrid .ui-jqgrid-htable th#side_panel_places_marker_list_grid_show,
.ui-jqgrid .ui-jqgrid-htable th#side_panel_places_route_list_grid_show,
.ui-jqgrid .ui-jqgrid-htable th#side_panel_places_zone_list_grid_show,
.ui-jqgrid .ui-jqgrid-htable th#side_panel_history_reports_route_review_list_grid_icon,
.ui-jqgrid .ui-jqgrid-htable th#chat_object_list_grid_icon {
	border-left: none;
}

#jqgh_image_gallery_list_grid_dt_tracker span,
#jqgh_settings_object_sensor_calibration_list_grid_x span {
	vertical-align: top;
}

#gview_dialog_user_edit_object_list_grid input[type=text],
#gview_dialog_user_edit_subaccount_list_grid input[type=text] {
	height: 17px;
	width: 100%;
	border: 0px;
	text-align: center;
}

#cpanel #cpanel_user_list .ui-jqgrid .ui-jqgrid-hdiv,
#cpanel #cpanel_object_list .ui-jqgrid .ui-jqgrid-hdiv,
#cpanel #cpanel_unused_object_list .ui-jqgrid .ui-jqgrid-hdiv {
	padding: 4px 0;
	margin-bottom: 3px;
}

#cpanel #dialog_user_edit .ui-jqgrid .ui-jqgrid-hdiv {
	padding: 2px 0;
}

/* Database > User Storage grid should fill container width */
#gview_cpanel_db_user_storage_grid,
#gbox_cpanel_db_user_storage_grid,
#gview_cpanel_db_user_storage_grid .ui-jqgrid,
#gview_cpanel_db_user_storage_grid .ui-jqgrid-view,
#gview_cpanel_db_user_storage_grid .ui-jqgrid-hdiv,
#gview_cpanel_db_user_storage_grid .ui-jqgrid-bdiv,
#gview_cpanel_db_user_storage_grid .ui-jqgrid-pager {
	width: 100% !important;
}

#cpanel #cpanel_user_list .ui-jqgrid tr.jqgrow td,
#cpanel #cpanel_object_list .ui-jqgrid tr.jqgrow td,
#cpanel #cpanel_unused_object_list .ui-jqgrid tr.jqgrow td {
	padding: 3px;
}

/*#################################################*/
/* LOGIN PAGE - Modern Split Layout
/*#################################################*/

#login {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Contact Bar */
.login-contact-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 50%;
	background: #3970ca;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 10px 20px;
	z-index: 100;
	box-sizing: border-box;
}

.contact-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: opacity 0.3s ease;
}

.contact-btn:hover {
	opacity: 0.85;
	color: #fff;
}

.contact-btn svg {
	flex-shrink: 0;
}

.contact-whatsapp svg {
	color: #25D366;
}

.login-container {
	display: flex;
	min-height: 100vh;
}

/* Left Panel - Login Form */
.login-panel {
	padding-top: 44px;
}

/* Left Panel - Login Form */
.login-panel {
	width: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
}

.login-panel-content {
	width: 100%;
	max-width: 500px;
}

/* Right Panel - Background Image */
.image-panel {
	width: 50%;
	background-image: url(../img/login-background.jpg), url(../img/login_wallpaper.jfif);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Login Header */
.login-header {
	text-align: center;
	margin-bottom: 40px;
}

#login #logo {
	max-width: 280px;
	height: auto;
	margin-bottom: 25px;
}

.welcome-title {
	font-size: 28px;
	font-weight: 600;
	color: #333;
	margin: 0 0 8px 0;
}

.welcome-subtitle {
	font-size: 14px;
	color: #888;
	margin: 0;
}

/* Form Styles */
.login-form {
	width: 100%;
}

.form-group {
	margin-bottom: 24px;
}

.form-group label {
	display: block;
	font-size: 13px;
	color: #666;
	margin-bottom: 8px;
	font-weight: 500;
}

.form-input {
	width: 100%;
	padding: 12px 15px;
	font-size: 14px;
	border: none;
	border-bottom: 1px solid #ddd;
	background: transparent;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
	outline: none;
}

.form-input:focus {
	border-bottom-color: #3970ca;
}

.password-wrapper {
	position: relative;
}

.password-wrapper .form-input {
	padding-right: 40px;
}

.password-wrapper .reveal {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: url(images/eye2-crossed.svg) center center no-repeat;
	background-size: 18px;
	cursor: pointer;
	opacity: 0.5;
}

.password-wrapper .reveal:hover {
	opacity: 0.8;
}

.password-wrapper .reveal.hide {
	background: url(images/eye2.svg) center center no-repeat;
	background-size: 18px;
}

/* Form Options Row */
.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.remember-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 13px;
	color: #666;
}

.remember-label input {
	margin-right: 8px;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.forgot-link {
	font-size: 13px;
	color: #3970ca;
	text-decoration: none;
}

.forgot-link:hover {
	text-decoration: underline;
}

/* Login Button */
.login-button {
	width: 100%;
	padding: 14px;
	background: #3970ca;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}

.login-button:hover {
	background: #2d5aa8;
}

/* Sign Up Link */
.signup-link {
	text-align: center;
	margin-top: 25px;
	font-size: 13px;
	color: #666;
}

.signup-link a {
	color: #3970ca;
	text-decoration: none;
	font-weight: 600;
	margin-left: 5px;
}

.signup-link a:hover {
	text-decoration: underline;
}

/* Login Footer */
.login-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #eee;
}

.mobile-button,
.language-select {
	background: #fff;
	border: 1px solid #ddd;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 12px;
	color: #666;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	min-width: 110px;
	height: 34px;
	line-height: 16px;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.language-select {
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 10px center;
	padding-right: 30px;
}

.language-select option {
	color: #666;
	background: #fff;
	text-align: left;
}

.mobile-button:hover,
.language-select:hover {
	border-color: #3970ca;
	color: #3970ca;
	background-color: #fff;
}

/* Server Select */
.server-select {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
}

/* Registration Closed */
#login #reg_closed {
	padding: 12px;
	background: #cd0a0a;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 20px;
	border-radius: 4px;
	text-align: center;
}

/* Modal Styles */
.modal {
	display: flex;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
}

.modal-content {
	background: #fff;
	padding: 40px;
	border-radius: 8px;
	max-width: 400px;
	width: 90%;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 28px;
	font-weight: 300;
	color: #999;
	cursor: pointer;
}

.modal-close:hover {
	color: #333;
}

.modal-content h2 {
	margin: 0 0 10px 0;
	font-size: 22px;
	color: #333;
}

.modal-content p {
	margin: 0 0 25px 0;
	font-size: 14px;
	color: #888;
}

.security-group .security-input-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
}

.security-group .form-input {
	flex: 1;
}

.security-code-img {
	height: 35px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* Responsive */
@media (max-width: 900px) {
	.login-panel {
		width: 100%;
	}

	.image-panel {
		display: none;
	}

	#login {
		background-image: url(../img/login-background.jpg), url(../img/login_wallpaper.jfif);
		background-size: cover;
		background-position: center center;
	}

	.login-panel {
		background: rgba(255, 255, 255, 0.95);
	}

	#login #logo {
		max-width: 220px;
	}
}

/*#################################################*/
/* LEFT TOOLBAR - Modern Floating Dock Style
/*#################################################*/

#top_panel {
	width: 56px;
	height: auto;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: auto;
	overflow: visible;
	border-radius: 16px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 8px 0;
	box-sizing: border-box;
	z-index: 1001;
}

#top_panel select {
	margin: 0;
	height: 36px;
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 0 12px;
	font-size: 11px;
	font-weight: 500;
	color: #666;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('images/arrow.svg');
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px;
	padding-right: 24px;
}

#top_panel select:hover {
	background-color: rgba(57, 112, 202, 0.08);
	color: #3970CA;
}

#top_panel select:focus {
	outline: none;
	box-shadow: none;
}

#top_panel .left-menu,
#top_panel .right-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 4px;
	list-style: none;
	float: none;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	height: auto;
	width: 100%;
}

#top_panel .right-menu {
	margin-top: auto;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	padding-top: 8px;
}

#top_panel ul {
	margin: 0;
	padding: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	height: auto;
	width: 100%;
	gap: 4px;
}

#top_panel ul li {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	border-right: none;
	border-bottom: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	margin: 0;
	padding: 0;
	height: 40px;
	width: 40px;
	min-width: 40px;
	max-width: 40px;
	border-radius: 12px;
	background: transparent;
}

#top_panel ul li:last-child {
	border-bottom: none;
}

#top_panel ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	color: #555;
	font-size: 11px;
	font-weight: 500;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	height: 40px;
	width: 40px;
	box-sizing: border-box;
	border-radius: 12px;
}

#top_panel ul li:hover {
	background: rgba(57, 112, 202, 0.1);
	transform: scale(1.05);
}

#top_panel ul li a:hover {
	color: #3970CA;
}

#top_panel ul li.select-map,
#top_panel ul li.select-language {
	display: none; /* Hide dropdowns in vertical mode */
}

#top_panel ul li.select-map select,
#top_panel ul li.select-language select {
	max-width: 110px;
	font-size: 10px;
}

#top_panel ul li.select-map:hover,
#top_panel ul li.select-language:hover {
	background: transparent;
	transform: none;
}

/* Logo/About Button - Primary Blue */
#top_panel .logo-btn {
	background: linear-gradient(135deg, #3970CA 0%, #2d5aa8 100%);
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(57, 112, 202, 0.3);
	position: relative;
	overflow: visible;
}

#top_panel .logo-btn a {
	padding: 0;
}

#top_panel .logo-btn:hover {
	background: linear-gradient(135deg, #4a82d9 0%, #3970CA 100%);
	transform: scale(1.08);
	box-shadow: 0 4px 12px rgba(57, 112, 202, 0.4);
}

#top_panel .logo-btn a:hover {
	color: #fff;
}

#top_panel .logo-popover {
	display: none;
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 10px;
	z-index: 1002;
	white-space: nowrap;
}

#top_panel .logo-btn .logo-popover img {
	display: block;
	max-height: 36px;
	width: auto;
	filter: none !important;
	opacity: 1;
}

#top_panel .logo-btn:hover .logo-popover {
	display: block;
}

/* CPanel Button - Orange Accent */
#top_panel .cpanel-btn {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	border: none;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

#top_panel .cpanel-btn:hover {
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	transform: scale(1.08);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

#top_panel .cpanel-btn a:hover {
	color: #fff;
}

/* Logout Button - Subtle Gray */
#top_panel .logout-btn {
	background: linear-gradient(135deg, #64748b 0%, #475569 100%);
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3);
}

#top_panel .logout-btn:hover {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	transform: scale(1.08);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

#top_panel .logout-btn a:hover {
	color: #fff;
}

/* Images/Icons */
#top_panel img {
	display: block;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

#top_panel ul li:hover img {
	opacity: 1;
}

#top_panel .logo-btn img,
#top_panel .cpanel-btn img,
#top_panel .logout-btn img {
	opacity: 1;
	filter: brightness(0) invert(1);
}

#top_panel .user-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#top_panel .user-btn img {
	float: none;
	margin-right: 0;
}

#top_panel .user-btn span {
	display: none; /* Hide username text in vertical mode */
}

#top_panel ul li a.active {
	background-color: rgba(57, 112, 202, 0.1);
	color: #3970CA;
}

/* Chat Message Count Badge */
#top_panel .chat-msg-count {
	font-size: 9px;
	font-weight: 600;
	line-height: 12px;
	height: 12px;
	min-width: 12px;
	background: linear-gradient(135deg, #9cc602 0%, #7da502 100%);
	color: #ffffff;
	padding: 0 3px;
	margin-left: 0;
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

#top_panel .chat_btn {
	position: relative;
}

@media (max-width: 1250px) {
	#top_panel .select-language {
		display: none;
	}
}

@media (max-width: 1150px) {
	#top_panel .user-btn span {
		display: none;
	}
}

/*#################################################*/
/* CPANEL TOP PANEL - Override for CPanel page
/*#################################################*/

#cpanel #top_panel {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	height: 52px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-radius: 0;
	border: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	padding: 8px;
}

#cpanel #top_panel .left-menu,
#cpanel #top_panel .right-menu {
	flex-direction: row;
	width: auto;
	height: 36px;
	gap: 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#cpanel #top_panel .right-menu {
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}

#cpanel #top_panel ul {
	flex-direction: row;
	width: auto;
	height: 36px;
}

#cpanel #top_panel ul li {
	width: auto;
	min-width: auto;
	max-width: none;
	height: 36px;
	padding: 0;
	border-radius: 0;
}

#cpanel #top_panel ul li:hover {
	transform: none;
}

#cpanel #top_panel ul li a {
	width: auto;
	padding: 8px 15px;
	font-size: 13px;
}

#cpanel #top_panel ul li a img {
	margin-right: 5px;
}

#cpanel #top_panel ul li a span {
	display: inline;
}

#cpanel #top_panel ul li.select-view {
	padding: 0 15px;
	font-size: 13px;
	color: #808080;
}

#cpanel #top_panel ul li.select-view select {
	margin: 0;
	height: 36px;
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 0 12px;
	font-size: 11px;
	font-weight: 500;
	color: #666;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('images/arrow.svg');
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 10px;
	padding-right: 24px;
}

#cpanel #top_panel ul li.back-btn {
	background: #3970CA;
}

#cpanel #top_panel ul li.back-btn:hover {
	background: #5581c9;
}

#cpanel #top_panel .right-menu li {
	width: auto;
	min-width: auto;
	max-width: none;
}

#cpanel #top_panel .select-language {
	padding: 5px 10px;
}

#cpanel #top_panel .select-language select {
	max-width: none;
	font-size: 13px;
}

#cpanel #top_panel .select-language {
	display: flex;
}

#cpanel #top_panel .user-btn {
	flex-direction: row;
}

#cpanel #top_panel .user-btn span {
	display: inline;
}

#cpanel #top_panel .user-btn img {
	margin-right: 5px;
}

#cpanel #top_panel .logout-btn {
	border-radius: 0;
}

#cpanel #top_panel .back-btn {
	border-radius: 6px 0 0 6px;
}

/*#################################################*/
/* LEFT PANEL - Complete Reconstruction
/*#################################################*/

#side_panel {
	width: 360px;
	position: absolute;
	left: 62px; /* 52px toolbar + 10px spacing */
	top: 10px;
	bottom: 10px;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #ffffff;
	padding-top: 0px;
	border-radius: 12px;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
	z-index: 1000;
}

/* jQuery UI tabs styling for side panel - Modern Floating Style */
#side_panel.ui-tabs {
	padding: 0;
	padding-top: 0px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

#side_panel>.ui-tabs-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 8px 10px !important;
	margin: 0;
	border: none;
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	overflow: hidden;
}

#side_panel>.ui-tabs-nav li {
	flex: 1 1 0;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#side_panel>.ui-tabs-nav li a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	width: 100% !important;
	height: 36px;
	text-align: center !important;
	padding: 0 6px !important;
	margin: 0 !important;
	color: #6b7280 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	text-decoration: none;
	transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	box-sizing: border-box;
	float: none !important;
	border-radius: 0 !important;
}

#side_panel>.ui-tabs-nav li:hover {
	background: transparent !important;
}

#side_panel>.ui-tabs-nav li a:hover {
	color: #0f172a !important;
	background: transparent !important;
}

#side_panel>.ui-tabs-nav li.ui-tabs-active {
	background: transparent !important;
	box-shadow: none;
}

#side_panel>.ui-tabs-nav li.ui-tabs-active a {
	background: transparent !important;
	color: #0f172a !important;
	border-bottom: 2px solid #3970CA !important;
	box-shadow: none;
}

/* Main tab container - jQuery UI tabs */
#side_panel>.ui-tabs-panel {
	padding: 8px;
	overflow: hidden;
	box-sizing: border-box;
	background: transparent;
}

/* All side panel tab contents - no additional padding (handled by ui-tabs-panel) */
#side_panel_objects {
	padding-top: 6px;
	overflow: hidden;
	box-sizing: border-box;
	background: transparent;
}

/* Ensure side panel tabs and object grid respect panel height */
#side_panel.ui-tabs {
	display: flex;
	flex-direction: column;
}

#side_panel > .ui-tabs-nav {
	flex: 0 0 auto;
}

#side_panel > .ui-tabs-panel {
	flex: 1 1 auto;
	min-height: 0;
}

#side_panel_objects {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

#side_panel_objects_object_list {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 340px;
	box-sizing: border-box;
	overflow: hidden;
}

#gbox_side_panel_objects_object_list_grid,
#gview_side_panel_objects_object_list_grid {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
	padding: 4px;
	max-width: 340px;
}

/* Island look for Events + Places grids (match Object List) */
#gbox_side_panel_events_event_list_grid,
#gbox_side_panel_places_marker_list_grid,
#gbox_side_panel_places_route_list_grid,
#gbox_side_panel_places_zone_list_grid {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100% !important;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #f8fafc;
	overflow: visible;
	padding: 4px;
}

#gview_side_panel_events_event_list_grid,
#gview_side_panel_places_marker_list_grid,
#gview_side_panel_places_route_list_grid,
#gview_side_panel_places_zone_list_grid {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100% !important;
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-titlebar,
#gview_side_panel_objects_object_list_grid .ui-jqgrid-hdiv,
#gview_side_panel_objects_object_list_grid .ui-jqgrid-pager {
	flex: 0 0 auto;
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-bdiv {
	flex: 1 1 0%;
	min-height: 0;
	height: auto !important;
	overflow-y: scroll;
	overflow-x: hidden;
	-ms-overflow-style: none; /* IE/Edge legacy */
	scrollbar-width: none; /* Firefox */
}

#gview_side_panel_objects_object_list_grid .ui-jqgrid-bdiv::-webkit-scrollbar { display: none; }

/* Invisible spacer to ensure bdiv remains scrollable/consistent */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-bdiv::after {
	content: '';
	display: block;
	height: 1px;
	width: 100%;
}

/* Ensure rows/columns fill full available width - use auto layout for proper sizing */
#gview_side_panel_objects_object_list_grid .ui-jqgrid-btable {
	table-layout: auto !important;
	width: 100% !important;
}

/* ========================================
   EVENTS PANEL: flex layout to fill height
   ======================================== */
#side_panel_events {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding-top: 14px;
	overflow: hidden;
	box-sizing: border-box;
	background: #ffffff;
}

#side_panel_events_event_list {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#gview_side_panel_events_event_list_grid .ui-jqgrid-titlebar,
#gview_side_panel_events_event_list_grid .ui-jqgrid-hdiv,
#gview_side_panel_events_event_list_grid .ui-jqgrid-pager {
	flex: 0 0 auto;
}

/* Events pager styling inside island */
#gview_side_panel_events_event_list_grid .ui-jqgrid-pager {
	margin: 0 !important;
	padding: 4px 8px !important;
	background: #f8fafc;
	width: 100% !important;
	box-sizing: border-box;
	overflow: visible;
}

#gview_side_panel_events_event_list_grid .ui-jqgrid-pager .ui-pg-table {
	width: 100%;
	table-layout: fixed;
}

/* Consistent pager button styling for Events and Places */
#gview_side_panel_events_event_list_grid .ui-jqgrid-pager .ui-pg-button,
#gview_side_panel_places_marker_list_grid .ui-jqgrid-pager .ui-pg-button,
#gview_side_panel_places_route_list_grid .ui-jqgrid-pager .ui-pg-button,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-pager .ui-pg-button {
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 6px !important;
}

#gview_side_panel_events_event_list_grid .ui-jqgrid-pager .ui-pg-button:hover,
#gview_side_panel_places_marker_list_grid .ui-jqgrid-pager .ui-pg-button:hover,
#gview_side_panel_places_route_list_grid .ui-jqgrid-pager .ui-pg-button:hover,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-pager .ui-pg-button:hover {
	background: #f0f4f8 !important;
}

#gview_side_panel_events_event_list_grid .ui-jqgrid-bdiv {
	flex: 1 1 0%;
	min-height: 0;
	height: auto !important;
	overflow-y: auto;
	overflow-x: hidden;
}

/* ========================================
   PLACES PANEL: flex layout to fill height
   ======================================== */
#side_panel_places {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
	background: #ffffff;
}

#side_panel_places.ui-tabs {
	display: flex;
	flex-direction: column;
}

#side_panel_places > .ui-tabs-nav {
	flex: 0 0 auto;
}

#side_panel_places > .ui-tabs-panel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#side_panel_places_markers,
#side_panel_places_routes,
#side_panel_places_zones {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 14px 0 0 0;
	overflow: hidden;
	box-sizing: border-box;
	background: #ffffff;
}

#side_panel_places_marker_list,
#side_panel_places_route_list,
#side_panel_places_zone_list {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#gview_side_panel_places_marker_list_grid .ui-jqgrid-titlebar,
#gview_side_panel_places_marker_list_grid .ui-jqgrid-hdiv,
#gview_side_panel_places_marker_list_grid .ui-jqgrid-pager,
#gview_side_panel_places_route_list_grid .ui-jqgrid-titlebar,
#gview_side_panel_places_route_list_grid .ui-jqgrid-hdiv,
#gview_side_panel_places_route_list_grid .ui-jqgrid-pager,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-titlebar,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-hdiv,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-pager {
	flex: 0 0 auto;
}

/* Places pager styling inside island */
#gview_side_panel_places_marker_list_grid .ui-jqgrid-pager,
#gview_side_panel_places_route_list_grid .ui-jqgrid-pager,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-pager {
	margin: 0 !important;
	padding: 4px 8px !important;
	background: #f8fafc;
	width: 100% !important;
	box-sizing: border-box;
	overflow: visible;
}

#gview_side_panel_places_marker_list_grid .ui-jqgrid-pager .ui-pg-table,
#gview_side_panel_places_route_list_grid .ui-jqgrid-pager .ui-pg-table,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-pager .ui-pg-table {
	width: 100%;
	table-layout: fixed;
}

#gview_side_panel_places_marker_list_grid .ui-jqgrid-bdiv,
#gview_side_panel_places_route_list_grid .ui-jqgrid-bdiv,
#gview_side_panel_places_zone_list_grid .ui-jqgrid-bdiv {
	flex: 1 1 0%;
	min-height: 0;
	height: auto !important;
	overflow-y: auto;
	overflow-x: hidden;
}

#side_panel_history_reports {
	padding-top: 14px;
	overflow: hidden;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Force all jqGrid containers in side panel to fill available width */
#side_panel .ui-jqgrid,
#side_panel .ui-jqgrid-view,
#side_panel .ui-jqgrid-hdiv,
#side_panel .ui-jqgrid-bdiv,
#side_panel .ui-jqgrid-pager,
#side_panel div[id^="gbox_"],
#side_panel div[id^="gview_"] {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Force the actual tables to fill width */
#side_panel .ui-jqgrid-htable,
#side_panel .ui-jqgrid-btable,
#side_panel .ui-jqgrid-pager .ui-pg-table {
	width: 100% !important;
}

/* Status filter bar */
#side_panel_objects .objects-status-filter {
	width: 100%;
	box-sizing: border-box;
}

#side_panel_places .ui-tabs-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	border: none;
	margin: 0 -8px 6px;
	padding: 8px 10px;
	background: #ffffff;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	width: calc(100% + 16px);
	box-sizing: border-box;
}

#side_panel_places .ui-tabs-nav li {
	flex: 1 1 0;
	margin: 0 !important;
	border: none !important;
	border-right: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#side_panel_places .ui-tabs-nav li:last-child {
	border-right: none !important;
}

#side_panel_places .ui-tabs-nav li a {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	width: 100% !important;
	height: 36px;
	text-align: center !important;
	padding: 0 !important;
	margin: 0 !important;
	color: #6b7280 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	white-space: nowrap;
	background: transparent !important;
	transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	float: none !important;
	border-radius: 0 !important;
	border-bottom: 2px solid transparent !important;
	box-sizing: border-box;
}

.places-tab__label {
	font-size: 11px;
	line-height: 1.2;
	font-weight: 600;
}

.places-tab__badge {
	min-width: 16px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(100, 116, 139, 0.15);
	color: #475569;
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	display: inline-block;
	margin-top: 2px;
}

#side_panel_places .ui-tabs-nav li.ui-tabs-active .places-tab__badge {
	background: rgba(57, 112, 202, 0.12);
	color: #1f2937;
}

#side_panel_places .ui-tabs-nav li:hover {
	background: transparent !important;
	transform: none;
}

#side_panel_places .ui-tabs-nav li a:hover {
	color: #0f172a !important;
	background: transparent !important;
}

#side_panel_places .ui-tabs-nav li.ui-tabs-active {
	background: transparent !important;
	box-shadow: none;
}

#side_panel_places .ui-tabs-nav li.ui-tabs-active a {
	color: #0f172a !important;
	background: transparent !important;
	border-bottom: 2px solid #3970CA !important;
	box-shadow: none;
}

.ui-menu {
	position: absolute;
	width: 185px;
	z-index: 99999999;
}

/* Map Context Menu */
#map_context_menu {
	position: absolute;
	display: none;
	background: #ffffff;
	-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	padding: 4px 0;
	z-index: 99999999;
	list-style: none;
	margin: 0;
	min-width: 130px;
	border: 1px solid #e0e0e0;
}

#map_context_menu li {
	padding: 0;
	margin: 0;
	list-style: none;
}

#map_context_menu li a {
	display: flex;
	align-items: center;
	padding: 5px 10px;
	color: #333;
	text-decoration: none;
	font-size: 12px;
	transition: background-color 0.15s;
}

#map_context_menu li a:hover {
	background-color: #f5f5f5;
}

#map_context_menu li a img {
	width: 14px;
	height: 14px;
	margin-right: 6px;
	opacity: 0.7;
}

#map_context_menu li.menu-separator {
	height: 1px;
	background-color: #e0e0e0;
	margin: 4px 0;
}

#map_context_menu .first-item {
	border-top: 3px solid #3970ca;
	border-radius: 4px 4px 0 0;
}

#map_context_menu .context-menu-header {
	padding: 8px 16px;
	background: #f8f8f8;
	border-bottom: 1px solid #e0e0e0;
	font-size: 12px;
	color: #666;
}

#side_panel_objects_menu {
	background: #ffffff;
	-webkit-box-shadow: 0 0 15px 0 #9b9b9b;
	box-shadow: 0 0 15px 0 #9b9b9b;
}

#side_panel_objects_menu ul {
	background: #ffffff;
	-webkit-box-shadow: 3px 0 5px 0 #9b9b9b;
	box-shadow: 3px 0 5px 0 #9b9b9b;
}

#side_panel_objects_menu .ui-menu-icon {
	background: url(images/arrow.svg) left center no-repeat;
	background-size: 8px 12px;
}

#side_panel_objects_menu ul li a {
	background: url(images/arrow.svg) 10px center no-repeat;
	background-size: 8px 12px;
}

#side_panel_objects_menu li {
	border-top: 1px solid #f5f5f5;
}

#side_panel_objects_menu li a {
	background-repeat: no-repeat;
	background-position: 10px center;
	padding: 5px 15px 5px 28px;
	color: #444444;
}

#side_panel_objects_menu li a:hover {
	background-color: #f5f5f5;
}

#side_panel_objects_menu li:first-child {
	border: none;
}

#side_panel_objects_menu .first-item {
	border-top: 3px solid #3970ca;
}

#places_marker_icon_tabs {
	margin-left: -15px;
	margin-right: -15px;
	width: 324px;
}

#places_marker_icon_default_tab,
#places_marker_icon_custom_tab {
	padding-bottom: 0px;
}

#places_marker_icon_default_list {
	position: relative;
	height: 245px;
	overflow-y: scroll;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 5px;
	-webkit-box-sizing: border-box;
	‌​ -moz-box-sizing: border-box;
	box-sizing: border-box;
}

#places_marker_icon_custom_list {
	position: relative;
	height: 211px;
	overflow-y: scroll;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 5px;
	-webkit-box-sizing: border-box;
	‌​ -moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*#################################################*/
/* BOTTOM PANEL
/*#################################################*/

#bottom_panel {
	display: none;
	position: absolute;
	bottom: 10px;
	/* Position controlled by JS - 10px from left panel */
	left: 446px;
	right: 10px;
	background-color: #ffffff;
	border-radius: 12px;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
	overflow: hidden;
}

/* Bottom Panel Tabs - Match Widgets Style */
#bottom_panel_tabs {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent !important;
}

/* Reset all jQuery UI backgrounds inside bottom panel */
#bottom_panel,
#bottom_panel .ui-widget,
#bottom_panel .ui-widget-content,
#bottom_panel .ui-tabs,
#bottom_panel .ui-tabs-panel,
#bottom_panel_tabs,
#bottom_panel_tabs .ui-widget,
#bottom_panel_tabs .ui-widget-content {
	background: transparent !important;
}

/* Re-apply the white background only to the main container */
#bottom_panel {
	background-color: #ffffff !important;
}

#bottom_panel_tabs>ul.ui-tabs-nav,
#bottom_panel_tabs .ui-tabs-nav {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 6px;
	margin: 0 0 8px 0 !important;
	padding: 8px 8px 0 8px !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	list-style: none;
	flex-shrink: 0;
	overflow: visible;
}

#bottom_panel_tabs>ul.ui-tabs-nav>li,
#bottom_panel_tabs .ui-tabs-nav>li,
#bottom_panel_tabs .ui-tabs-nav>li.ui-corner-top,
#bottom_panel_tabs .ui-tabs-nav>li.ui-state-default {
	flex: 0 0 auto;
	min-width: 72px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	background: transparent !important;
}

/* Allow pill rounding for jQuery UI tab elements */
#bottom_panel_tabs .ui-tabs-nav .ui-corner-all,
#bottom_panel_tabs .ui-tabs-nav .ui-corner-top,
#bottom_panel_tabs .ui-tabs-nav .ui-corner-left,
#bottom_panel_tabs .ui-tabs-nav .ui-corner-right,
#bottom_panel_tabs .ui-tabs-nav .ui-corner-tl,
#bottom_panel_tabs .ui-tabs-nav .ui-corner-tr {
	border-radius: 999px !important;
}

#bottom_panel_tabs>ul.ui-tabs-nav>li>a,
#bottom_panel_tabs .ui-tabs-nav>li>a,
#bottom_panel_tabs .ui-tabs-nav>li.ui-corner-top>a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 8px 12px !important;
	border: none !important;
	border-radius: 999px !important;
	background: rgba(148, 163, 184, 0.16) !important;
	color: #334155 !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#bottom_panel_tabs>ul.ui-tabs-nav>li>a:hover,
#bottom_panel_tabs>ul.ui-tabs-nav>li>a:focus,
#bottom_panel_tabs .ui-tabs-nav>li>a:hover,
#bottom_panel_tabs .ui-tabs-nav>li>a:focus {
	background: rgba(2, 132, 199, 0.14) !important;
	color: #1d7fb9 !important;
	outline: none;
}

#bottom_panel_tabs>ul.ui-tabs-nav>li.ui-tabs-active,
#bottom_panel_tabs>ul.ui-tabs-nav>li.ui-state-active,
#bottom_panel_tabs .ui-tabs-nav>li.ui-tabs-active,
#bottom_panel_tabs .ui-tabs-nav>li.ui-state-active {
	background: transparent !important;
	border: none !important;
}

#bottom_panel_tabs>ul.ui-tabs-nav>li.ui-tabs-active>a,
#bottom_panel_tabs>ul.ui-tabs-nav>li.ui-state-active>a,
#bottom_panel_tabs .ui-tabs-nav>li.ui-tabs-active>a,
#bottom_panel_tabs .ui-tabs-nav>li.ui-state-active>a {
	background: rgba(74, 159, 212, 0.22) !important;
	color: #1d7fb9 !important;
	font-weight: 700;
}

#bottom_panel_tabs>ul.ui-tabs-nav>li.ui-tabs-active>a:hover,
#bottom_panel_tabs>ul.ui-tabs-nav>li.ui-state-active>a:hover,
#bottom_panel_tabs .ui-tabs-nav>li.ui-tabs-active>a:hover,
#bottom_panel_tabs .ui-tabs-nav>li.ui-state-active>a:hover {
	background: rgba(74, 159, 212, 0.28) !important;
	color: #166b98 !important;
}

/* Tab content panels */
#bottom_panel_tabs>.ui-tabs-panel {
	flex: 1;
	overflow: hidden;
	padding: 0 !important;
	border: none !important;
}

#bottom_panel_tabs .ui-tabs-panel {
	border: none !important;
	padding: 0 !important;
}

#bottom_panel_data,
#bottom_panel_graph,
#bottom_panel_msg {
	padding: 0 20px;
}

#bottom_panel_graph_data_control {
	display: flex;
	align-items: center;
	float: left;
	margin-left: 18px;
	gap: 8px;
	height: 28px;
}

#bottom_panel_data,
#bottom_panel_graph,
#bottom_panel_msg {
	background: transparent;
}

/* Data panel - horizontal scroll, columns based on height */
#bottom_panel_data {
	overflow-x: auto;
	overflow-y: hidden;
	height: 100%;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
}

#bottom_panel_data_container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	height: 100%;
	width: max-content;
	min-width: 100%;
	box-sizing: border-box;
	border-top: none;
}

.data-item {
	display: flex;
	align-items: center;
	padding: 5px 15px;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	height: 30px;
	width: 280px;
	box-sizing: border-box;
	flex-shrink: 0;
	background: transparent;
}

.data-item-icon {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	flex-shrink: 0;
	color: #888;
	display: flex;
	align-items: center;
	justify-content: center;
}

.data-item-icon svg,
.data-item-icon .data-icon-svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.data-item-label {
	font-size: 12px;
	color: #666;
	white-space: nowrap;
	flex-shrink: 0;
}

.data-item-value {
	font-size: 12px;
	color: #333;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
	margin-left: auto;
	padding-left: 10px;
}

.data-item-value a {
	color: #1976d2;
	text-decoration: none;
}

.data-item-value a:hover {
	text-decoration: underline;
}

#bottom_panel_graph_label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	white-space: nowrap;
	flex-shrink: 0;
}

#bottom_panel_graph_label:empty {
	display: none;
}

.graph-value-box {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	height: 22px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
}

.graph-timestamp {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	height: 22px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 11px;
	color: #555;
	white-space: nowrap;
}

#bottom_panel_graph_view_control {
	margin-top: 4px;
}

#bottom_panel_graph_plot {
	position: relative;
	clear: both;
	height: 100%;
	width: calc(100% - 18px);
	margin-left: 18px;
	margin-bottom: 8px;
	box-sizing: border-box;
}

/* Desktop in-graph legend (match mobile look) */
#bottom_panel_graph_plot .legend {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	bottom: auto !important;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 11px;
	z-index: 50;
	box-shadow: 0 1px 6px rgba(0,0,0,0.12);
	max-width: 140px;
	pointer-events: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-sizing: border-box;
}

#bottom_panel_graph_plot .legend table {
	position: static !important;
	border-spacing: 0;
	border-collapse: collapse;
	color: #333;
}

#bottom_panel_graph_plot .legend td {
	padding: 0;
	border: 0;
}

/* Hide Flot's default color box; we render our own via labelFormatter */
#bottom_panel_graph_plot .legend .legendColorBox {
	display: none;
}

#bottom_panel_graph_plot .legend .legendLabel {
	padding: 0 !important;
}

#bottom_panel_graph_plot .legend .graph-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

#bottom_panel_graph_plot .legend tr:last-child .graph-legend-item {
	margin-bottom: 0;
}

#bottom_panel_graph_plot .legend .graph-legend-color {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
}

#bottom_panel_graph_plot .legend .graph-legend-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333;
	font-weight: 600;
}

/* Hide Flot grid lines */
#bottom_panel_graph_plot .flot-x-axis .flot-tick-label,
#bottom_panel_graph_plot .flot-y-axis .flot-tick-label {
	/* Keep labels visible */
}

#bottom_panel_graph_plot .gridlines {
	display: none !important;
}

.graph-controls {
	height: 24px;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.graph-control-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.graph-control-btn:hover {
	background: #f0f0f0;
	border-color: #aaa;
}

.graph-control-btn:active {
	background: #e3f2fd;
	border-color: #2196F3;
}

/* Playback active state (like mobile): play/pause = blue, stop = red */
.graph-control-btn.is-active {
	background: #2196F3;
	border-color: #1E88E5;
	box-shadow: 0 2px 10px rgba(33, 150, 243, 0.25);
}

.graph-control-btn.is-active svg {
	fill: #fff;
	stroke: #fff;
}

.graph-control-btn.is-active.is-active-stop {
	background: #E53935;
	border-color: #D32F2F;
	box-shadow: 0 2px 10px rgba(229, 57, 53, 0.25);
}

.graph-control-btn svg {
	width: 12px;
	height: 12px;
	fill: #666;
	stroke: #666;
}

.graph-control-btn:hover svg {
	fill: #333;
	stroke: #333;
}

/* Speed selector dropdown */
.graph-speed-select {
	height: 24px;
	min-height: 24px;
	padding: 0 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	font-size: 11px;
	cursor: pointer;
	outline: none;
	box-sizing: border-box;
}

.graph-speed-select:hover {
	border-color: #aaa;
}

.graph-speed-select:focus {
	border-color: #2196F3;
}

#bottom_panel_graph_view_control {
	float: right;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	margin-right: 15px;
	flex-wrap: nowrap;
}

/* Graph Status Coloring Toggle */
.graph-toggle-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.graph-toggle-label:hover {
	background: #f0f0f0;
	border-color: #aaa;
}

.graph-toggle-label input[type="checkbox"] {
	display: none;
}

.graph-toggle-label .graph-toggle-icon {
	width: 14px;
	height: 14px;
	opacity: 0.5;
	transition: all 0.2s ease;
	stroke: #666;
}

.graph-toggle-label:hover .graph-toggle-icon {
	stroke: #333;
}

.graph-toggle-label input[type="checkbox"]:checked + .graph-toggle-icon {
	opacity: 1;
	stroke: #2196F3;
}

.graph-toggle-label.active {
	background: #e3f2fd;
	border-color: #2196F3;
}

/* Graph Status Display - inline after controls */
#graph_status_display {
	display: inline-flex;
	align-items: center;
	margin-left: 12px;
	padding: 3px 10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 12px;
	color: #333;
	min-height: 18px;
	vertical-align: middle;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#graph_status_display:empty {
	display: none;
}

#graph_status_display .status-color-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 6px;
	border: 1px solid rgba(0,0,0,0.1);
}

#graph_status_display .status-text {
	font-weight: 500;
	margin-right: 6px;
	color: #333;
}

#graph_status_display .status-duration {
	color: #666;
	font-size: 11px;
}

/*#################################################*/
/* DRAGBARS
/*#################################################*/

#side_panel_objects_dragbar,
#side_panel_events_dragbar {
	margin: 3px -11px;
	height: 5px;
	background: #F6F6F6;
	cursor: row-resize;
}

#side_panel_objects_dragbar:hover,
#side_panel_events_dragbar:hover {
	background-color: #dddddd;
}

/*#################################################*/
/* HIDE PANELS
/*#################################################*/

/* Hide side panel toggle element - now using island style */
a[onclick*="showhideLeftPanel"],
a:has(#hide_side_panel),
#hide_side_panel {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	pointer-events: none !important;
}

#hide_side_panel:hover {
	display: none !important;
}

#hide_bottom_panel {
	position: absolute;
	bottom: 0px;
	left: 380px;
	right: 0px;
	height: 20px;
	background: transparent;
	border: none;
	cursor: row-resize;
	z-index: 1001;
}

#hide_bottom_panel::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 5px;
	background: #ccc;
	border-radius: 3px;
	transition: background-color 0.15s ease;
}

#hide_bottom_panel:hover::before {
	background-color: #999;
}

/*#################################################*/
/* SETTINGS
/*#################################################*/

#dialog_settings,
#dialog_settings_object_edit_select_icon {
	padding: 0px;
}

#dialog_settings_object_edit,
#dialog_settings_event_properties {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

#settings_main {
	height: 511px;
	margin-top: 0px;
	border-top: 0px;
	overflow-y: auto;
}

#settings_main>.ui-tabs-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	background: #f5f5f5;
	margin: 0;
	padding: 5px 0 0 5px !important;
	border-bottom: 1px solid #ddd;
}

#settings_object {
	height: 451px;
	border-top: 0px;
}

#settings_event {
	height: 379px;
	border-top: 0px;
}

#dialog_settings .info {
	padding-bottom: 15px;
	height: 35px;
	display: table-cell;
	vertical-align: middle;
}

#settings_main_objects,
#settings_main_subaccounts {
	/*padding: 0 10px 10px 10px;*/
}

#settings_object_edit_select_icon_default_list {
	position: relative;
	height: 265px;
	overflow-y: scroll;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 5px;
	-webkit-box-sizing: border-box;
	‌​ -moz-box-sizing: border-box;
	box-sizing: border-box;
}

#settings_object_edit_select_icon_custom_list {
	position: relative;
	height: 231px;
	overflow-y: scroll;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 5px;
	-webkit-box-sizing: border-box;
	‌​ -moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*#################################################*/
/* MAP
/*#################################################*/

#map {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

/* Map Tools Widget - Modern Floating Dock Style */
/* Position: 10px below map_layers_widget (will be dynamically positioned by JS) */
.map-tools-widget {
	position: absolute;
	top: 70px;
	left: auto;
	right: 10px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 6px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Map Layers Widget - Modern Floating Dock Style */
.map-layers-widget {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 6px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.map-layers-widget a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 10px;
	margin: 0;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

.map-layers-widget a:hover {
	transform: scale(1.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Map Layer Icon */
.icon-map-layer {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>');
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #28a745;
}

/* Map Layer Dropdown */
.widget-map-layer-dropdown {
	position: absolute;
	right: calc(100% + 10px);
	top: calc(100% - 42px);
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	box-shadow: none;
	padding: 4px;
	min-width: 140px;
	z-index: 10050;
	display: none;
	overflow: hidden;
}

.widget-map-layer-dropdown.visible {
	display: block;
}

.widget-map-layer-dropdown a {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	color: #333 !important;
	text-decoration: none !important;
	font-size: 12px !important;
	font-weight: normal !important;
	line-height: 1.2 !important;
	border: 1px solid #eee !important;
	border-radius: 12px !important;
	background: #fff !important;
	background-image: none !important;
	white-space: nowrap !important;
	text-align: left !important;
	box-sizing: border-box !important;
	margin-bottom: 4px !important;
}

.widget-map-layer-dropdown a:last-child {
	margin-bottom: 0 !important;
}

.widget-map-layer-dropdown a:hover {
	background: #f5f5f5 !important;
}

.widget-map-layer-dropdown a.active {
	background: #3970ca !important;
	color: #fff !important;
}

/* Map Search Widget - Show Point, Address Search */
.map-search-widget {
	position: absolute;
	top: 70px;
	right: 10px;
	background: #fff;
	padding: 4px; /* match .leaflet-bar padding */
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	display: flex;
	flex-direction: row;
	gap: 4px;
}

.map-tools-widget a,
.map-search-widget a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: transparent;
	border: none;
	border-radius: 10px;
	margin: 0;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	text-decoration: none;
}

.map-tools-widget a:last-child,
.map-search-widget a:last-child {
	margin-bottom: 0;
}

.map-search-widget a {
	margin-bottom: 0;
	margin-right: 0;
}

.map-tools-widget a img,
.map-search-widget a img {
	width: calc(16px * var(--gs-map-icon-scale, 1));
	height: calc(16px * var(--gs-map-icon-scale, 1));
	display: block;
}

/* Slightly larger icon like Leaflet controls */
.map-tools-widget a {
	--gs-map-icon-scale: 1.25;
}

.map-tools-widget a:hover,
.map-search-widget a:hover {
	background-color: rgba(57, 112, 202, 0.1);
	transform: scale(1.08);
}

.map-tools-widget a.active,
.map-search-widget a.active {
	background: linear-gradient(135deg, #3970CA 0%, #2d5aa8 100%);
	box-shadow: 0 2px 8px rgba(57, 112, 202, 0.3);
}

.map-tools-widget a.active img,
.map-search-widget a.active img {
	filter: brightness(0) invert(1);
}

.history-view-control {
	display: none;
	position: absolute;
	/* Position controlled by JS - 10px from left panel, 10px from top panel */
	top: 10px;
	left: 445px;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 6px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	font-size: 12px;
	color: #808080;
}

.history-view-control-buttons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.history-view-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	background-color: transparent;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 1;
	--gs-map-icon-scale: 1.25;
}

.history-view-btn img {
	width: calc(16px * var(--gs-map-icon-scale, 1));
	height: calc(16px * var(--gs-map-icon-scale, 1));
	display: block;
}

.history-view-btn:hover {
	background-color: rgba(57, 112, 202, 0.1);
	transform: scale(1.08);
}

.history-view-btn.active {
	background: linear-gradient(135deg, #3970CA 0%, #2d5aa8 100%);
	box-shadow: 0 2px 8px rgba(57, 112, 202, 0.3);
	opacity: 1;
}

.history-view-btn.active img {
	filter: brightness(0) invert(1);
}

.history-view-btn-close {
	margin-left: 3px;
	opacity: 0.7;
}

.history-view-btn-close:hover {
	background-color: #ff4444;
	opacity: 1;
}

.history-view-btn-close:hover img {
	filter: brightness(0) invert(1);
}

#history_view_control .button {
	width: 14px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
}

/*#################################################*/
/* FOLLOW
/*#################################################*/

#map_follow {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

#side_panel_follow {
	display: none;
	position: absolute;
	top: 75px;
	bottom: 0px;
	left: 0px;
	width: 280px;
	background-color: #ffffff;
	opacity: 0.8;
}

@media (min-width: 640px) {
	#side_panel_follow {
		display: none;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		width: 280px;
		background-color: #ffffff;
		opacity: 1;
	}
}

.object-follow-control {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #ffffff;
	padding: 2px 5px 1px 5px;
	font-size: 12px;
	color: #808080;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

/*#################################################*/
/* LOGBOOK
/*#################################################*/

/*#################################################*/
/* OBJECT CONTROL
/*#################################################*/

#dialog_cmd {
	padding: 0px;
}

/*#################################################*/
/* CHAT
/*#################################################*/

#dialog_chat {
	padding-bottom: 0;
	overflow: hidden;
}

.chat-msg-block {
	position: absolute;
	left: 252px;
	bottom: 15px;
	right: 15px;
	height: 24px;
}

.text-input {
	margin-right: 81px;
}

.send-btn {
	position: absolute;
	right: 0;
	top: 0;
}

.chat-msgs-block {
	position: absolute;
	left: 252px;
	top: 15px;
	bottom: 49px;
	right: 15px;
}

#chat_msgs {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	z-index: 9;
}

#chat_msgs_dt {
	font-size: 11px;
	display: none;
	position: relative;
	text-align: center;
	margin: 1px 1px 1px 1px;
	padding: 1px;
	z-index: 10;
	background: #eeeeee;
	opacity: 0.7;
}

.chat-msg-container {
	width: 100%;
}

.chat-msg-status {
	font-size: 12px;
	float: right;
	clear: both;
	margin: 3px;
	max-width: 60%;
	color: #bbbbbb;
}

.chat-msg-server {
	text-align: left;
	float: right;
	clear: both;
	background: #DFE8F7;
	margin: 3px;
	padding: 3px 10px;
	max-width: 60%;
	border-radius: 2px;
	word-wrap: break-word;
}

.chat-msg-client {
	text-align: left;
	float: left;
	clear: both;
	background: #F5F5F5;
	margin: 3px;
	padding: 3px 10px;
	max-width: 60%;
	border-radius: 2px;
	word-wrap: break-word;
}

.chat-msg-dt-server {
	text-align: right;
	font-size: 10px;
	color: #999999;
}

.chat-msg-dt-client {
	text-align: left;
	font-size: 10px;
	color: #999999;
}

/*#################################################*/
/* IMAGE GALLERY
/*#################################################*/

#dialog_image_gallery {
	padding-bottom: 0;
	overflow: hidden;
}

#image_gallery_img {
	width: 640px;
	height: 480px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	text-align: center;
}

#image_gallery_img_data {
	background: #f5f5f5;
	border-top: 1px solid #dddddd;
	height: 27px;
	width: 657px;
	margin-top: 5px;
	margin-right: -15px;
}

#image_gallery_img_data_address {
	white-space: nowrap;
}

#dialog_image_gallery .img-controls {
	width: 320px;
}

/*#################################################*/
/* HISTORY AND REPORTS
/*#################################################*/

.history-controls {
	margin: 5px 0;
}

#reports_tabs .ui-tabs-nav {
	border: 0px;
	padding: 2px;
}

#reports_tabs .ui-tabs-nav li {
	border: 0px;
}

#reports_tabs .ui-tabs-nav li a {
	padding: 2px 8px 1px;
}

#reports_tabs .ui-tabs-nav li.ui-tabs-active a {
	padding: 2px 8px 1px;
}

#reports_tabs .ui-tabs-panel {
	padding: 0px;
	padding-top: 3px;
}

/*#################################################*/
/* INFORMATION AND MESSAGES
/*#################################################*/

.subinfo {
	color: #949494;
	line-height: 12px;
}

/*#################################################*/
/* DIALOG CONTROLS AND TABS
/*#################################################*/

.controls-block {
	margin: -15px -15px 10px -15px;
	padding: 4px 15px 6px;
	background: #f5f5f5;
	border-bottom: 1px solid #dddddd;
	height: 20px;
}

#settings_main_object_list,
#settings_main_object_group_list,
#settings_main_object_driver_list,
#settings_main_object_passenger_list,
#settings_main_object_trailer_list,
#settings_main_objects_groups_drivers .ui-tabs-nav {
	margin: 0 -15px;
}

#settings_main_sms .controls,
#settings_main_user_interface .controls,
#settings_main_my_account .controls {
	position: absolute;
	right: 15px;
	top: 4px;
}

#settings_main_user_interface {
	height: 450px;
}

/*#################################################*/
/* CPANEL
/*#################################################*/

#cpanel h1.title {
	margin: 0;
	color: #3970ca;
	display: table;
	float: left;
}

.version {
	font-size: 10px;
	color: #808080;
}

#cpanel_manage_server .cpanel-title {
	margin-bottom: 12px;
}

#cpanel h1.title span {
	color: #808080;
	font-weight: normal;
	font-size: 22px;
}

body#cpanel {
	background: #f1f1f1;
}

#cpanel_user_list,
#cpanel_object_list,
#cpanel_unused_object_list,
#cpanel_manage_server {
	margin: 8px;
	padding: 8px;
	background: #ffffff;
	border-top: 3px solid #3970ca;
	-webkit-box-shadow: 0 0 15px 0 #c6c6c6;
	box-shadow: 0 0 15px 0 #c6c6c6;
	border-radius: 8px;
}

#dialog_user_edit_tabs {
	height: 555px;
}

#dialog_user_edit {
	padding: 0px;
}

#cpanel .inputbox-search {
	width: 300px;
	height: 28px;
	margin-left: 3px;
}

#cpanel #top_panel {
	-webkit-box-shadow: 0 0 15px 0 #c6c6c6;
	box-shadow: 0 0 15px 0 #c6c6c6;
}

#cpanel #manage_server_tabs {
	position: relative;
}

#cpanel .ms-save-container {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 100;
}

#cpanel #dialog_user_edit_account .controls,
#cpanel #dialog_user_edit_contact_info .controls {
	position: absolute;
	right: 15px;
	top: 4px;
}

#cpanel #cpanel_manage_server .ui-tabs-nav {
	background: #f5f5f5;
	padding: 10px 8px;
	border-bottom: none;
	margin: 0 -8px;
}

#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
	background-color: #444444;
	color: #ffffff;
	padding: 5px 15px;
	border-radius: 6px;
}

#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li a {
	padding: 5px 15px;
	background: #ffffff;
	margin-right: 5px;
	color: #808080;
	font-size: 12px;
	border-radius: 6px;
}

#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li {
	border: none;
	border-radius: 6px;
	overflow: hidden;
}

.cp-server a {
	background-image: url(images/close.svg);
	background-repeat: no-repeat;
	background-position: 10px center;
}

#cpanel_manage_server {
	position: absolute;
	top: 60px;
	bottom: 8px;
	right: 8px;
	left: 8px;
	margin: 0;
	overflow: hidden;
}

.cpanel-tabs-content {
	position: absolute;
	top: 50px;
	bottom: 45px;
	right: 0px;
	left: 0px;
	overflow-y: auto;
	margin-left: -8px;
}

/*#################################################*/
/* CPANEL TOP PANEL
/*#################################################*/

#top_panel .select-view,
#top_panel .select-language {
	padding: 5px 10px;
}

#top_panel li.select-view:hover,
#top_panel li.select-language:hover {
	background: none;
}

#top_panel .back-btn {
	background: #3970ca;
}

#top_panel .back-btn:hover {
	background: #5581c9;
}

#top_panel .user-btn img,
#top_panel .user-list-btn img,
#top_panel .manage-server-btn img,
#top_panel .object-list-btn img,
#top_panel .unused-object-list-btn img {
	float: left;
	margin-right: 5px;
}

@media (max-width: 1150px) {
	#top_panel .select-language {
		display: none;
	}
}

@media (max-width: 1000px) {
	#top_panel .user-btn {
		display: none;
	}
}

/*#################################################*/
/* IGNITION STATUS INDICATOR - Engine Column
/*#################################################*/

/* Engine column styling */
#side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_engine"],
#side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_engine"] {
	text-align: center;
	padding: 0 2px;
}

/* Connection column styling */
#side_panel_objects_object_list_grid th[id="side_panel_objects_object_list_grid_connection"],
#side_panel_objects_object_list_grid td[aria-describedby="side_panel_objects_object_list_grid_connection"] {
	text-align: center;
	padding: 0 2px;
}

/* Ignition indicator icon in engine column */
.ignition-indicator,
#side_panel_objects_object_list_grid span[id^="object_engine_"] img {
	display: inline-block;
	vertical-align: middle;
	width: 16px !important;
	height: 16px !important;
}

.ignition-indicator--on {
	/* ON state styling */
}

.ignition-indicator--off {
	/* OFF state styling */
}

/*#################################################*/
/*#################################################*/
/* CHECKBOX DROPDOWN                               */
/*#################################################*/
.data-list-select {
	display: block;
	height: 24px;
	line-height: 22px;
	padding: 0 24px 0 8px;
	background: #fbfbfb url('images/arrow.svg') no-repeat right 6px center;
	background-size: 12px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	color: #7a7a7a;
	font-size: 11px;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.data-list-select:hover {
	border-color: #ccc;
}

.checkbox-dropdown-menu {
	display: none !important;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	min-width: 150px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-top: none;
	border-radius: 0 0 4px 4px;
	max-height: 250px;
	overflow-y: auto;
	z-index: 1000;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.checkbox-dropdown-menu.open {
	display: block !important;
}

.checkbox-dropdown-selectall {
	font-weight: 600;
	background: #f5f5f5;
	border-bottom: 1px solid #e5e5e5;
}

.checkbox-dropdown-item {
	display: block;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 11px;
	margin: 0;
	white-space: nowrap;
}

.checkbox-dropdown-item:hover {
	background: #f0f6ff;
}

.checkbox-dropdown-item input[type="checkbox"] {
	margin: 0 6px 0 0;
	vertical-align: middle;
	cursor: pointer;
}

/* Group Objects Dropdown Styles */
.group-objects-dropdown {
	position: relative;
	width: 100%;
}

.group-objects-dropdown-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 8px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	cursor: pointer;
	font-size: 11px;
	min-height: 22px;
	height: 22px;
	box-sizing: border-box;
}

.group-objects-dropdown-btn:hover {
	border-color: #ccc;
}

.group-objects-dropdown-btn .dropdown-arrow {
	width: 12px;
	height: 12px;
	transition: transform 0.2s;
	flex-shrink: 0;
	margin-left: 8px;
}

.group-objects-dropdown.open .dropdown-arrow {
	transform: rotate(180deg);
}

.group-objects-dropdown-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.group-objects-dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-top: none;
	border-radius: 0 0 3px 3px;
	max-height: 200px;
	overflow-y: auto;
	z-index: 1001;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.group-objects-dropdown.open .group-objects-dropdown-content {
	display: block;
}

.group-objects-select-all {
	padding: 6px 8px;
	background: #f5f5f5;
	border-bottom: 1px solid #e5e5e5;
	font-weight: 600;
	font-size: 11px;
}

.group-objects-select-all label {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
}

.group-objects-select-all input[type="checkbox"] {
	margin: 0 6px 0 0;
	cursor: pointer;
}

.group-objects-list {
	max-height: 160px;
	overflow-y: auto;
}

.group-objects-item {
	display: block;
	padding: 4px 8px;
	font-size: 11px;
	cursor: pointer;
	margin: 0;
}

.group-objects-item:hover {
	background: #f0f6ff;
}

.group-objects-item label {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
	white-space: nowrap;
}

.group-objects-item input[type="checkbox"] {
	margin: 0 6px 0 0;
	cursor: pointer;
}

/*#################################################*/
/* BOTTOM PANEL WIDGETS                            */
/*#################################################*/

/* Ensure dialogs are always above bottom panel widgets */
.ui-dialog {
	z-index: 1100 !important;
	background: #ffffff !important;
	-webkit-border-radius: 8px !important;
	-moz-border-radius: 8px !important;
	border-radius: 8px !important;
}

.ui-dialog .ui-dialog-titlebar {
	-webkit-border-radius: 8px 8px 0 0 !important;
	-moz-border-radius: 8px 8px 0 0 !important;
	border-radius: 8px 8px 0 0 !important;
}

.ui-dialog .ui-dialog-content {
	background: #ffffff !important;
	-webkit-border-radius: 0 0 8px 8px !important;
	-moz-border-radius: 0 0 8px 8px !important;
	border-radius: 0 0 8px 8px !important;
	overflow: auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
}

.ui-dialog .ui-dialog-buttonpane {
	background: #ffffff !important;
	-webkit-border-radius: 0 0 8px 8px !important;
	-moz-border-radius: 0 0 8px 8px !important;
	border-radius: 0 0 8px 8px !important;
}

.ui-widget-overlay {
	z-index: 1099 !important;
}

/* Tables inside dialogs should fit properly */
.ui-dialog .ui-jqgrid {
	width: 100% !important;
	box-sizing: border-box;
	max-width: 100% !important;
}

.ui-dialog .ui-jqgrid-view {
	width: 100% !important;
	box-sizing: border-box;
}

.ui-dialog .ui-jqgrid-hdiv {
	width: 100% !important;
	box-sizing: border-box;
	overflow: hidden !important;
}

.ui-dialog .ui-jqgrid-bdiv {
	width: 100% !important;
	box-sizing: border-box;
	overflow-x: auto !important;
	overflow-y: auto !important;
	max-height: none !important;
}

.ui-dialog .ui-jqgrid-btable,
.ui-dialog .ui-jqgrid-htable {
	width: 100% !important;
	table-layout: auto !important;
}

.ui-dialog .ui-jqgrid-pager {
	width: 100% !important;
	box-sizing: border-box;
	margin: 0 !important;
}

/* Ensure dialog content can expand properly for tables */
.ui-dialog .ui-dialog-content {
	overflow: auto !important;
}

/* Make sure table columns don't overflow */
.ui-dialog .ui-jqgrid tr.jqgrow td {
	overflow: visible !important;
	white-space: nowrap !important;
}

/* Ensure proper grid container sizing */
.ui-dialog .gbox,
.ui-dialog [id^="gbox_"] {
	width: 100% !important;
	box-sizing: border-box;
}

/* All buttons inside dialogs should have rounded corners */
.ui-dialog .ui-button,
.ui-dialog button,
.ui-dialog input[type="button"],
.ui-dialog input[type="submit"],
.ui-dialog input.button,
.ui-dialog .button,
.ui-dialog .fm-button {
	-webkit-border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	border-radius: 4px !important;
}

/* All tabs inside dialogs should have rounded corners at top */
.ui-dialog .ui-tabs-nav li,
.ui-dialog .ui-tabs-nav li a,
.ui-tabs .ui-tabs-nav li,
.ui-tabs .ui-tabs-nav li a {
	-webkit-border-radius: 4px 4px 0 0 !important;
	-moz-border-radius: 4px 4px 0 0 !important;
	border-radius: 4px 4px 0 0 !important;
}

/* CPanel Manage Server tabs: fully rounded buttons (override global top-only tab rounding) */
#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li,
#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li a {
	-webkit-border-radius: 6px !important;
	-moz-border-radius: 6px !important;
	border-radius: 6px !important;
}

#cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li {
	overflow: hidden;
}

/* Tab navigation bar should also have slight rounding at top */
.ui-dialog .ui-tabs-nav,
.ui-tabs .ui-tabs-nav {
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}

#bottom_panel_widgets {
	padding: 0 20px;
	background: transparent;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	box-sizing: border-box;
	cursor: default;
	user-select: none;
	position: relative;
	z-index: 1;
}

#bottom_panel_widgets.dragging {
	cursor: default;
}

#bottom_panel_widgets::-webkit-scrollbar {
	height: 6px;
}

#bottom_panel_widgets::-webkit-scrollbar-track {
	background: #e0e0e0;
	border-radius: 3px;
}

#bottom_panel_widgets::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 3px;
}

#bottom_panel_widgets::-webkit-scrollbar-thumb:hover {
	background: #999;
}

#bottom_panel_widgets_container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	height: 100%;
	width: max-content;
	min-width: 100%;
}

.bottom-panel-widget {
	display: flex;
	flex-direction: column;
	min-width: 220px;
	max-width: 280px;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.10);
	border-radius: 10px;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06),
		0 10px 30px rgba(15, 23, 42, 0.08);
	overflow: hidden;
	flex-shrink: 0;
}

/* Fuel widget - double width */
.bottom-panel-widget.widget-wide {
	min-width: 450px;
	max-width: 560px;
}

.widget-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: transparent;
	border-bottom: none;
	flex-shrink: 0;
	min-height: 32px;
	max-height: 32px;
	box-sizing: content-box;
}

.widget-title {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.widget-zoom-controls {
	display: flex;
	align-items: center;
	gap: 3px;
}

.widget-zoom-controls a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: rgba(148, 163, 184, 0.18);
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.widget-zoom-controls a:hover {
	background-color: rgba(2, 132, 199, 0.14);
	border-color: rgba(2, 132, 199, 0.20);
}

.widget-zoom-controls a:active {
	background-color: rgba(2, 132, 199, 0.18);
}

.widget-zoom-controls img {
	width: 12px;
	height: 12px;
	opacity: 0.85;
}

.widget-zoom-controls a:hover img {
	opacity: 0.85;
}

/* Widget Header Controls (for Notes add button) */
.widget-header-controls {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.widget-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: #4a9fd4;
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	transition: background-color 0.15s ease;
}

.widget-add-btn:hover {
	background: #3a8fc4;
}

.widget-content {
	flex: 1;
	padding: 10px 12px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 11px;
}

.widget-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #999;
	font-style: italic;
	text-align: center;
}

.widget-placeholder a {
	color: #1976d2;
	text-decoration: none;
}

.widget-placeholder a:hover {
	text-decoration: underline;
}

/* Daily Statistics Widget */
.widget-stats {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	border-bottom: 1px solid #f0f0f0;
}

.stat-item:last-child {
	border-bottom: none;
}

.stat-label {
	color: #666;
	font-size: 11px;
}

.stat-value {
	color: #333;
	font-weight: 500;
	font-size: 11px;
}

/* Recent Events Widget */
.widget-events {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.widget-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #999;
	font-size: 11px;
}

.events-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
}

.events-table thead {
	position: sticky;
	top: -10px;
	background: #fff;
	z-index: 10;
}

.events-table th {
	padding: 6px 8px;
	text-align: left;
	font-weight: 600;
	color: #555;
	border-bottom: 1px solid #e0e0e0;
	font-size: 10px;
	text-transform: uppercase;
	background: #fff;
}

.events-table td {
	padding: 5px 8px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: top;
}

.events-table tbody tr:hover {
	background-color: #f8f9fa;
}

.events-table .event-time-col {
	width: 90px;
	white-space: nowrap;
}

.events-table .event-name-col {}

.events-table .event-time {
	color: #666;
	font-size: 10px;
	font-family: monospace;
}

.events-table .event-name {
	color: #333;
	font-size: 11px;
}

.event-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.event-item {
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}

.event-item:last-child {
	border-bottom: none;
}

/* Fuel Widget with Chart */
.widget-fuel {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

.fuel-tooltip {
	position: absolute;
	top: 5px;
	right: 5px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(51, 51, 51, 0.9);
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	z-index: 10;
}

.fuel-tooltip-time {
	color: #ccc;
}

.fuel-tooltip-value {
	color: #4a9fd4;
	font-weight: 600;
}

.fuel-chart-container {
	flex: 1;
	min-height: 100px;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.fuel-chart {
	width: 100%;
	height: 100%;
}

/* Flot chart styling */
.fuel-chart .flot-text {
	color: #999 !important;
}

.fuel-chart .tickLabel {
	font-size: 9px !important;
}

/* Widget Fuel specific content override */
#widget_fuel .widget-content {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 5px;
}

/* Notes Widget */
.widget-notes {
	display: flex;
	flex-direction: column;
}

.notes-content {
	color: #444;
	font-size: 11px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Photo Widget */
.widget-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow: hidden;
}

/* Photo widget content should not scroll */
#widget_photo .widget-content {
	overflow: hidden;
	padding: 8px;
}

.photo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
}

.widget-photo-img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.photo-actions {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: flex;
	gap: 5px;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.photo-container:hover .photo-actions {
	opacity: 1;
}

.photo-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.15s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.photo-action-btn:hover {
	background: #fff;
}

.photo-action-delete:hover {
	background: #fee;
}

.photo-action-icon {
	font-size: 14px;
}

/* Photo Upload Placeholder */
.photo-upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 8px;
	text-align: center;
	box-sizing: border-box;
}

.photo-upload-icon {
	font-size: 28px;
	margin-bottom: 5px;
	opacity: 0.5;
}

.photo-upload-text {
	font-size: 10px;
	color: #888;
	margin-bottom: 6px;
}

.photo-upload-btn {
	padding: 5px 12px;
	font-size: 10px;
	background: #4a9fd4;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.photo-upload-btn:hover {
	background: #3a8fc4;
}

/* Notes Widget Styles */
.widget-notes {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.notes-header {
	display: flex;
	justify-content: flex-end;
	padding: 0 0 8px 0;
	flex-shrink: 0;
}

.notes-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 11px;
	background: #4a9fd4;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.notes-add-btn:hover {
	background: #3a8fc4;
}

.notes-add-icon {
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
}

.notes-table-container {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

.notes-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
}

.notes-table thead {
	background: #f0f0f0;
	position: sticky;
	top: 0;
}

.notes-table th {
	padding: 5px 6px;
	text-align: left;
	font-weight: 600;
	color: #555;
	border-bottom: 1px solid #ddd;
	white-space: nowrap;
}

.notes-table td {
	padding: 5px 6px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

.notes-table tbody tr:hover {
	background: #f8f8f8;
}

.notes-date-col {
	width: 80px;
}

.notes-title-col {
	width: auto;
}

.notes-actions-col {
	width: 70px;
	text-align: right;
}

.notes-date {
	color: #888;
	white-space: nowrap;
	font-size: 10px;
}

.notes-title {
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
}

.notes-actions {
	display: flex;
	gap: 3px;
	justify-content: flex-end;
}

.note-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color 0.15s ease;
	opacity: 0.7;
}

.note-action-btn:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.05);
}

.note-action-btn span {
	font-size: 12px;
}

.note-view-btn:hover {
	background: rgba(74, 159, 212, 0.15);
}

.note-edit-btn:hover {
	background: rgba(255, 193, 7, 0.15);
}

.note-delete-btn:hover {
	background: rgba(220, 53, 69, 0.15);
}

.notes-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	color: #999;
	font-size: 11px;
	text-align: center;
	padding: 20px;
}

/* Note Dialog Styles */
#dialog_note .row3 {
	padding: 10px 0;
}

#dialog_note .row2 {
	margin-bottom: 10px;
}

#dialog_note .width30 {
	font-size: 12px;
	color: #555;
	padding-bottom: 5px;
}

#dialog_note_title {
	font-size: 12px;
	padding: 8px 10px;
}

#dialog_note_content {
	font-size: 12px;
	padding: 8px 10px;
	line-height: 1.5;
	font-family: inherit;
}

/* Settings Dropdown with Sortable List (Items / Widgets) */
.settings-dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	user-select: none;
	font-size: 12px;
	color: #333;
}

.settings-dropdown-toggle:hover {
	border-color: #999;
}

.settings-dropdown-toggle .dropdown-arrow {
	font-size: 10px;
	color: #666;
	transition: transform 0.2s;
}

.settings-dropdown-toggle.open .dropdown-arrow {
	transform: rotate(180deg);
}

.settings-dropdown-menu {
	display: none !important;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	margin-top: 2px;
	max-height: 280px;
	overflow: hidden;
}

.settings-dropdown-menu.open {
	display: block !important;
}

.dropdown-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
	background: #f8f9fa;
}

.dropdown-header .select-all-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #666;
	cursor: pointer;
	margin: 0;
}

.dropdown-header .select-all-label input {
	margin: 0;
}

.dropdown-reset-btn {
	padding: 3px 8px;
	font-size: 11px;
	background: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 3px;
	cursor: pointer;
	color: #666;
}

.dropdown-reset-btn:hover {
	background: #e0e0e0;
	color: #333;
}

/* Dropdown wrapper for toggle + reset button */
.settings-dropdown-wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
}

.settings-dropdown-wrapper .settings-dropdown-toggle {
	flex: 1;
}

.dropdown-reset-btn-outside {
	padding: 6px 10px;
	font-size: 14px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	color: #666;
	line-height: 1;
}

.dropdown-reset-btn-outside:hover {
	background: #e8e8e8;
	color: #333;
	border-color: #999;
}

.dropdown-sortable-list {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 220px;
	overflow-y: auto;
}

.dropdown-sortable-list li {
	display: flex;
	align-items: center;
	padding: 7px 10px;
	border-bottom: 1px solid #f0f0f0;
	background: #fff;
	cursor: default;
	user-select: none;
	transition: background-color 0.15s ease;
}

.dropdown-sortable-list li:last-child {
	border-bottom: none;
}

.dropdown-sortable-list li:hover {
	background: #f5f8ff;
}

.dropdown-sortable-list li.ui-sortable-helper {
	background: #e3f2fd;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	border: 1px solid #90caf9;
	border-radius: 3px;
}

.dropdown-sortable-list li.ui-sortable-placeholder {
	background: #f0f7ff;
	border: 1px dashed #90caf9;
	visibility: visible !important;
	height: 32px;
}

.dropdown-sortable-list .drag-handle {
	cursor: grab;
	color: #bbb;
	padding-right: 10px;
	font-size: 12px;
	line-height: 1;
}

.dropdown-sortable-list .drag-handle:hover {
	color: #666;
}

.dropdown-sortable-list .drag-handle:active {
	cursor: grabbing;
}

.dropdown-sortable-list label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	cursor: pointer;
	font-size: 12px;
	color: #333;
	margin: 0;
}

.dropdown-sortable-list label input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

/*#################################################*/
/* CLUSTER HOVER POPUP
/*#################################################*/

.cluster-hover-popup .leaflet-popup-content {
	margin: 0;
	padding: 0;
}

.cluster-hover-popup .leaflet-popup-content-wrapper {
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
}

.cluster-popup-list {
	padding: 6px 0;
	max-height: 280px;
	overflow-y: auto;
	border-radius: 8px;
}

.cluster-popup-list::-webkit-scrollbar {
	width: 6px;
}

.cluster-popup-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 0 8px 8px 0;
}

.cluster-popup-list::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
}

.cluster-popup-list::-webkit-scrollbar-thumb:hover {
	background: #999;
}

.cluster-popup-row {
	display: flex;
	align-items: center;
	padding: 2px 10px;
	gap: 6px;
	border-bottom: 1px solid #f0f0f0;
}

.cluster-popup-row:last-child {
	border-bottom: none;
}

.cluster-popup-row:hover {
	background-color: #f5f9ff;
}

.cluster-obj-name {
	flex: 1;
	font-size: 11px;
	font-weight: 400;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
}

.cluster-obj-speed {
	font-size: 11px;
	font-weight: 400;
	color: #333;
	min-width: 42px;
	text-align: right;
}

.cluster-obj-engine {
	width: 20px;
	text-align: center;
}

.cluster-obj-engine img.cluster-engine-icon {
	width: 14px;
	height: 14px;
	vertical-align: middle;
}

.cluster-obj-conn {
	width: 22px;
	text-align: center;
}

.cluster-obj-conn img {
	vertical-align: middle;
}

/*#################################################*/
/* API DOCUMENTATION
/*#################################################*/

.api-section {
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 15px;
	margin-bottom: 15px;
}

.api-section-title {
	font-size: 13px;
	font-weight: 600;
	color: #004c8c;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid #3970ca;
}

.api-base-url {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 8px 12px;
	margin-bottom: 12px;
	font-family: monospace;
	font-size: 11px;
	color: #555;
	word-break: break-all;
}

.api-row {
	display: table;
	width: 100%;
	padding: 6px 0;
	border-bottom: 1px solid #eee;
}

.api-row:last-child {
	border-bottom: none;
}

.api-row:hover {
	background: #f0f7ff;
}

.api-cmd {
	display: inline-block;
	width: 18%;
	font-family: monospace;
	font-weight: 600;
	color: #c00;
	font-size: 11px;
	vertical-align: middle;
}

.api-cmd.user-api {
	color: #060;
}

.api-params {
	display: inline-block;
	width: 20%;
	font-size: 11px;
	color: #666;
	vertical-align: middle;
}

.api-desc {
	display: inline-block;
	width: 62%;
	font-size: 11px;
	color: #333;
	vertical-align: middle;
}

.api-header {
	display: table;
	width: 100%;
	padding: 6px 0;
	margin-bottom: 5px;
	border-bottom: 2px solid #ddd;
	font-weight: 600;
	font-size: 11px;
	color: #555;
}

.api-header div {
	display: inline-block;
	vertical-align: middle;
}

.api-notes {
	background: #fffbea;
	border: 1px solid #f0e6b8;
	border-radius: 3px;
	padding: 10px 12px;
	font-size: 11px;
	color: #665500;
}

.api-notes b {
	color: #554400;
}

.api-notes ul {
	margin: 8px 0 0 0;
	padding-left: 18px;
}

.api-notes li {
	margin-bottom: 4px;
}

.api-link {
	color: #3970ca;
	text-decoration: none;
	font-family: monospace;
	font-size: 10px;
	word-break: break-all;
}

.api-link:hover {
	color: #1a4a8a;
	text-decoration: underline;
}

.key-placeholder {
	color: #c00;
	font-weight: 600;
}

.api-notes code {
	background: #f5f5f5;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 10px;
}

/*#################################################*/
/* MESSAGE LOGS
/*#################################################*/

#manage_server_messages {
	padding: 15px;
}

#manage_server_messages .message-logs-section {
	margin-bottom: 0;
}

#manage_server_messages .message-read-status-section {
	margin-top: 20px;
}

#manage_server_messages .message-status-hint {
	color: #666;
	font-style: italic;
}

/*#################################################*/
/* BRANDING UI (Manage server tab)
/*#################################################*/

#manage_server_branding_ui {
	padding: 15px;
}

#manage_server_branding_ui .width2 {
	width: 10px;
}

#manage_server_branding_ui .row2 {
	font-size: 0;
}

#manage_server_branding_ui .ui-img-container {
	width: 100%;
	height: 120px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#manage_server_branding_ui .ui-img-container img {
	max-width: 100%;
	max-height: 100%;
}

#manage_server_branding_ui .row2.text {
	color: #666;
	font-size: 10px;
}

#manage_server_branding_ui .button-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #ffffff;
	margin-left: 6px;
}

#manage_server_branding_ui .button-image:hover {
	background: #f5f5f5;
}

/*#################################################*/
/* SECURITY PAGE
/*#################################################*/

#manage_server_security {
	padding: 15px;
}

#manage_server_security .panel-button img[src$=".svg"],
#manage_server_security .panel-button img:not([src$=".svg"]) {
	padding: 3px;
}

#manage_server_security .hint {
	color: #888;
	font-size: 11px;
	margin-left: 10px;
}

#manage_server_security .button-small {
	display: inline-block;
	padding: 3px 10px;
	background: #d9534f;
	color: white;
	text-decoration: none;
	border-radius: 3px;
	font-size: 11px;
}

#manage_server_security .button-small:hover {
	background: #c9302c;
}

.cp-security {
	background: url('images/security.svg') no-repeat center center;
	background-size: 20px 20px;
}

/* Send Message Dialog */
#dialog_send_message .message-textarea {
	height: 200px;
}

#dialog_send_message .message-status,
#dialog_send_email .message-status {
	text-align: center;
}

/* Send Email Dialog */
#dialog_send_email .email-textarea {
	height: 250px;
}

/*#################################################*/
/* CONTROL PANEL - MANAGE SERVER
/*#################################################*/

/* File input hidden */
#load_file {
	display: none;
}

/* Logo images */
#cpanel .cpanel-logo {
	border: 0;
}

/* Control panel form elements */
#cpanel .cpanel-select-sm,
#cpanel .cpanel-input-sm {
	width: 100px;
}

#cpanel .cpanel-btn-sm {
	width: 100px;
}

#cpanel .cpanel-select-md {
	width: 200px;
}

#cpanel .cpanel-input-md {
	width: 150px;
}

#cpanel .cpanel-input-lg {
	width: 300px;
}

#cpanel .cpanel-input-num-sm {
	width: 70px;
}

#cpanel .cpanel-input-num-md {
	width: 90px;
}

/* Languages select multiple */
#cpanel_manage_server_languages,
#cpanel .cpanel-languages-select {
	width: 100px;
	height: 150px;
}

/* External links styling */
#cpanel .cpanel-link-small {
	font-size: 10px;
}

/* Section styling */
#cpanel .cpanel-section-padded {
	padding: 10px;
}

#cpanel .cpanel-section-header {
	margin-bottom: 10px;
	color: #000;
	font-size: 12px;
	text-align: left;
}

#cpanel .cpanel-divider {
	border-top: 1px solid #ddd;
	padding-top: 10px;
	margin-top: 10px;
}

#cpanel .cpanel-subsection-title {
	font-weight: bold;
	margin-bottom: 10px;
}

#cpanel .cpanel-flex-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

#cpanel .cpanel-hint-text {
	font-size: 11px;
	color: #888;
	margin-top: 5px;
}

#cpanel .cpanel-mt-10 {
	margin-top: 10px;
}

#cpanel .cpanel-mr-10 {
	margin-right: 10px;
}

#cpanel .cpanel-text-muted {
	color: #888;
}

#cpanel .cpanel-loading-text {
	color: #888;
	padding: 10px;
}

#cpanel .cpanel-scrollable-list {
	max-height: 300px;
	overflow-y: auto;
}

#cpanel .cpanel-highlight-blue {
	font-weight: bold;
	color: #0066cc;
}

#cpanel .cpanel-text-bold {
	font-weight: bold;
}

#cpanel .cpanel-text-semibold {
	font-weight: 600;
}

#cpanel .cpanel-text-success {
	color: #006600;
}

#cpanel .cpanel-text-secondary {
	color: #666;
}

#cpanel .cpanel-ml-10 {
	margin-left: 10px;
}

#cpanel .cpanel-mt-20 {
	margin-top: 20px;
}

#cpanel .cpanel-hidden {
	display: none;
}

#cpanel .cpanel-clear {
	clear: both;
}

#cpanel .cpanel-min-height-100 {
	min-height: 100px;
}

#cpanel .cpanel-mr-2 {
	margin-right: 2px;
}

#cpanel .cpanel-mb-10 {
	margin-bottom: 10px;
}

#cpanel .cpanel-mt-15 {
	margin-top: 15px;
}

#cpanel .cpanel-full-width {
	width: 100%;
}

#cpanel .cpanel-small-text {
	font-size: 11px;
	color: #666;
}

/* Textarea sizing */
#cpanel .cpanel-textarea-sm {
	height: 50px;
}

#cpanel .cpanel-textarea-md {
	height: 75px;
}

#cpanel .cpanel-textarea-comment {
	height: 109px;
}

#cpanel .cpanel-textarea-lg {
	height: 255px;
}

/* Scroll panels */
#cpanel .cpanel-scroll-panel {
	height: 334px;
	overflow-y: scroll;
}

#cpanel .cpanel-scroll-panel-lg {
	height: 460px;
	overflow-y: scroll;
}

/* Geocoder buttons */
#cpanel .cpanel-geocoder-refresh-btn {
	width: 80px;
	margin-left: 10px;
}

#cpanel .cpanel-geocoder-test-btn {
	width: 60px;
	margin-left: 5px;
}

/* API Key inputs and buttons */
#cpanel .cpanel-api-key-input {
	width: 70%;
	font-family: monospace;
}

#cpanel .cpanel-api-key-renew-btn {
	width: 25%;
	margin-left: 2%;
}

#cpanel .cpanel-user-api-key-renew-btn {
	width: 22%;
	margin-left: 3%;
}

#cpanel .cpanel-api-version {
	color: #004c8c;
	font-weight: 600;
}

/* Import result panel */
#cpanel .cpanel-import-result,
#dialog_object_import_result {
	display: none;
	margin-top: 10px;
	padding: 10px;
	background: #f5f5f5;
	border-radius: 3px;
	font-size: 11px;
}

/* API Keys Rotation Section */
#cpanel .api-keys-section {
	padding: 10px;
}

#cpanel .api-keys-header {
	margin-bottom: 10px;
	color: #000;
	font-size: 12px;
	text-align: left;
}

#cpanel .api-keys-provider-select {
	width: 200px;
}

#cpanel .api-keys-status {
	color: #888;
}

#cpanel .api-keys-divider {
	border-top: 1px solid #ddd;
	padding-top: 10px;
	margin-top: 10px;
}

#cpanel .api-keys-add-title {
	font-weight: bold;
	margin-bottom: 10px;
}

#cpanel .api-keys-add-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

#cpanel_api_keys_new_name {
	width: 150px;
}

#cpanel_api_keys_new_key {
	width: 300px;
}

#cpanel_api_keys_new_days {
	width: 70px;
}

#cpanel_api_keys_new_requests {
	width: 90px;
}

#cpanel .api-keys-hint {
	font-size: 11px;
	color: #888;
	margin-top: 5px;
}

#cpanel .api-keys-list-section {
	margin-top: 10px;
}

#cpanel_api_keys_list {
	max-height: 300px;
	overflow-y: auto;
}

#cpanel .api-keys-loading {
	color: #888;
	padding: 10px;
}

#cpanel .api-keys-actions {
	margin-top: 10px;
}

#cpanel .api-keys-actions button {
	margin-right: 10px;
}

/* Geocoder Section */
#cpanel_manage_server_geocoder_provider {
	width: 200px;
}

#cpanel .geocoder-active-provider,
#cpanel .geocoder-test-provider {
	font-weight: bold;
	color: #0066cc;
}

#cpanel .geocoder-cache-count {
	font-weight: bold;
}

#cpanel .geocoder-test-result {
	color: #006600;
}

#cpanel .geocoder-test-time {
	color: #666;
}

#cpanel .geocoder-test-lat,
#cpanel .geocoder-test-lng {
	width: 100px;
}

#cpanel .geocoder-skip-cache-label {
	margin-left: 10px;
}

#cpanel .geocoder-test-btn {
	width: 60px;
	margin-left: 5px;
}

#cpanel .geocoder-refresh-btn {
	width: 80px;
	margin-left: 10px;
}

/* GSR Backups Section */
#cpanel .backup-section {
	padding: 10px;
}

#cpanel .backup-header {
	margin-bottom: 10px;
	color: #000;
	font-size: 12px;
	text-align: left;
}

#cpanel .backup-generate-btn {
	margin-right: 10px;
}

#cpanel .backup-list-container {
	padding: 10px;
	clear: both;
}

#cpanel_backup_list {
	min-height: 100px;
}

#cpanel .backup-loading {
	color: #888;
	padding: 10px;
}

/* Server API Section */
#cpanel .server-api-section {
	padding: 10px;
}

#cpanel .server-api-header {
	margin-bottom: 10px;
	color: #000;
	font-size: 12px;
	text-align: left;
}

#cpanel .server-api-label {
	font-weight: 600;
}

#cpanel_server_api_key {
	width: 70%;
	font-family: monospace;
}

#cpanel .server-api-renew-btn {
	width: 25%;
	margin-left: 2%;
}

#cpanel .server-api-version-section {
	margin-top: 20px;
}

#cpanel .api-version-badge {
	color: #004c8c;
	font-weight: 600;
}

/* SMS Gateway Section */
#cpanel_manage_server_sms_http {
	display: none;
}

#cpanel_manage_server_sms_gateway_url {
	height: 75px;
}

/* Textarea heights */
#cpanel_manage_server_email_signature {
	height: 50px;
}

/* Object Import Dialog */
#dialog_object_import .import-instructions {
	margin-bottom: 10px;
}

#dialog_object_import .import-file-input {
	width: 100%;
}

#dialog_object_import .import-format-info {
	font-size: 11px;
	color: #666;
}

#dialog_object_import_result {
	display: none;
	margin-top: 10px;
	padding: 10px;
	background: #f5f5f5;
	border-radius: 3px;
	font-size: 11px;
}

#dialog_object_import .import-actions {
	margin-top: 15px;
}

/* User Edit Dialog */
#dialog_user_edit .user-edit-scroll {
	height: 460px;
	overflow-y: scroll;
}

#dialog_user_edit .user-api-key-input {
	width: 70%;
}

#dialog_user_edit .user-api-key-renew {
	width: 22%;
	margin-left: 3%;
}

#dialog_user_edit_account_comment {
	height: 109px;
}

/* Object Active Period Section */
#dialog_user_edit .active-period-input {
	width: 100px;
	margin-right: 2px;
}

/* Template Dialog */
#dialog_template_message {
	height: 255px;
}

#dialog_template_variables {
	height: 334px;
	overflow-y: scroll;
}

/* Custom Map Dialog */
#dialog_custom_map_type {
	width: 100px;
}

/* ============================== */
/* Object Control Dialog (CMD)    */
/* ============================== */
#dialog_cmd {
	overflow: hidden !important;
}

#dialog_cmd .ui-jqgrid {
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

#dialog_cmd .ui-jqgrid-view {
	width: 100% !important;
}

#dialog_cmd .ui-jqgrid-bdiv {
	overflow-x: hidden !important;
	width: 100% !important;
}

#dialog_cmd .ui-jqgrid-hdiv {
	overflow-x: hidden !important;
	width: 100% !important;
}

#dialog_cmd .ui-jqgrid-btable,
#dialog_cmd .ui-jqgrid-htable {
	width: 100% !important;
	table-layout: fixed !important;
}

#dialog_cmd .ui-jqgrid-pager {
	width: 100% !important;
}

#cmd_tabs {
	overflow: hidden;
}

#cmd_control_tab,
#cmd_templates_tab {
	overflow: hidden;
}

/* CMD Form Table */
#dialog_cmd .cmd-form-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 10px;
}

#dialog_cmd .cmd-form-table td {
	padding: 3px 2px;
	vertical-align: middle;
}

#dialog_cmd .cmd-form-table td.cmd-label {
	width: 55px;
	white-space: nowrap;
	padding-right: 3px;
}

#dialog_cmd .cmd-form-table td.cmd-objects-cell {
	width: 150px;
}

#dialog_cmd .cmd-form-table td.cmd-gateway-cell {
	width: 55px;
}

#dialog_cmd .cmd-form-table td.cmd-type-cell {
	width: 55px;
}

#dialog_cmd .cmd-form-table td.cmd-label-type {
	width: 30px;
	white-space: nowrap;
	padding-left: 8px;
	padding-right: 3px;
}

#dialog_cmd .cmd-form-table td.cmd-template-cell {
	width: 100px;
}

#dialog_cmd .cmd-form-table td.cmd-command-cell {
	/* takes remaining space */
}

#dialog_cmd .cmd-form-table td.cmd-send-cell {
	width: 55px;
}

#dialog_cmd .cmd-form-table {
	margin-bottom: 8px;
}

#dialog_cmd .cmd-search-bar {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

#dialog_cmd .cmd-search-bar input {
	flex: 1;
	padding: 4px 8px;
	font-size: 11px;
	box-sizing: border-box;
}

#dialog_cmd .cmd-delete-all-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
}

#dialog_cmd .cmd-delete-all-btn:hover {
	background: #e8e8e8;
	border-color: #ccc;
}

#dialog_cmd .cmd-delete-all-btn img {
	width: 16px;
	height: 16px;
}

#dialog_cmd .dropdown-select {
	position: relative;
	display: block;
}

#dialog_cmd .dropdown-select-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fbfbfb;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 4px 8px;
	min-height: 24px;
	cursor: pointer;
	font-size: 11px;
}

#dialog_cmd .dropdown-select-header:hover {
	border-color: #ccc;
}

#dialog_cmd .dropdown-select-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333;
}

#dialog_cmd .dropdown-select-text.placeholder {
	color: #7a7a7a;
}

#dialog_cmd .dropdown-select-arrow {
	font-size: 10px;
	color: #888;
}

#dialog_cmd .dropdown-select-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#dialog_cmd .dropdown-select.open .dropdown-select-content {
	display: block;
}

#dialog_cmd .checkbox-list-container {
	overflow-y: auto;
	border: none;
	background: #fff;
	padding: 2px;
	height: 200px;
}

#dialog_cmd .checkbox-list-container .items-wrapper {
	display: block;
}

#dialog_cmd .checkbox-list-container label {
	display: block;
	padding: 1px 4px;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 11px;
	line-height: 16px;
}

#dialog_cmd .checkbox-list-container label:hover {
	background: #e8f4fc;
}

#dialog_cmd .checkbox-list-container input[type="checkbox"] {
	margin: 0 4px 0 0;
	vertical-align: middle;
}

#dialog_cmd .checkbox-list-container .group-header {
	display: block;
	font-weight: bold;
	background: #f0f0f0;
	padding: 2px 4px;
	margin: 0;
	font-size: 11px;
	color: #555;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
}

#dialog_cmd .checkbox-list-container .group-header:hover {
	background: #e0e0e0;
}

#dialog_cmd .checkbox-list-container .group-header input[type="checkbox"] {
	margin: 0 6px 0 0;
	vertical-align: middle;
}

#dialog_cmd .checkbox-list-container .group-items {
	display: block;
	padding-left: 15px;
}

#dialog_cmd .checkbox-list-container .list-toolbar {
	padding: 4px;
	background: #fff;
	border-bottom: 1px solid #ddd;
	position: sticky;
	top: 0;
	z-index: 1;
}

#dialog_cmd .checkbox-list-container .search-box {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 2px 6px;
	margin-bottom: 4px;
}

#dialog_cmd .checkbox-list-container .search-box:focus-within {
	border-color: #0066cc;
}

#dialog_cmd .checkbox-list-container .search-box svg {
	width: 12px;
	height: 12px;
	fill: #888;
	margin-right: 4px;
	flex-shrink: 0;
}

#dialog_cmd .checkbox-list-container .search-box input {
	border: none;
	outline: none;
	font-size: 11px;
	width: 100%;
	padding: 2px 0;
}

#dialog_cmd .checkbox-list-container .select-all-row {
	display: flex;
	align-items: center;
	font-size: 11px;
}

#dialog_cmd .checkbox-list-container .select-all-row label {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

#dialog_cmd .checkbox-list-container .select-all-row input[type="checkbox"] {
	margin: 0 5px 0 0;
}

#dialog_cmd .checkbox-list-container .no-results {
	padding: 8px;
	text-align: center;
	color: #888;
	font-size: 11px;
	font-style: italic;
}

/*#################################################*/
/* LEAFLET POPUP STYLING
/*#################################################*/

/* Hide the Leaflet-generated map view controls (we use map_layers_widget instead) */
.leaflet-top.leaflet-left {
	display: none !important;
}

/* Leaflet controls - match mobile styling (rounded white buttons) */
.leaflet-bar {
	border: 1px solid #eee !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	overflow: visible;
	background: #fff;
	padding: 4px;
}

.leaflet-bar a {
	width: 34px !important;
	height: 34px !important;
	line-height: 34px !important;
	border: none !important;
	border-radius: 12px !important;
	margin-bottom: 4px;
	background-color: #fff;
	background-size: 20px 20px !important;
	transition: all 0.2s ease;
}

.leaflet-bar a:last-child {
	margin-bottom: 0;
}

.leaflet-bar a:hover {
	background-color: #f5f5f5;
}

/* Desktop: hide +/- zoom controls (mouse wheel is used instead) */
.leaflet-control-zoom {
	display: none !important;
}

.leaflet-popup-content-wrapper {
	border-radius: 12px !important;
	border: 1px solid #eee !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.leaflet-popup-tip {
	box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

/* Move popup higher above markers */
.leaflet-popup {
	margin-bottom: 10px !important;
	z-index: 10000 !important;
}

/* Ensure popup pane is always on top of all map elements */
.leaflet-popup-pane {
	z-index: 10000 !important;
}

.leaflet-map-pane .leaflet-popup-pane {
	z-index: 10000 !important;
}

/* Lower other panes to ensure popup stays on top */
.leaflet-tooltip-pane {
	z-index: 800 !important;
}

.leaflet-marker-pane {
	z-index: 700 !important;
}

.leaflet-overlay-pane {
	z-index: 600 !important;
}

.leaflet-shadow-pane {
	z-index: 500 !important;
}

/* Hide map text (objects/markers/zones/routes labels + tooltips) */
.leaflet-container.labels-hidden .leaflet-tooltip-pane,
.leaflet-container.labels-hidden .leaflet-tooltip,
.leaflet-container.labels-hidden .leaflet-label,
.leaflet-container.gs-map-text-disabled .leaflet-tooltip-pane,
.leaflet-container.gs-map-text-disabled .leaflet-tooltip,
.leaflet-container.gs-map-text-disabled .leaflet-label {
	display: none !important;
}

/* Graph Preset Buttons (Fuel Level / Voltage quick toggles) */
.graph-preset-buttons {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
}

.graph-preset-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.graph-preset-btn:hover {
	background: #f0f0f0;
	border-color: #aaa;
}

.graph-preset-btn.active {
	background: #e3f2fd;
	border-color: #2196F3;
	color: #2196F3;
}

.graph-preset-btn.active svg {
	stroke: #2196F3;
}

.graph-preset-btn svg {
	width: 14px;
	height: 14px;
	stroke: #666;
}