.page-content {
  display: flex;
  background: rgba(248, 248, 248, 1);
  padding: 15px;
  height: 130px;
  padding-top: 30px;
  margin-bottom: 30px;
}

.select-aeu-options {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  width: 56vw;
}

.page-content>ti-widget-custom-select {
  padding: 10px;
}

.displayLedNames {
  display: flex;
  height: 30px;
}

.ledSvg {
  margin: 10px 10px 0px 0px;
}

#svgDiv {
  position: absolute;
  right: 0px;
  top: -15px;
}

.displaySelectedLeds {
  border: 1px solid #118892;
  background-color: #FFFFFF;
  overflow: scroll;
  width: 10vw;
  overflow: auto;
  height: 120px;
  padding-left: 20px;
  top: -27px;
  position: relative;

}





.animation-unit {
  display: flex;
  position: relative;
  width: 0;
  left: 147px;
  gap: 120px;
  height: 0;
}

.animation-unit-1 {
  left: 4px;
  position: relative
}

.animation-unit-1>*,
.animation-unit-2>*,
.animation-unit-3>* {
  display: flex;
}

.animation-unit>.animation-unit-1>ti-widget-custom-select::shadow .main-cntr,
.animation-unit>.animation-unit-1>ti-widget-custom-select::shadow .main-cntr>.ctrl-hrd,
.animation-unit>.animation-unit-1>div>ti-widget-custom-select::shadow .main-cntr,
.animation-unit>.animation-unit-2>ti-widget-custom-select::shadow .main-cntr,
.animation-unit>.animation-unit-2>div>ti-widget-custom-select::shadow .main-cntr,
.animation-unit>.animation-unit-3>ti-widget-custom-select::shadow .main-cntr,
.animation-unit>.animation-unit-3>div>ti-widget-custom-select::shadow .main-cntr {
  text-align: center;
  width: 85px;
}

.animation-unit>.animation-unit-1>div>ti-widget-custom-select::shadow select#select,
.animation-unit>.animation-unit-1>ti-widget-custom-select::shadow select#select,

.animation-unit>.animation-unit-2>div>ti-widget-custom-select::shadow select#select,
.animation-unit>.animation-unit-2>ti-widget-custom-select::shadow select#select,

.animation-unit>.animation-unit-3>div>ti-widget-custom-select::shadow select#select,
.animation-unit>.animation-unit-3>ti-widget-custom-select::shadow select#select {
  width: 65px;
  padding: 5px;
}

.unit {
  align-items: center;
  background-color: #eee;
  border-left: 1px solid rgba(223, 223, 223, 0.75);
  color: #98999b;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  height: 100%;
  justify-content: center;
  line-height: 13px;
  opacity: 0.8;
  width: 20px;
}

.hex-input {
  height: 30px;
  width: 25px;
  display: flex;
  margin-top: 5px;
}

.hex-input-unit {
  width: 25px;
  border: none;
}

.pwm-input {
  padding: 5px;
  color: #555555;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 500;
  width: 70px;
}

.numberbox-value {
  box-sizing: border-box;
  border: 1px solid #388697;
  border-radius: 3px;
  color: #555555;
  font-size: 12px;
  height: 22.05px;
  line-height: 14px;
  outline: unset;
  text-align: center;
  width: 45px;
  padding-left: 17px;
}

.aeu1_pt {
  position: relative;
  top: -240px;
  right: -80px;
}

.aeu1_pwm1 {
  position: relative;
  top: -206px;
  left: -45px;
}

.aeu1_pwm2 {
  position: relative;
  top: -206px;
  left: -45px;
}

.aeu1_pwm3 {
  position: relative;
  top: -206px;
  left: -45px;
}

.aeu1_pwm4 {
  position: relative;
  top: -206px;
  left: -44px;
}

.aeu1_pwm5 {
  position: relative;
  top: -206px;
  left: -43px;
}

.aeu1_t1 {
  position: relative;
  top: -182px;
  left: -27px;
}

.aeu1_t2 {
  position: relative;
  top: -182px;
  left: -39px;
}

.aeu1_t3 {
  position: relative;
  top: -182px;
  left: -52px;
}

.aeu1_t4 {
  position: relative;
  top: -182px;
  left: -65px;
}

.aeu2_pt {
  position: relative;
  top: -239px;
  right: -5px;
}

.aeu2_pwm1 {
  position: relative;
  top: -206px;
  left: -126px;
}

.aeu2_pwm2 {
  position: relative;
  top: -206px;
  left: -126px;
}

.aeu2_pwm3 {
  position: relative;
  top: -206px;
  left: -124px;
}

.aeu2_pwm4 {
  position: relative;
  top: -206px;
  left: -123px;
}

.aeu2_pwm5 {
  position: relative;
  top: -206px;
  left: -122px;
}

.aeu2_t1 {
  position: relative;
  top: -182px;
  left: -108px;
}

.aeu2_t2 {
  position: relative;
  top: -182px;
  left: -118px;
}

.aeu2_t3 {
  position: relative;
  top: -182px;
  left: -132px;
}

.aeu2_t4 {
  position: relative;
  top: -182px;
  left: -146px;
}

.aeu3_pt {
  position: relative;
  top: -239px;
  left: -73px;
}

.aeu3_pwm1 {
  position: relative;
  top: -206px;
  left: -207px
}

.aeu3_pwm2 {
  position: relative;
  top: -206px;
  left: -206px;
}

.aeu3_pwm3 {
  position: relative;
  top: -206px;
  left: -205px;
}

.aeu3_pwm4 {
  position: relative;
  top: -206px;
  left: -205px;
}

.aeu3_pwm5 {
  position: relative;
  top: -206px;
  left: -203px;
}

.aeu3_t1 {
  position: relative;
  top: -182px;
  left: -186px;
}

.aeu3_t2 {
  position: relative;
  top: -181px;
  left: -200.1px;
}

.aeu3_t3 {
  position: relative;
  top: -182px;
  left: -214.1px;
}

.aeu3_t4 {
  position: relative;
  top: -182px;
  left: -228.1px;
}

.selectedLedsIcon {
  width: 20px
}

.animation-unit-container {
  overflow: auto;
}

.play-animation {
  color: #555555;
  font-family: Roboto;
  font-size: 10.5px;
  font-weight: 500;
  top: -7.5px;
  position: relative;
  margin-left: 5px;
  width: 25.5vw;
  border-left: 1px dashed #979797;
  padding-left: 10px;


}

.play-in-device p {
  margin-top: 9px;
  margin-bottom: 4px;
  padding-left: 3px;
  color: #555555;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 500;

}

.play-in-device p span {
  font-weight: 300;
}

.play-in-container {
  display: flex;
  column-gap: 5px;
  top: -2px;
  position: relative;
}

iron-icon {
  margin-right: 4px;
}

.start-icon-bt,
.pause-icon-bt,
.continue-icon-bt,
.stop-icon-bt {
  color: white;

}

.start-icon,
.pause-icon,
.continue-icon,
.stop-icon {
  width: 18px;
  height: 18px;
  padding-bottom: 2px;
}

.start-icon-bt {
  background-color: #67a651;
  cursor: pointer;
}

.stop-icon-bt {
  background-color: #BB271A;
}

.pause-icon-bt,
.continue-icon-bt {
  background-color: #2c99c4;
}

.start-icon-bt[animated],
.stop-icon-bt[animated],
.continue-icon-bt[animated],
.continue-icon-bt[animated] {
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.start-icon-bt,
.stop-icon-bt,
.continue-icon-bt,
.pause-icon-bt {
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  min-width: 5.14em;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  text-transform: uppercase;
  outline-width: 0;
  border-radius: 3px;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  z-index: 0;
  padding: 0.7em 0.57em;
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  height: 28px;
  width: 100px;
}


.play-in-container button {
  width: 95px;
  height: 30px;
  padding: 0px;
  font-size: 12px;
}

.pause-icon-bt,
.continue-icon-bt,
.stop-icon-bt {
  cursor: not-allowed;
}

.unit {
  position: absolute;
  left: 5px;
  top: 25px;
  height: 21px;
  background-color: #d3d3d385;
}

.disabledWidgets {
  opacity: 0.5;
  pointer-events: none;
}