Update nutri_call.html

nutri_call.html

@@ -149,24 +149,26 @@ legend {
 
 
 
-/* Стили для контейнера заголовка NPK */
-.header-container-npk {
+/* Стили для контейнера первого блока (NPK) */
+.npk-container {
     display: flex;
-    justify-content: center;
-    margin-bottom: 10px; /* Отступ между заголовком и блоком */
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px; /* Отступ между заголовком и основным блоком */
+    margin-left: 18px; /* Общий отступ слева */
+    margin-top: 10px; /* Отступ сверху */
 }
 
+/* Стили для заголовка NPK */
 .header-npk {
     font-weight: bold;
     font-size: 1em;
-    padding: 5px 10px;
-    background-color: #eaffea;
-    border: 1px solid #2e8b57;
-    border-radius: 8px;
     text-align: center;
+    width: 280px; /* Ширина заголовка совпадает с шириной блока */
+    margin-bottom: 5px; /* Отступ между заголовком и основным блоком */
 }
 
-/* Стили для блока NPK */
+/* Стили для основного блока NPK */
 .block-npk {
     display: flex;
     flex-direction: column;
@@ -177,8 +179,6 @@ legend {
     border: 1px solid #2e8b57;
     border-radius: 8px;
     width: 280px; /* Ширина блока */
-    margin-left: 18px; /* Сдвигаем блок вправо */
-    margin-top: 0; /* Убираем отступ сверху */
 }
 
 .row-npk {
@@ -191,43 +191,42 @@ legend {
     font-weight: bold;
     min-width: 50px; /* Минимальная ширина меток */
     text-align: right;
-    margin-left: -10px; /* Сдвигаем текст влево */
 }
 
 .row-npk span {
     font-size: 0.9em;
 }
 
-/* Стили для контейнера заголовка Ca-Mg-S */
-.header-container-camgs {
+/* Стили для контейнера второго блока (Ca-Mg-S) */
+.camgs-container {
     display: flex;
-    justify-content: center;
-    margin-bottom: 10px; /* Отступ между заголовком и блоком */
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px; /* Отступ между заголовком и основным блоком */
+    margin-left: 10px; /* Общий отступ слева */
+    margin-top: 10px; /* Отступ сверху */
 }
 
+/* Стили для заголовка Ca-Mg-S */
 .header-camgs {
     font-weight: bold;
     font-size: 1em;
-    padding: 5px 10px;
-    background-color: #eaffea;
-    border: 1px solid #2e8b57;
-    border-radius: 8px;
     text-align: center;
+    width: 280px; /* Ширина заголовка совпадает с шириной блока */
+    margin-bottom: 5px; /* Отступ между заголовком и основным блоком */
 }
 
-/* Стили для второго блока (Ca-Mg-S) */
+/* Стили для основного блока Ca-Mg-S */
 .block-camgs {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 5px;
     padding: 10px;
-    background-color: #eaffea; /* Цвет фона */
+    background-color: #eaffea;
     border: 1px solid #2e8b57;
     border-radius: 8px;
     width: 280px; /* Ширина блока */
-    margin-left: 10px; /* Сдвигаем блок правее */
-    margin-top: 0; /* Убираем отступ сверху */
 }
 
 /* Стили для внутреннего контейнера строк */
@@ -250,7 +249,6 @@ legend {
     font-weight: bold;
     min-width: 80px; /* Минимальная ширина меток */
     text-align: right;
-    margin-left: -10px; /* Сдвигаем текст влево */
 }
 
 .row-camgs span {
@@ -498,46 +496,46 @@ legend {
 
 <!-- Первый блок NPK -->
 <!-- Заголовок NPK -->
-<div class="header-container-npk">
-    <div class="header-npk">N-P-K</div>
-</div>
-
 <!-- Первый блок NPK -->
-<div class="block-npk">
-    <div class="row-npk">
-        <span class="label-npk">N:</span>
-        <span id="npk-n-value">0</span>
-    </div>
-    <div class="row-npk">
-        <span class="label-npk">P:</span>
-        <span id="npk-p-value">0</span>
-    </div>
-    <div class="row-npk">
-        <span class="label-npk">K:</span>
-        <span id="npk-k-value">0</span>
+<div class="npk-container">
+    <!-- Заголовок NPK -->
+    <div class="header-npk">N-P-K</div>
+    <!-- Основной блок с содержимым -->
+    <div class="block-npk">
+        <div class="row-npk">
+            <span class="label-npk">N:</span>
+            <span id="npk-n-value">0</span>
+        </div>
+        <div class="row-npk">
+            <span class="label-npk">P:</span>
+            <span id="npk-p-value">0</span>
+        </div>
+        <div class="row-npk">
+            <span class="label-npk">K:</span>
+            <span id="npk-k-value">0</span>
+        </div>
     </div>
 </div>
 
-<!-- Заголовок Ca-Mg-S -->
-<div class="header-container-camgs">
-    <div class="header-camgs">Ca-Mg-S</div>
-</div>
-
 <!-- Второй блок Ca-Mg-S -->
-<div class="block-camgs">
-    <!-- Дополнительный контейнер для строк -->
-    <div class="inner-block-camgs">
-        <div class="row-camgs">
-            <span class="label-camgs">CaO:</span>
-            <span id="caMaS-ca-value">0</span>
-        </div>
-        <div class="row-camgs">
-            <span class="label-camgs">MgO:</span>
-            <span id="caMaS-mg-value">0</span>
-        </div>
-        <div class="row-camgs">
-            <span class="label-camgs">SO:</span>
-            <span id="caMaS-so-value">0</span>
+<div class="camgs-container">
+    <!-- Заголовок Ca-Mg-S -->
+    <div class="header-camgs">Ca-Mg-S</div>
+    <!-- Основной блок с содержимым -->
+    <div class="block-camgs">
+        <div class="inner-block-camgs">
+            <div class="row-camgs">
+                <span class="label-camgs">CaO:</span>
+                <span id="caMaS-ca-value">0</span>
+            </div>
+            <div class="row-camgs">
+                <span class="label-camgs">MgO:</span>
+                <span id="caMaS-mg-value">0</span>
+            </div>
+            <div class="row-camgs">
+                <span class="label-camgs">SO:</span>
+                <span id="caMaS-so-value">0</span>
+            </div>
         </div>
     </div>
 </div>