﻿
.tbc-cont{
    min-width: 360px;
    max-width: 830px;
}

.tbc-body{
    display: table;
    border-collapse: collapse;
    font-family: Arial, Helvetica;
    font-size: 11px;
    font-weight: 100;
    color: #666;
    height: 100%;
    width: 100%;
}

.tbc-left{
    margin-bottom: 20px
}

.tbc-header,
.tbc-row{
    display: table-row;
    height: 100%;
    border-bottom: 1px solid #2e5fb8;
}

.tbc-row {
    line-height: 16px;
}

.tbc-cell{
    display: table-cell;
    position: relative;
    vertical-align: top;
    padding: 8px 5px;
    word-break: break-word;
    word-wrap: break-word;
    /*border-left: 1px dotted red;*/
}

/* Header */

.tbc-header{
    font-size: 12px;
    line-height: 12px;
    color: #2e5fb8;
    /*height: 150px;*/
}

.tbc-header .tbc-cell{
    height: 140px;
}

.tbc-header .tbc-cell span{
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    display: block;
    position: relative;
    bottom: -125px;
    white-space: nowrap;
    width: 20px;
}

/* body */
.tbc-row .tbc-cell:nth-child(1){
    color: #cb5e23;
    text-align: left;
}

.tbc-row:last-child .tbc-cell:first-child{
    color: #2e5fb8;
} 

.tbc-row .tbc-cell:nth-child(3){
    text-align: center;
}

.tbc-left .tbc-row .tbc-cell:nth-child(1n+5),
.tbc-right .tbc-row .tbc-cell:nth-child(1n+2){
    /*text-align: right;*/
    min-width: 30px;
}

@media screen and (min-width: 480px) {
    .tbc-body {
        font-size: 12px;
    }

    .tbc-left .tbc-row .tbc-cell:nth-child(3) {
        font-size: 11px;
    }
}

/*@media screen and (min-width: 700px) {*/
@media screen and (max-width: 800px) and (min-width: 600px),(min-width: 924px) {
    .tbc-left {
        float: left;
        width: 60%;
    }

    .tbc-right {
        float: left;
        width: 40%;
    }
    .tbc-right .tbc-cell:nth-child(1){ display: none; }
}

/* Left */
.tbc-left .tbc-cell:nth-child(1)    { width: 23%; }
.tbc-left .tbc-cell:nth-child(2)    { width: 19%; }
.tbc-left .tbc-cell:nth-child(3)    { width: 19%; }
.tbc-left .tbc-cell:nth-child(4)    { width: 19%; }
.tbc-left .tbc-cell:nth-child(1n+5) { width: 10%; }

/* RIght */
.tbc-right .tbc-cell:nth-child(1)   { width: 23%; }
.tbc-right .tbc-cell:nth-child(1n+2){ width: 11%; }

@media screen and (min-width: 480px){
    .tbc-left .tbc-cell:nth-child(1)   { width:  23%;}
    .tbc-left .tbc-cell:nth-child(2)   { width:  23%; }
    .tbc-left .tbc-cell:nth-child(3)   { width:  21%; }
    .tbc-left .tbc-cell:nth-child(4)   { width:  16%; }
    .tbc-left .tbc-cell:nth-child(1n+5){ width:  11%; }
}

@media screen and (min-width: 600px){
    .tbc-left .tbc-cell:nth-child(1)   { width:  23%;}
    .tbc-left .tbc-cell:nth-child(2)   { width:  23%; }
    .tbc-left .tbc-cell:nth-child(3)   { width:  21%; }
    .tbc-left .tbc-cell:nth-child(4)   { width:  16%; }
    .tbc-left .tbc-cell:nth-child(1n+5){ width:  11%; }
}

@media screen and (min-width: 700px){
    /* Left */
    .tbc-left .tbc-cell:nth-child(1)   { width:  26.8%; }
    .tbc-left .tbc-cell:nth-child(2)   { width:  22%; }
    .tbc-left .tbc-cell:nth-child(3)   { width:  20%; }
    .tbc-left .tbc-cell:nth-child(4)   { width:  22%; }
    .tbc-left .tbc-cell:nth-child(1n+5){ width:  9.2%; }

    /* Right */
    /*.tbc-right .tbc-cell:nth-child(1n+2){ width: 14.2857143%; }*/
    .tbc-right .tbc-cell:nth-child(1n+2){ width: 5.714285714285714%; }
}