/* =========================================
   Cancellation Table
========================================= */

.cancellation-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cancellation-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--grey-950);
    font-family: var(--font-family-primary);
    font-size: 14px;
    line-height: 20px;
    border: 1px solid var(--grey-500);
    border-radius: 20px;
    overflow: hidden;
}


/* =========================================
   Header
========================================= */

.cancellation-table thead {
    background: var(--pink-500);
}

.cancellation-table th {
    padding: 8px 20px;
    color: var(--color-white);
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: var(--font-bold);
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid var(--grey-500);
}


/* =========================================
   Body
========================================= */

.cancellation-table tbody {
    background: var(--color-ivory);
}

.cancellation-table td {
    padding: 5px 20px;
    color: var(--grey-950);

    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: var(--font-regular);
    line-height: 20px;

    text-align: left;
    vertical-align: middle;

    border: 1px solid var(--grey-500);
}


/* =========================================
   Column Widths
========================================= */

.cancellation-table th:first-child,
.cancellation-table td:first-child {
    width: 50%;
}

.cancellation-table th:last-child,
.cancellation-table td:last-child {
    width: 50%;
}


/* =========================================
   Mobile + iPad Mini
========================================= */

@media (max-width: 768px) {

    .cancellation-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .