.show-hide {
    opacity: 1;

    transition: all 0.5s linear;
}

.hide {
    opacity: 0;
    pointer-events: none;
}

#loading-container {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    background-color: white;
    cursor: default;
}

.loading {
    color: #ccc;
    margin: 0;
    font: .8em verdana;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;


    /* font-family: monospace;
    font-size: 40px;
    font-weight: bolder; */
}

.loading span {
    animation-name: loading;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;



    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin: 5px;
    background: rgb(0, 90, 140);
    border-radius: 40px;
}
.loading span:nth-of-type(2) {
    background: rgb(20, 110, 160);
    animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
    background: rgb(40, 130, 180);
    animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
    background: rgb(60, 150, 200);
    animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
    background: rgb(80, 180, 180);
    animation-delay: 0.8s;
}
.loading span:nth-of-type(5) {
    background: rgb(100, 200, 160);
    animation-delay: 1s;
}
.loading span:nth-of-type(6) {
    background: rgb(120, 220, 140);
    animation-delay: 1.2s;
}
.loading span:nth-of-type(7) {
    background: rgb(140, 240, 120);
    animation-delay: 1.4s;
}
.loading span:nth-of-type(8) {
    background: rgb(160, 255, 100);
    animation-delay: 1.6s;
}
@keyframes loading{
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

#loading-refresh{
    visibility:hidden;
    color:rgb(255,150,150);
}
#loading-refresh > *{
    display:inline-block;
}
#loading-manual-click{
    background-color:lightyellow;
    cursor:pointer;
}