body {
    font-size:14px;
    font-family: Arial, Verdana;
    margin:0;
    padding:0;
    background:#EEE;
}
.hidden {
    display:none;
}
select, input[type="text"] {
    font-size:14px;
    width:100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
input[type="submit"], button {
    font-size:14px;
    border:0;
    background:#000;
    padding:5px 0px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color:#FFF;
    border-radius: 10px;
    display:inline-block;
    width:100px;
    font-weight:700;
}
input[type="submit"]:hover, button:hover {
    background:#FF7A00;
}
.clear {
    clear:both;
}
.change-button {
    display:inline-block; 
    cursor:pointer; 
    padding-top:4px; 
    font-size:85%;
}
.change-button:hover {
    color:#50AF67;    
}

/* Index */
.wrapper {
    text-align:center;
    padding:0 0 40px 0;
    background:#FFF;
}
.wrapper-content {
    display:inline-block; 
    text-align:left
}
.logo-top {
    display:block;
}
.logo-top img {
    width:200px;
    height:26px;
    border:0;
}
.logo-slogan {
    text-align:left; 
    font-size:24px; 
    height:60px;
}
.logo-slogan img {
    width:20px;
    height:auto;
    position:relative; 
    top:1px; 
    opacity:0.8; 
}
.footer {
    padding:40px 40px 60px 40px;
    text-align:center; 
    color:#CCC
} 
.footer img {
    width:20px;
    height:auto;
    position:relative; 
    top:4px; 
    opacity:0.2; 
    -webkit-filter: grayscale(100);
            filter: grayscale(100);
}
.footer a {
    color:#CCC;
}
.footer a:hover {
    color:#E30000;
}

/* Input-Rows */
.input-row {
    margin-bottom:5px;
}
.input-row-title {
    float:left; 
    width:100px;
}
.input-row-content {
    margin-left:100px;
}

/* Panel-Style #1 */
.panelstyle1 {
     padding-left:20px;
}
.panelstyle2 {
     padding-left:20px;
}
.panelstyle4 {
     padding-left:20px;
}
.panelstyle5 {
    text-align: center;
}

/* Buttons */
.buttons {
    clear:both; 
    float:none; 
    text-align:left;
}

/* Bulb Config */
.bulb-config {
    margin-bottom:50px; 
    background:#EEE; 
    padding:10px; 
    border-radius:10px;
}
.bulb-config-header {
    margin-bottom:20px;
}
.bulb-config-header span {
    font-weight:700;
}
.bulb-config-header a {
    float:right; 
    display:block; 
    color:#000; 
    text-decoration:none; 
    position:relative; 
    top:-7px; 
    font-size:25px;
}
.bulb-config-header a:hover {
    color:#E30000; 
}

/* Legend */
.legend {
    float:left; 
    width:auto;
    margin-bottom:25px;
}
.legend-header span {
    font-weight:700;
}
.legend-content {
    margin-top:10px;
}
.legend-bulb {
    border-radius:50%; 
    width:20px; 
    height:20px; 
    float:left; 
    margin-right:5px;

    color-adjust:exact;
    -webkit-print-color-adjust:exact;
}
.legend-nm {
    float:left; 
    height:20px; 
    line-height:21px;
}

/* Bulbs */
.bulb-frame {
    display:inline-block; 
    position:relative;

    color-adjust:exact;
    -webkit-print-color-adjust:exact;
}

.thebulb {
    display:inline-block;
    border-radius:50%;
    background:#EEE;
    width:40px;
    height:40px;
    overflow:hidden;
    position:relative;
    margin-right:8px;
    margin-bottom:3px;
    text-decoration: none;
}
.thebulb-on {
    -webkit-box-shadow: 0px 0px 4px 4px #888 !important;
    -moz-box-shadow: 0px 0px 4px 4px #888 !important;
    box-shadow: 0px 0px 4px 4px #888 !important;
}
.thebulb div {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    font-size:90%;
}
.thebulb-single-1 {
    height:40px;
    line-height:40px;
}
.thebulb-dual-1,
.thebulb-dual-2 {
    height:20px;
    line-height:24px;
    text-align: center;
}
.thebulb-dual-2 {
    line-height:16px;
    border-top:1px solid #FFF;
}
.thebulb-triple-1,
.thebulb-triple-2,
.thebulb-triple-3 {
    height:14px;
    line-height:13px;
    text-align: center;
}
.thebulb-quad-1,
.thebulb-quad-2,
.thebulb-quad-3,
.thebulb-quad-4 {
    height:20px;
    width:20px;
    float:left;
    line-height:24px;
    text-align: center;
}
.quadframe { 
    position:absolute; 
    z-index:0; 
    top:0;
    position:relative; 
    z-index:1;
}
.quadframe-absolute { 
    position:absolute; 
    z-index:0; 
    top:0;
}
.quadframe .thebulb-quad-1 {
    -webkit-transform: rotate(-45deg); 
        -ms-transform: rotate(-45deg); 
            transform: rotate(-45deg); 
}
.quadframe .thebulb-quad-2 {
    -webkit-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
            transform: rotate(45deg); 
}
.quadframe .thebulb-quad-3 {
    -webkit-transform: rotate(220deg); 
        -ms-transform: rotate(220deg); 
            transform: rotate(220deg); 
}
.quadframe .thebulb-quad-4 {
    -webkit-transform: rotate(-220deg); 
        -ms-transform: rotate(-220deg); 
            transform: rotate(-220deg);
}

/* Content */
.content-left {
    float:left; 
    margin-right:30px;
    margin-bottom:40px;
    padding-top:40px;
    width:240px;
    position: sticky;
    top:0;
}
.content-right {
    float:right; 
    width:200px;
    margin-bottom:40px;
    padding-top:40px;
    position: sticky;
    top:0;
}
.content-middle {
    float:left;
    margin-right:30px;
    overflow:auto;
    max-width:1200px;
    white-space: nowrap;
    margin-top:40px;
    background:#FFF;
}

.content-middle-rownumber {
    float:left; 
    position:sticky; 
    left:0; 
    background:#FFF; 
    z-index:10; 
    padding-left:10px;
}
.content-middle-rownumber-loops {
    color:#E30000;
    font-weight:700;
}
.content-middle-bulbs {
    margin-left:30px;
}

@media only screen and (max-width: 2020px) {
    .content-middle {
        max-width:950px;
    }
}

@media only screen and (max-width: 1520px) {
    .content-middle {
        max-width:700px;
    }

    .thebulb {
        width:30px;
        height:30px;
        margin-right:5px;
        margin-bottom:5px;
    }
    .thebulb div {
        font-size:75%;
    }
    .thebulb-single-1 {
        height:30px;
        line-height:30px;
    }
    .thebulb-dual-1,
    .thebulb-dual-2 {
        height:15px;
        line-height:18px;
    }
    .thebulb-dual-2 {
        line-height:12px;
    }
    .thebulb-triple-1,
    .thebulb-triple-2,
    .thebulb-triple-3 {
        height:10px;
        line-height:10px;
    }
    .thebulb-quad-1,
    .thebulb-quad-2,
    .thebulb-quad-3,
    .thebulb-quad-4 {
        height:15px;
        width:15px;
        line-height:20px;
    }

    .panelstyle1 {
         padding-left:15px;
    }
}

@media only screen and (max-width: 1320px) {
    .content-middle {
        max-width:450px;
    }
}

@media only screen and (max-width: 1050px) {
    .content-middle {
        max-width:580px;
    }
}

@media only screen and (max-width: 620px) {
    .content-middle {
        max-width:500px;
    }
}

@media only screen and (max-width: 540px) {
    .content-middle {
        max-width:450px;
    }
}

@media only screen and (max-width: 470px) {
    .content-middle {
        max-width:360px;
    }
}

@media only screen and (max-width: 380px) {
    .content-middle {
        max-width:330px;
    }
}

@media only screen and (max-width: 1050px) {
    .buttons {
        padding-top:5px;
        clear:none; 
        float:right; 
        text-align:right;
    }
    .content-left {
        float:none; 
        width:auto;
        margin-right:0;
        position:inherit;
    }
    .content-right {
        float:none; 
        width:auto;
        margin-right:0;
        padding-top:0;
        position:inherit;
        margin-bottom:0;
    }
    .content-middle {
        float:left;
        margin-right:0;
        padding-top:20px;
    }
}

.blur {
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    filter: blur(2px);
}    

.loader {
    width:100%; 
    position:fixed; 
    top:0; 
    z-index:100; 
    background:rgba(0,0,0,0.5); 
    color:#FFF; 
    text-align:center;
}

/* HTML: <div class="loader"></div> */
.loading {
display:inline-block;
  width: 4px;
  color: #FFF;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
    19px 0     0 5px, 38px 0     0 5px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px;
  transform: translateX(-38px);
  animation: l26 2s infinite linear;
}
@keyframes l26 {
  12.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 5px,
    19px 0     0 5px, 38px 0     0 0px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px}
  25%   {box-shadow: 
    19px -19px 0 5px, 38px -19px 0 0px, 57px -19px 0 5px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 0px}
  50%   {box-shadow: 
    19px -19px 0 5px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
  62.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
    19px 0     0 5px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 5px}
  75%   {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
  87.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 5px, 57px 0     0 0px,
    19px 19px  0 5px, 38px 19px  0 0px, 57px 19px  0 0px}
}    

/*! jQuery UI - v1.14.1 - 2024-12-19
* https://jqueryui.com
* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css
* Copyright OpenJS Foundation and other contributors; Licensed MIT */

.ui-draggable-handle {
    touch-action: none;
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
    display: none;
}
.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse;
}
.ui-helper-clearfix:after {
    clear: both;
}
.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
}

.ui-front {
    z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
    cursor: default !important;
    pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-widget-icon-block {
    left: 50%;
    margin-left: -8px;
    display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-resizable {
    position: relative;
}
.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
    display: none;
}
.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}
.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}
.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}
.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}
.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}
.ui-selectable {
    touch-action: none;
}
.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted black;
}
.ui-sortable-handle {
    touch-action: none;
}

@page { 
    margin: 0; 
    /*size: landscape;*/
}
@media print {
    body {
        zoom: 1.2;
        background:#FFF;
        padding-top:40px;
    }
    .footer {
        display:none;
    }

    input[type="submit"], button {
        display:none;
    }

    a[href]:after {
        display: none;
        visibility: hidden;
    }
    .noprint1 {
        opacity:0.6
    }
    .noprint2 {
        opacity:0.4
    }
    .noprint3 {
        opacity:0.2
    }
    .noprint {
        display:none;
    }
}