/* loader */
.layout-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: white;
    place-items: center;
    transition: opacity .3s, visibility 1s;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fade-loader {
    opacity: 0;
    visibility: hidden;
}
.own-loader {
    animation-name: routeround;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: .15s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #112B3C;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.own-loader :is(i, span) {
    font-size: 4rem;
    color: white;
}
.own-loader :is(img, svg){
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@keyframes routeround {
    0%   {background-color:#205375; left:-6.25rem; top:0rem;}
    20%  {background-color:#0078AA; left: 6.25rem; top:0rem;}
    40%  {background-color:#3AB4F2; left:-6.25rem; top:0rem;}
    60%  {background-color:#F2DF3A; left: 6.25rem; top:0rem;}
    80%  {background-color:#F66B0E; left:-6.25rem; top:0rem;}
    100% {background-color:#112B3C; left: 6.25rem; top:0rem;}
}

.loader {
    width: clamp(200px, 150px + .5vw, 300px);
    height: clamp(200px, 150px + .5vw, 300px);
}
.svg-load {
    fill: transparent;
    stroke: #133B5C;
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash-run 2s linear infinite;
}

@keyframes dash-run {
    to {
        stroke-dashoffset: 0;
        fill: white;
        stroke: blue;
    }
}