/*! JointJS+ v4.0.0 - HTML5 Diagramming Framework

Copyright (c) 2024 client IO

 2024-02-03 


This Source Code Form is subject to the terms of the JointJS+ License
, v. 2.0. If a copy of the JointJS+ License was not distributed with this
file, You can obtain one at https://www.jointjs.com/license
 or from the JointJS+ archive as was distributed by client IO. See the LICENSE file.*/


.joint-paper-scroller {
    position: relative;
    overflow: scroll;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* prevent an infinite loop when no size defined */
    max-height: 100000px;
    max-width: 100000px;
}

.joint-paper-scroller > .paper-scroller-background {
    margin: 0;
    position:relative;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
}

.joint-paper-scroller .joint-paper {
    margin: 0;
    position:absolute;
    display: inline-block;
}

.joint-paper-scroller .joint-paper > svg {
    display: block;
}

/* Cursors */

.joint-paper-scroller[data-cursor="grab"] {
    cursor: all-scroll; /* fallback: no `url()` support or images disabled */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor: -moz-grab; /* Firefox 1.5-26 */
    cursor: grab; /* W3C standards syntax, should come least */
}

.joint-paper-scroller[data-cursor="grab"].is-panning {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

.joint-selection {
   display: none;
   touch-action: none;
}

.joint-selection.lasso {
   display: block;
   position: absolute;
   opacity: .3;
   overflow: visible;
}

.joint-selection.selected {
   display: block;
   background-color: transparent;
   opacity: 1;
   cursor: move;
   /* Position the selection rectangle static so that the selection-box's are contained within
     the paper container (which is supposed to be positioned relative). The height 0 !important
     makes sure the selection rectangle is not-visible, only the selection-boxes inside it (thanks to overflow: visible). */
   position: static;
   height: 0 !important;
}

.selection-box {
   position: absolute;
   padding-right: 5px;
   padding-bottom: 5px;
   margin-top: -4px;
   margin-left: -4px;
   box-sizing: content-box;
}

.selection-box-no-events {
   pointer-events: none;
}

.selection-wrapper {
    position: absolute;
    margin-left: -6px;
    margin-top: -6px;
    padding-right: 9px;
    padding-bottom: 9px;
    pointer-events: none;
    box-sizing: content-box;
}
/* If there is zero or only one element selected, we hide the
   selection wrapper by default. */
.selection-wrapper[data-selection-length="0"],
.selection-wrapper[data-selection-length="1"] {
    display: none;
}

.joint-selection .box {
   position: absolute;
   top: 100%;
   margin-top: 30px;
   left: -20px;
   right: -20px;
   text-align: center;
   line-height: 14px;
   border-radius: 6px;
   padding: 6px;
}

/* Handle Positions */

.joint-selection .handle.se {
   bottom: -25px;
   right: -25px;
}
.joint-selection .handle.nw {
   top: -21px;
   left: -25px;
}
.joint-selection .handle.n {
   top: -22px;
   left: 50%;
   margin-left: -10px;
}
.joint-selection .handle.e {
   right: -25px;
   top: -webkit-calc(50% - 10px);
   top: calc(50% - 10px);
}
.joint-selection .handle.ne {
   top: -21px;
   right: -25px;
}
.joint-selection .handle.w {
   left: -25px;
   top: 50%;
   margin-top: -10px;
}
.joint-selection .handle.sw {
   bottom: -25px;
   left: -25px;
}
.joint-selection .handle.s {
   bottom: -24px;
   left: 50%;
   margin-left: -10px;
}

/* Default handles. */

.joint-selection .handle {
   position: absolute;
   pointer-events: auto;
   width: 20px;
   height: 20px;
   background-size: 20px 20px;
   background-repeat: no-repeat;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-user-drag: none;
   cursor: pointer;
}

.joint-selection .remove {
   cursor: pointer;
}
.joint-selection .rotate {
   cursor: move;
}
.joint-selection .box:empty {
   display: none;
}

.joint-halo {
   position: absolute;
   pointer-events: none;
}

.joint-halo .handle {
   position: absolute;
   pointer-events: auto;
   width: 20px;
   height: 20px;
   background-size: 20px 20px;
   background-repeat: no-repeat;
   -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.joint-halo .handle {
   cursor: pointer;
}

.joint-halo .handle.hidden {
    display: none;
}

/* Built-in handles. */
/* remove and unlink handles should have a pointer cursor */

.joint-halo .resize {
   cursor: se-resize;
}

.joint-halo .clone {
   cursor: move;
}

.joint-halo .link {
   cursor: move;
   cursor: -moz-grabbing;
   cursor: -webkit-grabbing;
}

.joint-halo .fork {
   cursor: move;
}

.joint-halo .rotate {
   cursor: move;
}

/* Box */

.joint-halo .box {
   position: absolute;
   top: 100%;
   text-align: center;
   font-size: 10px;
   line-height: 14px;
   border-radius: 6px;
   padding: 6px;
}

/* Type surrounding */

.joint-halo.surrounding .box {
   left: -20px;
   right: -20px;
   margin-top: 30px;
}


.joint-halo.surrounding.small .box {
   margin-top: 25px;
}

.joint-halo.surrounding.tiny .box {
   margin-top: 20px;
}

.joint-halo.surrounding.animate .handle {
   transition: background-size 80ms, width 80ms, height 80ms, top 150ms, left 150ms, bottom 150ms, right 150ms;
}

.joint-halo.surrounding.small .handle {
   width: 15px;
   height: 15px;
   background-size: 15px 15px;
   font-size: 15px;
}

.joint-halo.surrounding.tiny .handle {
   width: 10px;
   height: 10px;
   background-size: 10px 10px;
   font-size: 10px;
}

/* Positions */

.joint-halo.surrounding .handle.se {
   bottom: -25px;
   right: -25px;
}
.joint-halo.surrounding.small .handle.se {
   bottom: -19px;
   right: -19px;
}
.joint-halo.surrounding.tiny .handle.se {
   bottom: -13px;
   right: -15px;
}

.joint-halo.surrounding .handle.nw {
   top: -21px;
   left: -25px;
}
.joint-halo.surrounding.small .handle.nw {
   top: -19px;
   left: -19px;
}
.joint-halo.surrounding.tiny .handle.nw {
   top: -13px;
   left: -15px;
}

.joint-halo.surrounding .handle.n {
   top: -22px;
   left: 50%;
   margin-left: -10px;
}
.joint-halo.surrounding.small .handle.n {
   top: -19px;
   margin-left: -7.5px;
}
.joint-halo.surrounding.tiny .handle.n {
   top: -13px;
   margin-left: -5px;
}

.joint-halo.surrounding .handle.e {
   right: -26px;
   top: -webkit-calc(50% - 10px);
   top: calc(50% - 9px);
}
.joint-halo.surrounding.small .handle.e {
   right: -19px;
   top: -webkit-calc(50% - 8px);
   top: calc(50% - 8px);
}
.joint-halo.surrounding.tiny .handle.e {
   right: -15px;
   top: -webkit-calc(50% - 5px);
   top: calc(50% - 5px);
}

.joint-halo.surrounding .handle.ne {
   top: -21px;
   right: -25px;
}
.joint-halo.surrounding.small .handle.ne {
   top: -19px;
   right: -19px;
}
.joint-halo.surrounding.tiny .handle.ne {
   top: -13px;
   right: -15px;
}

.joint-halo.surrounding .handle.w {
   left: -25px;
   top: 50%;
   margin-top: -10px;
}
.joint-halo.surrounding.small .handle.w {
   left: -19px;
   margin-top: -8px;
}
.joint-halo.surrounding.tiny .handle.w {
   left: -15px;
   margin-top: -5px;
}

.joint-halo.surrounding .handle.sw {
   bottom: -25px;
   left: -25px;
}
.joint-halo.surrounding.small .handle.sw {
   bottom: -19px;
   left: -19px;
}
.joint-halo.surrounding.tiny .handle.sw {
   bottom: -13px;
   left: -15px;
}

.joint-halo.surrounding .handle.s {
   bottom: -24px;
   left: 50%;
   margin-left: -10px;
}
.joint-halo.surrounding.small .handle.s {
   bottom: -19px;
   margin-left: -7.5px;
}
.joint-halo.surrounding.tiny .handle.s {
   bottom: -13px;
   margin-left: -5px;
}

.joint-halo.surrounding .handle.selected {
    background-color: rgba(0,0,0,0.1);
    border-radius: 3px;
}

/* Pie type */

.joint-halo.pie .box {
    margin-top: 10px;
    left: 0;
    right: 0;
}

@-webkit-keyframes pie-visibility {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}

@-moz-keyframes pie-visibility {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}

@-o-keyframes pie-visibility {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}

@keyframes pie-visibility {
    0% { visibility: hidden; }
    100% { visibility: visible; }
}

@-webkit-keyframes pie-opening {
    0% { transform: scale(0.4) rotate(-20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@-moz-keyframes pie-opening {
    0% { transform: scale(0.4) rotate(-20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@-o-keyframes pie-opening {
    0% { transform: scale(0.4) rotate(-20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes pie-opening {
    0% { transform: scale(0.4) rotate(-20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.joint-halo.pie {
    margin: -2px 0 0 -2px;
}

.joint-halo.pie .handles {
    display: none;
    z-index: 1;
    pointer-events: visiblePainted;
    height: 100px;
    width: 100px;
    position: absolute;
    right: -50px;
    top: -webkit-calc(50% - 50px);
    top: calc(50% - 50px);
    margin: -2px -2px 0 0;
    border-radius: 50%;
    cursor: default;
}

.joint-halo.pie.open .handles {
    display: block;
    -webkit-animation: pie-visibility 0.1s, pie-opening 0.1s;
    -moz-animation: pie-visibility 0.1s, pie-opening 0.1s;
    -o-animation: pie-visibility 0.1s, pie-opening 0.1s;
    animation: pie-visibility 0.1s, pie-opening 0.1s;
    -webkit-animation-delay: 0s, 0.1s;
    -moz-animation-delay: 0s, 0.1s;
    -o-animation-delay: 0s, 0.1s;
    animation-delay: 0s, 0.1s;
    -webkit-animation-timing-function: step-end, ease;
    -moz-animation-timing-function: step-end, ease;
    -o-animation-timing-function: step-end, ease;
    animation-timing-function: step-end, ease;
}

/* It's not possible to override the pointer-events in IE on SVG elements.
   So we make the parent element of the slice really small and set the
   overflow: visible. */
.joint-halo.pie .handle {
    pointer-events: visiblePainted;
    height: auto;
    width: 1px;
}

.joint-halo.pie .slice-text-icon,
.joint-halo.pie .slice-img-icon {
    pointer-events: none;
    display: none;
}

.joint-halo.pie .slice {
   pointer-events: auto;
}

.joint-halo.pie .slice-svg {
    overflow: visible;
    pointer-events: none;
}

/* toggle pie button  */

.joint-halo.pie .pie-toggle {
    z-index: 2;
    pointer-events: visiblePainted;
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    position: absolute;
    right: -15px;
    top: -webkit-calc(50% - 15px);
    top: calc(50% - 15px);
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.joint-halo.pie .pie-toggle.e {
    top: -webkit-calc(50% - 15px);
    top: calc(50% - 15px);
    right: -15px;
    left: auto;
    bottom: auto;
}
.joint-halo.pie .pie-toggle.w {
    top: -webkit-calc(50% - 15px);
    top: calc(50% - 15px);
    left: -15px;
    right: auto;
    bottom: auto;
}
.joint-halo.pie .pie-toggle.n {
    left: -webkit-calc(50% - 15px);
    left: calc(50% - 15px);
    top: -15px;
    right: auto;
    bottom: auto;
}
.joint-halo.pie .pie-toggle.s {
    left: -webkit-calc(50% - 15px);
    left: calc(50% - 15px);
    bottom: -15px;
    right: auto;
    top: auto;
}

.joint-halo.pie[data-pie-toggle-position="e"] .handles {
    left: auto;
    right: -50px;
    top: -webkit-calc(50% - 50px);
    top: calc(50% - 50px);
}
.joint-halo.pie[data-pie-toggle-position="w"] .handles {
    left: -52px;
    right: auto;
    top: -webkit-calc(50% - 50px);
    top: calc(50% - 50px);
}
.joint-halo.pie[data-pie-toggle-position="n"] .handles {
    bottom: auto;
    top: -50px;
    right: auto;
    left: -webkit-calc(50% - 52px);
    left: calc(50% - 52px);
}
.joint-halo.pie[data-pie-toggle-position="s"] .handles {
    top: auto;
    bottom: -52px;
    right: auto;
    left: -webkit-calc(50% - 52px);
    left: calc(50% - 52px);
}

.joint-halo.pie.open .pie-toggle {
    -webkit-transition: 0.1s background-image;
    -moz-transition: 0.1s background-image;
    -ms-transition: 0.1s background-image;
    -o-transition: 0.1s background-image;
    transition: 0.1s background-image;
}

/* Type toolbar */

.joint-halo.toolbar .handles {
    display: table-row;
    position: absolute;
    top: -50px;
    padding: 7px 5px;
}

.joint-halo.toolbar .handles:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    margin-top: 4px;
    left: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.joint-halo.toolbar .handle {
    display: table-cell;
    position: relative;
    margin: 0 2px;
    background-size: 16px 16px;
    background-position: 3px 3px;
    /* disallow the cell shrinking */
    min-width: 20px;
}

.joint-halo.toolbar .handle.hidden {
    display: none;
}

/* It's important to add the pseudo element to the dom when we render the table cell (handle)
   otherwise FF would expand the entire table on hover. */
.joint-halo.toolbar .handle:after {
    content: '';
    position: absolute;
    /* top: 100%; margin-top: 7px;  does not work in IE. */
    bottom: -11px;
    width: 100%;
}

.joint-halo.toolbar .box {
   left: -20px;
   right: -20px;
   margin-top: 30px;
}

.joint-stencil {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.joint-stencil > .content {
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: var(--resizer-width);
    z-index: 1;
}

.joint-inspector > .content {
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    top: 0;
    bottom: 0;
    left: var(--resizer-width);
    right: 0;
    z-index: 1;
    background: var(--white-1000)
}

.joint-resizer {
    width: var(--resizer-width);
    height: 100%;
    cursor: col-resize;
}

.resizer-inspector {
    margin: 0 calc(100% - var(--resizer-width)) 0 0;
}

.resizer-stencil {
    margin: 0 0 0 calc(100% - var(--resizer-width));
}

.stencil-container > .joint-resizer {
    flex-basis: 0.5rem;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    color: var(--blue-50);
    background-color: var(--blue-500);
}

.inspector-container > .joint-resizer {
    flex-basis: 0.5rem;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    color: var(--blue-50);
    background-color: var(--blue-500);
}

.btn-resizer {
  color: var(--blue-50);
  background-color: var(--gray-10);
  border-color: var(--gray-10);
  margin: 0;
  padding: 0;
}

.btn-resizer:hover {
  color: var(--blue-50);
  background-color: var(--yellow-100);
  border-color: var(--yellow-100);
}

.joint-resizer > .btn-resizer {
    width: calc(var(--resizer-width) / 2);
    height: calc(var(--resizer-width)*5);
    border-radius: calc(var(--resizer-width) / 2);
    border: 1px solid var(--gray-100);
}

.btn-resizer > img {
    transform: rotate(0.5turn);
    width: 100%;
    height: 100%;
}

.joint-stencil.searchable > .content {
    top: 30px;
}

.joint-stencil.collapsible > .content {
    top: 30px;
}

.joint-stencil.collapsible.searchable > .content {
    top: 50px;
}

.joint-stencil .joint-elements {
    height: 100%;
    width: 100%;
}

/* This element is being dragged when a new element is about to be dropped into the main paper. */
.stencil-paper-drag {
    z-index: 100;
    top: -10000px;
    left: -10000px;
    display: none;
    background: none !important;
    opacity: .7;
    cursor: none;
    pointer-events: none;
}
.stencil-paper-drag.dragging {
    display: inline-block;
}
.stencil-paper-drag.dragging * {
    pointer-events: none !important;
}

.joint-stencil .group {
    overflow: hidden;
    padding: 0;
    padding-bottom: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.joint-stencil .group.closed {
    height: auto;
    padding-bottom: 0;
}

.joint-stencil .group > .group-label {
    position: relative;
    padding: 5px 4px;
    margin-top: 0;
    margin-bottom: 0;
    cursor: pointer;
}

.joint-stencil .joint-element [magnet]:not([magnet="passive"]) {
    pointer-events: none;
}

/* .group.unmatched and .joint-element.unmatched */
.joint-stencil .unmatched {
    opacity: 0.3;
}

.joint-stencil .search {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    max-height: 30px;
    line-height: 30px;
    z-index: 0;
    outline: none;
    position: relative;
}

/* Not found popover. */

.joint-stencil:after {
    display: block;
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 8px 0;
    text-align: center;
    opacity: 0;
    transition: top 100ms linear, opacity 100ms linear;
}

.joint-stencil.not-found:after {
    content: attr(data-text-no-matches-found);
    opacity: 1;
}

.joint-stencil.not-found.searchable:after {
    top: 30px;
}

.joint-stencil.not-found.searchable.collapsible:after {
    top: 50px;
}

.joint-stencil .groups-toggle .group-label:hover {
    cursor: pointer;
}

.joint-stencil .group > .group-label,
.joint-stencil .groups-toggle > .group-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.joint-stencil .groups-toggle > .group-label {
    padding: 0 5px 0 53px;
}

/* By default, unmatched elements are hidden. See below for making them opaque instead. */
.joint-stencil .joint-element.unmatched {
    display: none;
}
.joint-stencil .group.unmatched {
    display: none;
}

/*
Use the following in your custom CSS to make
unmatched elements opaque instead of completely invisible which is the default.
*/
/*
.joint-stencil .joint-element.unmatched {
    display: block;
}
.joint-stencil .group.unmatched {
    display: block;
}
*/

.joint-inspector {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   overflow: hidden!important;
}

.joint-inspector label {
   display: block;
   margin-top: 5px;
   margin-bottom: 10px;
}
.joint-inspector label:after {
    content: ':';
}
/* .joint-inspector input,
.joint-inspector textarea {
   width: 200px;
   height: 20px;
   line-height: 20px;
} */

.joint-inspector label.with-output {
    float: left;
}

.joint-inspector output {
    float: left;
    margin: 5px 2px 10px 2px;
}

.joint-inspector .units {
    float: left;
    margin: 5px 0 10px 0;
}

.joint-inspector input[type="range"] {
   clear: both;
   display: block;
}

.joint-inspector select {
   display: block;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10 only */
    .joint-inspector .group > .field > form {
	height: 60px;
    }

    .joint-inspector input[type="range"] {
	height: 10px;
    }

    .joint-inspector input[type="range"]::-ms-tooltip {
	display: none;
    }
}

.joint-inspector .group {
    overflow: hidden;
    padding: 0;
    padding-bottom: 10px;
}
.joint-inspector .group.closed {
    height: auto;
    padding-bottom: 0;
}
.joint-inspector .group.empty {
    display: none;
}

/* prevent tabbing into a close group */
.joint-inspector .group.closed .field {
   display: none;
}

.joint-inspector .group > .group-label {
   position: relative;
   padding: 5px 4px;
   margin-top: 0;
   margin-bottom: 0;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.joint-inspector .group > .group-label:before {
   content: '';
   width: 0;
   height: 0;
   display: inline-block;
   margin-left: 2px;
   margin-right: 5px;
   position: relative;
   top: 5px;
}
.joint-inspector .group.closed > .group-label:before {
   top: 2px;
   left: 2px;
}

.link-tools .tool-options {
   display: block;
}

/* Toggle */

.joint-inspector .toggle {
   position: relative;
   width: 97px;
   height: 14px;
}
.joint-inspector .toggle input {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -moz-opacity: 0;
   opacity: 0;
   z-index: 100;
   position: absolute;
   width: 100%;
   height: 100%;
   cursor: pointer;
   box-sizing: border-box;
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
}
.joint-inspector .toggle span {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 40px;
   position: relative;
}
.joint-inspector .toggle span:before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   content: "";
   position: absolute;
   z-index: -1;
   top: -18px;
   right: -18px;
   bottom: -18px;
   left: -18px;
   border-radius: inherit;
}
.joint-inspector .toggle input:checked + span i {
   right: 0;
}
.joint-inspector .toggle span i {
   display: block;
   height: 100%;
   width: 60%;
   border-radius: inherit;
   position: absolute;
   z-index: 2;
   right: 40%;
   top: 0;
}
.joint-inspector .btn-list-add,
.joint-inspector .btn-list-del {
   cursor: pointer;
   border-radius: 2px;
   min-width: 23px;
   margin: 2px;
   margin-right: 8px;
}

.joint-inspector .list-items {
   margin-top: 4px;
}
.joint-inspector .list-item {
   margin-top: 2px;
   padding: 10px;
}

.joint-inspector .list-item > .field > label {
   display: none;
}

.joint-inspector .field {
    display: block;
    box-sizing: border-box;
    padding: 4px 10px;
}

.joint-inspector .hidden {
   display: none !important;
}

/* Built-in types */

.joint-inspector .joint-select-box {
    width: 100%;
}
.joint-inspector .joint-color-palette {
    width: auto;
}

.joint-inspector .content-editable {
    white-space: pre-wrap;
    /* Safari & Firefox: `user-select: none` is preventing the cursor
    from ever being positioned within the contentEditable div */
    -webkit-user-select: auto;
    -moz-user-select: text;
}

/* IE: content-editable adds <p> tags, so remove their default spacing */
.joint-inspector .content-editable * {
    margin: 0;
    padding: 0;
}

.joint-free-transform {
    position: absolute;
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    box-sizing: border-box;
}

.joint-free-transform > div {
    position: absolute;
    pointer-events: auto;
    box-sizing: content-box;
}

/* prevent chromium bug */
/* https://bugs.chromium.org/p/chromium/issues/detail?id=639227 */
.joint-free-transform .resize,
.joint-free-transform .rotate {
    touch-action: none;
}

.joint-free-transform .resize {
    border-radius: 6px;
    width: 8px;
    height: 8px;
}

.joint-free-transform .resize[data-position="top-left"] {
    top: -5px;
    left: -5px;
}
.joint-free-transform .resize[data-position="top-right"] {
    top: -5px;
    right: -5px;
}
.joint-free-transform .resize[data-position="bottom-left"] {
    bottom: -5px;
    left: -5px;
}
.joint-free-transform .resize[data-position="bottom-right"] {
    bottom: -5px;
    right: -5px;
}
.joint-free-transform .resize[data-position="top"] {
    top: -5px;
    left: 50%;
    margin-left: -5px;
}
.joint-free-transform .resize[data-position="bottom"] {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}
.joint-free-transform .resize[data-position="left"] {
    left: -5px;
    top: 50%;
    margin-top: -5px;
}
.joint-free-transform .resize[data-position="right"] {
    right: -5px;
    top: 50%;
    margin-top: -5px;
}

.joint-free-transform.no-orthogonal-resize .resize[data-position="top"],
.joint-free-transform.no-orthogonal-resize .resize[data-position="bottom"],
.joint-free-transform.no-orthogonal-resize .resize[data-position="left"],
.joint-free-transform.no-orthogonal-resize .resize[data-position="right"] {
    display: none;
}

.joint-free-transform .resize.n { cursor: n-resize; }
.joint-free-transform .resize.s { cursor: s-resize; }
.joint-free-transform .resize.e { cursor: e-resize; }
.joint-free-transform .resize.w { cursor: w-resize; }
.joint-free-transform .resize.ne { cursor: ne-resize; }
.joint-free-transform .resize.nw { cursor: nw-resize; }
.joint-free-transform .resize.se { cursor: se-resize; }
.joint-free-transform .resize.sw { cursor: sw-resize; }

.joint-free-transform .rotate {
    border-radius: 6px;
    width: 10px;
    height: 10px;
    top: -20px;
    left: -20px;
    cursor: pointer;
}

.joint-free-transform.no-rotation .rotate {
    display: none;
}

.joint-free-transform.in-operation {
    border-style: hidden;
}

.joint-free-transform.in-operation > div{
    display: none;
}

.joint-free-transform  > div.in-operation {
    display: block;
}

.joint-tooltip {
   position: absolute;
   z-index: 10000;
   border-radius: 5px;
   pointer-events: none;
}

.joint-tooltip .tooltip-content{
   padding: 10px;
}

.joint-tooltip.left, .joint-tooltip.right {
    margin-top: -2px;
}

.joint-tooltip.top, .joint-tooltip.bottom {
    margin-left: -2px;
}

.joint-tooltip.small {
   padding: 5px;
   font-size: 10px;
}

.joint-tooltip .tooltip-arrow, .joint-tooltip .tooltip-arrow-mask {
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
}

.joint-tooltip.left .tooltip-arrow-mask, .joint-tooltip.left .tooltip-arrow {
   margin-right: -1px;
   right: 100%;
}

.joint-tooltip.right .tooltip-arrow-mask, .joint-tooltip.right .tooltip-arrow {
   margin-left: -1px;
   left: 100%;
}

.joint-tooltip.top .tooltip-arrow-mask, .joint-tooltip.top .tooltip-arrow {
   bottom: 100%;
}

.joint-tooltip.bottom .tooltip-arrow-mask, .joint-tooltip.bottom .tooltip-arrow {
   top: 100%;
}

.joint-tooltip .tooltip-arrow-mask {
   border-width: 6px;
}

.joint-tooltip.left .tooltip-arrow-mask {
   margin-top: -6px;
}

.joint-tooltip.right .tooltip-arrow-mask {
   margin-top: -6px;
}

.joint-tooltip.top .tooltip-arrow-mask {
   margin-left: -6px;
}

.joint-tooltip.bottom .tooltip-arrow-mask {
   margin-left: -6px;
}

.joint-tooltip .tooltip-arrow {
   border-width: 8px;
}

.joint-tooltip.left .tooltip-arrow {
   margin-top: -8px;
}

.joint-tooltip.right .tooltip-arrow {
   margin-top: -8px;
}

.joint-tooltip.top .tooltip-arrow {
   margin-left: -8px;
}

.joint-tooltip.bottom .tooltip-arrow {
   margin-left: -8px;
}

/* Fading In */

@keyframes joint-tooltip-fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}
@-webkit-keyframes joint-tooltip-fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}
@-moz-keyframes joint-tooltip-fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}
@-ms-keyframes joint-tooltip-fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

.joint-tooltip.animated {
   opacity: 0;
}
.joint-tooltip.animated.rendered {
   animation: joint-tooltip-fadein;
   -webkit-animation: joint-tooltip-fadein;
   -moz-animation: joint-tooltip-fadein;
   -ms-animation: joint-tooltip-fadein;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   -ms-animation-fill-mode: forwards;
}

.joint-snaplines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.joint-snaplines > .snapline {
    position: absolute;
    pointer-events: none;
    opacity: 1;
}

.joint-snaplines > .snapline.horizontal {
    width: 100%;
}

.joint-snaplines > .snapline.vertical {
    height: 100%;
}

/* When the snaplines are inside the PaperScroller enlarge the snaplines so they appear as they would sit in the PaperScroller. */
.joint-paper-scroller .joint-snaplines > .snapline.horizontal {
    width: 700%;
    left: -300%;
}

.joint-paper-scroller .joint-snaplines > .snapline.vertical {
    height: 700%;
    top: -300%;
}

.joint-text-editor {
    margin: 0;
    padding: 0;
}

@-webkit-keyframes text-editor-caret-blink {
    0%   { opacity: 1 }
    100%  { opacity: 0 }
}
@-moz-keyframes text-editor-caret-blink {
    0%   { opacity: 1 }
    100%  { opacity: 0 }
}
@-ms-keyframes text-editor-caret-blink {
    0%   { opacity: 1 }
    100%  { opacity: 0 }
}
@keyframes text-editor-caret-blink {
    0%   { opacity: 1 }
    100%  { opacity: 0 }
}

.joint-text-editor .caret {
    position: absolute;
    height: 15px;
    margin-left: -1px;
    margin-top: 2px;
    width: 1px;
    -webkit-animation: text-editor-caret-blink 1s linear 0s infinite;
    -moz-animation: text-editor-caret-blink 1s linear 0s infinite;
    -ms-animation: text-editor-caret-blink 1s linear 0s infinite;
    animation: text-editor-caret-blink 1s linear 0s infinite;
    pointer-events: none;
    white-space: nowrap;
}
.joint-text-editor .caret.placeholder {
    background-color: transparent;
    -webkit-animation: none;
    animation: none;
    width: auto;
}

.joint-text-editor .caret.placeholder:before {
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    -webkit-animation: text-editor-caret-blink 1s linear 0s infinite;
    -moz-animation: text-editor-caret-blink 1s linear 0s infinite;
    -ms-animation: text-editor-caret-blink 1s linear 0s infinite;
    animation: text-editor-caret-blink 1s linear 0s infinite;
    float: left;
}
.joint-text-editor .caret.placeholder:after {
    content: attr(data-placeholder-text);
    vertical-align: middle;
    display: inline-block;
}

.joint-text-editor .caret[text-anchor="middle"].placeholder:after {
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.joint-text-editor .caret[text-anchor="end"].placeholder:after {
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.joint-text-editor .char-selection-box {
    position: absolute;
    opacity: .8;
    padding: 0;
    margin: 0;
    margin-top: 2px;
    pointer-events: none;
}

.joint-text-editor .char-selection-box:hover {
    cursor: text;
}

.joint-text-editor .textarea-container {
    position: absolute;
    height: 0;
    overflow: hidden;
}

.joint-text-editor textarea {
    position: absolute;/* to get document.execCommand('copy') to work in Chrome */
    width: 1000px;
    height: 1em;
    outline: none;
}

.joint-dialog .bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 10000;
}

.joint-dialog .fg {
    width: 80%;
    margin: 0 auto;
    top: 100px;
    left: 0;
    right: 0;
    z-index: 10001;
    position: absolute;
}

.joint-dialog.inlined .bg {
    display: none;
}

.joint-dialog:not(.modal) .bg {
    display: none;
}
.joint-dialog:not(.modal) .fg {
    /* Make sure modal dialogs are always on top. */
    z-index: 9999;
}

.joint-dialog.inlined .fg {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    z-index: auto;
}

.joint-dialog .titlebar {
    text-rendering: optimizeLegibility;
}

.joint-dialog.draggable .titlebar {
    cursor: move;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.joint-dialog .titlebar.empty {
    display: none;
}

.joint-dialog .btn-close {
    line-height: 1;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

.joint-dialog .body {
    padding: 10px;
}

.joint-dialog .controls {
    text-align: center; /* to align .center buttons */
}

.joint-dialog .controls .control-button {
    float: right; /* buttons are right-aligned by default */
    margin-left: 5px;
    margin-right: 5px;
    line-height: 30px;
    height: 30px;
    cursor: pointer;
    outline: none;
    margin-top: 20px;
    margin-bottom: 10px;
}
.joint-dialog .controls .control-button:first-child:not(.left):not(.center) {
    /* requires right-aligned buttons to come first in the generated HTML */
    /* workaround because right-aligned buttons do not have a dedicated class */
    margin-right: 10px; /* extra space for the rightmost right-aligned button */
}
.joint-dialog .controls .control-button.left {
    float: left;
}
.joint-dialog .controls .control-button.left:not(.left ~ .left) {
    margin-left: 10px; /* extra space for the leftmost left-aligned button */
}
.joint-dialog .controls .control-button.center {
    float: none; /* remove default button float */
    display: inline-block; /* align to center */
}

.joint-dialog.modal {
    /* prevent the bootstrap CSS to override the modal CSS */
    display: block;
}

.joint-flash-message .fg {
    top: 0;
    max-width: 30%;
    min-width: 300px;
    right: 20px;
    left: auto;
}
.joint-flash-message .titlebar {
    border-radius: 0;
    border-bottom: 0;
}

.joint-dialog.joint-lightbox {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    text-align: center; /* to align .fg to center */
}

.joint-dialog.joint-lightbox .bg {
    opacity: .87;
}

.joint-dialog.joint-lightbox .btn-close {
    background-color: transparent;
    border: 1px solid transparent;
    text-shadow: none;
}

.joint-dialog.joint-lightbox .fg {
    position: relative;
    display: inline-block; /* align to center */
    overflow: visible;
    background-color: transparent;
    top: 0;
    width: 80%;
    height: 80%;
    min-width: 10%;
    max-height: none;
    border: none;
    box-shadow: none;
    text-align: center; /* to align .body to center */
}

.joint-dialog.joint-lightbox .body {
    display: inline-block; /* align to center */
    background-color: transparent;
    padding: 0;
    width: 100%;
    height: 100%;
}

.joint-dialog.joint-lightbox img {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

.joint-dialog.joint-lightbox .titlebar {
    position: absolute; /* to position it after .body */
    background: none;
    top: 100%;
    padding: 10px 0px;
    border-bottom: none;
    text-align: left;
}

.joint-dialog.joint-lightbox .controls {
    position: relative; /* to position it after .titlebar */
}

.joint-context-toolbar {
    position: absolute;
    z-index: 1000;
}

.joint-context-toolbar .tools {
    margin: 0;
}

.joint-context-toolbar .tool {
    min-height: 30px;
    min-width: 35px;
    cursor: pointer;
    outline: none;
    vertical-align: middle;
    margin: 0;
    padding: 5px;
}

.joint-context-toolbar.joint-vertical .tool {
    display: block;
    width: 100%;
}

.joint-context-toolbar .tool>img {
    pointer-events: none;
}

.joint-popup {
   position: absolute;
   z-index: 1000;
}

.joint-popup .popup-arrow,
.joint-popup .popup-arrow-mask {
   border: solid transparent;
   position: absolute;
}

.joint-popup .popup-arrow-mask {
   border-width: var(--arrow-mask-width);
   /* fix for edge rendering glitches https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
   transform: scale(1.05);
}

.joint-popup .popup-arrow {
   border-width: var(--arrow-width);
}

.joint-popup.top .popup-arrow-mask,
.joint-popup.top-left .popup-arrow-mask,
.joint-popup.top-right .popup-arrow-mask  {
   border-bottom-color: var(--arrow-mask-color);
}

.joint-popup.bottom .popup-arrow-mask,
.joint-popup.bottom-left .popup-arrow-mask,
.joint-popup.bottom-right .popup-arrow-mask {
   border-top-color: var(--arrow-mask-color);
}

.joint-popup.left .popup-arrow-mask {
   border-right-color: var(--arrow-mask-color);
}

.joint-popup.right .popup-arrow-mask {
   border-left-color: var(--arrow-mask-color);
}

.joint-popup.top .popup-arrow,
.joint-popup.top-left .popup-arrow,
.joint-popup.top-right .popup-arrow {
   border-bottom-color: var(--arrow-color);
}

.joint-popup.bottom .popup-arrow,
.joint-popup.bottom-left .popup-arrow,
.joint-popup.bottom-right .popup-arrow {
   border-top-color: var(--arrow-color);
}

.joint-popup.left .popup-arrow {
   border-right-color: var(--arrow-color);
}

.joint-popup.right .popup-arrow {
   border-left-color: var(--arrow-color);
}

.joint-popup.top .popup-arrow-mask,
.joint-popup.top .popup-arrow {
   bottom: 100%;
   left: 50%;
}

.joint-popup.top-left .popup-arrow-mask,
.joint-popup.top-left .popup-arrow {
   bottom: 100%;
   left: 15px;
}

.joint-popup.top-right .popup-arrow-mask,
.joint-popup.top-right .popup-arrow {
   bottom: 100%;
   left: calc(100% - 15px);
}

.joint-popup.bottom .popup-arrow-mask,
.joint-popup.bottom .popup-arrow {
   top: 100%;
   left: 50%;
}

.joint-popup.bottom-left .popup-arrow-mask,
.joint-popup.bottom-left .popup-arrow {
   top: 100%;
   left: 15px;
}

.joint-popup.bottom-right .popup-arrow-mask,
.joint-popup.bottom-right .popup-arrow {
   top: 100%;
   left: calc(100% - 15px);
}

.joint-popup.bottom .popup-arrow-mask {
   margin-left: calc(-1 * var(--arrow-mask-width));
}

.joint-popup.bottom .popup-arrow {
   margin-left: calc(-1 * var(--arrow-width));
}

.joint-popup.bottom .popup-arrow-mask,
.joint-popup.bottom-right .popup-arrow-mask,
.joint-popup.bottom-left .popup-arrow-mask,
.joint-popup.top .popup-arrow-mask,
.joint-popup.top-right .popup-arrow-mask,
.joint-popup.top-left .popup-arrow-mask {
   margin-left: calc(-1 * var(--arrow-mask-width));
}

.joint-popup.bottom .popup-arrow,
.joint-popup.bottom-right .popup-arrow,
.joint-popup.bottom-left .popup-arrow,
.joint-popup.top .popup-arrow,
.joint-popup.top-right .popup-arrow,
.joint-popup.top-left .popup-arrow {
   margin-left: calc(-1 * var(--arrow-width));
}

.joint-popup.left .popup-arrow-mask,
.joint-popup.left .popup-arrow {
   right: 100%;
   top: 50%;
}

.joint-popup.right .popup-arrow-mask,
.joint-popup.right .popup-arrow {
   left: 100%;
   top: 50%;
}

.joint-popup.left .popup-arrow,
.joint-popup.right .popup-arrow {
   margin-top: calc(-1 * var(--arrow-width));
}

.joint-popup.left .popup-arrow-mask,
.joint-popup.right .popup-arrow-mask {
   margin-top: calc(-1 * var(--arrow-mask-width));
}

.joint-select-box {
    position: relative;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}
.select-box-selection {
    padding: 8px 12px;
    padding-right: 40px;
}
.select-box-selection:empty {
    height: 1em;
}
.select-box-selection:after,
.select-box-option.selected:after {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.joint-select-box-options {
    position: absolute;
    z-index: 10001;
    box-sizing: border-box;
}
.joint-select-box.opened .joint-select-box-options {
    display: block;
}
.select-box-option {
    cursor: pointer;
    padding: 8px 12px;
    padding-right: 40px;
    position: relative;
    box-sizing: border-box;
}
.select-box-option-icon {
    max-height: 1em;
    vertical-align: bottom;
    margin-right: 10px;
}

/* Availibility */

.joint-select-box.disabled {
    cursor: default;
}

.joint-select-box.disabled .select-box-selection:after {
    display: none;
}
.joint-color-palette .select-box-option-content {
    width: 25px;
    display: inline-block;
    margin: 5px;
    padding: 0;
    height: 25px;
    overflow: hidden;
}
.joint-color-palette.joint-select-box-options {
    width: 160px;
    margin-top: -7px;
}
.joint-color-palette .select-box-selection {
    padding: 4px 24px 0 4px;
}
.joint-color-palette .select-box-selection .select-box-option-content {
    float: none;
    margin: 0;
    width: 30px;
    height: 20px;
}
.joint-color-palette .select-box-option.selected:after {
    right: 3px;
}
.joint-color-palette .select-box-option-content .select-box-option-icon {
    width: 21px;
    height: 21px;
    max-height: none;
}
.joint-color-palette .select-box-selection .select-box-option-icon {
  margin-top: -2px;
  margin-left: -2px;
}

/*  Arrow  */
.joint-select-box.joint-color-palette .select-box-options-arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  pointer-events: none;
  margin-left: -2px;
  margin-top: -16px;
}
.joint-select-box.joint-color-palette .select-box-options-arrow:after {
  content: ' ';
  position: absolute;
  left: -6px;
  top: -4px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  pointer-events: none;
}
/*  Arrow  */

.select-button-group-button {
    display: inline-block;
    min-width: 30px;
    min-height: 30px;
    line-height: 22px;
    cursor: pointer;
    box-sizing: border-box;
    padding: 2px;
    margin: 0 1px;
    vertical-align: middle;
    position: relative;
}
.select-button-group-button-icon {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

/* Availibility */

.joint-select-button-group.disabled .select-button-group-button {
    cursor: default;
}

.joint-navigator {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.joint-navigator > .joint-paper {
    display: inline-block;
    cursor: pointer;
}
.joint-navigator > .joint-paper > svg {
    shape-rendering: optimizeSpeed;
    pointer-events: none;
}
.joint-navigator .current-view {
    position: absolute;
    cursor: move;
    margin: -2px 0 0 -2px;
}
.joint-navigator .current-view-control {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    cursor: nwse-resize;
    margin: 0 -7px -7px 0;
}
.joint-navigator .joint-paper .joint-element * {
    vector-effect: initial;
}

.joint-navigator.navigator-no-content .current-view,
.joint-navigator.navigator-no-content .joint-paper {
    display: none;
}

.joint-tree-layout {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.joint-tree-layout .hidden {
    display: none;
}

.tree-layout-box {
    position: absolute;
    pointer-events: none;
    opacity: 1;
}

.joint-tree-layout .tree-layout-box.translate {
    z-index: 100;
    transform: translate(-50%,-50%);
}

/* Prevent throwing exception in FF when trying to measure an element view inside the zero-sized paper. */
.tree-layout-box > .joint-paper {
    min-width: 1px;
    min-height: 1px;
    width: 100%;
    height: 100%;
}

.tree-layout-box > .joint-paper > svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


.tree-layout-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: move;
}

.tree-layout-mask.dropping-not-allowed {
    cursor: not-allowed;
}

.tree-layout-preview-group .tree-layout-preview {
    fill: none;
}

.joint-path-drawer {
	cursor: crosshair;
}
.joint-path-drawer .start-point {
	fill: #ffffff;
	stroke: #000000;
	stroke-width: 2px;
}
.joint-path-drawer .start-point:hover {
	fill: #000000;
}
.joint-path-drawer .control-path {
    pointer-events: none;
    fill: none;
    stroke: #000000;
    stroke-width: 1px;
    stroke-linecap: round;
}

.joint-path-editor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.joint-path-editor .control-point,
.joint-path-editor .anchor-point {
    cursor: pointer;
    pointer-events: auto;
    border: 1px solid lightgrey;
    stroke-width: 1px;
}
.joint-path-editor .control-point {
    fill: royalblue;
    stroke: royalblue;
}
.joint-path-editor .control-point.locked {
    fill: seagreen;
    stroke: seagreen;
}
.joint-path-editor .anchor-point {
    fill: crimson;
    stroke: crimson;
}
.joint-path-editor .direction-path {
    stroke: #000000;
    stroke-width: 1px;
}
.joint-path-editor .segment-path {
    cursor: move;
    pointer-events: auto;
    fill: none;
    stroke: #000000;
    stroke-width: 10px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    stroke-opacity: 0;
}
.joint-path-editor .segment-path:hover {
    opacity: .6;
    stroke-opacity: .6;
}

.joint-radio-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.joint-radio-group label {
    display: flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.375em;
}

.joint-radio-group label:after {
    content: none;
}

.joint-radio-group input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.joint-radio-group input:checked + span:before {
    box-shadow: inset 0 0 0 0.4375em var(--checked-color);
}

.joint-radio-group input:hover:not(:checked) + span:before {
    box-shadow: inset 0 0 0 0.2em var(--checked-color);
}

.joint-radio-group span {
    display: flex;
    align-items: center;
}

.joint-radio-group span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: #fff;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin-right: 0.375em;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 0.125em var(--checked-color);
}

div.joint-toolbar,
div.joint-toolbar .joint-toolbar-group,
div.joint-toolbar .joint-widget {
    display: flex;
    align-items: center;
    flex-shrink: 1000;
}

div.joint-toolbar button.joint-widget {
    flex-shrink: 1;
}

.joint-toolbar .joint-toolbar-group.right.group-first {
    margin-left: auto;
}

.joint-toolbar .joint-widget + .joint-widget,
.joint-toolbar-group + .joint-toolbar .joint-widget,
.joint-toolbar .joint-widget + .joint-toolbar-group,
.joint-toolbar-group + .joint-toolbar-group {
    margin-left: 2px;
}

/* chrome */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    div.joint-toolbar textarea {
        margin-top: 4px;
    }
    div.joint-toolbar button.joint-widget {
        text-align: center;
    }
}

/* IE 8,9,10*/
@media screen\0 {
    .joint-toolbar .joint-toolbar-group,
    .joint-toolbar .joint-widget {
        vertical-align: middle;
    }

    .joint-toolbar {
        display: inline-block;
        vertical-align: top;
    }
    .joint-toolbar .joint-toolbar-group.right {
        float: right;
    }
    div.joint-toolbar button.joint-widget {
        display:table-cell;
    }
}

.joint-widget[data-type="zoomSlider"] output,
.joint-widget[data-type="range"] output {
    min-width: 1.6em;
    display: inline-block;
    text-align: right;
}

.joint-widget[data-type="separator"] {
    border-right: 1px solid #b3b3b3;
}

.joint-widget[data-type="separator"]:after {
    content: "\00a0";
}

.joint-widget input[type="range"]::-ms-track {
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.joint-widget input[type="range"]::-ms-fill-lower {
    background: transparent;
    border-color: transparent;
}

/* Toggle */

.joint-widget .toggle {
   position: relative;
   width: 97px;
   height: 14px;
}
.joint-widget .toggle input {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -moz-opacity: 0;
   opacity: 0;
   z-index: 100;
   position: absolute;
   width: 100%;
   height: 100%;
   cursor: pointer;
   box-sizing: border-box;
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
}
.joint-widget .toggle span {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 40px;
   position: relative;
}
.joint-widget .toggle input:checked + span i {
   right: 0;
}
.joint-widget .toggle span i {
   display: block;
   height: 100%;
   width: 60%;
   border-radius: inherit;
   position: absolute;
   z-index: 2;
   right: 40%;
   top: 0;
}

/* Color Picker */
.joint-widget input[type='color'] {
    padding: 0;
    width: 150%;
    height: 150%;
    margin: -25%;
}

.joint-widget[data-type="colorPicker"] {
    box-sizing: border-box;
    overflow: hidden;
    width: 30px;
    height: 30px;
    border-radius: 4px;
}

.joint-widget[data-type="colorPicker"] {
    border: 1px solid lightgrey;
}

.joint-widget[data-type="colorPicker"].disabled {
    opacity: 0.5;
}

/* IE 8,9,10*/
@media screen\0 {
    .joint-widget {
        float: left;
    }
}

.printarea {
    position: relative;
}

.printarea.print-ready {
    display: none;
}

.printarea.preview {
    overflow: hidden !important;
    background: #fff !important;
}

@media print {

    html,
    html > body.joint-print {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html > body.joint-print > * {
        display: none !important;
    }

    html > body.joint-print > .printarea {
        display: block !important;
    }

    .printarea {
        page-break-after: always;
        left: 0 !important;
        top: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        margin: 0mm !important;
        padding: 0mm !important;
    }

    .printarea.print-ready {
        display: none;
    }
}