@media all {
    #search-form .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    #search-form .search-container > * {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    #search-form .dropdowns > *,
    #search-form .date-input > * {
        position: relative;
        width: calc(100% / 2);
    }

    #search-form .dropdowns select,
    #search-form .date-input input {
        display: block;
        width: calc(100% - 25px);
        max-width: 100%;
        height: 40px;
        padding: 0 10px;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 0;
        color: #888888;
        box-shadow: 0 1px 1px 0 rgba(180, 180, 180, 0.1);
    }

    #search-form .dropdowns select {
        width: calc(100% - 3px);
    }

    #search-form details {
        margin: 25px 0;
    }

    #search-form details[open] .search-container {
        margin: 25px 0;
    }

    #search-list-tab .search_tabbed button,
    #search-form .submit-button .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        padding: 0 10px;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 0;
        color: #888888;
        box-shadow: 0 1px 1px 0 rgba(180, 180, 180, 0.1);
        transition: all 0.2s ease-in-out;
    }

    #search-form .search-input input {
        height: 48px;
        padding: 0 12px;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 0;
        color: #888888;
        box-shadow: 0 1px 1px 0 rgba(180, 180, 180, 0.1);
        font-size: 1.5em;
    }

    #search-form .submit-button .btn {
        cursor: pointer;
        color: #ffffff;
        background-color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }

    #search-list-tab .search_list select {
        height: 40px;
        padding: 0 10px;
    }

    #search-list-tab .search_tabbed {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    #search-list-tab .search_tabbed button.active {
        color: #ffffff;
        background-color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }

    #search-list-tab .search_tabbed button[disabled] {
        background-color: #f2f2f2;
    }

    #search-list-tab .search_tabbed button:not([disabled]):hover {
        cursor: pointer;
    }

    #search-list-tab .search_tabbed button:not([disabled]):not(.active):hover {
        background-color: #888888;
        color: #ffffff;
    }

    #search-list-tab .search_list {
        display: block;
    }

    #search-list-tab .search_tabbed {
        display: none;
    }

    #search-results ul {
        margin: 0 !important;
    }

    #search-pagination {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
    }

    #search-pagination > div {
        position: relative;
        height: 40px;
        width: 44px;
    }

    #search-pagination button {
        display: block;
        height: 100%;
        width: 100%;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 0;
        color: #888888;
        box-shadow: 0 1px 1px 0 rgba(180, 180, 180, 0.1);
        transition: all 0.2s ease-in-out;
    }

    #search-pagination > div button:hover {
        background-color: #888888;
        color: #ffffff;
    }

    #search-pagination > div button:hover {
        cursor: pointer;
    }

    #search-pagination > div:not(.active) button:focus,
    #search-pagination > div:not(.active) button:hover {
        background-color: #888888;
        color: #ffffff;
    }

    #search-pagination > div.active button {
        color: #ffffff;
        background-color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
    }
}

@media (min-width: 1200px) {
    #search-list-tab .search_list {
        display: none;
    }

    #search-list-tab .search_tabbed {
        display: flex;
    }

    #search-form .dropdowns > *,
    #search-form .date-input > * {
        position: relative;
        width: calc(100% / 3);
    }
}