﻿
.board {
    width: 100%;
    /*width: 75%;*/
    margin: auto;
    height: 500px;
    background: #000;
    /*background: #fff;*/
    /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}

    .board .nav-tabs {
        position: relative;
        /* border-bottom: 0; */
        /* width: 80%; */
        margin: auto;
        /*margin: 40px auto;*/
        margin-bottom: 0;
        box-sizing: border-box;
    }

    .board > div.board-inner {
        background: #fafafa;
        background-size: 30%;
    }

    .board #btnChooseTicket {
        width: 100%;
        height: 40px;
        border-radius: 14%;
    }

    .board .btn-footter {
        text-align: right;
        padding-right: 0;
    }

    .board .center {
        text-align: center;
    }

p.narrow {
    width: 60%;
    margin: 10px auto;
}

.liner {
    height: 2px;
    background: #ddd;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555555;
    /*cursor: default;*/
    /* background-color: #ffffff; */
    border: 0;
    border-bottom-color: transparent;
}

span.round-tabs {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: white;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}

    span.round-tabs.one {
        color: rgb(34, 194, 34);
        border: 2px solid rgb(34, 194, 34);
    }

li.active span.round-tabs.one {
    background: #fff !important;
    border: 2px solid #ddd;
    color: rgb(34, 194, 34);
}

span.round-tabs.two {
    color: #febe29;
    border: 2px solid #febe29;
}

li.active span.round-tabs.two {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #febe29;
}

span.round-tabs.three {
    color: #3e5e9a;
    border: 2px solid #3e5e9a;
}

li.active span.round-tabs.three {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #3e5e9a;
}

span.round-tabs.four {
    color: #f1685e;
    border: 2px solid #f1685e;
}

li.active span.round-tabs.four {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #f1685e;
}

span.round-tabs.five {
    color: #999;
    border: 2px solid #999;
}

li.active span.round-tabs.five {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #999;
}

.nav-tabs > li.active > a span.round-tabs {
    background: #fafafa;
}

.nav-tabs > li {
    /*width: 20%;*/
    margin: 0 auto;
}
    /*li.active:before {
    content: " ";
    position: absolute;
    left: 45%;
    opacity:0;
    margin: 0 auto;
    bottom: -2px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    z-index: 1;
    transition:0.2s ease-in-out;
}*/
    .nav-tabs > li:after {
        content: " ";
        position: absolute;
        left: 45%;
        opacity: 0;
        margin: 0 auto;
        bottom: 0px;
        border: 5px solid transparent;
        /*border-bottom-color: #ddd;*/
        transition: 0.1s ease-in-out;
    }

    .nav-tabs .show {
        background: #eb4659;
        border-radius: 0;
        padding: 5px;
        color: white;
        text-align: center;
    }
.nav-tabs .show:hover {
    background: #eb4659;
    /*border-radius: 0;
    padding: 5px;
    color: white;
    text-align: center;*/
}

    .nav-tabs > li.active:after {
        content: " ";
        position: absolute;
        left: 45%;
        opacity: 1;
        margin: 0 auto;
        bottom: 0px;
        border: 10px solid transparent;
        /*border-bottom-color: #ddd;*/
    }

    .nav-tabs > li a {
        /*width: 70px;*/
        height: 70px;
        margin: 20px auto;
        /*border-radius: 100%;*/
        padding: 0;
    }

        .nav-tabs > li a:hover {
            /*background: transparent;*/
        }

.tab-content .col-lg-12 {
    margin: 0;
    padding: 0;
}

.tab-pane {
    position: relative;
    /*padding-top: 50px;*/
}

.tab-content .head {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.btn-outline-rounded {
    padding: 10px 40px;
    margin: 20px 0;
    border: 2px solid transparent;
    border-radius: 25px;
}

.btn.green {
    background-color: #5cb85c;
    /*border: 2px solid #5cb85c;*/
    color: #ffffff;
}

.board .green {
    background-image: -webkit-linear-gradient(169deg, #5560ff 17%, #52aa55 63%, #10c302 100%);
    border: none;
}

#checkOut .alert-warning a{
    color: #5a5ffa;
}

.board .custom-button {
    border: none;
}


@media( max-width : 585px ) {
    .board {
        width: 100%;
        /*width: 90%;*/
        /*height: auto !important;*/
    }

        .board .liner {
            top: 77%;
        }

        .board .custom-button {
            padding: 7px 7px;
            font-size: 11px;
           /* font-size: 13px;*/
        }
            .board .smal-btn {
                padding-top: 2px;
                padding-bottom: 2px;
            }

            .flaticon-right {
                font-size: 10px;
            }


    span.round-tabs {
        font-size: 16px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .tab-content .head {
        font-size: 20px;
    }

    .nav-tabs > li a {
        /*width: 50px;*/
        height: 50px;
        line-height: 50px;
        margin: 0;
    }

    .nav-tabs > li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }

    .btn-outline-rounded {
        padding: 12px 20px;
    }

    .board .checkout-widget {
        padding: 10px;
    }

    #bookingSimple .btn-promo {
        padding-top: 12px;
    }
}


/*Simple booking*/
#bookingSimple .board {
    height: 100%;
    background: #0a1f5e;
}
    #bookingSimple .board .check-out-section {
        padding-top: 10px;
    }

    #bookingSimple .board .checkout-widget .title {
        margin-top: 1px;
        padding-bottom: 5px;
    }

    #bookingSimple .board .checkout-widget .payment-option li a {
        min-height: 89px;
        width: 140px;
       /* width: 100px;*/
    }
#bookingSimple .section-header-3 i {
    color: #eb4659;
}

#bookingSimple .ticket-name {
    text-transform: uppercase;
    font-size: 15px;
}

#bookingSimple .ticket-desc {
    color: #5760fd;
}

#bookingSimple .ticket-type {
    font-size: 14px;
}


#bookingSimple .ticket--area .ticket-item {
    padding: 20px 15px;
}

#bookingSimple .show-payment-reminder-Message-alert p {
    text-align: center;
    font-size: 20px;
    color: #eb4659;
}

#bookingSimple .ticket--area .ticket-item .validity, .validity {
    background: #ffc107 !important;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 15px;
    color: black;
}

#bookingSimple .noTicket {
    font-size: 23px;
    color: #eb4659;
}

#bookingSimple .section-box {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 18, 50, 0.6);
    padding: 15px;
    color: white;
}

#bookingSimple .faq-item .faq-title .title {
    max-width: none;
    color: #ffc107;
}

    #bookingSimple .faq-item .faq-title .right-icon {
        width: 26px;
        height: 26px;
        background: #2bb924;
    }



@media (max-width: 991px) {
    #bookingSimple {
        /*padding-top: 2rem;*/
    }

    .booking-summery ul {
        border: none;
    }
        .booking-summery ul li:first-child {
            margin-top: 0;
        }
        .booking-summery ul li {
            margin-bottom: 18px;
        }
            .booking-summery ul li .subtitle {
                font-size: 15px;
            }
    .booking-summery .proceed-area .subtitle {
        font-size: 15px;
        margin-bottom: 8px;
    }
    .booking-summery .title {
        padding-bottom: 9px;
        margin-bottom: 9px; 
    }
    .booking-summery .proceed-area {
        padding: 10px;
    }
}

@media (min-width: 350px) {
    #bookingSimple .payment-logo {
        width: 270px;
        margin: 0 auto;
    }
}

@media (min-width: 584px) {
    #bookingSimple .btn-promo {
        padding-top: 7px;
        height: 38px;
    }
}
