* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

#daterange input::placeholder {
    color: #333333;
}

#daterange {
    background: #FAFAFC !important;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
}

#daterange .clear {
    position: absolute;
    background: none;
    appearance: none;
    border: none;
    padding: 0;
    top: 12px;
    right: 48px;
    cursor: pointer;
}

#daterange .clear img {
    width: 16px;
}

#daterange .clear img {
    filter: invert(38%) sepia(93%) saturate(1000%) hue-rotate(-10deg) brightness(100%) contrast(100%);
    transform: rotate(360deg);
    transition: transform 0.4s ease-in-out;
}

#only-available {
    margin-top: 5px;
    margin-bottom: 10px;
}

#only-available span {
    line-height: 1.1;
}

.trip-finder {
    background: #F7F7F7;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    padding: 24px 24px 48px;
}

.wrapper {
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .trip-finder {
        padding: 100px 24px 60px;
    }
}

.filters {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    font-size: 12px;
    line-height: 25px;
    color: #666;
    /*margin: 0 20px;*/
}

.filters fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.filters fieldset:nth-child(3) {
    grid-column: span 2;
}

.filters .textfield {
    display: block;
    position: relative;
}

.filters .textfield input {
    font-family: inherit;
    font-size: 12px;
    color: inherit;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 40px;
    padding: 4px 32px 4px 20px;
}

.filters .textfield img {
    position: absolute;
    top: 8px;
    right: 14px;
}

.selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
}

.selects select {
    width: 100%;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    background: #FAFAFA url("data:image/svg+xml,%3Csvg viewBox='0 0 9 5' fill='%23A4AFB7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.46333 5C4.34778 5 4.24667 4.97111 4.16 4.91333L0.13 0.84C0.0433333 0.753334 0 0.652222 0 0.536667C0 0.421111 0.0361111 0.327222 0.108333 0.255C0.180556 0.182778 0.274444 0.146667 0.39 0.146667C0.505556 0.146667 0.606667 0.175556 0.693333 0.233334L4.46333 4.04667L8.23333 0.233334C8.32 0.175556 8.42111 0.146667 8.53667 0.146667C8.65222 0.146667 8.74611 0.182778 8.81833 0.255C8.89056 0.327222 8.92667 0.421111 8.92667 0.536667C8.92667 0.652222 8.88333 0.753334 8.79667 0.84L4.76667 4.91333C4.68 4.97111 4.57889 5 4.46333 5Z'/%3E%3C/svg%3E") right 12px top 50% / 9px 5px no-repeat;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    height: 30px;
    padding: 4px 24px 4px 12px;
    color: #333333;
}

.selects select:focus {
    outline: 1px solid #EE8434;
}

.selections {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px 0 0;
}

.selections:empty {
    display: none;
}

.selection {
    background: #EFEFEF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 20px;
}

.selection button {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.selection button img {
    display: block;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox input {
    margin: 0;
}

.switch {
    display: flex;
    align-items: center;
    gap: 24px;
    width: fit-content;
    margin: 0 auto 20px;
    font-size: 20px;
    font-weight: 700;
}

.switch input {
    appearance: none;
    background: #BEC2CF;
    width: 22px;
    height: 8px;
    border-radius: 8px;
    position: relative;
    margin: 0;
    cursor: pointer;
}

.switch input:before {
    content: "";
    background: #FEA93F;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 8px);
    left: -5px;
    transition: 200ms;
}

.switch input:checked:before {
    left: 12px;
}

@media (min-width: 576px) {
    .filters {
        font-size: 17.5px;
        align-items: start;
    }

    .selects select {
        height: 40px;
    }

    .filters .textfield input {
        font-size: inherit;
    }

    .switch {
        margin: 5px auto 35px;
        font-size: 26px;
    }
}

@media (min-width: 768px) {
    .selects {
        grid-template-columns: 1fr 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

    #daterange input::placeholder, #only-available, .selects select {
        font-size: 20px;
    }

}

@media (min-width: 1200px) {
    .filters {
        grid-template-columns: auto 1fr auto;
        margin: 0 20px;
    }

    .filters fieldset:nth-child(2) {
        grid-column: 3;
    }

    .filters fieldset:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }
}

.triplist {
    display: flex;
    flex-direction: column;
    margin: 32px 0 0;
}

@keyframes flyin {
    0% {
        transform: translateY(25%) scale(0.75);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.triplist article {
    width: 100%;
    background: #fff;
    box-shadow: 0 0 10px #C9C9C926;
    padding: 16px 20px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    font-size: 12px;
    line-height: 25px;
    margin-bottom: 16px;

    transform: translateY(25%) scale(0.75);
    opacity: 0;

    animation: 500ms flyin;
    animation-fill-mode: forwards;
}

.triplist article:not(.visible):nth-child(+n+11) {
    /*display: none;*/
}

.triplist article:not(.visible) {
    display: none;
}

.triplist article p {
    margin: 0;
}

.triplist article hr {
    height: 48px;
    width: 0;
    border: solid #00000040;
    border-width: 0 1px 0 0;
    margin: 0;
}

.triplist article .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.triplist .sailing-trip-link > a {
    display: block;
    width: auto;
    background: #9AFFF9;
    padding: 6px 12px;
    border-radius: 8px;
    color: rgba(0, 0, 0, 0.75);
    text-align: center;
    text-decoration: none;
}

.triplist .sailing-trip-link > a span {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.triplist article:hover {
    z-index: 1;
}

.triplist .popover {
    position: absolute;
    top: calc(100% + 8px);
    width: 200%;
    right: 0;
    left: -50%;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    background-color: rgba(50, 50, 50, 0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    transition: 250ms;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

.triplist .popover:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: calc(50% - 8px);
    border: 8px solid transparent;
    border-bottom-color: rgba(50, 50, 50, 0.8);
}

.triplist .popover a {
    display: block;
    color: inherit;
    text-align: right;
    margin: 8px 0 0;
    text-transform: uppercase;
    text-decoration: none;
}

.triplist div:hover .popover {
    visibility: visible;
    opacity: 1;
    transition-delay: 100ms;
}

.triplist article .body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 16px;
    position: relative;
}

.triplist article .body h3 {
    font-size: inherit;
    font-weight: 400;
    margin: 0;
}

.triplist article .body h4 {
    margin: 0;
    font-size: inherit;
    font-weight: bold;
    color: #1C748B;
}

.triplist article .button {
    background: #EE8434;
    border: 1px solid #EE8434;
    border-radius: 8px;
    padding: 5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    min-width: 128px;
}

.triplist article .secondary {
    background: #fff;
    color: #EE8434;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.triplist .loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #bbb;
    border-bottom-color: #EE8434;
    margin: 0 auto;
    animation: 1s spin infinite;
    animation-timing-function: linear;
    order: 10000;
}

.triplist:not(.loading) .loader {
    visibility: hidden;
}

.estuary-link {
    text-decoration: none;
    color: inherit;
}

@media (min-width: 576px) {
    .triplist article {
        font-size: 17.5px;
    }

    .triplist .sailing-trip-link {
        position: relative;
    }

    .triplist .sailing-trip-link > a {
        width: 180px;
    }

    .triplist article .body h3 {
        position: relative;
    }

    .triplist article .button {
        padding: 10px 22px;
    }
}

@media (max-width: 575px) {
    .triplist .popover {
        left: 0;
        right: -12px;
        width: 100%;
    }

    .triplist .popover:before {
        left: 80%;
    }

    .triplist article .body .popover {
        top: 50%;
    }

    .triplist article .body .popover:before {
        left: 18%;
    }
}

@media (min-width: 1200px) {
    .triplist article {
        padding: 24px 48px;
        grid-template-columns: 2fr auto 3fr auto auto;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        border-radius: 120px;
        margin-bottom: 40px;
    }

    .triplist article .body {
        grid-template-columns: 1.3fr auto 1fr auto 1fr;
        gap: 40px;
    }

    .triplist article .body h3 span {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .triplist article .body h4 {
        grid-column: 5;
    }

    .triplist article .body > p {
        grid-row: 1;
        grid-column: 3;
    }

    .triplist article .body hr:last-of-type {
        grid-row: 1;
        grid-column: 4;
    }

    .triplist article .secondary {
        border-color: #fff;
    }
}

@media (max-width: 1199px) {
    .triplist article hr {
        display: none;
    }

    .triplist article .head > p {
        font-weight: bold;
    }

    .triplist article .body h4 {
        text-align: right;
    }

    .triplist article .body > p {
        grid-column: 2;
        text-align: right;
    }

    .triplist .sailing-trip-link > a {
        pointer-events: none;
    }

    .triplist article .body h3 > a {
        pointer-events: none;
    }
}

@media (min-width: 1200px) {
    [data-tooltip] {
        position: relative;
    }

    [data-tooltip]:after {
        content: attr(data-tooltip);
        visibility: hidden;
        width: fit-content;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 4px 8px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: -10px;
        right: -10px;
        opacity: 0;
        transition: opacity 300ms;
        font-size: 16px;
        margin: 0 auto;
    }

    [data-tooltip]:hover:after {
        visibility: visible;
        opacity: 1;
    }
}