#logo {
  right: 0;
}

#logo-bg {
  position: absolute;
  right: -130px;
  top: -140px;
  width: 325px;
  height: 310px;
  background-color: #0787ad;
  border-bottom-left-radius: 50%;
  border: 6px solid #18453b;
  /* box-shadow: inset -3px -2px 5px #222; */
}
#logo-bg-cover {
  position: absolute;
  z-index: 1001;
  left: 250px;
  top: 0;
  right: 0;
  height: 40px;
  /* background: linear-gradient(90deg, #0787ad, #fff 95%); */
}
/* This is needed to complement the linear gradient of logo-bg-cover */
body:before {
  content: "";
  position: absolute;
  left: 207px;
  right: 0;
  top: 40px;
  bottom: 0;
  /* background: linear-gradient(90deg, #ffffff, #0787ad 95%); */
}

#logo-img {
  position: relative;
  top: 15px;
  right: 15px;
  width: 120px;
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0px 20px rgba(0, 0, 0, 1);
}

#search-box {
  top: 0;
  left: 0;
  right: 198px;
  height: 50px;
  box-sizing: border-box;
  border-bottom: 6px solid #18453b;
  /* box-shadow: 5px 1px 5px rgba(0, 0, 0, 0.4); */

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,4f66a6+100 */
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(
    left,
    #ffffff 0%,
    #0787ad 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    left,
    #ffffff 0%,
    #0787ad 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #0787ad 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0787AD',GradientType=1 ); /* IE6-9 */
}

#search-box input {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  padding-left: 60px;
  background: none;
  border: none;
  font-size: 20px;
  outline: none;
}

#search-box .search-icon {
  padding-left: 15px;
  padding-top: 5px;
}

#search-box .search-clear {
  padding-left: 15px;
  font-size: 38px;
  color: #a10a36;
}

#mappanel {
  top: 0;
  left: 0px;
  right: 0;
}

#sidepanel {
  top: 0;
  left: 0;
  right: unset;
  border: none;
  width: 300px;
}
#sidepanel .content {
  padding-top: 60px;
}

#sidepanel .content::before {
  right: 0;
  left: unset;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(120, 140, 190, 0.4)
  );
}

#legend-btn-widescreen,
#legend-btn-mobile {
  top: 66px;
  left: 10px;
  right: unset;
}

/* #logo-img {
  position: absolute;
  left: -5px;
  top: 0;
  width: 180px;
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
} */

#map-legend .statuses {
  padding: 5px;
  font-size: 15px;
}
#map-legend .statuses .box {
  color: #fff;
  margin: 10px 0;
  /* padding: 10px; */
  box-shadow: 0 4px 4px #ccc;
}

#map-legend .box h3 {
  color: #fff;
  font-size: 18px;
  text-align: center;
  margin: 0;
  border: 1px solid rgba(52, 52, 52, 1);
  padding: 10px;
}

.box.status1 h3 {
  background-color: rgba(0, 112, 255, 1);
  color: #000000 !important;
}

.box.status2 h3 {
  background-color: rgba(137, 205, 102, 1);
  color: #000000 !important;
}

.box.status3 h3 {
  background-color: rgba(230, 230, 0, 1);
  color: #000000 !important;
}

.box.status4 h3 {
  background-color: rgba(0, 0, 0, 0);
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 1) !important;
}

/**************************************
SCREEN SIZE ADJUSTMENTS
***************************************/
@media (min-width: 651px) {
  body.legend-open #mappanel {
    left: 300px;
    right: 0;
    border-right: 1px solid #aaa;
    /*  box-shadow: 3px 0 6px #aaa;*/
  }
  body.panel-left.legend-open #mappanel {
    left: 300px;
    border-left: 1px solid #aaa;
  }
}
@media (max-width: 650px) {
  #road-img {
    display: none;
  }
  #logo-bg {
    position: absolute;
    right: -140px;
    top: -140px;
    width: 240px;
    height: 240px;
    background-color: #0787ad;
    border-bottom-left-radius: 50%;
    border: 6px solid #18453b;
  }
  #logo-img {
    top: 7px;
    right: 7px;
    width: 55px;
  }
  #search-box {
    left: 0;
    right: 94px;
    border: none;
    z-index: 2;
  }
  #search-box .search-icon {
    padding-top: 8px;
    padding-left: 4px;
  }
  #mappanel {
    z-index: 1;
  }

  #mappanel.offscreen {
    left: 100%;
    transition: left 0.3s ease;
  }

  #sidepanel {
    width: 100%;
  }

  #sidepanel .content {
    padding-top: 120px;
  }

  .street-toggle.large {
    display: none !important;
  }
}

#ticker-box {
  top: 60px;
  left: 10%;
  right: 20%;
}