/**
 * Reservations styles for the "all {data type}" pages
 */

#eventContainerInfo .eventContainer {
    display: flex;
    height: unset;
    width: 100%;
}

.eventInfo #eventContainerTitles {
    border-bottom: 1px solid #ada65b;
    display: flex;
    padding: 7px 12px;
}

.eventInfo #eventContainerTitles .title {
    margin: 0 10px;
    width: 300px;
}

/**
 * All Reservations for Occasion
 */

#new_occasion_form {
    margin: 0 0 32px;
}

.eventInfo #eventContainerTitles #name.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #people.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #owe.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #notes.title {
    width: unset;
}

/**
 * All Contacts
 */
.eventInfo #eventContainerTitles #lastName.title {
    width: 150px;
}

.eventInfo #eventContainerTitles #firstName.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #phone.title {
    width: 127px;
}

.eventInfo #eventContainerTitles #address.title {
    width: 250px;
}

.eventInfo #eventContainerTitles #email.title {
    width: unset;
}

/**
 * All Occasions
 */

#eventContainerInfo:not(:has(div)) {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e7e7e7');
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e7e7e7));
    background: -moz-linear-gradient(top, #fff, #e7e7e7);
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    padding: 14px 12px;
}

.eventInfo #eventContainerTitles #eventDate.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #eventDay.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #eventTime.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #eventType.title {
    width: 50px;
}

.eventInfo #eventContainerTitles #eventName.title {
    width: 100px;
}

.eventInfo #eventContainerTitles #eventAvail.title {
    width: 50px;
}

.eventInfo #eventContainerTitles #eventGuests.title {
    width: 50px;
}

.eventInfo #eventContainerTitles #eventPrice.title {
    width: unset;
}

.eventInfo #eventContainerTitles #eventNotes.title {
    width: 240px;
}