.view-color-green {
    background-color: rgba(77, 250, 144, 0.3);
}
.view-color-yellow {
    background-color: rgba(250, 190, 77, 0.3);
}
.view-color-red {
    background-color: rgba(255, 84, 104, 0.3);
}

.toolbar-header-style {
    background-color: #555555 !important;
}

body.x-border-layout-ct, div.x-border-layout-ct {
    background-color: #bbbbbb !important;
}

.x-fieldset {
    overflow: visible !important; /* workaround for Safari issue */
}

#attribution {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: x-small;
	color: gray;
}

#spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60px;
    width: 60px;
    margin-top: -30px;
    margin-left: -30px;
    -webkit-animation: rotation .4s infinite linear;
    -moz-animation: rotation .4s infinite linear;
    -o-animation: rotation .4s infinite linear;
    animation: rotation .4s infinite linear;
    border-left: 1px solid rgba(00, 75, 95, .15);
    border-right: 1px solid rgba(00, 75, 95, .15);
    border-bottom: 1px solid rgba(00, 75, 95, .15);
    border-top: 2px solid rgba(00, 75, 95, .8);
    border-radius: 100%;
    z-index: 20000;
}

@-webkit-keyframes rotation {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}
@-moz-keyframes rotation {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(359deg); }
}
@-o-keyframes rotation {
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(359deg); }
}
@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
.headerTracker{
	background-color: #2b2b2b!important;
	border-color: #007595!important;
	border-bottom-width: 4px!important;
	
}

.x-panel-header-default {
	background-color: #007595!important;
	border: 1px solid #007595!important;
	/*border-color: #ffffff!important;
	border-bottom-width: 4px!important;*/
	/*border-radius: 0.5rem;*/
	/*border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;*/
}

#panelDisp, #reportView-placeholder {
	background-color: #007595!important;
	border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

#eventView-placeholder {
	background-color: #007595!important;
	border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.gps-ok {
    background: url(images_icons/gps-ok.svg) no-repeat;
	height: 16px;
	width: 16px;
	float:left;
	margin-left: 3.5em;
}
.gps-off {
    background: url(images_icons/gps-off.svg) no-repeat;
	height: 16px;
	width: 16px;
	float:left;
	margin-left: 3.5em;
}
.gps-ok2 {
    background: url(images_icons/gps-ok.svg) no-repeat;
	height: 1em;
	width: 1em;
	float:left;
}
.gps-off2 {
    background: url(images_icons/gps-off.svg) no-repeat;
	height: 1em;
	width: 1em;
	float:left;
}
.gps-ico {
    background: url(images_icons/gps-ico.svg) no-repeat;
	height: 1.2em;
	width: 1.2em;
	margin-left: 0.3em!important;
	float:left;
}
.status-on {
    background: url(images_icons/status-on.svg) no-repeat;
	height: 16px;
	width: 16px;
	float: left;
	margin-left: 0.5em;
}
.status-off {
    background: url(images_icons/status-off.svg) no-repeat;
	height: 16px;
	width: 16px;
	float: left;
	margin-left: 0.5em;
}
.status-on2 {
    background: url(images_icons/status-on.svg) no-repeat;
	height: 1em;
	width: 1em;
	float: left;
	margin-left: 0.3em;
}
.status-off2 {
    background: url(images_icons/status-off.svg) no-repeat;
	height: 1em;
	width: 1em;
	float: left;
	margin-left: 0.3em;
}
.icon-state {
	height: 0.5em;
	width: 0.5em;
	float: left;
	margin-left: -0.5em;
	margin-top: -0.89em;
}
.small{
	font-size: 0.25em;
}
.semaforo {
    background: url(images_icons/semaforo.svg) no-repeat;
	height: 1em;
	width: 1em;
	float: left;
	margin-left: -0.15em;
	margin-bottom: -0.2em
}
.engine {
    background: url(images_icons/engine.svg) no-repeat;
	height: 16px;
	width: 16px;
	float: left;
}
.engine_on {
    background: url(images_icons/engine_on.svg) no-repeat;
	height: 16px;
	width: 16px;
	float: left;
}
.engine_on_det {
    background: url(images_icons/engine_on_det.svg) no-repeat;
	height: 18px;
	width: 18px;
}
.engine_off_det {
    background: url(images_icons/engine_off_det.svg) no-repeat;
	height: 18px;
	width: 18px;
}
.engine_menu {
    background: url(images_icons/engine_menu.svg) no-repeat;
	height: 1.5em;
	width: 18px;
	float: left;
	margin-left: -2.5em;
	padding-top: 0.7em;
	margin-top: 1em;

}
.engine_menu:hover {
    background: url(images_icons/engine_menu_h.svg) no-repeat;
	height: 1.5em;
	width: 18px;
	float: left;
	margin-left: -2.5em;
	padding-top: 0.7em;
	margin-top: 1em;

}
.engine_text {
   float:left;
	margin-left:2.5em;
	margin-top:-1.6em;
	height:3.5em
}
.lock {
    background: url(images_icons/lock.svg) no-repeat;
	height: 16px;
	width: 16px;
	float: left;
}
.unlock {
    background: url(images_icons/unlock.svg) no-repeat;
	height: 16px;
	width: 16px;
	float: left;
}
.engine_pop_on {
    background: url(images_icons/engine_pop_on.svg) no-repeat;
	height: 1em;
	width: 1em;
	float: left;
}
.engine_pop_off {
    background: url(images_icons/engine_pop_off.svg) no-repeat;
	height: 1em;
	width: 1em;
	float: left;
}
.trigger_pop_on {
    background: url(images_icons/trigger_on.svg) no-repeat;
    margin-top: 0.2em;
	height: 1.2em;
	width: 2.1em;
	float: left;
}
.trigger_pop_off {
    background: url(images_icons/trigger_off.svg) no-repeat;
    margin-top: 0.2em;
	height: 1.2em;
	width: 2.1em;
	float: left;
}
.rpm {
    background: url(images_icons/rpm.svg) no-repeat;
	height: 1em;
	width: 1em;
	float: left;
}
.trigger_on {
    background: url(images_icons/trigger_on.svg) no-repeat;
	height: 1.5em;
	width: 2em;
	float: left;
}
.trigger_off {
    background: url(images_icons/trigger_off.svg) no-repeat;
	height: 1.5em;
	width: 2em;
	float: left;
}
.dashboard {
    background: url(images_icons/dashboard.svg) no-repeat;
	height: 1em;
	width: 1em;
	float: left;
}
.my-body-class{
	height: 5em;
	-webkit-box-shadow: inset 0px -3px 10px 0px rgba(117,117,117,0.25);
    -moz-box-shadow:  inset 0px -3px 10px 0px rgba(117,117,117,0.25);
    box-shadow:  inset 0px -3px 10px 0px rgba(117,117,117,0.25);
}
.x-grid-group-hd{
	background-color: grey!important;
}

.dot {
  height: 1.5em;
  width: 1.5em;
  background-color: steelblue;
  border-radius: 50%;
  display: inline-block;
  color:white;
	/*padding-left: 0.5em;*/
	line-height: 1.5em;
	margin-right: 0.5em;
	text-align: center;
	font-size: 0.85em;
	
}
.dotA {
  height: 1.5em;
  width: 1.5em;
  background-color: crimson;
  border-radius: 50%;
  display: inline-block;
  color:white;
	/*padding-left: 0.5em;*/
	line-height: 1.5em;
	margin-right: 0.5em;
	text-align: center;
	font-size: 0.85em;
	
}

.plus {
	color:#919191;
	margin-right:1em;
	font-size:1.3em
}

div[id^="searchtrigger"]{
	border-style: none;
	padding: 0px;
	padding-right: 0.35em;
}

input[id^="searchtrigger"]{
	padding: 0px;
}

#fa-user{
	color:#c2000c; 
	font-size:1.5em; 
	cursor:pointer;
}

#fa-user-m{
	color:#c2000c; 
	font-size:2em; 
	line-height:1.5em; 
	cursor:pointer
}

.x-btn-icon-el-default-toolbar-small {
	color:#00C8FF!important;
}
.x-btn-disabled.x-btn-default-toolbar-small {
	color: #007595!important;
}


element.style {
    min-width: 75px;
    margin: 0px;
    right: auto;
    left: 0px;
    top: 0px;
}
.x-toolbar-footer .x-toolbar-item {
    margin: 0 6px 0 0;
}
.x-btn-default-small {
    border-color: #ad2424;
}
.x-btn-default-small {
	background-color: #007595!important;
	border-color: #999999!important;
}

.x-btn-over {
	background-color: #999999!important;
}

.x-menu-item-active {
	background-color: #999999!important;
}

.x-window-header-default .x-tool-img {
	color: #007595!important;
}

.x-body {
	color: #007595!important;
}

#panel-1088_header {
	background-color: white!important;

}

#panel-1126_header {
	background-color: white!important;
	
}

#parametrosSta_header {
	background-color: white!important;
	
}

.tituloR{
	font-size: 0.7rem;
	font-weight: bold;
}

.x-menu-default{
	border-radius: 0.5rem!important;
}

.x-window-default {
	border-radius: 0.75rem!important;
}

.x-group-hd-container {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.x-grid-item {
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.x-css-shadow{
	box-shadow:  rgb(136 136 136) 0px 0px 26px!important
}



#deviceState-splitter{
	width: 10px!important;
	box-shadow:  rgb(136 136 136) 8px 1px 26px!important;
	z-index: 1;
}

#eventView-splitter{
	box-shadow:  rgb(136 136 136) 0px 0px 26px!important
}

#reportView-splitter{
	box-shadow:  rgb(136 136 136) 0px 0px 26px!important;
	z-index: 1;
}

#toolbar-1119{
	box-shadow:  rgb(136 136 136) 0px 0px 26px!important;
}

.x-btn{
	border-radius: 0.5rem!important;
	border: 0px solid black!important;
}

.x-form-text-wrap{
	border-radius: 0.5rem!important;
}

.x-form-text-field-body-default {
	border-radius: 0.5rem!important;
}

.x-form-trigger-default{
	border-radius: 0.5rem!important;
}

.x-form-trigger-wrap-default{
	border-radius: 0.5rem;
} 

.x-boundlist {
	border-radius: 0.5rem;
}

.x-splitter-vertical{
	background-color: lightgray;
}

.x-splitter-horizontal{
	background-color: lightgray;
}

.dataREdiv{
	border-right:1px solid lightgray;
	padding: 0.5rem;
	float: left;
	border-bottom: 1px solid lightgray;
	width: 50%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.dataREdivC{
	border-right:0px solid gray;
	padding: 0.5rem;
	float: left;
	border-bottom: 1px solid gray;
	width: 50%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.dataREdiv i{
	float: left;
	margin-right: 0.25rem;
}

.dataREdiv div{
	float: left;
}

.dataREul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}


.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}
.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}
.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.tooltip-static:before {
  border-top-color: #ffcc33;
}

.x-splitter-vertical{
	width: 17px!important;
}

.x-splitter-horizontal{
	height: 17px!important;

}

.x-collapse-el:before {
	text-align: left!important;
	vertical-align: top!important;
}

@media (max-width: 480px) {
    body {
        background-image: url(fondo480.jpg);
    }
}

@media (max-width: 480px) and (max-height: 1024px){
    body {
        background-image: url(fondo480x1024.jpg);
    }
}

@media (max-width: 768px) and (max-height: 1024px){
    body {
        background-image: url(fondo768x1024.jpg);
    }
}


@media (max-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(fondo768x1024.jpg);
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    body {
        background-image: url(fondo1024x1366.jpg);
    }
}


@media (min-width: 1025px) and (max-width: 4096px) {
    body {
	    background-image: url(fondo.jpg);
   }
}

@media (max-width: 1024px) and (max-height: 480px) {
    body {
        background-image: url(fondo1024.jpg);
    }
}