/** HTML5/CSS3, EDGE/CHROME                       *** Update40landscape.css ***
 *
 ******************************************************************************
 * KwinFlat                           Обновить показания счетчиков, состояния *
 *                                                   устройств и контроллеров *
 ******************************************************************************
 *
 * v4.4.3, 09.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;
}
#Article 
{
   background:transparent; 
   height:56%;
   z-index:2;
}
#Footer 
{
   background:Lavender;
   /*background:transparent;*/ 
   height:30%;
   z-index:2;
   / *overflow:auto;* /
}
#kwf
{
  border:solid .3rem DarkGoldenRod;
  border-radius:20%;
   
  position: absolute;
  top: 1.4%;
  left: 5%;
  height: 10%; 
  width:40%;
}
/* Кнопка виртуального контроллера */
.btnflip 
{
 height: 10%; 
 width:calc( ( 200vw - 480px ) / ( 1920 - 480 ) * ( 160 - 8 ) + 8px );
 top: 6.4%;
 left: 57%;
}

/* ------------------------------------------------------------------------- */
/*
#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:.7rem;
}
/* Изъяли из активности, но, сделали похожей на кнопки в ряду */
#shnolight
{
  width: 17.4%;
  margin-right:2.6%;
  text-align:center; 
  font-weight:900;
  font-size:.7rem;
}
.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%;
}

/*************************************************** Update40landscape.css ***/