/****** ВКЛАДКИ (в стиле браузера) - с ограниченной шириной ******/

.tabs {
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  border-bottom: 2px solid #ddd;
}

/* Скрываем радио-кнопки */
.tabs > input {
  display: none;
}

/* Вкладки */
.tabs > label {
  /* Эти свойства ограничивают ширину вкладок */
  flex-grow: 0; /* Отключаем растягивание */
  flex-shrink: 0; /* Предотвращаем сжатие */
  max-width: 150px; /* Устанавливаем максимальную ширину */

  padding: 10px 15px;
  margin: 0 4px 2px 0;
  font-size: 15px;
  font-weight: 600;
  color: #072746;
  background: #f5f7fa;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  top: 2px;
}

/* Наведение */
.tabs > label:hover {
  background: #e6ebf2;
}

/* Активная вкладка */
.tabs > input:checked + label {
  background: #072746;
  color: #fff;
  border: 2px solid #072746;
  border-bottom: 3px solid #072746;
  z-index: 2;
}

/* Контент */
.tabs > div {
  display: none;
  padding: 20px;
  border: 2px solid #072746;
  border-radius: 0 10px 10px 10px;
  background: #fff;
  animation: fadeIn 0.3s ease;
}

/* Плавное появление */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Активный контент */
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4,
#tab_5:checked ~ #txt_5,
#tab_6:checked ~ #txt_6,
#tab_7:checked ~ #txt_7,
#tab_8:checked ~ #txt_8,
#tab_9:checked ~ #txt_9,
#tab_10:checked ~ #txt_10,
#tab_11:checked ~ #txt_11,
#tab_12:checked ~ #txt_12,
#tab_13:checked ~ #txt_13,
#tab_14:checked ~ #txt_14,
#tab_15:checked ~ #txt_15,
#tab_16:checked ~ #txt_16,
#tab_17:checked ~ #txt_17 {
  display: block;
}