.qsvgl-wrapper { font-family: Tahoma, Geneva, sans-serif;
    width: 100%; height: 100%;
    background-color: #595959ab;
    position: fixed;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.qsvgl-wrapper.whiteBg {background-color: #fff;}
.qsvgl-wrapper.showAgain {animation: qsvglWrapShowAgain 0.15s 1 ease-in-out;  }


.qsvgl-wrapper.removed {animation: qsvglWrapRemoved 0.65s 1 ease-in; animation-fill-mode: both;}

.qsvgl > div.red {background-color: red;}
.qsvgl > div.yellow {background-color: yellow; opacity: 0.5;}
.qsvgl > div.green {background-color: greenyellow; opacity: 0.5;}

.qsvgl-wrapper.removed .qsvgl, .qsvgl-wrapper.removed .qsvgl > div  {
    /*animation: none;*/
    /*animation-iteration-count: 1;*/
}


.qsvgl {width: 220px; height:400px; background-color: transparent;
    /*position: relative;*/
    /*margin: 50px auto 0;*/
    animation-fill-mode: backwards;

    animation: qsvgl 6s infinite ease;
}

.qsvgl-wrapper.active {}

.qsvgl > div {animation-fill-mode: both;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition: all 1s ease-in-out;
    transform-origin: right top;
    height: 5px; width: 150px; background-color: #000;    position: absolute;}

.qsvgl .top_left {transform: translate(-40px, 0px) rotate(-45deg);}
.qsvgl .top_right {animation-name: topRight;  }
.qsvgl .right { animation-name:Right; }
.qsvgl .mid_right { animation-name:midRight; }
.qsvgl .mid { animation-name:mid; }
.qsvgl .bot_right { animation-name:botRight; }
.qsvgl .bot_left { animation-name:botLeft; }
.qsvgl .mid_left { animation-name:midLeft; }
.qsvgl .left { animation-name:left;}


@keyframes qsvglWrapRemoved {
    0% {opacity: 1;}
    99% {opacity: 0;}
    100% {opacity: 0; z-index: -1000; display: none;}
}

@keyframes qsvglWrapShowAgain {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes qsvgl {
    0% {opacity: 1;}
    80% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes topRight {
    0% {transform: translate(-40px, 0px) rotate(-45deg);}
    10% {transform: translate(-43px, 3px) rotate(-135deg);}
    80% {transform: translate(-43px, 3px) rotate(-135deg);}
    100% {transform: translate(-43px, 3px) rotate(-135deg);}
}

@keyframes Right {
    0% {transform: translate(67px, 106px) rotate(45deg); opacity: 0;}
    9% {transform: translate(67px, 106px) rotate(45deg); opacity: 0;}
    10% {transform: translate(67px, 106px) rotate(45deg);  opacity: 1;}
    20% {transform: translate(62px, 106px) rotate(-90deg)}
    80% {transform: translate(62px, 106px) rotate(-90deg)}
    100% {transform: translate(62px, 106px) rotate(-90deg)}
}

@keyframes midRight {
    0% {transform: translate(67px, 256px) rotate(90deg); opacity: 0;}
    19% {transform: translate(67px, 256px) rotate(90deg);opacity: 0;}
    20% {transform: translate(67px, 256px) rotate(90deg);opacity: 1;}
    30% {transform: translate(67px, 254px) rotate(45deg);}
    80% {transform: translate(67px, 254px) rotate(45deg);}
    100% {transform: translate(67px, 254px) rotate(45deg);}
}

@keyframes mid {
    0% {transform: translate(-42px, 152px) rotate(225deg); opacity: 0;}
    29% {transform: translate(-42px, 152px) rotate(225deg);  opacity: 0;}
    30% {transform: translate(-42px, 152px) rotate(225deg);  opacity: 1;}
    40% {transform: translate(-37px, 152px) rotate(90deg)}
    100% {transform: translate(-37px, 152px) rotate(90deg)}
}

@keyframes botRight {
    0% {transform: translate(67px, 254px) rotate(45deg); opacity: 0;}
    39% {transform: translate(67px, 254px) rotate(45deg);  opacity: 0;}
    40% {transform: translate(67px, 254px) rotate(45deg);  opacity: 1;}
    50% {transform: translate(63px, 253px) rotate(-45deg);}
    100% {transform: translate(63px, 253px) rotate(-45deg);}
}

@keyframes botLeft {
    0% {transform: translate(-39px, 362px) rotate(135deg); opacity: 0;}
    49% {transform: translate(-39px, 362px) rotate(135deg);  opacity: 0;}
    50% {transform: translate(-39px, 362px) rotate(135deg);  opacity: 1;}
    60% {transform: translate(-36px, 359px) rotate(45deg);}
    100% {transform: translate(-36px, 359px) rotate(45deg);}
}

@keyframes midLeft {
    0% {transform: translate(-146px, 256px) rotate(-135deg); opacity: 0;}
    59% {transform: translate(-146px, 256px) rotate(-135deg);  opacity: 0;}
    60% {transform: translate(-146px, 256px) rotate(-135deg);  opacity: 1;}
    70% {transform: translate(-142px, 258px) rotate(-225deg);}
    100% {transform: translate(-142px, 258px) rotate(-225deg);}
}
@keyframes left {
    0% {transform: translate(-142px, 258px) rotate(-225deg); opacity: 0;}
    69% {transform: translate(-142px, 258px) rotate(-225deg); opacity: 0;}
    70% {transform: translate(-142px, 258px) rotate(-225deg); opacity: 1;}
    80% {transform: translate(-141px, 256px) rotate(-270deg);}
    100% {transform: translate(-141px, 256px) rotate(-270deg);}
}


.qsvgl-text {    font-size: 28px;
    white-space: nowrap;
    width: 200px;
    display: flex;
    flex-wrap: nowrap;
    padding-left: 40px;
    font-weight: bold;
}

.qsvgl-textDots {animation: loadType 3s infinite steps(4); overflow:hidden; padding-left: 5px;}

@keyframes loadType {
    0% {width: 0px;}
    100% {width: 46px;}
}