:root {
    --main-color-light: hsl(from var(--main-color) h s calc(l + 30));
    --main-color-lighter: hsl(from var(--main-color) h calc(s - 4) calc(l + 40));
    --main-color-lightest: hsl(from var(--main-color) h calc(s - 4) calc(l + 63));
}

/* Background color helpers */
.bg-main { background-color: var(--main-color) !important; }
.bg-main-light { background-color: var(--main-color-light) !important; }
.bg-main-lighter { background-color: var(--main-color-lighter) !important; }
.bg-main-lightest { background-color: var(--main-color-lightest) !important; }

/* Text color helpers */
.text-main { color: var(--main-color) !important; }
.text-main-light { color: var(--main-color-light) !important; }
.text-main-lighter { color: var(--main-color-lighter) !important; }
.text-main-lightest { color: var(--main-color-lightest) !important; }
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }

/* Border color helpers */
.border-main { border-color: var(--main-color) !important; }
.border-main-light { border-color: var(--main-color-light) !important; }
.border-main-lighter { border-color: var(--main-color-lighter) !important; }
.border-main-lightest { border-color: var(--main-color-lightest) !important; }

/* Alert shadow */
.alert {
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.5);
}

.header-company {
    background-color: var(--main-color-lightest);
    border-bottom: 3px solid var(--main-color);
}

.navbar-brand {
    img {
        max-height: 30px;
    }
}

.bpmn-highlighter-highlight--flow-element {
    --highlight-color: #ff0000;

    fill: var(--highlight-color);
    fill-opacity: 0.2;
    stroke: var(--highlight-color);
    stroke-width: 2;
    pointer-events: none;
}

.bpmn-highlighter-highlight--sequence-flow {
    --highlight-color: #ff0000;

    stroke: var(--highlight-color) !important;
    stroke-width: 2 !important;
    pointer-events: none;
    stroke-dasharray: 10 5;
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -18;
    }
}

.bpmn-highlighter-deemphasize {
    opacity: 0.75;
    filter: grayscale(1) blur(1px);
}

@keyframes pulse {
    0% {
        fill-opacity: 0;
    }
    10% {
        fill-opacity: 0.4;
    }
    20% {
        fill-opacity: 0.1;
    }
    30% {
        fill-opacity: 0.4;
    }
    40% {
        fill-opacity: 0.1;
    }
    50% {
        fill-opacity: 0.4;
    }
    60% {
        fill-opacity: 0.1;
    }
    70% {
        fill-opacity: 0.4;
    }
    80%, 100% {
        fill-opacity: 0.2;
    }
}