﻿/*
@font-face {
    font-family: Regular;
    src: url(/font/Mardoto-Regular.ttf);
}

@font-face {
    font-family: Bold;
    src: url(/font/Mardoto-Bold.ttf);
}
*/

body {
    margin: 0;
    padding: 0;
    background-color: #006596;
    background-size: contain;
    /*font-family: Regular;*/
}

.icons-bar {
    margin: 18% 5% 0px 18%;
}

#mcontent {
    text-align: left;
}

.err {
    color: #ff9696 !important;
    font-weight: bold;
    visibility: visible;
}


#titleId
{
    margin-left:25px;
}
/*status*/
* {
    box-sizing: border-box;
}

/*
.row {
    display: flex;
    width: 50%;
    margin-left: 20px;
}
*/

/* Create two equal columns that sits next to each other */
.column:nth-child(1) {
    flex: 30%;
    padding: 10px;
    height: 50px; /* Should be removed. Only for demonstration */
}


    .column:nth-child(2) {
        flex: 70%;
        padding: 10px;
        height: 50px; /* Should be removed. Only for demonstration */
    }



/*status end*/

.page-header {
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
    padding: 8px 18%;
    font-size: 1em;
    height: 32px;
    text-align: center;
    background: rgba(0, 129, 200, .8);
    zoom: 1;
}

    .page-header .step {
        display: flex;
        align-items: center;
    }

    .page-header .line {
        border-top: 1px solid rgba(255, 255, 255, .2);
        height: 0;
        margin-right: 16px;
        width: 138px;
    }

        .page-header .line.active {
            border-color: #45A9E8;
        }

    .page-header .step .step-title {
        margin: 0 16px;
        font-size: 15px;
        white-space: nowrap;
    }

    .page-header .step .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .2);
        font-size: 13px;
        font-weight: bold;
    }

        .page-header .step .step-number.active {
            background: #45A9E8;
        }

        .page-header .step .step-number.checked img {
            width: 12px;
        }
 
.main-div-page {
    padding: 10px 18%;
    background-color: #036596;
}

    .main-div-page .page-main-title {
        color: white;
        font-size: 22px;
        /*font-family: Bold;*/
        font-weight: bold;
        margin-bottom: 35px;
    }

    .main-div-page .page-main-text {
        color: #d9f3ff;
        font-size: 15px;
        /*font-family: Regular;*/
    }

    .main-div-page .filters-wrapper {
        display: flex;
        margin: 25px 0;
        position: relative;
        align-items: center;
    }

        .main-div-page .filters-wrapper .tabs, .main-div-page .filters-wrapper .tabs-wrapper, .tabs, .tabs-wrapper {
            display: flex;
        }

        .main-div-page .filters-wrapper .tabs-wrapper .tabs {
            padding-top: 0;
        }

        /*.main-div-page .filters-wrapper*/ 
        .tabs .tab-item {
            display: flex;
            align-items: center;
            color: white;
            cursor: pointer;
        }

            /*.main-div-page .filters-wrapper*/ 
            .tabs .tab-item .checkbox {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: white;
            }

            /*.main-div-page .filters-wrapper*/ 
            .tabs .tab-item .checkbox-text {
                margin: 0 16px;
            }

            /*.main-div-page .filters-wrapper*/
            .tabs .tab-item .checkbox.active {
                background: #45A9E8;
            }

            #accordion .tabs .tab-item .checkbox.active, #accordionVoucher .tabs .tab-item .checkbox.active, #payment3 .tabs .tab-item .checkbox.active {
                background: #45A9E8;/*#036596;*/
            }

            #accordion .tabs .tab-item .checkbox, #accordionVoucher .tabs .tab-item .checkbox {
                background: #45A9E8;
            }
            
            #payment3 .tabs .tab-item .checkbox {
                background: white;
            }

                /*.main-div-page .filters-wrapper*/ 
                .tabs .tab-item .checkbox.active span {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: white;
                }

        .main-div-page .filters-wrapper input[type="date"] {
            height: 28px;
            width: 150px;
            /*font-family: Regular;*/
            border: none;
            border-radius: 4px;
            font-size: 14px;
            padding: 4px 4px 0 10px;
            margin-left: 20px;
            min-width: 150px;
        }

        .main-div-page .filters-wrapper input:focus {
            outline: none;
        }

        .main-div-page .filters-wrapper .search {
            position: relative;
            width: 100%;
            display: flex;
            margin-left: 20px;
            align-items: center;
        }

            .main-div-page .filters-wrapper .search img.srch {
                position: absolute;
                width: 20px;
                top: 6px;
                left: 8px;
            }


                .main-div-page .filters-wrapper .search img.clean {
                    height: 18px;
                    margin-left: 8px;
                    cursor: pointer;
                }

            .main-div-page .filters-wrapper .search input[type=text] {
                height: 32px;
                padding: 5px 5px 5px 34px;
                font-size: 14px;
                width: 96%;
                display: inline-block;
                border: none;
                border-radius: 4px;
                box-sizing: border-box;
            }

.flights-list {
    height: 385px;
    overflow-y: auto;
}


    .flights-list::-webkit-scrollbar {
        width: 5px;
        cursor: pointer;
    }

    .flights-list::-webkit-scrollbar-track {
        border-radius: 4px;
        background: #f1f1f1;
        cursor: pointer;
    }

    .flights-list::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: #adadad;
        cursor: pointer;
    }

        .flights-list::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
            cursor: pointer;
        }

    .flights-list .flight-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        cursor: pointer;
    }
    

        /*.flights-list .flight-item:nth-child(2n+1) {
            background: rgba(255, 255, 255, .2);
        }

        .flights-list .flight-item:nth-child(2n) {
            background: rgba(255, 255, 255, .1);
        }*/

        .flights-list .flight-item.active {
            background: #45A9E8 !important;
        }

        .flights-list .flight-item .flight-number {
            color: white;
            padding: 0 30px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #006596;
            width: 300px;
        }

        .flights-list .flight-item .flight-img {
            width: 140px;
            height: 100%;
        }

            .flights-list .flight-item .flight-img img {
                height: 24px;
                max-width: 100%;
            }

        .flights-list .flight-item .flight-number .flight-number-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            /*font-family: Bold;*/
            font-weight: bold;
            padding-bottom: 6px;
        }

        .flights-list .flight-item .flight-number .flight-number-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
            /*font-family: Regular;*/
            color: #d9f3ff;
        }

        .flights-list .flight-item .flight-date {
            padding: 0 20px;
            font-size: 13px;
            /*font-family: Regular;*/
            color: #d9f3ff;
        }

.btn-wrapper {
    margin: 35px 0;
    display: flex;
    justify-content: flex-end;
}

#payment2 .btn-wrapper, #payment3 .btn-wrapper, #payment4 .btn-wrapper, #payment5 .btn-wrapper {
    justify-content: space-between !important;
}

#accordion .tabs, #accordionVoucher .tabs, #payment3 .tabs {
    position: absolute;
    z-index: 999;
    margin-top: 10px;
    margin-left: 8px;
}

.btn-wrapper button, .btn-wrapper input {
    /*text-transform: uppercase;*/
    font-size: 14px;
    padding: 7px 30px;
    background: #45A9E8;
    border: none;
    border-radius: 3px;
    color: white;
    /*font-family: Bold;*/
    font-weight: bold;
    cursor: pointer;
}

    .btn-wrapper button:focus, .btn-wrapper input:focus {
        border: none;
        outline: none;
    }

/* second tab  */

#payment3 .main-div-page {
    display: flex;
    position: relative;
}

.main-div-page .left-side {
    width: calc(100% - 320px);
    margin-right: 4%;
}

.main-div-page .order-box {
    width: 411px;
    align-self: flex-start;
    padding: 12px;
    /*margin-top: 25px;*/
    border: 1px solid #45A9E8;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
}

/*.main-div-page .page-main-title {
    color: white;
    font-size: 30px;
    font-family: Bold;
}*/

.main-div-page .page-main-subTitle {
    color: white;
    font-size: 18px;
    /*font-family: Bold;*/
    font-weight: bold;
    margin-bottom: 25px;
}

.main-div-page .order-box .page-main-subTitle {
    margin-top: 0;
}

.main-div-page .page-main-text {
    color: #d9f3ff;
    font-size: 14px;
    /*font-family: Regular;*/
    line-height: 20px;
}

.main-div-page .page-main-subText {
    color: #d9f3ff;
    font-size: 13px;
    /*font-family: Regular;*/
    margin-bottom: 8px;
}

/*.services-list {
    height: 220px;
    overflow-y: auto;
}*/


    .services-list::-webkit-scrollbar {
        width: 5px;
        cursor: pointer;
    }

    .services-list::-webkit-scrollbar-track {
        border-radius: 4px;
        background: #f1f1f1;
        cursor: pointer;
    }

    .services-list::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: #adadad;
        cursor: pointer;
    }

        .services-list::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
            cursor: pointer;
        }

    .services-list .service-item {
        display: flex;
        justify-content: center;
        cursor: pointer;
        color: white;
        padding: 8px 16px 8px 36px;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

.services-list .serviceItem {
    border-radius: 4px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, .1);
}
        /*.services-list .serviceItem:nth-child(2n+1) {
            background: rgba(255, 255, 255, .2);
        }

        .services-list .serviceItem:nth-child(2n) {
            background: rgba(255, 255, 255, .1);
        }*/

        .services-list .service-item.active {
            background: #45A9E8;
        }


        .services-list .service-item .service-item-title {
            overflow: hidden;
            text-overflow: ellipsis;
            /*white-space: nowrap;*/
            font-size: 14px;
            /*font-family: Regular;*/
            padding-bottom: 6px;
            color: #d9f3ff;
            font-weight: normal;
        }

        .services-list .service-item .service-item-title.sitType {
            font-size: 15px;
            /*font-family: Bold;*/
            font-weight: bold;
            color: white;
            text-decoration: underline;
        }
        
        .services-list .service-item .service-item-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 15px;
            /*font-family: Bold;*/
            font-weight: bold;
            color: white;
        }

        .services-list .service-item .badge {
            position: absolute;
            top: 4px;
            right: -20px;
            color: #45A9E8;
            background: white;
            padding: 2px 20px;
            transform: rotate(43deg);
            /*font-family: Bold;*/
            font-weight: bold;
            font-size: 14px;
        }

.main-div-page .services-more-info {
    line-height: 1.7;
    margin-top: 5px;
}

.fields-wrapper .line {
    border-top: 1px solid rgba(255, 255, 255, .2);
    height: 0;
    margin: 24px 0 0;
    width: 100%;
}

.fields-wrapper .fields-content {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

    .fields-wrapper .fields-content.count-wrapper {
        display: flex;
    }

        .fields-wrapper .fields-content.count-wrapper .input-group {
            width: 150px;
            margin-right: 16px;
        }

.fields-wrapper .input-group {
    display: flex;
    flex-direction: column;
    width: calc((100% - 30px) / 2);
}

    .fields-wrapper .input-group label {
        height: 17px;
        font-size: 13px;
        color: #d9f3ff;
        margin-bottom: 8px;
    }

    .fields-wrapper .input-group .input-with-icon {
        display: flex;
        align-items: center;
    }

        .fields-wrapper .input-group .input-with-icon > img {
            height: 18px;
            margin-left: 8px;
            cursor: pointer;
        }

    .fields-wrapper .input-group .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #45A9E8;
        margin-left: 8px;
        cursor: pointer;
    }

        .fields-wrapper .input-group .icon-wrapper img {
            height: 60%;
        }

    .fields-wrapper .input-group:nth-child(2n+1) {
        margin-right: 30px;
    }

    .fields-wrapper .input-group .field {
        width: 100%;
        height: 32px;
        padding: 5px 10px;
        /*font-size: 14px;*/
        display: inline-block;
        border: none;
        border-radius: 4px;
        box-sizing: border-box;
    }

        .fields-wrapper .input-group .field option:hover {
            border: none;
            outline: none;
        }

        .fields-wrapper .input-group .field:focus {
            outline: none;
        }

.order-box .line {
    border-top: 1px solid rgba(255, 255, 255, .2);
    height: 0;
    margin: 12px 0;
    width: 100%;
}

.order-box .order-info {
    padding: 10px 0;
}

.order-box .order-box-price {
    text-align: center;
    color: white;
    font-size: 18px;
    /*font-family: Bold;*/
    font-weight: bold;
}

.order-box .next-btn {
    /*text-transform: uppercase;*/
    font-size: 14px;
    padding: 7px 36px;
    border: none;
    background: #45A9E8;
    border-radius: 3px;
    color: white;
    /*font-family: Bold;*/
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    /*height: 32px;*/
    margin-top: 12px;
}

    .order-box .next-btn:focus {
        outline: none;
    }

.order-box .order-info .order-info-item {
    display: flex;
    justify-content: space-between;
    /*font-family: Regular;*/
    margin-bottom: 5px;
}

    .order-box .order-info .order-info-item .order-info-item-title {
        color: #d9f3ff;
        font-size: 14px;
        white-space:nowrap;
        padding-right: 10px;
    }

    .order-box .order-info .order-info-item .order-info-item-description {
        /*font-family: Bold;*/
        font-weight: bold;
        color: white;
        font-size: 14px;
        text-align:right;
    }

#payment3, #payment4, #payment5 {
    text-align: left;
}
/* second tab end*/

/* third tab  */


    #payment4 .main-div-page, #payment5 .main-div-page {
        display: flex;
        position: relative;
    }

.fields-wrapper .input-group .input-with-icon input {
    width: calc(100% - 30px);
}

.btn-wrapper button.checkout-btn {
    display: none;
}

/* third tab end*/

.trans-arrow-right
{
    transform: rotate(-90deg);
}

.main-div-page .approval-box .approval-title-box {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
}

    .main-div-page .approval-box .approval-title-box .toggle-icon {
        margin-left: 8px;
        display: flex;
        align-items: center;
    }

.main-div-page .approval-box {
    align-self: flex-start;
    padding: 0 12px;
    margin-top: 25px;
    border: 1px solid #45A9E8;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
}

    .main-div-page .approval-box .approval-text {
        color: white;
        font-size: 15px;
        margin-bottom: 20px;
    }

.main-div-page .checkbox-wrapper {
    margin-top: 20px;
    color: white;
    font-size: 15px;
    display: flex;
    align-items: center;
}

    .main-div-page .checkbox-wrapper span {
        width: calc(100% - 30px);
        font-weight: bold;
    }

    .main-div-page .checkbox-wrapper .checkbox {
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, .2);
        font-size: 13px;
        /*font-family: Bold;*/
        font-weight: bold;
    }

        .main-div-page .checkbox-wrapper .checkbox.checked {
            background: #45A9E8;
        }

            .main-div-page .checkbox-wrapper .checkbox.checked img {
                width: 10px;
            }


@media all and (max-width: 1000px) {
    .page-header .line {
        width: 100px;
        margin-right: 8px;
    }

    .page-header .step .step-title {
        margin: 0 8px;
        font-size: 14px;
    }

    .filters-wrapper .search {
        flex-grow: 1;
    }

    .fields-wrapper .input-group {
        width: 100%;
    }

        .fields-wrapper .input-group:nth-child(2n+1) {
            margin-right: 0;
        }

    .fields-wrapper .fields-content:first-child .input-group:first-child {
        margin-bottom: 20px;
    }

    .main-div-page .left-side > .btn-wrapper {
        justify-content: space-between;
    }
}

@media all and (max-width: 830px) {
    /*.bgImage {
        padding: 18% 5% 15%;
    }

        .bgImage::before {
            background-color: rgba(0, 102, 150, 0.6);
            content: '';
            display: block;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
        }

    .info-section .menu-title {
        font-size: 45px;
        margin: -60px 0 0px 4px;
    }*/

    .page-header .line {
        width: 40px;
        margin-right: 8px;
    }

    .page-header .step .step-title {
        margin: 0 8px;
        font-size: 14px;
    }

    .filters-wrapper, .main-div-page {
        flex-wrap: wrap;
    }

        .main-div-page .filters-wrapper .tabs-wrapper {
            width: 100%;
            justify-content: space-between;
        }

        .main-div-page .filters-wrapper .search {
            margin-left: 0;
            margin-top: 16px;
        }

        .main-div-page .left-side {
            width: 100%;
            margin-right: 0;
        }

            .main-div-page .left-side > .btn-wrapper {
                position: absolute;
                bottom: 0;
                width: 64%;
                justify-content: space-between;
            }
        /*#payment3 .main-div-page .left-side > .btn-wrapper {
                width: calc(100% - 10%) !important;
            }*/

        .main-div-page .order-box {
            width: 100%;
            margin-bottom: 90px;
            margin-top: 25px;
        }

    /*.main-div-page .order-box .next-btn {
                display: none;
            }*/

    .btn-wrapper button.checkout-btn {
        display: block;
    }

    .btn-wrapper button, .btn-wrapper input {
        padding: 7px 30px;
    }
}

@media all and (max-width: 650px) {
    .icons-bar {
        margin: 15% 1%;
        margin-bottom: 2%;
    }

    .page-header {
        padding: 8px 10px;
    }

    .page-header .line {
        flex-grow: 1;
        margin-right: 12px;
    }

    .page-header .step .step-number {
        margin-right: 12px;
    }

    .page-header .step .step-title {
        display: none;
    }

    .main-div-page {
        padding: 10px;
    }
    
    /*.flights-list .flight-item, .services-list .service-item {
        padding: 5px;
    }*/

        .flights-list .flight-item .flight-img {
            width: 70px;
        }

        .flights-list .flight-item .flight-number {
            padding: 0 0 0 12px;
            flex-grow: 1;
            border-right: 0;
            width: 200px;
        }

        .flights-list .flight-item .flight-date {
            padding: 0 0 0 5px;
            width: 62px;
        }

    .main-div-page .left-side > .btn-wrapper {
        position: absolute;
        bottom: 0;
        width: calc(100% - 20px);
        justify-content: space-between;
    }
    
    .main-div-page .order-box {
        padding: 12px 16px;
    }

    #accordion .tabs, #accordionVoucher .tabs, #payment3 .tabs {
        padding-top: 0;
    }
}

@media all and (max-width: 500px) {
    /*.bgImage {
        padding: 20% 10px 22%;*/
        /*width: calc(100% - 20px);*/
    /*}*/

    .page-header {
        padding: 8px 10px;
    }

    /*.info-section .menu-title {
        font-size: 34px;
        margin: -40px 0 0px 4px;
    }

    .icons-menu a.menu-btn {
        font-size: 9px;
        padding: 9em 5px 0 5px;
        width: 70px;
        min-height: 100px;
        text-transform: uppercase;
    }*/

    .main-div-page {
        padding: 10px;
    }

    .flights-list .flight-item {
        align-items: flex-start;
    }

    .main-div-page .filters-wrapper .tabs .tab-item .checkbox {
        width: 18px;
        height: 18px;
    }

    .main-div-page .filters-wrapper .tabs .tab-item .checkbox-text {
        margin: 0 8px;
        font-size: 13px;
    }

    .main-div-page .filters-wrapper input[type="date"] {
        height: 28px;
        width: 115px;
        font-size: 14px;
        padding: 2px 4px 0 10px;
        margin-left: 0;
    }

    .main-div-page .order-box {
        padding: 8px 12px;
    }
}

@media all and (max-width: 400px) {
    .flights-list .flight-item .flight-date {
        font-size: 11px;
    }
}

input[type="date"]::-webkit-inner-spin-button {
    opacity: 0
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: url(/Img/Payment/calendar.svg) center/100% no-repeat;
    color: rgba(0, 0, 0, 0);
    opacity: 0.5
}

    input[type="date"]::-webkit-calendar-picker-indicator:hover {
        background: url(/Img/Payment/calendar.svg) center/100% no-repeat;
        opacity: 0.8
    }

.main-div-page .filters-wrapper .calendar-wrapper {
    position: relative;
}

.main-div-page .filters-wrapper .calendar-wrapper .calendar-icon {
    position: absolute;
    right: 4px;
    top: 4px;
}

.main-div-page .filters-wrapper .calendar-wrapper input[type="text"] {
    height: 32px;
    width: 120px;
    border: none;
    border-radius: 4px;
    padding-left: 10px;
    font-size: 14px;
}

div.datepicker.datepicker-dropdown.dropdown-menu
{
    font-size: 14px;
}

div.datepicker .table-condensed {
    width: 250px;
}

.datepicker-day-bold {
    font-weight: bold;
}

.datepicker-switch {
    font-weight: normal;
}

@media (min-width: 831px) and (max-width: 1100px) {
    .btn-wrapper button, .btn-wrapper input {
        padding: 7px 10px;
    }
}

#accordion .card, #accordionVoucher .card {
    background-color: inherit;
    margin-bottom: 15px;
}
    #accordion .card .btn-link, #accordionVoucher .card .btn-link {
        color: white;
    }

#accordion .card-header h5 {
    margin-left: 30px;
}

#accordion .card-body, #accordionVoucher .card-body {
    margin-left: 45px;
}

#accordion .field, #accordionVoucher .field {
    width: 85%;
    height: 32px;
    padding: 5px 10px;
    font-size: 14px;
    display: inline-block;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

    #accordion .field option:hover, #accordionVoucher .field option:hover {
        border: none;
        outline: none;
    }

    #accordion .field:focus, #accordionVoucher .field:focus {
        outline: none;
    }

.iti {
    --iti-path-flags-1x: url('../../../img/intl-tel-input/img/flags.webp');
    --iti-path-flags-2x: url('../../../img/intl-tel-input/img/flags@2x.webp');
    --iti-path-globe-1x: url('../../../img/intl-tel-input/img/globe.webp');
    --iti-path-globe-2x: url('../../../img/intl-tel-input/img/globe@2x.webp');
    width: 100%;
    color: black;
}

.radio-btn {
    display: block;
    padding: 5px 10px;
}

.radio-lbl {
    font-size: 14px;
    font-weight: bold;
}
