body {
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e0f2e9;
    margin: 0;
}

.container {
    position: relative;
    text-align: center;
    background-color: #fff;/*    black;         */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /*
    width: 90%;
    max-width: 400px;
    */
    width: 85%;
    max-width: fit-content;
    min-width:fit-content;
    overflow-y: auto; /*біле поле автоматично змінює розмір */

}

.content-container {
    position: relative;
    text-align: center;
    background-color:  #fff;         /* black;*/
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /*
    width: 90%;
    max-width: 400px;
    */
    width: 85%;
    max-width: fit-content;
    min-width:fit-content;
    overflow-y: auto; /*біле поле автоматично змінює розмір */  
    font-family:'KOLIBRI';
}

.image-with-caption {
    display: flex;
    align-items: center; /* Вирівнює зображення і текст вертикально */
  }
  
  .image-with-caption img {
    max-width: 20px; /* Задайте потрібний розмір для зображення */
    height: auto;
    margin-right: 10px; /* Відступ між зображенням і підписом */
  }
  
  .image-with-caption .caption {
    font-size: 16px; /* Розмір тексту підпису */
    color: #333; /* Колір тексту */
  }
  

h1 {
    color: #4CAF50;
    margin-bottom: 20px;
    font-weight: bold;
   
}

/* Bluetooth icon positioned in the top-right of the container */
#bluetoothimg {
    position: absolute;
    top: 20px;
    right: 10px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0;
    transition: opacity 0.5s ease;
    /*display: none; сховати знак BLUETOOTH  */
}

/* це для виводу рівня заряду батареї біля її іконки*/
.image-container { 
    position: absolute;
    display: flex;
    top: 10px;
    left: 10px;
    width: 50px;
    /*height: 30px;*/
   }
   .image-container img {
      left: 1px; 
      top: 10px;
      width:40em
      
   } .image-container 
   .caption {
      font-size: 11px; 
      color: #333; 
      top: 30px;
      left: 2px;
      position: absolute;
        
   } 


#batterylowlevel {
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;
    
    /*display: inline-block;*/
}

#batterylevel20 {
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;

}
#batterylevel25 {
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;
}

#batterylevel50 {
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;
}

#batterylevel75 {
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;
}

#batterylevel80 {
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;
}

#batterylevel100 {
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;
}

#chargeimg{
    position: absolute;
    top: 9px;
    left: 1px;
    opacity: 0.5; 
    width: 24px; 
    height: auto;
    opacity:0; /* 0 - no visible  1- visible */
    transition: opacity 0.5s ease;
}

.card {
    width: 100px;
    font-size: 0.7rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 2px 2px 7px rgb(0 0 0 / 30%);
    margin-bottom: 1rem;
    overflow-y: auto;

}


.card-title {
    font-size: 1.0rem;
    text-transform: capitalize;

}

.blue {
    background-color: lightblue;  
}

.red {
    background-color: lightcoral;

}

.green {
    background-color: lightgreen;

}

.yellow {
    background-color: lightyellow;
}

.purple {
    background-color: plum;
}


button {
    background-color: #4CAF49;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 7px rgb(0 0 0 / 30%);
    white-space: nowrap; /* Запобігає переносу тексту */
    min-width: 180px; /* Мінімальна ширина кнопки */
    text-align: center; /* Центрування тексту */
}



input {
    background-color: #4CAF49;
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 7px rgb(0 0 0 / 30%); 

}


button:hover {
    background-color: #45a049; /* фон при наведенні курсора на кнопку  */
}


button:disabled {
    background-color: #b0e0a8;
    cursor: not-allowed;
}

#controlButtons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;

}

#error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
    display: none;  /* відключив вивід зображення помилки*/
}

#tables {
    color: #4CAF50;
    font-size: 10px;
    position: relative; /* поставити по центру */
    display: none; /* сховав таблицю*/ 
}

#logs {
    color: #4CAF50;
    font-size: 10px;
    margin-top: 20px;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 5px;
    text-align: left;
    max-height: 150px; /*150*/
    overflow-y: auto;
   display: none; /* відключив вивід зображення логів*/
}

#log-output {
    font-size: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#log-output div {
    margin-bottom: 5px;
}

#timer {
    font-size: 2em;
    margin-bottom: 10px;
    color: #4CAF50;
    font-weight: bold;
    box-shadow: 2px 2px 7px rgb(0 0 0 / 30%);
}

#countdown { 
    font-size: 2em;
    margin-bottom: 10px;
    color: #4CAF50;
    font-weight: bold;
    box-shadow: 2px 2px 7px rgb(0 0 0 / 30%); 
    display: none; /*/*сховати зворотній таймер */ 
}

#resetSession {
    display: none; /*сховати червону кнопку RESET  */

}
#resetSession:hover{
    background-color: red;
}

#stopSession {
    display: none; /*сховати червону кнопку STOP  */

}


#connection-status {
    color: red;/*#4CAF50; Green*/
    font-weight: bold;
    font-size: 1em;
   /* display: none;*/
}

#logotype {
    width:50px;
    height:50px;
}

/*#datetime {
    font-size: 0.7em;
    text-align: right;
    margin-top: 20px;
}
*/

/* кнопка вводу кустомного значення випромінювання  */
#editCustom { 
   display: none;  /*сховати кнопку Customs  */
   position: relative; /* поставити по центру */
   justify-content: center;
   align-items: center;
   color: white;
   font-weight: bold;
   text-align: center; 
/*   width: 60px;*/

}
 /*
#editCustom:hover{
   cursor: text;  Курсор вертикальної смужки  
    size: auto;
}*/

.card.green  { 
    background-color: #45a049;
 } 
 .card.green:hover{
    background-color: red;   
 }


/* поле вводу кустомного значення випромінювання  */
#editCustomLabel {
   display: none;  /*сховати  кнопку Customs  */ 
   position: relative; /* поставити по центру */
   justify-content: center;
   align-items: center;
   width: auto;
}

  [aria-label][data-balloon-pos] {
    color: white;
    --balloon-color:rgb(101, 101, 252);
       
  }


.container .container {
    position: relative;
    text-align: center;
    font-size: 0.7em;
    color: #45a049;
    background-color: #fff;
    padding: 1px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 99%;
    height: 10%;
    max-width: 900px;
    place-items: center;
   
    /*overflow-y: auto; біле поле автоматично змінює розмір */
}

/* добавимо пробіли в нижній панелі, де виводимо назву компанії, S/N, дату та час */
.spacer {
     white-space: pre; 
}

#connectDevice {
    color: white;  
}

#connectDevice:hover{
    background-color: rgb(3, 126, 3);
}

#languageselect{
    background-color: white;
    color: green; 
    font-size: 1em;
    border: none;
    font-family:'KOLIBRI';
}

#menu{
    background-color: white;
    color: green; 
    font-size: 1em;
    border: none;   
    font-family:'KOLIBRI'; 
}



/*  
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: rgb(255, 0, 0 ,1.0); /* Зміна фону підказки, прозорість підказки 0.7
    color: black;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 100%; 
    left: 70%; 
    margin-left: -60px; 
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 2px 2px 7px rgb(0 0 0 / 30%);

}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
*/

/* все що стосується меню
.dropdown {
    position: relative;
    display: inline-block;
    opacity: 1;
}
/* все що стосується меню
.dropdown-content {
    display: none;
    /*position: absolute;
    position:fixed;
    background-color: #f9f9f9;
    min-width: 90px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* все що стосується меню
.dropdown-content a {
    color: green;
    padding: 3px 4px;
    text-decoration: none;
    display: block;
}
/* все що стосується меню*
.dropdown-content a:hover {
    background-color: #f1f1f1;
}
/* все що стосується меню
 .dropdown:hover .dropdown-content {
   display: block;
}
/* все що стосується кнопки меню
.menu-button {
    /*Встановлює позицію кнопки як fixed, щоб вона залишалася в правому нижньому куті навіть при прокручуванні сторінки.*/
   /* position: fixed;
    /* Вказує відступ від нижнього (bottom: 20px) та правого краю (right: 20px).
    bottom: 20px;
    right: 20px;
    /*Задає ширину (width: 150px) та висоту (height: 50px) кнопки.
    width: 70px;
    height: 25px;
    
    background-color: white;
    color: green;
    border: none;
    border-radius: 5px;
    
    font-size: 0.8em;
    cursor: pointer;
    /*Додає плавний перехід (transition) для анімації зміни розміру при наведенні курсору.
    transition: all 0.3s ease;
}
/* все що стосується кнопки меню
.menu-button:hover {
    background-color: #b6e7b9;
    /*width: 85px;  Зміна розміру при наведенні */
   /* height: 25px;  Зміна розміру при наведенні */
/*}*/