/* Loading */

.ygg-loading {
    color: #4FAABF;
}

.ygg-loading.inline {
    /* background: rgba(255,255,255,.5); */
    position: relative;
    /* width: 100%; */
    height: 150px;
    display: block;
    align-items: center;
    z-index: 999999999999999;
    /* transition: opacity 0.4s;
    opacity: 1; */
}

.ygg-loading.absolute {
    background: rgba(255,255,255,.5);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    align-items: center;
    z-index: 999999999999999;
    transition: opacity 0.4s;
    opacity: 1;
}

.ygg-loading.initial {
    background: rgba(255,255,255,1);
    z-index: 99999;
}
.ygg-loading.inline.initial {
    background: transparent;
    z-index: 99999;
}

.ygg-loading.loading-hidden {
    opacity: 0;
    transition: opacity 1.5s 0.5s;
}

.ygg-loading .ygg-loading-cont {
    display: flex;
    align-items: center;
    height: 100vh;
}

.ygg-loading .message {
    color: inherit;
    font-size: 18px;
    /* position: absolute;
    top: 40%;
    width: 100%;
    padding: 20px; */
    text-align: center;
}

.ygg-loading .svg-holder {
    color: inherit;
    font-size: 50px !important;
    transform: scale3d(1, 1, 1);
    transition: transform 0.5s 0.4s cubic-bezier(.67,-0.47,.55,1.33), opacity 0.2s 0.4s;
    /* position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px; */
}

.ygg-loading.inline .svg-holder {
    transition: none;
}

.ygg-loading.loading-hidden .svg-holder {
    transform: scale3d(3, 3, 3);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(.67,-0.47,.55,1.33), opacity 0.2s 0.2s;
}

.ygg-loading.absolute .loadingSpinner {
    position: relative;
}

.ygg-loading .loadingSpinner.svg {
    margin: 24px auto;
    display: block;
    -webkit-animation: svg-rotate 8000ms linear infinite;
    animation: svg-rotate 8000ms linear infinite;
}

.ygg-loading.inline .loadingSpinner.svg {
    margin: 0px auto;
}

.ygg-loading .loadingSpinner circle {
    fill: transparent;
    stroke: #4FAABF;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0, 301.59289;
    -webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
    animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}

.ygg-loading.inline .loadingSpinner circle {
    fill: transparent;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0, 301.59289;
    -webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color-white 8000ms steps(4) infinite;
    animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color-white 8000ms steps(4) infinite;
}

.contentShelter .ygg-loading.inline .loadingSpinner circle {
    fill: transparent;
    stroke: #4faabf;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 0, 301.59289;
    -webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
    animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}

@-webkit-keyframes svg-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes svg-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes stroke-width {
    0%, 100% {
        stroke-width: 0;
    }
    45%, 55% {
        stroke-width: 2;
    }
    50% {
        stroke-width: 4;
    }
}
@keyframes stroke-width {
    0%, 100% {
        stroke-width: 0;
    }
    45%, 55% {
        stroke-width: 2;
    }
    50% {
        stroke-width: 4;
    }
}
@-webkit-keyframes stroke-dash {
    0% {
        stroke-dasharray: 0, 301.59289;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 301.59289, 0;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 301.59289, 301.59289;
        stroke-dashoffset: -301.59289;
    }
}
@keyframes stroke-dash {
    0% {
        stroke-dasharray: 0, 301.59289;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 301.59289, 0;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 301.59289, 301.59289;
        stroke-dashoffset: -301.59289;
    }
}
@-webkit-keyframes stroke-color-white {
    from {
        stroke: #fff;
    }
}
@keyframes stroke-color-white {
    from {
        stroke: #fff;
    }
}
@-webkit-keyframes stroke-color {
    from {
        stroke: #4FAABF;
    }
}
@keyframes stroke-color {
    from {
        stroke: #4FAABF;
    }
}