/* Only Media query style in here */

/* Max media query */
@media (max-width: 575.98px) {

}

@media (max-width: 767.98px) {

    .txt-mb-13 {
        font-size: 13px !important;
    }    
    .txt-mb-14 {
        font-size: 14px !important;
    }    
    .txt-mb-16 {
        font-size: 16px !important;
    }    
    .txt-mb-20 {
        font-size: 20px !important;
    }    

    #logIn .modal-dialog, #modalSignUp .modal-dialog, #signUp_2 .modal-dialog {
        width: 100%;
        height: 100%;
        display: flex;
        margin: 0;
    }

    #logIn .modal-body, #modalSignUp .modal-body, #signUp_2 .modal-body {
        overflow: auto;
    }

    .container .title {
        margin: 0 14px 10px;
    }

    div[id*=Panel] .container, .container.infoBox, .paddingBox {
        position: relative;
        padding: 0 14px;
    }

    .layout-05 .cardBox:first-child {
        margin-left: 14px;
    }

    .detailPage .accommodation .optionCity .text-truncate {
        max-width: 200px;
    }

    /*--------------------------custom css by jerald----------------------------------*/

    #modalForgotPassword .modal-dialog, #modalChangePassword .modal-dialog {
        width: 100%;
        height: 100%;
        display: flex;
        margin: 0;
    }

    /* table style */
    .rTable {
        border:none;
    }

    .rTable > [class*=rT_] > .td {
        border-right: none;
        border-bottom: 1px solid #c5c5c5;
    }
    .rTable > [class*=rT_] > .td:last-child {
        border-bottom: none;
    }

    .rTable .rT_tr .td::before {
        content: attr(data-th);
        display: block;
        width: 100%;
        font-size: 12px;
        color: #757575;
    }
    
    /* table style end */

    .flightLoc {
        border-bottom: none;
        padding-bottom: 0 !important;
    }

    .eventBanner .box .info {
        padding: 0 4px;
    }

    .flight_result .txt-st-b16 {
        font-size: 15px;
    }
    .flight_result .txt-st-b14 {
        font-size: 12px;
    }
    .flight_result .txt-st-g12 {
        font-size: 11px;
    }
    .optionalHeader {
        background-color: #0076b2;
        box-shadow: none;
    }
}    

@media (max-width: 991.98px) {

    .eventBanner .box .tit {
        -webkit-line-clamp: 1;
    }

    .eventBanner .box .period {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .eventBanner .box .info {
        padding: 0 4px;
    }

}

@media (max-width: 1199.98px) {
    main > .container-fluid:not(.flightBox) {
        background-color: #fff;
    }

    .premium main > .container-fluid {
        background-color: transparent;
    }

    .priceBox > article {
        margin-left: 0;
        margin-right: 0;
    }
    .priceBox > article > div {
        padding: 0 8px;
    }

}

/* Min media query */
@media screen and (min-width: 360px) {
}

@media (min-width: 576px) {
    main > .container {
        max-width: 100%;
        padding: 0 14px;
    }
    
}

@media (min-width: 768px) {
    main > .container {
        max-width: 100%;
        padding: 0 14px;
    }
    
    .tabList-st-1 > div {
        flex-wrap: wrap;
    }
    .tabList-st-1 > div >div {
        margin-bottom: 4px;
    }

    body.onPanel #wrap {
        padding-right: 17px;
    }    

    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        display: flex;
    }

    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        display: flex;
    }

    .place img, .point img, .tour img, .hotelDetail img {
        width: 45%;
    }

    .px-md-14p {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    
    .border-md-none {
        border: none !important;
    }
    
    #one_round.on ~div .flightClass {
        padding-top: 6px;
        padding-left: 0;
        padding-bottom: 6px;
        border-top: none;
        background: url(../img/airticket/icon-seat.png) no-repeat 20px /16px;
    }
    
    .border-md-ra {
        border-right: 1px solid #7abdff;
    }

}

@media (min-width: 992px) {

    .flightBox .card-body {
        background-position: 1.25rem 1.25rem;
    }

}

@media (min-width: 1200px) {

    main > .container, .container {
        max-width: 1200px;
        padding: 0;
    }

        .container.container-fluid {
            max-width: 100%;
        }

    .payLogo::after {
        max-width: 95px;
    }

    .specialPage .paddingBox {
        position: relative;
        padding: 0 16px;
    }

    .specialPage .extendWidth {
        margin-left: -16px;
        margin-right: -16px;
    }

    .scrollTab_A.extendWidth {
        margin-left: 0;
        margin-right: 0;
    }

    .extendWidth {
        margin-left: -16px;
        margin-right: -16px;
    }    

    .w-lg-50 {
        width: 50%;
    }

    .desc, .cat-faq, .simpleLink, .special_tit [class*=tit] *, .cntTabBtn *, .awards {
        font-size: 1rem !important;
    }
    .container ul > li::before {
        top: 5px;
    }
    .container ul.list-st-02 li::before {
        top: 10px;
        width: 5px;
    }

    header nav {
        max-width: 100%;
        height: inherit;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .optionalHeader {
        max-width: 100%;
        height: inherit;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .btn-wh-r {
        border-radius: 50vh;
        background: #fff;
    }

    .lg-border {
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
    }

    .search-bar {
        padding: 0.75rem 1rem 0.75rem 1rem;
    }

    .icon-div img {
        width: 70px;
        height: 70px;
    }

    .brandBox.custom-1 img {
        max-height: 70px;
    }

    [data-target*='cat-'] {
        font-size: 1rem !important;
    }

    footer .container {
        width: 96%;
        max-width: 1200px;
        padding: 0;
    }

    .scrollTab_A .optionBtn > * {
        font-size: 1rem;
        padding: 0.375rem 1rem 0.25rem;
        margin-bottom: 4px;
    }

    .modal-content .modal-header {
        padding: 24px 24px 0 !important;
    }

    .modal-content .modal-body {
        padding: 1.5rem 1.5rem 1rem;
    }

    .detailPage .cat .tit, .detailPage .infoArticle > * > .tit {
        font-size: 1.25rem;
        font-weight: 500;
    }

    .detailPage .prodTit {
        font-size: 1.25rem;
        font-weight: 500;
    }

    .detailCont * {
        font-size: 1rem;
    }

    .detailPage .detailCont > article {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        border-right: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
    }

    .detailPage .desc .box .content {
        padding: 0.75rem 1rem;
    }

    .box .tit {
        font-size: 16px;
    }

    .detailPage .itinerary .tit, .detailPage .optionTour .tit, .slideCont .tit, .detailPage .cat .desc .box .tit {
        font-size: 1rem;
    }

    .detailPage .optionCity, .faqMain {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .border_t_pc::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 1px;
        background: #c9c9c9;
    }
    .acc-st-1 .tit, .prodBox .prodTit {
        font-size: 1rem;
    }
    .tit-st-1 {
        font-size: 1.25rem;
    }

    .noresult {
        height: 22vw;
    }

    .scrollTab_A .optionBtn {
        padding: 0;
        flex: 1 0 auto;
    }

    .pageLayout-4 main > .container-fluid > .container:not(.eventBox) {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        border-left: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
    }
    .pageLayout-2 main > .container-fluid > .container:not(.eventBox) {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        border-left: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
        background: #fff;
    }
    .pageLayout-3:not(.premium) main >.tabContent > div {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
        border-left: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
        background: #fff;
    }

    #searchPanel {
        position: absolute;
        top: 100%;
        bottom: auto;
        left: 50%;
        width: 900px;
        height: auto;
        background: #fff;
        z-index: 99;
        padding: 0.5rem 0.5rem 0;
        transform: translate(-50%, 0);
        border-radius: 0.25rem;
    }

    .tourOption > div {
        width: 100px;
    }

    header.scroll .navbar, header.on_scroll .navbar, header.keep_scroll .navbar {
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    }

    .flightPax {
        border-bottom: none;
    }

    .layout-05 > div {
        overflow-x: visible;
    }

    .layout-06 > div {
        justify-content: center;
    }

    .container.paddingBox.product {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .cat.bg-gray {
        background: #fff;
    }

    /*--------------------------custom css by jerald----------------------------------*/
   
    .overlayCal {
        position: relative;
    }

        .overlayCal .daterangepicker {
            position: relative;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            color: inherit;
            background-color: #fff;
            border-radius: 0;
            border: none;
            width: 100%;
            height: 100%;
            max-width: none;
            padding: 0;
            margin-top: 0;
            z-index: 3001;
            display: none;
            font-family: inherit;
            font-size: 1rem;
            line-height: 1.5rem;
        }

            .overlayCal .daterangepicker.show-calendar .drp-buttons {
                display: none;
            }

            .overlayCal .daterangepicker:before {
                display: none;
            }

            .overlayCal .daterangepicker.show-calendar .ranges {
                margin-top: 0;
            }


    #dateRangeInsurance .container {
        overflow: auto;
    }

    .overlayCal .daterangepicker .drp-calendar {
        padding: 0 145px;
    }

    #singleDate .overlayCal .daterangepicker .drp-calendar {
        padding: 145px;
    }

    #singleDateBday .overlayCal .daterangepicker .drp-calendar {
        padding: 145px;
    }

    #dateRangeElem .overlayCal .daterangepicker .drp-calendar {
        padding: 145px;
    }

    #dateRangeElemBday .overlayCal .daterangepicker .drp-calendar {
        padding: 145px;
    }

    .drp-calendar.left, .drp-calendar.right {
        max-width: 100%;
        width: 100%;
    }

    .overlayCal .active {
        display: table-cell;
    }

    .overlayCal .month {
        color: #479ff6;
    }

    .overlayCal thead th {
        color: #479ff6;
        font-weight: 500;
        /*height: 10vw;*/
    }

    .overlayCal thead > tr:nth-child(2) th {
        font-weight: 400;
        /*height: 7vw !important;*/
    }

    .overlayCal .daterangepicker .calendar-table .next span, .overlayCal .daterangepicker .calendar-table .prev span {
        border: solid #479ff6;
        border-width: 0px 3px 3px 0px;
        height: 12px;
        width: 12px;
    }

    .daterangepicker td.disabled, .daterangepicker option.disabled {
        cursor: not-allowed !important;
    }

    .jq-toast-single {
        width: 350px;
        margin: 10px auto;
    }

    .jq-has-icon {
        padding-left: 48px !important;
    }

    #modalSelectClass .modal-dialog {
        position: initial !important;
    }

    #modalRemoveWishlist .modal-content {
        width: 564px;
        margin: 0 auto;
    }

    #modalConfirmBooking .modal-content {
        width: 500px;
        margin: 0 auto;
    }

    #modalConfirmInsurance .modal-content, .modalSpec .modal-content {
        width: 494px;
        margin: 0 auto;
    }

    .extendWidth .addInfo {
        margin: 0 8px;
    }

    .detailCont article > div {
        padding: 0 1rem;
    }    

}