@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,400italic,700|Roboto:400,400italic,700&subset=latin,cyrillic);

.chart-tooltip { 
	font-family: "Roboto Condensed", "Roboto", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	pointer-events: none; 
}
.chart-transparent { opacity: 0; }
.dou-charts-mobile { display: none; }

.dou-chart .name-label {
	font-family: "Roboto", sans;
    fill: #0d0d0d;
    line-height: 18px;
}
.dou-chart .value-label {
	font-family: "Roboto Condensed", "Roboto", sans;
	width: 25px;
    text-align: right;
	margin-right: 5px;
}
.dou-table .uncut {
	display: inline-block;
	text-decoration: none;
    border-bottom: 1px dashed #1876ac;
    color: #1876ac;
    cursor: pointer;
    margin-top: -5px;
}
.dou-table .uncut:hover {
	color: #f93703;
	border-bottom-color: #f93703;
}

.dou-table .neutral { color: #b3b3b3; }
.dou-table .positive { color: #06b9b1; }
.dou-table .negative { color: #eb4247; }
.dou-table table {
	width: 100%;
	min-width: 640px;
	font-family: 'Roboto';
	font-size: 14px;
	color: black;
	border-spacing: 0;
    border-collapse: separate;
    margin-left: 0;
    margin-right: 0;
}
.dou-table table th {
	font-size: 12px;
	line-height: 12px;
	font-weight: normal;
	color: #4d4d4d;
	text-align: left;
	padding: 8px 6px 6px;
	border-bottom: 1px solid black;
	vertical-align: bottom;
	position: sticky;
	top: 0px;
	background: white;
	z-index: 100;
	word-break: keep-all;
}

.dou-table table th.number div {
	text-align: right;
	width: 25px;
	cursor: help;
}
.dou-table#table-lowest th.number div,
.dou-table#table-fastest th.number div,
.dou-table#table-falling th.number div { width: unset; }

.dou-table table .align-right { text-align: right; }
.dou-table table .width100 { max-width:100px; }
.dou-table table .table-total td {
	font-weight: bold;
	border-top: 1px solid black;
}

.dou-table table td {
	padding: 5px 6px 8px;
	vertical-align: top;
}
.dou-table table td a {
	color: #189891;
	text-decoration: none;
}
.dou-table table td a:hover { color: #eb4247; }
.dou-table table tbody td { border-bottom: #fff 1px solid; }
.dou-table table tbody tr:nth-child(even) { background: #fff; }
.dou-table table tbody tr:nth-child(odd) { background: #f8f8f8; }

.dou-table table .table-total:hover { background: none; }

.dou-table table td.nowrap {
	width:1%;
    white-space:nowrap;
}



.dou-table table .selected { font-weight: bold; }
.dou-table table tbody tr .selected { background: #fafafa; }
.dou-table table tbody tr:nth-child(odd) .selected { background: #f2f2f2; }

/* .dou-table table tbody tr:hover { background: #e7f8f8; } */
.dou-table table tbody tr:hover { background: #f0f0f0; }
.dou-table table tbody tr:hover .selected { background: #ececec; }

.dou-table table div.rank { display: flex; justify-content: flex-end; }
.dou-table table .rank span { display: inline-block; }
.dou-table table .rank .value-label {
	text-align: right;
	width: 25px;
	margin-right: 2px;
}
#table-lowest table .rank .value-label { text-align: left; }
#table-falling.dou-table table .rank .value-label { width: 35px; }
.dou-table table .rank .symbol {
	width: 20px;
	text-align: center;
	font-size: 12px;
	/*margin-left: 2px;*/
	margin-top: 1px;
	cursor: help;
}

.dou-table table div.rate { 
	display: flex; 
}
.dou-table table .rate span { display: inline-block; }
.dou-table table .rate-num {
	text-align: right;
	width: 30px;
	margin-right: 3px;
}
#table-falling.dou-table table .rate-num { width: 35px; }
.dou-table table .rate-symb {
	width: 20px;
	text-align: center;
	font-size: 12px;
	margin-left: 2px;
}

.dou-table .row-chart { display: flex; }
.dou-table .value-label {
	text-align: right;
	width: 35px;
	margin-right: 3px;
}

.dou-table .domen {
	height: 12px;
	background-color: rgba(0,0,0,.1);
	position: relative;
	margin-top: 3px;
}
.dou-table .AvgScore .strip {
	width: 2px;
	height: 12px;
	background-color: #06b9b1;
	position: absolute;
} 
.dou-table .school { width: 100%; }
.dou-table .school .school-region {
	font-size: 12px;
	font-style: italic;
	color: #999;
}
.dou-table .students .value-label { width: 20px; }
.dou-table#table-falling .value-label { width: 28px; }
.dou-table#table-lowest .PassRate .value-label { width: 40px; }
.dou-table .bar {
	margin-top: 3px;
	height: 12px;
	background-color: #06b9b1;
}
.dou-table .domen .bar { margin-top: 0; }

.chart-controls { 
	display: flex;
	flex-wrap: wrap;
	gap: 5px 7px;
	margin: 5px 0 10px;
}
.chart-controls div {
	/* margin-right: 8px; */
    line-height: 14px;
}
.chart-filter-button span {
    display: inline-block;
    height: 14px;
    color: #777;
    border-bottom: 5px #ccc solid;
    cursor: pointer;
}
.chart-filter-button:hover span {
	color: #eb4247;
    border-bottom-color: #f9c7c8;
}
.chart-filter-button.active { pointer-events: none; }
.chart-filter-button.active span {
    color: #06b9b1;
    border-bottom-color: #b5eae8;
}

#schools-regions .region path:hover,
#schools-regions-it .region path:hover
{ fill: #e8be34 !important; }
#schools-regions .region path.disabled, #schools-regions-it .region path.disabled { pointer-events: none; }

#schools-regions .label, #schools-regions-it .label { pointer-events: none; }
#schools-regions .label text, #schools-regions-it .label text {
	stroke: white;
	paint-order: stroke;
	stroke-width: 2px;
	stroke-opacity: .8;
	stroke-linecap: round;
	stroke-linejoin: round;
	text-anchor: middle;
	/*opacity: .8;*/
	fill: #333;
}
#schools-regions .label text.name, #schools-regions-it .label text.name { font-size: 12px; font-style: italic; }
#schools-regions .label text.value, #schools-regions-it .label text.value { font-size: 14px; font-weight: bold; }

#schools-kyiv { 
	display: flex;
	gap: 20px;
}
#schools-kyiv .svg-wrapper {
	width: 100%;
	max-width: 600px;
}
#schools-kyiv #dnipro path {
	/*fill: #eee;*/
	/*fill: #af957d;*/
	/*fill: #4982c5;*/
	fill: #fff;
	/*fill: #c5f0ff;*/
	stroke: none;
	pointer-events: none;
}
#schools-kyiv #areas path {
	stroke: #fff;
	/*stroke: #1d7872;*/
	stroke-width: 2;
	fill: #ddd;
	cursor: help;
	transition: fill .5s;
}
#schools-kyiv #areas path:hover { fill: #e8be34 !important; }
#schools-kyiv svg .label text { text-anchor: middle; pointer-events: none; }
/*#schools-kyiv svg .label text.name { font-size: 24px; }*/
#schools-kyiv svg .label text.value { font-size: 36px; font-weight: bold; fill: #333; }
#schools-kyiv-list {
	width: 100%;
	max-width: 420px;
	margin-top: 30px;
}
#schools-kyiv-list .school {
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 10px;
	display: flex;
}
/* #schools-kyiv-list p span {} */
#schools-kyiv-list .school span.rank {
	min-width: 20px;
	margin-right: 8px;
	text-align: right;
	/*font-style: italic;*/
	font-weight: bold;
	color: #333;
}

#chart-schools_not-kyiv {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
#chart-schools_not-kyiv .svg-wrapper {
	width: 100%;
	aspect-ratio: 430 / 290;
	position: sticky;
	top: 0px;
	margin-bottom: 10px;
	background: #fff;
}
/* #chart-schools_not-kyiv .schools-map {} */
#chart-schools_not-kyiv .schools-map .regions .region {
	fill: #f2f2f2;
	stroke: #d0d0d0;
}
#chart-schools_not-kyiv .schools-map .school {
	cursor: help;
}
#chart-schools_not-kyiv .schools-map .label-area {
	fill-opacity: 0;
}
#chart-schools_not-kyiv .schools-map .label-mark {
	fill: #06b9b1;
	stroke: #f2f2f2;
	pointer-events: none;
}
#chart-schools_not-kyiv .schools-map .highlighted .label-mark {
	fill: #e8be34;
}
#chart-schools_not-kyiv .schools-map .school-label { pointer-events: none; }
#chart-schools_not-kyiv .schools-map .school-label circle {
	fill: #e8be34;
}
#chart-schools_not-kyiv .schools-list {
	width: 100%;
	max-width: 420px;
	margin-bottom: 20px;
}
#chart-schools_not-kyiv .schools-list .school {
	display: flex;
	gap: 8px;
	font-size: 16px;
	line-height: 20px;
	padding: 6px 8px 8px;
	cursor: help;
}
#chart-schools_not-kyiv .schools-list .school * {
	pointer-events: none;
}
#chart-schools_not-kyiv .school.highlighted {
	background-color: #f2f2f2;
}
#chart-schools_not-kyiv .school-rank {
	min-width: 20px;
	font-weight: bold;
	text-align: right;
}
#chart-schools_not-kyiv .school-address {
    font-size: 12px;
    line-height: 16px;
    font-style: italic;
    color: #999;
}

#table-tooltip {
	font-family: "Roboto Condensed", "Roboto", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	pointer-events: none; 
	background: black;
	color: white;
	position: absolute;
	padding: 6px 15px 8px 10px;
	display: none;
	z-index: 1000;
	max-width: 110px;
}
#table-tooltip::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	margin-left: -12px;
	border-width: 6px;
	border-style: solid;
	border-color: transparent #000 transparent transparent;
}
#table-tooltip.noarrow::after {
	display: none;
}
#table-tooltip span {
	display: inline-block;
	font-size: 12px;
	line-height: 14px!important;
	font-style: italic;
	color: #c3c3c3;
}

#map-tooltip {
	font-family: "Roboto Condensed", "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 18px;
	pointer-events: none; 
	background: black;
	color: white;
	position: absolute;
	padding: 6px 15px 8px 10px;
	display: none;
	z-index: 1000; 
}
#map-tooltip .tt-title { margin-bottom: 5px; }
#map-tooltip .tt-chart { margin-bottom: 5px; }
#map-tooltip .tt-chart .row {
	display: flex;
	font-size: 12px;
	line-height: 14px;
}
#map-tooltip .tt-chart .row-name {
	margin-right: 5px;
}
#map-tooltip .tt-chart .row-value {
	width: 15px;
	text-align: right;
	margin-right: 5px;
}
#map-tooltip .tt-chart .row-bar {
	position: relative;
	width: 100px;
	height: 10px;
	margin-top: 3px;
}
#map-tooltip .tt-chart .row-progress {
	position: absolute;
	height: 10px;
}


/*   CONTROLS   */
.douchart_toggler {
	display: flex;
	flex-wrap: wrap;
	font-family: 'Roboto Condensed', sans-serif;
    gap: 5px 5px;
    margin-bottom: 10px;
}
.douchart_toggler .item {
	font-size: 15px;
	line-height: 18px;
    padding: 9px 15px 10px;
    border-radius: 5px;
    background-color: #f0f0f0;
    border: 1px solid #e8e8e8;
    color: #3d3d3d;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.douchart_toggler .item:hover {
    color: #0d0d0d;
    background-color: #e8e8e8;
	border-top: 2px solid #d2d2d2;
	padding-top: 8px;
}
.douchart_toggler .item:active {
	color: #3d3d3d;
    border-color: #ddd;
	background-color: #f0f0f0;
}
.douchart_toggler .item.active {
	color: #ffffff;
	background-color: #1d1d1d;
    border-color: #0d0d0d;
    pointer-events: none;
}

.douchart_controls {
	display: flex;
	flex-wrap: wrap;
	font-family: 'Roboto Condensed', sans-serif;
    gap: 2px;
    margin-bottom: 15px;
}
.douchart_controls.category {
	margin-bottom: 10px;
}
.douchart_controls.mobile {
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.douchart_controls.grouped {
    flex-direction: column;
}
.douchart_controls .items-group {
    display: flex; 
    flex-wrap: wrap;
    gap: 2px;
}
.douchart_controls .item { 
    font-size: 13px;
	line-height: 15px;
    padding: 7px 10px 8px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #eee;
    color: #3d3d3d;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.douchart_controls .item.just-text {
    pointer-events: none;
    border: none;
    padding: 7px 5px 8px 0;
}
.douchart_controls .item:hover {
    color: #0d0d0d;
    background-color: #f4f4f4;
}
.douchart_controls .item:active {
    border-color: #ddd;
	background-color: #f0f0f0;
}
.douchart_controls .item.active {
	color: #1d7872;
	background-color: #06b9b133;
    border-color: #06b9b14D;
    pointer-events: none;
}
.douchart_controls.control .item.active { 
	color: #8a37b5; 
	background-color: #8A37B533;
	border-color: #8A37B54D;
}
.douchart_controls .item.disabled {
	pointer-events: none;
	opacity: .3;
}

.douchart .chart-controls {
	display: flex;
	flex-wrap: wrap;
	font-family: 'Roboto Condensed', sans-serif;
    gap: 2px;
    margin-bottom: 10px;
}
.douchart .chart-controls .chart-filter-button {
    font-size: 13px;
    line-height: 15px;
    padding: 7px 10px 8px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #eee;
    color: #3d3d3d;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.douchart .chart-controls .chart-filter-button.active {
    color: var(--color-green-dark);
    background-color: var(--color-green-02);
    border-color: var(--color-green-03);
    pointer-events: none;
}
.douchart .chart-controls.experience .chart-filter-button.active {
    color: #8A37B5;
    background-color: #8A37B533;
    border-color: #8A37B54D;
}
.douchart .chart-controls.position .chart-filter-button.active {
    color: #376294;
    background-color: #4982C533;
    border-color: #4982C54D;
}
.douchart .chart-controls.specialisation .chart-filter-button.active {
    color: #AE8F27;
    background-color: #E8BE344D;
    border-color: #E8BE3480;
}


.douchart .chart-filter-button:hover {
    color: #0d0d0d;
    background-color: #f4f4f4;
}
.douchart .chart-filter-button:active {
    border-color: #ddd;
	background-color: #f0f0f0;
}
.douchart .chart-filter-button.active {
	color: var(--color-green-dark);
	background-color: var(--color-green-02);
    border-color: var(--color-green-03);
    pointer-events: none;
}

.douchart .chart-controls.positions { margin-bottom: 7px; }
.douchart .chart-controls.specialisations, .douchart_controls.cities { margin-bottom: 12px; }
.douchart .chart-controls.specialisations .chart-filter-button.active span { color: #8a37b5; border-color: #e2cded; }
.douchart .chart-controls.cities .chart-filter-button.active span { color: #4982c5; border-color: #c2e1ff; }
.widget .douchart .chart-controls { margin-bottom: 3px; }
.widget .douchart .chart-controls.experience .chart-filter-button.active span { color: #8a37b5; border-color: #e2cded; }
.widget .douchart .chart-controls.position .chart-filter-button.active span { color: #4982c5; border-color: #c2e1ff; }
.widget .douchart .chart-controls.specialisation .chart-filter-button.active span { color: #e8be34; border-color: #ffe6a1; }

.douchart .chart-filter-button.disabled {
	pointer-events: none;
	opacity: .3;
}



/*   INFOLINE   */
.douchart_infoline {
    display: flex;
    justify-content: space-between;
	align-items: flex-end;
	gap: 8px 30px;
	
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
    
    padding: 0 0 5px;
    border-bottom: 1px solid #eee;
    margin: 10px 0 15px;
}
.douchart_infoline.right {
	justify-content: flex-end;
}

.douchart_color-legend { 
	display: flex;
	flex-wrap: wrap;
	gap: 3px 15px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
}
.douchart_color-legend .item { 
	display: inline-block;
	line-height: 14px;
}
.douchart_color-legend .item.hidden { display: none; }
.douchart_color-legend .item-mark { 
	display: inline-block;
	margin: 2px 5px 0 0;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}
.douchart_color-legend .tr .item-mark { background-color: #C2E8E5; }
.douchart_color-legend .q1 .item-mark,
.douchart_color-legend .jse .item-mark { background-color: #89e5de; }
.douchart_color-legend .q2 .item-mark,
.douchart_color-legend .se .item-mark { background-color: #06b9b1; }
.douchart_color-legend .q3 .item-mark,
.douchart_color-legend .sse .item-mark { background-color: #1d7872; }
.douchart_color-legend .tl .item-mark { background-color: #e8be34; }
.douchart_color-legend .sa .item-mark { background-color: #8a37b5; }
.douchart_color-legend .item-name { display: inline-block; }
.douchart_total-count { white-space: nowrap; }


/*   CHART   */
.douchart .row a text {
	text-decoration: underline;
	cursor: pointer;
}
.douchart .row a:hover text,
.douchart .row a:active text { fill: var(--color-red); }
.douchart .label-name {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    line-height: 18px;
    fill: #303030;
}
.douchart .label-value {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    line-height: 18px;
    fill: #303030;
}
.douchart .label-diff { 
	text-anchor: start; 
	font-size: 12px;
	font-style: italic;
}
.douchart.stacked .bar rect { 
	stroke: white; 
	stroke-width: 1px;
}
.douchart.stacked .label-name { text-anchor: end; }
.douchart.stacked .label-value {
	fill: white;
	stroke: none;
}

.douchart .row { cursor: help; }
.douchart .row .row-back { fill: rgba(0,0,0,.05); opacity: 0; }
.douchart.grouped .row:nth-child(even) .row-back { opacity: .6; }

.douchart .row.total line.bottomline { fill: none; stroke: #ccc; }
.douchart .row.total .label-name {
	/* font-weight: bold; */
	font-style: italic;
}
.douchart .row.total .row-back {
    fill: #ececec;
    opacity: .4;
}

.douchart .row:hover .row-back,
.douchart .row.highlighted .row-back { opacity: 1; }
.douchart .row:hover .label-name { font-weight: bold; }
.douchart .row.highlighted .label-name { font-weight: bold; }
.douchart .row:hover .label-value { font-weight: bold; }

.douchart .row.empty { pointer-events: none; }
.douchart .row.empty .label-name,
.douchart .row.empty .label-value {
	font-style: italic;
	fill: #b3b3b3;
}

.douchart .axis.y line {
	shape-rendering: crispEdges;
    stroke-width: 1;
    stroke-opacity: .1;
}
.douchart .axis.y line.baseline {
	stroke: #303030; 
	stroke-opacity: 1; 
}
.douchart .axis.y .domain { display: none; }
.douchart .axis.x .tick line,
.douchart .axis.x path { 
	shape-rendering: crispEdges;
	stroke: #303030; 
    stroke-opacity: .1;
}

.douchart.dual-axis .axis text.label {
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
	font-size: 14px;
	fill: #808080;
	stroke: #fff;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: .85;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.douchart.dual-axis .axis.feedback text {
	fill: #06b9b1;
    font-weight: bold;
}
.douchart.dual-axis .axis.feedback text.label { text-anchor: start; }
.douchart.dual-axis .axis.vacancy text.label { text-anchor: end; }

.douchart .tick text {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
	font-size: 14px;
	fill: #808080;
}
.douchart .axis-title {
	font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
	font-size: 14px;
	fill: #808080;
	text-anchor: end;
}
.douchart .row-guideline {
	shape-rendering: crispEdges;
	stroke: #303030; 
    stroke-opacity: .1;
}


/* DOUCARDS */

.douchart.doucards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
    width: 100%;
}
.douchart.doucards img {
	width: 100%;
	max-width: 400px;
}
.douchart.doucards rect.base {
	fill: #f8f8f8;
}


@media screen and (max-width:768px) {

	#schools-kyiv,
	#chart-schools_not-kyiv { flex-direction: column; }
	#schools-kyiv-list,
	#chart-schools_not-kyiv .schools-list { max-width: unset; }
	#chart-schools_not-kyiv .svg-wrapper { 
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom: 1px solid #e0e0e0;
	}

	.dou-charts-desktop { display: none; }
	.dou-charts-mobile { 
		display: block; 
		margin: 0 15px 0 20px;
	}

	.dou-table table { min-width: auto; }
	.dou-table table th,
	.dou-table table tr td { 
		font-size: 10px;
		line-height: 12px; 
		padding: 5px 3px 5px;
	}
	.dou-table table th { line-height: 10px; }
	/* .dou-table table .school-name { font-size: 10px; } */
	.dou-table table .school .school-region { font-size: 10px; margin-top: 3px; }
	.dou-table table .rank .value-label { width: 15px; }
	.dou-table table .rank .symbol { width: 10px; font-size: 10px; margin-top: 0; }

	.dou-table .bar, .dou-table .domen { display: none; }
	.dou-table .students .value-label, .dou-table .PassRate .value-label { width: unset; text-align: left; }
	
	.chart-controls.mobile { flex-wrap: wrap; margin-bottom: 10px; }
	.chart-controls.mobile .chart-filter-button { margin-bottom: 5px; }
	.chart-controls.mobile .chart-filter-button span { height: auto; }

	#schools-regions .label text.name, #schools-regions-it .label text.name { display: none; }
	#schools-regions .label text.value, #schools-regions-it .label text.value { font-size: 28px; }

	.dou-table table th { 
		word-wrap: normal!important; 
		word-break: normal!important; 
	}

	#table-cities.dou-table table thead th:nth-child(6),
	#table-cities.dou-table table tbody td:nth-child(6),
	#table-top100-it.dou-table table thead th:nth-child(5),
	#table-top100-it.dou-table table tbody td:nth-child(5),
	#table-lowest.dou-table table thead th:nth-child(4),
	#table-lowest.dou-table table tbody td:nth-child(4),
	#table-fastest.dou-table table thead th:nth-child(6),
	#table-fastest.dou-table table tbody td:nth-child(6),
	#table-fastest.dou-table table thead th:nth-child(7),
	#table-fastest.dou-table table tbody td:nth-child(7),
	#table-falling.dou-table table thead th:nth-child(6),
	#table-falling.dou-table table tbody td:nth-child(6),
	#table-falling.dou-table table thead th:nth-child(7),
	#table-falling.dou-table table tbody td:nth-child(7) {
		display: none;
	}

}