:root {
	--sidebar-padding-x: var(--block-size-standard);
	--sidebar-padding-y: var(--block-size-standard);
}

.dashboard {
	grid-auto-rows: 1fr;
	grid-auto-columns: 1fr;
	display: grid;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
	gap: var(--block-size-sm);
}

.dashboard__panel {
	z-index: 10;
}

.dashboard__panel>.card-frame {
	height: 100%;
	border: none;
}

main {
	min-height: 0;
}

.fa-stack .fa-slash {
	color: var(--bs-danger);
}

.opacity-half {
	opacity: .5;
}

.op-pagination {
	width: fit-content;
	gap: 10px;
	margin: 0 auto;
}

.op-pagination .page-item.disabled {
	opacity: .5;
	pointer-events: none;
}

.op-pagination .page-item {
	background-color: transparent;
	cursor: pointer;
	height: 34.5px;
	color: slategray;
	border-radius: 10%;
	min-width: 34.5px;
}

.op-pagination .page-item.active {
	background-color: var(--theme-colour);
	box-shadow: 0px 0px 5px 2px rgba(154, 108, 184, 0.3);
	color: white;
}

.op-pagination a {
	border: none;
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	padding: 0px;
	margin: auto !important;
	width: fit-content;
	align-items: center;
	display: flex;
	font-weight: 500;
	color: inherit !important;
	height: 100%;
	background-color: transparent !important;
}

.hide {
	opacity: 0;
}

.probe-actions {
	transition: opacity 0.5s;
}

.op-table td {
	vertical-align: middle;
}

.op-loginbox {
	box-shadow: var(--default-box-shadow);
	border-radius: var(--standard-border-radius);
}

.op-loginboxheader {
	padding: 0;
	background: var(--card-background-colour);
	position: relative;
	border: 0;
	border-radius: var(--standard-border-radius) var(--standard-border-radius) 0 0;
}

.modal .op-loginboxheader {
	border-bottom: 7.3px solid #9B6CB8;
}

.op-logintitle:not(.position-relative) {
	top: 50%;
	position: absolute;
	transform: translateY(-50%);
}

.op-loginbox .op-loginboxheader .op-logintitle h1 {
	font-size: 2em;
	font-variant: small-caps;
	font-weight: 500;
}

.op-loginheaderlogo-v5,
.op-logintitle {
	padding: 15px 40px 0px 20px;
}

.op-loginheaderlogo-v5 img {
	height: 40px;
	margin: 10px 0px 0px 0px;
}

.op-loginboxbody {
	padding: 1.5em;
	border-top: 0;
	border-radius: 0 0 3px 3px;
	background: var(--card-background-colour);
}

.op-loginboxbody .form-group {
	padding-top: .25rem;
	margin-bottom: .75rem;
}

.op-loginboxbody .form-control {
	font-size: 16px !important;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
}

.op-loginboxbody .col-form-label {
	font-size: 16px !important;
	padding-top: calc(0.375rem + 1px);
	padding-bottom: calc(0.375rem + 1px);
	height: auto;
}

@media (max-width: 770px) {
	.op-loginboxbody .col-form-label {
		text-align: left;
		padding-left: 1.5em;
	}
}

.op-versionfooter {
	font-size: var(--body-font-size-sm);
	margin-top: var(--block-size-xs);
	color: var(--body-colour-faded);
	text-align: right;
	transition: color .2s;
	border-radius: 0 0 3px 3px;
}

.op-versionfooter:hover {
	color: var(--body-colour);
}

.op-footerbuttonbar-bottom {
	position: fixed;
	bottom: 0;
	z-index: 99;
}

.op-footerbuttonbar {
	display: block;
	width: 100%;
	transition: all .6s;
}

.op-footerbuttonbar .container {
	width: 100% !important;
}

.op-emptyfooter {
	height: 40px;
}

.op-editable-label {
	cursor: inherit;
	margin: 0px;
}

.form-group {
	margin-bottom: .5rem;
}

.form-inline>select {
	margin-left: 0;
}

.op-pagesummary {
	font-size: 1.5em;
	background: #23282e;
	color: #fff;
	padding: 8px 0 6px 0;
	font-weight: 500;
	margin-bottom: 15px;
}

.op-headerstatusbuttons {
	padding-right: 15px;
	border-right: 1px solid rgba(255, 255, 255, .4);
	margin-right: 15px;
}

.op-headerstatusbuttons .btn {
	position: relative;
	top: -3px;
	font-weight: 700;
	font-size: 15px;
}

.op-headerstatusbuttons .btn .far {
	position: relative;
	top: 0px;
	margin-right: 5px;
}

.op-pagesummary .col-md-12 {
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
}

.op-pagesummary i.fal {
	opacity: 0.7;
}

.op-divider {
	height: 0;
	margin: .5rem 0;
	overflow: hidden;
	border-top: 1px solid #e5e5e5;
}

.op-fauxtablerow {
	border-top: 1px solid #ddd;
	padding-top: 10px;
	padding-bottom: 0px;
}

select.form-control {
	-webkit-appearance: none;
	appearance: none;
	background: #fff url(images/caret.png);
	background-size: 18px;
	background-position: calc(100% - 8px) 49.8%;
	background-repeat: no-repeat;
}

.form-control::-moz-placeholder {
	color: #bbb;
}

.form-control:-ms-input-placeholder {
	color: #bbb;
}

.form-control:-moz-placeholder {
	color: #bbb;
}

input::placeholder {
	color: #bbb;
}

.form-control::-webkit-input-placeholder {
	color: #bbb;
}

label>.fal,
label>.far {
	margin-right: 5px;
}

.op-footerbuttons {
	background: #2e353d;
	margin-top: 30px;
	padding: 15px;
	text-align: right;
}

/* NEW SMC */

.op-pagesummary .h6.text-muted {
	color: #ccc !important;
	padding-left: 15px;
}

.op-header-brand {
	text-align: center !important;
	padding: 0 !important;
	line-height: 1em !important;
	height: 52px;
	position: relative;
}

.op-header-brand img {
	max-width: 155px;
	padding: 10px 0 5px 5px;
}

.op-header-brand-version {
	font-size: 10px;
	color: #aaa !important;
	position: absolute;
}

.op-editpanel-divider-heading {
	font-size: 1.1rem;
	font-weight: 500;
	padding: 10px 0;
	background: #eee;
	margin: 0 -15px 0 -15px;
	padding-left: 15px;
}

#divSettings .ui-sortable {
	padding: 0;
	margin-bottom: 0 !important;
}

#divSettings .ui-sortable li {
	background: #fff;
	max-height: 500px;
	transition: max-height 0.5s;
}

#divSettings .ui-sortable .ui-sortable-helper {
	box-sizing: border-box;
}

#divSettings .ui-sortable .ui-sortable-helper::after,
#divSettings .ui-sortable .ui-sortable-helper::before {
	content: "";
	display: block;
	height: 1px;
}

#divSettings .ui-sortable .ui-sortable-helper li {
	border: 10px solid #fff;
	border-radius: var(--standard-border-radius);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	max-height: 100px;
	transition: max-height 0.5s;
	overflow: hidden;
}

#divSettings .ui-sortable .ui-sortable-placeholder {
	max-height: 1000px !important;
	transition: max-height 0.5s;
}

#divSettings .ui-sortable .ui-sortable-helper+.ui-sortable-placeholder {
	max-height: 100px !important;
	transition: max-height 0.5s;
}

.op-emptypanel {
	opacity: 0;
	transition: all 0.5s;
	border: 3px dashed rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}


.op-emptypanel:hover {
	opacity: 1;
	transition: all 0.5s;
}

.op-dashboardtabs .dropdown-menu {
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: 600 !important;
}

.op-card-tools a.btn {
	color: #aaa;
	transition: all 0.5s;
}

.op-card-tools a.btn:hover {
	color: #000;
	transition: all 0.5s;
}

.dropdown-item {
	cursor: pointer;
}

ul li.op-sensor-item {
	padding: 1em;
	margin: 1em 0px;
	background-color: white;
	box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
}

.op-sensor-item .op-sensor-item-dragbar {
	background: #fff;
	transition: all 0.5s;
	padding: 5px 5px 5px 0;
	margin-bottom: 1rem;
	cursor: row-resize;
	border-radius: 0 4px 4px 0;
}

.op-sensor-item .op-sensor-item-dragbar .fa {
	float: right;
	padding: 3px;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	opacity: 0;
	transition: all 0.5s;
}

.op-sensor-item .op-sensor-item-dragbar:hover {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 20%, rgba(245, 245, 245, 1) 100%);
	transition: all 0.5s;
}

.op-sensor-item .op-sensor-item-dragbar:hover .fa {
	opacity: 1;
	transition: all 0.5s;
}

ul li:first-child {
	/* This won't work as UL > DIV > LI so LI will always be one child, argh! */
	border-top: 0;
}

.op-sensor-item:last-child {
	margin-bottom: 0px;
}

.form-check-label {
	cursor: pointer;
}

.access-denied-container {
	position: absolute;
	left: 50%;
	text-align: center;
	color: var(--theme-colour);
	top: 25%;
	font-weight: 500;
	transform: translate(-50%, -50%);
}

.access-denied-container>h1,
.access-denied-container span {
	color: #7B479C;
}

.access-denied-container span {
	cursor: pointer;
}

.container-fluid {
	position: relative;
}

.op-modal .icon-box {
	background-color: var(--modal-theme);
	height: 75px;
	width: 75px;
	font-size: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.op-modal-error {
	--modal-theme: var(--bs-danger);
}

.op-modal-success {
	--modal-theme: var(--bs-success);
}

.op-modal-confirm {
	--modal-theme: var(--theme-colour);
}

.op-modal .wave-shape-container path,
.op-modal .modal-title {
	color: var(--modal-theme);
	fill: var(--modal-theme);
}

.op-modal-error .icon-box i:before {
	content: "\f00d";
}

.op-modal-success .icon-box i:before {
	content: "\f00c";
}

.op-modal-confirm .icon-box i:before {
	content: "\f128";
}

.op-modal .btn-affirmative,
.op-modal .btn-negative {
	min-width: 175px !important;
}

.op-modal-error .btn-themed {
	--bs-btn-color: #fff;
	--bs-btn-bg: #dc3545;
	--bs-btn-border-color: #dc3545;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #bb2d3b;
	--bs-btn-hover-border-color: #b02a37;
	--bs-btn-focus-shadow-rgb: 225, 83, 97;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #b02a37;
	--bs-btn-active-border-color: #a52834;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.op-modal .btn-affirmative {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--theme-colour);
	--bs-btn-border-color: var(--theme-colour);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--theme-colour-dark);
}

.op-modal-success .btn-themed {
	--bs-btn-color: #fff;
	--bs-btn-bg: #198754;
	--bs-btn-border-color: #198754;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #157347;
	--bs-btn-hover-border-color: #146c43;
	--bs-btn-focus-shadow-rgb: 60, 153, 110;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #146c43;
	--bs-btn-active-border-color: #13653f;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.op-modal {
	text-align: center;
	font-weight: 500;
}

.op-modal .modal-footer button {
	min-width: 250px;
}

.op-modal .modal-content {
	height: fit-content;
	width: fit-content;
	padding: 2.5em 2.5em 3.5em 2.5em;
	margin: 0 auto;
}

.op-modal .modal-content>* {
	z-index: 100;
}

.wave-shape-container {
	position: absolute;
	bottom: 0;
	padding: 0;
	left: 0;
	margin: 0;
	z-index: -1;
	opacity: .25;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}

.wave-shape-container svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
}

.wave-shape-container .shape-fill {
	fill: var(--bs-danger);
}

path.text-success {
	fill: var(--bs-success);
}

path.text-danger {
	fill: var(--bs-danger);
}

.btn-glow.btn-success {
	box-shadow: 0px 0px 5px 2px rgb(25 135 84 / 25%);
}

.btn-glow.btn-danger {
	box-shadow: 0px 0px 5px 2px rgb(220 53 69 / 25%);
}

.hint-icon {
	margin-right: .5rem;
	opacity: .5;
}

.fw-500 {
	font-weight: 500;
}

.btn-oppidatim-darker {
	background-color: var(--theme-colour-dark);
	border-collapse: var(--theme-colour-dark);
	color: #fff !important;
}

.btn-oppidatim-darker:hover {
	background-color: var(--theme-colour-dark);
	border-color: var(--theme-colour-dark);
}

.btn-oppidatim:active,
.btn-check:checked+.btn-oppidatim {
	background-color: var(--theme-colour-dark);
	border-color: var(--theme-colour-dark);
}

.btn-oppidatim {
	background-color: var(--theme-colour);
	border-color: var(--theme-colour);
	color: #fff !important;
}

.btn-oppidatim:hover {
	background-color: var(--theme-colour-dark);
	border-color: var(--theme-colour-dark);
}

.btn-check:checked+.btn+* {
	font-weight: bold;
}

.popover-header {
	background-color: transparent;
	border: none;
}

.popover-body {
	color: inherit;
	padding-top: 0px;
	font-weight: 500;
}

.popover {
	--bs-popover-arrow-border: #7B479C;
	--bs-popover-bg: #7B479C;
	border: none;
	color: white;
	box-shadow: 0px 0px 5px 2px rgb(123 71 156 / 25%);
}

.channel-chart {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.bg-oppidatim {
	background-color: var(--theme-colour) !important;
	color: #fff !important;
}

.border-oppidatim {
	border-color: var(--theme-colour);
}

.rounded-none {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.op-form-modal .modal-header,
.op-form-modal .modal-footer {
	border: none;
}

.op-form-modal .btn-close {
	display: flex;
	justify-content: center;
	align-items: center;
	background: transparent;
	font-size: 1.5em;
	opacity: .75;
}

.op-form-modal .form-group>label {
	font-weight: 500;
	color: rgb(33, 37, 41);
	margin-bottom: .25rem;
}

.op-form-modal .form-group {
	margin-bottom: 1.25rem;
}

.op-form-modal-divider {
	border-bottom: 4px solid var(--theme-colour-dark);
	width: 0px;
	transition: width 1s ease-out;
}

.op-form-modal.show .op-form-modal-divider {
	width: 100%;
}

.op-form-modal .modal-footer .btn {
	min-width: 200px;
	text-decoration: none;
	font-weight: 500;
}

.sidebar-button--active {
	color: var(--theme-colour);
}

.sidebar-button--active::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--sidebar-padding-x) * -1);
	box-shadow: 0 1px 2.5px var(--theme-colour);
	height: 65%;
	width: var(--block-size-xs);
	border-radius: 100px;
	background-color: var(--theme-colour);
	transform: translateY(-50%);
}

.layout-frame__sidebar {
	padding: var(--sidebar-padding-y) var(--sidebar-padding-x);
}

.input--2fa-code {
	width: 2.75rem;
}

.input--2fa-code input {
	appearance: textfield !important;
	text-align: center;
	-webkit-appearance: textfield !important;
}

.input--2fa-code input::-webkit-outer-spin-button,
.input--2fa-code input::-webkit-inner-spin-button {
	display: none;
}

.img--qr {
	border-radius: var(--standard-border-radius);
}

.manual-code__border {
	border-bottom: 1px solid var(--outline-colour);
	height: 1px;
	flex-grow: 1;
}

#tgLogin .tab-group__tabs,
#tgPanelOptions .tab-group__tabs {
	display: none;
}

.ct-dashboard {
	height: 100%;
	width: 100%;
}

.opp-map {
	height: 100%;
	width: 100%;
	border-radius: 0 0 var(--standard-border-radius) var(--standard-border-radius);
}

.dashboard__panel .card-body {
	padding: 0;
}


#map-rotation-control {
	background: rgb(255, 255, 255) padding-box;
	min-width: 44px;
	border: 0;
	margin-top: 10px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	border-radius: 8px;
}

#map-rotation-control:hover {
	color: black;
}

.iw-table {
	border-spacing: var(--block-size-base) var(--block-size-xxs);
	border-collapse: separate;
	margin-left: calc(var(--block-size-base) * -1);
}

.opp-iw {
	color: #343741;
	margin: -12px;
	width: max-content;
	padding: var(--block-size-md);
}

.gm-style .gm-style-iw-d {
	overflow: initial !important;
}

.opp-iw__header {
	padding: var(--block-size-sm) var(--block-size-md);
	margin: calc(var(--block-size-md) * -1);
	margin-bottom: var(--block-size-sm);
	color: var(--iw-theme-colour);
	background-color: var(--iw-theme);
}

.opp-iw i {
	color: var(--iw-theme);
}

.opp-iw--danger {
	--iw-theme: rgb(189, 39, 30);
	--iw-theme-colour: #fff;
}

.opp-iw--warning {
	--iw-theme: rgb(185, 94, 6);
	--iw-theme-colour: #fff;
}

.opp-iw--success {
	--iw-theme: rgb(24, 131, 50);
	--iw-theme-colour: #fff;
}

.opp-iw--secondary {
	--iw-theme: rgb(105, 112, 125);
	--iw-theme-colour: #fff;
}

.yNHHyP-marker-view svg {
	fill: rgb(155, 108, 184);
}

.gm-style-iw.gm-style-iw-c {
	outline: none;
	padding-bottom: 12px !important;
}

.panel__data {
	display: grid;
	height: 100%;
	width: 100%;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.carousel,
.carousel-item,
.carousel-inner,
.carousel-inner>ul,
.carousel-inner>ul>li,
.channel-chart>div:first-child {
	width: 100% !important;
	height: 100% !important;
}

.channel-chart chip-emptyprompt {
	margin: auto;
}

.latest-data {
	width: 100%;
	height: 75%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.latest-data__value {
	font-size: 5rem;
	line-height: 1.2;
}

.dashboard__panel .card-header>.row>.col,
.dashboard__panel .card-title,
.panel__data>li,
.ld--title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ld--title {
	height: var(--block-size-xxxl);
}