@keyframes animate-glow {
    0% {
        opacity: 0;
        filter: brightness(3) saturate(3);
        transform: scale(0.8, 0.8);
    }

    100% {
        opacity: 1;
        filter: brightness(1) saturate(1);
        transform: scale(1, 1);
    }
}

.header {
    height: var(--header-height);
}

#popi-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

    #popi-modal.active {
        display: flex;
    }

    #popi-modal > .popi-container {
        border-radius: 8px;
        background-color: var(--background-color);
        padding: 30px;
    }

    #popi-modal.active > .popi-container {
        animation-duration: 0.1s;
        animation-fill-mode: backwards;
        animation-name: animate-glow;
        animation-timing-function: ease;
    }

    #popi-modal > .popi-container > .popi-header {
        text-align: center;
        margin-top: 0;
    }

    #popi-modal ul {
        list-style: circle;
    }

        /*changes the colour of the list item circles*/
        #popi-modal ul li:before {
            font-weight: bold;
            display: inline-block;
        }

    #popi-modal > .popi-container .btn-container {
        text-align: center;
    }


.popi-group {
    font-size: x-small;
    display: flex;
}

    .popi-group > .popi-consent-text {
        padding-left: 9px;
    }

        .popi-group > input[type=checkbox],
        .popi-group > .popi-consent-text > label,
        .popi-group > .popi-consent-text > a {
            cursor: pointer;
        }

        .popi-group > .popi-consent-text > a {
            color: var(--brand-neptune);
        }

div.wizard > form#wizard-form > div.wizard-body > .control-group.error label,
div.wizard > form#wizard-form > div.wizard-body > .control-group.error .error-message,
div.wizard > form#wizard-form > div.wizard-body > .control-group.error ::placeholder {
    color: var(--brand-feedback-error);
}

div.wizard > form#wizard-form > div.wizard-body > div.control-group#submit-error {
    display: block;
}