.tb {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
    flex-grow: 1;
    min-height: 400px;
    
    position: relative;
}

.tb__content {
	height: 100%;
    overflow: auto;

    scrollbar-width: thin;
    /* не стилизуем цвет скроллбара и ползунка */
    /* чтобы не терять эффект ховера в блинк-браузерах */
}



/* table */
.tb__body {
	width: 100%;

    /* table-layout: fixed; нужен для того */
    /* чтобы можно было сделать через js ширину столбца уже, */
    /* чем это позволяет сделать таблица изначально */
    table-layout: fixed;

	border-spacing: 0;

	font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #000;
	white-space: nowrap;
}


/* tb-cell */
.tb-cell{
	position: relative;
	padding: 13px 20px;

	overflow-x: hidden;

	border-right: 1px solid #eff2f7;
	border-bottom: 1px solid #eff2f7;
}
.tb-cell::before{
	position: absolute;
	content: '';

	top: 0;
	right: 0;
	height: 100%;
	width: 8px;

	background: -webkit-gradient(linear, right top, left top, from(white), to(transparent));
	background: -o-linear-gradient(right, white, transparent 100%);
	background: linear-gradient(to left, white, transparent 100%);
}
.tb-cell--border-top{
	border-top: 1px solid #eff2f7;
}
.tb-cell--no-pl-pr{
	padding-left: 0;
	padding-right: 0;
}
.tb-cell--no-p{
	padding: 0;
}
.tb-cell--pl13-pr13{
	padding-left: 13px;
	padding-right: 13px;
}
.tb-cell--overflow-x-visible{
	overflow-x: visible;
}

.tb-cell__item--overflow-x-hidden{
	overflow-x: hidden;

}
.tb-cell__item--pl20-pr20{
	padding-left: 20px;
	padding-right: 20px;
}
.tb-cell__sorter-link{
	display: inline-block;

	text-decoration: none;

    font-weight: 500;
    color: #000000;
    
    cursor: pointer;
}
.tb-cell__sorter-link:hover{
    text-decoration: underline;
    -webkit-text-decoration-style: dashed;
            text-decoration-style: dashed;
    color: #C80000;
}


.tb__tr:hover .tb__td{
	background-color: #F6F8FB;
}
.tb__tr:hover .tb-cell::before{
	background: -webkit-gradient(linear, right top, left top, from(#F6F8FB), to(transparent));
	background: -o-linear-gradient(right, #F6F8FB, transparent 100%);
	background: linear-gradient(to left, #F6F8FB, transparent 100%);
}
.tb__tr:last-child{
	height: 50px;
}

.tb__tr-main:hover .pseudo-band{
	background-color: #475A8080;
}


.tb__th{
	position: -webkit-sticky;
	position: sticky;
	top: 0;

	z-index: 2;
	
	background-color: white;

	text-align: left;
	font-weight: 400;
	vertical-align: top;
}
.tb__th--w100per{
    width: 100%;
}
.tb__th:first-child{
	left: 0;
	z-index: 3;

	width: 40px;
}
.tb__th:nth-child(2){
	left: 40px;
	z-index: 3;
}




.tb__td{
	vertical-align: top;

	background-color: white;
}
.tb__td:first-child{
	position: -webkit-sticky;
    position: sticky;
    left: 0;

	z-index: 1;
}
.tb__td:nth-child(2){
	position: -webkit-sticky;
    position: sticky;
    left: 40px;

	z-index: 1;
}


.td__up{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.tb__empty{
	padding: 13px 20px;
}



/* shadow */
.shadow::after{
	position: absolute;
	content: "";

	top: 0;
	right: -6px;

	height: calc(100% + 1px);
	width: 5px;
	
}
.shadow--active::after{
	background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(transparent));
	background: -o-linear-gradient(left, rgba(0, 0, 0, 0.2), transparent 100%);
	background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 100%);
}














/* полоска для захвата мышкой */
.band{
	position: absolute;
	top: 0;
	right: 0;
	
	height: 100%;
	width: 6px;
	z-index: 5;
}
.band:hover{
	background: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(50%, #475A8080));
	background: -o-linear-gradient(left, transparent 50%, #475A8080 50%);
	background: linear-gradient(to right, transparent 50%, #475A8080 50%);
	cursor: col-resize;
}
.band--active{
	background: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(50%, #475A8080));
	background: -o-linear-gradient(left, transparent 50%, #475A8080 50%);
	background: linear-gradient(to right, transparent 50%, #475A8080 50%);
	cursor: col-resize;
}

/* псевдо-полоска, которая появлятся при :hover на tr */
.pseudo-band{
	position: absolute;
	top: 0;
	right: 0;
	
	height: 100%;
	width: 1px;
	z-index: 4;

	background-color: transparent;

	-webkit-transition: background-color .5s linear;
	-o-transition: background-color .5s linear;
	transition: background-color .5s linear;
}


.select-none{
	user-select: none;
}


/* pagination */
.tb__pagination {
	position: absolute;
    width: auto;
    bottom: 18px;
    left: auto;
    right: 18px;
    border-top: none;
    background-color: transparent;
    text-align: right;
    padding: 0;
    overflow-x: visible;
    white-space: nowrap;
}
.pagination__button--first{
	margin-right: 5px;
}
.pagination__button--last{
	margin-left: 0;
}