.section-index-dokumen {

    .breadcrumbbb {
        .tagline {
            margin-bottom: 20px;
        }
    }

    .desc {
        font-size: var(--text-body);
        line-height: 150%;
        color: var(--text-secondary);
        margin-bottom: 40px;
    }

    .title-page {
        font-size: var(--text-h4);
        color: var(--color-blue-700);
        font-weight: bold;
        margin-bottom: 20px;
    }

    /* Container Utama */
    .search-container {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 500px;
        /* Sesuaikan lebar maksimal sesuai kebutuhan */
        font-family: Arial, sans-serif;
    }

    /* Wrapper Input & Icon */
    .search-input-wrapper {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
    }

    /* Icon Kaca Pembesar */
    .search-icon {
        position: absolute;
        left: 14px;
        width: 20px;
        height: 20px;
        stroke: #0091ff;
        /* Warna ikon biru */
        pointer-events: none;
    }

    /* Input Field */
    .search-input {
        width: 100%;
        padding: 10px 16px 10px 44px;
        /* Padding kiri disesuaikan untuk tempat icon */
        font-size: 15px;
        color: #333333;
        border: 1px solid #94a3b8;
        /* Border abu-abu halus */
        border-radius: 8px;
        /* Sudut melengkung */
        outline: none;
        background-color: #ffffff;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
    }

    .search-input::placeholder {
        color: #94a3b8;
        /* Warna teks placeholder */
    }

    .search-input:focus {
        border-color: #0091ff;
    }

    /* Tombol Cari */
    .search-button {
        background-color: #0091ff;
        /* Warna tombol biru */
        color: #ffffff;
        border: none;
        border-radius: 8px;
        padding: 10px 24px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s ease;
        white-space: nowrap;
    }

    .search-button:hover {
        background-color: #007ce6;
    }


    .tabel-responsif {
        overflow-x: auto;
        width: 100%;

        margin-bottom: 30px;
    }

    table {
        background: transparent !important;
        width: 100%;
        white-space: nowrap;

        .nomor,
        .tahun,
        .format,
        .btn-view,
        .btn-download {
            white-space: nowrap;
        }

        thead {
            background-color: #EFF8FF;
            color: var(--text-secondary);
            font-weight: bold;

            tr {
                th {
                    padding: 10px;
                }
            }
        }

        tbody {
            color: var(--text-secondary);



            tr {
                border-bottom: 1px solid #B8E3FF;

                td {
                    padding: 10px;
                }
            }
        }

        .btn-view {
            border: 1px solid #0097F6;
            border-radius: 7px;
            color: #0097F6;
            padding: 10px 12px;
            font-size: var(--text-sub);

            &:hover {
                background: var(--color-blue-700);
                color: var(--text-inverse);
            }
        }

        .btn-download {
            border-radius: 7px;
            background: var(--text-link);
            font-size: var(--text-sub);
            color: var(--text-inverse);
            padding: 10px 12px;

            &:hover {
                background: var(--color-blue-700);
            }
        }
    }


}