/*===========
Global Styles
============*/

.onlinedocs h1 {
    margin: 0;
}

.container h1 + .sub {
    text-align: center;
    font-weight: 100;
    margin: 6px auto 20px auto;
}

@media screen and (min-width:768px) {
    .container h1 + .sub {
        width: 45%;
    }
}

.onlinedocs ul.ul-list li {
    list-style-type: disc;
    margin: 0 0 10px 20px;
    font-weight: 100;
}



.onlinedocs a.help {
    font-size: 10px;
    font-family: montserrat;
    border: 1px solid;
    border-radius: 100%;
    display: inline-block;
    width: 18px;
    height: 19px;
    line-height: 1.7;
    padding: 0px 0 0 5px;
    margin-left: 5px;
    font-weight: 100;
    position: absolute;
    top: -3px;
}

.onlinedocs #step-wrap {
    padding: 30px 0 20px;
    margin-bottom: 30px;
}

.onlinedocs .container.payment {
    margin-top: 0;
}

.row.return {
    /*padding: 30px 0 20px;*/
    margin-bottom: 30px;
}


/*===============
Booking ID Header
===============*/

@media screen and (min-width:560px) {
    .booking-id {
        float: left;
    }

    .need-help {
        float: right;
    }
}

.onlinedocs #step-wrap p {
    font-size: 18px;
    color: white;
}

.booking-id p {
    text-transform: capitalize;
}

.onlinedocs #step-wrap span {
    display: block;
    font-size: 16px;
}

@media screen and (min-width:768px) {
    .onlinedocs #step-wrap p {
        font-size: 22px;
        color: white !important;
    }
}

/*==========
Panel Styles
===========*/

.onlinedocs .panel {
    color: black;
    border-radius: 0;
    background: #f7f7f7;
    padding: 30px;
    position: relative;
    margin-bottom: 30px;
}

.onlinedocs .panel h4 {
    margin: 0;
    margin-bottom: 4px;
}

.onlinedocs .panel .title {
    background-repeat: no-repeat;
    height: 70px;
    padding-left: 70px;
    margin-bottom: 10px;
    display: table;
}

.onlinedocs .panel .title h1 {
    margin: 0;
}

.onlinedocs .panel .title > span {
    font-size: 14px;
    color: #b2b2b2;
}

.onlinedocs .panel hr {
    margin-top: 0;
    border-color: #736b76;
}

.onlinedocs .panel section {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

.onlinedocs .panel > .panel {
    padding: 20px 30px 10px;
    background: #f7f7f7;
    border-radius: 12px;
    margin-bottom: 20px;
}

.panel.panel-action {
    background: #3c3643;
}

.onlinedocs .panel > .panel:last-child {
    margin-bottom: 0px;
}

.onlinedocs .panel.error {
    background: #ffdcdc;
}

.nextOfKin {
    margin-bottom: 20px !important;
}
/*==========
Login Styles
==========*/
.login-bg {
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: url(https://res.cloudinary.com/destinology/image/upload/v1612453676/cn_images/onlinedocsBackground.jpg) no-repeat top left;
    background-size: cover;
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

.onlinedocs.login {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 88px);
    display: flex;
    align-items: center;
}

.login > .panel {
    width: 290px;
    margin: 0 auto 20px auto;
}

#_rootContent__pnlAccessDenied, #ctl00__rootContent__pnlAccessDenied {
    color: red;
}

@media screen and (min-width:768px) {
    .login > .panel {
        width: 360px;
    }
}

.login .panel h1 {
    margin-bottom: 30px;
}

.login .panel .form-control {
    background-color: #fbfbfb;
    border: 1px #b5b5b5 solid;
    color: black;
}



/*========
Title Icons
==========*/

.onlinedocs .panel.documents .title {
    background-image: url(../Images/icon-docs.svg);
    padding-top: 15px;
}

.onlinedocs .panel.extras .title {
    background-image: url(../Images/icon-docs.svg);
    padding-top: 15px;
}

.onlinedocs .panel.hotel .title {
    background-image: url(../Images/icon-hotel.svg);
    padding-top: 7px;
}

.onlinedocs .panel.transfer .title {
    background-image: url(../Images/icon-car.svg);
    padding-top: 7px;
}

.onlinedocs .panel.flight .title {
    background-image: url(../Images/icon-flights.svg);
    padding-top: 7px;
}

.onlinedocs .panel.passenger .title {
    background-image: url(../Images/extra-img7.png);
    padding-top: 15px;
}

.onlinedocs .panel.card-details .title {
    background-image: url(https://res.cloudinary.com/destinology/image/upload/v1615391440/cn_images/website/icon-lock.svg);
    padding-top: 15px;
}

.onlinedocs .panel.payments .title {
    background-image: url(https://res.cloudinary.com/destinology/image/upload/v1615391440/cn_images/website/icon-lock.svg);
    padding-top: 15px;
}

.onlinedocs .panel.billing-address .title {
    background-image: url(../Images/extra-img7.png);
    padding-top: 15px;
}

.onlinedocs .panel.comments .title {
    background-image: url(../Images/icon-comments.svg);
    padding-top: 15px;
}

.onlinedocs .panel.nextOfKin .title {
    background-image: url(https://res.cloudinary.com/destinology/image/upload/v1615391440/cn_images/website/icon-lock.svg);
    padding-top: 15px;
}

/*==============
Travel Documents
==============*/

@media screen and (min-width:1200px) {
    .onlinedocs .description {
        display: inline-block;
        width: 70%;
    }

    .onlinedocs .small .description {
        width: 40%;
    }
}

@media screen and (min-width:1200px) {
    .onlinedocs .buttons {
        display: inline-block;
        float: right;
    }

    .onlinedocs .buttons span:nth-of-type(2) {
        margin-left: 5px;
    }
}




.extras ul {
    margin: 20px 0 30px 10%;
    max-width: 250px;
    margin: 0 auto;
}

.extras ul li {
    margin: 0 0 15px;
    background-position: left;
    background-repeat: no-repeat;
    padding: 25px 0 0 70px;
    height: 70px;
}

.extras li.insurance {
    background-image: url(../Images/icon-safe-hands.svg);
}

.extras li.lounges {
    background-image: url(../Images/icon-lounge.svg);
}

.extras li.parking {
    background-image: url(../Images/icon-parking.svg);
}

.extras li.hotels {
    background-image: url(../Images/icon-airport-hotel.svg);
}

.extras li.hotelparking {
    background-image: url(../Images/icon-airport-parking.svg);
}

.extras ul li img {
    margin-right: 15px;
}


/*=============
Payment Details
=============*/

.onlinedocs .panel.confirm {
    background: #f7f7f7;
    text-align: center;
}

.onlinedocs .panel.confirm h2,
.onlinedocs .panel.confirm h4 {
    color: #f7f7f7;
}

.onlinedocs .panel.confirm .total {
    font-size: 28px;
}

.onlinedocs .panel.confirm input {
    margin-top: 16px;
}

.onlinedocs .panel.confirm .pb-warning {
    padding-top: 2em;
    text-align: center;
    font-size: 14px;
}

.onlinedocs .panel .sub.mini {
    font-size: 12px;
    color: #999;
    font-weight: normal;
    margin-top: 20px;
}

.onlinedocs .summary h1 {
    margin-bottom: 20px;
}

.onlinedocs .summary ul {
    margin: 0 0 20px 0;
    border-bottom: 1px solid #3c3643;
}

.onlinedocs .summary ul:last-of-type {
    margin: 0;
    border-bottom: none;
}

.onlinedocs .summary li {
    margin-bottom: 20px;
}

.onlinedocs .summary label {
    display: block;
    font-size: 10px;
    -webkit-letter-spacing: 2px;
    -moz-letter-spacing: 2px;
    -ms-letter-spacing: 2px;
    -o-letter-spacing: 2px;
    letter-spacing: 2px;
    font-family: 'Montserrat', sans-serif;
    color: #b2b2b2;
    margin-bottom: 0px;
    text-transform: uppercase;
}

.onlinedocs .summary span.outstanding {
    color: #f5a623;
    font-size: 1.5em;
}

.onlinedocs img.cvv-image {
    width: 100%;
    max-width: 398px;
    border: 5px solid white;
    border-radius: 5px;
    margin-bottom: 10px;
}

.form-info .expiry-date div {
    display: block;
}

.onlinedocs label.validator_error {
    color: red;
    display: inherit;
    border-radius: 5px;
    text-transform: inherit;
    font-size: 15px;
    font-weight: normal;
    font-family: lato;
    letter-spacing: normal;
}

/* Direct Debit */
.payment-schedule-list {
    padding: 20px;
    background-color: #3c3643;
    margin-top: 20px;
}

.direct-debit-setup h1,
.direct-debit-setup h2,
.direct-debit-setup h3,
.direct-debit-setup h4 {
    text-align: left;
}

.direct-debit-setup h2 {
    font-size: 30px;
    font-weight: bold;
}

.direct-debit-setup h3 {
    font-size: 24px;
    font-weight: bold;
}

.direct-debit-setup .payment-schedule-row {
    margin: 10px 0;
}

.direct-debit-setup .btn.btn-success {
    padding: 10px;
    width: 40%;
    display: inline-block;
    color: #fff;
    min-width: 200px;
}

.direct-debit-setup .panel.panel-action {
    text-align: center;
}

.direct-debit-setup .powered-by {
    margin-top: 10px;
    color: #888;
}

.direct-debit-setup .payment-schedule-breakdown {
    padding: 10px 0;
}

.direct-debit-setup.complete {
    text-align: center;
}

.direct-debit-setup.complete h3 {
    text-align: center;
}

.banner-link {
    color: white !important;
    text-decoration: underline;
}