/* Каркас интерактивной SVG-карты: карта 77%, дерево рек 23%. */
.layer0{display:flex;justify-content:space-around;width:100%;height:95%;position:relative;top:0;background:#fff;border:1px solid var(--border);}
.layer1{flex:0 0 77%;width:77%;min-width:0;padding:10px;}
.r-panel{flex:0 0 23%;width:23%;min-width:0;}

/* Ранняя сетка не дает SVG растянуться до полной ширины до инициализации панели. */
@supports selector(.layer0:has(> .r-panel)){
	.content-map:not(.content-map--no-panel) .layer0:not(:has(> .r-panel))::after{
		content:"";
		flex:0 0 23%;
		width:23%;
		min-width:0;
	}
}

/* Кнопки управления картой и полноэкранный режим. */
.custom-controls{position:absolute;top:10px;left:10px;z-index:50;display:flex;flex-direction:column;gap:4px;padding:0 10px 10px 0;background:#fff;}
.map-btn{width:26px;height:26px;border:1px solid var(--border);box-shadow:1px 1px 0 rgba(0,0,0,.2);cursor:pointer;user-select:none;}
.map-btn:hover{background:#f5f5f5;}
.open{content:url("images/open.svg");}
.close{display:none;content:url("images/close.svg");}
.plus{margin-top:5px;content:url("images/plus.svg");}
.minus{content:url("images/minus.svg");}
.home{content:url("images/home.svg");}
:fullscreen{padding:20px;background:#fff;}
:fullscreen .open{display:none;}
:fullscreen .close{display:block;}
:fullscreen .der{width:20%;height:99%;}
:fullscreen .layer0{padding:10px 5px;border:1px solid var(--border);background:#fff;}
:-webkit-full-screen{padding:20px;background:#fff;}
:-moz-full-screen{padding:20px;background:#fff;}
:-ms-fullscreen{padding:20px;background:#fff;}

/* Заливки и границы слоев из подключаемых SVG-файлов. */
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9,.b10{stroke:#8c2222;stroke-width:7;}
.b1{fill:#d0ffff;}
.b2{fill:#b0ffd8;}
.b3{fill:#edffd0;}
.b4{fill:#fff4d0;}
.b5{fill:#ffdcd0;}
.b6{fill:#b0e5ff;}
.b7{fill:#d0e0ff;}
.b8{fill:#ecdaff;}
.b9{fill:#e6d2d2;}
.b10{fill:#f0f0f0;}
.grb-1,.grb-2,.grb-3{fill:none;}
.grb-1{stroke:#373737;stroke-width:9;}
.grb-2{stroke:#902525;stroke-width:7;}
.grb-3{stroke:#007b29;stroke-width:5;}
.voda{fill:#79c2f1;stroke:#79c2f1;stroke-width:1;}
.voda1{fill:#a7def6;stroke:#a7def6;stroke-width:0.5;}
.n1{font-size:170px;fill:#8c2222;}
.n2{font-size:150px;fill:#007b29;}

.grt{stroke:#959595;stroke-width:5;}
.ss1{fill:#f2fff2;}
.ss2{fill:#d0ffd0;}
.ss3{fill:#c0f0c0;}
.ss4{fill:#b0e0b0;}
.ss5{fill:#a0e0a0;}
.ss6{fill:#90d090;}
.ss7{fill:#80c080;}
.ss8{fill:#70b070;}
.ss9{fill:#60a060;}
.ss10{fill:#509050;}
.ss11{fill:#409040;}
.ss12{fill:#308030;}
.ss13{fill:#207020;}
.ss14{fill:#106010;}
.ss15{fill:#005000;}
.ss16{fill:#003c00;}

.vs1{fill:#f0ffff;}
.vs2{fill:#c0f0ff;}
.vs3{fill:#b0e1ff;}
.vs4{fill:#a0d0ff;}
.vs5{fill:#90c0ff;}
.vs6{fill:#70b0ff;}
.vs7{fill:#60a0ff;}
.vs8{fill:#4080ff;}
.vs9{fill:#4060f0;}
.vs10{fill:#3050f0;}
.vs11{fill:#2041e0;}
.vs12{fill:#2030e0;}
.vs13{fill:#1020e0;}
.vs14{fill:#08089a;}

.ns1{fill:#fafafa;}
.ns2{fill:#edffd0;}
.ns3{fill:#e0f0c0;}
.ns4{fill:#d0e0b0;}
.ns5{fill:#c0d0a0;}
.ns6{fill:#b0c090;}
.ns7{fill:#a0c070;}
.ns8{fill:#90b060;}
.ns9{fill:#80a050;}
.ns10{fill:#709040;}
.ns11{fill:#608030;}
.ns12{fill:#507020;}
.ns13{fill:#3a6000;}

.m1{fill:#e0e0b0;}
.m2{fill:#d0d080;}
.m3{fill:#c0c070;}
.m4{fill:#b0b060;}
.m5{fill:#a0a041;}
.m6{fill:#90902b;}

.dnepr{fill:#008CEB;stroke:#008CEB;stroke-width:0.5;}
.dnepr-1{fill:#a7def6;stroke:#68bde9;stroke-width:0.5;}
.lake{fill:#008CEB;stroke:#008CEB;stroke-width:1;}
.estuary{fill:#008CEB;stroke:#008CEB;stroke-width:1;}
.sea{fill:#008CEB;stroke:#008CEB;stroke-width:1;}
.dnepr,.dnepr-1,.lake,.estuary,.sea{cursor:pointer;z-index:100;}

.gr0,.gr-b2,.gr-b3{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.gr0{stroke:#373737;stroke-width:3;}
.gr-b2{stroke:#804040;stroke-width:2;}
.gr-b3{stroke:#007b29;stroke-width:1;}


.obl{stroke:#000;stroke-width:8;}
.city{fill:#7d4141;stroke:#7d4141;stroke-width:2;}

/* Дерево речной сети. Состояние строк и веток задает river-tree-map.js. */
.der{flex:0 0 23%;width:23%;min-width:0;height:610px;overflow:hidden;border-left:1px solid var(--border);display:flex;flex-direction:column;}
.river-tree__filter{position:relative;z-index:2;flex:0 0 auto;padding:5px;background:#fff;border-bottom:1px solid var(--border);}
.river-tree__filter-input{display:block;width:100%;margin:0;padding:5px 26px 5px 7px;border:1px solid var(--border);border-radius:3px;font:14px Arial,"Arial Unicode MS",Helvetica,sans-serif;}
.river-tree__filter-input::-webkit-search-cancel-button{display:none;-webkit-appearance:none;}
.river-tree__filter-input::-ms-clear{display:none;width:0;height:0;}
.river-tree__filter-clear{position:absolute;top:8px;right:8px;width:20px;height:20px;padding:0;border:0;background:transparent;color:#52705d;font:20px/18px Arial,sans-serif;cursor:pointer;}
.river-tree__filter-clear:hover,.river-tree__filter-clear:focus{color:#0b3f2b;outline:none;}
.river-tree__body{flex:1 1 auto;min-height:0;overflow:auto;}
.der .river-tree__list{margin:0;padding:0;list-style:none;}
.der .river-tree__list--nested{margin-left:14px;padding-left:8px;border-left:1px solid #d9e5dc;}
.der .river-tree__item{margin:0;padding:0;list-style:none;font-size:inherit;}
.der .river-tree__item::before{content:none;}
.river-tree__row{display:flex;align-items:flex-start;min-width:0;padding:2px 3px 2px 5px;color:#000;font-size:14px;line-height:1.3;}
.river-tree__toggle,.river-tree__spacer{flex:0 0 16px;width:16px;height:16px;margin:1px 2px 0 0;}
.river-tree__toggle{padding:0;border:0;background:transparent url('images/4.png') center no-repeat;cursor:pointer;}
.river-tree__item.is-expanded>.river-tree__row .river-tree__toggle{background-image:url('images/5.png');}
.river-tree__label{min-width:0;padding:0;border:0;background:transparent;color:#000;text-align:left;font:inherit;cursor:pointer;}
.river-tree__label .no{display:none;}
.river-tree__item.is-selected>.river-tree__row{background:#f7f5f0;}
.river-tree__item.is-selected>.river-tree__row .river-tree__label{color:#000;}
.river-tree__label:hover,.river-tree__label:focus{color:#0b3f2b;outline:none;}
/* Просто река */
.river_n{fill:none;stroke:#008CEB;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.river_a{fill:none;stroke:#D20000;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;cursor:pointer;}
/* Главная река */
.river-g_n{fill:none;stroke:#0374c1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.river-g_a{fill:none;stroke:#D20000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;cursor:pointer;}
/* Полигон */
.river-p_n{fill:#008CEB;stroke:#008CEB;stroke-width:1.5;}
.river-p_a{fill:#D20000;stroke:#D20000;stroke-width:1.5;cursor:pointer;}

@media (max-width:760px){
	.open,.close{display:none !important;}
	.layer0{display:flex;flex-direction:column;height:auto;min-height:0;border-left:0;border-right:0;box-sizing:border-box;}
	.layer1{order:1;flex:none;width:100%;min-width:0;padding:5px;box-sizing:border-box;}
	.r-panel{flex:none;width:100%;}
	.content-map .layer0::after{display:none;}
	.layer1:not(.no-mob){position:relative;aspect-ratio:3/2;}
	.layer1:not(.no-mob)>svg{display:block;width:100%;height:100%;}
	.der{order:2;flex:none;width:100%;height:auto;max-height:none;padding:0;border-left:0;border-top:1px solid var(--border);box-sizing:border-box;}
	.river-tree__body{max-height:none;overflow:visible;}
}