/* 
    Created on : 29/11/2021, 12:49:30 PM
    Author     : David Flores
*/

.loading{
    visibility: visible;
    opacity: 1;
    position: fixed;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    transition:visibility 0.5s linear,opacity 0.5s linear;
}

.hidden{
    visibility: hidden;
    opacity: 0;
}

.box{
    position: relative;
    width: 100px;
    height: 100px;
    background-color: transparent;
}

.box .out{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    border: 10px solid #007bff;
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    animation: rot 0.6s linear infinite;
}

.box .mid{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 70px;
    height: 70px;
    border: 10px solid #dc3545;
    border-radius: 50%;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    animation: rot 1.5s linear infinite reverse;
}

.box .in{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    border: 10px solid #ffc107;
    border-radius: 50%;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    animation: rot 2s linear infinite;
}

.box p{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2rem;
    margin: auto;
    color: #f8f9fa;
    font-weight: 600;
}

/* loading dots */

.loading-legend:after {
  content: '.';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}
}


@keyframes rot{
    0%{
        transform: rotate(0deg)
    }
    100%{
        transform: rotate(360deg)
    }
}