@import url('https://fonts.googleapis.com/css?family=PT+Sans');
.chart-desktop * {
	padding: 0;
	margin: 0;
}

:root {
  --blue-100: #f5f5f7;
  --blue-200: #e9ecf7;
  --blue-250: #dfe2fa;
  --blue-350: #a9b1f1;
  --blue-650: #0008ff;
  --blue-700: #283cdc;
  --blue-800: #1d30bf;
  --blue-900: #141e66;
  --blue-925: #3d3d4d;
  --blue-950: #000040;
  --green-500: #1bb373;
  --green-600: #009959;
  --red-500: #f43;
  --red-600: #d93600;
  --yellow-800: #9a6a25;
  --yellow-200: #feefd8;
  --text: #222;
  --text-a40: rgba(34,34,34,.4);
  --text-a20: rgba(34,34,34,.2);
  --text-a10: rgba(34,34,34,.1);
  --gray: #999;
}

#chart-tooltip {
  display: none;
  position: absolute;
  text-align: left;
  padding: 10px 15px 12px;
  font-family: 'Formular Mono', monospace;
  font-size: 14px;
  line-height: 16px;
  color: white;
  background: var(--text);
  border-radius: 8px;
  pointer-events: none;
  z-index: 9999;
}
#chart-tooltip div { margin-bottom: 5px; }
#chart-tooltip .tt-header {
  margin: -10px -15px 10px;
  padding: 10px 15px 5px;
  color: rgba(255,255,255,.4);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

#chart-tooltip .tt-footer {
  margin: 10px -15px -10px;
  padding: 5px 15px 10px;
  color: rgba(255,255,255,.4);
  border-top: 1px solid rgba(255,255,255,.1);
  font-style: italic;
}

.chart-desktop {
  background-color: #fff;
  font-family: 'FormularFont','Formular', sans-serif;
	font-size: 16px;
	line-height: 1;
  /*color: #131e24;*/
}

.chart-desktop svg { 
  box-sizing: content-box;
  display: block;
  max-width: 100%; 
  margin: 20px auto 30px; 
}
.chart-desktop line, .chart-desktop path, .chart-desktop polyline {
  stroke-miterlimit: 10;
}
.chart-desktop path.domain { fill: none; stroke: none; }
.chart-desktop .hidden { visibility: hidden; }
.chart-desktop .transparent { 
  opacity: 0; 
}
.chart-desktop .cursor-help { cursor: help; }

.chart-desktop .chart-title {
  fill: var(--text);
  font-size: 18px;
}
.chart-desktop .axis-title { fill: var(--gray); }
.chart-desktop .annotation {
  pointer-events: none;
  transition: opacity .25s;
}
.chart-desktop .annotation path, .chart-desktop .annotation line {
  fill: none;
  stroke: var(--text);
  stroke-width: .45;
}
.chart-desktop .annotation text { 
  font-style: italic; 
  fill: var(--gray);
}

.chart-desktop .axis line {
  fill: none;
  stroke: var(--text-a20);
  stroke-width:.5;
}
.chart-desktop .axis .ticks, .chart-desktop .axis .tick {
  fill: var(--gray);
  font-size:14px;
}

.chart-desktop .blue { fill: var(--blue-700); }
.chart-desktop .light-blue { fill: #64ABEB; }
.chart-desktop .white{ fill:#fff; }
.chart-desktop .blue-line {
  fill: none;
  stroke:var(--blue-700);
  stroke-width:2;
}
.chart-desktop .point circle { fill: var(--blue-700); }
.chart-desktop .point .value-label {
  fill: var(--blue-700);
  font-size: 12px;
  font-family: 'Formular Mono', monospace;
}
.chart-desktop .point .year-label {
  fill: var(--text-a40);
  font-size: 12px;
  font-family: 'Formular Mono', monospace;
}
.chart-desktop .point line { stroke: #A6A6A6; stroke-width:.5; }
.chart-desktop .active-area { opacity: 0; shape-rendering: crispEdges; }
.chart-desktop .active-area:hover { cursor: help; }

.chart-desktop .baseline { stroke: var(--text); stroke-width: 1; shape-rendering: crispEdges; }
.chart-desktop .note-line { stroke: var(--text-a40); stroke-width: 0.5; shape-rendering: crispEdges; }
.chart-desktop .value-label { font-size: 14px; }
.chart-desktop text.year-note { fill: #A6A6A6; font-size: 14px; }
.chart-desktop .focus-block .bg { fill: var(--blue-200); }

.chart-desktop .line-charts .point .value-label { fill: black; }
.chart-desktop .line-charts path.area { stroke: none; }
.chart-desktop .line-charts polyline, .line-charts path { fill: none; }

.chart-desktop .work-length .share rect { fill: var(--blue-700); shape-rendering: crispEdges; }

.chart-desktop .line-charts .junior .area { fill: var(--green-500); fill-opacity: .1; }
.chart-desktop .junior polyline, .chart-desktop .junior path.line { stroke: var(--green-500); stroke-width: 1; }
.chart-desktop .junior .share, .chart-desktop .junior circle { fill: var(--green-500); }

.chart-desktop .line-charts .middle .area { fill: rgba(255, 180, 0, .1); }
.chart-desktop .middle polyline, .chart-desktop .middle path.line { stroke: #ffb400; stroke-width: 1; }
.chart-desktop .middle .share, .chart-desktop .middle circle { fill: #ffb400; }

.chart-desktop .line-charts .senior .area { fill: var(--red-500); fill-opacity: .1; }
.chart-desktop .senior polyline, .chart-desktop .senior path.line { stroke: var(--red-500); stroke-width: 1; }
.chart-desktop .senior .share, .chart-desktop .senior circle { fill: var(--red-500); }

.chart-desktop .junior .share, .chart-desktop .middle .share, .chart-desktop .senior .share { shape-rendering: crispEdges; }

.chart-desktop .total rect { fill: var(--blue-200); shape-rendering: crispEdges; }

.chart-desktop .line-charts .increase path.area { fill: var(--blue-250); }
.chart-desktop .line-charts .increase path.line { stroke: var(--blue-700); stroke-width: 1; }
.chart-desktop .line-charts .increase .point text.value-label, .chart-desktop .increase text.text-label, .increase .point circle { fill: var(--blue-700); }

.chart-desktop .line-charts .decrease path.area { fill: var(--text-a10); }
.chart-desktop .line-charts .decrease path.line { stroke: var(--gray); stroke-width: 1; }
.chart-desktop .line-charts .decrease .point text.value-label, .chart-desktop .decrease text.text-label, .decrease .point circle { fill: var(--gray); }

.chart-desktop .line-charts .large path.line { stroke-width: 2; }

.chart-desktop .small .text-label { font-size: 14px; pointer-events: none; }
.chart-desktop .small .value-label { font-size: 12px; pointer-events: none; }

.chart-desktop .small .year-label { pointer-events: none; }

.chart-desktop #stacked-bars .text-label {
  fill: #131e24;
  font-size: 14px;
}


/** IDE TABLE **/

.chart-desktop #tech-ide table {
  width: 798px;
  font-size: 10pt;
  text-align: center;
}
.chart-desktop #tech-ide table:hover { cursor: help; }
.chart-desktop #tech-ide .col-0 { text-align: left; }
.chart-desktop #tech-ide th {
  height: 32px;
  font-weight: normal;
}
.chart-desktop #tech-ide th:first-child { opacity: 0; }
.chart-desktop #tech-ide td { border: solid 1px white; }
.chart-desktop #tech-ide td .text-container { transition: opacity .25s; }


/** HORIZONTAL STACKED BARCHART **/

.chart-desktop .horizontal-stacked-barchart rect { height: 20px; }
.chart-desktop .grid-lines line, .chart-desktop .brace {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 0.75;
  stroke-miterlimit: 10;
  stroke-opacity: 0.6;
  pointer-events: none;
}
.chart-desktop .grid-lines .dark-line, .chart-desktop .brace { stroke: #131E24; }
.chart-desktop .horizontal-100-percent text {
  fill: #A6A6A6;
  font-size: 14px;
}
.chart-desktop .horizontal-100-percent line {
  fill: none;
  stroke: var(--gray);
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}
.chart-desktop .horizontal-stacked-barchart .text-label {
  fill: #131E24;
  font-size: 14px;
  font-family: 'Formular Mono', monospace;
}
.chart-desktop .horizontal-stacked-barchart .value-label {
  fill: var(--blue-700);
  font-size: 14px;
  font-family: 'Formular Mono', monospace;
}

.chart-desktop .super-dislike { fill: #FF0000; }
.chart-desktop .dislike { fill: #FF6D00; }
.chart-desktop .ok { fill: #FFDA00; }
.chart-desktop .like { fill: #C7D11F; }
.chart-desktop .super-like { fill: #8FC73E; }


/**  STACKED AREA CHART  **/

.chart-desktop .area {}

.chart-desktop .baseline line {
  stroke: black;
  stroke-width: 0.75;
}

.chart-desktop .yAxis line, .chart-desktop .yAxis path {
  fill: none;
  stroke: var(--gray);
  stroke-width: 0.5;
}

.chart-desktop .tick text, .chart-desktop .yAxis text {
  fill: var(--text-a40);
  font-size: 12px;
  font-family: 'Formular Mono', monospace;
}

.chart-desktop .tick path {
  stroke: none;
}

.chart-desktop .tick line {
  stroke: var(--text-a20);
  stroke-width: .5;
}

.chart-desktop .areaNumbers {
  font-size: 14px;
  fill: var(--text);
}
.chart-desktop .areaAnswers {
  font-size: 14px;
  fill: black;
}

.chart-desktop .labelPointer {
  stroke-width: .45;
  stroke: #131e24;
  fill: none;
}


/***   FLOW CHARTS   ***/

.chart-desktop .node rect {
  fill-opacity: .8;
  shape-rendering: crispEdges;
}
.chart-desktop .node text, .chart-desktop .node rect {
  cursor: help;
  fill: var(--text);
}
.chart-desktop .node:hover text, .chart-desktop .node:hover rect { fill: var(--blue-700) !important; }
.chart-desktop .link {
  fill: none;
  stroke: var(--blue-700);
  stroke-opacity: .8;
}
.chart-desktop .link.inactive {
  stroke-opacity: .1 !important;
}
.chart-desktop .flow-chart path { fill: none; }


/* PIE CHARTS */

.chart-desktop #pies text { text-anchor: middle; }
.chart-desktop #pies .value-label {
  font-weight: bold;
  font-size: 16px;
  fill: #127bca;
}
.chart-desktop #pies .faculty { font-size: 14px; }
.chart-desktop #pies .university { 
  font-size: 12px; 
  fill: #a6a6a6;
}
.chart-desktop #pies .total-share-mark {
  stroke-width: 1;
  stroke: black;
}


/* POINT CHARTS */

.chart-desktop .point-chart circle { fill: var(--text-a20); }
.chart-desktop .point-chart .point text {
  fill: var(--text);
  cursor: default;
}
.chart-desktop .point-chart .average text {
  fill: var(--text);
  font-size: 14px;
}
.chart-desktop .point-chart .average .average-label {
  font-family: 'Formular Mono', monospace;
  font-size: 16px;
}
.chart-desktop .point-chart .average tspan { fill: var(--text-a20); }
.chart-desktop .point-chart .checked circle { fill: var(--blue-700); }
.chart-desktop .point-chart .checked text {
  fill: var(--blue-700);
  font-weight: bold;
}
.chart-desktop .point-chart text.value-label { text-anchor: end; }
.chart-desktop .point-chart path.domain {
  stroke: var(--text-a20);
  stroke-width: .5;
}
.chart-desktop .point-chart .average line {
  stroke: var(--text-a40);
  stroke-width: .5;
  shape-rendering: crispEdges;
}


/* BUBBLE CHART */

.chart-desktop #tech-bubbles circle {
  stroke-width:2;
  stroke-miterlimit:10;
}
.chart-desktop #tech-bubbles path, .chart-desktop #tech-bubbles line, .chart-desktop #tech-bubbles polyline {
  fill: none;
  stroke: #127BCA;
  stroke-width: 1;
  stroke-miterlimit: 10;
}
.chart-desktop #tech-bubbles .text-label, .chart-desktop #tech-bubbles .value-label { text-anchor: middle; }
.chart-desktop #tech-bubbles .text-label { font-size: 16px; }
.chart-desktop #tech-bubbles .value-label { font-size: 14px; }
.chart-desktop #tech-bubbles .small .text-label { font-size: 14px; }
.chart-desktop #tech-bubbles .small .value-label { font-size: 12px; }

.chart-desktop #tech-bubbles .bubble-tech circle { fill: #D5E8FA; stroke: #127BCA; }
.chart-desktop #tech-bubbles .bubble-tech .text-label { fill: #127BCA; }
.chart-desktop #tech-bubbles .bubble-tech .value-label { fill: #64ABEB; }

.chart-desktop #tech-bubbles .bubble-js circle { fill: #FF8D00; fill-opacity: 0.2; stroke: #FF8D00; }
.chart-desktop #tech-bubbles .bubble-js .text-label { fill: #FF8D00; }
.chart-desktop #tech-bubbles .bubble-js .value-label { fill: #A6A6A6; }

.chart-desktop #tech-bubbles .bubble-others circle { fill: #eff1f3; stroke: #a6a6a6; }
.chart-desktop #tech-bubbles .bubble-others .text-label { fill: var(--text); }
.chart-desktop #tech-bubbles .bubble-others .value-label { fill: #a6a6a6; }

/* 101 */
.chart-desktop #map polygon { stroke-width: 1.5px; stroke: #fff; fill: var(--blue-200); }
.chart-desktop #map .points circle { fill: var(--blue-700); }
.chart-desktop #map .points .value-label { fill: var(--blue-700); font-family: 'Formular Mono', monospace; }
.chart-desktop #map .points .minsk-label { fill: white; font-size:26px; font-family: 'Formular Mono', monospace; }
.chart-desktop #map:hover { cursor: help; }

/* 102 */
.chart-desktop #pie-label { fill: var(--blue-700); font-size:18px; font-family: 'Formular Mono', monospace; }

/* 103 */
.chart-desktop#chart-age .axis text {
  font-size: 12px;
  fill: var(--text-a40);
}
.chart-desktop#chart-age .axis .axis-title { font-size: 16px; fill: var(--gray); }
.chart-desktop#chart-age .axis.y .axis-title { text-anchor: start; }
.chart-desktop#chart-age .axis.x .axis-title { text-anchor: end; }
.chart-desktop#chart-age rect.bar { fill: var(--blue-700); shape-rendering: crispEdges; }
.chart-desktop#chart-age rect.bar:hover { fill: var(--blue-800); }

.chart-desktop .axis {}
.chart-desktop#chart-age .x .domain { stroke: var(--text); stroke-width:1; }
.chart-desktop#chart-age .y path.domain { display: none; }
.chart-desktop#chart-age .tick text {
  fill: var(--text-a40);
  font-size: 12px;
}
.chart-desktop#chart-age #averageAgeLabel text#avAgeValue {
  font-size: 20pt;
  fill: var(--blue-700);
}
.chart-desktop#chart-age #averageAge { pointer-events: none; }
.chart-desktop#chart-age .chart-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.chart-desktop#chart-age .chart-button {
  background-color: #fff;
  color: var(--blue-700);
  border: 1px solid var(--blue-700);
  cursor: pointer;
  display: inline;
  padding: 10px 17px 10px;
  margin-right: -1px;
} 
.chart-desktop#chart-age .chart-button:first-child { border-radius: 8px 0 0 8px; }
.chart-desktop#chart-age .chart-button:last-child { border-radius: 0 8px 8px 0; }
.chart-desktop#chart-age .chart-button:hover {
  background-color: var(--blue-200);
}
.chart-desktop#chart-age .chart-buttons .checked {
  background-color: var(--blue-700);
  color: #fff;
  cursor: default;
}

/* 104 */
.chart-desktop #no-data-label {
  text-anchor: middle;
  font-weight: normal;
  font-size: 36px;
  fill: #ccc;
  opacity: 0;  
}
.chart-desktop .value-label {
  font-family: 'Formular Mono', monospace;
}
.chart-desktop .average-age-label {
  fill: var(--text-a40);
}
.chart-desktop .stacked-area .tick line {
  stroke: rgba(255,255,255,.3);
  pointer-events: none;
}

.chart-desktop .areaNumbers {
  font-family: 'Formular Mono', monospace;
  font-weight: bold;
  /*font-size: 16px;*/
  /*fill: var(--text-a40);*/
  fill: var(--blue-700);
}
.chart-desktop .areaAnswers {
  fill: var(--gray);
  font-size: 14px;
}

.chart-desktop .labelPointer {
  stroke: var(--text-a40);
  stroke-width: .5;
}

.chart-desktop .small-chart-title {
  fill: var(--text);
  font-size: 16px;
}

#chart-work-length .area.inactive { fill: var(--blue-250) !important; stroke: var(--blue-200) !important; transition: all .25s; }
.area-chart .area.inactive { fill: var(--blue-250) !important; stroke: var(--blue-200) !important; transition: all .25s; }

/* TREEMAP */
.chart-treemap rect { 
  fill: var(--blue-700);
  stroke: white; 
}
.chart-treemap .depth-0 { stroke-width: 1; }
.chart-treemap .depth-1 { stroke-width: 1; }
.chart-treemap .depth-2 { stroke-width: .5; }
.chart-treemap .chart-label { fill: white; pointer-events: none; }
.chart-treemap .chart-label-name { font-size: 18px; }
.chart-treemap .chart-label-value { font-family: 'Formular Mono', monospace; font-size: 14px; }
.chart-treemap rect.inactive { fill: var(--blue-250) !important; transition: fill .25s; }

/* 109 */
#chart-girls-in-universities .pie-chart text { text-anchor: middle; }
#chart-girls-in-universities .pie-chart text.value-label { font-size: 14px; font-weight: bold; fill: var(--blue-700); }
#chart-girls-in-universities .pie-chart text.university { font-size: 12px; fill: var(--text-a40); }

/* 111 */
#chart-universities-and-technologies .text-label {
  font-size: 12px;
  fill: var(--text-a40);
}
#chart-universities-and-technologies circle:hover,
#chart-platform-and-technologies circle:hover,
#chart-scm-and-hosting circle:hover {
  transition: .2s opacity;
  opacity: 1 !important;
}

/* 202 */
.new-tech {
  fill: none;
  stroke: var(--blue-700);
  stroke-width: 1;
}
text.new-tech {
  fill: var(--text);
  stroke: none;
  font-style: italic;
  opacity: 0.6;
}
line.new-tech {
  fill: none;
  stroke: var(--text);
  stroke-width: .5;
}

/* 203 & 204 */
#chart-domen .inactive circle, #chart-libraries .inactive circle, #chart-technologies .inactive circle { fill: var(--blue-200) !important; transition: .3s fill; }
#chart-domen text, #chart-libraries text, #chart-technologies text { fill: white; transition: .3s fill; }
#chart-domen .inactive text, #chart-libraries .inactive text, #chart-technologies .inactive text { fill: var(--blue-350); }
#chart-domen.chart-desktop .node:hover text, #chart-libraries.chart-desktop .node:hover text, #chart-technologies.chart-desktop .node:hover text { fill: white !important; }

/* 207 */
#chart-os circle { fill: var(--blue-250); }
#chart-os text { text-anchor: middle; }
#chart-os text.text-label { font-size: 20px; fill: var(--text); }
#chart-os text.value-label { fill: var(--blue-700); }
#chart-os .icon { fill: var(--blue-700); visibility: hidden; }
#chart-os .st0{fill:#807E17;}
#chart-os .st1{fill:#F9F719;}
#chart-os .st2{fill:#F40F8D;}
#chart-os .st3{fill:#1A0B80;}
#chart-os .st4{fill:#7E0703;}
#chart-os .st5{fill:#F50B0C;}
#chart-os .st6{fill:#7D7D7D;}
#chart-os .st7{fill:#C0BEBF;}

/* 208 */
#chart-ide rect.col.inactive { fill: #fff !important; }
#chart-ide .reflines line {
  fill: none;
  stroke: white;
  stroke-width: 3;
  pointer-events: none;
}

/* 306 */
#chart-housing .bar rect {
  fill: var(--blue-700);
}
#chart-housing .bar .value-label {
  fill: white;
  font-size: 12px;
}
#chart-housing .text-label {
  font-size: 14px;
}

/* 310 */
#chart-work-abroad #work-abroad-perspectives .value-label { font-size: 18px; opacity: .6; }
#chart-work-abroad path { stroke-width: .75; stroke: var(--text-a40); fill: none;  }
#chart-work-abroad .bubbles line { fill: none; stroke: var(--text-a40); stroke-width: .75; }
#chart-work-abroad .bubbles .text-label { text-anchor: middle; font-size: 16px; }
#chart-work-abroad .bubbles .value-label { text-anchor: middle; font-size: 14px; fill: var(--blue-700); }

/* 401 */
#chart-salary-positions .annotation, #chart-salary-gender .annotation, #chart-salary-tech .annotation { pointer-events: auto; }
#chart-salary-positions .annotation text, #chart-salary-gender .annotation text, #chart-salary-tech .annotation text { fill: var(--text); font-size: 14px; font-style: normal; }
#chart-salary-positions .annotation path, #chart-salary-gender .annotation path, #chart-salary-tech .annotation path { outline: var(--text); }

#chart-salary-positions .value-label polygon,
#chart-salary-positions .value-label rect,
#chart-salary-tech .value-label polygon,
#chart-salary-tech .value-label rect { fill: black; }
#chart-salary-positions .value-label text, 
#chart-salary-gender .value-label text, 
#chart-salary-tech .value-label text { fill: white; font-size: 12px; text-anchor: middle; }
#chart-salary-positions .value-label .quartile1,
#chart-salary-positions .value-label .quartile3,
#chart-salary-positions .value-label .mediana-label,
#chart-salary-tech .value-label { opacity: 0; pointer-events: none; }

#chart-salary-positions .grid line, #chart-salary-gender .grid line, #chart-salary-tech .grid line { stroke: var(--text); stroke-width: 0.5; stroke-opacity: 0.4; pointer-events: none; }
#chart-salary-positions .grid line.baseline, #chart-salary-gender .grid line.baseline, #chart-salary-tech .grid line.baseline { stroke: var(--text); stroke-width: 1; stroke-opacity: 1; }
#chart-salary-positions .grid text, #chart-salary-gender .grid text { fill: var(--text-a40); font-size: 14px; text-anchor: middle; }

#chart-salary-positions .even, #chart-salary-gender .even, #chart-salary-tech .even { opacity: 0.6; fill: #fff; }
#chart-salary-positions .odd, #chart-salary-gender .odd, #chart-salary-tech .odd { opacity: 0.6; fill: var(--text-a10); }

#chart-salary-positions .text-label, #chart-salary-gender .text-label { fill: var(--text); font-size: 14px; }

#chart-salary-positions .whole { opacity: 0.2; fill: var(--blue-700); }
#chart-salary-positions .half { opacity: 0.5; fill: var(--blue-700); }
#chart-salary-positions .mediana { stroke: var(--blue-700); stroke-width: 2; }
#chart-salary-positions .outlier { opacity: 0.4; stroke: var(--blue-700); stroke-width: 2; }

#chart-salary-positions .active-area, #chart-salary-gender .active-area { opacity: 0; }
#chart-salary-positions svg, #chart-salary-gender svg, #chart-salary-tech svg { cursor: default; }

/* 402 */
#chart-salary-gender .value-label .male polygon, 
#chart-salary-gender .value-label .male rect { fill: var(--blue-700); }
#chart-salary-gender .value-label .female polygon, 
#chart-salary-gender .value-label .female rect { fill: #FF9100; }
#chart-salary-gender .value-label .male, 
#chart-salary-gender .value-label .female { opacity: 0; pointer-events: none; }

#chart-salary-gender .brace {
  stroke:#131e24;
  stroke-width:0.45;
}

#chart-salary-gender .rect-f { fill: #FF9100; fill-opacity: 0.2; }
#chart-salary-gender .rect-m { fill: var(--blue-700); fill-opacity: 0.2; }
#chart-salary-gender .line-f { stroke: #FF9100;stroke-width:2; }
#chart-salary-gender .line-m { stroke: var(--blue-700);stroke-width:2; }

/* 403 */
#chart-salary-tech .grid text { fill: var(--text-a40); font-size: 14px; text-anchor: right; }

#chart-salary-tech .text-label { fill: var(--text); font-size: 14px; text-anchor: middle; }

#chart-salary-tech .intern circle { fill: var(--gray); fill-opacity: 0.4; }
#chart-salary-tech .junior circle { fill: var(--green-500); fill-opacity: 0.4; }
#chart-salary-tech .middle circle { fill: #ffb400; fill-opacity: 0.4; }
#chart-salary-tech .senior circle { fill: var(--red-500); fill-opacity: 0.4; }
#chart-salary-tech .lead circle { fill: var(--blue-700); fill-opacity: 0.4; }

#chart-salary-tech .level-intern circle { fill: var(--gray); }
#chart-salary-tech .level-junior circle { fill: var(--green-500); }
#chart-salary-tech .level-middle circle { fill: #ffb400; }
#chart-salary-tech .level-senior circle { fill: var(--red-500); }
#chart-salary-tech .level-lead circle { fill: var(--blue-700); }

img.chart-mobile { display: none !important; max-width: 100%; }
@media screen and (max-width: 740px) {
  div.chart-desktop { display: none !important; }
  img.chart-desktop { display: none !important; }
  img.chart-mobile { display: block !important; }
}