﻿.loader-container {
    margin: 10% auto 55px;
}

.loader-logo-container {
/*    -webkit-mask: linear-gradient(120deg, #000F 25%, #0005 50%, #000F 75%) right/250% 100%;
    -webkit-mask-composite: plus-lighter;
    animation: shimmer 2000ms forwards 1000ms, hide 250ms forwards 2500ms;
    display: block;*/
}

.progress-bar-container {
    width: 30vw;
    margin: 10px auto;
}

.progress-bar {
    text-align: left;
}

@keyframes shimmer {
    100% {
        -webkit-mask-position: left;
    }
}

@keyframes hide {
    to {
        -webkit-mask: unset;
    }
}

path {
    animation: opacity 500ms forwards linear 0ms; /*, stroke 1000ms forwards linear 250ms, fill 1000ms forwards linear 500ms;*/
    /*fill-opacity: 0;*/
    opacity: 0;
    fill-rule: nonzero;
    stroke-width: 1
}

@keyframes stroke {
    to {
        stroke-dashoffset: 0;
        stroke-width: 1;
    }
}

@keyframes stroke-dark {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    to {
        fill-opacity: 1;
    }
}

@keyframes opacity {
    to {
        opacity: 1;
    }
}

#p2 {
    stroke-dasharray: 123;
    stroke-dashoffset: 123;
    fill: var(--dae-color-brand-secondary);
    stroke: var(--dae-color-brand-stroke-secondary);
}

#p1 {
    stroke-dasharray: 62;
    stroke-dashoffset: 62;
    fill: var(--dae-color-brand-tertiary);
    stroke: var(--dae-color-brand-stroke-tertiary);
}

#i1 {
    stroke-dasharray: 58;
    stroke-dashoffset: 58;
    fill: var(--dae-color-brand-primary);
    stroke: var(--dae-color-brand-primary);
}

#a1 {
    stroke-dasharray: 98;
    stroke-dashoffset: 98;
    fill: var(--dae-color-brand-primary);
    stroke: var(--dae-color-brand-primary);
}

#i2 {
    stroke-dasharray: 58;
    stroke-dashoffset: 58;
    fill: var(--dae-color-brand-primary);
    stroke: var(--dae-color-brand-primary);
}

#k1 {
    stroke-dasharray: 114;
    stroke-dashoffset: 114;
    fill: var(--dae-color-brand-primary);
    stroke: var(--dae-color-brand-primary);
}

#d1 {
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    fill: var(--dae-color-brand-primary);
    stroke: var(--dae-color-brand-primary);
}

#n1 {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    fill: var(--dae-color-brand-primary);
    stroke: var(--dae-color-brand-primary);
}
