/* Animation for reasoning 1 */

.arrow,.circular-container,.cross-container {
    position: relative;
}

.arrow-line, .arrow-line-flipped{
    position: absolute;
    width: var(--arrow-line-width,20px);
    height: var(--arrow-line-height,20px);
    border: 2px solid var(--arrow-line-border-color,blue);
    border-bottom: none;
    border-left: none;
    border-radius: 0 100% 0 0;
    transform: rotate(-45deg);
    left: var(--arrow-line-left,-10px);
    top: var(--arrow-line-top,-16px);
    scale: 0;
    transition: all 1s ease-in;
}
.arrow-line.visible,
.arrow-line-flipped.visible,
.arrow-head.visible,
.arrow-head-flipped.visible
{
    scale: 1;
}
/* Styling for the arrowhead */
.arrow-head,.arrow-head-flipped {
    position: absolute;
    width: 0;
    height: 0;
    border-right: var(--arrow-head-border-size,8px) solid blue;
    border-left: var(--arrow-head-border-size,8px) solid transparent;
    border-top: var(--arrow-head-border-size,8px) solid transparent;
    border-bottom: var(--arrow-head-border-size,8px) solid transparent;
    left: var(--arrow-head-left,20px);
    top: var(--arrow-head-top,-13px);
    scale: 0;
    transform: translateX(var(--translateX,-10px)) rotate(-150deg);
}

.arrow-head-flipped{
    top: var(--arrow-head-flipped-top,78%);
    transform: rotate(45deg);
    scale: 0;
    left: var(--arrow-head-flipped-left,-67%);
}
.arrow-line-flipped{
    top: var(--arrow-line-flipped-top,78%);
    transform: rotate(135deg);
    scale: 0;
    left: var(--arrow-line-flipped-left,-5px);
}

.circular-border{
    position: absolute;
    top: var(--circular-border-top,-1px);
    left: var(--circular-border-left,4px);
    border: var(--circular-border-size,2px) solid var(--circular-border-color,red);
    border-radius: var(--circular-border-radius,50%);
    height: var(--circular-border-height,85%);
    width: var(--circular-border-width,75%);
}

.cross-fragment{
    position: absolute;
    top: -18px;
    left: 40%;
    font-size: 10px !important;

}

/* End of animation for reasoning 1 */