/* cabinet */

.cabinet-banner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 1.0526rem;
    justify-content: space-between;
    background-size: cover;
    border-radius: 0.5789rem;
    border: solid 1px var(--light-gray);
    box-sizing: border-box;
    gap: 2.1053rem;
}

.cabinet-banner span {
    display: flex;
    flex-direction: column;
    color: var(--white);
    gap: 0.4211rem;
}

.cabinet-banner text,
.cabinet-banner h2 {
    color: #fff;
}


.box-skin-anim {
    display: flex;
    width: 100%;
    gap: 0.8421rem;
}

.skin-anim {
    transition: 0.13s else-in;
    display: flex;
    flex-direction: column;
    width: calc(33.33% - 0.4211rem);
    box-sizing: border-box;
    height: 16rem;
    border-radius: 0.4737rem;
    padding: 0.8421rem;
    border: solid 1px var(--light-gray);
    cursor: pointer;
}

.skin-anim:hover {
    border: solid 1px var(--white);
}

.skin-anim:active {
    border: solid 1px var(--blue);
}

.skin-anim-active,
skin-anim-active:hover {
    border: solid 1px var(--blue);
    background-color: var(--blue-dark);
}

.anim-view {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;
}

.block-skin {
    width: 34%;
}

.modal-lage {
    width: 44rem;
    flex-direction: row;
    gap: 3.1579rem;
}

.modal-lage-v {
    width: 44rem;
    flex-direction: column;
    gap: 1.5789rem;
}

.box-modal-lage {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.8421rem;
}

.box-modal-lage text {
    line-height: 180%;
    margin-bottom: 1.5789rem;
}

.box-modal-qrcode {
    display: flex;
    align-items: flex-start;
    width: 45%;
    height: max-content;
    justify-content: center;
    background: var(--white);
    flex-direction: column;
    padding: 0.4211rem;
    border-radius: 0.4737rem;
    gap: 0.8421rem;
}

.box-modal-qrcode text {
    line-height: 140%;
    color: var(--black);
}

.box-modal-qrcode img {
    width: 100%;
}

.modal-password .link {
    margin-bottom: 0.8421rem;
}

.block-session {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8421rem;
}

.line-session {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

.content-pay-history-date text {
    color: var(--gray);
    margin-bottom: 0.4211rem;
}

.content-pay-history-amount text {
    display: inline-flex;
    gap: 0.4211rem;
    align-items: center;
}

.content-pay-history-comment {
    width: 100%;
    height: auto;
    line-height: 160%;
}

.list-session {
    width: 100%;
    height: 30rem;
    display: flex;
    flex-direction: column;
    gap: 1.5789rem;
    overflow: scroll;
}

.block-cc {
    width: var(--block);
    height: auto;
    margin: auto;
    display: flex;
    margin-top: var(--headpadding);
    justify-content: space-between;
}

.block-cabinet {
    width: 66%;
    box-sizing: border-box;
    height: auto;
    padding-right: 3.1579rem;

    display: flex;
    flex-direction: column;
    gap: 3.1579rem;
}

.box-skin {
    top: calc(50vh - 17.5rem);
    position: sticky;
    width: 100%;
    box-sizing: border-box;
    height: 35rem;
    gap: 0.8421rem;
    display: flex;
    flex-direction: column;
}

.box-cabinet {
    display: flex;
    flex-direction: column;
    gap: 1.2632rem;
}

.cabinet-balance {
    width: 100%;
    height: auto;
    padding: 1.0526rem;
    box-sizing: border-box;
    border: solid 1px var(--light-gray);
    border-radius: 0.578rem;
    display: flex;
    flex-direction: column;
    gap: 1.5789rem;
}


.box-cabinet-sub {
    gap: 1.5789rem;
}

.box-cabinet-sub h2 {
    display: flex;
    flex-direction: column;
    gap: 1.5789rem;
}

.cabinet-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 1.578rem;
}

.priv-group {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    margin-top: 1rem;
}

.box-cnn {
    border-radius: 0.4737rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: white;
}

.cnn {
    display: flex;
    flex-direction: column;
    gap: 0.8421rem;
    width: 100%;
    height: max-content;
    padding: 0.8421rem;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat no-repeat;
    color: inherit;
}

.cnn text {
    font-family: 'minecraft text';
    color: inherit;
}


.sub-card {
    display: flex;
    width: calc(33.33% - 1.0526rem);
    height: 15.263rem;
    box-sizing: border-box;
    border: solid 1px var(--light-gray);
    border-radius: 0.578rem;
    padding: 1.0526rem;
    padding-top: 0.8421rem;
    flex-direction: column;
    justify-content: space-between;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sub-card .button,
.sub-card button {
    width: 100%;
}

.box-sub-btn {
    width: 100%;
    height: auto;
    display: flex;
    gap: 0.8421rem;
}

.sub-card-two {
    width: calc(66.66% - 0.5263rem);
}

.sub-card-bg {
    box-shadow: inset rgb(27 27 27 / 39%) 0 0 0 15rem;
}

.sub-card-bg img {
    filter: brightness(8);
}

.sub-card-launcher {
    box-shadow: inset rgb(27 27 27 / 39%) 0 0 0 15rem;
}

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

.sub-header h3 {
    margin-bottom: 0.4211rem;
}

.sub-header text {
    display: flex;
    flex-wrap: wrap;
    gap: 0.526rem;
    align-items: center;
}

.sub-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.368rem;
    margin-top: 0.526rem;
}

.sub-feature-badge {
    display: inline-block;
    padding: 0.105rem 0.526rem;
    border-radius: 99px;
    background: rgba(59, 130, 246, .18);
    border: 1px solid rgba(59, 130, 246, .40);
    font-size: 0.631rem;
    color: #93c5fd;
    white-space: nowrap;
}


.box-security {
    display: flex;
    flex-direction: column;
    gap: 1.5789rem;
}

.box-security h2 {
    margin-bottom: 0.5263rem;
}

.security {
    display: flex;
    border-bottom: solid 1px var(--light-gray);
    padding-bottom: 1.5789rem;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}

.security:last-child {
    padding: 0rem;
    border-bottom: 0rem;
}

.security h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.315rem;
}

.box-toggle {
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    border: solid 1px var(--light-gray);
    height: max-content;
    border-radius: 0.3684rem;
    gap: 0.1579rem;
    padding: 0.1579rem;
    height: 2.5263rem;
    box-sizing: border-box;
}

.box-toggle button:empty {
    display: none;
}

.box-toggle button {
    height: 100%;
    align-items: center;
    border-radius: 0.2684rem;
    background-color: var(--graphite);
    color: var(--sun-gray);
    width: 100%;
}

.box-toggle button:hover {
    background-color: var(--light-gray);
    transform: scale(1);
}

.box-toggle button:active {
    background-color: var(--light-gray);
    transform: scale(0.97);
}

.box-toggle button:disabled {
    background-color: var(--blue);
    color: white;
}

.box-skin .box-capsule {
    transform: translate(0px, -0.210rem);
}

.balance img {
    width: 1.263rem;
    height: 1.263rem;
}

.balance h3 {
    gap: 0.4211rem;
    display: flex;
    line-height: 120%;
}

.skin-header {
    display: flex;
    height: auto;
    position: absolute;
    right: 0;
    flex-direction: column;
    gap: 0.8421rem;
    align-items: flex-end;
    user-select: none;
    top: 24%;
}

.skin-header svg {
    width: 1.6842rem;
    fill: var(--white);
}

.skin-header .button-icon,
.skin-header .button-icon:hover,
.skin-header .button-icon:active {
    background-color: rgba(255, 255, 255, 0);
}

.skin-header .button-icon:hover {
    opacity: 0.6;
}

.skin {
    width: 100%;
    height: 46vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 0.5789rem;
}

.skin-fix {
    display: none;
    width: 100%;
    height: 59%;
    position: absolute;
    bottom: 0rem;
}

.btn-skin {
    width: 100%;
    display: flex;
    gap: 0.8421rem;
    align-items: center;
}

.btn-skin button {
    width: 100%;
}

.btn-skin .button-icon {
    max-width: max-content;
}

#skin_container {
    height: 100%;
    width: auto;
}

.tooltip-bottom,
.tooltip-top {
    --tooltip-content: none;
}

.tooltip-bottom:hover:before,
.tooltip-top:hover:before {
    content: var(--tooltip-content);
    position: absolute;
    z-index: 56;
    padding: 0.421rem 0.842rem;
    background-color: var(--white);
    color: var(--black);
    border: solid 1px var(--white);
    font-size: 0.736rem;
    display: inline;
    user-select: none;
    pointer-events: none;
    text-align: center;
    border-radius: 0.368rem;
    max-width: 15.789rem;
}

.tooltip-bottom:hover:before {
    transform: translate(0, 2.684rem);
}

.tooltip-top:hover:before {
    transform: translate(0, -2.684rem);
}

.block-auth {
    width: var(--block);
    height: calc(100vh - 13.368rem);
    min-height: auto;
    max-height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    padding: 6.315rem 0rem;
}

.box-auth {
    display: flex;
    flex-direction: column;
    gap: 1.052rem;
    width: 23.684rem;
    height: auto;
    padding: 2.105rem;
    border: solid 1px var(--light-gray);
    border-radius: 0.578rem;
}

.box-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.052rem;
    width: 100%;
    height: auto;
}

.nav-auth {
    width: 17.894rem;
    height: auto;
    display: flex;
    gap: 1.578rem;
    margin-bottom: 1.421rem;
    justify-content: center;
}

.nav-auth-link {
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-auth-link-active {
    opacity: 0.5;
    cursor: default;
}

.auth-button {
    width: auto;
    margin-top: 0.526rem;
}

.box-auth .box-toggle {
    width: 100%;
}

.forgot-auth {
    width: 100%;
    text-align: center;
    margin-top: 0.526rem;
}

.box-auth .box-checkbox>span {
    align-items: flex-start;
}



.oauth-consent-box {
    width: 26rem;
    max-width: 92vw;
    text-align: center;
}

.oauth-app-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
}

.oauth-desc {
    font-size: 0.85rem;
    color: var(--sun-gray);
    margin: 0.25rem 0 1rem;
}

.oauth-user-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    background: var(--dark);
    border-radius: 0.6rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.oauth-avatar {
    image-rendering: pixelated;
    width: 2rem;
    height: 2rem;
    background-position: 71.5% 14.5%;
    background-size: 820%;
}

.oauth-scopes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
}

.oauth-scope-item {
    background: var(--dark);
    border-radius: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    text-align: left;
}

.oauth-scope-item::before {
    content: '✓ ';
    color: var(--green, #4caf7d);
}

.oauth-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.oauth-btn-approve {
    flex: 1;
}

.oauth-btn-deny {
    flex: 1;
}

.oauth-code-input {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--graphite);
    border: 2px solid var(--light-gray);
    border-radius: 0.5rem;
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    text-transform: uppercase;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
    font-family: monospace;
}
.oauth-code-input::placeholder {
    color: var(--sun-gray);
    opacity: 0.5;
    font-weight: 400;
}
.oauth-code-input:focus {
    border-color: var(--blue, #286FD8);
}

.oauth-error {
    background: rgba(220, 60, 60, 0.15);
    border: 1px solid rgba(220, 60, 60, 0.5);
    border-radius: 0.45rem;
    color: #f07070;
    font-size: 0.82rem;
    padding: 0.55rem 0.85rem;
    margin-bottom: 0.5rem;
}


@media screen and (max-width: 9900px) {
    :root {
        --scale: 0.7vw;
    }
}

@media screen and (max-width: 2700px) {
    :root {
        --scale: 19px;
    }

    #skin_container {
        height: 90%;
    }

    .box-skin {
        top: 8rem;
        height: 42rem;
    }

    .fix-payment {
        top: 8rem;
    }
}

@media screen and (max-width: 1900px) {
    #skin_container {
        height: 100%;
    }

    .box-skin {
        top: calc(50vh - 17.5rem);
        height: 35rem;
    }
}

@media screen and (max-width: 1430px) {
    :root {
        --scale: 16px;
    }
}

@media screen and (max-width: 1370px) {
    :root {
        --scale: 14px;
    }
}

@media screen and (max-width: 1230px) {
    :root {
        --scale: 12px;
        --block: 92%;
    }
}

@media screen and (max-width: 1130px) {
    :root {
        --scale: 11px;
        --block: 92%;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --scale: 10px;
        --block: 94%;
    }

    .block-play-sub button,
    .block-play-sub .button {
        width: 100%;
    }

    .block-play-sub btn-group {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (max-width: 780px) {
    :root {
        --scale: 3.5vw;
        --block: 92%;
        --headpadding: 1rem;

        /* fonts */
        --text-lite: 0.632rem;
        /* 14px */
        --text: 0.9474rem;
        /* 18px */
        --h3: 1.0526rem;
        /* 22px */
        --h2: 1.3684rem;
        /* 32px */
        --h1: 2.6316rem;
        /* 60px */
    }

    .box-career {
        flex-direction: column;
    }

    .block-mobile-nav-active {
        visibility: visible;
        width: 100%;
        height: calc(100% - 5.105rem);
        opacity: 1;
        will-change: transform, opacity, visibility;
    }

    .box-servers {
        width: 100%;
    }

    header {
        display: none;
    }

    .block-widgets {
        width: 100%;
        order: 2;
        padding-right: 0rem;
        margin-top: 5rem;
    }

    .block-servers-list {
        width: 100%;
        order: 1;
    }

    .widgets {
        padding-top: 0.526rem;
    }

    .home-info {
        flex-wrap: wrap;
    }

    .home-banner {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            '.'
            '.'
            '.';
        height: 100%;
    }

    .home-banner .btn-group {
        margin-bottom: 1.578rem;
        flex-wrap: wrap;
    }

    .home-banner .btn-group>.button {
        width: 100%;
        height: max-content;
    }

    .home-banner h1 {
        font-size: 2.7rem;
        width: 100%;
        margin-top: var(--headpadding);
    }

    footer {
        margin-top: 8rem;
        gap: 2.105rem;
        flex-wrap: wrap;
        padding-bottom: 20rem;
    }

    .footer-corp {
        justify-content: none;
        height: auto;
        gap: 0.526rem;
    }

    .footer-politics {
        display: flex;
        gap: 1.368rem;
        flex-direction: column;
        margin-top: 1.578rem;
        font-size: 0.947rem;
    }

    .footer-politics .text {
        font-size: 0.947rem;
    }

    .footer-info text {
        font-size: 0.947rem;
    }

    .mobile-nav {
        display: flex;
    }

    footer .payment-processing {
        text-align: left;
        line-height: 160%;
    }

    .block-home-banner {
        background-image: url(https://storage.c7x.dev/one1side/website/bannerlauncher11m.jpg);
        background-image: url(https://storage.c7x.dev/one1side/website/bannerlauncher11m.webp);
        height: calc(100vh - 10rem);
    }

    .button,
    button {
        padding: 1rem 1.315rem 1rem 1.315rem;
        height: 3.4rem;
    }

    .box-slider {
        height: 3.4rem;
    }

    .servers-background {
        background-size: 128%;
    }

    .box-servers:hover .servers-background {
        background-size: 154%;
    }

    .block-servers {
        margin-bottom: 8rem;
    }

    .accordion,
    .accordion:hover,
    .accordion:active {
        padding: 1.578rem 0px;
    }

    .accordion .h3 {
        text-align: left;
        line-height: 160%;
    }

    .box-play {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        margin-top: 4rem;
    }

    .box-play img {
        width: 70%;
        height: auto;
        justify-self: center;
    }

    .box-play picture {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .box-play video {
        width: 100%;
        height: 16rem;
        display: flex;
        justify-content: center;
    }

    .play-ds {
        padding: 1.578rem 0;
    }

    .box-play .button {
        justify-self: center;
        width: 100%;
    }

    .box-downloader {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0px 0px;
        grid-template-areas:
            'launcher'
            'downloader';
    }

    .down-java {
        flex-direction: column;
        padding: 2.105rem 1.578rem;
    }

    .down-java .button {
        margin-top: 2.631rem;
        width: 100%;
    }

    .box-card-launcher {
        height: 21rem;
        margin-bottom: 2rem;
    }

    .box-card-downloader .button {
        width: 90%;
    }

    .mini-widget {
        padding: 1.1579rem;
        width: 100%;

    }

    .block-cookie {
        bottom: 12rem;
    }

    .cookie text {
        width: auto;
    }

    .cookie {
        padding: 1.0526rem;
        width: 92%;
        flex-direction: column;
    }

    .cookie button {
        width: 100%;
    }

    .block-cc {
        flex-direction: column;
        margin-bottom: 5rem;
    }

    .box-skin {
        top: 0;
        position: static;
        width: 100%;
        margin-bottom: 5rem;
        margin-top: var(--headpadding);
        height: auto;
    }

    .block-skin {
        order: 1;
        width: 100%;
    }

    .skin {
        height: 39rem;
        position: relative;
    }

    .skin-fix {
        display: block;
    }

    .box-balance .button {
        width: 100%;
    }

    .box-balance {
        gap: 1.578rem;
        flex-direction: column;
    }

    .box-balance-pref text {
        font-size: 0.79rem;
    }

    .sub-card,
    .sub-card-two {
        width: calc(50% - 0.79rem);
    }

    .box-balance-line {
        margin-top: 3.157rem;
    }

    .block-cabinet {
        width: 100%;
        padding-right: 0rem;
        order: 2;
    }

    .security-history .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .security-history button {
        width: 100%;
    }

    .security-history {
        display: flex;
        flex-direction: column;
        gap: 2.052rem;
    }

    .box-auth {
        border: solid 0px var(--light-gray);
    }

    .box-input input {
        padding: 1rem 1.315rem 1rem 1.315rem;
    }

    .balance {
        width: 100%;
        flex-direction: column;
    }

    .box-payment {
        width: 100%;
    }

    .block-donate {
        display: flex;
        flex-wrap: wrap;
        gap: 4.7368rem;
    }

    .select__toggle,
    .select__option {
        height: 3.4rem;
    }

    .select__dropdown {
        max-height: 21rem;
    }

    .box-donate-status {
        width: 100%;
        padding: 0;
    }

    .server-list .server-icon {
        width: 2.3rem;
        height: 2.3rem;
    }

    .server-list,
    .btn-server-dropdown .server-list-dropdown-active {
        gap: 1.6842rem;
    }

    .box-toggle {
        height: 3.4rem;
    }

    .button-icon img {
        width: 1.3684rem;
    }

    .skin-header {
        position: static;
        display: flex;
        height: auto;
        gap: 0.8421rem;
        right: unset;
        align-items: flex-end;
        user-select: none;
        justify-content: center;
        flex-direction: row;
        border: solid 1px var(--light-gray);
        border-radius: 0.4737rem;
        margin-top: 0.4211rem;
    }

    .skin-header svg {
        min-width: 1.7684rem;
    }

    .skin-header button {
        padding: 0rem 0rem;
    }

    .btn-skin button {
        width: 100%;
    }

    .status-info {
        width: 90%
    }

    .wiki-content {
        padding-right: 0rem;
    }

    .wiki-content>.si-banner img {
        margin: 0rem;
    }

    .box-wiki-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background: var(--graphite);
        overflow-y: scroll;
        width: 100%;
        box-sizing: border-box;
        padding: var(--headpadding);
        height: 100%;
        align-items: center;
        padding-bottom: 12rem;
        padding-top: 2rem;
        align-items: center;
    }

    .box-wiki-links-active {
        display: flex;

    }

    .links-group {
        width: var(--block);
    }

    .wiki-links-btn {
        display: flex;
        position: fixed;
    }

    .btn-nav:active {
        background: var(--light-gray);
        border-radius: 11px;
    }

    .sub-card-two-m {
        width: 100%;
    }

    .wiki-link,
    .wiki-link:visited {
        padding: 0.8421rem 0rem;
    }

}

.stop-scrolling {
    overflow-y: hidden;
    overflow-x: hidden;
}

@media screen and (max-width: 380px) {
    :root {
        --scale: 4vw;
        --block: 92%;
        --headpadding: 1rem;
    }

    .block-home-banner {
        height: max-content;
    }

    .btn-server-list .box-btn-server-list {
        grid-template-columns: auto 1.8fr 1.3fr auto;
    }