.block {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: yellow;
    padding: 10px 20px;
    border: 2px solid black;
    font-size: 22px;
    user-select: none;
    white-space: nowrap;
    text-rendering: optimizeLegibility;
    cursor: grab;
}
.start, .end {
    border-radius: 50%;
}

.output {
    font-style: italic;
    font-size: 1.2rem;
    padding: 12px 20px;
}
.input {
    background-color: rgb(255, 185, 54);
}
.output, .input {
    transform: skewX(-15deg) translateX(6px);
}
.output span, .input span {
    display: block;
    transform: skewX(15deg) scale(1);
}
.input .connectPoint:nth-of-type(1), .output .input .connectPoint:nth-of-type(1) {
    top: 0%; left: 49%;
}
.input .connectPoint:nth-of-type(3), .output .input .connectPoint:nth-of-type(3) {
    top: 100%; left: 51%;
}

.condition {
    --g:var(--c,rgb(255, 121, 26)) calc(49.5% - 2.5px),#000 calc(49.5% - 1.5px),#000 49.5%, transparent 50%;
    background:
     linear-gradient(to top right   ,var(--g)) top right,
     linear-gradient(to top left    ,var(--g)) top left,
     linear-gradient(to bottom right,var(--g)) bottom right,
     linear-gradient(to bottom left ,var(--g)) bottom left;
    background-size:50% 50%;
    background-repeat:no-repeat;
    
    min-width: 70px;
    min-height:70px; 
    display:inline-block;
    margin:5px;
    border-color: transparent;
    transform: translate(-5px,-5px);
}
.condition span {
    margin-top: 20px;
    display: block;
    text-align: center;
    width: 100%;
}
.condition .connectPoint:nth-of-type(1) {
    top: 1%; left: 50%;
}
.condition .connectPoint:nth-of-type(2) {
    top: 50%; left: 99%;
}
.condition .connectPoint:nth-of-type(3) {
    top: 99%; left: 50%;
}
.condition .connectPoint:nth-of-type(4) {
    top: 50%; left: 1%;
}
.active.condition {
    background-color: rgba(5,138,14,0.40);
}
/*
    .condition::before{
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    transform: translate(-14%, -14%) rotateZ(45deg);
    height: 70px;
    width: 70px;
    background-color: rgb(255, 121, 26);
    z-index: -1;
}
*/
.empty {
    padding: 0;
    height: 25px;
    width: 25px;
    border-radius: 50%;
}
.active {
    box-shadow: 0px 0px 50px 5px rgba(5,138,14,0.86) !important;
}
.selected, .selected.text, .selected.variable {
    border: 2px dashed black;
    box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);
}
.selected.text, .selected.variable { box-shadow: none; }
.operation {
    background-color: rgb(225, 176, 71);;
}
.text, .variable {
    background-color: transparent;
    box-shadow: none;
    border: 2px solid transparent;
    padding: 0;
    line-height: 90%;
}
.text {
    white-space: pre-wrap;
}
.random {
    background-color: rgb(170, 144, 235);
}
.variable {
    background-color: gainsboro;
    padding-bottom: 1px;
}
.remove-condition {
    position: absolute;
    right: 0;
    bottom: 0;
}
.remove-condition:hover {
    cursor: pointer;
}
.condition-setting {
    position: relative;
}