/*
 * AA ALLIANCE
 * УМНОЕ РАСКЛЮЧЕНИЕ
 */

:root{
  --sw-green:#6bd69b;
  --sw-gold:#dfc17a;
}

/*
 * Клемма визуально остаётся небольшой,
 * но зона наведения значительно больше.
 */

.port{
  position:relative !important;
  overflow:visible !important;
  cursor:pointer !important;
}

.port::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%);
  border-radius:10px;
  z-index:8;
  cursor:pointer;
}

.port:hover{
  outline:2px solid var(--sw-green) !important;
  box-shadow:
    0 0 0 4px rgba(107,214,155,.12) !important;
}

.dot{
  position:relative !important;
  z-index:10 !important;
  width:16px !important;
  height:16px !important;
}


/*
 * SVG остаётся прозрачным,
 * но сами провода принимают события мыши.
 */

#svg{
  pointer-events:none;
}

.wire{
  pointer-events:stroke !important;
  cursor:pointer !important;

  stroke-linecap:round;
  stroke-linejoin:round;

  transition:
    stroke .16s ease,
    stroke-width .16s ease,
    opacity .16s ease,
    filter .16s ease;
}


/*
 * Наведение.
 */

.wire:hover,
.wire.active{
  opacity:1 !important;

  filter:
    drop-shadow(
      0 0 3px
      rgba(255,255,255,.32)
    );
}


/*
 * Выбранный провод.
 */

.wire.aa-wire-selected{
  opacity:1 !important;

  filter:
    drop-shadow(
      0 0 4px
      rgba(255,255,255,.55)
    );
}


/*
 * Строка таблицы.
 */

#tbl tbody tr{
  cursor:pointer;

  transition:
    background .14s ease;
}

#tbl tbody tr:hover{
  background:
    rgba(107,214,155,.07);
}

#tbl tbody tr.aa-row-selected{
  background:
    rgba(107,214,155,.12);
}


/*
 * Цветовой образец.
 */

.aa-wire-swatch{
  display:inline-block;

  width:25px;
  height:5px;

  margin-right:7px;

  border-radius:4px;

  vertical-align:middle;
}


/*
 * Маленький бейдж параметров.
 */

.aa-wire-meta{
  display:inline-flex;

  align-items:center;

  gap:7px;

  margin-top:6px;

  padding:
    5px 8px;

  border:
    1px solid #304438;

  border-radius:
    8px;

  background:
    #09130e;

  color:
    #aab8ae;

  font-size:
    10px;
}


/*
 * Tooltip провода.
 */

#aaWireTooltip{
  position:fixed;

  z-index:99990;

  display:none;

  min-width:190px;

  max-width:320px;

  padding:
    9px 11px;

  border:
    1px solid #304438;

  border-radius:
    9px;

  background:
    rgba(9,19,14,.97);

  color:
    #edf4ef;

  box-shadow:
    0 14px 45px
    rgba(0,0,0,.45);

  pointer-events:none;

  font-size:
    10px;

  line-height:
    1.45;
}

#aaWireTooltip strong{
  display:block;

  margin-bottom:3px;
}

#aaWireTooltip span{
  color:#89988e;
}



/* ==========================================
   AA SMART WIRING — PROJECT BAR
   ========================================== */

#aaProjectBar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  margin:
    0 0 11px;

  padding:
    10px 12px;

  border:
    1px solid #27392e;

  border-radius:
    11px;

  background:
    linear-gradient(
      180deg,
      #101a13,
      #09120e
    );

}


.aa-project-main{

  display:flex;

  align-items:center;

  gap:9px;

  min-width:0;

}


.aa-project-label{

  font-size:9px;

  letter-spacing:1.3px;

  color:#75847a;

}


#aaProjectName{

  width:
    min(320px,40vw);

  padding:
    8px 10px;

  border:
    1px solid #2c4033;

  border-radius:
    8px;

  background:
    #07100c;

  color:
    #edf4ef;

  font-weight:700;

}


.aa-project-actions{

  display:flex;

  align-items:center;

  gap:7px;

}


.aa-save-state{

  min-width:90px;

  text-align:right;

  color:#819087;

  font-size:10px;

}


.aa-save-state.saving{

  color:#dfbd6b;

}


.aa-save-state.saved{

  color:#6bd69b;

}


.aa-save-state.error{

  color:#e07b7b;

}


#aaProjectsModal{

  position:fixed;

  inset:0;

  z-index:999999;

  display:none;

  align-items:center;

  justify-content:center;

  padding:20px;

  background:
    rgba(2,7,4,.86);

  backdrop-filter:
    blur(9px);

}


#aaProjectsModal.open{

  display:flex;

}


.aa-projects-card{

  width:
    min(620px,95vw);

  max-height:
    80vh;

  overflow:auto;

  padding:18px;

  border:
    1px solid #304438;

  border-radius:
    15px;

  background:
    #0d1711;

  color:
    #edf4ef;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.7);

}


.aa-projects-head{

  display:flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  margin-bottom:14px;

}


.aa-projects-head h3{

  margin:
    4px 0;

}


.aa-projects-head small{

  color:#819087;

}


.aa-project-item{

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:12px;

  padding:
    11px;

  margin-top:
    7px;

  border:
    1px solid #26382d;

  border-radius:
    9px;

  background:
    #09130e;

}


.aa-project-item:hover{

  border-color:
    #496153;

}


.aa-project-info{

  min-width:0;

}


.aa-project-info b{

  display:block;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.aa-project-info small{

  display:block;

  margin-top:4px;

  color:#79877e;

}


.aa-project-buttons{

  display:flex;

  gap:6px;

}


.aa-project-delete{

  color:#e8aaaa !important;

  border-color:
    #653838 !important;

  background:
    #211010 !important;

}


@media(
  max-width:800px
){

  #aaProjectBar{

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .aa-project-actions{

    flex-wrap:wrap;

  }


  #aaProjectName{

    width:100%;

  }

}



/* ==========================================
   DIN RAIL SYSTEM
   ========================================== */

#aaDinPanel{
  margin-bottom:12px;
  padding:12px;

  border:
    1px solid #27392e;

  border-radius:11px;

  background:
    linear-gradient(
      180deg,
      #101a13,
      #09120e
    );
}


.aa-din-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}


.aa-din-title{
  display:flex;
  flex-direction:column;
}


.aa-din-title b{
  font-size:11px;
}


.aa-din-title small{
  margin-top:3px;

  color:#78877d;

  font-size:9px;
}


#aaDinAdd{
  background:
    linear-gradient(
      135deg,
      #d2b46d,
      #efd18b
    ) !important;

  color:#171208 !important;
}


#aaDinWorkspace{
  margin-top:11px;

  display:flex;
  flex-direction:column;
  gap:12px;
}


.aa-din-row{
  padding:10px;

  border:
    1px solid #26382d;

  border-radius:10px;

  background:#08110d;
}


.aa-din-row-head{
  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:10px;

  margin-bottom:9px;
}


.aa-din-row-info{
  display:flex;

  align-items:center;

  gap:10px;
}


.aa-din-id{
  color:#6bd69b;

  font-size:10px;

  font-weight:800;
}


.aa-din-name{
  font-size:10px;

  color:#cbd5ce;
}


.aa-din-modules{
  font-size:9px;

  color:#7e8d83;
}


.aa-din-controls{
  display:flex;

  gap:5px;
}


.aa-din-controls button{
  min-width:31px;

  padding:6px 8px;
}


.aa-din-delete{
  color:#e9a9a9 !important;

  border-color:
    #673b3b !important;

  background:
    #211010 !important;
}


/*
 * Реальная визуальная рейка.
 *
 * 1 модуль DIN ≈ 18 мм.
 * На экране используем
 * масштабированное значение.
 */

.aa-din-track-wrap{
  overflow-x:auto;

  padding:
    8px 4px 13px;
}


.aa-din-track{
  position:relative;

  height:54px;

  min-width:216px;

  border-top:
    1px solid #9da5a8;

  border-bottom:
    1px solid #565f63;

  background:
    linear-gradient(
      180deg,

      #8c969a 0%,
      #d2d7d9 10%,
      #b7c0c3 24%,
      #788287 27%,

      #626c70 35%,
      #d7dcde 40%,
      #e4e8e9 62%,

      #7d878b 67%,
      #5f696d 73%,
      #aeb6b9 77%,
      #7d878b 100%
    );

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.38);

  transition:
    width .2s ease;
}


/*
 * Продолговатые отверстия DIN.
 */

.aa-din-track::before{

  content:"";

  position:absolute;

  left:9px;
  right:9px;

  top:21px;

  height:12px;

  background:
    repeating-linear-gradient(
      90deg,

      transparent 0,
      transparent 7px,

      #384145 7px,
      #384145 20px,

      transparent 20px,
      transparent 31px
    );

  opacity:.92;

}


/*
 * Разметка модулей.
 */

.aa-din-module-grid{

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    repeating-linear-gradient(
      90deg,

      transparent 0,
      transparent 17px,

      rgba(
        15,
        25,
        19,
        .20
      ) 17px,

      rgba(
        15,
        25,
        19,
        .20
      ) 18px
    );

}


.aa-din-empty{

  padding:18px;

  border:
    1px dashed #314438;

  border-radius:9px;

  text-align:center;

  color:#718078;

  font-size:10px;
}



/* ==========================================
   EQUIPMENT ON DIN RAIL
   ========================================== */

.aa-din-row{
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.aa-din-row.aa-din-active{

  border-color:
    #6bd69b;

  box-shadow:
    0 0 0 2px
    rgba(107,214,155,.10);

}


.aa-din-row.aa-din-active
.aa-din-id{

  color:#91e8b5;

}


.aa-din-track-wrap{

  position:relative;

  overflow-x:auto;

  overflow-y:visible;

  padding:
    12px 4px 18px;

}


.aa-din-track{

  /*
   * Рейка становится
   * поверхностью размещения.
   */

  position:relative;

  height:150px;

  overflow:visible;

}


.aa-din-device-layer{

  position:absolute;

  left:0;
  top:0;

  height:150px;

  pointer-events:none;

  z-index:20;

}


.aa-din-device{

  position:absolute;

  top:8px;

  height:134px;

  pointer-events:auto;

  user-select:none;

  cursor:grab;

  transition:
    left .10s ease,
    box-shadow .12s ease,
    transform .12s ease;

}


.aa-din-device:hover{

  z-index:40;

  transform:
    translateY(-2px);

}


.aa-din-device.dragging{

  z-index:100;

  cursor:grabbing;

  opacity:.88;

  transition:none;

  filter:
    drop-shadow(
      0 12px 20px
      rgba(0,0,0,.6)
    );

}


.aa-din-device.selected{

  z-index:50;

  filter:
    drop-shadow(
      0 0 5px
      rgba(107,214,155,.65)
    );

}


.aa-din-device-body{

  position:relative;

  width:100%;
  height:100%;

  overflow:hidden;

  border:
    1px solid #879195;

  border-radius:
    4px;

  background:
    linear-gradient(
      90deg,
      #d8dddf,
      #f5f7f7 14%,
      #e8ebec 84%,
      #c9d0d2
    );

  color:#172127;

  box-shadow:
    0 8px 17px
    rgba(0,0,0,.45);

}


.aa-din-device-head{

  height:25px;

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  padding:
    0 7px;

  background:#182128;

  color:#fff;

  font-size:8px;

  font-weight:700;

}


.aa-din-device-brand{

  position:absolute;

  left:8px;
  top:34px;

  font-size:8px;

  font-weight:900;

}


.aa-din-device-model{

  position:absolute;

  left:8px;
  right:8px;

  top:47px;

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

  font-size:8px;

  font-weight:800;

}


.aa-din-device-center{

  position:absolute;

  left:8px;
  right:8px;

  top:64px;
  bottom:26px;

  border:
    1px solid #b4bec1;

  border-radius:2px;

  background:
    linear-gradient(
      #e9ecec,
      #d6dcde
    );

}


.aa-din-device-grip{

  position:absolute;

  left:50%;
  bottom:8px;

  transform:
    translateX(-50%);

  width:34px;
  height:6px;

  border-radius:4px;

  background:#778287;

  opacity:.55;

}


.aa-din-device-badge{

  position:absolute;

  right:5px;
  bottom:5px;

  padding:
    2px 4px;

  border-radius:4px;

  background:#213329;

  color:#89dca9;

  font-size:6px;

}


.aa-din-device-remove{

  position:absolute;

  right:3px;
  top:3px;

  width:18px;
  height:18px;

  display:none;

  align-items:center;
  justify-content:center;

  padding:0 !important;

  border-radius:50% !important;

  background:#381818 !important;

  color:#efb1b1 !important;

  z-index:30;

}


.aa-din-device.selected
.aa-din-device-remove{

  display:flex;

}


/*
 * Модульная позиция при перетаскивании.
 */

.aa-din-drop-marker{

  position:absolute;

  top:0;

  height:150px;

  border:
    1px dashed #6bd69b;

  background:
    rgba(107,214,155,.08);

  pointer-events:none;

  z-index:15;

}


/*
 * Подсказка активной рейки.
 */

.aa-din-active-hint{

  margin-left:auto;

  color:#6bd69b;

  font-size:9px;

}


.aa-din-device-empty{

  position:absolute;

  left:10px;
  top:61px;

  color:#69786f;

  font-size:9px;

  pointer-events:none;

}



/* ==========================================
   REAL DEVICE COMPONENT ON DIN
   ========================================== */

.aa-din-real-device{

  position:absolute;

  top:4px;

  height:142px;

  z-index:30;

  cursor:grab;

  overflow:visible;

}


.aa-din-real-device-inner{

  position:absolute;

  left:0;
  bottom:4px;

  width:100%;

  transform-origin:
    left bottom;

}


/*
 * Внутри DIN используем
 * настоящий компонент устройства.
 */

.aa-din-real-device
.node{

  width:100% !important;

  min-width:0 !important;

  margin:0 !important;

}


.aa-din-real-device
.real-device{

  width:100% !important;

  min-width:0 !important;

}


/*
 * Клеммы должны находиться
 * выше drag-слоя.
 */

.aa-din-real-device
.port{

  position:relative;

  z-index:80;

  cursor:pointer;

}


.aa-din-real-device
.dot{

  position:relative;

  z-index:90;

  cursor:pointer;

}


/*
 * При наведении на клемму
 * аппарат не начинает drag.
 */

.aa-din-real-device
.port:hover{

  z-index:100;

}


/*
 * Старые упрощённые карточки
 * больше не показываем.
 */

.aa-din-device{

  display:none !important;

}



/* ==========================================
   REAL DIN EQUIPMENT
   ========================================== */

.aa-real-din-layer{
  position:absolute;
  inset:0 auto auto 0;
  height:100%;
  z-index:60;
  pointer-events:none;
}


.aa-real-din-device{
  position:absolute;
  top:3px;
  min-width:72px;
  pointer-events:auto;
  color:#172127;
  filter:
    drop-shadow(
      0 7px 9px
      rgba(0,0,0,.42)
    );
}


.aa-real-din-top,
.aa-real-din-bottom{
  display:flex;
  gap:2px;
  padding:3px;
  background:#cbd2d4;
}


.aa-real-din-body{
  position:relative;
  height:63px;
  padding:7px;
  border-left:1px solid #879195;
  border-right:1px solid #879195;
  background:
    linear-gradient(
      90deg,
      #d8dddf,
      #f5f7f7 16%,
      #e8ebec 84%,
      #c9d0d2
    );
}


.aa-real-din-brand{
  font-size:8px;
  font-weight:900;
}


.aa-real-din-body strong{
  display:block;
  margin-top:4px;
  font-size:8px;
}


.aa-real-din-body span{
  display:block;
  margin-top:2px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:7px;
}


.aa-real-din-screen{
  position:absolute;
  right:7px;
  bottom:7px;
  width:31px;
  height:15px;
  border:2px solid #9da7aa;
  background:#10191d;
}


.aa-real-terminal{
  position:relative;
  flex:1;
  min-width:36px;
  height:37px;
  padding:3px 2px;
  text-align:center;
  border:1px solid #929da0;
  border-radius:2px;
  background:#edf2e7;
  font-size:6px;
}


.aa-real-terminal b{
  display:block;
  font-size:6px;
}


.aa-real-terminal small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:5px;
  color:#53615a;
}


.aa-real-terminal .dot{
  width:13px !important;
  height:13px !important;
  margin:2px auto 0;
}


.aa-real-terminal:hover{
  background:#dcf4e5;
  outline:
    2px solid #6bd69b !important;
}


.aa-real-din-foot{
  padding:2px 5px;
  text-align:right;
  border:1px solid #879195;
  border-top:0;
  background:#bec7c9;
  color:#53615a;
  font-size:6px;
  font-weight:800;
}


/* ==========================================
   DIN DRAG + GLOBAL WIRES
   ========================================== */

#aaDinPanel{
  position:relative;
}

#aaDinWireSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;

  overflow:visible;

  pointer-events:none;

  z-index:200;
}

.aa-din-wire{
  fill:none;

  stroke-linecap:round;
  stroke-linejoin:round;

  pointer-events:stroke;

  cursor:pointer;

  opacity:.88;
}

.aa-din-wire:hover{
  opacity:1;

  filter:
    drop-shadow(
      0 0 4px
      rgba(255,255,255,.5)
    );
}

.aa-real-din-device{
  cursor:grab;
  z-index:70;
}

.aa-real-din-device.dragging{
  cursor:grabbing;

  z-index:300;

  opacity:.82;

  filter:
    drop-shadow(
      0 14px 20px
      rgba(0,0,0,.65)
    );
}

.aa-real-din-device
.port,
.aa-real-din-device
.dot{
  cursor:pointer;
}

.aa-din-position-marker{
  position:absolute;

  top:0;

  height:100%;

  border:
    2px dashed #6bd69b;

  background:
    rgba(107,214,155,.09);

  pointer-events:none;

  z-index:55;
}


.aa-real-din-device.aa-equipment-selected{
  z-index:250;

  outline:
    2px solid #6bd69b;

  outline-offset:
    3px;

  filter:
    drop-shadow(
      0 0 6px
      rgba(107,214,155,.55)
    );
}



/* ==========================================
   OLD PANEL REMOVED
   Новый щит теперь находится
   только на DIN-рейках.
   ========================================== */

/*
 * Старая центральная зона ЩР-001.
 */

#panel{
  display:none !important;
}


/*
 * Зоны датчиков и потребителей
 * НЕ скрываем.
 */



/* ==========================================
   COMPACT TERMINAL BLOCKS
   ========================================== */

.aa-real-din-device[
  data-terminal-group="1"
]{
  min-width:0 !important;
}


.aa-real-din-device
.aa-terminal-compact{

  width:22px;

  min-width:22px;

}


.aa-real-din-device
.aa-terminal-compact
.aa-real-terminal{

  min-width:20px;

  width:20px;

  height:30px;

  padding:2px 1px;

}


.aa-real-din-device
.aa-terminal-compact
.aa-real-terminal small{

  font-size:5px;

}


.aa-real-din-device
.aa-terminal-compact
.dot{

  width:10px !important;
  height:10px !important;

}



/* ==================================================
   WB8 COMPACT DIGITAL TWIN
   ================================================== */

.aa-wb8-device{
  min-width:108px !important;
  width:108px;
  height:142px;
  overflow:visible;
}


.aa-wb8-body{
  position:relative;

  width:108px;
  height:138px;

  overflow:visible;

  border:
    1px solid #899397;

  border-radius:3px;

  background:
    linear-gradient(
      90deg,
      #d4dadc,
      #f4f6f6 8%,
      #e9eded 50%,
      #f5f7f7 92%,
      #c8d0d2
    );

  color:#172127;

  box-shadow:
    0 7px 12px
    rgba(0,0,0,.42);
}


/*
 * Название.
 */

.aa-wb8-brand{
  position:absolute;

  left:7px;
  top:47px;

  font-size:9px;
  font-weight:900;

  white-space:nowrap;
}


.aa-wb8-id{
  position:absolute;

  left:7px;
  top:61px;

  font-size:6px;
  font-weight:800;
}


.aa-wb8-caption{
  position:absolute;

  left:7px;
  top:72px;

  font-size:4px;
  color:#59666c;
}


/*
 * Названия групп.
 */

.aa-wb8-group{
  position:absolute;

  transform:
    translateX(-50%);

  font-size:3.5px;
  line-height:4px;

  font-weight:800;

  color:#38444a;

  white-space:nowrap;

  pointer-events:none;
}


/*
 * Ethernet.
 */

.aa-wb8-ethernet{
  position:absolute;

  top:5px;

  width:13px;
  height:10px;

  border:
    1px solid #7d898e;

  border-radius:1px;

  background:#bcc5c8;
}


.aa-wb8-ethernet.e1{
  left:21px;
}


.aa-wb8-ethernet.e2{
  left:38px;
}


/*
 * Нижние визуальные элементы.
 */

.aa-wb8-usb{
  position:absolute;

  left:6px;
  bottom:7px;

  font-size:4px;
  font-weight:700;
}


.aa-wb8-wifi{
  position:absolute;

  left:23px;
  bottom:7px;

  font-size:4px;
  font-weight:700;
}


/*
 * Физическая клемма.
 *
 * Визуально маленькая.
 * Зона клика — большая.
 */

.aa-wb8-port{

  position:absolute !important;

  width:10px !important;
  height:19px !important;

  min-width:0 !important;

  transform:
    translateX(-50%);

  padding:0 !important;

  border:0 !important;

  outline:0 !important;

  background:
    transparent !important;

  overflow:visible !important;

  z-index:100;

  cursor:crosshair;

}


.aa-wb8-port.top{
  top:1px;
}


.aa-wb8-port.bottom{
  bottom:1px;
}


/*
 * Большая невидимая зона захвата.
 */

.aa-wb8-port::after{

  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:15px !important;
  height:23px !important;

  transform:
    translate(-50%,-50%);

  background:
    transparent;

  border-radius:3px;

  cursor:crosshair;

}


/*
 * Обозначение контакта.
 */

.aa-wb8-label{

  position:absolute;

  left:50%;

  transform:
    translateX(-50%);

  font-size:3.5px;

  font-weight:900;

  line-height:4px;

  white-space:nowrap;

  color:#273238;

  pointer-events:none;

}


.aa-wb8-port.top
.aa-wb8-label{
  top:0;
}


.aa-wb8-port.bottom
.aa-wb8-label{
  bottom:0;
}


/*
 * Цветная метка.
 */

.aa-wb8-color{

  position:absolute;

  left:50%;

  width:5px;
  height:2px;

  transform:
    translateX(-50%);

  border-radius:1px;

  pointer-events:none;

}


.aa-wb8-port.top
.aa-wb8-color{
  top:6px;
}


.aa-wb8-port.bottom
.aa-wb8-color{
  bottom:6px;
}


/*
 * Винт.
 *
 * Не цветной круг интерфейса,
 * а маленькое изображение контакта.
 */

.aa-wb8-screw{

  position:absolute !important;

  left:50%;

  width:4px !important;
  height:4px !important;

  transform:
    translateX(-50%);

  margin:0 !important;

  border:
    1px solid #283237 !important;

  border-radius:50%;

  background:
    #69757a !important;

  box-shadow:
    inset 0 0 0 1px
    #aab2b5 !important;

}


.aa-wb8-port.top
.aa-wb8-screw{
  top:10px;
}


.aa-wb8-port.bottom
.aa-wb8-screw{
  bottom:10px;
}


/*
 * Hover.
 */

.aa-wb8-port:hover{

  outline:0 !important;

  box-shadow:none !important;

}


.aa-wb8-port:hover
.aa-wb8-screw{

  width:6px !important;
  height:6px !important;

  background:
    #6bd69b !important;

  box-shadow:
    0 0 0 3px
    rgba(107,214,155,.18)
    !important;

}


/*
 * Выбранная клемма.
 */

.aa-wb8-port.sel
.aa-wb8-screw{

  width:6px !important;
  height:6px !important;

  background:
    #6bd69b !important;

}


/*
 * Не красим использованную клемму
 * огромным прямоугольником.
 */

.aa-wb8-port.used{

  background:
    transparent !important;

}



/* ==================================================
   WB8 — READABILITY TUNE V1
   ================================================== */

/* Чуть шире корпус */
.aa-wb8-device{
  min-width:118px !important;
  width:118px !important;
}

.aa-wb8-body{
  width:118px !important;
}


/* Чуть меньше обозначения отдельных контактов */
.aa-wb8-label{
  font-size:3px !important;
  line-height:3.5px !important;
  letter-spacing:-0.08px;
}


/* Названия групп тоже немного уменьшаем */
.aa-wb8-group{
  font-size:3.1px !important;
  line-height:3.5px !important;
  letter-spacing:-0.08px;
}


/* Центральные надписи оставляем хорошо читаемыми */
.aa-wb8-brand{
  font-size:8.5px !important;
}

.aa-wb8-id{
  font-size:5.5px !important;
}

.aa-wb8-caption{
  font-size:3.7px !important;
}


/* USB / Wi-Fi чуть компактнее */
.aa-wb8-usb,
.aa-wb8-wifi{
  font-size:3.7px !important;
}


/* ==================================================
   WB8 — READABILITY TUNE V2
   ================================================== */

.aa-wb8-device{
  width:124px !important;
  min-width:124px !important;
}

.aa-wb8-body{
  width:124px !important;
}


/* Отдельная клемма чуть уже */
.aa-wb8-port{
  width:8px !important;
}


/* Подписи контактов */
.aa-wb8-label{
  font-size:2.7px !important;
  line-height:3px !important;
  letter-spacing:-0.12px !important;
  font-weight:800 !important;
}


/* Названия функциональных групп */
.aa-wb8-group{
  font-size:2.8px !important;
  line-height:3px !important;
  letter-spacing:-0.10px !important;
  font-weight:800 !important;
}


/* Ethernet можно оставить чуть крупнее */
.aa-wb8-group{
  white-space:nowrap !important;
}


/* Центральная часть */
.aa-wb8-brand{
  font-size:8px !important;
}

.aa-wb8-id{
  font-size:5px !important;
}

.aa-wb8-caption{
  font-size:3.4px !important;
}


/* Винт остаётся хорошо различимым */
.aa-wb8-screw{
  width:4px !important;
  height:4px !important;
}


/* Но зона попадания мышью остаётся большой */
.aa-wb8-port::after{
  width:14px !important;
  height:24px !important;
}


/* USB / Wi-Fi */
.aa-wb8-usb,
.aa-wb8-wifi{
  font-size:3.3px !important;
}



/* ==========================================================
   AA ALLIANCE
   DIN VISUAL + WB8 GROUP SEPARATORS V1
   ========================================================== */


/* ----------------------------------------------------------
   1. DIN-РЕЙКА
   ---------------------------------------------------------- */

/*
 * Делаем рабочую область рейки выше.
 * Оборудование располагается по центру,
 * поэтому металл остаётся виден сверху и снизу.
 */

.aa-din-track{
  height:174px !important;

  overflow:visible !important;

  /*
   * Чистый металлический профиль.
   * Без крупных прямоугольных отверстий.
   */

  background:
    linear-gradient(
      180deg,

      #9da7aa 0%,
      #d7dcde 5%,
      #eef1f2 12%,

      #c8ced0 20%,
      #899397 23%,

      #747e82 27%,
      #c7cdcf 31%,

      #eef1f1 44%,
      #f5f6f6 50%,
      #e8ebec 56%,

      #c4cbcd 69%,
      #747e82 73%,

      #899397 77%,
      #d5dadc 82%,

      #eef1f2 91%,
      #9da7aa 100%
    ) !important;

  border-top:
    1px solid #747f83 !important;

  border-bottom:
    1px solid #626c70 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 8px 18px rgba(0,0,0,.38) !important;
}


/*
 * Убираем старые крупные отверстия.
 */

.aa-din-track::before{
  display:none !important;
}


/*
 * Оставляем только очень лёгкую
 * разметку DIN-модулей.
 */

.aa-din-module-grid{
  background:
    repeating-linear-gradient(
      90deg,

      transparent 0,
      transparent 17px,

      rgba(45,55,59,.16) 17px,
      rgba(45,55,59,.16) 18px
    ) !important;

  opacity:.55;
}


/*
 * Слои оборудования тоже должны
 * соответствовать новой высоте рейки.
 */

.aa-din-device-layer,
.aa-real-din-layer{
  height:174px !important;
}


/*
 * WB8 немного опускаем от верхнего края.
 *
 * Корпус 138 px.
 * Рейка 174 px.
 *
 * Остаётся примерно:
 * 18 px металла сверху
 * 18 px металла снизу.
 */

.aa-wb8-device{
  top:18px !important;
  height:138px !important;
}


/*
 * Общие устройства тоже не должны
 * прилипать к верхнему краю.
 */

.aa-real-din-device:not(.aa-wb8-device){
  top:16px;
}


/* ----------------------------------------------------------
   2. MOD OUT — РАЗДЕЛЕНИЕ ГРУПП
   ---------------------------------------------------------- */

/*
 * Тонкие вертикальные разделители
 * между четырьмя группами mod out.
 *
 * Они находятся только в верхней
 * клеммной области и не режут корпус
 * контроллера целиком.
 */

.aa-wb8-body::before{

  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:34px;

  pointer-events:none;

  z-index:80;

  background:

    /* между mod out 1 / 2 */
    linear-gradient(
      90deg,
      transparent 0,
      transparent 63.2%,
      rgba(25,32,36,.65) 63.2%,
      rgba(25,32,36,.65) calc(63.2% + 1px),
      transparent calc(63.2% + 1px)
    ),

    /* между mod out 2 / 3 */
    linear-gradient(
      90deg,
      transparent 0,
      transparent 72.7%,
      rgba(25,32,36,.65) 72.7%,
      rgba(25,32,36,.65) calc(72.7% + 1px),
      transparent calc(72.7% + 1px)
    ),

    /* между mod out 3 / 4 */
    linear-gradient(
      90deg,
      transparent 0,
      transparent 82.2%,
      rgba(25,32,36,.65) 82.2%,
      rgba(25,32,36,.65) calc(82.2% + 1px),
      transparent calc(82.2% + 1px)
    );

}


/*
 * Чуть поднимаем название mod out,
 * чтобы структура читалась:
 *
 * название группы
 * O1 O2 O3
 * цвет
 * винты
 */

.aa-wb8-group{
  z-index:85;
}


/*
 * Клеммы всегда выше разделителей.
 */

.aa-wb8-port{
  z-index:100 !important;
}


/* ----------------------------------------------------------
   3. WB8 — ЧУТЬ БОЛЬШЕ ВОЗДУХА СВЕРХУ
   ---------------------------------------------------------- */

.aa-wb8-port.top{
  top:2px !important;
}


/*
 * Групповые подписи mod out располагаем
 * немного ниже обозначений O1/O2/O3.
 */

.aa-wb8-group{
  font-weight:800 !important;
}


/* ----------------------------------------------------------
   4. DIN TRACK WRAPPER
   ---------------------------------------------------------- */

/*
 * Даём место для увеличенной рейки,
 * не обрезая корпус оборудования.
 */

.aa-din-track-wrap{
  padding-top:12px !important;
  padding-bottom:18px !important;

  overflow-x:auto !important;
  overflow-y:visible !important;
}


/*
 * Маркер перемещения тоже должен
 * соответствовать высоте рейки.
 */

.aa-din-position-marker{
  height:174px !important;
}



/* ==========================================================
   WB8 DETAIL TUNE V3
   Группы MOD OUT + нижние подписи
   ========================================================== */


/* ----------------------------------------------------------
   MOD OUT
   Разделители как на реальном WB8:
   только внутри верхней клеммной области.
   ---------------------------------------------------------- */

.aa-wb8-body::before{

  content:"";

  position:absolute;

  /*
   * Только зона MOD OUT.
   * Не тянем линии вниз по корпусу.
   */
  left:53.2%;
  top:0px;

  width:39.5%;
  height:31px;

  pointer-events:none;

  z-index:82;

  /*
   * Три тонких разделителя
   * между четырьмя группами.
   */
  background:
    linear-gradient(
      90deg,

      transparent 0,
      transparent 24.7%,

      rgba(42,50,54,.62) 24.7%,
      rgba(42,50,54,.62) calc(24.7% + 1px),

      transparent calc(24.7% + 1px),
      transparent 49.7%,

      rgba(42,50,54,.62) 49.7%,
      rgba(42,50,54,.62) calc(49.7% + 1px),

      transparent calc(49.7% + 1px),
      transparent 74.7%,

      rgba(42,50,54,.62) 74.7%,
      rgba(42,50,54,.62) calc(74.7% + 1px),

      transparent calc(74.7% + 1px),
      transparent 100%
    );

}


/*
 * Немного больше визуального воздуха
 * между O1/O2/O3 и названием mod out.
 */

.aa-wb8-port.top{
  top:1px !important;
}


/*
 * Названия mod out располагаются
 * непосредственно под тройкой клемм,
 * как на оригинальном контроллере.
 */

.aa-wb8-group{
  line-height:3px !important;
}


/* ----------------------------------------------------------
   НИЖНИЕ ГРУППЫ
   ---------------------------------------------------------- */

/*
 * Сейчас названия AI/DI/DO, 1W/DI и RS-485
 * находятся слишком далеко от клемм.
 *
 * Переносим их непосредственно над
 * соответствующими клеммными группами.
 */

.aa-wb8-body
.aa-wb8-group[style*="top:93px"]{

  top:105px !important;

}


/*
 * Чуть крупнее, потому что теперь
 * подписи находятся рядом с группой.
 */

.aa-wb8-body
.aa-wb8-group[style*="top:93px"]{

  font-size:3px !important;

  font-weight:800 !important;

}


/*
 * Нижние клеммы немного поднимаем,
 * чтобы появилась компактная структура:
 *
 * название группы
 * винты
 * цвет
 * обозначения
 */

.aa-wb8-port.bottom{

  bottom:3px !important;

}


/*
 * USB и Wi-Fi также немного поднимаем,
 * чтобы они находились на одной
 * визуальной линии с нижними группами.
 */

.aa-wb8-usb,
.aa-wb8-wifi{

  bottom:9px !important;

}


/* ----------------------------------------------------------
   MOD OUT GROUP LABELS
   ---------------------------------------------------------- */

/*
 * Названия четырёх mod out немного
 * уменьшаем и делаем более компактными.
 */

.aa-wb8-body
.aa-wb8-group[style*="top:17px"]{

  top:23px !important;

  font-size:2.7px !important;

  font-weight:800 !important;

}


/*
 * Ethernet остаётся ближе к своим
 * физическим разъёмам.
 *
 * Поэтому возвращаем первые две подписи
 * немного выше через позицию по X.
 */

.aa-wb8-body
.aa-wb8-group[style*="left:25%"]{

  top:17px !important;

  font-size:3px !important;

}


.aa-wb8-body
.aa-wb8-group[style*="left:41%"]{

  top:17px !important;

  font-size:3px !important;

}


/* ----------------------------------------------------------
   ТОНКИЕ ВИЗУАЛЬНЫЕ ГРАНИЦЫ MOD OUT
   ---------------------------------------------------------- */

/*
 * Цветные полоски и винты остаются
 * поверх разделителей.
 */

.aa-wb8-port,
.aa-wb8-color,
.aa-wb8-screw,
.aa-wb8-label{

  z-index:100 !important;

}



/* ==========================================================
   WB8 CLEAN FIX V4
   ========================================================== */


/* ----------------------------------------------------------
   1. ПОЛНОСТЬЮ УБИРАЕМ СТАРЫЕ ДЛИННЫЕ РАЗДЕЛИТЕЛИ
   ---------------------------------------------------------- */

.aa-wb8-body::before,
.aa-wb8-body::after{
  content:none !important;
  display:none !important;
  background:none !important;
}


/* ----------------------------------------------------------
   2. НИЖНИЕ НАЗВАНИЯ ПРИБЛИЖАЕМ К КЛЕММАМ
   ---------------------------------------------------------- */

/*
 * AI/DI/DO
 */

.aa-wb8-body
.aa-wb8-group[style*="left:40%"]{
  top:auto !important;
  bottom:29px !important;
}


/*
 * 1W/DI
 */

.aa-wb8-body
.aa-wb8-group[style*="left:61%"]{
  top:auto !important;
  bottom:29px !important;
}


/*
 * RS-485 1
 */

.aa-wb8-body
.aa-wb8-group[style*="left:74%"]{
  top:auto !important;
  bottom:29px !important;
}


/*
 * RS-485 2
 */

.aa-wb8-body
.aa-wb8-group[style*="left:89%"]{
  top:auto !important;
  bottom:29px !important;
}


/*
 * Нижние названия можно сделать
 * буквально чуть крупнее.
 */

.aa-wb8-body
.aa-wb8-group[style*="left:40%"],
.aa-wb8-body
.aa-wb8-group[style*="left:61%"],
.aa-wb8-body
.aa-wb8-group[style*="left:74%"],
.aa-wb8-body
.aa-wb8-group[style*="left:89%"]{

  font-size:3.1px !important;
  line-height:3.3px !important;
  font-weight:800 !important;

}


/* ----------------------------------------------------------
   3. MOD OUT НАЗВАНИЯ
   ---------------------------------------------------------- */

/*
 * Пока без разделительных линий.
 *
 * Названия ставим сразу под соответствующими
 * тремя контактами.
 */

.aa-wb8-body
.aa-wb8-group[style*="left:58.5%"]{
  top:24px !important;
}

.aa-wb8-body
.aa-wb8-group[style*="left:68%"]{
  top:24px !important;
}

.aa-wb8-body
.aa-wb8-group[style*="left:77.5%"]{
  top:24px !important;
}

.aa-wb8-body
.aa-wb8-group[style*="left:87%"]{
  top:24px !important;
}


/*
 * Чуть уменьшаем именно mod out,
 * чтобы четыре названия не слипались.
 */

.aa-wb8-body
.aa-wb8-group[style*="left:58.5%"],
.aa-wb8-body
.aa-wb8-group[style*="left:68%"],
.aa-wb8-body
.aa-wb8-group[style*="left:77.5%"],
.aa-wb8-body
.aa-wb8-group[style*="left:87%"]{

  font-size:2.55px !important;
  line-height:2.8px !important;
  letter-spacing:-0.08px !important;

}


/* ----------------------------------------------------------
   4. НИЖНИЕ КЛЕММЫ
   ---------------------------------------------------------- */

/*
 * Немного поднимаем сами группы клемм,
 * чтобы подпись группы и контакты
 * образовали единый компактный блок.
 */

.aa-wb8-port.bottom{
  bottom:4px !important;
}


/*
 * Подписи A1/A2..., V/GND/A/B
 * оставляем непосредственно под винтами.
 */

.aa-wb8-port.bottom
.aa-wb8-label{
  bottom:-1px !important;
}


/* ----------------------------------------------------------
   5. USB / WI-FI
   ---------------------------------------------------------- */

.aa-wb8-usb,
.aa-wb8-wifi{
  bottom:8px !important;
}



/* ==========================================================
   WB8 — PHYSICAL MOD OUT GROUPS V5
   ========================================================== */


/*
 * Никаких старых псевдо-разделителей.
 */

.aa-wb8-body::before,
.aa-wb8-body::after{
  display:none !important;
  content:none !important;
}


/*
 * Отдельная физическая группа MOD OUT.
 *
 * Рамка охватывает именно три контакта,
 * а не режет корпус вниз.
 */

.aa-wb8-modout{

  position:absolute;

  top:0px;

  width:9.3%;
  height:31px;

  border-left:
    1px solid rgba(45,54,58,.55);

  border-right:
    1px solid rgba(45,54,58,.55);

  border-bottom:
    1px solid rgba(45,54,58,.28);

  border-radius:
    0 0 2px 2px;

  pointer-events:none;

  z-index:81;

}


/*
 * Первая группа получает ещё
 * верхнюю/левую визуальную границу.
 */

.aa-wb8-modout.m1{
  left:53.8%;
}

.aa-wb8-modout.m2{
  left:63.3%;
}

.aa-wb8-modout.m3{
  left:72.8%;
}

.aa-wb8-modout.m4{
  left:82.3%;
}


/*
 * Название располагается прямо
 * под тройкой винтов — как на WB8.
 */

.aa-wb8-modout span{

  position:absolute;

  left:50%;
  bottom:-9px;

  transform:
    translateX(-50%);

  font-size:2.55px;

  line-height:3px;

  font-weight:800;

  color:#364147;

  white-space:nowrap;

}


/*
 * Клеммы поверх рамки.
 */

.aa-wb8-port.top{
  z-index:100 !important;
}


/* ==========================================================
   LOWER TERMINAL GROUPS — COMPACT
   ========================================================== */


/*
 * Опускаем название группы ещё ближе
 * к физическим клеммам.
 */

.aa-wb8-body
.aa-wb8-group[style*="left:40%"]{
  top:auto !important;
  bottom:25px !important;
}

.aa-wb8-body
.aa-wb8-group[style*="left:61%"]{
  top:auto !important;
  bottom:25px !important;
}

.aa-wb8-body
.aa-wb8-group[style*="left:74%"]{
  top:auto !important;
  bottom:25px !important;
}

.aa-wb8-body
.aa-wb8-group[style*="left:89%"]{
  top:auto !important;
  bottom:25px !important;
}


/*
 * Нижние винты слегка поднимаем.
 */

.aa-wb8-port.bottom{
  bottom:3px !important;
}


/*
 * USB и Wi-Fi тоже держим
 * на одной нижней линии.
 */

.aa-wb8-usb,
.aa-wb8-wifi{
  bottom:7px !important;
}



/* ==========================================================
   WB8 POLISH V6
   Компактные MOD OUT + подписи ближе к клеммам
   ========================================================== */


/* ----------------------------------------------------------
   MOD OUT
   Убираем эффект высоких "стаканов".
   Рамка существует только вокруг клеммной колодки.
   ---------------------------------------------------------- */

.aa-wb8-modout{

  top:0px !important;

  height:21px !important;

  border-left:
    1px solid rgba(50,58,62,.52) !important;

  border-right:
    1px solid rgba(50,58,62,.52) !important;

  border-bottom:
    1px solid rgba(50,58,62,.32) !important;

  border-top:0 !important;

  border-radius:
    0 0 2px 2px !important;

  background:
    rgba(110,125,128,.035) !important;

}


/*
 * Немного сужаем каждую группу,
 * чтобы между соседними блоками
 * появился визуальный зазор.
 */

.aa-wb8-modout{
  width:8.8% !important;
}

.aa-wb8-modout.m1{
  left:54.0% !important;
}

.aa-wb8-modout.m2{
  left:63.5% !important;
}

.aa-wb8-modout.m3{
  left:73.0% !important;
}

.aa-wb8-modout.m4{
  left:82.5% !important;
}


/*
 * MOD OUT подпись почти вплотную
 * под клеммной колодкой.
 */

.aa-wb8-modout span{

  bottom:-6px !important;

  font-size:2.45px !important;

  line-height:2.7px !important;

  font-weight:800 !important;

  letter-spacing:-0.08px !important;

}


/*
 * Верхние O1/O2/O3 чуть компактнее.
 */

.aa-wb8-port.top .aa-wb8-label{

  font-size:2.6px !important;

  letter-spacing:-0.08px !important;

}


/* ----------------------------------------------------------
   НИЖНЯЯ ЧАСТЬ
   ---------------------------------------------------------- */

/*
 * Названия групп располагаем
 * непосредственно над винтами.
 */

.aa-wb8-body
.aa-wb8-group[style*="left:40%"]{

  top:auto !important;
  bottom:21px !important;

}

.aa-wb8-body
.aa-wb8-group[style*="left:61%"]{

  top:auto !important;
  bottom:21px !important;

}

.aa-wb8-body
.aa-wb8-group[style*="left:74%"]{

  top:auto !important;
  bottom:21px !important;

}

.aa-wb8-body
.aa-wb8-group[style*="left:89%"]{

  top:auto !important;
  bottom:21px !important;

}


/*
 * Чуть меньше размер названия группы,
 * чтобы всё оставалось свободным.
 */

.aa-wb8-body
.aa-wb8-group[style*="left:40%"],
.aa-wb8-body
.aa-wb8-group[style*="left:61%"],
.aa-wb8-body
.aa-wb8-group[style*="left:74%"],
.aa-wb8-body
.aa-wb8-group[style*="left:89%"]{

  font-size:2.85px !important;

  line-height:3px !important;

  font-weight:800 !important;

}


/*
 * Сами нижние клеммы немного поднимаем,
 * чтобы осталось место для обозначений
 * A1/A2/... под ними.
 */

.aa-wb8-port.bottom{

  bottom:4px !important;

}


/*
 * Обозначения непосредственно
 * под цветной маркировкой.
 */

.aa-wb8-port.bottom
.aa-wb8-label{

  bottom:-1px !important;

  font-size:2.7px !important;

}


/*
 * USB / Wi-Fi выравниваем
 * относительно нижней клеммной зоны.
 */

.aa-wb8-usb,
.aa-wb8-wifi{

  bottom:7px !important;

  font-size:3.2px !important;

}



/* ==========================================================
   REAL PHYSICAL WIDTH V1
   1 mm = 1 px
   ========================================================== */


/*
 * Wiren Board 8:
 * реальная ширина корпуса = 106 мм.
 */

.aa-wb8-device{

  width:106px !important;
  min-width:106px !important;
  max-width:106px !important;

}


.aa-wb8-body{

  width:106px !important;

}


/*
 * Внутренняя графика масштабируется
 * внутри реального корпуса.
 */

.aa-wb8-device{

  --device-width-mm:106;

}


/* Диспетчерское наименование оборудования */

.aa-real-din-device{
  overflow:visible !important;
}

.aa-dispatch-label{
  position:absolute;
  left:0;
  right:0;
  bottom:-17px;
  min-height:13px;
  padding:2px 3px;
  text-align:center;
  font-size:9px;
  line-height:11px;
  font-weight:700;
  color:#dce9f2;
  background:#25323d;
  border-radius:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:text;
  z-index:110;
}

.aa-dispatch-label:hover{
  color:#fff;
  background:#344858;
}


/* ==========================================
   DISPATCH LABEL — COMPACT V3
   ========================================== */

.aa-real-din-device .aa-dispatch-label {
  position: absolute !important;
  left: 2px !important;
  right: 2px !important;
  bottom: -17px !important;

  width: auto !important;
  min-width: 0 !important;
  height: 14px !important;

  padding: 2px 3px !important;

  color: #e8f1f5 !important;
  background: #263640 !important;

  border: 1px solid #42545f;
  border-radius: 3px;

  font-size: 8px !important;
  line-height: 9px !important;
  font-weight: 600 !important;

  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  cursor: text;
  z-index: 110;
}

.aa-real-din-device .aa-dispatch-label:hover {
  background: #375366 !important;
  color: #fff !important;
  border-color: #78a8c4;
}


/* ==========================================
   AA ALLIANCE — DIN 35 FRONT VIEW
   ========================================== */

/*
 * Контейнер сохраняет место для оборудования.
 * Сама металлическая рейка имеет высоту 35 мм.
 */

.aa-din-track {
  position: relative !important;
  height: 174px !important;
  min-height: 174px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/*
 * Металлический профиль DIN-35
 * рисуется по центру за оборудованием.
 */

.aa-din-track::before {
  content: "" !important;
  display: block !important;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  height: 35px;
  transform: translateY(-50%);

  background: linear-gradient(
    180deg,
    #a1aaae 0%,
    #e4e8e9 12%,
    #b7c0c3 27%,
    #7d888d 48%,
    #c9d0d2 70%,
    #eef0f0 87%,
    #929da1 100%
  ) !important;

  border-top: 1px solid #6c787d;
  border-bottom: 1px solid #69767b;

  pointer-events: none;
  z-index: 0;
}

/*
 * Убираем старую разметку на всю высоту.
 */

.aa-din-module-grid {
  background: transparent !important;
}

/*
 * Слой оборудования выше DIN-рейки.
 */

.aa-real-din-layer {
  position: relative;
  z-index: 2;
  height: 174px !important;
  background: transparent !important;
}

/*
 * Сохраняем положение аппаратов.
 */

.aa-real-din-device {
  z-index: 3;
}

/*
 * Старый слой не должен закрывать
 * новый масштабный вид оборудования.
 */

.aa-din-device-layer {
  background: transparent !important;
}

/* MR6C PREVIEW */
.aa-mr6c-preview {
  width:54px !important;
  min-width:54px !important;
  overflow:visible !important;
}
.aa-mr6c-case {
  position:relative;
  width:54px;
  height:138px;
  box-sizing:border-box;
  border:1px solid #8b979b;
  border-radius:3px;
  background:linear-gradient(90deg,#cbd2d4,#f2f4f4 15%,#e6ebec 85%,#c3cbce);
  color:#253139;
}
.aa-mr6c-bank {
  position:absolute;
  left:2px;
  right:2px;
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:1px;
  font-size:4px;
  line-height:7px;
  text-align:center;
}
.aa-mr6c-bank.top { top:4px; }
.aa-mr6c-bank.bottom { bottom:4px; }
.aa-mr6c-contact {
  padding:1px;
  border-bottom:2px solid #5c8f69;
}
.aa-mr6c-center {
  position:absolute;
  top:44px;
  left:4px;
  right:4px;
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:6px;
}
.aa-mr6c-center b { font-size:7px; }
.aa-mr6c-center strong { font-size:9px; }
.aa-mr6c-contact.port {
  position:relative;
  width:10px;
  min-width:0 !important;
  height:17px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  cursor:crosshair;
}
.aa-mr6c-contact-label {
  display:block;
  font-size:4px;
  line-height:6px;
  text-align:center;
  color:#263238;
}
.aa-mr6c-contact-dot.dot {
  display:block;
  width:5px !important;
  height:5px !important;
  margin:1px auto 0 !important;
  border:1px solid #34434a !important;
  background:#aeb9bd !important;
  border-radius:50%;
  pointer-events:none;
}
.aa-mr6c-contact.port:hover .aa-mr6c-contact-dot,
.aa-mr6c-contact.port.sel .aa-mr6c-contact-dot {
  background:#65d5a0 !important;
}


/* AA MR6C COMPACT V2 */
.aa-mr6c-preview {
 width:54px!important;
 min-width:54px!important;
 height:138px!important;
}
.aa-mr6c-case {
 width:54px!important;
 height:138px!important;
 overflow:hidden!important;
 background:linear-gradient(90deg,#cdd4d5,#f1f3f3 12%,#e8ecec 88%,#c6ced0)!important;
}
.aa-mr6c-bank {
 position:absolute!important;
 left:2px!important;
 right:2px!important;
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 column-gap:1px!important;
 row-gap:2px!important;
 justify-items:center!important;
 align-items:center!important;
 flex-wrap:nowrap!important;
}
.aa-mr6c-bank.top {top:3px!important}
.aa-mr6c-bank.bottom {bottom:3px!important}
.aa-mr6c-contact.port {
 width:10px!important;
 min-width:0!important;
 height:15px!important;
 padding:0!important;
 margin:0!important;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 cursor:crosshair!important;
}
.aa-mr6c-contact-label {
 font-size:3.2px!important;
 line-height:5px!important;
 font-weight:800!important;
 color:#29363a!important;
 white-space:nowrap!important;
}
.aa-mr6c-contact-dot.dot {
 position:relative!important;
 width:4px!important;
 height:4px!important;
 min-width:4px!important;
 min-height:4px!important;
 margin:2px auto 0!important;
 padding:0!important;
 border:1px solid #38464b!important;
 border-radius:50%!important;
 background:#aab4b7!important;
 box-shadow:none!important;
 transform:none!important;
 pointer-events:none!important;
}
.aa-mr6c-contact.port::after {
 content:""!important;
 position:absolute!important;
 left:50%!important;
 top:50%!important;
 width:12px!important;
 height:16px!important;
 transform:translate(-50%,-50%)!important;
 background:transparent!important;
}
.aa-mr6c-contact.port[data-terminal="V+"] {
 border-top:2px solid #e6534b!important;
}
.aa-mr6c-contact.port[data-terminal="GND"],
.aa-mr6c-contact.port[data-terminal="iGND"] {
 border-top:2px solid #29363a!important;
}
.aa-mr6c-contact.port[data-terminal="A"] {
 border-top:2px solid #e0be46!important;
}
.aa-mr6c-contact.port[data-terminal="B"] {
 border-top:2px solid #f8faf9!important;
}
.aa-mr6c-contact.port[data-terminal="0"],
.aa-mr6c-contact.port[data-terminal="1"],
.aa-mr6c-contact.port[data-terminal="2"],
.aa-mr6c-contact.port[data-terminal="3"],
.aa-mr6c-contact.port[data-terminal="4"],
.aa-mr6c-contact.port[data-terminal="5"],
.aa-mr6c-contact.port[data-terminal="6"] {
 border-top:2px solid #4aab75!important;
}
.aa-mr6c-contact.port:hover .aa-mr6c-contact-dot.dot,
.aa-mr6c-contact.port.sel .aa-mr6c-contact-dot.dot {
 background:#65d5a0!important;
 box-shadow:0 0 0 3px #65d5a044!important;
}
.aa-mr6c-center {
 top:44px!important;
 left:4px!important;
 right:4px!important;
 gap:4px!important;
 font-size:5px!important;
 overflow-wrap:anywhere!important;
}
.aa-mr6c-center b {font-size:6px!important}
.aa-mr6c-center strong {font-size:9px!important}
.aa-mr6c-center span {font-size:5px!important}
.aa-mr6c-center span:nth-child(4) {
 color:#b04d9b!important;
 font-weight:800!important;
}


/* AA Alliance MR6C v3 isolated compact face (draft terminal coordinates). */
.aa-mr6c-preview .aa-mr6c3-case {position:relative;width:54px;height:138px;box-sizing:border-box;overflow:hidden;background:linear-gradient(90deg,#cdd4d6,#f4f6f6 12%,#e8eded 90%,#c5cdd0)}
.aa-mr6c-preview .aa-mr6c3-bank {position:absolute;left:1px;right:1px;display:grid;gap:0;z-index:5}
.aa-mr6c-preview .aa-mr6c3-bank.top {top:2px;grid-template-columns:repeat(9,minmax(0,1fr))}
.aa-mr6c-preview .aa-mr6c3-bank.bottom {bottom:2px;grid-template-columns:repeat(12,minmax(0,1fr))}
.aa-mr6c-preview .aa-mr6c3-terminal {position:relative;box-sizing:border-box;min-width:0;width:100%;height:17px;padding:0!important;margin:0!important;border:0!important;background:transparent!important;display:flex;flex-direction:column;align-items:center;cursor:crosshair}
.aa-mr6c-preview .aa-mr6c3-terminal span {font-size:3px;line-height:5px;font-weight:800;white-space:nowrap;color:#263238;pointer-events:none}
.aa-mr6c-preview .aa-mr6c3-terminal i {display:block;width:75%;height:2px;flex-shrink:0;pointer-events:none}
.aa-mr6c-preview .aa-mr6c3-terminal b {position:static!important;display:block;width:4px!important;height:4px!important;min-width:4px!important;min-height:4px!important;margin:2px auto 0!important;padding:0!important;border:1px solid #354147!important;border-radius:50%;background:#aab6ba!important;box-shadow:none!important;transform:none!important;pointer-events:none}
.aa-mr6c-preview .aa-mr6c3-terminal:hover b,.aa-mr6c-preview .aa-mr6c3-terminal.sel b {background:#65d5a0!important;box-shadow:0 0 0 2px #65d5a055!important}
.aa-mr6c-preview .aa-mr6c3-terminal.pending {opacity:.4;cursor:not-allowed}
.aa-mr6c-preview .aa-mr6c3-center {position:absolute;top:34px;bottom:24px;left:4px;right:4px;display:flex;flex-direction:column;gap:5px;overflow:hidden;color:#263238;overflow-wrap:anywhere}
.aa-mr6c-preview .aa-mr6c3-center strong {font-size:7px}
.aa-mr6c-preview .aa-mr6c3-center span {font-size:5px}
.aa-mr6c-preview .aa-mr6c3-center b {font-size:7px}
.aa-mr6c-preview .aa-mr6c3-slave {font-size:6px!important;font-weight:800;color:#a14b93}
.aa-mr6c-preview .aa-mr6c3-dispatch {font-size:5px}


/* AA MR3LV/S DRAFT: isolated visual styles */
.aa-mr3lv-device {width:54px!important;min-width:54px!important;overflow:visible!important}
.aa-mr3lv-face {width:54px;height:138px;position:relative;box-sizing:border-box;border:1px solid #829096;border-radius:3px;color:#263238;background:linear-gradient(90deg,#ccd4d6,#f3f5f5 12%,#e7ebeb 88%,#c9d0d2)}
.aa-mr3lv-bank {position:absolute;left:2px;right:2px;display:grid;gap:0;z-index:5}
.aa-mr3lv-bank.top {top:3px;grid-template-columns:repeat(6,minmax(0,1fr))}
.aa-mr3lv-bank.bottom {bottom:3px;grid-template-columns:repeat(9,minmax(0,1fr))}
.aa-mr3lv-terminal {height:19px;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;cursor:crosshair;border:0!important;background:transparent!important;padding:0!important}
.aa-mr3lv-terminal span {font-size:3px;line-height:5px;font-weight:800;white-space:nowrap;pointer-events:none}
.aa-mr3lv-terminal i {display:block;width:70%;height:2px;flex-shrink:0;pointer-events:none}
.aa-mr3lv-terminal b.dot {display:block;position:static!important;width:4px!important;height:4px!important;min-width:4px!important;min-height:4px!important;margin:2px auto 0!important;border:1px solid #37434a!important;border-radius:50%;background:#b7c0c2!important;box-shadow:none!important;transform:none!important;pointer-events:none}
.aa-mr3lv-terminal:hover b.dot,.aa-mr3lv-terminal.sel b.dot {background:#65d5a0!important;box-shadow:0 0 0 2px #65d5a055!important}
.aa-mr3lv-center {position:absolute;top:35px;bottom:26px;left:4px;right:4px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.aa-mr3lv-center strong {font-size:7px}.aa-mr3lv-center b {font-size:7px}.aa-mr3lv-center span {font-size:6px}.aa-mr3lv-center small {font-size:5px;overflow-wrap:anywhere}
.aa-mr3lv-center em {font-style:normal;font-size:4px;color:#9a5c2c}
.aa-mr3lv-slave {cursor:pointer;color:#9c478d;font-weight:800}


/* AA_RELAY_V6: physical-style display, decorative groups are not connectable. */
.aa-v6-device{height:150px!important;min-width:0!important;overflow:visible!important;box-sizing:border-box!important;cursor:grab}
.aa-v6-case{position:relative;width:100%;height:138px;box-sizing:border-box;border:1px solid #87979d;border-radius:5px;background:linear-gradient(90deg,#cbd3d6 0%,#f6f8f8 8%,#f0f3f3 90%,#cbd4d6 100%);color:#26343b;box-shadow:0 4px 9px #0007;overflow:hidden}
.aa-v6-bank{position:absolute;left:3px;right:3px;height:24px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px}
.aa-v6-top{top:3px}.aa-v6-bottom{bottom:3px}
.aa-v6-legend{font-size:5.8px;line-height:7px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.aa-v6-holes{display:flex;justify-content:space-around;gap:2px;align-items:center;height:9px}
.aa-v6-holes i{width:6px;height:6px;border-radius:50%;background:#e5e9e9;border:1.5px solid #36464d;box-sizing:border-box;flex-shrink:0}
.aa-v6-middle{position:absolute;left:4px;right:4px;top:34px;bottom:32px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;text-align:center;overflow:hidden}
.aa-v6-middle strong{font:800 10px/1.05 Arial,sans-serif;white-space:nowrap}
.aa-v6-type{font:800 9px/1.1 Arial,sans-serif;overflow-wrap:anywhere}
.aa-v6-middle b{font:750 9px Arial,sans-serif}.aa-v6-middle small{font:650 7px Arial,sans-serif;color:#96508a}
.aa-v6-middle em{font:italic 6px/1.15 Arial,sans-serif;color:#a36b39;max-width:100%}


/* AA_RELAY_V7_VERIFIED: color coded electrical terminals and honest draft status */
.aa-v7-device{height:150px!important;box-sizing:border-box!important;cursor:grab}
.aa-v7-face{height:138px;position:relative;box-sizing:border-box;border:1px solid #8e9da3;border-radius:6px;background:linear-gradient(90deg,#d1d9dc,#f8fafa 9%,#eef2f2 91%,#cbd5d8);color:#26343a;box-shadow:0 3px 9px #0008;overflow:hidden}
.aa-v7-center{position:absolute;top:32px;bottom:32px;left:3px;right:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.aa-v7-center strong{font:800 10px Arial}.aa-v7-center span{font:800 10px/1.1 Arial;overflow-wrap:anywhere}.aa-v7-center b{font:800 10px Arial}.aa-v7-center small{font:700 7px Arial;color:#96548e}.aa-v7-center em{font:italic 7px Arial;color:#9b673e}
.aa-v7-bank{position:absolute;left:2px;right:2px;height:27px;display:flex;align-items:center;justify-content:space-around;gap:0}
.aa-v7-top{top:2px}.aa-v7-bottom{bottom:2px}
.aa-v7-contact{position:relative;min-width:0;flex:1;height:26px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:pointer}
.aa-v7-contact span{font:700 5.5px/7px Arial;white-space:nowrap;letter-spacing:-.15px}.aa-v7-contact i{height:3px;width:75%;border-radius:1px}.aa-v7-contact .dot{display:block!important;position:relative!important;inset:auto!important;width:8px!important;height:8px!important;min-width:8px!important;min-height:8px!important;border:2px solid #34434a!important;border-radius:50%!important;background:#e8eeee!important;box-sizing:border-box!important;margin:0!important;cursor:pointer!important}
.aa-v7-contact:hover{background:#c6eff044}.aa-v7-contact.sel{background:#2ce6f066}
.aa-v7-draft{position:relative;margin:8px 5px 0;display:flex;justify-content:space-around}.aa-v7-draft:last-child{position:absolute;bottom:8px;left:0;right:0;margin:0 5px}.aa-v7-draft i{width:7px;height:7px;border-radius:50%;border:1px solid #8799a2;background:#b8c4c8;opacity:.65}

/* AA_RELAY_V71_CLICK_FIX: make physical contacts clickable above labels */
.aa-v7-device .aa-v7-bank{z-index:30!important;pointer-events:auto!important}
.aa-v7-device .aa-v7-contact{z-index:31!important;pointer-events:auto!important}
.aa-v7-device .aa-v7-contact .dot{z-index:32!important;pointer-events:auto!important;touch-action:manipulation!important}
.aa-v7-device .aa-v7-center{pointer-events:none!important}