.leftal, span.leftal {
	float: left;
	font-weight: bold;
}
span.leftal { width: 200px; }
.leftal { width: 100px; }

.headwelcome, .dropdownfilter, .headwarn, .bodymatch, .bodyparagraph, .bodyparagraph2, .form-horizontal {
	width: 100%;
	float: left;
}
.headwelcome { background: #ffebcd; border: 1px dotted #ffdab9; }
.dropdownfilter { background: #5084e6; border: 1px dotted #802f94; padding: 10px; }
.headwarn { background: #EA9394; color: #fff; border: dotted #D20103; }
.bodymatch { background: #E2CCAD; border: dotted #976723; }
.bodyparagraph { background: #f0f8ff; border-color: #faebd7; }
.bodyparagraph2 { background: #fff5ee; border: dotted #ffdab9; }
.form-horizontal { background: #fffafa; }
.container-headwelcome { background: #ffebcd; width: 100%; border: dotted #ff8c00; }

/* Tooltips */
[data-title] { position: relative; }
[data-title]:after {
	content: attr(data-title);
	position: absolute;
	bottom: -1.6em;
	left: 100%;
	padding: 4px 4px 4px 8px;
	color: #666;
	white-space: nowrap;
	border-radius: 5px;
	box-shadow: 0 0 4px #666;
	background: linear-gradient(to bottom, #fdf5e6, #faebd7);
	opacity: 0;
	z-index: 99999;
	visibility: hidden;
	transition: all 0.1s ease 0.5s;
}
[data-title]:hover:after {
	opacity: 1;
	visibility: visible;
}

/* DataTable */
table.table.dataTable.table-striped th {
	border-bottom: 10px solid #ddd;
	background: #1e90ff;
	color: #fff;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
	color: #add8e6;
	opacity: 0.6 !important;
}

/* Enforce fixed table layout for server tables so column widths (ch) are respected
   across all tabs — fixes oversized columns in inactive/alternative tabs. */
table[id^="servertable"] {
	table-layout: fixed;
}

/* Force identical column widths across every `servertable*` table so all tabs
   use the same layout and spacing as the main `#servertable`. */
/* 1 = Datacenter ID, 2 = Location, 3 = Hostname, 4 = IP, 5 = Client,
   6 = Order, 7 = Start Date (if present), last = Actions */
table[id^="servertable"] th:nth-child(1),
table[id^="servertable"] td:nth-child(1) {
	width: 15ch !important;
	min-width: 15ch !important;
	max-width: 15ch !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table[id^="servertable"] th:nth-child(2),
table[id^="servertable"] td:nth-child(2) {
	width: 15ch !important;
	min-width: 15ch !important;
	max-width: 15ch !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Order column (always column 6 in admin view) */
table[id^="servertable"] th:nth-child(6),
table[id^="servertable"] td:nth-child(6) {
	width: 12ch !important;
	min-width: 12ch !important;
	max-width: 12ch !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Start Date (column 7 when present) — widen to match main tab spacing */
table[id^="servertable"] th:nth-child(7),
table[id^="servertable"] td:nth-child(7) {
	width: 14ch !important;
	min-width: 14ch !important;
	max-width: 14ch !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dataTables_wrapper .dt-buttons {
	display: inline-flex;
	justify-content: center; /* center inside its column */
	gap: 0; /* no spacing between buttons */
	align-items: center;
}
.dataTables_wrapper .dt-buttons .btn {
	margin: 0;
	padding: 4px 8px;
}

/* Ensure the center column containing B is centered within the bottom row */
.dataTables_wrapper .row > .text-center .dt-buttons {
	margin-left: auto;
	margin-right: auto;
}

/* GuruTip */
.gurutip { display: inline; position: relative; }
.gurutip:hover:after {
	background: rgba(0,0,0,.8);
	border-radius: 5px;
	bottom: 26px;
	color: #fff;
	content: attr(title);
	left: 20%;
	padding: 5px 15px;
	position: absolute;
	z-index: 98;
	width: 220px;
}
.gurutip:hover:before {
	border: solid;
	border-color: #333 transparent;
	border-width: 6px 6px 0 6px;
	bottom: 20px;
	content: "";
	left: 30%;
	position: absolute;
	z-index: 99;
}

/* Ticket reply card styles - differentiate staff vs client */
.dedi-ticket-messages .dedi-reply { border: 1px solid #e0e0e0; background: #fff; }
.dedi-reply-header { display: block; }
.dedi-reply-meta { display: block; }
.dedi-reply-body { background: #fafafa; }

/* Visual distinction */
.dedi-reply-staff { border-left: 4px solid #0d6efd; box-shadow: 0 1px 0 rgba(13,110,253,0.05); }
.dedi-reply-staff .dedi-reply-header { background: rgba(13,110,253,0.04); padding:4px 6px; border-radius:3px; }

.dedi-reply-client { border-left: 4px solid #198754; box-shadow: 0 1px 0 rgba(25,135,84,0.03); }
.dedi-reply-client .dedi-reply-header { background: rgba(25,135,84,0.03); padding:4px 6px; border-radius:3px; }

/* Accessibility: ensure sufficient contrast in meta text */
.dedi-reply .dedi-reply-meta div { color: #444; } 

.server-menu-actions {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}

.dedispec-menu-active,
.dedispec-menu-active > i {
	display: inline-block;
	font-weight: 900 !important;
	text-shadow: 0.5px 0 currentColor, -0.5px 0 currentColor;
	transform: scale(1.14);
}