body{ margin:0; } .NSDJS .column { float: left; position: relative; /*border-style: solid;*/ /*border-width: 1px;*/ height: 100%; /* overflow: scroll; */ overflow: visible; } .NSDJS .columnInner { height: 100%; position: relative; /* background: repeating-linear-gradient( to right, white, white 5px, #fcfcfc 5px, #fcfcfc 10px ); */ } .NSDJS .columnInnerMiddle, .columnInnerBottom, .rowInnerMiddle, .rowInnerBottom { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .NSDJS .columnInnerBottom, .rowInnerBottom { top: 100%; left: 0; -webkit-transform: translate(0%, -100%); transform: translate(0%, -100%); } .NSDJS .rowInner, .rowInnerMiddle, .rowInnerBottom{ width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; /* background: linear-gradient( to bottom, white 5px, #fcfcfc 5px ); background-size: 100% 10px; */ } .NSDJS .rowMenu { position: absolute; right: 50%; margin-right: -50px; bottom: -21px; cursor: pointer; z-index: 10; } .NSDJS .columnMenu { position: absolute; right: -27px; bottom: 50%; top: 50%; margin-top: -54px; cursor: pointer; z-index: 10; } .NSDJS .left { float: left; } .NSDJS .right { float: right; } .NSDJS .center { float: right; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; left: -50%; border: 3px solid green; } /* Clear floats after the columns */ .NSDJS .row{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; position: relative; /* border-style: solid; border-width: 1px; */} .NSDJS .row:after { content: ""; display: table; clear: both; } .NSDJS .sticky { position: fixed; top: 0; right:0; left: 0; /* padding-left: 80px; */ z-index: 1000; } /* .NSDJS .sticky + .content { padding-top: 200px; } */ .NSDJS .middle { /* margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(50%, 0%); */} .NSDJS .clearfix:before, .NSDJS .clearfix:after { display: table; content: ""; } .NSDJS .clearfix:after { clear: both; } /* /// Overlay - Grid /// */ .NSDJS .overlay{ position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; /*background-color: rgba(0,0,0,0.5); */ } /* /// Overlay - Grid /// */ .NSDJS .textfield { margin: 0px; padding-top: 8px; -webkit-box-sizing : border-box; box-sizing : border-box; /* background-color: #fbfbfb; */ } .NSDJS .textfield label { font-size: 1em; } .NSDJS .button{ height: 32px; /* font-size: 1.2em; */ line-height: 1.2em; } .NSDJS .iconButton{ height: 32px; padding: 4px 10px; color:black; border:none; cursor: pointer; } .NSDJS .iconButton:hover{ background-color:#2196F3; color:white; } .NSDJS input.textfield { font-size: 1em; /* padding: 0px 0px; */ padding: 0px 0px 8px 6px; } .NSDJS .textareaDiv { /* padding: 6px 6px 1px 6px; */ padding: 0; margin:0px; } .NSDJS .textarea { font-size: 1em; resize:none; /* background-color: #fbfbfb; */ /* padding:5px; */ } .NSDJS .njs-label{ line-height: 40px; height: 40px; padding: 0; font-size: 1em; -webkit-box-sizing : border-box; box-sizing : border-box; /* background-color: white; */ } .NSDJS .checkbox{ line-height: 28px; padding: 0px; /* font-size: 1.2em; */ -webkit-box-sizing : border-box; box-sizing : border-box; } .NSDJS .select{ background: none; padding: 6px 10px; border: none; } /* /// Button /// */ .NSDJS a.button3{ display:inline-block; padding:0.3em 1.2em; /*margin:0 0.3em 0.3em 0;*/ border-radius:2em; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration:none; font-family:'Roboto',sans-serif; font-weight:300; color:#FFFFFF; background-color:#4eb5f1; text-align:center; -webkit-transition: all 0.2s; transition: all 0.2s; } .NSDJS a.button3:hover{ background-color:#4095c6; } /* /// Button /// */ .tooltip { position: relative; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 20px; margin: 20px 0 0 0; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } /* Resizable */ .resizers.resizer{ width: 10px; height: 10px; background: white; border: 3px solid #4286f4; position: absolute; z-index: 100; } .resizers.resizer.bottom-middle { right: 50%; margin-right: -5px; bottom: -5px; cursor: ns-resize; opacity: 0.3; } .resizers.resizer.right-middle { right: -5px; bottom: 50%; top: 50%; border:3px solid #f4429c; border-radius: 50%; /*magic to turn square into circle*/ margin-top: -5px; cursor: ew-resize; opacity: 0.3; } /* .resizers .resizer.top-left { left: -5px; top: -5px; cursor: nwse-resize; } .resizers .resizer.top-right { right: -5px; top: -5px; cursor: nesw-resize; } .resizers .resizer.bottom-left { left: -5px; bottom: -5px; cursor: nesw-resize; } .resizers .resizer.bottom-right { right: -5px; bottom: -5px; cursor: nwse-resize; } */ /* Resizable */ /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1000; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 400px; top: 30%; bottom: 70%; position: relative;} /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } /* ICONS */ .njs-undo { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 14px; height: 14px; border: 2px solid; border-left-color: transparent; border-radius: 100px } .njs-undo::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 6px; height: 6px; border-top: 2px solid; border-left: 2px solid; top: -3px; left: -1px; -webkit-transform: rotate(-68deg); transform: rotate(-68deg) } .njs-redo { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 14px; height: 14px; border: 2px solid; border-right-color: transparent; border-radius: 100px } .njs-redo::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 6px; height: 6px; border-top: 2px solid; border-right: 2px solid; top: -3px; right: -1px; -webkit-transform: rotate(68deg); transform: rotate(68deg) } .njs-erase { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 22px; height: 18px } .njs-erase::after, .njs-erase::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute } .njs-erase::before { width: 6px; height: 14px; border-bottom: 4px solid transparent; border-radius: 1px; -webkit-box-shadow: 0 0 0 2px, inset 0 -2px 0 0; box-shadow: 0 0 0 2px, inset 0 -2px 0 0; left: 7px; top: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .njs-erase::after { background: currentColor; width: 22px; height: 2px; bottom: 0; border-radius: 20px } .njs-image { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 20px; height: 16px; overflow: hidden; -webkit-box-shadow: 0 0 0 2px; box-shadow: 0 0 0 2px; border-radius: 2px } .njs-image::after, .njs-image::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; border: 2px solid } .njs-image::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 3px; width: 16px; height: 16px; top: 9px; left: 6px } .njs-image::before { width: 6px; height: 6px; border-radius: 100%; top: 2px; left: 2px } .njs-add { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 22px; height: 22px; border: 2px solid; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); border-radius: 22px } .njs-add::after, .njs-add::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 10px; height: 2px; background: currentColor; border-radius: 5px; top: 8px; left: 4px } .njs-add::after { width: 2px; height: 10px; top: 4px; left: 8px } .njs-add:hover { color: white; background-color:#2196F3; } .njs-add-r { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 22px; height: 22px; border: 2px solid; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); border-radius: 4px } .njs-add-r::after, .njs-add-r::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 10px; height: 2px; background: currentColor; border-radius: 5px; top: 8px; left: 4px } .njs-add-r::after { width: 2px; height: 10px; top: 4px; left: 8px } .njs-text { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 9px; height: 2px; background: currentColor; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); border-radius: 3px; -webkit-box-shadow: -2px 8px 0 0, 2px 8px 0 0; box-shadow: -2px 8px 0 0, 2px 8px 0 0 } .njs-text.top { top:10px; } .njs-text::after, .njs-text::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; border-radius: 3px; width: 2px; height: 14px; background: currentColor; top: -8px } .njs-text::before { -webkit-transform: rotate(25deg); transform: rotate(25deg); left: 1px } .njs-text::after { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); right: 1px } .njs-number { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 18px; height: 18px } .njs-number::before { -webkit-box-shadow: -2px 10px 0, 2px 10px 0; box-shadow: -2px 10px 0, 2px 10px 0; } .njs-number::after, .njs-number::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 10px; height: 2px; background: currentColor; border-radius: 5px; top: 8px; left: 4px } .njs-number::after { width: 2px; height: 10px; top: 4px; left: 8px } .njs-textfield { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 26px; height: 10px; border: 2px solid; border-radius: 2px } .njs-textfield.top { top:10px; } .njs-textfield::after, .njs-textfield::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 2px; height: 2px; border-radius: 10px; background: currentColor; top: 2px; right: 2px } .njs-textfield::before { right: 6px } .njs-textarea { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 20px; height: 14px; border: 2px solid transparent } .njs-textarea.top { top:8px; } .njs-textarea::after, .njs-textarea::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 2px; border-radius: 3px; background: currentColor } .njs-textarea::before { -webkit-box-shadow: 0 4px 0 0; box-shadow: 0 4px 0 0; top: 0; width: 16px } .njs-textarea::after { width: 10px; bottom: 0 } .njs-checkbox { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 22px; height: 22px; border: 2px solid; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); border-radius: 4px } .njs-checkbox::after { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 3px; top: -1px; width: 6px; height: 10px; border-width: 0 2px 2px 0; border-style: solid; -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .njs-select { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 22px; height: 20px; border: 2px solid; border-radius: 3px } .njs-select::after, .njs-select::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 2px; height: 2px; background: currentColor; top: 3px; left: 3px; -webkit-box-shadow: 0 4px 0, 0 8px 0; box-shadow: 0 4px 0, 0 8px 0 } .njs-select::after { border-radius: 3px; width: 8px; left: 7px } .njs-image { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 20px; height: 16px; overflow: hidden; -webkit-box-shadow: 0 0 0 2px; box-shadow: 0 0 0 2px; border-radius: 2px } .njs-image.top { top:4px; } .njs-image::after, .njs-image::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; border: 2px solid } .njs-image::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 3px; width: 16px; height: 16px; top: 9px; left: 6px } .njs-image::before { width: 6px; height: 6px; border-radius: 100%; top: 2px; left: 2px } .njs-table { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); border: 2px solid; border-radius: 3px; width: 20px; height: 14px } .njs-table.top { top:6px; } .njs-table::after, .njs-table::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; background: currentColor } .njs-table::after { width: 2px; height: 8px; bottom: -2px; left: 4px } .njs-table::before { width: 20px; height: 2px; left: -2px; top: 4px } .njs-assign { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 6px; height: 6px; background: currentColor; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); border-radius: 100px } .njs-assign::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 12px; height: 12px; -webkit-box-shadow: -5px -5px 0 -3px, 5px 5px 0 -3px, 5px -5px 0 -3px, -5px 5px 0 -3px; box-shadow: -5px -5px 0 -3px, 5px 5px 0 -3px, 5px -5px 0 -3px, -5px 5px 0 -3px; left: -3px; top: -3px } .njs-assign:hover { color: white } .njs-close { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 22px; height: 22px; border: 2px solid transparent; border-radius: 40px } .njs-close::after, .njs-close::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 16px; height: 2px; background: currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 5px; top: 8px; left: 1px } .njs-close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .njs-close-o { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(0.9); -webkit-transform: scale(var(--ggs,0.9)); transform: scale(0.9); transform: scale(var(--ggs,0.9)); width: 22px; height: 22px; border: 2px solid; border-radius: 40px; } .njs-close-o::after, .njs-close-o::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 12px; height: 2px; background: currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 5px; top: 8px; left: 3px } .njs-close-o::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .njs-close-o:hover { color: white } .njs-arrow-up { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 22px; height: 22px } .njs-arrow-up::after, .njs-arrow-up::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 4px } .njs-arrow-up::after { width: 8px; height: 8px; border-top: 2px solid; border-left: 2px solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 7px } .njs-arrow-up::before { width: 2px; height: 16px; left: 10px; background: currentColor } .njs-arrow-up:hover { color: white } .njs-square { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 22px; height: 22px; border: 2px solid; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); border-radius: 4px } .njs-square2 { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; width: 18px; height: 18px; border: 1px solid; } .njs-square2:hover { color: white } .njs-reset{ display: inline-block; vertical-align: middle; position: relative; font-style: normal; color: currentColor; text-align: left; text-indent: -9999px; direction: ltr; width: 26px; height: 26px; border-width: 2px; border-style: solid; border-radius: 50%; margin: 4px; border-left-color: transparent; } .njs-reset::before { content: ''; pointer-events: none; position: absolute; width: 0; height: 0; left: -6px; bottom: 0; border-width: 5px; border-style: solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .njs-reset::after { content: ''; pointer-events: none; } /* .njs-minus { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs,1)); width: 16px; height: 2px; background: currentColor; border-radius: 10px } */ .njs-remove { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); width: 22px; height: 22px; border: 2px solid; border-radius: 4px } .njs-remove::before { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 10px; height: 2px; background: currentColor; border-radius: 5px; top: 8px; left: 4px } .njs-remove:hover { color: white } .njs-seperator-horizontal { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); height: 16px; width: 18px; border-top: 1px solid; border-bottom: 1px solid; } .njs-seperator-horizontal::after { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 4px; width: 18px; background: currentColor; top: 5px; } .njs-seperator-horizontal:hover { color: white } .njs-seperator-vertical { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; -webkit-transform: scale(1); -webkit-transform: scale(var(--ggs,1)); transform: scale(1); transform: scale(var(--ggs,1)); height: 18px; width: 18px; border-left: 1px solid; border-right: 1px solid } .njs-seperator-vertical::after { content: ""; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 18px; width: 4px; background: currentColor; right: 6px; } .njs-seperator-vertical:hover { color: white } /*# sourceMappingURL=/styles.ce6a91e9.css.map */