@font-face {
	font-family: "Yantramanav-Thin";
	src: url(./fonts/Yantramanav-Thin.ttf);
}

@font-face {
	font-family: "Yantramanav-Regular";
	src: url(./fonts/Yantramanav-Regular.ttf);
}

@font-face {
	font-family: "Yantramanav-Bold";
	src: url(./fonts/Yantramanav-Bold.ttf);
}

body, html {
	height: 100%;
	font-family: "Yantramanav-Regular";
}

.input-group-text {
	white-space: wrap;	
}

.tithead {
	font-size:1.4em;
}

.myhead {
	display:none;
}

.mylogin {
	height: 100%;
	/*background-image: url(./images/backg.jpg);
	background-size: cover;
	background-position: center center;*/
	background-color: #ffc200;
}

.white {
	color: white;
}

.black, .blk {
	color: black;
}

.tech_color {
	color: #4F9CF8;
}

.rotate180 {
	transform: rotate(180deg);
}

.grey_tech {
	color: #848484;
	padding-left: 10px;
	font-size: 1em;
}

.bg_white {
	background-color: #fff;
}

.mmb {
	color: #1e1f1f;
}

.mmb_bg {
	background-color: #1e1f1f;
}

.mmy {
	color: #ffc200;
}

.mmy_bg {
	background-color: #ffc200;
}

.colora {
	border:1px solid red;
}

.mysign {
	background-color: #fff;
}

.upcs{
	text-transform:uppercase;
}

.mylogo img {
	width: 100%;
	transition: all .15s ease-in-out;
}

@media (max-width: 1200px) {
	.mylogo img {
		width: 80%;
		height: auto;
		transition: all .15s ease-in-out;
	}
}

@media (max-width: 768px) {
	.mylogo img {
		width: 60%;
		height: auto;
		transition: all .15s ease-in-out;
	}
}

@media (max-width: 576px) {
	.mylogo img {
		width: 80%;
		height: auto;
		transition: all .15s ease-in-out;
	}
}

main .top-row {
	background-color: #1e1f1f !important;
	min-height: 4.7rem;
	height: 4.7rem;
	color: white;
	justify-content: start;
}

main .top-row a {	
	color: white;
}

.sidebar .top-row {
	background-color: #ffc200 !important;
	min-height: 4.5rem;
	height: 4.5 rem;
}

.mylogo img {
	width: 100%;
	max-width:300px;
	height: auto;	
}

.myscroll {
	background-color: #ffc200;
	--background-image: url(./images/backmenu.jpg);
	--background-size: --contain;
	--background-position: bottom left;
	--background-repeat: no-repeat;
}

.mysign {
	background-color: #1e1f1f;
	color:white;
	border-radius:15px;
}

.e-treeview .e-list-item.e-active > .e-fullrow {
	background-color: #000 !important;
	border:transparent;
	border-bottom: 3px #fff solid !important;
}

.content h1, .e-headertext {
	color: #000 !important;
} 

.ver {
	width:235px;
	border-radius: 15px 0 0 0;
	background-color:white;
	color:grey; 
	padding:6px;
	font-size: 14px;
	left:0;
	bottom:0;
	position:fixed;
	z-index:1;
}

.e-treeview .e-ul {
	margin: 25px 0;
}

.e-treeview .e-fullrow {	
	border: transparent;
	border-bottom:3px solid white;
	height:38px;
}

.e-treeview .e-text-content {
	border: 0 solid;
	margin: 0;
	padding: 0 0 0 20px;
}

.logout {
	color: black !important;
	border-bottom: 3px solid transparent;
	transition: all .2s ease-in-out;
	min-width:auto;
}

.logout:hover {
		color: white !important;
		border-bottom: 3px solid white;
		text-decoration: none !important;
		transition: all .3s ease-in-out;
}

.mainbtn {
	color: black !important;
	border-bottom: 3px solid transparent;
	transition: all .2s ease-in-out;
	min-width: auto;
	text-transform: uppercase;
	margin-top:10px;
}

.mainbtn:hover {
	color: black !important;
	border-bottom: 3px solid black;
	text-decoration: none !important;
	transition: all .3s ease-in-out;
}

.dropdown_user a:hover {
	text-decoration: underline !important;
	transition: all .3s ease-in-out;
}

#dropdown_icon:hover {
	--transform: rotate(180deg)--;
}

#dropdown_icon {
	transition: transform 0.5s ease;
}

/*css mobile*/
img.logo-in {
	width: 100%;
}

.dropdown_user {
	position: absolute;
	z-index: 5;
	right: 10px;
	top: 4.7em;
	background-color: #ffc200;
	min-width: 250px;
	color:black !important;
}

.dropdown_user ul {
	padding-left: 0rem;
}

.dropdown_user a {
	color: black !important;
	text-decoration: none !important;
}

a.dropdown_user:hover {
	text-decoration: underline !important;
	color: black !important;
}

.dropdown_user li {
	border-bottom: 1px solid black;
	padding: 10px;
	color: black;
}

.dropdown_user .logout {
	border:1px solid black;
}

.role-text {
	padding-left: 15px;
}

a.role-user {
	margin-left: 0rem !important;
}

.dropdown_user ul {
	margin-bottom: 0;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.adx {
	text-align:right !important;
}

.asx {
	text-align: left !important;
}

@media (max-width: 769px) {

	.garb {
		justify-content: start !important;
	}

	.div_tit {
		padding-right: 30px;
	}

}

	@media (max-width: 640px) {

		img.logo-in {			
			max-width: 160px;
		}

		.logout {
			padding: 1px 5px;
			margin-right: 2px !important;
		}

		.navbar-toggler {
			color: white;
			top: 1.2rem !important;
			border: 1px solid rgba(255, 194, 0, 0.9) !important;
			border-radius: 5px;
			background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(0, 0, 0, 0.8) !important;
			;
		}

		.top-row {			
			height: auto !important;
			padding-right: 15px !important;
			padding-left: 15px !important;
		}

		.myscroll {
			background-image: none;
		}

		.sidebar .e-text-content {
			text-align: center !important;
			text-transform: uppercase;
		}

		.e-treeview .e-text-content {
			padding: 0 !important;
		}

		.e-treeview .e-list-icon, .e-treeview .e-list-img {
			margin: 0 0 0 0;
		}

		.ver {
			width: 98%;
			border-top: 1px solid grey;
			border-left: 1px solid grey;
			left: 2%;
		}

		main .top-row {
			min-height: 2.2rem;
			height: 2.2rem;
			color: white;
			padding-top: 5px;
		}

		.div_tit {
			padding-left: 8px;
			padding-bottom: 5px;
		}

		.tithead {
			font-size: 1.1em;
		}

		.dropdown_user {
			top: 6.9em;
		}
	}

	@media (min-width: 641px) {
		.nav-scrollable {
			height: calc(100vh - 4.6rem) !important;
		}

		.sidebar {
			width: 235px !important;
		}
	}

	.btnmm {
		background-color: white;
		color: black;
		border-radius: 4px;
		border: 1px solid black;
		transition: all .2s ease-in-out;
		padding: 12px;
		width: auto;
		border-bottom: 7px solid #000;
	}

		.btnmm:hover {
			background-color: black;
			color: white;
			border-radius: 4px;
			border: 1px solid black;
			transition: all .3s ease-in-out;
			border-bottom: 7px solid #ffc200;
		}

	.pad30 {
		padding: 30px;
	}

	.padrl30 {
		padding: 0 30px;
	}

	.navbar-brand {
		padding: 6px;
	}

	.center_box_row, .center-box-row {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
	}

	.center_box_col, .center-box-col {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		flex-flow: column nowrap;
		-webkit-flex-flow: column nowrap;
	}

	.essy {
		padding: 20px 0;
		margin: 0px auto;
	}

		.essy h2 {
			color: rgb(30, 31, 31);
			margin-bottom: 24px;
			font-size: 24px;
			font-weight: 500;
		}

		.essy .gap1 {
			background-color: rgb(255, 255, 255);
			border-radius: 12px;
			padding: 24px;
			box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
		}

		.essy .gap2 {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.essy .gap3 {
			display: flex;
			align-items: center;
			gap: 16px;
		}


		.essy button {
			width: 36px !important;
			border-radius: 50%;
			border: medium;
			color: rgb(30, 31, 31);
			appearance: none;
			background-color: rgb(226, 226, 226);
			outline: none;
			opacity: 0.7;
			transition: opacity 0.2s;
			cursor: pointer;
			border-radius: 50%;
			border: medium;
			font-size: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: opacity 0.2s, background-color 0.2s;
		}

		.essy button:hover {
			background-color: rgb(255, 194, 0);
			color: rgb(30, 31, 31);
		}

	.button, .button2 {
		width: 36px !important;
		height: 36px;
	}

	.essy input {
		max-width: 100%;
	}

	.essy span {
		color: rgb(30, 31, 31);
		font-size: 24px;
		font-weight: 500;
		min-width: 80px;
		text-align: right;
	}

.machinery-roster .thead-dark {
	border-radius: 15px 0 15px !important;
	background-color: white !important;	
	overflow:hidden;
}

.machinery-roster th {	
	background-color: black !important;
	color: white !important;
}

.machinery-roster .bedit:hover {
	border-bottom: 3px solid black;
	transition: all .3s ease-in-out;
}

.machinery-roster .bedit {
	border: 1px solid #0dcaf0;
	border-bottom: 3px solid #0dcaf0;
	transition: all .3s ease-in-out;
}

.machinery-roster .e-headertext {
	color: white !important;
	font-size:16px !important;
}

.pad0 {
	padding: 0 !important;
}

.machinery-roster .badge {
	width:20px;
	height:20px;
	border-radius:10px;
}

.machinery-roster .badge-success {
	background-color:green;
}

.machinery-roster .badge-warning {
	background-color: orange;
}

.machinery-roster .badge-danger {
	background-color: red;
}

.machinery-roster .bord-l {
	border-radius: 15px 0 0 0;
}

.machinery-roster .bord-r {
	border-radius: 0 15px 0 0;
}

.slidecontainer {
	width: 100%; /* Width of the outside container */
}

.slidecontainer .btn {
	width:19%;
}

/* The slider itself */
.slider {
	-webkit-appearance: none; /* Override default CSS styles */
	appearance: none;
	width: 80%; /* Full-width */
	height: 25px; /* Specified height */
	background: #d3d3d3; /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
}

	/* Mouse-over effects */
	.slider:hover {
		opacity: 1; /* Fully shown on mouse-over */
	}

	/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
	.slider::-webkit-slider-thumb {
		-webkit-appearance: none; /* Override default look */
		appearance: none;
		width: 25px; /* Set a specific slider handle width */
		height: 25px; /* Slider handle height */
		background: black; /* background */
		cursor: pointer; /* Cursor on hover */
	}

	.slider::-moz-range-thumb {
		width: 25px; /* Set a specific slider handle width */
		height: 25px; /* Slider handle height */
		background: #04AA6D; /* Green background */
		cursor: pointer; /* Cursor on hover */
	}

.machine-display {
	padding:15px;
	background-color:#eee;
	border-radius:15px;
}

.mach1 {
	border: 3px solid white;
	border-bottom: 2px solid black;
}

.mach2 {
	border: 1px solid #ddd;
	border-bottom: 2px solid #ddd;
}

/* icone */

.e-icons {
	
}

div.e-icons {
		
}

.ico-home {
	content: url(/images/ico-home-b.png);
}

.ico-account {
	content: url(/images/ico-user-b.png);
}

.ico-dashboard {
	content: url(/images/ico-cont-b.png);
}

.ico-invite {
	content: url(/images/ico-uadd-b.png);
}

.ico-gest {
	content: url(/images/ico-gest-b.png);
}

.ico-admins {
	content: url(/images/ico-admins-b.png);
}

.ico-tenants {
	content: url(/images/ico-tenants-b.png);
}

.ico-owners {
	content: url(/images/ico-owners-b.png);
}

.ico-supers {
	content: url(/images/ico-supers-b.png);
}

.ico-users {
	content: url(/images/ico-users-b.png);
}

.ico-app {
	content: url(/images/ico-app-b.png);
}

.e-active .e-text-content .ico-home {
	content: url(/images/ico-home.png);
}

.e-active .e-text-content .ico-account {
	content: url(/images/ico-user.png);
}

.e-active .e-text-content .ico-dashboard {
	content: url(/images/ico-cont.png);
}

.e-active .e-text-content .ico-invite {
	content: url(/images/ico-uadd.png);
}

.e-active .e-text-content .ico-gest {
	content: url(/images/ico-gest.png);
}

.e-active .e-text-content .ico-admins {
	content: url(/images/ico-admins.png);
}

.e-active .e-text-content .ico-tenants {
	content: url(/images/ico-tenants.png);
}

.e-active .e-text-content .ico-owners {
	content: url(/images/ico-owners.png);
}

.e-active .e-text-content .ico-supers {
	content: url(/images/ico-supers.png);
}

.e-active .e-text-content .ico-users {
	content: url(/images/ico-users.png);
}

.e-active .e-text-content .ico-app {
	content: url(/images/ico-app.png);
}

.m0 {
	margin:0;
}

#slidertemper .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track {
	background: #ddd;
}

#slidertemper .e-control-wrapper.e-slider-container.e-horizontal .e-handle {
	top: calc(50% - 8px);
}

#slidertemper .e-control-wrapper.e-slider-container .e-slider .e-handle {
	height: 16px;
	width: 16px;
}

#slidertemper .e-control-wrapper.e-slider-container .e-slider .e-handle {
	background-color: #ffc107;
	border: 2px solid #000;
	border-color: #000;
	-webkit-transition: .4s;
	transition: .4s;
}

#slidertemper .e-control-wrapper.e-slider-container .e-slider .e-handle:hover {
	background-color: #000;
	border: 2px solid #000;
	border-color: #000;
	-webkit-transition: .4s;
	transition: .4s;
}

#slidertemper .e-control-wrapper.e-slider-container .e-slider-button {
	background-color: #000;
	border: 1px solid #000;
	box-sizing: border-box;
}

#slidertemper .e-control-wrapper.e-slider-container .e-slider-button:hover {
background-color: #ffc107;
border: 1px solid #ffc107;
box-sizing: border-box;
}

#slidertemper .e-control-wrapper.e-slider-container .e-slider-button:hover > span {
	color: black;
}

.e-dialog .e-dlg-header-content {
	background-color: black;
	border-bottom: 0px solid #000 !important;
	border-radius: 10px 10px 0 0;
}

.e-dialog .e-dlg-header-content .e-dlg-header {
	color:white !important;
}

.e-dialog {
	border: 0px solid #dee2e6;
	border-radius: 10px;
}

.e-dialog .e-dlg-content {
	padding: 25px 12px 20px 12px !important;
	border-radius: 6px;
}

.e-footer-content button {
	background-color: #ffc107 !important;
	color: black !important;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
	transition: all .2s ease-in-out;
	min-width: auto;
	text-transform: uppercase;
	margin-top: 0px;
}

.e-footer-content button:hover {
	background-color: #000 !important;
	color: white !important;
	border: 0 !important;
	border-bottom: 3px solid #ffc107 !important;
	text-decoration: none !important;
	transition: all .3s ease-in-out;
}

.blacky {
	background-color: #000 !important;
	color: white !important;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
	transition: all .2s ease-in-out;
	min-width: auto;
	text-transform: uppercase;
	margin-top: 0px;
}

.blacky:hover {
	background-color: #000 !important;
	color: white !important;
	border-bottom: 3px solid white !important;
	transition: all .2s ease-in-out;
}

.m-no {
	margin:0;
}

.myredeem {
	height: auto;
	background-color: #ffc200;
	padding:30px 0 20px 0;
}

.e-mybtn {
	transition: all .2s ease-in-out;
	border-bottom: 2px solid black !important;
}

.e-mybtn:hover {
	transition: all .2s ease-in-out;
	border-bottom: 4px solid #ffc200 !important;
}

.width-auto {
	width:100%;
}

.e-filterdiv {
	padding:5px 3px;
}

.e-filterdiv input {
	margin: 3px 0 !important;
	height: 20px !important;
	padding-left: 30px !important;
	background-image: url(/images/ico-filter.png) !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	background-color: transparent !important;
}

.form-label {
	margin-bottom: .0rem;
	margin-top: .6rem;
}

.check-special {
	width:25px;
	height:25px;
	margin:8px 5px 0 0;
}

.col-add-admin {
	margin-top:1.9em;
}


@media (max-width: 768px) {
	.row {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.col-add-admin {
		margin-top: .3em;
	}

}

.det-subs-row {
	border-bottom: 2px solid grey;
}

.det-subs .form-label {
	font-size: 1em !important;
}

.h20in {
	height: 20px !important;
	padding-top:0px !important;
}

.resett {
	position:absolute;
	right:0px;
	top:-51px;
	z-index:10;
}

@media (max-width: 768px) {
	.resett {
		position: relative !important;
		right: 0px;
		top: 0px;
		z-index: 0;
		margin-top:10px;
		width:50%;
		margin-left:50%;
		margin-bottom:10px;
	}
	.myappoint button {
		margin-top: 10px;
		width: 50%;
		margin-left: 50%;
		margin-bottom: 5px;
	} 
}

@media (max-width: 480px) {
	.resett {
		position: relative !important;
		right: 0px;
		top: 0px;
		z-index: 0;
		margin-top: 10px;
		width: 100%;
		margin-left: 0%;
	}
	.myappoint button {
		margin-top: 10px;
		width: 100%;
		margin-left: 0%;
		margin-bottom: 5px;
	} 
}