/*
    Template: OTS
    Author: M4verick
    Developer by: ETransact Sdn Bhd
    Email : erwanhafizi@gmail.com
    Website : www.backpackers.my
    Version :COVID19#SOCIALDISTANCING 23022021
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Hind+Siliguri:400,700|Roboto:400,500|Raleway:400,700|Tangerine|Work+Sans:700|Secular+One);
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500&display=swap');
@import url(../../icons/simple-line-icons/css/simple-line-icons.css);
@import url(../../icons/linea-icons/linea.css);
@import url(../../icons/themify-icons/themify-icons.css);
@import url(../../icons/flag-icon-css/flag-icon.min.css);
@import url(../../icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url(spinners.css);
@import url(../lib/animate/animate.css);
@import url(reset.css);
@import url(../lib/fonts-glyphicons/css/font-glyphicons.css);
@import url(../lib/icofont/css/icofont.min.css);
/* Preloader */
.preloader {
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 99999;
    background: #fff
}

    .preloader .cssload-speeding-wheel {
        position: absolute;
        top: calc(46.5%);
        left: calc(46.5%)
    }

/* General HTML tag style */
* {
    outline: none
}

body {
    background: #fff;
    font-family: 'Hind Siliguri', sans-serif;
    margin: 0;
    overflow-x: hidden;
    color: #212121
}

html {
    position: relative;
    min-height: 100%;
    background: #fff
}

a, button {
    outline: none !important;
    text-decoration: none !important;
    color: #ff7b59;
    transition: all 0.2s ease 0s
}

    a.active, button.active, a:focus, button:focus, a:hover, button:hover {
        text-decoration: none
    }

button {
    outline: none !important;
    text-decoration: none !important
}

ol {
    padding-inline-start: 20px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #454444
}

ul {
    padding: 0;
    margin: 0
}

li {
    list-style: none
}

p {
    color: #444
}

/* General element style */
.img-responsive {
    width: 100%;
    height: auto;
    display: inline-block
}

.eticketing {
    background: #fff
}

.page-wrapper {
    /*padding-bottom: 50px;*/
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    background: #f5f6fa;
    z-index: 999;
    min-height: 600px
}

.ruang {
    height: 100px
}

.ruang-50 {
    height: 50px
}

.ruang-imej, .ruang-imej-profile, .ruang-imej-contact, .ruang-imej-dasar, .ruang-imej-promo, .ruang-imej-bus, .ruang-imej-download {
    display: flex;
    justify-content: center;
    flex-flow: column;
    position: relative
}

.ruang-tajuk {
    color: #3c3c3b;
    margin: 0;
    padding: 0;
    font-weight: 700;
    text-shadow: 1px 1px 1px #eee
}

[class|="ruang"] .titlebg {
    padding-bottom: 0;
    background-color: rgba(252,183,35, 0.9);
    margin: 0 auto;
    padding: 1em .5em 1em 3em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
}

    [class|="ruang"] .titlebg .container {
        padding: 0
    }

[class|="ruang"] h2 > span:not(:first-child), [class|="ruang"] h2 > span + span {
    display: block;
    font-size: 15px;
    text-transform: capitalize;
    font-style: italic;
    color: #3c3c3b;
    font-weight: 700
}
/* dua-dua selector boleh guna untuk skip first-child */
[class|="ruang"] h2 span a {
    color: #3c3c3b
}

    [class|="ruang"] h2 span a:hover {
        text-decoration: underline !important
    }
/*.breadcrumb-container{background:#fcb722}*/

/* accessible-bar */
.accessible-bar {
    position: relative;
    z-index: 10000;
    font-family: Montserrat,Helvetica,Arial,sans-serif;
    background: #2C2C2C !important;
    color: #fff !important;
    font-size: .75em;
    padding: 0 .5em;
    height: 29px;
    line-height: 27px
}

    .accessible-bar .container > div {
        display: inline-block
    }

    .accessible-bar > a {
        background: #f7f7f7 !important
    }

    .accessible-bar a {
        display: inline-block;
        padding: 0 .5em;
        text-align: center;
        color: #fff !important
    }

    .accessible-bar .dropdown > .dropdown-menu {
        top: 200%
    }

    .accessible-bar .dropdown:hover > .dropdown-menu {
        display: block;
        top: 60%;
        width: 190px;
        font-size: 1.125em
    }

    .accessible-bar .dropdown > .dropdown-toggle:active { /*Without this, clicking will make it sticky*/
        pointer-events: none
    }

    .accessible-bar .dropdown > .dropdown-menu span {
        display: inline-block;
        margin-left: 1em
    }

.saiz-fon a {
    width: 30px;
    color: #212121 !important
}

.warna-fon a {
    color: #212121 !important
}

.bg-option-box {
    border: 1px solid #0BF;
    height: 16px;
    width: 20px
}

.bg-option.dark {
    background: black !important
}

.bg-option.light {
    background: white !important
}

.bg-option.neon {
    background: #08ff08 !important
}


/* Header */
.header {
    position: relative;
    z-index: 9999;
    background: #fff;
    line-height: 72px;
    border-bottom: 1px solid #dee2ee
}

    .header .top-navbar {
        padding: 0
    }

        .header .top-navbar .navbar-header {
            line-height: 45px;
            text-align: center;
            background: #fff
        }

.navbar {
    padding: 0;
    z-index: 10000
}

.navbar-logo {
    float: left;
    text-align: center
}

    .navbar-logo .navbar-brand {
        margin: 0
    }

.brand-logo {
    width: 140px
}

.top-menu-nav {
    overflow: hidden;
    font-family: Roboto,sans-serif;
    position: relative;
    text-align: center;
    float: right
}

    .top-menu-nav ul {
        float: right
    }

    .top-menu-nav li {
        float: left
    }

        .top-menu-nav li.nav-links + .nav-links {
            margin-left: 24px
        }

    .top-menu-nav .icon {
        display: none
    }

    .top-menu-nav a {
        position: relative;
        display: inline-block;
        margin: 0 1em;
        outline: none;
        color: #212121;
        text-shadow: none;
        padding: 10px 0;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 400;
        text-shadow: 0 0 1px rgba(255,255,255,0.3);
        font-size: 14px
    }

        .top-menu-nav a:hover, .top-menu-nav a:focus {
            outline: none;
            color: #FCB722
        }

.links-effect a::before {
    color: #212121;
    text-shadow: 0 0 1px rgba(33,33,33,0.3);
    content: attr(data-hover);
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s,opacity .3s;
    -moz-transition: -moz-transform 0.3s,opacity .3s;
    transition: transform 0.3s,opacity .3s;
    pointer-events: none
}

.links-effect a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 100%;
    height: 2px;
    background: #FCB722;
    opacity: 0;
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    transform: translateY(5px);
    -webkit-transition: -webkit-transform 0.3s,opacity .3s;
    -moz-transition: -moz-transform 0.3s,opacity .3s;
    transition: transform 0.3s,opacity .3s;
    pointer-events: none
}

.links-effect a:hover::before, .links-effect a:focus::before {
    opacity: 0;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    transform: translateY(-2px)
}

.links-effect a:hover::after, .links-effect a:focus::after {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px)
}

.navbar.navbar-transparent .navbar-logo .brand-logo path {
    fill: #ffffff
}



/* Modal */
#modal-container {
    position: relative;
    top: 50%
}

.modal-dialog {
    position: relative;
    width: 70%
}

.modal-content {
    border-radius: 0;
    border: 0;
    width: 960px;
    max-width: 100%;
    margin: 0 auto
}

/* Input - input, select, textarea, checkbox, radio */
::placeholder {
    color: #2f2c2c !important
}

input:focus, select:focus, textarea:focus {
    border-color: #eee;
    -webkit-transition: background .2s linear;
    -moz-transition: background .2s linear;
    -ms-transition: background .2s linear;
    -o-transition: background .2s linear;
    transition: background .2s linear
}

.form-control, input, select {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none; /*border:1px solid #eee;*/
    border-radius: 0;
    box-shadow: none;
    color: #2f2c2c;
    overflow: hidden
}

    .form-control:focus {
        border: 1px solid #878787;
        background: #f1f1f1;
        -webkit-box-shadow: inset 0 1px 1px transparent,0 0 8px rgba(102,175,233,0);
        box-shadow: inset 0 1px 1px transparent,0 0 8px rgba(102,175,233,0)
    }

.checkbox, .radio {
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 27px;
    margin-top: 0;
    margin-bottom: 0
}

    .checkbox label:before {
        border-radius: 0
    }

    .checkbox input[type="checkbox"]:focus + label::before, .checkbox input[type="radio"]:focus + label::before, .radio input[type="radio"]:focus + label::before {
        outline: none
    }

.input-group-addon [type=checkbox]:checked, .input-group-addon [type=checkbox]:not(:checked), .input-group-addon [type=radio]:checked, .input-group-addon [type=radio]:not(:checked) {
    position: initial;
    opacity: 1
}



/* Footer */
footer {
    position: sticky;
    z-index: 0;
    bottom: 0
}

.footer-wrapper {
    padding-bottom: 30px;
    background: #282828;
    color: #8e8e8e;
    box-shadow: 0 0 8px 0 rgba(0,0,0,.2)
}

    .footer-wrapper a {
        color: #fff
    }

        .footer-wrapper a:hover {
            text-decoration: underline !important
        }

    .footer-wrapper li a {
        opacity: .65
    }

.container-footer {
    margin-top: 2em;
    margin: 0 auto
}

    .container-footer li {
        line-height: 1.5em
    }

    .container-footer > div > div > div > div > div > div {
        margin: 0 1em;
        border-radius: 5px
    }

    .copyright .row, .useful-link .row, .container-footer .copyright > div > div > div > div > div {
        margin: 0 auto;
        text-align: center
    }

.footer-social {
    text-align: center;
    padding: 1em
}

    .footer-social h5 {
        font-family: 'Tangerine', cursive;
        text-transform: none;
        margin-bottom: .5em;
        font-size: 2em;
        color: #8e8e8e
    }

    .footer-social > div > div > div a {
        font-size: 1em
    }

.circle-bg-icon {
    background: #5C6670;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    vertical-align: middle
}

.footer-logo > img {
    width: 50%
}

.copyright {
    font-size: .85em
}

.payment-partner, .logo-awards {
    background: #e5e5e5;
    text-align: center;
    padding: 1em 15px
}

    .payment-partner h3, .logo-awards h3 {
        color: #545454
    }

    .payment-partner > div > div > div > div > div {
        background: url(../images/footer_bank.png) no-repeat;
        width: 62px;
        height: 17px;
        float: left
    }

.affin {
    background-position: -115px -175px !important
}

.alliance {
    background-position: -188px -175px !important
}

.ambank {
    background-position: -261px -175px !important
}

.bankislam {
    background-position: -334px -175px !important
}

.muamalat {
    background-position: -408px -175px !important
}

.rakyat {
    background-position: -480px -175px !important
}

.bsn {
    background-position: -115px -198px !important
}

.cimb {
    background-position: -188px -198px !important
}

.hongleong {
    background-position: -262px -198px !important
}

.hsbc {
    background-position: -334px -198px !important
}

.m2u {
    background-position: -407px -198px !important
}

.m2e {
    background-position: -480px -198px !important
}

.ocbc {
    background-position: -115px -220px !important
}

.pb {
    background-position: -188px -220px !important
}

.rhb {
    background-position: -262px -220px !important
}

.oub {
    background-position: -334px -220px !important
}

.sc {
    background-position: -408px -220px !important
}

.kash {
    background-position: -480px -220px !important
}

.webcash {
    background-position: -115px -244px !important
}

.meps {
    background-position: -188px -244px !important
}

.mastercard {
    background-position: -260px -244px !important
}

.visa {
    background-position: -334px -244px !important
}

.kiple {
    background-position: -407px -244px !important
}

.alipay {
    background-position: -480px -244px !important
}

.footer-awards li {
    float: left
}

span[class*=award] {
    background: url(/Styles/css/images/eticketing_big_sprite.png) no-repeat;
    display: inline-block;
    width: 60px;
    height: 57px
}

.award-soba {
    background-position: -160px -1398px !important
}

.award-awani {
    background-position: -215px -1398px !important
}

.award-topec {
    background-position: -84px -1395px !important
}

.footer-social span {
    width: 20px;
    height: 16px
}

/** datepicker */
.calendar-input div {
    margin: 0
}

.datepicker-dropdown {
    top: 79px !important;
    position: absolute !important;
    width: 280px;
    -webkit-box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
    -moz-box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
    box-shadow: 0 8px 20px 0 rgba(0,0,0,.15);
    border: none
}

    .datepicker-dropdown:before {
        top: -12px !important;
        right: 20px !important;
        border-right: 13px solid transparent;
        border-bottom: 13px solid #fff;
        border-left: 13px solid transparent
    }

    .datepicker-dropdown:after {
        display: none
    }

    .datepicker-dropdown.datepicker-orient-left:before {
        left: 234px !important
    }

    .datepicker-dropdown, .datepicker-dropdown > div {
        background: #fff !important
    }

.datepicker table {
    margin: 0 auto;
    width: 90%
}

    .datepicker table tr td {
        border-radius: 0
    }

        .datepicker table tr td.active.active {
            background: #ff7b59;
            border: none
        }

.datepicker .datepicker-days table tr td {
    border: 1px solid #f1f1f1
}

.modify-search-trip-wrapper .datepicker-dropdown {
    top: 56px !important
}

.datepicker table tr td.disabled {
    cursor: no-drop
}

/* Contrast Color */
/*black*/
body.contrast-black .select2-dropdown, body.contrast-black .seatlayout-container, body.contrast-black .isreturn-trip .seatlayout-container, body.contrast-black .summary-card .summary-title span, body.contrast-black .payment-total .cb-container input:checked ~ .custom-cb, body.contrast-black .datepicker-dropdown {
    border: 1px solid #fff !important
}

body.contrast-black .select2-dropdown, body.contrast-black .select2-search__field, body.contrast-black .ots-rdate .cb-container input:checked ~ .custom-cb, body.contrast-black .table-trip tr.active td, body.contrast-black .isreturn-trip .table-trip tr.active:hover td, body.contrast-black .badge-warning, body.contrast-black .footer-wrapper, body.contrast-black .summary-card .summary-title span, body.contrast-black .page-payment .form-control, body.contrast-black .payment-total .cb-container input:checked ~ .custom-cb, body.contrast-black .modify-search-trip-wrapper span, body.contrast-black .modify-search-trip-wrapper input[type=text], body.contrast-black .modify-search-trip-wrapper div, body.contrast-black .accessible-bar .dropdown:hover > .dropdown-menu > a, body.contrast-black select option {
    background: #000 !important;
    color: #fff !important
}

body.contrast-black .progress-breadcrumb li:before, body.contrast-black .select2-results__group, body.contrast-black .progress-breadcrumb li .content {
    background: #fff !important
}

body.contrast-black .select2-results__group, body.contrast-black .progress-breadcrumb li .content {
    color: #000 !important
}

body.contrast-black p, body.contrast-black .select2-selection__placeholder:before, body.contrast-black .destination-input .select2-selection__rendered, body.contrast-black .destination-input .select2-selection__placeholder, body.contrast-black .destination-input .select2-selection__placeholder:before, body.contrast-black .heading1, body.contrast-black .heading2, body.contrast-black .heading3, body.contrast-black .table-trip div, body.contrast-black .summary-body, body.contrast-black .summary-title-pane, body.contrast-black [class$=title], body.contrast-black .text-dark, body.contrast-black ::placeholder, body.contrast-black .warna-fon a, body.contrast-black .saiz-fon a, body.contrast-black input[type=text], body.contrast-black input[type=email], body.contrast-black select, body.contrast-black select option, body.contrast-black .contact-form .c-icon i, body.contrast-black .c-description {
    color: #fff !important
}

body.contrast-black .ots-rdate .cb-container .custom-cb:after {
    border: solid #fff;
    border-width: 0 3px 3px 0
}

body.contrast-black .seatlayout-container, body.contrast-black .seatlayout-container .seatdeck table, body.contrast-black input[type=text], body.contrast-black input[type=email], body.contrast-black select, body.contrast-black textarea {
    background: none
}

    body.contrast-black .seatlayout-container .available::after {
        background-image: url(/Styles/css/images/seat-black.png) !important;
        color: #fff
    }

body.contrast-black .btn-secondary, body.contrast-black .btn-primary, body.contrast-black .btn-success, body.contrast-black .payment-total .list-group-item, body.contrast-black .modify-search-trip-wrapper button, body.contrast-black .modify-search-trip-wrapper #ots-search-box, body.contrast-black .accessible-bar .dropdown:hover > .dropdown-menu {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #fff
}

body.contrast-black .header, body.contrast-black main[role=main], body.contrast-black .page-wrapper, body.contrast-black .ots-search-box, body.contrast-black .main-search-bar, body.contrast-black .search-trip-wrapper input[type=text], body.contrast-black .search-trip-wrapper section div, body.contrast-black .card, body.contrast-black .slider_container, body.contrast-black .payment-partner, body.contrast-black .logo-awards, body.contrast-black .circle-bg-icon, body.contrast-black .preloader, body.contrast-black .table tbody tr.active:hover td {
    background: #000 !important
}

body.contrast-black li a, body.contrast-black label, body.contrast-black span, body.contrast-black input[type=text], body.contrast-black h2, body.contrast-black h3, body.contrast-black h4, body.contrast-black h5, body.contrast-black .destination-arrow, body.contrast-black .text-muted, body.contrast-black .btn-link, body.contrast-black .datepicker-days thead tr th, body.contrast-black .datepicker-days tbody tr td, body.contrast-black textarea {
    color: #fff !important
}

body.contrast-black .ots-search-box, body.contrast-black .circle-bg-icon, body.contrast-black .card, body.contrast-black .modify-search-trip-wrapper .select2-selection, body.contrast-black .modify-search-trip-wrapper .ots-rdate input, body.contrast-black .modify-search-trip-wrapper .ots-ddate input {
    border: 1px solid #fff
}

body.contrast-black .header, body.contrast-black .page-wrapper, body.contrast-black .logo-awards, body.contrast-black .summary-title, body.contrast-black .slider_container {
    border-bottom: 1px solid #fff !important
}

body.contrast-black .ots-search-button, body.contrast-black .button-search-main .ots-search-button:hover {
    background: #000 !important;
    color: #fff;
    border: 1px solid #fff
}

body.contrast-black .brand-logo path {
    fill: #fff
}

body.contrast-black .btn:focus, body.contrast-black .btn.focus, body.contrast-black .btn:hover {
    border: 2px solid white;
    font-weight: 700
}

body.contrast-black .datepicker table tr td.day:hover {
    background: #fff !important;
    color: #000 !important
}

body.contrast-black .datepicker table tr td.day.new, body.contrast-black .datepicker table tr td.day.disabled {
    opacity: .5
}

body.contrast-black .modify-search-trip-wrapper button.btn-primary {
    background: #fff !important;
    color: #000 !important
}
/*white*/
body.contrast-white .select2-dropdown, body.contrast-white .seatlayout-container, body.contrast-white .isreturn-trip .seatlayout-container, body.contrast-white .summary-card .summary-title span, body.contrast-white .payment-total .cb-container input:checked ~ .custom-cb, body.contrast-white .datepicker-dropdown {
    border: 1px solid #000 !important
}

body.contrast-white .select2-dropdown, body.contrast-white .select2-search__field, body.contrast-white .ots-rdate .cb-container input:checked ~ .custom-cb, body.contrast-white .table-trip tr.active td, body.contrast-white .isreturn-trip .table-trip tr.active:hover td, body.contrast-white .badge-warning, body.contrast-white .footer-wrapper, body.contrast-white .summary-card .summary-title span, body.contrast-white .page-payment .form-control, body.contrast-white .payment-total .cb-container input:checked ~ .custom-cb, body.contrast-white .modify-search-trip-wrapper span, body.contrast-white .modify-search-trip-wrapper input[type=text], body.contrast-white .modify-search-trip-wrapper div, body.contrast-white .accessible-bar .dropdown:hover > .dropdown-menu > a, body.contrast-white select option {
    background: #fff !important;
    color: #000 !important
}

body.contrast-white .progress-breadcrumb li:before, body.contrast-white .select2-results__group, body.contrast-white .progress-breadcrumb li .content {
    background: #000 !important
}

body.contrast-white .select2-results__group, body.contrast-white .progress-breadcrumb li .content {
    color: #fff !important
}

body.contrast-white p, body.contrast-white .select2-selection__placeholder:before, body.contrast-white .destination-input .select2-selection__rendered, body.contrast-white .destination-input .select2-selection__placeholder, body.contrast-white .destination-input .select2-selection__placeholder:before, body.contrast-white .heading1, body.contrast-white .heading2, body.contrast-white .heading3, body.contrast-white .table-trip div, body.contrast-white .summary-body, body.contrast-white .summary-title-pane, body.contrast-white [class$=title], body.contrast-white .text-dark, body.contrast-white ::placeholder, body.contrast-white .contact-form .c-icon i, body.contrast-white .c-description, body.contrast-white .warna-fon a {
    color: #000 !important
}

body.contrast-white .ots-rdate .cb-container .custom-cb:after, body.contrast-white .payment-total .cb-container .custom-cb:after {
    border: solid #000;
    border-width: 0 3px 3px 0
}

body.contrast-white .seatlayout-container, body.contrast-white .seatlayout-container .seatdeck table, body.contrast-white input[type=text], body.contrast-white input[type=email], body.contrast-white select, body.contrast-white textarea {
    background: none
}

    body.contrast-white .seatlayout-container .available::after {
        background-image: url(/Styles/css/images/seat-white.png) !important;
        color: #000
    }

body.contrast-white .btn-secondary, body.contrast-white .btn-primary, body.contrast-white .btn-success, body.contrast-white .payment-total .list-group-item, body.contrast-white .modify-search-trip-wrapper button, body.contrast-white .modify-search-trip-wrapper #ots-search-box, body.contrast-white .payment-total .cb-container .custom-cb, body.contrast-white .accessible-bar .dropdown:hover > .dropdown-menu {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000
}

body.contrast-white .header, body.contrast-white main[role=main], body.contrast-white .page-wrapper, body.contrast-white .ots-search-box, body.contrast-white .main-search-bar, body.contrast-white .search-trip-wrapper input[type=text], body.contrast-white .search-trip-wrapper section div, body.contrast-white .card, body.contrast-white .slider_container, body.contrast-white .payment-partner, body.contrast-white .logo-awards, body.contrast-white .circle-bg-icon, body.contrast-white .preloader, body.contrast-white .table tbody tr.active:hover td, body.contrast-white .table-hover tbody tr:hover {
    background: #fff !important
}

body.contrast-white li a, body.contrast-white label, body.contrast-white span, body.contrast-white input[type=text], body.contrast-white h2, body.contrast-white h3, body.contrast-white h4, body.contrast-white h5, body.contrast-white .destination-arrow, body.contrast-white .text-muted, body.contrast-white .btn-link, body.contrast-white .datepicker-days thead tr th, body.contrast-white .datepicker-days tbody tr td, body.contrast-white .circle-bg-icon, body.contrast-white input[type=text], body.contrast-white input[type=email], body.contrast-white select, body.contrast-white textarea, body.contrast-white .footer-wrapper a {
    color: #000 !important
}

body.contrast-white .ots-search-box, body.contrast-white .circle-bg-icon, body.contrast-white .card, body.contrast-white .modify-search-trip-wrapper .select2-selection, body.contrast-white .modify-search-trip-wrapper .ots-rdate input, body.contrast-white .modify-search-trip-wrapper .ots-ddate input, body.contrast-white .payment-total .list-group {
    border: 1px solid #000
}

body.contrast-white .header, body.contrast-white .page-wrapper, body.contrast-white .logo-awards, body.contrast-white .summary-title, body.contrast-white .slider_container {
    border-bottom: 1px solid #000 !important
}

body.contrast-white .ots-search-button, body.contrast-white .button-search-main .ots-search-button:hover {
    background: #fff !important;
    color: #000;
    border: 1px solid #000
}

body.contrast-white .brand-logo path {
    fill: #000
}

body.contrast-white .btn:focus, body.contrast-white .btn.focus, body.contrast-white .btn:hover {
    border: 2px solid black;
    font-weight: 700
}

body.contrast-white .datepicker table tr td.day:hover {
    background: #000 !important;
    color: #fff !important
}

body.contrast-white .datepicker table tr td.day.new, body.contrast-white .datepicker table tr td.day.disabled {
    opacity: .5
}

body.contrast-white .modify-search-trip-wrapper button.btn-primary {
    background: #000 !important;
    color: #fff !important
}
/*neon*/
body.contrast-neon .select2-dropdown, body.contrast-neon .seatlayout-container, body.contrast-neon .isreturn-trip .seatlayout-container, body.contrast-neon .summary-card .summary-title span, body.contrast-neon .payment-total .cb-container input:checked ~ .custom-cb, body.contrast-neon .datepicker-dropdown {
    border: 1px solid #08ff08 !important
}

body.contrast-neon .select2-dropdown, body.contrast-neon .select2-search__field, body.contrast-neon .ots-rdate .cb-container input:checked ~ .custom-cb, body.contrast-neon .table-trip tr.active td, body.contrast-neon .isreturn-trip .table-trip tr.active:hover td, body.contrast-neon .badge-warning, body.contrast-neon .footer-wrapper, body.contrast-neon .summary-card .summary-title span, body.contrast-neon .page-payment .form-control, body.contrast-neon .payment-total .cb-container input:checked ~ .custom-cb, body.contrast-neon .modify-search-trip-wrapper span, body.contrast-neon .modify-search-trip-wrapper input[type=text], body.contrast-neon .modify-search-trip-wrapper div, body.contrast-neon .accessible-bar .dropdown:hover > .dropdown-menu > a, body.contrast-neon select option {
    background: #000 !important;
    color: #08ff08 !important
}

body.contrast-neon .progress-breadcrumb li:before, body.contrast-neon .select2-results__group, body.contrast-neon .progress-breadcrumb li .content {
    background: #08ff08 !important
}

body.contrast-neon .select2-results__group, body.contrast-neon .progress-breadcrumb li .content {
    color: #000 !important
}

body.contrast-neon p, body.contrast-neon .select2-selection__placeholder:before, body.contrast-neon .destination-input .select2-selection__rendered, body.contrast-neon .destination-input .select2-selection__placeholder, body.contrast-neon .destination-input .select2-selection__placeholder:before, body.contrast-neon .heading1, body.contrast-neon .heading2, body.contrast-neon .heading3, body.contrast-neon .table-trip div, body.contrast-neon .summary-body, body.contrast-neon .summary-title-pane, body.contrast-neon [class$=title], body.contrast-neon .text-dark, body.contrast-neon ::placeholder, body.contrast-neon .contact-form .c-icon i, body.contrast-neon .c-description {
    color: #08ff08 !important
}

body.contrast-neon .ots-rdate .cb-container .custom-cb:after, body.contrast-neon .payment-total .cb-container .custom-cb:after {
    border: solid #08ff08;
    border-width: 0 3px 3px 0
}

body.contrast-neon .seatlayout-container, body.contrast-neon .seatlayout-container .seatdeck table, body.contrast-neon input[type=text], body.contrast-neon input[type=email], body.contrast-neon select, body.contrast-neon textarea {
    background: none
}

    body.contrast-neon .seatlayout-container .available::after {
        background-image: url(/Styles/css/images/seat-white.png) !important;
        color: #08ff08
    }

body.contrast-neon .btn-secondary, body.contrast-neon .btn-primary, body.contrast-neon .btn-success, body.contrast-neon .payment-total .list-group-item, body.contrast-neon .modify-search-trip-wrapper button, body.contrast-neon .modify-search-trip-wrapper #ots-search-box, body.contrast-neon .payment-total .cb-container .custom-cb, body.contrast-neon .accessible-bar .dropdown:hover > .dropdown-menu {
    background: #000 !important;
    color: #08ff08 !important;
    border: 1px solid #08ff08
}

body.contrast-neon .header, body.contrast-neon main[role=main], body.contrast-neon .page-wrapper, body.contrast-neon .ots-search-box, body.contrast-neon .main-search-bar, body.contrast-neon .search-trip-wrapper input[type=text], body.contrast-neon .search-trip-wrapper section div, body.contrast-neon .card, body.contrast-neon .slider_container, body.contrast-neon .payment-partner, body.contrast-neon .logo-awards, body.contrast-neon .circle-bg-icon, body.contrast-neon .preloader, body.contrast-neon .table tbody tr.active:hover td, body.contrast-neon .table-hover tbody tr:hover {
    background: #000 !important
}

body.contrast-neon li a, body.contrast-neon label, body.contrast-neon span, body.contrast-neon input[type=text], body.contrast-neon h2, body.contrast-neon h3, body.contrast-neon h4, body.contrast-neon h5, body.contrast-neon .destination-arrow, body.contrast-neon .text-muted, body.contrast-neon .btn-link, body.contrast-neon .datepicker-days thead tr th, body.contrast-neon .datepicker-days tbody tr td, body.contrast-neon .circle-bg-icon, body.contrast-neon input[type=text], body.contrast-neon input[type=email], body.contrast-neon select, body.contrast-neon textarea, body.contrast-neon .footer-wrapper a, body.contrast-neon .accessible-bar .dropdown a {
    color: #08ff08 !important
}

body.contrast-neon .ots-search-box, body.contrast-neon .circle-bg-icon, body.contrast-neon .card, body.contrast-neon .modify-search-trip-wrapper .select2-selection, body.contrast-neon .modify-search-trip-wrapper .ots-rdate input, body.contrast-neon .modify-search-trip-wrapper .ots-ddate input, body.contrast-neon .payment-total .list-group {
    border: 1px solid #08ff08
}

body.contrast-neon .header, body.contrast-neon .page-wrapper, body.contrast-neon .logo-awards, body.contrast-neon .summary-title, body.contrast-neon .slider_container {
    border-bottom: 1px solid #08ff08 !important
}

body.contrast-neon .ots-search-button, body.contrast-neon .button-search-main .ots-search-button:hover {
    background: #000 !important;
    color: #08ff08;
    border: 1px solid #08ff08
}

body.contrast-neon .brand-logo path {
    fill: #08ff08
}

body.contrast-neon .btn:focus, body.contrast-neon .btn.focus, body.contrast-neon .btn:hover {
    border: 2px solid black;
    font-weight: 700
}

body.contrast-neon .datepicker table tr td.day:hover {
    background: #08ff08 !important;
    color: #000 !important
}

body.contrast-neon .datepicker table tr td.day.new, body.contrast-neon .datepicker table tr td.day.disabled {
    opacity: .5
}

body.contrast-neon .modify-search-trip-wrapper button.btn-primary {
    background: #08ff08 !important;
    color: #000 !important
}

/* Font size */

body.fon-size-minus5 {
    font-size: 0.5rem !important
}

body.fon-size-minus4 {
    font-size: 0.6rem !important
}

body.fon-size-minus3 {
    font-size: 0.7rem !important
}

body.fon-size-minus2 {
    font-size: 0.8rem !important
}

body.fon-size-minus1 {
    font-size: 0.9rem !important
}

body.fon-size {
    font-size: 1rem !important
}

body.fon-size-add1 {
    font-size: 1.1rem !important
}

body.fon-size-add2 {
    font-size: 1.2rem !important
}

body.fon-size-add3 {
    font-size: 1.3rem !important
}

body.fon-size-add4 {
    font-size: 1.4rem !important
}

body.fon-size-add5 {
    font-size: 1.5rem !important
}

/* Landing page */
#landing {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 70px 0 100px;
    margin-bottom: -50px
}

#landing::before {
    content: '';
    position: absolute;
    right: -100%;
    top: 20%;
    width: 250%;
    height: 200%;
    background-color: #FDF6D6;
    transform: skewY(135deg)
}

#landing h1 {
    margin: 0 0 10px;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #3b3330;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif
}

#landing h2 {
    margin-bottom: 50px;
    font-size: 20px;
    font-weight: 400
}

#landing .download-btn {
    font-family: "Raleway",sans-serif;
    font-weight: 500;
    font-size: 15px;
    display: inline-block;
    padding: 8px 18px 10px 46px;
    border-radius: 3px;
    transition: .5s;
    color: #fff;
    background: #007bff;
    position: relative;
    width: 150px;
    margin-top: 1em
}

#landing .download-btn:hover {
    background: #5B5C5F
}

#landing .download-btn i {
    font-size: 20px;
    position: absolute;
    left: 18px;
    top: 8.5px
}

#landing .download-btn + .download-btn {
    margin-left: 20px
}

/*Info Carousel*/

.cards-wrapper {
    display: flex;
    justify-content: center;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: #e1e1e1;
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 768px) {
    .card img {
        height: 11em;
    }
}

/* basic styling */
.figure-news {
width: 350px;
box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.4);
border-radius: 8px;
position: relative;
pointer-events: none;
background: #ecf0f1;
transition: 0.3s ease-in-out;

}
/*tawaran 1*/
.figure-img {
    width: 100%;
    height: 200px;
    border-radius: 8px 8px 0 0;
    transition: transform 0.3s ease-in-out;
}


.figure-news .img1:after,
.figure-news .img2:after,
.figure-news .img3:after,
.figure-news .img4:after,
.figure-news .img5:after,
.figure-news .img6:after,
.figure-news .img7:after,
.figure-news .img8:after,
.figure-news .img9:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(transparent, #ecf0f1 44%);
    border-radius: 0 0 8px 8px;
}

.figure-news figcaption {
    height:70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    overflow: visible;
    background: #ecf0f1;
    border-radius: 0 0 8px 8px;
}
/* Apply hover animation to figcaption */
.figure-news:hover .figcaption {
    transform: translateY(-10px);
    transition: transform 0.3s ease-in-out;
}

.figure-news figcaption span:nth-child(1) {
    position: absolute;
    font-family: Poppins, sans-serif;
    font-size: 30px;
    top: 0;
    opacity: 0;
    left: 0;
    color: #2c3e50;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.figure-news figcaption span:nth-child(2) {
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight:600;
    overflow: visible;
    position: absolute;
    top: -12px;
    left: 18px;
    white-space: nowrap;
    color: #2c3e50;
    z-index: 10;
    transform: rotate(-2deg);
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
    transition: top 0.3s ease-in-out;
}

.figure-news figcaption span:nth-child(3) {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: 14px;
    opacity: 0;
    padding: 0 20px;
    height: 20px;
    overflow: hidden;
    cursor: text;
    display: none;
    position: absolute;
}

.figure-news button {
    position: absolute;
    bottom: -10px;
    width: 130px;
    left: calc(50% - 65px);
    background: #f3aa05fc;
    color: #fff;
    border: 0;
    height: 35px;
    border-radius: 4px;
    transform: rotate(1deg);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    pointer-events: auto;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    z-index: 20;
}

.figure-news button:focus {
    outline: 0;
}

.figure-news button:before {
    content: "More";
    position: absolute;
    top: 8px;
    left: 44px;
    opacity: 1;
    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
    
    color: #2e2b2b;
}

.figure-news button:after {
    content: "Back";
    opacity: 0;
    top: 8px;
    left: 0;
    position: absolute;
    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
    color: #2e2b2b;
}

.figure-news #button-news1-more:after,
.figure-news #button-news3-more:after, 
.figure-news #button-news5-more:after, 
.figure-news #button-news6-more:after, 
.figure-news #button-news7-more:after, 
.figure-news #button-news8-more:after
{
    content:"Learn More";
    opacity: 1;
    top: 8px;
    left: 26px;
    position: absolute;
    transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
    color: #2e2b2b;
}

.figure-news.open #button-news1, 
.figure-news.open #button-news3, 
.figure-news.open #button-news5, 
.figure-news.open #button-news6, 
.figure-news.open #button-news7, 
.figure-news.open #button-news8
{
    transform: translateX(70px);
}
.figure-news.open #button-news1-more, 
.figure-news.open #button-news3-more,
.figure-news.open #button-news5-more,
.figure-news.open #button-news6-more,
.figure-news.open #button-news7-more,
.figure-news.open #button-news8-more
{
    
    color: #2e2b2b;
    transform: translateX(-70px);
}

.figure-news:hover {
    transition: 0.3s ease-in-out;
    transform: rotateX(-2deg);
    box-shadow: 3px -3px 6px 0 rgba(0, 0, 0, 0.4);
}

.figure-news:hover button{
    background: #dfb453fc;
    bottom: -13px;
    transition: 0.3s ease-in-out;
}

.figure-news:hover span:nth-child(2) {
    top: -39px;
    transition: top 0.3s ease-in-out;
}

.figure-news .img1,
.figure-news .img2,
.figure-news .img3,
.figure-news .img4,
.figure-news .img5,
.figure-news .img6,
.figure-news .img7,
.figure-news .img8,
.figure-news .img9 {
    /*width: 311px;*/
    height: 210px;
}
.figure-news.open .img1,
.figure-news.open .img2,
.figure-news.open .img3,
.figure-news.open .img4,
.figure-news.open .img5,
.figure-news.open .img6,
.figure-news.open .img7,
.figure-news.open .img8,
.figure-news.open .img9 {
    height: 0;
}

.figure-news.open figcaption {
    height: 280px;
    border-radius: 8px;
}

.figure-news.open figcaption span:nth-child(1) {
    top: -25px;
    opacity: 1;
    left: 84px;
}

.figure-news.open figcaption span:nth-child(2) {
    top: -18px;
}

.figure-news.open figcaption span:nth-child(3) {
    height: 100%;
    opacity: 1;
    padding-top:42px;
    display: block;
}

.figure-news.open button:before {
    opacity: 0;
    left: 100%;
}

.figure-news.open button:after {
    opacity: 1;
    left: 45px;
}

.figure-news.open:hover figcaption span:nth-child(2){
    top: -15px;
    transition: top 0.3s ease-in-out;
}

.usecode {
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promocode {
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: #007bff;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.promocode:hover {
    background: #0056b3;
}

/*head-wrapper on Mainlayout*/
.head-wrapper {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.head {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}


/*Page: Home/Index */
.page-under-maintenance {
    display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    height: 100vh; /* Make the container full height of the viewport */
}
    .page-under-maintenance img {
        max-width: 100%; /* Ensure the image doesn't exceed its container */
        max-height: 100%; /* Ensure the image doesn't exceed its container */
    }

/*Page: Home/BusOperatorInfo*/
#busoperator-info-page ul {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 20px; /* Add padding to the left for indentation */
    width: 280px !important;
}

#busoperator-info-page li {
    position: relative; /* Make the list items relative for pseudo-element */
    padding-left: 1.5em; /* Add padding to the left for space before text */
    margin-bottom: 5px; /* Add margin between list items */
}

    #busoperator-info-page li:before {
        content: '\2022'; /* Unicode character for bullet (•) */
        color: #000000; /* Set bullet color */
        font-weight: bold; /* Make the bullet bold */
        position: absolute; /* Position the bullet absolutely */
        left: 0; /* Position the bullet to the left */
    }
#busoperator-info-page h2{ margin:unset!important; text-transform:uppercase;font-weight:bold;}
#busoperator-info-page h3{ color: #ff8c00 }