@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #25252b;
    background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
    overflow: hidden;
}

.box {
    position: relative;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: repeating-conic-gradient(from var(--a),#123e71 0%,#123e71 5%, transparent 5%, transparent 35%, #123e71 50%);
    animation: LoginPanelAnimate 9s linear infinite;
    border-radius: 5px;
}

    .box::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: repeating-conic-gradient(from var(--a),#45f3ff 0%,#45f3ff 5%, transparent 5%, transparent 35%, #45f3ff 50%);
        animation: LoginPanelAnimate 9s linear infinite;
        border-radius: 5px;
        animation-delay: -1s;
    }

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes LoginPanelAnimate {
    0% {
        --a: 0deg;
    }

    100% {
        --a: 360deg;
    }
}

.LoginErrorMsg {
    padding-top: 5px;
}

.StarLightEvoTitle {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    color: #fff;
    align-self: center;
}

.box::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: #2d2d39;
    border-radius: 5px;
    border: 9px solid #25252b;
}

.box form {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 0 40px;
    padding-bottom: 60px;
    z-index: 10000;
    overflow: hidden;
}
    .box form input {
        position: relative;
        width: 85%;
        background: rgba(255,255,255,0.1);
        padding: 10px 15px;
        border: none;
        outline: none;
        border-radius: 5px;
        color: #fff;
        font-size: 1em;
        letter-spacing: 0.05em;
    }

        .box form input::placeholder {
            color: rgba(255,255,255,0.5);
        }

        .box form input[type="submit"] {
            font-weight: 600;
            background: #fff;
            color: #2d2d39;
            cursor: pointer;
            transition: 0.3s;
        }

            .box form input[type="submit"]:hover {
                background: #123e71;
                color: #fff;
            }

    .box form .group {
        width: 85%;
        display: flex;
        justify-content: space-between;
    }

        .box form .group a {
            color: rgba(255,255,255,0.75);
            text-decoration: none;
        }

            .box form .group a:last-child {
                color: #45f3ff;
                font-weight: 500;
            }

/* Additional */