﻿.modal {
    pointer-events: none;
}

.spinner-title {
    color: black;
    padding-top: 6%;
}

.spring-spinner, .spring-spinner * {
    box-sizing: border-box;
}

.spring-spinner {
    height: 60px;
    width: 60px;
}

    .spring-spinner .spring-spinner-part {
        overflow: hidden;
        height: calc(60px / 2);
        width: 60px;
    }

        .spring-spinner .spring-spinner-part.bottom {
            transform: rotate(180deg) scale(-1, 1);
        }

    .spring-spinner .spring-spinner-rotator {
        width: 60px;
        height: 60px;
        border: calc(60px / 7) solid transparent;
        border-right-color: #39CDE5;
        border-top-color: #39CDE5;
        border-radius: 50%;
        box-sizing: border-box;
        animation: spring-spinner-animation 3s ease-in-out infinite;
        transform: rotate(-200deg);
    }

@keyframes spring-spinner-animation {
    0% {
        border-width: calc(60px / 7);
    }

    25% {
        border-width: calc(60px / 23.33);
    }

    50% {
        transform: rotate(115deg);
        border-width: calc(60px / 7);
    }

    75% {
        border-width: calc(60px / 23.33);
    }

    100% {
        border-width: calc(60px / 7);
    }
}

@media screen and (max-width:480px) {

    .modal-content {
        width: 70%;
        margin: auto;
    }
}

.spinner-message {
    display: none;
    text-align: left;
    padding-left: 15px;
    color: red;
    font-weight: 200;
    margin-left:5px;
    padding-top: 10px;
    padding-bottom: 10px;
}
