.flex-row {display: flex; flex-direction: row; flex-wrap:wrap;align-items: stretch;justify-content: flex-start;clear: both; margin-right: -20px;}
.flex-col-3,.flex-col-4 {margin-right: 20px;margin-bottom: 20px;display: flex;flex-flow: column; position: relative;}
.flex-col-3 {width: calc((100% - 20px * 3) / 3);}
.flex-col-4 {width: calc((100% - 20px * 4) / 4);}
@media (max-width: 768px){
	.flex-col-3,.flex-col-4{ width: 100%; margin-bottom:30px; margin-right: 0}
	.flex-row {margin-right: 0;}
}
/*train*/
.trainSearchBox { background: #f2f2f2; border-radius: 6px; padding: 20px;margin-bottom: 30px;}
.banner .trainSearchBox{background: rgba(255, 255, 255, 0.9); position: absolute;bottom: 30px; padding:35px; width:750px; left: calc(50% - 375px); margin: 0;}
.trainSear-title { font-size: 26px; text-align: center; margin-bottom: 25px;color: #000;font-weight: 300}
.banner .trainSear-title {font-size: 30px;}
.trainSearchBox .nav-tabs { margin: 0 0 10px; padding: 0; border-bottom: none;}
.trainSearchBox .nav-tabs li{margin-bottom: 0px; padding-bottom: 0; margin-right:5px; float: left;list-style: none;height: 44px;background: none;padding-left: 0;}
.trainSearchBox .nav-tabs li a,.trainSearchBox .nav-tabs > li > a:focus{background:#b0b0b0;text-decoration:none; color:#fff; font-size:18px; padding:5px 10px; border-radius: 6px;border:none;}
.trainSearchBox .nav-tabs li.active a{background:#ae0000;color: #fff;border-radius: 6px;border:none;}
.trainSearchBox .nav-tabs li a:hover,.trainSearchBox .nav-tabs li.active:hover a,.trainSearchBox .nav-tabs > li.active > a:focus{background:#ae0000; color: #fff;border-radius: 6px;border:none;}
.trainSearchBox .form-control {width:100%; box-sizing: border-box; height: 40px;padding: 8px 12px; font-size: 18px;line-height: 1.428571429;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc; border-radius: 4px; }
.trainSearchBox .searchButtonLong{ background:#ae0000; border-radius:4px; font-size:18px; letter-spacing: 1px; color:#fff; border:none; text-align:center; padding:5px 30px;cursor: pointer;height: 40px;}
.search-row {width: calc(100% - 100px); float: left}
.searchLabel {float: left; width: 100px; font-size: 18px; padding-top:8px; color: #000;}
.addBtn {float: left;}
.addTr {min-height: 40px;}
.searchBtn {text-align: right;}
.icon-change { width: 34px; height: 34px; background: url("../png/train-change.png") no-repeat; display: inline-block;position: relative;margin-left: -15px;margin-right: 5px;margin-top: 3px; cursor: pointer;} 
.calendar, .calendar2, .calendar3, .trainSearchBox .calendar3.form-control { background: url(../png/calendar.png) 96% center no-repeat rgb(255, 255, 255); cursor:pointer;}
a.addRoute,a.deleteRoute{color:#000000; font-size:16px; text-decoration:none;display:inline-block; padding:8px 20px 5px 25px; position: relative;}
a.addRoute{margin-right:8px;}
a.addRoute:hover,a.deleteRoute:hover{ text-decoration:underline;}
a.addRoute i,a.deleteRoute i { position: absolute; left: 0; top: calc(50% - 8px); font-family:Arial, "sans-serif";width: 20px; height: 20px; background:#ae0000; border-radius: 50%; display: inline-block; text-align: center;color: #fff; line-height: 20px;font-size: 20px; padding-right: 1px;}
a.deleteRoute i{line-height: 15px;font-size: 24px; }
a.addRoute:hover i,a.deleteRoute:hover i{ text-decoration: none;}
/*shopping */
.shoppingcar {cursor: pointer;width: auto;position: relative; display: inline-block; margin-left: 10px;}
.shopcart,.shoppingcar a {background: url(../png/trains-shopping.png) no-repeat 10px center #fff;border: solid 1px #ccc; border-radius: 4px;height: 40px;line-height: 40px;padding: 0px 10px 0px 55px;position: relative;display: inline-block;font-size: 16px;text-decoration: none;color: inherit;font-weight: inherit; }
.shopping-num {width: 18px;height: 18px;background: #888; border-radius: 50%;line-height: 18px;text-align: center;font-size: 12px;color: #fff;display: inline-block;position: absolute;top: 4px;left: 29px;    }
.shopcart i.downarrow {display: inline-block;width: 0;height: 0; margin-left: 2px;margin-top: -4px;vertical-align: middle;border-left: 5px solid transparent;border-right: 5px solid transparent; border-top: 5px solid #666;    }
@media (min-width: 768px) {
  .modal-dialog {width: 750px;margin: 30px auto;  }
}
@media (max-width: 768px) {
	.banner .trainSearchBox {background:#f2f2f2; border-radius: 0px; width: auto; left: 10px; right: 10px; bottom: 10px; margin-left: auto;padding:15px; position:static; }
	a.addRoute,a.deleteRoute{ margin-bottom: 10px;padding-top:0px;} 
	a.addRoute i,a.deleteRoute i{top: calc(50% - 12px);}
	.searchList { position: relative; padding-left: 0px;}
	.addBtn,.searchBtn { float: none; text-align: center;}
	.search-row {width:100%; float: none; position: relative;}
	.searchLabel { float: none; display: block;padding-top:0px}
    .trainSearchBox .flex-col-3{ width: 100%; margin-bottom:20px;}
	.city-change {border:solid 1px #ccc;border-left:none; position: absolute; top:20px;right: 10px; height: 60px; width:15px;}
	.city-change .icon-change {right:-13px;background-color: #f2f2f2; border-radius: 50%;top: calc(50% - 20px)}
}