/*TODO: Move the rest of the booking flow styling into this.*/
.step .step-title:focus {
    outline: 2px solid black !important;
}

@media (max-width: 800px) {
    .step .step-title {
        font-size: 18px;
        height: fit-content;
        height: -moz-fit-content;
    }

    .step .step-header:not(.location-card-header):not(.confirm-header) {
        display: none;
    }

    .location-card-header h4 {
        display: none;
    }
}

@media (min-width: 801px) {
    .edit-bottom-container {
        display: none;
    }
}

.edit-bottom-container {
    text-align: center;
}

/* Location picker */
.location-option { /* Unclickable as default, clickable when .clickable class added to <tr> */
    cursor: default;
    pointer-events: none;
}

.location-option:hover:not(.disabled),
.location-option:focus:not(.disabled) {
    background: #dddcdc !important
}

@media (min-width: 801px) and (max-width: 999px) {
    .location-option .address {
        max-width: 100px;
    }

}
.location-option .address {
    width: calc(100% - 87px);
    padding-left: 0px !important;
}

.location-option .address > p {
    margin-bottom: 0px;
}

@media (max-width: 800px) {
    .location-option .car {
        width: 87px !important;
    }
}

.location-option .car {
    text-align: right !important;
}

.location-option .distance {
    width: calc(100% - 87px);
    padding-left: 0px !important;
}

.location-option .distance > p {
    margin-bottom: 0px;
    white-space: nowrap;
}

.location-option.disabled {
    background-color: hsl(0deg 0% 96%);
}

.location-option.disabled .proverstedRadio {
    opacity: 0.5;
    -webkit-filter: saturate(0.0);
    filter: saturate(0.0);
}

.location-option.disabled td {
    opacity: 0.8;
}

.location-option .noChange {
    text-align: right !important;
}

@media only screen and (max-width: 800px) {
    .location-option .samplesLocationName {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: flex !important;
        width: 100%;
    }

    .location-option .noChange {
        width: 87px !important;
        text-align: right !important;
    }
}


.general-info-text {
    padding: 10px 20px;
}

/* Accordion */

.accordion-entry {
    background: #FFFFFF;
    border-radius: 2px;
}

.accordion-entry-header {
    background: #FFFFFF;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border: none;
    cursor: pointer;
    border-bottom: 1px solid #DDDCDC;
}

.accordion-entry-header:focus {
    outline: 3px solid #007bff;
    outline-style: dashed;
    outline-offset: 1px;
}

.accordion-entry-header h5 {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
    text-align: left;
}

.accordion-arrow-down,
.accordion-arrow-up {
    display: none;
}

.accordion-entry-header[aria-expanded="true"] .accordion-arrow-up,
.accordion-entry-header[aria-expanded="false"] .accordion-arrow-down {
    display: block;
}

.accordion-entry-body {
    padding: 24px;
}

.clickable {
    cursor: pointer;
    pointer-events: auto;
}

@media print {
    .step:not(#confirmStep),
    .step-number,
    .card-footer {
        display: none;
    }
}