.mfn-loader-list-container {
    display: grid;
    gap: 64px;
}


.mfn-toolbar {
    padding: 32px;
    border-radius: var(--br-24);
    background: #fff;
}

.mfn-toolbar .mfn-toolbar-options {
    display: grid;
    grid-template-areas: 
        "options"
        "search";
    grid-template-columns: 1fr;
    gap: 24px;
}

.mfn-toolbar .mfn-search { grid-area: search; }
.mfn-toolbar .mfn-toolbar-selects-wrapper { grid-area: options; }
.mfn-toolbar .mfn-clear { display: none; }


.mfn-toolbar .mfn-search,
.mfn-toolbar .mfn-toolbar-option:not(.mfn-clear) {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    gap: 6px;
}

.mfn-toolbar .mfn-toolbar-selects-wrapper {
    display: flex; 
    flex-wrap: wrap;
    gap: 24px;
}

.mfn-toolbar .mfn-category span,
.mfn-toolbar .mfn-search span {
    font-weight: 700;
}

.mfn-toolbar .mfn-search-input,
.mfn-toolbar .mfn-select {
    padding: 16px 48px 16px 16px;
    cursor: pointer;
    border: 1px solid var(--gray);
    outline: none;
}

.mfn-toolbar .mfn-search-input:focus,
.mfn-toolbar .mfn-select:focus {
    border-color: var(--dark);
}

.mfn-toolbar .mfn-select {
    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23394747' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 1v14m0 0 7-7m-7 7L1 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 12px;
}


.mfn-content {
    display: grid;
    gap: 48px;
}

.mfn-row {
    display: grid;
    grid-template-areas: 
        "date"
        "title"
        "description"
        "attachments"
        "tags";
    grid-template-columns: 1fr;
    gap: 16px;
}

.mfn-row .mfn-date-wrapper { grid-area: date; }
.mfn-row .mfn-title-wrapper { grid-area: title; }
.mfn-row .mfn-tags-list { grid-area: tags; }
.mfn-row .mfn-attachments { grid-area: attachments; }
.mfn-row .mfn-preamble { grid-area: description; }


.mfn-row .mfn-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.mfn-row .mfn-date,
.mfn-row .mfn-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 6px 5px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    border-radius: 8px;
    background: #fff;
}

.mfn-row .mfn-date::before,
.mfn-row .mfn-tag::before {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 21px;
    height: 21px;
    margin-right: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23394747' d='M7 0v2h6V0h2v2h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4V0h2Zm11 10H2v8h16v-8ZM6 13v2H4v-2h2Zm10 0v2H8v-2h8ZM5 4H2v4h16V4h-3v2h-2V4H7v2H5V4Z'/%3E%3Cpath fill='%23fff' fill-opacity='.7' d='M7 0v2h6V0h2v2h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4V0h2Zm11 10H2v8h16v-8ZM6 13v2H4v-2h2Zm10 0v2H8v-2h8ZM5 4H2v4h16V4h-3v2h-2V4H7v2H5V4Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    content: '';
}

.mfn-row .mfn-date * {
    flex: 0 0 auto;
}

.mfn-row .mfn-tag {
    cursor: pointer;
}

.mfn-row .mfn-tag::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' fill='none' viewBox='0 0 21 21'%3E%3Cpath fill='%23394747' d='m9.485 0 9.9 1.414 1.414 9.9-9.192 9.192a1 1 0 0 1-1.415 0l-9.9-9.9a1 1 0 0 1 0-1.414L9.486 0Zm.707 2.121L2.414 9.9l8.486 8.486 7.778-7.778-1.06-7.425-7.426-1.06Zm2.122 6.364a2 2 0 1 1 2.828-2.828 2 2 0 0 1-2.828 2.828Z'/%3E%3Cpath fill='%23fff' fill-opacity='.7' d='m9.485 0 9.9 1.414 1.414 9.9-9.192 9.192a1 1 0 0 1-1.415 0l-9.9-9.9a1 1 0 0 1 0-1.414L9.486 0Zm.707 2.121L2.414 9.9l8.486 8.486 7.778-7.778-1.06-7.425-7.426-1.06Zm2.122 6.364a2 2 0 1 1 2.828-2.828 2 2 0 0 1-2.828 2.828Z'/%3E%3C/svg%3E");
}

.mfn-row h2 a {
    font-weight: 300;
}

.mfn-row .mfn-attachments {
    display: flex;
    gap: 8px 12px;
}

.mfn-row .mfn-attachment::before  {
    display: inline-block;
    width: 18px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' fill='none' viewBox='0 0 18 20'%3E%3Cpath fill='%23E09213' d='m11.95 5.707-5.657 5.657a1 1 0 1 0 1.414 1.414l5.657-5.657A3 3 0 0 0 9.121 2.88L3.464 8.536a5 5 0 0 0 7.072 7.07l5.656-5.656 1.415 1.414-5.657 5.657a7 7 0 0 1-9.9-9.9l5.657-5.657a5 5 0 0 1 7.071 7.072l-5.657 5.656A3 3 0 0 1 4.88 9.95l5.657-5.657 1.414 1.414Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    cursor: pointer;
}

.mfn-row .mfn-attachment.mfn-file-type-pdf::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' fill='none' viewBox='0 0 18 20'%3E%3Cpath fill='%23E09213' d='M2 2h10v4h4v12H2V2ZM.998 0A.995.995 0 0 0 0 .992v18.016A1 1 0 0 0 .993 20h16.014A1 1 0 0 0 18 18.992V5l-5-5H.998ZM7.5 5.5c0 1.577-.456 3.437-1.225 5.153-.772 1.723-1.814 3.197-2.9 4.066l1.18 1.613c2.927-1.952 6.168-3.29 9.303-2.842l.458-1.939C11.643 10.661 9.5 7.99 9.5 5.5h-2Zm.6 5.972c.267-.597.504-1.216.704-1.843a9.66 9.66 0 0 0 1.706 1.966c-.982.176-1.944.465-2.875.833.165-.314.32-.633.465-.956Z'/%3E%3C/svg%3E");
}

.mfn-row .mfn-attachment.mfn-file-type-image::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%23E09213' d='m2 8.1 2-2 5.5 5.5L13 8.1l3 3V2H2v6.1Zm0 2.829V16h3.1l2.986-2.985L4 8.929l-2 2ZM7.929 16H16v-2.071l-3-3L7.929 16ZM1 0h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1Zm11.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z'/%3E%3C/svg%3E");
}

.mfn-row .mfn-attachment .mfn-attachment-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.mfn-row .mfn-preamble {
    font-size: var(--fs-18);
}

.mfn-content .mfn-divider {
    display: none;
}

.mfn-content .mfn-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.mfn-content .mfn-pagination .mfn-pagination-link {
    cursor: pointer;
}

.mfn-content .mfn-pagination .mfn-pagination-current-page {
    flex: 1 1;
    font-weight: 700;
    text-align: center;
}

.mfn-content .mfn-pagination .mfn-next {
    text-align: right;
}

@media (min-width: 992px) {
    .mfn-row {
        grid-template-areas: 
            "date        tags"
            "title       title"
            "description description"
            "attachments  attachments";
        grid-template-columns: max-content 1fr;
    }

    .mfn-row .mfn-preamble {
        padding-right: 120px;
    }
}