.jtk-node, .jtk-group {
    border: 1px solid var(--control-text-color);
    background-color: var(--diagram-background-color);
    border-radius: 3px;
    font-size: var(--basic-font-size);
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: var(--shadow-style)
}

.jtk-group.jtk-group-expanded {
    background-color: var(--expanded-diagram-background-color);
}

.controls i[selected]{
    outline: 2px solid #f7a45d;
}

.jtk-node {
    height: 98px;
    min-width: 100px;
    /*z-index: 11;*/
}

.jtk-group {
    /*z-index: 10;*/
    min-width: 220px;
    min-height: 68px;
}

.jtk-group.jtk-surface-selected-element {
    z-index: 12 ;
}

.jtk-group.jtk-most-recently-dragged {
    z-index: 12 ;
}

.jtk-node.jtk-surface-selected-element {
    z-index: 12 ;
}

.jtk-node.jtk-most-recently-dragged {
    z-index: 12 ;
}

.fake-link {
    cursor: pointer;
}

.fake-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.jtk-node-header {
    border-bottom: 1px solid var(--control-text-color);
    color: #2e6f9a;
    padding: 3px;
    text-align: center;
    font-weight: 500;
}

.jtk-node-body {
    /*padding: 8px;*/
    text-align: center;
    height: 56px;
    align-content: center;
    /*align-items: center;*/
    /*justify-content: center;*/
    display:grid    ;
}

.jtk-group-body {
    padding: 3px;
    /*text-align: center;*/
    /*height: 30px;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*display:flex;*/
}

.jtk-group-body .diagramLineWithIcon {
    display: flex;
    justify-content: center;
}
.jtk-group-body .diagramLineWithIcon span {
    margin-left: 2px;
    margin-right: 2px;
}



.jtk-group.jtk-drag-hover, .jtk-node.jtk-drag-hover {
    outline: 2px dashed var(--jtk-component-select);
    outline-offset: 2px;
}

.group-title {
    /*margin: 0;*/
    /*width: 100%;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*background-color: #9e9e9e;*/
    /*color: white;*/
    /*font-size: 13px;*/
    /*letter-spacing: 4px;*/
    /*text-transform: uppercase;*/
    /*text-indent: 7px;*/
    /*padding: 7px;*/
    /*box-sizing: border-box;*/
}

.group-title button {


    /*cursor: pointer;*/
    /*color: black;*/
    /*background-color: transparent;*/
    /*outline: none;*/
    /*width: 20px;*/
    /*height: 19px;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*border-radius: 50%;*/
    /*padding-bottom: 3px;*/
    /*margin-left: 5px;*/
    /*border: 1px solid transparent;*/

}

.group-title button:hover {
    /*background-color: #f7f7f7;*/
}

.group-title .expand {
    /*margin-left: auto;*/
}

.group-title .expand:after {
    /*content: "-";*/
}

.group-title .group-delete {
    /*right: 45px;*/
}

.group-title .group-delete:after {
    /*content: "x";*/
}

.group-connect {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.connect {
    cursor: pointer;
}

.jtk-group.jtk-group-expanded {
    /*background-color: transparent;*/
/*//var(--light-background-color-transparent);*/
}

.jtk-group.jtk-group-collapsed {
    /*background-color: var(--light-background-color-transparent);*/
}

.jtk-group.jtk-group-collapsed, .jtk-group.jtk-group-expanded.jtk-group-collapsed {
    width: 220px;
    min-height: 0;
}

.jtk-group.jtk-group-expanded {
    min-width: 220px;
}

.jtk-group.jtk-group-expanded .group-title i[expand] {
    display: none;
}
.jtk-group.jtk-group-expanded .group-title i[collapse] {
    display: inline-block;
}

.jtk-group.jtk-group-collapsed .group-title i[expand] {
    display: inline-block;
}

.jtk-group.jtk-group-collapsed .group-title i[collapse] {
    display: none;
}

.jtk-group.jtk-group-expanded .jtk-group-body{
    display: none;
}

.jtk-group.jtk-group-expanded .jtk-group.jtk-group-collapsed .jtk-group-body{
    display: block;
}

.jtk-group.jtk-group-collapsed{
    width: 220px;
    min-width: 220px;
    min-height: 60px;
}

.jtk-group.jtk-group-collapsed [data-jtk-group-content] {
    display:none;
}

.jtk-group [data-jtk-group-content] {
    min-height: 150px;
    margin: 5px;
    width: auto;
    overflow: visible;
    opacity: 1;
    /*background-color: transparent;*/
}

.jtk-group.jtk-group-collapsed [jtk-group-content] {
    display: none;
    min-height: 0;
}

.jtk-connector {
    z-index: 13;
}

.group-connector {
    z-index: 13;
}

.jtk-node .add, .jtk-node {
    position: absolute;
    top: 3px;
}


.jtk-surface.jtk-drag-drop-active {
    outline: 6px dotted #4ea758 !important;
}

.jtk-surface.jtk-drag-drop-hover {
    outline: 6px solid #f7a45d !important;
}

[data-jtk-managed].jtk-drag-drop-hover {
    outline: 6px solid #f7a45d !important;
}

:root {

    --jtk-component-outline: #1b1b1b;
    --jtk-component-select: yellowgreen;
    --jtk-component-critical: #d83f3f;
    /*
    The space between the frame around a selected node and the node itself. Specify this as a negative value if you change it. Unless you want the
    frame inside the element, I guess.
  */
    --jtk-draw-skeleton-padding: -0.6rem;

    --flowchartBuilderDragHover: orangered;
    --flowchartBuilderShapeOutline: var(--jtk-component-outline);
    --flowchartBuilderDeleteButtonBackground: #d83f3f;
    --flowchartBuilderDeleteButtonForeground: white;
    --flowchartBuilderConnectButtonBackground: #84acb3;
    --flowchartBuilderConnectButtonForeground: white;

    --flowchartBuilderGridLine: #aaa;

    --flowchartBuilderPaletteBorder: var(--jtk-component-outline);
}



.jtk-connect-left {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.jtk-connect-right {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
}

.jtk-connect-top {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.jtk-connect-bottom {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
}

/**
  Show connect elements on hover
 */
.jtk-node:hover .jtk-connect, .jtk-drag-selected .jtk-connect, .jtk-surface-touch-device .jtk-connect {
    display: flex;
}

.jtk-connect {
    cursor: pointer;
    background-color: var(--jtk-component-select);
    transition: transform 0.1s;
    position: absolute;
    z-index: 1; /* to ensure it appears above the draw skeleton */
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    color: var(--flowchartBuilderConnectButtonForeground);
    border-radius: 50%;
    /*opacity: 0.8;*/
    display: none;
}

.jtk-connect-left {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.jtk-connect-right {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
}

.jtk-connect-top {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.jtk-connect-bottom {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
}

/**
  Show connect elements on hover
 */
.jtk-node:hover .jtk-connect, .jtk-drag-selected .jtk-connect, .jtk-surface-touch-device .jtk-connect {
    display: flex;
}

/**
  Show connect elements on hover
 */
.jtk-group:hover .jtk-connect, .jtk-drag-selected .jtk-connect, .jtk-surface-touch-device .jtk-connect {
    display: flex;
}

.jtk-node .node-delete,
.jtk-group .node-delete{
    right: 4px;
    background-color: transparent;
}

.jtk-node .node-action:hover,
.jtk-group .node-action:hover{
    opacity: 1;
}

/*.jtk-node.jtk-surface-selected-element .node-action {*/
/*    display: block;*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    top:-20px;*/
/*    cursor:pointer;*/
/*    line-height: 15px;*/

/*}*/

.jtk-node:hover .delete,
.jtk-group:hover .delete{
    display: block;
}

.jtk-node .delete,
.jtk-group .delete{
    left: 100%;
    top: 0;
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
    position: absolute;
    font-size: 20px;
    cursor: pointer;
    color: #d83f3f;
    z-index: 1; /* to ensure it appears above the draw skeleton */
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    /*opacity: 0.8;*/
    display: none;
}

.jtk-schema-delete-relationship {
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    background-color: #d83f3f;
    z-index: 100;
}

.dot-spacer:after{
    content: "\2022";
}


.menuIcon{
    padding-right: 2px;
    cursor: pointer;
}

.diagramLineWithIcon i.mdi {
    cursor: pointer;
}


/* --------------------------- overlays --------------------------------- */


.jtk-label-overlay {
    background-color:#d83f3f;
    color:white;
    padding:2px;
    /*padding-left:5px;*/
    padding-right:5px;
    border-radius:50%;
    font-weight: bold;
    /*z-index:10;*/
}

/* --------------------------- / overlays --------------------------------- */


/* --------------------- edge styles ----------------------------------- */

/*
    style for the delete button. this is in fact supplied in the editable connectors css as a default but on our own site
    the cascade conspires to elide the background color and foreground color. Without wanting to mark the style as `!important` in our defaults stylesheet,
    we instead supply them again here.
 */
.jtk-edge-delete {
    background-color: orangered;
    color:white;
}
/**
Styles for a dashed edge.
 */
.jtk-flowchart-dashed-edge path {
    stroke-dasharray: 2 4;
}

/* styles for drag + drop */

.jtk-surface.jtk-drag-drop-active {
    outline:6px dotted #4ea758 !important;
}

.jtk-surface.jtk-drag-drop-hover {
    outline: 6px solid #f7a45d !important;
}

svg.jtk-drag-drop-hover, svg.jtk-drag-drop-active {
    outline:none !important;
}

svg.jtk-drag-drop-active path {
    stroke:#4ea758;
    stroke-width:2px;
    stroke-dasharray:2 0 2 5;
}

svg.jtk-drag-drop-hover path {
    stroke:#f7a45d;
    stroke-width:4px;
    stroke-dasharray:0;
}

.jtk-drag-drop-current {
    outline:2px solid pink;
}




/*
  The small discs from which the user can drag new connections. TODO not scoped to flowchart really.
 */
.jtk-connect {
    cursor: pointer;
    background-color: var(--jtk-component-select);
    transition: transform 0.1s;
    position:absolute;
    z-index:1; /* to ensure it appears above the draw skeleton */
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    color: var(--flowchartBuilderConnectButtonForeground);
    border-radius: 50%;
    /*opacity:0.8;*/
    display: none;
}

.jtk-connect-left {
    left:0;
    top:50%;
    transform: translate(-50%, -50%);
}

.jtk-connect-right {
    right:0;
    top:50%;
    transform: translate(50%, -50%);
}

.jtk-connect-top {
    left:50%;
    top:0;
    transform: translate(-50%, -50%);
}

.jtk-connect-bottom {
    left:50%;
    bottom:0;
    transform: translate(-50%, 50%);
}

/**
  Show connect elements on hover
 */
.jtk-node:hover .jtk-connect, .jtk-drag-selected .jtk-connect, .jtk-surface-touch-device .jtk-connect {
    display: flex;
}

/**
    When editing a path, show its anchor placeholder on top of any connect elements.
 */
.jtk-anchor-placeholder {
    z-index:2;
}


/*
 * A group of shapes.
 */
.jtk-shape-library-palette-set {
    display:flex;
    flex-wrap:wrap;
}

/*
 * A shape in the palette/canvas. Note that since the shapes are dragged to the canvas, if we want to specify any styles for
 * these that should only apply when being rendered in the palette, we need to narrow down the selector by including
 * the parent's class (see the rule below). If we did not split the rules out this way, we'd get all of these rules applying
 * to shapes that were being dragged to the canvas, which is usually undesirable (one key problem being margins: an element that
 * is being dragged should have no margins).
 */
.jtk-shape-library-palette-shape {
    fill: white;
    stroke: var(--flowchartBuilderShapeOutline);
    /*stroke-width: 2;(*/
}

/**
* Shapes in the palette. Note the use of the parent selector here: these rules only apply to shapes when they are
* in the palette, not when they are being dragged.
 */
.jtk-shape-library-palette-set .jtk-shape-library-palette-shape {
    width: 4rem;
    margin: 0.5rem;
}

/*
 * Required to ensure the SVG elements fill their parent elements.
 */
.jtk-shape-library-palette-shape > svg {
    width:100%;
    height:100%;
}

.jtk-shape-library-palette-shape svg * {
    vector-effect:non-scaling-stroke;
}

/**
  Style applied to a palette shape while it is being dragged onto the canvas (it is a direct parent of the body at this point)
 */
body > .jtk-shape-library-palette-shape {
    border:none;
    width:150px;
    height:100px;
}

/**
Applied to the drop down that lets the user pick their current shape set.
 */
.jtk-shape-library-palette-filter {
    width: 90%;
    padding: 3px;
    margin: 3px;
}

.jtk-background-grid-major {
    stroke:#ddd;
}

/* ---------------------------------------------------------------------------------------------- */
/* --------------------------- selected vertices ------------------------------ */
/* ---------------------------------------------------------------------------------------------- */

/*
    Assigned to the element that is drawn around some other element when a drawing operation is taking place.
*/
.jtk-draw-skeleton {
    position: absolute;
    left: var(--jtk-draw-skeleton-padding);
    right: -0.6rem;
    top: -0.6rem;
    bottom: -0.6rem;
    outline: 0.125rem solid var(--jtk-component-select);
    opacity: 0.8;
}

/*
    Assigned to every handle (top left, top right, bottom left, bottom right, center) in a draw skeleton.
*/
.jtk-draw-handle {
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    border-radius:50%;
    background-color: var(--jtk-component-select);
}

/*
    Assigned to the top left handle in a draw skeleton
*/
.jtk-draw-handle-tl {
    left: -0.3rem;
    top: -0.3rem;
    cursor: nw-resize;
}

/*
    Assigned to the top right handle in a draw skeleton
*/
.jtk-draw-handle-tr {
    right: -0.3rem;
    top: -0.3rem;
    cursor: ne-resize;
}

/*
    Assigned to the bottom left handle in a draw skeleton
*/
.jtk-draw-handle-bl {
    left: -0.3rem;
    bottom: -0.3rem;
    cursor: sw-resize;
}

/*
    Assigned to the bottom right handle in a draw skeleton
*/
.jtk-draw-handle-br {
    bottom: -0.3rem;
    right: -0.3rem;
    cursor: se-resize;
}

.jtk-anchor-placeholder {
    z-index:13;
}

/* ----------------------------------------------------------------------------------------------- */
/* -------------------------  styles for connector paths when editing ---------------------------- */
/* ----------------------------------------------------------------------------------------------- */

/*
    `jtk-connection-edit` is a class set on an edge that is being edited. As of 6.2.0 we don't set a default for this.
    Note that the class is set on the parent SVG element, not the path element.
*/
.jtk-connection-edit path {

}

/* ----------------------------------------------------------------------------------------------- */
/* --------------------    Styles for Orthogonal editor ------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

.jtk-orthogonal-handle {
    display: none !important;
    visibility: hidden !important;
    /*width:20px;*/
    /*height:20px;*/
    /*line-height: 20px;*/
    /*text-align: center;*/
    /*font-size:13px;*/
    /*border-radius:50%;*/
    /*background-color:#f7f6f6;*/
    /*cursor:move;*/
    /*z-index:10;*/
    /*color:black;*/
    /*box-shadow: 0 0 10px;*/
}

.jtk-orthogonal-segment-drag {
    cursor:move;
    cursor:grab;
}

.jtk-orthogonal-segment-drag-ns:before {
    content:"\2195";
}

.jtk-orthogonal-segment-drag-ew:before {
    content:"\2194";
}

.jtk-orthogonal-segment-drag:hover {
    background-color: white;
}

/* ----------------------------------------------------------------------------------------------- */
/* --------------------    Styles for Bezier/StateMachine editor --------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

/*
    Identifies a handle used to drag a control point.
*/
.jtk-bezier-handle {
    width:15px;
    height:15px;
    line-height:15px;
    border-radius:50%;
    background-color:darkcyan;
    cursor:move;
    z-index:10;
    font-size:8px;
    font-family: sans-serif;
    color: white;
    text-align: center;
}

.jtk-bezier-handle-control-point { }

/*
    The drag handle corresponding to the first control point. For StateMachine connectors only this handle is shown.
 */
.jtk-bezier-handle-control-point-1:before {
    content:"1";
}

/*
    The drag handle corresponding to the second control point. For StateMachine connectors only this handle is shown.
 */
.jtk-bezier-handle-control-point-2:before {
    content:"2";
}

.jtk-bezier-handle-control-point-3:before {
    content:"3";
}

.jtk-bezier-handle-control-point-4:before {
    content:"4";
}

.jtk-bezier-handle-secondary {
    cursor:default;
    background-color:lightgreen;
}

.jtk-bezier-handle-secondary-source {
    background-color: lavenderblush;
}

.jtk-bezier-guideline {
    position:absolute;
    stroke-dasharray: 2;
}

.jtk-bezier-guideline path {
    stroke:darkcyan;
    stroke-linewidth:3;
}

/* ----------------------------------------------------------------------------------------------- */
/* -----------------------------   Styles for anchor placeholders -------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

/*
    Added to the element placed at the location of an anchor for a connection that is being edited. This applies
    to both dynamic and continuous anchors. Fixed anchors cannot be relocated.
*/
.jtk-anchor-placeholder {
    display: none !important;
    visibility: hidden !important;
    /*width: 20px;*/
    /*height: 20px;*/
    /*cursor: move;*/
    /*cursor:grab;*/
    /*border-radius: 50%;*/
    /*background-color:#f7f6f6;*/
    /*box-shadow: 0 0 4px;*/
}

/*
    Added to the elements drawn to show where a certain anchor may be relocated to (for dynamic anchors)
*/
.jtk-anchor-candidate {
    background-color:mediumseagreen;
    width: 20px;
    height: 20px;
}

/*
    `jtk-anchor-face` is an attribute written onto an element (source or target) when the connection that is being edited
    has `Continuous` anchors, and the user is dragging an anchor point to relocate it. The value of the attribute is the
    candidate face on the element.
 */
[jtk-anchor-face='left'] {
    border-left:4px solid gold !important;
}

[jtk-anchor-face='top'] {
    border-top:4px solid gold !important;
}

[jtk-anchor-face='right'] {
    border-right:4px solid gold !important;
}

[jtk-anchor-face='bottom'] {
    border-bottom:4px solid gold !important;
}


/* --------------------------------------------------------------------------------------------------------------------- */
/* --------------------------- edge delete button ---------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------- */

.jtk-edge-delete {
    width:15px;
    height:15px;
    line-height: 15px;
    text-align: center;
    background-color:#d83f3f;
    color:white;
    border-radius:50%;
    font-size:12px;
    cursor:pointer;
    font-family:sans-serif;
    visibility: visible !important;
    z-index: 100;
}

.jtk-edge-delete:before {
    content:"×";
}

.jtk-group.jtk-drag-hover .jtk-connect, .jtk-node.jtk-drag-hover  .jtk-connect{
    display:none;
}

.jtk-source-hover, .jtk-target-hover {
    outline: var(--jtk-component-select) solid 2px;
    outline-offset: 2px;
}

.jtk-highlighted {
    outline: var(--jtk-component-select) solid 2px;
    outline-offset: 2px;
}

.jtk-critical {
    outline: var(--jtk-component-critical) solid 2px;
    outline-offset: 2px;
}

.diagramCustomOverlay{
    border: 1px solid var(--control-text-color);
    border-radius: 3px;
    padding: 2px;
    text-align: center;
    font-size: var(--decreased-font-size);
    white-space: nowrap;
    cursor: pointer;
    font-weight: 500;
    font-family:  'Roboto', sans-serif;
}

.hiddenDiagramCustomOverlay{
    display: none;
}

.jtk-connector:hover, .jtk-connector.jtk-hover {
    z-index: 100;
    /*color: #434343;*/
}

.jtk-connector:hover, .jtk-connector.jtk-hover {
    z-index: 100;
    /*color: #434343;*/
    /*stroke: red;*/
    /*!*stroke-width: 30px;*!*/
}

/*.jtk-connector path {*/
/*    stroke:#89bcde;*/
/*    stroke-width:1px;*/
/*}*/

.jtk-connector:hover{

}
.jtk-connector:hover path {
    stroke: rgba(255, 135, 0, 1);
    stroke-width: 3px;
}

.jtk-connector:hover path.jtk-connector-outline {
    stroke: transparent;
    cursor: pointer;
    z-index: 100;
    stroke-width: 10px;
}


/** applied to a node that a path is traversing on its way to another node */
/*.jtk-animate-node-traversing {*/
/*    outline-width: 4px;*/
/*}*/

.jtk-animate-source {
    outline-width: 4px;
}

.jtk-animate-target {
    outline-width: 4px;
}

.jtk-animate-source-success,
.jtk-animate-target-success{
    outline: 2px solid var(--jtk-component-select);
    transition-duration: 100ms;
    transition-property: outline;
}

.success-outline {
    outline: 2px solid var(--jtk-component-select);
    transition-duration: 100ms;
    transition-property: outline;
}

.diagramCustomOverlay:hover {
    outline: 2px solid var(--jtk-component-select);
    transition-duration: 100ms;
    transition-property: outline;
}

.jtk-animate-source-failure,
.jtk-animate-target-failure{
    outline: 2px solid #d83f3f;
    transition-duration: 100ms;
    transition-property: outline;
}

/*.jtk-animate-source-success.jtk-animate-node-traversing,*/
.jtk-animate-target-success.jtk-animate-node-traversing{
    outline: 4px solid var(--jtk-component-select);
}

/*.jtk-animate-source-failure.jtk-animate-node-traversing,*/
.jtk-animate-target-failure.jtk-animate-node-traversing{
    outline: 4px solid #d83f3f;
}



/*.jtk-animate-edge-traversable path {*/
/*    stroke: brown;*/
/*    stroke-width: 15px;*/
/*}*/

.jtk-animate-edge-traversed path {
    stroke: black;
    stroke-width: 25px;
}

/** applied to an edge that an overlay is traversing */
.jtk-animate-edge-traversing path {
    stroke-width:4px;
}

.jtk-animate-edge-success path {
    stroke: yellowgreen;
    stroke-width:2;
}

.jtk-animate-edge-success .jtk-overlay{
    fill: yellowgreen;
}



.jtk-animate-edge-failure path {
    stroke: #d83f3f;
    stroke-width:2px;
}

.jtk-animate-edge-failure .jtk-overlay {
    fill: #d83f3f;
}

.animated-highlight{
    animation-name: highlight;
    animation-duration: 1.5s;
    outline-color: rgba(154, 205, 50, 0);
    outline-style: solid;
    outline-width: 5px;
}

@keyframes highlight {

    15%  {outline-color: rgba(154, 205, 50, 0.8);}
    30%  {outline-color: rgba(154, 205, 50, 0.0);}
    45%  {outline-color: rgba(154, 205, 50, 0.6);}
    60%  {outline-color: rgba(154, 205, 50, 0.0);}
    75%  {outline-color: rgba(154, 205, 50, 0.4);}
    /*0%  {outline-width: 2px;outline-offset: 0px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*10%  {outline-width: 2px;outline-offset: 5px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*40%  {outline-width: 2px;outline-offset: 0px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*50%  {outline-width: 2px;outline-offset: 5px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*80%  {outline-width: 2px;outline-offset: 0px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*25%  {outline-width: 2px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*20%  {outline-width: 2px;outline-offset: 5px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*50%  {outline-width: 2px;outline-offset: 0px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*70%  {outline-width: 2px;outline-offset: 5px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*75%  {outline-width: 10px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*60%  {outline-width: 5px; outline-offset: 3px; outline-color: rgba(247, 164, 93, 0.4);outline-style: solid}*/
    /*80%  {outline-width: 1px; outline-offset: 5px; outline-color: rgba(247, 164, 93, 0);outline-style: solid}*/

    /*20%  {outline-width: 10px; outline-color: rgba(247, 164, 93, 0.8);outline-style: solid;}*/
    /*60%  {outline-width: 5px; outline-offset: 3px; outline-color: rgba(247, 164, 93, 0.4);outline-style: solid}*/
    /*80%  {outline-width: 1px; outline-offset: 5px; outline-color: rgba(247, 164, 93, 0);outline-style: solid}*/
}

i.fa[status='WAITING']:before{
    content: "\f252";
}
i.fa[status='READY']:before{
    content: "\f164";
}
i.fa[status='EXECUTING'] {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}
i.fa[status='EXECUTING']:before{
    content: "\f013";
}
i.fa[status='COMPLETED']:before{
    content: "\f058";
}
i.fa[status='FAILED']:before{
    content: "\f057";
}