/*
Styles for Trip Planner
*/

.more_trips {
    background: #f1f1f1;
    padding: 20px 0px 20px 0px;
    font-size: 14px;
  }
  .open_trips {
      background: #f1f1f1;
      cursor: pointer;
      padding: 5px 20px 5px 15px;
      display: inline-block;
      margin-bottom: 0;
      color: #1a3a74;
      font-size: 16px;
      margin-top: 30px;
  }
  .open_trips i {
      margin-right: 10px;
      color: #000;
  }
  form#trip_form label,
  form#trip_form_home label {
      display: inline;
      color: #ffffff;
      font-size: 18px;
      text-transform: capitalize;
  }
  form#trip_form .from {
      margin-bottom: 30px;
  }
  #station,
  #tostation {
      width: 95%;
  }
  .to,
  .from {
      margin-left: 0px;
  }

  #trip_form select,
  #trip_form input,
  form#trip_form_home select,
  form#trip_form_home input {
      font-size: 16px;
      border-radius: none;
      height: 34px;
  }
  .trip_button {
      border: none;
      background-color: #ef3e42;
      margin-top: 25px;
      text-transform: uppercase;
      color: #FFFFFF;
      padding: 0 20px;
      font-size: 12px !important;
      line-height: 40px;
      height: 40px !important;
      font-weight: 700;
      transition: background-color ease-out 0.4s;
      -webkit-transition: background-color ease-out 0.4s;
      -moz-transition: background-color ease-out 0.4s;
      -ms-transition: background-color ease-out 0.4s;
      -o-transition: background-color ease-out 0.4s;
  }
  a.trip_button {
      padding-top: 12px;
      padding-bottom: 12px;
  }
  .trip_button:hover {
      text-decoration  : none;
      background-color : #5B5E65;
  }
  .trip_planner .trip_button {
      margin-top: 38px;
      margin-left: 22px;
  }
  .trip_heading {
      color: #ef3e42;
      font-size: 22px;
      margin-bottom: 20px;
  }
    .alert-danger {
        padding-bottom: 15px;
    }
/*  .trip_heading h3 {
      margin-top: -10px;
  }*/
.tablesorter tr td:first-child {
    padding-top: 15px !important;
}
  #amtrakWarning {
      display: none;
      margin-top: 20px;
  }
  .warningHeader_amtrak {
      color: #ef3e42 !important;
      font-size: 20px !important;;
      font-weight:700 !important;
  }
  .warningSubheader_amtrak {
      font-size: 14px !important;
      line-height: 21px !important;
      font-weight: normal !important;
      color:#000000 !important;
  }
  .warningBox_amtrak {
      background-color:#e3e3e3 !important;
      padding: 20px 40px 20px 30px !important;
      text-align:center !important;
  }
  .mn_footnote_sch{
      color: #ef3e42;
      font-size: 12px;
      font-weight: 700;
      padding-top:5px;
  }
  .mn_footnote{
      color: #ef3e42;
      font-size: 12px;
      font-weight: 700;
      padding-top:5px;
  }
  .mn_footnote_home {
      font-size: 13px;
      font-weight: 500;
      padding-bottom: 10px;
      color: #fff;
      padding-top:10px;
  }
  .sns-iframe {
    overflow: hidden;
    position: relative;
      width: 100%;
      margin-bottom: 10%;
    border: none;
  }
  .sns-iframe iframe {
     border: 0;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
  }
  .red_text {
     color: #ef3e42;
  }
  .amtrak_blue_text {
      color: #007397;
  }
  .busText {
      color: #007397;
      font-size: 18px;
      font-weight: bold;
  }
  #alltrains {
      position: absolute;
      min-width: 825px;
      margin-left: -420px;
      top: 10%;
  }
  .alltrains-body.modal-body {
    max-height: none;
  }
  /*.alltrains-body {
      height: 60vh;
  }*/
  /* Force scrollbar to be visible in the all trains popup 
  #alltrains ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
  #alltrains ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }*/
  @media(max-width: 945px) {
      #alltrains {
          margin-left: -290px;
          min-width: 400px;
      }
  }
  .sns-iframe iframe {
     border: 0;
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
  }
  @media (max-width: 777px) {
      #alltrains {
          margin-left: 0;
          min-width: 0;
      }
  }
  @media (max-height: 685px) {
      #alltrains {
          top: 5%;
      }
      .alltrains-header h3 {
          padding-top: 0;
      }
      /*.alltrains-body {
          height: 50vh;
      }*/
      .alltrains-footer {
          padding-top: 0;
          padding-bottom: 0;
      }
      .alltrains-footer .trip_button {
          margin-top: 12px;
      }
  }
  .amtrakNote,
  .busNote {
      padding-right: 20px;
      line-height: 1.2;
      position: relative;
      left: 68px;
      bottom: 16px;
      max-width: 80%;
  }
  .amtrakLogo {
      position: relative;
      left: 4px;
      top: 24px;
      width: 50px;
  }
  .amtrakLogoSmall {
      position: relative;
      left: 11px;
      bottom: 4px;
      width: 45px;
  }
  .busIcon {
      position: relative;
      left: 4px;
      top: 24px;
      width: 40px;
  }
  .busIconSmall {
      position: relative;
      left: 11px;
      bottom: 4px;
      width: 28px;
  }
  .amtrak-2,
  .bus-2 {
      bottom: 15px;
  }
  .amtrak-connection,
  .bus-connection {
      bottom: 5px !important;
  }
  .white_text {
      color: #fff;
      font-size: 18px;
  }
  .results {
      overflow: hidden;
  }
  .result_box {
      float: left;
  }
  .result_box.short {
      width: 140px;
      padding-left: 20px;
  }
  .result_box.long {
      width: 210px;
      padding-left: 20px;
      padding-right: 20px;
  }
  
  /* styles for IE 9, 10, 11 */
  @media screen\0 {
      .result_box.short {
          width: 130px;
      }
      .result_box.current.long {
          width: 228px;
      }
  }
  
  .result_box.current {
      background: #333;
      color: #fff;
      padding-top: 4px;
      padding-bottom: 4px;
  }
  .result_box.current.long {
      padding-right: 20px;
  }
  .mobiletable {display:none;}
  .boldtitlemobile{
      font-weight:bold;
      padding-left:20px;
  }
  .mobiletablefloats{
      width:44%;
      float:left;
      padding-right:12%;
  
  }
  .mobiletablefloatslast{
      width:44%;
      float:left;
  
  }
  
  @media (max-width: 1170px) {
      .result_box.current.long {
          padding-right: 100%;
      }
      .result_box.current.short {
          padding-right: 100%;
      }
      .mobiletable {
          display:block;
      }
      .desktable {
          display:none;
      }
  }
  
  /* warning message styles */
  .warningHeader {
      font-size: 32px;
      font-family: 'Open Sans';
      color: #ef3e42;
      text-shadow: none;
      padding-bottom: 10px;
  }
  .warningSubheader {
      font-size: 16px;
      font-family: 'Open Sans';
      color: #000;
      font-weight: bold;
      text-shadow: none;
      padding-bottom: 10px;
  }
  .warningBox {
      background-color: #ccc;
      border: none;
      border-radius: 7px;
      padding-top: 12px;
      padding-bottom: 12px;
  }
  .close {
      text-shadow: none;
      color: #000 !important;
      opacity: 10;
      font-size: 23px;
  }
  hr.break {
    margin: 5px 20px;
    border-top-color: #d2d2d2;
    border-top-style: solid;
    border-top-width: 1px;
  }
  .utils {
    margin-right: 20px;
    margin-top: 30px;
    display: inline-block;
  }
  .utils i {
      margin-right: 15px;
      font-size: 20px;
  }
  .utils a {
      color: #1a3973;
      text-decoration: underline;
      font-size: 14px;
      line-height: 20px;
  }
  .more_info {
    margin-top: 30px;
    font-size: 16px;
  }
  .more_info p {
      font-size: 14px;
      margin: 0 0 10px 0;
  }
  .more_info a {
      color: #1a3973;
  
  }

.warningBox {
    background-color: #ccc !important;
    border: none;
    border-radius: 7px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.modal-backdrop.in {
	opacity: .7 !important;
}
.modal.fade.in {
	top: 40%;
}
#deleteTrain {
	color: #ef3e42;
	font-size: 18px;
	font-weight: normal;
}
#tp-modal-body {
	font-weight: bold;
}


/*  removed z-index from .met_page_wrapper, .met_content, and .met_main_nav + div, and commented out the .modal-backdrop style properties in the custom.css file in order
	to allow the modal to display correctly
 */

 /**** SORTABLE TABLES ***/
.tablesorter th {
	background-color: #ef3e42;
	color: #fff;
	padding: 12px 25px;
}
.tablesorter th:first-child {
	border-top-left-radius: 4px;
}
.tablesorter th:last-child {
	border-top-right-radius: 4px;
}
.tablesorter tr:nth-child(even) {
	background-color: #f1f1f1;
}
.tablesorter tr:nth-child(odd) {
	background-color: #ddd;
}
.tablesorter th, .tablesorter td, .tablesorter {
	border: none !important;
}
.tablesorter th, .tablesorter td {
	vertical-align: top;
}
.tablesorter td {
	font-weight: bold;
	font-size: 22px;
	color: #545361;
	padding-left: 25px;
}
.tablesorter tr td:first-child {
	padding-top: 0;
}
.tablesorter tr td:nth-child(n+2) {
	padding-top: 18px;
}
.tablesorter tr td:nth-child(4) {
	padding-left: 0;
	padding-right: 0;
}
.icon-sort {
	padding-left: 7px;
}
.icon-long-arrow-right {
	color: #ef3e42;
	position: relative;
	top: 9px;
	left: 20px;
	font-size: 45px;
	margin-bottom: -2px;
}
.train-icon {
	width: 10px;
	height: 14px;
	margin-right: 3px;
	position: relative;
	bottom: 10px;
}
.train-number {
	color: #8d909f;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	bottom: 10px;
	margin-left: 2px;
}
.station-name {
	font-size: 14px;
	position: relative;
	bottom: 2px;
}
.tablesorter tr td:first-child .station-name {
	bottom: 7px;
}
.total-duration, .layover-duration {
	font-size: 14px;
	font-weight: normal;
	position: relative;
	bottom: 2px;
}
.travel-date {
	color: #65676F;
	font-weight: bold;
}
.union-station-name {
	margin-top: -14px;
}
.union-station-name,
.stamford-name,
.train1-station-name {
	margin-bottom: -2px;
}
.train1-arrive,
.train2-arrive,
.train3-arrive,
.train1-depart,
.train2-depart,
.train3-depart,
.duration-1,
.duration-2,
.duration-3 {
	height: 120px;
}

@media (max-width: 480px) {
    .tablesorter tr td:first-child {
        font-size: 20px;
    }
    .tablesorter tr td:nth-child(n+2) {
        font-size: 20px;
    }
    .icon-long-arrow-right {
        font-size: 30px;
    }
    .train-icon {
        padding-top: 5px;
    }
}

@media (max-width: 320px) {
    .icon-long-arrow-right {
        top: 0px !important;
    }
    .train-icon {
        padding-top: 5px;
    }
}
@media (max-width: 353px) {
    #trip_form_home label.travel_time {
        margin-top: 20px;
        padding-left: 0px !important; 
    }
}

@media (max-width: 470px) {
    #trip_form_home .trip_button {
        margin-left: 20vw;
    }
}

@media (max-width: 762px) {
        #trip_form_home .to {
        margin-top: 20px;
    }
    #trip_form_home .travel-date-group {
        margin-top: 20px;
    }
    #trip_form_home .trip_button {
        margin-bottom: 20px;
    }
}