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

.douchart {
	width: 100%; 
	margin: 15px 0 30px;
    --color-green-02: #06b9b133;
    --color-green-03: #06b9b14D;
    --color-green: #06b9b1;
    --color-green-dark: #1d7872;
	--color-orange-02: #FF4F2333;
    --color-orange-03: #FF4F234D;
    --color-orange: #FF4F23;
    --color-orange-dark: #CC2900;
    --color-red: #eb4247;
    --color-red-02: #eb424733;
    --color-red-03: #eb42474D;
    --color-red-dark: #762124;
}

/*   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;
	z-index: 1000;
}
#douchart-tooltip.help-popup p {
	margin-bottom: 7px;
}
#douchart-tooltip.help-popup .legend {
	width: 600px;
	height: 400px;
	background: url(i/hr-brand-2024_funnel-legend.png) center no-repeat;
	background-size: cover;
}

#douchart-tooltip ul {
	padding-left: 15px;
	margin-top: 5px;
	margin-bottom: 7px;
}
#douchart-tooltip li {
	list-style: disc;
	margin-left: 0px;
	margin-bottom: 3px;
}

#douchart-tooltip .tt-period,
#douchart-tooltip .tt-group { 
	margin: 3px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	line-height: 16px;
	color: #a0a0a0;
}
#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 #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 svg.tt-trend {
	margin: 0 0 5px 3px;
	fill: none;
	overflow: visible;
}
.douchart .tt-trend { fill: none; }

#douchart-tooltip .tt-row.column {
	flex-direction: column;
	gap: 0;
}

#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-value .tt-diff {
	font-weight: normal;
	font-size: 10px;
	position: relative;
	top: -6px;
	left: 3px;
}
#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; 
}
#douchart-tooltip .tt-row-group.spaced {
	justify-content: space-between;
}
#douchart-tooltip .tt-row-group-name {
	display: flex;
	align-items: baseline;
	gap: 5px;
}
#douchart-tooltip .tt-mark {
	width: 10px;
	min-width: 10px;
	height: 10px;
	border-radius: 8px;
}
#douchart-tooltip .tt-count {
	font-style: italic;
	margin-bottom: 3px;
}

#douchart-tooltip.hr-brand {
	background: white;
	color: #3d3d3d;
	border: #b3b3b3 1px solid;
	border-radius: 3px;
	max-width: 200px;
	font-size: 12px;
	line-height: 15px;
	padding-bottom: 10px;
}
#douchart-tooltip.hr-brand .tt-header {
	background: #f2f2f2;
	margin: -8px -15px 10px;
	padding: 8px 15px 10px;
	border-radius: 3px 3px 0 0;
	display: flex;
	gap: 8px;
	font-family: 'Roboto Condensed', sans-serif;
}
#douchart-tooltip.hr-brand .tt-header .tt-logo {
	width: 58px;
	height: 26px;
	mix-blend-mode: multiply;
}
#douchart-tooltip.hr-brand .tt-header .tt-name,
#douchart-tooltip.hr-brand .tt-name {
	font-size: 14px;
	margin-bottom: 2px;
}
#douchart-tooltip.hr-brand .tt-name.strong {
	font-weight: bold;
}
#douchart-tooltip.hr-brand .tt-companies .tt-title {
	text-transform: uppercase;
	letter-spacing: .025em;
	font-size: 10px;
	color: #9d9d9d;
	margin-bottom: 2px;
}
#douchart-tooltip.hr-brand .tt-companies .tt-list { 
	font-size: 11px;
	line-height: 14px;
}

#douchart-tooltip.hr-brand .tt-row {
	font-family: 'Roboto Condensed', sans-serif;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 2px;
}
#douchart-tooltip.hr-brand .tt-answers.divided .tt-row:not(:last-child) {
	padding-bottom: 5px;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 6px;
}
#douchart-tooltip.hr-brand .tt-row.main-value {
	padding-bottom: 7px;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 8px;
}
#douchart-tooltip.hr-brand .tt-value { font-weight: bold; }
#douchart-tooltip.hr-brand .tt-value.nowrap { white-space: nowrap; }
#douchart-tooltip.hr-brand .tt-note {
	font-size: 11px;
	line-height: 12px;
	color: #9d9d9d;
	font-style: italic;
}
#douchart-tooltip.hr-brand .tt-row-name {
	display: flex;
	gap: 5px;
	align-items: baseline;
}
#douchart-tooltip.hr-brand .tt-row-name.column { flex-direction: column; gap: 0; }
#douchart-tooltip.hr-brand .tt-color-mark {
	width: 8px; min-width: 8px;
	height: 8px; min-height: 8px;
	border-radius: 8px;
}
 #douchart-tooltip.hr-brand .tt-footer {
	font-size: 11px;
	border-top-color: #d3d3d3;
	padding-top: 5px;
	margin-top: 8px;
}
#douchart-tooltip .underlined,
#douchart-tooltip .tt-name.underlined {
	padding-bottom: 5px;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 8px;
}
#douchart-tooltip .upperlined {
	padding-top: 5px;
	border-top: 1px solid #d3d3d3;
	margin-top: 7px;
}

#douchart-popup-cover {
	display: none;
	position: absolute;
	background: #ffffff99;
	backdrop-filter: blur(2px) grayscale(100%);
}
#douchart-popup {
	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: 540px;
	background: white;
	color: #3d3d3d;
	padding: 40px 8px 20px 20px;
	border: 1px solid #d3d3d3;
	box-shadow: 10px 10px 0 #00000044;
	z-index: 1000;
}
#douchart-popup #popup-title {
	position: absolute;
	top: 10px;
	left: 20px;
	font-size: 12px;
	color: #6d6d6d;
}
#douchart-popup #popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 12px;
	color: #6d6d6d;
	cursor: pointer;
}
#douchart-popup #popup-close::before {
	content: "\002715";
	margin-right: 5px;
	font-size: 10px;	
}
#douchart-popup #popup-close:hover {
	color: #0d0d0d;
}
#douchart-popup #popup-content {
	max-height: 360px;
	overflow-y: auto;
	padding-right: 10px;
}
#douchart-popup #popup-content h4 { 
	font-size: 18px; 
	font-weight: bold; 
	margin-bottom: 12px; 
}
#douchart-popup #popup-content p { margin-bottom: 8px; }
#douchart-popup #popup-content ul { 
	margin-top: -6px; 
	margin-bottom: 18px; 
	padding-left: 15px;
}
#douchart-popup #popup-content ul li { 
	margin-bottom: 3px; 
	list-style: disc;
	margin-left: 15px;
}
#douchart-popup #popup-content img.legend {
	width: 100%;
}

#douchart-popup #popup-content::-webkit-scrollbar {
	width: 12px;
	z-index: 60;
}
#douchart-popup #popup-content::-webkit-scrollbar-track { 
	/* background-color: transparent;  */
	background-color: #f2f2f2; 
	border-radius: 6px;
	border: 2px solid transparent;
	background-clip: content-box;
	transition: background-color .6s;
}
#douchart-popup #popup-content.open::-webkit-scrollbar-track { background-color: #fff; }
#douchart-popup #popup-content::-webkit-scrollbar-thumb {
  background-color: #8d8d8d;
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .6s;
}
#douchart-popup #popup-content::-webkit-scrollbar-thumb:hover { background-color: #b3b3b3; }


/*   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; */
	background-color: #EEEEF1;
	border: 1px solid #D2D2DA;
    /* color: #3d3d3d; */
	color: #3B3C44;
    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; */
	color: #15181A;
    /* background-color: #e8e8e8; */
	/* border-top: 2px solid #d2d2d2; */
	background-color: #D2D2DA;
	border-top: 2px solid #B9B9C6;
	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_switcher {
	display: inline-flex;
	font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 10px;
	background-color: #f0f0f0;
	border-radius: 6px;
	padding: 3px;
}
.douchart_controls-wrapper .douchart_switcher { margin-bottom: 0; margin-top: -2px; }
.douchart_switcher .item {
	font-size: 13px;
	line-height: 15px;
    padding: 7px 12px 8px;
    border-radius: 3px;
    background-color: #f0f0f0;
    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;
	white-space: nowrap;
}
.douchart_switcher .item:hover {
    color: #0d0d0d;
}

.douchart_switcher .item.active {
	color: #3d3d3d;
	background-color: #fff;
    pointer-events: none;
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
}


.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.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; */
    border: 1px solid #E9E9ED;
    /* color: #3d3d3d; */
    color: #3B3C44;
    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; */
	color: #15181A;
    background-color: #EEEEF1;
}
.douchart_controls .item:active {
    /* border-color: #ddd; */
	/* background-color: #f0f0f0; */
	border-color: #D2D2DA;
	background-color: #E9E9ED;
}
.douchart_controls .item.active {
	/* color: var(--color-orange-dark); */
	/* background-color: var(--color-orange-02); */
    /* border-color: var(--color-orange-03); */
	color: #15181A;
	background-color: #E9E9ED;
    border-color: #9FA0AC;
    pointer-events: none;
}
.douchart_controls.groups { margin-bottom: 8px; }
.douchart_controls.groups .item.active { 
	color: #0d0d0d; 
	background-color: #3d3d3d33;
	border-color: #3d3d3d4D;
}
.douchart_controls.groups.hidden,
.douchart_controls.subcontrols.hidden { display: none; }
.douchart_controls .item.disabled {
	pointer-events: none;
	opacity: .3;
}
.douchart_controls.categories {
	gap: 5px 10px;
	align-items: end;
	margin-bottom: 20px;
}
.douchart_controls .group .title {
	font-size: 8px;
	line-height: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #a0a0a0;
}
.douchart_controls .group .items {
	display: flex;
	flex-wrap: wrap;
    gap: 2px;
}

.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-orange-dark);
    background-color: var(--color-orange-02);
    border-color: var(--color-orange-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-orange-dark);
	background-color: var(--color-orange-02);
    border-color: var(--color-orange-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: baseline;
	gap: 15px;

    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.end-justified {
	justify-content: end;
}


.douchart_color-legend { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	gap: 5px 15px;
}
.douchart_color-legend .item { 
	display: flex; 
	gap: 5px;
	justify-content: start;
	align-items: center;
}
.douchart_color-legend .item.not-active { cursor: default; }
.douchart_color-legend .item.hidden { display: none; }
.douchart_color-legend .item.abc-sort .item-name { font-style: italic; }
.douchart_color-legend .item.abc-sort .item-mark { display: none; }
.douchart_color-legend .item-mark { 
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}
.douchart_color-legend svg.icon-sort {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #b0b0b0;
	shape-rendering: crispEdges;
	margin-bottom: -1px;
	cursor: pointer;
}
.douchart_color-legend .item.sorted .item-name { font-weight: bold; }
.douchart_color-legend .item.sorted svg.icon-sort { stroke: #3d3d3d; }
.douchart_color-legend .item svg.icon-sort:hover { stroke: #e8be34; }

.douchart_color-legend .item.faded { color: #b0b0b0; }
.douchart_color-legend .item.faded .item-mark { 
	background-color: #e0e0e0!important;
}

.douchart_checkbox {
	font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
	margin: 0px 5px 6px 0;
	cursor: pointer;
	display: flex;
	align-items: baseline;
}
.douchart_checkbox.upper {
	margin: -8px 5px 16px 0;
}
.douchart_checkbox.hidden {
	display: none;
}
.douchart_checkbox::before {
	content: " ";
	display: inline-block;
	border: 1px solid #b6b6b6;
	border-radius: 3px;
	width: 8px;
	height: 10px;
	padding: 0 0 0 2px;
    line-height: 8px;
	position: relative;
	
	top: 1px;
	/* left: -5px; */
	margin-right: 5px;
}
.douchart_checkbox.checked::before { 
	/* content: "✓";  */
	content: '\002713'; 
	top: -2px;
}
.douchart_checkbox:hover { color: #0d0d0d; }
.douchart_checkbox:hover::before { border-color: #6d6d6d; }


/*   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-rate {
	font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    line-height: 18px;
    fill: #8d8d8d;
	text-anchor: end;
}
.douchart .group-title {
	font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    line-height: 18px;
	font-weight: bold;
    fill: #3d3d3d;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.douchart .label-name {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    line-height: 18px;
    fill: #303030;
}

.douchart .step-loss .label-name {
	font-style: italic;
	font-size: 12px;
	fill: #6d6d6d;
	stroke: #fff;
	opacity: .6;
	paint-order: stroke;
	stroke-width: 3px;
	stroke-opacity: .6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.douchart .label-value {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
    line-height: 18px;
    fill: #303030;
}
.douchart .label-value.secondary {
	font-style: italic;
	font-size: 14px;
	fill: #8b8b8c;
}
.douchart .label-diff { 
	text-anchor: start; 
	font-size: 12px;
	font-style: italic;
}
.douchart .row.interactive { cursor: help; }
.douchart .row .row-back { 
	/* fill: rgba(0,0,0,.05);  */
	fill: #3B3C44;
	fill-opacity: .05;
	opacity: 0; 
}
.douchart .row:hover .row-back,
.douchart .row.highlighted .row-back { opacity: 1; }
.douchart .row:hover text,
.douchart .row.highlighted text,
.douchart .row.reported text,
.douchart .row.featured text { font-weight: bold; }

.douchart .row.featured .row-back {
	/* fill: rgba(0,0,0,.025);  */
	fill: #3B3C44;
	fill-opacity: .025;
	opacity: 1;
}
.douchart .row.featured:hover .row-back { 
	/* fill: rgba(0,0,0,.075); */
	fill-opacity: .075;
}
.douchart .row.reported .row-back {
	fill: #ecf5f4; 
	opacity: 1;
}
.douchart .row.reported:hover .row-back { fill: #ddefee;  }
.douchart .head line.bottomline { fill: none; stroke: #8d8d8d; shape-rendering: crispEdges; }
.douchart .row line.bottomline { fill: none; stroke: #ccc; }
.douchart .row.reported line.bottomline { fill: none; stroke: #b8cccb; }
.douchart .row.total .label-name {
	/* font-weight: bold; */
	font-style: italic;
}
/* .douchart .row.total .row-back { */
    /* fill: #ececec; */
    /* opacity: .5; */
    /* fill-opacity: .1; */
/* } */
.douchart .row.total.highlighted .row-back { opacity: 1; }

@media screen and (max-width:560px) {
	.douchart .label-name { font-size: 14px; }
	.douchart .label-value { font-size: 14px; }
}

.douchart .axis.y line {
	shape-rendering: crispEdges;
    stroke-width: 1;
    stroke-opacity: .1;
}
.douchart .axis.y line.baseline, .douchart .axis.y .baseline line {
	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 { */
.douchart.dual-axis .axis.vacancy 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.stacked .bar { pointer-events: none; }
.douchart.stacked .bar rect { 
	stroke: white; 
	stroke-width: 1px;
}
.douchart.stacked .faded .bar rect {
	fill: #e0e0e0!important;
}
.douchart.stacked .labels .label {
	font-size: 14px;
	font-style: italic;
	/* fill: #3d3d3d; */
	fill: #fff;
	paint-order: stroke;
	stroke: #e0e0e0;
	stroke-width: 4px;
	stroke-opacity: .6;
	stroke-linejoin: round;
	stroke-linecap: round;
	text-anchor: middle;
	pointer-events: none;
}

.douchart.stacked .label-value {
	/* fill: white; */
	stroke: none;
	text-anchor: end;
}
.douchart.stacked .label-count {
	font-size: 14px;
	fill: #8d8d8d;
	font-style: italic;
	text-anchor: end;
}
.douchart.stacked .label-featured {
	font-size: 14px;
	fill: #8d8d8d;
	font-style: italic;
	text-anchor: end;
}
.douchart.stacked image.company-logo {
	mix-blend-mode: multiply;
}
.douchart.stacked line.baseline {
	fill: none;
	stroke: #3d3d3d;
	shape-rendering: crispEdges;
	pointer-events: none;
}

.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 circle,
.dumbbell-plot .point circle { 
	stroke: #ffffff;
	stroke-width: 1.5;
}
/* .rangechart .point-label {
	font-size: 12px;
} */
.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 .range.arrow {
	stroke: #6d6d6d;
	stroke-opacity: 1;
}
.rangechart .median {
	fill: none;
	stroke: #0d0d0d;
	stroke-opacity: .2;
	stroke-width: 3px;
	stroke-linecap: round;
}
.rangechart .label-value { text-anchor: end; }
.rangechart .label-count {
    font-size: 14px;
    fill: #8d8d8d;
    font-style: italic;
    text-anchor: end;
}
.rangechart .label-range-value {
	font-size: 12px;
    /* font-style: italic; */
	paint-order: stroke;
	stroke: white;
	stroke-width: 3px;
	stroke-opacity: 1;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.rangechart image.company-logo { mix-blend-mode: multiply; }
.rangechart line.baseline,
.douchart .axis.x .tick.baseline line,
.douchart .axis.x .tick line.baseline {
	fill: none;
	stroke: #3d3d3d;
	stroke-opacity: .6;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.rangechart line.guideline {
	fill: none;
	stroke: #3d3d3d;
	stroke-opacity: .2;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.rangechart .axis-title {
    fill: #8d8d8d;
    font-size: 16px;
    font-style: italic;
    text-anchor: start;
}
.rangechart .tick text { font-size: 14px; }
.rangechart .trend-icon polyline { fill: none; }
.rangechart .row:hover .point circle,
.rangechart .row:hover .label-range-value { stroke: #f2f2f2; }
.rangechart .row.featured .point circle,
.rangechart .row.featured .label-range-value { stroke: #f9f9f9; }
.rangechart .row.featured:hover .point circle,
.rangechart .row.featured:hover .label-range-value { stroke: #ececec; }
.rangechart .row.reported .point circle,
.rangechart .row.reported .label-range-value { stroke: #ecf5f4; }
.rangechart .row.reported:hover .point circle,
.rangechart .row.reported:hover .label-range-value { stroke: #ddefee; }

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

.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 .small-chart.featured .back  { 
	opacity: 1;
	fill: #F9F9F9;
	stroke: #cccccc;
}
.douchart.linechart .small-chart.featured:hover .back  {
	fill: #ECECEC;
}
.douchart.linechart .small-chart.reported .back  { 
	opacity: 1;
	fill: #ECF5F4;
	stroke: #b8cccb;
}
.douchart.linechart .small-chart.reported:hover .back  {
	fill: #DDEFEE;
}

.douchart.linechart .frame-name {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
	font-weight: bold;
	fill: #333;
}
.douchart.linechart .frame-value {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
}
.douchart.linechart .frame-diff {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-size: 12px;
}
.douchart.linechart .small-multiplies .up .frame-diff { fill: #eb4247; }
.douchart.linechart .small-multiplies .down .frame-diff { fill: #06b9b1; }
.douchart.linechart .small-multiplies .default .frame-diff { fill: #404040; }

.douchart.linechart .small-multiplies .frame-significance {
	font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-size: 11px;
	opacity: .6;
}

.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: .1;
}
.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: 1.5px;
}
.douchart.linechart .small-multiplies .line path.highlighted-outline {
	stroke: white;
	stroke-opacity: .8;
	stroke-width: 5px;
    stroke-linecap: round;
}

.douchart.linechart .small-multiplies .significant .line path { stroke-width: 3px; }
.douchart.linechart .small-multiplies .significant .line path.highlighted-outline { stroke-width: 8px; }

.douchart.linechart .small-multiplies .refline {
	stroke-dasharray: none;
}
.douchart.linechart .small-multiplies .axis text {
    font-size: 12px;
    font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
    fill: gray;
}
.douchart.linechart .small-multiplies .axis.y :not(.baseline) line { stroke-opacity: .25; }

.douchart.linechart .small-multiplies .label-value {
	paint-order: stroke;
	stroke: white;
	stroke-width: 3px;
	stroke-opacity: .8;
	stroke-linejoin: round;
	stroke-linecap: round;
	font-size: 12px; 
}
.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; 
}
.douchart.linechart .small-multiplies .significant .label-value.last {
	font-size: 14px; 
	font-weight: bold;
}
.douchart.linechart .small-multiplies .up .line path.highlighted { stroke: #eb4247; }
.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 .label-value.last { fill: #06b9b1; }
.douchart.linechart .small-multiplies .default .line path.highlighted { stroke: #404040; }
.douchart.linechart .small-multiplies .default .label-value.last { fill: #404040; }

/* .douchart.linechart .small-multiplies .default marker circle,
.douchart.linechart .small-multiplies .down marker circle,
.douchart.linechart .small-multiplies .up marker circle, */
.douchart.linechart .small-multiplies .markers circle { 
	/* fill: #06b9b1;  */
	fill: white; 
	stroke-width: 1.5px;
}
.douchart.linechart .small-multiplies .down .markers circle { stroke: #06b9b1; }
.douchart.linechart .small-multiplies .up .markers circle { stroke: #eb4247; }
.douchart.linechart .small-multiplies .default .markers circle { stroke: #404040; }
.douchart.linechart .small-multiplies .significant.down .markers circle { fill: #06b9b1; }
.douchart.linechart .small-multiplies .significant.up .markers circle { fill: #eb4247; }
.douchart.linechart .small-multiplies .significant.default .markers circle { fill: #404040; }

.douchart table { 
	font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
	width: unset;
	border-spacing: 0;
	border-collapse: separate;
	word-break: normal;
	text-align: center;
}
.douchart table th { 
	font-size: 14px;
	line-height: 14px;
	font-weight: normal;
	color: #4d4d4d;
	padding: 8px 10px 6px;
	vertical-align: bottom;
	position: sticky;
	top: -1px;
	background: white;
	z-index: 100;
	border-bottom: 1px solid #3d3d3d;
	text-align: right;
	max-width: 120px;
}

.douchart table td { 
	font-family: 'Roboto Condensed', 'Roboto', 'sans-serif';
	font-size: 15px;
	padding: 5px 10px 3px;
	height: 20px;
	text-align: right;
	max-width: 120px;
	border-bottom: 1px solid #3d3d3d12; 
}
.douchart table tr:hover td {
	background-color: #f5f5f5;
}

.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;
}
.douchart .category-note {
	font-family: "Roboto Condensed", "Roboto", sans-serif;
	font-style: italic;
	font-size: 13px;
	margin: -10px 0 15px;
	opacity: .6;
}

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

.svg-box {
	max-height: 460px;
	overflow-y: scroll;
	position: relative;
}
.svg-box::after {
	content: "";
	display: block;
	width: 100%;
	height: 30px;
	position: sticky;
	bottom: -1px;
	background: linear-gradient(#ffffff00, #ffffff);
}
.svg-box.open::after { display: none; }

.svg-box::-webkit-scrollbar {
	width: 12px;
	z-index: 60;
}
.svg-box::-webkit-scrollbar-track { 
	background-color: #f2f2f2; 
	border-radius: 6px;
	border: 2px solid transparent;
	background-clip: content-box;
	transition: background-color .6s;
}
.svg-box.open::-webkit-scrollbar-track { background-color: #fff; }
.svg-box::-webkit-scrollbar-thumb {
  background-color: #8d8d8d;
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .6s;
}
.svg-box::-webkit-scrollbar-thumb:hover { background-color: #b3b3b3; }

.douchart_footer {
	display: flex;
    justify-content: space-between;
	align-items: center;
	border-top: 1px solid #eee;
	font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #3d3d3d;
    margin: 15px 0 10px;
}
.svg-box-button {
	display: inline-block;
	
	margin: 5px 0 8px;
	padding: 4px 8px 5px;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	cursor: pointer;
}
.svg-box-button:hover {
	background: #f0f0f0;
}
.douchart_footer .wrapper{
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.douchart_footer .footer-btn,
a.douchart_footer .footer-btn {
	cursor: pointer;
	opacity: .6;
	color: #3d3d3d;
}
.douchart_footer .footer-btn:hover,
.douchart_footer a.footer-btn:hover { color: #3d3d3d; opacity: 1; }
.douchart_footer a.footer-btn:active,
.douchart_footer a.footer-btn:visited { color: #3d3d3d; }
.douchart_footer .footer-btn::before {
	content: "";
	display: inline-block;
}
.douchart_footer .help-methodology::before {
	width: 9px;
	height: 10px;
	background: url(i/icon-info-dark.svg) center no-repeat;
	border: 1px solid #3d3d3d;
	border-radius: 10px;
	margin: 1px 4px -1px 3px;
}
.douchart_footer .help-methodology:hover::before {
	opacity: .7;
	background: #3d3d3d url(i/icon-info-light.svg) center no-repeat;
}
.douchart_footer .button-print::before {
	width: 13px;
	height: 13px;
	background: url(i/icon-print.svg) center no-repeat;
	margin: 1px 5px -2px 2px;
	opacity: .6;
}
.douchart_footer .button-print:hover::before { opacity: .8; }
.douchart_footer .button-download::before {
	width: 13px;
	height: 13px;
	background: url(i/icon-download-light.svg) center no-repeat;
	margin: 0 4px -1px 0;
}
.douchart_footer .button-download:hover::before {
	opacity: .7;
	background: url(i/icon-download-dark.svg) center no-repeat;
}

.douchart .head text {
	fill: #9FA0AC;
	font-size: 12px;
	font-style: italic;
	text-anchor: end;
}
.douchart .head .col-title-comment {
	font-size: 12px;
}

.picker-companies .company {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	max-width: 75px;
}
.picker-companies .company .company-logo {
	width: 60px;
	height: auto;
	margin: 0 auto;
}
.picker-companies .company .company-name {
	font-size: 12px;
	line-height: 13px;
	text-align: center;
}

.picker-companies .picker-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 5px;
    border-bottom: 1px solid #eee;
    margin: 10px 0 15px;
}
.picker-companies .picker-status .buttons {
	display: flex;
	gap: 5px;
	align-items: center;
}
.douchart_controls-wrapper .button,
.picker-companies .button,
.picker-companies .picker-status .button {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 2px;
	cursor: pointer;
	padding: 4px 5px 5px 8px;
    border: 1px solid #d5d5d5;
    border-radius: 3px;

	color: #f2f2f2;
    background-color: #0d0d0d;
    border-color: #0d0d0d;
}
.picker-companies .picker-status .button.companies {
	padding-right: 5px;
}
.douchart_controls-wrapper .button.hidden { display: none; }
.douchart_controls-wrapper .button .icon,
.picker-companies .picker-status .button .icon {
	width: 15px;
	height: 15px;
	transition: transform .25s;
}
.douchart_controls-wrapper .button .icon polyline,
.picker-companies .picker-status .button .icon polyline {
	fill: none;
	stroke: #f2f2f2;
}
.douchart_controls-wrapper .button.open .icon,
.picker-companies.open .picker-status .button .icon {
	transform: rotate(90deg);
}
.douchart_controls-wrapper .button:hover,
.picker-companies .picker-status .button:hover { 
	color: #fff; 
	background-color: #3d3d3d;
}
.douchart_controls-wrapper .button:hover .icon polyline,
.picker-companies .picker-status .button:hover .icon polyline { stroke: #fff; }
.picker-companies .picker-status .company {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: unset;
	max-width: unset;
}
.picker-companies .picker-status .company .company-logo { width: 120px; }
.picker-companies .picker-status .company .company-name { font-size: 16px; font-weight: bold; text-align: left; }

.picker-companies .picker-holder {
	display: flex;
	flex-wrap: wrap;
	margin-top: -15px;
	margin-bottom: 25px;
	height: 0;
	overflow-y: hidden;
}
.picker-companies  .picker-holder .logos-wrapper {
	display: flex;
    flex-wrap: wrap;
}
.picker-companies .picker-holder .company {
	padding: 10px 4px 12px;
	cursor: pointer;
}
.picker-companies .picker-holder .company .company-logo { 
	mix-blend-mode: multiply;
	transition: opacity .25s, filter .25s;
}
.picker-companies .picker-holder .company.active {
	background-color: #e6e6e6;
	pointer-events: none;
}

.picker-companies .picker-holder .company:hover {
	background-color: #f2f2f2;
}

.picker-companies.text-version .picker-status { 
	border-bottom: none;
	margin-bottom: 0;
}
.picker-companies.text-version .picker-holder {
	background: #f8f8f8;
	margin-top: 0;
}
.picker-companies.text-version .picker-holder .columns {
	columns: auto 6;
	column-rule: solid 1px #e8e8e8;
	padding: 15px 25px 20px;
}
.picker-companies.text-version .picker-holder .company { 
	padding: 8px 9px 7px 7px;
	margin-left: -8px;
	margin-right: -8px;
	max-width: unset; 
	display: block;
}
.picker-companies.text-version .picker-holder .company .company-name { text-align: left; }

#words-chart {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
#words-chart .words-categories {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 15px;
	width: 100%;
	max-width: 290px;
}

#words-chart .words-categories .summary {
	margin-bottom: 15px;
	border-bottom: 1px solid #9b9b9b;
	padding-bottom: 7px;
}
#words-chart .words-categories .summary .note {
	font-style: italic;
	font-size: 13px;
	line-height: 15px;
	color: #8d8d8d;
}
#words-chart .words-categories .legend {
	font-style: italic;
	font-size: 13px;
	line-height: 15px;
	font-style: italic;
	color: #8d8d8d;
	margin-top: 15px;
	position: relative;
}
#words-chart .words-categories .legend::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 6px;
	background-color: #8d8d8d;
	border: 1px solid #fff;
	position: relative;
	left: -2px;
	top: -1px;
}

#words-chart .words-categories .categories-list {
	display: flex;
	flex-direction: column;
}
#words-chart .words-categories .category {
	padding-bottom: 6px;
	cursor: help;
}
#words-chart .words-categories .category.disabled {
	pointer-events: none;
	font-style: italic;
	color: #b2b2b2;
}

#words-chart .words-categories .category .category-header {
	display: flex;
	justify-content: space-between;
}
#words-chart .words-categories .category .category-header .category-values {
	display: flex;
	/* gap: 2px; */
}
#words-chart .words-categories .category .category-header .category-value-avg {
	font-size: 10px;
	width: 20px;
	text-align: right;
	color: #b2b2b2;
}
#words-chart .words-categories .category .category-bar {
	width: 100%;
	height: 2px;
	background-color: #f0f0f0;
	position: relative;
}
#words-chart .words-categories .category .category-bar .progress {
	width: 100%;
	height: 2px;
	background-color: #06b9b1;
	position: absolute;
}
#words-chart .words-categories .category .category-bar .average {
	width: 0;
	height: 6px;
	position: absolute;
	top: -2px;
}
#words-chart .words-categories .category .category-bar .average::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 6px;
	background-color: #3d3d3d;
	border: 1px solid #fff;
	position: absolute;
	left: -3px;
	top: 0px;
}
#words-chart .words-categories .category.disabled .category-bar .average::before {
	background-color: #b2b2b2;
}
#words-chart .words-categories .category:hover,
#words-chart .words-categories .category.highlighted { font-weight: bold; }
#words-chart .words-categories .category:hover .category-bar .progress,
#words-chart .words-categories .category.highlighted .category-bar .progress {
	top: -1px;
	height: 4px;
}
#words-chart .words-categories .category .category-value::after { content: "%"; }
#words-chart #words-cloud text { 
	transition: fill .25s; 
	cursor: help;
}
#words-chart #words-cloud text.faded { fill: #e8e8e8!important; }
#words-chart #words-cloud text.highlighted { fill: #06b9b1!important; }

#words-chart.alert .words-categories .message .value { color: #eb4247; }
#words-chart.alert .words-categories .message .value::before { 
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(i/icon-alert.svg) center no-repeat;
	margin: 0 0 -2px 2px;
 }
#words-chart.alert .words-categories .category:not(.disabled) .category-value { color: #eb4247; }
#words-chart.alert .words-categories .category .category-bar .progress { background-color: #eb4247; }
#words-chart.alert #words-cloud text.highlighted { fill: #eb4247!important; }


/* DOUCARDS */

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

#chart-ebr_funnel .chart { display: flex; }
#chart-ebr_funnel .funnel-companies {
	position: relative;
	display: flex;
}
#chart-ebr_funnel .funnel-companies .scrollbox {
	overflow-x: scroll;
}
#chart-ebr_funnel .funnel-companies::before,
#chart-ebr_funnel .funnel-companies::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 35px;
	height: calc(100% - 15px);
	margin-bottom: 20px;
	pointer-events: none;
}
#chart-ebr_funnel .funnel-companies::before {
	left: -1px;
	background: linear-gradient(to left, #ffffff00, #ffffff);
}
#chart-ebr_funnel .funnel-companies::after {
	right: -1px;
	background: linear-gradient(to right, #ffffff00, #ffffff);
}
#chart-ebr_funnel .funnel-companies .company .col-back { fill: #ffffff00; }
#chart-ebr_funnel .funnel-companies .company:nth-child(even) .col-back { fill: #000000; fill-opacity: .03; }
#chart-ebr_funnel .funnel-companies .company.featured .col-back { fill: #ecf5f4; fill-opacity: 1; }

#chart-ebr_funnel .funnel-companies .company .loss polyline { fill: #00000011; }
#chart-ebr_funnel .funnel-companies .company .label-name {
	text-anchor: middle;
	fill: #3d3d3d;
	font-size: 16px;
}
#chart-ebr_funnel .funnel-companies .company .label-value {
	text-anchor: middle;
	fill: #ffffff;
	font-size: 16px;
	paint-order: stroke;
	stroke-width: 4px;
	stroke-opacity: .7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#chart-ebr_funnel .funnel-companies .company .label-loss {
	text-anchor: middle;
	fill: #3d3d3d;
	opacity: .6;
	font-size: 12px;
	font-style: italic;
}
#chart-ebr_funnel .funnel-companies .company .label-loss.lower {
	font-weight: bold;
	fill: #06b9b1;
}
#chart-ebr_funnel .funnel-companies .company .label-loss.higher {
	font-weight: bold;
	fill: #eb4247;
}
#chart-ebr_funnel .funnel-companies .company .loss .trend { opacity: .6; }
#chart-ebr_funnel .funnel-companies .company .company-logo { mix-blend-mode: multiply; }

#chart-ebr_funnel .scrollbox::-webkit-scrollbar {
	height: 12px;
	z-index: 60;
}
#chart-ebr_funnel .scrollbox::-webkit-scrollbar-track { 
	background-color: #f2f2f2; 
	border-radius: 6px;
	border: 2px solid transparent;
	background-clip: content-box;
	transition: background-color .6s;
}
#chart-ebr_funnel .scrollbox.open::-webkit-scrollbar-track { background-color: #fff; }
#chart-ebr_funnel .scrollbox::-webkit-scrollbar-thumb {
  background-color: #8d8d8d;
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .6s;
}
#chart-ebr_funnel .scrollbox::-webkit-scrollbar-thumb:hover { background-color: #b3b3b3; }

#chart-ebr_funnel .help-methodology { position: relative; }

.picker-companies .buttons,
#chart-ebr_funnel .picker-status .buttons {
	display: flex;
	gap: 3px;
}
.picker-companies .buttons .button,
#chart-ebr_funnel .picker-status .buttons .button { padding-right: 8px; }
.picker-companies .buttons .button.disabled,
#chart-ebr_funnel .picker-status .buttons .button.disabled {
	background-color: #e8e8e8;
	color: #a2a2a2;
	border-color: #d8d8d8;
	pointer-events: none;
}
#chart-ebr_reasons .picker-companies .picker-holder .company.active,
#chart-ebr_funnel .picker-companies .picker-holder .company.active { 
	pointer-events: all; 
	background: none;
	position: relative;
}
#chart-ebr_reasons .picker-companies .picker-holder .company:hover,
#chart-ebr_funnel .picker-companies .picker-holder .company:hover { 
	background: #f2f2f2; 
}
#chart-ebr_reasons .picker-companies .picker-holder .company.active::after,
#chart-ebr_funnel .picker-companies .picker-holder .company.active::after {
	content: "✓";
	color: white;
	background-color: #06b9b1;
	font-size: 10px;
    line-height: 14px;
    text-align: center;
	font-weight: bold;
	display: block;
	width: 13px;
	height: 13px;
	border: 1px solid white;
	position: absolute;
	top: 5px;
	left: 5px;
	border-radius: 10px;
}

.douchart.parallels .chart { display: flex; }
.douchart.parallels .reasons-charts {
	position: relative;
	display: flex;
	width: 100%;
}
.douchart.parallels .reasons-charts .scrollbox { 
	overflow-x: scroll;
	width: 100%;
}
.douchart.parallels .reasons-charts::before,
.douchart.parallels .reasons-charts::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 25px;
	height: calc(100% - 15px);
	margin-bottom: 20px;
	pointer-events: none;
}
.douchart.parallels .reasons-charts::before {
	left: -1px;
	background: linear-gradient(to left, #ffffff00, #ffffff);
}
.douchart.parallels .reasons-charts::after {
	right: -1px;
	background: linear-gradient(to right, #ffffff00, #ffffff);
}

.douchart.parallels .reasons-charts .answers .col-back { fill: #ffffff00; }
.douchart.parallels .reasons-charts .answers:nth-child(even) .col-back { fill: #000000; fill-opacity: .03; }
.douchart.parallels .reasons-charts .answers.featured .col-back { fill: #ecf5f4; fill-opacity: 1; }
.douchart.parallels .reasons-charts .answers .label-name {
	text-anchor: middle;
	fill: #3d3d3d;
}
.douchart.parallels .reasons-charts .answers .label-value {
	text-anchor: start;
	fill: #3d3d3d;
	stroke: #ffffff;
	font-size: 14px;
	paint-order: stroke;
	stroke-width: 4px;
	stroke-opacity: .6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.douchart.parallels .reasons-charts .answers .company-logo { mix-blend-mode: multiply; }

.douchart.parallels .reasons-charts .answers .grid line {
	fill: none;
	stroke: #000;
	stroke-opacity: .05;
	shape-rendering: crispEdges;
}
.douchart.parallels .reasons-charts .answers .grid line.baseline { stroke-opacity: .25; }
.douchart.parallels .reasons-charts .answers path {
	fill: none;
	stroke: #06b9b1;
	stroke-width: 2;
	stroke-linecap: round;
}
.douchart.parallels .reasons-charts .answers path.average {
	stroke: #3d3d3d;
	stroke-width: .5;
	stroke-opacity: .8;
}
.douchart.parallels .reasons-charts .answers .point {
	cursor: help;
}
.douchart.parallels .reasons-charts .answers .point .hover-area { fill-opacity: 0; }
.douchart.parallels .reasons-charts .answers .point .mark { 
	fill: #06b9b1;
}
.douchart.parallels .reasons-charts .answers .point.minor .mark {
	fill: #fff;
	stroke: #06b9b1;
	stroke-width: 2;
}
.douchart.parallels .reasons-charts .answers .point.minor .label-value {
	font-size: 12px;
	font-style: italic;
	opacity: .6;
}
.douchart.parallels .reasons-charts .negative .answers path { stroke: #eb4247; }
.douchart.parallels .reasons-charts .negative .answers .point .mark { fill: #eb4247; }
.douchart.parallels .reasons-charts .negative .answers .point.minor .mark { fill: #fff; stroke: #eb4247; }
.douchart.parallels .reasons-charts .answers path.average,
.douchart.parallels .reasons-charts .negative .answers path.average {
	stroke: #3d3d3d;
	stroke-width: .5;
	stroke-opacity: .8;
}
.douchart.parallels .reasons-charts .answers .label-count {
	font-family: 'Roboto Condensed', sans-serif;
	text-anchor: middle;
	font-size: 13px;
	fill: #8d8d8d;
}
.douchart.parallels .reasons-charts .answers.alert .label-count { fill: #c98688; }

.douchart.parallels .reasons-charts .answers .note {
	font-size: 11px;
	font-style: italic;
	fill: #b2b2b2;
	text-anchor: middle;
}
.douchart.parallels .reasons-charts .answers.alert path:not(.average) {
	stroke-dasharray: 1 5;
}

.douchart.parallels .scrollbox::-webkit-scrollbar {
	height: 12px;
	z-index: 60;
}
.douchart.parallels .scrollbox::-webkit-scrollbar-track { 
	background-color: #f2f2f2; 
	border-radius: 6px;
	border: 2px solid transparent;
	background-clip: content-box;
	transition: background-color .6s;
}
.douchart.parallels .scrollbox.open::-webkit-scrollbar-track { background-color: #fff; }
.douchart.parallels .scrollbox::-webkit-scrollbar-thumb {
  background-color: #8d8d8d;
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
  cursor: pointer;
  transition: background-color .6s;
}
.douchart.parallels .scrollbox::-webkit-scrollbar-thumb:hover { background-color: #b3b3b3; }

.douchart.parallels .reasons-charts.noscroll::before,
.douchart.parallels .reasons-charts.noscroll::after { display: none; }
.douchart.parallels .reasons-charts.noscroll .scrollbox { overflow-x: none; }
.douchart.parallels .reasons-charts.noscroll .scrollbox::-webkit-scrollbar { display: none; }

.douchart_controls-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 15px;
}
.picker-companies .picker-holder .buttons {
	margin: 5px 0;
	display: flex;
	gap: 5px;
	align-items: center;
}
.douchart_controls-wrapper .douchart_controls { margin-bottom: 0; }
.douchart_controls-wrapper .douchart_controls.hidden { display: none; }
.douchart.parallels .picker-status { margin-top: 0; }
.douchart.parallels .picker-holder { display: block; }
.douchart.parallels .picker-holder .logos-wrapper {
	display: flex;
    flex-wrap: wrap;
}
.douchart.parallels .picker-holder .company.disabled { pointer-events: none; }
.douchart.parallels .picker-holder .company.disabled .company-logo { filter: grayscale(1); opacity: .2; }
.douchart.parallels .picker-holder .company.disabled .company-name { opacity: .3; font-style: italic; }

.douchart .annotation text {
	font-size: 12px;
	font-style: italic;
	fill: #4d4d4d;
    stroke: #fff;
    opacity: .6;
    paint-order: stroke;
    stroke-width: 3px;
    stroke-opacity: .6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.douchart .annotation path {
	fill: none;
	stroke: #0d0d0d;
	stroke-opacity: .3;
}

#chart-ebr_companies-list {
	display: flex;
	flex-wrap: wrap;
	gap: 25px 30px;
}
#chart-ebr_companies-list a.company-link,
#chart-ebr_summary .company {
	max-width: 100px;
	color: #3d3d3d;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
}
#chart-ebr_companies-list a.company-link:visited { color: #3d3d3d; }
#chart-ebr_companies-list a.company-link:active,
#chart-ebr_companies-list a.company-link:hover { color: red; }
#chart-ebr_companies-list img.company-logo,
#chart-ebr_summary img.company-logo {
	width: 100%;
	max-width: 100px;
	margin-bottom: 10px; 
}

#chart-ebr_summary {
	display: flex;
	gap: 5px;
	/* flex-direction: column; */
}
#chart-ebr_summary .category {
	width: 100%;
	max-width: 220px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 15px;
	background-color: #ecf5f4;
	padding: 20px 20px 30px;
	border-radius: 5px;
}
#chart-ebr_summary .category .header {
	padding-bottom: 12px;
	border-bottom: 1px solid #3d3d3d;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	
	gap: 5px;
}
#chart-ebr_summary .category .icon {
	font-size: 32px;
	line-height: 42px;
}
#chart-ebr_summary .category .title-wrapper {
	min-height: 60px;
	height: 100%;
	display: flex;
	align-items: center;
}
#chart-ebr_summary .category .title {
	color: #0d0d0d;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
}
#chart-ebr_summary .companies {
	display: flex;
	flex-direction: column;
	gap: 30px;
	height: 100%;
	align-items: center;
	justify-content: start;
}
#chart-ebr_summary img.company-logo { mix-blend-mode: multiply; }
#chart-ebr_summary .company { font-size: 16px; }

#chart-ebr_benchmarks .chart { margin-bottom: 30px; }
#chart-ebr_benchmarks .column .col-back { fill: #ffffff00; }
#chart-ebr_benchmarks .column:nth-child(even) .col-back { fill: #000000; fill-opacity: .03; }
#chart-ebr_benchmarks .row-back,
#chart-ebr_benchmarks .company-logo {
	mix-blend-mode: multiply;
}
#chart-ebr_benchmarks .svg-box {
	max-height: unset;
    overflow-y: auto;
}
#chart-ebr_benchmarks .svg-box::after { display: none; }
#chart-ebr_benchmarks .col-title-name,
#chart-ebr_benchmarks .label-value {
	text-anchor: middle;
}
#chart-ebr_benchmarks .col-title-name {
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	fill: #3d3d3d;
}
#chart-ebr_benchmarks .label-diff,
#chart-ebr_benchmarks .label-significance {
    text-anchor: start;
    font-size: 11px;
    font-style: italic;
	font-weight: normal;
	opacity: .6;
}
#chart-ebr_benchmarks .label-significance {
	fill: #8d8d8d;
}

@media screen and (max-width:1380px) {
	body { margin-right: 0!important; }
	#longread-navigation {
		right: -350px;
		transition: right .3s;
	}
	#longread-navigation.open { right: 0; }
	#nav-button-mobile {
		display: block;
		z-index: 50;
	}
}

@media screen and (max-width:960px) {
	#longread-navigation .anchor {
		padding-right: 30px;
		font-size: 18px;
		line-height: 20px;
	}
	.page-static h2 { font-family: "Roboto", sans-serif !important; }
	.page-static h2.section-title { border-bottom: 1px solid #303030!important; }
}

@media screen and (max-width:768px) {
	.dou-charts-desktop { display: none; }
	.dou-charts-mobile { 
		display: block; 
		margin: 0 15px 0 20px;
	}
}

@media screen and (max-width: 740px) {
	
	#chart-ebr_summary { 
		flex-direction: column;
		box-sizing: border-box;
	}
	#chart-ebr_summary .category .header { 
		flex-direction: row; 
		justify-content: flex-start;
	}
	#chart-ebr_summary .category .title-wrapper { min-height: unset; }
	#chart-ebr_summary .category .icon {
		font-size: 22px;
		line-height: 20px;
	}
	#chart-ebr_summary .category .title {
		font-size: 18px;
		line-height: 24px;
		text-align: left;
	}
	#chart-ebr_summary .category { box-sizing: border-box; max-width: unset; }
	#chart-ebr_summary .companies { flex-direction: row; }

	#chart-ebr_benchmarks .col-title-name { font-size: 12px; }

	.douchart_infoline {
		flex-direction: column-reverse;
		gap: 10px;
	}
	.douchart_checkbox { margin-left: 5px; }

}

@media screen and (max-width: 740px) {
	.svg-box-button { white-space: nowrap; }
	.douchart_footer .wrapper {
		flex-wrap: wrap;
    	justify-content: flex-end;
		margin-top: 5px;
		gap: 2px 15px;
	}
	.douchart_footer {
		align-items: flex-start;
	}
}

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

	#words-chart .words-categories {
		font-size: 14px;
		line-height: 18px;
		max-width: 220px;
	}
	.picker-companies .picker-status .button .label { white-space: nowrap; }

	.douchart_controls-wrapper {
		flex-direction: column;
		gap: 10px;
	}
	
}

@media screen and (max-width:560px) {
	.page-static h1 { font-size: 32px; }
	.page-static h2.section-title { font-size: 28px; }
	.page-static h4 { font-size: 24px; }
	.page-static li, .page-static p {
		font-size: 16px;
		line-height: 150%;
	}
	.page-static .lead-text {
		font-size: 20px;
    	line-height: 150%;
	}
	figure.douifographic img { max-width: 375px; }

	#words-chart .words-categories {
		font-size: 13px;
		line-height: 15px;
		max-width: 160px;
	}

	.douchart .head text {
		font-size: 14px;
	}

	#douchart-popup { max-width: 360px; }

	#chart-ebr_summary .companies {
		gap: 15px 20px;
		flex-wrap: wrap;
		/* justify-content: flex-start; */
		justify-content: space-around;
	}
	#chart-ebr_summary .companies .company-logo {  max-width: 80px; }
}

/* @media screen and (max-width:420px) {
	body { 
		min-width: 420px;
	}
} */
.douchart.quadrant svg { cursor: crosshair; }
.douchart.quadrant .point { cursor: help; }
.douchart.quadrant .point circle.active {
	opacity: 0;
}
.douchart.quadrant .point.other circle.marker {
	fill: #C0C0C0;
	stroke: #C0C0C0;
}

.douchart.quadrant .point circle.marker {
	fill: var(--color-green);
	stroke: var(--color-green);
	stroke-width: 2;
	fill-opacity: .3;
}
.douchart.quadrant .point.featured circle.marker {
	/* fill: #8A37B5;
	stroke: #8A37B5; */
	fill: #707070;
	stroke: #707070;
}
.douchart.quadrant .point.target circle.marker {
	fill: var(--color-green);
	stroke: var(--color-green);
}
.douchart.quadrant .point:hover circle.marker {
	fill: orange;
	stroke: orange;
}
.douchart.quadrant .point.active circle.marker {
	fill: var(--color-green);
	stroke: var(--color-green);
}
.douchart.quadrant .point.faded circle.marker {
	fill: #C0C0C0;
	stroke: #C0C0C0;
}
.douchart.quadrant circle.pointed {
	fill: none;
	stroke: #2d2d2d;
	stroke-width: 1.5px;
	pointer-events: none;
}
.douchart.quadrant .grid line.baseline {
	fill: none;
	stroke: black;
	stroke-opacity: .6;
	shape-rendering: crispEdges;
}
.douchart.quadrant .quadrant-box rect {
	fill-opacity: 0;
}
.douchart.quadrant .quadrant-box.shaded rect {
	fill-opacity: .04;
}
.douchart.quadrant .quadrant-box .box-title {
	/* font-size: 30px; */
	/* font-weight: bold; */
	fill: #2D2D2D;
	fill-opacity: .6;
	/* text-transform: uppercase; */
	/* letter-spacing: .005em; */
	stroke: white;
	paint-order: stroke;
	stroke-width: 5px;
	stroke-linecap: round;
	stroke-linejoin: round;
	cursor: help;
}
.douchart.quadrant .quadrant-box .box-title:hover {
	fill-opacity: 1;
}
.douchart.quadrant .quadrant-box.shaded .box-title {
	stroke: #F5F5F5;
}
.douchart.quadrant .grid .axis-label {
	font-size: 14px;
	font-weight: 300;
    font-family: 'Roboto Condensed', sans-serif;
	fill: #808080;
}

.medium-value rect {
	fill: #3d3d3d;
	/* fill-opacity: .3; */
	stroke: #3d3d3d;
	/* stroke-width: 1.5px; */
}
.medium-value circle {
	fill: #fff;
}

.bar.reference {
	fill-opacity: .1;
}
.progress.barchart .row.fade {
	pointer-events: none;
}
.progress.barchart .row .label-name,
.progress.barchart .row .label-value {
	transition: fill .3s;
}
.progress.barchart .row.fade .label-name {
	fill: #C7C7C7;
}
.progress.barchart .row.fade .label-value {
	fill: #C7C7C7;
	font-style: italic;
}

.douchart_sort-options {
	display: flex;
	align-items: baseline;
	gap: 6px;
	/* box-sizing: border-box; */
}

/* .douchart_sort-options .select:hover {
	border-color: #D2D2DA;
} */
.douchart_sort-options .options {
	display: flex;
	gap: 2px;
	/* position: absolute; */
	/* width: 100%; */
	/* top: 100%; */
	/* top: 100%; */
	/* left: 0; */
	/* margin-top: 1px; */
	/* padding: 4px 6px; */
	/* background: #ffffff; */
	/* border: 1px solid #EEEEF1; */
	/* border-radius: 5px; */
	/* overflow: hidden; */

}
.douchart_sort-options .option {
	padding: 4px 6px;
	background: #ffffff;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #E9E9ED;
	/* border-radius: 6px; */
	/* border: 1px solid #EEEEF1; */
}
.douchart_sort-options .option:hover {
	color: #15181A;
	background: #EEEEF1;
}
.douchart_sort-options .option:active {
	border-color: #D2D2DA;
	background-color: #E9E9ED;
}
.douchart_sort-options .option.active {
	/* background: #D2D2DA; */
	color: #15181A;
	background-color: #E9E9ED;
	border-color: #9FA0AC;
	pointer-events: none;
	/* display: none; */
}
.douchart .head .note-total text {
	font-size: 12px;
	font-style: italic;
	fill: #9FA0AC;
}
.douchart .head .note-total line {
	fill: none;
	stroke: #9FA0AC;
	stroke-opacity: .6;
	shape-rendering: crispEdges;
}
.douchart.progress line.baseline {
	fill: none;
	stroke: #3d3d3d;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.douchart.progress .label-count {
	font-size: 14px;
	fill: #8d8d8d;
	font-style: italic;
	text-anchor: end;
}

.douchart .douchart_show-dynamic {
	font-size: 15px;
    line-height: 18px;
    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;
	display: inline-block;
}
.douchart .douchart_show-dynamic::before {
	content: "\00A0";
	display: inline-block;
	color: #4d4d4d;
	width: 10px;
	height: 12px;
	padding-left: 2px;
	border-radius: 2px;
	border: 1px solid #e2e2e2;
	margin-right: 6px;
	font-size: 15px;
	line-height: 8px;
	position: relative;
    top: -3px;
}
.douchart .douchart_show-dynamic:hover {
	color: #0d0d0d;
}
.douchart .douchart_show-dynamic:hover::before {
	background-color: #f2f2f2;
	border-color: #d2d2d2;
}
.douchart .douchart_show-dynamic.active::before {
	content: "✔";
}