div#container
{
   width: 412px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #C0C0C0;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
#Layer1
{
   background-color: #FFFFA0;
   background-image: none;
   border: 1px solid #808080;
}
#ZoneTitle
{
   border: 1px solid #696969;
   border-radius: 1px;
   background-color: #98FB98;
   background-image: none;
   color :#FF0000;
   font-family: Arial;
   font-weight: normal;
   font-size: 24px;
   padding: 4px 4px 4px 20px;
   margin: 0;
   text-align: center;
   vertical-align: top;
}
#Layer2
{
   background-color: #FFFFA0;
   background-image: none;
   border: 1px solid #808080;
}
#DebugTitle
{
   border: 1px solid #696969;
   border-radius: 1px;
   background-color: #98FB98;
   background-image: none;
   color :#FF0000;
   font-family: Arial;
   font-weight: normal;
   font-size: 24px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: center;
   vertical-align: top;
}
#Log
{
   border: 1px solid #CCCCCC;
   border-radius: 4px;
   background-color: #FFFFFF;
   background-image: none;
   color :#000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: left;
   overflow: auto;
   resize: none;
}
#Log:focus
{
   border-color: #66AFE9;
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
   outline: 0;
}
#Wait
{
   border: 2px solid #00BFFF;
   border-radius: 10px;
   background-color: #FFFFFF;
   background-image: none;
   color :#FF0000;
   font-family: "Lucida Console";
   font-weight: normal;
   font-size: 16px;
   padding: 4px 4px 4px 4px;
   margin: 0;
   text-align: center;
   vertical-align: top;
}
#map
{
   background-color: #FBFBFB;
   background-image: none;
   border: 1px solid #87CEEB;
   border-radius: 5px;
}
/*
FlipSwitch Extension 
*  This is my 4th iteration of a flip or toggle switch as seen on mobile platforms
*  It is flexible with text (for no text just use a no-break space "\00a0")
*  Borders & gradients can be added via the custom Object HTML, these were included 
*  because the standard offering in the application doesn't seem to work with 
*  extensions as everthing gets ignored! Copywrite JibbaJoy 2020
*/
.markRoute {
  position: relative;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
}
.markRoute input[type=checkbox] {
  display: none;
  background-color:transparent
}
.markRoute-label {
  height: 22px;
  width: 68px;
  line-height: 24px;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 15px; 
  margin-top: 0px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
border: 1px solid #b5b5b5;
}
.markRoute-switch {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  margin-top: 0px;
  height: 24px;
  background: lightblue;
  border-radius: 15px;
  right: 46px;
  -webkit-transition: all 0.3s ease-in 0s;
  -moz-transition: all 0.3s ease-in 0s;
  -ms-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
  ;
}
.markRoute-inner {
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.3s ease-in 0s;
  -moz-transition: margin 0.3s ease-in 0s;
  -ms-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.markRoute-inner:before, .markRoute-inner:after {
  float: left;
  width: 50%;
  padding: 0;
  font-size: 16px;
  color: white;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.markRoute-inner:before {
  content: "YES";
  padding-left: 12px;
  background: #2E8B57;
  color: #FFFFFF;
  ;
}
.markRoute-inner:after {
  content: "NO";
  padding-right: 12px;
  background: #A9A9A9;
  color: #ffffff;
  text-align: right;
  ;
}
.markRoute-cb:checked + .markRoute-label .markRoute-inner {
  margin-left: 0;
}
.markRoute-cb:checked + .markRoute-label .markRoute-switch {
  right: 0px;
}
#markRoute:disabled ~ .markRoute-label {
  opacity: 0.8;
  pointer-events:none;
}


/*
FlipSwitch Extension 
*  This is my 4th iteration of a flip or toggle switch as seen on mobile platforms
*  It is flexible with text (for no text just use a no-break space "\00a0")
*  Borders & gradients can be added via the custom Object HTML, these were included 
*  because the standard offering in the application doesn't seem to work with 
*  extensions as everthing gets ignored! Copywrite JibbaJoy 2020
*/
.centerMarker {
  position: relative;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
}
.centerMarker input[type=checkbox] {
  display: none;
  background-color:transparent
}
.centerMarker-label {
  height: 22px;
  width: 68px;
  line-height: 24px;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 15px; 
  margin-top: 0px;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75);
border: 1px solid #b5b5b5;
}
.centerMarker-switch {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  margin-top: 0px;
  height: 24px;
  background: lightblue;
  border-radius: 15px;
  right: 46px;
  -webkit-transition: all 0.3s ease-in 0s;
  -moz-transition: all 0.3s ease-in 0s;
  -ms-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
  ;
}
.centerMarker-inner {
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.3s ease-in 0s;
  -moz-transition: margin 0.3s ease-in 0s;
  -ms-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.centerMarker-inner:before, .centerMarker-inner:after {
  float: left;
  width: 50%;
  padding: 0;
  font-size: 16px;
  color: white;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.centerMarker-inner:before {
  content: "YES";
  padding-left: 12px;
  background: #2E8B57;
  color: #FFFFFF;
  ;
}
.centerMarker-inner:after {
  content: "NO";
  padding-right: 12px;
  background: #A9A9A9;
  color: #ffffff;
  text-align: right;
  ;
}
.centerMarker-cb:checked + .centerMarker-label .centerMarker-inner {
  margin-left: 0;
}
.centerMarker-cb:checked + .centerMarker-label .centerMarker-switch {
  right: 0px;
}
#centerMarker:disabled ~ .centerMarker-label {
  opacity: 0.8;
  pointer-events:none;
}


#led
{
   background-color: #2E8B57;
   background-image: none;
}
#Previous
{
   border-width: 0;
   vertical-align: top;
}
#Next
{
   border-width: 0;
   vertical-align: top;
}
#resume
{
   border: 1px solid #2E6DA4;
   border-radius: 4px;
   background-color: #3370B7;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   margin: 0;
}
#Image1
{
   border: 0px solid #000000;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
:root {
    --scale-page: 1;
}

@keyframes glowing {
   0% {
      opacity: 1.0;
   }
   50% {
       opacity: 0.2;
   }
   100% {
      opacity: 1.0;
   }
}

.led_slow {
   animation: glowing 2000ms infinite;
   background-color: #2E8B57;
   border-radius: 12px
}

.led_fast {
   animation: glowing 500ms infinite;
   background-color: #FF7F50 !important;
   border-radius: 12px
}            

.led_blue {
   background-color: #0000FF !important;
   border-radius: 12px
}            

.shrink-page{
   transform: scale(var(--scale-page));
   transform-origin: 0 0;
   position: absolute;
   top: 0px;
}

html, body {
   position: relative;
   height: 100%;
}

.selected {
   border: 3px solid #FF0000 !important;
}

.unselected {
   border: 1px solid #DCDCDC !important;
}

#resume:disabled {
   border: 2px outset ButtonFace;
   color: GrayText;
   cursor: inherit;
   background-color: #ddd;
   background: #ddd;
}

.pause {
   -webkit-animation-play-state: paused !important; 
   -moz-animation-play-state: paused !important; 
   -o-animation-play-state: paused !important;
   animation-play-state: paused !important;
}

@media all and (max-width: 600px) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }  
}

@media all and (max-width: 320px) {
  input[type="checkbox"] {
    width: 35px;
    height: 35px;
    
  }  
}

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#080;
      margin: 0;
      padding: 0;
    }   
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }