* {
    box-sizing: border-box;
}

body {
    font-size: 62.5%;
    font-family: "Textbook-light", Arial, Helvetica, sans-serif;
    width: 910px;
    height: 680px;
    position: absolute;
}

.header {
    font: 1.25em "Textbook-bold", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: .055em;
    padding-bottom: 4px;
}

.subheader {
    color: #555150;
    font-size: 1.35em;
    line-height: 1em;
    padding-bottom: 10px;
}

.header,
.subheader {
    width: 100%;
}

.caption {
    color: #555150;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    bottom: 0;
}

.container {
    position: absolute;
    width: 910px;
    height: 600px;
}

.land {
    fill: #e5e5e5;
}

.boundary {
    fill: none;
    stroke: #fff;
}

svg,
.clickarea {
    position: absolute;
}


/* ВЫБОР РЕГИОНА */

form {
    position: absolute;
    left: 1px;
    font-size: 1.1em;
}

form p {
    font: 1em "Textbook-bold", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 0 8px;
}


/* POPUP */

.popup {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 5px;
    font-size: 1.2em;
    pointer-events: none;
}


/* ВСПЛЫВАЮЩЕЕ ОКНО */

.info {
    position: absolute;
    right: 0;
    padding: 0 10px 5px 10px;
    margin: 0;
    max-width: 250px;
    color: #555150;
    background-color: rgba(255, 255, 255, 0.5);
}

.info .title {
    font: 1.35em "Textbook-bold", Arial, Helvetica, sans-serif;
    color: black;
    padding: 0 0 10px 0;
    margin: 0;
}

.info .weight {
    font-size: 1.1em;
    color: black;
    padding-top: 0;
    margin: 0;
}

.info .weight span {
    font-family: "Textbook-bold", Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: black;
    padding-top: 0;
    margin: 0;
}

.info .top_name {
    font: 1.2em "Textbook-bold", Arial, Helvetica, sans-serif;
    color: black;
    padding: 10px 0 5px 0;
    margin: 0;
}

.info .note {
    padding-bottom: 5px;
    margin: 0;
}

table {
    position: relative;
    left: 10px;
    font-size: 1.1em;
}


/* Названия */

.name {
    padding-left: 8px;
}


/* Бары */

.bar div {
    background-color: #71c529;
    height: 1em;
    position: relative;
    margin: 6px 0 6px 13px;
    float: right;
}


/* Значения */

.bar div .value {
    position: absolute;
    top: -1.1em;
}


/* КРУГИ */

.area {
    cursor: pointer;
}

.node.root,
.node.leaf--parent--0 {
    fill: #f9a261;
}

.node.leaf--0,
.node.leaf--parent--1 {
    fill: #f36b28;
}

.node.leaf--1 {
    fill: #ffba23;
}

.node.leaf--parent--0,
.node.leaf--parent--1 {
    pointer-events: none;
}


/* КНОПКИ ЗУМА */

.scale-buttons {
    position: absolute;
    left: 0;
    bottom: 0;
}

.scale-button {
    background-color: white;
    cursor: pointer;
    height: 28px;
    width: 26px;
    border: 1px solid #aaa;
    border-radius: 3px;
    margin-bottom: 3px;
}

.pic {
    width: 100%;
    height: 100%;
}

.plus .pic {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDx0aXRsZT5QbHVzPC90aXRsZT4KICAgIDxkZXNjcmlwdGlvbj5DcmVhdGVkIHdpdGggU2tldGNoIChodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gpPC9kZXNjcmlwdGlvbj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIGlkPSJTbWFsbCIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi4wMDAwMDAsIDYuMDAwMDAwKSIgZmlsbD0iIzY2NjY2NiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01LDkgTDAsOSBMMCw1IEw1LDUgTDUsLTcuMzQ3ODgwNzllLTE2IEw5LDAgTDksNSBMMTQsNSBMMTQsOSBMOSw5IEw5LDE0IEw1LDE0IEw1LDkgWiBNNSw5IiBpZD0iUmVjdGFuZ2xlLTk5LWNvcHktMyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
}

.minus .pic {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2cHgiIGhlaWdodD0iMjZweCIgdmlld0JveD0iMCAwIDI2IDI2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDx0aXRsZT5NaW51czwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZyBpZD0iU21hbGwiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMDAwMDAwLCAtMjcuMDAwMDAwKSIgZmlsbD0iIzY2NjY2NiI+CiAgICAgICAgICAgIDxyZWN0IGQ9Ik0wLDM4IEwwLDQyIEwxNCw0MiBMMTQsMzggTDAsMzggWiBNMCwzOCIgaWQ9IlJlY3RhbmdsZS05OS1jb3B5IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiB4PSIwIiB5PSIzOCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiPjwvcmVjdD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
}

.passive-button {
    opacity: .5;
}