* {
    padding: 0;
    margin: 0;
    color: #1a1f36;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif
}

body {
    min-height: 100%;
    background-image: url(/img/calliope_bg.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transform: scale(1.1)
}

h2 {
    color: #f2c7ff;
    letter-spacing: -1px
}

h3 {
    color: #f2c7ff;
    letter-spacing: -1px
}

img {
    pointer-events: none
}

@keyframes rotation {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(10deg)
    }
}

.rot {
    animation: rotation 1s infinite linear;
    animation-timing-function: steps(2)
}

.login-root {
    background: #fff;
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden
}

.flex-flex {
    display: flex;
    flex-direction: column
}

.center-center {
    align-items: center;
    justify-content: center
}

.box-root {
    box-sizing: border-box;
    margin-top: 5%;
    margin-left: 35%;
    margin-right: 35%
}

.padding-top--64 {
    padding-top: 64px
}

.padding-top--24 {
    padding-top: 24px
}

.padding-top--48 {
    padding-top: 48px
}

.padding-bottom--24 {
    padding-bottom: 24px
}

.padding-horizontal--48 {
    padding: 48px
}

.padding-bottom--15 {
    padding-bottom: 15px
}

.flex-justifyContent--center {
    -ms-flex-pack: center;
    justify-content: center
}

.formbg-outer {
    display: table
}

.formbg {
    display: flex;
    flex-wrap: wrap;
    vertical-align: middle;
    margin: 2px auto;
    width: 100%;
    max-width: 448px;
    background: #41266d;
    border-radius: 32px;
    border: double;
    border-color: rgb(27, 16, 43);
    box-shadow: rgba(60, 66, 87, .12) 0 7px 14px 0, rgba(0, 0, 0, .12) 0 3px 6px 0
}

label {
    color: #f2c7ff;
    margin-bottom: 10px;
    text-align: center
}

label {
    font-size: 14px;
    font-weight: 600;
    display: block
}

.field input {
    font-size: 16px;
    line-height: 28px;
    padding: 8px 16px;
    width: 100%;
    min-height: 44px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / .5);
    background-color: #f2c7ff;
    box-shadow: transparent 0 0 0 0, transparent 0 0 0 0, transparent 0 0 0 0, rgba(60, 66, 87, .16) 0 0 0 1px, transparent 0 0 0 0, transparent 0 0 0 0, transparent 0 0 0 0
}

input[type=button] {
    background-color: #a554d4;
    box-shadow: transparent 0 0 0 0, transparent 0 0 0 0, rgba(0, 0, 0, .12) 0 1px 1px 0, #a554d4 0 0 0 1px, transparent 0 0 0 0, transparent 0 0 0 0, rgba(60, 66, 87, .08) 0 2px 5px 0;
    color: #fff;
    font-weight: 600;
    cursor: pointer
}

input[type=button]:disabled {
    background-color: #3a363b;
}