html.capacitor #bootLoading {
    display: none !important;
}

#bootLoading {
    position: fixed;
    z-index: 1000;
    color: white;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(32, 35, 48, 1);
}
html.initial-theme-light #bootLoading {
    color: #124185 !important;
    background-color: white !important;
}

#bootLoading #logoLoader {
    height: 10rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#bootLoading #logoLoader path {
    fill: transparent;
    stroke: aliceblue;
    stroke-linecap: round;
    stroke-width: 3px;
}
html.initial-theme-light #bootLoading #logoLoader path {
    stroke: #124185;
}

#bootLoading #logoLoader path:not(:nth-child(1), :nth-child(2), :nth-child(3)) {
    animation: fillAnimationDark 2s ease 0.1s infinite;
}
html.initial-theme-light #bootLoading #logoLoader path:not(:nth-child(1), :nth-child(2), :nth-child(3)) {
    animation: fillAnimationLight 2s ease 0.1s infinite !important;
}

#bootLoading #logoLoader path:not(:nth-child(1), :nth-child(2), :nth-child(3)) {
    animation: fillAnimationDark 2s ease 0.1s infinite;
}
html.initial-theme-light #bootLoading #logoLoader path:not(:nth-child(1), :nth-child(2), :nth-child(3)) {
    animation: fillAnimationLight 2s ease 0.1s infinite !important;
}

#bootLoading #logoLoader :nth-child(1),
#bootLoading #logoLoader :nth-child(2),
#bootLoading #logoLoader :nth-child(3) {
    animation: strokeAnimation 2s ease 0.1s infinite;
}

#bootLoading #logoLoader path:nth-child(1) {
    fill: none;
    stroke-dasharray: 250.14892578125px;
    stroke-dashoffset: 250.14892578125px;
}

#bootLoading #logoLoader path:nth-child(2) {
    fill: none;
    stroke-dasharray: 624.1346435546875px;
    stroke-dashoffset: 624.1346435546875px;
}

#bootLoading #logoLoader path:nth-child(3) {
    fill: none;
    stroke-dasharray: 805.46630859375px;
    stroke-dashoffset: 805.46630859375px;
}

#bootLoading #logoLoader path:nth-child(4) {
    stroke: none;
    stroke-width: 0;
}

#bootLoading #logoLoader path:nth-child(5) {
    stroke-dasharray: 440.34613037109375px;
    stroke-dashoffset: 440.34613037109375px;
}

#bootLoading #logoLoader path:nth-child(6) {
    stroke-dasharray: 440.3423156738281px;
    stroke-dashoffset: 440.3423156738281px;
}

#bootLoading #logoLoader path:nth-child(7) {
    stroke-dasharray: 440.3421630859375px;
    stroke-dashoffset: 440.3421630859375px;
}

#bootLoading #logoLoader path:nth-child(8) {
    stroke-dasharray: 440.3421630859375px;
    stroke-dashoffset: 440.3421630859375px;
}

@keyframes fillAnimationDark {
    30% {
        fill: rgba(255, 255, 255, 0);
    }
    60% {
        stroke-dashoffset: 0;
    }
    90% {
        stroke-width: 0;
    }
    100% {
        fill: rgba(255, 255, 255, 0.9);
    }
}
@keyframes fillAnimationLight {
    30% {
        fill: rgb(18, 65, 133, 0);
    }
    60% {
        stroke-dashoffset: 0;
    }
    90% {
        stroke-width: 0;
    }
    100% {
        fill: rgba(18, 65, 133, 0.9);
    }
}

@keyframes strokeAnimation {
    60% {
        stroke-dashoffset: 0;
    }
    90% {
        stroke-width: 0;
    }
}