/* CSS Document */

/*
COLORES
0577CC
0555AA
053388
#DA8D1B Naranjo
*/

:root{
	color-scheme: light;

	/* Alarmas */
	--color-lopres: #43d;
	--color-hipres: #e90;
	--color-hitemp: #c33;
	
	/* Estados */
	--color-blu: #05a;
	--color-gre: #1c1;
	--color-yel: #ec0;
	--color-ora: #f81;
	--color-red: #f11;

	/* UmanGTS */
	--color-corp-u: #008CD0;
	--color-corp-g: #F18E00;
	--color-menu: #232B39;
	--color-menu-fore: #fff;
	--color-input-fore: #333;
	--color-input-back: #fff;
	--color-button-back: #ddd;
	--color-button-hover-back: #ccc;
	--color-bg: #F9FAFC;
	--color-surface: #fff;
	--color-fore: #333;
	--color-fore-weak: #666;
	--color-fore-weaker: #999;
	--color-fore-strong: #000;
	--color-fore-header: #6E7890;
	--color-tab-fore: #263245;
	--color-disabled: #ddd;
	--color-link: #0555aa;
	--color-link-hover: #0577cc;
	--color-error-fore: #f00;
	--color-button-fore: #007cb7;
	--color-info-fore: #0080ff;
	--color-info-back: #0080ff11;
	--color-check-back: #1967d2;
	--color-low-back: #FFE8E8;
	--color-low-fore: #B42318;
	--color-high-back: #FFF3D6;
	--color-high-fore: #B25E00;
	--color-ok-back: #EAF7EF;
	--color-ok-fore: #287A3E;

	/* Estados de tablas */
	--color-gra-fore: #A7AFBD;
	--color-gra-back: #A7AFBD11;
	--color-gre-fore: #27B36A;
	--color-gre-back: #27B36A11;
	--color-yel-fore: #D8B400;
	--color-yel-back: #D8B40011;
	--color-ora-fore: #F18E00;
	--color-ora-back: #F18E0011;
	--color-red-fore: #E04444;
	--color-red-back: #E0444411;

	--shadow: 0 4px 12px #E7E8EB;
	--shadow-dark: 0 0 12px #67686B;
	--backdrop: rgba(0, 0, 0, 0.7);
	--border: 1px solid #E9E9E9;
	--border-input: 1px solid #ccc;
	--border-menu: 2px solid #fff3;
	--tire: linear-gradient(to bottom, #777 0%, #333 45%, #050505 100%);
	--select-chevron: url(../svg/chevron.svg);
	--filter-icon: none;
	--font-main: 'Inter', Arial, Helvetica, sans-serif;
}

html.dark{
	color-scheme: dark;

	--color-bg: #1C1B19;
	--color-surface: #222;
	--color-input-fore: #fff;
	--color-input-back: #333;
	--color-button-back: #333;
	--color-button-hover-back: #444;
	--color-fore: #CCC;
	--color-fore-weak: #999;
	--color-fore-weaker: #666;
	--color-fore-strong: #FFF;
	--color-fore-header: #94A3C2;
	--color-tab-fore: #BAC6D9;
	--color-disabled: #222;
	--color-link: #55A5FA;
	--color-link-hover: #33A5FA;
	--color-button-fore: #48C4FF;
	--color-info-fore: #0080FF;
	--color-info-back: #0080FF11;
	--color-check-back: #2D7BE6;
	--color-low-back: #170000;
	--color-low-fore: #E7564B;
	--color-high-back: #291D00;
	--color-high-fore: #FFAB4D;
	--color-ok-back: #08150D;
	--color-ok-fore: #85D79B;

	--color-gra-back: #A7AFBD22;
	--color-gre-back: #27B36A22;
	--color-yel-back: #D8B40022;
	--color-ora-back: #F18E0022;
	--color-red-back: #E0444422;

	--shadow: 0 4px 12px #181714;
	--shadow-dark: 0 0 12px #989794;
	--border: 1px solid #161616;
	--border-input: 1px solid #333;
	--border-menu: 2px solid #fff3;
	--select-chevron: url(../svg/chevron_white.svg);
	--filter-icon: invert(1) hue-rotate(180deg);
}

html.dark .gm-ui-hover-effect > span{
	background-color: #000 !important;
}

/* FUENTES */
@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot');
	src: url('fonts/icomoon.eot?#iefix') format('eot'),
		url('fonts/icomoon.svg#icomoon') format('svg'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'IcoMoon-Ultimate';
	src: url('fonts/IcoMoon-Ultimate.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body,td,th{
	font-size: 15px;
	color: var(--color-fore);
	font-family: var(--font-main);
	font-weight: normal;
}
body{
	background-color: var(--color-bg);
	margin: 0px;
}
a:link,
a:visited{
	color: var(--color-link);
	text-decoration: none;
}
a:hover{
	text-decoration: none;
	color: var(--color-link-hover);
}
div.link{
	cursor:pointer;
	margin-top:6px;
}
div.link:first-child{
	margin-top:0px;
}
h1{
	font-size: 20px;
}
h2{
	color: var(--color-fore);
	font-size: 18px;
}
h3{
	padding: 5px 0;
	margin: 0;
	font-size: 15px;
}
small {
	font-size: 11px;
	opacity: 0.7;
}
h4{
	color: var(--color-disabled);
	font-size: 17px;
	margin: 16px 5px 0px 5px;
}
hr{
	height:1px;
	background-color:var(--color-disabled);
	border:0px;
	margin-bottom:5px;
}
img{
	border:0;
}
.flex {
	display: flex;
	gap: 10px;
}
.flex.stack {
	flex-direction: column;
}
.flex.growing {
	align-self: stretch;
}
.flex.growing > * {
	flex: 1;
}
::selection,
::-moz-selection{ /*mozila es lloron*/
	background-color:var(--color-corp-g);
	color:var(--color-fore-strong);
}
#header{
	position: fixed;
	top: 0;
	left: 0;
	width: 45px;
	height:100%;
	z-index:11;
	vertical-align:top;
	background-color: var(--color-menu);
	color: var(--color-menu-fore);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: width 100ms;
}
#header:hover{
	width: 256px;
}
#bailaclogo{
	margin: 30px 7px;
	height: 24px;
	background: url(../img/UmanGTS_header.png) no-repeat;
}
.div_top{
	height: 88px;
	overflow: hidden;
	margin: 0px 20px 0;
	flex-shrink: 0;
	width: 0;
	border-width: 2px 0;
	border-style: solid;
	padding: 10px 0;
	border-radius: 10px;
	background-position: center bottom 10px;
	position: relative;
	cursor: pointer;
}
#div_top::after{
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background: url(../svg/chevron.svg) no-repeat center / 16px 16px;
	filter: invert(1);
}
#chang_mine{
	display: none;
	padding-right: 24px;
}
#chang_mine select{
	height: 35px;
}

/* searcher */
#searcher{
	display: none;
	margin: 10px 10px 0;
	width: 0;
	overflow: hidden;
}

/* MENU */

.menu{
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex-grow: 1;
}
.menu::-webkit-scrollbar{
	display: none;
}
.submenu{
	margin: 0px;
	border-top: var(--border-menu);
	border-bottom: var(--border-menu);
	display: none;
}
#header:hover .submenu  {
	margin: 0 16px;
}
.menu_button{
	margin: 10px;
	padding-left: 40px;
	background-size: 25px;
	background-repeat: no-repeat;
	background-position: 5px;
	cursor: pointer;
	height: 35px;
	line-height: 35px;
	font-size: 16px;
	border-radius: 10px;
}
.submenu .menu_button {
	font-size: 14px;
	margin: 5px 10px;
	background-size: 20px;
}
.menu .menu_button span{
	display: none;
}
#header:hover :where(.div_top, #searcher){
	width: auto;
}
#header:hover .div_top{
	border: var(--border-menu);
	padding: 10px 10px;
}
#header:hover .menu .menu_button span{
	display: block;
}

body>header{
	height: 80px;
	background-color: var(--color-surface);
	width: 100%;
	border: 0;
	box-shadow: var(--shadow);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
	padding: 20px 30px;
	box-sizing: border-box;
}
.menu_opener{
	font-size: 24px;
	width: 38px;
	height: 38px;
	position: relative;
	text-align: center;
	line-height: 38px;
	color: var(--color-fore);
}
#dark::before{
	content: "";
}
html.dark #dark::before{
	content: "";
}
body>header menu{
	display: none;
	flex-direction: column;
	gap: 10px;
	position: absolute;
	top: 70px;
	right: 0;
	margin: 0;
	padding: 16px;
	list-style: none;
	z-index: 20;
	font-family: var(--font-main);
	font-size: 15px;
	line-height: normal;
	color: var(--color-fore);
	background-color: var(--color-surface);
	box-shadow: var(--shadow);
	border-radius: 10px;
	box-sizing: border-box;
}
body>header menu.is-open{
	display: flex;
}
body>header menu>li{
	padding: 10px;
	min-width: 180px;
	max-width: 300px;
	border-radius: 5px;
	cursor: pointer;
}
body>header menu>section{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	margin: 0;
}
body>header menu>section>h1,
body>header menu article h2{
	font-size: 15px;
	margin: 0;
	color: var(--color-fore-header);
}
body>header menu>section>h1{
	margin-bottom: 6px;
}
body>header menu article{
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: 5px;
	cursor: pointer;
}
body>header menu article:hover,
#omni-search-box menu article.is-selected{
	background-color: var(--color-info-back);
}
body>header menu article figure{
	width: 34px;
	height: 34px;
	margin: 0;
	border-radius: 8px;
	background-color: var(--color-corp-u);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
}
body>header menu article h2 span{
	display: block;
	color: var(--color-fore-header);
	font-size: 14px;
	margin-top: 2px;
}
body>header menu article time,
body>header menu article p{
	display: block;
	margin: 3px 0 0;
	color: var(--color-fore-header);
	font-size: 14px;
}
#notifications::after{
	content: attr(data-count);
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: var(--color-corp-g);
	padding: 1px 5px;
	box-sizing: border-box;
	color: var(--color-surface);
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	top: 0;
	right: 0;
}
#notifications[data-count="0"]::after{
	display: none;
}
#notifications[data-count="0"]{
	pointer-events: none;
}
#notifications menu{
	min-width: 360px;
	text-align: left;
}
#notifications menu article figure{
	background-size: 22px;
}
#user-session{
	color: var(--color-fore-header);
	line-height: 1.2;
}
#user-session b{
	display: block;
	font-size: 17px;
}
#user-session div{
	color: var(--color-fore-header);
	margin-top: 4px;
}
.td_main{
	max-width: 1000px;
    margin: 24px auto;
	display: table;
    width: 100%;
	background-color: var(--color-surface);
	box-shadow: var(--shadow);
	border-radius: 10px;
}

#td_main{
	height: 100%;
	overflow-x: hidden;
}

.td_main>div{
	margin: 30px;
}

.td_main>div.headercontainer{
	border: none;
	display: block;
}
.td_main>div.headercontainer figure{
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: var(--color-corp-u);
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 24px 0 0;
	display: inline-block;
	vertical-align: middle;
}

.labelPin{
	overflow:visible !important;
}
.labelPin img{
	display:none;
}
.panel{
	border-top: var(--border);
}
.panel footer{
	display: flex;
	align-items: flex-end;
	gap: 15px;
}
.panel footer>:first-child{
	flex: 1;
}
.panel footer > input[type="file"]{
	min-width: 0;
}
html:not(.dark) .logo_preview{
	filter: brightness(0.2);
}
dialog {
	border: none;
	border-radius: 10px;
    background-color: var(--color-surface);
	box-shadow: var(--shadow);
}

dialog::backdrop {
	background: var(--backdrop);
	backdrop-filter: blur(1px);
}
dialog > .closeWin {
	top: 10px;
	right: 10px;
	margin: 0;
}
dialog > h2 {
	margin: 0 30px 0 0;
}
.lightbox{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: none;
}
.mini td{
	font-size:11px;
}
.dots{
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-icab-text-overflow: ellipsis;
	-khtml-text-overflow: ellipsis;
	-moz-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	white-space:nowrap;
}
.auto{
	float: right;
    margin: 3px 0 0 5px;
    width: 16px;
    height: 16px;
    background-image: url('../img/auto.png');
    background-position: top;
    background-size: 16px;
    cursor: pointer;
}
.closeWin{
	position: absolute;
	float:right;
	margin: 3px -12px;
	border-radius:15px;
	padding-top:2px;
	width:20px;
	height:20px;
	font-weight: bold;
	color:var(--color-button-fore);
	background-color:var(--color-button-back);
	cursor:pointer;
	text-align: center;
	z-index: 1;
}
div:has(>.column2) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: flex-start;
	gap: 10px 30px;
}
.col4 {
	grid-template-columns: repeat(4, 1fr) !important;
}
.col5 {
	grid-template-columns: repeat(5, 1fr) !important;
}
div:has(>.column2)>:where(h2,h3) {
	display: block;
	grid-column: 1 / 4;
}
.group2column2{
	grid-column: 2 / 4;
	grid-template-columns: repeat(2, 1fr) !important;
}
.group2column2>:where(h2,h3){
	grid-column: 1 / 3 !important;
}
.map_container{
	position: relative;
}
.map_canvas{
	position: relative;
	width: 100%;
	height: 600px;
}
.side_list{
	max-height: 600px;
	overflow-y: auto;
	margin: 0;
	padding: 0 10px 0 0;
	list-style: none;
}
.side_list li{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
	padding: 12px;
	border: var(--border);
	border-left: 4px solid var(--color-button-back);
	border-radius: 5px;
	background: var(--color-surface);
	cursor: pointer;
}
.side_list li.selected{
	background-color: var(--color-info-back);
	outline: 1px solid var(--color-info-fore);
}
.side_list li strong{
	color: var(--color-fore);
	font-size: 18px;
	font-weight: normal;
}
.side_list li span{
	color: var(--color-fore-weak);
	font-family: monospace;
	font-size: 12px;
}
.summary_table{
	width: 100%;
	border-collapse: collapse;
}
.summary_table th,
.summary_table td{
	padding: 10px;
	border: var(--border);
	color: var(--color-fore);
	text-align: center;
}
.summary_table th:first-child,
.summary_table td:first-child{
	text-align: left;
}
.polygon_drawer{
	position: absolute;
	top: 70px;
	right: 10px;
	width: 80px;
	text-align: right;
	text-shadow: 0 0 1px black,0 0 1px black,0 0 1px black;
	z-index: 1;
}
.polygon_drawer button{
	height: 40px;
	margin: 5px 0;
}
.map_layer_legend{
	position: absolute;
	left: 10px;
	display: grid;
	gap: 5px;
	box-sizing: border-box;
	padding: 8px 10px;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	z-index: 1;
}
.map_layer_legend label{
	display: flex;
	align-items: center;
	gap: 8px;
	color: white;
	cursor: pointer;
}
.column2{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px;
	box-sizing: border-box;
}
.column2 td{
	height: 30px;
}
.column2 td:has(> button),
.column2 td:has(> input[type="button"]),
.column2 td:has(> input[type="submit"]) {
	text-align: right;
}
.column2 h3{
	text-align: left;
}
.input_button,
#task_system .rec_top>div{
	display: flex;
	align-items: center;
	gap: 10px;
}
.input_button input:not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="radio"]):not([type="reset"]):not([type="submit"]),
.input_button :where(select, div){
	flex: 1;
	min-width: 0;
}
.inputlike{
	margin-top: 0;
	width: 100%;
	height: 200px;
	padding: 5px;
	overflow-y: auto;
	background-color: var(--color-surface);
	border: var(--border-input);
	border-radius: 5px;
	box-sizing: border-box;
	color: var(--color-fore);
	list-style: none;
}
.inputlike li{
	width: 100%;
	line-height: 24px;
}
.date_range{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
}
.date_range input{
	min-width: 0;
}
.tab_deta{
	min-width:300px;
	max-width:436px;
	width:50%;
	float:left;
	margin: 0 15px;
}
.tab_info{
	min-width:300px;
	width:100%;
	margin: 0 15px;
}
.tab_deta tr td:first-child, .tab_info tr td:first-child {
	width:160px;
	clear:both;
}
.column3{
	width:32%;
	min-width:275px;
	float:left;
}
.column4{
	width:25%;
	min-width:275px;
	float:left;
}
.column4x2{
	width:50%;
	float:left;
}

.error_text {
	color:var(--color-error-fore);
	font-weight:bold;
}
.red_text {
	color:var(--color-red-fore);
	font-weight:bold;
}
.blue_text {
	color:var(--color-info-fore);
	font-weight:bold;
}
.highlight{
    margin: 10px 0;
    border: var(--border);
    border-radius: 5px;
    padding: 0 10px;
    background: var(--color-bg);
}
.indicator{
	display: flex;
	flex-direction: column;
	padding: 10px;
}
.indicator strong{
	font-size: 64px;
	font-weight: normal;
}
.indicator span{
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 20px;
}

.mono{
    font-family: monospace;
} 

table.listed{
	width: 100%;
	padding: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background-color: var(--color-surface);
	border-radius: 10px;
	overflow: hidden;
}
.compact, .compact :where(td, th) {
	font-size: 13px;
	padding: 5px !important;
}
.compact :where(input:not([type=checkbox]):not(.input_to_cbx), select, button){
	padding: 1px 5px !important;
	font-size: 13px !important;
}
th {
	white-space: nowrap;
}
th>div:has(input+input) {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
}
.listed td{
	padding: 5px 12px;
	text-align:left;
	vertical-align: middle;
	border: none;
	border-bottom: var(--border);
	color: var(--color-tab-fore);
	background-color: var(--color-surface);
}
.listed tr:first-child td{
	border-top: var(--border);
}
/* white */
.listed tbody tr:nth-child(n) td.td_white,
.listed tbody tr:nth-child(n).tr_white td{
	background-color: var(--color-surface);
}
/* gray */
.listed tbody tr:nth-child(n) td.td_gray,
.listed tbody tr:nth-child(n).tr_gray td{
	box-shadow: inset 4px 0 0 var(--color-gra-fore);
	background-color: var(--color-gra-back);
	color: var(--color-fore-weak);
}
.listed tr.tr_gray.fullpaint td,
.listed td.td_gray.fullpaint{
	background-color: var(--color-gra-fore) !important;
}
/* green */
.listed tbody tr:nth-child(n) td.td_green,
.listed tbody tr:nth-child(n).tr_green td{
	box-shadow: inset 4px 0 0 var(--color-gre-fore);
	background-color: var(--color-gre-back);
}
.listed tr.tr_green.fullpaint td,
.listed td.td_green.fullpaint{
	background-color: var(--color-gre-fore) !important;
}
/* yellow */
.listed tbody tr:nth-child(n) td.td_yellow,
.listed tbody tr:nth-child(n).tr_yellow td{
	box-shadow: inset 4px 0 0 var(--color-yel-fore);
	background-color: var(--color-yel-back);
}
.listed tr.tr_yellow.fullpaint td,
.listed td.td_yellow.fullpaint{
	background-color: var(--color-yel-fore) !important;
}
/* orange */
.listed tbody tr:nth-child(n) td.td_orange,
.listed tbody tr:nth-child(n).tr_orange td{
	box-shadow: inset 4px 0 0 var(--color-ora-fore);
	background-color: var(--color-ora-back);
}
.listed tr.tr_orange.fullpaint td,
.listed td.td_orange.fullpaint{
	background-color: var(--color-ora-fore) !important;
}
/* red */
.listed tbody tr:nth-child(n) td.td_red,
.listed tbody tr:nth-child(n).tr_red td{
	box-shadow: inset 4px 0 0 var(--color-red-fore);
	background-color: var(--color-red-back);
}
.listed tr.tr_red.fullpaint td,
.listed td.td_red.fullpaint{
	background-color: var(--color-red-fore) !important;
}
/* full */
.listed tr.fullpaint td,
.listed td.fullpaint{
	color: var(--color-surface) !important;
	box-shadow: none !important;
}

.listed td td{
    text-align: center !important;
    font-size: 12px;
    padding: 4px; 
	vertical-align: middle;
	border: none;
	border-bottom: var(--border);
}
.listed th{
	 padding: 12px;
	 text-align:left;
	 height: 20px;
	 border-collapse: collapse;
	 border:none;
	 border-bottom: var(--border);
	 background-color: var(--color-bg);
	 color: var(--color-fore-weak);
	 font-weight: bold;
}

.lighted:hover td, .highlighted td{
	background-color: var(--color-info-back) !important;
	cursor:pointer;
}
.lighted:hover td.td_red{
	background-color:var(--color-red-back) !important;
	cursor:pointer;
}
.tabbed{
	border-collapse: collapse;
}
.tabbed tr{
	border-top: var(--border-input);
}
.tabbed tr:last-child{
	border-bottom: var(--border-input);
}
.tabbed td,.tabbed th{
	text-align:center;
}
input:not([type=checkbox]):not(.input_to_cbx), select, button{
	font-family: var(--font-main);
	vertical-align: middle;
	font-size: 15px;
	border-radius: 5px;
	padding: 1px 15px;
	margin: 10px 0;
	height: 42px;
	box-sizing: border-box;
}
input:not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="radio"]):not([type="reset"]):not([type="submit"]), select{
	color: var(--color-input-fore);
	background-color: var(--color-input-back);
	width: 100%;
	min-width: 70px;
	border: var(--border-input);
}
input[type="file"]{
	position: relative;
}
input[type=file]:after {
	content: 'Seleccionar archivo';
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	appearance: none;
	background-position: 3px top;
	background-repeat: no-repeat;
	background-color: var(--color-button-back);
	border: none;
	color: var(--color-button-fore);
	font-weight: bold;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 42px;
}
[data-unit] {
	position: relative;
}
[data-unit]:after {
	content: attr(data-unit);
	position: absolute;
	margin: 10px 0;
	top: 0;
	right: 0;
	line-height: 42px;
	padding: 0 10px;
	background-color: var(--color-disabled);
	border-radius: 0 5px 5px 0;
}
#omni-search-box{
	position: relative;
	display: inline-flex;
	align-items: center;
}
#omni-search-box::after{
	content: "Ctrl + K";
	background-color: var(--color-disabled);
	border-radius: 4px;
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	color: var(--color-fore-weak);
	pointer-events: none;
}
#omni-search{
	width: 300px !important;
	margin: 0;
	padding-left: 42px;
	padding-right: 90px;
	background-image: url(../svg/search.svg);
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 18px 18px;
}
input[disabled="disabled"], select[disabled="disabled"], checkbox[disabled="disabled"]{
	opacity:0.5;
}
select{
	padding-left:5px;
	padding-right: 24px;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 18px;
	appearance:none;
	-webkit-appearance:none;
	background-image: var(--select-chevron);
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 16px 16px;
}
textarea{
	font-family: var(--font-main);
	margin: 10px 0;
	width: 100%;
	background-color: var(--color-input-back);
	border-radius: 5px;
	border: var(--border-input);
	padding: 1px 5px;
	box-sizing: border-box;
	height: 90px;
}
.listed :where(th, td) :where(input, select, button) {
	margin: 0 !important;
}
th select {
	color: var(--color-fore-weaker);
}
input[type="button"], input[type="submit"], button{
	background:none;
	appearance:none;
	background-position: 3px top;
	background-repeat: no-repeat;
	
	background-color: var(--color-button-back);
	border: none;
	color:var(--color-button-fore);
	font-weight:bold;
}
button[data-icon]::before {
	content: attr(data-icon);
	font-family: 'IcoMoon-Ultimate';
	font-size: 20px;
	margin-right: 10px;
}
button[data-icon]:empty{
	margin-right: 0;
	width: 42px;
	min-width: 42px;
	padding: 0;
}
button[data-icon]:empty::before{
	margin-right: 0;
}

::-webkit-input-placeholder { /* WebKit, Blink (Safari, Google Chrome, Opera), Edge */
    color: var(--color-fore-weaker);
}
ul.multicheck li.selected{
	box-sizing: border-box;
	outline: 1px dotted var(--color-fore-weaker);
}

/* Configuraciones múltiples */
.click_fix :disabled{
	pointer-events: none;
}
.input_to_cbx{
	height: 13px !important;
    width: 13px !important;
	min-width: 13px !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
    border-radius: 2px !important;
	margin: 3px 3px 3px 4px !important;
}
.input_to_cbx:disabled {
	background-color: var(--color-surface);
	border: 1px solid var(--color-disabled);
	margin: 3px 4px;
}

/* Dispatch */
.tab_dispatch {
	width: 100%;
}
.tab_dispatch td{
  color: var(--color-fore-weak);
  white-space: nowrap;
	font-size: 13px;
}
.tab_dispatch tr:nth-child(2){
	font-weight: bold;
}
.tab_dispatch tr:nth-child(even) td{
	font-size: 16px;
}
.tab_dispatch td:nth-child(2){
	text-align: right;
}
.tab_dispatch tr td[data-rel='_drive']{
	color: var(--color-fore);
}
.tab_dispatch tr td{
	width: 50%;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.tab_dispatch_top td:first-child{
	max-width: 200px;
	width: 200px;
}
.tab_dispatch_top td:last-child{
	max-width: 100px;
	width: 100px;
}


input.rwd{
	padding-left:22px;
	background-image: url(../img/pl_rwd.png); 
}
input.prv{
	padding-left:22px;
	background-image: url(../img/pl_prv.png);
}
input.nxt{
	padding-left:22px;
	background-image: url(../img/pl_nxt.png);
}
input.fwd{
	padding-left:22px;
	background-image: url(../img/pl_fwd.png);
}	
input.csv{
	padding-left:22px;
	background-image: url(../img/csv.png);
}
input.pdf{
	padding-left:22px;
	background-image: url(../img/pdf.png);
}
input.xlsx,input.xls{
	padding-left:22px;
	background-image: url(../img/xlsx.png);
}
input.kml{
	padding-left:22px;
	background-image: url(../img/kml.png);
}
input.prt{
	padding-left:22px;
	background-image: url(../img/prt.png);
}
input.mrk{
	padding-left:22px;
	background-image: url(../img/mrk.png);
}
input.sdb{
	padding-left:22px;
	background-image: url(../img/sdb.png);
}
input.sav{
	padding-left:22px;
	background-image: url(../img/sav.png);
}
input.pas{
	padding-left:22px;
	background-image: url(../img/pas.png);
}
.csv[value], .pdf[value], .xmlx[value], .kml[value], .prt[value], .mrk[value], .sdb[value], .sav[value], .pas[value]{
	padding-left:26px;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover{
	color:var(--color-button-fore);
	background-position: 3px bottom;
	background-color: var(--color-button-hover-back);
}
option{
	background-color:var(--color-surface);
	color:var(--color-fore);
}
select[multiple] option:checked{
	background-color:var(--color-check-back);
	color:var(--color-surface);
}

.ico_moon{
	font-family: icomoon !important;
	font-style: normal;
	font-weight: normal !important;
	-webkit-font-smoothing: antialiased;
}
.ico_moon_ultimate{
	font-family: 'IcoMoon-Ultimate' !important;
	font-style: normal;
	font-weight: normal !important;
	-webkit-font-smoothing: antialiased;
}

.capa{
	position:fixed;
	width: 100%;
	height:100%;
	left:0px;
}
ul{
    list-style:none; /* Eliminamos los bullets */
	text-align:left;
	padding-left:15px;
}
/*TMS*/
.truck_slot{
	float:left;
	width:170px;
	cursor:pointer;
	margin:5px 8px;
}
.table_truck{
	table-layout:fixed;
	width:100%;
	height:112px;
	background-color: var(--color-input-back);
	padding:0px;
	border:var(--border-input);
	border-radius:10px;
	padding:2px;
    border-collapse: separate;
    border-spacing: 0px;
	box-shadow: var(--shadow);
}
.table_truck td{
	font-family: var(--font-main);
	color: var(--color-fore-weak);
}
/* lado izquierdo */
.table_truck .truck_colo{
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	vertical-align: top;
	height: 100%;
	width: 60px;
	text-align: center;
	border-radius: 6px 0 0 6px;
	color: #fff;
}
.table_truck.truck_half .truck_colo{
	height:50px;
}
.truck_icon{
	height:32px;
	background-position:center bottom;
	background-repeat:no-repeat;
}
.truck_half .truck_icon{
	height:20px;
}
.truck_half .truck_icon{
	background-size:50%;
	height:20px;
}

.truck_icon.truck_ext{
	background-image:url(../img/ext_.png);
}
.truck_icon.truck_ext_l{
	background-image:url(../img/ext_l.png);
}
.truck_icon.truck_loa{
	background-image:url(../img/loa_.png);
}
.truck_icon.truck_whe{
	background-image:url(../img/whe_.png);
}
.truck_icon.truck_gra{
	background-image:url(../img/gra_.png);
}
.truck_icon.truck_agg{
	background-image:url(../img/agg_.png);
}
.truck_icon.truck_wat{
	background-image:url(../img/wat_.png);
}
.alarm_icon{
	margin-top: -4px;
	background-position:center top;
	background-repeat:no-repeat;
	height:40px;
}
.truck_half .alarm_icon{
	height:20px;
}
.truck_half .alarm_icon{
	background-size:50%;
	background-position:center;
	background-repeat:no-repeat;
	height:30px;
}
.alarm_icon.alarm_ok{
	background-image:url(../img/ok.png);
}
.alarm_icon.alarm_bat{
	background-image:url(../img/bat.png);
}
.alarm_icon.alarm_expired{
	background-image:url(../img/expired.png);
}
.alarm_icon.alarm_despresurizing{
	background-image:url(../img/despresurizing.png);
}
.alarm_icon.alarm_difference{
	background-image:url(../img/difference.png);
}
.alarm_icon.alarm_emergency{
	background-image:url(../img/emergency.png);
}
.alarm_icon.alarm_fast{
	background-image:url(../img/fast.png);
}
.alarm_icon.alarm_torque{
	background-image:url(../img/torque.png);
}
.alarm_icon.alarm_intermitent{
	background-image:url(../img/intermitent.png);
}
.alarm_icon.alarm_gps{
	background-image:url(../img/gps.png);
}
.alarm_icon.alarm_heat{
	background-image:url(../img/heat.png);
}
.alarm_icon.alarm_high{
	background-image:url(../img/high.png);
}
.alarm_icon.alarm_hotter{
	background-image:url(../img/hotter.png);
}
.alarm_icon.alarm_lower{
	background-image:url(../img/lower.png);
}
.alarm_icon.alarm_overwork{
	background-image:url(../img/overwork.png);
}
.alarm_icon.alarm_heavy{
	background-image:url(../img/heavy.png);
}
.alarm_icon.alarm_higher{
	background-image:url(../img/higher.png);
}
.alarm_icon.alarm_low{
	background-image:url(../img/low.png);
}
.alarm_icon.alarm_off{
	background-image:url(../img/off.png);
}
.alarm_icon.alarm_signal{
	background-image:url(../img/signal.png);
}
.alarm_icon.alarm_sensor{
	background-image:url(../img/sensor.png);
}
.alarm_icon.alarm_warning{
	background-image:url(../img/warning.png);
}
.fleet_legend_dock{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 10;
	pointer-events: none;
}
.fleet_legend_dock_half{
	right: auto;
	width: 50%;
}
.fleet_legend{
	width: 80%;
	max-width: 1020px;
	min-width: 300px;
	margin: 0 auto;
	color: var(--color-fore-weak);
	pointer-events: auto;
}
.fleet_legend_dock_half .fleet_legend{
	max-width: 800px;
}
.fleet_legend_toggle{
	width: 100px;
	margin: 0 auto;
	padding: 5px 10px;
	box-sizing: border-box;
	border: var(--border-input);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background-color: var(--color-surface);
	text-align: center;
	font-weight: bold;
	cursor: pointer;
}
#fleet_legend{
	display: none;
	padding: 10px;
	border: var(--border-input);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background-color: var(--color-surface);
	box-shadow: var(--shadow);
}
.fleet_legend_grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 6px 12px;
}
.fleet_legend_alerts{
	margin-top: 12px;
	padding-top: 12px;
	border-top: var(--border);
}
.fleet_legend_item{
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr);
	align-items: center;
	min-width: 0;
}
.fleet_legend_swatch,
.fleet_legend_icon.alarm_icon{
	width: 50px;
	margin: 0;
	border-radius: 5px;
	background-color: var(--legend-color);
	background-position: center;
	background-repeat: no-repeat;
}
.fleet_legend_swatch{
	height: 20px;
}
.fleet_legend_icon.alarm_icon{
	height: 40px;
}
.fleet_legend_text{
	min-width: 0;
	padding: 0 10px;
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fleet_legend_text strong,
.fleet_legend_text small{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fleet_legend_text small{
	font-size: 12px;
}
.table_truck .truck_time{
	margin-top: -5px;
	font-size:12px;
	font-weight:bold;
	font-family: var(--font-main);
}

.minisens{
	/*position:absolute;*/
	width:20px;
	height:18px;
	margin: 0px 1px;
	background-image:url(../img/sens.png);
	background-position: left;
	background-repeat: no-repeat;
	text-align:left;
	line-height:25px;
	font-size:11px;
	padding-left: 13px; 
}

/* lado derecho */
.table_truck .truck_info{
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	vertical-align: top;
	height: 100%;
	width: 104px;
	color:var(--color-fore-weak);
}
.truck_slot:not(.fleet_detail) .table_truck .truck_info{
	height: 104px;
	max-height: 104px;
	min-height: 0;
	overflow: hidden;
}
.table_truck .truck_stop{
	border-radius: 0 6px 0 0;
	padding: 0 5px;
	color: var(--color-surface);
	line-height:20px;
	font-size:13px;
	font-weight:bold;
}
.table_truck .truck_cont{
	height: 100%;
	vertical-align:middle;
	color: var(--color-fore-weak) !important;
}
.table_truck .truck_name{
	font-family: var(--font-main);
	font-weight:bold;
	padding: 0 14px 0 3px;
	white-space: nowrap;
	overflow: visible;
	/*margin-bottom:10px*/
}
.table_truck .truck_para{
	font-family: var(--font-main);
	font-weight:bold;
	padding-left:3px;
	max-height: 36px;
	overflow:hidden;
}
/* tms lightbox */
#tms_container{
	width:100%;
	height: 100%;
	min-height: 670px;
	/*min-height:100%;*/
	background-color:var(--color-surface);
	border-radius:10px;
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: 65px 1fr 30px 1fr;
	/*align-items: start;
	justify-content: stretch;	
	align-content: stretch;	*/
	grid-template-areas:
		"tms_header	tms_top"
		"tms_tires	tms_mid"
		"tms_report tms_mid"
		"tms_map	tms_mid"
}
#tms_container #tms_header{
	grid-area: tms_header;
	height: 65px;
	vertical-align: top;
	padding: 5px;
    box-sizing: border-box;
}
#tms_container #tms_header>table{
	border-radius: 5px;
	overflow: hidden;
}
#tms_container #tms_header>table td:nth-child(2){
	background-color: var(--color-button-back);
}
#tms_container #tms_header h4{
	color: var(--color-button-fore);
}
#tms_container #tms_top{
	grid-area: tms_top;
	height: 65px;
	vertical-align: middle;
	min-width: 300px;
	padding: 0 15px;
    box-sizing: border-box;
}
	#tms_container #tms_top #tms_title{
		vertical-align: top;
		height: 65px;
		line-height: 65px;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#tms_container #tms_top #tms_title div div{
		width: 50%;
		box-sizing: border-box;
	}
	#tms_container #tms_top #tms_title div div:first-child{		text-align: left;	min-width: 300px;}
	#tms_container #tms_top #tms_title div div:last-child{		text-align: right;	}
	#tms_container #tms_tires{
		grid-area: tms_tires;
		margin-bottom: 16px;
		vertical-align: top;
		padding: 5px;
	    box-sizing: border-box;
	}

	#tms_container #tms_report {
		grid-area: tms_report;
		padding: 5px;
		height: 50px;
		box-sizing: border-box;
		z-index: 1;
	}

	#tms_container #tms_tires #tms_layout{
		padding: 15px 0;
	}
	#tms_container #tms_tires #tms_layout #tms_layout_bg{ /* background */
		position:absolute;
		width:300px;
	}
		#tms_container #tms_tires #tms_layout #tms_layout_bg .axys{
			background-color:var(--color-disabled);
			border-radius:5px;
			width:250px;
			height:283px;
			box-shadow: var(--shadow);
			padding-top:50px;
			position:relative;
		}
		#tms_container #tms_tires #tms_layout #tms_layout_bg .axys div{ /* ejes */
			background-repeat:repeat-y;
			background-position:50% 0px;
		}
	#tms_container #tms_tires #tms_layout #tms_layout_fg{ /* foreground */
		position:relative;
		width:300px;
	}
	/* #tms_container #tms_tires #tms_layout #tms_layout_fg>table es lo mismo que .tms_axys*/
	.tms_axys{
		border: 0;
		width: 100%;
	}
	
	#tms_container #tms_tires #tms_layout #tms_layout_fg>div{
		position:relative;
	}
	#tms_container #tms_tires #tms_layout #tms_layout_fg>div>div{
		position:absolute;
		left:0;right:0;
	}
	#tms_container #tms_tires #tms_layout #tms_layout_fg>div>div>div{
		width:50px;
		height:50px;
		margin: 0 auto;
		background-position: center bottom;
		background-repeat: no-repeat;
		filter: sepia(100%) brightness(0.8) saturate(2000%) hue-rotate(310deg);
	}
#tms_container #tms_mid{
	grid-area: tms_mid;
	vertical-align: top;
	padding: 5px;
	min-width: 300px;
	grid-row: span 2;
}
	#tms_container #tms_mid iframe{
		border: none;
		overflow: visible;
	}
		#tms_container #tms_mid iframe#tms_graph{
			height:500px;
			width:100%;
		}
		#tms_container #tms_mid iframe#tms_print{
			height: 1px;
			width: 1px;
		}
#tms_container #tms_map{
	grid-area: tms_map;
	vertical-align: top;
	width: 300px !important;
	padding: 5px;
    box-sizing: border-box;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	height: 100%;
}
	#tms_container #tms_map #map_canvas{
		flex-grow: 1;
	}
	#tms_container #tms_map #map_canvas div.gm-style div>img{
		left:0;
	}

#tms_container .tms_sens,.receipt.sns_dif, table.tms_axys .tms_align_cent .receipt.sns_dri{
	border: none;
	border-radius: 5px;
	background: var(--tire);
    margin: 3px;
    box-sizing: border-box;
	cursor:pointer;
	display: inline-flex;
	position: relative;
}
#tms_container .tms_sens table{
	margin: 0 auto;
}
#tms_container .tms_sens .tire_icon{
	position:absolute;
	width:40px;
	text-align:center;
	top: -10px;
	z-index: 1;
}
#tms_container .tms_sens td .tms_tire_diff{
	position: absolute;
	bottom: 1px;
	font-size: 11px;
	line-height: 11px;
	color: var(--color-yel);
	text-align: center;
	margin: auto;
	left: 1px;
	right: 1px;
	background-color: var(--color-fore);
	border-radius: 5px;
}
#tms_container .tms_align{
	text-align: center;
	white-space: nowrap;
}
#tms_container .tms_sens.tms_vertical{
	width: 48px;
}
#tms_container .tms_sens.tms_vertical table, .receipt.sns_dif table, .receipt.sns_dri table{
	width: 100%;
	margin: 3px;
	height: 85px;
}
#tms_container .tms_sens.tms_vertical .tms_sid, .receipt.tms_sid{
	margin-top: -14px;
}
#tms_container .tms_sens.tms_horizontal{
	width: 106px;
	height: 50px;
}
#tms_container .tms_sens.tms_horizontal table{
	width: 90px;
	height: 40px;
}
#tms_container .tms_sens.tms_horizontal .tms_sid{
	margin-top: -25px;
}
/* Sensores centrales */
#tms_container .tms_align_cent{
	vertical-align: top;
	padding-top: 5px;
	position: relative;
	width: 10px;
}
#tms_container .tms_align_cent .tms_sens tr:first-child,
#tms_container .tms_align_cent .tms_sens .tms_sens_tabs{
	display: none;
}
/* SCI (Sensor Central Interno) Diferencial */
#tms_container .tms_align_cent .tms_sens:not(.tms_driv), .receipt.sns_dif{
	display: flex;
	border-radius: 30px;
	width: 46px;
	margin: auto;
}
#tms_container .tms_align_cent .tms_sens:not(.tms_driv) table, .receipt.sns_dif table{
	height: 40px;
	margin: 2px;
}
#tms_container .tms_align_cent .tms_sens:not(.tms_driv) table,
#tms_container .tms_align_cent .tms_sens:not(.tms_driv) td, 
.receipt.sns_dif table, .receipt.sns_dif td{
	border-radius: 20px;
}
#tms_container .tms_align_cent .tms_sens:not(.tms_driv) td .tms_tire_unit, .receipt.sns_dif td .tms_tire_unit{
	left: 12px;
}
#tms_container .tms_align_cent .tms_sens:not(.tms_driv) td .tms_tire_valu, .receipt.sns_dif td .tms_tire_valu{
	bottom: 6px;
}
/* SCE (Sensor Central Externo) Mando final */
#tms_container .tms_align_cent .tms_sens.tms_driv, table.tms_axys .tms_align_cent .receipt.sns_dri{
	position: absolute;
	margin: 0;
	bottom: 5px;
	width: 36px;
}
#tms_container .tms_align_cent .tms_sens.tms_driv:first-of-type, table.tms_axys .tms_align_cent .receipt.sns_dri:first-of-type{
	left: 5px;
}
#tms_container .tms_align_cent .tms_sens.tms_driv:last-of-type,table.tms_axys .tms_align_cent .receipt.sns_dri:last-of-type{
	right: 5px;
}
#tms_container .tms_align_cent .tms_sens.tms_driv table,  table.tms_axys .tms_align_cent .receipt.sns_dri table{
	height: 30px;
	margin: 1px;
}
#tms_container .tms_align_cent .tms_sens.tms_driv td .tms_tire_unit, .receipt.sns_dri td .tms_tire_unit{
	top: -2px;
}
#tms_container .tms_align_cent .tms_sens.tms_driv td .tms_tire_valu,.receipt.sns_dri td .tms_tire_valu{
	bottom: -2px;
}
/* Presión recomendada */
#tms_container .tms_sens .tms_rec{
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 1px;
	border-radius: 5px;
	background-color: var(--color-fore);
    line-height: 13px;
    font-size: 13px;
	padding: 0 5px;
    text-align: center;
}
#tms_container .tms_sid, .receipt.tms_sid{
	color:var(--color-fore-weak);
	position:absolute;
	text-align:center;
	font-size: 11px;
	left:0;
	right:0;
}
/* */
	#tms_container .tms_sens td, .receipt.sns_dif td, .receipt.sns_dri td{ /* Presión */
		position: relative;
		height: 30px;
		border: 1px solid #222;
		box-sizing: border-box;
	}
	#tms_container .tms_sens tr:nth-child(2) td, .receipt.sns_dif td, .receipt.sns_dri td{ /* Temperatura */
		height: 30px;
	}
	#tms_container .tms_sens td .tire_icon img{
		max-width:25px;
	}
	#tms_container .tms_sens td .tms_tire_unit, .receipt.sns_dif td .tms_tire_unit, .receipt.sns_dri td .tms_tire_unit{ /* texto de unidades de medida (presion y temperatura) en los neumaticos */
		position: absolute;
		font-size:10px;
		color:#222;
		left: 2px;
		top: 0;
	}
	#tms_container .tms_sens td .tms_tire_valu, .receipt.sns_dif td .tms_tire_valu, .receipt.sns_dri td .tms_tire_valu{ /* texto de valor de variable (presion y temperatura) en los neumaticos */
		position: absolute;
		font-size:18px;
		color:#fff;
		text-shadow: 1px 1px 2px #222,-1px -1px 2px #222;
		text-align: center;
		right: 2px;
		left: 2px;
		bottom: 5px;
	}
	#tms_container .tms_sens td .tms_sens_tabs{ /* espacio para las pestañas */
		position:absolute;
		bottom: -14px;
		left: 0;
		right: 0;
	}
	#tms_container .tms_sens td .tms_sens_tabl{ /* centrador */
		display:table;
		font-size:10px;
		width: 100%;
	}
	#tms_container .tms_sens td .tms_sens_tabb{ /* pestaña */
		float:left;
		width: 50%;
		box-sizing: border-box;
		font-weight:bold;
		text-align: center;
		color:#222;
		border: 1px solid;
		padding-top:0px;
		height:13px;
		
		background-color:var(--color-fore-weak);
		border-color: #222 transparent #222;
		line-height: 10px;
	}
	#tms_container .tms_sens td .tms_sens_tabb:first-child{
		border-bottom-left-radius: 5px;
	}
	#tms_container .tms_sens td .tms_sens_tabb:last-child{
		border-bottom-right-radius: 5px;
	}
	#tms_container .tms_sens td .tms_sens_tabb.tms_selected{
		background-color:var(--color-fore-strong);
		border-color: transparent #222 #222;
	}
	#tms_container .tms_sens td .tms_sens_tabb:not(.tms_selected){
		filter: brightness(150%) saturate(25%);
		color:#666;
	}
	
/* magic */
@media ( max-width: 720px) { 
	#tms_container {
		grid-template-columns: 1fr;
		grid-template-rows: 65px 65px auto auto auto;
		grid-template-areas:
			"tms_header"
			"tms_top"
			"tms_tires"
			"tms_report"
			"tms_mid"
			"tms_map"
	}
}

/*///////////////////////////////////////////////// vista detallada /////////////////////////////////////////////////*/
.truck_slot.fleet_detail:not(.fleet_off) .table_truck{
	height: 165px;
}
.truck_slot.fleet_detail.fleet_detail16:not(.fleet_off) .table_truck{
	height: 265px;
}
.truck_slot.fleet_detail:not(.fleet_off) .table_truck>tbody>tr{
	display: flex;
	align-items: stretch;
}
.truck_slot.fleet_detail:not(.fleet_off) .table_truck .truck_colo{
	height: auto;
}
.truck_slot.fleet_detail:not(.fleet_off) .table_truck .truck_info{
	height: 162px;
	overflow: hidden;
}
.truck_slot.fleet_detail.fleet_detail16:not(.fleet_off) .table_truck .truck_info{
	height: 278px;
}
.truck_slot.fleet_detail .table_truck .truck_stop{
	background-color: transparent !important;
	height: 1px !important;
	line-height: 0;
}
.truck_slot.fleet_detail:not(.fleet_off) .table_truck .truck_para{
	max-height:122px;
}
.truck_slot.fleet_detail.fleet_detail16:not(.fleet_off) .table_truck .truck_para{
	max-height:226px;
}
.truck_slot.fleet_detail .table_truck .truck_para table{
	margin-top: 5px;
}
.truck_slot.fleet_detail .table_truck .truck_para table td:nth-child(odd){ /* impares */
	padding: 0 4px 0 1px;
}
.truck_slot.fleet_detail .table_truck .truck_para table td:nth-child(even){ /* pares */
	padding: 0 1px 0 4px;
	text-align: right;
}
/*///////////////////////////////////////////////// vista detallada /////////////////////////////////////////////////*/
.truck_slot.fleet_off .table_truck{
	height: 50px;
}
.truck_slot.fleet_off .table_truck .truck_info{
	height: 48px;
}
/*//////////////////////////////////////////////// tms lightbox /////////////////////////////////////////////////////*/
	.ititle{
		font-size:24px;
		font-weight:bold;
		font-style:italic;
		color:var(--color-fore);
	}
	.tms_sensor_card {
		padding: 20px 0;
	}
	.tms_sensor_card.bordered {
		padding: 20px 10px;
		border: var(--border-input);
		border-radius: 5px;
		box-shadow: var(--shadow);
	}
	.tms_sensor_card h1 {
		margin: 0;
	}
	.tms_sensor_card article span {
		display: block;
		color: var(--color-fore-weak);
		font-size: 13px;
	}
	.tms_sensor_card article em {
		padding: 5px 10px;
		border-radius: 5px;
		background: var(--color-disabled);
		color: var(--color-fore);
		font-style: normal;
		font-weight: bold;
	}
	.tms_sensor_card article em.is-low {
		background: var(--color-low-back);
		color: var(--color-low-fore);
	}
	.tms_sensor_card article em.is-high {
		background: var(--color-high-back);
		color: var(--color-high-fore);
	}
	.tms_sensor_card article em.is-ok {
		background: var(--color-ok-back);
		color: var(--color-ok-fore);
	}
	.tms_sensor_card article {
		padding: 12px;
		border: var(--border);
		border-radius: 5px;
		background: var(--color-bg);
	}
	.tms_sensor_card article.gre {
		box-shadow: inset 4px 0 0 var(--color-gre-fore);
	}
	.tms_sensor_card article.yel {
		box-shadow: inset 4px 0 0 var(--color-yel-fore);
	}
	.tms_sensor_card article.ora {
		box-shadow: inset 4px 0 0 var(--color-ora-fore);
	}
	.tms_sensor_card article.red {
		box-shadow: inset 4px 0 0 var(--color-red-fore);
	}
	.tms_sensor_card article strong {
		font-size: 30px;
		color: var(--color-fore);
		font-weight: normal;
	}
	/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.topbuttons div{
	float:right;
	/*cursor:pointer;
	background-image:url(../img/button-top.png);
	width:148px;
	height:26px;*/
	font-weight:bold;
	padding-top:10px;
}
#fleettab b{
	margin: 0 5px;
}

/* RECEIPT */
div.rec_are{
	width:250px;
	margin:10px 20px;
	color: var(--color-fore-weak);
	display: inline-block;
    vertical-align: top;
}
#task_system .rec_top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	cursor: move;
	padding: 12px 16px;
	border-bottom: var(--border);
}
#task_system .rec_top h2{
	margin: 0;
}
div.rec_box{
	background-color:var(--color-surface);
	min-height:400px;
	/*border-radius: 0 0 5px 5px;*/
	border: var(--border-input);
	border-top:none;
	background-image:url(../img/ax.png);
	background-repeat:no-repeat;
	background-position:50% 75px;
	padding: 0 5px;
}
div.tab_box,
div.box{
	background-color:var(--color-surface);
	border: var(--border-input);
	padding: 5px;
}
div.tab_box{
	border-top:none;
}
div.box{
	margin-top: 10px;
}
div.flex_box{
	flex-wrap: wrap;
	display: flex;
	justify-content: space-between;
	align-items:flex-start;
	gap: 10px;
}
div.rec_hea{
	white-space: nowrap;font-size:12px; padding:0 5px;
}
table.rec_set{
	width: 100%;
}
td.rec_tab{
    /*border-radius: 5px 5px 0 0;*/
    border: var(--border-input);
    margin: -22px -3px 0;
    padding: 0 3px;
    cursor: pointer;
    height: 22px;
    border-bottom-color: var(--color-surface);
    background-color: var(--color-disabled);
    color: var(--color-fore-weaker);
    text-align: center;
}
td.rec_tab.active{
	color: var(--color-fore);
	background-color: var(--color-surface);
}

div.rec_tit {
	font-size: 12px;
	margin:-52px 0 0 35px;
	font-weight:bold;
	color:var(--color-surface);
}
div.rec_whe {
	width:35px;
	height:120px;
	margin: 0;
}
div.rec_whe_tit {
	/*line-height: 32px;
	margin: 0 0 -7px;*/
	font-size: 14px;
}
div.rec_tir {
	height:62px;
	padding: 4px;
	position: relative;
	cursor: pointer;
	border-radius: 5px;
	background: var(--tire);
}
div.rec_tir_inc {
	font-size:12px;
}
div.rec_tir_err {
	font-size:12px;
	color:var(--color-error-fore);
}
div.rec_dat {
	background-color:var(--color-fore-weak);
	color:var(--color-surface);
	border-radius:3px;
	margin:2px 0;
	padding: 1px 0;
	font-weight:bold;
}
div.rec_dat_d {
	background-color:var(--color-error-fore);
}
div.rec_tir_gau {
	position: absolute;
	left: 5px;
	top: 5px;
	right: 5px;
	bottom: 5px;
	background-image:url(../img/bat_gau.png);
	background-position:0px -10px;
	background-repeat:no-repeat;
	color:var(--color-surface);
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
}
div.rec_tir_gau div:first-child {
	font-size: 30px;
	font-weight: bold;
	line-height: 28px;
}
div.rec_tir_gau div:last-child {
	line-height: 7px;
}
div.las_sig {
	font-weight:bold;
	color:var(--color-info-fore);
}
div.las_sig_d {
	font-weight:bold;
	color:var(--color-error-fore);
}
table{
	border-spacing: 0px;
	padding: 0;
}
div.rec_tas{
	padding: 12px;
	border: var(--border);
	border-left: 4px solid var(--color-corp-u);
	border-radius: 5px;
	background: var(--color-surface);
	margin-bottom: 10px;
}
div.rec_tas.rec_tas_done{
	border-left-color: var(--color-fore-weaker);
	background-color: var(--color-bg);
	color: var(--color-fore-weak);
}
div.rec_tas.rec_tas_undo{
	color:var(--color-fore);
}
/* TASK SYSTEM */
#task_system{
	position: absolute;
	background-color: var(--color-surface);
	border-radius: 10px;
	box-shadow: var(--shadow-dark);
    left: 100px;
    top: 180px;
    z-index: 12;
	width: 640px;
	max-width: calc(100vw - 30px);
	display: none;
	overflow: hidden;
}
#task_table{
	width: 100%;
}
.task_body{
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 15px;
	padding: 15px;
}
.task_sidebar,
.task_content{
	min-width: 0;
}
#task_address{
	margin-bottom: 10px;
	font-size: 13px;
}
#task_boxi{
	height:200px;
	overflow:auto;
	background-image:none;
}
#task_boxid{
	color: var(--color-fore-weak);
}
.cls_tsk{
    width: 42px;
    min-width: 42px;
	pointer-events:auto;
	margin: 0;
}
.task_address_data{
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--color-fore-weak);
}
.task_address_row{
	margin: 0;
}
.task_list{
	max-height: 360px;
	overflow: auto;
	padding-right: 5px;
}
.rec_tas header,
.task_done,
.task_actions{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.rec_tas time,
.task_comment time{
	font-size: 12px;
	color: var(--color-fore-weak);
}
.task_content_text{
	padding: 8px 0;
	line-height: 1.35;
}
.task_actions{
	justify-content: flex-end;
}
.task_comments{
	margin-top: 8px;
	padding-left: 10px;
	border-left: var(--border);
}
.task_comment{
	padding: 5px 0;
}
.task_comment p{
	margin: 3px 0 0;
}
#task_post_bar{
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 10px;
	margin-top: 10px;
}
#task_post_bar :where(select, input, button),
#task_comm_bar input,
.rec_tas :where(input:not([type=checkbox]), button){
	margin: 0;
}
#task_comm_bar{
	display: none;
	margin-top: 10px;
}
.alarm_icon_right{
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: right;
	filter: var(--filter-icon);

	height: 18px;
	width: 18px;
	align-self: flex-end;
}
.moni_task{
	background-image: url(../img/menu/meters/tasks.png);
    background-size: 16px;
    background-repeat: no-repeat;
	background-position: right;
	
    height: 18px;
	width: 18px;
	cursor: pointer;
	filter: brightness(50%);
	align-self: flex-end;
}
.moni_task:hover{
	filter: brightness(50%);
}
/* ALERT SYSTEM */
#alert_system{
	position: fixed;
    bottom: 60px;
	right: 0px;
    z-index: 11;
	width: 360px;
}
.badge{
	position: relative;
	width: 50px;
    margin: 0 auto;
}
.badge div{
	position: absolute;
	right: 0;
	color: var(--color-fore-strong);
	line-height: 20px;
	padding: 0 5px;
	border-radius: 10px;
}
.alert_cont{
	margin:5px;
}
.alert_cont .table_truck{
	background-color:var(--color-surface);
	height:unset;
}
.alert_cont .table_truck.read{
	background-color:var(--color-disabled);
}
.alert_cont .table_truck td{
	display:table-cell;
	font-family: var(--font-main);
}
.alert_cont .table_truck .truck_colo{
	width:10px;
}
.alert_cont .table_truck .truck_info{
	width:100%;
}
.alert_cont .table_truck.read .truck_info{
	color:var(--color-fore-weaker);
}
.alert_cont .table_truck .truck_info .alert_head{
	margin-right: 25px;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
	cursor: pointer;
}
.alert_cont .table_truck .truck_info .alert_head .truck_name{
	font-size:28px;
	padding: 0 0px 0 3px;
}
.alert_cont .table_truck .truck_info .alert_head .truck_para{
	font-size:20px;
	line-height: 28px;
	flex-grow: 1;
}
.alert_cont .table_truck.read .truck_para{
	font-weight: normal;
}
.alert_cont .table_truck .truck_info .alert_head .truck_date{
	line-height: 24px;
}
.alert_cont .table_truck .truck_info .alert_head .truck_date a{
	color: var(--color-link);
}
.alert_cont .table_truck .truck_info .alert_mess,
.alert_cont .table_truck .truck_info .alert_mail {
	padding:3px;
	position: static;
}
.alert_cont .table_truck .truck_info .alert_mail{
	display: none;
}

/* TOGGLE SWITCH */

.tswitch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 22px;
}
.tswitch input { 
  visibility: hidden;
}
.tswitch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-info-fore);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 11px;
}
.tswitch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  right: 3px;
  bottom: 3px;
  background-color: var(--color-menu-fore);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}
.tswitch input:not(:checked) + .slider:after{
  position: absolute;
  content: "AUTO";
  left: 9px;
  color: var(--color-menu-fore);
  font-size: 14px;
  line-height:22px
}
.tswitch input:checked + .slider {
  background-color: var(--color-button-hover-back);
}
.tswitch input:checked + .slider:before {
  -webkit-transform: translateX(-48px);
  -ms-transform: translateX(-48px);
  transform: translateX(-48px);
}

/* */
table.addition {
	border-collapse:collapse;
	text-align:center;
}
table.addition tr.borders td {
	border: var(--border-input);
	padding:5px;
	height: 22px;
}
table.addition tr.whiteline td {
	 background:url(../img/whitedot.png) no-repeat;
	 background-position:center center;
	 background-size:100% 1px;
}
table.addition tr.borders div.head {
	background-color:var(--color-fore);
	border: var(--border);
	color:var(--color-surface);
	cursor:pointer;
}
.tab_cha{
	width:100%;
	background-color:var(--color-surface);
	border-collapse: separate;
	border-spacing: 0;
	white-space: nowrap;
	table-layout: fixed;
}
.tab_cha th{
	text-align:left;
	overflow: hidden;
}
.tab_cha th,.tab_cha td{
	color:var(--color-fore-weak);
	font-size:14px;
	padding: 8px 0;
}
.tab_cha tr:first-child :where(th,td){
	color: var(--color-fore);
	font-weight: bold;
}
.tab_cha tr:not(:first-child) :where(th,td){
	border-top: var(--border);
}
.tab_cha td, .tab_cha th:last-child{
	text-align:right;
}
.tab_cha td[colspan="4"] {
	background-image:
		linear-gradient(to bottom, var(--color-disabled) 50%, transparent 50%),
		linear-gradient(to bottom, var(--color-disabled) 50%, transparent 50%),
		linear-gradient(to bottom, var(--color-disabled) 50%, transparent 50%),
		linear-gradient(to bottom, var(--color-disabled) 50%, transparent 50%),
		linear-gradient(to bottom, var(--color-disabled) 50%, transparent 50%);
	background-size: 1px 8px;
	background-repeat: repeat-y;
	background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
}
.tab_cha td div{
	 height:20px;
	 /*overflow:hidden;*/
	 color:var(--color-surface);
	 line-height: 20px;
}
.tab_cha .cbar{ /* color bar */
	position:relative;
	margin-bottom:4px;
	overflow: visible;
	padding: 0 5px;
	box-sizing: border-box;
}
.tab_cha .cbar:first-child {
	border-radius: 4px 0 0 4px;
}
.tab_cha .cbar:last-child {
	border-radius: 0 4px 4px 0;
}
.tab_cha .cbar:only-child,
.tab_cha.fullRounded .cbar {
	border-radius: 4px;
}
.tab_cha .hbar{ /* sufijo horas */
	position:absolute;
	left: 100%;
	padding-left:5px;
	top: 0;
	color: var(--color-fore);
}
.tab_cha.tab_pxp :where(th,td){
	border-left: var(--border);
	padding: 8px;
}
.tab_cha.tab_pxp :where(th,td):first-child{
	border-left: 0;
}
.tab_cha.tab_pxp thead{
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--color-surface);
}
div.levelball {
	background-color:var(--color-fore);
	border: var(--border);
	color:var(--color-surface);
	font-weight:bold;
	border-radius:12px;
	width:18px;
	height:18px;
	text-align:center;
	cursor:pointer;
	font-size: 13px;
}
.ui-datepicker-calendar th span{
	color:var(--color-fore);
}
/* tostadas */
.toaster{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
	gap: 10px;
}
.toast{
	border: var(--border-input);
	margin: 0;
	padding: 8px 8px 8px 58px;
	width: 100%;
	box-sizing: border-box;
	border-radius: 5px;
	background-color: var(--color-link-hover);
	cursor: pointer;
	position: relative;
}
.toast::before{
	content: '';
	position: absolute;
	left: 5px;
	top: 10px;
	width: 50px;
	height: 40px;
	background-color: var(--toast-color);
	mask-image: url(../img/ext_.png);
	-webkit-mask-image: url(../img/ext_.png);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: left bottom;
	-webkit-mask-position: left bottom;
}
.toast.toast_meter{
	background-color: var(--color-bg);
}
.toast.toast_report{
	color: var(--color-fore);
	background-color: var(--color-fore-weaker);
}
.toast.toast_meter div{
	opacity: 1;
}
.toast.toast_meter .toast_title{
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	color: var(--color-tab-fore);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.toast.toast_meter .toast_subtitle{
	font-size: 12px;
	line-height: 14px;
	color: var(--color-fore-weak);
}
.toast.toast_meter .toast_progress{
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
}
.toast.toast_meter .toast_progress_bar{
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(var(--toast-color),var(--toast-color)) 0% 50% / var(--toast-progress) 100% no-repeat,var(--color-disabled);
}
.toast.toast_meter .toast_value{
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 13px;
	color: var(--color-tab-fore);
	font-weight: bold;
}
/* 0080FF */
/* -10 62 */

iframe{
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

#td_area{
	color: var(--color-surface);
}

/* Indicador de carga */
#img_load{
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	opacity: 0;
	background-color: #0009;
	color: #fff;
	text-align: center;
}
#img_load .loading_content{
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transform: translate(-50%, -50%);
}
#img_load .loading_spinner{
	width: 42px;
	height: 42px;
	box-sizing: border-box;
	border: 4px solid #ffffff55;
	border-top-color: var(--color-corp-g);
	border-radius: 50%;
	animation: loading_spin 0.8s linear infinite;
}
#img_load .loading_text{
	font-size: 16px;
	font-weight: bold;
}
#img_load #cancel_send button{
	padding: 6px 14px;
	border: 1px solid #ffffff99;
	background-color: transparent;
	color: #fff;
}
#img_load #cancel_send button:hover{
	background-color: #ffffff22;
}
@keyframes loading_spin{
	to{
		transform: rotate(360deg);
	}
}