/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11.01.2023, 21:32:33
    Author     : ckl-root
*/

img.wizardstick {
    width: 13px;
}

img.toearn {
    filter: grayscale(1);
}

.testsuite-hidden {
    display: none;
}

.testsuite-group-hints {
    margin-left: 10px;
    font-weight: normal;
}

.testsuite-active:hover {
    box-shadow:0px 5px 5px rgba(0,0,0,0.2);
    transform : translateY(-3px);
    cursor: pointer;
}

.testuite-wizard-status {
    font-size: smaller;
    font-weight: normal;
    color: black;
    position: relative;
    text-align: right;
}

.testsuite-group-reveal {
    font-size: smaller;
    font-weight: normal;
    color: black;
}

.testsuite-margintop {
    margin-top: 10px;
}

.testsuite-progress {
    cursor: progress;
    animation: greenyellow2 2s linear infinite;
}

@keyframes greenyellow2 {
    from {
        color: yellow;
    }
    to {
        transform: rotate(360deg);
        color: green;
    }
}

.testsuite-wizard-symbol  {
    --pixwidth: 150px;
    --speed: 0.8s;

    position: relative;
    bottom: var(--pixwidth);
    bottom: 1.5em;
    right: 0px;
    display: inline-block;
    position: absolute;
}

.testsuite-wizard-symbol img.wizard-avatar {
    animation: mops var(--speed) linear;
    animation-fill-mode: backwards;
}

.testsuite-wizard-symbol img.wizard-avatar:nth-of-type(1) {
    animation-delay: calc(var(--speed)*0);
    width: calc(var(--pixwidth)*0.2);
}
.testsuite-wizard-symbol img.wizard-avatar:nth-of-type(2) {
    animation-delay: calc(var(--speed)*1);
    width: calc(var(--pixwidth)*0.4);
}
.testsuite-wizard-symbol img.wizard-avatar:nth-of-type(3) {
    animation-delay: calc(var(--speed)*2);
    width: calc(var(--pixwidth)*0.6);
}
.testsuite-wizard-symbol img.wizard-avatar:nth-of-type(4) {
    animation-delay: calc(var(--speed)*3);
    width: calc(var(--pixwidth)*0.8);
}
.testsuite-wizard-symbol img.wizard-avatar:nth-of-type(5) {
    animation: mops2 7s linear;
    animation-fill-mode: both;
    animation-delay: calc(var(--speed)*4);
    width: calc(var(--pixwidth)*1);
}

.testsuite-wizardstar {
    text-align: center;
}

.testsuite-wizardstar img {
    animation: mops var(--speed) linear;
    animation-delay: calc(var(--speed) * var(--nstars));
    animation-fill-mode: both;
}

@keyframes mops {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mops2 {
    from {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0.2;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    60% {
        opacity: 1;
    }
    70% {
        opacity: 0.2;
    }
    80% {
        opacity: 1;
    }
    90% {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}