:root {
    --toolbar-header-h: 50px;
    --submenu-h: 150px;
    --input-list-h: 150px;
    --tabbar-h: 30px;
}

/* body { */
/*     background-color: rgb(21,21,21); */
/*     color: rgba(255,255,255, 0.7); */
/*     /\* background-color: white; *\/ */
/*     font-family: Montserrat, Helvetica; */
/*     margin: 0; */
/*     padding: 0; */
/*     height: 100vh; */
/*     width: 100%; */
/*     font-size: 0.8em; */
/* } */

#WorkflowersBoard {
    /* padding: 20px; */
    /* height: 90vh; */
    width: 100%;
    height: 100%;

    box-sizing: border-box;
}

#WorkflowersBoard input[type=text],
#WorkflowersBoard input[type=number],
#WorkflowersBoard input[type=color]
{
    color: white;
    background-color: rgba(0,0,0,0.1);
    border: 2px groove rgba(100, 100, 100, 0.9);
    border-radius: 3px;
    box-shadow: 1px 1px 10px black inset;
    padding: 2px;
    margin: 2px;
    
    box-sizing: border-box;
}

#WorkflowersBoard input[type=color] {
    padding: 0 !important;
    height: 30px;
    width: 30px;
    border: 0;
    box-shadow: none;
}

#WorkflowersBoard #workbench {
    /* display: table-cell; */
    position: relative;
    
    width: 80%;
    height: inherit;
    background-color: #D9D9D9;
    border: 1px solid black;
    z-index: 60;
    box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.2) inset;
    
    box-sizing: border-box;
}

#WorkflowersBoard #workflowers {
    width: 100%;
    display: flex;
    height: inherit;
    border: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.2);
    background-color: rgb(60, 62, 68);
    /* background-color: rgb(220, 220, 200); */
    
    /* padding: 5px; */
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    box-sizing: border-box;
}

#WorkflowersBoard .toolbar {
    display: flex;
    flex-direction: column;
    
    width: 20%;
    height: inherit;
    padding: 10px;
    z-index: 50;

    box-sizing: border-box;
    /* margin-left: 100px; */
    /* border: 3px solid rgba(173, 181, 199, 0.7); */
    /* background-color: rgb(153,153,153); */ /* , 0.5 */
    /* box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.2); */
    /* border-radius: 15px 15px 15px 15px; */
}

#WorkflowersBoard .toolbar_header {
    /* margin-top: 10%; */
    height: var(--toolbar-header-h);
}

#WorkflowersBoard .toolbar .toolbar_header:first-child {
    margin-top: 0;
}

#WorkflowersBoard hr {
    display: none;
    /* margin-bottom: 5%; */
}

#WorkflowersBoard .toolbar_header .tableView-cell {
    text-align: right;
    vertical-align: bottom;
}

#WorkflowersBoard .toolbar_header .tableView-cell:first-child {
    text-align: left;
}

#WorkflowersBoard .toolbar_header img {
    /* margin: 5px 5px 0 0; */
}
#WorkflowersBoard .toolbar_header b {
    font-size: 1.2em;
    font-weight: bold;
}

#WorkflowersBoard .menudynamic {
    /* height: calc(100% - var(--toolbar-header-h) - var(--submenu-h)); */
    padding: 5px;
    box-sizing: border-box;
}

#WorkflowersBoard .menudynamic > * {
    margin: 10px 0;
}

#WorkflowersBoard .toolbar h3 {
    padding: 5px 0 5px 0;
    margin: 0;
}

#WorkflowersBoard ul {
    padding: 0;
    list-style-type: none;
}

#WorkflowersBoard .showgrid {
    background-image: url('grid.png');   
}

#WorkflowersBoard #workflowers .box {
    display: flex;
    
    position: absolute;
    width: 50px;
    height: 50px;
    /* line-height: 50px; */
    /* text-align: center; */

    align-items: center;
    justify-content: center;
    
    border: 1px solid black;
    background-color: white;
    color: black;
    z-index: 40;
    border-radius: 90px;
    font-size: 0.8em;
    cursor: move;

    /* box-shadow: 0px 0px 1px rgba(0,0,0,0.4); */
    box-shadow:2px 2px 10px rgba(0,0,0,0.6);
}

#WorkflowersBoard #workflowers .box:not(.static-object) > label {
    position: absolute;
    background-color: rgba(255,255,255,0.75);
    min-width: 75px;
    text-align: center;
    width: max-content;
    
    border-radius: 90px;

    padding: 2px 5px;
    
    color: black !important;
    border: 1px solid rgba(0,0,0,0.5);
}

#WorkflowersBoard #workflowers .line {
    position: absolute;
    height: 9px;
    background-image: url('arrow.png');
    /* border: 1px solid black; */
    background-size: contain;
    z-index: 10;
}

#WorkflowersBoard #workflowers .box:hover {
    /* border: 1px solid gray; */
    /* animation: pulse 0.6s linear infinite; */
    animation: borders 1s forwards;
}

#WorkflowersBoard .box img {
    vertical-align: middle;
    width: 100%;
    height: auto;
    margin: auto;
}

#WorkflowersBoard .palette {
    width: 12px;
    height: 12px;
    border-radius: 90px;
}

#WorkflowersBoard .static-object {
    /* border: 2px groove black !important; */
    border: 1px solid gray !important;
    background-color: #C0C0C0 !important;
    /* box-shadow: 0px 0px 5px rgba(0,0,0,0.8) inset !important; */
    /* box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2),inset 0 5px 30px rgba(0,0,0,0.4) !important; */
    box-shadow: -2px -2px 10px rgba(0,0,0,0.6) inset !important;
}

#WorkflowersBoard .static-object:hover {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.6) inset !important;
}

#WorkflowersBoard #workflowers .tinybox {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

#WorkflowersBoard .toolbar > .submenu {
    height: var(--submenu-h);
    max-height: var(--submenu-h);
}

#WorkflowersBoard .submenu {
    /* background-color: red; */
    overflow: auto;
    /* padding: 5px; */
    background-color: rgb(63, 61 ,69);

    box-sizing: border-box;
    /* border-bottom: 1px solid white; */
    /* margin-bottom: 15px; */
    /* border: 1px solid white; */
}

#WorkflowersBoard .toolbar_header .tableView {
    display: table;
    width: 100%;
}

#WorkflowersBoard .toolbar_header .tableView-row {
    display: table-row;
    width: 100%;
    height: 25px;
    line-height: 25px;
}
#WorkflowersBoard .tableView-cell {
    display: table-cell;
    margin: 2px;
    text-transform: capitalize;
}


#WorkflowersBoard .tableView {
    /* display: table; */
    /* display: flex; */
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#WorkflowersBoard .tableView-row {
    display: table-row;
}

#WorkflowersBoard .popup-default .tableView-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#WorkflowersBoard .tabitem .submenu .tableView-row {
    /* display: table-row; */
    width: 100%;
    height: 25px;
    line-height: 25px;
}
#WorkflowersBoard .tabitem .submenu .tableView-row:nth-child(odd) {
    /* display: table-row; */
    width: 100%;
    background-color: rgb(27, 25, 34);
}
#WorkflowersBoard .tabitem .submenu .tableView-row:hover {
    /* display: table-row; */
    width: 100%;
    background-color: rgba(120, 200, 120, 0.3);
    cursor: pointer;
}

#WorkflowersBoard .tabitem .tableView-cell {
    display: table-cell;
    width: auto;
    /* width: 50%; */
}
#WorkflowersBoard .tabitem .tableView-cell:hover {
    /* display: table-cell; */
    /* width: 50%; */
}

#WorkflowersBoard .tableView-row .tableView-cell {
    padding: 5px;
}

#WorkflowersBoard #allstates .tableView-row .tableView-cell:nth-child(2) {
    width: 100%;
}

#WorkflowersBoard .logo-toolbox {
    background-image: url('outils.png');
}

#WorkflowersBoard .logo {
    width: 40px;
    height: 40px;
    background-size: cover;
}

#WorkflowersBoard .selectedRow {
    background-color: rgba(120, 200, 120, 0.6) !important;
}

#WorkflowersBoard #transitions {
}

#WorkflowersBoard #transisions:active {
}

#WorkflowersBoard .pointer {
    cursor: auto;
}

#WorkflowersBoard .eraser {
    cursor: url("erasercursor.png"), crosshair !important;
}

#WorkflowersBoard .transitions {
    cursor: /* url("transitions.png"),  */crosshair !important;
}

#WorkflowersBoard #eraser {
    background-image: url('eraser.png');
}

#WorkflowersBoard #transitions {
    background-image: url('transitions.png');    
}

#WorkflowersBoard #pointer {
    background-image: url('pointer.png');
}

#WorkflowersBoard #selections {
    background-image: url('selectionicon.png');
}

#WorkflowersBoard .btn-remove {
    background-image: url('removeicon.png');
}

#WorkflowersBoard .btn-add {
    background-image: url('addicon.png');
}

#WorkflowersBoard .btn-modify {
    background-image: url('modifyicon.png');
}

#WorkflowersBoard .btn-save {
    background-image: url('saveicon.png');
}

#WorkflowersBoard .btn-load {
    background-image: url('loadicon.png');
}

#WorkflowersBoard .small {
    width: 22px !important;
    height: 22px !important;
}

#WorkflowersBoard .sround {
    border-radius: 1px !important;
}

#WorkflowersBoard .mround {
    border-radius: 3px !important;
}

#WorkflowersBoard .lround {
    border-radius: 9px !important;
}

#WorkflowersBoard .pround {
    border-radius: 90px !important;
}



#WorkflowersBoard .selectedbox {
    /* background-color: rgba(250, 180, 180, 0.8) !important; */
    /* border: 2px solid red !important; */
    background-color: rgba(12, 176, 255, 0.8) !important;
    border: 1px solid rgb(12, 176, 255) !important;
    color: white !important;

    animation: strong-pulse 0.3s;
}

#WorkflowersBoard .btn
{
    background-position: center;
    background-size: cover;
    height:28px;
    width:28px;

    max-height: 28px;
    max-width: 28px;
    
    border: 1px solid rgb(141,141,141);
    background-color: rgb(21,21,21);
    color: white;
    
    border-radius:3px;

    box-sizing: border-box;
}

#WorkflowersBoard .btn:hover
{
    background-color: rgb(211,211,211);
    border: 1px solid rgb(21,21,21);
    color: black;
}

#WorkflowersBoard .btn_active
{
    border-style: inset;
    background-color: rgb(180,180,180);
    border: 1px solid rgb(21,21,21);
    color: black;
}

#WorkflowersBoard input:focus {
    outline: none;
}

#WorkflowersBoard input:readonly {
    background-color: #eee;
}


#WorkflowersBoard .stretch {
    width: 100%;
}

#WorkflowersBoard .insetrow {
    border: 1px solid rgb(211,211,211);
    background-color: rgb(11,11,11);
    padding: 2px;
    border-radius: 5px;
    margin: 0;
}

#WorkflowersBoard .insetrow > .tableView-cell {
    padding: 0;
    margin: 0;
}

#WorkflowersBoard .tabitem input[type=button]{
    margin: 2px;
}

#WorkflowersBoard .insetrow > .tableView-cell > input {
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

#WorkflowersBoard #selectbox {
    position: absolute;
    background-color: rgba(100,100,250,0.2);
    border: 2px ridge rgba(180, 200, 250, 0.8);
    z-index: 60;
}

#WorkflowersBoard .tabradio {
    display: none;
}

#WorkflowersBoard .tabradio:checked + .tabitem {
    display: block;
}

#WorkflowersBoard .btn-tab {
    height: var(--tabbar-h);
    max-height: var(--tabbar-h);
    
    /* padding: 5px 10px 1px 10px; */
    padding: 2px;
    /* border-radius: 0px 90px 0px 0px; */
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 0px;
    border-radius: 4px 4px 0px 0px;

    box-sizing: border-box;
}

#WorkflowersBoard .tab-active {
    background-color: rgb(211,211,211);
    border: 1px solid rgb(21,21,21);
    color: black;
}

#WorkflowersBoard .btn-default {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 10px !important;
}

#WorkflowersBoard .btn-default:hover {
    background-color: rgb(211,211,211);
    border: 1px solid rgb(21,21,21);
    color: black;
}

#WorkflowersBoard .btn-default:active {
    background-color: rgb(170,170,170);
    border: 1px outset rgb(21,21,21);
    color: black;
}

#WorkflowersBoard .btn-confirm {
    width: auto;
    height: auto;

    max-width: none;
    max-height: none;
}

#WorkflowersBoard .btn-confirm:hover
{
    background-color: rgb(211,211,211);
    border: 1px solid rgb(21,21,21);
    color: black;
}

#WorkflowersBoard .btn-confirm:active {
    background-color: rgb(170,170,170);
    border: 1px outset rgb(21,21,21);
    color: black;
}

#WorkflowersBoard .tabitem {
    display: none;
    height: 130px;
    /* min-height: 300px; */
    /* max-height: 300px; */
    /* padding: 10px; */
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgb(141,141,141);
    border-radius: 3px;
}

#WorkflowersBoard .popup-default {
    /* display: none; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
    color: white;
    position: absolute;
    width: 300px;

    right: -300px;
    /* top: 35%; */
    /* left: 35%; */
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgb(180,180,180);
    border-radius: 3px;
    box-shadow: 1px 1px 3px 3px black;
    z-index: 70;
    padding: 5px;
}

#WorkflowersBoard .popup-default h3{
    display: inline-block;
    margin-top: 0;
}

#WorkflowersBoard .popup-default form {
    height: 100%;
    width: 100%;
}

#WorkflowersBoard .popup-body {
    /* display: table-row; */
    height: calc(100% - 100px);
    overflow: hidden;
    overflow-y: auto;
}

#WorkflowersBoard .popup-default .popup-header {
    height: 50px;
    /* border-bottom: 1px solid white; */
}

#WorkflowersBoard .popup-default .popup-header > .left-panel {
}

#WorkflowersBoard .popup-default .popup-header > .right-panel {
    float: right;
}

#WorkflowersBoard .popup-default .popup-footer {
    /* padding-top: 20px; */
    text-align: center;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#WorkflowersBoard .popup-volatile {
    display: none;
    color: white;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgb(180, 180, 180);
    border-radius: 3px;
    box-shadow: 1px 1px 3px 3px black;
    z-index: 80;
    padding: 5px;
}

#WorkflowersBoard .show {
    display: inherit !important;
    visibility: visible !important;
}

#WorkflowersBoard .hide {
    display: none;
    visibility: hidden;
}

#WorkflowersBoard .hidedel {
    display: none !important;
    opacity: 0;
    max-width: 0px;
    max-height: 0px;
}

#WorkflowersBoard .popup .label,
#WorkflowersBoard .popup input {
    margin: 0% 5% 0 5%;
}

#WorkflowersBoard .popup .tableView-row input {
    margin: 0 20px;
    width: calc(100% - 40px);
}

#WorkflowersBoard .popup .tableView-row input[type=checkbox] {
    width: max-content;
}

#WorkflowersBoard .popup input[data-popup-options=restbody] {
    display: none;
}

#WorkflowersBoard .highlight {
    background-color : rgba(255,0,0,0.6) !important;
}

#WorkflowersBoard .toolbar-volatile {
    display: inline;
    position: absolute;
    top: 85%;
    left: 33%;
    width: auto;
    height: 30px;
    /* border-radius: 9px; */
    /* padding: 6px; */
    padding: 0;

    background-color: rgb(0,0,0);
    opacity: 0.1;
    transition: opacity 0.6s;
}

#WorkflowersBoard .toolbar-volatile:hover {
    opacity: 0.8;
}

#WorkflowersBoard .toolbar-main {
    border: 1px solid black;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}

#WorkflowersBoard .btn-menu {
    border: 0;
    margin: 0;
    padding: 0 !important;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
}

#WorkflowersBoard .btn-menu:hover {
    background-color: rgba(100, 100, 150, 0.4);
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 0;
}

#WorkflowersBoard .btn:disabled {
    background-color: rgba(200,200,200,0.8);
    border: gray;
}

#WorkflowersBoard .input-list {
    /* margin-bottom: 20px; */
    display: flex;
    flex-direction: column;
    
    width: 100%;
    height: var(--input-list-h);
    
    padding: 5px;
    margin: 0;
    
    box-sizing: border-box;
}

#WorkflowersBoard .input-list > * {
    flex: 1;
}

#WorkflowersBoard .input-list label {
    /* margin-top:10px; */
    /* display:block; */
}

#WorkflowersBoard .input-list select {
    /* width: 100%; */
}

#WorkflowersBoard hr {
    /* border: 0; */
    height: 2px;
    background-image: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.75), rgba(200, 200, 200, 0));
    margin: 10px 0px !important;
}

/* #WorkflowersBoard .menubar { */
/*     height: 20px; */
/*     width: 100%; */
/*     padding: 0; */
/*     margin: 0; */
/*     border: 1px solid red; */
/*     background-color: rgba(0, 255, 0, 0.2); */
/* } */

/* #WorkflowersBoard ul > li { */
/*     float: left; */
/*     padding: 2px; */
/*     padding-right: 5px; */
/*     padding-bottom: 0; */
/* } */

/* #WorkflowersBoard ul { */
/*     list-style: none; */
/*     margin: 0; */
/*     padding: 0; */
/* } */

/* #WorkflowersBoard .menubar label:hover { */
/*     text-decoration: underline; */
/* } */

/* #WorkflowersBoard .menubar .tabitem { */
/*     position: absolute; */
/*     min-height: auto; */
/*     width: auto; */
/* } */

/* #WorkflowersBoard .menubar .tabitem li { */
/*     float: none; */
/* } */

/* #WorkflowersBoard .icon { */
/*     display: inline-block; */
/*     font-size: 1em; */
/*     width: 1em; */
/*     height: 1em; */
/*     margin: 0; */
/*     padding: 0; */
/*     background-size: cover; */
    
/* } */