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

:root {
	--dark-bg: #35363a;
	--dark-bg-darker: #232426;
	--dark-bg-darker2: #2e2f31;
	--dark-bg-lighter: #4d4e54;
	--dark-bg-lighter2: #4a4b4f;
	--dark-bg-lighter3: #62636a;
	--dark-text: #bdc1c6;
	--dark-text2: #acb0b5;
	--dark-heading: #f2f2f2;
	--purple: #9c30b6;
	--purple-dark: #81008a;
	--red: #eb4247;
}

.chart-transparent { opacity: 0; }

.chart-title {
	font-family: 'Roboto';
	font-size: 18px;
	font-weight: 700;
}
.douchart svg .chart-title {
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: 500;
}

.doucharts-mobile { display: none; }

#chart-top-services_table { margin-bottom: 25px; }
#chart-top-services_table .tb-thead, #chart-top-services_table .tb-row-resume { display: flex; justify-content: space-between; }
#chart-top-services_table .tb-cell { 
	width: 100%; 
	font-size: 14px;
	line-height: 1.3em;
	padding: 8px 5px 6px;
}
#chart-top-services_table .tb-cell.company { padding-left: 10px; }
#chart-top-services_table .tb-thead .tb-cell {
	font-family: 'Roboto Condensed';
}
#chart-top-services_table .tb-thead .tb-cell.rate {
	white-space: nowrap;
}

#chart-top-services_table { max-width: 600px; }
#chart-top-services_table .tb-thead { 
	align-items: flex-end; 
	border-bottom: 1px solid black;
	position: sticky;
	background: white;
	z-index: 100;
	top: 0;
}
#chart-top-services_table.dark .tb-thead {
	background: var(--dark-bg);
	border-bottom-color: var(--dark-text);
}
#chart-top-services_table .tb-thead .tb-cell {
	font-size: 12px;
	line-height: 12px;
	color: #4d4d4d;
}
#chart-top-services_table.dark .tb-cell, #chart-top-services_table.dark .tb-thead .tb-cell { color: var(--dark-text2); }
#chart-top-services_table .tb-cell.rate { max-width: 30px; text-align: right; }
#chart-top-services_table .tb-cell.attention { max-width: 75px; min-width: 60px; text-align: center; }
#chart-top-services_table .tb-cell.type { max-width: 150px; text-align: center; }
#chart-top-services_table .tb-cell.staffTotal { 
	max-width: 120px; 
	display: flex;
	justify-content: flex-end;
	text-align: right;
	padding-right: 5px;
}
#chart-top-services_table .tb-cell.sortable {
	display: flex;
	gap: 3px;
	justify-content: start;
	align-items: baseline;
	cursor: pointer;
}
#chart-top-services_table .tb-cell.staffTotal.sortable {
	flex-direction: row-reverse;
	/* align-items: end; */
}
#chart-top-services_table svg.sort-button {
	width: 10px; min-width: 10px;
	height: 10px;
	position: relative;
	top: 3px;
	/* margin-bottom: -6px; */
}
#chart-top-services_table svg.sort-button polygon { fill: #b0b0b0; }
#chart-top-services_table .tb-cell.sortable:hover svg.sort-button polygon { fill: #606060; }
#chart-top-services_table .tb-cell.sortable.sorted { pointer-events: none; }
#chart-top-services_table .tb-cell.sortable.sorted svg.sort-button polygon { fill: #303030; }

#chart-top-services_table.dark svg.sort-button polygon { fill: var(--dark-text); }
#chart-top-services_table.dark .tb-cell.sortable:hover svg.sort-button polygon { fill: var(--dark-heading); }
#chart-top-services_table.dark .tb-cell.sortable.sorted svg.sort-button polygon { fill: var(--dark-heading); }
#chart-top-services_table.dark .tb-cell.sortable:hover,
#chart-top-services_table.dark .tb-cell.sortable.sorted { color: var(--dark-heading); }

/* #chart-top-services_table .tb-cell.staffTotal .staffTotal-value { display: block; margin-top: 7px; } */
#chart-top-services_table .tb-cell.openPositions { max-width: 60px; text-align: right; }
#chart-top-services_table .tb-cell.staffTech { max-width: 120px; }

#chart-top-services_table .tb-row { border-bottom: 1px solid #ddd; }
#chart-top-services_table.dark .tb-row { border-bottom-color: var(--dark-bg-darker); background: var(--dark-bg); }
#chart-top-services_table .tb-row.active { background: #f5f5f5; }
#chart-top-services_table.dark .tb-row.active { background: var(--dark-bg-darker2); }
/* #chart-top-services_table .tb-row:not(.total) .tb-row-resume { cursor: pointer; } */
#chart-top-services_table .tb-row:not(.total) .tb-row-resume:hover { background: #f5f5f5; }
#chart-top-services_table.dark .tb-row:not(.total) .tb-row-resume:hover { background: var(--dark-bg-darker); }
#chart-top-services_table .tb-row.active .tb-row-resume:hover { background: #e9e9e9; }
#chart-top-services_table.dark .tb-row.active .tb-row-resume:hover { background: var(--dark-bg-darker); }
#chart-top-services_table .tb-row-details { height: 0px; overflow: hidden; font-size: 14px; line-height: 18px; }
#chart-top-services_table .tb-row-details .wrapper { 
	padding: 15px 0 20px; 
	margin: 5px 15px 10px 10px; 
}
#chart-top-services_table.dark .tb-row-details .wrapper { color: var(--dark-text2); }
#chart-top-services_table .tb-row.total {
	font-weight: bold;
	border-top: solid 1px black;
	border-bottom: none;
}
#chart-top-services_table.dark .tb-row.total { border-top-color: var(--dark-text); }
#chart-top-services_table .tb-row.total .tb-cell.staffTotal span { margin-left: 54px; white-space: nowrap; }

#chart-top-services_table .company-name-block { display: flex; }
#chart-top-services_table a.company-name { font-weight: bold; color: var(--purple-dark); text-decoration: none; }
#chart-top-services_table.dark a.company-name { color: var(--purple); }
#chart-top-services_table a.company-name:hover { color: var(--red); }
#chart-top-services_table .company-dou-data {
	display: inline-block;
	background-color: #b3b3b3;
	color: white;
	font-size: 8px;
	line-height: 10px;
	width: 10px;
	min-width: 10px;
	height: 10px;
	border-radius: 100%;
	text-align: center;
	position: relative;
	top: 0; left: 3px;
	cursor: help;
}
#chart-top-services_table.dark .company-dou-data {
	background-color: var(--dark-bg-lighter);
	color: var(--dark-text);
}
#chart-top-services_table .company-details {
	display: inline-block;
	color: #808080;
	font-size: 20px;
	line-height: 18px;
	height: 10px;
	text-align: center;
	position: relative;
	top: 0; left: 3px;
	cursor: help;	
}
#chart-top-services_table.dark .company-details { color: var(--dark-text2); }
#chart-top-services_table .company-cities,
#chart-top-services_table .company-platforms { 
	font-size: 12px;
	line-height: 12px;
	color: #808080;
}
#chart-top-services_table.dark .company-cities,
#chart-top-services_table.dark .company-platforms { color: var(--dark-text2); }
#chart-top-services_table .company-platforms { display: none; }

#chart-top-services_table .staffTech-value.rounded { font-style: italic; margin-left: -4px; }
#chart-top-services_table .staffTech-value.rounded::before { content: "≈"; }
#chart-top-services_table .staffTech-value.nodata {
	font-style: italic;
	opacity: .4;
}
#chart-top-services_table .staffTech-share {
	font-size: 12px;
	position: relative;
	top: -5px;
	left: 5px;
}
#chart-top-services_table .staffTech-share-chart {
	width: 120px;
	height: 8px;
	background: #cccccc;
	margin-top: 1px;
}
#chart-top-services_table.dark .staffTech-share-chart { background: var(--dark-bg-lighter2); }
#chart-top-services_table .staffTech-share-progress {
	height: 8px;
	background: #81008a;	
}

#chart-top-services_table .neutral { color: #b3b3b3; }
#chart-top-services_table .positive { color: #06b9b1; }
#chart-top-services_table .negative { color: #eb4247; }



/*   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-pre,
.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 .row { cursor: help; }
.douchart .row .row-back { fill: rgba(0,0,0,.05); opacity: 0; }
.douchart .row:hover .row-back { opacity: 1; }
.douchart .row:hover .label-name { font-weight: bold; }
.douchart .row:hover .label-value { font-weight: bold; }

.douchart .chart-title rect {
	shape-rendering: crispEdges;
	stroke: none;
	fill: white;
}

.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;
}

.linechart .line path.tm-area {
	stroke: none;
}
.linechart .line path.tm-line {
	fill: none;
	stroke: #81008a;
	stroke-width: 3px;
	stroke-linecap: round;
}

.linechart .mark circle {
	fill: #81008a;
	stroke: #81008a;
	stroke-opacity: .3;
	stroke-width: 10px;
}

.linechart .mark text {
	text-anchor: middle;
}
.linechart .mark text.label-name {
    font-family: 'Roboto Condensed', sans-serif;
	fill: #303030;
	stroke: #fff;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: .85;
	stroke-linecap: round;
	stroke-linejoin: round;
    font-size: 16px;
    font-weight: bold;
}
.linechart .mark text.label-value {
    font-size: 12px;
    font-style: italic;
}
.linechart .relative .line path.tm-line {
	stroke: #8c8c8c;
	stroke-width: 1.5px;
}
.linechart .relative .mark circle {
	fill: #8c8c8c;
	stroke: #8c8c8c;
}
.linechart .relative .mark text.label-name {
	font-weight: normal;
	font-size: 16px;
}
.areachart .answers path { stroke: white; }

.linechart .refline,
.areachart .refline {
	shape-rendering: crispEdges;
	fill: none;
	stroke: #0d0d0d;
    stroke-dasharray: 3 2;
    stroke-linecap: round;
}
.linechart .refline .mark circle {
	fill: #81008a;
	stroke: #81008a;
	stroke-dasharray: none;
	stroke-opacity: .3;
	stroke-width: 10px;
}
.linechart .refline .mark.diff circle {
	fill: #8c8c8c;
	stroke: #8c8c8c;
}
.linechart .refline .mark text {
    font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	/* font-style: italic; */
	text-anchor: middle;
	fill: #303030;
	stroke: #fff;
	paint-order: stroke;
	stroke-width: 5px;
	stroke-opacity: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.linechart .refline .mark.total text { font-weight: bold; }

.douchart .overlay {
	opacity: 0;
	cursor: help;
}

.linechart-gradient .stop1 { stop-color: rgba(6,185,177,.05); }
.linechart-gradient .stop2 { stop-color: rgba(6,185,177,.4); }

.rangechart .grid .domain,
.dumbbell-plot .grid .domain,
.boxplot .grid .domain { display: none; }

.boxplot .median { fill: none; stroke-width: 2; stroke: #fff; }

.rangechart .point,
.dumbbell-plot .point { 
	stroke: #ffffff;
	stroke-width: 1.5;
}
.dumbbell-plot .point-junior { fill: #89E5DE; }
.dumbbell-plot .point-middle { fill: #06B9B1; }
.dumbbell-plot .point-senior { fill: #1D7872; }
.dumbbell-plot .range {
	fill: none;
	stroke: #0d0d0d;
	stroke-opacity: .2;
	stroke-width: 4px;
	shape-rendering: crispEdges;
}
.rangechart .range {
	fill: none;
	stroke-opacity: .2;
	shape-rendering: crispEdges;
}
.rangechart .median {
	fill: none;
	stroke: #0d0d0d;
	stroke-opacity: .2;
	stroke-width: 3px;
	stroke-linecap: round;
}

.multilines .chart-note {
	color: #999;
	font-style: italic;
	font-size: 14px;
	line-height: 14px;
	margin-bottom: 30px;
}
.areachart .time-block,
.multilines .time-block {
	opacity: 0;
	cursor: help;
	pointer-events: all;
}
.areachart line.area-chart-reference,
.multilines line.area-chart-reference {
	pointer-events: none;
	shape-rendering: crispEdges;
	fill: none;
	stroke: #0d0d0d;
    stroke-dasharray: 3 2;
    stroke-linecap: round;
}
.multilines line.area-chart-date-borders {
	fill: none;
	stroke: #0d0d0d;
	stroke-width: .5;
	stroke-opacity: .2;
	shape-rendering: geometricPrecision;
	pointer-events: none;
}
.areachart .y .domain,
.multilines .y .domain { display: none; }
.multilines .line path {
	fill: none;
	stroke-width: 2;
	pointer-events: none;
}

.chart-salary-area-details {
	position: absolute;
	top: 5px; left: 0;
	width: 180px;
}
.chart-salary-ad-date {
	font-weight: bold;
	border-bottom: 1px #ccc solid;
	margin-bottom: 5px;
}
.chart-salary-ad-row { display: flex; }
.chart-salary-ad-row-value { 
	font-weight: bold; 
	min-width: 50px; 
	text-align: right; 
	margin-right: 7px; 
}
.last-answers { font-family: 'Roboto Condensed', sans-serif; }
.last-answers .date-label { fill: #3d3d3d; font-weight: bold; }
.last-answers .ankety-label { fill: #999; font-size: 14px; font-style: italic; }
.last-answers line.header-line { 
	stroke: #3d3d3d; 
	shape-rendering: crispEdges;
	stroke-width: .5;
}
.last-answers line { stroke: #ccc; }

.areachart .grid { pointer-events: none; }
.answer-info .name-label { font-size: 14px; }
.answer-info .value-label { 
	font-weight: normal; 	
}

.douchart .small-chart .back { opacity: 0; }
.douchart .small-chart:hover .back { opacity: .05; }

.douchart.linechart .frame-name {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	font-weight: bold;
	fill: #333;
}

.douchart.linechart .small-multiplies .line path,
.douchart.linechart .small-multiplies .line path.tm-line {
	fill: none;
}
.douchart.linechart .small-multiplies path.fade {
	fill: none;
	stroke-width: .75px;
	stroke: black;
	stroke-opacity: .3;
}
.douchart.linechart .small-multiplies .line path:not(.highlighted, .highlighted-outline) {
	stroke-width: .5;
	stroke: rgba(0,0,0,.2);
}
.douchart.linechart .small-multiplies .line path.highlighted {
	stroke-width: 2px;
}
.douchart.linechart .small-multiplies .line path.highlighted-outline {
	stroke: white;
	stroke-opacity: .8;
	stroke-width: 5px;
    stroke-linecap: round;
}
.douchart.linechart .small-multiplies .small-chart:hover .line path.highlighted-outline {
	stroke: #f2f2f2; }
.douchart.linechart .small-multiplies .refline {
	stroke-dasharray: none;
}
.douchart.linechart .small-multiplies .axis text {
    font-size: 14px;
    font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
    fill: gray;
}
.douchart.linechart .small-multiplies circle.marker { fill: #06b9b1; }
.douchart.linechart .small-multiplies .label text {
	font-size: 15px;
	fill: #2d2d2d;
	paint-order: stroke;
	stroke: white;
	stroke-width: 4px;
	stroke-opacity: 1;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.douchart.linechart .small-multiplies  .small-chart:hover .label text { stroke: #f2f2f2; }
.douchart.linechart .small-multiplies .label text.label-diff { font-size: 12px; }
.douchart.linechart .small-multiplies .label.middle text { text-anchor: middle; }
.douchart.linechart .small-multiplies .label.first text { text-anchor: start; }
.douchart.linechart .small-multiplies .label.last text { text-anchor: end; }
.douchart.linechart .small-multiplies .up .line path.highlighted { stroke: #eb4247; }
.douchart.linechart .small-multiplies .up circle.marker { fill: #eb4247; }
.douchart.linechart .small-multiplies .down .line path.highlighted { stroke: #06b9b1; }
.douchart.linechart .small-multiplies .down circle.marker { fill: #06b9b1; }
.douchart.linechart .small-multiplies .default .line path.highlighted { stroke: #404040; }
.douchart.linechart .small-multiplies .default circle.marker { fill: #404040; }

.douchart.linechart .small-multiplies .down .markers circle { fill: #06b9b1; }
.douchart.linechart .small-multiplies .up .markers circle { fill: #eb4247; }
.douchart.linechart .small-multiplies .default .markers circle { fill: #404040; }

.douchart.dark .chart-title rect { fill: var(--dark-bg); }
.douchart.dark .chart-title text { fill: var(--dark-text); }
.douchart.dark .label-name { fill: var(--dark-text); }
.douchart.dark .label-value-pre { fill: var(--dark-text); }
.douchart.dark .label-value { fill: var(--dark-text); }
.douchart.dark .row-guideline { stroke: var(--dark-text2); }
.douchart.dark .axis.y line.baseline { stroke: var(--dark-text2); }
.linechart.dark .mark text.label-name {
	fill: var(--dark-text);
	stroke: var(--dark-bg);
}
.linechart.dark .relative .line path.tm-line {
	stroke: var(--dark-text2);
}
.linechart.dark .relative .mark circle {
	fill: var(--dark-text2);
	stroke: var(--dark-text2);
}
.linechart.dark .refline,
.areachart.dark .refline { stroke: var(--dark-text2); }
.linechart.dark .refline .mark.diff circle {
	fill: var(--dark-text2);
	stroke: var(--dark-text2);
}
.linechart.dark .refline .mark text {
	fill: var(--dark-text2);
	stroke: var(--dark-bg);
}





/*   TOOLTIP   */

#douchart-tooltip { 
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	pointer-events: none; 

	position: absolute;
	display: none;
	width: 100%;
	max-width: 150px;
	background: black;
	color: white;
	padding: 8px 15px 12px;
	box-shadow: 10px 10px 0 #00000044;
}
#douchart-tooltip.inline { 
	font-family: 'Roboto Condensed', Roboto, Arial, sans-serif;
	width: unset;
	max-width: unset;
}

#douchart-tooltip .tt-period { 
	margin: 3px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	line-height: 16px;
	color: #B0B0B0;
}
#douchart-tooltip .tt-name { font-size: 15px; margin-top: 2px; }
#douchart-tooltip .tt-period.underlined { padding-bottom: 0; }
#douchart-tooltip .tt-value span { font-weight: bold; }
#douchart-tooltip .tt-note {
	font-size: 14px;
	color: #999;
}
#douchart-tooltip .tt-footer {
	font-size: 12px;
	font-style: italic;
	color: #999;
	border-top: 1px solid #333;
	padding-top: 3px;
	margin-top: 5px;
}
#douchart-tooltip .tt-point span { font-weight: bold; }
#douchart-tooltip .tt-point.tt-junior span { color: #89e5de; }
#douchart-tooltip .tt-point.tt-middle span { color: #06b9b1; }
#douchart-tooltip .tt-point.tt-senior span { color: #1d7872; }

#douchart-tooltip .underlined {
	padding-bottom: 5px;
	border-bottom: 1px solid #4d4d4d;
	margin-bottom: 7px;
}

#douchart-tooltip .tt-row {
	display: flex;
	gap: 7px;
}
#douchart-tooltip .tt-row-value { 
	font-weight: bold;
	white-space: nowrap;
}
#douchart-tooltip .tt-row-diff,
#douchart-tooltip .tt-diff {
	font-style: italic;
	font-size: 12px;
	margin: -5px 0 0 -3px;
	color: #cdcdcd;
}
#douchart-tooltip .tt-row-diff.positive,
#douchart-tooltip .tt-row-diff.increase,
#douchart-tooltip .tt-diff.increase { color: #06b9b1; }
#douchart-tooltip .tt-row-diff.negative,
#douchart-tooltip .tt-row-diff.decrease,
#douchart-tooltip .tt-diff.decrease { color: #eb4247; }
#douchart-tooltip .tt-vacancies { 
	font-size: 12px; 
	font-style: italic; 
	color: #b0b0b0; 
}



.doumap svg .region path { 
	fill: #e0e0e0;
	/* stroke: #f0f0f0; */
}
.doumap.dark svg .region path { fill: var(--dark-bg-darker); }
.doumap svg .region path.highlighted { 
	fill: #fbb03b!important; 
	stroke: #fbb03b!important; 
}
.doumap svg .lines { pointer-events: none; }
.doumap svg .lines path { fill: none; }
.doumap svg .lines path.baseline {
	stroke: #303030;
	stroke-width: 1.5;
	stroke-opacity: .5;
	stroke-linecap: round;
}
.doumap svg .lines .faded path.baseline { stroke-opacity: .05; }
.doumap svg path.country.highlighted { fill: #E8BE34!important; }
.doumap svg .lines .highlighted  { opacity: 1!important; }
.doumap svg .notes .note text { 
	font-size: 14px; 
	fill: #404040; 
	text-anchor: end;
}
.doumap svg .notes .note text.name { font-style: normal; }
.doumap svg .notes .note text.value { opacity: .8; text-anchor: end; }
.doumap svg .notes .note rect.background { opacity: 0; }
.doumap svg .notes .note:hover text,
.doumap svg .notes .note.highlighted text { 
	font-weight: bold;
	fill: var(--purple-dark);
	cursor: help; 
}
.doumap svg .cities circle {
	fill: var(--purple-dark);
	/* stroke: #f0f0f0; */
	/* paint-order: stroke; */
    /* stroke-width: 5px; */
    /* stroke-opacity: .8; */
    /* stroke-linecap: round; */
    /* stroke-linejoin: round; */
    cursor:  pointer;
}
.doumap svg .cities circle:hover {
	fill: orange!important;
}
.doumap svg .cities circle.faded { fill: #ccc; }
.doumap svg .cities circle.highlighted { fill: #06b9b1; }
.doumap svg .labels text {
	font-size: 9px;
	text-anchor: middle;
	stroke: #fff;
	paint-order: stroke;
    stroke-width: 3px;
    stroke-opacity: .75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.doumap svg .labels .name { font-style: italic; }
.doumap svg .labels .name.active { font-style: normal; font-weight: bold; font-size: 12px; }
.doumap svg .labels .value {
	font-size: 10px;
	font-weight: bold;
}
.doumap svg .labels .value .source { fill: #06b9b1; }
.doumap svg .labels .value .target { fill: #F3812D; }

.doumap svg rect.ocean { fill: white; }
.doumap svg path.country { fill: #f0f0f0; stroke: #f0f0f0; stroke-width: .5; }
.doumap svg path.country.highlighted {
	fill: #fbb03b!important; 
	stroke: #fbb03b!important; 
}
.doumap svg path.country.selected { cursor: help; }
.doumap svg path.country.selected.faded { fill: #ccc!important; }

.douchart.doutree { max-width: 800px; }
.doutree svg .labels text {
	font-size: 12px;
	text-anchor: middle;
	stroke: #fff;
	paint-order: stroke;
    stroke-width: 3px;
    stroke-opacity: .75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: all;
	cursor: help;
}
.doutree.dark svg .labels text { stroke: var(--dark-bg); fill: var(--dark-text); }
.doutree svg .labels text.anchor-start { text-anchor: start; }
.doutree svg .labels text.anchor-end { text-anchor: end; }
.doutree svg .links path {
	fill: none;
	stroke: #808080;
	stroke-opacity: .4;
	stroke-width: 1;
}
.doutree.dark svg .links path { stroke: var(--dark-text); }
.doutree svg .nodes circle {
	fill: #808080;
	cursor: help;
}
.doutree.dark svg .nodes circle { fill: var(--dark-text); }

.doutree svg .cities-marks circle {
	/* fill: var(--purple-dark); */
	fill: #808080;
	cursor: help;
}
.doutree.dark svg .cities-marks circle { fill: var(--dark-text); }
.doutree svg .cities-marks text {
	font-size: 12px;
	text-anchor: middle;
	stroke: #fff;
	paint-order: stroke;
    stroke-width: 3px;
    stroke-opacity: .75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.doutree svg .labels text.highlighted { fill: var(--purple-dark); font-weight: bold; }
.doutree svg .nodes circle.highlighted { fill: var(--purple-dark); }
.doutree svg .cities-marks circle.highlighted { fill: var(--purple-dark); }
.doutree svg .links path.highlighted {
	stroke: var(--purple-dark);
	stroke-opacity: .8;
	stroke-width: 1.5;
}
.doutree.dark svg .labels text.highlighted { fill: white; }
.doutree.dark svg .nodes circle.highlighted { fill: white; }
.doutree.dark svg .cities-marks circle.highlighted { fill: white; }
.doutree.dark svg .links path.highlighted { stroke: white; }

.map-companies .item-company { cursor: help; }
.map-companies .item-company.faded { pointer-events: none; }
.map-companies .item-company.faded text { font-style: italic; fill: #ccc; }
.map-companies .item-company:hover text, 
.map-companies .item-company.highlighted text { font-weight: bold; fill: #06b9b1; }
.map-companies .item-company rect { opacity: 0; }
.map-companies .item-company text { font-size: 14px; }

.doumap .company { cursor: help; }
.doumap .company .row-back {
	opacity: 0;
	fill-opacity: .1;
	stroke: #888;
}
.doumap .company text {
	stroke: #fff;
	paint-order: stroke;
    stroke-width: 4px;
    stroke-opacity: .95;
    stroke-linecap: round;
    stroke-linejoin: round;
	transition: all .25s;
}
.doumap.dark .company text {
	fill: var(--dark-text);
	stroke: var(--dark-bg);
}
.doumap .company.highlighted text {
	fill: var(--purple-dark);
	font-weight: bold;
}
.doumap.dark .company.highlighted text {
	fill: var(--purple);
}
.doumap .company.faded text {
	pointer-events: none;
	fill: #ccc!important;
	font-style: italic;
}
.doumap.dark .company.faded text { fill: var(--dark-bg-lighter3)!important; }
.doumap .city circle {
    fill: var(--purple-dark);;
    stroke: #eeeeee;
    transition: all .25s;
    cursor: help;
}
.doumap .city circle.highlighted { fill: #e8be34; }

.doumap .city .city-label {
	font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
	font-size: 15px;
	stroke: #fff;
	paint-order: stroke;
    stroke-width: 3px;
    stroke-opacity: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
	transition: all .25s;
	text-anchor: middle;
}

.doumap .city text {
	font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
	pointer-events: none;
	text-anchor: start;
}
.doumap .city.large text {
	fill: white!important;
	text-anchor: middle;
}
.doumap .city .label-name {
	font-size: 16px;
}
.doumap .city.large .label-name { 
	font-size: 18px!important;
	font-weight: bold;
}
.doumap .city .label-value {
	font-size: 13px!important;
	font-style: italic;
	opacity: .8;
}

@media screen and (max-width:660px) {
	.doumap .city.large text {
		fill: #303030!important;
		text-anchor: start!important;
	}
	.doumap .city .label-name { font-size: 24px!important; }
	.doumap .city.large .label-name { font-size: 28px!important; }
	.doumap .city .label-value { font-size: 20px!important; }
}



/*   INFOLINE   */
.douchart_infoline {
    display: flex;
    justify-content: space-between;

    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: end;
}
.dark .douchart_infoline { border-bottom-color: var(--dark-bg-lighter3); }

.douchart_color-legend { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
	display: inline-block;
}
.douchart_color-legend .item { 
	display: inline-block; 
	margin: 0 15px 0 0;
	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; }



#chart-top-services_table svg.icon-type,
#chart-top-services_table svg.icon-platform { margin: 1px; cursor: help; }
#chart-top-services_table svg.icon-type *,
#chart-top-services_table svg.icon-platform * { pointer-events: none; }
#chart-top-services_table .attention svg.icon-type,
#chart-top-services_table .attention svg.icon-platform { cursor: pointer; }
#chart-top-services_table .icon-type *:not(.icon-bg) {
	fill: none;
	stroke-width: 1.5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: #81008a;
	transition: all .25s;
}
#chart-top-services_table .icon-platform *:not(.icon-bg) {
	fill: #81008a;
	stroke: none;
	transition: all .25s;
}
#chart-top-services_table .icon-type .icon-bg,
#chart-top-services_table .icon-platform .icon-bg {
	fill-opacity: .1;
	fill: #404040;
	transition: all .25s;
}
#chart-top-services_table .icon-type:hover .icon-bg,
#chart-top-services_table .icon-platform:hover .icon-bg { fill: #81008a; }
#chart-top-services_table .active .attention .icon-type *:not(.icon-bg) { stroke: white; }
#chart-top-services_table .active .attention .icon-platform *:not(.icon-bg) { fill: white; }
#chart-top-services_table .active .attention .icon-type .icon-bg,
#chart-top-services_table .active .attention .icon-platform .icon-bg { fill: #81008a; fill-opacity: 1; }

#chart-top-services_table.dark .icon-type *:not(.icon-bg) { stroke: var(--dark-bg-lighter3); }
#chart-top-services_table.dark .icon-platform *:not(.icon-bg) { fill: var(--dark-bg-lighter3); }
#chart-top-services_table.dark .icon-type .icon-bg,
#chart-top-services_table.dark .icon-platform .icon-bg { fill: #000; }
#chart-top-services_table.dark .icon-type:hover .icon-bg,
#chart-top-services_table.dark .icon-platform:hover .icon-bg { fill-opacity: .6; }
#chart-top-services_table.dark .icon-type:hover *:not(.icon-bg) { stroke: var(--dark-text2); }
#chart-top-services_table.dark .icon-platform:hover *:not(.icon-bg) { fill: var(--dark-text2); }

#chart-top-services_table .staffTotal-chart { 
	margin-right: 8px;
	margin-top: 3px;
}
#chart-top-services_table .staffTotal-chart path.area {
	fill: var(--purple-dark);
	fill-opacity: .1;
	stroke: none;
}
#chart-top-services_table.dark .staffTotal-chart path.area { fill: var(--purple); }
#chart-top-services_table .staffTotal-chart line.baseline {
	fill: none;
	stroke: #000;
	stroke-width: 1;
}
#chart-top-services_table .staffTotal-chart path.line {
	fill: none;
	stroke: var(--purple-dark);
	stroke-width: 1;
}
#chart-top-services_table.dark .staffTotal-chart path.line { stroke: var(--purple); }
#chart-top-services_table .staffTotal-chart circle.marker { fill: var(--purple-dark); }
#chart-top-services_table.dark .staffTotal-chart circle.marker { fill: var(--purple); }
#chart-top-services_table .staffTotal-chart rect {
	cursor: help;
	opacity: 0;
}
#chart-top-services_table .company-dou-data,
#chart-top-services_table .rate-symb.negative,
#chart-top-services_table .rate-symb.positive { cursor: help; }
#chart-top-services_table .staffTotal-diff {
	font-size: 12px;
	position: relative;
	top: -5px;
	left: 5px;
}
#chart-top-services_table .staffTotal-period {
	font-size: 12px;
	line-height: 12px;
	color: #b3b3b3;
	margin-top: -2px;
	opacity: 0;
}


#chart-top25-cities .region path, #chart-top25-cities-alt .region path { fill: #eee; stroke: #ccc; }
#chart-top25-cities.dark .region path, #chart-top25-cities-alt.dark .region path { 
	fill: var(--dark-bg-darker2); 
	stroke: var(--dark-bg-darker); 
}
#chart-top25-cities .city circle, #chart-top25-cities-alt .city circle {
	fill: var(--purple-dark);
	cursor: help;
	transition: all .25s;
}
#chart-top25-cities.dark .city circle,
#chart-top25-cities-alt.dark .city circle {
	fill: var(--purple-dark);
	stroke: var(--dark-bg-darker2); 
}
#chart-top25-cities.dark .city circle, #chart-top25-cities-alt.dark .city circle { fill: var(--purple); }
#chart-top25-cities .city circle.highlighted,
#chart-top25-cities-alt .city circle.highlighted,
#chart-top25-cities .city:hover circle,
#chart-top25-cities-alt .city:hover circle { fill: #e8be34; }
#chart-top25-cities .city.faded circle, #chart-top25-cities-alt .city.faded circle { fill: #aaa; }
#chart-top25-cities-alt .city circle.faded { fill: #aaa; fill-opacity: .4; }
#chart-top25-cities-alt.dark .city circle.faded { fill: #505050; fill-opacity: .4; }
#chart-top25-cities.dark .city.faded circle, #chart-top25-cities-alt.dark .city.faded circle { fill: var(--dark-bg-lighter3); }
#chart-top25-cities .city text, #chart-top25-cities-alt .city text { pointer-events: none; fill: #333; }
#chart-top25-cities.dark .city text, #chart-top25-cities-alt.dark .city text { pointer-events: none; fill: var(--dark-text); }
#chart-top25-cities .city text.city-label, #chart-top25-cities-alt .city text.city-label { font-size: 16px; font-weight: bold; }
#chart-top25-cities .city text.value-label, #chart-top25-cities-alt .city text.value-label { font-style: italic; }


#chart-top25-cities #map-companies .item-company, #chart-top25-cities-alt #map-companies .item-company { cursor: help; }
#chart-top25-cities #map-companies .item-company.faded, #chart-top25-cities-alt #map-companies .item-company.faded { pointer-events: none; }
#chart-top25-cities #map-companies .item-company.faded text, #chart-top25-cities-alt #map-companies .item-company.faded text { font-style: italic; fill: #ccc; }
#chart-top25-cities.dark #map-companies .item-company.faded text, #chart-top25-cities-alt.dark #map-companies .item-company.faded text { font-style: italic; fill: var(--dark-bg-lighter3); }
#chart-top25-cities #map-companies .item-company:hover text, 
#chart-top25-cities-alt #map-companies .item-company:hover text, 
#map-companies .item-company.highlighted text { font-weight: bold; fill: var(--purple-dark); }
#chart-top25-cities.dark #map-companies .item-company:hover text, 
#chart-top25-cities-alt.dark #map-companies .item-company:hover text, 
#chart-top25-cities.dark #map-companies .item-company.highlighted text,
#chart-top25-cities-alt.dark #map-companies .item-company.highlighted text { fill: var(--purple); }
#chart-top25-cities #map-companies .item-company rect, #chart-top25-cities-alt #map-companies .item-company rect { opacity: 0; }
#chart-top25-cities #map-companies .item-company text, #chart-top25-cities-alt #map-companies .item-company text { font-size: 14px; }
#chart-top25-cities.dark #map-companies .item-company text, #chart-top25-cities-alt.dark #map-companies .item-company text { fill: var(--dark-text); }


#chart-top25-offices .control-panel { display: none; }
#chart-top25-offices #countries polygon { stroke: white; fill: #f0f0f0; }
#chart-top25-offices.dark #countries polygon { stroke: var(--dark-bg-darker); fill: var(--dark-bg-darker2); }
#chart-top25-offices.dark #countries polygon.active { fill: var(--dark-bg-lighter2); }
#chart-top25-offices #countries polygon.freezed { pointer-events: none; }
#chart-top25-offices #countries polygon.highlighted { fill: #c0c0c0!important; cursor: help; }
#chart-top25-offices.dark #countries polygon.highlighted { fill: var(--dark-bg-lighter)!important; cursor: help; }
#chart-top25-offices #cities { 
	fill: var(--purple-dark); 
	fill-opacity: .2;
}
#chart-top25-offices.dark #cities { fill: var(--purple); }
#chart-top25-offices #cities circle.highlighted { fill-opacity: .4; cursor: help; }

#chart-top25-offices .trophies .trophy { cursor: help; }
#chart-top25-offices .trophies .trophy.fade { opacity: .2; }
#chart-top25-offices .trophies .planning *:not(text) { opacity: .4; }
#chart-top25-offices .trophies .office { fill: var(--purple-dark); }
#chart-top25-offices.dark .trophies .office { fill: var(--purple); }
#chart-top25-offices .trophies .hub { fill: var(--purple-dark); }
#chart-top25-offices.dark .trophies .hub { fill: var(--purple); }
#chart-top25-offices .trophies text { fill: #606060; }
#chart-top25-offices.dark .trophies text { fill: var(--dark-text); }
#chart-top25-offices .trophies .closed line { fill: none; stroke: var(--purple-dark); stroke-width: 4; }
#chart-top25-offices.dark .trophies .closed line { stroke: var(--purple); }
#chart-top25-offices .trophies .closed rect { fill: none; stroke: none; }

#chart-top25-offices #map-companies .company { cursor: help; }
#chart-top25-offices.dark #map-companies .company { fill: var(--dark-text); }
#chart-top25-offices #map-companies .highlighted { font-weight: bold; fill: var(--purple-dark); }
#chart-top25-offices.dark #map-companies .highlighted { fill: var(--purple); }
#chart-top25-offices #map-companies .fade { font-style: italic; fill: #ccc; }
#chart-top25-offices.dark #map-companies .fade { font-style: italic; fill: var(--dark-bg-lighter3); }

.douchart .name-label {
	font-family: "Roboto", sans;
	text-anchor: end;
	font-size: 15px;
    fill: #0d0d0d;
}
.douchart.dark .name-label { fill: var(--dark-text); }
.douchart .value-label {
	font-family: "Roboto Condensed", "Roboto", sans;
    text-anchor: start;
    font-size: 14px;
}

.douchart .bar-chart .name-label {
	font-family: "Roboto", sans;
    fill: #0d0d0d;
    font-size: 15px;
    line-height: 18px;
}
.douchart.dark .bar-chart .name-label { fill: var(--dark-text); }
.douchart .bar-chart .value-label {
	font-family: "Roboto Condensed", "Roboto", sans;
	width: 25px;
    text-align: right;
	margin-right: 5px;
}

.douchart .bar-chart { margin-bottom: 25px; }
.douchart .bar-chart .row { 
	display: block;
	margin-bottom: 5px;
}
.douchart.bar-chart .bar { cursor: help; }
.douchart.bar-chart .bar *:not(.base) { pointer-events: none; }
.douchart.bar-chart .bar rect { fill: var(--purple-dark); }
.douchart.bar-chart.dark .bar rect { fill: var(--purple); }
.douchart.bar-chart .bar rect.base { opacity: 0; }
.douchart.bar-chart .bar.highlighted .name-label { font-weight: bold; }

.douchart .bar-chart .name-label {
	font-family: 'Roboto', sans;
    fill: #0d0d0d;
    font-size: 15px;
    line-height: 18px;
}
.douchart.dark .bar-chart .name-label { fill: var(--dark-text); }
.douchart .bar-chart .value-label {
	font-family: 'Roboto Condensed', 'Roboto', sans;
	width: 25px;
    text-align: right;
	margin-right: 5px;
}

.douchart .bar-chart { margin-bottom: 25px; }
.douchart .bar-chart .row { 
	display: block;
	margin-bottom: 5px;
}

.douchart.bar-chart .row {
	display: flex;
	padding: 2px 0 3px 0;
	align-items: center;
	cursor: pointer;	
}
.douchart.bar-chart .row * { pointer-events: none; }
.douchart.bar-chart .row:hover { background-color: rgba(0,0,0,.05); }
.douchart.bar-chart.dark .row:hover { background-color: rgba(255,255,255,.05); }
.douchart.bar-chart .row .name-label {
	width: 100%;
    max-width: 166px;
    margin-right: 7px;
    text-align: right;
    font-size: 15px;
    line-height: 16px;
	color: #0d0d0d;
}
.douchart.bar-chart .row:hover .name-label { font-weight: bold; }
.douchart.bar-chart.long-names .row { display: block; }
.douchart.bar-chart.long-names .row .name-label { max-width: unset; text-align: left; margin: 0 0 2px 0; }
.douchart.bar-chart.dark .row .name-label { color: var(--dark-text); }
.douchart.bar-chart.dark .row:hover .name-label { color: #fff; }
.douchart.bar-chart .bars { width: 100%; }
.douchart.bar-chart .bars .bar { 
	width: 100%;
	height: 20px; 
	background-color: #ccc;
	position: relative;
}
.douchart.bar-chart .row .value-label { 
	margin-left: 5px; 
	position: absolute;
	left: 0;
	top: -1px;
	white-space: nowrap;
}
.douchart.bar-chart .row .value-label.shifted { left: 100%; }

.douchart.bar-chart.bar-compound .bars .bar .including {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	right: 0;
	width: 100%;
}
.douchart.bar-chart.bar-compound .bars .bar .added-bar { 
	width: 100%;
	height: 20px; 
	background-color: #ccc;
	position: relative;
}

.douchart .control-panel {
    display: flex;
    align-items: end;
    font-size: 14px;
    line-height: 16px;
    color: #000;
    margin-bottom: 24px;
}
.douchart.dark .control-panel { color: var(--dark-text); }

.douchart .control-panel .ctrl-item {
	margin-right: 15px;
    cursor: pointer;
}
.douchart .control-panel .ctrl-item span { border-bottom: 1px dashed #000; }
.douchart.dark .control-panel .ctrl-item span { border-bottom-color: var(--dark-text); }
.douchart .control-panel .ctrl-item svg {
	overflow: visible;
	margin: 2px 5px 0 0;
}
.douchart .control-panel .ctrl-item svg * { fill: var(--purple-dark); }
.douchart.dark .control-panel .ctrl-item svg * { fill: var(--purple); }
.douchart .control-panel .ctrl-item.closed svg * { fill: none; }
.douchart .control-panel .ctrl-item.closed svg line { stroke: var(--purple-dark); stroke-width: 4; }
.douchart.dark .control-panel .ctrl-item.closed svg line { stroke: var(--purple); }

.douchart .control-panel .ctrl-item.active {
    font-weight: bold;
    pointer-events: none;
}
.douchart .control-panel .ctrl-item.active span { border-bottom: none; }

.doucharts-desktop,
.doucharts-mobile,
.douchart { background-color: #fff; }
.douchart.dark { background-color: var(--dark-bg); }

.douchart.network {
	max-width: 800px;
}
.douchart.network #mesh { display: none; }
.douchart.network .links path {
	fill: none;
	stroke: #b0b0b0;
	stroke-opacity: .3;
	stroke-linecap: round;
	transition: stroke .25s, stroke-opacity .25s;
}
.douchart.network .links path.highlighted {
	stroke: #404040;
	stroke-opacity: .6!important;
}
.douchart.network .links path.faded { stroke-opacity: .0!important; }
.douchart.network .nodes circle { stroke: none; }
.douchart.network .labels g { transition: opacity .25s; }
.douchart.network .labels text {
	font-family: "Roboto";
	font-size: 16px;
	text-anchor: middle;
	fill: #202020;
	stroke: #fff;
	paint-order: stroke;
    stroke-width: 3px;
    stroke-opacity: .3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.douchart.network .labels .category circle { fill: url(#category-gradient); }
.douchart.network .labels .category.highlighted circle { fill: url(#highlighted-gradient); }
.douchart.network .labels .category.faded circle { fill: url(#faded-gradient); }
.douchart.network .labels .name circle { fill: #fff; }
.douchart.network .labels .name.highlighted circle { fill: gold; }
.douchart.network .labels .name.faded circle { fill: #fff; }
.douchart.network .labels * { transition: fill-opacity .25s, fill .25s; }
.douchart.network .labels .highlighted text { stroke-width: 4px; stroke-opacity: .5; }
.douchart.network .labels .faded { opacity: .3; }

.douchart.network .labels .faded text { fill: #808080; }
.douchart.network .active-zone { cursor: help; }

.douchart.network.dark .labels text {
	fill: var(--dark-text);
	stroke: var(--dark-bg);
}
.douchart.network.dark .labels .name circle { fill: var(--dark-bg); }
.douchart.network.dark .labels .name.faded circle { fill: var(--dark-bg); }
.douchart.network.dark .labels .name.highlighted circle { fill: gold; }
.douchart.network.dark .links path { stroke: #606060; }
.douchart.network.dark .links path.highlighted { stroke: #fff; }

.douchart .company-row {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 5px;
}
.douchart .company-row:nth-child(odd) { background-color: #f5f5f5; }
.douchart.dark .company-row:nth-child(odd) { background-color: var(--dark-bg-darker2); }
.douchart .company-row .company-name {
	width: 150px;
	/* margin-top: 30px; */
	text-align: right;
	font-size: 15px;
	line-height: 18px;
}
.douchart .company-row .company-games {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 5px;
}
.douchart .company-row .company-games .game {
	width: 100px;
	height: 100px;
	background-size: cover;
	background-color: var(--purple-dark);
	background-position: center;
}
.douchart .company-row .company-games .game .details {
	background: #81008acc;
	color: white;
	pointer-events: none;
	height: 100%;
	display: flex;
	gap: 3px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.douchart .company-row .company-games .game .details .game-company {
	font-size: 10px;
	line-height: 12px;
}
.douchart .company-row .company-games .game .details .game-name {
	font-size: 12px;
	line-height: 14px;
	font-weight: bold;
}

.table-sort-button {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 7px;
	justify-content: end;
	align-items: baseline;
	font-size: 13px;
	color: #3d3d3d;
	margin-bottom: 10px;
}
.table-sort-button .buttons-box {
	display: flex;
	border-radius: 5px;
	/* padding: 0 5px; */
	overflow: hidden;
}
.table-sort-button .buttons-box .button {
	background: #efefef;
	padding: 3px 7px;
	cursor: pointer;
}
.table-sort-button .buttons-box .button:hover {
	background: #d8d8d8;
	color: #1d1d1d;
	/* border-radius: 15px; */
}
.table-sort-button .buttons-box .button.active {
	background: var(--purple-dark);
	color: #fff;
	pointer-events: none;
}
.dark .table-sort-button { color: var(--dark-text); }
.dark .table-sort-button .buttons-box .button { background: var(--dark-bg-darker2); }
.dark .table-sort-button .buttons-box .button:hover { background: var(--dark-bg-darker); color: var(--dark-heading); }
.dark .table-sort-button .buttons-box .button.active { background: var(--purple); }

@media screen and (max-width:1200px) {
	#chart-top-services_table table .col-2,
	#chart-top-services_table table .col-3 { padding-right: 5px; }
}
@media screen and (max-width:768px) {
	
	#chart-top-services_table .staffTech-share-chart { display: none; }
	#chart-top-services_table .tb-cell { max-width: unset; }
	#chart-top-services_table .tb-cell { padding: 8px 3px 6px; line-height: 14px; }
	#chart-top-services_table .tb-cell.openPositions { display: none; }
	#chart-top-services_table .tb-cell.staffTech { max-width: 60px; text-align: right; }
}

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

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

	#chart-top-services_table .tb-cell.type { display: none; }
	#chart-top-services_table .tb-cell.staffTotal { max-width: 75px; }
	#chart-top-services_table .staffTotal-chart { display: none; }
	#chart-top25-offices #map-companies .company text { font-size: 24px; }
	#chart-top-services_table .tb-row.total .tb-cell.staffTotal span { margin-left: 0; }

	.douchart .company-row { flex-direction: column; align-items: start; gap: 3px; padding-bottom: 10px; }
	.douchart .company-row .company-name { width: unset; text-align: left; font-weight: bold; }
	.douchart .company-row .company-games .game { width: 80px; height: 80px; border-radius: 3px; }
}
@media screen and (max-width:450px) {

	#chart-top-services_table svg.sort-button { display: none; }
	#chart-top-services_table .company-cities { display: none; }
	#chart-top-services_table .company-platforms { display: block; }
	#chart-top-services_table .tb-cell.platform { display: none; }
	#chart-top-services_table .staffTotal-diff { white-space: nowrap; }
	#chart-top-services_table .tb-row.total .tb-cell { white-space: nowrap; }
	#table-tooltip { max-width: 160px; }
}
@media screen and (max-width:400px) {
	#chart-top-services_table .tb-cell.type { display: none; }

	.douchart .control-panel { flex-wrap: wrap; }
	.douchart .control-panel .ctrl-item { margin-bottom: 7px; }

	#chart-top-services_table { overflow-x: scroll; }
	#chart-top-services_table .tb-thead, #chart-top-services_table .tb-tbody { min-width: 350px; }
	/* #chart-top-services_table .tb-row { min-width: 300px;  } */
	#chart-top-services_table .tb-cell.rate { min-width: 20px;  }
	#chart-top-services_table .tb-cell.company { min-width: 100px; }
	#chart-top-services_table .tb-cell.staffTotal { min-width: 75px; }
	#chart-top-services_table .tb-cell.staffTech { min-width: 40px; max-width: unset; text-align: left; }
}

#chart-top-services_cities svg { overflow: visible; }

.flow .header line,
.flow .header path {
	fill: none;
	stroke: #b3b3b3;
	stroke-width: .75;
}
.flow .header text {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	fill: #808080;
}
.flow .row {
	transition: opacity .25s;
}
.flow .row .row-back, .flow .row-back {
    fill: #f2f2f2;
    opacity: 0;
}
.flow .label {
	font-size: 15px;
	user-select: none;
	transition: fill .25s;
	text-anchor: start;
	fill: #3d3d3d;
}
.flow .label-value.context { 
	fill: var(--purple); 
	font-style: italic;
}
.flow .label-value {
	text-anchor: end;
	fill: #666666;
	stroke: white;
	paint-order: stroke;
	stroke-width: 5px;
	stroke-opacity: .95;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.flow .disabled { pointer-events: none; }
.flow .disabled .label {
	fill: #d6d6d6;
	font-style: italic;
}
.flow .row.fade {
	opacity: .3;
}

.flow path.link {
	fill: none;
	stroke: #808080;
	stroke-width: .5;
	stroke-opacity: .25;
	transition: stroke-width .25s, stroke-opacity .25s;
}
.flow path.link.fade {
	stroke-width: .1!important;
	stroke-opacity: .1;
}
.flow path.link.highlighted {
	stroke-width: 1.5;
	stroke-opacity: .75;
}
.flow .row:hover .row-back,
.douchart .row.highlighted .row-back { opacity: 0; }
.flow circle.point { 
	fill: #808080;
}
.flow circle.share { 
	stroke: var(--purple);
	stroke-width: .8;
	stroke-opacity: 1;
	fill: var(--purple);
	fill-opacity: .25;
}

.flow.dark .row .row-back, .flow .row-back { fill: var(--dark-bg-lighter); }
.flow.dark .label { fill: var(--dark-text); }
.flow.dark .label-value { fill: var(--dark-text); stroke: var(--dark-bg); }
.flow.dark .disabled .label { fill: var(--dark-text-alfa); }
.flow.dark path.link { stroke: var(--dark-text); }
.flow.dark circle.point { fill: var(--dark-text); }