/**
* glass editor css rules not specific to an implementation
*/
.g-pane *,
.g-textediting{
    /* pane colours (GJS) */
    --hilite-color :  rgb(73, 134, 247);
    --hilite-hover-color: rgb(255 255 255 / 25%);
    --icon-selected-outline-color: rgb(128,128,128);
    --select-outline-size:3;
    --select-outline-color : var(--hilite-color);
    --iconbar-color :var(--hilite-color);
    --icon-hover-color : rgb(125, 157, 216);
    --imagefilter : none; 
    --describe-text-color : white;
    --describe-bk-color :var(--hilite-color); 
    --menu-text-color: white;
    --icon-selected-fill-color:var(--icon-hover-color);
    --grid-coverage-color: rgba(255, 255, 255, .3);

    /* light colours */
    --text-edit-outline-color : yellow;
    --hilite-color : white;
    --hilite-hover-color: rgb(120 120 120 / 25%);
    --select-outline-color :rgb(73, 134, 247);
    --iconbar-color :var(--hilite-color);
    --seperator-color : #b3b3b3;
    --menu-small-bk-color :  rgb(255 255 255 / 56%);
    --icon-hover-color : rgb(232, 232, 232);
    --imagefilter : invert(1);
    --describe-text-color : white;
    --describe-bk-color :rgb(73, 134, 247);
    --menu-text-color: black;
    --icon-selected-fill-color:var(--icon-hover-color);
    --iconsize:14px;
    --input-bk-color:#fafafa;
    --token-color:black;
    --token-bk-color:#f1f1f1;
    --token-action-color:white;
    --token-action-bk-color:#c1c1c1;
    --selector-radio-diameter:12px;
    --selector-token-height:16px;
    --selector-control-diameter:14px;
    --selector-image-diameter:12px;
    --marble-color:rgb(13 116 44 / 100%);


    --handle-color :  rgba(73, 134, 247,0.5);
    --margin-hilite-color:rgba(248,128,128,0.2);
    --padding-hilite-color:rgba(128,248,128,0.2);

}

.g-pane * {
    user-select: none;
}



.g-pane-parent {
    position: relative;
}

.g-pane-parent:has(.g-textediting)::after {
    content: 'Editing text. Click outside to complete, [Esc] to cancel';
    position: fixed;
    top: 0.25rem;
    right: 0.25rem;
    width:fit-content;
    height: 2rem;
    text-align: center;
    /* background-color: #9acbf69c; */
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 2rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: editing-bg-cycle 1.5s infinite alternate;
}


@keyframes editing-bg-cycle {
    0% {
        background-color: #fcc6021c;
    }
    100% {
        background-color: #fcc602;
    }
}



.g-pane {
    /* border: 1px solid lightgreen; */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    font-family: Arial, Helvetica, sans-serif;
}

.g-pane.g-nodrop {
    cursor: no-drop;
}

.g-pane rect.g-parect {
    stroke: rgb(230 171 38);
    stroke-width: 0.2rem;
    fill: none;
}



.g-pane .g-side {
    stroke: #10f210;
    stroke-width: 0.125rem;
    stroke-linejoin: round;
    fill: none;
    /* stroke-dasharray: 3,3; */
}

.g-pane rect.g-RangeBoundsOutline {
    fill: rgba(248,128,128,0.2);
    stroke: rgb(248, 6, 6);
    stroke-width: 2px;
}

/* outline selection */
.g-pane rect.g-outline-select {
    fill: none;
    stroke: var(--select-outline-color);
    stroke-width: var(--select-outline-size);
}


/* describe box */
.g-pane rect.g-outline-describe {
    fill: none;
    stroke: var(--select-outline-color);
    stroke-width: 1;
}

.g-pane .g-describe rect {
    fill:var(--describe-bk-color);
    stroke: none;
}

.g-pane .g-describe text {
    font-family: sans-serif;
    font-size: 10px;
    font-weight: bold;
    dominant-baseline: middle;
    text-anchor: middle;
    fill: var(--describe-text-color);
}

.g-pane .g-margins rect {
    fill: var(--margin-hilite-color);
    stroke: none;
}

.g-pane .g-padding rect {
    fill: var(--padding-hilite-color);
    stroke: none;
}

/* control bar and menus */
.g-pane .g-icon {
    cursor: pointer;
}

.g-pane .g-icon title{
    background-color: aliceblue;
    color: black;
}

.g-pane .g-hbar image,
.g-pane .g-imap image,
.g-pane .g-imenu image,
.g-pane .g-dragger image
{
    filter: var(--imagefilter);
}

.g-pane .g-icon rect,
.g-pane .g-imapbk {
    fill: var(--iconbar-color);
    stroke: none;
    stroke-width: 0;
}

.g-pane .g-icon.g-sep rect {
    fill: var(--seperator-color);
}

.g-pane .g-disabled .g-icon image {
    opacity: 0.2;
}



.g-pane .g-icon.g-clickable:hover rect {
    fill: var(--icon-hover-color);
}

.g-pane .g-icon.g-clickable.g-disabled:hover rect {
    fill: none;
}

.g-pane rect.g-bkrect,
.g-pane rect.g-imapbk {
    stroke: none;
    fill:  var(--iconbar-color);
    filter:  drop-shadow( 9px 9px 6px rgba(120, 120, 120, .5));
}

.g-pane .g-icon.g-sel rect {
    stroke: none;
    fill:var(--icon-selected-fill-color);
}

.g-pane .g-pressable image:active,
.g-pane .g-pressable text:active {
    transform:translate(1px, 1px);    
}

/* menu text */
.g-pane text.g-tline {
    font-family: sans-serif;
    font-size: 10px;
    font-style: italic;
    font-weight: normal;
    text-anchor: start;
    dominant-baseline: hanging;
    fill: var(--menu-text-color);
}
/* text icon */
.g-pane text.g-ticon {
    font-family: sans-serif;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: -0.5px;
    dominant-baseline: middle;
    text-anchor: middle;
    fill: var(--menu-text-color);
}

.g-pane .g-disabled text.g-ticon  {
    opacity: 0.2;
}


/* text input */
.g-pane .g-input-cont,
.g-pane .g-label-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.g-pane .g-label-cont {
    justify-content: start;
}

.g-input-cont .g-title,
.g-label-cont .g-label-text
 {
    font-family: sans-serif;
    font-size: 10px;
    padding-left: 6px;
    cursor: default;
}

.g-disabled .g-input-cont .g-title {
    opacity: 0.4;
}

input.g-input,
select.g-input  {
    box-sizing: border-box;
    border: none;
    background-color: var(--input-bk-color);
    border-radius: 0;
    font-size: 13px;
    width:100%;
    height:100%;
    margin: 0;
}

input.g-input.g-input-number {
    text-align: end;
}

input.g-input:disabled {
    color: lightgray;
}


input.g-input:focus-visible,
select.g-input:focus-visible {
    outline-offset: 0px;
    outline: none;
}

/* multi select */
.g-pane .g-mselect-outer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
}

.g-pane .g-ms-inner-title {
    font-size: 8px;
    margin-left: 0.25rem;
}

.g-pane .g-mselect-cont {
    overflow-y: auto;
    height: 100%;
    flex-shrink: 1;
}

.g-pane .g-bottomup .g-mselect-cont {
    height:auto;
}

.g-pane .g-bottomup .g-mselect-outer {
    flex-direction: column-reverse;
}


.g-pane .g-mselect-selected {
    height: 100%;
    min-height:18px;
    flex-shrink: 2;
    display: flex;
    flex-direction: row;
    max-height: 35px;
    width: 100%;
    flex-wrap: wrap;
    overflow-y: auto;
    align-content: flex-start;
}

.g-pane .g-mselect {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

.g-pane .g-ms-token {
    color: var(--token-color);
    background-color: var(--token-bk-color);
    margin: 2px;
    font-size: 8px;
    font-weight: bold;
    width: fit-content;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
}

.g-pane .g-ms-token.g-ms-addtoken {
    background-color: black;
    color: white;
}

.g-pane .g-ms-token.g-sel {
    background-color: #9acbf6;
}

.g-pane .g-mselect-selected .g-ms-token {
    padding-right: 0;
    cursor: default;
}

/*.g-pane .g-mselect-selected .g-ms-token::after */
.g-pane .g-ms-token .g-ms-action 
{
    display: inline;
    color: var(--token-action-color);
    background-color:  var(--token-action-bk-color);
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    font-stretch: extra-expanded;
    font-family: monospace;
    font-size: 6px;
    margin-left: 2px;
    line-height: 8px;
    border-radius: 6px;
    cursor: pointer;
}

.g-pane .g-ms-token .g-ms-action::after {
    content: "+";
}

.g-pane .g-mselect-selected .g-ms-token .g-ms-action::after {
    content: "X";
}

.g-pane .g-text-editing {
    min-width: 50px;
}

/* single select */
.g-pane .g-select-outer {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-around;
}

.g-pane select.g-select {
    width: 100%;
    border: none;
    font-size: 10px;
    font-family: sans-serif;
    font-weight: bold;
    background-color: var(--input-bk-color);
    padding-top:4px;
    padding-bottom:4px;
}

.g-pane select.g-select:focus-visible {
    outline: none;
}

/* Color Icon */
.g-pane .g-color-cont {
    margin: 2px;
    height: calc(100% - 4px);
    width: calc(100% - 4px);
    box-sizing: border-box;
    background-image: url(../icon/icons8-pattern-50.png);
    background-size: 150%;
    background-position: center;
    border-radius: 50%;
}

.g-pane .g-color-circle {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    box-sizing: border-box;
}
.g-pane .g-disabled .g-color-cont {
    background-image: none;
}

.g-pane .g-disabled .g-color-circle {
    visibility: hidden;
}

.g-pane .g-sel .g-color-circle {
    outline-color: black;
    outline-offset: 1px;
    outline-width: 1px;
    outline-style: dotted;
}



.g-pane .g-color-circle:active {
    transform:translate(1px, 1px);
}

.g-pane .g-hilite {
    fill: rgb(7 71 188 / 0%);;
    stroke: none;
    cursor: pointer;
}

.g-pane .g-hilite.g-sel {
    stroke: var(--icon-selected-outline-color);
    stroke-width: 1;
    fill:none;
    rx:2;
    ry:2;
}



.g-pane .g-hilite:hover {
    fill: var(--hilite-hover-color);
}

@keyframes fadein {
    0%      {opacity: 0}
    100%    {opacity: 1}
}

@keyframes fadeout {
    0%      {opacity: 1}
    100%    {opacity: 0}
}


@keyframes scaleout {
    0%        {transform: scale(0.95,1)}
    85%, 100% {transform: scale(1,1)}
}

.g-fadein {
    animation-name: fadein;
    animation-duration:  0.25s;
    animation-timing-function: ease-in;
}

.g-fadeout {
    animation-name: fadeout;
    animation-duration:  0.25s;
    animation-timing-function: ease-in;
    opacity: 0;
}

.g-hidden {
    visibility: hidden;
}

/* distance measurement */
.g-DistanceMark line {
    stroke-width: 1px;
    stroke-dasharray: 1,1;
}

.g-DistanceMark line.g-l0 {
    stroke: white;
}
.g-DistanceMark line.g-l1 {
    stroke: var(--select-outline-color);
    stroke-dashoffset: 1;
}


.g-DistanceMark text {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    dominant-baseline: middle;
    text-anchor: middle;
    fill: white;
    filter:drop-shadow(1px 1px 1px rgb(0 0 0 / 1));
}

/* text editing */
.g-editroot .g-textediting[contenteditable="true"] {
    outline-color:var(--text-edit-outline-color);
    outline-offset: 5px;
    outline-width: 5px;
    outline-style: solid;
}


/* handles */
.g-pane .g-handle {
    fill: var(--handle-color);
    stroke:var(--hilite-color);
    stroke-width: 1px;
}

.g-pane .g-handle.g-han-nw_se {
    cursor: nwse-resize;    
}

.g-pane .g-handle.g-han-ne_sw {
    cursor: nesw-resize;    
}

.g-pane .g-handle.g-han-n_s {
    cursor: ns-resize;    
}

.g-pane .g-handle.g-han-e_w {
    cursor: ew-resize;    
}

.g-attached-to-move {
    position: absolute;
}

.g-ghost {
    background-color: white;
    min-width: 2rem;
    max-width: 20rem;
    min-height: fit-content;
    max-height: 20rem;
    opacity: 0.7;
    z-index: 2000;
    border: 1px solid  #787876;
    border-radius: 0.75rem;
    cursor: default;
    box-sizing: border-box;
    padding: 0.25rem;
}

/* draglines */
.g-dragline rect {
    pointer-events: all;
    stroke: none;
    fill: none;
}

.g-dragline.g-h rect {
    cursor: ns-resize;
}

.g-dragline.g-v rect {
    cursor: ew-resize;
}

.g-dragline line.g-l1 {
    stroke:rgba(0,0,0,0.5);
    stroke-width:0.5px;
    stroke-dasharray:1,1;
}

.g-dragline line.g-l2 {
    stroke:rgba(255,255,255,0.5);
    stroke-width:0.5px;
    stroke-dasharray:1,1;
    stroke-dashoffset:1;
}


.g-dragline:hover line.g-l1 {
    /*stroke:rgba(0,0,0,1); */
    /*stroke-dasharray:none;*/
    stroke:rgba(0,0,0,1);
}

.g-dragline:hover line.g-l2 {
    /*stroke:rgba(0,0,0,1); */
    /*stroke-dasharray:none;*/
    stroke:rgba(255,255,255,1);
}


/* grid */
.g-dragline:hover .g-clickbtn {
    cursor: pointer;
    fill: white;
    stroke: black;
    stroke-width: 1px;
    filter: drop-shadow( 2px 2px 3px rgba(100, 100, 100, .7));
}


.g-dragline:hover .g-btn line {
    stroke: black;
    stroke-width: 1px;
}

.g-dragline .g-clickbtn {
    fill: none;
}
.g-dragline .g-btn line {
    stroke: none;
    stroke-width: 0;
}

rect.g-cmark {
    fill:none;
    stroke:var(--select-outline-color);
    stroke-width: 1;
}

rect.g-cell-coverage {
    stroke: none;
    fill: var(--grid-coverage-color);
}

/* marbles */
.g-pane .g-marble {
    cursor: pointer;
}

.g-pane.g-marble-active {
    cursor: url('../icon/cursor/icons8-select-cursor-24.png') 5 1, auto;
}


.g-pane.g-marble-active .g-bottomup .g-ms-token:hover {
    cursor: inherit;
    box-shadow: rgb(61 221 108 / 100%) 0px 0px 3px 3px;
}

.g-pane .g-marble circle {
    fill: var(--marble-color);
    stroke: none;
}

.g-pane .g-marble.g-disabled circle {
    fill: none;
    cursor: default;
}

.g-pane .g-txt-centered {
    font-family: sans-serif;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: -0.5px;
    dominant-baseline: central;
    text-anchor: middle;
    fill:white;
}

/* css selector editor */
.g-pane .g-css-selector-ed foreignObject {
    overflow: visible;
}

.g-pane .g-css-selector-ed .g-ms-token {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    line-height: var(--selector-radio-diameter);
    border-radius: 6px;
    position: relative;
}


.g-pane .g-ms-radio {
    display: block;
    width: var(--selector-radio-diameter);
    height: var(--selector-radio-diameter);
    box-sizing: border-box;
    background: var(--marble-color);
    color: white;
    text-align: center;
    line-height: var(--selector-radio-diameter);
    border-radius: calc(var(--selector-radio-diameter) / 2);
    font-family: sans-serif;
    font-size: calc(var(--selector-radio-diameter) - 4px);
    font-weight: bold;
    letter-spacing: -0.5px;
    padding-right: 1px;
    margin-right: 2px;
}   

.g-pane .g-css-selector-ed .g-ms-token.g-sel {
    background-color: var(--marble-color); 
    color: white;
}

.g-pane .g-ms-token.g-sel .g-ms-radio {
    background-color: white;
    color: var(--marble-color);
}

/* upload */
.g-pane .g-upload-cont {
    width: 100%;
    height: 100%;
}

.g-pane .g-upload-trigger {
    width: 100%;
    height: 100%;
}

.g-pane .g-upload-trigger::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(../icon/icons8-upload-24.png);
    background-position: center;
    background-size: var(--iconsize) var(--iconsize);
    background-repeat: no-repeat;
    filter:var(--imagefilter);
}

.g-pane .g-upload-trigger:active {
    transform:translate(1px, 1px);   
}

.g-pane .g-upload-trigger:hover {
    background-color:var(--icon-hover-color);
}

/* selector control bar */
.g-pane .g-css-selector-ed .g-mselect-cont {
    overflow: visible;
}

.g-pane .g-selector-outer {
    visibility: hidden;
    opacity: 0;
    transition:opacity 500ms;
    position: absolute;
    bottom: var(--selector-token-height);
    left:0px;
    right:0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 4px;
}

.g-pane .g-ms-token:hover .g-selector-outer,
.g-pane .g-ms-token .g-selector-outer:hover {
    visibility: visible;
    opacity: 1;
}

.g-pane .g-selector-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.g-pane .g-selector-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color:var(--menu-small-bk-color);
    border-radius: 4px;
    padding: 5px;
    padding-right: 1px;
    filter: drop-shadow( 9px 9px 6px rgba(120, 120, 120, .5));
}

.g-selector-controls .g-ctrl {
    display: block;
    box-sizing: border-box;
    width: var(--selector-control-diameter);
    height: var(--selector-control-diameter);
    background-color: var(--iconbar-color);
    /*border-radius:  calc(var(--selector-control-diameter) / 2); */
    margin-right: calc(var(--selector-control-diameter) / 4);
    position: relative;
}

.g-selector-controls .g-ctrl.g-disabled {
    cursor: default;
}

.g-ctrl:hover {
    background-color:var(--icon-hover-color);
}

.g-selector-controls .g-ctrl::after {
    content: '';
    display: block;
    box-sizing: border-box;
    width: var(--selector-control-diameter);
    height: var(--selector-control-diameter);
    position: absolute;
    top:0;
    left:0;
    background-position: center;
    background-size: var(--selector-image-diameter) var(--selector-image-diameter);
    background-repeat: no-repeat;
    filter:var(--imagefilter);
}

.g-selector-controls .g-ctrl.g-disabled::after {
    opacity: 0.4;
}

.g-selector-controls .g-ctrl.g-paste::after {
    background-image: url(../icon/icons8-paste-24.png);
}

.g-selector-controls .g-ctrl.g-add::after {
    background-image: url(../icon/icons8-add-24.png);
}

.g-selector-controls .g-ctrl.g-edit::after,
.g-selector-controls .g-ctrl.g-editid::after {
    background-image: url(../icon/icons8-edit-24.png);
}

.g-selector-controls .g-ctrl.g-del::after {
    background-image: url(../icon/icons8-trash-24.png);
}


.g-selector-controls .g-ctrl:active {
    transform:translate(1px, 1px);   
}

.g-selector-controls .g-ctrl.g-disabled:active {
    transform:none;   
}

/* target rules menu */
.g-pane .g-target-rule-menu rect.g-bkrect {
    fill: var(--menu-small-bk-color);
}

.g-pane .g-sel-action-cont {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
    align-items: center;
}
.g-pane .g-act {
    position: relative;
    font-family: sans-serif;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-anchor: middle;
    padding: 2px;
    background-color: white;
    margin-right: 2px;
}

.g-pane .g-act:hover {
    background-color: var(--icon-hover-color);
}

.g-pane .g-act::after {
    content: '';
    filter:var(--imagefilter);
    display: block;
    box-sizing: border-box;
    width: var(--selector-control-diameter);
    height: var(--selector-control-diameter);
    position: absolute;
    top:0;
    left:0;
    background-position: center;
    background-size: var(--selector-image-diameter) var(--selector-image-diameter);
    background-repeat: no-repeat;
}

.g-act.g-copy::after {
    background-image: url(../icon/icons8-transfer-c-24.png);
}

.g-act.g-move::after {
    background-image: url(../icon/icons8-transfer-m-24.png);
}


.g-pane .g-act:active {
    transform:translate(1px, 1px);   
}


.g-ms-radio.g-number {
    flex-shrink: 0;
}

/* dragger*/
.g-dragger .g-dragger-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.g-dragger .g-drag-area,
.g-dragger .g-pin {
    box-sizing: border-box;
    margin: 1px;
    width: 100%;
    height: calc(50% - 2px);
}

.g-dragger.g-nopin .g-pin {
    display: none;
}

.g-dragger.g-nopin .g-drag-area {
    height: calc(100% - 2px);
}

.g-dragger .g-drag-area::after,
.g-dragger .g-pin::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    filter:var(--imagefilter);
}


.g-dragger .g-drag-area::after {
    background-image: url(../icon/icons8-checkered-40.png);
    cursor: move;
}

.g-dragger .g-pin::after {
    background-image: url(../icon/icons8-pin-in-circle-24.png);
    background-size: contain;
    cursor: pointer;
}

.g-dragger.g-pinned .g-pin::after {
    background-image: url(../icon/icons8-unpin-2-24.png);
}

/********* icons **************/
/* rotation */
.g-rotated-90 .g-icon-img {
    transform: rotate(90deg);
}


.g-pane .g-icon-img {
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--imagefilter);
}

.g-pane .g-disabled .g-icon .g-icon-img {
    opacity: 0.2;
}

.g-pane .g-pressable .g-icon-img:active {
    transform:translate(1px, 1px);    
}

/* toolbar */
.g-img.g-up .g-icon-img,
.g-img.g-down .g-icon-img,
.g-img.g-next .g-icon-img,
.g-img.g-previous .g-icon-img {
    background-image:url(../icon/icons8-up-24.png)
}
.g-img.g-down .g-icon-img {
    transform: rotate(180deg);
}
.g-pane .g-pressable.g-img.g-down .g-icon-img:active {
    transform: rotate(180deg) translate(-1px, -1px);    
}
.g-img.g-next .g-icon-img {
    transform: rotate(90deg);
}
.g-pane .g-pressable.g-img.g-next .g-icon-img:active {
    transform: rotate(90deg) translate(1px, -1px);    
}
.g-img.g-previous .g-icon-img {
    transform: rotate(-90deg);
}
.g-pane .g-pressable.g-img.g-previous .g-icon-img:active {
    transform: rotate(-90deg) translate(-1px, 1px);    
}


.g-pane .g-pressable.g-img.g-down .g-icon-img:active {
    transform: rotate(180deg) translate(-1px, -1px);    
}
.g-img.g-dup .g-icon-img {background-image:url(../icon/icons8-copy-24.png)}
.g-img.g-trash .g-icon-img {background-image:url(../icon/icons8-trash-24.png)}
.g-img.g-move .g-icon-img {background-image:url(../icon/icons8-move-24.png)}
.g-img.g-size .g-icon-img {background-image:url(../icon/icons8-width-24.png)}
.g-img.g-display_align .g-icon-img {background-image:url(../icon/icons8-align-top-24.png)}
.g-img.g-color_appearance .g-icon-img {background-image:url(../icon/icons8-color-24.png)}
.g-img.g-typography .g-icon-img {background-image:url(../icon/icons8-choose-font-24.png)}
.g-img.g-classes .g-icon-img {background-image:url(../icon/icons8-structure-24.png)}
.g-img.g-events .g-icon-img {background-image:url(../icon/icons8-listener-24.png)}


/* position menu */
.g-img.g-topleft .g-icon-img {background-image:url(../icon/icons8-circled-arrow-pointing-up-and-left-24.png)}
.g-img.g-topright .g-icon-img {background-image:url(../icon/icons8-circled-up-right-24.png)}
.g-img.g-bottomleft .g-icon-img {background-image:url(../icon/icons8-circled-down-left-arrow-24.png)}
.g-img.g-bottomright .g-icon-img {background-image:url(../icon/icons8-circled-down-right-2-24.png)}

/* size menu */
.g-img.g-border-box .g-icon-img {background-image:url(../icon/icons8-external-24.png)}
.g-img.g-content-box .g-icon-img {background-image:url(../icon/icons8-internal-24.png)}

/* display and align menu */

/* flex-direction */
.g-img.g-row .g-icon-img {
    background-image:url(../icon/display/flex-direction/1.png);
}
.g-img.g-column .g-icon-img {
    background-image:url(../icon/display/flex-direction/2.png);
}

.g-img.g-row-reverse .g-icon-img {
    background-image:url(../icon/display/flex-direction/3.png);
}

.g-img.g-column-reverse .g-icon-img {
    background-image:url(../icon/display/flex-direction/4.png);
}

/* flex-wrap */
.g-img.g-nowrap .g-icon-img {
    background-image:url(../icon/display/flex-wrap/1.png);
}

.g-img.g-wrap .g-icon-img {
    background-image:url(../icon/display/flex-wrap/2.png);
}


/* align-content */
.g-align-content .g-img.g-center .g-icon-img {
    background-image:url(../icon/display/align-content/1.png);
}

.g-align-content .g-img.g-start .g-icon-img {
    background-image:url(../icon/display/align-content/2.png);
}

.g-align-content .g-img.g-end .g-icon-img {
    background-image:url(../icon/display/align-content/3.png);
}

.g-align-content .g-img.g-space-around .g-icon-img {
    background-image:url(../icon/display/align-content/4.png);
}

.g-align-content .g-img.g-space-between .g-icon-img {
    background-image:url(../icon/display/align-content/5.png);
}

.g-align-content .g-img.g-stretch .g-icon-img {
    background-image:url(../icon/display/align-content/6.png);
}




/* justify-content */
.g-justify-content .g-img.g-center .g-icon-img {
    background-image:url(../icon/display/justify-content/1.png);
}

.g-justify-content .g-img.g-start .g-icon-img {
    background-image:url(../icon/display/justify-content/2.png);
}

.g-justify-content .g-img.g-end .g-icon-img {
    background-image:url(../icon/display/justify-content/3.png);
}

.g-justify-content .g-img.g-space-around .g-icon-img {
    background-image:url(../icon/display/justify-content/4.png);
}

.g-justify-content .g-img.g-space-between .g-icon-img {
    background-image:url(../icon/display/justify-content/5.png);
}

.g-justify-content .g-img.g-space-evenly .g-icon-img {
    background-image:url(../icon/display/justify-content/6.png);
}


/* align-items*/
.g-align-items .g-img.g-center .g-icon-img {
    background-image:url(../icon/display/align-items/1.png);
}

.g-align-items .g-img.g-start .g-icon-img {
    background-image:url(../icon/display/align-items/2.png);
}

.g-align-items .g-img.g-end .g-icon-img {
    background-image:url(../icon/display/align-items/3.png);
}

.g-align-items .g-img.g-space-around .g-icon-img {
    background-image:url(../icon/display/align-items/4.png);
}

.g-align-items .g-img.g-baseline .g-icon-img {
    background-image:url(../icon/display/align-items/5.png);
}


/* justify-items*/
.g-justify-items .g-img.g-center .g-icon-img {
    background-image:url(../icon/display/justify-items/1.png);
}

.g-justify-items .g-img.g-start .g-icon-img {
    background-image:url(../icon/display/justify-items/2.png);
}

.g-justify-items .g-img.g-end .g-icon-img {
    background-image:url(../icon/display/justify-items/3.png);
}

.g-justify-items .g-img.g-stretch .g-icon-img {
    background-image:url(../icon/display/justify-items/4.png);
}

/* old 
.g-img.g-row .g-icon-img {background-image:url(../icon/display/flex-direction/1.png)}
.g-img.g-column .g-icon-img {background-image:url(../icon/display/flex-direction/2.png)}
.g-img.g-row-reverse .g-icon-img {background-image:url(../icon/display/flex-direction/3.png)}
.g-img.g-column-reverse .g-icon-img {background-image:url(../icon/display/flex-direction/4.png)}
.g-img.g-nowrap .g-icon-img {background-image:url(../icon/display/flex-wrap/1.png)}
.g-img.g-wrap .g-icon-img {background-image:url(../icon/display/flex-wrap/2.png)}
.g-img.g-center .g-icon-img {background-image:url(../icon/display/align-content/1.png)}
.g-img.g-start .g-icon-img {background-image:url(../icon/display/align-content/2.png)}
.g-img.g-end .g-icon-img {background-image:url(../icon/display/align-content/3.png)}
.g-img.g-space-around .g-icon-img {background-image:url(../icon/display/align-content/4.png)}
.g-img.g-space-between .g-icon-img {background-image:url(../icon/display/align-content/5.png)}
.g-img.g-stretch .g-icon-img {background-image:url(../icon/display/align-content/6.png)}
.g-img.g-center .g-icon-img {background-image:url(../icon/display/justify-content/1.png)}
.g-img.g-start .g-icon-img {background-image:url(../icon/display/justify-content/2.png)}
.g-img.g-end .g-icon-img {background-image:url(../icon/display/justify-content/3.png)}
.g-img.g-space-around .g-icon-img {background-image:url(../icon/display/justify-content/4.png)}
.g-img.g-space-between .g-icon-img {background-image:url(../icon/display/justify-content/5.png)}
.g-img.g-space-evenly .g-icon-img {background-image:url(../icon/display/justify-content/6.png)}
.g-img.g-center .g-icon-img {background-image:url(../icon/display/align-items/1.png)}
.g-img.g-start .g-icon-img {background-image:url(../icon/display/align-items/2.png)}
.g-img.g-end .g-icon-img {background-image:url(../icon/display/align-items/3.png)}
.g-img.g-space-around .g-icon-img {background-image:url(../icon/display/align-items/4.png)}
.g-img.g-baseline .g-icon-img {background-image:url(../icon/display/align-items/5.png)}
.g-img.g-center .g-icon-img {background-image:url(../icon/display/justify-items/1.png)}
.g-img.g-start .g-icon-img {background-image:url(../icon/display/justify-items/2.png)}
.g-img.g-end .g-icon-img {background-image:url(../icon/display/justify-items/3.png)}
.g-img.g-stretch .g-icon-img {background-image:url(../icon/display/justify-items/4.png)}
*/




/* classes menu */
.g-img.g-newclassadd .g-icon-img,
.g-img.g-selectoradd .g-icon-img,
.g-img.g-idchange .g-icon-img {
    background-image:url(../icon/icons8-add-24.png)
}

.g-img.g-copy .g-icon-img {
    background-image:url(../icon/icons8-copy-24.png);
}
.g-img.g-clear .g-icon-img {
    background-image:url(../icon/icons8-trash-24.png);
}


/*********    icons ends *********/