/*#region svg widgets core css for graphics driven by custom properties (css)*/

/*overriding shape widget properties for nested svg/lottie*/
.custom_shape[data-base-type="svg"] .custom_shape_content,
.custom_shape[data-base-type="svg"].shapes_preview_container {
    font-size: 0 !important;
    line-height: 0 !important;
    padding-bottom: 0;
    content: '';
}

/*svg - base CSS template with fallbacks*/
.custom_shape svg:not(.svg_custom_template) {
    --svg-width-comp: calc(var(
    --svg-width) + (var(--svg-stroke-width)));
    --svg-height-comp: calc(var(
    --svg-height) + (var(--svg-stroke-width)));
    --svg-perimeter: calc(var(
    --svg-width-comp) * 2 + var(--svg-height-comp) * 2); /*perimeter = (width and height) x 2*/
    --svg-cirlce-c: calc(var(
    --svg-width) / 2); /*svg circle math - todo: how do i do this math in one rule*/
    --svg-cirlce-r: calc(var(
    --svg-cirlce-c) - var(--svg-stroke-width) / 2);
    --svg-ellipse-cx: calc(var(
    --svg-width-comp) / 2);
    --svg-ellipse-cy: calc(var(
    --svg-height-comp) / 2);
    --svg-ellipse-rx: calc(var(
    --svg-ellipse-cx) - var(--svg-stroke-width)); /*ellispe math*/
    --svg-ellipse-ry: calc(var(
    --svg-ellipse-cy) - var(--svg-stroke-width));
    --svg-animation-delay: 0s;
    --svg-animation-duration: 0s;
    --svg-animation-repeat: 0; /*animation properties default*/
    --line-segments: 1;
    --transparent: rgba(0,0,0,0);
    color: var(--svg-fill-color);
    width: var(--svg-width, 125px);
    height: var(--svg-height, 125px); /*base w/h and other general properties*/
    cursor: default;
}

/*svg - the actual svg node (rect, circle, ellipse, custom..) - general properties inherited from parent <svg>*/
.svg_line_template line,
.svg_line_template defs marker polygon,
.svg_rect_template rect,
.svg_circle_template circle,
.svg_ellipse_template ellipse {
    width: var(--svg-width);
    height: var(--svg-height);
    animation: var(--svg-animation-name);
    animation-delay: var(--svg-animation-delay);
    animation-duration: var(--svg-animation-duration);
    animation-iteration-count: var(--svg-animation-repeat);
    stroke: var(--svg-stroke-color);
    stroke-width: var(--svg-stroke-width);
    stroke-dasharray: var(--svg-perimeter);
    fill: var(--svg-fill-color);
    opacity: var(--svg-opacity);
}
.svg_line_template defs marker polygon {
    stroke: var(--var-stroke-color);
}

.svg_blob_template path {
    animation: var(--svg-animation-name);
    animation-delay: var(--svg-animation-delay);
    animation-duration: var(--svg-animation-duration);
    animation-iteration-count: var(--svg-animation-repeat);
    stroke: var(--svg-stroke-color);
    stroke-width: var(--svg-stroke-width);
    stroke-dasharray: var(--svg-perimeter);
    opacity: var(--svg-opacity);
}

.svg_custom_template {
    width: var(--svg-width);
    height: var(--svg-height);
}

/*svg - circle css only*/
.svg_circle_template circle {
    cx: var(--svg-cirlce-c);
    cy: var(--svg-cirlce-c);
    r: var(--svg-cirlce-r);
}

/*svg - ellipse css only*/
.svg_ellipse_template ellipse {
    rx: var(--svg-ellipse-rx);
    ry: var(--svg-ellipse-ry);
    cx: calc(var(--svg-ellipse-cx) - var(--svg-stroke-width) / 2);
    cy: calc(var(--svg-ellipse-cy) - var(--svg-stroke-width) / 2);
}

/*svg - text only*/
.svg_text {
    overflow: visible;
}

.cke .svg_text {
    border: 1px dashed #d5d5d5;
}

/*#region text stroked*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

.svg_text_stroked_template .svg_text_node {
    font-family: 'Montserrat', monospace;
    font-size: var(--svg-stroke-width);
    font-weight: 800;
    animation: svg_text_stroked_template 8s linear forwards;
    animation-delay: var(--svg-animation-delay);
    animation-duration: var(--svg-animation-duration);
    animation-iteration-count: var(--svg-animation-repeat);
    fill: none;
    stroke: var(--transparent);
    stroke-dasharray: 700;
    stroke-dashoffset: 1000;
    stroke-width: 4px;
    stroke-linecap: round;
    opacity: var(--svg-opacity);
    letter-spacing: -2px;
}

/*animated dash for the special text svg*/
@keyframes svg_text_stroked_template {
    90% {
        stroke: var(--svg-stroke-color);
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
        stroke: var(--svg-stroke-color);
        fill: var(--svg-fill-color);
    }
}

/*#endregion*/

/*#region text modern*/

.svg_text_modern_template {
    font-family: 'Russo One', sans-serif;
    font-size: var(--svg-stroke-width);
    text-transform: uppercase;
    animation: svg_text_modern_template 5s alternate;
    animation-delay: var(--svg-animation-delay);
    animation-duration: var(--svg-animation-duration);
    animation-iteration-count: var(--svg-animation-repeat);
    fill: var(--svg-fill-color);
    opacity: var(--svg-opacity);
    stroke-width: 2;
    stroke: var(--svg-stroke-color);
}

@keyframes svg_text_modern_template {
    0% {
        fill: rgba(72,138,20,0);
        stroke: var(--svg-stroke-color);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 2;
    }

    70% {
        fill: rgba(72,138,20,0);
        stroke: var(--svg-stroke-color);
    }

    80% {
        fill: rgba(72,138,20,0);
        stroke: var(--svg-stroke-color);
        stroke-width: 3;
    }

    100% {
        fill: var(--svg-fill-color);
        stroke: var(--svg-stroke-color);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}

/*#endregion*/

/*#region text typewriter*/

.svg_text_typewriter_template .svg_text_node {
    font-family: 'Montserrat', monospace;
    font-size: var(--svg-stroke-width);
    font-weight: 700;
    opacity: var(--svg-opacity);
    stroke: var(--svg-stroke-color);
    fill: var(--svg-fill-color);
}

.svg_text_typewriter_template text {
    dominant-baseline: hanging;
}

/*#endregion*/

/*#region text reveal*/

.svg_text_reveal_template text {
    font-family: 'Montserrat', monospace;
    font-size: var(--svg-stroke-width);
    font-weight: 700;
    opacity: var(--svg-opacity);
}

.svg_text_reveal_template .svg_text_node {
    dominant-baseline: hanging;
}

.text--transparent {
    fill: transparent !important;
}

.svg_text_reveal_template .svg_text_reveal_shape {
    transform-origin: 0px 150px;
    animation-delay: var(--svg-animation-delay);
    animation-duration: var(--svg-animation-duration);
    animation-iteration-count: var(--svg-animation-repeat);
    animation-fill-mode: forwards;
    r: 0.3%;
    stroke: var(--svg-stroke-color);
    stroke-width: var(--svg-stroke-width);
    fill: var(--svg-fill-color);
    opacity: var(--svg-opacity);
}

.svg_text_reveal_template .svg_text_reveal_shape:nth-child(1) {
    animation-name: moving-panels;
}

@keyframes moving-panels {
    100% {
        r: 250%;
    }
}

/*#endregion*/

/*animated svg stroke - special css to start the stroke off as transparent*/
.custom_shape svg.svg_animated_draw rect,
.custom_shape svg.svg_animated_draw cirlce,
.custom_shape svg.svg_animated_draw ellipse,
.custom_shape svg.svg_animated_draw text {
    stroke: var(--transparent);
}

/*animated stroke on svg*/
@keyframes svgDrawStroke {
    0% {
        stroke: var(--svg-stroke-color);
        stroke-dashoffset: calc(var(--svg-perimeter) / var(--line-segments));
        fill: var(--transparent);
    }

    100% {
        stroke: var(--svg-stroke-color);
        stroke-dashoffset: 0px;
        fill: var(--svg-fill-color);
    }
}

/*#endregion*/

/*#region animated backgrounds - pan/scan/zoom animations*/

@keyframes pan_bgimage {
    0% {
        background-position: var(--bg-image-pos-y, top) var(--bg-y-start) var(--bg-image-pos-x, left) var(--bg-x-start);
    }

    100% {
        background-position: var(--bg-image-pos-y, top) var(--bg-y-end) var(--bg-image-pos-x, left) var(--bg-x-end);
    }
}

@keyframes pan_and_zoom_bgimage {
    0% {
        background-position: var(--bg-image-pos-y, top) var(--bg-y-start) var(--bg-image-pos-x, left) var(--bg-x-start);
        background-size: var(--bg-zoom-start);
    }

    100% {
        background-position: var(--bg-image-pos-y, top) var(--bg-y-end) var(--bg-image-pos-x, left) var(--bg-x-end);
        background-size: var(--bg-zoom-end);
    }
}

@keyframes zoom_bgimage {
    0% {
        background-size: var(--bg-zoom-start);
    }

    100% {
        background-size: var(--bg-zoom-end);
    }
}

/*#endregion*/

/*small tweak*/
.custom_link_target svg {
    cursor: pointer !important;
}