.label-notice {
    display: block;
    margin-bottom: 1.5em;
    -webkit-tap-highlight-color: transparent;
}

/* Animation */
*,
*:before,
*:after {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cb {
    box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.75) inset;
    display: inline-block;
    position: relative;
    width: 2em;
    height: 2em;
    vertical-align: middle;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0.5em;
}

@media screen and (max-width: 550px) {
    .cb {
        width: 5.2727vw;
        height: 5.2727vw;
    }
}

.cb:before,
.cb:after {
    content: "";
    display: block;
    position: absolute;
}

@media screen and (max-width: 550px) {

    .cb:before,
    .cb:after {
        font-size: 1.8vw;
    }
}

.cb:before {
    animation: eraseA 0.5s steps(1) forwards;
    background: url("../../../img/exam/common/checkmark.png") 0 100%/2em 2em no-repeat;
    bottom: 0.2em;
    left: 0.4em;
    width: 0;
    height: 2.7em;
}

.cb:after {
    animation: eraseB 0.5s linear forwards;
    background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%) 22.4em 0, linear-gradient(rgb(200, 100, 110), rgb(200, 100, 110)) 22.4em 0, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.2em, rgba(255, 255, 255, 0) 0.2em, rgba(255, 255, 255, 0) 0.4em, rgba(0, 0, 0, 0.2) 0.4em, rgba(0, 0, 0, 0.2) 0.6em, rgba(0, 0, 0, 0) 0.6em) 19.6em 0/0.6em 100%, repeating-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.2em, rgba(255, 255, 255, 0) 0.2em, rgba(255, 255, 255, 0) 0.4em) 20.4em 0/1em 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.2em, rgba(255, 255, 255, 0) 0.2em, rgba(255, 255, 255, 0) 0.4em, rgba(0, 0, 0, 0.2) 0.4em, rgba(0, 0, 0, 0.2) 0.6em, rgba(0, 0, 0, 0) 0.6em) 21.6em 0/0.6em 100%, linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 65%) 19.4em 0, linear-gradient(rgb(180, 180, 180), rgb(180, 180, 180)) 19.4em 0, linear-gradient(rgba(0, 0, 0, 0.1) 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0.2) 73%) 4em 0, linear-gradient(rgb(240, 208, 0), rgb(240, 208, 0)) 4em 0, linear-gradient(-14deg, rgb(30, 30, 30) 18%, rgba(30, 30, 30, 0) 20%) 0 0/1em 1em, linear-gradient(14deg, rgba(30, 30, 30, 0) 80%, rgb(30, 30, 30) 83%) 0 1em/1em 1em, linear-gradient(-14deg, rgb(210, 160, 120) 48%, rgba(210, 160, 120, 0) 50%) 0 0/4em 1em, linear-gradient(14deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 50%) 0 1em/4em 1em, linear-gradient(14deg, rgba(210, 160, 120, 0) 48%, rgb(210, 160, 120) 50%) 0 1em/4em 1em;
    background-repeat: no-repeat;
    border-radius: 0 0.2em 0.2em 0;
    opacity: 0;
    visibility: hidden;
    transform-origin: -0.4em 1.2em;
    width: 24em;
    height: 2em;
}

.cb:checked {
    background-color: transparent;
}

.cb:checked:before {
    animation: drawA 0.5s linear forwards;
}

.cb:checked:after {
    animation: drawB 0.5s linear;
}

.cb:focus {
    outline: transparent;
}

.cb:focus+span {
    color: rgba(0, 0, 0, 0.75);
    outline: transparent;
}

.pristine:before,
.pristine:after {
    animation: none;
}

@keyframes drawA {

    from,
    5% {
        width: 0;
        height: 2em;
    }

    90%,
    to {
        width: 2.4em;
        height: 2em;
    }
}

@keyframes drawB {
    from {
        opacity: 0;
        transform: translate(0em, -1em) rotate(-50deg);
        visibility: visible;
    }

    5% {
        opacity: 1;
        transform: translate(0em, 0.6em) rotate(-60deg);
    }

    17% {
        transform: translate(0.5em, 1.6em) rotate(-65deg);
    }

    79% {
        transform: translate(2.2em, -0.28em) rotate(-63deg);
    }

    90% {
        opacity: 1;
        transform: translate(2.4em, -0.3em) rotate(-63deg);
    }

    to {
        opacity: 0;
        transform: translate(2.5em, -3.4em) rotate(-63deg);
    }
}

@keyframes eraseA {
    from {
        width: 2.4em;
        height: 2.7em;
    }

    10% {
        width: 2.4em;
        height: 2.16em;
    }

    27% {
        width: 2.4em;
        height: 1.62em;
    }

    36% {
        width: 2.4em;
        height: 1.4em;
    }

    45% {
        width: 2.4em;
        height: 1.1em;
    }

    55% {
        width: 2.4em;
        height: 0.7em;
    }

    80%,
    to {
        width: 2.4em;
        height: 0;
    }
}

@keyframes eraseB {
    from {
        opacity: 0;
        transform: translate(1.2em, -25.4em) rotate(90deg);
        visibility: visible;
    }

    10% {
        opacity: 1;
        transform: translate(2.4em, -25.2em) rotate(90deg);
    }

    20% {
        transform: translate(1.2em, -25em) rotate(90deg);
    }

    30% {
        transform: translate(2.4em, -24.8em) rotate(90deg);
    }

    40% {
        transform: translate(1.2em, -24.6em) rotate(90deg);
    }

    50% {
        transform: translate(2.4em, -24.4em) rotate(90deg);
    }

    60% {
        transform: translate(1.2em, -24.2em) rotate(90deg);
    }

    70% {
        transform: translate(2.4em, -24em) rotate(90deg);
    }

    80% {
        transform: translate(1.2em, -23.8em) rotate(90deg);
    }

    90% {
        opacity: 1;
        transform: translate(4em, -26em) rotate(100deg);
    }

    to {
        opacity: 0;
        transform: translate(4em, -26em) rotate(100deg);
    }
}

.pdf-loading {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 8px;
    animation: draw-circle 1s ease-in-out infinite;
}

@keyframes draw-circle {
    0% {
        clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }

    25% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
    }

    50% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
    }

    75% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 0% 50%);
    }

    100% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
    }
}