html,
body {
	min-height: 100%;
	margin: 0;
}

/* Submenu (2nd level) */
.dropdown>ul {

	background: #f4f4f5;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.dropdown-submenu {
	position: relative;
	width: 240px;
	font-size: 14px;
	background: inherit;
}

.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -1px;
	display: none;
	position: absolute;
	background: inherit;

}

/* Show submenu on hover */
.dropdown-submenu:hover>.dropdown-menu {
	white-space: nowrap;
	display: block !important;
	position: absolute;
	width: 240px;
	background: inherit;
}

/* Optional: Add right arrow indicator */
.dropdown-submenu>a::after {
	display: inline-block;
	/* ✅ Forces it to take space */
	width: 1em;
	/* Optional: sets fixed space */
	text-align: right;
	margin-top: 4px;
	margin-right: -8px;
	font-size: 14px;


}

ul.navbar-nav li.dropdown>ul.dropdown-menu>li>a,
ul.navbar-nav li.dropdown .dropdown-submenu>a,
ul.navbar-nav li.dropdown .dropdown-submenu>ul.dropdown-menu>li>a {
	font-size: 14px !important;
	padding: 7px 15px !important;
	font-weight: 400 !important;
	color: #333 !important;
	white-space: nowrap;
	line-height: 1.2;
}

/*
.login-box, .register-box {
	width: 400px;
	margin: 7% auto;
}*/


.fullscreen-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	/* full viewport height */
	flex-direction: column;
	position: relative;
	z-index: 3;
}

/* Login box styles */
.login-box,
.register-box {
	width: 40%;
	max-width: 500px;
	min-width: 320px;
	background: rgba(255, 255, 255, 0.9);
	padding: 30px 20px;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Optional: Make the logo align center */
.login-logo {
	text-align: center;
	font-size: 26px;
	margin-bottom: 20px;
}


.navbar {
	display: flex;
	justify-content: space-between;
	/* pushes left and right apart */
	align-items: center;
	/* vertical center alignment */
	height: 50px;
}

.navbar-left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* align items to the left */
	flex: 1;
}

.navbar-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* align items to the right */
	flex: 1;
}

@media (max-width: 1350px) {
	.navbar-left {
		visibility: hidden !important;
		width: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
}

/* Make it responsive for mobile */
@media (max-width: 767px) {

	.main-header .navbar-right {
		float: none;
	}

	.navbar-collapse .main-header .navbar-right {
		margin: 7.5px -15px;
	}

	.main-header .navbar-right>li {
		color: inherit;
		border: 0;
	}

	.login-box {
		width: 40%;
		padding: 20px;
	}
}

@media (max-width: 768px) {
	.login-box {
		width: 40%;
		padding: 20px;
	}

}

@media (max-width: 990px) {
	.login-box {
		width: 40%;
		padding: 20px;
	}

	.content-wrapper,
	.right-side,
	.main-footer {
		margin-left: 0;
	}

	.sidebar-open .content-wrapper,
	.sidebar-open .right-side,
	.sidebar-open .main-footer {
		-webkit-transform: translate(230px, 0);
		-ms-transform: translate(230px, 0);
		-o-transform: translate(230px, 0);
		transform: translate(230px, 0);
	}
}

@media (max-width: 991px) {
	.login-box {
		width: 40%;
		padding: 20px;
	}

	.content-wrapper,
	.right-side,
	.main-footer {
		margin-left: 0;
	}

	.sidebar-open .content-wrapper,
	.sidebar-open .right-side,
	.sidebar-open .main-footer {
		-webkit-transform: translate(230px, 0);
		-ms-transform: translate(230px, 0);
		-o-transform: translate(230px, 0);
		transform: translate(230px, 0);
	}
}


@media (max-width: 1350px) {

	.login-box,
	.register-box {
		width: 30%;
		padding: 20px;
	}

}

@media (max-width: 1351px) {

	.login-box,
	.register-box {
		width: 30%;
		padding: 20px;
	}
}

.login-page,
.register-page {
	/*background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);*/
	background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
	background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);

}

.content-wrapper,
.right-side {
	/*	background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
	background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);*/
	background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
	background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
}

.form-control .label {
	color: #444;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 0.3em;
	font-weight: 600;
	font-size: 100%;
}

.form-group .label {
	color: #444;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 0.3em;
	font-weight: 600;
	font-size: 100%;
}

.label {
	color: #444;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 0.3em;
	font-weight: 600;
	font-size: 100%;
}

/* SPLIT SCREEN LAYOUT */
.split-screen {
	display: flex;
	height: 100vh;

	background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
	/*background-image: url("../../images/img/bg4.jpg");*/
}

.slider-left {
	flex: 6.5;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2px;
}

.login-right {
	flex: 3.5;
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
}

.login-box {
	width: 100%;
	max-width: 400px;
	padding: 15px;
}

/* SLIDER */
.login-bg-slider {
	display: flex;
	width: 100%;
	height: 100%;
}

.login-bg-slider .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 0;
	animation: zoom 36s infinite;
	background-size: contain;
	background-position: center;
	transition: opacity 1s ease-in-out;
	background-repeat: no-repeat;
}

.login-bg-slider .slide:nth-child(1) {
	animation-delay: 0s;
}

.login-bg-slider .slide:nth-child(2) {
	animation-delay: 6s;
}

.login-bg-slider .slide:nth-child(3) {
	animation-delay: 12s;
}

.login-bg-slider .slide:nth-child(4) {
	animation-delay: 18s;
}

.login-bg-slider .slide:nth-child(5) {
	animation-delay: 24s;
}

.login-bg-slider .slide:nth-child(6) {
	animation-delay: 30s;
}

@keyframes zoom {

	0%,
	13.88%,
	100% {
		transform: scale(1.2);
		opacity: 0;
	}

	8.33% {
		transform: scale(1);
		opacity: 1;
	}
}

/* GRADIENT OVERLAY */
.slider-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
	z-index: 1;
	opacity: 0.3;
	pointer-events: none;
}

/* RESPONSIVE: Hide left on mobile */
@media (max-width: 991px) {
	.split-screen {
		flex-direction: column;
	}

	.slider-left {
		display: none !important;
	}

	.navbar-left {
		display: none !important;
	}

	.login-right {
		flex: none;
		width: 100%;
		height: 100vh;
	}
}



/* style all input elements with a required attribute */
input,
textarea,
number,
.form-control,
.input-sm,
.call-number {
	background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
	color: #444;
	font-weight: 500;
}

.select2-container {
	background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
	color: #444;
	font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	color: black !important;
	background-color: #f0f0f0 !important;
	border: 1px solid #ccc !important;
	font-weight: bold;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: red !important;
	margin-right: 5px;
}


select {
	background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
	color: #444;
	font-weight: 500;
	padding-left: 0 !important;
	text-indent: 0 !important;
}

input:required {
	border-left: 5px solid #febd7f;
	background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
	color: #804040;
	font-weight: 500;
}

select:required {
	border-left: 5px solid #febd7f;
	background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
	color: #804040;
	font-weight: 500;
	padding-left: 0 !important;
	text-indent: 0 !important;
}

textarea:required {
	border-left: 5px solid #febd7f;
	background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
	color: #804040;
	font-weight: 500;
}

number:required {
	border-left: 5px solid #febd7f;
	background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
	color: #804040;
	font-weight: 500;
}

.box,
.small-box {
	background: rgba(255, 255, 255, 0.8);
	padding: 5px 10px;
	border-radius: 10px;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
	border: 1px solid #ebedee
}

/*.box.box-solid {background-image: linear-gradient(120deg, #fefdfd 0%, #f6f7f8 100%);}*/
.box.box-solid.box-default>.box-header {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #eef1f7 100%);
	border: 1px solid #E3FDF5;
	background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
	padding-left: 10px;
}

/*
.box.box-solid.box-default > .box-header::before {
  content: "";
  background-image: url("../img/loginx-32x32.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}
*/
.small-box .icon {
	margin-top: 15px;
}

.li-disabled {
	pointer-events: none;
	/* disable click */
	color: #aaa;
	/* gray text */
	cursor: not-allowed;
	/* not-allowed cursor */
	text-decoration: none;
	opacity: 0.6;
}

.chart {
	position: relative;
	overflow: hidden;
	width: 100%
}

.chart svg,
.chart canvas {
	width: 100% !important
}

.navbar-right {
	margin-right: 10px;
}

.blink_me {
	animation: blink-animation 1s steps(2, start) infinite;
	-webkit-animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

@-webkit-keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

.cloud {
	display: inline;
	list-style-type: none;
	float: left;
	padding: 0;
	margin: 0;
}

.cloud li {
	list-style: none;
	display: inline;
	margin: 0px 5px 0px 0px;
	padding: 5px;
}

.cloud li:nth-of-type(3n+1) {
	font-size: 1.35em;
	color: #0099ff;
}

.cloud li:nth-of-type(4n+3) {
	font-size: .9em;
	color: #0066FF;
}

.cloud li:nth-of-type(5n - 3) {
	font-size: 1.1em;
	color: #777777;
}

.btn-group {
	display: flex;
	flex-wrap: nowrap;
	overflow: visible;
	white-space: nowrap;

}

pre {
	background: transparent;
	color: #fff !important;
	font-weight: 600;
	line-height: 1.3;
	border: 0px;
	font-family: inherit;
	overflow-x: auto;
	white-space: pre-wrap;
	/* allows line wrapping */
	font-size: medium;
	padding: 0px;
}

table.dataTable th.dt-head-right,
table.dataTable td.dt-body-right {
	text-align: right !important;
}

.box-widget {
	background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
}

.description-block {
	display: block;
	margin: 5px 0;
	text-align: center;
}

.description-block.margin-bottom {
	margin-bottom: 5px;
}

.description-block>.description-header {
	margin: 0;
	padding: 0;
	font-weight: 600;
	font-size: 14px;
}

.description-block>.description-text {
	text-transform: uppercase;
	width: 100%;
	display: block;
	font-weight: 600;
}

.ink-gradiant {
	background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}

.ribbon-wrapper {
	height: 70px;
	overflow: hidden;
	position: absolute;
	right: -2px;
	top: -2px;
	width: 70px;
	z-index: 10
}

.ribbon-wrapper.ribbon-lg {
	height: 120px;
	width: 120px
}

.ribbon-wrapper.ribbon-lg .ribbon {
	right: 0;
	top: 26px;
	width: 160px
}

.ribbon-wrapper.ribbon-xl {
	height: 180px;
	width: 180px
}

.ribbon-wrapper.ribbon-xl .ribbon {
	right: 4px;
	top: 47px;
	width: 240px
}

.ribbon-wrapper .ribbon {
	box-shadow: 0 0 3px rgba(0, 0, 0, .3);
	font-size: 1.8rem;
	line-height: 100%;
	padding: 1rem 0;
	position: relative;
	right: -2px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
	text-transform: uppercase;
	top: 10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 90px
}

.ribbon-wrapper .ribbon::after,
.ribbon-wrapper .ribbon::before {
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid #9e9e9e;
	bottom: -3px;
	content: "";
	position: absolute
}

.ribbon-wrapper .ribbon::before {
	left: 0
}

.ribbon-wrapper .ribbon::after {
	right: 0
}

.back-to-top {
	bottom: 1.25rem;
	position: fixed;
	right: 1.25rem;
	z-index: 1032
}

.ribbon-warning {
	background: #f8ff00;
	background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
}


/* Remove default bullets */
.sidebar-menu1,
.sidebar-menu1 ul {
	list-style: none;
	padding-left: 0;
}

/* Main item style */
.sidebar-menu1>li>a {
	padding: 8px 5px;
	display: block;
	font-size: 14px;
	color: #333;
	border-top: 1px solid #c3f3f3;
	font-weight: 400;

}

.sidebar-menu1>li>a:hover {
	background: #f4f4f4;
}

/* Treeview container */
.sidebar-menu1 .treeview>a {
	position: relative;
	padding-left: 5px;
}

/* Indentation for submenu items */
.sidebar-menu1 .treeview-menu li a {
	padding: 6px 5px 6px 30px;
	font-size: 14px;
	color: #00bfff;
	display: block;
	font-weight: 400;
}

/* Hover */
.sidebar-menu1 .treeview-menu li a:hover {
	background: #f9f9f9;
	color: #00bfff;
}

/* Arrow icon on right side */
.sidebar-menu1 .treeview>a:after {
	content: "\f105";
	/* FontAwesome angle-right */
	font-family: FontAwesome;
	position: absolute;
	right: 5px;
	top: 10px;
	transition: 0.2s;
}

/* Rotate arrow when opened */
.sidebar-menu1 .treeview.menu-open>a:after {
	transform: rotate(90deg);
}

/* Submenu hidden by default */
.sidebar-menu1 .treeview-menu {
	display: none;
	padding-left: 2px;
}

/* Open state */
.sidebar-menu1 .menu-open>.treeview-menu {
	display: block;
}

/* Icons alignment fix */
.sidebar-menu1 i {
	width: 20px;
}

.sidebar-menu1 .treeview>a i.fa {
	width: 20px;
	text-align: center;
}

/* Heatmap container */
#heatmapChart {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
	gap: 12px;
	padding: 15px;
}

/* Heatmap tile */
.heat-cell {
	aspect-ratio: 1 / 1;
	border-radius: 20px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-weight: bold;
	font-size: 15px;

	/* smooth thermal gradient background */
	background: linear-gradient(145deg, var(--c1), var(--c2));
	color: white;
	/* 3D depth */
	box-shadow:
		0 4px 10px rgba(0, 0, 0, 0.2),
		inset 0 3px 8px rgba(255, 255, 255, 0.3),
		inset 0 -3px 8px rgba(0, 0, 0, 0.2);

	transition: 0.25s ease-in-out;
	overflow: vissible;
}

/* Hover animation */
.heat-cell:hover {
	transform: scale(1.06);
}

.heatmap-cell i {
	font-size: 20px;
	/* Adjust this value */

}

.light {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 8px auto;
	background: #555;
	transition: 0.4s ease;
	box-shadow: 0 0 8px #000 inset;
}

.on {
	box-shadow: 0 0 15px;
}


#trafficLightBox {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	background: #222;
	padding: 12px 20px;
	border-radius: 40px;
	width: fit-content;
	margin: auto;
	box-shadow: 0 0 15px #000 inset;
}

.h-light {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #555;
	box-shadow: 0 0 10px #000 inset;
	transition: 0.3s;
}

.h-light.on {
	box-shadow: 0 0 20px #fff, 0 0 35px currentColor;
}

.speedometer-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}

.speedometer-box {
	width: 350px;
	margin: 40px auto;
	text-align: center;
	font-family: Arial, sans-serif;
}

.speedometer {
	width: 300px;
	height: 150px;
	border-top-left-radius: 300px;
	border-top-right-radius: 300px;
	background: linear-gradient(to top, rgb(255, 128, 255), #fff);
	border: 10px solid rgb(0, 64, 128);
	border-bottom: none;
	position: relative;
	overflow: hidden;
}

.needle {
	width: 4px;
	height: 135px;
	background: #000;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform-origin: bottom center;
	transform: rotate(-90deg);
	transition: transform 1.5s ease-out;
}

.center-cap {
	width: 22px;
	height: 22px;
	background: #444;
	border-radius: 50%;
	position: absolute;
	left: calc(50% - 11px);
	bottom: -5px;
	z-index: 5;
	border: 3px solid white;
}

.degree-text {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 60px;
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.score-label {
	margin-top: 15px;
	font-size: 20px;
	font-weight: bold;
}

.separator-row td {
	background: black !important;
	height: 5px !important;
	padding: 0 !important;
	border: none !important;
}


/**********split rows in 2**********/
.params-box {
    background: #f8f9fa;
    padding: 8px 12px;
    font-size: 13px;
    border: 3px solid #808080;
    color:#333;
   background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}

.params-box pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.fw-bold {
	font-weight: 800;
	font-size:1em;
}