/** HTML5/CSS3, EDGE/CHROME                                *** Update40.css ***
 *
 ******************************************************************************
 * KwinFlat                           Обновить показания счетчиков, состояния *
 *                                                   устройств и контроллеров *
 ******************************************************************************
 *
 * v4.4.2, 08.09.2025                                 Автор:      Труфанов В.Е.
 * Copyright © 2024 tve                               Дата создания: 22.12.2024
 * 
**/

#LeftAndRight
{
   display:flex;
   flex-direction:row;
   height:97%;
}
#Left
{
   background:LightYellow;
   width:67%;
   height:100%;
   /*background:transparent;*/ 
   z-index:1;
}
#Right
{
   background:LightCyan;
   width:33%;
   height:100%;
   z-index:1;
}
#Header 
{
   background:White;
   height:14%;
   z-index:2;
}

#kwf
{
   border:solid .3rem DarkGoldenRod;
   border-radius:20%;
   width:58%;
   margin-left:10%;
   margin-top:-3%;
   height:70%;
   padding-bottom:.6rem;
}
#Article 
{
   /*background:LemonChiffon;*/
   background:transparent; 
   height:56%;
   z-index:2;
}
#Footer 
{
   /*background:Lavender;*/
   background:transparent; 
   height:30%;
   z-index:2;
   / *overflow:auto;* /
}
#FooterTop
{
   display:block;
   /*background:red;*/
   background:transparent; 
   width:100%;
   height:74%;
   overflow:hidden;
}
/* Определяем полосу для трассировки json-сообщений */
#tickers 
{
   display:flex; /* определили движение сообщений */ 
   height:3%;
   background:GhostWhite;
   z-index:1;
   width:100%;
}
/* Определяем размещение каждого сообщения */
.ticker 
{
   border:solid .1rem Gray;
   text-align:left;
   overflow: hidden;
   margin-left:.4%;
   padding-left:.5%;
   padding-right:.5%;
}
/* Создаем площадку для размещения заголовков и элементов управления */
#lead
{
   padding-left:2.6%;
   / *background:LightYellow;* /
   background:transparent; 
   height:50%;
   width:100%;
   /*display:none;*/
   display:block;
}
#shsh
{
   display:flex;
   / *background:Tomato;* / 
   background:transparent; 
   height:20%;
   width:100%;
   align-items:end;
   justify-content:center;
}
#lplp
{
   display:flex;
   / *background:yellow;* / 
   background:transparent; 
   height:50%;
   width:100%;
   align-items:center;
   justify-content:center;
}
/* Размещаем заголовки и элементы управления LED4 */
.shled4,.cled4
{
   width: 17.4%;
   margin-right:2.6%;
   text-align:center; 
}
.shled4
{
   font-weight: 900;
   font-size: calc( ( 100vw - 480px ) / ( 1920 - 480 ) * ( 18 - 10 ) + 10px );
}
/* Изъяли из активности, но, сделали похожей на кнопки в ряду */
#shnolight
{
   width: 17.4%;
   margin-right:2.6%;
   text-align:center; 
   font-weight: 900;
   font-size: calc( ( 100vw - 480px ) / ( 1920 - 480 ) * ( 18 - 10 ) + 10px );
}
.cled4
{  
   display:flex;
   align-items:center;
   justify-content:center;
   font-weight: 900;
   font-size: calc( ( 100vw - 480px ) / ( 1920 - 480 ) * ( 48 - 16 ) + 16px );
   color:Black;
   background:Silver;
   height:80%;
   border-radius:5%;
}
/* Иммитируем лампочку */
#spot
{
   border-radius:34%;
   height: 120%;
}
/* Высвечиваем события */
.shled4:hover
{
   color:#F4A460;
}
.shled4:active
{
   color:red;
}
/* Определяем окно ошибок и предупреждений */
#DialogWind
{
   display:flex;
   align-items:center;
   color:red;
   font-size:calc( ( 100vw - 480px ) / ( 1920 - 480 ) * ( 36 - 12 ) + 12px );
}
/* Определяем поля ввода параметров управления светодиодом */
.Inp, .Btn
{
   font-size:calc( ( 100vw - 480px ) / ( 1920 - 480 ) * ( 20 - 8 ) + 8px );
   font-weight:900;
}
.Inp
{
   width:calc( ( 100vw - 480px ) / ( 1920 - 480 ) * ( 160 - 8 ) + 8px );
   / *border:0;* /
}
.Btn
{
   border-radius:20%;
}

/************************************************************ Update40.css ***/