/* xxxxxxxxxxx RESPONSIVE LIST TABLE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div#table_responsive_container{                         /* Container in the front-end file which will contain the Responsive table */
    width           : 100%;
}

table#table_responsive{                                 /* Responsive table */
    width           : 100%;
    border-spacing  : 1px;
    border-collapse : separate;
    background-color: #d5d4d4;
}

table#table_responsive tr td{                           /* All TR and TDs in the Responsive table */
    padding         : 12px;
    font-size       : 15px;
    vertical-align  : top;
}

table#table_responsive tr:first-child td{               /* All TDs of the first TR in the Responsive table */
    background-color: #2178ab;
    color           : #ffffff;
    font-weight     : bold;
}

table#table_responsive tr:nth-child(2n+2) td{           /* All TDs in all even TR (counting header as first row) of the Responsive table */
    background-color: #ffffff;
}

table#table_responsive tr:nth-child(2n+3) td{           /* All TDs in all odd TR (counting header as first row) of the Responsive table */
    background-color: #f9f9f9;
}

table#table_responsive tr:hover td{                     /* All TD of a TR of the Responsive table when hover on that TR */
    background-color: #f1f1f1;
}

table#table_responsive tr:first-child:hover td{         /* All TD of the first TR of Responsive table when hover on that TR */
    background-color: #2178ab;
}

table#table_responsive tr:last-child td{                /* All TD of last TR of Responsive table */
    background-color: #2178ab;
    color           : #ffffff;
    font-weight     : bold;    
}

table#table_responsive tr:last-child:hover td{          /* All TD of the last TR of Responsive table when hover on that TR */
    background-color: #2178ab;
}

table#table_responsive tr.inactive td{                  /* All TD of all inactive TR */
        color       : #919191;
}

table#table_responsive tr td i.fa-plus-square{          /* Plus icon */
     font-size      : 18px;
}

@media(max-width: 900px){
        table#table_responsive{                         /* Responsive table */
                font-size           : 13px;
        }
}        

/* Div which will popup to show the details of a row of a Responsive table xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */


div.table_responsive_row_popup{                         /* Popup div which will show the details of a row of a Responsive table */
        display             : none;
        background-color    : #d5d4d4;
        position            : fixed;
        top                 : 0px;
        left                : 0px;
        width               : calc(100vw - 40px);
        max-height          : calc(100vh - 40px);
        margin              : 20px;
        z-index             : 7500000;                  /* Seventy Five lakh */
        box-shadow          : 0px 1px 1px #888888;
        overflow            : auto;
}

div.table_responsive_row_popup table{                   /* Table within the Popup div which will show the details of a row of a Responsive table */
        width               : 100%;
        border-spacing      : 1px;
        border-collapse     : separate;          
}

div.table_responsive_row_popup table tr:first-child td{                         /* All TD of first TR of popup table */
        background-color    : #2178ab;
        color               : #ffffff;
        font-weight         : bold;
        text-align          : right;
        font-size           : 24px;
}

div.table_responsive_row_popup table tr:nth-child(n+2) td:first-child {         /* First column of all rows starting from the second row of popup table */
        width               : 25%;
        max-width           : 200px;
        background-color    : #f9f9f9;
        font-weight         : bold;
}

div.table_responsive_row_popup table tr:nth-child(n+2) td:nth-child(2){         /* Second column of all rows starting from the second row of popup table */
        background-color    : #ffffff;
}

@media(max-width: 900px){
        div.table_responsive_row_popup table tr td{                             /* All TDs of all TRs of popup table */
                font-size           : 13px !important;
        }
        
        div.table_responsive_row_popup table tr:first-child td{                 /* All TDs of first TR of popup table */
                font-size           : 18px !important;                                                                   
        }
}