/* Component styles */
@font-face {
    font-family: 'Blokk';
    src: url('../fonts/blokk/BLOKKRegular.eot');
    src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.component {
    line-height: 1.5em;
    margin: 0 auto;
    padding: 0.5em 0 3em;
    width: 90%;
    /*max-width: 1000px;*/
    /*overflow: hidden;*/
}

    .component .filler {
        font-family: "Blokk", Arial, sans-serif;
        color: #d3d3d3;
    }

    .component table {
        border-collapse: collapse;
        margin-bottom: 3em;
        width: 100%;
        background: #fff;
    }

    .component td, .component th {
        /*padding: 0.75em 1.5em;*/
        padding: 0.25em 1.5em;
        text-align: left;
        font-size: 0.85em;
    }

        .component td.err {
            background-color: #e992b9;
            color: #fff;
            font-size: 0.75em;
            text-align: center;
            line-height: 1;
        }

    .component th {
        background-color: #c0392b;
        font-weight: bold;
        color: #fff;
        white-space: nowrap;
    }

    .component tbody th {
        background-color: #c0392b;
    }

    .component tbody tr:nth-child(2n) {
        background-color: #FFFFFF;
    }

    .component tbody tr:nth-child(2n-1) {
        background-color: #f5f5f5;
        transition: all .125s ease-in-out;
    }

    .component tbody tr:hover {
        background-color: #ECECEC;
    }