* {
	margin: 0px;
	font-family: verdana;
	/*font-size:12px;*/
	line-height: 16px;
}

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

html,body
{
    width: 100% !important;
    height: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
    overflow-x: hidden !important; 
}

body.modal-open { 
position: fixed;
 }

#map {
	position: absolute;
	left: 0px;
	width:100% !important;
	top: 0px;
	overflow-x: hidden !important; 
}

.station-marker {	
	width: 11px;
	height: 11px;
	position: absolute;
	font-size: 24px;	
	font-weight:normal !important;
	/* text-shadow: -1px 0 var(--route-color), 0 1px var(--route-color), 1px 0 var(--route-color), 0 -1px var(--route-color); */
	-webkit-text-stroke: 2px var(--route-color);
	top: 50%;
	left: 50%;
	margin-left: -10px;
	margin-top: -8px;
	z-index: 5;
}
.station-marker i {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -0.5px;
	margin-top: -5px;
	font-size: 14px;
	font-weight:normal !important;
	text-shadow: none !important;
	-webkit-text-stroke: 0px !important;
	z-index: 10;
	color: #ffffff;
}	
.cluster-marker {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -5px;
	margin-top: -5px;
	border: 2px solid var(--route-color);
	z-index: 5;
}
.favorite-marker {
	font-size:20px;
	color: #ffbf00;
	margin-left: -6px;
	margin-top: -6px;
	-webkit-text-stroke: 2px var(--route-color);
}
.custom-popup {
  background: none repeat scroll 0 0 #212121;
  color: #343434;
  font-family: arial;
  line-height: 20px;
  position: absolute;
}
.custom-popup:after {
  content:'';
  position: absolute;
  left: 50%;
  margin-left: -15px;
  margin-top: -1px;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 1em solid black;
  border-color: transparent transparent #ffffff #ffffff;
  transform-origin: 0 0;
  transform: rotate(-45deg);
  box-shadow: -1px 5px 1px rgb(30 30 30 / 40%);
}

.asset-popup-close, .close-popup-icon {
  line-height: 40px;
  font-size: 22px;
  cursor: pointer;
}

.stop-popup-close {
	font-size: 1.5em;
	position: absolute;
	right: 15px;
	cursor: pointer;
}

#TripMap {
       position: absolute;
       left: 0px; 
       /* height: 500px; */
        width: 100%; 
       top: 0px;
}

.instructions {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: normal;
	line-height: 17px;
}

.routeCheckbox {
	float: left;
	margin-left: 10px;
	margin-top: 4px;
}

.routeColor {
	float: left;
	margin-left: 10px;
	width: 20px;
	height: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

.routeColorBar {
	width: 100%;
	height: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

.InfoVehicleID {
	font-size: 28px;
	line-height: 25px;
	font-weight: bold;
}

.InfoNextStop {
	font-size: 15px;
	font-weight: bold;
}

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

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

.vehicleMarker {
	width: 35px;
	height: 45px;
}

.vehicleMarkerInnerIcon {
	padding-top: 5px;
	padding-left: 6px;
	width: 23px;
	height: 25px;
}

.stationMarkerlg {
	transform-origin: top center;
	width: 100px;
	height: 100px;
	margin-left: -46px;
  margin-top: -46px;
  background-repeat:no-repeat;
}
.stationMarker {
	transform-origin: top center;
	width: 50px;
	height: 50px;
	margin-left: -22px;
  margin-top: -22px;
  background-repeat:no-repeat;
}

.tripPlan{
   padding: 5px;
   -moz-border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
}

input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}

@media screen and (min-width: 767px) {
	.StopMarker {
		height: 11px;
		width: 11px;
		border-style: solid;
		border-width: 2px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-khtml-border-radius: 3px;
		border-radius: 3px;
	}
	

	#StopIcon{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	height:14px;
	width:14px;
	}
	
	 .pac-container{
               z-index: 1051 !important;
       }
       #divdirections{
               width: 500px;
               max-height:500px;
               overflow-y:auto; 
               background-color: #fff;
               display: none; 
               position: relative; 
               float: right;
               padding: 8px;
           border: 1px solid rgb(169, 43, 62);
           border-radius: 10px;
       }
 
}

@media screen and (max-width: 767px) {
	.StopMarker {
		height: 13px;
		width: 13px;
		border-style: solid;
		border-width: 2px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-khtml-border-radius: 3px;
		border-radius: 3px;
	}
	
	#StopIcon{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	height:14px;
	width:14px;
	}
	
	.pac-container{
               z-index: 1051 !important;
       }
       .datepicker{
               z-index: 1040 !important;
       }
       #MessageDialog{
               z-index: 1041 !important;
       }
       #divdirections{
           width: 200px;
           height: 250px;
           max-height: 500px;
		   max-width: 300px;
		   overflow: auto;
		   background-color: #fff;
		   display: none; 
		   position: relative; 
		   float: right;
		   padding: 5px;
           border: 1px solid rgb(169, 43, 62);
           border-radius: 10px;
       }
}

input[type="radio"] {
   display:none;
}
input[type="radio"] + label {
   color: #ffffff;
   font-family:Arial, sans-serif;
   font-size:14px;
   font-weight: bold;
}
input[type="radio"] + label span {
   display:inline-block;
   width:19px;
   height:19px;
   margin:-1px 4px 0 0;
   vertical-align:middle;
   cursor:pointer;
   -moz-border-radius:  50%;
   border-radius:  50%;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
 -webkit-transition:background-color 0.4s linear;
 -o-transition:background-color 0.4s linear;
 -moz-transition:background-color 0.4s linear;
 transition:background-color 0.4s linear;
}

.table thead>tr>th, .table tbody>tr>th, .table tfoot>tr>th, .table thead>tr>td, .table tbody>tr>td, .table tfoot>tr>td {
    padding: 0px;
    border-top: 0px solid #ddd !important; 
}

#products {
	min-height: 75px;
}

/* custom select dropdown */
.select-container {
    position: absolute;
	right: 20px;
    width: 150px;
    font-size: 1.1rem;
}

.select-container .custom-select {
    position: relative;
    background: #777;
    height: 30px;
}

.select-container .custom-select::after {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    top: 40%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    cursor: pointer;
    transition: border-color 0.4s;
}

.select-container.active .custom-select::after {
    border: none;
	top: 55%;
    border-left: 2px solid white;
    border-top: 2px solid white;
}
.select-container .custom-select input {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    background: none;
    outline: none;
    border: none;
    color: white;
    cursor: pointer;
}
.select-container .option-container {
    position: absolute;
    display: none;
    overflow-y: scroll;
    transition: 0.4s;
	width: 100%;
	top: -302px;
}

.select-container.active .option-container {
    height: 300px;
	display: block;
	border: 1px;
	border-radius: 9px;
}

.select-container .option-container::-webkit-scrollbar {
    border-left: 1px solid rgba(100, 100, 100, 0.2);
    width: 0px;
}

.select-container .option-container::-webkit-scrollbar-thumb {
    background: #343535;
}

.select-container .option-container .custom-option {
    position: relative;
    padding-left: 15px;
	padding-top: 4px;
    height: 25px;
	background: #777;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.2s;
}

.select-container .option-container .custom-option.selected {
    background: rgba(0, 66, 255);
    pointer-events: none;
}

.select-container .option-container .custom-option:hover {
    background: rgba(0, 100, 255);
}

.select-container .option-container .custom-option label {
    color: white;
    cursor: pointer;
}