/*-------------------------------------------
    # General
---------------------------------------------*/
:root {
    --primary-background: #FFDE11;
    --secondary-background: #4B6CB7;
    --third-background: #00AAE5;
}

body {
    margin: 0;
    padding: 0;
    background: #F7FAFD;
    color: #58595B;
}

section {
    padding: 25px 32px;
    background: var(--Sub-bg, #F7FAFD);
}

.d-grid {
    display: grid;
}

a:hover {
    text-decoration: none;
}

.i-b-m {
    margin-bottom: 1.3rem;
}

.routeline {
    position: relative;
}

    .routeline .circle {
        position: absolute;
        top: 8px;
        left: 0;
        width: 9px;
        height: 9px;
        background: transparent;
        border: 1px solid #58595B;
        border-radius: 50%;
        z-index: 1;
    }

        .routeline .circle::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: 5px;
            height: 5px;
            background: #58595B;
            border-radius: 50%;
            z-index: 2;
        }

.railtime-journey .routeline .circle {
    border: 1px solid var(--third-background);
}

    .railtime-journey .routeline .circle::before {
        background: var(--third-background);
    }

.routeline .route-name,
.businfo .route-name {
    color: #58595B;
    font-size: 16px;
    line-height: normal;
    padding-left: 17px;
}

.routeline .dotted-line {
    border-left: 1px dashed #58595B;
    position: absolute;
    top: 10px;
    left: 4.2px;
    height: 100%;
}

.businfo {
    position: relative;
}

    .businfo .trans-circle {
        position: absolute;
        top: 9px;
        left: 0;
        width: 9px;
        height: 9px;
        border: 1px solid #58595B;
        border-radius: 50%;
        z-index: 1;
    }

input[type=number] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/*-------------------------------------------
    # Calendar
---------------------------------------------*/
.lightpick {
    position: fixed !important;
    top: 61px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #F6F6F6 !important;
    padding: 0 !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    overflow-x: unset !important;
}

.lightpick__month {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    height: 100%;
}

lightpick__months {
    height: 100%;
}

.lightpick__days-of-the-week {
    height: 65px;
}

/* Make calendar cells bigger */
.lightpick__day {
    height: 35px !important;
    line-height: 50px !important;
    font-size: 16px !important;
    font-weight: 400
}

.lightpick__days {
    height: 370px;
}

.lightpick__day.is-today {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(255, 222, 17, 1)' cx='10' cy='10' r='10'/%3E%3C/svg%3E") !important;
}

.lightpick__day.is-disabled {
    color: #BBBDBF !important;
}

.lightpick__day.is-start-date,
.lightpick__day.is-end-date,
.lightpick__day.is-start-date:hover,
.lightpick__day.is-end-date:hover {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(0, 171, 230, 1) ' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !important;
}

.date-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 150px;
}

.lightpick--2-columns .lightpick__months {
    grid-template-columns: none !important;
}

/* Hide modal by default */
.lichtpick-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .lichtpick-modal.open {
        display: block;
        opacity: 1;
    }

    .lichtpick-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

.lichtpick-content {
    border-radius: 6px;
    background: #F6F6F6;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: scroll;
}

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

.lightpick__previous-action {
    position: absolute;
    left: 5px;
    top: 50%;
    color: #58595B;
    z-index: 10;
    margin-left: 29px !important;
}

.lightpick__next-action {
    position: absolute;
    right: 5px;
    top: 50%;
    color: #000;
    z-index: 10;
}

.lightpick__previous-action {
    text-align: left;
    font-size: 18px !important;
    background: #F9F9F9 !important;
    height: 5px !important;
}

.lightpick__next-action {
    font-size: 18px !important;
    background: #F9F9F9 !important;
    margin-right: 29px;
    color: #58595B;
    height: 5px !important;
}

.lightpick__month-title {
    text-align: -webkit-center;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    display: flex;
    line-height: 30px !important;
}

.lightpick .cal-footer {
    background: var(--third-background);
    padding: 30px;
    border-radius: 24px 24px 0px 0px;
    height: 180px;
    position: absolute;
    width: 100%;
    bottom: 61px;
    display: none;
}

.lightpick .picker-btn,
.lightpick .picker-btn:hover {
    background: var(--primary-background);
    color: var(--third-background);
    width: 100% !important;
    font-size: 18px;
    border-radius: 25px;
    font-weight: 500;
    line-height: normal;
    margin-left: 0;
    display: none;
    z-index: 10;
    padding: 11px;
}

    .lightpick .picker-btn:hover {
        margin-left: 0;
        width: 100%;
    }

.lightpick .close-date-btn {
    display: none !important;
}

.lightpick__month-title > .lightpick__select {
    margin-right: 0 !important;
    text-align: center;
    color: #6D6E70;
    font-weight: 500;
}

    .lightpick__month-title > .lightpick__select:disabled {
        background: none !important;
        font-weight: 500;
        color: #6D6E70 !important;
    }

.lightpick__day.is-start-date.is-in-range, .lightpick__day.is-end-date.is-in-range.is-flipped {
    border-top-left-radius: 120px !important;
    border-bottom-left-radius: 120px !important;
    background-color: #00ABE6 !important;
    font-weight: 400;
}

    .lightpick__day.is-end-date.is-in-range, .lightpick__day.is-start-date.is-in-range.is-flipped {
        border-top-right-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
        background-color: #00ABE6 !important;
        font-weight: 400;
    }

.lightpick__day.is-in-range {
    background: #00abe6b3 !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
}

/*-------------------------------------------
    # Button
---------------------------------------------*/
.color-btn {
    background: var(--primary-background);
    border-radius: 34px;
}

.color-info-btn {
    background: var(--secondary-background);
    border-radius: 34px;
}

/*-------------------------------------------
    # Input
---------------------------------------------*/
.input-box {
    fill: #F7FAFD;
    stroke-width: 1px;
    stroke: #DFDFDF;
    width: 100%;
    height: 50px;
    padding: 11px 14px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
    line-height: normal;
    letter-spacing: 0.15px;
}

    .input-box:has(input:disabled) {
        border: 1px solid #DFDFDF;
    }

    .input-box input:disabled {
        color: var(--pre-insert-text-with-50-opacity, rgba(128, 129, 132, 0.50));
        line-height: normal;
        letter-spacing: 0.15px;
        background: none;
    }

    .input-box input {
        width: 100%;
        border: 0;
        outline: 0;
        background: none;
    }

.mobile,
.gender,
.passport,
.add-ff,
.card,
.origin-box {
    background: #FFF;
}

/*----------------------------------------------------
    # Top Header
------------------------------------------------------*/
.top-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 70px;
    padding: 11px;
    display: flex;
    align-items: center;
    background: var(--third-background);
    z-index: 998;
}

    .top-header .back-icon {
        position: absolute;
        top: 28px;
        left: 30px;
        width: 6px;
        height: 13px;
    }

    .top-header h2 {
        font-size: 18px;
        color: #FFF;
        margin-bottom: 0;
        line-height: normal;
        font-weight: 400;
        margin: 0 auto;
    }

    .top-header .expired-time {
        font-size: 12px;
        color: #FFF;
        margin-bottom: 0;
        line-height: normal;
    }

    .top-header .countdown {
        color: #FFF;
        line-height: normal;
        font-size: 14px;
    }

/*-------------------------------------------
    # Modal
---------------------------------------------*/
.info-modal {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .info-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .info-modal .info-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        max-width: 264px;
        width: 100%;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
    }

        .info-modal .info-content h5 {
            text-align: center;
            color: #000;
            font-weight: 700;
            line-height: normal;
            margin-bottom: 20px;
        }

        .info-modal .info-content p {
            font-size: 12px;
            line-height: normal;
            font-weight: 300;
            text-align: center;
            margin-bottom: 30px;
        }

        .info-modal .info-content .info-btn {
            width: 159px;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            margin: 0 auto;
        }

/*--------------------------------------------------------------
# Wallet QR Modal
--------------------------------------------------------------*/
.walletqr-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .walletqr-modal.open {
        display: block;
        opacity: 1;
    }

    .walletqr-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .walletqr-modal .walletqr-content {
        background: #F9F9F9;
        height: 100%;
        overflow-y: auto;
        padding: 120px 32px;
    }

    .walletqr-modal .walletqr-header {
        background: var(--third-background);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        height: 70px;
        padding: 12px 17px;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .walletqr-modal .walletqr-header .qr-back-icon {
            position: absolute;
            top: 23px;
            left: 17px;
        }

        .walletqr-modal .walletqr-header .refresh-icon {
            position: absolute;
            top: 27px;
            right: 17px;
        }

        .walletqr-modal .walletqr-header h2 {
            font-size: 14px;
            line-height: normal;
            margin-bottom: 0;
            color: #FFF;
            text-align: center;
        }

    .walletqr-modal .blnc-wrapper {
        background: #FFF;
        padding: 15px;
        color: #58595B;
        font-size: 16px;
        font-weight: 400;
        border-radius: 6px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }

    .walletqr-modal .qr-info {
        color: #58595B;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        margin: 20px 0
    }

    .walletqr-modal .ctgr-lbl {
        color: var(--third-background);
        text-align: center;
        font-size: 21px;
        font-style: normal;
        font-weight: 800;
        text-transform: uppercase;
    }
/*--------------------------------------------------------------
# Pax Modal
--------------------------------------------------------------*/
.pax-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .pax-modal.open {
        display: block;
        opacity: 1;
    }

    .pax-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .pax-modal .pax-content {
        background: #F9F9F9;
        height: 100%;
        overflow-y: auto;
        padding: 120px 32px;
    }

    .pax-modal .pax-header {
        background: var(--third-background);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        height: 70px;
        padding: 12px 17px;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .pax-modal .pax-header .pax-back-icon {
            position: absolute;
            top: 27px;
            left: 17px;
        }

        .pax-modal .pax-header h2 {
            font-size: 14px;
            line-height: normal;
            margin-bottom: 0;
            color: #FFF;
            text-align: center;
        }

    .pax-modal .pax-item {
        display: flex;
        flex-direction: column;
        gap: 21px;
        text-align: center;
    }

        .pax-modal .pax-item .pax-box {
            width: 314px;
            height: 50px;
            padding: 5px;
            border-radius: 8px;
            border: 1px solid #DFDFDF;
            background: #FFF;
            /*box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25), 0px 1px 4px 0px rgba(0, 0, 0, 0.25);*/
            margin: 0 auto;
            color: #333;
            font-weight: 300;
            line-height: normal;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/*--------------------------------------------------------------
# Orgin & Destination Modal
--------------------------------------------------------------*/
.trip-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .trip-modal.open {
        display: block;
        opacity: 1;
    }

    .trip-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .trip-modal .trip-content {
        background: #FFF;
        height: 100%;
        overflow-y: auto;
        padding: 91px 0;
    }

    .trip-modal .trip-header {
        background: linear-gradient(180deg, var(--third-background) 0%, #5BC0EE 100%);
        width: 100%;
        height: 90px;
        padding: 12px 17px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .trip-modal .trip-header .back-icon {
            margin-right: 25px;
        }

        .trip-modal .trip-header h2 {
            font-size: 14px;
            line-height: normal;
            margin-bottom: 0;
            color: #FFF;
            text-align: center;
        }

        .trip-modal .trip-header .input-box {
            border-radius: 6px;
        }

    .trip-modal .s-header {
        background: linear-gradient(180deg, var(--third-background) 0%, #5BC0EE 100%);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 6px 11px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        .trip-modal .s-header h1 {
            font-size: 14px;
            line-height: normal;
            font-weight: 300;
            margin-bottom: 0;
            color: #FFF;
            font-size: 12px;
            font-weight: 400;
        }

    .trip-modal .dd-container {
        padding: 0;
    }

        .trip-modal .dd-container .b-b {
            border-bottom: 1px solid #CCC
        }

        .trip-modal .dd-container .m-container {
            margin: 12px 14px;
        }

        .trip-modal .dd-container .b-b h1 {
            font-size: 16px;
            line-height: normal;
            font-weight: 400;
            margin-bottom: 0;
            color: #6D6E70;
        }

        .trip-modal .dd-container .b-b:last-child {
            border-bottom: 0;
        }

        .trip-modal .dd-container .code-container {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .trip-modal .dd-container .code-box {
            border-radius: 12px;
            width: 54px;
            height: 14px;
            text-align: center;
        }

        .trip-modal .dd-container .e-color {
            background: var(--primary-background);
            color: #4B4A41;
            line-height: normal;
            font-size: 10px;
        }

        .trip-modal .dd-container .i-color {
            background: var(--third-background);
            color: #FFF;
            line-height: normal;
            font-size: 10px;
        }

        .trip-modal .dd-container .l-color {
            background: #ff74da;
            color: #FFF;
            line-height: normal;
            font-size: 10px;
        }

/*--------------------------------------------------------------
# KITS Modal
--------------------------------------------------------------*/
.kits-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .kits-modal.open {
        display: block;
        opacity: 1;
    }

    .kits-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .kits-modal .kits-content {
        background: #FFF;
        height: 100%;
        overflow-y: auto;
        padding: 150px 32px;
    }

    .kits-modal .kits-header {
        background: #FFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        height: 73px;
        padding: 12px 17px;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
    }

        .kits-modal .kits-header .kits-back-icon {
            position: absolute;
            right: 17px;
        }

        .kits-modal .kits-header h2 {
            font-size: 22px;
            line-height: normal;
            margin-bottom: 0;
            color: #58595B;
        }

    .kits-modal .kits-item {
        text-align: center;
    }

        .kits-modal .kits-item .lbl {
            color: #47C8F0;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            margin-top: 10px;
        }

        .kits-modal .kits-item .item-ic {
            position: absolute;
            top: 27%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

    .kits-modal a:hover {
        color: #0056b3;
        text-decoration: none;
    }


/*--------------------------------------------------------------
# Bottom Navigation Menu
--------------------------------------------------------------*/
.footer-navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #FFF;
    filter: drop-shadow(0px -1px 4px rgba(0, 0, 0, 0.10));
    z-index: 10;
}

    .footer-navbar .tabs {
        display: flex;
        justify-content: space-around;
        padding: 16px 0;
        margin: 0;
    }

        .footer-navbar .tabs li {
            list-style: none;
            text-align: center;
            display: block;
        }

            .footer-navbar .tabs li a {
                text-decoration: none;
                padding: 0 20px;
                display: block;
            }

            .footer-navbar .tabs li .icon {
                width: 100%;
                height: 26px;
                margin-bottom: 5px;
            }

                .footer-navbar .tabs li .icon i {
                    width: 100%;
                    height: 100%;
                    color: #CCC;
                    font-size: 26px;
                }

            .footer-navbar .tabs li .text {
                color: #CCC;
                text-align: center;
                font-family: Roboto;
                font-size: 10px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                letter-spacing: 0.15px;
            }

            .footer-navbar .tabs li.active,
            .footer-navbar .tabs li.active .text {
                color: var(--third-background);
            }

                .footer-navbar .tabs li.active .icon img {
                    filter: brightness(0.7) saturate(100%) invert(36%) sepia(100%) saturate(100) hue-rotate(197deg) brightness(94%) contrast(101%);
                }

/*-------------------------------------------
    # Login
---------------------------------------------*/
.login .logo {
    margin-bottom: 16px;
}

.login p {
    font-size: 14px;
    line-height: normal;
    color: #444;
    font-weight: 700;
    width: 170px;
    margin: 0 auto 16px;
}

.login .auth-logo {
    margin-bottom: 6px;
}

.login .register-link span {
    line-height: normal;
    font-size: 14px;
    text-decoration: underline;
}

.login .login1-btn {
    width: 230px;
    font-weight: 700;
    line-height: normal;
    color: #444;
    display: block;
    padding: 8px;
    text-align: center;
    margin-top: 30px;
    border: 0;
    outline: 0;
    margin-left: auto;
    margin-right: auto;
}

/*-------------------------------------------
    # Forget Password
---------------------------------------------*/
.forgetpassword-modal {
    display: none;
    opacity: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #FFF;
    padding: 19px 32px;
    box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.25);
    transition: opacity .4s ease-out;
    z-index: 1000;
}

    .forgetpassword-modal.open {
        display: block;
        opacity: 1;
    }

    .forgetpassword-modal h5 {
        text-align: center;
        line-height: normal;
        font-weight: 400;
        margin-bottom: 16px;
        font-size: 16px;
    }

    .forgetpassword-modal p {
        font-size: 14px;
        line-height: normal;
        text-align: center;
        font-weight: 300;
    }

    .forgetpassword-modal .pass-btn {
        width: 230px;
        font-weight: 700;
        line-height: normal;
        color: #444;
        display: block;
        padding: 8px;
        text-align: center;
        margin-top: 30px;
        border: 0;
        outline: 0;
        margin-left: auto;
        margin-right: auto;
    }

/*----------------------------------------------------
    # Registration
------------------------------------------------------*/
.registration .gender-m.form-control {
    width: 100%;
    height: calc(2.5em + 0.75rem + 2px);
    background: #FFF;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
    border-color: transparent;
}

.registration #dateDropdownDiv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-color: transparent;
}

    .registration #dateDropdownDiv select {
        background: #FFF;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
        padding: 11px 14px;
        border-color: transparent;
        width: 30%;
    }

        .registration #dateDropdownDiv select:focus {
            border-color: transparent;
        }

        .registration #dateDropdownDiv select option:first-child {
            color: #AAA;
        }

.registration .registration-btn {
    width: 230px;
    height: 42px;
    border-radius: 191px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-top: 30px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
    outline: none;
}

/*----------------------------------------------------
    # Complete Registration
------------------------------------------------------*/
.complete-registration .gender-m.form-control {
    width: 100%;
    height: calc(2.5em + 0.75rem + 2px);
    background: #FFF;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
    border-color: transparent;
}

.complete-registration #dateDropdownDiv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-color: transparent;
}

    .complete-registration #dateDropdownDiv select {
        background: #FFF;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
        padding: 11px 14px;
        border-color: transparent;
        width: 30%;
    }

        .complete-registration #dateDropdownDiv select:focus {
            border-color: transparent;
        }

        .complete-registration #dateDropdownDiv select option:first-child {
            color: #AAA;
        }


.complete-registration .registration-btn {
    width: 230px;
    height: 42px;
    border-radius: 191px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-top: 30px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
}

/*----------------------------------------------------
    # Home
------------------------------------------------------*/
.home {
    padding: 0;
}

    .home .blue-bg {
        /* background-image: url(/mpay/assets/img/rectangle.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100vh;*/
    }

    .home .top-bg {
        background-image: url(/mpay/assets/img/bghome-2.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 225px;
        padding: 21px 15px;
        position: relative;
    }

        .home .top-bg .color-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Make sure the image stretches appropriately */
            opacity: 0.5; /* Adjust for desired intensity */
            z-index: 1;
        }

        .home .top-bg > *:not(.color-bg) {
            position: relative;
            z-index: 2;
        }


        .home .top-bg .wallet-wrap {
            position: relative;
        }

            .home .top-bg .wallet-wrap .wallet-info {
                position: absolute;
                top: 7px;
                left: 16px;
            }

                .home .top-bg .wallet-wrap .wallet-info .wallet-balance {
                    color: #FFF;
                    font-size: 21px;
                    font-style: normal;
                    font-weight: 800;
                }

                .home .top-bg .wallet-wrap .wallet-info .icon {
                    position: absolute;
                    bottom: 5px;
                }

                .home .top-bg .wallet-wrap .wallet-info .wallet-lbl {
                    color: #FFF;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 800;
                    margin-left: 50px
                }

        .home .top-bg .wallet-qr {
            position: relative;
            margin-left: 10px;
            cursor: pointer;
        }

            .home .top-bg .wallet-qr .qr-ic {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

    /*  .home .top-bg > img {
            margin-right: 7px;
        }

        .home .top-bg > span {
            font-weight: 700;
            line-height: normal;
        }*/
    .home .tabs {
        margin-top: 18px;
        display: flex;
        align-items: center;
    }

        .home .tabs .tablinks {
            width: 141px;
            height: 47px;
            border: 0;
            outline: 0;
            background: #F0F2F5;
            color: #929497;
            border-radius: 12px 12px 0 0;
            box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.25);
            font-size: 12px;
            position: relative;
        }

            .home .tabs .tablinks.active {
                background: #FFF;
                color: #00AAE5;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
            }

            .home .tabs .tablinks > img {
                max-width: 100%;
                height: auto;
                position: absolute;
                left: 10px;
                top: 12px;
            }

            .home .tabs .tablinks .tab-lbl {
                margin-left: 15px;
            }

    .home .wrapper-content {
        position: relative;
        background: #FFF;
        max-width: 100%;
        border-radius: 0 0 24px 24px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 19px;
        min-height: 403px;
    }

    .home .t-content {
        display: none;
    }

        .home .t-content.active {
            display: block;
        }

    .home .t-box {
        border-radius: 6px;
    }

    .home .c-ex {
        border-radius: 50%;
        background: #FFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.12), 0px 1px 10px 0px rgba(0, 0, 0, 0.20);
        width: 40px;
        height: 40px;
        text-align: center;
        padding: 5px;
        position: absolute;
        top: 36px;
        right: 0;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
    }

    .home .i-flex {
        display: flex;
        gap: 21px;
    }

    .home .search-btn {
        border: 0;
        outline: 0;
        width: 100%;
        height: 40px;
        padding: 8px;
        font-weight: 700;
        line-height: normal;
        margin-top: 20px;
        color: #00AAE5;
    }

    .home .btn-content {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }


/*----------------------------------------------------
    # Account
------------------------------------------------------*/
.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00AAE5;
    border: 1px solid #DDD;
    color: #FFF;
    padding: 12px 16px;
    font-weight: 400;
    font-size: 18px;
    height: 70px;
}

.header-title {
    text-align: center;
    flex: 1;
}

.account-m {
    padding: 16px;
    min-height: 100vh;
}

.account-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.account-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    color: #333;
    text-decoration: none;
}

    .account-link:last-child {
        border-bottom: none;
    }

    .account-link .arrow {
        color: #00a9e0;
        font-size: 18px;
    }

.logout-modal.open {
    opacity: 1;
    visibility: visible;
}

.logout-modal .logout-content {
    border-radius: 6px;
    background: #F6F6F6;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
    max-width: 264px;
    width: 100%;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
}

    .logout-modal .logout-content p {
        font-size: 12px;
        line-height: normal;
        font-weight: 300;
        text-align: center;
        margin-bottom: 30px;
    }

    .logout-modal .logout-content .cancel-btn {
        width: 107px;
        padding: 8px;
        border: 0;
        outline: 0;
        color: var(--third-background);
        background: #FFF;
        margin: 0 auto;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
    }

    .logout-modal .logout-content .logout-btn {
        width: 107px;
        padding: 8px;
        border: 0;
        outline: 0;
        color: #FFF;
        margin: 0 auto;
        background: var(--third-background);
        margin-left: 10px;
    }


/*----------------------------------------------------
    # Inbox
------------------------------------------------------*/

.inbox-m .inbox-box {
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px 15px 15px;
    position: relative;
    margin-bottom: 20px;
}

    .inbox-m .inbox-box .type-box.gretting {
        background: #28D64E;
        width: 55px;
        height: 13px;
        position: absolute;
        top: 9px;
        left: -9px;
    }

    .inbox-m .inbox-box .type-box.important {
        background: #dc3546;
        width: 55px;
        height: 13px;
        position: absolute;
        top: 9px;
        left: -9px;
    }

    .inbox-m .inbox-box .type-box.annoncement {
        background: #007aff;
        width: 65px;
        height: 13px;
        position: absolute;
        top: 9px;
        left: -9px;
    }

    .inbox-m .inbox-box .type-box .type-lbl {
        color: #FFF;
        font-size: 8px;
        font-style: normal;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inbox-m .inbox-box .title-lbl {
        color: #444;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        margin-bottom: 3px;
    }

    .inbox-m .inbox-box .desc-lbl {
        color: #e6e6e6;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        margin-bottom: 3px;
    }

    .inbox-m .inbox-box .date-lbl {
        color: #AAA;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
    }


/*----------------------------------------------------
    # Inbox Desc
------------------------------------------------------*/

.inbox-desc-m {
    padding: 20px 20px 60px;
}

    .inbox-desc-m .title-box {
        background: var(--third-background);
        height: 30px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        font-size: 14px;
    }

    .inbox-desc-m .date-lbl {
        color: #AAA;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        text-align: end;
    }

    .inbox-desc-m .desc-lbl {
        color: #ACACAC;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin: 10px 0;
    }

/*----------------------------------------------------
    # Profile
------------------------------------------------------*/


.gender-select-wrapper {
    position: relative;
    border: 1px solid #DFDFDF;
    border-radius: 6px;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 11px;
    padding-right: 30px; /* make space for the icon */
}


.profile-m .gender-m.form-control {
    width: 100%;
    height: 50px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
    border-color: transparent;
    background-image: url('../assets/img/dropdown_icon.png');
}

/* Style the container */
.profile-m #dateDropdownDiv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 10px;
}

/* Shared wrapper */
.profile-m .custom-select-wrapper {
    position: relative;
    width: 30%;
}

    /* Hide native dropdown arrow */
    .profile-m .custom-select-wrapper select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #FFF;
        padding: 11px 14px;
        border: 1px solid #DFDFDF;
        border-radius: 6px;
        width: 100%;
        font-size: 14px;
        color: #000;
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 12px;
    }

    /* Apply background image only to select inside wrappers WITHOUT .no-icon */
    .profile-m .custom-select-wrapper:not(.no-icon) select {
        background-image: url('../assets/img/dropdown_icon.png');
    }

    /* Make sure Day select stays plain */
    .profile-m .custom-select-wrapper.no-icon select {
        background-image: none;
    }

    /* Optional: Style placeholder option */
    .profile-m .custom-select-wrapper select option:first-child {
        color: #AAA;
    }


.profile-m .save-btn {
    width: 100%;
    height: 50px;
    border-radius: 25px;
    border: 0;
    font-size: 18px;
    font-weight: 900;
    line-height: normal;
    margin-top: 30px;
    outline: none;
    color: #00AAE5;
    background: #FFDE11;
}

/*----------------------------------------------------
    # Rail Reward Point
------------------------------------------------------*/

.rewards-m .reward-box,
.redeemPoint-m .reward-box {
    background: linear-gradient(180deg, #0180A9 100%, #005AA0 0%);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
}

    .rewards-m .reward-box .title-lbl,
    .redeemPoint-m .reward-box .title-lbl {
        font-size: 14px;
        color: #FFF;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 3px;
    }

    .rewards-m .reward-box .desc-lbl,
    .redeemPoint-m .reward-box .desc-lbl {
        font-size: 14px;
        color: #FFF;
        font-weight: 300;
        line-height: normal;
        margin-bottom: 3px;
    }

    .rewards-m .reward-box .point-lbl,
    .redeemPoint-m .reward-box .point-lbl {
        font-size: 18px;
        color: #FFF;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 3px;
    }

    .rewards-m .reward-box .reward-btn {
        width: auto;
        height: 38px;
        border-radius: 12px;
        color: #444;
        border: 0;
        font-size: 16px;
        font-weight: 400;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
        margin: 10px 10px 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        outline: none;
    }

.rewards-m .points-container {
    max-height: 300px;
    overflow-y: auto;
}

.rewards-m .history-box {
    background: #FFF;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
    padding: 15px;
    border-radius: 6px;
    margin-top: 8px;
}

    .rewards-m .history-box .date-lbl {
        color: #AAA;
        margin-top: 5px;
    }

.redeemPoint-m .redeem-title {
    color: var(--third-background);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 10px;
}

.redeemPoint-m .input-box {
    margin-bottom: 3px;
}

.redeemPoint-m .btn-money {
    background: #ACACAC;
    color: #444;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 16px;
    border-radius: 6px;
    height: 50px;
    padding: 0 10px;
    text-align: center;
}

.redeemPoint-m .redeem-desc {
    font-size: 12px;
}

.redeemPoint-m .range-slider {
    width: 100%;
    margin: 0 auto;
    position: relative;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

.redeemPoint-m #redeemRange {
    -webkit-appearance: none;
    width: 100%;
    background: #ACACAC;
    border-radius: 4px;
}

    .redeemPoint-m #redeemRange:focus {
        outline: none;
    }

    .redeemPoint-m #redeemRange::before, #range::after {
        position: absolute;
        top: 2rem;
        color: #333;
        font-size: 14px;
        line-height: 1;
        padding: 3px 5px;
        background-color: #ACACAC;
        border-radius: 4px;
    }

    .redeemPoint-m #redeemRange::after {
        right: 0;
        content: attr(data-max);
    }

    .redeemPoint-m #redeemRange::-webkit-slider-runnable-track {
        width: 100%;
        height: .8rem;
        cursor: pointer;
        animate: 0.2s;
        background: linear-gradient(90deg, #0180A9 var(--range-progress), #ACACAC var(--range-progress));
        border-radius: 1rem;
    }

    .redeemPoint-m #redeemRange::-webkit-slider-thumb {
        -webkit-appearance: none;
        box-shadow: 0 1px 3px rgba(0,0,255,.3);
        border-radius: 50%;
        background: var(--third-background);
        cursor: pointer;
        height: 20px;
        width: 20px;
        transform: translateY(calc(-50% + 8px));
    }

.redeemPoint-m #tooltip {
    position: absolute;
    bottom: -4px;
}

    .redeemPoint-m #tooltip span {
        position: absolute;
        text-align: center;
        display: block;
        line-height: 1;
        color: #444;
        font-size: 16px;
        left: 50%;
        transform: translate(-50%, 0);
    }


.redeemPoint-m .redeem-btn,
.redeemSuccess-modal .redeemSuccess-content .ok-btn {
    width: 230px;
    height: 42px;
    border-radius: 191px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-top: 30px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
    outline: none;
}

.redeemConfirm-modal,
.redeemSuccess-modal {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .redeemConfirm-modal.open,
    .redeemSuccess-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .redeemConfirm-modal .redeemConfirm-content,
    .redeemSuccess-modal .redeemSuccess-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        max-width: 264px;
        width: 100%;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
    }

        .redeemConfirm-modal .redeemConfirm-content h5 {
            text-align: center;
            color: #000;
            font-weight: 700;
            line-height: normal;
            margin-bottom: 20px;
        }

        .redeemSuccess-modal .redeemSuccess-content h5 {
            text-align: center;
            color: #4B6CB7;
            font-weight: 700;
            line-height: normal;
            margin-bottom: 20px;
        }

        .redeemConfirm-modal .redeemConfirm-content p,
        .redeemSuccess-modal .redeemSuccess-content p {
            font-size: 12px;
            line-height: normal;
            font-weight: 300;
            text-align: center;
            margin-bottom: 30px;
        }

        .redeemSuccess-modal .redeemSuccess-content .point-desc {
            font-size: 12px;
            line-height: normal;
            font-weight: 300;
            text-align: center;
            color: #4B6CB7;
            margin-bottom: 10px;
        }

        .redeemConfirm-modal .redeemConfirm-content .no-btn {
            width: 107px;
            padding: 8px;
            border: 0;
            outline: 0;
            color: var(--third-background);
            background: #FFF;
            margin: 0 auto;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        }

        .redeemConfirm-modal .redeemConfirm-content .yes-btn {
            width: 107px;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            margin: 0 auto;
            background: var(--third-background);
            margin-left: 10px;
        }

/*----------------------------------------------------
    # Change Password
------------------------------------------------------*/

.changePswd-m .save-btn {
    width: 230px;
    height: 42px;
    border-radius: 191px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-top: 30px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
}

/*----------------------------------------------------
    # Frineds & Family
------------------------------------------------------*/

.ff-m {
    position: relative;
}

    .ff-m .ff-box,
    .addff-m .ff-box {
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
        border-radius: 6px;
        margin: 8px 0;
    }

    .ff-m .name-lbl {
        color: #444;
        word-break: break-word;
        font-size: 14px;
    }

    .ff-m .ic-lbl {
        color: inherit;
        word-break: break-word;
        font-size: 14px;
        text-decoration: none;
    }

    .ff-m .add-btn {
        width: 366px;
        height: 50px;
        border: 0;
        font-size: 18px;
        font-weight: 900;
        line-height: normal;
        color: #00AAE5;
        border-radius: 25px;
        background: #FFDE11;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        outline: none;
    }

.addff-m .gender-m.form-control,
.editff-m .gender-m.form-control {
    width: 100%;
    height: 50px;
    border-radius: 6px;
    border: 1px solid #DFDFDF;
    border-color: transparent;
    background-image: url(../assets/img/dropdown_icon.png);
    border: 1px solid #DFDFDF;
}

.addff-m #dateDropdownDiv,
.editff-m #dateDropdownDiv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7rem;
    border-color: transparent;
}

    .addff-m #dateDropdownDiv .ff-select-wrapper,
    .editff-m #dateDropdownDiv .ff-select-wrapper {
        position: relative;
        width: 30%;
    }

        /* Hide native dropdown arrow */
        .addff-m #dateDropdownDiv .ff-select-wrapper select,
        .editff-m #dateDropdownDiv .ff-select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: #FFF;
            padding: 11px 14px;
            border: 1px solid #DFDFDF;
            border-radius: 6px;
            width: 100%;
            font-size: 16px;
            font-weight: 400;
            color: rgba(128, 129, 132, 0.50);
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 12px;
        }

        /* Apply dropdown icon unless .no-icon is used */
        .addff-m #dateDropdownDiv .ff-select-wrapper:not(.no-icon) select,
        .editff-m #dateDropdownDiv .ff-select-wrapper:not(.no-icon) select {
            background-image: url('../assets/img/dropdown_icon.png');
        }

        /* Keep Day select plain if no-icon class is present */
        .addff-m #dateDropdownDiv .ff-select-wrapper.no-icon select,
        .editff-m #dateDropdownDiv .ff-select-wrapper.no-icon select {
            background-image: none;
        }

        /* Optional: Style placeholder option */
        .addff-m #dateDropdownDiv .ff-select-wrapper select option:first-child,
        .editff-m #dateDropdownDiv .ff-select-wrapper select option:first-child {
            color: #AAA;
        }


.addff-m .save-btn,
.editff-m .save-btn {
    width: 366px;
    height: 50px;
    border: 0;
    font-size: 18px;
    font-weight: 900;
    line-height: normal;
    outline: none;
    border-radius: 25px;
    background: #FFDE11;
    color: #00AAE5;
}

.addff-m .custom-select-wrapper {
    position: relative;
    width: 30%;
}

    /* Hide native dropdown arrow */
    .addff-m.custom-select-wrapper select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #FFF;
        padding: 11px 14px;
        border: 1px solid #DFDFDF;
        border-radius: 6px;
        width: 100%;
        font-size: 14px;
        color: #000;
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 12px;
    }

/* Apply background image only to select inside wrappers WITHOUT .no-icon */
.addff-m .ff-select-wrapper:not(.no-icon) select {
    background-image: url('../assets/img/dropdown_icon.png');
}

/* Make sure Day select stays plain */
.addff-m .ff-select-wrapper.no-icon select {
    background-image: none;
}

/* Optional: Style placeholder option */
.addff-m .ff-select-wrapper select option:first-child {
    color: #AAA;
}

.addff-m .pass-title,
.editff-m .pass-title {
    color: #6D6E70;
    display: block;
    margin: 1rem 0;
}

/*----------------------------------------------------
    # Concession Registration
------------------------------------------------------*/
.concessionReg-m {
    position: relative;
}

    .concessionReg-m .save-btn {
        width: 366px;
        height: 50px;
        border-radius: 191px;
        border: 0;
        font-size: 18px;
        font-weight: 900;
        color: #00AAE5;
        line-height: normal;
        outline: none;
        letter-spacing: 1px;
    }

.dropdown-disabled {
    position: relative;
    border-radius: 6px;
    fill: var(--Sub-bg, #F7FAFD);
    background-image: url('../assets/img/dropdown_icon.png');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

    .dropdown-disabled input {
        border: none;
        background: transparent;
        outline: none;
        width: 100%;
        font-size: 14px;
        color: #F7FAFD;
        cursor: default;
    }

.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .select-wrapper .identity-type.form-control,
    .select-wrapper .state-m.form-control {
        border: 1px solid #DFDFDF;
        border-radius: 6px;
        appearance: none;
        height: 50px;
    }

    .select-wrapper .dropdown-icon {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        width: 11px;
        height: 11px;
        background-image: url('../assets/img/dropdown_icon.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
    }

.concess_info {
    color: #6D6E70;
    margin: 5px 5px 40px;
}


/*----------------------------------------------------
    # Trip
------------------------------------------------------*/
.ticket {
    padding: 0;
}

    .ticket .trip-container {
        background: #F9F9F9;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        height: 80px;
        padding: 10px 20px;
    }

        .ticket .trip-container > span {
            color: rgba(255, 255, 255, 0.50);
            font-size: 16px;
            font-weight: 400;
            line-height: normal;
            display: block;
        }

    .ticket .part-c {
        color: #58595B;
        line-height: normal;
        font-size: 16px;
    }

    .ticket .p-p {
        padding-top: 8px;
    }

    .ticket .date-container {
        padding: 0px 20px;
        height: 59px;
        background: #FFF;
    }

    .ticket .date-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ticket .date-item {
        text-align: center;
        color: #929497;
        line-height: normal;
        transition: color .3s ease-out;
        height: 59px;
        width: 77px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .ticket .date-item.selected {
            color: #FFF;
            background: var(--third-background);
            font-size: 14px;
            border-radius: 12px;
            font-weight: 900;
        }

        .ticket .date-item > span {
            font-size: 10px;
        }

        .ticket .date-item > .date-t {
            font-size: 14px;
            transition: transform .3s ease-out;
            font-weight: 400;
        }

    .ticket .trip-items-container {
        padding: 20px;
    }

        .ticket .trip-items-container .trip-b:not(:last-child) {
            margin-bottom: 10px;
        }

        .ticket .trip-items-container .trip-item-box {
            border-radius: 12px;
            background: #FFF;
            box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
            width: 100%;
            padding: 16px;
        }

        .ticket .trip-items-container .station {
            font-size: 16px;
            font-weight: 800;
            line-height: normal;
            color: #58595B;
        }

        .ticket .trip-items-container .param {
            font-size: 16px;
            font-weight: 400;
            line-height: normal;
            color: #6D6E70;
        }

        .ticket .trip-items-container .param-da {
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #6D6E70;
        }

        .ticket .trip-items-container .price {
            font-size: 16px;
            font-weight: 800;
            line-height: normal;
            color: var(--third-background);
        }

/*----------------------------------------------------
    # Seat Layout
------------------------------------------------------*/
.seatlayout {
    padding: 0 0px 80px;
    position: relative;
}

    .seatlayout .trip-info {
        padding: 20px 20px;
        background: #FFF;
    }

    .seatlayout .seat-count {
        position: absolute;
        top: 17px;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 0 0 16px 16px;
        background: var(--third-background);
        color: #FFF;
        line-height: normal;
        font-size: 14px;
        width: 49px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        /*z-index: -10;*/
    }

    .seatlayout .station {
        color: #58595B;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
    }

    .seatlayout .param {
        font-size: 16px;
        color: #58595B;
        font-weight: 400;
        line-height: normal;
    }

    .seatlayout .price {
        color: #58595B;
        font-size: 16px;
        font-weight: 900;
        line-height: normal;
    }

    .seatlayout .seat-container {
        background: #FFF;
        border-radius: 12px;
        margin: 24px 20px;
        padding: 14px;
    }

    .seatlayout .seat-category {
        font-size: 14px;
        text-align: center;
        line-height: normal;
    }

    .seatlayout .swiper-wrapper {
        justify-content: center;
        margin: 16px 0;
    }

    .seatlayout .swiper-slide {
        width: auto !important;
    }

    .seatlayout .swiper-button-prev:after,
    .seatlayout .swiper-button-next:after {
        font-size: 14px;
    }

    .seatlayout .swiper-slide-active .category-box {
        background: var(--third-background);
    }

    .seatlayout .category-box {
        border-radius: 34px;
        background: #FFF;
        border: 1px solid #CCC;
        width: 60px;
        height: 20px;
        display: block;
    }

    .seatlayout .seatSwiper {
        width: 85%;
    }

    .seatlayout .swiper-button-next.swiper-button-disabled, .seatlayout .swiper-button-prev.swiper-button-disabled {
        opacity: 0;
    }

    .seatlayout .swiper-button-prev, .seatlayout .swiper-rtl {
        top: 25px;
        left: 0;
    }

    .seatlayout .swiper-button-next,
    .seatlayout .swiper-button-prev {
        color: #444;
        font-weight: 700;
    }

    .seatlayout .swiper-button-next {
        top: 25px;
        right: 0;
    }

    .seatlayout .f-t {
        margin-bottom: 6px;
        line-height: normal;
        font-size: 14px;
        text-align: center;
        color: #6D6E70;
    }

    .seatlayout .forward-bg {
        background: #E9E9E9;
        border-radius: 5px;
        width: 100%;
        height: 9px;
        margin-bottom: 24px;
    }

    .seatlayout .seats {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 30px;
        height: 20%;
    }

        .seatlayout .seats .seat .seat-lbl {
            color: #58595B;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
        }

    .seatlayout .gold-lbl {
        color: #6D6E70;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 900;
        position: absolute;
        top: 47%;
        left: 54%;
        transform: translate(-50%, -50%);
    }

    .seatlayout .seats:last-child {
        margin-bottom: 0;
    }

    .seatlayout .seat {
        width: 20%;
        height: 20%;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        padding: 0px 10px 0px 10px;
        /* temporary */
        /*border: 1px solid #CCC;*/
    }

    .seatlayout .notAvailableSeat {
        width: 20%;
        height: 20%;
        border-radius: 5px;
        text-align: center;
        padding: 0px 10px 0px 10px;
        /* temporary */
        /*border: 1px solid #CCC;*/
    }

    .seatlayout .disableSeat {
        width: 20%;
        height: 20%;
        border-radius: 5px;
        text-align: center;
        padding: 0px 10px 0px 10px;
        /* temporary */
        /*border: 1px solid #CCC;*/
    }

.seatimage {
    height: 100%;
    width: 100%;
}

.seatlayout .walkway {
    width: 80px;
    height: 40px;
}

.seatlayout .seat.selected {
    /*    background-image: url(/mpay/assets/img/selected.png);
    background-position: center center;*/
}

.legend-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .legend-modal.open {
        display: block;
        opacity: 1;
    }

    .legend-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .legend-modal .legend-content {
        background: #FFF;
        height: 100%;
        overflow-y: auto;
    }

    .legend-modal .legend-header {
        position: relative;
        background: #F6F6F6;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        height: 48px;
        padding: 12px 17px;
    }

        .legend-modal .legend-header > span {
            display: block;
            text-align: right;
            font-size: 14px;
            color: var(--secondary-background);
        }

    .legend-modal .legend-body {
        padding: 16px 32px;
    }

        .legend-modal .legend-body h5 {
            font-size: 18px;
            line-height: normal;
            margin-bottom: 24px;
            text-align: center;
            font-weight: 400;
        }

        .legend-modal .legend-body .legend-item {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-bottom: 16px;
        }

            .legend-modal .legend-body .legend-item:last-child {
                margin-bottom: 0;
            }

            .legend-modal .legend-body .legend-item > img {
                width: 40px;
                height: 40px;
            }

            .legend-modal .legend-body .legend-item > span {
                font-size: 14px;
                line-height: normal;
            }

.seatdetail-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
}

    .seatdetail-modal.open {
        display: block;
        opacity: 1;
    }

    .seatdetail-modal .seatdetail-content {
        width: 100%;
        height: 212px;
        padding: 14px 23px 20px;
        border-radius: 24px 24px 0px 0px;
        background: var(--third-background);
    }

    .seatdetail-modal .btn-flex {
        display: flex;
        justify-content: center;
        gap: 22px;
        margin-top: 10px;
    }

    .seatdetail-modal .next-btn {
        border: 0;
        outline: 0;
        width: 100%;
        height: 50px;
        font-weight: 700;
        font-size: 18px;
        line-height: normal;
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00AAE5;
    }

    .seatdetail-modal .seatdetail-btn {
        border: 0;
        outline: 0;
        width: 100%;
        height: 50px;
        background: #FFF;
        font-weight: 700;
        font-size: 18px;
        line-height: normal;
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
        border-radius: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00AAE5;
    }

    .seatdetail-modal .total {
        font-size: 16px;
        font-weight: 400;
        color: #FFF;
        line-height: normal;
    }

    .seatdetail-modal .price {
        font-size: 16px;
        font-weight: 900;
        color: #FFF;
        line-height: normal;
    }

.seatlayout .detail-a {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 42px;
}

    .seatlayout .detail-a .hidden-detail {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 49px;
        height: 30px;
        transform: translate(-50%, -30%);
        border-radius: 12px 12px 0 0;
        background: var(--third-background);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .seatlayout .detail-a .hidden-detail > i {
            color: #FFF;
        }

.seatdetail-modal .item-p {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
}

.seatdetail-modal .header-seatdetail {
    display: none;
    background: #FFF;
    width: 100%;
    height: auto;
    padding: 16px 14px;
    border-bottom: 1px solid #FFF;
    opacity: 0;
    transition: opacity .4s ease-out;
}

    .seatdetail-modal .header-seatdetail:last-child {
        border-bottom: 0;
    }

    .seatdetail-modal .header-seatdetail.open {
        display: block;
        opacity: 1;
    }

    .seatdetail-modal .header-seatdetail .seat-s {
        color: #58595B;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
    }

    .seatdetail-modal .header-seatdetail .seat-p {
        color: #58595B;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
    }


/*-------------------------------------------
    # Passenger Detail
---------------------------------------------*/
.passenger .box {
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
}

.passenger .box-p {
    padding: 14px;
}

.passenger .p-t {
    color: #58595B;
    font-size: 16px;
    font-weight: 900;
    line-height: normal;
}

.passenger .detail-btn {
    color: var(--third-background);
    border-radius: 25px;
    background: #FFF;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    width: 128px;
    border: 0;
    outline: 0;
    padding: 5px;
    margin-top: 8px;
    font-weight: 700;
    font-size: 18px;
}

.passenger .check-c {
    padding-left: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #6D6E70;
}

.passenger .clear-btn {
    font-size: 18px;
    font-weight: 900;
    color: #58595B;
    text-decoration-line: underline;
    text-decoration-style: solid;
}

.passenger .input-box {
    border-radius: 6px;
}

.passenger select {
    width: 100%;
    border: 0;
}

.passenger p {
    color: #FF1E1E;
    line-height: normal;
    font-size: 12px;
    margin-bottom: 0;
}

.passenger #dateDropdownDiv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-color: transparent;
}

    .passenger #dateDropdownDiv select {
        background: #FFF;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
        padding: 11px 14px;
        border-color: transparent;
        width: 30%;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
    }

        .passenger #dateDropdownDiv select:focus {
            border-color: transparent;
        }

        .passenger #dateDropdownDiv select option:first-child {
            color: #AAA;
        }

.passenger span {
    font-size: 16px;
    color: #6D6E70;
}

.passenger .terminal {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #6D6E70;
}

.passenger .apply-btn {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 42px;
    font-weight: 700;
    font-size: 18px;
    border: 0;
    outline: 0;
    line-height: normal;
    color: var(--third-background);
    border-radius: 25px;
    background: #FFF;
}

.passenger .fa-times {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
}

.passenger .confirm-box {
    background: var(--third-background);
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

    .passenger .confirm-box span {
        font-size: 16px;
        color: #FFF;
        line-height: normal;
        font-weight: 700;
        text-align: center;
        display: block;
    }

.passenger .c-p {
    padding: 14px;
}

.passenger .c-p-lbl {
    font-size: 14px;
}

.c-p .mp-btn {
    border: 0;
    outline: 0;
    width: 100%;
    padding: 5px;
    font-weight: 500;
    line-height: normal;
    height: 42px;
    color: var(--third-background);
    margin-top: 13px;
}

.smake-box {
    width: 100%;
    background: #FFF;
    padding: 16px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .smake-box .smp-btn {
        border: 0;
        outline: 0;
        width: 128px;
        padding: 5px;
        font-weight: 500;
        line-height: normal;
        height: 42px;
        color: #444;
    }

    .smake-box .previous-btn {
        background: #FFF;
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
        border: 0;
        outline: 0;
        width: 128px;
        font-weight: 500;
        height: 42px;
        border-radius: 34px;
    }

.seatP-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .seatP-modal.open {
        display: block;
        opacity: 1;
    }

    .seatP-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .seatP-modal .seatP-content {
        height: fit-content;
        background: #FFF;
        position: fixed;
        bottom: 0;
        width: 100%
    }

    .seatP-modal .seatP-header {
        background: #F6F6F6;
        padding: 12px 17px;
    }

        .seatP-modal .seatP-header > span {
            display: block;
            text-align: right;
            font-size: 14px;
            color: var(--secondary-background);
        }

    .seatP-modal .seatP-body {
        padding: 16px 32px;
    }

        .seatP-modal .seatP-body h5 {
            color: var(--third-background);
            font-size: 14px;
            line-height: normal;
            margin-bottom: 16px;
            text-align: center;
        }

        .seatP-modal .seatP-body .circle {
            background: #58595B;
        }

        .seatP-modal .seatP-body .dotted-line {
            border-left: 1px dotted #58595B;
        }

        .seatP-modal .seatP-body .route-name {
            color: #444;
            font-weight: 300;
            font-size: 14px;
        }

        .seatP-modal .seatP-body .trans-circle {
            border: 1px solid #58595B;
        }

        .seatP-modal .seatP-body .s-t {
            font-size: 14px;
            line-height: normal;
            font-weight: 300;
        }

/*----------------------------------------------------
    # Bank Card Transaction
------------------------------------------------------*/
.bankCard-m {
    padding: 1px 2px;
}

    .bankCard-m .img-upload-wrap {
        position: relative;
        padding: 25px 25px 0;
    }

    .bankCard-m .add-fle-wrap {
        text-align: center;
    }

        .bankCard-m .add-fle-wrap .add-btn {
            font-weight: 100;
            border-radius: 6px;
            background: #FFF;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            padding: 60px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 161px;
        }

            .bankCard-m .add-fle-wrap .add-btn .plus-circle {
                background-color: var(--primary-background);
                border-radius: 50%;
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .bankCard-m .add-fle-wrap .add-btn .plus-circle i {
                    color: #58595B;
                }


    .bankCard-m hr {
        margin: 1rem 0;
    }

    .bankCard-m .transaction-wrap {
        padding: 10px 32px;
        font-size: 16px;
        color: #58595B
    }

        .bankCard-m .transaction-wrap .charge-lbl {
            font-size: 16px;
            text-align: end;
            color: #58595B;
        }

.addCard-m .add-btn {
    width: 100%;
    height: 50px;
    border-radius: 25px;
    border: 0;
    font-size: 18px;
    font-weight: 900;
    line-height: normal;
    margin-top: 30px;
    outline: none;
    color: #00AAE5;
}

.addCard-m .card-img {
    width: 270px;
    height: 100%;
    margin-bottom: 30px;
}

.fa-plus-circle {
    color: #FFF;
    font-size: 25px !important;
}

.custom-card {
    width: 280px;
    height: 161px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding-top: 60px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    margin: auto;
}

.yellow-square {
    width: 49px;
    height: 34px;
    background-color: var(--primary-background);
    margin-bottom: 10px;
}

.card-number {
    border: 1px solid var(--Negative-Text, #EC1C24);
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    color: #333;
}

.valid-thru {
    color: #58595B;
    text-align: center;
    font-size: 6px;
    font-style: normal;
    line-height: normal;
}

.expiry {
    color: var(--Primary-Text, #58595B);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
}

.expiry-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.img-upload-wrap {
    overflow-x: hidden;
    scrollbar-width: none;
    width: 100%;
    height: 195px;
}

.points-container {
    max-height: 545px;
    overflow-y: auto;
}

.history-box {
    background: #FFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 10px 20px;
    border-radius: 6px;
    margin-top: 20px;
    margin-bottom: 8px;
    height: 70px;
    width: 366px;
}

.date-lbl {
    color: #58595B;
    font-size: 16px;
    font-style: normal;
    line-height: normal;
}

.history-title {
    color: #58595B;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

/*----------------------------------------------------
    # Helpful Link
------------------------------------------------------*/
.helpful-m {
    padding: 20px;
}

    .helpful-m .helpful-card {
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 10px;
    }

    .helpful-m .helpful-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #DFDFDF;
        text-decoration: none;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.15px;
    }

        .helpful-m .helpful-link:last-child {
            border-bottom: none;
        }

    .helpful-m .follow-lbl {
        margin: 20px 15px 10px;
        font-weight: 600;
        color: #666;
    }

    .helpful-m .item-name {
        color: #6D6E70;
    }


/*----------------------------------------------------
    # Booking History
------------------------------------------------------*/

.bookingHeader-m {
    width: 100%;
}

    .bookingHeader-m .tabs-justify {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        height: 60px;
        background: #00AAE5;
    }

    .bookingHeader-m a.tab {
        position: relative;
        display: inline-block;
        transition: all ease .3s;
        padding: 1rem 2rem;
        transform: translate3d(0, 0, 0);
        white-space: nowrap;
        cursor: pointer;
        color: #FFF !important;
        font-size: 18px;
        text-align: center;
        width: 171px;
    }

        .bookingHeader-m a.tab.active {
            border-bottom: 4px solid #FFDE11;
            color: #FFDE11;
        }

.bookingHistory-m .service-type {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 60px;
    gap: 5px;
    margin-bottom: 15px;
}

    .bookingHistory-m .service-type a.service-item {
        width: 175px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #444;
        font-size: 18px;
        border-radius: 6px;
        cursor: pointer;
        border-radius: 25px;
        border: 1px solid var(--Outline-Field-box, #DFDFDF);
        background: #FFF;
    }

        .bookingHistory-m .service-type a.service-item.active {
            border-radius: 25px;
            background: #00AAE5;
            color: #FFF;
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            border: none;
            letter-spacing: 0.15px;
        }

.bookingHistory-m {
    padding: 10px 32px 90px;
    overflow-y: auto;
}

    .bookingHistory-m .partial-content {
        display: none;
    }

        .bookingHistory-m .partial-content.active {
            display: block;
        }

    .bookingHistory-m .booking-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
        position: relative;
        margin-bottom: 20px;
    }

        .bookingHistory-m .booking-box .status-box.confirmed {
            border-radius: 6px;
            background: var(--Positive-Text, #00A551);
            width: 97px;
            height: 32px;
            position: absolute;
            top: 15px;
            left: -9px;
            display: flex;
            justify-content: center;
        }

        .bookingHistory-m .booking-box .status-box.refunded {
            background: #E15050;
            width: 97px;
            height: 32px;
            border-radius: 6px;
            position: absolute;
            top: 15px;
            left: -9px;
            display: flex;
            justify-content: center;
        }

        .bookingHistory-m .booking-box .status-box.active {
            background: #00AAE5;
            width: 97px;
            height: 32px;
            border-radius: 6px;
            position: absolute;
            top: 15px;
            left: -9px;
            display: flex;
            justify-content: center;
        }

        .bookingHistory-m .booking-box .status-box .status-lbl {
            color: #FFF;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .bookingHistory-m .bold-lbl {
        font-size: 14px;
        color: #58595B;
        font-weight: 700;
        text-align: end;
    }

    .bookingHistory-m .view-date {
        font-size: 14px;
        font-weight: 700;
        text-align: start;
        color: #58595B;
    }

    .bookingHistory-m .grey-bold {
        color: var(--Secondary-Text, #6D6E70);
        font-size: 16px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
        letter-spacing: 0.15px;
    }

    .bookingHistory-m .lbl {
        font-size: 14px;
        color: #444;
        font-weight: 300;
        text-align: end;
    }

    .bookingHistory-m .timeline-container {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 400;
        color: #58595B;
    }

    .bookingHistory-m .routeline,
    .ticket-m .routeline,
    .purchaseAddon-m .booking-box-a .routeline,
    .bookingdetail-m .bookingdetail-box .routeline,
    .summary-m .bookingdetail-box .routeline {
        position: relative;
    }

        .bookingHistory-m .routeline .circle,
        .ticket-m .routeline .circle,
        .purchaseAddon-m .booking-box-a .routeline .circle,
        .bookingdetail-m .bookingdetail-box .routeline .circle,
        .summary-m .bookingdetail-box .routeline .circle {
            position: absolute;
            top: 8px;
            left: 0;
            width: 9px;
            height: 9px;
            background: transparent;
            border: 1px solid #58595B;
            border-radius: 50%;
            z-index: 1;
        }

            .bookingHistory-m .routeline .circle::before,
            .ticket-m .routeline .circle::before,
            .purchaseAddon-m .booking-box-a .routeline .circle::before,
            .bookingdetail-m .bookingdetail-box .routeline .circle::before,
            .summary-m .bookingdetail-box .routeline .circle::before {
                content: "";
                position: absolute;
                top: 1px;
                left: 1px;
                width: 5px;
                height: 5px;
                background: #58595B;
                border-radius: 50%;
                z-index: 2;
            }

        .bookingHistory-m .routeline .route-name,
        .bookingHistory-m .businfo .route-name,
        .ticket-m .routeline .route-name,
        .ticket-m .businfo .route-name,
        .purchaseAddon-m .booking-box-a .routeline .route-name,
        .purchaseAddon-m .booking-box-a .businfo .route-name,
        .bookingdetail-m .bookingdetail-box .routeline .route-name,
        .bookingdetail-m .bookingdetail-box .businfo .route-name,
        .summary-m .bookingdetail-box .routeline .route-name,
        .summary-m .bookingdetail-box .businfo .route-name {
            color: #58595B;
            font-size: 16px;
            line-height: normal;
            padding-left: 17px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
        }

        .bookingHistory-m .routeline .dotted-line,
        .ticket-m .routeline .dotted-line,
        .purchaseAddon-m .booking-box-a .routeline .dotted-line,
        .bookingdetail-m .bookingdetail-box .routeline .dotted-line,
        .summary-m .bookingdetail-box .routeline .dotted-line {
            border-left: 1px dashed #58595B;
            position: absolute;
            top: 10px;
            left: 4.2px;
            height: 100%;
        }

    .bookingHistory-m .businfo,
    .ticket-m .businfo,
    .purchaseAddon-m .booking-box-a .businfo,
    .bookingdetail-m .bookingdetail-box .businfo,
    .summary-m .bookingdetail-box .businfo {
        position: relative;
    }

        .bookingHistory-m .businfo .trans-circle,
        .ticket-m .businfo .trans-circle,
        .purchaseAddon-m .booking-box-a .businfo .trans-circle,
        .bookingdetail-m .bookingdetail-box .businfo .trans-circle,
        .summary-m .bookingdetail-box .businfo .trans-circle {
            position: absolute;
            top: 9px;
            left: 0;
            width: 9px;
            height: 9px;
            border: 1px solid #58595B;
            border-radius: 50%;
            z-index: 1;
        }
   
    .bookingHistory-m .btn-type {
        color: var(--third-background);
        cursor: pointer;
        margin-left: 20px;
    }

    .bookingHistory-m .ticket-box,
    .bookingHistory-m .ticket-box-past,
    .bookingHistory-m .ticket-box-rail {
        border-radius: 9px;
        background: #F5F5F5;
        padding: 10px;
        margin: 10px 0;
        display: none;
    }

        .bookingHistory-m .ticket-box.expand,
        .bookingHistory-m .ticket-box-past.expand,
        .bookingHistory-m .ticket-box-rail.expand {
            display: block;
        }

    .bookingHistory-m .no-ticket {
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

        .bookingHistory-m .no-ticket .noTicket-lbl {
            color: #AAA;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin: 10px 0;
        }

    .bookingHistory-m .ticket-box-past .refund-desc {
        color: #E15050;
        font-size: 10px;
        margin-top: 10px;
    }

    .bookingHistory-m .booking-box .rail-date {
        font-size: 10px;
        font-weight: 300;
        color: #58595B;
        text-align: end;
        margin-bottom: 10px;
    }

.timeline {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.custom_radio {
    width: 12px;
    height: 12px;
    border: 2px solid #58595B;
    border-radius: 50%;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5.5px 5.5px;
}

    .custom_radio.selected {
        background-image: url('../assets/img/selected_icon.png');
    }

.timeline_terminal {
    font-size: 16px;
    color: #58595B;
    line-height: normal;
}

/*----------------------------------------------------
    # Ticket
------------------------------------------------------*/

.ticket-m {
    padding: 60px 32px 90px;
}

    .ticket-m .ticketid-lbl {
        color: #444;
        font-size: 14px;
        font-weight: 300;
        margin-bottom: 10px;
    }

    .ticket-m .ticket-lbl-detail {
        color: #58595B;
        font-size: 11px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .ticket-m .ticket-lbl {
        color: #58595B;
        font-size: 14px;
        font-weight: 300;
        margin-bottom: 5px;
    }

    .ticket-m .date-lbl {
        color: #58595B;
        font-size: 16px;
        font-weight: 700;
    }

    .ticket-m .time-lbl {
        color: #58595B;
        font-size: 16px;
        font-weight: 700;
    }

    .ticket-m .ticket-detail-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
        position: relative;
        margin: 20px 0px 20px 0px;
        
    }

    .ticket-m .qr-box {
        text-align: center;
    }

        .ticket-m .qr-box .scan-lbl {
            color: #58595B;
            font-size: 16px;
            margin-bottom: 10px;
        }

        .ticket-m .qr-box .qr-code .img-qr {
            width: 158px;
            height: 173px;
        }

    .ticket-m .swiper-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .ticket-m .swiper-wrapper {
        display: flex;
    }

    .ticket-m .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }

    .ticket-m .ets-ticket .swiper-button-next,
    .ticket-m .ets-ticket .swiper-button-prev {
        top: 58%;
    }

    .ticket-m .swiper-button-next:after,
    .ticket-m .swiper-button-prev:after {
        font-family: swiper-icons;
        font-size: 20px;
        text-transform: none !important;
        letter-spacing: 0;
        font-variant: initial;
        line-height: 1;
        color: #000000;
        font-weight: 800;
    }

    .ticket-m .seat-wrapper {
        margin: 10px 0;
    }

        .ticket-m .seat-wrapper .coach-box {
            border: 1px solid #58595B;
            width: 125px;
            height: 70px;
            padding: 12px;
            border-radius: 6px;
            background: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

            .ticket-m .seat-wrapper .coach-box .coach-lbl {
                color: #58595B;
                text-align: center;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 25px;
            }

            .ticket-m .seat-wrapper .coach-box .coach-code-lbl {
                color: #00AAE5;
                font-size: 24px;
                font-style: normal;
                font-weight: 500;
                line-height: 25px;
            }

        .ticket-m .seat-wrapper .seat-box {
            border: 1px solid #58595B;
            width: 200px;
            height: 70px;
            padding: 12px;
            border-radius: 6px;
            background: #FFF;
        }

            .ticket-m .seat-wrapper .seat-box .seat-lbl {
                color: #58595B;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
            }

            .ticket-m .seat-wrapper .seat-box .seat-code-lbl {
                color: #00AAE5;
                font-size: 25px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
            }

            .ticket-m .seat-wrapper .seat-box .seat-desc-lbl {
                color: #58595B;
                font-size: 16px;
                font-style: normal;
            }

    .ticket-m .accordion {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        border-radius: 10px;
        border: 1px solid #444;
        background: #FFF;
    }

        .ticket-m .accordion hr {
            margin: 0 0 10px;
        }

    .ticket-m .accordion-item {
        border: 1px solid #e5f3fa;
        overflow: hidden;
        border-radius: 10px;
    }

    .ticket-m .accordion-header {
        padding: 10px;
        color: #444;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        position: relative;
        background: #FFF;
        border-radius: 10px;
    }

        .ticket-m .accordion-header::after {
            content: "\f0d7";
            font-weight: 800;
            font-family: "FontAwesome";
            width: 20px;
            height: 20px;
            transition: .4s;
            display: inline-block;
            position: absolute;
            right: 20px;
            top: 11px;
            z-index: 1;
        }

        .ticket-m .accordion-header.active {
            background: #FFF;
        }

            .ticket-m .accordion-header.active::after {
                content: "\f00d";
                font-weight: 800;
                font-family: "FontAwesome";
                width: 20px;
                height: 20px;
                transition: .4s;
                display: inline-block;
                position: absolute;
                right: 20px;
                top: 11px;
                z-index: 1;
            }

    .ticket-m .accordion-item .accordion-content {
        padding: 0 25px;
        max-height: 0;
        transition: .5s;
        overflow: hidden;
    }

        .ticket-m .accordion-item .accordion-content .meal-lbl {
            color: #444;
            font-size: 14px;
            font-weight: 400
        }

/*----------------------------------------------------
    # Ticket
------------------------------------------------------*/
.crefund-m {
    padding: inherit;
}

    .refund-m .refund-t-box,
    .crefund-m .refund-t-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
        position: relative;
        margin-bottom: 20px;
    }

        .refund-m .refund-t-box .bold-lbl,
        .crefund-m .refund-t-box .bold-lbl {
            font-size: 16px;
            color: #58595B;
            font-weight: 700;
            text-align: start;
        }

        .refund-m .refund-t-box .lbl,
        .crefund-m .refund-t-box .lbl {
            font-size: 16px;
            color: #58595B;
            font-weight: 400;
            word-wrap: break-word;
        }

        .refund-m .refund-t-box .cr-lbl,
        .crefund-m .refund-t-box .cr-lbl {
            font-size: 12px;
            color: #444;
            font-weight: 300;
            word-wrap: break-word;
        }

    .refund-m .ticket-box,
    .crefund-m .ticket-box {
        border-radius: 9px;
        background: #F5F5F5;
        padding: 15px;
        margin: 10px 0;
    }

        .refund-m .ticket-box .r-check-c {
            padding-left: 10px;
            font-size: 14px;
            font-weight: 300;
            line-height: normal;
        }

.refund-ticket-box {
    border-radius: 9px;
    background: #F5F5F5;
    padding: 15px;
    margin: 10px 0;
}


.refund-m .next-btn,
.crefund-m .confirm-btn {
    width: 366PX;
    height: 50px;
    border-radius: 25px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    outline: none;
    color: #00AAE5;
}

    .refund-m .next-btn:disabled {
        background: #CCC;
        color: #FFF;
    }

.crefund-m .grey-bg {
    background: #E4E4E4;
    height: auto;
    padding: 15px 15px 30px;
    border-radius: 6px;
    margin-bottom: 15px;
    position: relative;
}

    .crefund-m .grey-bg .total-wrap {
        position: absolute;
        bottom: 11px;
        right: 22px;
        display: flex;
        text-align: end;
    }

        .crefund-m .grey-bg .total-wrap .total-lbl {
            font-size: 16px;
            color: #444;
        }

.refund-allowed {
    border-radius: 6px;
    text-align: center;
    margin-top: 10px;
    border: 1px solid #DFDFDF;
    height: 50px;
}

.verification-modal,
.refunded-modal {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .verification-modal.open,
    .refunded-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .verification-modal .verification-content,
    .refunded-modal .refunded-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        max-width: 264px;
        width: 100%;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
    }

        .verification-modal .verification-content h5,
        .refunded-modal .refunded-content h5 {
            text-align: center;
            color: #000;
            font-weight: 700;
            line-height: normal;
            margin-bottom: 20px;
        }

        .verification-modal .verification-content p,
        .refunded-modal .refunded-content p {
            font-size: 12px;
            line-height: normal;
            font-weight: 300;
            text-align: center;
            margin-bottom: 30px;
        }

        .verification-modal .verification-content .cancel-btn {
            width: 107px;
            padding: 8px;
            border: 0;
            outline: 0;
            color: var(--third-background);
            background: #FFF;
            margin: 0 auto;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        }

        .verification-modal .verification-content .proceed-btn,
        .refunded-modal .refunded-content .ok-btn {
            width: 107px;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            margin: 0 auto;
            background: var(--third-background);
            margin-left: 10px;
        }

/*----------------------------------------------------
    # Add On
------------------------------------------------------*/
.purchaseAddon-m {
    padding: 1px 1px;
}

.purchaseAddon-m .booking-box-a {
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 15px;
    position: relative;
    margin-bottom: 20px;
}

    .purchaseAddon-m .booking-box-a .bold-lbl-a {
        font-size: 14px;
        color: #444;
        font-weight: 700;
    }

    .purchaseAddon-m .booking-box-a .lbl-a {
        font-size: 14px;
        color: #444;
        font-weight: 300;
    }

    .purchaseAddon-m .booking-box-a .ticket-box-a {
        border-radius: 6px;
        background: var(--Sub-bg, #F7FAFD);
        padding: 15px;
        margin: 10px 0;
    }

        .purchaseAddon-m .booking-box-a .ticket-box-a .ticket-detail-a {
            margin-bottom: 10px;
        }

        .purchaseAddon-m .booking-box-a .ticket-box-a .grey-lbl-a {
            font-size: 16px;
            color: #58595B;
            font-weight: 400;
        }


.addon-m .header-wrap,
.selectaddon-m .header-wrap,
.comboaddon-m .header-wrap {
    background: var(--third-background);
    border-radius: 8px 8px 0 0;
    padding: 5px;
    color: #FFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.addon-m .addon-box {
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 15px;
    position: relative;
    margin-bottom: 20px;
}

.addon-box .addon-pass-box {
    border-radius: 6px;
    background: var(--Sub-bg, #F7FAFD);
    padding: 15px;
    margin: 10px 0;
}

    .addon-m .addon-box .psg-lbl {
        color: #58595B;
        font-weight: 400;
        font-size: 16px;
    }

    .addon-m .addon-box .addon-lbl {
        color: #444;
        font-size: 14px;
        font-weight: 400
    }

    .addon-m .addon-box .addon-items {
        margin-top: 10px;
    }

    .addon-m .addon-box .addon-status {
        color: #28D64E;
        font-size: 12px;
    }

    .addon-m .addon-box .remove-box {
        background: #E15050;
        padding: 5px;
        color: #444;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        border-radius: 6px;
        text-align: center;
        font-weight: 500;
        line-height: normal;
    }

    .addon-m .addon-box #new-adddon {
        display: block;
    }

    .addon-m .addon-box .select-add-btn {
        width: 204px;
        height: 50px;
        border-radius: 25px;
        border: 0;
        font-size: 18px;
        font-weight: 900;
        margin-right: 10px;
        outline: none;
        color: #00AAE5;
    }

    .addon-m .addon-box .remove-all-btn {
        width: 145px;
        height: 30px;
        border-radius: 6px;
        border: 0;
        font-size: 12px;
        font-weight: 500;
        margin-right: 10px;
        background: #E15050;
        outline: none;
    }

.addon-m .proceed-pymt-btn {
    width: 366px;
    height: 50px;
    border-radius: 25px;
    border: 0;
    font-size: 18px;
    font-weight: 900;
    line-height: normal;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    outline: none;
    color: #00AAE5;
}

.selectaddon-m .slideshow-container,
.comboaddon-m .slideshow-container-cmb-a {
    max-width: 1000px;
    position: relative;
    margin: auto;
    overflow: hidden;
}

.selectaddon-m .prev-meal, .next-meal,
.comboaddon-m .prev-meal-a, .next-meal-a {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    display: flex;
}

    .selectaddon-m .prev-meal.hidden, .selectaddon-m .next-meal.hidden,
    .comboaddon-m .prev-meal-a.hidden, .comboaddon-m .next-meal-a.hidden {
        display: none;
    }

.selectaddon-m .next-meal,
.comboaddon-m .next-meal-a {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.selectaddon-m .prev-ComboItem, .next-ComboItem,
.comboaddon-m .prev-ComboItem-a, .next-ComboItem-a {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    display: flex;
}

    .selectaddon-m .prev-ComboItem.hidden, .selectaddon-m .next-ComboItem.hidden,
    .comboaddon-m .prev-ComboItem-a.hidden, .comboaddon-m .next-ComboItem-a.hidden {
        display: none;
    }

.selectaddon-m .next-ComboItem,
.comboaddon-m .next-ComboItem-a {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.selectaddon-m .meal-type,
.comboaddon-m .meal-type-a {
    display: none;
    transition: opacity 0.6s ease;
    opacity: 0;
}

    .selectaddon-m .meal-type.show,
    .comboaddon-m .meal-type-a.show {
        display: block;
        opacity: 1;
    }

.selectaddon-m .meal-lbl,
.comboaddon-m .meal-lbl-a {
    height: 35px;
    text-align: center;
    padding: 16px;
}

.selectaddon-m .meal-wrap,
.comboaddon-m .combo-wrap {
    margin-top: 20px;
}

    .selectaddon-m .meal-wrap .combo-meal-item-box {
        background: #FFF;
        padding: 5px 15px 15px;
        height: 173px;
        width: 100%;
        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25), 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .selectaddon-m .meal-wrap .meal-item-box,
    .comboaddon-m .combo-wrap .combo-item-box {
        padding: 5px 15px;
        height: 225px;
        width: 100%;
        border-radius: 12px;
        position: relative;
    }

        .selectaddon-m .meal-wrap .combo-meal-item-box .meal-img,
        .selectaddon-m .meal-wrap .meal-item-box .meal-img,
        .comboaddon-m .combo-wrap .combo-item-box .c-meal-img {
            height: 80px;
            width: 80px;
            object-fit: cover;
        }

    .selectaddon-m .meal-wrap .combo-meal-item-box .meal-name-lbl {
        font-size: 12px;
        color: #444;
        font-weight: 400;
        margin: 5px 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .selectaddon-m .meal-wrap .meal-item-box .meal-name-lbl,
    .comboaddon-m .combo-wrap .combo-item-box .combo-name-lbl {
        font-size: 12px;
        color: #444;
        font-weight: 400;
        margin: 5px 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .selectaddon-m .meal-wrap .combo-meal-item-box .price-wrap .price-meal-lbl {
        color: #AAA;
        font-size: 14px;
        position: absolute;
        bottom: 12px;
        left: 12px;
    }

    .selectaddon-m .meal-wrap .combo-meal-item-box .price-wrap .info-img {
        position: absolute;
        bottom: 12px;
        right: 12px;
    }

    .selectaddon-m .meal-wrap .combo-meal-item-box .added-wrap {
        position: absolute;
        top: 0;
        background: #AAA;
        height: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px 12px 0 0;
        width: 100%;
        font-size: 12px;
        color: #444;
    }

    .selectaddon-m .meal-wrap .meal-item-box .info-img,
    .comboaddon-m .combo-wrap .combo-item-box .info-img {
        object-fit: contain;
    }


.selectaddon-m .hidden {
    display: none;
}

.selectaddon-m .meal-wrap {
    display: none;
}

    .selectaddon-m .meal-wrap.show {
        display: block;
    }

    .selectaddon-m .meal-wrap .meal-item-box .price-wrap,
    .comboaddon-m .combo-wrap .combo-item-box .pax-wrap {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .selectaddon-m .meal-wrap .meal-item-box .price-meal-lbl {
        color: #AAA;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .selectaddon-m .meal-wrap .meal-item-box .qty-wrap {
        display: flex;
        justify-content: center;
        border-radius: 4px;
        overflow: hidden;
    }

        .selectaddon-m .meal-wrap .meal-item-box .qty-wrap .minus-btn {
            background: var(--primary-background);
            color: #444;
            border: none;
            cursor: pointer;
            font-size: 20px;
            width: 30px;
            height: auto;
            text-align: center;
            transition: background-color 0.2s;
            border-radius: 6px 0 0 6px;
        }

        .selectaddon-m .meal-wrap .meal-item-box .qty-wrap .plus-btn {
            background: var(--primary-background);
            color: #444;
            border: none;
            cursor: pointer;
            font-size: 20px;
            width: 30px;
            height: auto;
            text-align: center;
            transition: background-color 0.2s;
            border-radius: 0 6px 6px 0;
        }

            .selectaddon-m .meal-wrap .meal-item-box .qty-wrap .minus-btn:disabled,
            .selectaddon-m .meal-wrap .meal-item-box .qty-wrap .plus-btn:disabled {
                background: #AAA;
                color: #FFF;
            }

            .selectaddon-m .meal-wrap .meal-item-box .qty-wrap .minus-btn:focus,
            .selectaddon-m .meal-wrap .meal-item-box .qty-wrap .plus-btn:focus {
                outline: none;
            }

        .selectaddon-m .meal-wrap .meal-item-box .qty-wrap .input-box {
            width: 50px;
            text-align: center;
            border: none;
            padding: 8px 10px;
            font-size: 14px;
            outline: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

.comboaddon-m .combo-wrap .combo-item-box .pax-bg {
    width: 85px;
    padding: 5px;
    color: #444;
    background: #E4E4E4;
    font-size: 14px;
    text-align: center;
}

.btn-wrapper {
    position: absolute;
    bottom: 0;
    height: 66px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-wrapper .cancel-btn {
        width: 180px;
        padding: 8px;
        border: 0;
        outline: 0;
        color: #444;
        font-weight: 700;
        background: #FFF;
        color: var(--third-background);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
    }

    .btn-wrapper .confirm-btn,
    .btn-wrapper .proceed-btn {
        width: 180px;
        padding: 8px;
        border: 0;
        outline: 0;
        color: #FFF;
        color: #444;
        margin-left: 10px;
        font-weight: 700;
    }

.descAddOn-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .descAddOn-modal.open {
        display: block;
        opacity: 1;
    }

    .descAddOn-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }


    .descAddOn-modal .descAddOn-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

.descaddon-m {
    padding: 60px 0;
}

    .descaddon-m .desc-box {
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
    }

        .descaddon-m .desc-box .name-box {
            background: var(--third-background);
            border-radius: 4px 4px 0 0;
            padding: 3px 8px;
            color: #FFF;
            font-size: 12px;
            font-weight: 700;
        }

        .descaddon-m .desc-box .img-wrap {
            text-align: center;
            margin: 40px 0;
        }

        .descaddon-m .desc-box .meal-img {
            width: 50%;
            height: 50%;
        }

        .descaddon-m .desc-box .desc-lbl {
            font-size: 14px;
            color: #444;
            font-weight: 400;
            margin: 0 40px 40px;
        }

/*----------------------------------------------------
    # Booking Detail & Summary
------------------------------------------------------*/

.bookingdetail-m {
    padding: 20px;
    background: #F9F9F9;
}

    .bookingdetail-m .bookingdetail-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
        margin-bottom: 15px;
    }

        .bookingdetail-m .bookingdetail-box .depart-lbl,
        .summary-m .bookingdetail-box .depart-lbl {
            color: #58595B;
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .bookingdetail-m .bookingdetail-box .book-lbl,
        .bookingdetail-m .total-b-wrap .book-lbl,
        .summary-m .bookingdetail-box .book-lbl {
            font-size: 16px;
            font-weight: 400;
            color: #6D6E70;
        }

    .bookingdetail-m .total-b-wrap {
        padding: 15px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

.total-summary-wrap {
    padding: 15px 0;
    flex-direction: column;
    height: 255px;
    width: 100%;
    background: var(--third-background);
    position: fixed;
    bottom: 0;
    display: flex;
    border-radius: 24px 24px 0px 0px;
    padding: 30px 20px;
}

    .total-summary-wrap .pymt-lbl,
    .total-summary-wrap .book-lbl {
        color: #F9F9F9;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
    }

    .bookingdetail-m .total-b-wrap .pymt-btn,
    .total-summary-wrap .bhistory-btn {
        width: 100%;
        padding: 8px;
        border: 0;
        outline: 0;
        color: var(--third-background);
        font-weight: 700;
    }

.cancelbooking-modal,
.confirmbooking-modal,
.expiredbooking-modal {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cancelbooking-modal.open,
    .confirmbooking-modal.open,
    .expiredbooking-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .cancelbooking-modal .cancelbooking-content,
    .confirmbooking-modal .confirmbooking-content,
    .expiredbooking-modal .expiredbooking-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        max-width: 264px;
        width: 100%;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
    }

        .cancelbooking-modal .cancelbooking-content h5,
        .confirmbooking-modal .confirmbooking-content h5,
        .expiredbooking-modal .expiredbooking-content h5 {
            text-align: center;
            color: #000;
            font-weight: 700;
            line-height: normal;
            margin-bottom: 20px;
        }

        .cancelbooking-modal .cancelbooking-content p,
        .confirmbooking-modal .confirmbooking-content p,
        .expiredbooking-modal .expiredbooking-content p {
            font-size: 12px;
            line-height: normal;
            font-weight: 300;
            text-align: center;
            margin-bottom: 30px;
        }

        .cancelbooking-modal .cancelbooking-content .no-btn {
            width: 107px;
            padding: 8px;
            border: 0;
            outline: 0;
            color: var(--third-background);
            background: #FFF;
            margin: 0 auto;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        }

        .cancelbooking-modal .cancelbooking-content .yes-btn {
            width: 107px;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            margin: 0 auto;
            background: var(--third-background);
            margin-left: 10px;
        }

        .confirmbooking-modal .confirmbooking-content .ok-btn,
        .expiredbooking-modal .expiredbooking-content .ok-btn {
            width: 90%;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            margin: 0 auto;
            background: var(--third-background);
            margin-left: 10px;
        }

.summary-m {
    max-height: calc(100vh - 230px);
    overflow-y: auto;
    padding: 20px 20px 150px;
}

    .summary-m .summary-wrapper {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }

        .summary-m .summary-wrapper .bookingdetail-box {
            padding: 15px;
        }

        .summary-m .summary-wrapper .railpoint-box {
            /*background: #FFF;*/
            padding: 15px;
        }

            .summary-m .summary-wrapper .railpoint-box .railpoint-desc-lbl {
                /*color: #444;*/
                font-size: 12px;
                font-weight: 700;
            }

    .summary-m .total-summary-wrap .pymt-lbl {
        font-size: 12px;
        font-weight: 300;
        color: #444;
    }

/*----------------------------------------------------
    # Payment GateWay
------------------------------------------------------*/

.pymtgateway-m {
    padding: 0;
}

    .pymtgateway-m .pymtgateway-box {
        background: #FFF;
        padding: 20px;
    }

        .pymtgateway-m .pymtgateway-box .pymtgateway-item {
            padding: 0 10px;
            border-bottom: 1px solid #AAA;
            height: 60px;
            display: grid;
            align-items: center;
        }

            .pymtgateway-m .pymtgateway-box .pymtgateway-item .pymt-img {
                width: 40px;
            }

            .pymtgateway-m .pymtgateway-box .pymtgateway-item .pymtgateway-lbl {
                font-size: 14px;
                color: #444;
            }

    .pymtgateway-m .total-pymt-wrap {
        border-radius: 24px 24px 0px 0px;
        background: #FFF;
        box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.25);
        height: 180px;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 30px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

/*----------------------------------------------------
    # Insurance
------------------------------------------------------*/
.insurance-m {
    padding: 0
}

    .insurance-m .ins-content {
        max-height: calc(100vh - 230px);
        overflow-y: auto;
        padding-bottom: 100px;
    }


    .insurance-m .ins-destail-box {
        padding: 20px;
        background: #F9F9F9;
    }

    .insurance-m .routeline {
        position: relative;
    }

        .insurance-m .routeline .circle {
            position: absolute;
            top: 8px;
            left: 0;
            width: 9px;
            height: 9px;
            background: transparent;
            border: 1px solid #58595B;
            border-radius: 50%;
            z-index: 1;
        }

            .insurance-m .routeline .circle::before {
                content: "";
                position: absolute;
                top: 1px;
                left: 1px;
                width: 5px;
                height: 5px;
                background: #58595B;
                border-radius: 50%;
                z-index: 2;
            }


        .insurance-m .routeline .route-name,
        .insurance-m .businfo .route-name {
            color: #58595B;
            font-size: 16px;
            line-height: normal;
            padding-left: 17px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            display: -webkit-box;
        }

        .insurance-m .routeline .dotted-line {
            border-left: 1px dashed #58595B;
            position: absolute;
            top: 10px;
            left: 4.2px;
            height: 100%;
        }

    .insurance-m .businfo {
        position: relative;
    }

        .insurance-m .businfo .trans-circle {
            position: absolute;
            top: 9px;
            left: 0;
            width: 9px;
            height: 9px;
            border: 1px solid #58595B;
            border-radius: 50%;
            z-index: 1;
        }

    .insurance-m .total-lbl {
        color: #58595B;
        font-size: 16px;
    }

    .insurance-m .ins-header {
        background: var(--third-background);
        padding: 5px 10px;
        color: #FFF;
        font-size: 16px;
        border: 1px solid #DDD;
        font-weight: 700;
    }

    .insurance-m .premiumbasic-box {
        background: #FFF;
        padding: 10px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 6px;
        margin-bottom: 10px;
        cursor: pointer;
    }

        .insurance-m .premiumbasic-box.active {
            border: 2px solid #00AAE5;
        }

    .insurance-m .ins-name {
        font-size: 16px;
        color: #444;
        font-weight: 700;
    }

    .insurance-m .premiumbasic-box.active .ins-name {
        color: var(--third-background);
    }

    .insurance-m .ins-price {
        font-size: 16px;
        color: #444;
        font-weight: 400;
    }

    .insurance-m .premiumbasic-box.active .ins-price {
        color: var(--third-background);
    }

    .insurance-m .ins-desc {
        color: #6D6E70;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
    }

    .insurance-m .tick-ins {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #00A551;
        position: relative;
        margin-right: 9px;
    }

        .insurance-m .tick-ins .tick-in {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .insurance-m .confirm-desc {
        color: #6D6E70;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
    }

    .insurance-m .btn-wrap-ins {
        height: 180px;
        width: 100%;
        background: var(--third-background);
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        border-radius: 24px 24px 0px 0px;
        padding-top: 30px;
    }

        .insurance-m .btn-wrap-ins .btn-no-ins {
            background: #FFF;
            border-radius: 25px;
            color: var(--third-background);
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 170px;
            height: 42px;
            outline: none;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
            border: 0;
            margin-right: 10px;
        }

        .insurance-m .btn-wrap-ins .btn-proceed-ins {
            border-radius: 25px;
            color: var(--third-background);
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 170px;
            height: 42px;
            outline: none;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
            border: 0;
        }

.insplan-m {
    overflow: auto;
}

    .insplan-m .plan-box {
        background: #FFF;
        padding: 10px;
        border-radius: 12px;
        margin-bottom: 15px;
        height: 152px;
        display: flex;
        align-items: center;
    }

        .insplan-m .plan-box .title-lbl {
            color: #58595B;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .insplan-m .plan-box .desc-lbl {
            color: #6D6E70;
            font-size: 14px;
            font-weight: 400;
        }


.premium-modal,
.basic-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .premium-modal.open,
    .basic-modal.open {
        display: block;
        opacity: 1;
    }

    .premium-modal.close,
    .basic-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }


    .premium-modal .premium-content,
    .basic-modal .basic-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

.confirmIns-modal,
.confirmNoIns-modal {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .confirmIns-modal.open,
    .confirmNoIns-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .confirmIns-modal .confirmIns-content,
    .confirmNoIns-modal .confirmIns-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        max-width: 275px;
        width: 100%;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
    }

        .confirmIns-modal .confirmIns-content p,
        .confirmNoIns-modal .confirmIns-content p {
            font-size: 12px;
            line-height: normal;
            font-weight: 300;
            text-align: center;
            margin-bottom: 30px;
        }

        .confirmIns-modal .confirmIns-content .no-ins-btn,
        .confirmNoIns-modal .confirmIns-content .no-ins-btn {
            width: 100%;
            padding: 8px;
            border: 0;
            outline: 0;
            color: var(--third-background);
            background: #FFF;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
            font-weight: 700;
            font-size: 12px;
        }

        .confirmIns-modal .confirmIns-content .yes-ins-btn,
        .confirmNoIns-modal .confirmIns-content .yes-ins-btn {
            width: 100%;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            background: #FFDE11;
            margin-bottom: 10px;
            font-weight: 700;
            font-size: 12px;
            color: var(--third-background);
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        }

/*----------------------------------------------------
    # Invoice
------------------------------------------------------*/
.black-checkbox {
    width: 20px;
    height: 20px;
    background-color: #FFF;
    border: 1px solid #DFDFDF;
    appearance: none;
    cursor: pointer;
    border-radius: 6px;
    position: relative;
}

    .black-checkbox:checked {
        background-color: #00A551;
        border: 1px solid #DFDFDF;
        background-image: url('../assets/img/checked-icon.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 13px 11px;
    }

.register-invoice {
    font-size: 16px;
    color: #6D6E70;
    line-height: normal;
    letter-spacing: 0.15px;
}

/*----------------------------------------------------
    # Komuter Index
------------------------------------------------------*/
.home .k-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home .k-box {
    position: relative;
}

    .home .k-box .k-item {
        position: absolute;
        top: 20px;
        right: 20px;
        left: 20px;
    }

        .home .k-box .k-item h1 {
            color: #FFF;
            font-size: 16px;
            line-height: normal;
            font-weight: 700;
            margin-bottom: 0;
        }

        .home .k-box .k-item hr {
            width: 192px;
            background: #FFF;
            margin: 8px 0;
        }

        .home .k-box .k-item .route-k {
            color: #FFF;
            font-size: 14px;
            line-height: normal;
            width: 225px;
            height: 100%;
        }

    .home .k-box .k-next {
        position: absolute;
        right: 50px;
        top: 62px;
    }
/*----------------------------------------------------
    # Komuter Search
------------------------------------------------------*/
.komutersearch {
    padding: 32px;
}

    .komutersearch .k-searchbox {
        background: #FFF;
        border-radius: 12px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        padding: 20px;
    }

        .komutersearch .k-searchbox .c-ex {
            border-radius: 50%;
            background: #FFF;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.12), 0px 1px 10px 0px rgba(0, 0, 0, 0.20);
            width: 40px;
            height: 40px;
            text-align: center;
            padding: 5px;
            position: absolute;
            top: 36px;
            right: 0;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }

        .komutersearch .k-searchbox .search-btn {
            border: 0;
            outline: 0;
            width: 100%;
            height: 40px;
            padding: 8px;
            font-weight: 700;
            line-height: normal;
            margin-top: 20px;
            color: var(--third-background);
        }

    .komutersearch .map-btn {
        position: relative;
        background: var(--third-background);
        border-radius: 10px;
        color: #FFF;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin-top: 20px;
    }

        .komutersearch .map-btn .map-ic {
            position: absolute;
            left: 80px;
            top: 10px;
        }

.map-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .map-modal.open {
        display: block;
        opacity: 1;
    }

    .map-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .map-modal .map-content {
        background: #FFF;
        height: 100%;
        overflow-y: auto;
    }

    .map-modal .map-header {
        background: var(--third-background);
        position: relative;
        padding: 11px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .map-modal .map-header .map-icon {
            position: absolute;
            top: 26px;
            left: 16px;
        }

        .map-modal .map-header h5 {
            color: #FFF;
            font-size: 18px;
            line-height: normal;
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
        }

    .map-modal .map-body {
        text-align: center;
    }

        .map-modal .map-body > img {
            max-width: 100%;
            height: auto;
        }

/*----------------------------------------------------
    # Komuter Package
------------------------------------------------------*/

.package .p-wrap {
    border-radius: 8px;
    border: 1px solid #DFDFDF;
    background: #FFF;
    padding: 10px;
    margin-top: 25px;
    color: #58595B;
    font-size: 16px;
}

.package a {
    color: #444;
}

/*----------------------------------------------------
    # Komuter Pax
------------------------------------------------------*/
.pax {
    padding: 0;
}

    .pax .pax-container {
        padding: 25px 32px;
    }

    .pax .pax-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 16px;
        margin-bottom: 16px;
    }

        .pax .pax-box .p-type {
            font-size: 16px;
            color: #6D6E70;
            font-weight: 400;
        }

        .pax .pax-box .qty-wrap {
            display: flex;
            justify-content: end;
            border-radius: 4px;
            overflow: hidden;
        }

            .pax .pax-box .qty-wrap .minus-btn {
                background: var(--third-background);
                color: #FFF;
                border: none;
                cursor: pointer;
                font-size: 18px;
                width: 30px;
                height: 36px;
                text-align: center;
                transition: background-color 0.2s;
                border-radius: 6px 0 0 6px;
            }

            .pax .pax-box .qty-wrap .plus-btn {
                background: var(--third-background);
                color: #FFF;
                border: none;
                cursor: pointer;
                font-size: 18px;
                width: 30px;
                height: 36px;
                text-align: center;
                transition: background-color 0.2s;
                border-radius: 0 6px 6px 0;
            }

                .pax .pax-box .qty-wrap .minus-btn:disabled,
                .pax .pax-box .qty-wrap .plus-btn:disabled {
                    background: #AAA;
                    color: #FFF;
                }

                .pax .pax-box .qty-wrap .minus-btn:focus,
                .pax .pax-box .qty-wrap .plus-btn:focus {
                    outline: none;
                }

            .pax .pax-box .qty-wrap .input-box {
                width: 50px;
                text-align: center;
                border: none;
                padding: 8px 10px;
                font-size: 16px;
                border: 1px solid #CCC;
                height: 36px;
                border-radius: 0;
            }

    .pax .btn-wrap {
        height: 180px;
        width: 100%;
        background: var(--third-background);
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        border-radius: 24px 24px 0px 0px;
        padding: 30px;
    }

    .pax .proceed-btn {
        outline: 0;
        border: 0;
        width: 100%;
        height: 40px;
        font-weight: 700;
        line-height: normal;
        font-size: 18px;
        color: var(--third-background);
    }

/*----------------------------------------------------
    # Komuter Booking Details
------------------------------------------------------*/
.details {
    padding: 0;
}

    .details .detail-container {
        padding: 25px 32px;
    }

    .details .bookingdetail-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
    }

        .details .bookingdetail-box .title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 12px;
            line-height: normal;
        }

        .details .bookingdetail-box .detail-info {
            padding: 15px 0;
        }

            .details .bookingdetail-box .detail-info .price {
                font-size: 16px;
                line-height: normal;
                font-weight: 700;
                color: #6D6E70;
                text-align: right;
            }

            .details .bookingdetail-box .detail-info .t-t {
                font-size: 16px;
                color: #6D6E70;
                font-weight: 400;
            }

    .details .total-container {
        height: 180px;
        width: 100%;
        background: var(--third-background);
        position: fixed;
        bottom: 0;
        border-radius: 24px 24px 0px 0px;
        padding: 30px;
    }

        .details .total-container .total-lbl {
            color: #FFF;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
        }

        .details .total-container .payment-btn {
            outline: 0;
            border: 0;
            margin-top: 1rem;
            font-weight: 700;
            line-height: normal;
            width: 100%;
            height: 40px;
            color: var(--third-background);
        }

/*----------------------------------------------------
    # Komuter Booking Summary
------------------------------------------------------*/
.summary {
    padding: 30px 0;
}

    .summary .payment-info {
        padding: 0 20px;
    }

    .summary .border-dotted {
        border-bottom: 1px dotted #444;
        margin: 12px 0;
    }

    .summary .pymt-lbl {
        font-size: 14px;
        font-weight: 400;
        color: #444;
    }

    .summary .total-lbl {
        font-size: 16px;
        font-weight: 700;
        color: #444;
    }

    .summary .ticket-info {
        padding: 20px;
    }

    .summary .route-container {
        margin: 10px 0 20px;
    }

        .summary .route-container .routeline .circle {
            background: #00539F;
        }

        .summary .route-container .routeline .dotted-line {
            background: #00539F;
        }

        .summary .route-container .route-name {
            color: #444;
        }

        .summary .route-container .businfo .trans-circle {
            border: 1px solid #00539F;
        }

    .summary .ticket-lbl {
        font-size: 14px;
        color: #444;
    }

    .summary .ticket-type {
        margin: 20px 0;
    }

    .summary .summary-info-box {
        background: #EAEAEA;
        height: 200px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        position: absolute;
        bottom: 0;
        padding: 15px 30px;
        width: 100%;
    }

        .summary .summary-info-box .point-lbl {
            font-size: 14px;
            color: #444;
            text-align: center;
            margin-bottom: 10px;
        }

        .summary .summary-info-box .bhistory-btn {
            width: 80%;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            color: #444;
            font-weight: 700;
            margin: 10px 0;
        }

/*----------------------------------------------------
    # Shuttle Trip
------------------------------------------------------*/
.shuttle-ticket {
    padding: 0;
}

    .shuttle-ticket .s-trip-container {
        background: #F9F9F9;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        height: 80px;
        padding: 10px 20px;
    }

        .shuttle-ticket .s-trip-container > span {
            color: rgba(255, 255, 255, 0.50);
            font-size: 16px;
            font-weight: 400;
            line-height: normal;
            display: block;
        }

    .shuttle-ticket .part-c {
        color: #58595B;
        line-height: normal;
        font-size: 16px;
    }

    .shuttle-ticket .s-date-container {
        padding: 0px 20px;
        height: 59px;
        background: #FFF;
    }

    .shuttle-ticket .s-date-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .shuttle-ticket .s-date-item {
        text-align: center;
        color: #929497;
        line-height: normal;
        transition: color .3s ease-out;
        height: 59px;
        width: 77px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .shuttle-ticket .s-date-item.selected {
            color: #FFF;
            background: var(--third-background);
            font-size: 14px;
            border-radius: 12px;
            font-weight: 900;
        }

        .shuttle-ticket .s-date-item > span {
            font-size: 10px;
        }

        .shuttle-ticket .s-date-item > .date-t {
            font-size: 14px;
            transition: transform .3s ease-out;
            font-weight: 400;
        }

    .shuttle-ticket .s-trip-items-container {
        padding: 20px;
    }

        .shuttle-ticket .s-trip-items-container .s-trip-b:not(:last-child) {
            margin-bottom: 10px;
        }

        .shuttle-ticket .s-trip-items-container .s-trip-item-box {
            border-radius: 12px;
            background: #FFF;
            box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.25);
            width: 100%;
            padding: 16px;
        }

        .shuttle-ticket .s-trip-items-container .s-station {
            font-size: 16px;
            font-weight: 800;
            line-height: normal;
            color: #58595B;
        }

        .shuttle-ticket .s-trip-items-container .s-param {
            font-size: 16px;
            font-weight: 400;
            line-height: normal;
            color: #6D6E70;
        }

        .shuttle-ticket .s-trip-items-container .s-param-da {
            font-size: 14px;
            font-weight: 400;
            line-height: normal;
            color: #6D6E70;
        }

        .shuttle-ticket .s-trip-items-container .s-price {
            font-size: 16px;
            font-weight: 800;
            line-height: normal;
            color: var(--third-background);
        }

    .shuttle-ticket .s-no-trip {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

        .shuttle-ticket .s-no-trip .no-trip-lbl {
            color: #AAA;
            font-size: 14px;
            font-weight: 700
        }

/*-------------------------------------------
    # Shuttle Passenger Detail
---------------------------------------------*/
.shuttle-passenger .s-box {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
}

.shuttle-passenger .s-box-p {
    padding: 14px;
}

.shuttle-passenger .p-t {
    color: #58595B;
    font-size: 16px;
    font-weight: 900;
    line-height: normal;
}

.shuttle-passenger .s-detail-btn {
    color: var(--third-background);
    border-radius: 25px;
    background: #FFF;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    width: 128px;
    border: 0;
    outline: 0;
    padding: 5px;
    margin-top: 8px;
    font-weight: 700;
    font-size: 18px;
}

.shuttle-passenger .s-check-c {
    padding-left: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #6D6E70;
}

.shuttle-passenger .s-clear-btn {
    font-size: 18px;
    font-weight: 900;
    color: #58595B;
    text-decoration-line: underline;
    text-decoration-style: solid;
}

.shuttle-passenger .input-box {
    border-radius: 6px;
}

.shuttle-passenger select {
    width: 100%;
    border: 0;
}

.shuttle-passenger p {
    color: #FF1E1E;
    line-height: normal;
    font-size: 12px;
    margin-bottom: 0;
}

.shuttle-passenger #dateDropdownDiv {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-color: transparent;
}

    .shuttle-passenger #dateDropdownDiv select {
        background: #FFF;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
        padding: 11px 14px;
        border-color: transparent;
        width: 30%;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.20);
    }

        .shuttle-passenger #dateDropdownDiv select:focus {
            border-color: transparent;
        }

        .shuttle-passenger #dateDropdownDiv select option:first-child {
            color: #AAA;
        }

.shuttle-passenger .c-p-lbl {
    font-size: 14px;
}

.shuttle-passenger hr {
    margin-bottom: 0;
}

.shuttle-passenger .terminal {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #6D6E70;
}

.shuttle-passenger .apply-btn {
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 42px;
    font-weight: 700;
    font-size: 18px;
    border: 0;
    outline: 0;
    line-height: normal;
    color: var(--third-background);
    border-radius: 25px;
    background: #FFF;
}

.shuttle-passenger .charge-info {
    color: #EC1C24;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 15px;
}

.shuttle-passenger .fa-times {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
}

.shuttle-passenger .confirm-box {
    background: var(--third-background);
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

    .shuttle-passenger .confirm-box span {
        font-size: 16px;
        color: #FFF;
        line-height: normal;
        font-weight: 700;
        text-align: center;
        display: block;
    }

.shuttle-passenger .c-p {
    padding: 14px;
}

.s-smake-box {
    width: 100%;
    background: #FFF;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .s-smake-box .smp-btn {
        border: 0;
        outline: 0;
        width: 128px;
        padding: 5px;
        font-weight: 700;
        line-height: normal;
        height: 42px;
        color: var(--third-background);
    }

    .s-smake-box .previous-btn {
        background: #FFF;
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
        border: 0;
        outline: 0;
        width: 50%;
        font-weight: 700;
        height: 42px;
        border-radius: 34px;
        color: var(--third-background);
    }

.s-seatP-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5); /* Black background with opacity */
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s ease-out;
    animation: slideUp .4s ease-out forwards;
}

    .s-seatP-modal.open {
        display: block;
        opacity: 1;
    }

    .s-seatP-modal.close {
        display: none;
        opacity: 0;
        transition: opacity .4s ease-out;
        animation: slideDown .4s ease-out forwards;
    }

    .s-seatP-modal .s-seatP-content {
        height: 100%;
        background: #F6F6F6;
    }

    .s-seatP-modal .s-seatP-header {
        background: #F6F6F6;
        padding: 12px 17px;
    }

        .s-seatP-modal .s-seatP-header > span {
            display: block;
            text-align: right;
            font-size: 14px;
            color: var(--secondary-background);
        }

    .s-seatP-modal .s-seatP-body {
        padding: 16px 0;
    }

        .s-seatP-modal .s-seatP-body .psg-box {
            background: #FFF;
            padding: 16px;
            color: var(--third-background);
            font-size: 14px;
            text-align: center;
        }

        .s-seatP-modal .s-seatP-body .trip-box {
            padding: 16px 32px;
        }

            .s-seatP-modal .s-seatP-body .trip-box .circle {
                background: #00539F;
            }

            .s-seatP-modal .s-seatP-body .trip-box .dotted-line {
                border-left: 1px dotted #00539F;
            }

            .s-seatP-modal .s-seatP-body .trip-box .route-name {
                color: #444;
                font-weight: 300;
                font-size: 14px;
            }

            .s-seatP-modal .s-seatP-body .trip-box .trans-circle {
                border: 1px solid #00539F;
            }

            .s-seatP-modal .s-seatP-body .trip-box .s-t {
                font-size: 14px;
                line-height: normal;
                font-weight: 300;
            }

/*----------------------------------------------------
    # Booking Detail Shuttle & Summary Shuttle
------------------------------------------------------*/

.shuttle-bookingdetail-m {
    padding: 20px;
}

    .shuttle-bookingdetail-m .bookingdetail-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
    }

        .shuttle-bookingdetail-m .bookingdetail-box .depart-lbl,
        .shuttle-summary-m .bookingdetail-box .depart-lbl {
            color: #58595B;
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .shuttle-bookingdetail-m .bookingdetail-box .book-lbl,
        .shuttle-bookingdetail-m .total-b-wrap .book-lbl,
        .shuttle-summary-m .bookingdetail-box .book-lbl {
            font-size: 16px;
            font-weight: 400;
            color: #6D6E70;
        }

    .shuttle-bookingdetail-m .total-b-wrap {
        padding: 15px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .shuttle-bookingdetail-m .total-b-wrap .pymt-btn {
            width: 100%;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            color: #444;
            font-weight: 700;
            color: var(--third-background);
        }

.shuttle-summary-m {
    padding: 15px;
}

    .shuttle-summary-m .summary-wrapper {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }

        .shuttle-summary-m .summary-wrapper .bookingdetail-box {
            padding: 15px;
        }

    .shuttle-summary-m .summary-info-box .bhistory-btn {
        width: 80%;
        padding: 8px;
        border: 0;
        outline: 0;
        color: #FFF;
        color: #444;
        font-weight: 700;
        margin: 10px 0;
    }

/*----------------------------------------------------
    # Wallet
------------------------------------------------------*/
.wallet {
    padding: 0;
}

    .wallet .top-bg {
        width: 100%;
        height: 112px;
        padding: 21px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
    }

    .wallet h5 {
        line-height: normal;
        margin-bottom: 0;
        font-weight: 700;
        text-align: right;
        color: #58595B;
        font-size: 25px;
    }

    .wallet .t-w {
        line-height: normal;
        font-size: 14px;
        font-weight: 400;
        text-align: right;
        color: #58595B;
    }

    .wallet .circle {
        background: #FBD012;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        text-align: center;
        margin-left: 17px;
    }

        .wallet .circle > i {
            color: #FFF;
        }

    .wallet .w-container {
        padding: 5px 16px 16px 16px;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 500px;
    }

    .wallet .ktm-link-container {
        padding: 16px 16px 5px 16px;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 500px;
    }

    .wallet .ktm-link-container hr {
        margin-top: 2rem;
    }
        .wallet .title {
        font-size: 16px;
        line-height: normal;
        color: #58595B;
        font-weight: 400;
    }

    .wallet .w-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        width: 100%;
        padding: 15px;
        margin-top: 1rem;
    }

        .wallet .w-box .hea-t {
            color: #58595B;
            font-size: 16px;
            line-height: normal;
            font-weight: 700;
        }

        .wallet .w-box .price {
            font-weight: 400;
            color: #58595B;
            line-height: normal;
            font-size: 16px;
        }

        .wallet .w-box .date {
            font-weight: 400;
            color: #58595B;
            line-height: normal;
            font-size: 16px;
            text-align: start;
        }

    .wallet .ktm-box {
        border-radius: 6px 6px 0px 0px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        padding: 15px;
        margin-top: 1rem;
    }
        .wallet .ktm-link {
            color: #58595B;
            font-size: 16px;
            font-style: normal;
            line-height: normal;
        }

    .wallet .ktm-card-no {
        color: #6D6E70;
        font-size: 20px;
        font-style: normal;
        line-height: normal;
        margin-top: 10px;
    }

.ktm-card-balance {
    background: #00539F;
    color: #F7FAFD;
    padding: 2px 15px 15px 15px;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px 0px 6px 6px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    height: 63px;
    width: 100%;
}
/*----------------------------------------------------
    # Top Up
------------------------------------------------------*/
.topup {
    padding: 0;
    overflow-x: hidden;
}

    .topup .topup-bg {
        padding: 20px 20px 0;
    }

    .topup .title {
        color: #58595B;
        line-height: normal;
        font-size: 16px;
        margin-bottom: 1rem;
    }

    .topup .btn-amount {
        border-radius: 25px;
        border: 1px solid #DFDFDF;
        background: #FFF;
        width: 104px;
        height: 50px;
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
        border: 0;
        outline: 0;
        color: var(--third-background);
        font-size: 18px;
        line-height: normal;
        font-weight: 700;
        transition: all .3s ease;
    }

    .topup .pymt-wrapper {
        background: #FFF;
    }

    .topup .btn-amount.active {
        background: #4B6CB7;
        color: #FFF;
    }

    .topup .pymtgateway-item:last-child {
        border-bottom: 0;
    }

    .topup .pymtgateway-item {
        padding: 0 10px;
        height: 60px;
        border-bottom: 1px solid #C4C4C4;
        display: grid;
        align-items: center;
    }

    .topup .pymtgateway-lbl {
        font-size: 14px;
        color: #444;
    }

/*----------------------------------------------------
    # Top Up Summary
------------------------------------------------------*/

.topup-summary .summary-bg {
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 10px;
}

    .topup-summary .summary-bg .s-lbl {
        color: #6D6E70;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
    }

    .topup-summary .summary-bg .topup-lbl {
        color: #58595B;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
    }

    .topup-summary .summary-bg .price-lbl {
        color: #58595B;
        text-align: right;
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
    }

.topup-summary .wallet-btn {
    border: 0;
    outline: 0;
    width: 100%;
    height: 40px;
    padding: 8px;
    font-weight: 700;
    line-height: normal;
    color: var(--third-background);
    text-align: center;
    margin-top: 30px;
}
/*----------------------------------------------------
    # Railtime search
------------------------------------------------------*/
.railtime-search {
    padding: 25px;
}

    .railtime-search .wrapper-content {
        position: relative;
        background: #FFF;
        max-width: 100%;
        border-radius: 12px;
        padding: 19px;
        min-height: 403px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }

    .railtime-search .input-box {
        display: flex;
        align-items: center;
        gap: 15px;
    }

        .railtime-search .input-box img {
            width: 15px;
            height: 15px;
        }

    .railtime-search .near-lbl {
        color: rgba(128, 129, 132, 0.50);
        font-size: 16px;
        margin-left: 15px;
    }

    .railtime-search .c-ex {
        border-radius: 50%;
        background: #FFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.12), 0px 1px 10px 0px rgba(0, 0, 0, 0.20);
        width: 40px;
        height: 40px;
        text-align: center;
        padding: 5px;
        position: absolute;
        top: 36px;
        right: 0;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
    }

    .railtime-search .search-btn {
        border: 0;
        outline: 0;
        width: 100%;
        height: 40px;
        padding: 8px;
        font-weight: 700;
        line-height: normal;
        margin-top: 20px;
        color: var(--third-background);
    }

    .railtime-search #currentstation-btn {
        height: 50px;
        padding: 8px;
        background: var(--third-background);
        color: #FFF;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 400;
    }

    .railtime-search .date-container {
        padding: 4px 20px;
        height: auto;
    }

    .railtime-search .date-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .railtime-search .date-item {
        text-align: center;
        color: rgba(255, 255, 255, 0.60);
        line-height: normal;
        transition: color .3s ease-out;
    }

        .railtime-search .date-item.selected {
            color: #FFF;
        }

            .railtime-search .date-item.selected > .date-t {
                transform: scale(1.3);
            }

        .railtime-search .date-item > span {
            font-size: 10px;
        }

        .railtime-search .date-item > .date-t {
            font-size: 12px;
            transition: transform .3s ease-out;
        }

.lichtpick-modal .lichtpick-footer {
    background: var(--third-background);
    padding: 30px;
    border-radius: 24px 24px 0px 0px;
    height: 180px;
    position: absolute;
    width: 100%;
    bottom: 0;
    display: none;
    z-index: 1001;
}

.lichtpick-modal #confirm-btn {
    background: var(--primary-background);
    color: var(--third-background);
    width: 100% !important;
    font-size: 18px;
    border-radius: 25px;
    font-weight: 500;
    line-height: normal;
    margin-left: 0;
    z-index: 1001;
    padding: 11px;
    border: none;
}

.nostation-modal {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nostation-modal.open {
        opacity: 1;
        visibility: visible;
    }

    .nostation-modal .nostation-content {
        border-radius: 6px;
        background: #F6F6F6;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -1px 1px 0px rgba(0, 0, 0, 0.25);
        max-width: 264px;
        width: 100%;
        padding: 26px 22px;
        display: flex;
        flex-direction: column;
    }

        .nostation-modal .nostation-content p {
            font-size: 12px;
            line-height: normal;
            font-weight: 300;
            text-align: center;
            margin-bottom: 30px;
        }


        .nostation-modal .nostation-content .ok-btn {
            width: 90%;
            padding: 8px;
            border: 0;
            outline: 0;
            color: #FFF;
            margin: 0 auto;
            background: var(--third-background);
            margin-left: 10px;
        }

.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"] {
    background-color: var(--third-background);
    border: none;
    border-radius: 6px;
}

/*----------------------------------------------------
    # Railtime Journey Info
------------------------------------------------------*/
.railtime-journey {
    padding: 0;
}

    .railtime-journey .trip-box {
        background: transparent;
        padding: 10px 20px;
    }

        .railtime-journey .trip-box .od-lbl {
            color: #6D6E70;
            font-size: 14px;
            font-weight: 400;
        }

        .railtime-journey .trip-box .od-name {
            color: #58595B;
            font-size: 16px;
            font-weight: 400;
            text-transform: uppercase;
        }

    .railtime-journey .r-trip-container {
        background: linear-gradient(180deg, #0180A9 0%, #005AA0 100%);
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
        width: 100%;
        padding: 10px;
    }

        .railtime-journey .r-trip-container > span {
            color: rgba(255, 255, 255, 0.50);
            font-size: 12px;
            font-weight: 300;
            line-height: normal;
            display: block;
        }

    .railtime-journey .r-date-container {
        padding: 0px 20px;
        height: 59px;
        background: #FFF;
    }

    .railtime-journey .r-date-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .railtime-journey .r-date-item {
        text-align: center;
        color: #929497;
        line-height: normal;
        transition: color .3s ease-out;
        height: 59px;
        width: 77px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .railtime-journey .r-date-item.selected {
            color: #FFF;
            background: var(--third-background);
            font-size: 14px;
            border-radius: 12px;
            font-weight: 900;
        }

        .railtime-journey .r-date-item > span {
            font-size: 10px;
        }

        .railtime-journey .r-date-item > .date-t {
            font-size: 14px;
            transition: transform .3s ease-out;
            font-weight: 400;
        }

    .railtime-journey .r-trip-items-container {
        padding: 20px;
    }

        .railtime-journey .r-trip-items-container .r-trip-item-box {
            background: #FFF;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.20), 0px 4px 3px 0px rgba(0, 0, 0, 0.10);
            width: 100%;
            padding: 10px;
            border-radius: 12px;
            margin-bottom: 10px;
        }

            .railtime-journey .r-trip-items-container .r-trip-item-box .service-name,
            .railtime-journey .r-trip-items-container .r-trip-item-box .time-hour,
            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .journey-info .time-hour {
                color: #58595B;
                font-size: 14px;
                font-weight: 700;
                text-transform: uppercase;
                line-height: normal;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .info-lbl,
            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .journey-info .info-lbl {
                color: #6D6E70;
                font-size: 14px;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .direct-lbl {
                color: #7bfc01;
                font-size: 14px;
                font-weight: 700;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .interchange-lbl {
                color: #FF0000;
                font-size: 14px;
                font-weight: 500;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .service-logo,
            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .journey-info .info-logo {
                width: 59px;
                height: 22px;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .time-ampm,
            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .journey-info .time-ampm {
                font-size: 14px;
                color: #6D6E70;
                font-weight: 400;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .arrow-ic {
                width: 20px;
                margin: 0 15px;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .view-lbl {
                color: var(--third-background);
                font-size: 14px;
                margin-right: 5px;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .btn-ontime {
                background: #7bfc01;
                padding: 2px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFF;
                font-size: 14px;
                border-radius: 8px;
                outline: none;
                border: 1px solid #7bfc01;
                width: 78px;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .btn-schedule {
                background: var(--primary-background);
                padding: 2px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #6D6E70;
                font-size: 14px;
                border-radius: 12px;
                outline: none;
                border: none;
                width: 90px;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info {
                height: 0;
                overflow: hidden;
                opacity: 0;
                transform: scaleY(0);
                transform-origin: top;
                transition: height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
            }

                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info.expanded {
                    height: auto;
                    padding: 10px;
                    opacity: 1;
                    transform: scaleY(1);
                }


            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-b .fa-chevron-right {
                transition: transform 0.3s ease;
            }

                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-b .fa-chevron-right.rotated {
                    transform: rotate(-90deg);
                }


            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .routeline {
                position: relative;
            }

                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .routeline .circle {
                    position: absolute;
                    top: 15px;
                    left: 0;
                    background: var(--third-background);
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    z-index: 1;
                }

                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .routeline .route-name,
                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .businfo .route-name {
                    color: #7A7A7A;
                    font-size: 14px;
                    line-height: normal;
                    padding-left: 15px;
                    padding-top: 10px;
                }

            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .w-lbl {
                font-size: 12px;
                color: #6D6E70;
            }


            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .routeline .dotted-line {
                border-left: 2px solid var(--third-background);
                position: absolute;
                top: 22px;
                left: 3.5px;
                height: 100%;
            }

            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .businfo {
                position: relative;
            }

                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .businfo .trans-circle {
                    position: absolute;
                    top: 15px;
                    left: 0;
                    width: 10px;
                    height: 10px;
                    border: 1px solid var(--third-background);
                    border-radius: 50%;
                    z-index: 1;
                    background: var(--third-background);
                }

            .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .journey-info {
                background: #f5f6fb;
                padding: 10px;
                margin: 0 0 0 17px;
            }

                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .journey-info .j-time {
                    color: #6D6E70;
                    font-size: 14px;
                }

                .railtime-journey .r-trip-items-container .r-trip-item-box .detail-info .journey-info .arrow-ic {
                    width: 20px;
                    margin: 0 15px;
                    height: 10px;
                }

/*----------------------------------------------------
    # Railpass
------------------------------------------------------*/
.railpass {
    padding: 0;
}

    .railpass .top-bg {
        background-image: url(/mpay/assets/img/bghome-2.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 225px;
        padding: 21px 15px;
        position: relative;
    }

        .railpass .top-bg .color-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Make sure the image stretches appropriately */
            opacity: 0.5; /* Adjust for desired intensity */
            z-index: 1;
        }

        .railpass .top-bg > *:not(.color-bg) {
            position: relative;
            z-index: 2;
        }

    .railpass .tabs {
        margin-top: 18px;
        display: flex;
        align-items: center;
    }

        .railpass .tabs .tablinks {
            width: 141px;
            height: 47px;
            border: 0;
            outline: 0;
            background: #F0F2F5;
            color: #929497;
            border-radius: 12px 12px 0 0;
            box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.25);
            font-size: 12px;
            position: relative;
        }

            .railpass .tabs .tablinks.active {
                background: #FFF;
                color: #00AAE5;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
            }

            .railpass .tabs .tablinks .tab-lbl {
                margin-left: 15px;
            }

    .railpass .wrapper-content {
        position: relative;
        background: #FFF;
        max-width: 100%;
        border-radius: 0 0 24px 24px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 19px;
        min-height: 251px;
    }

    .railpass .t-content {
        display: none;
    }

        .railpass .t-content.active {
            display: block;
        }

    .railpass .t-box {
        border-radius: 6px;
    }

    .railpass .c-ex {
        border-radius: 50%;
        background: #FFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 4px 5px 0px rgba(0, 0, 0, 0.12), 0px 1px 10px 0px rgba(0, 0, 0, 0.20);
        width: 40px;
        height: 40px;
        text-align: center;
        padding: 5px;
        position: absolute;
        top: 36px;
        right: 0;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
    }

    .railpass .i-flex {
        display: flex;
        gap: 21px;
    }

    .railpass .search-btn {
        border: 0;
        outline: 0;
        width: 100%;
        height: 40px;
        padding: 8px;
        font-weight: 700;
        line-height: normal;
        margin-top: 20px;
        color: #00AAE5;
    }

/*----------------------------------------------------
    # Railpass Booking Details
------------------------------------------------------*/
.railpass-bookingdetail-m {
    padding: 0;
}

    .railpass-bookingdetail-m .detail-container {
        padding: 25px 32px;
    }

    .railpass-bookingdetail-m .bookingdetail-box,
    .railpass-summary-m .summary-wrapper .bookingdetail-box {
        border-radius: 6px;
        background: #FFF;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
    }

        .railpass-bookingdetail-m .bookingdetail-box .depart-lbl,
        .railpass-summary-m .bookingdetail-box .depart-lbl {
            color: #58595B;
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .railpass-bookingdetail-m .bookingdetail-box .book-lbl,
        .railpass-summary-m .bookingdetail-box .book-lbl {
            font-size: 16px;
            font-weight: 400;
            color: #6D6E70;
        }

        .railpass-bookingdetail-m .bookingdetail-box .price-lbl,
        .railpass-summary-m .bookingdetail-box .price-lbl {
            font-size: 16px;
            font-weight: 400;
            color: #58595B;
        }

    .railpass-bookingdetail-m .total-b-wrap {
        padding: 15px 13px;
    }

        .railpass-bookingdetail-m .total-b-wrap .pymt-btn {
            width: 100%;
            padding: 8px;
            border: 0;
            outline: 0;
            color: var(--third-background);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 18px;
        }

.railpass-summary-m .summary-wrapper {
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}



@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


@keyframes slideDown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}