:root
{
    --dot-pulse-color: #fff;
    --dot-pulse-color-invert: invert(100%) sepia(0%) saturate(7493%) hue-rotate(233deg) brightness(101%) contrast(102%);/* 1-color: #68cce3;*/
    --a-color: invert(77%) sepia(55%) saturate(530%) hue-rotate(157deg) brightness(92%) contrast(93%);/* 2-color: #5D0BB8;*/
    --b-color: invert(16%) sepia(93%) saturate(7204%) hue-rotate(271deg) brightness(71%) contrast(107%);/* 3-color #029346 */
    --c-color: invert(41%) sepia(26%) saturate(1565%) hue-rotate(98deg) brightness(97%) contrast(98%);/* 4-color: #F4D549;*/
    --d-color: invert(93%) sepia(51%) saturate(7275%) hue-rotate(321deg) brightness(108%) contrast(91%);/* 7-color: #1c80ff;*/
    --g-color: invert(43%) sepia(51%) saturate(4403%) hue-rotate(200deg) brightness(99%) contrast(105%);/* 8-color: #F49C43;*/
    --h-color: invert(69%) sepia(51%) saturate(818%) hue-rotate(330deg) brightness(102%) contrast(91%);/* 9-color: #f47821;*/
    --i-color: invert(50%) sepia(74%) saturate(981%) hue-rotate(346deg) brightness(97%) contrast(97%);/* 10-color: #E2BF41;*/
    --j-color: invert(100%) sepia(71%) saturate(6015%) hue-rotate(320deg) brightness(91%) contrast(94%);/* 15-color: #18AE62;*/
    --p-color: invert(48%) sepia(58%) saturate(6017%) hue-rotate(131deg) brightness(108%) contrast(81%);
    --p-bg-color: #1c1e26;
}
.dot-pulse-wrapper
{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    margin: auto;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: -1;
    opacity: 0;
    display: none;
    transition: all .5s ease;
}
.dot-pulse-wrapper.visible
{
    opacity: 1;
    display: flex;
}
img#app-loader-logo
{
    max-width: 200px;
}
.dot-pulse
{
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--dot-pulse-color);
    color: var(--dot-pulse-color);
    box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;
}
.dot-pulse::before, .dot-pulse::after
{
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--dot-pulse-color);
    color: var(--dot-pulse-color);
}
.dot-pulse::before
{
    box-shadow: 9984px 0 0 -5px var(--dot-pulse-color);
    animation: dotPulseBefore 1.5s infinite linear;
    animation-delay: 0s;
}
.dot-pulse::after
{
    box-shadow: 10014px 0 0 -5px var(--dot-pulse-color);
    animation: dotPulseAfter 1.5s infinite linear;
    animation-delay: .5s;
}
@keyframes dotPulseBefore
{
    0%
    {
        box-shadow: 9984px 0 0 -5px var(--dot-pulse-color);
    }
    30%
    {
        box-shadow: 9984px 0 0 2px var(--dot-pulse-color);
    }
    60%, 100%
    {
        box-shadow: 9984px 0 0 -5px var(--dot-pulse-color);
    }
}
@keyframes dotPulse
{
    0%
    {
        box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
    }
    30%
    {
        box-shadow: 9999px 0 0 2px var(--dot-pulse-color);
    }
    60%, 100%
    {
        box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
    }
}
@keyframes dotPulseAfter
{
    0%
    {
        box-shadow: 10014px 0 0 -5px var(--dot-pulse-color);
    }
    30%
    {
        box-shadow: 10014px 0 0 2px var(--dot-pulse-color);
    }
    60%, 100%
    {
        box-shadow: 10014px 0 0 -5px var(--dot-pulse-color);
    }
}
.dot-pulse.brand_1
{
    color: var(--a-color);
    background-color: var(--a-color);
    filter: var(--a-color);
    box-shadow: 9999px 0 0 -5px var(--a-color);
}
.dot-pulse.brand_2
{
    color: var(--b-color);
    background-color: var(--b-color);
    filter: var(--b-color);
    box-shadow: 9999px 0 0 -5px var(--b-color);
}
.dot-pulse.brand_3
{
    color: var(--c-color);
    background-color: var(--c-color);
    filter: var(--c-color);
    box-shadow: 9999px 0 0 -5px var(--c-color);
}
.dot-pulse.brand_4
{
    color: var(--d-color);
    background-color: var(--d-color);
    filter: var(--d-color);
    box-shadow: 9999px 0 0 -5px var(--d-color);
}
.dot-pulse.brand_7
{
    color: var(--g-color);
    background-color: var(--g-color);
    filter: var(--g-color);
    box-shadow: 9999px 0 0 -5px var(--g-color);
}
.dot-pulse-wrapper.brand_7
{
    background-color: #000f2d;
}
.dot-pulse.brand_8
{
    color: var(--h-color);
    background-color: var(--h-color);
    filter: var(--h-color);
    box-shadow: 9999px 0 0 -5px var(--h-color);
}
.dot-pulse.brand_9
{
    color: var(--i-color);
    background-color: var(--i-color);
    filter: var(--i-color);
    box-shadow: 9999px 0 0 -5px var(--i-color);
}
.dot-pulse.brand_10
{
    color: var(--j-color);
    background-color: var(--j-color);
    filter: var(--j-color);
    box-shadow: 9999px 0 0 -5px var(--j-color);
}
.dot-pulse.white
{
    color: var(--dot-pulse-color);
    background-color: var(--dot-pulse-color);
    filter: var(--dot-pulse-color);
    box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
}
.dot-pulse-wrapper.brand_13
{
    --dot-pulse-color: #d1aa41;
    background: #1b1b1f;
    gap: 25px;
}
.dot-pulse-wrapper.brand_15
{
    --dot-pulse-color: #36e1b9;
    background: #051214;
    gap: 25px;
}
.dot-pulse.brand_16
{
    color: var(--p-color);
    background-color: var(--j-color);
    filter: var(--p-color);
    box-shadow: 9999px 0 0 -5px var(--p-color);
}
.dot-pulse-wrapper.brand_16
{
    gap: 25px;
    background-color: var(--p-bg-color);
}
.dot-pulse-wrapper.brand_18
{
    background-color: #1b2339;
}