.dwf-checkout-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:2em;
    margin-top:3em;
}

.booking-form .form-tab:not(.current) {
    display:none;
}

#error-message-container .alert {
    border-left: 5px solid gray;
    padding:1em;
    margin:1em 0;
}

#error-message-container .alert.alert-success {
    background-color: #c6e1c6;
    border-color: #5b841b;
}

#error-message-container .alert.alert-warning {
    background-color: #e1d8c6;
    border-color: #ab811c;
}

.booking-form .invalid-feedback {
    color: red;
}

.booking-form .extra-option {
    display: grid;
    grid-template-columns: 1fr 11fr;
}

.form-steps-container {
    display:flex;
    justify-content: center;
}

.form-steps-container .step {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin:0 2em;
}
.form-steps-container .step .step-number {
    font-family: var(--heading-font);
    width:40px;
    height:40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid green;
    color: green;
}
.form-steps-container .step.passed .step-number {
    color: white;
    background-color: green;
}

.form-steps-container .step .step-name {
    text-align: center;
}

.booking-summary-table {
    width:100%;
}

.booking-summary-table th {
    text-align: left;
}

.booking-summary-table th,
.booking-summary-table td {
    width:50%;
}

.dwf-booking-summary-totals {
    display:grid;
    grid-template-columns: 1fr 1fr;
}

.dwf-booking-summary-totals .dwf-total-price-col {
    display:flex;
    align-items: center;
}

.booking-summary .current-accommodation {
    display:grid;
    grid-template-columns: 3fr 9fr;
    grid-gap:1em;
}

.booking-summary .current-accommodation img {
    width:100%;
}

@media screen and (max-width: 993px) {
    .dwf-checkout-grid {
        grid-template-columns: 1fr;
    }
}