:root {
    --black: black;
    --gray: #e4e4e4;
    --radius: 4px;
    --width: 2px;
}

@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/assistant/assistant-v19-latin-200.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/assistant/assistant-v19-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/assistant/assistant-v19-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/assistant/assistant-v19-latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/assistant/assistant-v19-latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/assistant/assistant-v19-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/assistant/assistant-v19-latin-800.woff2') format('woff2');
}

div.docfinder-container {

    font: normal normal normal 16px / 20px 'Assistant', 'Arial';

    div.search-form {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 30px;

        span {
            margin-right: 10px;
        }

        input {
            background-color: #fafafa;
            box-shadow: none;
            border: var(--width) solid var(--gray);
            border-radius: var(--width);
            font: normal normal normal 16px / 20px 'Assistant', 'Arial';
            height: 40px;
            padding: 5px;

            &:focus,
            &:focus-visible {
                border: var(--width) solid var(--gray);
                outline: none;
            }
        }
    }

    .table-wrapper {
        border: var(--width) solid var(--gray);
        border-radius: var(--radius);
        table {
            border-collapse: collapse;
            /* border: 2px solid var(--gray); */
            /* border-radius: 4px; */
            width: 100%;

            margin: 0 !important;
            
            * {
                padding: 0;
                margin: 0;
            }
    
            thead {
                background-color: #f2f6f9;

                tr {
                    th {
                        border-bottom: var(--width) solid var(--gray);
                        color: #333333;

                        font-size: 18px;
                        font-weight: 600;
                        line-height: 22px;
                        
                        padding: 25px;

                        text-align: center;

                        &:first-child {
                            border-top-left-radius: var(--radius);
                        }
                        
                        &:last-child {
                            border-top-right-radius: var(--radius);
                        }

                        &:nth-child(1) {
                            width: 50%;
                        }
                        &:nth-child(2) {
                            width: 30%;
                        }
                        &:nth-child(3) {
                            width: 20%;
                        }
                    }
                }
            }
        
            tbody {
                tr {
                    font-weight: 300;

                    &:not(:last-child) {
                        border-bottom: var(--width) solid var(--gray);
                    }

                    &:nth-child(odd) {
                        background-color: #f7f7f7;
                    }

                    &:nth-child(even) {
                        background-color: #fff;
                    }

                    td {
                        padding: 15px;
                        text-align: center;

                        &:not(:last-child) {
                            border-right: var(--width) solid var(--gray);
                        }

                        &:nth-child(1) {
                            width: 50%;
                        }
                        &:nth-child(2) {
                            width: 30%;
                        }
                        &:nth-child(3) {
                            width: 20%;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {
    div.docfinder-container {
        thead th:not(:first-child){
            display: none;
        }
        thead, tbody, tr, th, td{
            display: block;
            width: 100% !important;
            border-right: none !important;
        }
    }
}