body{
	background-color: #2185d0;
}

#map{
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 100;
}

#infoPopup.ui.mini.modal.campopup{
	max-width:300px!important;
}


#infoPopup.ui.mini.modal.vidtruckpopup{
	max-width:300px!important;
}


#vidPlayerBox{
	height: 190px; max-height: 190px; overflow: hidden; border: 1px solid #999; border-radius: 6px;
}





.trafficCam.image{
	 height: 194px; overflow: hidden; border: 1px solid #ccc; border-radius: 6px; border-bottom: 2px solid #00b5ad;
}

img.trafficImage{
	width: 286px;
}

.ui.menu hamburger.item > i.icon, .ui.menu report.item > i.icon, .ui.menu truckReport.item > i.icon {
  margin-right: 0px !important;
}

#menu:hover, #report:hover, #truckReport:hover, #locate:hover, #weatherItem:hover {
  cursor: pointer;
  background: rgba(0,0,0, 0.2);
}


html.ios {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

  html.ios,
  html.ios body {
      height: initial !important;
  }

.ui.menu .item.compass {
  font-size: 1.2em;
}

.ui.menu .item.compass:before {
  background: none !important;
  margin-left: 12px;
}

.shutit {
  cursor: pointer;
}

  .shutit:hover {
      color: #D50000;
  }


ui.card.image.trafficCam {
  border: 4px solid #D50000 !important;
  height: 198px !important;
}

.image.trafficCam img {
  position: relative;
  z-index: 9;
  left: -12px;
  top: -4px;
  max-width: 110%;
}

.leaflet-top.leaflet-right, .leaflet-top.leaflet-left {
  top: 80px !important;
}

input.prompt::-webkit-input-placeholder {
  color: #90c2e8 !important;
}

input.prompt::-moz-placeholder {
  color: #90c2e8 !important;
}

input.prompt:-moz-placeholder {
  color: #90c2e8 !important;
}

input.prompt:-ms-input-placeholder {
  color: #90c2e8 !important;
}

input.prompt:focus::-webkit-input-placeholder {
  color: transparent !important;
}

input.prompt:focus::-moz-placeholder {
  color: transparent !important;
}

input.prompt:focus:-moz-placeholder {
  color: transparent !important;
}

input.prompt:focus:-ms-input-placeholder {
  color: transparent !important;
}

input.prompt {
  opacity: 1 !important;
  color: #FFF !important;
}

input.prompt:focus {
  opacity: 1 !important;
  color: #FFF !important;
  font-size: 1em !important;
}

#addrSearch.icon {
  font-size: 1.2em !important;
}

.ui.inverted.dimmer {
    background-color: rgba(255,255,255,.20)!important;
}

.bottom.attached.button{
	transition: all 1s linear;
	min-height: 36px;
}

.buttonTextHidden{
	color: #fff;
	display: block;
	
}

#currCity{
  font-size: .9em; display: inline-block; vertical-align: middle; margin-right: 8px;
}

#tempSmall{
  font-size: 1.4em; display: inline-block; vertical-align: middle; margin-right: 10px;
}

#weatherDetails [data-icon]{
  font-size: 1.6em;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 4px;
}

#weatherItem [data-icon]{
  font-size: 1.6em;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 0px;
}

.bigCurrentIcon{
	font-size: 5em; position: relative; top: 8px;
}

.rgAddr{
  display: inline-block; vertical-align: middle; width: 84%; padding-left: 8px; font-size: 1.2em; line-height: 120%; font-weight: bold;
}
.rgAddr span{
  font-size: 1em; font-weight: normal;
}
.rgMarker{
  display: inline-block; width: 48px;
}

#toast.bottom{
	position: absolute; bottom: 40px; right: 15px; width: 300px; z-index: 500;
}
#toast.top{
	position: absolute; top: 40px; right: 15px; width: 300px; z-index: 500;
}

#toast span{
  display: inline-block;
  vertical-align: middle;
  width: 84%;
  padding-left: 8px;
}


#servicesSegment .segment:hover{
	background: #e1e1e1;
	cursor: pointer;	
}

.mki-intext {
  display: block!important;
  font-size: 1.4em!important;  
  padding: 0px!important;
}

.mapIconImg{
  text-align: center; 
  width: 20px; 
  height: 20px;
  margin-left: auto; 
  margin-right: auto;
  padding-top: 2px;
}

.mki-intext img{
  width:86%;
  margin-top: 10%;
}


#routeSteps .leaflet-routing-container, #routeSteps .leaflet-routing-error {
	width: 100%!important;
}

#routeSteps .leaflet-routing-alt, #routeSteps .leaflet-routing-geocoders, #routeSteps .leaflet-routing-error{
	max-height: 90vh!important;
	border-bottom: 0px!important;
}

#routeSteps .leaflet-routing-alt-minimized{
	display: none!important;
}

#routeSteps .leaflet-bar{
	box-shadow: none!important;
	border-radius: 0px!important;
}

.leaflet-routing-alt table tr{
	border-bottom: 1px solid #ccc!important;
}

.ui.table tr td[data-src]{
  font-size: 0.8em!important;

}

.shutRoute.remove.icon, .shutRpt.remove.icon{
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
}

.image.service-image{
  margin-bottom: 1em!important; 
  max-height: 200px!important; 
  overflow: hidden!important; 
  border-radius: 6px!important; 
  background-size: cover!important; 
  background-repeat:no-repeat!important; 
  background-position: center!important;
}

.image.service-image img{
  opacity: 0!important;
}
td.directionsTd{
  width: 36px; background-color: #21ba45; cursor: pointer; color: #fff; text-align: center!important;
}

td.phoneTd{
  width: 36px; background-color: #f2711c; cursor: pointer; color: #fff; text-align: center!important;
}



.ui.right.sidebar .ui.padded.text.container.segment {
  margin-top: 0px!important;
  margin-left: 0px!important;
}


.iPhoneX #topBar{
	padding-top: 32px!important;
}

.iPhoneX #bottomBar{
	padding-bottom: 12px!important;
    padding-right: 8px;
    padding-left: 12px;
}

.iPhoneXBar{
	height: 32px;
	display: none;
}

.iPhoneX .iPhoneXBar{
	display: block;
}





.ui.popup{overflow:auto!important;}

@media only screen and (max-width: 767px){
  
  #addrSrch, .bottom.menu .item.copy{
	  display: none!important;
  }
  
  .ui.items:not(.unstackable)>.item {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      margin: 0!important;
  }
  .ui.grid>.stackable.stackable.row>.column, .ui.stackable.grid>.column.grid>.column, .ui.stackable.grid>.column.row>.column, .ui.stackable.grid>.column:not(.row), .ui.stackable.grid>.row>.column, .ui.stackable.grid>.row>.wide.column, .ui.stackable.grid>.wide.column {
	    width: 50%!important;
	}
}