﻿/* Spinner */
.loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; text-align: center; z-index: 1000; background-color: rgba(255,255,255, 1); }

.loader { position: relative; margin: 0 auto; width: 100px; left: 0; right: 0; top: 0; bottom: 0; margin-top: 20px; margin-bottom: 20px; }

    .loader:before { content: ''; display: block; padding-top: 100%; }

.loader-container { display: flex; flex-direction: column; justify-content: center; align-content: center; height: 100%; }

.circular { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; height: 100%; -webkit-transform-origin: center center; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; }

@-webkit-keyframes rotate {
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes rotate {
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes dash {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }

    50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }

    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}

@keyframes dash {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }

    50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }

    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}

@-webkit-keyframes color {
    100%, 0% { stroke: #d62d20; }

    40% { stroke: #0057e7; }

    66% { stroke: #008744; }

    80%, 90% { stroke: #ffa700; }
}

@keyframes color {
    100%, 0% { stroke: #d62d20; }

    40% { stroke: #0057e7; }

    66% { stroke: #008744; }

    80%, 90% { stroke: #ffa700; }
}

.loading.off { display: none; }

#loader-msg.off { display: none; }

#loader-msg { padding: 0 15px; }

    #loader-msg p { margin-bottom: 0; font-size: 16px; font-weight: 600; }

@media (max-width: 768px) {
    #loader-msg p { margin-bottom: 0; font-size: 12px; font-weight: 600; }
}
