/*!
 * Coates custom CSS for nisient IoTransit v6.0.0 CSS
*/

/* remove the single-line limit from the header row */
.dgrid-header .dgrid-cell {
	text-overflow: initial;
	white-space: normal;
}

/* custom row colors for our statuses */
.dgrid-cell {
	border-color: hsl(0, 0%, 90%) !important;
}

.row-clear:hover {
	background-color: hsl(0, 0%, 90%) !important;
}

.row-black {
	color: #000000;
	background-color: hsl(0, 0%, 80%);
}
.row-black:hover {
	color: #000000;
	background-color: hsl(0, 0%, 70%) !important;
}

.row-strike {
	color: #000000;
	background-color: hsl(0, 0%, 80%);
	text-decoration: line-through;
}
.row-strike:hover {
	color: #000000;
	background-color: hsl(0, 0%, 70%) !important;
}

.row-purple {
	background-color: hsl(288, 15%, 80%);
}
.row-purple:hover {
	background-color: hsl(288, 25%, 70%) !important;
}

.row-green {
	color: #000000;
	background-color: hsl(134, 80%, 80%);
}
.row-green:hover {
	background-color: hsl(134, 90%, 70%) !important;
}

.row-grey {
	color: #000000;
	background-color: hsl(0, 0%, 95%);
}
.row-grey:hover {
	background-color: hsl(0, 0%, 85%) !important;
}

.row-yellow {
	background-color: hsl(56, 80%, 80%);
}
.row-yellow:hover {
	background-color: hsl(56, 90%, 70%) !important;
}

.row-orange {
	background-color: hsl(34, 80%, 80%);
}
.row-orange:hover {
	background-color: hsl(34, 90%, 70%) !important;
}

.row-red {
	color: #000000;
	background-color: hsl(355, 80%, 80%);
}
.row-red:hover {
	background-color: hsl(355, 90%, 70%) !important;
}

.row-blue {
	background-color: hsl(211, 80%, 80%);
}
.row-blue:hover {
	background-color: hsl(211, 90%, 70%) !important;
}


/* this is our custom labels headers to group options in the details/column picker/filter popups */
.switchboard-label {
	display: inline-block;
	width: 100%;
	margin-top: 1em;
	font-weight: bold;
	border-bottom: solid 1px black;
}


/* custom setup and hover effects for the various rows of buttons */
.dojoxFisheyeListItemImage, #login, .sideTab, .actionbuttonleft {
	background-color: transparent;
	filter: saturate(0.0);
	transform: scale(0.75);
	transition: filter 250ms, transform 250ms;
}

.sideTab {
	transform: scale(0.6);
}

.dojoxFisheyeListItemImage:hover, #login:hover, .sideTab:hover, .actionbuttonleft:hover {
	filter: saturate(1.0);
	transform: scale(1.0);
}

.dojoxFisheyeListItemImage:active, #login:active, .sideTab:active, .actionbuttonleft:active {
	filter: saturate(1.5);
}

.sideTabSelected {
	background-color: transparent;
	filter: saturate(0.8);
	transform: scale(0.8);
}


/* custom backdrop for all popups */
.dijitDialogUnderlay {
	opacity: 1.0 !important;
	background-color: rgba(255,255,255,0.3) !important;
	backdrop-filter: saturate(0.25);
	-webkit-backdrop-filter: saturate(0.25);
}


/* fix some of the popups being way too narrow */
.filterlabel {
	width: 200px;
}


/* fix the fidgeting buttons in the top right */
.dojoxFisheyeListItem {
	top: 0px !important;
	width: 40px !important;
	height: 40px !important;
}

/* fix the change password button overlapping the confirm password box */
span[widgetid="changepasswordb"] {
	margin-top: 1em;
}


/* fix wobbly +/- buttons at the top of the date picker */
.dijitCalendarDecrementArrow, .dijitCalendarIncrementArrow {
	line-height: 20px !important;
	border: 1px solid transparent !important;
	padding: 4px !important;
}
.dijitCalendarDecrementArrow:hover, .dijitCalendarIncrementArrow:hover {
	border: 1px solid #d0d0d0 !important;
}

@media (prefers-color-scheme: dark) {
	/* The main purpose of this is to change the scrollbar color on Chrome */
	:root {
		color-scheme: dark;
	}

	.basecolour {
		color: #ffffff;
	}

	.content {
		background-color: #000000;
	}

	fieldset {
		border-color: #575757;
	}

	#bc1 {
		color: #ffffff;
		background-color: #111111;
	}

	#bc1t {
		color: #ffffff;
		background-color: #000000;
	}

	.dijitTooltipDialog .dijitTooltipContainer {
		color: #ffffff !important;
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.dijitTabPaneWrapper {
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.dijitTabContainerTop-dijitContentPane, .dijitTabContainerLeft-dijitContentPane, .dijitTabContainerBottom-dijitContentPane, .dijitTabContainerRight-dijitContentPane, .dijitAccordionContainer-dijitContentPane {
		background-color: #000000 !important;
	}

	.dijitTab {
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.dijitTabHover {
		background-color: #0b0b0b !important;
	}

	.dijitTabChecked.dijitTabHover, .dijitTabChecked.dijitTabActive {
		color: #d5d2cc !important;
	}

	.dgrid {
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.dgrid-header, .dgrid-header-row, .dgrid-footer {
		background-color: #0b0b0b !important;
	}

	.ui-widget-header .dgrid-cell:hover {
		background: linear-gradient(#0a0a0a,#1f1f1f) !important;
	}

	.dgrid-cell {
		border-color: hsl(0, 0%, 10%) !important;
	}

	.row-clear:hover {
		color: #ffffff;
		background-color: hsl(0, 0%, 10%) !important;
	}

	.ui-state-default:hover {
		background-color: hsl(0, 0%, 10%) !important;
	}

	.ui-state-active, .ui-state-active:hover, .ui-state-active:active {
		background-color: hsl(0, 0%, 10%) !important;
	}

	.row-black {
		color: #ffffff;
		background-color: hsl(0, 0%, 20%);
	}
	.row-black:hover {
		color: #ffffff;
		background-color: hsl(0, 0%, 30%) !important;
	}

	.row-strike {
		color: #ffffff;
		background-color: hsl(0, 0%, 20%);
		text-decoration: line-through;
	}
	.row-strike:hover {
		color: #ffffff;
		background-color: hsl(0, 0%, 30%) !important;
	}

	.row-purple {
		background-color: hsl(288, 15%, 20%);
	}
	.row-purple:hover {
		background-color: hsl(288, 25%, 30%) !important;
	}

	.row-green {
		color: #ffffff;
		background-color: hsl(134, 80%, 20%);
	}
	.row-green:hover {
		background-color: hsl(134, 90%, 30%) !important;
	}

	.row-grey {
		color: #ffffff;
		background-color: hsl(0, 0%, 5%);
	}
	.row-grey:hover {
		background-color: hsl(0, 0%, 15%) !important;
	}

	.row-yellow {
		color: #ffffff;
		background-color: hsl(56, 80%, 20%);
	}
	.row-yellow:hover {
		background-color: hsl(56, 90%, 30%) !important;
	}

	.row-orange {
		color: #ffffff;
		background-color: hsl(34, 80%, 20%);
	}
	.row-orange:hover {
		background-color: hsl(34, 90%, 30%) !important;
	}

	.row-red {
		color: #ffffff;
		background-color: hsl(355, 80%, 20%);
	}
	.row-red:hover {
		background-color: hsl(355, 90%, 30%) !important;
	}

	.row-blue {
		color: #ffffff;
		background-color: hsl(211, 80%, 20%);
	}
	.row-blue:hover {
		background-color: hsl(211, 90%, 30%) !important;
	}

	.dgrid-column-events svg {
		fill: #00a2de;
	}

	.appletbackground {
		background-color: #111111;
	}

	.appletfooter {
		background-color: #000000;
		border-color: #303030;
	}

	#bc1b {
		color: #000000;
		background-color: #ffffff;
	}

	.dijitDialog {
		color: #ffffff !important;
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.dijitDialogTitleBar {
		background-color: #303030 !important;
		border-color: #111111 !important;
	}

	.dijitDialogPaneContent {
		background-color: #000000 !important;
	}

	.dijitCheckBox:not(.dijitCheckBoxChecked):not(.dijitCheckBoxHover) {
		background-color: #0b0b0b !important;
		border-color: #303030 !important;
	}

	.dijitCheckBoxHover:not(.dijitCheckBoxChecked) {
		background-color: #0b0b0b !important;
	}

	.dijitButton .dijitButtonNode, .dijitDropDownButton .dijitButtonNode, .dijitComboButton .dijitButtonNode, .dijitToggleButton .dijitButtonNode {
		background: #0b0b0b !important;
		border-color: #303030 !important;
		text-shadow: 0 1px 1px rgba(0,0,0,0.75) !important;
	}

	.dijitButtonHover .dijitButtonNode, .dijitDropDownButtonHover .dijitButtonNode, .dijitToggleButtonHover .dijitButtonNode {
		background: linear-gradient(#0a0a0a, #1f1f1f) !important;
		box-shadow: 0 1px 1px rgba(255,255,255,0.2) !important;
	}

	.dijitTextBox:not(.dijitTextBoxHover) {
		color: #ffffff !important;
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.dijitTextBoxHover {
		color: #ffffff !important;
		background-color: #000000 !important;
	}

	.dijitInputInner {
		color: #ffffff;
	}

	.dijitPlaceHolder {
		color: #707070 !important;
	}

	.dijitComboBox .dijitButtonNode {
		background: #0b0b0b !important;
		border-color: #303030 !important;
	}

	.dijitCalendar {
		color: #ffffff !important;
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.dijitCalendarArrowHover, .dijitCalendarArrow:hover, .dijitCalendarNextYearHover, .dijitCalendarNextYear:hover, .dijitCalendarPreviousYearHover, .dijitCalendarPreviousYear:hover {
		background: #0b0b0b !important;
		border-color: #303030 !important;
	}

	.dijitSelect {
		background: #0b0b0b !important;
		border-color: #303030 !important;
		text-shadow: 0 1px 1px rgba(0,0,0,0.75) !important;
	}

	.dijitSelectHover {
		background: linear-gradient(#0a0a0a, #1f1f1f) !important;
		box-shadow: 0 1px 1px rgba(255,255,255,0.2) !important;
	}

	.dijitMenu {
		color: #ffffff !important;
		background-color: #000000 !important;
		border-color: #626262 !important;
	}

	select {
		color: #ffffff !important;
		background-color: #000000 !important;
		border-color: #303030 !important;
	}

	.json-formatter-row, .json-formatter-row a, .json-formatter-row a:hover {
		color: #ffffff !important;
	}

	.json-formatter-row .json-formatter-constructor-name {
		color: #606060 !important;
	}

	.json-formatter-row .json-formatter-key {
		color: #6060ff !important;
	}

	.json-formatter-row .json-formatter-number, .json-formatter-row .json-formatter-bracket {
		color: #60a0ff !important;
	}

	.json-formatter-row .json-formatter-string, .json-formatter-row .json-formatter-stringifiable {
		color: #60ff60 !important;
	}

	.json-formatter-row .json-formatter-boolean {
		color: #ff6060 !important;
	}

	.dijitDialogUnderlay {
		background-color: rgba(0,0,0,0.3) !important;
	}

	.switchboard-label {
		border-color: #ffffff;
	}
}