/* -- Debug Information -- */

/* Debug Information Panel Variation */
.panel__header--debug {
    background-color: #fbc02d;
}
.panel__header--debug .panel__heading {
    color: #263238;
}
.panel__header--debug .panel__toggle {
    background-image: url(../img/icons/dark/spanner.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 20px center;
    padding: 10px 47px 9px 42px;
    min-height: 0;
}
.panel__header--debug .panel__toggle:link,
.panel__header--debug .panel__toggle:visited {
    color: #263238;
    text-decoration: none;
}
.panel__header--debug .panel__toggle:hover,
.panel__header--debug .panel__toggle:active {
    background-color: #f9a825;
}
.panel__header--debug .panel__toggle:after {
    background-image: url(../img/arrow_down_dark.svg);
}

/* Debug Information Table */
.debug-table {}
.debug-table__tr {}
.debug-table__th {
    padding: 5px 10px;
    background-color: #263238;
    color: #fff;
    font-size: .8125rem;
    font-weight: 400;
    text-transform: uppercase;
    border-bottom: 2px solid #eceff1;
}
.debug-table__td {
    padding: 5px 10px;
    background-color: #fff;
    color: #263238;
    font-size: .8125rem;
    font-weight: 400;
    border-bottom: 2px solid #eceff1;
}
.debug-table__tr--selected .debug-table__td {
    background-color: #2196f3;
    color: #fff;
}

@media only screen and (max-width: 767px) {
    .debug-table__thead, .debug-table_tfoot {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .debug-table__tbody,
    .debug-table__tr,
    .debug-table__td {
        display: block;
    }
    .debug-table__tr {
        margin-bottom: 10px; 
    }
    .debug-table__td {
        border-bottom: 0;
    }
    .debug-table__td:before {
        content: attr(data-th)": ";
        font-weight: 700;
    }
    .debug-table .text-right {
        text-align: left;
    }
}