/**
 * Material Loader (new)
 */
.loading-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
}

.material-loader {
    color: #e5e5e5;
}

.material-loader svg {
    animation: mat-progress-spinner-linear-rotate 2000ms linear infinite;
    width: 100px;
    height: 100px;
    transform: rotate(-90deg);
    transform-origin: center;
    overflow: visible;
}

.material-loader circle {
    animation-name: mat-progress-spinner-stroke-rotate-100;
    stroke-dasharray: 282.743px;
    stroke-width: 10%;
    /*stroke-width: 2px;*/
    stroke: currentColor;
    transition-property: stroke;
    animation-duration: 4000ms;
    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
    animation-iteration-count: infinite;
    fill: transparent;
    transform-origin: center;
    transition: stroke-dashoffset 225ms linear;
}

@keyframes mat-progress-spinner-linear-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes mat-progress-spinner-stroke-rotate-100 {
    0% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(0);
    }
    12.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(0);
    }
    12.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(72.5deg);
    }
    25% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(72.5deg);
    }
    25.0001% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(270deg);
    }
    37.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(270deg);
    }
    37.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(161.5deg);
    }
    50% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(161.5deg);
    }
    50.0001% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(180deg);
    }
    62.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(180deg);
    }
    62.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(251.5deg);
    }
    75% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(251.5deg);
    }
    75.0001% {
        stroke-dashoffset: 268.606171575px;
        transform: rotate(90deg);
    }
    87.5% {
        stroke-dashoffset: 56.5486677px;
        transform: rotate(90deg);
    }
    87.5001% {
        stroke-dashoffset: 56.5486677px;
        transform: rotateX(180deg) rotate(341.5deg);
    }
    100% {
        stroke-dashoffset: 268.606171575px;
        transform: rotateX(180deg) rotate(341.5deg);
    }
}