@charset "utf-8";
    /* * * * * * * * * * * * * * * * * *\
    CSS Document                    
    deposit-insurance-history.css - History of Dep Ins CSS File 
    Updated: 20230113               
    Updated by: D. Spanburg         
    \* * * * * * * * * * * * * * * * * */

    .timeline-highlight {
        background-color: darkblue;
        text-align: center;
    }

    /*  Table Row & cell definitions using DIV tags to simulate a table */
    .tbl-row {
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .tbl-row:nth-child(odd) {
        background-color: #eeeeee;
    }

    .tbl-cell {
        display: table-cell;
        text-align: left;
        padding: 5px;
        margin: 1em;
    }

    @media (max-width:768px) {
        .tbl-cell {
            width: 100%;
            font-weight: normal;
            /* float: left; */
            /* margin: auto; */
            /* padding: 0%; */
        }

        .tbl-row {
            width: auto;
            float: left;
        }
    }

    @media (max-width:615px) {
        .tbl-cell {
            width: 100%;
            font-weight: normal;
            /* float: none; */
            /* width: 0%; */
            /* padding: 0%; */
        }
    }

    /* Text Highlighting for Comments included in text */
    .comments {
        background-color: yellow;
        color: red;
        font-weight: 200;
    }

    /* the styles here are specific to this very particular page. It is to modify the tables inside the accordion for sizing, responsiveness and the roman numerals. */
    /* Adding this to custom.css would only confuse the system. A "best practice" would have this code added to a page or sub-site specific .css file and called in via
       a <link> element placed just above the </head> (close head) element. */
    /* the div[id^="di-a"] portion of the declaration says to look for a div with an id that starts with "di-a" (so it will see di-a1, di-a2, di-a3, etc) */
    div[id^="di-a"] table {
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 1.8;
        width: 100%;
        border-collapse: collapse;
    }

    div[id^="di-a"] table tr td {
        width: 10%;
    }

    div[id^="di-a"] table tr td:nth-child(1) {
        width: 5%;
        min-width: 60px;
        padding-left: 1em;
    }

    div[id^="di-a"] table tr td:nth-child(2) {
        width: 65%;
    }

    div[id^="di-a"] table tr td:nth-child(3) {
        width: 20%;
    }

    div[id^="di-a"] table tr td.date::before {
        content: 'Updated Date: ';
    }

    div[id^="di-a"] table tr:nth-child(odd) {
        background-color: #F0F0F6;
    }

    @media (max-width: 1024px) {
        div[id^="di-a"] table tr td:nth-child(3) {
            width: 25%;
        }
    }

    div.usa-accordion h2 button::before {
        padding-right: 10px;
        display: inline-block;
        min-width: 60px;
    }