* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; font-family:verdana, arial, helvetica; overflow-x: hidden; overflow-y: hidden }
hr {border: 0; height: 10px; box-shadow: inset 0 10px 10px -10px orange;}
button{color:white; background-color: rgba(00, 54, 103, 0.8); font-size:12pt; font-weight: bold; border-radius: 7px; border: 2px solid black; box-shadow:0px 0px 20px #000000;  }
button:hover{background-color: rgba(16, 151, 254, 0.8);}
button:active{box-shadow:0px 0px 30px #ffffff;background-color: rgba(0,0,10, 0.8)}
#map_canvas { height: 100%; width: 100% }
#idDivFecha {height:30px;background-color:transparent;position:absolute;top:92px;opacity:0.7;left:10px;width:auto;white-space: nowrap;}
#idh2fecha {display:none; border-radius:7px;border-color:white;border-width:1px;border-style:solid;position:absolute;background-color:#003667;text-align:center;opacity:1;top:0px;margin:0px;padding:0px 10px 0px 10px;text-shadow:0px -1px 0px #374683;color:white }
#idDivCountDown {display:none; position:absolute; top:40%;left:30px;background-color: rgba(255,255,255,0.3); padding:0;margin:0;border-radius: 15px;}
#idPCountDown {font-family:verdana; font-size: 52px; color: rgba(50,50,50, 0.5);font-weight:bold;padding:0 10px;margin:0; text-shadow: 2px 2px #ffffff }
/*
#idImgCompas { left: 5px; top: 65px; padding: 0; margin: 0; position: absolute; background-color: red; width: 32px; height: 32px; box-shadow: 5px -9px 3px #000}
*/
#idNBotonDonde {position:absolute;left:30px; bottom: 82px;display: none }
#idNBotonPedir {position:absolute;left:30px; bottom: 52px;}
#idNBotonPlay {position:absolute;right:30px; bottom:52px;  display: none }
#idDivCentrar {text-align:center; position: absolute;bottom:52px;width:100%;}

#idDivSliderFecha {display:none;height:32px;background-color:transparent;position:absolute;bottom:15px;opacity:0.7;left:70px;right:70px;width:auto;margin:auto }

#idDivInfowindow { display:none;width: 300px; position: absolute; top: 80px; right: -310px; bottom: 90px; background-color: rgba(44,44,44,0.7); overflow-y: auto; overflow-x:hidden;padding:0; margin: 0;border-radius: 7px; border: 2px solid black; box-shadow:0px 0px 30px #000000;  -webkit-transition: width 1s, opacity 1s linear, -webkit-transform 1s ease-in; transition: width 1s, opacity 1s linear, transform 1s ease-in;}
#idDivInfowindow h3{float:left; margin:0;padding:5px 0 0 5px; color: white; display: block; text-align: center; width: 100%; height:30px; text-overflow:ellipsis;white-space: nowrap;overflow: hidden; background-color:#003667 }
#idImgExpande {position:absolute; width: 24px; height: 24px; left:10px;margin-top:35px; }
#idImgInfoClose {position:absolute; width: 34px; height: 30px; right:15px; margin-top:35px; box-shadow: 5px 5px 5px #374683; border-style: outset; border-width: 1px; border-color: #374683 }
#idImgSig {position:absolute; width: 34px; height: 30px; right:15px;margin-top:130px; }
#idImgGallery {position:absolute; width: 34px; height: 30px; right:15px;margin-top:220px; }
#idImgShip { clear:both; top: 0px;  margin: 0; padding: 0; width:100% }
#idDivInfoShip {font-size: 9pt; text-overflow:ellipsis;white-space: nowrap;overflow: hidden;  background-color: transparent; margin: 0; padding: 5px 0 5px 5px;border-radius: 0 0 7px 7px; color: white }

#idDivVideos { display:none; width: 360px; text-align: center; position: absolute; top: 80px; right: -380px; bottom: 90px; background-color: rgba(44,44,44,0.7); overflow-y: auto; overflow-x:hidden;padding:0; margin: 0;border-radius: 7px; border: 2px solid black; box-shadow:0px 0px 30px #000000;  -webkit-transition: width 1s, opacity 1s linear, -webkit-transform 1s ease-in; transition: width 1s, opacity 1s linear, transform 1s ease-in;}
#idImgVidClose {width: 34px; height: 30px; float:right;  margin-right: 15px; box-shadow: 5px 5px 5px #374683; border-style: outset; border-width: 1px; border-color: #374683 }

#idDivMedir{display:none; width: auto; height: 45px;  position: absolute;  bottom: -55px; overflow: hidden;background-color: rgba(44,44,44,0.7); padding:0 5px; margin: 0 20px;border-radius: 7px; border: 2px solid black; box-shadow:0px 0px 30px #000000;
	-webkit-transition:  opacity 1s linear, -webkit-transform 1s ease-in; 
    -moz-transition:  opacity 1s linear, -moz-transform 1s ease-in;
	-o-transition:  opacity 1s linear, -o-transform 1s ease-in;
	transition:  opacity 1s linear, transform 1s ease-in;
}
#idImgCoor { width: 35px; height: 35px; float:left  }
#idPCoor { font-family:verdana; font-size: 9pt; color: white;  margin:4px 5px; padding: 0 10px;text-overflow:hidden;white-space: nowrap;overflow: hidden; }
#idHideTrack {display: none; right: -70px; top: 85px; padding: 0; margin: 0; position: absolute; background-image: url("../assets/markers/track.png"); width: 63px; height: 64px; box-shadow: 5px 5px 5px #374683;
	-webkit-transition:  opacity 1s linear, -webkit-transform 1s ease-in; 
    -moz-transition:  opacity 1s linear, -moz-transform 1s ease-in;
	-o-transition:  opacity 1s linear, -o-transform 1s ease-in;
	transition:  opacity 1s linear, transform 1s ease-in;
}

.expande{
    -ms-transform: translate(-320px,0px); /* IE 9 */
	-webkit-transform: translate(-320px,0px); /* Chrome, Safari, Opera */
    transform: translate(-320px,0px);
	opacity: 1;
}
.expandeVideo{
    -ms-transform: translate(-390px,0px); /* IE 9 */
	-webkit-transform: translate(-390px,0px); /* Chrome, Safari, Opera */
    transform: translate(-390px,0px);
	opacity: 1;
}
.expandeHideTrack{
    -ms-transform: translate(-90px,0px); /* IE 9 */
	-webkit-transform: translate(-90px,0px); /* Chrome, Safari, Opera */
    transform: translate(-90px,0px);
	opacity: 1;
}
.contrae{
    -ms-transform: translate(0px,0px); /* IE 9 */
	-webkit-transform: translate(0px,0px); /* Chrome, Safari, Opera */
    transform: translate(0px,0px);
	opacity: 0;
}
.sube{
    -ms-transform: translate(0,-130px); /* IE 9 */
	-webkit-transform: translate(0,-130px); /* Chrome, Safari, Opera */
    -moz-transform: translate(0, -130px);
    -o-transform: translate(0, -130px);
    transform: translate(0,-130px);
	opacity: 1;
}
.baja{
    -ms-transform: translate(0,0); /* IE 9 */
	-webkit-transform: translate(0,0); /* Chrome, Safari, Opera */
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0,0);
	opacity: 0;
}
	
.buho { 
    position: absolute; 
    left: 10px; 
	top: 125px;
	margin: 0;
	padding:0;
    width: 54px; 
    height: 64px; 
    background-image: url("../assets/buho.png"); 
	--background-position: 0 -305px;
	opacity: 0.8;
} 
	
.compas { 
    position: absolute; 
    left: 60px; 
	top: 125px;
	margin: 0;
	padding:0;
    width: 64px; 
    height: 61px; 
    background-image: url("../assets/markers/grupo.png"); 
	background-position: 0 -305px;
	opacity: 0.8;
} 
.compas:hover {background-position: 0 -364px;}

.video { 
    position: absolute; 
	display: none;
    left: 15px; 
	top: 240px;
	margin: 0;
	padding:0;
    width: 48px; 
    height: 48px; 
    background-image: url("../assets/markers/video.png"); 
	opacity: 0.8;
} 

.images { 
    position: absolute; 
	display: none;
    left: 15px; 
	top: 300px;
	margin: 0;
	padding:0;
    width: 48px; 
    height: 48px; 
    background-image: url("../assets/gallery.png"); 
	opacity: 0.8;
} 
.result { 
    position: absolute; 
	display: none;
    left: 10px; 
	top: 240px;
	margin: 0;
	padding:0;
    width: 55px; 
    height: 55px; 
    background-image: url("../assets/markers/listado.png"); 
	background-size: 55px 55px;
	opacity: 0.8;
} 
.marquee {
    width: 100%;
    margin: 0 20px;
	padding:0;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
	position: absolute;
	bottom: 5px;
	right: 10px;
}
.marquee span {
	font-family: verdana; 
	font-size: 16px; 
	color: rgba(255,255,255, 0.9);
	text-shadow: 2px 2px #000000;
    display: inline-block;
    padding-left: 150%;  /* 100% show the marquee just outside the paragraph, 150% delay50%*/
    animation: marquee 50s linear infinite;
	-webkit-animation: marquee 50s infinite;
}
.marquee span:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}


.navy{
	margin: 0;
	padding: 0;
	text-align: center;
		border: 2px solid black;  
		background: #003667 ;
		width: 130px; 
		color: #FFF;
		border-radius: 15px;
		box-shadow: 0px 0px 20px #000000 ; 
} 
input[type='number'] {
    -moz-appearance:textfield;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
	margin: 0;
}
input[type='date']::-webkit-outer-spin-button,
input[type='date']::-webkit-inner-spin-button {
    -webkit-appearance: none;
	margin: 0;
}

#idDivSelTags{display: none; position:absolute; left: 0;top:190px; width:140px; height: 230px;background-color: rgba(80,80,80,0.3); padding:10px 5px; margin: 0 5px;border-radius: 7px; border: 2px solid black; box-shadow:0px 0px 30px #000000; }
#idDivSelDevice {position: absolute; top:10px;  font-size: 9px; padding:0; margin: 0; display: none }
#idDivSelType {position: absolute; top:40px;  font-size: 9px; padding:0; margin: 0; display: none }
#idDivSelDate {position: absolute; top:70px;  font-size: 9px; padding:0; margin: 0; display: none }
.calendario { 
	display: none;
    position: absolute; 
	top: 100px;
} 
#idLabelMMSI{ position: Absolute; top:130px; font-size:11px;left:10px;font-weight:bold;color:navy}
.mmsi { 
	display : none;
    position: absolute; 
	top: 150px;
	height: 25px;
} 
.time { 
	display: none;
    position: absolute; 
	top: 150px;
} 
.span { 
	display: none;
    position: absolute; 
	top: 180px;
} 
.span.option{
		text-align: center;
}


#idListaObjetos {position: absolute; top:200px; left:10px; font-size: 12px; display: none }



/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); } /*{ text-indent: 27.5em }*/
    100%  { transform: translate(-100%, 0); } /*{ text-indent: -105em }*/
}
@-webkit-keyframes marquee {
  0%   { -webkit-transform: translate(0, 0); }
  100% { -webkit-transform: translate(-100%, 0); }
}
@-moz-keyframes marquee {
  0%   { -moz-transform: translate(0, 0); }
  100% { -moz-transform: translate(-100%, 0); }
}
@-o-keyframes marquee {
  0%   {  -o-transform: translate(0, 0); }
  100% {  -o-transform: translate(-100%, 0); }
}

@media (max-width: 400px)
{
	#idImgExpande{
	display: none;
	}
	#idImgVidClose{
	margin-right:35px;
	}
	#idImgInfoClose{
	right:25px;
	}
	#idImgSig{
	right:25px;
	}
	#idImgGallery{
	right:25px;
	}
	#idPCountDown{
	font-size: 22px;
	}
	#idh2fecha{
	font-size: 14px;
	}
 .mwl {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 100px;     
     white-space: nowrap;
   }