﻿/*
    Additional Styles By Syarif
*/
.purcase-btn-submit{
    cursor: pointer;
    text-align: center;
}
.reset-form{
    margin: 0;
    width: 100%;
    height: auto;
}
.double-col-container{
    max-width:1230px;
    /*margin:0 auto;*/
}
.double-big-col{
    width: calc(100% - (430px));
    margin: 0;
    padding-top: 40px;
    float: left;
}
.double-sm-col{
    width: 400px;
    margin: 0 0 0 30px;
    padding-top: 40px;
    float: left;
}
/*
Preview Order
*/
#order-detail-box .purcase-box-body{
    position: relative;
}
.order-number{
    font-family: 'LatoRegular';
    background: rgba(0,121,156,.1);
    line-height: 34px;
    width: 170px;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    right: 21px;
    position: absolute;
    color: #444444;
}
.order-number b{
    font-weight: normal;
    font-family:"Lato Bold";
}
.train-info{
    height: 130px;
}
.train-info img{
    float: left;
    margin-right: 15px;
}
.train-info h3,
.train-info p{
    font-weight: normal;
    font-family:"Lato Bold";
    /*float: left;*/
}
.train-info h3{
    font-size: 24px;
    color: #263c49;
    margin-top: 7px;
    /*width: calc(758px - 180px);*/
}
.train-info a{
    font-size: 16px;
    color: #00799c;
}
.order-info > div.info-col:not(:nth-last-child(2)){
    float: left;
    padding-right: 65px;
}
.order-info .info-title{
    font-family: 'LatoRegular';
    font-size: 14px;
    color: #888888;
    margin-bottom: 2px;
    display: block;
}
#certDetails {
    margin-bottom: 15px;
}
.order-info .info-desc{
    font-weight: normal;
    font-family:"Lato Bold";
    font-size: 18px;
    color: #1d1d1d;
}
.time-info{
    height: 63px;
}
.boarding-info{
    padding-bottom: 21px;
}
.boarding-info .boarding-steps{
    margin: 10px 0 0;
    padding: 0 0 10px;
    list-style: none;
    /*border-bottom: solid 1px rgba(68,68,68,.1);*/
}
.boarding-info .boarding-steps li{
    padding-left: 25px;
    position: relative;
    border-left: solid 3px rgba(98,185,149,.2);
    padding-bottom: 15px;
    margin-left: 6px;
}
.boarding-info .boarding-steps li:last-child{
    border-color: transparent;
}
.boarding-info .boarding-steps li:before{
    content: '';
    display: block;
    position: absolute;
    left: -10px;
    background: #62b995;
    border-radius: 50%;
    width: 17px;
    height: 17px;
}
.boarding-info .boarding-steps li b{
    font-weight: normal;
    font-family:"Lato Bold";
    font-size: 18px;
    line-height: 16px;
    color: #1d1d1d;
    display: inline-block;
    vertical-align: top;
}
.boarding-info .boarding-steps li span{
    font-family: 'LatoRegular';
    font-size: 12px;
    line-height: 18px;
    color: #888888;
    display: inline-block;
    vertical-align: top;
}
.service-info .passenger-list b.info-desc{
    padding-right: 25px;
}
.price-details{
    padding:0;
    margin:0;
    list-style-type: none;
    font-size: 14px;
    line-height: 14px;
}
.price-details li{
    height: 33px;
}
.price-details li.separator{
    width: 100%;
    height: 1px;
    background: #d7d7d7;
    margin: 4px 0 20px;
}
.price-details li .item-desc{
    font-family: 'LatoRegular';
    float: left;
    color: #444444;
}
.price-details li .item-price{
    font-family:"Lato Bold";
    float: right;
    width: 60px;
    color: #444444;
    text-align: right;
}
.price-details li.total{
    font-family:"Lato Bold";
    font-size: 17px;
    background: rgba(0,0,0,.03);
    height: 17px;
    margin: 2px -21px -24px;
    padding: 19px 21px;
}
.price-details li.total .item-desc{
    font-family:"Lato Bold";
    color: #1d1d1d;
}
.price-details li.total .item-price{
    width: 65px;
    color: #1d1d1d;
}
.foot-btn-col{
    padding-top: 15px;
    padding-bottom: 50px;
}
.foot-btn-col .purcase-btn-submit{
    height: 45px;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    margin-right: 14px;
}
.foot-btn-col a.purcase-btn-submit{
    height: 43px;
    line-height: 43px;
}
.foot-btn-col .purcase-btn-submit:last-child{
    margin-right: 0;
}
button.cancel{
    background: #c4c4c4;
    border-color: #c4c4c4;
}
/*.foot-btn-col .change-ticked{
    background: transparent;
    color: #62b995;
    border-color: #62b995;
    padding-left: 8px;
}
.foot-btn-col .change-ticked:hover{
    background: #62b995;
    color: #fff;
}*/
.foot-btn-col .cancel{
    width: 146px;
}
.foot-btn-col .continue{
    /*float: right;*/
    padding-right: 8px;
}
.foot-btn-col .submit{
    padding-right: 20px;
}
.foot-btn-col.payment-btns .purcase-btn-submit{
    width: calc(50% - 7px);
}
.chevron-cyan-left{
    display: inline-block;
    background: url("../img/form-sprites.png") no-repeat center top -159px;
    width: 20px;
    height: 45px;
    vertical-align: middle;
}
.chevron-right{
    display: inline-block;
    background: url("../img/form-sprites.png") no-repeat center top -200px;
    width: 20px;
    height: 45px;
    vertical-align: middle;
}
*:hover > .chevron-cyan-left{
    background-position: center top -199px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
/*PAYMENT*/
.payment-sum{
    margin:0;
    padding: 0;
    list-style: none;
}
.payment-sum li:not(:last-child){
    margin-bottom: 15px;
}
.payment-sum h4{
    font-family: 'roboto_slabregular';
    color: #263c49;
    margin: 0;
}
.payment-sum .train-detail{
    width: 275px;
    float: left;
}
.payment-sum .train-detail h4{
    font-size: 20px;
    line-height: 21px;
    margin-bottom: 2px;
}
.payment-sum .train-detail p{
    font-family: 'LatoRegular';
    font-size: 14px;
    line-height: 21px;
    color: #444444;
}
.payment-sum .date-detail{
    width: calc(100% - 276px);
    border-left: solid 1px #959595;
    float: left;
    text-align: center;
}
.payment-sum .date-detail h4{
    font-size: 35px;
    line-height: 36px;
}
.payment-sum .date-detail b{
    font-family: 'roboto_slabregular';
    color: #263c49;
    font-size: 16px;
    line-height: 22px;
}
.list-bill{
    padding-left: 10px;
    margin-top: 30px;
}
.list-bill h4{
    font-family: 'roboto_slabregular';
    color: #000000;
    margin: 0;
    font-size: 16px;
}
.list-bill .price-details{
    margin-top: 24px;
}
.list-bill .price-details li{
    height: 30px;
    padding-left: 10px;
}
.list-bill .price-details li.separator{
    height: 1px;
    margin-top: 9px;
    margin-bottom: 23px;
    width: calc(100% - 10px);
}
.list-bill .price-details li.coupon{
    height: auto;
}
.coupon-form{
    float: none;
    padding-top: 27px;
    padding-bottom: 23px;
}
.coupon-form input[type="text"]{
    border-radius: 10px;
    border: 1px solid #bfbfbf;
    color: #444;
    background-color: transparent;
    max-width: 444px;
    width: calc(260px - 16px);
    padding: 10px 7px;
}
.coupon-form .purcase-btn-submit{
    background: #62b995;
    color: #fff;
    border-color: #62b995;
    float: right;
    margin: 0;
    font-family: 'LatoRegular';
    width: 107px;
    height: auto;
    line-height: 35px;
}
.list-bill .price-details li.total{
    background: transparent;
    margin: -5px 0 0 0;
    padding: 0 0 0 10px;
}
.form-row:before, .form-row:after {
    display: table;
    line-height: 0;
    content: "";
    clear: both;
}
.form-row label{
    display: block;
    margin-top: -34px;
    font-family:"Lato Bold";
    font-size: 16px;
    color: #000000;
    line-height: 21px;
    padding-bottom: 13px;
    padding-left: 2px;
}
.form-row .form-col{
    float: left;
    padding-top: 34px;
    padding-bottom: 19px;
}
.form-row .form-col.f-name, .form-row .form-col.l-name {
    max-width: 323px;
    width: 100%;
}
.form-row .form-col.email {
    max-width: 401px;
    width: 100%;
}
.form-row .form-col.phone {
    max-width: 319px;
    width: 100%;
}
.form-row .form-col.c-card {
    max-width: 473px;
    width: 100%;
}
.form-row .form-col.c-card-no {
    max-width: 311px;
    width: 100%;
}
.form-row .form-col.addr, .form-row .form-col.addr2 {
    max-width: 715px;
    width: 100%;
}
.form-row .form-col.city {
    max-width: 233px;
    width: 100%;
}
.form-row .form-col.state {
    max-width: 273px;
    width: 100%;
}
.form-row .form-col.zip {
    max-width: 126px;
    width: 100%;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row select{
    font-family: 'LatoRegular';
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.25);
    background: #fff;
    color: #444444;
    line-height: 21px;
    padding: 8px 12px 9px;
    margin-right: 10px;
}
.form-row select{
    background: #FFFFFF url('../img/arrow-select.png') no-repeat right 12px center;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 8px 22px 8px 10px;
}
.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row select:focus{
    border-color: #00799c;
    box-shadow: inset 0 0 3px #ededed;
}
.mr-mrs select{
    max-width: 71px;
    width: calc(100% - (10px));
}
.f-name input,
.l-name input,
.phone input,
.email input{
    max-width: 285px;
    width: calc(100% - (34px));
}
.l-name input, .l-name label {
    margin-left: -3px;
}
/*.email input{
    max-width: 288px;
    width: calc(100% - (34px));
}*/
.c-card input{
    max-width: 437px;
    width: 100%;
}
.c-card-no input{
    max-width: 277px;
    width: calc(100% - (34px));
}
.c-card-mm input,
.c-card-code input{
    max-width: 45px;
    width: 100%;
}
.c-card-yyyy input{
    max-width: 65px;
    width: 100%;
}
.addr input,
.addr2 input,
.notes input,
.recipName input,
.recipEmail input{
        max-width: 603px;
    width: calc(100% - (24px));
}
.form-row .form-col.states,
.form-row .form-col.zip{
    padding-top: 0;
    padding-bottom: 0;
}
.form-row .form-col.city, .form-row .form-col.addr2{
    padding-top: 0;
    padding-bottom: 13px;
}
.form-row .form-col.addr{
    padding-bottom: 13px;
}
.city input{
    max-width: 200px;
    width: calc(100% - (34px));
}
.states select{
    width: 265px;
}
.zip input{
    max-width: 92px;
    width: 100%;
}