.mobile-view {
    display: none;
}

.schedule-filter-content--checkboxes {
    p-checkbox {
        margin-top: $space-xl;
    }
}

@media (min-width: $media-breakpoint-mobile) and (max-width: $media-breakpoint-tablet) {
    schedule-filter {
        .schedule-filter-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            @include h-spacing($space-xl);

            city-autocomplete {
                width: 100%;
            }

            .change-container {
                width: auto;
            }

            &--direct,
            &--checkboxes,
            &--back {
                margin-top: $space-xl;
                flex-wrap: wrap;

                .calendar {
                    margin-top: 0;
                }

                time-selector
                    .wrapper--time-selector.compact-view {
                    margin-top: 0px;
                    padding-bottom: $space-xl;
                }

                .checkbox-schedule {
                    min-width: 220px;
                    width: 100%;
                    margin-top: 0px;
                    margin-top: $space-xl;
                }

                calendar-input {
                    width: calc(50% - 33px);
                    margin-right: 66px;
                }

                time-selector {
                    width: calc(50% - 33px);

                    .wrapper--time-selector.compact-view
                        .time-selector__label-value {
                        margin-bottom: 27px;
                        flex-wrap: nowrap;

                        .time-selector__label {
                            max-width: 100px;
                            @include font-overflow();
                        }
                    }
                }
            }

            &--checkboxes {
                @include h-spacing($space-xl);

                p-checkbox {
                    margin-top: 0;
                }
            }

            time-selector {
                flex: 1;
            }
        }

        .schedule-fiter-buttons {
            display: flex;
            justify-content: center;
        }

        .search-button {
            max-width: 260px;
        }

        .change-container {
            width: auto;
            padding-right: $space-m;
            padding-left: $space-m;

            .button-change {
                margin-top: 14px;
                height: $standard-button-height;
                width: 45px;

                svg {
                    transform: rotate(0deg);
                }
            }
        }
    }
}

@media (max-width: $media-breakpoint-mobile) {
    .mobile-view {
        display: block;
    }

    .sticky-panel {
        position: relative !important;
        top: auto !important;
    }

    schedule-search-view {
        time-selector,
        schedule-search-result-header {
            display: none;
        }

        schedule-days {
            .frame {
                border-radius: 0 !important;
            }
        }
    }
}
