body {
    background: url(/img/bg.jpg) fixed bottom repeat-x #ffffff
}

.validation-summary-errors {
    color: var(--bs-danger);
    text-align: center;
}

    .validation-summary-errors > ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        padding-bottom: 15px;
        list-style-type: none;
    }

        .validation-summary-errors > ul > li {
            font-weight: bolder;
        }

.regimgframe {
    margin: 0 auto;
    display: block;
    height: auto;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin-bottom: 25px;
    position: relative
}

    .regimgframe img {
        width: 100%;
        height: auto
    }

    .regimgframe .serial {
        position: absolute;
        left: 50.05%; /*51%*/
        top: 11.3%; /*13%*/
        height: 13.5%; /*12%*/
        width: 46.9%; /*46%*/
        outline: none;
    }

    .regimgframe .btnsubmit {
        position: absolute;
        top: 105%;
        left: 40%;
        width: 20%;
        height: auto
    }

.serial {
    -webkit-animation: flash 3.0s linear infinite;
    -moz-animation: flash 3.0s linear infinite;
    -ms-animation: flash 3.0s linear infinite;
    -o-animation: flash 3.0s linear infinite;
    animation: flash 3.0s linear infinite;
    border: 0;
    background: none;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

    .serial.input-validation-error {
        -webkit-animation: flash-error 3.0s linear infinite;
        -moz-animation: flash-error 3.0s linear infinite;
        -ms-animation: flash-error 3.0s linear infinite;
        -o-animation: flash-error 3.0s linear infinite;
        animation: flash-error 3.0s linear infinite;
    }

.file-icon {
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: block;
    max-width: 250px;
}

.file-link {
    height: 15px;
    line-height: 15px;
    color: #000;
    width: 100%;
    padding-bottom: 35px;
    padding-top: 0;
    margin: 0;
}

.logo-container > img {
    max-width: 250px;
    height: auto;
    margin: 20px 0 8px 0;
    width: 60%;
}

@-webkit-keyframes flash {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}

@-webkit-keyframes flash-error {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}

@-moz-keyframes flash {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}

@-moz-keyframes flash-error {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}

@-ms-keyframes flash {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}

@-ms-keyframes flash-error {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}


@keyframes flash {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px green;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}

@keyframes flash-error {
    0% {
        box-shadow: none;
    }

    33% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    66% {
        box-shadow: 0 0 50px red;
        border: 5px solid #000 !important
    }

    100% {
        box-shadow: none;
    }
}