.u-background-color--okavango {
    background-color: #0a6e50!important
}

.u-background-color--sand {
    background-color: #f6f4f0!important
}

.u-background-color--plum {
    background-color: #a71f50!important
}

.u-background-color--midnight {
    background-color: #222!important
}

@media (min-width: 0) {
    .xs\:u-background-color--okavango {
        background-color:#0a6e50!important
    }

    .xs\:u-background-color--sand {
        background-color: #f6f4f0!important
    }

    .xs\:u-background-color--plum {
        background-color: #a71f50!important
    }

    .xs\:u-background-color--midnight {
        background-color: #222!important
    }
}

@media (min-width: 600px) {
    .sm\:u-background-color--okavango {
        background-color:#0a6e50!important
    }

    .sm\:u-background-color--sand {
        background-color: #f6f4f0!important
    }

    .sm\:u-background-color--plum {
        background-color: #a71f50!important
    }

    .sm\:u-background-color--midnight {
        background-color: #222!important
    }
}

@media (min-width: 960px) {
    .md\:u-background-color--okavango {
        background-color:#0a6e50!important
    }

    .md\:u-background-color--sand {
        background-color: #f6f4f0!important
    }

    .md\:u-background-color--plum {
        background-color: #a71f50!important
    }

    .md\:u-background-color--midnight {
        background-color: #222!important
    }
}

@media (min-width: 1280px) {
    .lg\:u-background-color--okavango {
        background-color:#0a6e50!important
    }

    .lg\:u-background-color--sand {
        background-color: #f6f4f0!important
    }

    .lg\:u-background-color--plum {
        background-color: #a71f50!important
    }

    .lg\:u-background-color--midnight {
        background-color: #222!important
    }
}

@media (min-width: 1920px) {
    .xl\:u-background-color--okavango {
        background-color:#0a6e50!important
    }

    .xl\:u-background-color--sand {
        background-color: #f6f4f0!important
    }

    .xl\:u-background-color--plum {
        background-color: #a71f50!important
    }

    .xl\:u-background-color--midnight {
        background-color: #222!important
    }
}

.find-trip {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%
}

@media (min-width: 600px) {
    .find-trip {
        flex-wrap:nowrap;
        max-width: 42rem
    }
}

@media (min-width: 960px) {
    .find-trip {
        max-width:46rem
    }
}

.find-trip__autocomplete {
    margin-bottom: .5rem;
    width: 100%
}

@media (min-width: 600px) {
    .find-trip__autocomplete {
        margin-bottom:0;
        margin-right: .5rem;
        max-width: 25rem
    }
}

.find-trip__date-filter {
    flex-grow: 2;
    margin-right: .5rem;
    min-width: 11rem
}

@media (min-width: 600px) {
    .find-trip__date-filter {
        flex-grow:1
    }
}

.find-trip__icon {
    font-size: 1.5rem
}

.find-trip__button-text {
    display: none;
    margin-right: .5rem
}

@media (min-width: 960px) {
    .find-trip__button-text {
        display:inline
    }
}

.find-trip--compact {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: .25rem;
    flex-wrap: nowrap;
    height: 2.875rem;
    max-width: 100%
}

@media (min-width: 600px) {
    .find-trip--compact {
        left:auto;
        position: absolute;
        right: 4.5rem
    }
}

@media (min-width: 960px) {
    .find-trip--compact {
        right:12rem
    }
}

.find-trip--compact .find-trip__button {
    margin: 0;
    min-height: 1.25rem;
    padding: 0;
    transition: width .4s
}

.find-trip--compact .find-trip__button:active,.find-trip--compact .find-trip__button:focus,.find-trip--compact .find-trip__button:target {
    background-color: #222;
    border-color: #222;
    color: #fff;
    margin: .25rem;
    width: 2.75rem
}

.find-trip--compact .find-trip__icon {
    font-size: 1.5rem
}

.find-trip--compact .find-trip__button--compact {
    background-color: #222;
    border-color: #222;
    color: #fff;
    margin: .25rem;
    width: 2.75rem
}

@media (min-width: 600px) {
    .find-trip--compact .find-trip__button--compact {
        background-color:unset;
        border: none;
        color: #222;
        margin-right: .5rem;
        width: 2rem
    }
}

.find-trip--compact .find-trip__button--active {
    background-color: #222;
    border-color: #222;
    color: #fff;
    margin: .25rem;
    width: 2.75rem
}

.find-trip--compact .find-trip__separator {
    width: 0
}

.find-trip--compact .find-trip__autocomplete {
    margin: 0
}

.find-trip--default {
    border-radius: .25rem;
    box-shadow: 0 3px 16px #00000024;
    margin-left: auto;
    margin-right: auto;
    padding: .5rem 0
}

.find-trip--default .find-trip__autocomplete {
    border-bottom: .063px solid #bebebe;
    padding-bottom: .5rem
}

@media (min-width: 600px) {
    .find-trip--default .find-trip__autocomplete {
        border-bottom-color:#fff;
        padding-bottom: 0
    }
}

.find-trip--default .find-trip__button {
    margin-right: .5rem;
    min-width: 3.5rem
}

.find-trip--default .find-trip__separator {
    background-color: #bebebe;
    height: 1.5rem;
    margin-top: .75rem;
    width: .065rem
}

.find-trip--hide {
    opacity: 0
}

.find-trip--animation {
    animation: find-trip-fade .6s ease-in-out
}

@media (min-width: 600px) {
    .find-trip--show {
        opacity:1
    }
}

@keyframes find-trip-fade {
    0% {
        display: flex;
        opacity: 0
    }

    50% {
        display: flex;
        opacity: .5
    }

    to {
        display: flex;
        opacity: 1
    }
}