html, body
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    box-sizing: border-box;
    font-family: 'Arial';
}

#menubar {
    height: 22px;
    background-color: #bab6d8;
    padding: 4px;
    border-bottom: 2px solid #757575;
    display:table;
    
    display:flex;
    align-items:center;
}

canvas {
    background-color: #fafafa;
    outline: none;
}

td, th {
    font-size: 13px;
    font-weight: normal;
}

.flexgrow {
    flex-grow: 1;
}

.flexnogrow {
    flex-grow: 0;
}

.ih {
    display:none;
}

.ih2 {
    visibility: hidden;
}

.it {
    opacity: 0;
}

.panel {
    /*padding: 6px;*/
}

.property-input-missing {
    background-color: #ffdddd;
}

.property-input-invalid {
    background-color: #ffdddd;
}

.property-input-optional {
    background-color: #ebebff;
}

.property-input-ok {
    background-color: #edffed;
}

.panel-type-select {
    background-color: #a8c4ef;
    padding: 5px;
    /*margin-bottom: 6px;*/
}

.panel-content {
    padding: 6px;
    height: 100%;
    overflow: scroll;
}

.main-menu-header {
    text-align: center;
    font-weight: bold;
}

.center {
    text-align: center;
}

.panel-header {
    text-align: center;
    font-weight: bold;
    margin-bottom: 6px;
}

.panel-subheader {
    display: inline-block;
    font-weight: bold;
    margin-top: 6px;
    margin-bottom: 6px;
}

#doc-title-text {
    vertical-align: top;
    line-height: 22px;
}

.document-title-name-clean {
    color: #155a00;
}

.document-title-name-dirty {
    color: #e10000;
}

.io-header {
    font-weight: bold;
}

.io-prop {
    padding: 4px;
    margin-bottom: 6px;
}

.io-select {
    padding: 6px 0px 6px 10px;
}

.io-pins {
    padding-left: 16px;
}

.activepin-available {
    color: #000000;
}

.activepin-inuse {
    color: #00AA00;
    font-weight: bold;
}

.activepin-warn {
    color: #FF7700;
    font-weight: bold;
}

.activepin-ng {
    color: #FF0000;
    font-weight: bold;
}

.export-textarea {
    height: 60%;
    width: 100%;
}

.relay_server_label {
    padding: 4 0 4 0;
}

.relay_server_status {
    /*text-align: center;*/
    font-weight: bold;
    /*margin-top: 6px;  */
    /*margin-bottom: 6px;*/
    padding: 4 6 4 6;
    border-radius: 5px;
}

.relay_connected_status {
    vertical-align: middle;
}

.relay_ok {
    background-color: #EEFFEE;
    color: #00BB00;
}

.relay_ng {
    background-color: #FFEEEE;
    color: #BB0000;
}

.availableportsarea {
}

.availableportslist {
    /*padding: 4px;
    background-color: #fcfcfc;*/
}

.port_active {
    background-color: #EEFFEE;
    font-weight: bold;
    color: #00BB00;
}

.bootloader_port_active {
    background-color: #EEEEFF;
    font-weight: bold;
    color: #4141FF;
}

.availableportsheader {
    font-weight: bold;
}

.availableportlistinner {
    padding: 4px;
}

.availableportlistinner_nodevices {
    padding: 4px;
    color: gray;
    text-align: center;
}

.selected_com_port {
    
}

.authstatus {
    color: #000000;
}

.failurefeedback {
    border-radius: 4px;
    background-color: #FFEEEE;
    font-weight: bold;
    color: #BB0000;
    padding: 3px;
}

.uploadsucceeded {
    border-radius: 4px;
    background-color: #e5fff4;
    font-weight: bold;
    color: #00bb28;
    padding: 4px;
}

.uploading {
    border-radius: 4px;
    background-color: #ffff7d;
    padding: 3px;
}

.savingdoc {
    border-radius: 4px;
    background-color: #ffff7d;
    padding: 3px;
}

.savingdocsucceeded {
    border-radius: 4px;
    background-color: #e5fff4;
    font-weight: bold;
    color: #00bb28;
    padding: 3px;
}

.savingdocfailed {
    border-radius: 4px;
    background-color: #FFEEEE;
    font-weight: bold;
    color: #BB0000;
    padding: 3px;
}


.deviceimporting {
    background-color: #fecfff;
    padding: 4px;
}

.firmwareflashing {
    background-color: #83ff50;
    padding: 4px;
}

.firmwareflashingsummary {
    text-align: center;
    padding: 6;
}

.configstats {
    padding: 4px;
    color: #090;
}

.fromdevice {
    color: #090;
}

.loading-div {
    line-height: 24px;
    margin-left:4px;
}

.loading-swirl {
    vertical-align: middle;
}

.valigntop {
    vertical-align: top;
}

.text-ng {
    color: #FF0000;
}

.text-ng2 {
    color: #bb0000;
}

.text-ok {
    color: #00BB00;
}

.node_add {
    margin: 6 0 6 0;
    padding: 4px;
    cursor: pointer;
    display: flex;
    border-radius: 5px;
}

.node_add:hover {
    border: 1px solid gray;
    padding: 3px;
}

.node_filter {
    margin: 6px;
    padding: 4px;
    text-align: center;
    cursor: pointer;
}

.node_filter:hover {
    border: 2px solid #666;
    /*padding: 3px;*/
}

.node_filter_unselected {
    background-color: #fee;
    border: 2px solid #fff;
}

.node_filter_selected {
    background-color: #cfc;
    border: 2px solid black;
}

.nodeFilterTextInput {
    width: 100%;
    
}

.panel_bottom_spacing {
    height: 100px;
}

.logportsetup {
    background-color: #fbfbfb;
    padding: 3px;
    margin-bottom: 5px;
}

.badlogportdef {
    color: red;
}

.badinputfield {
    background-color: #ffeeee;
}

.lognodesresult {
    color: #009020;
}

.diagnostic_subheading {
    font-weight: bolder;
    padding: 5px;
}

.diagnostic_pin_assignment {
    padding: 5px;
}

.diagnostic_pin_assignment table {
    /*width: 10%;*/
    margin-left: 5px;
    margin-bottom: 10px;
    border-spacing: 0;
}

.pinassignment {
    border: 1px solid #eeeeee;
    border-spacing: 0;
}

.diagnostic_pin_assignment th {
    background-color: #eeeeee;
    padding: 3px;
}

.inusepins td {
    border: 1px solid #eeeeee;
    color: #006700;    
    padding: 4px;
}

.confictingpins td {
    border: 1px solid #eeeeee;
    color: #bb0000;
    padding: 4px;
}


.diagnostic_node_check {
    padding: 5px;
}

.diagnostic_node_check table {
    width: 10%;
    margin-left: 5px;
    margin-bottom: 10px;
    border-spacing: 0;
}

.nodechecknodetitle {
    background-color: #eeeeee;
    cursor: pointer;
}

.nodechecknodetitle:hover {
    border: 1px solid black;
}

.diagnostic_node_check td {
    white-space: nowrap;
    border: 1px solid #dddddd;
    padding: 4px;
}

.nodecheckmissing {
    background-color: #ffe1cf;
}

.nodecheckinvalid {
    background-color: #ffb2b2;
}

.nodecheckrequires {
    background-color: #ffb5d4;
}

.diagnostic_samename {
    padding: 5px;
}

.diagnostic_samename_entry {
    padding-bottom: 12px;
}

.clicktoselectnode {
    cursor: pointer;
    border: 1px solid #dddddd;
    background-color: #fefaff;
    padding: 4px;
}

.clicktoselectnode:hover {
    border: 1px solid black;
    padding: 4px;
}

.showallfeatures {
    margin-bottom: 10px;
}

.node_add_not_known {
    color: #d00;
    background: repeating-linear-gradient(
        -39deg,
        transparent 0px,
        transparent 15px,
        rgba(255, 0, 0, 0.25) 15px,
        rgba(255, 0, 0, 0.25) 18px
    );
}

.node_add_not_usable {
    color: #666;
    background: repeating-linear-gradient(
        -39deg,
        transparent 0px,
        transparent 15px,
        rgba(0, 0, 0, 0.1) 15px,
        rgba(0, 0, 0, 0.1) 18px
    );
}

.node_add_text {
    font-size: 14px;
}

.progressBar {
    height: 6px;
    border: 1px solid gray;
}

.progressBarProgress {
    height: 6px;
    background-color: #00c900;
}

.firmwareflashingstatuspanel {
    background-color: #f9f9f9;
    margin: 5px;
    padding: 5px;
}

.errorline {
    background-color: #FFEEEE;
    font-weight: bold;
    color: #BB0000;
    padding: 4px;
}

.gamepad-slider {
    width: 100px;
    height: 2px;
    border:1px solid gray;
}

.gamepad-slider-pip {
    width: 8px;
    height: 10px;
    background-color:red;
    position:relative;
    top: -4px;
}

.gamepad-button-cell {
    width: 24px;
    text-align: center;
}
 
.gamepad-button {
    width: 16px;
    height: 16px;
    border:1px solid gray;
    margin-left: 4px;
    margin-right: 4px;
}

.warning-icon {
    vertical-align: middle;
    width: 20px;
}

.panel-header-sticky {
    padding: 6px;
    border-bottom: 1px solid #c5c5c5;
}

.help-icon {
    vertical-align: middle;
    width: 18px;
    cursor: pointer;
}

.help_node_title {
    margin-left: 4px;
    margin-top: 8px;
    font-weight: bold;
    font-size: 1.2em;
}

.tutorial-checkmark {
    vertical-align: middle;
    height: 36px;
}

.tutorial-loading {
    vertical-align: middle;
    height: 18px;
}

.help_node_description {
    margin-left: 6px;
    color: #222;
}

.help_node_properties_heading {
    margin: 14px 3px 3px 3px;
    font-weight: bold;
    font-size: 1.1em;
}

.help_node_properties_prop {
    margin: 6px 3px 3px 9px;
    color: #222;
    padding: 3px;
    /*border: 1px solid #ddd;
    border-radius: 2px;*/
}

.help_node_properties_prop_heading {
    font-weight: bold;
    color: #006;
}

.help_node_properties_prop_body {
    display: block;
    margin: 2px 0px 0px 6px;
    color: #222;
}

.help_paragraph {
    margin: 8px;
}

.help_prop_desc_paragraph {
}

.help_prop_options_paragraph {
    margin-left: 6px;
}

.help_node_property_optional {
    margin-left: 6px;
    color: #6d6e9d;
}

.help_node_pins {
    margin: 16px 3px 3px 3px;
}

.help_node_pins_heading {
    font-weight: bold;
    color: #006;
}

.help_node_pins_body {
    color: #060;
    margin: 0px 0px 0px 9px;
}

.help_node_properties_prop_options {
    display: inline-block;    
    margin: 3px 3px 3px 12px;
}

.help_node_properties_prop_options_option {
    
}

.help_node_properties_prop_options_option_name {
    color: #060;
    font-weight: bold;
}

.help_node_properties_prop_options_option {
    display: inline-block;
    margin: 6 0 0 0;
}

.help_node_property_image {
    display: block;
    margin: 10px;
}

.item-property-help-mouseover {
    padding: 1px;
}

.item-property-help-mouseover:hover {
    background-color: #fafafa;
}

.item-property-help-content {
    margin: 10 5 0 5;
    background-color: #fafafa;
}

.activebutton {
    background-color: #adecff;
}

.checkbox-row {
    display: inline-flex;
    align-items: center; /* vertical alignment */
}

.privatedocs .docloadlinkdiv {
    /*background-color: #ebffeb;*/
}

/*.publicdocs .docloadlinkdiv {
    background-color: #f4f4ff;
}*/

.docloadlinkrow {
    display: flex;
    font-size: 14px;
    padding: 4px;
    margin: 0px 0px 4px 0px;
    cursor: pointer;
    border-radius: 5px;
    text-align: left;
}

.docloadlink {
    flex: 1;           /* take all remaining space */
    min-width: 0;
}

.doc_load_name {
    
}

.doc_mine {
    /*background-color: #ebffeb;*/
    background-color: #e2feff;
}

.doc_public {
    background-color: #ebebff;
}

.docloadlinkrow:hover {
    padding: 3px;
    border: 1px solid gray;
}

.doc_star {
    flex: 0 0 auto;    /* stay only as wide as its content */
    width: 16px;
    background-repeat: no-repeat;
}

.doc_star_empty {    
    background-image: url("image/star_empty.png");    
    opacity: 0.33;
    transition: opacity 0.2s ease;
}

.doc_star_filled {
    background-image: url("image/star_filled.png");
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.doc_star_loading {
    background-image: url("image/loading.gif");
}

.doc_star_empty:hover {
    opacity: 1;
}

.doc_star_filled:hover {
    opacity: 1;
}

.doc_public_owner {
    font-size: 0.8em;
    color: #1e7e00;
}

.usbclassstatus {
    color: #090;
}

.usbclasspowercycletip {
    color: #a300e3;
}

.usbclassnovcptip {
    color: #b00;
}

.usbClassSelect {
    margin-top: 8px;
    margin-bottom: 8px;
}

.rebootdiv {
    padding-bottom: 15px;
    color: #a300e3;
}

.rebootdevicebuttoninfo {
    color: gray;
    font-size: 0.9em;
}

.gray {
    color: gray;
    font-size: 0.9em;
}

.popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);    
    display: flex;
    align-items: flex-start;      /* top */
    justify-content: flex-end;    /* right */    
    padding: 16px;                /* offset from edges */
    z-index: 10000;
}

.popup-panel {
    background: white;
    border-radius: 4px;
    padding: 12px;
    min-width: 100px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
  
.popup-title {
    font-weight: bold;    
}

.popup-small-pad {
    margin: 3px;
}

.button-small-pad {
    margin: 3px;
}
  
.requestbootloaderstatus {
    padding: 2px;
    color: #090;
}
  
#empty-tab {
    background-color: #f4f2ff;
    text-align: center;
}

#outer {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#table-container {
    height:100%;
    width:100%;
    display:table;
}

#table-cell {
    vertical-align:middle;
    height:100%;
    display:table-cell;
    font-size: 18px;
}

.jqx-tabs-title {
    font-size: 14px;
    padding-top: 0;
    padding-left: 9;
    padding-right: 9;
    border-radius: 6px 6px 0px 0px;
}

.jqx-tabs-close-button {
    margin-top: 1px !important; 
}

.tab-close-button {
    height: 16px;
    width: 16px;
    background-image: url(image/close.png);
    background-repeat: no-repeat;
    padding-left: 6px;
    vertical-align: middle;
}

.tab-close-button:hover {
    background-image: url(image/close-hover.png);
}

.jqx-tabs-titleContentWrapper {
    padding-top: 6px;
}

.tab-new-button {
    height: 16px;
    width: 16px;
    background-image: url(image/new.png);
    background-repeat: no-repeat;
    padding-left: 6px;
    vertical-align: middle;
}

.config-uneditable {
    color: #7c7c7c;
}

.config-name-input {
    width: 100%;
}

.config-desc-input {
    width: 100%;
}

.config-invalid-value {
    background-color: #ffdddd;
}

.saveconfigresult {
    min-height: 32px;
}

.needloginsection {
    
}

.library-count {
    text-align: center;
    min-height: 16px;
    padding-top: 4px;
}

.librarylist {
    text-align: center;
}

.librarylist_waiting {
    padding-top: 20px;
}

.librarylist_entries {
    
}

.library_page {
    padding: 1 5 1 5;
    margin-left: 4px;
    background-color: #bfbcff;
    border: 1px solid black;
}

.library_page_linked {
    cursor: pointer;
    background-color: #edecff;
    padding: 2 6 2 6;
    border: none;
}

.library_page_linked:hover {
    background-color: #e4b2ff;
    border: 1px solid gray;
    padding: 1 5 1 5;
}

.doclist {
    /*padding: 6px;*/
}

.load-doc-container {
    position: relative;
}

.doc-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;  
    border: 1px solid blue;
    border-radius: 5px;
    background-color: #fff8e0;
}

.load-doc-container.loading .doc-loading {
    display: flex;
}

.loopstatsinfo {
    color: #6a6a6a;
}