#login body.spktkl-app-bg {
    background:
    radial-gradient(900px 650px at var(--spot1-x) var(--spot1-y),
      rgba(255,255,255,var(--spot1-a)) 0%,
      rgba(255,255,255,0.05) 30%,
      rgba(0,0,0,0) 62%),
    radial-gradient(800px 520px at var(--spot2-x) var(--spot2-y),
      rgba(255,255,255,var(--spot2-a)) 0%,
      rgba(255,255,255,0.04) 28%,
      rgba(0,0,0,0) 60%),
    radial-gradient(1050px 740px at var(--sh1-x) var(--sh1-y),
      rgba(0,0,0,var(--shadow1-a)) 0%,
      rgba(0,0,0,0.08) 34%,
      rgba(0,0,0,0) 72%),
    radial-gradient(900px 620px at var(--sh2-x) var(--sh2-y),
      rgba(0,0,0,var(--shadow2-a)) 0%,
      rgba(0,0,0,0.06) 32%,
      rgba(0,0,0,0) 70%),
    radial-gradient(
      1200px 760px at 50% 38%,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.40) 62%,
      rgba(0,0,0,0.56) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.52) 0%,
      rgba(0,0,0,0.38) 45%,
      rgba(0,0,0,0.62) 100%
    ),
    url(../media/arena_background-1.png) center center / cover no-repeat,
    radial-gradient(1100px 720px at 50% 22%,
      var(--canvas-hi) 0%,
      var(--canvas-mid) 42%,
      var(--canvas-low) 78%,
      var(--canvas-edgeL) 100%),
    linear-gradient(to right,
      var(--canvas-edgeL) 0%,
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 78%,
      var(--canvas-edgeR) 100%);
}

#login .content_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login_container {
    width: 320px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 64px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    -moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition-duration: .25s;
    transition-property: height;
    transition-timing-function: ease-out;
    background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 42%,
      rgba(0,0,0,0.08) 100%),
    var(--panel-base);
}

.control_tabs {
    width: 280px;
    height: 32px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.control_tabs button {
    width: calc(280px / 3);
    height: 32px;
    cursor: pointer;
    color: #999;
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.02) 40%,
      rgba(0,0,0,0.00) 100%),
    linear-gradient(to bottom,
      var(--panel-hi) 0%,
      var(--panel-base) 100%);
    border: 1px solid #999;
    transition-duration: .25s;
    transition-property: color, border, font-weight, text-decoration;
    transition-timing-function: ease-out;
}

.control_tabs button[data-status="active"] {
    border: 1px solid #E6B800;
    font-weight: bold;
    text-decoration: underline;
}

:root[data-theme="dark"] .control_tabs button[data-status="active"] { color: #FFF; }

:root[data-theme="light"] .control_tabs button[data-status="active"] { color: #000; }

#phone_btn {
    border-top-right-radius: var(--radius-2);
    -moz-border-radius-topright: var(--radius-2);
    -webkit-border-top-right-radius: var(--radius-2);
    border-bottom-right-radius: var(--radius-2);
    -moz-border-radius-bottomright: var(--radius-2);
    -webkit-border-bottom-right-radius: var(--radius-2);
}

#username_btn {
    border-top-left-radius: var(--radius-2);
    -moz-border-radius-topleft: var(--radius-2);
    -webkit-border-top-left-radius: var(--radius-2);
    border-bottom-left-radius: var(--radius-2);
    -moz-border-radius-bottomleft: var(--radius-2);
    -webkit-border-bottom-left-radius: var(--radius-2);
}

.login_method,
.password_container {
    width: 280px;
    height: auto;
    margin: 0 auto;
    margin-top: 20px;
    display: block;
    position: relative;
}

.login_container h3 {
    width: 320px;
    height: 64px;
    display: block;
    position: relative;
    font-weight: 600;
    line-height: 64px;
    text-align: center;
}

.login_container p {
    width: 100%;
    font-size: 14px;
    display: block;
    text-indent: 20px;
}

.login_container label {
    width: 100%;
    font-size: 14px;
    display: block;
}

button.login,
.login_container input {
    width: 280px;
}

button.login {
    height: 32px;
    border: none;
    outline: none;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    transition-duration: .25s;
    transition-property: box-shadow;
    transition-timing-function: ease-out;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    -moz-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

button.login:hover {
    box-shadow: rgba(52, 58, 64, 0.25) 0px 30px 60px -12px inset, rgba(33, 37, 41, 0.3) 0px 18px 36px -18px inset;
}