/* (c) 2024 Johnson Controls. All rights reserved. */

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: .7em;
	background-color: #E1E1E1;
}

h2 {
	display: inline-block;
}

label {
	float: left;
	text-align: right;
	width: 10em;
	padding-right: 20px;
}

select {
	width: 100%;
}

table {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	table-layout: fixed;
}

.externalStorageWarning {
	border: none !important;
	display: none;
}

.externalStorageWarningImage {
	float: left;
	margin-right: 5px;
	transform: scale(1.35);
}

.spareStorage .spareStorageAmount {
	display: inline-block;
	margin-right: 5px;
}

.spareStorage .spareStorageUnderCap {
	visibility: hidden;
	float: right;
	color: red;
}

th {
	font-weight: none;
	font-size: .8em;
}

button#load {
	position: absolute;
	bottom: 3px;
	right: 50%;
	margin-right: 105px;
	width: 200px;
}

button#next {
	float: right;
}

button.pagePrev, button.pagePrevOptions, button.pagePrevExternalStorage {
	float: left;
	width: 30px;
}

button.pageNext, button.pageNextOptions, button.pageNextExternalStorage {
	float: right;
	width: 30px;
}

button.legacy {
	float: right;
	width: 110px;
	height: 25px;
}

span.pageNum, span.pageNumOptions, span.pageNumExternalStorage  {
	font-weight: bold;
	position: relative;
	left: 50%;
	margin-left: -45px;
	width: 90px;
}

button#prev {
	float: left;
}

button#permalink {
	position: absolute;
	bottom: 3px;
	left: 50%;
	margin-left: -100px;
	width: 200px;
}

#permalinktext {
	width: 275px;
}

#feedback {
	display: none;
	position: absolute;
	top: 50%;
	right: 0px;
	margin-top: -71px;
	cursor: pointer;
	z-index: 2000;
}

#status {
	position: relative;
	top: 10px;
	right: 10px;
	z-index: 999;
}

div#footer {
	padding: 3px;
	position: absolute;
	bottom: 20px;
	left: 7px;
	height: 29px;
	width: 1228px;
	background-color: #357EC7;
}

div#header {
	position: absolute;
	top: 20px;
	left: 7px;
	text-align: center;
	height: 60px;
	width: 1180px;
}

div#help {
	position: absolute;
	border: 2px solid #000000;
	background-color: #FFFFFF;
	padding: 6px;
	width: 400px;
}

iframe.copyrightIframe {
	border: 0;
	width: 100%;
}

div#list_holder {
	position: absolute;
	top: 110px;
	right: 20px;
	bottom: 30px;
	float: right;
	width: 300px;
}

div#loading {
	padding: 10px;
	font-size: 2.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 64px;
	width: 250px;
	margin-left: -125px;
	margin-top: -32px;
	background-color: #FFFFFF;
	color: #007AC3;
	border: 2px solid #007AC3
}

div#modelHolder {
	position: absolute;
	top: 40px;
	left: 10px;
	overflow: auto;
}

#p1_options {
	width: 100%;
	text-align: center;
}

div#tabs {
	position: absolute;
	bottom: 100px;
	top: 90px;
	left: 7px;
	width: 1230px;
	overflow: auto;
}

div#wrapper {
	background-color: #FFFFFF;
	position: absolute;
	bottom: 0px;
	top: 0px;
	left: 50%;
	margin-left: -625px;
	width: 1250px;
}

li#abouttab {
	float: right;
}

li.aboutSubtab {
	float: right !important;
	margin-top: 12px !important;
}

select#res_picker {
	width: 150px;
}

.resetSensorCount {
	white-space: nowrap;
	text-align: center;
}

select#sortBy {
	width: 150px;
}

button.refresh {
	width: 140px;
	height: 26px;
	margin-left: 5px;
}

#menu, #sort {
	display: inline-block;
	vertical-align: top;
}

table#cameras {
	text-align: center;
	border-collapse: collapse;
	width: 100%;
}

table#selectModels, table#optionsTable {
	border-collapse: collapse;
}

.blue {
	background-color: #357EC7;
	color: #FFFFFF;
	text-align: center;
	height: 50px;
}

.delete {
	height: 26px;
	float: right;
	margin-right: 3px !important;
}

.dialog {
	display: none;
}

.edit {
	position: relative;
	top: -1px;
	height: 26px;
	margin-left: 3px;
}

.email {
	width: 300px;
}

.green {
	color: #40AE49;
	font-weight: bold;
}

.heading {
	color: #FFFFFF;
	margin: 10px;
}

.highlight {
	text-align: right;
	width: 6%;
	border-collapse: collapse;
	padding: 5px;
	background: rgb(248, 155, 66) transparent;
	background: rgba(248, 155, 66, 0.6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99F89B42, endColorstr=#99F89B42);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99F89B42, endColorstr=#99F89B42)";
}

.info {
	padding: 5px;
	width: 150px;
	text-align: right;
}

.left {
	text-align: left;
}

.login {
	display: inline-block;
	float: right;
	padding: 4px;
}

.multi {
	height: 26px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.cost_column, .list_column {
	text-align: right;
	padding-left: 26px;
}

.list_title, .cost_title {
	text-align: center;
}

.right {
	text-align: right;
}

.spacer {
	margin-left: 15px;
}

.ui-tabs-disabled {
	display: none;
}

.user {
	width: 500px;
}

.warnings {
	background-color: #F89B42;
	border: 1px solid #000000;
	padding: 5px;
}

.wide {
	width: 150px;
}

.wider {
	width: 255px;
}

.modelDDWidth {
	width: 275px;
}

.fpsDDWidth {
	width: 50px;
	margin-left: 7px;
}

label#extStoQuestion {
	float: none;
	text-align: right;
	width: 100%;
	padding-right: 20px;
}

button.right {
	float: right;
}

div.resize {
	overflow: auto;
}

input.edit {
	width: 50px;
}

input.short {
	height: 14px;
	width: 24px;
	padding: 4px;
	text-align: center;
}

input.long {
	padding: 4px;
	height: 14px;
	width: 95px;
}

input.qtyField {
	width: 50px;
}

select.left {
	float: left;
}

select.narrow {
	width: 85px;
}

span.ui-selectmenu-status {
	line-height: 150%;
}

.selectmenuAlter {
	pointer-events: none;
}

tr.serverRow > td, tr.optionRow > td, tr.externalStorageRow > td {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 4px;
	padding-right: 4px;
}

tr.serverRow > th, tr.optionRow > th, tr.externalStorageRow > th {
	padding: 10px;
}

.cam_warning {
	display: none;
	position: absolute;
	margin-top: 7px;
	left: 5px;
}

.topalign {
	vertical-align: top;
}

#finalServers, #finalExternalStorage, #finalDiff {
	width: 100%;
}

#discount {
	display: none;
	float: right;
}

#discountlevel {
	width: 100px !important;
}

.DisplayIt {
	visibility: visible;
	display: block;
}

.HideIt {
	visibility: hidden;
	display: none;
}

#ModelHoverNote {
	color: red;
}

.hidden_row {
	display: none;
}

.parent_border {
	border: 1px dashed;
	border-bottom: 0;
}

.child_border {
	border: 1px dashed;
	border-top: 0;
}

table#externalStorageTable {
	border-collapse: collapse;
	margin: auto;
}

.centered-text {
    text-align: center;
}

div#optionsTable_wrapper,
div#selectModels_wrapper {
	display: contents;
}

div#optionsTable_filter,
div#externalStorageTable_filter,
div#selectModels_filter {
	float: left;
}

.dataTables_wrapper .dataTables_filter input {
	border: 1px solid#a6c9e2;
	border-radius: 5px;
}

.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid#a6c9e2;
	border-radius: 5px;
	font-weight: bold;
	color: #007ac3;
	background: #e8f3fc;
}

.dataTables_wrapper .paginate_button:hover {
	border: 1px solid#a6c9e2 !important;
	border-radius: 5px !important;
	background: #f89b42 !important;
}

.dataTables_wrapper .paginate_button.current {
	border: 1px solid#a6c9e2 !important;
	border-radius: 5px !important;
	margin-bottom: 5px;
}

.dataTables_wrapper .dataTables_paginate {
	margin-top: 5px;
}

input.qty_input,
input.qty_storage,
input.sQty_input {
	width: 50px;
}

button.selectModels {
	width: 63px;
	height: 24px;
}

.legacyRow {
	background-color: #FFF9B0 !important;
}

.selectedDataTableRow {
	background-color: rgb(153, 204, 255) !important;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.server_spare_net,
.server_spare_stor,
.server_num_sets,
.server_spare_analog,
.server_spare_ip {
	text-align: right;
}

#spareNetCapUnit {
	float: right;
	width: 214px;
	height: 25px;
	margin-right: 5px;
}

tr.slider {
	display: none;
}
/* CSS for disabling the table */
.disabled-table {
	pointer-events: none; /* Disable all interactions */
	opacity: 0.6; /* Make the table look grayed out */
}

/* Overlay style for complete disabling effect */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
	pointer-events: none;
	z-index: 10;
}

/* Table container style to position overlay correctly */
.table-container {
	position: relative;
	display: inline-block;
}