/* Основни настройки за всички елементи на страницата */
body {
  font-family: Arial, sans-serif; /* Избор на шрифт */
  padding: 20px; /* Отстояние на съдържанието от ръбовете */
  background-color: #f4f4f9; /* Светъл фон за цялата страница */
}

/* Стил за основните заглавия (h1 и h2) */
h1,
h2 {
  text-align: center; /* Подравняване на текста в центъра */
  color: #333; /* Тъмно сив цвят за заглавията */
  margin-bottom: 20px; /* Допълнително отстояние отдолу */
}

/* Центриране на съдържанието в контейнера */
.container {
  display: flex;
  flex-direction: column; /* Вертикална подредба на елементите */
  align-items: center; /* Центриране на елементите по хоризонтала */
  justify-content: center; /* Центриране по вертикала */
  padding: 20px;
  background-color: #fff; /* Бял фон за контейнера */
  border-radius: 10px; /* Овални ъгли */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Лека сянка за контейнера */
  max-width: 90%; /* Ограничаване на максималната ширина */
  margin: 0 auto; /* Центриране на контейнера на страницата */
}

/* Стил за етикетите към падащите менюта */
label {
  font-size: 16px; /* Размер на шрифта */
  margin: 10px 0; /* Отстояние отгоре и отдолу */
  font-weight: bold; /* Удебелен шрифт за етикетите */
  color: #555; /* Средно сив цвят */
}

/* Стил за падащите менюта */
select {
  margin-bottom: 20px; /* Отстояние отдолу */
  padding: 5px 10px; /* Вътрешно отстояние за повече пространство */
  font-size: 16px; /* Размер на шрифта */
  border: 1px solid #ccc; /* Сив контур */
  border-radius: 5px; /* Овални ъгли */
  background-color: #fff; /* Бял фон */
  color: #333; /* Тъмен цвят за текста */
  outline: none; /* Премахване на стандартния контур */
  transition: border-color 0.3s ease; /* Ефект при фокус */
}

/* Ефект за фокусиране на падащите менюта */
select:focus {
  border-color: #007bff; /* Промяна на цвета на контура при фокус */
}

/* Стил за канваса на диаграмите */
canvas {
  display: block; /* Показва канваса като блоков елемент */
  margin: 0 auto 30px auto; /* Центриране и отстояние отдолу */
  width: 1500px; /* Задайте желаната ширина */
  height: 400px; /* Задайте желаната височина */
  max-width: 100%; /* Ограничаване на ширината */
}

/* Отделни секции за всяка диаграма */
.section {
  margin-bottom: 50px; /* Отстояние отдолу */
  text-align: center; /* Центриране на текста */
}

/* Удължаване на диаграмите */
.section canvas {
  max-width: 90%; /* Ширина на диаграмите */
  height: 400px; /* Минимална височина на диаграмите */
}

/* Подредба на падащите списъци за втората диаграма */
.select-row {
  display: flex; /* Подредба на елементите в ред */
  justify-content: center; /* Центриране на падащите менюта */
  gap: 20px; /* Разстояние между падащите менюта */
  margin-bottom: 20px; /* Отстояние отдолу */
}

/* Стил за маркерите над колоните на диаграмата */
.marker {
  width: 30px; /* Ширина на маркера */
  height: 30px; /* Височина на маркера */
  border-radius: 50%; /* Правим го кръгъл */
  display: inline-block; /* Показване в ред с останалите елементи */
  text-align: center; /* Центриране на текста */
  line-height: 30px; /* Вертикално центриране на съдържанието */
  font-size: 12px; /* Размер на текста вътре в маркера */
  margin-right: 10px; /* Разстояние отдясно */
  margin-top: -20px; /* Позиционираме маркера над диаграмата */
  position: relative;
  z-index: 10; /* За да е над диаграмата */
}

/* Легенда за цветовете */
.legend-box {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.legend-color {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #ccc;
}

.legend-text {
  font-size: 14px;
  color: #333;
}
/* Подреждане на двата падащи списъка */
.select-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

/* Стил за падащите менюта */
select {
  margin-bottom: 20px;
  padding: 5px;
  font-size: 16px;
}