* {
  font-family: Segoe UI,Tahoma,Arial,sans-serif;
}

body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  /*overflow: hidden;*/
}

#map {
  height: 100vh;
  width: 100vw;
}

.leaflet-popup-content {
  font-size: 100%;
}
.leaflet-tooltip-pane {
  font-size: 100%;
}
.leaflet-top.leaflet-right {
  height: 80%;
}
.leaflet-control-layers {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 100%;
}
.leaflet-control-mouseCoordinate {
  font-size: 100%;
  background-color: #ffffff;
  padding: 6px;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  color: #333333;
  width: 250px;
}

.fahrzeugTooltip {
  font-size: 14px;
  font-weight: bold;
}

.focusTooltip {
  color: green;
  z-index: 10000;
}

/*@media (prefers-color-scheme: dark) {
  .fahrzeugTooltip {
    background-color: transparent;
    border: none;
    box-shadow: none;
    text-shadow: 
          -1px -1px 0px #ffffff,
           0px -1px 0px #ffffff,
           1px -1px 0px #ffffff,
          -1px  0px 0px #ffffff,
           1px  0px 0px #ffffff,
          -1px  1px 0px #ffffff,
           0px  1px 0px #ffffff,
           1px  1px 0px #ffffff;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }
}*/

.status3 {
  color: #000;
	background-color: #FFFF3C;
	border: 1px solid #FFFF3C;
}
.status3:before {
	border-bottom-color: #FFFF3C;
}
.sidbarStatus3 {
  color: #000;
	background-color: #FFFF3C;
	border-bottom: 1px solid #fff;
}

.status4 {
  color: #fff;
	background-color: #FF5555;
	border: 1px solid #FF5555;
}
.status4:before {
	border-bottom-color: #FF5555;
}
.sidbarStatus4 {
  color: #fff !important;
	background-color: #FF5555;
	border-bottom: 1px solid #fff;
}

.status1 {
  color: #000;
	background-color: #80FF80;
	border: 1px solid #80FF80;
}
.status1:before {
	border-bottom-color: #80FF80;
}
.sidbarStatus1 {
  color: #000;
	background-color: #80FF80;
	border-bottom: 1px solid #fff;
}

.status2 {
  color: #000;
	background-color: #00C100;
	border: 1px solid #00C100;
}
.status2:before {
	border-bottom-color: #00C100;
}
.sidbarStatus2 {
  color: #000;
	background-color: #00C100;
	border-bottom: 1px solid #fff;
}

.status6 {
  color: #000;
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
}
.status6:before {
	border-bottom-color: #FFFFFF;
}
.sidbarStatus6 {
  color: #000 !important;
	background-color: #FFFFFF;
	border-bottom: 1px solid #fff;
}

.status9 {
  color: #000;
	background-color: #BBBBBB;
	border: 1px solid #BBBBBB;
}
.status9:before {
	border-bottom-color: #BBBBBB;
}
.sidbarStatus9 {
  color: #000 !important;
	background-color: #BBBBBB;
	border-bottom: 1px solid #fff;
}

.sidbarNoStatus {
  background-color: #fff;
}

.traccarFehler {
  /*background-color: #000 !important;
  color: #fff !important;*/
}
.traccarFehler:after {
	content: 'Traccar Fehler';
	color: #fff;
	font-size: 8px;
	width: 80px;
	position: absolute;
	margin-top: -11px;
	text-align: center;
}


/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


[data-title]:hover:after {
  visibility: visible;
}

[data-title]:after {
  content: attr(data-title);
  background-color: #4b9c2c;    
  color: #ffffff;
  font-size: 150%;
  position: absolute;
  padding: 4px 8px 4px 8px;
  visibility: hidden;
}

.leaflet-sidebar {
  max-height: 100vh;
}

.leaflet-sidebar.collapsed {
  width: 100px !important;
  overflow-x: hidden;
}

.leaflet-sidebar-tabs, .leaflet-sidebar-tabs > ul {
  width: 100px !important;
}

.leaflet-sidebar-left .leaflet-sidebar-content {
  width: 100px !important;
}

.leaflet-sidebar-right .leaflet-sidebar-content {
  width: 100px !important;
}

.leaflet-sidebar-right .leaflet-sidebar-header {
  width: 100px !important;
}

.leaflet-sidebar-close {
  width: 100px !important;
}

.leaflet-sidebar-left.collapsed ~ .leaflet-control-container .leaflet-left {
  left: 110px !important;
}

.sidebarStatus {
	display: inline-block;
	border: 2px solid #000;
	text-align: center;
	height: 20px !important;
	width: 20px !important;
	line-height: 20px;
	font-weight: bold;
	margin-right: 8px;
}