.booking-wizard {
    padding: 10px;
    min-height: 600px;
}

    .booking-wizard label.blue-label {
        color: #33c7df;
    }

.text-blue {
    color: #33c7df;
}

.location-list {
    width: max-content;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    margin-left: auto;
    margin-right: auto;
}

    .location-list .radio {
        margin-bottom: 20px;
    }

/* START loader styles */
#booking-wizard-loader {
    position: fixed;
    z-index: 999;
    height: 5em;
    width: 14em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

    #booking-wizard-loader .img-container {
        background-color: #fff;
        padding: 8px 0px;
        width: 190px;
        text-align: center;
    }

    #booking-wizard-loader:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
    }

/* END loader styles */

.p-justified {
    text-align: justify;
}

.validation-error, form label.error {
    color: red;
    font-weight: 400;
}

.nav-btn-container {
    margin-top: 4%;
    margin-bottom: 2%;
}

    .nav-btn-container .btn-blue-nav {
        color: #fff;
        border-radius: 0;
        background-color: #33c7df;
        font-size: 16px;
        font-weight: 600;
        padding: 12px 55px;
        border: 1px solid #fff;
        box-shadow: #a4a4a4 4px 4px 6px;
    }

        .nav-btn-container .btn-blue-nav:hover {
            background-color: #29a1b4;
        }

.mb-4-per {
    margin-bottom: 4%;
}

.mb-2-per {
    margin-bottom: 2%;
}

div.ui-datepicker {
    font-size: 17px;
}

.ui-datepicker-inline {
    margin-left: auto;
    margin-right: auto;
}


.calendar-color-sample-table .calendar-color-sample-box {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

    .calendar-color-sample-table .calendar-color-sample-box.available-date {
        background-color: #ffff78;
    }

    .calendar-color-sample-table .calendar-color-sample-box.unavailable-date {
        background-color: #bbbbbb;
    }

    .calendar-color-sample-table .calendar-color-sample-box.selected-date {
        background-color: #77d5a2;
    }

.calendar-color-sample-table tr.sample {
    height: 40px;
}

.info-icon {
    font-size: 19px;
    vertical-align: middle;
    color: #c2c3d5;
    margin-left: -15px;
}

.wizard-steps {
    text-align: center;
    margin-bottom: 40px;
}

    .wizard-steps .step-container {
        width: 24.5%;
        display: inline-table;
    }

        .wizard-steps .step-container .step-no-container {
            position: relative;
        }

            .wizard-steps .step-container .step-no-container .step-no {
                width: 100px;
                height: 100px;
                background-color: #fff;
                border-radius: 50%;
                line-height: 96px;
                margin-left: auto;
                margin-right: auto;
                font-size: 34px;
                font-weight: bold;
                border: 3px solid #33c7df;
                box-shadow: #a8a7a7 3px 3px 8px;
                color: #33c7df;
                cursor: pointer;
            }

            .wizard-steps .step-container .step-no-container .line {
                width: 100%;
                height: 5px;
                background-color: #33c7df;
                z-index: -1;
                position: absolute;
                top: 50%;
                left: 50%;
            }

            .wizard-steps .step-container .step-no-container .step-no:hover {
                background-color: #eee;
            }

        .wizard-steps .step-container.active-step .step-no-container .step-no {
            background-color: #33c7df;
            color: #fff;
            border: 3px solid #fff;
        }

        .wizard-steps .step-container .step-name {
            margin-top: 12px;
            font-size: 15px;
            color: #33c7df;
        }

        .wizard-steps .step-container.active-step .step-name {
            font-weight: bold;
        }

.slots-available-date a {
    background-color: #ffff78 !important;
}

.slots-unavailable-date span {
    background-color: #bbbbbb !important;
}

.selected-date a {
    background-color: #76d5a2 !important;
}

.success-icon {
    color: #4caf4f;
    font-size: 98px;
    margin-bottom: 8%;
}

.required {
    color: red;
}

@media (max-width: 991.98px) {
    .calendar-color-sample-table {
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
    }

        .calendar-color-sample-table tr.sample {
            display: unset;
        }

    .date-time-display-container{
        margin-top:8%;
    }

}

@media (max-width: 767.98px) {
    .wizard-steps .step-container .step-no-container .step-no {
        width: 60px;
        height: 60px;
        line-height: 56px;
        font-size: 22px;
    }
}


@media (max-width: 575.98px) {
    .info-icon {
        font-size: 10px;
        margin-left: -15px;
    }

    .wizard-steps .step-container {
        width: 23.5%;
    }

        .wizard-steps .step-container .step-no-container .step-no {
            width: 45px;
            height: 45px;
            line-height: 41px;
            font-size: 16px;
        }

    .location-list {
        width: 100%;
    }
}