#map-belarus { margin-bottom: 45px; }
#map-belarus .placeholder-image { max-width: 800px; }
#map-europe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 0;
}
#map-europe .svg-wrapper { width: 100%; }
svg { box-sizing: content-box; }
.tile-map { 
    margin-top: 15px;
    position: relative;
    max-width: 900px;
    margin-bottom: 30px;
}
.layer-background {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}
.layer-canvas { 
    position: absolute;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.layer-top {
    position: absolute;
    z-index: 15;
}
.layer-top .hexagon, 
#map-europe .hexagon {
    cursor: help;
    fill: var(--carmine);
}
.hexagon path,
.beeswarm .country circle { transition: all .2s; }
.hexagon path {
    stroke-width: 1;
    stroke: var(--eggshell-light);
    stroke-opacity: 0;
    fill: var(--carmine);
    fill-opacity: 0;
    
}
.layer-background .hexagon.highlight path {
    stroke-opacity: 1;
    fill-opacity: 1;
}
#map-europe .hexagon path {
    fill: var(--eggshell);
    fill-opacity: 1;
    stroke-opacity: 1;
}
#map-europe .beeswarm .country { cursor: help; }
#map-europe .hexagon.highlight path,
#map-europe .beeswarm .country.highlight circle {
    fill: var(--yellow)!important;
}
.hexagon text {
    font-size: 10px;
    font-weight: 700;
    fill: var(--text);
    opacity: 1;
    stroke: var(--eggshell-light);
    paint-order: stroke;
	stroke-width: 4px;
	stroke-opacity: .6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hexagon.highlight text { 
    fill: var(--eggshell-light);
    stroke-width: 0;
    opacity: 1!important;
}
#map-europe .hexagon text {
    opacity: 1;
    fill: var(--text);
    stroke: none;
}
#map-europe .hexagon.highlight text,
#map-europe .beeswarm .country.highlight text {
    fill: var(--eggshell-light);
}

text.label-code {
    font-size: 9px;
    fill: var(--text);
    text-anchor: middle;
}
.hexagon text.invert {
    fill: var(--eggshell-light);
    stroke: var(--eggshell-text);
    stroke-opacity: .6;
}
#map-europe .hexagon text.invert,
text.label-code.invert { fill: var(--eggshell-light); }

.annotations { opacity: .6; }
.refline { pointer-events: none; }
.refline line {
    fill: none;
    stroke: var(--eggshell-text);
    shape-rendering: crispEdges;
    /* opacity: 1; */
}
.refline line.outline {
    stroke: var(--eggshell-light);
    stroke-width: 3;
    shape-rendering: crispEdges;
}
.annotations text {
    font-size: 12px;
    fill: var(--text);
    font-style: italic;
    stroke: var(--eggshell-light);
    paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.annotations text.outliers {
    font-size: 10px;
    font-style: normal;
    cursor: help;
}
#map-europe .beeswarm text.outliers tspan.highlight {
    font-weight: 900;
    fill: var(--carmine-wet);
}

.beeswarm .axis.x .domain { display: none; }
.beeswarm .axis.x .tick line {
    stroke: var(--eggshell-muddy);
    shape-rendering: crispEdges;
}
.beeswarm .axis.x .tick text {
    text-anchor: start;
    fill: var(--eggshell-dark-muddy);
    font-style: italic;
}

.overlay polygon {
    stroke: none;
    fill: var(--eggshell-light);
    fill-opacity: 0;
    cursor: help;
}

#details form { 
    display: inline-block;
    margin-bottom: 20px; 
    cursor: pointer;
}
#details form *:hover {
    color: var(--eggshell-text);
}
#details form label { padding-left: 7px; }

#tooltip {
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	pointer-events: none; 
	background: #fff;
	color: var(--eggshell-text);
	position: absolute;
	padding: 15px 15px 8px;
    opacity: 0;
	z-index: 1000;
	width: 100%;
	max-width: 200px;
    border: var(--eggshell-dark-muddy) 1px solid;
    border-radius: 5px;
}
#tooltip.visible { opacity: 1; }
#tt-header {
    background-color: #F4F4F2;
    border-bottom: var(--eggshell-dark-muddy) 1px solid;
    border-radius: 5px 5px 0 0;
    padding: 12px 15px 7px;
    margin: -15px -15px 5px;
}
#tt-header .note { margin-top: 5px; margin-left: -3px; }
#tooltip .tt-name {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #59513E;
    margin-bottom: 2px;
}
#tooltip .tt-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 1px;
}
#tooltip .tt-row-value {
    font-weight: bold;
}

.step { margin-top: 45px; }

#options li.option {
    list-style-type: "\2192";
    padding-left: 7px;
    cursor: pointer;
}
#options li.option::marker { color: var(--eggshell-text); }
#options li.option:hover strong,
#options li.option:hover::marker { color: var(--carmine); }

#options li.option.active {
    list-style-type: "\2192";
    color: var(--text);
    pointer-events: none;
    opacity: 1;
}
#options li.option.active strong { 
    color: var(--eggshell-light); 
    background-color: var(--carmine);
    display: inline-block;
    padding: 0 7px;
    border-radius: 3px;
}
#options li.option.active::marker { color: var(--carmine); }

#credits {
    margin-top: 45px;
    border-top: 1px solid var(--eggshell-muddy);
    padding-top: 25px;
}
#credits p {
    font-size: 14px;
    font-style: italic;
    color: var(--eggshell-text);
    margin-bottom: 6px;
}

.legend path {
    fill: var(--eggshell-dark-muddy);
}
.legend circle {
    fill: none;
    stroke: var(--eggshell-dark-muddy);
}
.legend .label {
    font-size: 12px;
    font-style: italic;
    fill: var(--eggshell-dark-muddy);
}
.legend .refline {
    fill: none;
    stroke: var(--eggshell-muddy);
    stroke-dasharray: 3 2;
    shape-rendering: crispEdges;
}
.floating-label {
    font-size: 13px;
    font-style: italic;
    fill: var(--text);
    stroke: var(--eggshell-light);
	paint-order: stroke;
	stroke-width: 5px;
	stroke-opacity: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#trylinka-photo {
    max-width: 360px;
}

@media (max-width: 960px) {
    /* .tile-map { margin-top: 0; } */
    /* #cartogram { margin: 0; } */
    /* #details { top: 20px; } */
}
@media (max-width: 860px) {
    /* #details {
        position: inherit;
        display: flex;
        gap: 75px;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: -20px;
    } */
    #map-belarus { margin-bottom: 30px; }
    .row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
    }
    .row .row-primary { max-width: unset; }
    /* #map-alternatives { align-self: center; } */
}
@media (max-width: 660px) {
    /* #details { margin-bottom: -20px; } */
    .tile-map .legend .label { font-size: 18px; }
    .process svg { margin-top: -15px; }
}
@media (max-width: 660px) {
    .row .row-secondary { max-width: 440px; }
}
@media (max-width: 520px) { 
    /* #details { margin-bottom: -10px; }  */
    
    .process svg { margin-top: -25px; }
}