/* Copyright 2019, Sciamble Corp. All Rights Reserved. We will take legal action against those who copy our HTML content, CSS style sheets and JavaScript functions. */

table {
    border-collapse: collapse;
    table-layout: fixed; /*this along with 100% width, ensures large tables on small screen always fits within alloted div, else will overflow out of div*/
    width: 100%;
}

.tbl-auto-layout {
    table-layout: auto;
}

table > * {
    line-height: 4px;
}

tr {
    line-height: 24px;
    border-bottom: solid;
    border-width: 1px;
    border-color: gray;
}

th {
    text-align: left; /*IE aligns to center while chrome aligns to left by default*/
    white-space: normal; /*allow text to wrap else large text of table on small screen will have text overflow to next field*/
    padding-bottom: 6px;
}

td {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Adds border for all 4 edges of a cell of the table. */
.td-fullborder td, .td-fullborder th {
    line-height: 24px;
    border: solid;
    border-width: 1px;
    border-color: gray;
    padding-left: 10px;
}


/* Adds vertical border for table, except on the left and right edge of table. */
.tbl-verticalBorder th, .tbl-verticalBorder td {
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    padding-left: 10px;
    padding-right: 10px;
}

    .tbl-verticalBorder th:first-child, .tbl-verticalBorder td:first-child {
        border-left: none;
    }

    .tbl-verticalBorder th:last-child, .tbl-verticalBorder td:last-child {
        border-right: none;
    }

/* Center aligns table content. */
.tbl-centerAlign th, .tbl-centerAlign td {
    text-align: center;
}

/*when column spans multiple rows, the second entry is hidden unless the layout is changed from table to sequential.*/
.collapse-table-rowSpan {
    display: none;
}

.tbl-sorted-asc::after {
    content: "                     ▲";
}

.tbl-sorted-des::after {
    content: "                     ▼";
}

.tbl-searchbar {
    background-image: url("/images/common/searchicon.png");
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat;
    width: calc(100% - 40px);
    font-size: 16px;
    padding: 12px 0 12px 40px;
    border: 1px solid lightgray; 
}

@media screen and (max-width: 750px) {
    .collapse-table th {
        display: none;
    }

    .collapse-table td[thead]::before {
        content: attr(thead) ":\2005";
        display: inline-block;
        font-weight: bold;
    }

    .collapse-table td {
        display: block;
        white-space: normal;
    }

    .collapse-table-rowSpan {
        display: block;
    }
}