/*** Header ***/
.bg-theme, body {
    background: #F6F6F6;
}

.cf6f6f6 {
    background-color: #f6f6f6
}

.navbar {
    border-bottom: 1px solid #d1d1d1;
    background: #a3ccde;
    z-index: 999999999;
    box-shadow: 0px 0px 3px 3px #3630275c
}

.navbar-light .navbar-nav .nav-link {
    color: #444444;
    font-weight: bold;
}

ul.p20 li a {
    padding: 0px 20px !important;
}

.b0 {
    margin-bottom: 0px;
}
/*** Footer ***/
footer {
    background: #4463ac;
    min-height: 40vh;
}

.footer-item {
    padding: 0 0% 0 15%;
    position: relative;
    top: 200px
}

    .footer-item a.first-child {
        margin-left: 10%
    }

    .footer-item a {
        color: #25365b;
        font-weight: bold;
        font-size: 12px;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        -webkit-box-pack: justify;
        justify-content: space-evenly;
    }

.copyrights {
    font-size: 13px;
    color: #eeeeee;
    /*width: 40%;*/
    /*text-align: center;*/
    opacity: 0.8;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*-webkit-box-pack: justify;*/
    /*justify-content: space-evenly;*/
    /*height: 35px;*/
}

.footer-links {
    width: 60%;
    float: left;
    display: flex;
    justify-content: space-between
}

.ml-10 {
    margin-left: 10px
}

.ml-70 {
    margin-left: 70px
}

.mr-20 {
    margin-right: 20px
}

.home-body {
    margin-top: 57px;
    height: 90vh
}

.body {
    margin-top: 57px;
    min-height: 70vh
}

.login-box-body {
    margin-top: 57px;
    min-height: 80vh
}

.home-tabs {
    display: flow-root;
    width: 100%;
    overflow-x: auto;
    padding-top: 30px;
}

.home-tab a {
    text-decoration: none;
    color: white
}

.home-tab {
    min-width: 100px;
    padding: 10px 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 22px;
    color: white;
    background: #0000002e;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    margin-right: 3px;
}

    .home-tab.active {
        background: #0000009c !important;
    }

.sh {
    color: #444;
    font-weight: bold;
}

.sh-li a {
    color: #888;
    padding-left: 20%
}

.pax-dropdown {
    width: 100%;
    margin-right: 15px;
}

div.pax-dropdown2 button {
    width: 100%;
    background: white;
    color: #444;
}

div.pax-dropdown3 {
    width: 32%;
    float: left;
}

.dropdown-toggle:after {
    content: none
}

div.pax-dropdown3 button {
    width: 100%;
    background: white;
    color: #444;
}

div[aria-labelledby="dropdownMenuButton"] {
    min-width: 100%
}

.pax-home input {
    width: 31% !important
}

.pax-dropdown button {
    background-color: white;
    color: #495057;
    width: 100%
}

#trainBack {
    /*background-image: url('../assets/train.jpg');*/
    min-height: 90vh;
    background-repeat: no-repeat;
    background-size: cover;
}

.plr0 {
    padding-left: 0px;
    padding-right: 0px;
}

.plr1 {
    padding-left: 0px;
    padding-right: 1px;
}

#serviceBtn {
    width: 100%;
}

.pr0 {
    padding-right: 0px;
}

.ticket-search {
    background: #00000073;
    padding: 22px;
}

.ticket-search-myRail {
    background: #00000073;
    padding: 22px;
}

.web-exchange {
    position: absolute;
    right: -16px;
    color: black;
    top: 2px;
    font-size: 20px;
    background: white;
    border-radius: 100px;
    padding: 8px;
    box-shadow: 0px 1px 7px 0px grey;
    z-index: 9;
}

.flex {
    padding-left: 0px;
}

    .flex input {
        margin-right: 15px;
        width: 25%;
        float: left;
    }

.ticket-search-btn {
    background: #f8d013;
    width: 100%;
    margin-top: 22px;
}

.mt22 {
    margin-top: 24px
}

.return {
    left: 28%
}

.top3 {
    position: relative;
    top: 10px
}

.ktm-service {
    margin-top: 15%;
    position: relative;
    top: 30px;
    display: flex;
    border-radius: 10px;
    background: #eeeeee;
    padding-bottom: 10px;
}

    .ktm-service div.service {
        text-align: center;
        font-weight: bold;
        color: grey;
        width: 17%;
        border-right: 1px solid #dddddd;
    }

    .ktm-service div img {
        width: 60px;
        height: 60px
    }

.dfkl {
    margin-top: 8%;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

.images {
    width: 100%;
    margin-top: 20px;
    display: flex;
    margin-bottom: 100px;
    margin-right: 0px;
    overflow-x: hidden;
}

    .images div.places {
        width: 20%;
        height: 350px
    }

    .images div img {
        width: 100%;
        height: 450px;
        object-fit: cover;
    }

.butterworth {
    /*width: 40% !important;*/
    float: left;
    height: 350px;
    display: table;
    background-image: url('../assets/butterworth.jpg');
    object-fit: cover;
    background-size: cover;
}

.jh {
    display: table;
    background-image: url('../assets/johar.jpg');
    object-fit: cover;
    background-size: cover;
}

.ioph {
    display: table;
    background-image: url('../assets/ioph.jpg');
    object-fit: cover;
    background-size: cover;
}

.pb {
    display: table;
    background-image: url('../assets/padang.jpg');
    object-fit: cover;
    background-size: cover;
}

.fitcontent {
    width: fit-content;
}

.place-text-first {
    font-size: 30px;
    color: white;
    font-weight: bold;
    position: relative;
    left: 22px;
}

.place-text {
    font-size: 30px;
    color: white;
    font-weight: bold;
    position: relative;
    left: 10px;
    top: -30%;
    text-shadow: 0 1px 0 black;
}

.price-text {
    text-shadow: 0 1px 0 black;
    font-size: 16px;
    text-align: right;
    color: white;
    font-weight: bold;
    padding-right: 15px;
}

    .price-text b {
        font-size: 40px;
    }

.price-tag {
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
    width: 100%;
    display: table-cell;
    vertical-align: bottom;
}


/***** Calendar CSS  *****/

.lightpick__day.is-start-date.is-in-range, .lightpick__day.is-end-date.is-in-range.is-flipped {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: #3d9cdb;
    background-image: none;
    margin-left: 5px;
}

    .lightpick__day.is-end-date.is-in-range, .lightpick__day.is-start-date.is-in-range.is-flipped {
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        background-color: #268BD2;
        background-image: none;
        margin-right: 5px;
    }

.lightpick__month-title-bar {
    justify-content: center;
    height: 100px;
    background: #eeeeef;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
}

.lightpick__previous-action {
    position: absolute;
    left: 0px;
    top: 35px
}

.lightpick__next-action {
    position: absolute;
    right: 5px;
    top: 35px
}

.lightpick__month-title {
    text-align: -webkit-center;
    text-align: center;
    font-size: 22px;
}

.lightpick__previous-action {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    background: #eeeeef;
    /*left: -6px;*/
    width: 0px;
}

.lightpick__next-action {
    font-size: 24px;
    font-weight: bold;
    background: #eeeeef;
    width: 0px;
}

.is-in-range .strip {
    width: 100%;
    text-align: center;
    height: 28px;
    background: #5fbdf1;
    padding-top: 5px;
    color: white;
}

.is-start-date .strip, .is-end-date .strip {
    background: unset;
}

.lightpick__day.is-in-range {
    border-radius: 0;
    background-color: #5fbdf1;
    background-image: none;
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
    height: 30px;
}

.picker-btn, .picker-btn:hover {
    display: none;
    background: #f8d013;
    color: black;
    width: 71%;
    font-size: 12px;
    margin-left: 20%;
    margin-bottom: 5px;
}

.close-date-btn {
    float: left;
    display: none;
    background: #eeeeee;
    color: black;
    font-size: 12px;
    margin-left: 5%;
}

}

.lightpick__select.lightpick__select-months {
    text-align-last: center;
}

.lightpick__month-title > .lightpick__select-months {
    margin-right: unset;
}

.slider.slider-horizontal {
    width: 100%;
}

    .slider.slider-horizontal .slider-track {
        height: 2px !important
    }

.slider-handle {
    top: -5px !important
}

.lightpick.mobile {
    top: 60vh !important;
    left: 5px !important;
    width: 97%;
}
    /*.lightpick.mobile .lightpick__inner{
    min-height: 450px
}*/
    .lightpick.mobile .lightpick__month {
        width: 100%;
    }


/********* Holiday page **********/
.holiday-box {
    background: #ffffffde;
    height: 480px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.holiday-title {
    width: 70%;
    margin-left: 15%;
    font-size: 20px;
    text-align: left;
    font-weight: bold;
}

.holiday-body {
    margin-top: 20px;
    width: 70%;
    margin-left: 15%;
    color: grey;
    font-size: 16px;
    text-align: left;
}

#holidayBack {
    background-image: url('../assets/train.jpg');
    min-height: 480px;
    background-repeat: no-repeat;
    background-size: cover;
}

.mb-50 {
    margin-bottom: 50px
}

.service-include {
    text-align: center;
}

    .service-include i {
        color: #5d83b0;
        font-size: 84px !important;
        margin-bottom: 18px;
    }

    .service-include div {
        font-size: 16px
    }

.mt-5p {
    margin-top: 5%
}



/******* Shoppy Page *******/
#shoppyBack {
    background: #ebeff6;
    height: 480px;
}

    #shoppyBack .row {
        position: relative;
        top: 20%
    }

.ks {
    font-size: 35px;
    font-weight: bold;
    color: #777777;
}

.p-icon {
    float: left;
    width: 50px;
    height: 50px;
    background: white;
    text-align: center;
    padding-top: 8px;
    border-radius: 50px;
    border: 1px solid #dddddd;
}

    .p-icon i {
        color: #444444;
        font-size: 30px !important
    }

.ml-65 {
    margin-left: 65px;
}

.text {
    font-size: 12px;
    color: grey;
    line-height: 15px;
}

.shoppe_title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

.m5p {
    margin-top: 5%;
    margin-bottom: 15%;
}

/******** Flexi Fare Page **********/
.flexi_title {
    font-size: 20px;
    font-weight: bold;
}

.flexi_sub_title {
    color: grey;
    margin-bottom: 20px;
}

.flexi-label {
    margin-top: 20px;
    line-height: 18px;
}

.wallet-img {
    width: 130px;
    height: 120px
}

.ktmks {
    font-size: 40px;
    font-weight: bold;
    color: #777777;
    width: 35%;
    text-align: center;
    position: absolute;
    right: 1px;
}

.ktmip {
    font-weight: bold;
    color: #777777;
    font-size: 16px;
}

/********* Upgraded seats **********/

.upgrade-title {
    width: 80%;
    margin-left: 10%;
    font-size: 24px;
    text-align: left;
    font-weight: bold;
}

.upgrade-content {
    margin-top: 25px;
    width: 80%;
    margin-left: 10%;
}

.c5d83b0 {
    color: #5d83b0 !important
}

#upgradeBack {
    background-image: url('../assets/train.jpg');
    min-height: 540px;
    background-repeat: no-repeat;
    background-size: cover;
}

.upgrade-box {
    background: #ffffffde;
    height: 540px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.upgrade-content .text {
    font-size: 12px;
    line-height: initial;
}

.sleeping-include {
    text-align: center;
}

    .sleeping-include i {
        color: #5d83b0;
        font-size: 50px !important;
        margin-bottom: 18px;
    }

    .sleeping-include .flexi-label {
        margin-top: 10px
    }

.service div {
    color: grey !important;
}

.service a {
    text-decoration: none;
}



/****** Komuter ******/
.flex-display {
    display: flex;
    padding: 0px 0px
}

.t1 {
    width: 160px;
    background: #dddddd;
    font-size: 16px;
    text-align: center;
    color: #696969;
    padding: 30px 0px 30px 0;
    min-width: 190px;
    margin: 7px 0 7px 0;
}

.t2 select,
.t4 select {
    background-color: #f2f2f2;
    height: 85px;
    border-radius: 0px;
    color: #aaaaaa;
    border: none;
    border-right: 1px solid #e2e2e2;
}

.t5 small {
    color: #aaaaaa
}

.t2, .t4 {
    background-color: #f2f2f2;
    min-width: 265px;
    margin-bottom: 7px;
    margin-top: 7px;
    /*border-bottom: 1px solid #e2e2e2;*/
}

.t3 {
    background: #eeeeee;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    text-align: center;
    font-size: 16px;
    padding-top: 25px;
    min-width: 83px;
    margin: 7px 0 7px 0;
}

.t5.active,
.t6.active {
    background-color: white;
    box-shadow: 0px 4px 4px 0px grey;
    z-index: 9;
    color: #212529;
}

.t5 {
    text-align: center;
    border-right: 1px solid #e2e2e2;
    border-left: 1px solid #e2e2e2;
    padding-top: 25px;
    padding-bottom: 25px;
    line-height: 15px;
    min-width: 190px;
    margin: 7px;
    font-size: 16px;
    background-color: #f5f5f5;
}

.t6 {
    background-color: #F2F2F1;
    text-align: center;
    padding-top: 21px;
    border-right: 1px solid #e2e2e2;
    width: 14%;
    line-height: 15px;
    color: #aaaaaa
}

.t7 {
    background-color: #F2F2F1;
    border-right: 1px solid #e2e2e2;
    text-align: center;
    padding-top: 21px;
    width: 14%;
    line-height: 15px;
    color: #aaaaaa
}

.t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8 {
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
}

.t8 {
    background-color: #eeeeee;
    width: 2%;
}

.t9 {
    /* width: 11.25%;*/
    background-color: white;
    text-align: center;
    border: 1px solid #e2e2e2;
    min-width: 190px;
    margin: 7px;
    font-size: 16px;
    padding: 30px 10px 30px 10px;
}

.h80 {
    height: 80px
}

.top30 {
    padding-top: 30px;
}

.t10 {
    background: #eeeeee;
    border: 1px solid #e2e2e2;
    text-align: center;
    padding: 10px;
    font-size: 0.9rem;
    min-width: 190px;
    margin: 7px;
    font-size: 16px;
}

.fddd {
    color: #696969
}

span.minus {
    background: #ddd;
    padding: 5px 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #d0d0d0;
    position: relative;
    left: 6px;
    cursor: pointer
}

span.plus {
    background: #ddd;
    padding: 5px 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #d0d0d0;
    position: relative;
    right: 4px;
    cursor: pointer
}

span.value {
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    padding: 5px 10px;
    background: white;
}

.mt5 {
    margin-top: 5px
}

.t10.disabled,
.t10.disabled div {
    color: #cacaca
}

.t11 {
    padding-top: 30px;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
    min-width: 190px
}

.t12 {
    width: 160px;
    height: 79px;
    background: #dddddd;
    font-size: 16px;
    text-align: center;
    color: #696969;
    min-width: 190px;
    margin: 7px 7px 7px 0px;
    padding: 30px 0px 30px 0px;
}

.t13 {
    padding-top: 9px;
    padding-left: 1%;
    padding-right: 1%;
    text-align: center;
    min-width: 190px
}

.confirm-btn {
    background: #f8d013;
    width: 160px;
    height: 45px;
    font-size: 16px;
}

.highlightBorder {
    border: 5px solid #184099;
    width: auto;
    border-radius: 15px;
}


/***** Login ****/
.login-header {
    background: #28549e;
    color: white;
    border-radius: 0px;
    border-bottom: none;
}

.login-p-error {
    background: #f8d013;
    font-size: 14px;
    color: #666666;
    display: flex;
    padding: 15px;
}

    .login-p-error i {
        font-size: 22px !important;
        color: #444444;
        position: relative;
        top: 3px;
        margin-right: 10px;
    }

.login-error {
    background: #f8d013;
    font-size: 12px;
    color: #666666;
    display: flex;
    padding: 8px 15px;
}

    .login-error i {
        font-size: 22px !important;
        position: relative;
        top: 3px;
        margin-right: 10px;
    }

.fa-times-circle-o {
    color: white;
}

.ts-none {
    text-shadow: none;
}

.view_password {
    position: absolute;
    float: right;
    right: 8px;
    top: 15px;
    cursor: pointer;
    z-index: 99999;
}

.text-secondary {
    color: #6c757d !important;
}

.yellow-btn, .yellow-btn:hover {
    background: #43d82c;
    padding: 14px 25px;
    color: white;
    font-size: 14px;
    border-radius: 10px;
    font-weight: 600;
}

.reative-top10 {
    position: relative;
    top: 10px;
}

.bt {
    border-top: 1px solid #c2c2c2;
}

.btn-social {
    position: relative;
    padding-left: 45px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-weight: bold;
    height: 50px;
    padding-top: 14px;
    font-size: 14px;
    border-radius: 10px;
}

.btn-facebook {
    color: #fff !important;
    background-color: #3b5998;
    border-color: rgba(0,0,0,0.2);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-social > :first-child {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    padding-top: 7px;
    line-height: 34px;
    font-size: 16px;
    text-align: center;
    border-right: 1px solid rgba(0,0,0,0.2);
}

.btn-facebook > :first-child {
    background: #263c68;
}

.btn-google {
    color: #fff !important;
    background-color: #dd4b39;
    border-color: rgba(0,0,0,0.2);
}

.login-box {
    width: 28%
}

    .login-box .modal-content {
        border-radius: 0px;
    }

    .login-box .modal-body {
        padding: 2rem
    }

input.login-textbox {
    height: 50px;
    border-color: #e0e3e5;
}

.be0e3e5 {
    border-color: #e0e3e5
}

.f12 {
    font-size: 12px
}

.modal {
    z-index: 999999999
}

.modal-backdrop.show {
    z-index: 99999999
}


/***** confirm page *****/
.blue-header {
    background: #28549e;
    color: white;
    padding: 4px 18px;
    font-weight: bold;
}

.red-header {
    background: #ff0000;
    color: white;
    padding: 4px 18px;
    font-weight: bold;
}

.station_detail {
    font-weight: bold;
}

    .station_detail span {
        padding: 0px 18px;
        font-size: 22px;
        font-weight: bold;
        position: relative;
        top: 2px;
    }

.confirm-table {
    margin-top: 10px;
    margin-bottom: 0px
}

    .confirm-table tr td {
        padding: 0px;
        border-top: 0px solid;
    }

.f14 {
    font-size: 14px;
}

.f12 {
    font-size: 12px
}

.btop {
    border-top: 1px solid #dee2e6 !important;
    margin: 6px 0px;
}

.blue-active {
    border-left: 5px solid #29549e;
    background-color: #efefef
}

.yellow-active {
    border-left: 5px solid #f8d013;
    background-color: #efefef
}

.ticket-detail {
    display: flex;
    justify-content: space-between;
}

.pointer {
    cursor: pointer;
}

.detail {
    display: none;
}

.no-border {
    border: none;
}

.mt10 {
    margin-top: 10px
}

.pb10 {
    padding-bottom: 10px
}

.top-no-border {
    border-top: 0px !important
}

tr.no-border td {
    border: none;
}

table.no-border {
    margin-bottom: 0px
}

    table.no-border tr td {
        border: none;
    }

table.table-padd5 tr td {
    padding: 3px
}

.td-230 {
    width: 230px
}

.padd-15 {
    padding: 5px 15px
}

.padd-0 {
    padding: 0px
}

.backefefef {
    background-color: #efefef
}

.apply-btn, .apply-btn:hover {
    background-color: #f8d013;
    color: black;
    text-transform: uppercase;
    font-size: 14px
}

.points {
    font-size: 21px;
    font-weight: 700;
    color: #777777;
}

p.f12 {
    color: #777
}

td.w150 {
    width: 150px
}

td.w200 {
    width: 200px
}

td.w300 {
    width: 300px
}

div.amount {
    font-size: 22px;
    font-weight: bold;
    color: #444444;
}

.fa-minus {
    font-size: 20px !important;
    top: 22px;
    background: white;
    border-radius: 50px;
    width: 27px;
    color: #999;
    padding: 5px 4px 3px 4px;
    position: sticky;
    z-index: 99
}

.fa-random {
    font-size: 20px !important;
    top: 22px;
    background: white;
    border-radius: 50px;
    width: 27px;
    color: #999;
    padding: 5px 4px 3px 4px;
    position: sticky;
    z-index: 99
}

.payment-title {
    font-size: 10px;
    height: 15px;
}

.tr-padd0 td {
    padding: 0px
}

.padd-10-0 {
    padding: 10px 0px;
}

.back-f1e {
    background-color: #f1eeec;
    height: 64px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    padding-top: 5px;
}

.backe5 {
    background-color: #e5e5e5
}

tr.bb {
    border-bottom: 3px solid white
}

tr.padd5 td {
    padding: 5px !important;
}

.f16 {
    font-size: 16px
}

.f18.bold.total td {
    padding-top: 15px !important;
    padding-bottom: 25px !important
}

.pt-8 {
    padding-top: 8px;
}

.pt-10 {
    padding-top: 10px;
}

.w70p {
    width: 70%
}

#paymentModal .modal-dialog,
#paymentCreditModal .modal-dialog {
    max-width: 80%
}

.backe5e5e5 {
    background-color: #e5e5e5;
    padding: 0px 8px;
}

.f20 {
    font-size: 20px
}

.f22 {
    font-size: 22px
}

.backf1eeec {
    background-color: #f1eeec;
    margin-left: 15px;
    margin-top: 5px;
}

.qrcode {
    background: white;
    width: min-content;
    padding: 5px;
    text-align: center;
}

.cancel-btn {
    border: 1px solid #f6282b;
    color: #f6282b;
    font-size: 14px;
    border-radius: 50px;
    padding: 5px 25px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.instruct {
    color: #444444;
    font-size: 14px
}

.padd-left-35 {
    padding-left: 35px;
}

.card-padd-10 {
    padding: 10px
}

.payment-modal-header {
    /*height: 50px;*/
    border-radius: 0px;
}

.spinner-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Optional: full-page centering */
}

.spinner-border.custom-spinner {
    width: 15rem;
    height: 15rem;
    border-width: 20px; /* Increase border thickness */
    color: #0097a8;
}

.loading-image {
    top: 7rem;
    height: 3rem;
    width: 9rem;
    position: absolute;
    animation: none; /* Prevent text animation */
}

.loading-text {
    top: 10rem;
    position: absolute;
    font-size: 1.2rem; /* Adjust text size as needed */
    color: black; /* Ensure good contrast */
    animation: none; /* Prevent text animation */
}




.modal-content-phone-size {
    width: 70%
}

.payment-modal-btn, .payment-modal-btn:hover, .payment-modal-btn:focus {
    background: #3d9cdb;
    color: white;
    padding: 3px 30px;
    width: 120px;
    margin-top: 20px;
}

.btn-history,
.btn-history:hover {
    float: right;
    background: #3d9cdb;
    color: white;
    font-size: 12px;
    padding: 4px 22px;
}

.bold {
    font-weight: bold;
}

.print-ticket {
    background: #f8d013;
    padding: 5px 24px;
    color: #444444;
    text-transform: uppercase;
    font-size: 13px;
    float: right;
}

.h120 {
    height: 120px
}

/****** CMs ******/
.cms-item {
    width: 100%;
    text-align: left;
    font-size: 12px;
    border-bottom: 1px solid #c4c4c4;
    color: #777777;
}

    .cms-item.active {
        background-color: white
    }

.cms-box-faq {
    margin-top: 20px;
    padding: 15px;
}

#accordionExample {
    margin-bottom: 10%;
}

.cms-box {
    margin-top: 20px;
    padding: 15px;
    margin-bottom: 50px;
}

.faq {
    padding: 10px 15px;
    border-bottom: 2px solid #f6f6f6
}

.faq-shuttle {
    padding: 12px 15px;
    border-bottom: 1px solid lightgrey;
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.faq-text p {
    color: #777;
    padding: 10px;
    font-size: 12px
}

.shuttle-policy {
    color: #737373;
    background: #dddddd;
    padding: 10px 8px 1px 8px;
    border-radius: 8px;
}

.red-close {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 20px !important;
    background: #ff0018;
}

.border-bt-gray {
    background: #e4e4e4;
    border-bottom: 2px solid #dddddd !important;
}

.cancel-policy {
    font-size: 13px;
    color: grey;
    line-height: 20px;
}

/****** Profile ******/
.profile-item {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #c4c4c4;
    color: #777777;
}

    .profile-item.active {
        background-color: white
    }

.sub-item {
    padding-left: 20%
}

.profile-item.sub-active {
    background-color: #eee
}

.back-f6f6f6 {
    background-color: #f6f6f6;
}

.br {
    border-right: 1px solid #d1d1d1;
    padding-right: 0px;
    padding-top: 20px
}

.m70vh {
    min-height: 70vh;
}

.m50vh {
    min-height: 50vh;
}

.m35vh {
    min-height: 35vh;
}

.f18 {
    font-size: 18px;
}

.pl0 {
    padding-left: 0px;
    padding-top: 65px;
}

.pdd-left0 {
    padding-left: 0px !important;
}

.my-ticket {
    background: #eaeaea;
    padding: 10px;
}

.station_detail_profile {
    font-size: 22px;
    color: #444
}

    .station_detail_profile span {
        padding: 0px 20px;
        font-size: 24px;
    }

.pl-35 {
    padding-left: 35px
}

.pr-35 {
    padding-right: 35px
}

.back777 {
    color: #777777
}

.edit-receipt i {
    font-size: 18px !important
}

.edit-receipt {
    color: #999;
    font-size: 14px;
}

.mr15 {
    margin-right: 15px
}

.pt10 {
    padding-top: 10px
}

.station_detail_view {
    margin-left: 25px;
    font-weight: bold;
    color: #444
}

    .station_detail_view span {
        padding: 0px 18px;
        font-size: 22px;
        font-weight: bold;
        position: relative;
        top: 2px;
    }

.ticket-detail-view {
    font-size: 14px;
    color: #444444;
    font-weight: 100;
}

.blue-bar {
    padding: 12px;
    background-color: white;
    border-left: 4px solid #28549e;
}

    .blue-bar input,
    .yellow-bar input {
        position: relative;
        top: 6px;
    }

.yellow-bar {
    padding: 12px;
    background-color: white;
    border-left: 4px solid #f8d013;
}

/******* Ticket search *******/
tr.disabled {
    background: #f5f5f5;
    cursor: not-allowed
}

    tr.disabled td .select-btn {
        background: lightgrey;
        opacity: 1
    }

.ts-header {
    background: #28549e;
    min-height: 60px;
    color: white;
    width: 100%;
    display: table;
}

.erl-header {
    background: #fc47a9;
    min-height: 60px;
    color: white;
    width: 100%;
    display: table;
}

.return-header {
    background: #f8d013;
    min-height: 60px;
    color: #444444;
    width: 100%;
    display: table;
}

.padd1015 {
    padding: 10px 15px;
    display: table-cell;
    vertical-align: middle;
}

.w100 {
    width: 100px;
}

.station-d {
    font-size: 22px;
}

    .station-d i {
        font-size: 26px !important;
        font-weight: bold;
        padding: 0px 15px;
    }

.thead-ececec {
    background: #ececec;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

th.dayActive {
    background: white;
    box-shadow: 0px 5px 5px 0px #c3c3c3;
}

    th.dayActive div.f88 {
        color: #444444 !important;
    }

    th.dayActive small {
        color: #666 !important
    }

.select-btn {
    background: #f8d013;
    padding: 5px 15px;
    width: 100px;
    color: #444;
    font-size: 12px;
}

.train1 {
    background: #999999;
    padding: 8px 16px;
    color: white;
    font-weight: bold;
}

.ets {
    padding: 8px 16px;
    color: #666;
    background-color: #ccc
}

.back-eee {
    background-color: #eee
}

.sbtrain {
    padding: 8px 16px;
    color: #666
}

    .sbtrain i {
        font-size: 20px !important;
        font-weight: bold;
        padding: 0px 15px;
    }

.f88 {
    color: #888
}

.c444 {
    color: #444444
}

.day-search th small {
    color: #b1b1b1;
}

.day-search th {
    text-align: center;
    font-weight: normal;
    border-bottom: unset !important;
    line-height: normal;
}

.thead-train {
    /*background-color: #f6f6f6*/
}

    .thead-train th {
        color: #999999;
        font-weight: normal;
        font-size: 14px;
    }

        .thead-train th:first-child {
            width: 40%;
        }

.th-hr {
    font-size: 12px;
    letter-spacing: 4px;
}

.depart-table tbody {
    color: #444444
}

    .depart-table tbody td {
        vertical-align: middle !important;
    }

.f10 {
    font-size: 10px
}

.bottom-0 {
    margin-bottom: 0px
}

.c7 {
    color: #777777
}

.range-slider {
    margin: auto;
    text-align: center;
    position: relative;
    height: 25px;
}

.slider.slider-horizontal {
    width: 90%;
}

    .slider.slider-horizontal .slider-track {
        height: 2px !important;
    }

.mofify-btn {
    background-color: #f8d013;
    width: 100%;
    color: #444;
    font-size: 12px;
}

.c8888 {
    color: #888888
}

.c3737 {
    color: #373737;
    text-align: center;
    font-size: 14px
}

    .c3737.bb, .bb {
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
    }

.dr {
    font-size: 11px;
    margin-top: 10px;
    text-align: center;
    color: #888888;
}

.date {
    font-size: 12px;
    text-align: center;
    color: #373737;
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.paddlr20 {
    padding: 0px 20px
}

.w100 {
    width: 100px
}

div.blue-header[aria-expanded="true"] > .fa-plus-circle {
    display: none;
}

div.blue-header[aria-expanded="false"] > .fa-minus-circle {
    display: none;
}

div.faq[aria-expanded="false"] > .fa-chevron-up {
    display: none;
}

div.faq[aria-expanded="true"] > .fa-chevron-down {
    display: none;
}

.pm {
    float: right;
    position: relative;
    top: 1px;
    font-size: 20px !important;
}

.h65 {
    height: 60px;
    border-top: 1px solid #dee2e6
}

.depart-arrival {
    /*position: absolute;*/
    color: white;
    /*top: -16px;*/
    font-size: 10px;
    margin-bottom: 0px;
}

.mr0 {
    margin-right: 0px
}

.cancel-search-btn {
    background: #cccccc;
    padding: 6px 20px;
    font-size: 14px;
}

.tsbtn {
    background: #f8d013;
    font-size: 14px;
    padding: 6px 37px
}

.cf8 {
    color: #f8d013 !important;
}

.ticket-search-popup {
    position: absolute;
    left: 0px;
    width: 100%;
    display: none;
    background: #000000ab;
}

.blue-left-border {
    border-left: 6px solid #29549e
}

.yellow-left-border {
    border-left: 6px solid #f8d013
}
/*** Seat select popup ***/
#cancelTicketModal .modal-dialog,
#cancelTicketConfirmModal .modal-dialog,
#shareTicketModal .modal-dialog {
    max-width: 30%;
}

#seatSelect .modal-dialog,
#addOnSelect .modal-dialog {
    max-width: 90%;
    height: 90vh;
}

.train1-pop {
    float: left;
    background-color: #c4c4c4;
    color: #28549e;
    font-size: 14px;
    padding: 6px;
}

.sbtrain-pop {
    color: white;
}

    .sbtrain-pop i {
        font-size: 20px !important;
        font-weight: bold;
        padding: 0px 15px
    }

.fullwidth {
    width: -webkit-fill-available
}

.pop-s {
    float: left;
    margin-left: 10px
}

.cccc {
    color: #cccccc
}

.addone-text {
    float: right;
    padding-top: 18px;
    font-size: 18px;
}

.img-30 img {
    width: 30px;
    cursor: pointer;
}

.img-30 tbody tr td div {
    font-size: 10px
}

.img-30 tbody tr td {
    padding: 4px
}

.backefe {
    background-color: #efefef
}

.aisle {
    color: #bebebe;
    font-size: 18px;
    padding: 10px
}

.service-btn {
    background-color: Z
}

.coache-btn {
    padding: 8px 10px;
    margin-bottom: 5px;
    background: white;
    color: #444444;
    border: 1px solid #cccccc;
    font-size: 14px;
    border-radius: 0px;
    width: 100%;
}

    .coache-btn.active {
        background: #7a7979;
        color: white;
    }

a.coache-btn.first {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

a.coache-btn.last {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.padd-left0 {
    padding-left: 0px
}

.size-30 {
    background: white;
    padding: 35px 10px;
    border-radius: 5px;
    margin-top: 36px;
}

    .size-30 div img {
        width: 30px;
        float: left;
    }

.seat-info {
    margin-bottom: 5px;
    min-height: 38px;
    clear: both;
}

    .seat-info div {
        margin-left: 35px;
        font-size: 14px;
        position: relative;
        color: #777777;
    }

.toplh0 {
    top: 0px !important;
    line-height: normal;
}

.hline {
    width: 50px;
    height: 7px;
    background: #e9e9e9;
    border-radius: 50px;
    margin-bottom: 5px;
}

.text-wcenter {
    text-align: -webkit-center
}

.add-ons-btn {
    background-color: #f8d013;
    font-size: 12px;
    color: #444444;
    padding: 7px 22px;
    border-radius: 7px
}

.table-padd6 tr td {
    padding: 6px;
}

.table-padd6 tr th {
    padding: 2px;
    vertical-align: middle;
    height: 40px;
}

.w120 {
    width: 120px
}

.table-padd6 tr th {
    font-size: 12px;
    background-color: #eeeeee;
    color: #999
}

.backe3e3e {
    background-color: #e3e3e3;
    padding-bottom: 10px;
    overflow-y: auto;
}

.cc-btn {
    text-align: right;
    margin-right: 20px
}

td.be3e3 {
    background: #e3e3e3;
    width: 20px;
}

span.ticket-count {
    background: #f8d013;
    color: #444;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 50px;
    position: absolute;
    right: 5px;
}

.tco {
    color: #aaaaaa;
    font-size: 22px !important;
    position: relative;
    top: 3px;
}

.left-active {
    border-left: 15px solid #f8d013 !important
}

#addOnTable tbody tr td:first-child {
    border-left: 8px solid #e3e3e3
}

#addOnTable tbody tr td {
    vertical-align: middle;
    height: 47px;
}

.addon-tr {
    color: #777777;
    font-size: 16px;
}

.addon-tr-details {
    display: none;
}


/***** Add on popup*****/
.pax {
    background: #999999;
    color: white;
    font-weight: bold;
    padding: 7px 15px;
}

.a2 {
    color: #666;
    padding: 7px 15px;
    background: #ccc;
}

.div-pax {
    background-color: #e4e4e4;
    display: inline-flex;
    border-bottom: 2px solid white;
}

.bb0 {
    border-bottom: none;
}

.add-on-label {
    font-weight: bold;
    font-size: 16px;
    color: #444444;
}

.meal-btn, .meal-btn:hover {
    background: #cccccc;
    color: #444;
    font-size: 14px;
}

.mf {
    color: #666666;
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 10px;
}

.add-on-box {
    height: 100px;
    background: #cccccc;
}

.add-on-title-combo {
    color: #444;
    font-size: 13px;
    padding-top: 8px;
    text-align: center;
    height: 50px;
    line-height: normal;
}

.add-on-title {
    color: #444;
    font-size: 13px;
    padding-top: 8px;
    text-align: center;
    height: 40px;
    line-height: normal;
}

.add-on-popup-title {
    dominant-baseline: 30px;
}

    .add-on-popup-title div {
        position: relative;
        top: 5px;
        font-size: 26px;
    }

.with200px {
    width: 220px;
    padding: 20px;
}

p.popup-text {
    font-size: 14px;
    color: #888;
    margin-bottom: 0px
}

.add-on-popup-title i.circle {
    font-size: 30px !important;
    float: left;
    background: white;
    color: #aaa;
    padding: 5px;
}

.add-on-title i,
.add-on-title-combo i {
    font-size: 22px !important;
    color: white;
    float: right;
    border-radius: 57px;
    background: #aaa;
    padding: 0px 2px;
}

.add-on-boxs {
    width: 20%;
    float: left;
    padding: 1px 6px;
}

.add-on-icon {
    height: 100px;
    text-align: center;
    padding-top: 15px;
}

    .add-on-icon i {
        font-size: 90px !important;
        color: white;
    }

.add-on-price {
    color: #777;
    font-size: 12px;
    text-align: center;
    padding-top: 8px
}

#meal-section {
    background-color: #e3e3e3;
    padding: 15px;
    height: 80vh;
    overflow-y: auto;
    margin-bottom: 20px
}

.selected-addon {
    background-color: white;
}

.img-box {
    width: 60px;
    height: 40px;
    background-color: #cccccc
}

.vcenter tr td {
    vertical-align: middle;
}

.vcenter td {
    vertical-align: middle;
}

.w-60 {
    width: 60px;
}

.asbtn {
    background: #f8d013;
    font-size: 14px;
    padding: 6px 20px;
}

.h50 {
    height: 50px
}

span.size.l50 {
    margin-left: 50px !important;
}

span.size {
    font-size: 40px;
    color: #999999;
    font-weight: bold;
    position: absolute;
    bottom: 100px;
    margin-left: 53px;
}

.baggage {
    display: none;
}

.selected-addon-icon {
    text-align: center;
}

    .selected-addon-icon i {
        color: #cccccc;
        font-size: 40px;
    }

#selectedAddOn {
    color: #777777
}

    #selectedAddOn tr td {
        border-top: none;
    }

    #selectedAddOn tr:first-child {
        border-bottom: 1px solid #dee2e6
    }

    #selectedAddOn tr:last-child {
        border-top: 1px solid #dee2e6
    }

.seatbar {
    height: 77vh;
    overflow-y: auto;
    padding-top: 10px;
}

.fa-check-circle {
    color: #2ccb13;
    font-size: 30px !important;
}

.sstfnt {
    font-size: 10px;
    margin-left: 13px;
    display: -webkit-inline-box;
    line-height: initial;
    text-align: center;
    position: relative;
    top: -10px;
}

.fa-angle-down {
    display: flow-root !important;
    font-size: 24px !important;
    color: #dddddd;
    position: absolute;
    margin-top: -18px;
    right: 60px;
}

#coacheBseats {
    display: none;
}

.grey-box {
    height: 100px;
    width: 100%;
    background: lightgrey
}

.top-40 {
    position: relative;
    top: -40px;
}

.confirmation-section {
    text-align: right;
    background: #aaaaaa;
    padding: 30px 0px;
    display: none;
    margin-bottom: 65px;
    margin-left: -15px;
    margin-right: -15px;
    padding-right: 20px;
}

.proceed-btn {
    background: #f8d013;
    color: #444;
    font-size: 14px;
}

.reset-btn {
    background: #ddd;
    color: #444;
    font-size: 14px;
}

.c999 {
    color: #999999
}

.yellow-dot {
    background: #f8d013;
    border-radius: 50%;
    width: 7px;
    height: 7px;
}

.yellow-border {
    margin-left: 2px;
    height: 50px;
    border-left: 2px dotted #f8d013;
}

.yellow-dot-border {
    border-radius: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid #f8d013;
}

.pickup {
    position: relative;
    top: -23px;
    line-height: normal;
    left: 10px;
}

.dropoff {
    position: relative;
    line-height: normal;
    top: 4px;
    left: 10px;
}

#view-ticket {
    z-index: 999999999;
    padding-top: 0px;
}

.pad15 {
    padding: 15px
}

.padd520P {
    padding: 5px 20px
}

.c4e4 {
    color: #4e4e4e
}

.shar, .shal {
    font-size: 40px !important
}

.sbtn, .sbtn:hover {
    background: #3d9cdb;
    color: white;
    position: relative;
    top: 5px;
    padding: 6px 25px;
}

/****** Passenger details *****/
.c626262 {
    color: #626262
}

.go-btn, .go-btn:hover {
    background: #f8d013;
    color: #444;
    width: 100%;
    font-size: 14px
}

.padd-2550 {
    padding: 25px 50px
}

.confirm-payment {
    background: #eeeeee;
    color: #999;
    font-size: 14px;
}

.gender {
    display: inline-flex;
    justify-content: space-between;
    color: #444;
    position: relative;
    top: 7px;
}

.tick-div {
    text-align: left;
    background: #eee;
    border-radius: 4px;
    padding: 2px;
}

.glob-icon {
    background: grey;
    color: white;
    padding: 2px 5px 9px 5px;
    font-size: 30px !important;
    border-radius: 4px;
}

/***** Confirmation Page *****/
.confirmation-train1 {
    float: left;
    font-size: 10px;
    padding: 3px 6px;
    margin-right: 7px;
    position: relative;
    top: 3px;
    background: #999999;
    color: white;
    font-weight: bold;
}

.confirm_btop {
    border-top: 1px solid #dee2e6 !important;
    margin: 3px 0px;
    padding: 0px !important
}

.fw100 {
    font-weight: 400;
}

.f17 {
    font-size: 17px;
}

.table-padd2 tr td {
    padding: 2px
}

.c606 {
    color: #606060
}

.passenger-deail-div {
    background: #efefef;
    padding: 10px;
    margin-bottom: 0px;
}

.padding540 {
    padding: 5px 25px 0px 30px;
}

.backf6f6f6 {
    background: #f6f6f6
}

.train-p {
    font-size: 9px;
    padding: 3px 6px;
}

span.traini {
    padding: 0px 10px;
    font-weight: bold;
}

td.total {
    text-align: right;
    padding-right: 50px !important;
}

.payment-detail-text {
    font-size: 14px;
    color: #444;
}

    .payment-detail-text input {
        width: 40%;
        float: left;
        margin-right: 10px;
        height: 36px;
    }

tr.pdd0 td {
    padding: 0px
}

.pd-div p {
    padding-left: 140px
}

.pd-div label {
    width: 130px;
    float: left;
    position: relative;
    top: 7px;
}

.td-ic {
    text-align: center;
    width: 30px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    vertical-align: middle !important;
}

.white-div {
    height: 76px;
    position: absolute;
    top: 0px;
    background: white;
    width: 4px;
    margin-left: 13px;
    z-index: 1;
}

.mt2 {
    margin-top: 2px
}

.mobile-exchange {
    color: black;
    background: white;
    border-radius: 100px;
    padding: 5px 6px 6px 5px;
    position: relative !important;
    transform: rotate(90deg);
}

.ktm-ewallet, .ktm-shoppy {
    text-align: right;
}

#discountTable {
    background: #eee
}

.mt-50 {
    margin-top: 50px
}

.min-h-500 {
    min-height: 500px
}

.payment-label {
    text-align: right;
}

.height-120 {
    height: 120px;
}

.min-h-120 {
    min-height: 120px;
}

.pt-35 {
    padding-top: 35px !important;
}

.btn-f8d {
    background: #f8d013
}

.tbtn, .tbtn:hover {
    background: #3d9cdb;
    color: white;
    margin-right: 20px;
    padding: 6px 20px;
    font-size: 14px;
    margin-bottom: 5px;
}

.expand {
    color: #777777
}

.expand2 {
    color: #777777
}

.pl0t20 {
    padding-left: 0px;
    padding-top: 20px
}


/******** Ticket history *******/
.paddlr-remove tr td {
    padding-left: 0px;
    padding-right: 0px;
    border-top: 0px
}

td.chk {
    width: 50px;
    text-align: right;
    padding-right: 10px !important;
}

.station_detail_view_th {
    font-weight: bold;
    color: #444;
}

    .station_detail_view_th span {
        padding: 0px 18px;
        font-size: 22px;
        font-weight: bold;
        position: relative;
        top: 2px;
    }

.blue {
    background: #28549e;
    width: 5px !important
}

.empty.padd5 td.blue {
    background: #28549e;
    width: 5px !important;
    padding: 2px !important;
}

.empty.padd5 td.yellow {
    background: #f8d013;
    width: 5px !important;
    padding: 2px !important;
}

.yellow {
    background: #f8d013
}

.lightblue {
    background: #a3ccde;
    width: 5px !important
}

.empty.padd5 td.lightblue {
    background: #a3ccde;
    width: 5px !important;
    padding: 2px !important;
}

.empty.padd5 td.lightyellow {
    background: #f0e7b0;
    width: 5px !important;
    padding: 2px !important;
}

.lightyellow {
    background: #f0e7b0
}

.c777 {
    color: #777777
}

.caaa {
    color: #aaaaaa;
}

.add-on-plus {
    font-size: 20px !important;
    position: relative;
    cursor: pointer;
    top: 2px;
    color: #aaa;
}

.addon-details {
    float: left;
    width: 100px;
    text-align: -webkit-center;
}

.addon-title {
    font-size: 14px;
    position: relative;
    top: 10px;
    float: left;
}

.addon-details i {
    color: #cccccc;
    font-size: 40px;
}

.seat_info {
    width: 100%;
    font-size: 14px;
    color: #777777
}

.lh-normal {
    line-height: normal
}

.seat_no {
    width: 60px;
    text-align: center;
    font-size: 14px
}

.fa-ticket {
    transform: rotate(45deg);
    color: #3d9cdb;
    font-size: 20px !important;
}

.border-f6 {
    border-bottom: 2px solid #f6f6f6 !important
}

.clear-all {
    background: #cccccc;
    font-size: 12px;
    color: #444;
    padding: 3px 10px;
}

.ticket-select {
    display: none;
}

.station_detail_view_popup span {
    font-weight: bold;
}

.station_detail_view_popup {
    color: #444;
    padding: 10px;
    background: #efefef;
}

    .station_detail_view_popup i {
        padding: 0px 18px;
        font-size: 22px !important;
        font-weight: bold;
        position: relative;
        top: 2px;
    }

.btn-goback, .btn-goback:hover {
    background: #ccc;
    font-size: 14px;
    color: #444;
}

.btn-process {
    background: #f8d013;
    font-size: 14px;
    color: #444;
}

.padd640 {
    padding: 6px 40px;
}

.c838 {
    columns: #838383
}

/*********** KTM eWallet profile ***********/
.pbtn {
    width: 100%;
    background: #fbfbfb;
}

    .pbtn .btn {
        width: inherit;
        border-color: #e9e9e9 !important;
        color: #444444
    }

.reload-evoucher, .reload-evoucher:hover {
    background: #eeeeee;
    color: #444;
    padding: 6px 30px;
    font-size: 10px;
}

.reload, .reload:hover {
    color: #444;
    /*font-size: 10px;*/
    padding: 6px 10px;
    background: #f8d013;
    margin: 5px;
}

    .reload.verify {
        float: right;
        margin-top: 40%;
    }

.border-rf6 {
    border-right: 3px solid #f6f6f6
}

.thtd-noborder thead tr th {
    vertical-align: bottom;
    height: 57px;
    color: #777777
}

.thtd-noborder thead tr th,
.thtd-noborder tbody tr td {
    border-top: 0px;
    border-bottom: 0px;
}

.smallth {
    font-size: 10px;
    color: #999999 !important
}

.station_detail_view_ewallet {
    color: #444;
    font-size: 18px;
}

    .station_detail_view_ewallet span {
        padding: 0px 10px;
        font-size: 20px;
        font-weight: bold;
        position: relative;
        top: 2px;
    }

.pl0r20 {
    padding-left: 0px;
    padding-right: 30px
}

tr.bbf6 td:not(.empty) {
    border-bottom: 2px solid #f6f6f6 !important
}

td.empty {
    width: 5px;
}

/***** Consession Registration *****/
.cr {
    height: 57px;
    font-size: 18px;
    color: #777777;
    font-weight: bold;
    padding-left: 15px;
    padding-top: 20px;
}

.register-body {
    background: white;
    padding-top: 15px;
}

.cd-add-btn {
    background: #f8d013;
    color: #444;
    font-size: 10px;
    margin-left: 5px;
    height: 36px;
    padding: 10px 16px;
}

.pnr-b input {
    width: 77%;
    float: left;
}

.cr-label {
    font-size: 12px;
    color: #999999;
    margin-bottom: 0px
}

.mt25 {
    margin-top: 25px;
}

.cr-submit {
    background: #f8d013;
    color: #444;
    font-size: 16px;
    padding: 10px 40px;
}

/**** Account ****/

.account-label {
    font-size: 12px;
    color: #939393
}

.account-value {
    font-size: 12px;
    columns: #444444;
    padding-left: 3%;
    padding-top: 10px;
}

.add-border tr td {
    border-right: 2px solid #f6f6f6;
    border-bottom: 2px solid #f6f6f6 !important;
    padding: 20px;
}

.add-icon {
    font-size: 20px !important;
    color: #777777;
    position: relative;
    top: 3px
}

.cr-bar {
    height: 57px;
    font-size: 18px;
    color: #777777;
    font-weight: bold;
    padding: 0px !important;
    padding-left: 15px !important;
    padding-top: 20px !important;
}

.mheight {
    height: 80vh;
    overflow-y: auto;
}

.page-link.active {
    background: #4463ac;
    color: white;
}

.page-link {
    color: #888
}

/******** Error page *********/
.mh60 {
    min-height: 60vh
}

.error_msg {
    display: table-cell;
    vertical-align: middle;
    height: 70vh;
    line-height: normal;
}

.dtable {
    display: table;
}

.oops {
    font-size: 10rem;
    color: #cccccc;
    font-weight: bold;
}

.p404 {
    font-size: 2.7rem;
    color: #ccc;
    font-weight: bold;
}

.login-btn, .login-btn:hover {
    background: #f8d013;
    color: #444;
    padding: 6px 20px;
    font-size: 13px;
    border-radius: 5px;
}

.login-box-div {
    margin-top: 25%;
    margin-bottom: 25%;
}

.register-btn {
    background: #3d9cdb;
    color: white;
    padding: 6px 60px;
}

.register-box-div {
    margin-top: 15%;
}

.retrieve-btn {
    background: #f8d013;
    color: #444;
    font-size: 14px;
    margin-top: 20px;
}


/******* Activate account header ****/
.activate-account-header {
    background: white;
    font-weight: bold;
    color: #777777
}

.cb-border {
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    padding: 1.25rem 3.25rem;
    background: #fafafa
}

.vmiddle {
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-evenly;
}

.register-text {
    line-height: normal;
    position: relative;
    top: 10px;
    color: #777;
    font-size: 12px
}

.password-strength-box {
    display: flex;
    margin-top: 10px;
}

.password-strength-bar {
    height: 15px;
    width: 67%;
    border: 1px solid #aaa;
    margin-left: 5%;
}

/******* Contacts ******/
.white-contact-div {
    background: white;
    border-right: 2px solid #f6f6f6;
    border-bottom: 2px solid #f6f6f6;
    padding: 15px;
}

.pt0 {
    padding-top: 0px !important
}

.contact-label {
    font-size: 14px;
    color: #777;
    position: relative;
    top: 6px;
}

.contact-body {
    padding: 15px;
    border: 1px solid #eaeaea;
}

.contact-add-head {
    background: white;
    padding: 5px 15px;
}

.econtact-add-head {
    padding: 15px;
    background: white
}

    .econtact-add-head .account-label {
        position: relative;
        top: 3px;
    }

.back-f9f9 {
    background: #f9f9f9
}

.family-expand, .emergency-expand {
    display: none;
}

.ec, .ff {
    height: fit-content
}

.family-add, .emergency-add {
    padding: 15px;
    padding-bottom: 18px;
    cursor: pointer;
    background: white;
}

    .family-add .account-value,
    .emergency-add .account-value {
        padding-left: 0px;
    }

.rwh {
    width: 30px;
    height: 15px;
}

@media(max-width: 575.98px) {
    .mleft {
        text-align: left !important;
    }

    .m1200 {
        width: 1200px
    }

        .m1200 .footer-links {
            display: flex;
        }

        .m1200 .footer-item {
            top: 150px
        }

    .top3 {
        top: 0px
    }

    .mt-5p {
        padding-top: 5%
    }

    .mt22 {
        margin-top: 0px
    }

    .flex {
        padding-left: 15px;
    }

        .flex input {
            width: 100%;
            margin-bottom: 10px;
        }

    div.pax-dropdown2 {
        width: 100%;
        margin-bottom: 10px;
    }

    .ticket-search-btn {
        width: 100%;
    }

    .depart-arrival {
        position: unset;
    }

    .ktm-service div.service {
        text-align: center;
        font-weight: bold;
        color: grey;
        width: 50%;
        float: left;
        border-right: 1px solid #dddddd;
    }

    .ktm-service {
        display: flow-root
    }

    .images {
        display: flow-root
    }

    .butterworth {
        width: 100% !important
    }

    .images div.places {
        width: 100%;
    }

    .images div img {
        height: inherit
    }

    .place-text, .place-text-first {
        left: 0px;
        padding-left: 20px
    }

    .ktmks {
        position: unset;
        width: 100%
    }

    #shoppyBack {
        height: auto
    }

        #shoppyBack .row {
            padding-bottom: 20px
        }

    .shoppe_title {
        margin-top: 20px
    }

    .ktm-ewallet, .ktm-shoppy {
        text-align: center;
    }

    .ticket-search-popup {
        position: fixed;
        top: 150px;
    }

    .pax-home input {
        width: 100% !important
    }

    div.pax-dropdown3 {
        width: 100%;
    }

    .table-scroll {
        overflow-x: auto;
    }

    .station_detail_view_th {
        width: 200px
    }

    .seat_info {
        display: block;
    }

    .lh-normal div, .lh-normal small {
        width: 115px;
    }

    td.chk input {
        width: 50px
    }

    .pl0r20 {
        padding-right: 0px
    }

    .add-on-boxs {
        width: 50%;
        margin-bottom: 20px
    }

    #seatSelect .modal-dialog,
    #addOnSelect .modal-dialog,
    #cancelTicketModal .modal-dialog,
    #cancelTicketConfirmModal .modal-dialog,
    #shareTicketModal .modal-dialog {
        max-width: 100%
    }

    .add-on-icon {
        display: initial;
        padding-left: 15px;
    }

    span.size.l50 {
        margin-left: -65px !important;
        position: relative;
        top: -10px;
    }

    span.size {
        position: relative;
        top: -10px;
        margin-left: -60px;
    }

    .seatbar {
        overflow-y: unset;
        height: auto
    }

    .go-btn {
        width: 93%
    }

    .tick-div, .go-btn {
        margin-left: 15px;
    }

    .white-div {
        background: unset;
        height: 0px;
        width: 0px
    }

    .td-ic {
        border-right: 3px solid white !important
    }

    .fa-minus, .fa-random {
        position: relative;
        top: 0px;
        left: 15px;
    }

    .flex-display {
        display: flex;
        padding: 0px 0px;
        min-width: 1200px;
    }

    #paymentModal .modal-dialog,
    #paymentCreditModal .modal-dialog {
        max-width: 100%;
    }

    .flexifare_big_img {
        width: 100%
    }
}

.banner {
    padding-left: 0px;
    padding-right: 0px;
}

@media(max-width: 1000px) {
    .banner {
        padding-right: 0px
    }

    .ml-auto.text-right {
        text-align: left !important;
    }

    .ml-70 {
        margin-left: 0px
    }

    ul.p20 li a, .navbar-nav .nav-link {
        padding: .5rem 1rem !important
    }

    .footer-links {
        display: grid
    }

    .footer-item {
        padding: 0px;
        top: 60px
    }

    .ticket-search-popup {
        position: fixed;
        top: 15vh;
    }

    .login-box {
        width: 96%;
    }
}

@media (max-width: 1100px) {
    .add-on-boxs {
        width: 50%;
        margin-bottom: 20px;
    }

    .footer-item a.first-child {
        margin-left: 15px
    }

    .payment-label {
        text-align: left;
    }

    .oops {
        font-size: 5rem
    }

    .p404 {
        font-size: 1.5rem
    }
}



@media only screen and (max-width : 790px) and (min-width : 570px) {
    .mt22 {
        margin-top: 0px
    }
}

@media (min-width: 1500px) {
    .mheight {
        height: 86vh;
    }

    .seatbar {
        height: 80vh;
    }
}


/******** POI ********/

.home-poi-container {
    margin-top: 62px;
    margin-bottom: -53px;
}

.home-poi {
    margin: 65px 60px 5px 60px;
}

.home-image-icon {
    width: 250px;
    height: 120px;
    object-fit: contain;
    background-size: 100% 100%;
    margin: 4px;
}

ml-auto {
    margin-left: auto;
}

mr-auto {
    margin-right: auto;
}

.home-image-icon img {
    width: 100%;
    height: auto;
    display: table;
    background-image: url('../assets/johar.jpg');
}

.main-page-icon {
    width: 100%;
    margin-top: 57px;
    display: flex;
    border-top: 2px solid #03549f;
    margin-right: 0px;
    overflow-x: scroll;
}

.poi-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poi-main-dfkl {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

.pr0 {
    padding-right: 0px;
}


.rating span, .rating-strip-star span {
    color: #ffcc00;
    font-weight: bold;
    font-size: 12px;
}

.rating {
    letter-spacing: -2px;
}

.place-text {
    color: white;
    font-size: 14px;
    position: relative;
    top: 5px;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.via {
    float: left;
    background: #ffcc00;
    border-radius: 50px;
    font-size: 12px;
    padding: 2px 3px;
    font-weight: bold;
    color: #0e244f;
    position: relative;
    top: 5px;
    margin-right: 3px;
}

.place-title {
    color: white;
    font-size: 19px;
    font-weight: bold;
}

.mtb10 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.place-text-first {
    font-size: 30px;
    color: white;
    font-weight: bold;
    position: relative;
    left: 22px;
    height: 60px;
}

.place-text-first {
    left: 0px;
    padding-left: 20px
}

.butterworth.w40 {
    width: 40% !important;
    border-left: 1px solid #03549F
}

.point-place-text {
    font-size: 30px;
    color: white;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    top: -48px;
    height: 50px;
    text-shadow: 0 1px 0 black;
    background: linear-gradient(#1e305b57,rgb(18 50 114));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.padod {
    display: flex;
    padding: 40px;
    justify-content: center;
    background: #243f79;
    /*border-top: 1px solid #03549f;
    border-bottom: 1px solid #03549f;*/
    color: white;
}

.destinaton-drop,
.destinaton-drop:hover,
.destinaton-drop:active,
.destinaton-drop:focus {
    margin-left: 10px;
    width: 220px;
    background: #e7e7e7;
    color: #373737;
    font-size: 18px
}

.dropdown-label {
    font-weight: bold;
    padding-left: 10px;
}

.sliderLeftIcon {
    display: inline;
    position: absolute;
    left: 5px;
    font-size: 8rem !important;
    z-index: 9999999;
    color: white;
    text-shadow: 3px 1px 6px black;
    padding-top: 10rem !important;
}

.sliderIcon {
    font-size: 8rem !important;
    position: absolute;
    right: 2px;
    color: white;
    text-shadow: 3px 1px 6px black;
    padding-top: 10rem;
    cursor: pointer;
}

.detailSliderLeftIcon.pt-90 {
    padding-top: 90px !important
}

.detailSliderLeftIcon.pt-65 {
    padding-top: 65px !important
}

.detailSliderLeftIcon.pt-20 {
    padding-top: 20px !important
}

.detailSliderLeftIcon.fa-angle-left,
.sliderLeftIcon.fa-angle-left {
    display: none;
    cursor: pointer;
}

.sliderIcon.fa-angle-left,
.detailSliderIcon.fa-angle-left {
    left: 25px !important;
    display: none;
}

.detail-cover {
    background-image: url('../assets/wat-maisuwankiri-tumpat-1.jpg');
    height: 330px;
    background-repeat: round;
    display: table;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.book-ticket {
    background: #f8d013;
    margin-top: 22px;
    position: relative;
    bottom: 15px;
}

.book-strip {
    display: table-cell;
    vertical-align: bottom;
}

.blue-shadow {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
    background: linear-gradient(#1e305b00,#03549f)
}

.details-title {
    color: white;
    font-size: 2rem;
    font-weight: bold;
}

.place-head {
    font-size: 16px;
    font-weight: bold;
}

.landmark {
    display: flex;
    margin-top: 0.2rem;
    /*margin-bottom: 0.5rem;*/
    font-size: 10px;
}

.rating-strip {
    display: contents
}

.rating-strip-star {
    letter-spacing: -2px;
    position: relative;
    top: -3px;
    display: flex;
    padding: 1px 5px;
}

.h150 {
    min-height: 220px
}

    .h150 img {
        min-height: 220px;
        object-fit: cover;
    }

.details-card {
    min-height: 220px;
    border-radius: 0px;
    border: none;
}

.detail-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .detail-text.active {
        border-bottom: 16px solid white;
        margin-bottom: -16px;
    }

.landmark i {
    color: #035099;
    font-size: 15px;
}

.cb {
    color: #035099;
}

.pr7 {
    padding-right: 7px;
}

.pr9 {
    padding-right: 9px;
}

.pl7 {
    padding-left: 7px;
}

.fix-height {
    display: flex;
    overflow-x: scroll;
    margin-right: -15px;
    margin-left: -15px;
}

    .fix-height img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

.border-none {
    border: none;
    border-radius: 0px;
}

    .border-none .row .col-md-5 {
        border-right: 1px solid white
    }

.time-strip {
    display: flex;
    justify-content: flex-end;
    padding-right: 0px;
    font-size: 14px;
}

.cg {
    color: #219f62;
}

.c-red {
    color: #c90a0a;
}

.title-strip {
    padding-left: 0px;
    display: flex;
}

    .title-strip .title {
        font-size: 1.5rem
    }

.badge-label {
    background: #bbbbbb;
    padding: 3px 10px;
    height: 22px;
    font-size: 12px;
    color: white;
    margin: 7px 14px;
    border-radius: 4px;
}

    .badge-label i {
        font-size: 16px;
        color: white
    }

.title-rating-star {
    letter-spacing: -2px;
    position: relative;
    top: -3px;
    padding: 1px 5px;
}

    .title-rating-star span {
        color: #ffcc00;
        font-weight: bold;
        font-size: 18px;
    }

.review-badge {
    background: #407eb7;
    color: white;
    font-size: 12px;
    padding: 1px 6px;
    height: 20px;
    border-radius: 4px;
    margin-left: 10px;
}

.reviewer {
    display: flex;
    justify-content: space-between;
}

.review-back {
    background: #eeeeee;
    border-radius: 8px;
    padding: 6px 15px;
}

.jcsb {
    display: flex;
    justify-content: space-between;
}

    .jcsb a {
        color: #888888;
        font-size: 14px
    }

.fix-height::-webkit-scrollbar,
.main-page-icon::-webkit-scrollbar {
    display: none;
}

.detailSliderIcon {
    font-size: 5rem !important;
    position: absolute;
    right: 50px;
    color: white;
    text-shadow: 3px 1px 6px black;
    padding-top: 90px;
    cursor: pointer;
    z-index: 9999
}

.detailSliderLeftIcon {
    display: inline;
    position: absolute;
    left: 50px;
    font-size: 5rem !important;
    z-index: 9999999;
    color: white;
    text-shadow: 3px 1px 6px black;
    padding-top: 55px !important;
}

.detailSliderIcon.pt-55 {
    padding-top: 55px !important
}

.detailSliderIcon.pt-65 {
    padding-top: 65px !important
}

.detailSliderIcon.pt-20 {
    padding-top: 20px !important
}

.closeIcon i {
    font-size: 30px;
    color: white;
    cursor: pointer;
    position: absolute;
    top: 23px;
    margin-left: 5px;
    z-index: 99;
}

.places-height {
    max-height: 500px;
    cursor: pointer;
    min-width: 20%
}

.places-height-40 {
    height: 30rem;
    cursor: pointer;
    min-width: 40%
}

.map-div {
    position: fixed !important;
    right: 0px;
    margin-top: 60px;
    top: 0px;
    bottom: 10vh;
    padding-right: 0px;
    padding-left: 0px;
}

.map {
    position: relative;
    height: 62%;
}

.noshow {
    display: none;
}

.right-panel {
    font-family: 'Roboto', sans-serif;
    line-height: 20px;
    padding-left: 5px;
    margin: 10px;
}

    .right-panel select,
    .right-panel input {
        font-size: 12px;
    }

    .right-panel select {
        width: 100%;
    }

.detail-panel {
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 31%;
    border-top: 2px solid #e2e2e2;
    overflow-y: scroll;
}

.fa-bus .fa-blind {
    font-size: 20px
}

.map-detail {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.map-desc {
    font-size: 0.9rem;
    padding-top: 0.5rem;
}

.map-desc-small {
    font-size: 0.8rem;
    padding-top: 0.5rem;
}

.map-header {
    font-size: 1rem;
    padding-top: 0.5rem;
}

.padd0715R {
    padding: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.travel-mode {
    text-align: center;
    margin: 0.5rem;
    border-top: 2px solid #e2e2e2;
    font-size: 1.5rem;
    color: darkblue;
}

.map-instruction {
    border-top: 2px solid #e2e2e2;
    padding: 0.2rem;
    margin: 0.2rem;
    display: flex;
}

.poi-spinner {
    margin-top: 50px;
    font-size: 35px;
}

/*@media (max-width: 1238px) {
    .home-poi {
        margin: 120px 40px 30px 40px;
    }
}*/
.benefit-img {
    width: 80px;
    height: auto;
}

.margin-top-bottom-auto {
    margin-top: auto;
    margin-bottom: auto;
}

#insurance-div-desktop {
    display: block;
}

#insurance-div-mobile {
    display: none;
}

@media (max-width: 768px) {
    .map-div {
        position: unset !important;
        height: 40rem;
    }

    .places-height {
        max-height: 450px;
        min-width: 80%;
    }

    .right-panel {
        height: 10rem;
    }

    .home-poi {
        margin: 90px 40px 30px 40px;
    }
}

@media (max-width: 995px) {
    .benefit-img {
        width: 50px;
        height: auto;
        margin-right: 10px;
    }

    #insurance-div-desktop {
        display: none;
    }

    #insurance-div-mobile {
        display: block;
    }
}

* {
    box-sizing: border-box;
}

.reward-offer-container {
    display: flex;
    flex-direction: row;
    /*font-size: 30px;*/
    text-align: center;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) {
    .reward-offer-container {
        flex-direction: column;
    }
}

.loyaltypoint-mobile-container {
    background-color: white;
    margin: 10px;
}

.loyaltypoint-mobile-title {
    /*padding: 10px;*/
    padding-left: 10px;
    padding-top: 10px;
}

.loyaltypoint-mobile-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
}

    .loyaltypoint-mobile-cards img {
        /*margin: 5px;*/
        /*box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3);*/
    }