.ouro {
    position: relative;
    display: inline-block;
    height: 46px;
    width: 46px;
    margin: 1em;
    border-radius: 50%;
    background: none repeat scroll 0 0 #DDDDDD;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset, 0 0 25px rgba(0, 0, 255, 0.075);
}

.ouro:after {
    content: "";
    position: absolute;
    top: 9px;
    left: 9px;
    display: block;
    height: 28px;
    width: 28px;
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.ouro>span {
    position: absolute;
    height: 100%;
    width: 50%;
    overflow: hidden;
}

.left {
    left: 0
}

.right {
    left: 50%
}

svg {
    width: 100%;
    height: 200px;
    display: block;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.circle {
    fill: transparent;
    stroke: var(--white-color);
    stroke-width: 3px;
    -webkit-animation: 1.5s circle infinite ease-in;
    animation: 1.5s circle infinite ease-in;
}

@keyframes circle {
    0% {
        stroke-dasharray: 0 400;
        stroke-dashoffset: 0;
    }

    25% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 400 400;
        stroke-dashoffset: -400;
    }
}

@-webkit-keyframes circle {
    0% {
        stroke-dasharray: 0 400;
        stroke-dashoffset: 0;
    }

    25% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 400 400;
        stroke-dashoffset: -400;
    }
}

.msg {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 1.4rem;
    color: var(--white-color);
}

.loader {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
}