:root {
    --fontFamily: "Nunito Sans", "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fontWeightLight: 300;
    --fontWeightNormal: 400;
    --fontWeightHeavy: 800;

    --fontSizeSmaller: 12px;
    --fontSizeSmall: 14px;
    --fontSizeNormal: 16px;
    --fontSizeLarge: 18px;
    --fontSizeLarger: 20px;
    --fontSizeLargest: 24px;

    --teal-50: #EFFCF6;
    --teal-100: #C6F7E2;
    --teal-200: #8EEDC7;
    --teal-300: #65D6AD;
    --teal-400: #3EBD93;
    --teal-500: #27AB83;
    --teal-600: #199473;
    --teal-700: #147D64;
    --teal-800: #0C6B58;
    --teal-900: #014D40;

    --nm-shadow-xs: 3px 3px 6px var(--nm-shadow-dark), -3px -3px 6px var(--nm-shadow-light);
    --nm-shadow-xs-inset: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);

    --nm-shadow-sm: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-shadow-sm-inset: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light);

    --nm-shadow: 14px 14px 28px var(--nm-shadow-dark), -14px -14px 28px var(--nm-shadow-light);
    --nm-shadow-inset: inset 14px 14px 28px var(--nm-shadow-dark), inset -14px -14px 28px var(--nm-shadow-light);

    --nm-shadow-md: 18px 18px 36px var(--nm-shadow-dark), -18px -18px 36px var(--nm-shadow-light);
    --nm-shadow-md-inset: inset 18px 18px 36px var(--nm-shadow-dark), inset -18px -18px 36px var(--nm-shadow-light);

    --nm-shadow-lg: 22px 22px 44px var(--nm-shadow-dark), -22px -22px 44px var(--nm-shadow-light);
    --nm-shadow-lg-inset: inset 22px 22px 44px var(--nm-shadow-dark), inset -22px -22px 44px var(--nm-shadow-light);

    --nm-shadow-xl: 28px 28px 56px var(--nm-shadow-dark), -28px -28px 56px var(--nm-shadow-light);
    --nm-shadow-xl-inset: inset 28px 28px 56px var(--nm-shadow-dark), inset -28px -28px 56px var(--nm-shadow-light);

    --nm-shadow-2xl: 35px 35px 70px var(--nm-shadow-dark), -35px -35px 70px var(--nm-shadow-light);
    --nm-shadow-2xl-inset: inset 35px 35px 70px var(--nm-shadow-dark), inset -35px -35px 70px var(--nm-shadow-light);
}

html {
    font-size: var(--fontSizeNormal);
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--neutral2);
}

::-webkit-scrollbar-thumb {
	background: var(--neutral4);
}

* {
    outline: 0 !important;
}

body {
    font-family: var(--fontFamily);
    line-height: 1.5;
    color: var(--textColor);
    background: var(--pageBg);
    font-size: var(--fontSizeNormal);

    margin: 0 !important;
}

a {
    color: var(--textColor);
    font-weight: var(--fontWeightHeavy);
    cursor: pointer;
}

a:hover, a:focus {
    color: var(--primary5);
    text-decoration: none;
}

p {
    margin: 0;
    word-wrap: break-word;
}

h1, h2 {
    line-height: 1.20 !important;
}

h3, h4 {
    line-height: 1.31 !important;
}

h5, h6 {
    line-height: 1.5 !important;
}

label {
    font-weight: var(--fontWeightNormal);
}

ul, ol {
    margin: 0;
}

button:hover, .btn:hover, .btn:focus {
    color: var(--btn-text-color);
}
.btn:hover {
    transform: translateY(2px);
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    box-shadow: var(--nm-shadow-sm);
}

[x-cloak] {
    display: none !important
}
#app-loader {
  display: block !important;
  height: 100vh;
  width: 100vw;
  position: fixed;
  inset: 0;
  transition: all .3s ease .1s;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  background-color: var(--pageBg);
  pointer-events: none;
}
#app-loader[x-cloak] {
  opacity: 1;
  visibility: visible
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: var(--primary5);
    color: var(--neutral1);
    font-weight: var(--fontWeightHeavy);
}

.a-concealed {
    color: inherit;
    text-decoration: none;
}

.tebexLogin {
    position: relative !important;
}

.tebexLogin, .tebexLoginBtn, .tebexLoginBtn:hover, .tebexLogoutBtn, .tebexSignupBtn, .tebexManageAccount, .tebexLogoutBtn:hover, .tebexManageAccount:hover, .tebexManageAccount:focus {
    color: var(--textColorMuted) !important;
    background-color: var(--neutral2) !important;
}

.tebexDropdown {
    top: unset !important;
    bottom: 52px !important;
}

.tebexDropdown:before {
    content: none !important;
}

.tebexProfilePicker:after {
    content: none !important;
}

.tebexBtnDefault {
    padding: 10px 0 !important;
}

.tebexProfile {
   background: none !important; 
}

.tebexChooseProfile {
    padding-left: 0 !important;
    font-size: inherit !important;
}

.tebexLogoutBtn, .tebexSignupBtn, .tebexManageAccount {
    border: none !important;
}

.tebexSignupBtn {
    background: none !important;
    color: inherit !important;
}

.dropdown-menu {
    border: none;
    border-radius: 0;
    background-color: var(--neutral1) !important;
}

.container-fluid {
    max-width: var(--page-width);
    padding-left: 10px;
    padding-right: 10px;
}

.btn {
    --btn-text-color: var(--textColor);
    color: var(--btn-text-color);
    border-radius: 9999px;
    line-height: 1.5;
    font-weight: var(--fontWeightHeavy);
    position: relative;
    padding: 8px 24px;
    font-size: var(--fontSizeNormal);
    transition: .2s ease;

    background: var(--nm-bg-convex);
    box-shadow: var(--nm-shadow-sm);
    border: 2px solid var(--nm-bg);
    will-change: transform;
}
.btn--loading {
    pointer-events: none;
    color: transparent !important;
}
.btn--loading::after {
    content: "";
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    inset: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: var(--btn-text-color);
    border-radius: 50%;
    animation: btn-loading-spinner 1s linear infinite;
} 
@keyframes btn-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

.btn:hover {
    background: var(--nm-bg-concave);
}
.btn:active {
    background: var(--nm-bg-convex);
    box-shadow: var(--nm-shadow-sm);
}
.btn:active:hover {
    background: var(--nm-bg-concave);
    box-shadow: var(--nm-shadow-sm-inset);
}

.btn--xl {
    padding: 12px 48px;
    font-size: var(--fontSizeLarge);

    box-shadow: var(--nm-shadow-md);
}
.btn--xl:active {
    box-shadow: var(--nm-shadow-md-inset);
}

.btn--lg {
    padding: 12px 32px;
    font-size: var(--fontSizeLarge);

    box-shadow: var(--nm-shadow);
}
.btn--lg:active {
    box-shadow: var(--nm-shadow-md-inset);
}

.btn--md {
    padding: 8px 24px;
    font-size: var(--fontSizeNormal);
}

.btn--sm {
    padding: 8px 16px;
    font-size: var(--fontSizeSmall);
}

.btn--xs {
    padding: 8px 12px;
    font-size: var(--fontSizeSmaller);
}

.btn-group {
    background: var(--nm-bg-convex);
    box-shadow: var(--nm-shadow-sm);
    border: 2px solid var(--nm-bg);
    border-radius: 999px;
}

.btn-group--level {
    background: var(--nm-bg);
}

.btn-group > .btn {
    border: none;
    background: transparent;
}

.btn-group > .btn:not(:hover) {
    background: transparent;
}

.btn-group > .btn:not(:active) {
    box-shadow: none;
}

.btn-group > .btn:hover {
    transform: none;
    background: var(--nm-bg-concave);
}

.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    --btn-text-color: var(--textColor);
    color: var(--btn-text-color);
    background-color: var(--neutral4);
}

.btn-primary, .btn-success, .btn-info,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info, 
.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active {
    --btn-text-color: var(--primary1);
    color: var(--btn-text-color);
    background-color: var(--primary5);
    border-bottom: 4px solid rgba(0,0,0,.2);
}

.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
    --btn-text-color: #E66A6A;
    color: var(--btn-text-color);
    background: transparent;
    border: 1px solid var(--btn-text-color);
}
.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active {
    opacity: 0.5;
}

.btn-gift {
    --btn-text-color: var(--primary5);
    color: var(--btn-text-color);
    margin-top: 0;
    margin-right: 5px;
}

.btn-gift:hover {
    --btn-text-color: var(--primary5);
    background: none;
    color: var(--btn-text-color);
}

.close, .close:hover, .close:focus {
    color: var(--textColorMuted);
}

.btn--primary {
    --btn-text-color: var(--primary5);
}
.btn--secondary {
    --btn-text-color: var(--textColor);
}
.btn--tertiary {
    --btn-text-color: var(--textColor);
}
.btn--danger {
    --btn-text-color: #E66A6A;
    color: var(--btn-text-color);
}
.btn-circle {
    /* width: 50%; */
    border-radius: 50%;
    text-align: center;
    aspect-ratio: 1 / 1;
    padding: 0;
    text-transform: uppercase;

    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-circle--sm {
    width: 32px;
    height: 32px;
    font-size: var(--fontSizeSmaller);
}
.btn-circle--md {
    width: 38px;
    height: 38px;
    font-size: var(--fontSizeNormal);
}
.btn-circle--lg {
    width: 42px;
    height: 42px;
    font-size: var(--fontSizeLarge);
}
.btn-circle--xl {
    width: 48px;
    height: 48px;
    font-size: var(--fontSizeLarger);
}

.modal .form-control, .modal .checkout .packages table tbody .quantity input {
    background-color: var(--neutral2);
}

.form-control, .checkout .packages table tbody .quantity input {
    border-radius: 32px;
    border: none;
    background-color: var(--neutral3);
    line-height: 1.5;
    padding: 6px 16px;
    box-shadow: none;
    color: var(--textColor);
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: var(--neutral2) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    background-color: var(--neutral3);
}

input, .form-control {
    transition: .25s ease;
}

input:focus, .form-control:focus {
    background-color: rgba(0,0,0,0.05);
}

.input-lg {
    padding: 8px 24px;
}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    margin-left: 0;
}

.input-group-addon {
    border: none;
    color: var(--textColor);
    background-color: var(--neutral4);
}

input::placeholder, textarea::placeholder {
    color: var(--textColorMuted) !important;
}

.modal {
    overflow-y: unset;
    z-index: 2020;
    will-change: contents;
}

body.modal-open {
    overflow: hidden;
    padding-right: 17px !important;
}

body.modal-open #header .nav-middle {
    right: 17px;
}

.modal-backdrop {
    background: rgba(0,0,0,0.6);  
}

.currency-selector {
    position: relative;
}

.dropdown-menu {
    min-width: unset;
}

.tooltip {
    font-size: var(--fontSizeNormal);
    font-weight: var(--fontWeightNormal);
}

.tooltip-inner {
    padding: 8px;
    border-radius: var(--rounded-lg);
    color: var(--textColor);
    background-color: var(--neutral2);
    box-shadow: 0 0px 8px hsla(0,0%,0%,.1);
}

.tooltip.top {
    transform: translateX(4px)
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--neutral2);
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--neutral2);
}
.tooltip.right .tooltip-arrow {
    border-right-color: var(--neutral2);
}
.tooltip.left .tooltip-arrow {
    border-left-color: var(--neutral2);
}

.decus-avatar {
    position: relative;
    margin-right: 12px;
    border-radius: 6px;
}
.decus-avatar img, .decus-avatar::after {
    border-radius: inherit;
}
.decus-avatar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.15);   
    -moz-box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.15);
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.15);
    overflow: hidden;
}

/* .p-head-inner {
    position: absolute;
    top:0;
    left:0;
    right:0;
} */
/* add decus-wrapper html */

#header {
    margin-bottom: 60px; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#header .item {
    text-decoration: none;
    display: inline-block;
    font-size: var(--fontSizeNormal);
    font-weight: bold;
    color: var(--textColor);
}

#header .item.active, #header .item:not(.highlight):hover {
    color: var(--primary5);
}

#header .item.highlight {
    background-color: var(--primary5);
    border-top-left-radius: 42px 100%;
    border-top-right-radius: 42px 100%;
    border-bottom-left-radius: 42px 100%;
    border-bottom-right-radius: 42px 100%;
    padding: 6px 32px;
    margin-top: -6px;
	border-bottom: 3px solid rgba(0,0,0,0.2);
	position: relative;
	color: var(--primary1);
}

#header .item.highlight:hover {
    top: 3px;
    border-bottom: none;
    color: var(--primary1);
}

#header nav {
    display: flex;
    align-items: center;
    margin-top: 32px;
    position: relative;
}

.nav-middle {
    display: flex;
    justify-content: center;
    position: absolute;
    inset: 0;
    width: 100%
}

.storeBtn-container {
    position: relative;
}

@media screen and (min-width: 801px) {
    .storeBtn-container .left, .storeBtn-container .right {
        position:absolute;
        top: 0;
        display: flex;
        gap: 32px;
    }

    .storeBtn-container .left {
        left: 0;
        transform: translateX(-100%);
        padding-right: 24px;
    }

    .storeBtn-container .right {
        right: 0;
        transform: translateX(100%);
        padding-left: 24px;
    }
}

#header .nav-left .item:first-of-type {
    padding-left: 0;
}

#header .nav-right .item:last-of-type {
    padding-right: 0;
}

#header .nav-left, #header .nav-right {
    z-index: 2;
    display: flex;
    gap: 32px;
}

#header .p-nav-opposite {
    margin: 0;
}

#header .nav-right .p-account.p-navgroup--guest .item:first-of-type {
    padding-right: 0;
}

#header nav .item i {
    font-size: var(--fontSizeLarger);
}

.nav-right {
    margin-left: auto;
}

#logo-bar {
    transform: translateY(-50%);
}

#logo-bar .logo-row-inner {
	display: flex;
	align-items: flex-end;
    justify-content: space-around;
    width: 100%;
    padding: 32PX;
}

#logo-bar .logo-row-inner > .play-container, #logo-bar .logo-row-inner > .discord-container {
	display: flex;
	position: relative;
}

#logo-bar .logo-row-inner > .play-container {
	justify-content: flex-end;
}

#logo-bar .logo-row-inner > .discord-container {
	justify-content: flex-start;
}

#logo-bar .logo {
    position: absolute;
    height: 200px;
    width: auto;
}

#logo-bar .logo img, #logo-bar .logo a {
    display: block;
    width: 100%;
    height: 100%;
}

#logo-bar .discord, #logo-bar .play {
    display: inline-flex;
    align-items: center;
}

#logo-bar .discord:hover, #logo-bar .play:hover {
    opacity: .8;
    cursor: pointer;
}

#logo-bar .play-container .text {
    text-align: right;
    margin-right: 16px;
}

#logo-bar .discord {
    flex-direction: row-reverse;
}

#logo-bar .discord-container > a {
	color: inherit;
	text-decoration: none;
    font-weight: inherit;
}

#logo-bar .discord-container > a:hover {
	color: inherit;
	text-decoration: none;
}

#logo-bar .discord .text {
    text-align: left;
    margin-left: 16px;
}

#logo-bar .text > span {
    display: block;
}

#logo-bar .text > span.top {
    text-transform: uppercase;
    font-weight: var(--fontWeightHeavy);
    color: var(--primary5);
    font-size: var(--fontSizeNormal);
    letter-spacing: .04em;
}

#logo-bar .text > span.bottom {
    color: var(--textColorMuted);
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeSmall);
}

#logo-bar .icon i {
    font-size: 38px;
    color: var(--primary5);
}

#header .nav-right .p-nav-opposite .p-account.p-navgroup--member {
    display: flex;
    align-items: center;
}

#header .nav-right .p-nav-opposite .p-account.p-navgroup--member .item:nth-of-type(2n+1) {
    padding: 0;
}

#header .nav-right .p-nav-opposite .p-account.p-navgroup--member .item:first-of-type {
    padding-left: 24px;
}

#header .nav-right .p-nav-opposite .p-account.p-navgroup--member a span.avatar {
    width: 30px;
	height: 30px;
}

.decus-mobile-menu-wrapper {
    position: absolute;
    left: 0;
    right: 0;
}

.decus-mobile-menu {
    display: none;
    width: 3.1rem;
    height: 2.3rem;
    position: relative;
    cursor: pointer;
    z-index: 99;
    margin-left: auto;
}

.decus-mobile-menu > span {
    background-color: var(--primary1);
    height: .34rem;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transition: transform .4s cubic-bezier(.77, 0, .175, 1);
}

.decus-mobile-menu > span:first-of-type {
    transform: translateY(-0.6rem);
}

.decus-mobile-menu > span:last-of-type {
    transform: translateY(.3rem);
}

nav[data-mobile=true] .decus-mobile-menu > span:first-of-type {
    transform: translateY(-0.2rem) rotate(-45deg);
}

nav[data-mobile=true] .decus-mobile-menu > span:last-of-type {
    transform: translateY(-0.2rem) rotate(45deg);
}

@media (max-width: 1024px) {
    #header .decus-mobile-menu {
        display: block;
    }

    #header nav .nav-middle {
		position: fixed;
        height: 100vh;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        margin: 0;
        background-color: var(--pageBg);
        width: unset;
        transition: opacity .35s cubic-bezier(.165, .84, .44, 1);
    }

    #header nav .nav-middle .item {
        text-align: center;
        font-size: 1.4em;
        margin-bottom: 32px;
        display: block;
    }

    #header nav .nav-middle .item:not(.highlight) {
        color: var(--primary5);
    }

    #header nav .nav-middle .left .item:first-of-type {
        margin-top: 0;
    }

    #header nav[data-mobile=true] .nav-middle {
        opacity: 1;
        pointer-events: all;
    }

    #header .nav-right {
        display: none;
    }

    #header .curve-container {
		display: none;
	}

	#logo-bar {
		padding-bottom: 64px;
	}

	#logo-bar .logo-row-inner {
        align-items: center;
        flex-direction: column;
    }

	#logo-bar .logo-row-inner > .play-container, #logo-bar .logo-row-inner > .discord-container {
		justify-content: center;
		left: 0;
		right: 0;
	}

	#logo-bar .logo-row-inner .logo {
		order: -1;
		margin: 0 15%;
	}

    #logo-bar .discord-container, #logo-bar .play-container {
        margin: 24px 0 0;
    }

}

@media screen and (max-width: 520px) {
    #header .info {
        flex-direction: column;
        align-items: center;
        margin-top: unset;
    }

    #header .info > div:first-of-type {
        margin-bottom: 20px;
    }
}

#header .item {
    cursor: pointer;
}

.header__jumbo {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 32px; */
    position: relative;
}
.header__logo img {
    position: relative;
    z-index: 1;
    max-width: calc(var(--header-logo-width) - 24px);
    filter: drop-shadow(14px 14px 14px var(--nm-shadow-dark)) drop-shadow(-14px -14px 14px var(--nm-shadow-light));
}
.header__wrapper {
    position: relative;

    display: flex;
    align-items: center;
    gap: 96px;

    flex: 1;
    justify-content: space-between;
    box-shadow: var(--nm-shadow-md-inset);
    background: var(--nm-bg);
    border-radius: var(--rounded-2xl);
    height: 100%;
    padding: 0 48px;
}
.header__aside {
    position: relative;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
    justify-content: center;
}

.social-links {
    display: flex;
    gap: 32px;
}

.social-links--footer {
    margin-top: 24px;
}

.social-links__link {
    transition: .2s ease;
    color: var(--textColor);
    font-weight: normal;
    will-change: transform;
}
/* .social-links__link:hover {
    transform: scale(1.05);
} */
.social-links__link:hover, .social-links__link:active {
    text-decoration: none;
    color: var(--primary5);
}

.social-links__link:focus {
    color: var(--textColor);
}

.social-links__icon {
    display: flex;
    justify-content: center;
}
.social-links__icon--shadow {
    filter: drop-shadow(0 0 4px rgba(255,255,255,.1));
}
.social-links__icon i {
    font-size: 24px;
    color: inherit;
}

.social-links__link--footer, .social-links__link--footer:focus  {
    color: var(--textColorMuted);
}

.header__link__text {
    margin-top: 8px;
    font-size: var(--fontSizeSmall);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: var(--fontWeightHeavy);
}

.header-server__icon svg, .header-discord__icon svg {
    fill: var(--primary5);
    stroke: var(--nm-bg);
}

.header-server__icon, .header-discord__icon {
    height: 80px;
    width: 80px;
    cursor: pointer;
}

.header-server__icon svg {
    height: 44px;
}

.header-discord__icon svg {
    height: 36px;
    padding: 2px;
}

.header__aside-top-text {
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeLarger);
}
/* .header__aside-bottom-text {
    opacity: .6;
    text-transform: uppercase;
    font-size: var(--fontSizeSmaller);
    font-weight: var(--fontWeightHeavy);
} */

.header-server__text {
    text-align: left;
}

.header-discord__text {
    text-align: right;
}

.header-discord {
    font-weight: var(--fontWeightNormal);
    /* cursor: default; */
}

.header-server, .header-discord__body {
    display: flex;
    gap: 24px;
    /* filter: drop-shadow(0 0 4px rgba(255,255,255,.1)); */
    /* cursor: pointer; */
    transition: transform .3s ease;
    color: var(--textColor);
    align-items: center;
    /* will-change: transform; */
}

.header-shopper {
    font-weight: var(--fontWeightHeavy);
    cursor: pointer;
}

.header-shopper__ign {
    color: var(--primary5);
}

#header[data-style="1"] .header-shopper {
    display: none;
}

#header[data-style="2"] .social-links {
    display: none;
}

#header[data-style="1"] .header__aside {
    display: none;
}

#header[data-style="2"] .nav-middle {
    display: none;
}

#header[data-style="2"] .decus-mobile-menu-wrapper {
    display: none;
}

.decus-wrapper {
    max-width: var(--page-width);
    padding: 0 24px;
    margin: 0 auto;
}

.body {
    display: block;
    margin: 0;
    padding: 0;
}

.body .content, .body .sidebar {
    padding: 0;
}

.body .full-width {
    padding: 0;
}

.body > div:first-child .panel-heading:first-of-type {
    font-size: 24px;
}

/* .panel-body.content {
    padding: 24px;
} */

.sidebar, .index-sidebar {
    width: 100%;
    margin-top: 24px;
}

.page-header {
    border-bottom: 2px solid var(--neutral3);
}

    .body.index {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .body > .content {

        flex-grow: 1;
    }

.panel-heading {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border: none;
    font-size: var(--fontSizeLarge);
}

.panel .panel-heading {
    background-color: transparent;
    font-weight: var(--fontWeightHeavy);
}

.panel-default > .panel-heading {
    color: var(--textColor);
}

.panel > .panel-body {
    padding: 0;
    margin-top: 24px;
}

.panel > .panel-heading {
    padding: 0;
}

.panel-body img {
    max-width: 100%;
    height: auto !important;
}

/* .panel-heading + .panel-body {
    padding-top: 8px;
} */

.panel {
    --shadow: var(--nm-shadow-md);
    --bg: var(--nm-bg);
    border-radius: var(--rounded-2xl);
    box-shadow: var(--shadow);
    background: var(--bg);
    border: none;
    margin-bottom: 60px;
    padding: 24px;
}

.panel--inset {
    --shadow: var(--nm-shadow-md-inset);
}

.panel--lg {
    padding: 32px;
}

.panel--sm {

}

.panel:last-of-type {
    margin-bottom: 0;
}

.decus-user-module-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-radius: inherit;
    padding: 24px;
}

.decus-user-module-container .user {
    display: flex;
    align-items: center;
}

.decus-user-module-container .user .decus-avatar {
    margin-right: 12px;
}

.decus-user-module-container .user p.shopping-as {
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightNormal);
    color: var(--textColorMuted);
    margin: 0;
}

.decus-user-module .not-logged-placeholder {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
    margin-right: 12px;
    border-radius: 6px;
    background-color: var(--neutral3);
}

.decus-username {
    display: inline-block;
    font-size: var(--fontSizeLarge);
    margin: 0;
    color: var(--primary5);
    font-weight: var(--fontWeightHeavy);
}

.cart-prompt {
    cursor: pointer;
    position: relative;
    margin-left: 12px;
}

.cart-prompt::after {
    content: attr(data-badge);
    position: absolute;
    top: -12px;
    right: -3px;
    bottom: 0;
    left: 0;
    padding: 1px 3px;
    text-align: center;
    color: inherit;
    font-size: 12px;
    font-weight: var(--fontWeightHeavy);
}

.cart-prompt:hover i, .cart-prompt:hover::after {
    color: var(--primary5);
}

.module .payments li {
    display: flex;
    border-bottom: 2px solid var(--neutral3);
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.module .payments li .info {
    white-space: normal;
}

.module .payments li .info .extra {
    color: var(--textColorMuted);
}

.donation-goal .progress {
    border-radius: 32px;
    box-shadow: none;
    background-color: var(--neutral3);
    margin-top: 5px;
}

.donation-goal .progress .progress-bar {
    box-shadow: none;
    background-color: var(--primary5);
}

.decus-top-donator {
    position: relative;
}

.decus-top-donator i.fa-star {
    position: absolute;
    font-size: var(--fontSizeLarge);
    color: #F2B63F;
    text-shadow: 0px 3px #a97919;
    top: calc(var(--fontSizeLarge)/-2);
    left: calc(50% - (var(--fontSizeLarge) * 1.125)/2);
}

.module .top-donator .info {
    width: 100% !important;
    float: none !important;
}

.module .top-donator .info .amount {
    color: var(--textColorMuted);
}

.module .top-donator .avatar {
    display: block !important;
    width: 36%;
}

.decus-nav {
    border: none;
    border-radius: 0;
    background-color: var(--pageBg);
    /* margin: 48px 0; */
}

.decus-nav__collapse {
    margin-bottom: 48px;
}

nav.navbar .navbar-collapse {
    background: linear-gradient(to bottom left, var(--neutral1) -100%, var(--neutral2) 100%);
    padding: 16px 24px;
    border: 0;
}

nav.navbar .navbar-nav > li > a {
    color: var(--textColorMuted);
    font-weight: var(--fontWeightNormal);
    padding: 12px 24px;
}

nav.navbar .navbar-nav > li.active > a {
    font-weight: var(--fontWeightHeavy);
}

nav.navbar .navbar-nav > li.active {
    background: var(--neutral1);
    border-radius: 32px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: var(--textColor);
    text-decoration: none;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: inherit;
    color: inherit;
}

.dropdown-menu > li > a {
    color: var(--textColorDimmed);
    padding: 3px 12px;
}

.dropdown-menu > li:not(.active) > a:hover, .dropdown-menu > li:not(.active) > a:focus {
    color: var(--primary5);
    background-color: var(--neutral2);
}

@media (max-width: 767px) {
    .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
        margin-right: -10px;
        margin-left: -10px;
    }
}

nav.navbar .navbar-header .navbar-brand {
    display: none !important;
}

.navbar-toggle {
    border: none;
}

nav.navbar .navbar-toggle .icon-bar {
    background-color: var(--textColor);
}

.navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: var(--contentBg);
}

.category .packages-image {
    display: flex;
    flex-wrap: wrap;
}

.category .packages-image .image {
    max-width: 160px;
    margin: 0 auto;
}

.category .packages-image .package .info {
    max-width: unset;
    margin: -65px 5px 0 5px;
}

.category .packages-image .package .info .text {
    width: 100%;
    height: auto;
    padding: 18px;
    padding-top: 83px;
}

.category .packages-image .package .info .text .name {
    word-break: break-all;
    margin-bottom: 5px;
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeLarge);
}

.category .packages-image .main-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category .packages-image .main-info .price {
    font-size: var(--fontSizeNormal);
    color: var(--textColorDimmed);
    font-weight: var(--fontWeightHeavy);
}

.category .packages-image .package .info .main-info .button {
    float: none;
    width: auto;
}

.category .packages-image .package .info .text .price .discount, .category .packages-row table .price .discount, .module .featured-package .info .text .price .discount {
    color: #E66A6A;
    text-decoration: none;
}

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--neutral3);
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-top: none;
    line-height: 1.5;
}

.category .packages-row table td {
    padding: 16px 24px;
}

.category .packages-row table .price {
    text-align: right;
}

.category .packages-row table .name {
    font-weight: var(--fontWeightHeavy);
}

.modal {
    all: unset;
    position: relative;
    z-index: 9999;
}

.modal--centered .modal__wrapper {
    justify-content: center;
    align-items: center;
}
.modal--centered .modal__content {
    max-height: 90%;
}
.modal__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,.5);
}
.modal__overlay--loading::after {
    content: "";
    position: absolute;
    width: 5em;
    height: 5em;
    inset: 0;
    margin: auto;
    border: 8px solid transparent;
    border-top-color: var(--textColor);
    border-radius: 9999px;
    animation: btn-loading-spinner 1s linear infinite;
}
.modal__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}
.modal__content {
    position: relative;
    padding: 32px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--pageBg);
    border-radius: var(--rounded-2xl);
    min-width: 480px;
    max-width: 868px;

    transform: translateZ(0);
}

.modal--package .modal__content {
    min-width: 640px;
    padding: 48px;
    padding-top: 0;
}

.modal__header {
    display: flex;
    justify-content: space-between;
}

.modal__close::before { content: "\2715"; }

#category-modal .modal__header {
    margin-bottom: 24px;
}

.modal__title {
    font-size: var(--fontSizeLargest);
    font-weight: var(--fontWeightHeavy);
}

#options-modal .modal__title {
    margin-bottom: 24px;
}

.modal input {
    width: 100%;
}

.modal--slideout .modal__wrapper {
    justify-content: flex-end;
}

.modal--slideout .modal__content {
    border-radius: 0;
}

.modal--slideout .modal__close {
    margin: 24px;
    margin-top: 48px;
    align-self: flex-start;
    transition: opacity .2s ease;
    box-shadow: none;
}

.modal__overlay--enter {
    transition: all .25s linear;
}
.modal__overlay--leave {
    transition: all .3s linear .1s;
}
.modal__overlay--enter-start,
.modal__overlay--leave-end {
    opacity: 0;
}

.modal__regular--enter {
    transition: all .25s ease-out .15s;
}
.modal__regular--leave {
    transition: all .3s ease-in;
}
.modal__regular--enter-start {
    transform: translateY(15%);
    opacity: 0;
}
.modal__regular--enter-end {
    transform: translateY(0%);
    opacity: 1;
}
.modal__regular--leave-start {
    transform: translateY(0%);
    opacity: 1;
}
.modal__regular--leave-end {
    transform: translateY(10%);
    opacity: 0;
}

.modal__slideout--enter {
    transition: all .25s ease-out .15s;
}
.modal__slideout--leave {
    transition: all .3s ease-in;
}
.modal__slideout--enter-start {
    transform: translateX(10%);
    opacity: 0;
}
.modal__slideout--enter-end {
    transform: translateX(0%);
    opacity: 1;
}
.modal__slideout--leave-start {
    transform: translateX(0%);
    opacity: 1;
}
.modal__slideout--leave-end {
    transform: translateX(5%);
    opacity: 0;
}

.package-footer-buttons a {
    margin-bottom: 0;
}

.decus-package-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.decus-package-buttons .package-footer-buttons {
    order: 1;
}

#cart-modal .modal__header {
    align-items: flex-start;
    position: relative;
}

#cart-modal header .cartModal-meta {
    display: flex;
    align-items: center;
}

#cart-modal .decus-username {
    color: var(--textColor);
}

#cart-modal header .cartModal-meta .info .cart-short {
    color: var(--textColorMuted);
}

#cart-modal header .cartModal-actions .log-out {
    font-size: var(--fontSizeSmaller);
    color: var(--textColorMuted);
    margin-right: 12px;
}

#cart-modal header .cartModal-actions .currency-selector {
    display: inline-block;
}

#cart-modal header .cartModal-actions .currency-selector .dropdown-menu {
    height: 200px;
    overflow-y: scroll;
}

#cart-modal-content .cartModal-items {
    padding: 0;
    margin: 0;
    list-style: none;
}

#cart-modal-content .cartModal-items .cartModal-item {
    padding: 16px;
    background-color: var(--neutral3);
    font-weight: var(--fontWeightHeavy);
}

#cart-modal-content .cartModal-items .cartModal-item:not(:last-of-type) {
    margin-bottom: 8px;
}

#cart-modal-content .cartModal-items .cartModal-item .itemName, #cart-modal-content .cartModal-items .cartModal-item .right, #cart-modal-content .cartModal-items .cartModal-item .price, #cart-modal-content .cartModal-items .cartModal-item .item-actions {
    display: inline-block;
}

#cart-modal-content .cartModal-items .cartModal-item .right {
    float: right;
}

#cart-modal-content .cartModal-items .cartModal-item .right .price {
    margin-right: 16px;
}

#cart-modal-content .cartModal-items .cartModal-item .right .item-actions > a {
    color: var(--textColorMuted);
}

#cart-modal-content .cartModal-items .cartModal-item .right .item-actions > a:hover {
    color: var(--textColorDimmed);
}

#cart-modal footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#cart-modal.decus-cart-empty .modal__container {
    overflow-y: unset;
}

#cart-modal.decus-cart-empty footer {
    justify-content: center;
}

#cart-modal footer .cartModal-continue-shopping {
    cursor: pointer;
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeSmall);
    color: var(--textColorMuted);
}

#cart-modal .modal__container {
    padding: 24px;
    background-color: var(--pageBg);
}
#cart-modal .modal__container > .modal__header, #cart-modal .modal__container > .modal__content, #cart-modal .modal__container > .modal__footer {
    background: var(--contentBg);
    border-radius: 6px;
    padding: 24px;
}
#cart-modal .modal__container > .modal__header,  #cart-modal .modal__container > .modal__content {
    margin-bottom: 16px;
}
#cart-modal .modal__header .player-body {
    position: absolute;
    bottom: 0;
    left: 18px;
    overflow: hidden;
    height: 116px;
}
#cart-modal .modal__header .player-body img {
    filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
    padding: 6px;
}
#cart-modal .cartModal-item .left {
    display: inline-flex;
}
#cart-modal .cartModal-item .quantity-wrapper {
    position: relative;
    color: var(--textColorMuted);
    margin-right: 12px;
}
#cart-modal .cartModal-item .quantity-wrapper .quantity {
    padding: 6px 10px;
    background: var(--neutral2);
    border-radius: 100%;
}
#cart-modal .cartModal-item .quantity-wrapper .quantity span::before {
    content: "x";
    font-size: 85%;
}
#cart-modal .cartModal-item .quantity-wrapper .quantity-actions {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -4px;
    left: 0;
    font-size: 20px;
    transition: .15s ease;
    visibility: hidden;
    opacity: 0;
}
#cart-modal .cartModal-item .quantity-wrapper:hover .quantity-actions {
    visibility: visible;
    opacity: 1;
}
#cart-modal .cartModal-item .quantity-wrapper .quantity-actions i {
    position: absolute;
    right: 0;
    cursor: pointer;
}
#cart-modal .cartModal-item .quantity-wrapper .quantity-actions i:first-child {
    top: -10px;
}
#cart-modal .cartModal-item .quantity-wrapper .quantity-actions i:last-child {
    bottom: -10px;
}

#ip-modal .modal__container {
    min-width: auto;
}

#ip-modal .modal__header {
    justify-content: center;
}

.decus-pReferral-container .decus-pReferral-main {
       display: flex;
       justify-content: space-between;
       margin-top: 18px;
}

.decus-pReferral-main > .input-group {
    flex-grow: 1;
    margin-right: 12px;
}

.checkout .packages table tbody .quantity input {
    padding: 2px;
}

.checkout .packages .table > tbody > tr > td {
    padding: 12px;
    font-size: var(--fontSizeNormal);
    font-weight: var(--fontWeightHeavy);
}

.checkout .packages .table > thead > tr > th {
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightNormal);
}

.checkout .packages table tbody .quantity input {
    width: 100%;
}

.checkout .packages table tbody .buttons .btn {
    padding: 6px 12px;
}

.table > thead > tr > th {
    border: none;
}

.checkout .packages .table-striped > tbody > tr:nth-child(odd) .quantity input {
    background-color: var(--neutral2);
}

.checkout .details .form-group > label {
    font-size: var(--fontSizeSmall);
}

.decus-checkout-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.decus-checkout-heading .checkout-user .user-wrapper {
    display: flex;
    align-items: center;
    color: var(--textColor);
}

.decus-checkout-heading .checkout-user .user-wrapper:hover {
    opacity: .8;
}

.decus-checkout-heading .checkout-user .user-ign {
    font-size: var(--fontSizeSmall);
    margin-right: 10px;
}

#footer {
  margin-top: 48px;
  font-size: var(--fontSizeSmall);
}
#footer .upper-container .upper .info {
  max-width: 500px;
}
#footer .upper-container .upper .info .footer__play {
  margin-left: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: baseline;
}
#footer .upper-container .upper .info .footer__play:hover {
  text-decoration: none;
}
#footer .upper-container .upper .info p.main,
#footer .upper-container .upper .info .footer__play {
  display: inline-block;
  color: var(--textColorDimmed);
  font-weight: var(--fontWeightHeavy);
  font-size: var(--fontSizeNormal);
}

#footer .upper-container .upper .info p.main {
  margin-bottom: 24px;
}
#footer .upper-container .upper img {
  height: 128px;
  opacity: 0.2;
}

.language .fa-globe {
    margin-right: 4px;
}

#footer .upper,
#footer .lower {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--page-width);
  margin: 0 auto;

}
#footer .upper {
  color: var(--textColorMuted);
  min-height: 180px;
  padding-top: 32px;
  padding-bottom: 32px;
}
#footer .lower {
  color: var(--textColorMuted);
  font-weight: var(--fontWeightHeavy);
  padding-top: 24px;
  padding-bottom: 24px;
}

#footer .lower .copyright {
    display: flex;
}

#footer .lower .copyright > p, #footer .lower .copyright > a, #footer .lower .copyright > div {
    margin-right: 8px;
}

@media (max-width: 700px) {
  #footer img {
    display: none;
  }
}

#footer .footer-config {
    display: flex;
}

#footer .language-selector {
    min-width: 120px;
    display: flex;
    justify-content: center;
}

#footer .currency-selector {
    min-width: 60px;
    display: flex;
    justify-content: center;
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
input[type="checkbox"] + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: var(--neutral4);
  border-radius: 100%;
}

input[type="checkbox"] + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  background: var(--textColor);
  width: 2px;
  height: 2px;
  opacity: 0;
  transition: .15s opacity;
  box-shadow: 2px 0 0 var(--textColor), 4px 0 0 var(--textColor), 4px -2px 0 var(--textColor), 4px -4px 0 var(--textColor), 4px -6px 0 var(--textColor), 4px -8px 0 var(--textColor);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type="checkbox"]:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
input[type="checkbox"]:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

.checkout .checkbox input[type="checkbox"] + label:after {
    margin-top: 6px;
}

body[data-layout="2"] .layout2-sidebar .decus-user-module, body[data-layout="3"] .index-sidebar .decus-user-module {
    display: none;
}

body[data-layout="3"] .sidebar {
    display: none;
}

body[data-layout="2"] .checkout-user, body[data-layout="3"] .checkout-user {
    display: none;
}

.user-login-form {
    position: relative;
}

.user-login-form input {
    padding-right: 46px;
}

.user-login-form input:focus + .cartModal-submit, .user-login-form input:valid + .cartModal-submit {
    transform: translateX(0);
    opacity: 1;
}

.cartModal-submit {
    position: absolute;
    background: transparent;
    border: none;
    top: 0;
    bottom: -1px;
    right: 14px;
    transform: translateX(80%);
    opacity: 0;
}

.cartModal-submit:hover {
    color: var(--primary5);
}

.navbar-nav > li > .dropdown-menu {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: .25s ease;
    width: 100%;
    text-align: center;
    font-size: var(--fontSizeNormal);
    border-radius: 6px;
}

.dropdown-menu--min-content {
    width: min-content;
}

.open > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.input-group-btn > .btn-default {
    box-shadow: none !important;
    margin-left: -1px !important;
}

.giftcardbalance form {
    margin-top: 5px;
}

.module .payments li .avatar > img, .module .payments li .avatar > div {
    border-radius: 5px;
}

.module .featured-package .info .text {
    position: relative;
}

.module .featured-package .info .text .name {
    font-size: var(--fontSizeNormal);
    margin: 0;
}

.module .featured-package .info .text .price {
    font-size: var(--fontSizeSmall);
    color: var(--textColorMuted);
}

.module .featured-package .info .button {
    margin-left: 16px;
}

.module .featured-package .info {
    display: flex;
    justify-content: center;
}

.modal .modal__container img {
    max-width: 100%;
    height: auto;
}

form[data-dynamic-cart-options-form] .form-group:last-child {
    margin-bottom: 0;
}
form[data-dynamic-cart-options-form] .buttons {
    display: flex;
}
form[data-dynamic-cart-options-form] .buttons > div {
    flex: 1;
    margin: 0 4px;
}
.loader-overlay {
    position: fixed;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0, .6);
    z-index: 2021;

    display: none;
}
.loader-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0);
  border-right: 1.1em solid rgba(255, 255, 255, 0);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0);
  border-left: 1.1em solid var(--textColorMuted);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.jq-toast-wrap {
    width: auto;
    max-width: 350px;
}
.jq-toast-single {
    padding: 24px;
    font-family: inherit;
    font-size: var(--fontSizeSmall);
    border-radius: 6px;
    background: none;
    padding: 16px;
}
.jq-toast-single h2 {
    font-family: inherit;
    font-size: inherit;
    margin-bottom: 0;
}
.jq-icon-success .jq-toast-heading::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    display: inline-block;
    padding-right: 8px;
    vertical-align: middle;
    font-weight: 900;
    font-size: 150%;
}
.jq-icon-error .jq-toast-heading::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00d";
    display: inline-block;
    padding-right: 8px;
    vertical-align: middle;
    font-weight: 900;
    font-size: 150%;
}
.jq-icon-success {
    color: #014D40;
    background-color: #8EEDC7;
}
.jq-icon-success .jq-toast-loader {
    background-color: #4baf8e !important;
}
.jq-icon-error {
    color: #610404;
    background-color: #F29B9B;
}
.jq-icon-error .jq-toast-loader {
    background-color: #c94f4f !important;
}

.package-options .pull-right:empty {
    clear: both;
}

.packages-imagelist__package {
    display: flex;
    align-items: center;
    padding: 24px;
    gap: 32px;
    border-radius: var(--rounded);
}
/* .packages-imagelist__package:nth-child(odd), .category .packages-image .package .info .text {
    background: linear-gradient(to bottom right, var(--neutral2) -100%, var(--neutral3) 100%);
} */
.packages-imagelist__image {
    width: 120px;
}

.packages-imagelist__image img {
    cursor: pointer;
    width: 100%;
}

.packages-imagelist__main {
    flex: 1;
}
.packages-imagelist__desc {
    display: flex;
    justify-content: space-between;
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeLarge);
    margin-bottom: 12px;
}
.packages-imagelist__actions {
    display: flex;
    justify-content: space-between;
}

.packages-imagelist__cartactions {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
}

.cart-modal__content {
    padding: 48px;
    width: 620px;
}
.cart-modal__main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.cart-modal__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.cart-modal__empty {
    color: var(--textColorMuted);
    text-align: center;
    font-size: var(--fontSizeLarger);
    font-weight: var(--fontWeightHeavy);
}
.cart-modal__pacakges {
    flex: 1;
    margin: 48px 0;
}
.cart-package {
    margin-bottom: 32px;
}
.cart-package__main {
    padding: 16px 24px;
}
.cart-package__info {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 16px;
    align-items: center;
}
.cart-package__name {
    font-size: var(--fontSizeLarge);
    font-weight: var(--fontWeightHeavy);
}
.cart-package__categories {
    color: var(--textColorMuted);
    font-weight: var(--fontWeightHeavy);
    text-transform: uppercase;
    font-size: var(--fontSizeSmall);
}

.cart-package__categories:not(:empty) {
    margin-bottom: 16px;
}

.cart-package__categories__separator {
    margin: 0 8px;
}
.cart-package__price {
    text-align: center;
    font-weight: var(--fontWeightHeavy);
}
.cart-package__remove {
    text-align: center;
}

.quantity-controls {
  border-radius: 999px;
  display: flex;
  font-weight: var(--fontWeightHeavy);
  font-size: var(--fontSizeSmall);
  position: relative;
  justify-content: center;
}
.quantity-controls.btn--loading::after {
    --btn-text-color: var(--textColor);
}
/* .quantity-controls button {
  padding: 8px 12px;
}
.quantity-controls button, .quantity-controls input {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
}
.quantity-controls button:first-child {
  border-radius: 8px 0 0 8px;
}
.quantity-controls button:last-child {
  border-radius: 0 8px 8px 0;
} */

.quantity-controls .btn {
    font-size: var(--fontSizeSmall);
    padding: 8px 12px;
}

.quantity-controls__input {
  width: 38px;
  text-align: center;
  padding: 0;
}

.quantity-controls__input::-webkit-inner-spin-button,
.quantity-controls__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-header__info {
    padding: 32px;
}

.cart-header__title {
    font-size: var(--fontSizeLargest);
    font-weight: var(--fontWeightHeavy);
}

.cart-header__summary {
    font-weight: var(--fontWeightHeavy);
    color: var(--textColorDimmed);
}

.cart-header__actions {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}

.cart-header__avatar-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cart-header__avatar {
    position: absolute;
    right: 24px;
    top: 24px;
    transform: scaleX(-1);
    width: 192px;
    z-index: 2;
}
.topcustomer__avatar img, .cart-header__avatar img {
    filter: drop-shadow(0 0 8px rgba(0,0,0,.2))
}
.cart-header {
    position: relative;
}

.cart-package__options {
    margin-top: 12px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.cart-package__option i {
    display: none;
    color: var(--textColorDimmed);
    margin-right: 2px;
}
.cart-package__option--gift i {
   display: inline; 
}
.cart-package__option--gift .cart-package__option__name {
    display: none;
}
.cart-package__option__value {
   margin-left: 4px;
}
.cart-package__option__name {
   color: var(--textColorMuted);
}
img {
    max-width: 100%;
    height: auto;
}

.noimage-category {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 24px;
    overflow: hidden;
}

.noimage-category--inactive:not(:hover) {
    opacity: .6;
}
.noimage-category--inactive:not(:hover) img {
    filter: grayscale(1) opacity(0.9);
}

.noimage-category__name {
    color: var(--textColor);
    font-size: var(--fontSizeLarge);
}

.noimage-category__name--larger {
    font-size: var(--fontSizeLarger);
}

.noimage-category:not(.noimage-category--active):hover {
    /* box-shadow: none; */
    transform: translateY(4px);
    background: var(--nm-bg-concave);
}

/* .noimage-category:hover .noimage-category__name, .noimage-category:active .noimage-category__name, .noimage-category--active .noimage-category__name {
    color: var(--primary5);
} */

.noimage-category__image {
    position: absolute;
    height: 110%;
    left: 12px;
    opacity: .9;
    bottom: -24px;
}

.noimage-category__title {
    text-align: right;
    z-index: 2;
}

.image-categories, .noimage-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
    gap: 48px;
}

.noimage-categories--sidebar {
    gap: 16px;
    overflow: hidden;
    padding: 16px;
}

/* .noimage-categories--sidebar .noimage-category--active {
    box-shadow: var(--nm-shadow-sm-inset);
} */

.noimage-categories--sidebar .noimage-category--active::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 10;
    box-shadow: var(--nm-shadow-sm-inset);
    width: 100%;
    height: 100%;
}

.image-category, .noimage-category {
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    transition: all .25s ease-out;
    margin: 0;
    background: var(--nm-bg);
}

.noimage-category__name {
    transition: all .25s ease-out;
}

.image-category__image--foreground, .image-category__image--background, .image-category__title {
    transition: all .25s ease-out;
}

.image-category:hover .image-category__image--foreground, .image-category:hover .image-category__title {
    transform: translateY(4px);
}

.image-category:hover .image-category__image--background {
    transform: scale(1.05) translateY(4px);
    filter: opacity(0.1) blur(4px);
}

.image-category__title {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    margin: 16px;
    padding: 16px;
    background-color: var(--contentBg);
    border-radius: 8px;
}

.image-category__image {
    border-radius: 12px;
}

.image-category__image--foreground {
    position: relative;
    z-index: 2;
}

.image-category__image--background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    filter: opacity(0.7);
    border-radius: 12px;
    transform: translateY(4px);
}
.subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subheader__left {
    position: relative;
}

.subheader__title, .index-user__title, .image-category__title, .noimage-category__title  {
    font-weight: var(--fontWeightHeavy);
}

.subheader__super, .index-user__super, .noimage-category__super {
    font-size: var(--fontSizeSmaller);
    color: var(--textColorMuted);
    text-transform: uppercase;
}

.subheader__name {
    font-size: var(--fontSizeLargest);
}
.subheader__goal {
    display: none;
    font-size: 38px;
    position: absolute;
    right: -24px;
    top: 0;
    bottom: 0;
    transform: translateX(100%);
    align-items: flex-end;
    gap: 12px;
}

.subheader__goal__icon {
    background: linear-gradient(to top, var(--textColor) var(--goal), var(--neutral2) 0%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: none;
}

.subheader__goal__icon:hover + .subheader__goal__text {
    opacity: 1;
}

.subheader__goal__text {
    font-size: var(--fontSizeSmall);
    color: var(--textColor);
    font-weight: var(--fontWeightHeavy);
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    transition: all .25s ease-in-out;
    cursor: default;
}

input, select {
    background-color: transparent;
    box-shadow: var(--nm-shadow-inset);
    border: 0;
    border-radius: 999px;
    padding: 8px 24px;
}

.modal-package__header {
    /* position: sticky; */
    /* top: 0; */
    background: transparent;
    padding: 48px 0;
}

.modal-package__controls {
    display: flex;
    align-items: center;
    padding: 24px;
    gap: 32px;
    position: relative;
}

.modal-package__close {
    position: absolute;
    top: 24px;
    right: 24px;
}

.modal-package__main {
    flex: 1;
}

.modal-package__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-package__name {
    font-size: var(--fontSizeLarger);
    font-weight: var(--fontWeightHeavy);
}
.modal-package__price {
    font-size: var(--fontSizeLarge);
}

.modal-package__cartactions {
    display: flex;
    align-items: center;
    margin-top: 16px;
    gap: 16px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.modal-package__image {
    width: 180px;
}

.modal-package__image img {
    width: 100%;
}

.modal-package--page {
    padding: 24px;
}

.modal-package--page .modal-package__header {
    position: static;
    padding: 0;
    background-color: transparent;
    margin-bottom: 24px;
}

.modal-package--page .modal-package__controls {
    background: linear-gradient(to bottom right, var(--neutral2) -100%, var(--neutral3) 100%);
}

.panel--btn {
    /* position: relative; */
    border-radius: var(--rounded-2xl);
    cursor: pointer;
    transition: all .25s ease-out;
    margin: 0;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    padding: 24px;
    overflow: hidden;
    z-index: 1;

    background: var(--nm-bg);
    box-shadow: var(--nm-shadow);
}
.panel--btn:hover, .panel--btn:active {
    background: var(--nm-bg-concave);
    transform: translateY(4px);
}

.decus-nav__menu-toggle {
    position: relative;
}

.cart-btn {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    overflow: hidden;
    z-index: 1;
}
.cart-btn svg,  .decus-nav__menu-toggle svg {
    fill: var(--nm-bg);
    transform: scaleX(-1) rotate(-10deg);
    right: 0;
    transition: .4s;
    position: absolute;
    width: 33%;
    z-index: -1;
}

.cart-btn svg {
    top: 10%;
}
.decus-nav__menu-toggle svg {
    top: 20%;
}

.cart-btn__cta {
    font-size: var(--fontSizeLarge);
    font-weight: var(--fontWeightHeavy);
}
.text-caption {
    font-size: var(--fontSizeSmaller);
    font-weight: var(--fontWeightHeavy);
    color: var(--textColorMuted);
    text-transform: uppercase;
}
.discount {
    color: var(--color-danger);
    text-decoration: line-through;
}

.modal-options input {
    width: 100%;
}

.modal-options__buttons {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    margin-top: 24px;
}

select option {
    background-color: var(--neutral2);
}

.nav-shopper {
    display: flex;
    align-items: center;
    padding-right: 36px;
}

#header .item--shopper {
    padding-right: 12px;
}

.nav-shopper__avatar {
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
}

.nav-shopper__avatar--placeholder {
    background-color: var(--neutral2);
}

.panel--header {
    padding: 24px;
}

.category-menu__subcategories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px
}

.toast-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-left: 48px;
    margin-bottom: 48px;
    flex-direction: column-reverse;
    user-select: none;
    pointer-events: none;
    z-index: 9999;
}

.toast {
    border-radius: var(--rounded-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    padding: 16px 24px;
    font-weight: var(--fontWeightHeavy);
}
.toast--enter {
    transition: all ease-in .2s;
}
.toast--enter-start {
    transform: translateY(15%);
    opacity: 0;
}
.toast--enter-end {
    transform: translateY(0);
    opacity: 1;
}

.toast--leave {
    transition: all ease-out .5s;
}
.toast--leave-end {
    opacity: 0;
}

.toast i {
    margin-right: 8px;
}

.toast--success {
    color: var(--teal-900);
    background-color: var(--teal-300);
}
/* .toast--success i {
    color: var(--teal-800)
} */

.toast--error {
    color: #610404;
    background-color: #F29B9B;
}
/* .toast--error i {
    color: #780A0A;
} */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .header .logo span, .module .top-donator .info .ign {
    font-weight: var(--fontWeightHeavy);
}

.module-header, .module__header {
    display: none;
}

.module {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.module-header, .module__header {
    display: block;
    margin-bottom: 24px;
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeLarger);
    text-transform: capitalize;
    z-index: 10;
}

.index-user__placeholder {
    width: 42px;
    height: 42px;
    margin-left: 16px;
    background-color: var(--contentBg);
    border-radius: 6px;
}

.index-user {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.index-user:hover svg {
    transform: scale(1.08) rotate(-9deg);
}

.index-user svg {
    fill: var(--textColor);
    width: 42px;
    transition: .3s ease;
}

.index-user__title {
    text-align: right;
    transition: .3s ease;
}

.index-user:hover .index-user__title {
    margin-right: 8px;
}

.categories {
    margin: 48px 0 60px 0;
}

.categories__item ~ .categories__item {
    margin-top: 48px;
}

.pages {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pages__label {
    font-weight: var(--fontWeightHeavy);
}

.decus-user-module {
    display: none;
}

.index-modules .break {
    flex-basis: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.index-modules {
    --gap: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.module {
    --cols: 2;
    flex: 0 1 calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));;
    order: 0;
    margin: 0;
}
/* 
.module ~ .module:not(.module-header) {
    margin-bottom: 24px;
} */

.module {
    order: 10;
}

.module--welcome {
    order: 1;
}
.module--faq {
    order: 2;
}
.module--featured-packages {
    order: 3;
}
.module--topcustomer {
    order: 4;
}
.module--giftcard {
    order: 5;
}
.module--payments {
    order: 6;
}

.module-header {
    flex-basis: 100%;
    text-transform: capitalize;
}

.module--featured-packages { 
    --cols: 1;
    flex-grow: 1;
    padding: 0;
}

.featured-package {
    display: flex;
    margin: 0;
    padding: 24px;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all .3s ease;
}

.featured-package:hover {
    transform: translateY(4px);
}

.featured-package svg {
    fill: var(--nm-bg);
    stroke: var(--nm-bg);

    transform: scaleX(-1) rotate(-10deg) translateY(33%);
    right: 0;
    bottom: 0;
    transition: .3s;
    position: absolute;
    width: 33%;
    z-index: -1;
}
.featured-package:hover svg {
    transform: scaleX(-1) scale(1.1) rotate(-10deg) translateY(33%);
}

.featured-package__image {
    width: 100px;
    margin-right: 12px;
    will-change: transform;
    transition: transform .3s ease;
}

.featured-package__name {
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeLarge);
    transition: .3s ease;
}

.featured-package__view {
    padding: 12px;
    background: var(--neutral3);
}

.featured-package__price {
    font-weight: var(--fontWeightHeavy);
    opacity: .6;
}

.featured-packages__body {
    display: grid;
    grid-template-columns: repeat(var(--featured-packages-cols), 1fr);
    gap: 48px;
}


/* .featured-package:hover .featured-package__name {
    color: var(--primary5);
} */

.topcustomer, .payments {
    padding: 0;
}

.module__header--topcustomer {
    display: none;
}

.topcustomer {
    --avatar-width: 180px;
    --avatar-gutter: 48px;
}

.topcustomer__body {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;

    min-height: 200px;
    height: 100%;
    padding: 24px;
}

.topcustomer__avatar {
    position: absolute;
    left: 0;
    bottom: 0;
    left: var(--avatar-gutter);
    z-index: 2;

    width: var(--avatar-width);
}

.topcustomer__avatar img {
    filter: drop-shadow(0 0 6px rgba(0,0,0,.1))
}

.topcustomer__info {
    margin-left: calc(var(--avatar-width) + var(--avatar-gutter));
    padding: 24px;
    z-index: 2;
}

.topcustomer__info--steam {
    margin: auto;
    text-align: center;
}

.topcustomer__icon {
    font-size: 24px;
    margin-bottom: 12px;
    color: goldenrod;
    position: relative;
    text-shadow: 0 2px saddlebrown;
}

.topcustomer__ign {
    color: var(--primary5);
    font-weight: var(--fontWeightHeavy);
    font-size: var(--fontSizeLarger);
    text-transform: capitalize;
}

.topcustomer__amount {
    color: var(--textColorDimmed);
}

.module--payments {
    display: block;
    width: 100%;
    flex: 1;
}

.payments__body {
    padding: 24px;
    flex: 1;
}

.payments__carousel {
    padding: 48px;
    background: var(--nm-bg);
    box-shadow: var(--nm-shadow-inset);
    border-radius: var(--rounded-2xl);
}

.btn.payments__arrow {
    position: absolute;
}

.payment {
    display: flex;
    margin: 0;
    padding: 24px;
    align-items: center;
    box-shadow: var(--nm-shadow);
}

.payments__arrow svg {
    fill: var(--textColor);
    height: 1em;
    width: 1em;
}

.payments__grid {
    --gap: 12px;
    --line-offset: calc(var(--gap) / 2);
    --line-thickness: 2px;
    --line-color: red;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: var(--gap);
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.payments__grid__item {
    position: relative;
    display: flex;
    padding: 12px 0;
    align-items: center;
}
.payments__grid__item::after {
    content: '';
    position: absolute;
    background-color: var(--line-color);
    z-index: 1;
    width: 100%;
    height: var(--line-thickness);
    inset: 0;
    top: calc(var(--line-offset)* -1);
}

.payments__avatar {
    margin-right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    overflow: hidden;
}

.payments__ign {
    font-size: var(--fontSizeSmall);
    font-weight: var(--fontWeightHeavy);
}

.payments__details {
    font-size: var(--fontSizeSmall);
    color: var(--textColorMuted);
}

.module--giftcard {
    --cols: 2;
}

.giftcard {
    display: block;
    padding: 32px;
}

.giftcard__header {
    position: relative;
    display: flex;
    font-size: var(--fontSizeLarge);
    justify-content: space-between;
    align-items: center;
}

.giftcard__title {
    font-size: var(--fontSizeLarge);
    font-weight: var(--fontWeightHeavy);
    flex: 1;
}

.giftcard__logo {
    width: 88px;

    opacity: .5;
    position: absolute;
    top: 0;
    right: 0;
}

.giftcard__body {
    position: relative;
    margin: 32px 0;
}

.giftcard__chip {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 6px;
}

.giftcard__chip svg, .topcustomer__svg {
    height: 100%;
    fill: var(--nm-bg);
    stroke: var(--nm-bg);
    filter: drop-shadow(4px 4px 4px var(--nm-shadow-dark)) drop-shadow(-4px -4px 4px var(--nm-shadow-light));
}

.giftcard__chip svg {
    background: var(--nm-bg-convex);
}

.topcustomer__svg {
    width: 42px;
}

.giftcard__balance {
    font-size: var(--fontSizeLarger);
    font-weight: var(--fontWeightHeavy);
}

.giftcard__footer {
    display: flex;
    justify-content: space-between;
}

.giftcard__input {
    box-shadow: var(--nm-shadow-sm-inset);
}

.giftcard__input:focus {
    /* background-color: var(--neutral1); */
}
.giftcard__input::placeholder {
    font-size: var(--fontSizeNormal);
}

.module--welcome {
    --cols: 2;
    padding-left: 0;
}

.module--faq {
    --cols: 2;
    padding: 0;
}

.module__header--faq {
    text-align: right;
}

.faq__header {
    font-size: var(--fontSizeLarge);
}

.faq__trigger {
    position: relative;
    display: block;
    cursor: pointer;
    text-align: left;
    width: 100%;
    padding: 16px 24px;
    background-color: transparent;
    transition: color 0.25s ease;
    text-decoration: none;
    margin: 0;
    border: 0;
}

.faq__trigger::after {
    content: "+";
    text-align: center;
    width: 18px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    right: 24px;
    top: 50%;
}

.faq__ac {
    flex: 1;
    box-shadow: var(--nm-shadow-md-inset) !important;
}

.faq__panel {
    overflow: hidden;
    transition-property: height, visibility;
    transition-timing-function: ease-out;
}

.faq__text {
    padding: 0 24px 24px 24px;
}

.faq__contact {
    padding: 24px;
    text-align: right;
    color: var(--textColorDimmed);
}

.faq__contact > .fas {
    color: var(--textColorMuted);
}

.modal-login {
    display: flex;
    gap: 32px;
}

.modal-login--page {
    padding: 24px;
}

.modal-login__aside {
    margin: 0;
    padding: 32px;
    display: flex;
    padding-bottom: 0;

    box-shadow: var(--nm-shadow-md-inset);
}

.modal-login__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.modal-login__header {
    margin-bottom: 32px;
}
.modal-login__skin {
    width: 212px;
    height: 100%;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    background-image: url("https://visage.surgeplay.com/bust/256/X-Alex.png?no=overlay");
}
.modal-login__main {
    flex: 1;
}
.modal-login__mode {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 12px;
}
.modal-login__input input {
    font-size: var(--fontSizeLarge);
    padding: 12px 32px;
    width: 100%;
}

.modal-login__input {
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .panel {
        box-shadow: var(--nm-shadow);
    }

    .body .content {
        width: 100%;
    }

    body[data-layout="3"] .layout2-sidebar {
        display: flex;
        flex-direction: column;
    }

    body[data-layout="3"] .layout2-sidebar .decus-user-module {
        order: 2;
        margin-bottom: 24px;
    }

    .decus-wrapper {
        padding: 0 24px;
    }

    .giftcard__footer {
        flex-direction: column;
        gap: 12px;
    }

    .modal-login__aside {
        display: none;
    }

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

    .subheader__user .index-user {
        display: none;
    }

    .subheader {
        align-items: flex-start;
        flex-direction: column;
        gap: 32px;
    }

    .subheader__user {
        align-self: stretch;
    }

    /* .categories {
        margin-top: 24px;
    } */

    .topcustomer__info {
        margin-left: 0;
        width: 50%;
    }

    .topcustomer__avatar {
        left: auto;
        right: 0;
        transform: scaleX(-1);
        bottom: 0;
    }

    #header .header__aside {
        display: none;
    }

    /* #header[data-style="2"] .header__aside--left {
        display: block;
        position: static;
        transform: none;
    } */

    #header[data-style="2"] .nav-right {
        display: block;
    }

    #header[data-style="2"] .header__wrapper {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 32px;
        padding: 0 16px;
    }

    #header[data-style="2"] .header-server__text {
        text-align: center;
    }
    
    .header-jumbo-wrapper {
        --jumbo-padding: 16px;   
    }

    .header__logo img {
        max-width: 100%;
    }

    .featured-packages__body {
        display: flex;
        flex-wrap: wrap;
    }

    .featured-package {
        flex-grow: 1;
    }
}

@media (min-width: 1536px) {
    .payments__arrow--prev {
        left: -24px;
        transform: translateY(-50%) translateX(-100%);
    }
    .payments__arrow--next {
        right: -24px;
        transform: translateY(-50%) translateX(100%);
    }

    .payments__arrow--prev:hover, .payments__arrow--prev:active {
        transform: translateY(-50%) translateX(-100%);
    }
    .payments__arrow--next:hover, .payments__arrow--next:active {
        transform: translateY(-50%) translateX(100%);
    }
}

@media (min-width: 1025px) {
    body[data-layout="2"] #main, body[data-layout="3"] #main {
        display: flex;
        align-items: flex-start;
        flex-direction: row-reverse;
        gap: 60px;
    }

    body[data-layout="2"] #main .body, body[data-layout="3"] #main .body {
        flex-wrap: wrap;
        width: 100%;
    }

    body[data-layout="2"] #main .layout2-sidebar, body[data-layout="3"] #main .layout2-sidebar {
        position: sticky;
        top: 48px;
        padding: 0;
        flex: 0 0 304px;
    }

    body[data-layout="2"] #main nav.navbar .container-fluid, body[data-layout="3"] #main nav.navbar .container-fluid {
        padding: 0;
    }

    body[data-layout="2"] #main nav.navbar .navbar-nav, body[data-layout="3"] #main nav.navbar .navbar-nav {
        width: 100%;
    }

    body[data-layout="2"] #main nav.navbar .navbar-nav > li, body[data-layout="3"] #main nav.navbar .navbar-nav > li {
        float: unset;
        text-align: center;
    }

    body[data-layout="2"] .content:not(.panel-body), body[data-layout="2"] .sidebar, body[data-layout="3"] .content:not(.panel-body) {
        width: 100%;
        padding: 0;
    }

    body[data-layout="2"] .sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 32px;
        margin-top: 24px;
    }

    body[data-layout="2"] .sidebar > .panel, body[data-layout="3"] .index-sidebar > .panel { 
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    body[data-layout="2"] .sidebar > .panel .panel-body, body[data-layout="3"] .index-sidebar > .panel .panel-body { 
        margin: auto 0;
    }

    body[data-layout="2"] .layout2-sidebar .decus-user-module, body[data-layout="3"] .layout2-sidebar .decus-user-module {
        display: block;
        margin-bottom: 24px;
    }

    body[data-layout="2"] .sidebar > .decus-user-module {
        display: none;
    }

    body[data-layout="3"] .decus-index > .panel:last-of-type {
        padding-bottom: 100px;
    }

    body[data-layout="3"] .index-sidebar {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto 1fr;
        grid-gap: 32px;
        padding: 24px;
        position: relative;
        margin-top: -124px;
    }

    body[data-layout="3"] .index-sidebar > .panel {
        display: none;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(-n+6):not(.decus-user-module) {
        display: flex;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(-n+4) {
        grid-area: 1 / span 2;
        background-color: var(--neutral3);
        text-align: center;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(-n+4) .panel-body {
        order: -1;
        padding: 24px;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(-n+4) .panel-heading {
        background-color: var(--neutral2);
        color: var(--textColorMuted);
        border-radius: 0 0 6px 6px;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(5), body[data-layout="3"] .index-sidebar > .panel:nth-child(6) {
       grid-area: 2 / span 3;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(5) .panel-heading, body[data-layout="3"] .index-sidebar > .panel:nth-child(6) .panel-heading {
        background-color: transparent;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(5) {
        margin-left: -24px;
    }

    body[data-layout="3"] .index-sidebar > .panel:nth-child(6) {
        margin-right: -24px;
    }

    body[data-layout="3"] .index-sidebar .donation-goal .progress, body[data-layout="3"] .index-sidebar input {
        background-color: var(--neutral4);
    }

    body[data-layout="3"] .decus-top-donator .panel-heading {
        z-index: 2;
    }

    body[data-layout="3"] .decus-top-donator .panel-body {
        position: relative;
    }

    body[data-layout="3"] .decus-top-donator .top-donator {
        height: auto;
    }

    body[data-layout="3"] .decus-top-donator .top-donator .avatar {
        position: absolute;
        bottom: -24px;
        height: auto;
    }

    body[data-layout="3"] .decus-top-donator .top-donator .avatar img {
        height: 120px;
        width: auto;
    }

    body[data-layout="3"] .decus-top-donator .top-donator .info {
        padding: 0 15px 0 94px;
        width: 100%
    }

    .decus-nav__menu-toggle {
        display: none;
    }

    .decus-nav__collapse {
        display: block;
        height: auto !important;
    }

    .subheader__user .cart-btn {
        display: none;
    }
}

@media (max-width: 768px) {
    #header nav {
        margin-bottom: 32px;
    }
    
    .panel {
        box-shadow: var(--nm-shadow-sm);
    }

    .packages-imagelist__cartactions > div:not(:last-of-type) {
        display: none;
    }

    .module--topcustomer, .module--giftcard {
        --cols: 1;
    }

    .cart-header__avatar {
        display: none;
    }

    .cart-header__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cart-package__info {
        grid-template-columns: repeat(2, 1fr);
    }

    .cart-package__name, .cart-package__remove {
        order: -1;
    }

    .cart-package__remove {
        text-align: right;
    }

    .cart-package__price {
        order: 1;
        text-align: left;
    }

    .cart-package__quantity-controls {
        order: 2;
    }

    .cart-modal__content {
        min-width: 320px;
        max-width: 512px;
    }

    #footer .lower {
        flex-direction: column;
        gap: 32px;
    }

    #footer .lower .copyright {
        display: block;
        text-align: center;
    }

    .modal-package__controls {
        flex-direction: column;
    }
    .modal-package__cartactions {
        flex-direction: column-reverse;
    }

    .modal-package .modal__header {
        justify-content: center;
    }

    .modal--centered .modal__content {
        min-width: auto;
        max-width: 90%;
    }

    .modal--centered .modal__close {
        position: absolute;
        right: 0;
        transform: translateX(-50%);
    }

    .modal--package .modal__close {
        position: absolute;
        top: 8px;
        right: 8px;
        transform: none;
    }

    .modal-package__image {
        display: none;
    }

    .payment ~ .payment {
        margin-top: 24px;
    }

    .category .packages-image .package {
        width: 100%;
    }

    .payments__carousel .splide__slide {
        margin: 32px 0px;
    }
    
    .payments__carousel .splide__slide:first-child {
        margin-top: 0;
    }
    
    .payments__carousel .splide__slide:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 640px) {
    .decus-wrapper {
        padding: 0 16px;
    }

    #footer .lower {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .header__aside {
        display: none;
    }

    .header__jumbo::before {
        display: none;
    }

    .decus-index__user-module {
        display: none;
    }

    .module {
        --cols: 1 !important;
    }

    .payments__grid {
        grid-template-columns: 1fr;
    }

    .module--giftcard {
        flex-direction: column;
    }

    .giftcard__form-container {
        width: 100%;
    }

    .packages-imagelist__image {
        display: none;
    }

    .cart-header__title {
        font-size: var(--fontSizeLarge);
    }

    .subheader__goal__text {
        display: none;
    }
}

@media (max-width: 500px) {
    .packages-imagelist__actions {
        flex-direction: column;
        gap: 16px;
    }
    .packages-imagelist__cartactions {
        display: block;
    }
    .packages-imagelist__cartactions .btn {
        width: 100%;
    }
    .packages-imagelist__desc {
        flex-direction: column;
        text-align: center;
    }
}

.nav-right {
    display: flex;
}

.language-selector {
    position: relative;
}

.decus-nav-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.category-header__home-btn {
    background-color: var(--neutral4);
}

.category .packages-image .package .info .text, .modal__container, .cartModal-item {
    border-radius: var(--rounded-2xl);
}

/* .body > div:first-child .panel-heading:first-of-type {
    background-color: var(--neutral3);
} */

/* .body > div:first-child .panel-heading:first-of-type + .panel-body {
    padding-top: 0px;
} */

.steam .cart-header__info {
    text-align: center;
}

.steam .cart-header__actions {
    justify-content: center;
}

.steam-login__loginform > p {
    display: none;
}

.steam-login__main {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--neutral1);
}

.steam-login {
    padding: 32px;
}

.input-box {
    position: relative;
    box-sizing: border-box;
    background: transparent;
    background-clip: padding-box;
    border: solid 4px transparent;
    border-radius: 999px;
}

.input-box > input, select {
    width: 100%;
}

.input-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -4px;
    border-radius: inherit;
    background: var(--nm-bg-concave);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 48px;
    align-items: center;
}

.packages-grid__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    margin: 0;
    overflow: hidden;
}

.grid-package__image-container::before {
    content: '';
    float:left;
    padding-top:100%;
}

.image-glow {
    position: relative;
    z-index: 1;
}

.image-glow > img:first-child {
    position: absolute;
    inset: 0;
    z-index: -1;
    filter: blur(10px);
    transform: scale(1.09);
    opacity: .5;
    user-select: none;
}

.grid-package__image-container {
    background: var(--nm-bg);
    box-shadow: var(--nm-shadow);
    border-radius: 50%;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    max-width: 160px;
    padding: 12px;
    overflow: hidden;
}

.grid-package__img {
    cursor: pointer;
}

.grid-package__info {
    margin: 24px 0;
    text-align: center;
}

.grid-package__name {
    font-size: var(--fontSizeLarge);
    font-weight: var(--fontWeightHeavy);
}

.grid-package__price {
    font-size: var(--fontSizeNormal);
    color: var(--textColorMuted);
    font-weight: var(--fontWeightHeavy);
}

.header__logo > a {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.header-jumbo-wrapper {
    --jumbo-padding: 32px;
    padding: var(--jumbo-padding);
}

#header[data-logo-position="Contain"] .header-jumbo-wrapper {
    margin-top: 32px;
}

#header[data-logo-position="Offset"] .header-jumbo-wrapper {
    --jumbo-height: 224px;
    height: var(--jumbo-height);
    margin-top: calc(var(--jumbo-height)* -1 + 2* var(--jumbo-padding));
}

#header[data-logo-position="Contain"] .header__logo--offset, 
#header[data-logo-position="Offset"] .header__logo--middle {
    display: none;
}

.payments .splide__track {
    padding: 48px !important;
    margin: -48px !important;
}

.panel-body {
    padding: 0;
}

.panel-body > p + p, .faq__text > p + p {
    margin-top: 16px;
}