body, html {
	width: 100%;
	height:  100%;	
	display: table;
}

#main {
	width: 100%;
	display: table;
	height: 100%;
}


#map {
	height: 100%;
	width: 82%;
	float: left;
	background: #fbfbfb url(http://logistica.saetech.com.ar/images/logo.gif) no-repeat bottom right;
}


.red-row{ /*background-*/color: rgb(255, 118, 118) !important; } 




#hover-des {	
	position: absolute;
	top: 10px;
	left: 50%;
	background: rgba(0,0,0,.5);
	padding: 10px 15px 11px 15px;
	/* font-weight: bold; */
	color: #fff;
	border-radius: 5px;
	box-shadow: 1px 1px 1px #b5b5b5;
	letter-spacing: 1px;
	font-size: 19px;
	display: none;
}

#last-update {
	position: absolute;
	display: table;
	bottom: 10px;
	right: 31px;
	background: rgba(255,255,255,.9);
	color: #000;
	padding: 5px 14px 5px 15px;
	font-size: 12px;
	box-shadow: 1px 1px 1px #8a8a8a;
	border-radius: 3px;
	display: none;
}


#left-col {
	width: 18%;
	border-right: 1px solid #ccc;
	float: left;
	height: 100%;
	padding: 20px;
	display: table;
	display: block;
	background: #ffffff;
	overflow: auto;
	min-width: 375px;
	position: relative;
}

#left-col div#movs-count {
	font-size: 12px;
	display: table;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	background: #f7f7f7;
	padding: 4px;
	border-radius: 4px;
	color: #666;
}



#left-col div.top-buttons {
	display: table;
	font-size: 12px;
	margin: 0 auto;
	height: 40px;
	margin-bottom: 10px;
	border-bottom: 2px solid #ccc;
	padding-bottom: 11px;
}
#left-col div.top-buttons a {
	float: left;
	color: #666;
	border-radius: 4px;
	text-decoration: none;
    padding: 7px 10px 7px 10px;
	background: #fff;	
}
#left-col div.top-buttons a:first-child {
	margin-right: 8px;
	text-decoration: none;
}
#left-col div.top-buttons a:hover {
	color: #fff;
	text-decoration: none;
	background: #2c6d86;	
}
#left-col div.top-buttons a.selected {
	color: #fff;
	background: #666;	
}


#movs-grid {
	width: 100%;
	display: none;
}

#mov-list, #mov-detail {
	width: 100%;
	display: table;
}

.drag-handle {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 31px;
	height: 100%;
}
/*
#events-list {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#events-list li {
	width: 100%;
	display: table;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
*/


.right-fake-border {	
    position: absolute;
    left: -3px;
    top: 0px;
    height: 100%;
    width: 30px;
}

#switch-map {
  height: 30px;
  width: 90%;
  margin: 0 auto;
  clear: both;
  margin-left: 5%;
  margin-top: 8px;
  margin-bottom: 15px;
}


#mov-list-sel {
  height: 0px;
  width: 200px;
  margin: 0 auto;
}


.mov-selected-point span {
	clear: none;
	float: left;
	display: table;
}


.mov-selected-point .buttons {
	clear: none;
	float: right;
	display: table;
	margin-bottom: 3px;
}


.mov-selected-point .buttons a.mov-btn {
	position: relative;
	margin-right: 5px;
	padding-left: 7px;
	padding-right: 7px;
	margin-top: 0px;
}


.mov-data-container {
	margin-top: 10px;
	padding-left: 31px;
	position: relative;
	box-shadow: 1px 1px 4px #cecece;
	/* background-color: #ccc; */
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-radius: 3px;
}

.mov-data {
	width: 100%;
	min-height: 100px;
	display: block;
	float: none;
	border: 3px solid;
	color: #666;
	margin: 0 auto;
	margin-top: 10px;
	font-size: 13px;
	background: #fff;
	padding-bottom: 5px;
	position: relative;
	/* box-shadow: 2px 2px 18px #524E4E; */
	/* border-radius: 3px; */
	border: 0px !important;
}




.mov-data h1 {
    color: #fff;
    font-size: 30px;
    font-weight: normal;
    /* margin: 0 auto; */
    display: block;
    opacity: .5;
    height: auto;
    display: table;
    padding: 5px;
    position: absolute;
    left: 45px;
    margin: 0px;
    top: -3px;
}

.device-log .mov-data h1 {
    width: 100%;
    height: 10px;
    float: none;
    position: relative;
    border-bottom: 1px solid #666;
    clear: both;
    padding: 0px;
    display: table;
    margin: 0px;
    color: #666;
    font-size: 18px;
    left: 0px;
    padding-top: 9px;
    padding-bottom: 5px;
    font-weight: bold;
    padding-left: 10px;
}

.device-log .mov-data .mov-info {
	margin-top: 0px;
}


.mov-data .mov-visible {
	position: absolute;
	left: 5px;
	top: 5px;
	z-index: 999;
}




.mov-data .mov-info {
	display: table;
	font-size: 13px;
	margin: 0px;
	padding-left: 6px;
	padding-right: 7px;
	margin-top: 40px;
	position: relative;
	/* margin: 0px; */
	width: 100%;
}
.mov-data .mov-info div.row {
	display: table;
	width: 100%;
	margin-left:  0px;
	margin-right: 0px;
}

.mov-data .mov-info div.row .last-point span {
	float: right;
    padding-left: 10px;
}

/*
.mov-data .mov-info div.row .alarmas {	
    background: rgba(255,255,255, .5);
    width: 100%;
    display: table;
    text-align: center;
    padding-top: 3px;
    margin-top: 5px;
    height: 20px;
}*/






.mov-data .mov-info div.row .white {
    background: rgba(255,255,255, .5);
    width: 100%;
    display: table;
    text-align: center;
    padding-top: 3px;
    margin-top: 5px;
    height: 23px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 7px;
    color: #000;
}



.rows-wrapper {
    background: #f5f5f5;
    margin-top: 10px;
    border-radius: 5px;
}



.rows-wrapper .alarmas {
	height: 50px;
	border: 1px solid #000;
}
.rows-wrapper .row {
	padding: 0px;
	background: transparent;
	margin: 0px;
}

.rows-wrapper .row .white {
	margin: 0px;
	padding: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #dedede;
	margin: 0px !important;
}


.mov-data .mov-info div.row .alarmas span {
	margin-right: 10px;
}


.mov-data .mov-info div.row .alarmas span.justified {
	color: green;
}
.mov-data .mov-info div.row .alarmas span.checked {
	color: blue;
}

.mov-data .mov-info div.row .circle {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	margin-right: 10px;
	color: #fff;
	float: left;
    padding-top: 2px;
    font-size: 11px;
    padding-right: 1px;
}


.left {
	float: left;
	display: table;
}
.right {
	float: right;
	display: table;
}



a.mov-btn {
	position: absolute;
	z-index: 999;
	font-size: 15px;
	color: #666;
	padding: 2px;
	background: #fff;
	font-weight: normal;
	width: 25px;
	text-align: center;
	border-radius: 3px;
	box-shadow: 1px 1px 1px #666;
}
a.mov-btn:hover {
	color: #000;
	font-weight: normal;
}


.options-btn {
	position: absolute;
	z-index: 999;
	left: 3px;
	top: 3px;
	display: table;
}

.options-btn i {
	font-size: 15px;
	color: #666;
	padding: 2px;
	background: #fff;
	font-weight: normal;
	width: 25px;
	text-align: center;
	border-radius: 3px;
	box-shadow: 1px 1px 1px #666;	
}
/*
a.remove-mov {
	right: 5px;
	top: 5px;
}
a.open-evts {
	right: 35px;
	top: 5px;
}
a.options-btn {
	left: 3px;
	top: 3px;
}

.add-mov-cpl {
	top: 5px;
	right: 65px;
}

a.follow-mov {
	right: 35px;
    top: 5px;
}

*/


div.options-container {
	width: 32px;
	display: none;
}

.options-btn:hover div.options-container {
	display: table;
}

div.options-container a {
	position: relative !important;
	margin-top: 3px;
    clear: right;
    display: block;
}


a.follow-mov.pinned i, a.follow-mov.pinned:hover i  {
	color: green;
}

div.options-container a.active, div.options-container a.active i {
	color: green !important;
}

div.options-container a.mov-visible, div.options-container a.mov-visible i {
	color: red;
}





/** Listado de Eventos */

.events-list {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: table;
    border-radius: 5px;
    background: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 1px 2px 4px #666;
}
.events-list .wrapper {
	width: 100%;
    padding-right: 27px;
	height: 100%;
	display: table;
}

.events-list .close-btn {
	display: table;
	position: absolute;
	top: 5px;	
	right: 5px;
}


/** PopUp */


.open-infonode, .lookup-cell {
	display: table !important;
	padding : 3px;
	color: #fff !important;
	background: #0078A8;
	margin: 0 auto;
	margin-top: 3px;
	width: auto !important;
	border-radius: 3px;
}.open-infonode:hover,.lookup-cell:hover {
	text-decoration: none;
}





.popup-wrapper {
	max-height: 250px;
	overflow-y: scroll;
	width: 250px
}

.point-data {
	display: table;
	width: 240px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
	/* padding: 20px; */
}
.point-data a {
	display: block;
	width: 100%;
	height: 15px;
	font-size: 12px;
	margin-bottom: 5px
}

.point-data .separator {
	width: 100%;
	border-top: 1px dotted #ccc;
	padding-top: 4px;
	padding-bottom: 4px;
	height: 4px;
}

.point-properties {
	display: none;
	padding: 0px;
}

.point-properties .row {
	display: table;
	height: 22px;
	margin-left: 0px;
	margin-right: 0px;
}
.point-properties .row.separated {
	padding-bottom: 3px;
}



.point-properties .row strong {
	float: left;
	margin-right: 10px;
	width: 97px;
	margin-bottom: 5px;
}
.point-properties .row span {
	float: right;
	width: 120px;
}

.point-properties.only-point {
	display: table;
}




/** dataTables config */


.dataTables_length, .dataTables_filter  {	
    font-size: 13px;
    border: 1px solid #ccc;
    padding: 10px;
    font-weight: normal;
    margin-bottom: 17px;
}

.dataTables_filter input {
    border-radius: 3px;
    border: 1px solid #666;
}



.dataTable {
	color: #666;
}

/* Sel. Point **/

#sel-point {
    position: absolute;
    right: 53px;
    z-index: 999;
    width: 200px;
    top: 11px;
    opacity: 0.95;
    background: #fff;
    border-radius: 3px;
	display: table;
	height: 50px;
	box-shadow: 1px 1px 1px #504E4E;
    padding: 0px;
    padding-top: 6px;
}

#sel-point .buttons {
	float: right;
	display: table; 
}


#sel-point .detail {
	float: left;
	margin-left: 10px;
	margin-top: 5px;
	font-size: 13px;
}

#sel-point .buttons a {
	position: relative;
	display: table;
	float: left; 
	margin-right: 5px;
}

#sel-point .buttons a:last-child {
	margin-right: 0px;
}


/* Markers */


.truck-sign-alarmed-icon  {
  background: url('../img/markers/truck-alarmed-sign.png') transparent;
  position: relative;  
}



.icon-truck-device  {
  background: url('../img/markers/truck-sign.png') transparent;
  position: relative;  
}


.icon-truck-device span  {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 58px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}


.icon-truck-device .truck-colorizer  {
  position: absolute;
  top: 20px;
  left: 26px;
  width: 16px;
  height: 14px;
}

.truck-sign-checked-icon  {
  background: url('../img/markers/truck-checked-sign.png') transparent;
  position: relative;  
}



.truck-sign-justified-icon  {
  background: url('../img/markers/truck-justified-sign.png') transparent;
  position: relative;  
}


.truck-sign-justified-icon span, .truck-sign-alarmed-icon span, .truck-sign-checked-icon span {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 51px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}





.truck-sign-justified-icon span {
  color: #3E8E45;
}

.truck-sign-alarmed-icon span {
    color: #D05C5C;
}

.truck-sign-checked-icon span  {
  color: #5A6F9E;
}

.truck-sign-justified-icon span.lines-1, .truck-sign-alarmed-icon span.lines-1, .truck-sign-checked-icon span.lines-1 {
  font-size: 15px;
  padding-top: 7px;
}


.truck-sign-justified-icon span.lines-2, .truck-sign-alarmed-icon span.lines-2, .truck-sign-checked-icon span.lines-2 {
  font-size: 12px;
  padding-top: 2px;
}

.truck-sign-justified-icon span.lines-3, .truck-sign-alarmed-icon span.lines-3, .truck-sign-checked-icon span.lines-3 {
  font-size: 10px;
  padding-top: 2px;
  line-height: 11px
}


.truck-sign-justified-icon span.lines-4, .truck-sign-alarmed-icon span.lines-4, .truck-sign-checked-icon span.lines-4 {
  font-size: 9px;
  padding-top: 0px;
  line-height: 9px;
}





.alarmed-icon span, .justified-icon span, .checked-icon span {
  position: absolute;
  color: #CEC8C8;
  top: 18px;
  left: 1px;
  width: 55px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

.alarmed-icon span.lines-1, .justified-icon span.lines-1, .checked-icon span.lines-1{
  top: 18px;  
}

.alarmed-icon span.lines-2, .justified-icon span.lines-2, .checked-icon span.lines-2 {
  top: 15px;  
  line-height: 12px;
  font-size: 12px;
}

.alarmed-icon span.lines-3, .justified-icon span.lines-3 , .checked-icon span.lines-3 {
  top: 9px;  
  line-height: 12px;
  font-size: 11px;
}

.alarmed-icon span.lines-4, .justified-icon span.lines-4, .checked-icon span.lines-4 {
  top: 9px;  
  line-height: 10px;
  font-size: 10px;
}



.alarmed-icon {
  background: url('../img/markers/marker-alarmed.png') transparent;
  position: relative;
}


.justified-icon {
  background: url('../img/markers/marker-justified.png') transparent;
  position: relative;
}


.checked-icon {
  background: url('../img/markers/marker-checked.png') transparent;
  position: relative;
}


.moto-icon {
  background: url('../img/markers/moto-patente.png') transparent;
  position: relative;
}

.moto-ncom {
  background: url('../img/markers/moto-ncom.png') transparent;
}

.camioneta-sae-icon {
  background: url('../img/markers/camioneta-sae.png') transparent;
  position: relative;
}

.moto-icon span,  .camioneta-sae-icon span{
  position: absolute;
        color: #000000;
  top: 1px;
  left: 1px;
  width: 55px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}

.camioneta-sae-icon span {
	font-size: 11px;
}



.alarma {
	width: 100% !important;
	color: #666;
	box-shadow: none;
	border-bottom: 1px solid #666;
}

.alarma h3 {	
	font-size: 17px;
	padding-left: 10px;
    font-weight: bold;
}

.alarma .progress-bar {
	height: 103%;
}


.alarma.checked, .alarma.alarmed, .alarma.justified {
	border-bottom: 0px;
}


.event-time {
	display: table;
}


.alarma .letra-container {
  padding-top: 6px;
}

/* Point Status */

.point-status {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: blue;
    color: white;
    font-size: 12px;
    padding-left: 0px;
    padding-top: 1px;
    float: left;
}

.point-status.status-justified {
	background: green;
}
.point-status.status-alarmed {
	background: red;
}



.map-buttons {
	width: 100%;
	display: table;
	padding-left: 10px;
	padding-right: 10px;
	display: none;
}

.map-btn.task-operator {
	display: none;
}

.map-btn.task-cclients {
	display: none;
}

/* Filtro de Movimientos por DESNumber */

#search-box {
	display: table;
	/*width: 100%;*/
	margin: 0 auto;
	position:relative;
}

input#filter-movements {
    width: 210px;
	height: 40px;
	font-size: 15px;
	border: 1.3px solid #b9b9b9;
	color: #666;
	border-radius: 3px;
	padding-left: 10px;
	text-align: center;
	/*display: none;*/
}

#search-results {
	display: none;
	width: 100%;
	z-index: 9999;
	background-color: #fdfdfd;
	padding: 5px;
	border-radius: 3px;
	box-shadow: 2px 2px 2px #ccc;
	padding-bottom: 2px;
    padding-top: 10px;
	max-height: 200px;
	overflow: auto;
}

#search-results li {
	margin-left: 0px;
	margin-bottom: 8px;
	display: table;
}

#search-results li a {
	color: #909090;
	font-size: 12px;
}

#search-results li .mov-id {
	width: 45px;
	float: left;
	padding-right: 5px;
	margin-right: 5px;
	border-right: 1px solid #9ca6b3;
}
a#reset-filters {
	float: right;
	height: 40px;
	padding:10px;
	background: #dedbdb;
	color: #717171;
	padding-top: 11px;
	border-radius: 3px;
}
a#reset-filters:hover {
	text-decoration: none;
	background: #cacaca;
}




.map-btn {
	padding: 3px;
	margin: 0 auto; 
	text-align: center;
	display: table;
	width: 100%;
	background: #efeefe;
	color: #666;
	border-radius: 3px;
	margin-bottom: 5px;
	box-shadow: 1px 1px 1px #666;
	text-decoration: none;	
}

.map-btn:hover {
	text-decoration: none;
	box-shadow: 1px 1px 1px #000;	
}


.overlay-element {
    z-index: 9999 !important;
}


.loading-overlay {  
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, .8);
    z-index: 999;
    font-size: 57px;
    padding-top: 217px;
    color: #ccc;
    text-align: center;
    text-shadow: 1px 3px 1px #000;
}


.mov-data-container .historic {    
	position: absolute;
    left: 7px;
    color: #fff;
    font-size: 23px;
    bottom: 8px;
    font-weight: bold;
}

.mov-data-container .avl {    
    position: absolute;
    left: 4px;
    color: #fff;
    font-size: 13px;
    bottom: 2px;
    font-weight: bold;
}

.card.header-card .close-evt {
    position: absolute;
    right: -5px !important;
    top: -10px !important;
}

#map-object-detail {
  position: absolute;
  top: 10px;
  left: 47px;
  display: none;
  padding: 5px;
  background: rgba(255,255,255, .99);
  color: #000;
  border-radius: 4px;
  box-shadow: 1px 1px 1px #666;
}

.cp-color-picker {
    z-index: 9999999;
}





/* Ajustes de Estilos para Clientes */

#main.is-client .alarma {	
	background: #f5f5f5 !important;
}

#main.is-client .alarma h3 {
	color: #676767;
	font-weight: normal;
}

#main.is-client .options-container {
	display: block;
}



#main.is-client .mov-data-container .historic {
	display: none;
}

#main.is-client .point-properties .row {
	font-size: 11px;
}


.smaller-grid-font {
	font-size: 11px !important;
}


/* Wrapper de Eventos */

#events-container {
	position: absolute;
	bottom: 0px;
	height: 350px;
	width: 82%;
	left: 18%;
	display: none;
	background: #fff;
}