/*---------------> Header Styles <-----------------*/
.statistic_header {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding-top: 128px;
}

.statistic_header_title {
  color: var(--accent-text, #005cda);
  font-family: var(--font-family);
  font-size: var(--Titles-Medium, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
  margin: 0;
}

.statistic_header_icon {
  color: var(--accent-text, #005cda);
  font-size: 30px !important;
  width: 30px;
  height: 30px;
}

/*---------------> Main Layout <-----------------*/
.statistic_layout {
  display: flex;
  gap: 24px;
  margin-top: 32px;
}

.statistic_sidebar {
  flex: 0 0 404px;
  min-width: 404px;
}

.statistic_content {
  flex: 1;
  min-width: 0;
  background: transparent;
}

.gender_title_height {
  height: 84px;
}

/*---------------> Sidebar Styles <-----------------*/
.sidebar_nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.sidebar_tab {
  display: flex;
  padding: var(--Space-200, 16px);
  align-items: center;
  gap: 10px;
  align-self: stretch;
  color: var(--sds-color-text-default-secondary);
  /* Georgian/Label/Medium */
  font-family: var(--font-family);
  font-size: var(--Labels-Medium, 14px);
  font-style: normal;
  font-weight: var(--Weights-Weight-Medium, 500);
  line-height: var(--Line-Heights-Line-Height-02, 24px); /* 171.429% */
  letter-spacing: 0.14px;
  background: var(--sds-color-background-default-secondary);
  transition: all 0.3s ease;
  cursor: pointer;
}

.sidebar_tab:hover {
  background: var(--accent-hover, #e6f2ff);
  color: var(--accent-text, #005cda);
  transition: all 0.3s ease;
}

.sidebar_tab_active {
  background: var(--accent-icon, #005cda);
  color: var(--card-surface, #fff);
}

.sidebar_tab_active:hover {
  background: var(--accent-icon, #005cda);
  color: var(--card-surface, #fff);
  transition: all 0.3s ease;
}

/*---------------> Content Area <-----------------*/
.statistic_content {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Custom Scrollbar for content area */
.statistic_content::-webkit-scrollbar {
  width: 8px;
}

.statistic_content::-webkit-scrollbar-track {
  background: var(--background, #f5f5f5);
  border-radius: 4px;
}

.statistic_content::-webkit-scrollbar-thumb {
  background: var(--accent-icon, #005cda);
  border-radius: 4px;
}

.statistic_content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-text, #004bb5);
}

.tab_content_statistic {
  padding: 0;
}

.content_header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 24px 16px 0 16px;
}

.charts_scrollable {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 16px 24px 16px;
}

.chart_table {
  width: 100%;
  padding: 24px;
  background: var(--card-surface, #fff);
  border-radius: 4px;
  border: 1px solid var(--sds-color-border-default-tertiary, #E0E0E0);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
}

/* - scroll bar - */
.chart_table::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}

.chart_table::-webkit-scrollbar-track {
  background: var(--card-surface, #fff);
}

.chart_table::-webkit-scrollbar-thumb {
  background: var(--accent-icon, #005cda);
}

/* - scroll bar - */
table {
  width: 100%;
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid black; 
}
th,
td {
  padding: 8px;
  text-align: left;
  font-family: var(--font-family);
  font-size: var(--font-size-14px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
  color: var(--primary-text, #181818);
}
.chart_label_text {
  color: var(--primary-text, #181818);
  font-family: var(--font-family);
  font-size: var(--font-size-14px);
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
}

.chart_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.chart_item {
  width: 100%;
  padding: 24px;
  background: var(--card-surface, #fff);
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
}

/* Chart canvas wrapper for dynamic height control */
.chart_canvas_wrapper {
  position: relative;
  width: 100%;
  min-height: 400px;
}

/* Chart loader */
.chart_loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.chart_spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
}

.chart_spinner:after {
  content: " ";
  display: block;
  width: 40px;
  height: 40px;
  margin: 5px;
  border-radius: 50%;
  border: 4px solid #2a59cb;
  border-color: #2a59cb transparent #2a59cb transparent;
  animation: chart-spinner 1.2s linear infinite;
  box-sizing: border-box;
}

@keyframes chart-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* No data message */
.no_data_message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100%;
  color: var(--secondary-text, #6d6d6d);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  background: var(--stat-background, #f8f9fa);
  border-radius: 8px;
  padding: 24px;
  position: absolute;
  top: 0;
  left: 0;
}

.chart_canvas_wrapper_gender {
  position: relative;
  width: 100%;
}

/* Gender chart legend - hidden by default, shown on mobile */
.gender_legend {
  display: none;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Gender cards - shown on mobile, hidden on desktop */
.gender_cards_container {
  display: none;
  gap: 12px;
}

.gender_card {
  flex: 1;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gender_card_label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.gender_card_count {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.gender_card_percent {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width: 768px) {
  .gender_legend {
    display: flex;
  }

  .gender_cards_container {
    display: flex;
    flex-wrap: wrap;
  }

  .chart_canvas_wrapper_gender {
    display: none;
  }
}

.year-option {
  color: var(--primary-text, #181818);
}


.chart_canvas_wrapper canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Scrollbar for chart items */
.chart_item::-webkit-scrollbar,
.chart_item_sx::-webkit-scrollbar,
.chart_item_width::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.chart_item::-webkit-scrollbar-track,
.chart_item_sx::-webkit-scrollbar-track,
.chart_item_width::-webkit-scrollbar-track {
  background: var(--background, #f5f5f5);
  border-radius: 4px;
}

.chart_item::-webkit-scrollbar-thumb,
.chart_item_sx::-webkit-scrollbar-thumb,
.chart_item_width::-webkit-scrollbar-thumb {
  background: var(--accent-icon, #005cda);
  border-radius: 4px;
}

.chart_item::-webkit-scrollbar-thumb:hover,
.chart_item_sx::-webkit-scrollbar-thumb:hover,
.chart_item_width::-webkit-scrollbar-thumb:hover {
  background: var(--accent-text, #004bb5);
}

.chart_item_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E5E5F0;
  min-height: 80px;
}

.chart_filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.custom_legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
  border-radius: 4px;
  background: var(--card-surface, #fff);
}

.legend_item {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 0.5px solid var(--sds-color-border-default-tertiary, #B0B0B0);
  background: var(--stat-background);
  cursor: pointer;
  transition: all 0.3s ease;
}

.legend_item:hover {
  background: var(--accent-hover, #e6f2ff);
  border-color: var(--accent-icon, #005cda);
}

.legend_item_clickable {
  user-select: none;
  transition: opacity 0.3s ease, transform 0.1s ease;
}

.legend_item_clickable:active {
  transform: scale(0.95);
}

.legend_color_box {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.legend_text {
  color: var(--primary-text, #181818);
  font-family: var(--font-family);
  font-size: var(--Bodies-Medium, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
}

.chart_item_width {
  max-width: 600px;
  width: 100%;
  padding: 24px;
  background: var(--card-surface, #fff);
  border-radius: 4px;
  border: 1px solid var(--sds-color-border-default-tertiary, #E0E0E0);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  flex: 1;
}

.chart_item_width canvas {
  max-width: 100%;
  height: auto !important;
}

.chart_item_sx {
  max-width: 400px;
  width: 100%;
  padding: 24px;
  background: var(--card-surface, #fff);
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
}

/*---------------> Stat Cards Section <-----------------*/
.stat_cards_section {
  flex: 1;
  min-width: 300px;
  padding: 24px;
  background: var(--card-surface, #fff);
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.08);
}

.stat_cards_container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.stat_card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--card-surface, #fff) 0%, var(--stat-background, #f8f9fa) 100%);
  border-radius: 12px;
  border: 1px solid var(--sds-color-border-default-tertiary, #E0E0E0);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.stat_card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--stat-card-accent, #0058DA);
  border-radius: 12px 0 0 12px;
}

.stat_card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
}

.stat_card_icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stat-card-accent, #0058DA);
}

.stat_card_icon .material-symbols-outlined {
  font-size: 22px;
  color: #fff;
}

.stat_card_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.stat_card_value {
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-text, #181818);
}

.stat_card_label {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--secondary-text, #6d6d6d);
  text-transform: uppercase;
  letter-spacing: 0.26px;
  margin-top: 4px;
  word-break: break-word;
}

.stat_cards_no_data {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  color: var(--secondary-text, #6d6d6d);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  background: var(--stat-background, #f8f9fa);
  border-radius: 12px;
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .stat_cards_section {
    min-width: 100%;
  }

  .stat_card {
    padding: 12px 16px;
  }

  .stat_card_value {
    font-size: 20px;
  }

  .stat_card_label {
    font-size: 12px;
  }

  .stat_card_icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .stat_card_icon .material-symbols-outlined {
    font-size: 18px;
  }
}

.label_year {
  color: var(--primary-text, #181818);
  font-family: var(--font-family);
  font-size: var(--font-size-14px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
}

.center_select_year {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding-top: 40px;
}

.chart_container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.year_select_custom {
  padding: 8px 16px;
  border: 1px solid var(--sds-color-border-default-tertiary, #ccc);
  border-radius: 4px;
  font-size: 16px;
  font-family: var(--font-family);
  background: var(--card-surface, #fff);
  color: var(--primary-text, #181818);
  cursor: pointer;
}

/*---------------> Year Select Tooltip Styles <-----------------*/
.year_select_wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.year_info_icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--accent-icon, #005cda);
  transition: color 0.2s ease;
}

.year_info_icon .material-symbols-outlined {
  font-size: 20px;
}

.year_info_icon:hover,
.year_info_icon:focus {
  color: var(--accent-text, #004bb5);
  outline: none;
}

.year_info_tooltip {
  position: fixed;
  width: 320px;
  padding: 16px;
  background: var(--card-surface, #fff);
  border: 1px solid var(--sds-color-border-default-tertiary, #E0E0E0);
  border-radius: 8px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
  color: var(--primary-text, #181818);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.26px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}


.year_info_tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.year_info_tooltip.tooltip_below {
  transform: translateY(-8px);
}

.year_info_tooltip.tooltip_below.visible {
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  .year_info_tooltip {
    width: 280px;
    font-size: 12px;
    padding: 12px;
  }
}

@media screen and (max-width: 480px) {
  .year_info_tooltip {
    width: 250px;
    font-size: 11px;
  }

  .year_info_icon .material-symbols-outlined {
    font-size: 18px;
  }
}

/* Business Registration Charts - First Container (chart1, chart2) always stacked */
@media screen and (max-width: 1920px) {
  #tab-nreg .chart-container:first-child {
    flex-direction: column;
  }

  #tab-nreg .chart-container:first-child .chart_item {
    max-width: 100%;
    width: 100%;
  }
}

/* Business Registration Charts - Second Container (chart3, chart4) side by side on larger screens */
@media screen and (min-width: 901px) {
  #tab-nreg .chart-container:nth-child(2) .chart_item_sx {
    width: calc(50% - 12px);
    max-width: none;
  }
}

@media screen and (max-width: 900px) {
  .chart_item_sx {
    max-width: 100%;
    width: 100%;
  }

  #tab-nreg .chart-container:nth-child(2) {
    flex-direction: column;
  }
}

@media screen and (max-width: 1090px) {
  .chart_table {
    overflow-x: auto;
  }

  .chart_item,
  .chart_item_sx {
    padding: 20px;
  }

  .chart_item canvas,
  .chart_item_sx canvas {
    min-height: 400px !important;
  }
}

/*---------------> expand panle styles <-----------------*/

.chart-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

/* Additional styles for legend, title, and datalabels if needed */
.chart-legend,
.chart-title,
.chart-datalabels {
  font-family: var(--font-family);
  font-size: var(--font-size-12px);
  color: var(--primary-text);
  line-height: 1.5;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
}

.content_container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.expant_panel {
  position: relative;
  border-radius: 2px;
  background: var(--card-surface, #fff);

  /* card-shadow-sm */
  box-shadow: 0px 0px 3px 0px var(--card-shadow-sm, rgba(0, 0, 0, 0.1)),
    0px 1px 2px 0px var(--card-shadow-sm, rgba(0, 0, 0, 0.1));
}

.color_blue {
  color: var(--accent-text, #005cda) !important;
}

.cursor {
  cursor: pointer;
}

.answer_container {
  max-height: 0px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  margin-left: 32px;
  margin-right: 64px;
}

.answer_text {
  color: var(--primary-text, #181818);

  /* Georgian/Body/Medium */
  font-family: var(--font-family);
  font-size: var(--font-size-14px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 21px */
  letter-spacing: 0.28px;
}

.question_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  gap: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.question_container:hover {
  padding: 16px 32px 16px 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.question_text {
  color: var(--primary-text, #181818);

  /* Georgian/Body/Large */
  font-family: var(--font-family);
  font-size: var(--font-size-16px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
  letter-spacing: 0.32px;
}

.border_top {
  padding-top: 24px;
  padding-bottom: 16px;

  border-top: 1px solid var(--accent-text, #005cda);
}

/*---------------> swiper styles <-----------------*/
.swiper-container {
  width: 100%;
  position: relative;
  overflow-x: auto;
  padding-bottom: 24px;
}

.swiper-slide {
  width: auto;
}

.swiper-wrapper {
  display: flex;
  gap: 16px;
}

.swiper-scrollbar {
  position: absolute;
  bottom: 2px !important;
  height: 6px !important;
  background: var(--accent-text, #005cda);
  border-radius: 2px;
}

.swiper-scrollbar-drag {
  background: var(--bg-decorative-orange, #f90);
}

/*---------------> children tab  styles <-----------------*/
.children_tab_container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 44px;
}

.swiper-container::-webkit-scrollbar {
  display: none;
}

.tab_btn {
  cursor: pointer;
  border: none;
  padding: 4px 12px;

  background: var(--background, #fff);

  color: var(--secondary-text, #6d6d6d);
  /* Georgian/Title/Small */
  font-family: var(--font-family);
  font-size: var(--font-size-16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 24px */
  letter-spacing: 0.32px;
  text-transform: uppercase;
  -moz-font-feature-settings: "case";
  -webkit-font-feature-settings: "case";
  font-feature-settings: "case" on;
}

.tab_btn_active {
  border-radius: 2px;
  color: var(--black-text, #000);
  background: var(--bg-decorative-orange, #f90);
}

.icon_color_profile {
  color: var(--accent-text, #005cda);
}

/*---------------> Responsive Design <-----------------*/
@media screen and (max-width: 1024px) {
  .statistic_layout {
    flex-direction: column;
  }

  .statistic_sidebar {
    flex: 0 0 auto;
    min-width: 100%;
  }

  .sidebar_nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .sidebar_tab {
    min-width: 200px;
    white-space: nowrap;
  }

  .statistic_content {
    max-height: none;
    overflow-y: visible;
  }
}

@media screen and (max-width: 700px) {
  .sidebar_nav {
    flex-direction: column;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .sidebar_tab {
    min-width: 100%;
    width: 100%;
  }
}

@media screen and (max-width: 900px) {
  /* Adjust header layout for medium screens */
  .chart_item_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: auto;
    padding-bottom: 16px;
  }

  .year_select_custom {
    width: auto;
    max-width: 100%;
  }

  .chart_item canvas,
  .chart_item_sx canvas {
    min-height: 350px !important;
  }


  .gender_title_height {
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .statistic_header {
    padding-top: 80px;
  }

  .tab_content_statistic {
    padding: 0;
  }

  .content_header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .charts_scrollable {
    padding: 0 12px 16px 12px;
  }

  .sidebar_tab {
    font-size: 14px;
    padding: 12px 16px;
  }

  .chart-container {
    gap: 16px;
    flex-direction: column;
  }

  .chart_item,
  .chart_item_width,
  .chart_item_sx {
    max-width: 100%;
    width: 100%;
    padding: 16px;
  }

  .chart_item canvas,
  .chart_item_sx canvas,
  .chart_item_width canvas {
    min-height: 300px !important;
  }

  .chart_item_header {
    padding-bottom: 12px;
  }

  .chart_label_text {
    font-size: 13px;
  }

  .custom_legend {
    margin-top: 16px;
    margin-bottom: 36px;
    gap: 8px;
  }

  .legend_item {
    padding: 6px 10px;
    font-size: 13px;
  }

  .legend_text {
    font-size: 13px;
  }

  .year_select_custom {
    font-size: 14px;
    padding: 6px 12px;
  }
}

@media screen and (max-width: 480px) {
  .statistic_header {
    padding-top: 90px;
  }

  .statistic_header_title {
    font-size: 18px;
  }

  .statistic_header_icon {
    font-size: 24px !important;
    width: 24px;
    height: 24px;
  }

  .chart_item,
  .chart_item_width,
  .chart_item_sx {
    padding: 12px;
  }

  .chart_item canvas,
  .chart_item_sx canvas,
  .chart_item_width canvas {
    min-height: 280px !important;
  }

  .chart_label_text {
    font-size: 12px;
    line-height: 140%;
  }

  .custom_legend {
    margin-top: 12px;
    margin-bottom: 24px;
  }

  .legend_item {
    padding: 4px 8px;
  }

  .legend_color_box {
    width: 12px;
    height: 12px;
  }

  .legend_text {
    font-size: 12px;
  }

  .year_select_custom {
    font-size: 13px;
    padding: 6px 10px;
    max-width: 100%;
  }

  .sidebar_tab {
    font-size: 13px;
    padding: 10px 14px;
    min-width: 150px;
  }
}