/*
 * Tables
 */

.table {
    background-color: #f9f9f9;
    border-color: #e8e8e8;
    border-style: solid;
    border-width: 1px;
    position: relative;
    width: 100%;
}

/* Caption if displayed */
table caption {
    text-align: left;
}

/***** BLUE HEADER BAR *****/
/*.table:before {
    content: "";
    display: block;
    height: 3px;
    background: #3f96d3;
    position: absolute;
    top: 3.8rem;
    left: 0;
    width: 100%;
    z-index: 999;
}*/

/* Blue bar between table header and body */
table.table thead tr td,
table.table thead tr th {
    border-bottom-color: #3f96d3;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

/* Blue bar for table with no head */
table.table.no-head tbody tr:first-child td {
    border-top-color: #3f96d3;
    border-top-style: solid;
    border-top-width: 3px;
}

/* necessary in table with no-head to prevent highlight on-hover from changing color of blue bar */
table.table.hor-hover.no-head tbody tr:first-child:hover td {
    border-top-color: #3f96d3 !important;
}

/* for transaction history tables where cell borders are used */
table.table.cells.transaction-history {
    border-collapse: collapse;
}

table.table.cells.transaction-history thead tr {
    border-bottom-color: #3f96d3;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

/***** END BLUE HEADER BAR *****/

.table thead td,
.table thead th {
    border-top-style: none;
    border-top-width: 0;
    box-shadow: inset 0 16px 16px -16px #fff;
    color: #00608c;
    font-weight: 300;
}

.table .heading {
    float: left;
    color: #00608c;
    font-weight: 300;
}

.table .sort {}

.table td,
.table th {
    color: #696969;
    font-weight: 300;
    padding: 0.8rem 1.4rem;
    text-align: left;
    vertical-align: middle;
}

.table.rows tr td {
    border-bottom-color: #e8e8e8;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.table.cells td,
.table.cells th {
    border-color: #e8e8e8;
    border-style: solid;
    border-width: 1px;
    vertical-align: top;
}

.icon-after.gloebit-thin:after {
    margin-left: 0.8rem;
    display: inline-block;
}

.hor-hover {
    border-collapse: separate;
}

.hor-hover .tr:hover {
 }

.hor-hover .tr:hover td,
.table .active {
    border-color: #e8e8e8 !important;

    background-color: #ffffff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9));
    background-image: -webkit-linear-gradient(top, #ffffff, #f9f9f9);
    background-image:    -moz-linear-gradient(top, #ffffff, #f9f9f9);
    background-image:      -o-linear-gradient(top, #ffffff, #f9f9f9);
    background-image:         linear-gradient(to bottom, #ffffff, #f9f9f9);
}

.table thead .active {
    background-color: #fff;
    background-image: none;
}

.remove-button {
    color: #ff6858;
    float: left;
    margin: 0 2rem;
    text-align: center;
}

.edit-button + .remove-button {
    margin: 0;
}

.edit-button {
    color: #696969;
    float: left;
    padding-right: 2rem;
}

.disconnect-app .disconnect {
    color: #ff6858;
    display: block;
    position: relative;
    text-align: center;
    top: 1.2rem;
}

.disconnect-app .ask {
    display: block;
    opacity: 0;
    position: relative;
    text-align: center;
    top: -1.2rem;

    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.active .ask {
    opacity: 1;
}

.disconnect-app .confirm {
    opacity: 1;
}




/* Pagination */

.pagination {
    list-style: none;
    display: block;
    text-align: center;
}

.pagination li {
    display: inline-block;
    padding: 0.4rem;
}

.pagination li a {
    padding: 0.4rem;
}

.pagination li:hover {}

.pagination .prev,
.pagination .next {}

.pagination .active {
    cursor: default;
    text-decoration: underline;
}

/* App Tables */

table.app-table tbody td {
    border-bottom-color: #e8e8e8;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    min-height: 8.8rem;
    vertical-align: middle;
}

table.app-table tbody tr {
    min-height: 10.2rem;
    height: 10.2rem;
    position: relative;
}

/* larger min height for rows if large app thumb */
table.app-table.large-thumb tbody tr {
    min-height: 12.5rem;
    height: 12.5rem;        /* Necessary because in display:table auto-span is on
                               min-height does nothing
                               height acts like min-height */
}

/* set sizing for App Image */
/* Note does not use app-table - currently applies to subscription tables as well */
table tbody .app-image img {
    display: block;
    max-height: 80px;
    max-width: 125px;
    margin: auto;   /* centers horizontally */
    vertical-align: middle;
}

/* Set sizing for Large App Image */
table.app-table.large-thumb tbody .app-image img {
    max-height: 108px;  /* previously 88px */
    max-width: 169px;   /* previously 142px */
}

/* Cut off long descriptions */
/* Div surrounds title and desc */
table.app-table tbody td.app-description div {
    max-height: 6.3rem;     /* should be 3 lines */
    overflow-y: hidden;
    text-overflow: ellipsis;    /* sadly, this doesn't appear to work */
}

/* allow an extra line in tables with large-thumb */
table.app-table.large-thumb tbody td.app-description div {
    max-height: 8.4rem;     /* should be 4 lines */
}

/* Special Fields */
table.table td.date {
    white-space: nowrap;
}

table.table td.credit,
table.table td.debit,
table.table td.balance {
    white-space: nowrap;
    text-align: right;
}


@media only screen and (max-width: 719px) {
    .table-responsive {
        border-color: #e8e8e8;
        border-style: solid;
        border-width: 1px;
        margin: 1rem 1rem 0rem 1rem;    /* 4rem 4rem 0rem 4rem; */
        overflow-x: scroll;
        overflow-y: hidden;
        width: auto;
    }

    .table-responsive .table:before {
        top: 2.4rem;    /* 6.8rem; */
        height: 3px;    /* 6px; */
    }

    .heading-b + .table-responsive {
        margin-top: 0;
    }

    .table-responsive .table {
        border: none;
    }

    .checkbox-label {
        font-size: 2.8rem;  
    }

    .table,
    .table td,
    .table th,
    .table p {
        font-size: 1.4rem;  /* 2.8rem; */
        line-height: 0.7;   /* pulled from body above 1.4 */
    }

    .table p {
        padding: 0;
    }

    .table td,
    .table th {
        /* min-width: 32rem; */
        /* padding: 1.6rem 2.8rem; */
        padding: 0.8rem 0;  /* 1.6rem 0; */
    }

    .table td.app-image {
        min-width: 14.2rem;
    }

    .disconnect-app .ask {
        top: -2.2rem;
    }

    .pagination {
        margin: 2rem 4rem 4rem 4rem;
        padding: 0;
    }

    .pagination li {
        margin: 0 0.5rem;
        padding: 0;
    }

    .pagination li a {
        background-color: #f7f7f7;
        display: block;
        font-size: 2.2rem;
        padding: 2rem 3rem;
    }

    .pagination li.active a {
        background-color: #3f96d3;
        color: #fff;
        text-decoration: none;
    }
}