.crumbs-wrap { background: #F4F4F4;}
.contents { background: #F4F4F4; }

.tov { font: 0/0 a; margin: 0 0 80px 0; white-space: nowrap; }
.tov__left { width: 25%; display: inline-block; vertical-align: top; padding: 0 20px 0 0; white-space: normal; }
.tov__right { width: 75%; display: inline-block; vertical-align: top; position: sticky; top: 0; transition: opacity 400ms; white-space: normal; }
.tov__right--fade { opacity: .4; }


/* header */

.tov__header { background: #fff; margin: 0 0 21px 0; padding: 21px 20px; position: relative; }
.tov__h1 { font: 900 25px/25px "open sans"; padding: 0 240px 0 0; }
.tov__h1:after { content: attr(data-count); font: 700 17px/17px "open sans"; color: #ff0000; position: absolute; margin: -1px 0 0 5px; }


.tov__sort-wrap { margin: 8px 0 0 0 }
.tov__sort-option { font: 400 18px/17px "open sans"; color: #0F9859; cursor: pointer; margin: 0 30px 0 0 }
.tov__sort-option-name { display: inline-block; border-bottom: 1px solid;  }
.tov__sort-option:hover { color: #ff0000; }
.tov__sort-option--active { color: #ff0000 }
.tov__sort-option--active:after { content: "↓"; position: absolute; margin: 2px 0 0 3px; }
.tov__sort-option--active.tov__sort-option--asc:after { content: "↑"; position: absolute; margin: 2px 0 0 3px; }
.tov__sort-option--free:after { visibility: hidden; }


.tov__add { position: absolute; transition: background-color 200ms; right: 15px; top: 22px; background: #3bc206; padding: 0 8px; color: #fff; border: 0; cursor: pointer; border-radius: 2px; font: 600 15px/30px "open sans"; height: 30px; letter-spacing: -0.02em; }
.tov__add:hover { background-color: #36AB06 }

/* empty */
.tov__empty { margin: 30px 0 0 20px; }
.tov__empty-title { font: 600 18px/24px "open sans"; margin: 0 0 12px 0; }
.tov__empty-hint { font: 400 15px/24px "open sans" }

/* pager */
.tov__pager { margin: 50px 0 0 0; }