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

/** {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}*/

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 20px;
  border: 3px solid transparent;
}

.seccionTable::-webkit-scrollbar {
  width: 10px;
}

.seccionTable::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 20px;
  border: 3px solid transparent;
}

#wrapper, #container {
	width: 100%;
	height: 100%;
}

.topBar {
	height: 30px;
	width: 100%;
	background: black;
	background: #DA125F;
	display: grid;
	grid-template-columns: 50% auto;
}

.topBar img {
	height: 30px;
}

.menuOptions {
	margin: 0px 0px 0px 0px;
}

.menuOptions a {
	margin: 5px;
}

/**/

.bottomBar {
	height: 100%;
	width: 100%;
	background: black;
}

.mapBarOn {
	height: 100%;
	width: 77%;
	display: inline-block;
}

.mapBarOff {
	height: 100%;
	width: 100%;
	display: inline-block;
}

.rightBarOn {
	height: 100%;
	width: 23%;
	display: inline-block;
	background: black;
	/*min-width: 200px;*/
}

.rightBarOff {
	width: 0%;
}

/**/

.rowGGeofence {
	display: grid;
	grid-template-columns: 35px 95px 55px;
	grid-gap: 3px;
	background: white;
	padding: 1px 10px;
}

.rowGGeofence button {
	background: transparent;
	width: 20px;
	height: 20px;
}

.rowGGeofence button:focus {
	outline: 0;
}

/**/

.toggleListaGeofences {
	position: relative;
	width: 30px;
	height: 40px;
	/*background: #125FDA;*/
	background: #DA125F;
	top: 40.5%;
}

.geofencesOn {
	left: 200px;
}

.geofencesOff {
	left: 0px;
}

.toggleListaGeofences button {
	background: transparent;
	width: 80%;
	height: 100%;
	border-width: 0px;
	color: white;
}

.toggleListaGeofences button:focus {
	outline: 0;
}

/**/

.toggleListaUnidades {
	position: relative;
	width: 40px;
	height: 40px;
	background: #DA125F;
	top: 50%;
	left: 97.5%;
}

.toggleListaUnidades button {
	background: transparent;
	width: 80%;
	height: 100%;
	border-width: 0px;
	color: white;
}

.toggleListaUnidades button:focus {
	outline: 0;
}

/**/

.alertas {
	height: 340px;
}

.unidades {
	height: auto;
}

.secciones {
	height: 96%;
	overflow-y: scroll;
	background: lightgray;
}

.seccionBody {
	background: grey;
	/*height: auto;*/
	width: 100%;
	overflow-y: auto;
}

.geofencesBodyOn {
	width: 200px;
	height: 400px;
	position: relative;
	top: -10px;
	left: 0px;
}

.geofencesBodyOff {
	width: 0px;
}

.seccionOptions {
	display: grid;
	grid-template-columns: 50% 50%;
}

.titleOptions {
	grid-column: 1 / span 2;
}

.checkBoxOption {
	display: grid;
	grid-template-columns: 30px auto;
}

.checkBoxOption span {
	margin: 5px 0px;
}

.seccionHeader {
	height: 35px;
	width: 100%;
	display: grid;
	grid-template-columns: auto 20px;
	background: black;
	color: white;
	font-weight: bold;
	padding: 5px;
}

.seccionHeader button {
	width: 20px;
	height: 20px;
	padding: 0px;
	font-size: smaller;
	background: transparent;
	color: white;
}

.seccionTable {
	display: inline-block;
	width: 100%;
	background: #DA125F;
	/*overflow-y: scroll;*/
	max-height: 600px;
}

/**/

.checkBox {
	width: 20px;
	height: 20px;
	margin: 5px;
	padding: 0px 2px 0px 2px;
	font-size: smaller;
}

.checkBox span {

}

/**/

.seguirButton{
	background: transparent;
	border-width: 0px;
	color: white;
}

.seguirButton button:focus{
	outline: 0;
}

.colapseButton{
	background: transparent;
	border-width: 0px;
	color: white;
}

.colapseButton button:focus{
	outline: 0;
}

/**/
	
.rowAlerta {
	font-weight: bold;
	font-size: 10px;
	color: darkslategrey;
	background: orange;
	height: auto;
	padding: 2px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.rowAlertaSelected {
	background: #ffdc99;
}

.rowAlerta div {

}

.alertasFilter {
	background: grey;
	height: auto;
	overflow: scroll;
	font-size: smaller;
	padding: 10px 5px 0px 5px;
}

.trackerFilterOptions {
	display: grid;
	grid-template-columns: 20px auto;
	height: 100px;
	padding: 2px 10px;
	overflow: scroll;
}

.trackerFilterOptions label {
	font-weight: normal;
}

.alertFilterOptions {
	display: grid;
	grid-template-columns: 20px auto;
	height: 200px;
	padding: 2px 10px;
	overflow: scroll;
}

.alertFilterOptions label {
	font-weight: normal;
}

.optionsContent {
	display: grid;
	grid-template-columns: 50% 50%;
	overflow: hidden;
	height: 200px;
}

.timeOptions {

}

.controlOptions {
	display: grid;
	grid-template-columns: 50% 50%;
	padding: 5px 2px;
}

.optionsWrapper {
	display: grid;
	grid-template-rows: 20px auto;
	background: whitesmoke;
	height: 200px;
	overflow: hidden;
}

.checkBoxControls {
	display: grid;
	grid-template-columns: 50% 50%; 
}

.rowOption {
	width: 110px;
	display: grid;
	grid-template-columns: 17px auto;
	padding: 2px;
}

.rowOption label {
	padding: 0px;
	margin: 0px;
}

.rowOption input {
	padding: 0px;
	margin: 0px;
}
/**/

.rowGrupo {
	height: 20px;
	margin: 0px;
	display: grid;
	grid-template-columns: 20px auto 50px;
	font-weight: bold;
	color: white;
}

.rowGrupo div {
	height: auto;
}

.rowFlotilla {
	height: 20px;
	margin: 0px;
	display: grid;
	grid-template-columns: 20px auto 50px;
	font-weight: bold;
	color: white;
}

.rowFlotilla div {
	height: auto;
}

/**/

.rowUnidad {
	height: auto;
	margin: 0px;
	display: grid;
	grid-template-columns: 20px 130px auto;
}

.leftRow {
	height: 100%;
	width: 100%;
	background: #919ED6;
	color: white;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/*padding: 3px;*/
}

.leftRow button:focus {
	outline: 0;
}

.checkboxUnidadOn {
	padding: 0px;
	width: 100%;
	height: 100%;
	color: white;
	background: #6ec76e;
}

.checkboxUnidadOff {
	padding: 0px;
	width: 100%;
	height: 100%;
	color: white;
	background: #c76e6e;
}

.centerRow {
	height: 100%;
	width: 100%;
	background: #919ED6;
	color: white;
	margin: 0px 2px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 3px;
}

.rightRow {
	height: 100%;
	width: 100%;
	background: #919ED6;
	color: white;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px 4px;
}

.bottonRow {
	background: white;
	height: 200px;
}

.bottomRowOn {
	width: 100%;
	margin: 0px 0px 1px 10px;
	height: auto;
	grid-column: 1 / span 3;
}

.bottomRowOff {
	height: 0px;
	visibility: hidden;
}

.rightRowWrapper {
	display: grid;
	grid-template-columns: 20px 20px 20px 20px 20px 20px;
	height: 100%;
}

.ligaAnalisisRuta {
	width: 100%;
	background: orange;
	padding: 3px 2px;
}

.ligaAnalisisRuta a {
	color: #333;
}

.offRuta {
	height: 100%;
	width: 20px;
	border-width: 0px;
	background: transparent;
}

.onRuta {
	height: 100%;
	width: 20px;
	border-width: 0px;
	background: deepskyblue;
}

.offDetalle {
	height: 100%;
	width: 20px;
	border-width: 0px;
	background: transparent;
}

.offSeguir {
	height: 100%;
	width: 20px;
	border-width: 0px;
	background: transparent;
}

.onSeguir {
	height: 100%;
	width: 20px;
	border-width: 0px;
	background: deepskyblue;
}

.iconDiv {
	text-align: center;
	height: 100%;
}

.hiddenSpan {
	visibility: hidden;
}

.iconSpanUnkown {
	color: #aaa;
}

.iconSpanOn {
	/*TODO*/
}

.iconSpanOff {
	/*TODO*/	
}

.iconSpanIdle {
	/*TODO*/
}

#trackerFilterOptionsTable tbody td {
	padding: 1px 5px;
	/*background: grey;*/
	font-size: smaller;
}

#alertasTable tbody td {
	padding: 1px 5px;
	background: grey;
	font-size: smaller;
}

#unidadesTable tbody td {
	padding: 1px 5px;
	background: grey;
	font-size: smaller;
}

#geofencesTable tbody td {
	padding: 1px 1px;
	background: grey;
	font-size: smaller;
}

/**/

.detalleBody {
	width: 600px;
	/*height: 260px;*/
	background: grey;
	padding: 2px 4px;
	font-size: smaller;
}

.detalleBottom {
	height: 130px;
	overflow: hidden;
}

.detalleTop {
	/*height: 50px;*/
	background: black;
}

.detalleTitle {
	display: grid;
	grid-template-columns: 5% 95%;
}

.detalleTitle div{
	height: 30px;
	font-size: initial;
	color: white;
	padding: 5px;
	font-weight: bold;
}

.detalleMenu {
	height: 25px;
	background: #DA125F;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

.detalleMenuButton {
	background: transparent;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	height: 100%;
	width: 148px;
	border-width: 0px;
}

.detalleLeft {
	width: 35%;
	height: 96%;
	background: white;
	margin: 1px;
	display: inline-block;
	overflow: auto;
}

.detalleCenter {
	width: 32%;
	/*height: 96%;*/
	background: white;
	margin: 1px;
	display: inline-block;
	overflow: auto;
}

.detalleRight {
	width: 31.5%;
	height: 120px;
	background: white;
	margin: 1px;
	display: inline-block;
	overflow: auto;
}

.detalleTrackerColumnLeft {
	display: inline-block;
	width: 75%;
}

.detalleTrackerColumnRight {
	display: inline-block;
	width: 25%;
}

.detalleRowBig {
	height: 60px;
	border: solid;
	border-width: 1px;
	border-color: grey;
}

.detalleRow{
	height: 20px;
	border: solid;
	border-width: 1px;
	border-color: grey;
	/*background: white;*/
}

.detalleIcon {
	/*width: 15px;*/
	/*height: 100%;*/
	display: inline-block;
	padding: 2px;
	color: transparent;
	background: white;
}

.detalleLabel {
	display: inline-block;
	padding: 5px 3px 0px 3px;
	background: white;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.labelGrid {
	display: grid;
	grid-template-columns: 85% 15%;
}

.labelGrid p {
	white-space: normal;
}

.detalleLabel button {
	color: white;
	background: #DA125F;
}

.detalleTabla {
	width: 100%;
	height: 128px;
	background: white;
}

/*////////////////////////*/

.geoInfoWrapper {
	display: grid;
	grid-template-columns: 200px 200px 190px;
	grid-gap: 1px;
	/*height: 128px;*/
}

.geoInfoCell {
	/*background: white;*/
}

.a0 {
	grid-column: 1;
	grid-row: 1;
}

.a0Wrapper {
	display: grid;
	grid-template-columns: 20px auto;
	height: 64px;
	grid-gap: 1px;
}

.a1 {
	grid-column: 1;
	grid-row: 2;
}

.a1Wrapper {
	display: grid;
	grid-template-columns: 20px auto 20px auto;
	height: 64px;
	grid-gap: 1px;
}

.b0 {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.b0Wrapper {
	display: grid;
	grid-template-columns: 20px 179px;
	height: 129px;
	grid-gap: 1px;
}

.b0Wrapper div {
	height: 64px;
}

.b1 {
	grid-column: 2;
	grid-row: 2;
}

.c0Wrapper {
	display: grid;
	grid-template-columns: 20px auto;
	height: 129px;
	grid-gap: 1px;
	background: white;
}

.c0 {
	grid-column: 3;
	grid-row: 1 / span 2;
}

.admininfoRowWrapper {
	display: grid;
	grid-template-columns: 96%;
	grid-gap: 1px;
}

.admininfoRowWrapper div {
	background: white;
	padding: 2px 4px;
}

.admininfoWrapper {
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	height: 128px;
	grid-gap: 1px;
	background: transparent;
}

.admininfoWrapper div {
	background: white;
	height: 21px;
	padding: 5px;
}

.idSensorLabel {
	margin: 0px 5px;
}

.valueSensorLabel {
	margin: 0px 5px;
	font-weight: lighter;
}

.nameSensorLabel {
	margin: 0px 5px;
	font-weight: lighter;
}

.accesoriosWrapper {
	display: grid;
	/*grid-template-columns: 30px 561px;*/
	grid-template-columns: 33px 130px 130px 35px 130px 130px;
	height: 130px;
	grid-gap: 1px;
}

.accesoriosWrapper div {
	background: white;
	max-height: 30px;
}

/*////////////////////////*/

.detalleFuncionesWrapper {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

.rutaWrapper {
	height: 100%;
}

.rutaWrapper button {
	height: 100%;
	width: 25px;
	background: orange;
	border-width: 0px;
	font-weight: bold;
}

.rutaWrapper button:focus {
	outline: 0;
}

.rutaForm {
	margin: 5px;
	display: grid;
	grid-template-rows: 20px 20px 20px;
	width: 80%
}

.rutaOn {
	background: orange;
	color: black;
}

.rutaOff {
	background: lightgreen;
	color: black;
}

.seguirWrapper {
	height: 100%;
}

.seguirWrapper button {
	height: 100%;
	width: 25px;
	background: orange;
	border-width: 0px;
	font-weight: bold;
}

.streetView {
	/*height: 100%*/
}

.streetView button {
	background: #DA125F;
	color: white;
	border-width: 0px;
	position: relative;
	z-index: 99;
}

.streetViewOn {
	width: 100%;
	height: 100%
}

.streetViewOff {
	width: 0%;
	height: 0%
}

.streetviewWrapper {
	height: 100%;
}

.streetviewWrapper button {
	height: 100%;
	width: 25px;
	background: orange;
	border-width: 0px;
	font-weight: bold;
}

.ocultarWrapper {
	height: 100%;
}

.ocultarWrapper button {
	height: 100%;
	width: 25px;
	background: orange;
	border-width: 0px;
	font-weight: bold;
}

@-webkit-keyframes tracker-off {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes tracker-off {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes tracker-off {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes tracker-off {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.trackerOff {
	/*-webkit-animation: tracker-off 1s infinite;*/
	/*-moz-animation:    tracker-off 1s infinite;*/
	/*-o-animation:      tracker-off 1s infinite;*/
	animation:         tracker-off 1s infinite;
}

.barraOff{
	/*-webkit-animation: tracker-off 1s infinite;*/
	/*-moz-animation:    tracker-off 1s infinite;*/
	/*-o-animation:      tracker-off 1s infinite;*/
	animation:         tracker-off 1s infinite;
}

.modalContainer {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #00000066;
}

.modalLoader {
	border: 16px solid #f3f3f3;
	border-top: 16px solid #3498db;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}