@keyframes swWidget-show
{
    0%
    {
        opacity : 0;
        border-color : transparent;
        transform : scale(0.95);
    }

    10%
    {
        opacity : 0.0;
    }

    50%
    {
        opacity : 1.0;
        border-color : transparent;
        transform : scale(1.0);
    }

    51%
    {
        border-color : var(--border-color);
    }

    52%
    {
        border-color : transparent;
    }

    55%
    {
        border-color : transparent;
    }

    56%
    {
        border-color : var(--border-color);
    }

    57%
    {
        border-color : transparent;
    }

    100%
    {
        opacity : 1.0;
        border-color : var(--border-color);
    }
}

@keyframes swWidget-valid
{
    0%
    {
        border-color : transparent;
    }

    10%
    {
        border-color : transparent;
    }

    12%
    {
        border-color : var(--valid);
    }

    14%
    {
        border-color : transparent;
    }

    16%
    {
        border-color : transparent;
    }

    18%
    {
        border-color : var(--valid);
    }

    20%
    {
        border-color : transparent;
    }

    100%
    {
        border-color : var(--valid);
    }
}

@keyframes swWidget-error
{
    0%
    {
        border-color : transparent;
    }

    10%
    {
        border-color : transparent;
    }

    12%
    {
        border-color : var(--error);
    }

    14%
    {
        border-color : transparent;
    }

    16%
    {
        border-color : transparent;
    }

    18%
    {
        border-color : var(--error);
    }

    19%
    {
        border-color : transparent;
    }

    100%
    {
        border-color : var(--error);
    }
}

@keyframes swWidget-hide
{
    0%
    {
        max-height : 1500px;
        opacity : 1.0;
        border-color : var(--border-color);
        display : flex;
    }

    50%
    {
        max-height : 0px;
        border-color : var(--border-color);
    }

    51%{border-color: transparent;}
    52%{border-color: var(--border-color);}
    53%{border-color: transparent;}
    54%{border-color: transparent;}
    55%{border-color: var(--border-color);}
    56%{border-color: transparent;}

    70%
    {
        opacity : 1.0;
    }

    99%
    {
        opacity :0.0;
    }

    100%
    {
        display : none;
    }
}

@keyframes swWidget-load
{
    0%
    {
        margin-left : 0%;
        transform : scale(0);
    }

    25%
    {transform : scale(1);}

    50%
    {
        margin-left : 100%;
        transform : scale(0);
    }

    100%
    {
        margin-left : 100%;
        transform : scale(0);
    }
}

@keyframes swWidget-load-container
{
   0%
   {
       background-size : 1% 100%;
       background-position : 0%;
   } 

   49%
   {
       background-size : 100% 100%;
       background-position : 0%;
   }
   50%
   {
       background-position : 100%;
       background-size : 100% 100%;
   }

   100%
   {
       background-position : 100%;
       background-size : 0% 100%;
   }
}

@keyframes sector-show
{
    0%{opacity : 0;}
    100%{opacity : 1;}
}

@keyframes fade-in
{
    0%{opacity : 0;}
    100%{opacity : 1;}
}

@keyframes cellest-show
{
    0%{opacity : 0}
    1%{opacity : 1}
    30%{opacity : 1}
    31%{opacity : 0}
    60%{opacity : 0}
    61%{opacity : 1}
    80%{opacity : 1}
    81%{opacity : 0}
    95%{opacity : 0}
    100%{opacity : 1}
}

@keyframes alert
{
    0%{opacity : 0}
    3%{opacity : 1}

    27%{opacity : 0}
    29%{opacity : 1}

    52%{opacity: 0}
    54%{opacity : 1}

    77%{opacity: 0}
    79%{opacity : 1}
}

@keyframes loading
{
    0% {
        background-color: #0b6093;
        box-shadow: 0 0 3px transparent, 0 0 6px transparent, 0 0 20px transparent, 0 0 60px transparent;
    }
    100% {
        background-color: #e0f3ff;
        box-shadow: 0 0 3px #c5e6ff, 0 0 6px #79c5fb, 0 0 20px #51b6ff, 0 0 60px #129cff;
    }
}