:root {
  --trip-range-width: 400px;
  --top-panel-height: 40px;
  --bottom-panel-height: 120px;
  --modal-background-color: rgba(115, 115, 115, 0.8);
  --window-background-color: white;
  --color-window-background: white;
  --color-window-foreground: black;
  --color-button-background: rgb(27, 102, 202);
  --color-button-foreground: white;
  --color-button-secondary-background: rgb(232, 232, 232); 
  --color-button-secondary-foreground: rgb(27, 102, 202);
  
  --color-menuitem-secondary: rgb(33, 33, 33);
}
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(55, 55, 67) rgb(95, 95, 95);
}

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

*::-webkit-scrollbar-track {
  background: rgb(95, 95, 95);
}

*::-webkit-scrollbar-thumb {
  background-color: rgb(55, 55, 67);
  border-radius: 20px;
  border: 3px solid rgb(95, 95, 95);
}

body {
  overscroll-behavior: contain;
  -webkit-overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* html, body {
  height: 100%;
  width: 100vw;
} */


* {
  font-family: roboto, sans-serif;
}

@font-face {
  font-family: "spamono";
  src: url("fonts/RobotoMono-Bold.ttf");
}


.modal  {
  z-index: 1500;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;

  background-color: var(--modal-background-color);
}

.dialog {
  background-color: var(--color-window-background);
  color: var(--color-window-foreground);
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
}

.dialog-title {
  font-weight: bold;
  text-align: center;
}

.dialog-footer {
  text-align: right;
}

.button {
  min-width: 90px;
  padding: 10px;
  border-radius: 4px;
  background-color: var(--color-button-background);
  color: var(--color-button-foreground);
  border: 0;
  cursor: pointer;
}

.button-secondary {
  padding: 10px;
  border-radius: 4px;
  background-color: var(--color-button-secondary-background);
  color: var(--color-button-secondary-foreground);
  border: 0;
  cursor: pointer;  
}

button.option-left-button {
  cursor: pointer;
  padding: 8px;
  background-color: var(--window-background-color);
  border: 1px solid var(--color-button-background);
  border-radius: 8px 0 0 8px;  
}

button.option-center-button {
  cursor: pointer;
  padding: 8px;
  background-color: var(--window-background-color);
  border-top: 1px solid var(--color-button-background);
  border-bottom: 1px solid var(--color-button-background);
  border-left: 0;
  border-right: 0;
  border-radius: 0px 0px 0px 0;  
}


button.option-right-button {
  cursor: pointer;
  padding: 8px;
  background-color: var(--window-background-color);
  border: 1px solid var(--color-button-background);
  border-radius: 0px 8px 8px 0;  
}

button.option-button-checked {
  background-color: var(--color-button-background);
  color: var(--color-button-foreground);
}

.hspaced {
  margin: 0 3px;
}

.right {
  position: absolute;
  right: 10px;
}

/** Login **/

#login {
  position:absolute;
  /* top: 50%; */
  left: 50%;
  transform: translate(-50%);  
}

.login_input {
  padding: 5px;
}

.login_label {
  display: inline-block;
  width: 10em;
}

#form_login {
  position: relative;
  left: auto;
  right: auto;
}

div#mainapp {
  position: absolute;
  display: none;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(255, 255, 255);
}

#sidepanel  {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: aquamarine;
}

#toppanel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-panel-height);
}

#map {
  position: absolute;
  left: 0px;
  top: var(--top-panel-height);
  bottom: var(--bottom-panel-height);
  right: 0;
  border: 1px solid black;
  background-color: #333333;
}

.history-dashboard {
  font-size: 10pt;
}

.icon-text {
  margin-right: 10px;
  vertical-align: middle;
}

.icon-text img {
  height: 14px;
  margin-right: 3px;  
}


#vinfo {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: var(--bottom-panel-height);
  overflow-y: hidden;
  padding-left: 5px;
  padding-right: 5px;
}

#vinfoname , .vinfoname{
  font-size: 1.3em;
  font-weight: bold;  
  padding: 0;
}

.nsr-color {
  color: rgb(162, 162, 162)
}

#vinfoatime {
  padding: 0 !important;
  margin: 0;
}


#vinfocontent {
  padding: 0px;
  font-size: 0.9em; 
}

#vinfotoolbar {
  border-top: 1px solid gray;
  position: absolute;
  bottom: 0;  
  right: 0;
  left: 0;
}

#vinfotoolbar div {
  display: inline;
  flex-direction: column;
  padding: 3px;  
  font-size: 1em;
  vertical-align: middle;
  padding: 0px 5px 0 3px; 
}

#vinfotoolbar img {
  height: calc(1.3em - 0.1em); 
  vertical-align: middle;
  margin-right: 2px;
}


#speed_widget {
  position: absolute;
  background-color: white;
  bottom: calc(var(--bottom-panel-height) + 28px);
  left: 10px;
  width: 80px;
  height: 80px;  
  border: 2px dashed black;
  border-radius: 40px;
  z-index: 1000;

  /* color: rgb(241, 240, 212);
  border: 2px dashed rgb(255, 174, 174);
  background-image: url('images/speed_widget_bg.png'); */
} 

#speed_widget_bg {
  --side: 68px;
  --hsize: 60px;
  
  position: absolute;
  background-color: rgba(0,0,0,0.6);
  bottom: calc(var(--bottom-panel-height) + 58px + 5px);
  left: 50px;
  width: var(--side);
  height: var(--side);  
  border-radius: 0px var(--hsize) 3px 0px;
  z-index: 999;

}

#center-vehicle {
  position: absolute;
  bottom: 90px;
}

#show-vehicles {
  position: absolute;
  bottom: 140px;
}

#change-positions-mode {
  position: absolute;
  bottom: 190px;
}


#speed_widget_speed {
  margin-top: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
}

#speed_widget_unit {
  margin-top: -2px;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
}



img.nsrfloating {
  position: absolute;
  width: 18px;
  bottom: 62px;
  left: 78px;
}

img.contactfloating {
  position: absolute;
  width: 18px;
  bottom: 38px;
  left: 86px;
}

img.taxifloating {  
  position: absolute;
  width: 15px;
  height: 15px;
  bottom: 80px;
  left: 60px;
}


#odometer {
  position: absolute;
  bottom: -25px;
  left: -5px
}

div.odometer_digit {
  display: inline;
  font-family: "spamono", "roboto";
  flex-direction: column;
  color: white;
  background-color: black;
  padding: 1px 2px;
}

div.odometer_digit_last {
  font-family: "spamono", "roboto";
  flex-direction: column;
  display: inline;
  flex-direction: column;
  color: black;
  background-color: white;
  padding: 1px 2px;
}

#vinfotoolbar_right_group {
  position: absolute;
  right: 0;
}

.vrunning {
  background-image: url("images/red-corner.png");
  background-position:  top left;
  background-repeat: no-repeat;
}

#menu {
  /* display: none; */
  position: absolute;
  background-color: white;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  /* overflow: scroll;   */
  transition: width 2s ease-in-out;
}

#_menu div{
  background: white;  
  font-weight: bold;
  padding: 10px;
  cursor: pointer;  
}

div.menuheader {
  height: 50px;
  border-bottom: 1px solid #333;
}

div.menubody {
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  top: 71px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}



#historyMenuForm {
  padding: 1.5em;
}

.menuForm {
  padding: 1.5em;
}

div.menutitle {
  font-weight: bold;
  text-align: center;
  font-size: 1.5em;
  height: 40px;
}

input#vehicle_filter {
  height: 25px;
  font-size: 100%;
  width: 98%;
}

img#menulogo {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 5px;
  height: 46px;
}

#toggleMenu {
  margin: 2px 5px 5px 10px;
  height: 90%;
}




img.menuitemicon {
  width: 24px;
/*   margin: 10px; */
  margin-right: 10px;
  float: left;
}

img.menuitem-vicon {
  height: 24px;
}

div.menuitem {
  background: white;  
  font-weight: bold;
  padding: 15px 15px 15px 15px; 
  cursor: pointer; 
  clear: left;
  /* height: 40px; */
}

div.menuitemlabel {
  background: white;  
  font-weight: bold;
  color: var(--color-menuitem-secondary);
  padding: 15px 15px 15px 15px; 
  cursor: pointer; 
  clear: left;
}


div.menufield {
  background: white;  
  font-weight: bold;
  padding: 10px 10px 10px 10px; 
  clear: left;
}

div.menuitemdetail {
  font-weight: normal;
  font-size: 10pt;
}

.menuitemaddress {
  height: 12pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 


div.menuitem:hover {
  background-color: var(--color-button-background);
  color: white;
}

#historySearchButton {
  position: absolute;
  background-color: rgb(27, 102, 202);
  color: white;
  right: 20px;
  
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;

}

.hvBack{
  position: absolute;
  left: 3px;
}

#vinfoHistoryButtons{
  left: 0;
  right: 0px;
  position: absolute;
  bottom: 0;
  text-align: right;
  padding: 5px 0;
}

.slider {
  transform-origin: top left;
  position: absolute;
  z-index: 1000;
  top: 110px;
  right: 25px;
  width: 15px;
  height: 15px;
  -webkit-overflow-scrolling: touch; /* previene el rubberband en ios */
}

input[type='range']{        
  /* width: 400px; */
  width: var(--trip-range-width);
  border:2px solid blue;
  display:block;
  
  position: absolute;
  left: 15px;
  top: 0px;
  bottom: 10px;
  transform-origin: top left;
  -webkit-transform:rotate(90deg);
  /* Safari and Chrome */         
  -moz-transform:rotate(90deg); 
  -o-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
  z-index: 1000; 
}

/* alarmas instantaneas */
.alarm-detail{
  font-size: 10pt;
  border-bottom: 1px solid #333;
  margin-bottom: 3px;
}

.alarm-detail .bold{
  font-weight: bold;
}

.simple-dialog {
  position: absolute;
  border-radius: 5px;
  box-shadow: 2px 2px 5px black;
  z-index: 1000;
  height: 300px;
  color: black;
  width: 95%;
  background-color: white;  
  max-width: 500px;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  /*   top: 50%; */
  /*   left: 50%; */

  /*   transform: translate(2.5%, 0%);   */

  /*   left: 2.5%;
  top: 2.5%;
  right: 2.5%;
  bottom: 2.5%; */
}


.simple-dialog-top {
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7)
}

div.dialog-list {
  position: absolute;
  width: 100%;
  /* color: red; */
  overflow-y: scroll;
  top: 55px;
  bottom: 0px;
  
}

div.listitem {
  padding: 15px;
  font-size: 10pt;
  min-height: 45px;
  margin-bottom: 5px;
}

.listitem-header {
  padding: 10px;
}

/* floatright */
.float-right, .fr {
  float: right;
}

.listitem-spacer{
  border-bottom: 1px solid #333;
}

/** FieldStatuses */
.fieldstatus-item {
  padding-top: 35px;
}

.fieldstatus-tr td{
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid #ddd;
}

td.fieldstatus-value {
  padding-right: 5px;
}

.notification {
  /* background-color: #D9EDF4; */
  background-color: #eff2ff;
  padding: 8px;
  margin: 12px;
  /* margin-right: 45px; */
  box-shadow: 1px 1px 5px black;
  border-radius: 4px;
}

.notification-title {
  font-weight: bold;
  margin-bottom: 12px;
}

.notification-body {
  font-size: 95%;
}

.notification-unread {
  /* box-shadow: 0px 0px 5px red; */
  /* border: 1px solid red; */
  background-color: #C8FFA9;
}

.notification-time {
  font-size: 80%;
  text-align: right;
}

#notificationsIcon {
  height: 90%;
}

.notification-actions {
  text-align: right;
  padding: 4px;
}

.notification-actions-button {
  border: 0;
  color: var(--color-button-foreground);
  padding: 4px 8px;
  border-radius: 4px;
  background-color: var(--color-button-background);
  cursor: pointer;
}

#notificationsContainer{
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 64px;
  /* border: 1px solid red; */
  height: 100%;
}

#notificationCount{
  position: absolute;
  background-color: red;
  padding: 0px 4px 0px 4px; 
  color: white;
  top: 0;
  right: 0;
  border-radius: 3px;
}

#invoices-table {
  width: 100%;
  padding: 8px;  
}

#invoices-table td {
  text-align: center;
}

#invoices-table img {
  height: 24px;
}

.invoice-item {
  display: flex;
  padding: 4px;
  margin: 8px;
  /* border: 1px solid red; */
}

.invoice-desc{
  /* border: 1px solid green;  */
  margin-right:  auto;  
}

.invoice-button {
  margin-top: auto;
  /* border: 1px solid blue; */
}

div.menuoptions{
  padding: 4px;
}

@media only screen and (min-width: 400px) {
  #menu {
    filter: drop-shadow(3px 0px 5px #333333);
    width: 400px;
  }
}




#search {
  position: absolute;
  top: 55px;
  left: 50px;
  z-index: 999;

}

#searchPanel {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  width: 400px;
  background-color: white;
  z-index: 9999;
  overflow-y: scroll;
  /* overflow-x: hidden; */
  border: 1px solid green;
  
}