main>section.djh-result-table:first-child {
    margin-top: 230px;
}

section.djh-result-table {

    margin: 80px 0 80px 0;

    .tom-select,
    .button {
        border: 1px solid var(--selected);
        
        &:hover,
        &:focus {
            /* border-color: black; */
        }
    }

    .tom-select {
        &.ts-wrapper {
            height: auto;
        }
    }

    .header {

        h2 {
            margin-bottom: 8px;
            text-align: center;
        }

        h4 {
            margin-bottom: 32px;
            text-align: center;
        }

        fieldset.filter .filter-wrapper {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 25px;
            column-gap: 16px;

            >* {
                flex: 1;
            }

            input {
                border: 1px solid var(--selected);
            }

            .timespan,
            .participants {
                display: flex;
                column-gap: 16px;

                label {
                    display: flex;
                    flex: 1;
                    flex-direction: column;
                    margin-bottom: 0;

                    input {
                        margin-top: 4px;
                    }
                }
            }

            &:nth-child(2) {
                >* {
                    margin-top: auto;
                }
            }

            button[type="submit"] {
                color: white;
                background-color: var(--djh-pink);

                &:hover {
                    color: var(--djh-pink);
                    background-color: var(--selected);
                }
            }
        }
    }

    .results {

        display: grid;
        grid-template-columns: repeat(2, minmax(300px, 1fr));
        grid-gap: 16px;

        margin-bottom: 20px;

        .program {
            border-radius: 8px;

            background-color: var(--djh-pink);
            color: white;

            display: flex;
            column-gap: 16px;
            flex-wrap: wrap;

            padding: 16px;

            .side {
                display: flex;
                flex-direction: column;
            }

            .left {
                width: calc(40% - 8px);
            }

            .right {
                width: calc(60% - 8px);
            }

            .city {
                font-size: 18px;
                font-weight: bold;
                line-height: 1;
                text-decoration: underline;

                margin-bottom: 20px;

                a {
                    color: white;

                    &:hover {
                        color: var(--selected);
                        text-decoration: underline;
                    }
                }
            }

            img {
                aspect-ratio: 3/2;
                border-radius: 8px;

                margin-top: auto;

                height: auto;
                width: 100%;
            }

            /* Title */
            h3 {
                font-weight: bold;
                line-height: 1.2;
                margin-bottom: 4px;
            }

            /* Subtitle */
            h4 {
                font-weight: 100;
                line-height: 1.2;
                margin-bottom: 4px;
            }

            .duration-grade {
                font-size: 18px;
                margin-bottom: 16px;
            }

            .excerpt {
                line-height: 1.2;
                margin-bottom: 16px;
            }

            .offer-wrapper {
                display: flex;
                margin-top: auto;
            }

            a.offer.button {
                display: block;
                width: fit-content;
                text-decoration: none;
            }

            .price-wrapper {
                .price p {
                    margin-bottom: 0;
                }

                display: flex;
                flex-direction: row;
                flex: 1 1 0;
                justify-content: flex-end;
                align-items: center;
                text-align: right;
                /* margin-top: auto; */
                /* margin-bottom: auto; */
                margin: auto 0 auto auto;
                position: relative;

                span {
                    font-size: 14px;
                }

                .info-icon {
                    background-color: white;
                    border-radius: 100%;
                    color: var(--djh-pink);
                            
                    position: relative;
                            
                    font-size: 18px;
                    font-weight: bold;
                    line-height: 1;
                    padding: 2px;
                    text-align: center;
                    width: 20px;
                    height: 20px;

                    margin: auto 0 auto 16px;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                    &:hover,
                    &:focus {
                        +.djh-visually-hidden {
                            background: #f9f9f9;
                            border: 1px solid #ccc !important;
                            padding: 6px !important;
                            color: black;
                            border-radius: 6px;
                            display: block;
                            z-index: 100;
                            max-width: 400px;
                            width: max-content;
                            height: auto;
                            right: 0;
                            left: unset;
                            bottom: 0;
                            transform: translate(0, -30px);
                        }
                    }
                }
            }


            .debug {
                width: 100%;
            }

        }
    }

    .load-more {
        display: block;
        text-align: center;
        margin: 0 auto;
        max-width: 300px;

        &.loader {
            color: white !important;
            
            &:focus,
            &:hover {
                color: var(--selected) !important;
            }

            &::after {
                width: 40px;
                height: 40px;
            }
        }
    }
}

@media (max-width: 1199.98px) {
    section.djh-result-table {
        .header {
            fieldset.filter .filter-wrapper {
                gap: 16px;
                .select-wrapper {
                    width: calc(50% - 8px);
                    flex: unset;
                }
            }
        }

        .results {
            .program {

                .left,
                .right {
                    width: unset;
                }

                .left {
                    margin-bottom: 16px;
                }
            }
        }
    }
}

@media (max-width: 991.98px) {
    section.djh-result-table {
        .header {
            fieldset.filter .filter-wrapper {
                flex-wrap: wrap;
                gap: 16px;
                margin-bottom: 16px;

                .select-wrapper {
                    width: 100%;
                    flex: unset;
                }

                .timespan,
                .participants {
                    flex-direction: column;
                    row-gap: 16px;
                }
            }
        }

        .results {
            grid-template-columns: repeat(1, 1fr);
            .program {
                .left {
                    margin-bottom: 0;
                    width: calc(40% - 8px);
                }

                .right {
                    width: calc(60% - 8px);
                }
            }
        }
    }

    fieldset.filter .filter-wrapper {
        flex-direction: column;
        row-gap: 16px;
    }
}

@media (max-width: 767.98px) {

    section.djh-result-table {
        & .results {
            .program {
                flex-direction: column;

                img.attachment-post-thumbnail {
                    margin-bottom: 16px;
                }

                .right,
                .left {
                    width: 100%;
                }
            }
        }
    }
}