.knowledge-base-body {
    @media (min-width: 766px) {
        #footerwrapper {
            width: auto;
        }

        #footer {
            width: inherit;
        }
    }

    #main.container.search-container {
        @media (min-width: 768px) {
            width: 750px;
        }
        @media (min-width: 992px) {
            width: 970px;
        }
        @media (min-width: 1200px) {
            width: 1170px;
        }

        .row {
            width: auto;
        }
    }
}

#knowledge-base-header-container {
    width: 100%;
    background: var(--napha-teal-200);

    .container:first-child {
        padding-top: 50px;
        padding-bottom: 25px;

        @media (max-width: 767px) {
            padding-top: 0;
        }
    }

    #knowledge-base-title {
        font-weight: 500;
        font-size: 38px;
        line-height: 120%;
        letter-spacing: 0px;
    }

    #knowledge-base-text-and-search-wrapper {
        margin-top: 30px;
        margin-bottom: 30px;

        #knowledge-base-lead-text {
            color: var(--napha-black-600);
            font-weight: 400;
            font-size: 17px;
            line-height: 25px;
            letter-spacing: 0.15px;
        }

        #knowledge-base-search-wrapper {
            display: flex;
            justify-content: center;
            align-items: flex-end;

            #knowledge-base-search-form {
                display: flex;
                justify-content: center;

                border: 1px solid var(--napha-black-600);
                border-radius: 8px;
                padding: 8px 16px;
                background: var(--napha-white);
                height: 50px;
                width: 100%;

                #knowledge-base-search-input {
                    background: var(--napha-white);
                    font-size: 17px;
                    padding: 0;
                    line-height: 25px;
                    text-align: left;
                    color: var(--napha-black-600);
                    outline: none;
                    width: 100%;
                    border: none;
                }

                #knowledge-base-search-input::placeholder {
                    color: var(--napha-black-400);
                }

                #knowledge-base-search-input:focus, #knowledge-base-search-input:hover {
                    &::placeholder {
                        color: var(--napha-black-600);
                    }

                    color: var(--napha-black-600);
                }

                #knowledge-base-search-btn {
                    width: 36px;
                    height: 36px;
                    background: none;
                    border: none;
                    box-shadow: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-left: 5px;

                    #knowledge-base-search-btn-icon {
                        height: 36px;
                        width: 36px;
                        display: inline-block;
                        background: url("../../napha2015/gfx/icons/icon_search_gray.svg") no-repeat center;
                    }
                }
            }

            #knowledge-base-search-form:has(#knowledge-base-search-input:focus) {
                border-width: 2px;
                padding: 7px 15px;

                #knowledge-base-search-btn {
                    margin-top: -1px;
                }
            }
        }
    }

    #knowledge-base-filter-wrapper {
        border-top: 1px solid var(--napha-black-300);
        padding-top: 30px;
        font-weight: 400;
        font-size: 15px;
        line-height: 140%;
        letter-spacing: 0.15px;

        @media (max-width: 768px) {
            padding-top: 10px;
        }

        #knowledge-base-filter-title-wrapper {
            @media (max-width: 768px) {
                text-align: right;
            }

            #mobile_filter_btn_open, #mobile_filter_btn_close {
                padding: 8px 12px;
                font-weight: 400;
                font-size: 15px;
                line-height: 140%;
                letter-spacing: 0.15px;
                color: var(--napha-black-600);
                border: 1px solid var(--napha-black-600);
                background: none;
                border-radius: 8px;
                margin-bottom: 10px;
                display: inline-flex;
                align-items: center;
                cursor: pointer;

                span.glyphicon {
                    display: inline-block;
                    float: right;
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                    align-self: center;
                    content: none;
                    margin-left: 10px;
                    margin-top: 0;

                    &::before {
                        content: none;
                    }

                    &.glyphicon-remove {
                        width: 24px;
                        height: 24px;
                        background: url("../gfx/icons/filters/icon_x_circle_white.svg") 0 0 no-repeat;
                    }

                    &.glyphicon-filter {
                        width: 15px;
                        height: 18px;
                        background: url("../gfx/icons/filters/icon_filter_dark.svg") 0 0 no-repeat;
                    }
                }

                @media (min-width: 768px) {
                    display: none;
                }
            }
        }

        #knowledge-base-search-form-mobile {
            display: flex;
            justify-content: center;

            &.toggled-off-mobile {
                display: none !important;
            }

            @media (min-width: 768px) {
                display: none;
            }

            border: 1px solid var(--napha-black-600);
            border-radius: 8px;
            padding: 8px 16px;
            background: var(--napha-white);
            height: 50px;
            width: 100%;

            #knowledge-base-search-input-mobile {
                background: var(--napha-white);
                font-size: 17px;
                padding: 0;
                line-height: 25px;
                text-align: left;
                color: var(--napha-black-600);
                outline: none;
                width: 100%;
                border: none;
            }

            #knowledge-base-search-input-mobile::placeholder {
                color: var(--napha-black-400);
            }

            #knowledge-base-search-input-mobile:focus, #knowledge-base-search-input-mobile:hover {
                &::placeholder {
                    color: var(--napha-black-600);
                }

                color: var(--napha-black-600);
            }

            #knowledge-base-search-btn-mobile {
                width: 36px;
                height: 36px;
                background: none;
                border: none;
                box-shadow: none;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 5px;

                #knowledge-base-search-btn-icon-mobile {
                    height: 36px;
                    width: 36px;
                    display: inline-block;
                    background: url("../../napha2015/gfx/icons/icon_search_gray.svg") no-repeat center;
                }
            }
        }

        #knowledge-base-search-form-mobile:has(#knowledge-base-search-input-mobile:focus) {
            border-width: 2px;
            padding: 7px 15px;

            #knowledge-base-search-btn-mobile {
                margin-top: -1px;
            }
        }

        #knowledge-base-filter-filters {
            margin-top: 8px;
            margin-bottom: 4px;

            &.toggled-off-mobile {
                @media (max-width: 768px) {
                    display: none !important;
                }
            }

            #knowledge-base-filter-filters-inner-wrapper {
                display: flex;
                justify-content: space-between;
                gap: 29px;
                align-items: flex-start;

                @media (max-width: 768px) {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 10px;
                }

                .filter-box {
                    font-weight: 400;
                    font-size: 15px;
                    letter-spacing: 0.22px;
                    line-height: 28px;
                    position: relative;
                    display: flex;
                    flex: 1;

                    &#filter-topic {
                        flex: 1.5;
                    }

                    &#filter-date {
                        ul.activities-filter-options {
                            padding-left: 17px;
                        }
                    }

                    details {
                        background: var(--napha-black-600);
                        /*min-width: 185px;*/
                        width: 100%;
                        border-radius: 8px;

                        &[open] {
                            border-radius: 8px 8px 0 0;
                            background: var(--napha-black-500);
                        }

                        #activities-filter-date-activate.btn-warning {
                            background-color: var(--napha-orange-500);
                            border: none;
                            color: var(--napha-white);
                            padding: 6px 22px;
                        }

                        #activities-filter-date-activate.btn-warning:hover {
                            background: var(--napha-orange-600);
                            color: var(--napha-white);
                            text-decoration: none;
                        }

                        summary {
                            color: var(--napha-white);
                            padding: 8px 16px;
                            cursor: pointer;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            text-align: left;

                            .activity-details-text {
                                flex-grow: 1;
                                font-size: 17px;
                            }

                            .activity-details-icon, .activity-details-icon {
                                display: inline-block;
                                width: 11px;
                                height: 7px;
                                float: right;
                                background: url("../gfx/icons/filters/icon_arrow_down_white.svg") 0 0 no-repeat;
                                -webkit-transition: all 0.3s ease;
                                transition: all 0.3s ease;
                                align-self: center;
                            }
                        }

                        ul.activities-filter-options {
                            padding: 10px;
                            list-style: none;
                            position: absolute;
                            top: 44px;
                            left: 0;
                            z-index: 2;
                            background: var(--napha-white);
                            border: 1px solid var(--napha-black-500);
                            /*min-width: 185px;*/
                            width: 100%;
                            max-height: 600px;
                            overflow-y: auto;
                            overflow-y: overlay;
                            border-radius: 0 0 8px 8px;

                            &::-webkit-scrollbar {
                                -webkit-appearance: none;
                                width: 12px;
                                background: var(--napha-black-400);
                            }

                            &::-webkit-scrollbar-thumb {
                                border-radius: 100px;
                                background-color: var(--napha-black-200);
                                border: 2px solid var(--napha-black-400);
                            }

                            li .activities-filter-option-btn {
                                color: var(--napha-white);
                                font-weight: 400;
                                font-size: 15px;
                                letter-spacing: 0.22px;
                                line-height: 35px;
                                text-align: left;
                                outline: none;
                                white-space: normal;
                            }

                            li {
                                border-top: 1px solid var(--napha-black-100);
                                padding: 4px 0;

                                &:not(.is-checked):not(.no-bg):hover {
                                    background: var(--napha-black-100);
                                }

                                &.no-bg {
                                    border-top: none;
                                    padding-top: 0;
                                }

                                .text {
                                    font-style: normal;
                                    font-weight: 400;
                                    font-size: 15px;
                                    line-height: 24px;
                                    letter-spacing: 0.15372px;
                                    color: var(--napha-black-600);

                                }

                                .form-checkbox-container {
                                    display: block;
                                    position: relative;
                                    padding-left: 30px;
                                    margin-top: 0;
                                    margin-bottom: 0;
                                    margin-left: 4px;
                                    cursor: pointer;
                                    font-size: 17px;
                                    line-height: 140%;
                                    font-weight: 500;
                                    letter-spacing: 0.15372px;
                                    -webkit-user-select: none;
                                    -moz-user-select: none;
                                    -ms-user-select: none;
                                    user-select: none;
                                    text-align: left;

                                    a {
                                        font-weight: 400;
                                    }

                                    .form-checkbox {
                                        position: absolute;
                                        opacity: 0;
                                        cursor: pointer;
                                        height: 0;
                                        width: 0;
                                    }

                                    .form-checkbox-checkmark {
                                        position: absolute;
                                        top: 2px;
                                        left: 0;
                                        height: 20px;
                                        width: 20px;
                                        background-color: var(--napha-white);
                                        border: 1px solid var(--napha-black-600);
                                        border-radius: 2px;
                                    }

                                    .form-checkbox-checkmark:after {
                                        content: "";
                                        position: absolute;
                                        display: none;
                                    }
                                }

                                .form-checkbox-container input:checked ~ .form-checkbox-checkmark {
                                    background-color: var(--napha-black-600);
                                }

                                .form-checkbox-container input:checked ~ .form-checkbox-checkmark:after {
                                    display: block;
                                }

                                .form-checkbox-container .form-checkbox-checkmark:after {
                                    left: 0;
                                    top: 0;
                                    width: 100%;
                                    height: 100%;
                                    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 9L10.5 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                                    background-size: 12px 10px;
                                    background-position: center;
                                    background-repeat: no-repeat;
                                }

                                label {
                                    font-weight: 400;
                                    font-size: 15px;
                                    line-height: 24px;
                                    letter-spacing: 0.15px;
                                    color: var(--napha-black-600);
                                }

                                input {
                                    color: var(--napha-black-600);
                                    border: 1px solid var(--napha-black-300);
                                    padding: 6px 12px;
                                    font-weight: 400;
                                    font-size: 15px;
                                    line-height: 24px;
                                    letter-spacing: 0.15px;
                                    margin-top: 0;
                                    width: 100%;

                                    &::placeholder {
                                        color: var(--napha-black-500);
                                    }

                                    &:focus, &:hover {
                                        border-color: var(--napha-black-600);

                                        &::placeholder {
                                            color: var(--napha-black-400);
                                        }

                                        color: var(--napha-black-600);
                                    }
                                }
                            }
                        }

                        .activities-filter-options.activities-filter-options-scroll {
                            padding: 0 2px 15px 6px;
                        }

                        .activities-filter-options.activities-filter-options-scroll li.activities-filter-county-region-divider {
                            border-top: 1px solid var(--napha-black-300);
                        }

                        .activities-filter-options.form-inline {
                            padding-left: 16px;
                        }
                    }

                    details > summary {
                        list-style: none;
                    }

                    details > summary::-webkit-details-marker {
                        display: none;
                    }

                    details[open] summary ~ * {
                        animation: toggle 0.5s ease-in-out;
                    }

                    @keyframes toggle {
                        0% {
                            opacity: 0;
                            transform: translateY(-10px);
                        }
                        100% {
                            opacity: 1;
                            transform: translateY(0px);
                        }
                    }

                    details[open] summary .activity-details-icon, .mobile-filter-is-open .activity-details-icon {
                        /*-webkit-transform: scaleY(-1);
                        transform: scaleY(-1);*/
                        background: url("../gfx/icons/filters/icon_arrow_up_white.svg") 0 0 no-repeat;
                    }

                    details[open] summary {
                        .glyphicon.glyphicon-menu-down:before {
                            content: "\e260";
                        }

                    }
                }
            }
        }

        #knowledge-base-filter-selected-filters-wrapper {
            margin-top: 12px;

            &.toggled-off-mobile {
                @media (max-width: 768px) {
                    display: none !important;
                }
            }

            .selected_tags .tag_link, .tagsContainer .tag_link, .explanation_search_term .tag_link, .selected_contributors .contributor_link, .explanation_date_filter .tag_link, .selected_categories .tag_link {
                border: 1px solid var(--napha-orange-600);
                padding: 8px 10px;
                background: var(--napha-white);
                margin-right: 10px;
                font-weight: 400;
                font-size: 15px;
                line-height: 24px;
                letter-spacing: 0.15px;
                color: var(--napha-black-600);

                &:hover {
                    color: var(--napha-black-600);
                    background: var(--napha-white);

                    span.glyphicon.glyphicon-remove {
                        background: url("../gfx/icons/filters/icon_x_circle_white.svg") 0 0 no-repeat;
                    }
                }

                .text {
                    font-weight: 400;
                    font-size: 15px;
                    line-height: 24px;
                    letter-spacing: 0.15px;
                    color: var(--napha-black-600);

                    &:hover {
                        color: var(--napha-black-600);
                        background: var(--napha-white);
                    }
                }

                span.glyphicon.glyphicon-remove {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    float: right;
                    background: url("../gfx/icons/filters/icon_x_circle_orange.svg") 0 0 no-repeat;
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                    align-self: center;
                    content: none;
                    margin-left: 8px;

                    &::before {
                        content: none;
                    }

                    @media (max-width: 768px) {
                        top: 0;
                        right: 0;
                    }
                }
            }

            .filter_menu_utility_buttons {
                margin-left: 0;
                margin-top: 10px;

                .clear_all_query_params {
                    padding: 8px 12px;
                    font-weight: 400;
                    font-size: 15px;
                    line-height: 140%;
                    letter-spacing: 0.15px;
                    color: var(--napha-white);
                    background: var(--napha-orange-600);
                    border-radius: 8px;

                    @media (max-width: 768px) {
                        float: none;
                    }

                    &:hover {
                        background: var(--napha-black-600);
                    }

                    span.glyphicon.glyphicon-remove {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        float: right;
                        background: url("../gfx/icons/filters/icon_x_white.svg") 0 0 no-repeat;
                        -webkit-transition: all 0.3s ease;
                        transition: all 0.3s ease;
                        align-self: center;
                        content: none;
                        margin-left: 10px;
                        margin-top: 5px;

                        &::before {
                            content: none;
                        }
                    }
                }
            }

            .search_explanation_sentence {
                margin-left: 0;

                .nof_hits {
                    padding-top: 12px;
                    display: inline-flex;
                    flex-direction: row;
                    gap: 5px;
                }

                .selected_wrapper {
                    &.is-hidden {
                        display: none !important;
                    }

                    @media (max-width: 768px) {
                        display: flex;
                        flex-direction: column;
                    }

                    .explanation_sentence_part {
                        margin-top: 12px;

                        @media (max-width: 768px) {
                            margin-bottom: 5px;
                            margin-top: 0;
                        }
                    }
                }


            }
        }
    }
}

#sort_by_container {
    margin-top: 25px;

    #sort_title {
        font-weight: 600;
        font-size: 15px;
        line-height: 110%;
        letter-spacing: 0;
        margin-bottom: 10px;
    }

    .form-radio-container {
        display: inline-block;
        position: relative;
        padding-left: 30px;
        margin: 0 15px 0 4px;
        cursor: pointer;
        font-size: 15px;
        line-height: 150%;
        font-weight: 400;
        letter-spacing: 0.15372px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: left;


        a {
            font-weight: 400;
        }

        .form-radio {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .form-radio-checkmark {
            position: absolute;
            top: 2px;
            left: 0;
            height: 20px;
            width: 20px;
            background: none;
            border: 1px solid var(--napha-black-600);
            border-radius: 50px;
        }

        .form-radio-checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
    }

    .form-radio-container input:checked ~ .form-radio-checkmark {
        background-color: var(--napha-black-600);
    }

    .form-radio-container input:checked ~ .form-radio-checkmark:after {
        display: block;
    }

    .form-radio-container .form-radio-checkmark:after {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 9L10.5 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 12px 10px;
        background-position: center;
        background-repeat: no-repeat;
    }
}

#main.search-container {
    padding-top: 0;

    #sok_results {
        margin-top: 25px;
        padding-top: 0;

        @media (max-width: 767px) {
            margin-top: 10px;
        }
    }
}