body {
	//font-size: 0.8em;
   // transform: scale(1.0);
   // transform-origin: 0 0;
   // add prefixed versions too.
}

.zoom:hover {
  -ms-transform: scale(3.0); /* IE 9 */
  -webkit-transform: scale(3.0); /* Safari 3-8 */
  transform: scale(3.0); 
}

.dropdown-menu {
  top: unset;
}

.tooltip-inner {
 	 max-width: 400px;
 }

.tooltip {
	 line-height: 1.0;
	 white-space: nowrap;
}

.account-user-name{
	margin-top: 12px;
}

.container-fluid{
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 15px;
}


.content-pagex{
	padding: 0.0em;
}

.contentx {
	padding: 0.0em;
	padding-top: 1.0em; 
}

body {
	line-height: 1.2;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #f6fbff;
    opacity: 1;
}

.form-group{
	margin-bottom: 0.4em;
}

.standardform{
	margin-bottom: 1.4em;
}

.custom-select-width {
    width: auto !important; /* Overrides Bootstrap's default 100% width */
    /* or use width: fit-content; for modern browsers */
}

/* make <tr> hoverable display for clickable */
tr:hover { 
    background-color: whitesmoke;
    opacity: 1;
}
td a { 
   display: block; 
}

.table td{
	cursor: default;
}

.table-nowrap td {
  width: fit-content;
}

fieldset{
	margin-top: 1.2em;
	border-bottom: 1px solid;
	border-color: var(--light);
	margin-bottom: 1.0em;
}
legend {
	font-size: 1.2em;
	background-color: var(--light);
	padding: 6px;
	border-radius: 3px;

}

.side-nav .side-nav-title {
    color: #cedce4 !important;
    background: rgb(154 161 171 / 15%);
}

.table-smalltext{
	font-size: 12px;
}

.table-smalltext td {
	padding: 0.3rem;
}

.asteriskField {
    display: none;
}

.channel-img{
	max-width: 24px;
	background-color: #eef2f7;
	padding: 1px;
	border-radius: 4px;

}

.channel-img2{
	max-width: 100px;
	background-color: #eef2f7;
	padding: 3px;s
	border-radius: 8px;

}

.fa-opaque{
	opacity:0.5;
	color: #cccaca;
}



.bullets-packages ul {
	list-style-type: none;
    padding-inline-start: 0px;
}

.bullets-packages ul li {
    line-height: 1.7rem;
    vertical-align: top;
}
.bullets-packages ul li::before {
	list-style-type: none;
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    color:  -internal-light-dark;
    font-weight: 900;
    margin-left: 10px;
    margin-top: 10px;
    padding-right: 30px;
    font-size: 20px;
    vertical-align: top;
}

.btn-xsm{
	line-height: 0.7;
	padding: 0.2rem 0.6rem;
}


#formcontrols {
    padding-left: 30px;
    padding-top: 5px;
    background-color: #ffffff;
    min-height: 60px;
    position: fixed;
    left: 260px;
    top: 10px;
    width: 700px;
    right: 0;
    z-index: 1001;
}

.statusbadge {
	padding-top: 5px !important; 
	border: 5px solid;
	border-radius: 5px;
	padding: 2px 9px 4px 9px;
}
.statusbadge.disabled {
	border-color: red;
	color: red;
}
.statusbadge.occupied {
	border-color: red;
	color: red;
}
.statusbadge.active {
	border-color: green;
	background-color: green;
	color: white;
}
.statusbadge.suspended {
	border-color: black;
	background-color: yellow;
	color: black;
}
.statusbadge.closed {
	border-color: black;
	color: black;
}
.statusbadge.prospect {
	border-color: purple;
	color: purple;
}

.statusbadge.pending {
	border-color: black;
	background-color: yellow;
	color: black;
}

.statusbadge.list {
	border: 1px solid;
	padding-top: 10px;
	padding: 1px 9px 2px 9px !important;
    bottom: 0;
    position: relative;
}

.spinner-border-sm{
	margin-top: 2px;
	margin-left: 5px;
}

._item {
	cursor: pointer
}

.devicelist {
	display:flex;
	flex-wrap: wrap;
}

.devicebox {
	position:relative;
	color: white;
	width: 120px;
	height: 120px;
	padding: 5px;
	margin: 2px;
	border-radius: 7px;
	background-color: red;
}

.devicelist .header {
	width: 100%;
}

/* Leading colour chip in the device-support list view — mirrors the tile background. */
.status-badge {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	vertical-align: middle;
}

/* Row dropdowns in the list view use the default menu size, not the tile's 25px. */
.devicetable .dropdown-menu {
	font-size: 14px;
}

/* The controls row aligns the property select and the view toggle on their
   bottom edges. Flexbox aligns margin boxes, so the crispy .form-group's own
   bottom margin would otherwise offset the select against the button. */
.devicecontrols .form-group {
	margin-bottom: 0;
}

/* A <select> takes its intrinsic width from its longest option, and iOS Safari
   sizes native selects more generously than Chrome — with long property names
   the pair no longer fits a phone and the toggle wrapped to a second line.
   The row therefore never wraps: the select shrinks instead (a flex item will
   not shrink past its content width until min-width is cleared) and the toggle
   holds its size. */
.devicecontrols > div:first-child {
	min-width: 0;
	flex: 0 1 auto;
}

.devicecontrols > div:first-child form,
.devicecontrols .form-group {
	min-width: 0;
}

.devicecontrols > div:last-child {
	flex: 0 0 auto;
}

.devicecontrols #viewtoggle {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Device-support list view — mobile layout.

   Ten columns cannot fit a phone, and the page wrappers (.content-page,
   .wrapper) are overflow:hidden, so anything wider than the viewport is
   clipped and unreachable rather than scrollable. Below the lg breakpoint each
   row therefore becomes a stacked card laid out as a grid: one header line
   holding the status chip, room number, device ID and tools button, with the
   remaining cells collapsed underneath until the header is tapped.

   The breakpoint is lg, not md: ten columns still overflow their container at
   portrait-tablet widths, so anything under 992px gets the stacked layout.

   A .table-responsive wrapper is deliberately NOT used — its overflow-x
   creates a clipping context that cuts off the open tools dropdown.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

	.devicetable thead {
		display: none;
	}

	.devicetable,
	.devicetable tbody {
		display: block;
		width: 100%;
	}

	.devicetable tr {
		display: grid;
		grid-template-columns: auto auto 1fr auto;
		align-items: center;
		border: 1px solid #dee2e6;
		border-radius: 6px;
		margin-bottom: 8px;
		padding: 8px 12px;
	}

	/* Detail cells span the full card width and stay collapsed until the row is
	   opened. Field name on the left, value on the right. */
	.devicetable td {
		display: none;
		grid-column: 1 / -1;
		justify-content: space-between;
		align-items: center;
		border: 0;
		padding: 3px 0;
		text-align: left !important;
	}

	.devicetable tr.is-open td {
		display: flex;
	}

	.devicetable td::before {
		content: attr(data-label);
		font-weight: 600;
		margin-right: 12px;
		white-space: nowrap;
	}

	/* --- header line: always visible, one grid row ---
	   grid-row is pinned so the tools button stays on the header line instead of
	   auto-flowing below the detail cells once the row is expanded. */
	.devicetable td.cell-badge,
	.devicetable td.cell-room,
	.devicetable td.cell-deviceid,
	.devicetable td.cell-tools {
		display: flex;
		align-items: center;
		/* detail cells space label and value apart; header values sit together */
		justify-content: flex-start;
		grid-row: 1;
		padding: 0;
	}

	.devicetable td.cell-badge {
		grid-column: 1;
		margin-right: 10px;
	}

	.devicetable td.cell-room {
		grid-column: 2;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
	}

	.devicetable td.cell-deviceid {
		grid-column: 3;
		cursor: pointer;
		overflow: hidden;
		min-width: 0;
	}

	/* A long device ID must ellipsis rather than run under the tools button. */
	.devicetable td.cell-deviceid > span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	.devicetable td.cell-room,
	.devicetable td.cell-deviceid::before {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Separates the two header values: 110 | S2004059920355 */
	.devicetable td.cell-deviceid::before {
		content: "|";
		font-weight: 400;
		color: #adb5bd;
		margin: 0 8px 0 0;
		padding-left: 8px;
	}

	.devicetable td.cell-tools {
		grid-column: 4;
	}

	/* These are placed by the grid, so they take no ::before label. */
	.devicetable td.cell-badge::before,
	.devicetable td.cell-room::before,
	.devicetable td.cell-tools::before {
		content: none;
	}

	/* The open menu is taller than the gap under the fixed 70px topbar (z-index
	   1001), so on a phone Popper flips it upward and its first items end up
	   behind that bar. Lift it over the topbar and cap it to the viewport. */
	.devicetable .dropdown-menu {
		z-index: 1002;
		max-height: calc(100vh - 16px);
		overflow-y: auto;
	}

	/* mt-5 exists to clear the fixed filter bar; once that is back in flow the
	   gap is just dead space. */
	.devicecontrols {
		margin-top: 0 !important;
	}

	/* The filter bar is a fixed 700px panel pinned beside the desktop sidebar;
	   at phone widths that lands it off-screen, so return it to normal flow. */
	#formcontrols {
		position: static;
		left: auto;
		top: auto;
		right: auto;
		width: auto;
		min-height: 0;
		padding-left: 0;
		background-color: transparent;
	}
}

.devicebox .room {
	top: 4px;
	left: 4px;
	position: absolute;
	font-size: 26px;
}

.devicebox .networktype {
	top: 4px;
	right: 7px;
	position: absolute;
	font-size: 16px;
}
.devicebox .location {
	top: 31px;
	left: 4px;
	position: absolute;
	font-sizex: 20px;
}

.devicebox .deviceid {
	position: absolute;
	bottom: 4px;
	font-size: 11px;
}

.devicebox .firmware {
	position: absolute;
	bottom: 18px;
	font-size: 11px;
}

.devicebox .battery {
	right:7px;
	position: absolute;
	bottom: 18px;
	font-size: 11px;
}

.devicebox .guestname {
	position: absolute;
	top: 54px;
	font-size: 12px;
}

.devicebox .status {
	position: absolute;
	top: 74px;
	font-size: 10px;
}
.devicebox .toucharea {
	position: absolute;
	top: 30px;
	width: 120px;
	height: 60px;
}

.devicebox .dropdown-menu {
	font-size: 25px;
}

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 39%;
  right: 0;
  color: grey;
  border-top: 3px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-20deg);
  -moz-transform:rotate(-20deg);
  -ms-transform:rotate(-20deg);
  -o-transform:rotate(-20deg);
  transform:rotate(-20deg);
}