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

:root {
    --color-green-02: #06b9b133;
    --color-green-03: #06b9b14D;
    --color-green: #06b9b1;
    --color-green-dark: #1d7872;
    --color-red: #eb4247;
    --color-red-02: #eb424733;
    --color-red-03: #eb42474D;
    --color-red-dark: #762124;
}

.douchart { width: 100%; }

/*   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: 200px;
	background: black;
	color: white;
	padding: 8px 15px 12px;
	box-shadow: 10px 10px 0 #00000044;
}

#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-period.underlined { padding-bottom: 0; }
#douchart-tooltip .tt-value span { font-weight: bold; }
#douchart-tooltip .tt-note {
	font-size: 14px;
	color: #999;
	/* margin-bottom: 10px; */
}
#douchart-tooltip .tt-footer {
	font-size: 12px;
	font-style: italic;
	color: #999;
	border-top: 1px solid #4d4d4d;
	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 .tt-header {
	font-size: 12px;
	color: #999;
}
#douchart-tooltip .underlined {
	padding-bottom: 5px;
	border-bottom: 1px solid #4d4d4d;
	margin-bottom: 7px;
}
#douchart-tooltip .upperlined {
	padding-top: 5px;
	border-top: 1px solid #4d4d4d;
	margin-top: 10px;
}

#douchart-tooltip .tt-rows .option { 
	margin-top: 5px; 
}
#douchart-tooltip .tt-row {
	display: flex;
	align-items: baseline;
	gap: 7px;
}
#douchart-tooltip .tt-row.compact {
	font-size: 13px;
	line-height: 14px;
	margin-bottom: 5px;
}
#douchart-tooltip .tt-row.spaced { justify-content: space-between; }
#douchart-tooltip .tt-row-group {
	display: flex;
	/* align-items: flex-start; */
	align-items: baseline;
	gap: 5px;
}
#douchart-tooltip .tt-mark {
	width: 10px;
	min-width: 10px;
	height: 10px;
	border-radius: 8px;
}

#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: -2px 0 5px;
	color: #cdcdcd;
}
#douchart-tooltip .tt-row-group .tt-diff {
	margin: -8px 0 0 -1px;
}
#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-count,
#douchart-tooltip .tt-vacancies { 
	font-size: 12px; 
	font-style: italic; 
	color: #b0b0b0; 
}
#douchart-tooltip .tt-row.compact .tt-row-group .tt-name {
	font-size: 12px;
}
#douchart-tooltip .tt-row.compact .tt-value {
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}


/*   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.categories {
	margin-bottom: 10px;
}
.douchart_controls.mobile {
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.douchart_controls.grouped {
    flex-direction: column;
}
.douchart .douchart_controls .items-group {
    display: flex; 
    flex-wrap: wrap;
    gap: 2px;
}
.douchart .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 .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: var(--color-green-dark);
	background-color: var(--color-green-02);
    border-color: var(--color-green-03);
    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: end;
    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; }

@media screen and (max-width: 620px) {
	.douchart_infoline {
		gap: 7px;
		flex-direction: column;
		align-items: flex-start;
	}
}

.douchart_infoline .douchart_total-count { 
	text-align: right;
	white-space: nowrap;
}

.douchart_color-legend { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
	display: inline-block;
}
.douchart_color-legend_iteractive-message {
	display: flex;
	margin-bottom: -6px;
	pointer-events: none;
}
.douchart_color-legend_iteractive-text {
	font-family: 'Roboto Condensed', sans-serif;
	font-style: italic;
    font-size: 13px;
    line-height: 15px;
    color: #a3a3a3;;
}
.douchart_color-legend .item { 
	display: inline-block;
	padding: 0 15px 0 0;
	line-height: 14px;
}
.douchart_color-legend.interactive .item { cursor: help; }
.douchart_color-legend.interactive .item:hover { font-weight: bold; }
.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;
	transition: background-color .2s ease;
}
.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_color-legend .item.faded .item-mark { background-color: #d2d2d2!important; }


/*   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: 15px;
    line-height: 18px;
    fill: #303030;
}
@media screen and (max-width: 700px) {
	.douchart .label-name { font-size: 13px; }
	.douchart .label-value { font-size: 13px; }
}

.douchart.progress .label-value {
	fill: white;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: .85;
	stroke-linecap: round;
	stroke-linejoin: round;
	font-size: 14px;
	font-style: italic;
	fill-opacity: .8;
	pointer-events: none;
}
.douchart .secondary .label-value {
	font-size: 14px;
	font-style: italic;
	opacity: .6;
}
.douchart .label-diff { 
	text-anchor: start; 
	font-size: 12px;
	font-style: italic;
}
.douchart.stacked .row *:not(.row-back),
.douchart.stacked .chart .option,
.douchart .stacked .row *:not(.row-back),
.douchart .stacked .chart .option { pointer-events: none; }
.douchart.stacked .bar rect,
.douchart .stacked .bar rect { 
	stroke: white; 
	stroke-width: 1px;
}
.douchart.stacked .label-name { text-anchor: end; }
.douchart.stacked .label-value,
.douchart .stacked .label-value {
	font-size: 14px;
	font-style: italic;
	fill: white;
	fill-opacity: .8;
	stroke: none;
	pointer-events: none;
}
.douchart.grouped .label-value-total {
	font-size: 14px;
	font-style: italic;
	fill: #3d3d3d;
	fill-opacity: .8;
	stroke: none;
	pointer-events: none;
}

.douchart.grouped line.ref-total {
	fill: none;
	stroke: #3d3d3d;
	stroke-width: 2;
	stroke-opacity: .2;
	shape-rendering: crispEdges;
}
.douchart.grouped rect.bar-total {
	fill: #3d3d3d;
	fill-opacity: .1;
}
.douchart.grouped .bar { transition: fill .2s ease; }
.douchart.grouped .bar.faded {
	fill: #d2d2d2!important;
}
.douchart.grouped.packed .label-value {
	/* font-size: 14px; */
	font-style: italic;
	stroke: white;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: .85;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* fill-opacity: .8; */
	/* stroke: none; */
	pointer-events: none;
}
.douchart .baseline {
	fill: none;
	stroke: #3d3d3d;
	opacity: .8;
	shape-rendering: crispEdges;
}
.douchart .row { cursor: help; }
.douchart .row .row-back { fill: rgba(0,0,0,.05); opacity: 0; }
.douchart .row:nth-child(even) .row-back {
	fill: rgba(0,0,0,.08); opacity: .4;
}

.douchart .row.total line.bottomline { fill: none; stroke: #ccc; }
.douchart .row.total .label-name { font-weight: bold; }

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

.linechart .line path.tm-area {
	stroke: none;
}
.linechart .line path.tm-line {
	fill: none;
	stroke: #06b9b1;
	stroke-width: 3px;
}
.linechart .mark circle {
	fill: #06b9b1;
	stroke: #06b9b1;
	stroke-opacity: .3;
	stroke-width: 10px;
}
.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;
}
.linechart .mark text.label-name {
    font-size: 16px;
    font-weight: bold;
}
.linechart .mark text.label-value {
    font-size: 12px;
    font-style: italic;
}
.areachart .answers path { stroke: white; }

.linechart .refline,
.areachart .refline {
	shape-rendering: crispEdges;
	fill: none;
	stroke: #0d0d0d;
    stroke-dasharray: 3 2;
    stroke-linecap: round;
}

.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: .2;
}
.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 .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 marker circle { fill: #06b9b1; }
.douchart.linechart .small-multiplies .label-value {
	paint-order: stroke;
	stroke: white;
	stroke-width: 3px;
	stroke-opacity: .8;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.douchart.linechart .small-multiplies .label-value.middle { 
	font-size: 12px; 
	text-anchor: middle;
}
.douchart.linechart .small-multiplies .label-value.first { text-anchor: start; font-size: 12px; }
.douchart.linechart .small-multiplies .label-value.last { 
	text-anchor: end; 
	font-weight: bold;
}
.douchart.linechart .small-multiplies .up .line path.highlighted { stroke: #eb4247; }
.douchart.linechart .small-multiplies .up marker circle,
.douchart.linechart .small-multiplies .up .label-value.last { fill: #eb4247; }
.douchart.linechart .small-multiplies .down .line path.highlighted { stroke: #06b9b1; }
.douchart.linechart .small-multiplies .down marker circle,
.douchart.linechart .small-multiplies .down .label-value.last { fill: #06b9b1; }
.douchart.linechart .small-multiplies .default .line path.highlighted { stroke: #404040; }
.douchart.linechart .small-multiplies .default marker circle,
.douchart.linechart .small-multiplies .default .label-value.last { 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 table { 
	width: 100%;
	/* min-width: 640px; */
	max-width: 460px;
	border-spacing: 0;
	border-collapse: separate;
	font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
	font-size: 14px;
	word-break: normal;
	position: relative;
}
.douchart table th { 
	font-size: 12px;
	line-height: 12px;
	font-weight: normal;
	color: #4d4d4d;
	text-align: left;
	padding: 8px 5px 6px;
	vertical-align: bottom;
	position: sticky;
	top: -1px;
	background: white;
	z-index: 120;
	border-bottom: 1px solid #3d3d3d;
}
.douchart table th:not(:nth-child(1)) {
	text-align: right;
}
.douchart table th.rate {
	text-align: right;
	padding-right: 10px;
}
.douchart table th.sortable { 
	padding-left: 17px;
	cursor: pointer;
}
.douchart table th .indicators {
	font-style: italic;
	font-size: 11px;
	line-height: 12px;
	color: #8d8d8d;
	display: block;
	margin-top: 3px;
}

.douchart table th.sortable::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path fill='%23C2C2C2' d='M0,0,8,0,4,7,0,0'/></svg>");
	margin: 0 3px 0 -11px;
}
.douchart table th.sortable.sorted::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path fill='%233D3D3D' d='M0,0,8,0,4,7,0,0'/></svg>");
}
.douchart table th.region.sortable::before { transform: rotate(180deg) translateY(1px); }
.douchart table th.sortable:hover::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path fill='%238D8D8D' d='M0,0,8,0,4,7,0,0'/></svg>");
}
.douchart table th.sortable.sorted {
	font-weight: bold;
	pointer-events: none;
}
.douchart table th.sorted { background-color: #f8f8f8; }
.douchart table td.sorted { 
	background-color: #3D3D3D09; 
	/* font-weight: bold; */
}

/* .douchart table th.rating,
.douchart table td.col-0 {
	padding-left: 5px;
	max-width: 50px;
	text-align: right;
} */

.douchart table td.col-1,
.douchart table td.col-2,
.douchart table td.col-3,
.douchart table td.col-4 {
	text-align: right;
}

.douchart table td { 
	padding: 5px 5px 6px;
	vertical-align: top;
	border-bottom: 1px solid #3d3d3d26;
}
.douchart table .total td {
	border-top: 1px solid #3d3d3d;
	border-bottom: none;
	font-weight: bold;
}

.douchart table .table-total .col-1 { padding-left: 73px;  }

.douchart table td a,
.douchart table td a:visited {
	color: #3d3d3d;
	text-decoration: none;
}
.douchart table td a:hover { color: #eb4247; }

.douchart table .assumption {
	background-image: url('i/pattern-assumptions_7x7.svg');
	background-size: 7px 7px;
}


.douchart table .col-0 .wrapper { 
	display: flex;
	align-items: center;
	gap: 3px;
}
.douchart table .col-0 span { display: inline-block; }
.douchart table .col-0 .rate-num {
	width: 35px;
	text-align: right;
}
.douchart table .name-row {
	display: flex;
	gap: 5px;
}

.douchart table .company-dou-data {
	display: inline-block;
	background-color: #3D3D3D22;
	border: 1px solid #6D6D6D;
	color: #3D3D3D;
	font-size: 9px;
	line-height: 13px;
	width: 13px;
	min-width: 13px;
	height: 13px;
	border-radius: 100%;
	text-align: center;
	position: relative;
	top: -3px; left: 0;
}
.douchart table .company-dou-data:hover { 
	background-color: #3d3d3d; 
	border-color: #3d3d3d; 
	color: white; 
}
.douchart table .row-rating {
	display: flex;
	/* align-items: center; */
	gap: 5px;
}
.douchart table .row-rating .rate-wrapper {
	width: 100%;
	/* max-width: 35px;s */
	text-align: right;
}
.douchart table .row-rating .rate-charts {
	width: 100%;
	font-size: 12px;
	line-height: 12px;
	color: #8d8d8d;
}
.douchart table .row-rating .rate-charts .table-chart {
	display: flex;
	align-items: center;
	gap: 3px;
}
.douchart table .row-rating .rate-charts .table-chart .tc-value {
	width: 40px;
	text-align: right;
}
.douchart table .row-rating .rate-charts .table-chart .tc-bar {
	width: 100%;
	max-width: 100px;
	height: 10px;
}
.douchart table .row-rating .rate-charts .table-chart .tc-bar-progress {
	width: 100%;
	height: 10px;
}
.douchart table .row-rating .rate-charts .table-chart.normalised {
	margin-top: 3px;
}
.douchart table .row-rating .rate-charts .table-chart.normalised .tc-bar {
	background-color: #3d3d3d20;
	height: 2px;
	
}
.douchart table .row-rating .rate-charts .table-chart.normalised .tc-bar-progress {
	position: relative;
	height: 4px;
	top: -1px;
}
.douchart table .row-rating .rate-charts .table-chart.no-data .tc-bar-progress { display: none; }

.douchart table .domain { max-width: 250px; }
.douchart table .domain .wrapper,
.douchart table .company-domains {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 5px;
}
.douchart table .domain .wrapper { margin-top: 2px; }
.douchart table .company-domains { margin-bottom: 15px; display: none; }
.douchart table .company-details.global { 
	padding-bottom: 8px;
	border-bottom: 1px solid #E2E2E2;
	margin-bottom: 12px;
}
.douchart table .domain .item,
.douchart table .company-domains .item {
	font-size: 12px;
	line-height: 12px;
	color: #6c6c6c;
	cursor: default;
}
.douchart table .domain .item:not(:last-child)::after {
	content: "|";
	display: inline-block;
	margin-left: 5px;
}

.douchart table .cell-bar-chart {
	width: 80px;
	height: 3px;
}
.douchart table .cell-bar-chart .bar-progress {
	height: 3px;
	background: linear-gradient(to left, #4982c5, #4982c54D);	
}

.douchart table .staffTotal .wrapper { 
	display: flex;
}
.douchart table .staffTech { padding-right: 5px; }
.douchart table .staffTotal { padding-left: 15px; }
.douchart table .staffTotal-chart { 
	margin-left: 8px;
	margin-top: 3px;
}
.douchart table .staffTotal-chart path.area {
	fill-opacity: .1;
	stroke: none;
}
.douchart table .staffTotal-chart path.area.tech { fill-opacity: .25; }
.douchart table .staffTotal-chart line.baseline {
	fill: none;
	stroke: #000;
	stroke-width: 1;
}
.douchart table .staffTotal-chart path.line {
	fill: none;
	stroke-width: 1;
}
.douchart table .staffTotal-chart rect {
	cursor: help;
	opacity: 0;
}

.douchart table .no-rating {
	font-style: italic;
	color: #6d6d6d;
}

.douchart table .company-dou-data,
.douchart table .rate-symb.negative,
.douchart table .rate-symb.positive { cursor: help; }
.douchart table .staffTech-value,
.douchart table .staffTotal-value {
	white-space: nowrap;
}
.douchart table .staffTotal-diff {
	font-size: 11px;
	position: relative;
	top: -3px;
	left: 3px;
	white-space: nowrap;
}
.douchart table .staffTotal-period {
	font-size: 12px;
	line-height: 12px;
	color: #b3b3b3;
	margin-top: -2px;
	opacity: 0;
}
.douchart table .staffTotal-info {
	width: 100%;
	max-width: 80px;
}
.douchart table .staffTech-diff {
	font-size: 11px;
	position: relative;
	top: -3px;
	left: 3px;
}
.douchart table .staffTech-share-chart,
.douchart table .staffTotal-share-chart {
	width: 80px;
	height: 12px;
	background: #0000001A;
	cursor: help;
}
.douchart table .staffTech-share-chart *,
.douchart table .staffTotal-share-chart * { pointer-events: none; }
.douchart table .staffTech-share-progress,
.douchart table .staffTotal-share-progress {
	height: 12px;
	background: linear-gradient(to left, #4982c5, #4982c54D);	
	position: relative;
}
.douchart table .staffTotal-share-progress {
	background: linear-gradient(to left, #6D6D6D, #C2C2C2);	
}
.douchart table .staffTech-share-label,
.douchart table .staffTotal-share-label {
	font-size: 11px;
	font-style: italic;
	position: absolute;
	right: 2px;
	text-align: right;
	color: white;
	opacity: .75;
}
.douchart table .staffTech-share-label.inversed,
.douchart table .staffTotal-share-label.inversed {
	left: 100%;
    margin-left: 2px;
	color: #4982c5;
	opacity: .9;
}
.douchart table .staffTotal-share-label.inversed { color: #6D6D6D; }

.douchart table .button .wrapper {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
}
.douchart table .button svg { cursor: pointer; }
.douchart table .button circle {
	fill: #3d3d3d;
	fill-opacity: .1;
	transition: fill-opacity .1s;
}
.douchart table .button line {
	fill: none;
	stroke: #6d6d6d;
	line-clamp: round;
	transition: stroke .1s;
}
.douchart table .active .button circle { fill-opacity: .8; }
.douchart table .active .button line { stroke: white; stroke-width: 1.5; }
.douchart table .button svg:hover circle { fill-opacity: .2; }
.douchart table .button svg:hover line { stroke: #3d3d3d; }
.douchart table .active .button svg:hover circle { fill-opacity: 1; }
.douchart table .active .button svg:hover line { stroke: white; }

.douchart table .details { 
	display: inline-block;
	padding: 0; 
	width: 0; 
	position: relative; 
}
.douchart table .details .wrapper-relative {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 0px;
    overflow: hidden;
	padding: 0;
	z-index: 100;
	border-bottom: none;
}
.douchart table .details .wrapper {
	padding: 12px 20px 18px 42px;
    margin: 0 5px 7px;
    background: white;
    border-radius: 5px;
}
.douchart table .details h4 {
	font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .075em;
}
.douchart table .details p,
.douchart table .details li {
	font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
	font-size: 15px;
	line-height: 20px;
}
.douchart table .details p { padding-bottom: 8px; }
.douchart table .details li { padding-bottom: 0; margin-bottom: 6px; }
.douchart table .details p+ul { margin-top: -2px; }
.douchart table tr.active .company-row img.company-logo {
	filter: grayscale(0) opacity(1);
}

.douchart table .table-total td {
	font-weight: bold;
	border-top: 1px solid #3d3d3d;
	border-bottom: none;
}
.douchart table .table-total:hover { background: none; }
.douchart table tbody tr:hover { background-color: #0F8A8A10; }

@media screen and (max-width:760px) {
	.last-answers .answer-info { pointer-events: none;  }
	.answer-info { 
		stroke: #fff;
		paint-order: stroke;
		stroke-width: 4px;
		stroke-opacity: .9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

.answer-info .diff-label { 
	font-style: italic; 
	font-size: 12px;
	fill:  #eb4247;
}
.answer-info .diff-label.positive { fill: #06b9b1; }
.answer-info .diff-label.negative { fill: #eb4247; }

.widget .chart-controls { flex-wrap: wrap; }
.widget .label-name { 
	text-anchor: middle;
	fill: #333;
	font-size: 13px;
}
.widget .bars .label-value { 
	text-anchor: middle; 
	font-size: 15px;
}
.widget line.baseline { 
	fill: none; 
	stroke: #333; 
	stroke-width: 1; 
	shape-rendering: crispEdges; 
}
.widget .bar rect { fill: #06b9b1; }

.douchart:hover .annotation { pointer-events: none; }
.douchart .annotation .note { opacity: .9; }
.douchart svg:hover .annotation .note { 
	opacity: 0;
	transition: opacity .6s; 
}
.douchart .annotation .note text {
	font-family: "Roboto Condensed", "Roboto", sans-serif;
	font-size: 13px;
	font-weight: 300;
	fill: #303030;

	stroke: #fff;
    paint-order: stroke;
    stroke-width: 5px;
    stroke-opacity: .6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.douchart .annotation .note path {
	fill: none;
	stroke: #303030;
	stroke-width: .5;
}

#chart-socdem {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}
#chart-socdem object {
	width: 100%;
	max-width: 400px;
}

#chart-salary-6k_widget {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 30px;
	margin-bottom: 30px;

	box-sizing: border-box;
	padding: 20px 15px 15px;
	background-color: #f2f2f2;
	/* border: 1px solid #e2e2e2; */
	border-radius: 10px;
}


.widget .widget-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 15px 20px;
	/* flex-shrink: 1; */
}

.widget .widget-filters .filter-box {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	/* min-width: 220px; */
	max-width: 250px;
}

.widget .widget-filters label { 
	cursor: default;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
	/* text-transform: uppercase; */
}

.widget .widget-filters .filter-box select {
    padding: 6px 8px 6px 6px;
    background-color: white;
    border: 1px #d8d8d8 solid;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box !important;
    font-size: 16px;
    line-height: 20px;
    color: #3d3d3d;
}
.widget .widget-filters .filter-box.button-box {
	display: flex;
	justify-content: start;
	align-items: start;
}
.widget .widget-filters .filter-button {
	display: inline-block;
	padding: 5px 15px;
	border-radius: 5px;
	background-color: #4d4d4d;
	color: #e8e8e8;
	cursor: pointer;
	transition: all .25s;
}
.widget .widget-filters .filter-button:hover {
	background-color: #2d2d2d;
	color: #ffffff;
}
.widget .widget-filters .filter-button.unactive {
	pointer-events: none;
	background-color: #e6e6e6;
	color: #9d9d9d;
}
.widget .widget-result {
	width: 100%;
	background-color: #06B9B1;
	color: white;
	border-radius: 10px; 
}
.widget .widget-result .wrapper {
	box-sizing: border-box;
	padding: 15px 20px 25px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.widget .widget-result .label {
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 5px;
}
.widget .widget-result .value {
	font-family: Roboto Condensed;
	font-size: 72px;
	line-height: 76px;
	font-weight: bold;
}
.widget .widget-result .count {
	margin-top: 15px; 
	border-top: 1px solid #ffffff;
	padding-top: 6px;
	font-size: 14px;
	line-height: 16px;
	font-style: italic;
	opacity: .8;
}
#chart-salary-6k_widget.compact {
	flex-direction: column;
}
.widget .widget-result { text-align: center; }
/* .widget.compact .widget-result { text-align: center; } */


@media screen and (max-width: 1280px) {
	.widget .widget-filters .filter-box { max-width: 295px; }
	.widget .widget-filters .filter-box.button-box {
		margin-top: 15px;
		justify-content: start;
		align-items: start;
	}
}

@media screen and (max-width: 740px) {
	#chart-socdem object { 
		max-width: 600px; 
		margin-left: auto;
		margin-right: auto; 
	}
	.widget .widget-filters .filter-box { max-width: 250px; }
}

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

	#chart-socdem object {
		margin-right: 0 !important;
		margin-left: 0 !important;
		max-width: unset !important;
	}
	
	.douchart table .col-3 { width: 100px; }
	.douchart table th:last-child { padding-right: 10px!important; }
	.douchart table th .diff-cell { 
		text-align: right;
		justify-content: end;
	}
	.douchart table .diff-cell { position: inherit; display: flex; gap: 5px; align-items: center; }
	.douchart table .diff-cell .diff-bar,
	.douchart table .diff-cell .diff-baseline { display: none; }
	.douchart table .diff-cell .diff-label { position: inherit; width: 100%; display: block; }
	.douchart table .diff-cell .diff-marker { display: block; }

	.widget .widget-filters .filter-box { max-width: unset; }

}

.douchart-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    width: 100%;
}
.module-chart { 
	width: 100%;
	max-width: 300px;
}
.module-chart .chart-back {
	fill: #F8F8F8;
}
.module-chart .chart-title {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: bold;
	fill: #303030;
}
.module-chart .chart-count {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	fill: #8C8C8C;
}
.module-chart .chart-subtitle {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	/* text-transform: uppercase; */
	/* letter-spacing: .05em; */
	font-style: italic;
	fill: #8C8C8C;
}
.module-chart .card-label-name,
.module-chart .card-label-value {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
}
.module-chart .card-label-name {
	fill: #303030;
}
.module-chart .card-label-value {
	text-anchor: end;
}
.module-chart .piechart .card-label-value {
	text-anchor: middle;
	font-size: 18px;
	font-weight: bold;
}
.module-chart .barchart .card-label-value { 
	text-anchor: start;
	font-size: 16px;
	font-weight: bold;
}
.module-chart .histogram .bar { shape-rendering: crispEdges; }
.module-chart .histogram .card-label-median .card-label-value {
	text-anchor: start;
	font-size: 30px;
	fill: #06B9B1;
}
.module-chart .histogram .x-axis .card-label-value {
	text-anchor: middle;
	font-size: 14px;
	font-weight: 300;
	fill: #999999;
}
.module-chart .histogram .card-note {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	font-style: italic;
	fill: #3d3d3d;
	opacity: .6;
	text-anchor: middle;
	stroke: #F8F8F8;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.module-chart .card-color-label {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	fill: #6D6D6D;
}
.module-chart .total-mark rect {
	fill: #3d3d3d;
    fill-opacity: .1;
}
.module-chart .total-mark line {
	fill: none;
	stroke: #3d3d3d;
    stroke-width: 2;
    stroke-opacity: .2;
    shape-rendering: crispEdges;
}

.module-chart .chart.empty {
	pointer-events: none;
}
.module-chart .chart.empty .chart-back {
	fill: none;
	stroke: #E8E8E8;
	stroke-width: 1px;
	stroke-dasharray: 7px 3px;
}
.module-chart .chart.empty .chart-title,
.module-chart .chart.empty .chart-subtitle,
.module-chart .chart.empty .chart-count {
	fill: #C2C2C2;
}
.module-chart .chart.empty .chart-nodata {
	font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 16px;
	fill: #C2C2C2;
	text-anchor: middle;
}

@media screen and (max-width: 1260px) { .module-chart { max-width: 350px; } }
@media screen and (max-width: 1115px) { .module-chart { max-width: 315px; } }
@media screen and (max-width: 690px) { .module-chart { max-width: 270px; } }
@media screen and (max-width: 600px) { 
	/* .module-chart { max-width: unset; }  */
	.module-chart .card-label-name, .module-chart .card-label-value { font-size: 14px; }
}

#chart-job-market_widget {
	font-family: Roboto, Arial, sans-serif;
}

#chart-job-market_widget .dou-filter-wrapper {
	display: flex;
	gap: 20px;
	margin-bottom: 8px;
}
#chart-job-market_widget .dou-filter-wrapper fildset,
#chart-job-market_widget .dou-filter-wrapper select {
	width: 100%;
	
	/* max-width: 30%; */
}
#chart-job-market_widget .dou-filter-wrapper select {
	font-size: 13px;
    line-height: 13px;
	padding: 5px 2px;
}
#chart-job-market_widget .dou-filter-wrapper option.divider { color: #6D6D6D; }
#chart-job-market_widget .dou-filter-wrapper option:disabled {
	font-style: italic;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#chart-job-market_widget .dou-filter-wrapper legend {
	color: #3d3d3d;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	/* text-transform: uppercase; */
	/* letter-spacing: .2em; */
}
#chart-job-market_widget .dou-filter-specialization {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 3px;
}
#chart-job-market_widget .dou-filter-specialization.hidden {
	display: none;
}
#chart-job-market_widget .dou-filter-specialization .item {
	display: flex;
	align-items: baseline;
}
#chart-job-market_widget .dou-filter-specialization input {
	position: absolute;
    z-index: -1;
    opacity: 0;
}
#chart-job-market_widget .dou-filter-specialization input:checked+label {
	color: var(--color-green-dark);
    background-color: var(--color-green-02);
    border-color: var(--color-green-03);
    pointer-events: none;
}
#chart-job-market_widget .dou-filter-specialization label {
	font-size: 13px;
    line-height: 13px;
    padding: 7px 10px;
    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;
}
#chart-job-market_widget .dou-filter-specialization .disabled label {
	pointer-events: none;
	font-style: italic;
	color: #B2B2B2; 
}
#chart-job-market_widget .dou-filter-specialization label:hover {
	color: #0d0d0d;
    background-color: #f4f4f4;
}
#chart-job-market_widget .douchart-cards {
	margin-top: 25px;
}

@media screen and (max-width: 600px) { 
	#chart-job-market_widget .dou-filter-wrapper {
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 15px;
	}
}

.douchart-rating {
	max-width: 600px;
}
.douchart-rating .row {
	cursor: default;
}
.douchart-rating .sort-bg {
	fill-opacity: .05;
}
.douchart-rating text {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    fill: #303030;
	pointer-events: none;
}
.douchart-rating .header .active-zone {
	cursor: pointer;
}

.douchart-rating .header .sorted .active-zone { pointer-events: none; }
.douchart-rating .header text {
    font-size: 12px;
    fill: #808080;
}
.douchart-rating .sorted text { font-weight: bold; }
.douchart-rating .header polygon { fill: #c2c2c2; }
.douchart-rating .header .sorted text { fill: #3d3d3d; font-weight: normal; }
.douchart-rating .header .sorted polygon { fill: #3d3d3d;}


.douchart-rating .active-zone {
	fill-opacity: 0;
}
.douchart-rating .active-zone.info {
	cursor: help;
}
.douchart-rating .active-zone.info:hover {
	fill-opacity: .06;
}
.douchart-rating .row .row-back,
.douchart-rating .row:nth-child(even) .row-back { fill: rgba(0,0,0,.08); opacity: 0; }
.douchart-rating .row.shaded .row-back { fill: rgba(0,0,0,.08); opacity: .4; }
.douchart-rating .row:hover .row-back { fill: rgba(0,0,0,.05); opacity: 0; }
.douchart-rating .row.shaded:hover .row-back { fill: rgba(0,0,0,.08); opacity: .4; }

@media screen and (max-width: 768px) {
	#chart-entrance_rating table { min-width: auto; }
	#chart-entrance_rating table tr { line-height: 14px; }
	.douchart table .row-rating .rate-charts .table-chart .tc-bar { display: none; }
}

@media screen and (max-width: 620px) {
    .douchart table {
        margin-right: 0;
        margin-left: 0;
    }
}

@media screen and (max-width: 560px) {
	.douchart table .row-rating .rate-charts { display: none; }
	.douchart table th .indicators { display: none; }
	.douchart table .row-rating .rate-wrapper { padding-left: 10px; }
	/* .douchart table { min-width: 400px; } */
}