:root {
    --color-primary: #5ccbcb;
    --color-background: #000;
    --color-main-container-bg: hsla(0,0%,6%,.9);
    --color-main-container-border: #1e2625;
    --color-main-container-title: #fff;
    --color-maint-container-divider: #303030;
    --color-input-text: #fff;
    --color-input-bg: #272727;
    --color-input-border: #474746;
    --color-input-placeholder: #b0b0b0;
    --label-color: var(--dark-chalice);
    --color-link: #0af;
    --button-text-color: var(--smokey-black);
    --color-link-hover: var(--color-primary);
    --color-maximum-red: #d81f27;
    --error-bg-color: #d81f2830;
    --error-border-color: #d81f28;
    --error-icon-color: #d81f28;
    --error-text-color: #fff;
    --error-text-no-bg-color: #d81f27;
    --success-text-color: #3c9529;
    --success-bg-color: #01983b;
    --post-fields-link-color: #b0b0b0;
    --steam-icon-bg-color: #4e6e39;
    --dark-chalice: #b0b0b0;
    --dark-gray: #474746;
    --smokey-black: #101010;
    --rich-black: #12121e;
    --checkbox-bg-color: #272727;
    --checkbox-border-color: #474746;
    --font-family-main: "Shentox",sans-serif;
    --font-family-input: "Shentox",sans-serif;
    --font-size-main-title: 2.6rem;
    --line-height-base: 1.42857143;
    --font-size-input: 1.6rem;
    --font-size-label: 1.5rem;
    --font-weight-bold: 600;
    --font-button-primary-weight: 600;
    --message-font-size: 1.4rem;
    --message-font-weight: 500;
    --spacing-xs: .25rem;
    --spacing-sm: .5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1200px;
    --button-primary-text-color: #101010;
    --button-primary-background-color: var(--color-primary);
    --button-primary-font-size: 1.8rem;
    --button-primary-padding: 1.5rem 2.5rem;
    --button-secondary-text-color: #fff;
    --button-secondary-border-color: #303030;
    --button-secondary-bg-hover-color: #070707;
    --button-secondary-font-size: 1.8rem;
    --button-secondary-padding: 1.5rem 2.5rem;
    --focus-shadow: 0 0 3px 1px rgba(92,203,203,.9);
    --focus-transition: border .3s ease,box-shadow .3s ease;
    --checkbox-mark-color: #333
}

*,:after,:before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

body,html {
    height: 100%
}

body {
    font-size: 1.6rem;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],template {
    display: none
}

a {
    background-color: transparent
}

a:active,a:hover {
    outline: 0;
    text-decoration: none
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em
}

h1,h2,h3,h4,h5,h6 {
    color: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1
}

h1,h2,h3 {
    margin-top: 20px
}

h1,h2,h3,h4,h5,h6 {
    margin-bottom: 10px
}

h4,h5,h6 {
    margin-top: 10px
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
#bodyWrapper {
    position: relative;
    float: left;
    width: 100%;
    min-height: 100%;
}
.page-wrapper {
    position: relative;
    z-index: 10;
    max-width: 1140px;
    margin: auto;
}
.content-wrapper .row {
    float: left;
    width: 100%;
    margin: 0px auto;
    position: relative;
}
.content-wrapper {
    margin-top: 90px;
    float: left;
    width: 100%;
    margin-bottom: 240px;
}
img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,kbd,pre,samp {
    font-family: Menlo,Monaco,Consolas,Courier New,monospace;
    font-size: 1em
}

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,select {
    text-transform: none
}

button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: none;
    margin: 0;
    margin-inline:0;padding: 0;
    padding-block:0;padding-inline:0}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,th {
    padding: 0
}

p {
    margin: 0 0 10px
}

body {
    background-color: #000;
    background-color: var(--color-background);
    background-image: url(/resources/bg1.png);
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    font-family: Shentox,sans-serif;
    font-family: var(--font-family-main);
    line-height: 1.42857143;
    line-height: var(--line-height-base)
}

body.launcher {
    background: transparent
}

body.launcher .logo {
    display: none
}

h1 {
    margin: 0;
    text-wrap-style: pretty;
    text-align: center
}

h2,h3,h4 {
    margin: 0;
    text-wrap-style: pretty
}

a {
    color: #0af;
    color: var(--color-link);
    text-decoration: none
}

a,a:hover {
    transition: color .3s ease
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

input[type=email],input[type=password],input[type=text],select,textarea {
    border: 1px solid #474746;
    border: 1px solid var(--color-input-border);
    color: var(--input-text-color);
    font-family: Shentox,sans-serif;
    font-family: var(--font-family-input);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    padding: 10px;
    transition: border .3s ease,box-shadow .3s ease;
    transition: var(--focus-transition);
}

:is(input[type=text],input[type=password],input[type=email],select,textarea)::-moz-placeholder {
    color: var(--input-placeholder-color)
}

:is(input[type=text],input[type=password],input[type=email],select,textarea)::placeholder {
    color: var(--input-placeholder-color)
}

:is(input[type=text],input[type=password],input[type=email],select,textarea):focus {
    border-color: #5ccbcb;
    border-color: var(--color-primary);
    box-shadow: 0 0 3px 1px #5ccbcbe6;
    box-shadow: var(--focus-shadow);
    outline: none;
    transition: border .3s ease,box-shadow .3s ease;
    transition: var(--focus-transition)
}

label {
    color: #b0b0b0;
    color: var(--label-color);
    display: block;
    font-size: 1.5rem;
    font-size: var(--font-size-label);
    margin-bottom: 1rem
}

button,label {
    font-weight: 600;
    text-transform: uppercase
}

button {
    cursor: pointer;
    font-size: 1.8rem
}

p {
    margin: 0
}

hr {
    width: 100%
}

.text span,.text strong {
    font-weight: 600
}

.main-content-container {
    background-color: #0f0f0fe6;
    background-color: var(--color-main-container-bg);
    border: 1px solid #1e2625;
    border-top: 1px solid #5ccbcb;
    border: 1px solid var(--color-main-container-border);
    border-top-color: var(--color-primary);
    padding: 1.5rem;
    padding: var(--spacing-lg)
}

:is(.main-content-container p,.main-content-container .post-fields-links) a {
    color: #5ccbcb;
    color: var(--color-primary);
    font-weight: 600;
    position: relative;
    text-decoration: none;
    transition: color .3s ease
}

:is(:is(.main-content-container p,.main-content-container .post-fields-links) a):before {
    border-top: 1px solid #5ccbcb;
    border-top: 1px solid var(--color-primary);
    bottom: 0;
    content: "";
    display: block;
    height: 1;
    left: 0;
    position: absolute;
    transition: all .15s ease-in-out;
    width: 0
}

:is(:is(.main-content-container p,.main-content-container .post-fields-links) a):hover {
    transition: color .3s ease
}

:is(:is(.main-content-container p,.main-content-container .post-fields-links) a):hover:before {
    width: 100%
}

.external-link:is(:is(.main-content-container p,.main-content-container .post-fields-links) a) svg {
    color: #5ccbcb;
    color: var(--color-link-hover);
    display: inline-block;
    height: 1.1rem;
    margin-left: .5rem;
    opacity: .7;
    transition: opacity .3s ease;
    width: 1.1rem
}

.external-link:is(:is(.main-content-container p,.main-content-container .post-fields-links) a):hover svg {
    opacity: 1
}

.main-content-container.center-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.main-content-container.center-content .text-container {
    text-align: center
}

.main-content-container .title {
    color: #fff;
    color: var(--color-main-container-title);
    font-size: 2.6rem;
    font-size: var(--font-size-main-title);
    font-weight: 600;
    text-transform: uppercase
}

.main-content-container .text-container {
    text-wrap-style: pretty
}

.main-content-container .post-fields-links {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center
}

:is(.main-content-container .post-fields-links) a {
    color: #b0b0b0;
    color: var(--post-fields-link-color);
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase
}

:is(:is(.main-content-container .post-fields-links) a):hover {
    color: #5ccbcb;
    color: var(--color-link-hover)
}

.external-link:is(:is(.main-content-container .post-fields-links) a):hover svg {
    display: inline-block;
    opacity: 1;
    transition: opacity .3s ease
}

.external-link:is(:is(.main-content-container .post-fields-links) a) {
    position: relative
}

.external-link:is(:is(.main-content-container .post-fields-links) a) svg {
    color: #5ccbcb;
    color: var(--color-link-hover);
    height: 11px;
    opacity: 0;
    position: absolute;
    right: -2rem;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .3s ease;
    width: 11px
}

:is(.main-content-container .post-fields-links) .email-logon-link {
    color: #fff
}

.main-content-container hr {
    border: 0;
    border-top: 1px solid #303030;
    border-top: 1px solid var(--color-maint-container-divider);
    margin: 0
}

.main-content-container .thirdparty {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center
}

:is(.main-content-container .thirdparty) .steam {
    align-items: center;
    background-color: #4e6e39;
    background-color: var(--steam-icon-bg-color);
    display: flex;
    height: 4rem;
    justify-content: center;
    width: 4rem
}

:is(:is(.main-content-container .thirdparty) .steam) svg {
    height: 100%;
    width: 100%
}

:is(.main-content-container .thirdparty) .epicgames {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 4rem;
    justify-content: center;
    width: 4rem
}

.main-content-container .login-footer {
    width: 100%;
    justify-items: start
}

:is(.main-content-container input)::-moz-placeholder {
    color: #b0b0b0;
    color: var(--color-input-placeholder);
    font-size: 1.5rem;
    font-weight: 600;
    opacity: .7;
    text-transform: uppercase
}

:is(.main-content-container input)::placeholder {
    color: #b0b0b0;
    color: var(--color-input-placeholder);
    font-size: 1.5rem;
    font-weight: 600;
    opacity: .7;
    text-transform: uppercase
}

.main-content-container .input-with-icon {
    align-items: center;
    display: flex;
    position: relative
}

:is(.main-content-container .input-with-icon) .icon {
    color: #b0b0b0;
    color: var(--color-input-placeholder);
    display: flex;
    left: 12px;
    opacity: .7;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

.focused:is(.main-content-container .input-with-icon) input::-moz-placeholder {
    opacity: .3
}

.focused:is(.main-content-container .input-with-icon) .icon,.focused:is(.main-content-container .input-with-icon) input::placeholder,.has-content:is(.main-content-container .input-with-icon) .icon {
    opacity: .3
}

.has-password-toggle:is(.main-content-container .input-with-icon) .password-toggle-btn {
    align-items: center;
    background: none;
    border: none;
    color: #b0b0b0;
    color: var(--color-input-placeholder);
    cursor: pointer;
    display: flex;
    justify-content: center;
    opacity: .7;
    padding: 4px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease,color .2s ease;
    z-index: 2
}

:is(.has-password-toggle:is(.main-content-container .input-with-icon) .password-toggle-btn):hover {
    color: #5ccbcb;
    color: var(--color-primary);
    opacity: 1
}

:is(.has-password-toggle:is(.main-content-container .input-with-icon) .password-toggle-btn):focus {
    box-shadow: 0 0 3px 1px #5ccbcbe6;
    box-shadow: var(--focus-shadow);
    color: #5ccbcb;
    color: var(--color-primary);
    outline: 1px solid #5ccbcb;
    outline: solid 1px var(--color-primary)
}

:is(.has-password-toggle:is(.main-content-container .input-with-icon) .password-toggle-btn) .password-toggle-icon {
    height: 16px;
    pointer-events: none;
    width: 16px
}

.has-password-toggle:is(.main-content-container .input-with-icon) input {
    padding-right: 40px
}

.has-password-toggle:is(.main-content-container .input-with-icon):not(.has-content) .password-toggle-btn {
    opacity: 0;
    pointer-events: none
}

.has-password-toggle.focused:is(.main-content-container .input-with-icon) .password-toggle-btn,.has-password-toggle.has-content:is(.main-content-container .input-with-icon) .password-toggle-btn {
    opacity: .7;
    pointer-events: auto
}

.main-content-container .breached-password-text {
    align-items: start
}

:is(.main-content-container .breached-password-text) h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase
}

:is(.main-content-container .breached-password-text) p {
    margin-bottom: 3rem
}

:is(:is(.main-content-container .breached-password-text) p):last-child {
    margin-bottom: 0
}

:is(:is(.main-content-container .breached-password-text) .breached-external-link) svg {
    color: #5ccbcb;
    color: var(--color-link-hover);
    display: inline-block;
    height: 1.1rem;
    margin-left: .5rem;
    opacity: .7;
    transition: opacity .3s ease;
    width: 1.1rem
}

:is(:is(.main-content-container .breached-password-text) .breached-external-link):hover svg {
    opacity: 1
}

:is(.main-content-container p.info) span {
    font-weight: 600
}

.main-content-container .character {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

:is(.main-content-container .character) h2 {
    font-size: 1.5rem;
    font-weight: 600
}

#ValidationContainer {
    display: none
}

#ValidationContainer:has(.validation-summary-errors) {
    display: flex
}

#error-message-container {
    display: flex
}

:is(#ValidationContainer,#error-message-container) .validation-content-container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 1.5rem;
    align-items: center;
    animation: slideIn .3s ease-out;
    background: #d81f2830;
    background: var(--error-bg-color);
    border: 1px solid #d81f28;
    border: 1px solid var(--error-border-color);
    font-size: 1.4rem;
    font-weight: 500;
    gap: 1.5rem;
    padding: 7px 15px
}

:is(:is(#ValidationContainer,#error-message-container) .validation-content-container) svg {
    color: #d81f28;
    color: var(--error-icon-color)
}

.validation-summary-errors ul {
    font-weight: 600
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.authenticator-checkbox {
    align-items: center;
    display: flex;
    margin-bottom: 0
}

.authenticator-checkbox input[type=checkbox] {
    cursor: pointer;
    margin-right: .5rem;
    margin-right: var(--spacing-sm)
}

.authenticator-checkbox label {
    color: #fff;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
    text-transform: none
}

.text-with-icon {
    align-items: center;
    display: flex;
    gap: 3rem
}

.text-with-icon svg {
    color: #5ccbcb;
    color: var(--color-primary);
    display: flex;
    height: 4.8rem;
    width: 4.2rem
}

.text-with-icon strong {
    font-weight: 600
}

.field-validation-error {
    color: #d81f27;
    color: var(--error-text-no-bg-color);
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: .5rem
}

.input-validation-error {
    border-color: #d81f2830;
    border-color: var(--error-bg-color);
    box-shadow: 0 0 0 1px #d81f2830;
    box-shadow: 0 0 0 1px var(--error-bg-color)
}

.button-link-primary,button.button-primary {
    align-items: center;
    background: #5ccbcb;
    background: var(--button-primary-background-color);
    border: none;
    border-radius: 0;
    color: #101010;
    color: var(--button-primary-text-color);
    display: inline-flex;
    font-size: 1.8rem;
    font-size: var(--button-primary-font-size,1.8rem);
    font-weight: 600;
    font-weight: var(--font-button-primary-weight);
    justify-content: center;
    line-height: normal;
    opacity: 1;
    overflow: hidden;
    padding: 1.5rem 2.5rem;
    padding: var(--button-primary-padding,1.5rem 2.5rem);
    position: relative;
    text-transform: uppercase;
    transition: filter .3s;
    width: 100%;
    z-index: 1
}

.width-auto:is(button.button-primary,.button-link-primary) {
    max-width: none;
    width: auto
}

:is(button.button-primary,.button-link-primary):hover:before {
    opacity: 1;
    transform: translateZ(0)
}

:is(button.button-primary,.button-link-primary):disabled span {
    visibility: hidden
}

:is(button.button-primary,.button-link-primary):disabled .loader {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

:is(button.button-primary,.button-link-primary):disabled:hover {
    cursor: inherit
}

:is(button.button-primary,.button-link-primary):disabled:before {
    opacity: 1;
    transform: translateZ(0)
}

:is(button.button-primary,.button-link-primary):before {
    background-color: #00000026;
    clip-path: polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%);
    content: "";
    filter: brightness(1.05);
    height: 102%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -1px;
    transform: translate3d(-100%,0,0);
    transition: transform .4s ease 0s,opacity .4s ease 0s;
    width: 120%
}

.button-link-secondary,button.button-secondary {
    align-items: center;
    background: transparent;
    border: 1px solid #303030;
    border: 1px solid var(--button-secondary-border-color);
    border-radius: 0;
    color: var(--account-primary-color);
    display: inline-flex;
    font-size: 1.6rem;
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    justify-content: center;
    line-height: normal;
    max-width: var(--account-form-item-width);
    min-height: 4.6rem;
    opacity: 1;
    overflow: hidden;
    padding: 0 2.4rem;
    position: relative;
    text-transform: uppercase;
    width: 100%;
    z-index: 1
}

:is(button.button-secondary,.button-link-secondary) span {
    display: inline-block;
    position: relative;
    text-align: center;
    z-index: 2
}

:is(button.button-secondary,.button-link-secondary):before {
    background-color: #070707;
    background-color: var(--button-secondary-bg-hover-color);
    clip-path: polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%);
    content: "";
    filter: brightness(1.05);
    height: 102%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -1px;
    transform: translate3d(-100%,0,0);
    transition: transform .4s ease 0s,opacity .4s ease 0s;
    width: 120%;
    z-index: 1
}

:is(button.button-secondary,.button-link-secondary):hover:before {
    opacity: 1;
    transform: translateZ(0)
}

.button-link-secondary,button.button-secondary {
    transition: border .3s ease,box-shadow .3s ease;
    transition: var(--focus-transition)
}

:is(button.button-secondary,.button-link-secondary):focus {
    border-color: #5ccbcb;
    border-color: var(--color-primary);
    box-shadow: 0 0 3px 1px #5ccbcbe6;
    box-shadow: var(--focus-shadow);
    outline: none;
    transition: border .3s ease,box-shadow .3s ease;
    transition: var(--focus-transition)
}

.buttons-horizontal .button-secondary {
    padding: 1.5rem 0;
    width: 100%
}

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

.custom-checkbox {
    display: flex;
    position: relative
}

.custom-checkbox input[type=checkbox] {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0
}

:is(:is(.custom-checkbox label) input:checked)+span {
    background: #5ccbcb;
    background: var(--color-primary);
    border-color: #5ccbcb;
    border-color: var(--color-primary)
}

:is(:is(:is(.custom-checkbox label) input:checked)+span) svg {
    opacity: 1
}

:is(:is(.custom-checkbox label) input:focus)+span {
    border-color: #5ccbcb;
    border-color: var(--color-primary);
    box-shadow: 0 0 3px 1px #5ccbcbe6;
    box-shadow: var(--focus-shadow);
    outline: none;
    transition: border .3s ease,box-shadow .3s ease;
    transition: var(--focus-transition)
}

:is(.custom-checkbox label) span {
    align-items: center;
    background: #272727;
    background: var(--checkbox-bg-color);
    border: 1px solid #474746;
    border: 1px solid var(--checkbox-border-color);
    border-radius: .25rem;
    display: flex;
    height: 2rem;
    justify-content: center;
    transition: background .2s,border-color .2s,box-shadow .2s;
    width: 2rem
}

:is(:is(.custom-checkbox label) span) svg {
    color: #333;
    color: var(--checkbox-mark-color);
    opacity: 0;
    transition: opacity .2s
}

.custom-checkbox label {
    cursor: pointer;
    display: grid;
    grid-template-columns: 2rem 1fr;
    grid-gap: 1rem;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;
    gap: 1rem;
    margin: 0;
    text-transform: none
}

.character-select {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
    justify-items: center;
    grid-gap: 2rem;
    gap: 2rem;
    width: 100%
}

.character-select input[type=radio] {
    display: none
}

.character-select input[type=radio]:checked+img {
    outline: 1px solid #5ccbcb;
    outline: solid 1px var(--color-primary);
    transition: all .2s ease-in-out
}

.character-select input[type=radio]:checked~.character-select__title {
    color: #fff;
    transition: color .2s ease
}

.character-select__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    text-transform: none;
    transition: color .2s ease
}

.character-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%
}

.character-select__item {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
    transition: box-shadow .2s ease
}

.character-select__item img {
    box-shadow: 0 0 0 1px transparent;
    max-width: 256px;
    width: 100%
}

.character-select__item:hover img {
    box-shadow: 0 0 0 1px #5ccbcb;
    box-shadow: 0 0 0 1px var(--color-primary);
    transition: box-shadow .2s ease
}

.scope-wrapper {
    --collapse-duration: .24s
}

.scope-wrapper h3 {
    color: #b0b0b0;
    color: var(--dark-chalice);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem
}

.scope-wrapper li {
    border: solid #303030;
    border-width: 1px 0 0
}

:is(.scope-wrapper li):last-child {
    border-bottom-width: 1px
}

.scope-wrapper .collapser {
    align-items: center;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 2rem;
    color: #b0b0b0;
    color: var(--dark-chalice);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    gap: 2rem;
    outline: none;
    padding: 1.5rem 0
}

:is(.scope-wrapper .collapser) .chevron-icon {
    transition: transform var(--collapse-duration) ease-in-out
}

.expanded:is(.scope-wrapper .collapser) .chevron-icon {
    transform: rotate(180deg);
    transition: transform var(--collapse-duration) ease-in-out
}

.scope-wrapper .collapse-description {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows var(--collapse-duration) ease-in-out,opacity var(--collapse-duration) ease-in-out
}

:is(.scope-wrapper .collapse-description) .collapse-description__inner {
    min-height: 0;
    padding: 0;
    transition: padding var(--collapse-duration) ease-in-out
}

.expanded:is(.scope-wrapper .collapse-description) {
    grid-template-rows: 1fr;
    opacity: 1
}

.expanded:is(.scope-wrapper .collapse-description) .collapse-description__inner {
    padding: 1.5rem 0
}

.main-content-container {
    align-items: stretch;
    container-name: main-content-container;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 0 auto;
    padding: 4rem 6rem;
    position: relative;
    width: 63rem
}

.main-content-container fieldset {
    width: 100%
}

.main-content-container .buttons-horizontal {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-content: space-between;
    width: 100%;
    grid-gap: 3rem;
    gap: 3rem
}

.main-content-container .button-container,.main-content-container .text-container,.main-content-container .text-with-icon {
    width: 100%
}

body.launcher .main-content-container {
    gap: 2.5rem;
    max-width: 50rem;
    padding: 3rem;
    width: 100%
}

:is(body.launcher .main-content-container) fieldset {
    gap: 2.5rem
}

@media (max-width: 767.98px) {
    .main-content-container {
        gap:3rem;
        padding: 3rem;
        width: 100%
    }
}

main {
    padding: 0 2rem 2rem;
    position: relative;
    width: 100%
}

.body-content {
    align-items: center;
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    min-height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    position: relative
}

header {
    align-items: center;
    container-type: size;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    min-height: 130px;
    width: 100%
}

header .logo {
    margin: 4rem 0;
    max-width: 15rem;
    position: relative
}

body.launcher footer,body.launcher header {
    display: none
}

body.launcher main {
    padding: 0
}

body.launcher::-webkit-scrollbar {
    width: 8px
}

body.launcher::-webkit-scrollbar-corner {
    background-color: transparent
}

body.launcher::-webkit-scrollbar-thumb,body.launcher::-webkit-scrollbar-thumb:window-inactive {
    background-color: #99999980
}

body.launcher::-webkit-scrollbar-thumb {
    border-radius: 0
}

body.launcher::-webkit-scrollbar-track {
    background: #ffffff26;
    border-radius: 0
}

@media screen and (min-width: 770.02px) {
    main {
        padding:0
    }
}

.development-body {
    padding: 1rem
}

.development-body iframe {
    border: none;
    height: 600px;
    width: 500px
}

.development-container .main-content-container {
    width: 100rem
}

.mocks-table {
    border-collapse: collapse;
    width: 100%
}

.mocks-table td,.mocks-table th {
    border: 1px solid #474746;
    border: 1px solid var(--color-input-border);
    padding: 1rem;
    text-align: left
}

.mocks-table tr {
    transition: background-color .2s ease
}

:is(.mocks-table tr):hover {
    background-color: #00000080
}

.mocks-table .status {
    cursor: help
}
#create-link {
    width: 100%;
}