/*css for mobile qtt*/
@media only screen and (max-width: 1024px) {

    .flex-column {
        flex-direction: column !important;
        gap: 0px;
    }

    .remove-railcard-section.remove-railcard-section-qttv2new-mobile:nth-child(1) {
        padding-top: 0px;
    }

    .remove-railcard .remove-railcard-btn.remove-seasonnew {
        width: auto;
        height: auto;
        background: transparent !important;
        color: #004652;
        border-radius: 0%;
        font-size: 11px;
        display: inline-block;
        text-align: center;
        padding: 0;
        line-height: 1;
        font-size: 16px;
    }

    .banner-right .common-tab select, .banner-right .dropdown-menu select, .mobile-qtt select {
        padding-top: 16px;
    }

    #tabsMobile-6 .time-selector-btn-grp {
        margin: 0%;
    }

    .mobile-qtt {
        display: block;
    }

    .desktop-qtt, .banner-left {
        display: none;
    }
    .mobile-qtt .banner-exchange-btn {
        right: 20px;
        transform: rotate(90deg);
        top: 40px;
    }
    .mobile-qtt #ui-id-1, .desktop-qtt #ui-id-1 {
        max-height: unset;
        overflow-y: unset;
    }
    .mobile-qtt .layout--6-6 > .column {
        width: 50%;
        float: left;
    }

    .mobile-qtt .layout--8-4 > .column:first-of-type, .mobile-departing-popup .layout--8-4 > .column:first-of-type {
        width: 66.66666667%;
        float: left;
    }

    .mobile-qtt .layout--8-4 > .column:last-of-type, .mobile-departing-popup .layout--8-4 > .column:last-of-type {
        width: 33.33333333%;
        float: left;
    }
    .flex-gap16{
        display: flex;
        gap: 16px;
        align-self: stretch;
        flex-direction:column
    }
    .railcard-mobile-pop .close span {
        background: #004652;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        color: #fff;
        font-size: 16px;
        text-align: center;
        display: inline-block;
        line-height: 16px;
    }

    .banner-right .quantity-group input, .railcard-mobile-pop .quantity-group input {
        border: 0px;
        height: 20px;
    }
    #mob-tabs {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        border-radius: var(--cards-radius, 12px);
        box-shadow: 0 3px 12px 0 rgba(0, 70, 82, 0.08), 0 4px 20px 0 rgba(0, 70, 82, 0.05);
        min-height:474px;
        max-width:350px;
    }

    .railcard-modal-top .quantity-group {
        float: none;
        position: relative;
    }

    .display-flex {
        display: flex;
    }
    .mobile-qtt-form .display-flex {
        display: flex;
        gap: 8px;
        padding-top:16px;
    }

    .railcard-mobile-pop .amount-group, .railcard-mobile-pop .quantity-field {
        width: 100%;
    }
    #applyRailcard.btn-primary, #applyRailcard.btnbr-primary {
        width: 100%;
        color: #fff;
        background: #e42900;
    }
    .mobile-qtt-form {
        padding-bottom: 15px;
        border-bottom: none;
    }

    .mobile-qtt-primary-btn {
        margin-top: 30px;
        width: 100%
    }

    .railcard-mobile-pop .modal-content {
        border: 0px;
    }
    .remove-railcard-section:nth-child(1), .view-railcard-section {
        padding-top: 15px;
        position: relative;
        z-index: 1;
    }
    .remove-railcard-section, .view-railcard-section {
        display:flex;
    }
    .mobile-qtt .remove-railcard, .mobile-qtt .view-railcard {
        float: left;
        padding-left: 10px;
        position: relative;
        z-index: 1;
        min-width: 25%;
    }
    .mob-promotion {
        margin-top: 0px;
        color: var(--text-accent, #E42900);
        font-family: var(--family-sans, Averta);
        font-size: var(--typography-label-s, 14px);
        font-style: normal;
        font-weight: var(--weight-bold, 700);
        line-height: 20px;
        letter-spacing: 0.14px;
    }
    .promotion {
        margin-top: 16px;
        color: var(--text-accent, #E42900);
        font-family: var(--family-sans, Averta);
        font-size: var(--typography-label-s, 14px);
        font-style: normal;
        font-weight: var(--weight-bold, 700);
        line-height: 20px;
        letter-spacing: 0.14px;
    }
    .mobile-qtt .view-dropdown {
        position: static;
        margin-top: 25px;
        border: 0px;
        padding: 10px 0;
    }

        .mobile-qtt .view-dropdown .remove-railcard-section {
            padding-bottom: 0px;
        }

    .railcard-mobile-pop .modal-content, .returning-returning-popup .modal-content, .mobile-departing-popup .modal-content {
        top: 0 !important;
        width: 100%;
        height: auto;
        min-height: 100%;
    }

    .railcard-mobile-pop, .returning-returning-popup, .mobile-departing-popup {
        padding-top: 0px !important;
    }

        .returning-returning-popup .modal-content, .mobile-departing-popup .modal-content {
            border-radius: 0px !important;
            border: 0px;
        }

    .m_railcard {
        display: flex;
        align-items: center;
    }
    h4.mqttv2new-railcard-title, .mobile-qtt>h4 {
        margin: 16px 0px;
        font-size: 16px !important;
        color: #004652 !important;
    }
    #m_AddSubRailcardBtn {
        width: 100%;
        margin-top: 16px;
    }
    .m_chooserailcard {
        width: 50% !important;
        position: relative;
    }

    .amount_m {
        width: 32% !important;
        padding: 0px 10px;
    }

    .subrailcard_m {
        width: 91% !important;
    }

    #m_railcardclose {
        display: inline-block;
        margin-top: 1px;
        margin-left: -8px;
        width: 18%;
        line-height: 16px;
        text-align: center;
    }
    .railcard-mobile-pop .close {
        color: #004652 !important;
        font-size: 14px !important;
        font-weight: 500;
        border: none;
        background: transparent;
    }
    .railcard-mobile-pop .m_railcard .close {
        font-size: 13px !important;
        line-height:1 !important;
    }
    .banner-right input.button-minus, .banner-right input.button-plus, .railcard-mobile-pop input.button-minus, .railcard-mobile-pop input.button-plus {
        display: flex;
        width: 24px !important;
        height: 24px !important;
        padding: 0px 0px 3px 0px;
        justify-content: center;
        align-items: center;
        border-radius: var(--radius-full, 999px);
    }
    .m_anotherrailcarddrpdown {
        float: left;
        width: 51%;
        margin-right: 10px;
        position: relative;
    }
    .mobile-qtt-form label {
        display: flex;
        padding: 0 6px;
        align-items: flex-start;
        gap: 10px;
        background: #FFF;
        color: var(--text-brand-strong, #002428);
        font-family: var(--family-sans, Averta);
        font-size: var(--typography-label-xs, 12px);
        font-style: normal;
        font-weight: var(--weight-regular, 400);
        line-height: 16px;
        position: absolute;
        left: 10px;
        top: -8px;
    }
    .another_amount_m {
        float: left !important;
        width: 28.5% !important;
    }

    #m_anotherrailcardclose {
        margin-top: 25px;
        display: inline-block;
    }

    .closeanotherrailcard {
        display: inline-block;
        margin-top: 14px;
        padding-left: 10px;
        float: left !important;
        width: 16%;
        line-height: 15px;
        text-align: center;
    }

    .m_rc_options:after {
        content: "";
        visibility: hidden;
        display: block;
        clear: both;
    }

    .closeanotherrailcard::after {
        clear: both;
    }

    .m_railcard_opt {
        display: flex;
        align-items: flex-end;
    }
    a.main-drop {
        padding: 16px 0px;
        color: #004652;
        font-size: 16px;
        line-height: 1.25;
        text-decoration: underline;
    }
        a.main-drop:hover, a.main-drop:focus, a.main-drop:active {
            color: #004652;
        }
    .railcard_bdr {
        border-top: none;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .m_firstdropdowm {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0px;
    }

    #m_AdultandChildren {
        width: 97%;
    }

    .railcard-alert {
        width: 25px;
        margin-right: 10px;
    }

    .default_railcard_close.closeanotherrailcard {
        width: 16%;
        text-align: center;
        line-height: 15px;
        margin-top: 10px;
    }

    .closeanotherrailcard {
        width: 16%;
        text-align: center;
        line-height: 15px;
        margin-top: 10px;
    }
    .text-dark[disabled] {
        color: #080808 !important;
    }

    .text-dark[disabled] {
        color: #080808 !important;
    }
    .mobile-qtt .ui-datepicker {
        border: 0px;
        box-shadow: 0 0 0;
    }
    .mobile-qtt .ui-datepicker {
        border: 0px;
        box-shadow: 0 0 0;
    }

    .m_tooltip-default-message, .m_tooltip-enabldate-message, .m_tooltip-disabldate-message, .m_tooltip-default-message_tt, .m_tooltip-enabldate-message_tt, .m_tooltip-disabldate-message_tt,
    .m_tooltip-default-message_ST, .m_tooltip-enabldate-message_ST, .m_tooltip-disabldate-message_ST {
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px #ddd solid;
        border-top: 1px #ddd solid;
    }

    .mobile-qtt .ui-datepicker-calendar .ui-state-disabled .tooltip-checker {
        display: none !important
    }
    .m_tooltip-default-message, .m_tooltip-enabldate-message, .m_tooltip-disabldate-message, .m_tooltip-default-message_tt, .m_tooltip-enabldate-message_tt, .m_tooltip-disabldate-message_tt,
    .m_tooltip-default-message_ST, .m_tooltip-enabldate-message_ST, .m_tooltip-disabldate-message_ST {
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px #ddd solid;
        border-top: 1px #ddd solid;
    }

    .mobile-qtt .ui-datepicker-calendar .ui-state-disabled .tooltip-checker {
        display: none !important
    }
    table.ui-datepicker-calendar tr:first-of-type>th {
    background: #fff !important;
}
    .mobile-qtt .modal-dialog{
        margin:0px !important;
        height:100%;
    }
    table.ui-datepicker-calendar tr:first-of-type > th {
        background: #fff !important;
    }
    .m_qttv2-inputgroup {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    select#m_seasonTicketType, select#m_Selectrailcard_ST {
        -webkit-appearance: menulist;
    }
    .qttv2-form-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sds-size-space-400);
        flex: 1 0 0;
        align-self: stretch;
    }
    .main-search-btn {
        width: 100%;
        margin-top: 0px;
    }
    .banner-right .common-tab {
        display: flex;
        padding: var(--cards-inset-m, 20px) !important;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sds-size-space-400);
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 0 0 var(--radius-l, 12px) var(--radius-l, 12px);
        background: var(--shades-white, #FFF);
        min-height:420px;
    }
    .qttv2-body-section .tabcontent-qttv2new form {
        display: flex;
        width: 100%;
        align-self: stretch;
        flex-direction: column;
        gap: var(--sds-size-space-400);
        justify-content: space-between;
        height: 100%;
        flex:1;
    }
    #tabsMobile1_ST ul.spac-tabs {
        position: absolute;
        top: -12px;
        left: 152px;
        margin-bottom:0px;
    }
}

@media(max-width:767px) {
    .mobile-qtt .column, .returning-returning-popup .column, .mobile-departing-popup .column {
        margin-bottom: 0px !important;
    }

    .returning-returning-popup .return-stations-nearme {
        padding-right: 0px;
        padding-left: 0px
    }
    #tabsMobile1_tt .spac-tabs {
        position: absolute;
        top: -12px;
        left: 152px;
        margin-bottom: 0px !important;
    }
    #mobile-arrival-date-popup .spac-tabs {
        position: relative;
        top: 0px;
        left: 0px;
        margin-bottom: 0px !important;
    }
    .mobile-qtt .ui-datepicker-calendar .ui-state-disabled span {
        width: 32px !important;
    }
}

@media(max-width:576px) {
    .depart-time label, .arrive-by-time label {
        width: 40%;
    }
}
@media (max-width: 479px) {
    .mobile-qtt .banner-right #mobile-departing-date-popup .modal-content .column .depart-inner-tabs .time-selector-btn-grp {
        margin-top: 20px !important;
    }
    .specific-date-tab .layout--8-4 .column {
        width: 100% !important;
    }

    #tabsMobile-6 .time-selector-btn-grp, #m-arrival-date-tabs-6 .time-selector-btn-grp {
        margin: 0px -5px 10px 5px !important;
    }

    .specific-date-tab .depart-time {
        padding-top: 0px !important
    }
}
@media(max-width:460px) {
    .spac-tabs #mobile-departing-date-popup .departing-tabs>ul {
        position: absolute;
        top: -13px;
        left: 140px;
    }
}