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

#douchart-tooltip .tt-period,
#douchart-tooltip .tt-title { 
	margin: 3px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	line-height: 16px;
	color: #B0B0B0;
}
#douchart-tooltip .tt-title { word-wrap: break-word; }
#douchart-tooltip .tt-period.underlined { padding-bottom: 0; }

#douchart-tooltip .tt-value span { font-weight: bold; }
#douchart-tooltip .column .tt-value { font-weight: bold; }
#douchart-tooltip .column .tt-name { 
	font-size: 14px;
	line-height: 16px;
}
#douchart-tooltip .tt-note {
	font-size: 14px;
	color: #999;
	word-wrap: break-word;
}
#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 .upperlined {
	padding-top: 5px;
	border-top: 1px solid #4d4d4d;
	margin-top: 7px;
}

#douchart-tooltip .tt-header {
	word-wrap: break-word;
}
#douchart-tooltip .tt-rows .option { margin-top: 5px; }
#douchart-tooltip .tt-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 7px;
}
#douchart-tooltip .tt-row.compact {
	font-size: 13px;
	line-height: 14px;
	margin-bottom: 5px;
}
#douchart-tooltip .tt-row.column {
	flex-direction: column;
	gap: 0;
}
#douchart-tooltip .tt-row.spaced { justify-content: space-between; }
#douchart-tooltip .tt-row-group {
	display: flex;
	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: -5px 0 0 -3px;
	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; 
}


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

.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.experience .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-filter-button.disabled {
	pointer-events: none;
	opacity: .3;
}


/*   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;
	gap: 5px 15px;
}

.douchart_infoline.right { justify-content: end; }
.douchart_infoline.bottom { align-items: end; }

.douchart_infoline .douchart_note {
	min-width: 90px;
	margin-bottom: 3px;
}

.douchart_color-legend { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    line-height: 15px;
    color: #3d3d3d;
	display: flex; 
	flex-wrap: wrap;
	gap: 7px 15px;
	margin-bottom: 5px;
}
.douchart_color-legend .item { 
	display: flex; 
	line-height: 14px;
}
.douchart_color-legend .item.hidden { display: none; }
.douchart_color-legend .item-mark { 
	margin: 2px 3px 0 0;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}


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

    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
    
    padding: 10px 0 0;
    border-top: 1px solid #eee;
    margin: 10px 0 15px;
}
.douchart_note {
	font-size: 12px;
	font-style: italic;
	color: #8d8d8d;
}



/*   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 .row { cursor: help; }
.douchart .row .row-back,
.douchart .row-back { fill: #f2f2f2; opacity: 0; }

.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,
.douchart .row.highlighted .label-name { font-weight: bold; }
.douchart .row:hover .label-value { 
	font-weight: bold;
	/* stroke: #f2f2f2; */
}

.douchart .axis.y line {
	shape-rendering: crispEdges;
    stroke-width: 1;
    stroke-opacity: .1;
}
.douchart .axis.y line.baseline,
.douchart .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 .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 .overlay {
	opacity: 0;
	cursor: help;
}

.douchart.switchers .header line,
.douchart.switchers .header path {
	fill: none;
	stroke: #b3b3b3;
	stroke-width: .75;
}
.douchart.switchers .header text {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-style: italic;
	fill: #808080;
}
.douchart.switchers .row {
	transition: opacity .25s;
}
.douchart.switchers .label {
	font-size: 15px;
	user-select: none;
	transition: fill .25s;
}
.douchart.switchers .label-value {
	text-anchor: end;
	fill: #0ca9a1; 
}
.douchart.switchers .row.fade .label-value {
	fill: #666666; 
}
.douchart.switchers .targets .label-value {
	fill: #666666;
}
.douchart.switchers .label-value.context { 
	fill: #8d8d8d;
	font-style: italic;
}
.douchart.switchers .label-value {
	stroke: white;
	paint-order: stroke;
	stroke-width: 5px;
	stroke-opacity: .95;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.douchart.switchers .disabled { pointer-events: none; }
.douchart.switchers .disabled .label {
	fill: #d6d6d6;
	font-style: italic;
}
.douchart.switchers .row.fade {
	opacity: .3;
}
.douchart.switchers .row.fade .label-value.context {
	fill: #fff;
}
.douchart.switchers line.bar {
	fill: none;
}
.douchart.switchers line.bar-base {
	stroke: #e8e8e8;
	stroke-width: 15px;
}
.douchart.switchers line.bar-progress {
	stroke: #d6d6d6;
	stroke-width: 15px;
	transition: stroke .25s;
}

.douchart.switchers line.bar-context {
	stroke: #06b9b1;
	stroke-width: 15px;
}
.douchart.switchers .row.fade line.bar-progress,
.douchart.switchers .row.fade line.bar-context {
	stroke: #8d8d8d;
}
.douchart.switchers path.link {
	fill: none;
	stroke: #3d3d3d;
	stroke-width: .5;
	stroke-opacity: .15;
	transition: stroke-width .25s, stroke-opacity .25s;
}
.douchart.switchers path.link.fade {
	stroke-width: .1!important;
	stroke-opacity: .1;
}
.douchart.switchers path.link.highlighted {
	stroke-width: 1.5;
	stroke-opacity: .75;
}
.douchart.switchers .row:hover .row-back,
.douchart .row.highlighted .row-back { opacity: 0; }
.douchart.switchers circle.point { 
	fill: #4d4d4d;
	/* stroke: #3d3d3d; */
	/* fill-opacity: .3; */
}
/* .douchart.switchers .highlighted circle.point { fill: #06b9b1; } */
.douchart.switchers circle.share { 
	stroke: #06b9b1;
	stroke-width: .75;
	stroke-opacity: 1;
	fill: #06b9b1;
	fill-opacity: .15;
}

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

	.douchart table { min-width: auto; }
	.douchart table tr { line-height: 14px; }

	.douchart table .bar, .douchart table .domen, .douchart table .desc { display: none; }
	.douchart table .satisfaction .value-label { width: 100%; }

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

}

#chart-newbies_portrait {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}
#chart-newbies_portrait img {
	width: 100%;
	max-width: 400px;
}
@media screen and (max-width: 1260px) {
	#chart-newbies_portrait img { max-width: 310px; }
}
@media screen and (max-width: 740px) {
	#chart-newbies_portrait img { 
		max-width: 600px; 
		margin-left: auto;
		margin-right: auto; 
	}
}
@media screen and (max-width: 620px) {
	#chart-newbies_portrait img {
		margin-right: 0 !important;
		margin-left: 0 !important;
		max-width: unset !important;
	}
}


.douchart line.reference-median {
    fill: none;
    stroke: #000;
    stroke-opacity: .2;
    shape-rendering: crispEdges;
}
.douchart .row.under-median rect.bar {
    fill: #90D5C6 !important;
}
.douchart.switchers .annotation {
	pointer-events: none;
}
.douchart.switchers .annotation text {
	font-size: 13px;
	font-style: italic;
	fill: #404040;
	stroke: white;
	paint-order: stroke;
	stroke-width: 8px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.douchart.switchers .annotation .arrow polyline {
	fill: none;
	stroke: #3d3d3d;
	stroke-opacity: .75;
	stroke-width: 1.5px;
}

.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 .range {
	fill: none;
	stroke: #0d0d0d;
	stroke-opacity: .2;
	stroke-width: 4px;
	shape-rendering: crispEdges;
}
.rangechart .range {
	fill: none;
	/* stroke: #0d0d0d; */
	stroke-opacity: .2;
	/* stroke-width: 4px; */
	shape-rendering: crispEdges;
}
.rangechart .median {
	fill: none;
	stroke: #0d0d0d;
	stroke-opacity: .2;
	stroke-width: 3px;
	stroke-linecap: round;
	/* shape-rendering: crispEdges; */
}
.rangechart .point-median {
	opacity: .6;
}
.douchart .row-guideline {
	shape-rendering: crispEdges;
	stroke: #303030; 
    stroke-opacity: .1;
}
.douchart_color-legend .item.median .item-mark {
	display: flex;
	align-items: center;
	justify-content: center;
}
.douchart_color-legend .item.median .item-mark::after { 
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 10px;
	background: #000000;
	opacity: .6;
}
.douchart_color-legend .item.median .item-name {
	font-style: italic;
	opacity: .6;
}

#douchart-tooltip .tt-option {
	display: flex;
	gap: 5px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 14px;
	margin-bottom: 8px;
}
#douchart-tooltip .tt-option:not(:last-child) .tt-option-info {
	padding-bottom: 6px;
	border-bottom: 1px #2d2d2d solid;
}
#douchart-tooltip .tt-option-mark {
	width: 8px;
	min-width: 8px;
	height: 8px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	margin-top: 3px;
}
/* #douchart-tooltip .tt-option-name {

} */
#douchart-tooltip .tt-option-values {
	margin-bottom: 4px;
}
#douchart-tooltip .tt-option .tt-value {
	font-weight: bold;
}
#douchart-tooltip .tt-option .tt-note {
	font-size: 12px;
	font-style: italic;
}

.douchart.stacked .row *:not(.row-back), .douchart.stacked .chart .option { pointer-events: none; }
.douchart.stacked .bar rect { 
	stroke: white; 
	stroke-width: 1px;
}
.douchart.stacked .label-name { text-anchor: end; }
.douchart.stacked .label-value {
	font-size: 14px;
	font-style: italic;
	fill: white;
	fill-opacity: .8;
	stroke: none;
	pointer-events: none;
}

.douchart_btn {
	display: inline-block;
	font-size: 13px;
    line-height: 15px;
    padding: 7px 10px 8px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #b2b2b2;
    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_btn:hover {
	background-color: #e2e2e2;
}
.douchart_btn:active {
	background-color: #3d3d3d;
	color: #fff;
}