table {
        width: auto; 
        height: auto;  
        border-collapse: collapse;
        margin-top: auto; 
        margin-left: auto; 
      }
      th {
        padding: 8px;
        font-family: 'Times New Roman', cursive;
        text-align: center;
        background-color: #EAECEE;
      }
      tr {
        border: 3px solid #EAECEE;
        padding: 8px;
        font-family: 'Times New Roman', cursive;
        text-align: center;
        background-color: #EAECEE;
      }
      td {
         padding: 8px;
         font-family: 'Times New Roman', cursive;
         text-align: center;
         background-color: #EAECEE;
       }
      caption {
        font-size: 1.1em;
        margin-bottom: 10px;
        font-family: 'Times New Roman', cursive;
        text-align: center;
        font-size: 28px; 
        font-style: italic;
        color:black;
        white-space: nowrap;
      }
      thead {
        background-color: #AED6F1;
      }
      /**************************************************/
      td.tr1 {
        background-color: #EAECEE;
        text-align: right;
        column-width: 100px;
        font-size: 18px; 
      }
  
      td.tr2 {
        background-color: #D6EAF8;
        text-align: left;
        column-width: auto;
        font-size: 18px; 
      }

      td.tr31 {
        background-color:aquamarine;
        text-align: center;
        column-width: 100px;
        font-size: 18px; 
      }
      td.tr4 {
        background-color: #EAECEE;
        text-align: center;
        column-width: 100px;
        font-size: 18px; 
      }
      /****************************************************/
      th.tr11 {
        background-color: #EAECEE;
        text-align: center;
        column-width: 100px;
        font-size: 18px; 
      }
  
      th.tr12 {
        background-color: #D6EAF8;
        text-align: center;
        column-width: auto;
        font-size: 18px; 
      }

      th.tr13 {
        background-color:aquamarine;
        text-align: center;
        column-width: 100px;
        font-size: 18px; 
		word-wrap: break-word;
      }
      th.tr14 {
        background-color: #EAECEE;
        text-align: center;
        column-width: 100px;
        font-size: 18px; 
      }
      /****************************************************/
      td.tr1 {
        background-color: #EAECEE;
        text-align: right;
        column-width: 100px;
        font-size: 18px; 
      }
  
      td.tr2 {
        background-color: #D6EAF8;
        text-align: left;
        column-width: auto;
        font-size: 18px; 
      }

      td.tr3 {
        background-color: #EAECEE;
        text-align: center;
        column-width: 100px;
        font-size: 18px; 
      }
      td.tr4 {
        background-color: #EAECEE;
        text-align: center;
        column-width: 100px;
        font-size: 18px; 
      }
      /****************************************************/
      th.tr1 {
        background-color: #EAECEE;
        text-align: right;
        column-width: 100px;
        font-size: 18px; 
      }
  
      th.tr2 {
        background-color: #D6EAF8;
        text-align: left;
        column-width: auto;
        white-space: nowrap;
      }

      th.tr3 {
        background-color: #EAECEE;
        text-align: center;
        column-width: 100%;
        white-space: nowrap;
      }
      th.tr4 {
        background-color: #EAECEE;
        text-align: center;
        column-width: 100%;
        white-space: nowrap;
      }
  
      /****************************************************/
      .table-container {
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        margin-top: -50px;
      }

      .table-container1 {
        display: flex;
        justify-content: space-between;
        margin-left: 300px; 
        margin-top: -562px; 
      }
      /*****************************************************/
  :root {
    --position-top-v2-1: 900px;
    --position-left-v2-1: 840px;
    --position-top-v2-2: 970px;
    --position-left-v2-2: 940px;
    --position-top-v2-3: 1040px;
    --position-left-v2-3: 1040px;
  }
  .v1 {
    position: absolute;
    top: var(--position-top-v2-1);
    left: var(--position-left-v2-1);
    width: 25%;
    background-color: antiquewhite;
    border-radius: 1.5px;
  }

  .v2 {
    position: absolute;
    top: var(--position-top-v2-2);
    left: var(--position-left-v2-2);
    width: 25%;
    background-color:aquamarine;
    border-radius: 1.5px;
  }

  .v3 {
    position: absolute;
    top: var(--position-top-v2-3);
    left: var(--position-left-v2-3);
    width: 25%;
    background-color:beige;
    border-radius: 1.5px;
}
@media (max-width: 1149px) and (min-width: 488px) {
    .table-container, .table-container1 {
        margin-left: 10px; /* Снижаем отступы для меньших экранов */
        margin-top: 10px;
        flex-direction: column; /* Меняем направление на вертикальное */
    }

    .table-container1 {
        margin-left: 20px; /* Понижаем отступы для контейнера 1 */
    }

    .v1, .v2, .v3 {
        width: 100%; /* Увеличиваем ширину элементов до 100% на средних экранах */
        top: auto;
        left: auto;
        position: relative; /* Убираем абсолютное позиционирование */
        margin: 10px 0; /* Добавляем отступы */
    }
}
@media (max-width: 488px) {
    table {
        width: 100%; /* Делаем таблицу на весь экран */
    }

    th, td {
        font-size: 14px; /* Уменьшаем шрифт в таблице */
        padding: 6px; /* Уменьшаем отступы */
    }

    caption {
        font-size: 22px; /* Уменьшаем шрифт для заголовка таблицы */
    }

    .v1, .v2, .v3 {
        width: 100%; /* Ширина 100% */
        margin: 10px 0;
    }
}
@media (min-width: 1150px) {
    .table-container, .table-container1 {
        margin-left: 30px;
        margin-top: 20px;
    }

    .v1, .v2, .v3 {
        width: 25%; /* Возвращаем стандартную ширину */
    }
}
@media (max-width: 488px) {
    td, th {
        background-color: #F0F0F0; /* Легкий фон для ячеек */
        color: #333; /* Темный текст */
    }

    .table-container, .table-container1 {
        padding: 5px;
    }
}