* {
    box-sizing: border-box;
}
body {
    font-size: 12.5px;
    font-family: "TextbookNew-Light", arial, helvetica, sans-serif;
    width: 625px;
    color: #5a5957;
}

#select-city {
    font-size: 16px;
}




#content col {
    width: 25%;
}
td {
    vertical-align: bottom;
    padding: 7px 15px;
    line-height: 1.2em;
    cursor: default;
}
.with-tooltip:hover {
    color: #5ab3d8;
}
.with-tooltip.district:hover {
    color: #b88dc1;
}
td.separated {
    border-left: 1px solid #ddd;
}
.horizontal td {
    padding-top: 10px;
    padding-bottom: 5px;
}
.horizontal td:nth-child(3) {
    vertical-align: top;
}
tr.long {
    height: 80px;
}
.long td {
    padding-top: 0;
    padding-bottom: 5px;
}
/*ALL FIGURES*/
.bar, div.time, .vert-bar-wrapper .bar span, .vert-bar-wrapper > div {
    font-size: 11px;
    font-family: "TextbookNew-Bold";
    color: black;
}




.legend {
    display: inline-block;
    vertical-align: bottom;
    padding-left: 30px;
}
.legend span.label {
    margin: 0 14px 0 4px;
}
.section-header {
    font-family: "TextbookNew-Light";
    text-transform: uppercase;
    padding-top: 45px;
    padding-bottom: 0px;
    letter-spacing: .04em;
}
.comment {
    padding: 0 15px;
    height: 15px;
}
td.highlight {
    padding-left: 65px;
    padding-top: 17px;
    vertical-align: top;
    font-size: 16px;
    font-family: "TextbookNew-Light";
    color: #5ab3d8;
}
td.highlight.district {
    color: #b88dc1;
}




.bar {
    height: 15px;
    width: 15px;
    text-align: right;
    color: white;
    padding-right: 3px;
    display: inline-block;
}
.bar.all {
    background: #ededec;
    margin-left: -3px;
}
.bar.city {
    background: #5ab3d8;
}
.bar.horizontal.district {
    background: #b88dc1;
}
.bar.russia {
    background: #ffb817;
}
.bar.horizontal {
    transition: width .5s;
}




.vert-bar-wrapper {
    width: 118px;
    margin: auto;
    padding-left: 31px;
    border-bottom: 2px solid black;
}
.vert-bar-wrapper > div {
    width: 23px;
    text-align: center;
}
.vert-bar-wrapper .bar {
    vertical-align: bottom;
    text-align: center;
    padding: 0;
    transition: height .5s;
}
.vert-bar-wrapper div {
    display: inline-block;
}
.vert-bar-wrapper .bar span {
    position: relative;
    top: -14px;
    left: -1px;
}
.vert-bar-wrapper > div:first-child {
    margin-right: 5px;
}
.label {
    padding-bottom: 1px;
}




.pies-wrapper {
    width: 67px;
    margin: auto;
}
.pies-wrapper > div {
    width: 30px;
    display: inline-block;
}
.pies-wrapper > div:first-child {
    margin-right: 2px;
}
.pie {
    display: inline-block;
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ededec;
    background-image: linear-gradient(to right, transparent 50%, #ffb817 0);
}
div:first-child > .pie {
    background-image: linear-gradient(to right, transparent 50%, #5ab3d8 0);
}
.pie:before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0% / 50%;
    background-color: inherit;
    transform-origin: left;
    transition: transform .5s;
}
.pie.m0:before {
    transform: rotate(0turn);
}
.pie.m1:before {
   transform: rotate(.08turn);
}
.pie.m2:before {
    transform: rotate(.17turn);
}
.pie.m3:before {
    transform: rotate(.25turn);
}
.pie.m4:before {
    transform: rotate(.33turn);
}
.pie.m5:before {
    transform: rotate(.42turn);
}
.pie.m6:before {
    transform: rotate(.5turn);
}

div.time {
    width: 30px;
    text-align: center;
    padding-bottom: 2px;
}




.subtable-header td {
    text-align: center;
    padding-top: 10px;
}
tr.lists td {
    vertical-align: top;
}
.lists td div {
    padding-top: 8px;
}
ol {
    padding-left: 12px;
    margin: 0;
}
span.local-popular {
    font-family: "TextbookNew-Bold";
}
span.highlight {
    font-family: "TextbookNew-Bold";
    color: #5ab3d8;
}




#caption {
    font-family: "TextbookNew-Light";
    text-transform: uppercase;
    color: #555150;
    margin-top: 20px;
    letter-spacing: .04em;
    font-size: 1em;
}