@keyframes l3 {
    to {
        transform: rotate(1turn);
    }
}

.component-search .btn-search {
        border: none;
        background: none;
        font-size: 1.125rem;
        padding: 0.625rem 0.375rem;

        cursor: pointer;
        color: var(--color-primary);
        transition: color 0.2s ease-in-out;
    }

.component-search .btn-search:hover {
            color: var(--color-secondary);
        }

.component-search .search-form-container {
        display: none;
    }

.popup-modal-backdrop.search-modal .overflow .center-vertical {
            padding-block: 0;
        }

.popup-modal-backdrop.search-modal .modal {
        max-width: 100%;
    }

.popup-modal-backdrop.search-modal .modal .close {
            inset-inline-end: 0;
            top: 0;
            padding: 0.9375rem;
            font-size: 1.875rem;
        }

.popup-modal-backdrop.search-modal .modal .close .close-icon {
                line-height: 0;
            }

.popup-modal-backdrop.search-modal .modal .close .close-icon svg {
                    width: 1.25rem;
                    height: 1.25rem;
                }

.popup-modal-backdrop.search-modal .modal .modal-content {
            border-radius: 0;
        }

.popup-modal-backdrop.search-modal .modal .search-form-container {
            width: 100vw;
            height: 100vh;
            padding: 3.125rem 1.25rem;
        }

.popup-modal-backdrop.search-modal .modal .search-form-container .input-wrapper {
                padding: 0.3125rem 1.25rem;
                background: #f2f2f2;
                border-radius: 1.5625rem;
            }

.popup-modal-backdrop.search-modal .modal .search-form-container .input-wrapper .input-search {
                    padding: 0 0.625rem;
                    line-height: 2.5rem;
                    height: 2.5rem;
                    position: relative;
                    font-size: 1rem;
                    color: var(--color-primary);
                    background: 0 0;
                    border: none;
                    font-weight: 300;
                    width: 100%;
                }

.popup-modal-backdrop.search-modal .modal .search-form-container .input-wrapper .input-search::-moz-placeholder {
                        color: var(--color-primary);
                        opacity: 90%;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .input-wrapper .input-search::placeholder {
                        color: var(--color-primary);
                        opacity: 90%;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .input-wrapper .input-search:focus-visible {
                        outline: none;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container {
                position: relative;
                padding-block: 1.25rem;
                color: var(--color-primary);
                height: 100%;
            }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container.loading .loading-overlay {
                        display: flex;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .loading-overlay {
                    background: #fff;
                    position: absolute;
                    inset: 0;
                    z-index: 10;
                    display: none;
                    justify-content: center;
                    align-items: center;
                    padding-bottom: 40vh;
                }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .loading-overlay .loader {
                        width: 3.125rem;
                        padding: 0.5rem;
                        aspect-ratio: 1;
                        border-radius: 50%;
                        background: var(--color-primary);
                        --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
                        -webkit-mask: var(--_m);
                        mask: var(--_m);
                        -webkit-mask-composite: source-out;
                        mask-composite: subtract;
                        animation: l3 1s infinite linear;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .no-results {
                    display: none;
                    text-align: center;
                }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .no-results.visible {
                        display: block;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .no-results span {
                        width: 100%;
                        font-size: 1.125rem;
                        line-height: 1.5625rem;
                        color: var(--color-primary);
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .results-row {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    gap: 0.625rem;
                    padding-block: 1.25rem;
                }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .results-row:empty {
                        display: none;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .results-row .result-count {
                        font-size: 1.3125rem;
                        line-height: 1.875rem;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .results-row .show-all-btn {
                        padding-block: 0.625rem 0.875rem;
                        padding-inline: 1rem;
                        line-height: 1.4;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .article-list {
                    display: flex;
                    flex-direction: column;
                    gap: 0.9375rem;
                    padding-top: 1.25rem;
                    border-top: 0.0625rem solid #d7d7d7;
                }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .article-list:empty {
                        display: none;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .article-list .article-item {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-start;
                        gap: 0.625rem;
                        text-decoration: none;
                    }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .article-list .article-item .title {
                            font-size: 1.125rem;
                            line-height: 1.5625rem;
                            color: #343d4c;
                            height: 1.5625rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

.popup-modal-backdrop.search-modal .modal .search-form-container .results-container .article-list .article-item .link {
                            flex-shrink: 0;
                            color: var(--color-secondary);
                            font-size: 1rem;
                            line-height: 1.5625rem;
                            text-decoration: underline;
                        }

@media screen and (min-width: 48rem) {
        .component-search .btn-search {
            padding: 0.625rem 0.75rem;
        }
            .popup-modal-backdrop.search-modal .overflow .center-vertical {
                padding-block: 5%;
            }
        .popup-modal-backdrop.search-modal .modal {
            max-width: 90%;
        }

            .popup-modal-backdrop.search-modal .modal .modal-content {
                border-radius: 0.5rem;
            }

            .popup-modal-backdrop.search-modal .modal .search-form-container {
                width: 48.75rem;
                height: 32.5rem;
                max-width: 100%;
                max-height: 100%;
            }
                    .popup-modal-backdrop.search-modal .modal .search-form-container .results-container .loading-overlay {
                        padding-bottom: 3.125rem;
                    }
}