iframe.zzCustHdrFrame {
    height: 136px;
}

div.zzTopDiv {
    margin-top: -4px;
    font-size: 14px;
}

#crTopDiv, #cdTopDiv {
    display: grid;
    grid-template-areas:
        "header  header "
        "title   title  "
        "filters results"
        "footer  footer ";
    grid-template-columns: 46fr 79fr;
    grid-column-gap: 20px;
}

.zzPageHeader {
    background: linear-gradient(to bottom, rgb(199, 207, 209), rgb(184, 188, 191));
    grid-area: header;
}

.zzPageHeader :is(a, img) {
    display: none;
}

.zzPageTitle {
    margin-top: -23px;
    grid-area: title;
}

.zzPageHeader span.phone {
    margin-top: 3px;
    margin-bottom: 4px;
}

#crMainBody, #cdMainBody {
    margin: 10px 0;
    grid-area: results;
    justify-self: start;
}

#asMainBody, #csMainBody, #caMainBody, #ccMainBody {
    max-width: 1030px;
    margin: 1em auto;
}

h1,
h2,
h3,
#asMainBody > h1,
#ccMainBody h1 {
    color: black;
}

div.crVendorCruise span {
    color: rgb(153, 0, 51);
}

div.crPrices div.price {
    color: rgb(75, 70, 70);
}

div.crBonusOffers h4,
#cdItinInfo div.rates span.price,
div.csCategoryUpgradeItem span.price,
#cdSailingRates span.price.min,
div.zzBookingSummary h2,
.zzNeedHelp span.phone,
.zzNeedHelp span.refNum {
    color: rgb(153, 0, 51);
}

#lfTopDiv, .lfTopDiv {
    width: min(100%, 272px);
}

.lfTopDiv {
    float: none;
    grid-area: filters;
    justify-self: end;
}

#lfTopDiv, .lfTopDiv > form {
    background: linear-gradient(to bottom, rgb(184, 188, 191), rgb(148, 152, 161));
    color: black;
}

#lfLogoBox {
    display: none;
}

#lfTopDiv h2, .lfTopDiv h2 {
    font-size: 16px;
    margin: 5px 0;
    text-align: center;
    color: black;
}

#lfDestination select,
#lfPort select,
#lfCruiseline select,
#lfShip select,
#lfSortBy select {
    width: 100%;
    font-size: 14px;
}

#lfDays select,
#lfDate select{
    width: 98%;
    font-size: 14px;
}

#lfBestDealBox h4, .lfBestDealBox h3 {
    font-size: 14px;
    font-weight: normal;
    color: black;
}

#lfTopDiv .zzHighlightText {
    color: black;
}

#lfTopDiv .links .zzHighlightText {
    color: white;
    text-align: center;
}

#lfBestDealBox {
    font-size: 14px;
}

#lfResidency select, #lfPromoCode input {
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
}

.lfTopDiv > form :is(select, input[type="text"]) {
    margin: 5px 0;
}

#lfButtonBox, .lfButtonBox {
    padding-inline: 8px;
}

#lfButtonBox span.zwSearchButton,
button {
    box-sizing: border-box;
    display: inline-block;
    float: none;
    background-color: rgb(153, 0, 51);
    font-size: 20px;
    padding: 0.25em 0.75em;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    border: none;
}

button {
    width: 50%;
    font-size: 18px;
}

button.zwSearchButton, #cdTabArea button, .priceBox button, .ccButtonRow button {
    width: 100%;
}

button:hover, #lfButtonBox span.zwSearchButton:hover {
    background-color: rgb(120, 0, 40);
}

#lfButtonBox div.errorCode {
    float: none;
    font-size: 12px;
    color: red;
    margin: 0.5em;
}

#lfButtonBox div.links {
    width: 100%;
    margin-left: 0;
    font-size: 12px;
}

iframe.zzCustFtrFrame {
    height: 70px;
}

.zzFooter, #crFooter, #cdFooter, #caFooter {
    grid-area: footer;
    text-align: center;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    #crTopDiv .zzPageTitle {
        color: white;
    }

    div.zzTopDiv {
        grid-template-areas:
            "header "
            "title  "
            "filters"
            "results"
            "footer ";
        grid-template-columns: 1fr;
    }

    .lfTopDiv {
        justify-self: center;
    }

    .lfSelectCriteria > div {
        display: block;
        width: 100%;
    }

    .lfButtonBox > div {
        display: block;
        width: 100%;
    }

    #crMainBody {
        justify-self: center;
    }
}