*{
  font-family: Carlito, Calibri, Helvetica Neue, sans-serif;
}
:root{
  --wb-color: #c800ff;
  --ozon-color: #0069ff;
  --ym-color: #fd0;
  --wb-opaque-color: rgb(200 0 255 / 5%);
  --ozon-opaque-color: rgb(0 47 255 / 5%);
  --ym-opaque-color: rgb(255 233 0 / 5%);
}
#status{
  display:flex;
  gap: 5%;
  max-width:500px;
}
.status-block{
  cursor:pointer;
  flex:1;
  display: flex;
  aspect-ratio: 1 / 1;
  color:#fff;
  container-type: inline-size;
  font-size: clamp(50px, 20cqi, 100px);
  font-weight: bold;
  justify-content: center;
  align-items: center;
  position:relative;
}
.status-block .logo{
  position:absolute;
  transition: all 0.2s ease-out;
}
.status-block.disabled .counter{
  display:none;
}
.status-block .settings-icon{
  display:none;
  width:50%;
  height:50%;
}
.status-block:hover .settings-icon{
  display:block;
}
.status-block:hover .counter{
  display:none;
}

#status-wb{
  background-color: var(--wb-color)
}
#status-wb:not(.disabled) .logo, #status-wb:hover .logo{
  margin-left: 60%;
  margin-top: -70%;
}
#status-ozon{
  background-color: var(--ozon-color);
}
#status-ozon:not(.disabled) .logo, #status-ozon:hover .logo{
  margin-left: 40%;
  margin-top: -70%;
}
#status-ym{
  background-color: var(--ym-color);
}
#status-ym:not(.disabled) .logo, #status-ym:hover .logo{
  margin-left: 60%;
  margin-top: -70%;
}
#status .disabled{
  background: #ccc;
}

#wb-settings{
  background: var(--wb-opaque-color);
}
#ozon-settings{
  background: var(--ozon-opaque-color);
}
#ym-settings{
  background: var(--ym-opaque-color);
}

.col-button{
  cursor:pointer;
  color:#999;
  white-space: nowrap;
}
.col-button:hover{
  text-decoration: underline dashed;
  text-underline-offset: 0.3rem;
}
.col-button::after {
  content: " \2193";
  margin-left: 5px;
  color: #555;
}
.col-button.show::after{
  content: " \2191";
}
.col-block{
  border:1px dashed #000;
  padding:10px;
  display:none;
}
.col-section{
  display:none;
  background: #eee;
  padding:20px;
  margin-bottom:1rem;
  max-width: 900px;
}
.col-section.show,.col-block.show{
  display:block;
}

label input{
  display: block;
  width:100%;
  padding: .375rem .75rem;
  margin-top:.3rem;
  box-sizing:border-box;
  font-size:1rem;
}
button{
  font-size:1rem;
}

.screenshot{
  box-shadow: 3px 3px 10px #000;
}
.check-ok{
  color:green;
  font-size:36px;
  margin:0 1rem;
  display:none;
}
.check-fail{
  color:red;
  font-size:36px;
  margin:0 1rem;
  display:none;
}
#last-error{
  display:none;
}

#leds-loader{
  position: relative;
  width:50px;
  height:50px;
  margin:20px;
}
.led{
  width: 15%;
  height: 15%;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px 5px #fff;
  display: inline-block;
  position:absolute;
}
#leds-loader .led:nth-child(1){
  top:0;
  left:50%;
}
#leds-loader .led:nth-child(2){
  top:27%;
  left:90%;
}
#leds-loader .led:nth-child(3){
  top:72%;
  left:90%;
}
#leds-loader .led:nth-child(4){
  top:100%;
  left:50%;
}
#leds-loader .led:nth-child(5){
  top:72%;
  left:10%;
}
#leds-loader .led:nth-child(6){
  top:27%;
  left:10%;
}

.switch {
  font-size:12px;
 --button-width: 3.5em;
 --button-height: 2em;
 --toggle-diameter: 1.5em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #4296f4;
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--color-grey);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
 vertical-align: middle;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: #fff;
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
 background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

.wb-switch{
  --color-green: var(--wb-color);
}
.ozon-switch{
  --color-green: var(--ozon-color);
}
.ym-switch{
  --color-green: var(--ym-color);
}