* {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .context-menu-list {
                margin:0;
                padding:0;

                min-width: 60px;
                max-width: 80px;
                display: inline-block;
                position: absolute;
                list-style-type: none;

                border: 1px solid #DDD;
                background: #EEE;

                -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
                -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
                -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 11px;
            }

            .context-menu-item {
                padding: 2px 2px 2px 24px;
                background-color: #EEE;
                position: relative;
                -webkit-user-select: none;
                -moz-user-select: -moz-none;
                -ms-user-select: none;
                user-select: none;
            }

            .context-menu-separator {
                padding-bottom:0;
                border-bottom: 1px solid #DDD;
            }

            .context-menu-item > label > input,
            .context-menu-item > label > textarea {
                -webkit-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                user-select: text;
            }

            .context-menu-item.hover {
                cursor: pointer;
                background-color: #39F;
            }

            .context-menu-item.disabled {
                color: #666;
            }

            .context-menu-input.hover,
            .context-menu-item.disabled.hover {
                cursor: default;
                background-color: #EEE;
            }

            .context-menu-submenu:after {
                content: ">";
                color: #666;
                position: absolute;
                top: 0;
                right: 3px;
                z-index: 1;
            }

            /* icons
                #protip:
                In case you want to use sprites for icons (which I would suggest you do) have a look at
                http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
                .context-menu-item.icon:before {}
            */
            .context-menu-item.icon {
                min-height: 18px;
                background-repeat: no-repeat;
                background-position: 4px 2px;
            }

            /* vertically align inside labels */
            .context-menu-input > label > * {
                vertical-align: top;
            }

            /* position checkboxes and radios as icons */
            .context-menu-input > label > input[type="checkbox"],
            .context-menu-input > label > input[type="radio"] {
                margin-left: -17px;
            }
            .context-menu-input > label > span {
                margin-left: 5px;
            }

            .context-menu-input > label,
            .context-menu-input > label > input[type="text"],
            .context-menu-input > label > textarea,
            .context-menu-input > label > select {
                display: block;
                width: 100%;

                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }

            .context-menu-input > label > textarea {
                height: 100px;
            }
            .context-menu-item > .context-menu-list {
                display: none;
                /* re-positioned by js */
                right: -5px;
                top: 5px;
            }

            .context-menu-item.hover > .context-menu-list {
                display: block;
            }

            .context-menu-accesskey {
                text-decoration: underline;
            }

            #canvas {
                padding: 0px;
                margin: 0px;
                border: 0px;
                position: absolute;
                top: 80px;
                right: 0px;
                left: 160px;
                bottom: 0px;
                overflow: scroll;
                background-color: #cecebe;
            }

            #editBox {
                padding: 0px;
                margin: 0px;
                border: 0px;
                position: absolute;
                top: 80px;
                right: 0px;
                left: 960px;
                bottom: 0px;
                overflow: scroll;
                background-color: #ffcebe;
                display: none;
            }

            #toolbar {
                position: absolute;
                margin: 0px;
                padding-top: 4px;
                padding-left: 4px;
                top: 0px;
                left: 160px;
                height: 64px;
                right: 0px;
                overflow: hidden !important;
                z-index: 1000 !important;
                border: 0 none;
                border-bottom: 1px solid #d6d6d6;
                background-color: #d9bd8d;
            }

            #toolbar_hint {
                position: absolute;
                top: 19px;
                height: 64px;
                right: 40px;
                color: white;
            }

            .palette_node_element {
                border: 1px solid gray;
                background-color: #f3f3f3;
                padding: 10px;
                cursor: move;
                width: 120px;
                margin: 30px auto 30px auto;
                text-align: center;
                align: center;
                border-radius: 5px;
            }

            #side-nav {
                border-right: 1px solid #e0e0e0;
                bottom: 0;
                background: #fff;
                color: #333;
                display: block;
                font-family: 'RobotoDraft', sans-serif;
                left: 0;
                position: fixed;
                top: 0;
                width: 160px;
                z-index: 4;
            }

            #side-nav #logo {
                border-bottom: 1px solid #e0e0e0;
                display: block;
                height: 64px;
                margin: auto;
                padding: 12px 24px 10px 24px;
                position: relative;
                font-size: 30px;
                font-weight: 100;
            }

            button.gray,a.gray,input[type=submit].gray {
                padding: 10px 10px;
                -webkit-border-radius: 2px 2px;
                border: solid 1px #dadada;
                background: #417993; /* Old browsers */
                background: -moz-linear-gradient(top, #417993 0%, #417993 100%);
                /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, 417993),
                    color-stop(100%, #417993)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #417993 0%, #417993 100%);
                /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #417993 0%, #417993 100%);
                /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #417993 0%, #417993 100%);
                /* IE10+ */
                background: linear-gradient(top, #417993 0%, #417993 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#417993',
                    endColorstr='#417993', GradientType=0); /* IE6-9 */
                color: #fff;
                text-decoration: none;
                cursor: pointer;
                display: inline-block;
                text-align: center;
                font-weight: bold;
                font-family: Arial, Helvetica, sans-serif;
                line-height: 1;
                font-size: 100%;
                min-width: 80px;
            }

            .gray:hover {
                border: 1px solid #c6c6c4;
                background:  #f8f8f8; /* Old browsers */
                background: -moz-linear-gradient(top, #f8f8f8 0%, #417993 100%);
                /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8),
                    color-stop(100%, #417993)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #f8f8f8 0%, #417993 100%);
                /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #f8f8f8 0%, #417993 100%);
                /* Opera 11.10+ */
                background: -ms-linear-gradient(top, #f8f8f8 0%, #417993 100%);
                /* IE10+ */
                background: linear-gradient(top, #f8f8f8 0%, #417993 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient(  startColorstr='#f8f8f8',
                    endColorstr='#417993', GradientType=0); /* IE6-9 */
                color: #222;
                -webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
                -moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
                box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
            }

            .gray:active {
                border: 1px solid #c6c6c4;
                color: #222;
                -webkit-box-shadow: inset 0 0 2px 4px #417993, 0 1px 0 0 #eeeeee;
                -moz-box-shadow: inset 0 0 2px 4px #417993, 0 1px 0 0 #eeeeee;
                box-shadow: inset 0 0 2px 4px #417993, 0 1px 0 0 #eeeeee;
            }

            .disabled {
                cursor: default !important;
                color: #888 !important;
                opacity: 0.8;
            }

            .gray.round {
                border-radius: 50%;
            }

            input {
                -webkit-writing-mode: horizontal-tb !important;
                text-rendering: auto;
                color: initial;
                letter-spacing: normal;
                word-spacing: normal;
                text-transform: none;
                text-indent: 0px;
                text-shadow: none;
                display: inline-block;
                text-align: start;
                -webkit-appearance: textfield;
                background-color: white;
                -webkit-rtl-ordering: logical;
                cursor: text;
                margin: 0em;
                font: 400 13.3333px Arial;
                padding: 0px 0px;
                border-width: 1px;
                border-style: inset;
                border-color: initial;
                border-image: initial;
            }

            table {
                border-collapse: separate;
                border-spacing: 0px;
            }

            notSelectable

            html {
                /* Needed for Chrome app; shouldn't disrupt other things. */
                overflow-y: scroll;
            }


            a {
                text-decoration:bold;
                color:inherit;
            }

            a:hover{
                text-decoration:underline;
                cursor:pointer;
            }

            body{
                padding:0;
                padding-top:30px;
                margin:0;
                color: #d0d0d0;
                background: #363636;
                position:relative;
                overflow: auto;
                border: 0px;
                -webkit-font-smoothing: antialiased;
                -webkit-text-size-adjust: 100%;
                text-rendering: optimizeLegibility;
                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                font-size: 14px;
                font-weight: normal;
            }


            th, td {
                border:1px solid grey;
                padding:1px 1px 1px 1px;
                border-collapse:collapse;
                white-space:nowrap;
            }


            #header{
                text-align:center;
                font-size:40px;
                height:50px;
                margin-bottom:10px;
                position:relative;
                width:100%;
                min-width:800px;
                padding:5px;
                border-bottom: 5px solid #313131;

                background:#444;
                z-index:2;
                white-space: nowrap;

                background: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(1, #444),
                    color-stop(0, #333)
                    );

                background: -moz-linear-gradient(
                    center top,
                    #444,
                    #333
                    );

                background: #2c2c2c;

                -webkit-box-shadow:0 0 10px #2a2a2a;
                -moz-box-shadow: 0 0 10px #2a2a2a;
                box-shadow:0 0 10px #2a2a2a;

            }

            button, label {
                font-size: 14px;
                font-weight: normal;
                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            }

            input, select, textarea {
                color: initial;
                font-weight: normal;
                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            }

            label {
                font-weight: bold;
                color:inherit;
            }

            .draw2d_InputPort{
                fill:#F7F7F7;
                stroke:#d7d7d7;
            }
            .draw2d_OutputPort{
                fill:#F7F7F7;
                stroke:#d7d7d7;
            }
            .tab-box {
                padding-bottom:5px;
                font-weight: bold;
            }
            .tab-box a {
                border:1px solid #aaa;
                color:#333333;
                padding: 5px 15px;
                text-decoration:none;
                background-color: #bbb;
                font-weight: bold;
                border-radius: 12px 12px 0px 0px;
                margin-left: 2px;
            }
            .tab-box a.activeLink {
                background-color: #ccc;
                border-bottom: 0;
                padding: 6px 15px;
                font-weight: bold;
            }

            .tab-box2 {
                padding-bottom:5px;
                font-weight: bold;
                font-size: 90%;
            }
            .tab-box2 a {
                border:1px solid #ccc;
                color:#333333;
                padding: 5px 15px;
                text-decoration:none;
                background-color: #ccc;
                font-weight: bold;
                border        : 1px solid #ddd;
                border-top-left-radius  : 8px;
                border-top-right-radius : 8px;
                margin-left: 1px;
            }
            .tab-box2 a.activeLink {
                background-color: #ddd;
                border-bottom: 0;
                padding: 6px 15px;
            }

            .tab-box3 {
                padding-bottom:5px;
                font-weight: bold;

                padding       : 0.5em 0.75em;
                border        : 1px solid #ddd;
                border-radius : 4px;
                background    : #fff;
            }
            .tab-box3 a {
                border:1px solid #aaa;
                color:#333333;
                padding: 5px 15px;
                text-decoration:none;
                background-color: #bbb;
                font-weight: bold;

                margin      : 0;
                padding     : 0.5em 0.5em 0;
                overflow    : hidden;
                font-size   : 1em;
                font-weight : normal;

                display                 : block;
                padding                 : 0.25em 0.75em;
                border                  : 1px solid #ddd;
                border-bottom           : none;
                border-top-left-radius  : 4px;
                border-top-right-radius : 4px;
                background              : #fff;

            }
            .tab-box3 a.activeLink {
                background-color: #ccc;
                border-bottom: 0;
                padding: 6px 15px;
                font-weight: bold;

                margin      : 0;
                padding     : 0.5em 0.5em 0;
                overflow    : hidden;
                font-size   : 1em;
                font-weight : normal;

                display                 : block;
                padding                 : 0.25em 0.75em;
                border                  : 1px solid #ddd;
                border-bottom           : none;
                border-top-left-radius  : 4px;
                border-top-right-radius : 4px;
                background              : #fff;


            }

            .tabcontent {
                border: 1px solid #ddd;
                border-top: 1px solid #ddd;
                box-shadow: inset 0 0 10px #888888;
                border-style: solid;
                margin-left: 10px;
                margin-right: 10px;
                padding: 10px 10px 10px 10px;
                height:auto;
                width:auto;
            }
            .hide {
                display: none;
            }

            ul
            {
                font-family: Arial, Verdana;
                font-size: 14px;
                margin: 0;
                padding: 0;
                list-style: none;
                z-index: 999999;
            }

            ul li
            {
                display: block;
                position: relative;
                float: left;

            }

            li ul
            {
                display: none;
            }

            ul li a
            {
                display: block;
                text-decoration: none;
                color: #ffffff;
                border-top: 1px solid #ffffff;
                padding: 5px 15px 5px 15px;
                background: #777777;
                margin-left: 1px;
                white-space: nowrap;
            }

            ul li:hover
            {
                background: #617F8A;
            }
            li:hover ul
            {
                display: block;
                position: absolute;
            }

            li:hover li
            {
                float: none;
                font-size: 13px;
            }

            li:hover a
            {
                background: #617F8A;
            }

            li:hover li a:hover
            {
                background: #95A9B1;
            }

            .noHover{
                pointer-events: none;
            }
            .table-relative {
                position: relative;
            }
            .table-editable .glyphicon {
                font-size: 20px;
            }

            .table-remove {
                color: #700;
                cursor: pointer;
            }
            .table-remove:hover {
                color: #f00;
            }

            .table-up, .table-down {
                color: #007;
                cursor: pointer;
            }
            .table-up:hover, .table-down:hover {
                color: #00f;
            }

            .table-add {
                color: #070;
                cursor: pointer;
            }
            .table-add:hover {
                color: #0b0;
            }


            #topBanner{
                text-align:center;
                font-size:40px;
                height:50px;
                margin-bottom:10px;
                position:relative;
                width:100%;
                min-width:200px;
                padding:5px;
                border-bottom: 5px solid #313131;

                background:#444;
                z-index:2;
                white-space: nowrap;

                background: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(1, #444),
                    color-stop(0, #333)
                    );

                background: -moz-linear-gradient(
                    center top,
                    #444,
                    #333
                    );

                background: #2c2c2c;

                -webkit-box-shadow:0 0 10px #2a2a2a;
                -moz-box-shadow: 0 0 10px #2a2a2a;
                box-shadow:0 0 10px #2a2a2a;
                color: lightgrey;
            }



            #logoTopLeft{
                text-align:center;
                font-size:40px;
                height:50px;
                margin-bottom:10px;
                position:relative;
                width:20%;
                min-width:200px;
                padding:5px;
                border-bottom: 5px solid #313131;

                background:#444;
                z-index:2;
                white-space: nowrap;

                background: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(1, #444),
                    color-stop(0, #333)
                    );

                background: -moz-linear-gradient(
                    center top,
                    #444,
                    #333
                    );

                background: #2c2c2c;

                -webkit-box-shadow:0 0 10px #2a2a2a;
                -moz-box-shadow: 0 0 10px #2a2a2a;
                box-shadow:0 0 10px #2a2a2a;
                color: lightgrey;

                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                background: #2c2c2c;
                color: #ddd;
            }

            #logoTopMiddle{
                text-align:center;
                font-size:40px;
                height:50px;
                margin-bottom:10px;
                position:relative;
                width:100%;
                min-width:200px;
                padding:5px;
                border-bottom: 5px solid #313131;

                background:#555;
                z-index:2;
                white-space: nowrap;

                background: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(1, #555),
                    color-stop(0, #444)
                    );

                background: -moz-linear-gradient(
                    center top,
                    #555,
                    #444
                    );

                background: #2c2c2c;

                -webkit-box-shadow:0 0 10px #2a2a2a;
                -moz-box-shadow: 0 0 10px #2a2a2a;
                box-shadow:0 0 10px #2a2a2a;
                color: lightgrey;

                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                background: #2c2c2c;
                color: #ddd;
            }

            #logoTopRight{
                text-align:center;
                font-size:20px;
                height:50px;
                margin-bottom:10px;
                position:relative;
                width:100%;
                min-width:200px;
                padding:5px;
                border-bottom: 5px solid #313131;

                background:#666;
                z-index:2;
                white-space: nowrap;

                background: -webkit-gradient(
                    linear,
                    left bottom,
                    left top,
                    color-stop(1, #666),
                    color-stop(0, #555)
                    );

                background: -moz-linear-gradient(
                    center top,
                    #666,
                    #555
                    );

                background: #2c2c2c;

                -webkit-box-shadow:0 0 10px #2a2a2a;
                -moz-box-shadow: 0 0 10px #2a2a2a;
                box-shadow:0 0 10px #2a2a2a;
                color: lightgrey;

                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                background: #2c2c2c;
                color: #ddd;
            }


            .myAppFormat
            {
                display: block;
                text-decoration: none;
                color: #ffffff;
                border-top: 1px solid #ffffff;
                padding: 5px 15px 5px 15px;
                margin-left: 1px;
                white-space: nowrap;
                background: #c26354;
            }

            .glyphicon {
                color: #229191 !important;
            }
            TEXTAREA {
                margin: 0;
                padding: 0px 0px;
                border: 0;
                border-style: none;
                border-width: 0px;
                background: #eafafa;
                background: -webkit-linear-gradient(#eafafa, #c1f0f0);
                background:    -moz-linear-gradient(#eafafa, #c1f0f0);
                background:         linear-gradient(#eafafa, #c1f0f0);
            }
            INPUT {
                margin: 0;
                padding: 0px 0px;
                border: 0;
                border-style: none;
                border-width: 0px;
                background: #eafafa;
                background: -webkit-linear-gradient(#eafafa, #c1f0f0);
                background:    -moz-linear-gradient(#eafafa, #c1f0f0);
                background:         linear-gradient(#eafafa, #c1f0f0);
            }
            INPUT[type=number] {
                text-align:right;
            }
            INPUT[type=date] {
                margin: 0;
                padding: 0px 0px;
                border: 0;
                border-style: none;
                border-width: 0px;
                text-align:right;
                width: 140px;
            }
            INPUT:-moz-read-only { /* For Firefox */
                background-color: yellow;
            }

            INPUT:read-only {
                background: #eaf0f0;
                background: -webkit-linear-gradient(#eaf0f0, #a1d5d5);
                background:    -moz-linear-gradient(#eaf0f0, #a1d5d5);
                background:         linear-gradient(#eaf0f0, #a1d5d5);
            }
            SELECT {
                line-height: normal;
                margin: 0;
                padding: 0px 0px;
                border: 0;
                border-style: none;
                border-width: 0px;
                background: #eafafa;
                background: -webkit-linear-gradient(#eafafa, #c1f0f0);
                background:    -moz-linear-gradient(#eafafa, #c1f0f0);
                background:         linear-gradient(#eafafa, #c1f0f0);
            }
            .rDispInline{
                display: table-cell;
                height: 10px;
                width: 10px;
                padding: 4px 4px;
            }
            .rDispInline:hover{
                cursor: pointer;
            }
            .rNumber {
                text-align:right;
            }
            .rAmount {
                text-align:right;
            }
            .rPercent {
                text-align:right;
            }
            .rTable {
                display: table;
                width: 1px;
                table-layout: auto;
            }
            .rTableTop {
                display: table;
                width: 100%;
                table-layout: auto;
            }
            .rTableRow.rTableTopRow {
                display: table-row;
                background-color:darkgrey;
            }
            .rTableCell.rTableTop {
                display: table-cell;
                padding: 4px 4px;
                border: 1px solid #999999;
                padding:5px;
                margin:0;
                color:grey;
                font-size:24px;
            }

            .rTableMessages {
                display: table;
                width: 1px;
                table-layout: auto;
            }
            .rTableMessages.rTableRow {
                display: table-row;
                background-color:white;
            }
            .rTableMessages.rTableCell {
                display: table-cell;
                padding: 4px 4px;
                margin: 0;
                font-size: 24px;
                padding: 5px 10px 5px 10px;
                margin: 0;
                text-align: center;
                background-color: white;
                color: black;
            }
            .rTableAppMenu {
                display: table-row;
                border: 1px solid #999999;
            }

            .rTableRow {
                display: table-row;
                border: 1px solid #999999;
            }
            .rTableRow:hover {
                background-color: #00e6e6;
            }
            .rTableRowTop {
                display: table-row;
                border: 1px solid #999999;
            }
            .rTableCell {
                display: table-cell;
                padding: 4px 4px;
                border: 1px solid #999999;
                white-space: nowrap;
            }
            .rTableCellPid {
                display: table-cell;
                padding: 0px 0px;
                border: 1px solid #999999;
                font-size: 80%;
                text-align: center;
            }
            .rTableCellEdit {
                display: table-cell;
                padding: 0px 4px 0px 4px;
                border: 1px solid #999999;
            }
            .rTableCellClickNoBorder {
                display: table-cell;
                border: 0px;
                padding: 0px 0px;
            }
            .rTableCellClick {
                display: table-cell;
                border: 1px solid #999999;
                padding: 0px 2px;
            }
            .rTableCellClick:hover {
                cursor: pointer;
            }
            .rTableCell:hover {
                cursor: text;
            }
            .rTableCell:focus {
                background-color: #ddd;
            }
            .rTableHead {
                display: table-cell;
                padding: 3px 10px;
                border: 1px solid #999999;
            }
            .rTableHeading {
                display: table-header-group;
                background-color: #ddd;
                font-weight: bold;
                width: 100%;
                white-space: nowrap;
            }
            .rTableFoot {
                display: table-footer-group;
                font-weight: bold;
                background-color: #ddd;
            }
            .rTableBody {
                display: table-row-group;
            }

            /* ==========================================================================
                sticky notes styles
               ========================================================================== */
            #board {
                padding: 10px 3px 3px;
                margin-top: 4px;
                overflow-y: visible;
            }

            .note  {
                background-color: transparent;
                border: none;
                height: 100px;
                width: 100px;
                padding: 1px;
            }

            .note:hover {
                cursor: move;
            }
            .note.ui-draggable-dragging:nth-child(n) {
                box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.3);
                -webkit-transform: scale(1.125) !important;
                transform: scale(1.125) !important;
                z-index: 100;
                cursor: move;
                transition: -webkit-transform .150s;
                transition: transform .150s;
                transition: transform .150s, -webkit-transform .150s;
            }
            .note textarea {
                float: left;
                display: block;
                position: relative;
                padding: 2px;
                margin: 0 3px 3px 0;
                background: linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
                background-color: #FFFD75;
                box-shadow: 1px 1px 2px -2px rgba(33, 33, 33, 0.3);
                z-index: 1;
                resize: vertical horizontal;
                font-family: "Gloria Hallelujah";
                height: 100px;
                width: 100px;
            }
            .note textarea:focus {
                outline: none;
                border: none;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2) inset;
            }
            /*
            .note textarea.title {
                font-size: 24px;
                line-height: 1.2;
                color: #000000;
                height: 64px;
                margin-top: 20px;
            }
            .note textarea.cnt {
                min-height: 100px;
            }
            */

            /*
            .note:nth-child(2n) {
                background: #FAAACA;
            }
            .note:nth-child(3n) {
                background: #69F098;
            }
            */

            /* Button style  */
            .button {
                font: bold 12px Helvetica, Arial, sans-serif;
                color: #FFFFFF;
                padding: 2px;
                background: linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
                background-color: #00CC00;
                border-radius: 1px;
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 1px 2px 1px rgba(255, 255, 255, 0.3);
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
                text-decoration: none;
                transition: background .01s, -webkit-transform .150s;
                transition: transform .150s, background .01s;
                transition: transform .150s, background .01s, -webkit-transform .150s;
            }
            .button:hover {
                background-color: #00EE00;
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3), inset 0 -1px 2px -1px rgba(0, 0, 0, 0.5), inset 0 1px 2px 1px rgba(255, 255, 255, 0.3);
            }
            .button:active {
                background: linear-gradient(bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
                background-color: #00CC00;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 -1px 0 rgba(255, 255, 255, 0.3);
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 -1px 2px rgba(255, 255, 255, 0.3);
                outline: none;
            }
            .button.remove {
                position: absolute;
                top: 5px;
                right: 1px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #E01C12;
                text-align: center;
                line-height: 2px;
                padding: 2px;
                border-color: #B30000;
                font-style: 1.1em;
                font-weight: bolder;
                font-family: Helvetica, Arial, sans-serif;
            }
            .button.remove:hover {
                background-color: #EF0005;
            }

            body {
                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                background: #2c2c2c;
                color: #ddd;
                margin: 0;
                padding: 20px;
            }


            .apps-box {
                border: 1px solid #222;
                border-radius: 2px;
                padding: 2px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.6);
                margin: 0 0 8px 0;            /* left aligned */
                display: inline-block;         /* shrink-wrap to contents */
                width: -webkit-fit-content;    /* Safari */
                width: -moz-fit-content;       /* Firefox */
                width: fit-content;            /* modern */
                resize: both;        /* <-- makes the box resizable */
                background:linear-gradient(to bottom, #323232, #2a2a2a);
                background: lightgray;
                overflow-x:auto;                
            }

            .apps-title {
                font-size: 22px;
                font-weight: bold;
                color: #eee;
                margin-bottom: 3px;
                /*text-shadow: -1px -1px 1px #111, 1px 1px 2px #666;*/
            }

            .apps-toolbar {
                display: flex;
                flex-wrap: wrap;
                gap: 2px;
            }

            .menu-box {
                border: 1px solid #222;
                border-radius: 8px;
                padding: 5px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.6);
                margin: 0 0 16px 0;            /* left aligned */
                display: inline-block;         /* shrink-wrap to contents */
                width: -webkit-fit-content;    /* Safari */
                width: -moz-fit-content;       /* Firefox */
                width: fit-content;            /* modern */
                resize: both;        /* <-- makes the box resizable */
                background:linear-gradient(to bottom, #323232, #2a2a2a);
                background: darkgray;
            }


            .menu-title {
                font-size: 18px;
                font-weight: bold;
                color: #eee;
                margin-bottom: 6px;
                /*text-shadow: -1px -1px 1px #111, 1px 1px 2px #666;*/
            }

            /* Each menu group (button + dropdown) */
            .menu-item {
                position: relative;   /* anchor for dropdown */
                flex: 0 0 auto;
                font-size: 14px;
            }

            .main-box {
                background: #666;
                border: 1px solid #222;
                border-radius: 8px;
                padding: 5px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.6);
                margin: 0 0 16px 0;            /* left aligned */
                width: 1600px;
                height: 500px;
                overflow: auto;            /* <-- enables both horizontal & vertical scroll */
                min-width: 280px;    /* sensible limits */
                min-height: 200px;
                max-width: 100vw;    /* don’t let it break out of the viewport */
                max-height: 90vh;
            }

            .main-title {
                font-size: 18px;
                font-weight: bold;
                color: #eee;
                margin-bottom: 6px;
                /*text-shadow: -1px -1px 1px #111, 1px 1px 2px #666;*/
            }

            /* Left-align both panels */
            .apps-box, .menu-box, .main-box {
                margin-left: 0 !important;
                margin-right: 0 !important;
                /* keep some spacing below */
                margin-top: 0;
                margin-bottom: 8px;
                /* optional: cap width; remove if you want full-width */
                max-width: 2400px;
                resize: both;        /* <-- makes the box resizable */
            }

            /* Horizontal toolbar (no scroll, wraps to next line as needed) */
            .toolbar {
                display: flex;
                flex-wrap: wrap;     /* wrap instead of scrolling */
                gap: 10px 10px;
                overflow: visible;   /* ensure dropdowns are not clipped */
                white-space: normal; /* allow wrapping */
            }


            /* Steel button (main) */
            .steelButton {
                margin: 4px;
                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                display: inline-block;
                padding: 10px 18px;
                background: linear-gradient(to bottom, #666 0%, #444 100%);
                border: 2px solid #333;
                border-radius: 6px;
                color: #e0e0e0;
                font-size: 16px;
                font-weight: bold;
                text-decoration: none;
                text-align: center;
                text-shadow: -1px -1px 1px #222, 1px 1px 2px #aaa; /* chiseled effect */
                box-shadow:
                    inset 1px 1px 2px #999,
                    inset -1px -1px 2px #222,
                    2px 2px 4px rgba(0,0,0,0.5);
                cursor: pointer;
                transition: all 0.2s ease-in-out;
                user-select: none;
            }
            .steelButton:hover {
                background: linear-gradient(to bottom, #777 0%, #555 100%);
                color: #fff;
                box-shadow:
                    inset 1px 1px 2px #bbb,
                    inset -1px -1px 2px #333,
                    2px 2px 6px rgba(0,0,0,0.7);
            }
            .steelButton:active {
                background: linear-gradient(to bottom, #444 0%, #222 100%);
                box-shadow:
                    inset 2px 2px 4px #111,
                    inset -2px -2px 4px #666;
                transform: translateY(1px);
            }

            /* App button (main) */
            .appButton {
                margin: 2px;
                padding: 4px 6px;
                border: 2px solid #333;
                border-radius: 3px;
                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                display: inline-block;
                background: linear-gradient(to bottom, #888 0%, #666 100%);
                color: #e0e0e0;
                font-size: 12px;
                font-weight: bold;
                text-decoration: none;
                text-align: center;
                text-shadow: -1px -1px 1px #222, 1px 1px 2px #aaa; /* chiseled effect */
                box-shadow:
                    inset 1px 1px 2px #999,
                    inset -1px -1px 2px #222,
                    2px 2px 4px rgba(0,0,0,0.5);
                cursor: pointer;
                transition: all 0.2s ease-in-out;
                user-select: none;
            }
            .appButton:hover {
                background: linear-gradient(to bottom, #777 0%, #555 100%);
                color: #fff;
                box-shadow:
                    inset 1px 1px 2px #bbb,
                    inset -1px -1px 2px #333,
                    2px 2px 6px rgba(0,0,0,0.7);
            }
            .appButton:active {
                background: linear-gradient(to bottom, #444 0%, #222 100%);
                box-shadow:
                    inset 2px 2px 4px #111,
                    inset -2px -2px 4px #666;
                transform: translateY(1px);
            }

            .has-caret::after {
                content: " ▾";
                font-weight: normal;
                font-size: 0.9em;
                opacity: 0.9;
            }

            /* Dropdown panel (CSS-only show on hover/focus) */
            .dropdown {
                position: absolute;
                top: 100%;           /* flush with button — no gap to lose hover */
                left: 0;
                min-width: 180px;
                background: #3e3e3e;
                border: 1px solid #222;
                border-radius: 8px;
                box-shadow: 0 8px 18px rgba(0,0,0,0.7);
                padding-top: 6px;    /* visual spacing inside, not outside */
                padding-bottom: 6px;
                padding-left: 6px;
                padding-right: 6px;
                display: none;
                z-index: 9999;
            }

            /* Show on hover only */
            .menu-item:hover .dropdown {
                display: block;
            }

            /* Dropdown links */
            .dropdown a {
                display: block;
                margin: 6px 0;
                padding: 10px 12px;
                text-decoration: none;
                color: #e7e7e7;
                border: 1px solid #2a2a2a;
                border-radius: 6px;
                background: linear-gradient(to bottom, #5a5a5a 0%, #3d3d3d 100%);
                text-shadow: -1px -1px 1px #111, 1px 1px 1px #888;
                box-shadow:
                    inset 1px 1px 1px #8a8a8a,
                    inset -1px -1px 1px #1f1f1f;
                transition: filter 0.15s ease, transform 0.06s ease;
                white-space: nowrap;
            }
            .dropdown a:hover  {
                filter: brightness(1.12);
            }
            .dropdown a:active {
                transform: translateY(1px);
            }

            @media (max-width: 720px) {
                .steelButton {
                    padding: 10px 14px;
                    font-size: 15px;
                }
                .dropdown    {
                    min-width: 160px;
                }
            }

            fieldset {
                border: 1px solid #ccc; /* Customize your border */
                padding: 4px; /* Add padding around the content */
                margin: 2px; /* Add margin around the fieldset */
            }

            legend2 {
                background-color: white; /* Match the background of the parent */
                padding: 0 10px; /* Add padding around the text */
                font-weight: bold; /* Style your title text */
                color: #333; /* Set title text color */
            }

            .fieldset-content {
              display: block; /* Hide the content by default */
            }



            /* =============== Steel Tabs (drop-in overrides) =============== */
            :root{
                --steel-hi:#7d7d7d;     /* highlight */
                --steel-mid:#595959;    /* face */
                --steel-lo:#3b3b3b;     /* shadow */
                --steel-edge:#1f1f1f;   /* border */
                --steel-glint:#c9c9c9;  /* bevel */
                --tab-text:#e6e6e6;
            }

            /* Tab strip */
            .tab-box{
                display:flex;
                flex-wrap:wrap;
                gap:6px;
                align-items:flex-end;
                padding:6px 8px 0;
                background:transparent;
                border-bottom:1px solid var(--steel-edge);
            }

            /* Individual tabs (anchors inside .tab-box) */
            .tab-box a{
                position:relative;
                display:inline-block;
                padding:10px 16px;
                color:var(--tab-text);
                text-decoration:none;
                font-weight:700;
                border:2px solid var(--steel-edge);
                border-bottom:none;                       /* blends into the panel */
                border-top-left-radius:12px;
                border-top-right-radius:12px;
                background:linear-gradient(to bottom, var(--steel-hi), var(--steel-mid) 55%, var(--steel-lo));
                text-shadow:-1px -1px 1px #222, 1px 1px 2px var(--steel-glint); /* chiseled */
                box-shadow:
                    inset 1px 1px 2px var(--steel-glint),
                    inset -1px -1px 2px #222,
                    2px 2px 6px rgba(0,0,0,.55);
                transform:translateY(2px);                /* subtle “raised” before active */
                transition:all .18s ease-in-out;
                user-select:none;
                white-space:nowrap;
            }
            .tab-box a:hover{
                filter:brightness(1.08);
                box-shadow:
                    inset 1px 1px 2px #fff,
                    inset -1px -1px 2px #2a2a2a,
                    2px 3px 8px rgba(0,0,0,.65);
            }
            .tab-box a:active{
                transform:translateY(3px);
            }

            /* Active tab */
            .tab-box a.activeLink{
                background:linear-gradient(to bottom, #8a8a8a, #5f5f5f 60%, #3b3b3b);
                color:#fff;
                transform:translateY(0);                  /* sits flush with panel */
                z-index:2;
                box-shadow:
                    inset 2px 2px 3px #bdbdbd,
                    inset -2px -2px 3px #111,
                    0 2px 0 rgba(0,0,0,0);                  /* drop shadow removed to look “attached” */
            }

            /* Content panel to visually match the tabs */
            .tabcontent{
                border:1px solid var(--steel-edge);
                border-radius:12px;
                border-top-left-radius:0;                 /* lets the active tab be the top-left corner */
                background:linear-gradient(to bottom, #323232, #2a2a2a);
                background: #555;
                box-shadow:inset 0 0 12px rgba(0,0,0,.65), 0 8px 18px rgba(0,0,0,.5);
                color:#e0e0e0;
                padding:12px;
            }

            /* Make the panel tuck under the active tab’s border nicely */
            .tab-box + .tabcontent{
                margin-top:-1px;
            }

            /* Optional: smaller, secondary tab strip variant if you use .tab-box2/.tab-box3 */
            .tab-box2 a, .tab-box3 a{
                all:unset;
                display:inline-block;
                padding:8px 12px;
                border:2px solid var(--steel-edge);
                border-bottom:none;
                border-top-left-radius:10px;
                border-top-right-radius:10px;
                background:linear-gradient(to bottom, var(--steel-hi), var(--steel-mid));
                color:var(--tab-text);
                text-shadow:-1px -1px 1px #222, 1px 1px 2px var(--steel-glint);
                box-shadow:inset 1px 1px 2px var(--steel-glint), inset -1px -1px 2px #222;
            }
            .tab-box2 a.activeLink, .tab-box3 a.activeLink{
                background:linear-gradient(to bottom, #8a8a8a, #5f5f5f);
                color:#fff;
            }


            /* === Tabs: keep active taller/higher + red text (drop-in overrides) === */

            /* Give all tabs a bottom border so height stays consistent */
            .tab-box a,
            .tab-box2 a,
            .tab-box3 a{
                box-sizing: border-box;
                padding: 12px 18px;                    /* slightly taller baseline */
                border-bottom: 2px solid var(--steel-edge, #1f1f1f);
                transform: translateY(2px);            /* non-active sit a bit lower */
            }

            /* Active tab: raise it, keep full height, and make text red */
            .tab-box a.activeLink,
            .tab-box2 a.activeLink,
            .tab-box3 a.activeLink{
                color: #ff3b3b;                        /* red label */
                border-bottom-color: transparent;      /* visually “attached” to panel, no shrink */
                transform: translateY(-1px);           /* sits higher than neighbors */
                padding-top: 14px;                     /* a touch taller for emphasis */
                padding-bottom: 12px;
            }

            /* Tuck the panel up under the raised active tab */
            .tab-box + .tabcontent,
            .tab-box2 + .tabcontent,
            .tab-box3 + .tabcontent{
                margin-top: -3px;
            }

            /* ── Apps popup trigger button ── */
            .appsToggleBtn {
                padding: 3px 10px;
                background: #444;
                color: #ddd;
                border: 1px solid #555;
                border-radius: 4px;
                cursor: pointer;
                font-size: 13px;
                font-family: Arial, sans-serif;
            }
            .appsToggleBtn:hover {
                background: #555;
                color: #fff;
            }

            /* ── Apps floating popup ── */
            .appsPopup {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 9999;
                background: #2a2a2a;
                border: 1px solid #555;
                border-radius: 6px;
                padding: 6px;
                box-shadow: 0 6px 16px rgba(0,0,0,0.6);
                min-width: 120px;
            }

            /* ── Tighten App Menu vertical space only ── */
            .menu-box {
                padding: 2px 5px !important;
                margin-bottom: 4px !important;
            }
            .menu-box fieldset {
                padding-top: 2px !important;
                padding-bottom: 2px !important;
            }