@import url("https://fonts.googleapis.com/css?family=Open+Sans");
.buses-header {
  margin-bottom: 42px; }
  .buses-header .info-apps {
    /* Apps need styling. The site I used to test these styles on didn't have apps connected*/ }
  .webpage-notice { padding: 16px 0 0; }
  .webpage-notice p {color: #CA9528; border: 1px solid #F8AF04; border-radius: 4px; background-color: rgba(248,175,4,0.05); padding: 16px 20px; font-size: 16px;}


.bus-container {
  /* Search/Filtering
	 * Trying not to over ride too many styles, search/filter really should be
	 * using the site's form field styles.
	* -------------------------------------------------------------------------- */ }
  .bus-container .search_filter {
    margin-bottom: 50px; }
  @media (min-width: 751px) {
    .bus-container .search-form {
      display: -webkit-box;
      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;
      /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;
      /* IE 10 */
      display: -webkit-flex;
      /* NEW - Chrome */
      display: flex;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
      -webkit-align-items: flex-end;
      /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome */
      -moz-align-items: flex-end;
      /* OLD - Firefox 19- */
      -ms-flex-align: flex-end;
      /* IE 10 */
      align-items: flex-end;
      -webkit-justify-content: flex-start;
      /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome */
      -moz-justify-content: flex-start;
      /* OLD - Firefox 19- */
      -ms-flex-pack: flex-start;
      /* IE 10 */
      justify-content: flex-start; } }
  @media (min-width: 751px) {
    .bus-container .search-form .search_box,
    .bus-container .search-form .select_box {
      -webkit-box-flex: 0 0 33.333%;
      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 0 0 33.333%;
      /* OLD - Firefox 19- */
      -webkit-flex: 0 0 33.333%;
      /* Chrome */
      -ms-flex: 0 0 33.333%;
      /* IE 10 */
      flex: 0 0 33.333%;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
      max-width: calc((100% / 3) - 27px);
      margin: 0; }
      .bus-container .search-form .search_box + .select_box,
      .bus-container .search-form .select_box + .select_box {
        margin-left: 40px; } }
  @media (max-width: 750px) {
    .bus-container .search-form .search_box,
    .bus-container .search-form .select_box {
      margin: 0 auto;
      width: 100%;
      max-width: 500px; }
      .bus-container .search-form .search_box + .select_box,
      .bus-container .search-form .select_box + .select_box {
        margin-top: 20px; } }
  .bus-container .single-bus.inactive {
    display: none; }

/* Buses Listing
* -------------------------------------------------------------------------- */
.buses.ajax-container .single-bus {
  background-color: #F5F7F9; }
  .buses.ajax-container .single-bus + .single-bus {
    margin-top: 5px; }

.buses.ajax-container .row {
  font-family: 'Open Sans', sans-serif;
  color: #585858;
  line-height: 1.33;
  padding: 22px 25px 22px 88px;
  box-sizing: border-box;
  width: 100%;
  position: relative; }
  @media (min-width: 751px) {
    .buses.ajax-container .row {
      display: -webkit-box;
      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;
      /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;
      /* IE 10 */
      display: -webkit-flex;
      /* NEW - Chrome */
      display: flex;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
      -webkit-align-items: center;
      /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome */
      -moz-align-items: center;
      /* OLD - Firefox 19- */
      -ms-flex-align: center;
      /* IE 10 */
      align-items: center;
      -webkit-justify-content: flex-start;
      /* OLD - iOS 6-, Safari 3.1-6, NEW - Chrome */
      -moz-justify-content: flex-start;
      /* OLD - Firefox 19- */
      -ms-flex-pack: flex-start;
      /* IE 10 */
      justify-content: flex-start; } }
  @media (max-width: 550px) {
    .buses.ajax-container .row {
      padding: 22px 25px 22px 40px; } }
  .buses.ajax-container .row:before {
    content: "";
    display: block;
    height: 100%;
    width: 88px;
    position: absolute;
    top: 0;
    left: 0; }
    @media (max-width: 550px) {
      .buses.ajax-container .row:before {
        width: 40px; } }
  .buses.ajax-container .row .status {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle; }
  .buses.ajax-container .row .dot {
    height: 6px;
    width: 6px;
    border-radius: 3px;
    background-color: #656565;
    margin: 0 6px;
    display: inline-block;
    vertical-align: middle; }
  .buses.ajax-container .row .driver {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle; }
  .buses.ajax-container .row .comments,
  .buses.ajax-container .row .updated {
    display: block;
    margin-top: 3px; }
  .buses.ajax-container .row .updated p {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase; }
  .buses.ajax-container .row .comments p {
    font-size: 16px; }

.buses.ajax-container .left-col {
  box-sizing: border-box;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.34;
  color: #656565; }
  @media (min-width: 751px) {
    .buses.ajax-container .left-col {
      -webkit-box-flex: 0 0 auto;
      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 0 0 auto;
      /* OLD - Firefox 19- */
      -webkit-flex: 0 0 auto;
      /* Chrome */
      -ms-flex: 0 0 auto;
      /* IE 10 */
      flex: 0 0 auto;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
      padding: 0 25px 0 35px;
      max-width: 50%; } }
  @media (max-width: 750px) {
    .buses.ajax-container .left-col {
      padding: 0 0 0 45px; } }
  @media (max-width: 550px) {
    .buses.ajax-container .left-col {
      padding: 0 0 0 25px;
      font-size: 24px; } }
.buses.ajax-container .right-col {
  box-sizing: border-box; }
  @media (min-width: 751px) {
    .buses.ajax-container .right-col {
      -webkit-box-flex: 0 1 auto;
      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 0 1 auto;
      /* OLD - Firefox 19- */
      -webkit-flex: 0 1 auto;
      /* Chrome */
      -ms-flex: 0 1 auto;
      /* IE 10 */
      flex: 0 1 auto;
      /* NEW, Spec - Opera 12.1, Firefox 20+ */
      margin: 0 0 0 auto;
      max-width: 50%;
      text-align: right; }
      .buses.ajax-container .right-col.has-comments {
        width: 50%;
        text-align: left; } }
  @media (max-width: 750px) {
    .buses.ajax-container .right-col {
      margin: 0;
      padding: 0 0 0 45px; } }
  @media (max-width: 550px) {
    .buses.ajax-container .right-col {
      padding: 0 0 0 25px; } }
.single-bus.ontime .row:before {
  background-color: #7AC043; }

.single-bus.delayed .row:before {
  background-color: #FFB43F; }

.single-bus.cancelled .row:before {
  background-color: #FC3842; }

.single-bus.early .row:before {
  background-color: #006FE6; }

.single-bus.inactive {
  display: none; }
  .single-bus.inactive .row:before {
    background-color: #cccccc; }

.special-notice {
  background-color: #EBEDEF;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 125px;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.33;
  color: #3E3E3E; }
  @media (max-width: 550px) {
    .special-notice {
      padding: 18px 25px 18px 65px; } }
.template-div {
  display: none; }