/* Equispaced DIV Grid Table*/
.grids {
    display: inline-table;
    width: 100%;
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        padding: 5px;
        vertical-align: middle;
        word-wrap: break-word;
        // word-break: break-all;
        &.adjTB {
            padding: 13px 5px;
        }
        &.adjT {
            padding-top: 12px;
        }
        &.adjB {
            padding-bottom: 12px;
        }
        &.center {
            text-align: center;
        }
        &.right {
            text-align: right;
        }
        &.left {
            text-align: left;
        }
        &.c5 {
            width: 5%;
        }
        &.c10 {
            width: 10%;
        }
        &.c15 {
            width: 15%;
        }
        &.c20 {
            width: 20%;
        }
        &.c25 {
            width: 25%;
        }
        &.c30 {
            width: 30%;
        }
        &.c35 {
            width: 35%;
        }
        &.c40 {
            width: 40%;
        }
        &.c45 {
            width: 45%;
        }
        &.c50 {
            width: 50%;
        }
        &.c55 {
            width: 55%;
        }
        &.c60 {
            width: 60%;
        }
        &.c65 {
            width: 65%;
        }
        &.c70 {
            width: 70%;
        }
        &.c75 {
            width: 75%;
        }
        &.c80 {
            width: 80%;
        }
        &.c85 {
            width: 85%;
        }
        &.c90 {
            width: 90%;
        }
        &.c95 {
            width: 95%;
        }
        &.c100 {
            width: 100%;
        }
    }
}

/* This is for simplified 12 point grid system */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
.col {
    display: block;
    float: left;
    margin: 0.2% 0 0.2% 1.2%;
}
.col:first-child {
    margin-left: 0;
}
@for $i from 2 through 12 {
    .section.float#{$i} {
        .col:nth-child(#{$i}n + 1) {
            margin-left: 0;
            clear: left;
        }
    }
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}

.group:before,
.group:after {
    content: "";
    display: table;
}

/* GRID OF TWO */
.span_2_of_2 { width: 100%; }
.span_1_of_2 { width: 49.4%; }
/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.26%; }
.span_1_of_3 { width: 32.53%; }
/* GRID OF FOUR*/
.span_1_of_4 { width: 24.1%; }
.span_2_of_4 { width: 49.4%; }
.span_3_of_4 { width: 74.7%; }
.span_4_of_4 { width: 100%; }
/*  GRID OF FIVE  */
.span_5_of_5 { width: 100%; }
.span_4_of_5 { width: 79.76%; }
.span_3_of_5 { width: 59.52%; }
.span_2_of_5 { width: 39.28%; }
.span_1_of_5 { width: 19.04%; }
/*  GRID OF SIX  */
.span_6_of_6 { width: 100%; }
.span_5_of_6 { width: 83.13%; }
.span_4_of_6 { width: 66.26%; }
.span_3_of_6 { width: 49.4%; }
.span_2_of_6 { width: 32.53%; }
.span_1_of_6 { width: 15.66%; }
/*  GRID OF SEVEN  */
.span_7_of_7 { width: 100%; }
.span_6_of_7 { width: 85.54%; }
.span_5_of_7 { width: 71.08%; }
.span_4_of_7 { width: 56.62%; }
.span_3_of_7 { width: 42.17%; }
.span_2_of_7 { width: 27.71%; }
.span_1_of_7 { width: 13.25%; }
/*  GRID OF EIGHT  */
.span_8_of_8 { width: 100%; }
.span_7_of_8 { width: 87.35%; }
.span_6_of_8 { width: 74.7%; }
.span_5_of_8 { width: 62.05%; }
.span_4_of_8 { width: 49.4%; }
.span_3_of_8 { width: 36.75%; }
.span_2_of_8 { width: 24.1%; }
.span_1_of_8 { width: 11.45%; }
/*  GRID OF NINE  */
.span_9_of_9 { width: 100%; }
.span_8_of_9 { width: 88.75%; }
.span_7_of_9 { width: 77.51%; }
.span_6_of_9 { width: 66.26%; }
.span_5_of_9 { width: 55.02%; }
.span_4_of_9 { width: 43.77%; }
.span_3_of_9 { width: 32.53%; }
.span_2_of_9 { width: 21.28%; }
.span_1_of_9 { width: 10.04%; }
/*  GRID OF TEN  */
.span_10_of_10 { width: 100%; }
.span_9_of_10 { width: 89.88%; }
.span_8_of_10 { width: 79.76%; }
.span_7_of_10 { width: 69.64%; }
.span_6_of_10 {	width: 59.52%; }
.span_5_of_10 { width: 49.4%; }
.span_4_of_10 { width: 39.28%; }
.span_3_of_10 { width: 29.16%; }
.span_2_of_10 { width: 19.04%; }
.span_1_of_10 { width: 8.92%; }
/*  GRID OF ELEVEN  */
.span_11_of_11 { width: 100%; }
.span_10_of_11 { width: 90.8%; }
.span_9_of_11 { width: 81.6%; }
.span_8_of_11 { width: 72.4%; }
.span_7_of_11 { width: 63.2%; }
.span_6_of_11 { width: 54%; }
.span_5_of_11 { width: 44.8%; }
.span_4_of_11 { width: 35.6%; }
.span_3_of_11 { width: 26.4%; }
.span_2_of_11 { width: 17.2%; }
.span_1_of_11 { width: 8%; }
/*  GRID OF TWELVE  */
.span_12_of_12 { width: 100%; }
.span_11_of_12 { width: 91.56%; }
.span_10_of_12 { width: 83.13%; }
.span_9_of_12 { width: 74.7%; }
.span_8_of_12 { width: 66.26%; }
.span_7_of_12 { width: 57.83%; }
.span_6_of_12 { width: 49.4%; }
.span_5_of_12 { width: 40.96%; }
.span_4_of_12 { width: 32.53%; }
.span_3_of_12 { width: 24.1%; }
.span_2_of_12 { width: 15.66%; }
.span_1_of_12 { width: 7.233%; }

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 640px) {
    .col { margin: 1% 0 1% 0%; }
    .span_2_of_2, .span_1_of_2 { width: 100%; }
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
    .span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; }
    .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
    .span_1_of_7, .span_2_of_7, .span_3_of_7, .span_4_of_7, .span_5_of_7, .span_6_of_7, .span_7_of_7 { width: 100%; }
    .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; }
    .span_1_of_9, .span_2_of_9, .span_3_of_9, .span_4_of_9, .span_5_of_9, .span_6_of_9, .span_7_of_9, .span_8_of_9, .span_9_of_9 { width: 100%; }
    .span_1_of_10, .span_2_of_10, .span_3_of_10, .span_4_of_10, .span_5_of_10, .span_6_of_10, .span_7_of_10, .span_8_of_10, .span_9_of_10, .span_10_of_10 { width: 100%; }
    .span_1_of_11, .span_2_of_11, .span_3_of_11, .span_4_of_11, .span_5_of_11, .span_6_of_11, .span_7_of_11, .span_8_of_11, .span_9_of_11, .span_10_of_11, .span_11_of_11 { width: 100%; }
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 { width: 100%; }
}

/* Colored data table */
table.gridTable {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    border-collapse: separate;
    border: 2px solid $bt-blue-dark;
    font-size: 14px;
    caption {
        display: none;
    }
    tr {
        background-color: $bt-white;
    }
    tr:nth-child(even) {
        background-color: $bt-grey-light-95;
    }
    tr.odd {
        background-color: $bt-white;
    }
    tr.even {
        background-color: $bt-grey-light-95;
    }
    tr.grp1 {
        background-color: $bt-white;
    }
    tr.grp2 {
        background-color: $bt-grey-light-95;
    }
    td {
        padding: 6px 3px;
        box-sizing: border-box;
        word-wrap: break-word;
        button {
            padding: 3px;
            font-size: 1.3em;
            margin: 0 1px;
            border: none;
            background: transparent;
            color: #000;
        }
    }
    th {
        background-color: $bt-blue-dark;
        color: $bt-white;
        font-family: $bt-font-family-bold;
        padding: 5px;
        font-size: 1.05em;
        button {
            padding: 3px 5px;
            font-size: 1.2em;
            border: none;
            background: transparent;
            color: $bt-white;
        }
    }
    tfoot {
        td {
            background-color: $bt-blue-light !important;
        }
    }
    th.center,
    td.center {
        text-align: center;
    }
    th.right,
    td.right {
        text-align: right;
    }
    th.left,
    td.left {
        text-align: left;
    }
}

table.fullw {
    width: 100%;
    box-sizing: border-box;
}

/** Data table component **/
.dataGridWrapper {
    .ctrlPanel {
        padding-bottom: 5px;
        .spacer {
            width: 9.5%;
            display: inline-block;
        }
        .pageCtrl {
            width: 14.3%;
            display: inline-block;
            margin: 0 2px;
        }
        .sortCtrl {
            width: 24.3%;
            display: inline-block;
            margin: 0 2px;
        }
        .filterCtrl {
            width: 50%;
            display: inline-block;
            border-bottom: 1px solid #aaa;
            input {
                width: 96%;
                border: 0;
                border-radius: 0;
                outline: none;
                padding: 5px;
                position: relative;
                &:focus{
                    border-bottom-width: 2px;
                }
            }
            .icon {
                color: $bt-grey-light-20;
                float: right;
                margin-top: 8px;
            }
            .clrIcon {
                cursor: pointer;
            }
        }
    }
    &.selectable {
        table {
            tr {
                td {
                    cursor: pointer;
                }
                &:hover {
                    td {
                        background-color: $bt-grey-light-80;
                    }
                }
                &.selected {
                    td {
                        background-color: #cae3f8;
                    }
                    &:hover {
                        background-color: #cae3f8;
                    }
                }
            }
        }
    }
    // Controls no of rows per page
    dl.pageDrop {
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        dt {
            padding: 5px;
            border-bottom: 1px solid #aaa;
            box-sizing: border-box;
            cursor: pointer;
            font-size: 14px;
            .icon {
                float: right;
                padding: 4px 0 2px 0;
                transition: all ease-in 0.15s;
                font-size: 20px;
            }
            &.open {
                border: 1px solid #aaa;
                border-bottom: 0;
                border-radius: 2px;
            }
        }
        dd {
            position: absolute;
            z-index: 10;
            margin: 0 0 0 2px;
            width: 98%;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.33);
            border: none;
            li {
                padding: 5px 3px;
                background: $bt-white;
                box-sizing: border-box;
                font-size: 12px;
                text-indent: 5px;
                cursor: default;
                &:hover {
                    background: #cae3f8;
                }
            }
        }
    }
    // Sorting control for data table
    dl.sortDrop {
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        dt {
            padding: 5px;
            border-bottom: 1px solid #aaa;
            box-sizing: border-box;
            cursor: pointer;
            border-radius: 0px;
            font-size: 14px;
            .icon {
                float: right;
                padding: 4px 0 2px 0;
                transition: all ease-in 0.15s;
                font-size: 20px;
            }
            &.open {
                border: 1px solid #aaa;
                border-bottom: 0;
                border-radius: 2px;
            }
        }
        dd {
            position: absolute;
            z-index: 10;
            margin: 0 0 0 2px;
            width: 99%;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.33);
            background: $bt-white;
            .type {
                position: relative;
                text-align: center;
                padding: 2px;
                border-bottom: 1px solid #aaa;
                font-size: 14px;
                .icon {
                    padding: 0 2px;
                }
                button {
                    background: none;
                    border: none;
                    padding: 3px 8px;
                    margin: 0 3px;
                    .icon {
                        padding-left: 5px;
                        font-size: 18px;
                    }
                }
                button.active {
                    background: $bt-blue-dark;
                    color: $bt-white;
                }
            }
            li {
                padding: 3px;
                background: $bt-white;
                box-sizing: border-box;
                font-size: 12px;
                text-indent: 5px;
                cursor: default;
                &:hover {
                    background: #cae3f8;
                }
            }
        }
    }
}
/* Pagination style */
.paginationWrapper {
    display: inline-table;
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    user-select: none;
    .pageInfo {
        display: table-cell;
        width: 50%;
        text-align: left;
        font-size: 12px;
    }
    .paginator {
        display: table-cell;
        width: 50%;
        text-align: right;
        ul.pagination {
            list-style: none;
            padding: 0;
            margin: 0;
            background: #f2f2f2;
            display: inline-block;
            border-radius: 4px;
            li {
                display: inline-block;
                color: #333;
                font-size: 10pt;
                font-weight: normal;
                text-align: center;
                min-width: 14px;
                padding: 4px 8px;
                cursor: pointer;
            }
            li.active {
                background: $bt-blue-dark;
                color: $bt-white;
            }
            li.disabled {
                color: #c3cfd8;
                cursor: not-allowed;
            }
        }
    }
}