body { font-family: 'Balsamiq Sans', cursive; background: #171925; background-size: cover; background-attachment: fixed; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; } body:before { content: ""; display: block; z-index: 10000; pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.3; } .xbox { background: none; box-shadow: none; } .xbox.xbox_profile-widget .xbox__header { border-radius: 0px 0px 15px 15px; background: #1c2030; text-align: center; } .xbox.xbox_profile-widget .xbox__header img { border-radius: 5px 15px 5px 15px; } .xbox.xbox_profile-widget .nav.nav-pills.nav-stacked a { background: #1c2030; } .xbox.xbox_profile .xbox__header { border-radius: 0px 0px 15px 15px; background: #1c2030; text-align: center; } .xbox.xbox_profile .table.table-striped .minecraft { background: #1c2030; } .xbox.xbox_queue .xbox__header { border-radius: 0px 0px 15px 15px; background: #1c2030; text-align: center; } .xbox.xbox_queue .queue-actions .btn.btn-success { border-radius: 5px 15px 5px 15px; } .xbox_profile .xbox__body { margin-top:10px; } .xbox_profile { box-shadow: 0px 0px 0px 2px #1c2030; } .xbox_queue { box-shadow: 0px 0px 0px 2px #1c2030; } .xbox_promocodes { box-shadow: 0px 0px 0px 2px #1c2030; } .xbox_queue .xbox__body { margin-top:10px; } .xbox_server .xbox__body { background: #00000059; margin-top:10px; } .xbox.xbox_promocodes .xbox__header { border-radius: 0px 0px 15px 15px; background: #1c2030; text-align: center; } .xbox.xbox_promocodes .xbox__body { margin-top:10px; } .xbox.xbox_promocodes .input-group .input-group-addon { border-radius: 5px 15px 5px 15px; } .xbox.xbox_promocodes .input-group .input-group-addon .fa.fa-search { font-size: 18px; } .xbox.xbox_promocodes .input-group .form-control.ng-pristine.ng-untouched.ng-valid.ng-empty { background-color: #1c2030; border-radius: 5px 15px 5px 15px; width: 98%; margin-left: 5px; } .xbox.xbox_promocodes .input-group .form-control.ng-pristine.ng-valid.ng-empty.ng-touched { background-color: #1c2030; border-radius: 5px 15px 5px 15px; width: 98%; margin-left: 5px; } .xbox.xbox_promocodes .input-group .form-control.ng-valid.ng-dirty.ng-valid-parse.ng-touched.ng-empty { background-color: #1c2030; border-radius: 5px 15px 5px 15px; width: 98%; margin-left: 5px; } .xbox.xbox_promocodes .input-group .form-control.ng-valid.ng-touched.ng-not-empty.ng-dirty.ng-valid-parse { background-color: #1c2030; border-radius: 5px 15px 5px 15px; width: 98%; margin-left: 5px; } .xbox.xbox_promocodes .btn.btn-success { background: #ee3e61; border-radius: 5px 15px 5px 15px; } .navbar-brand { width: 223px; padding: unset; margin: 0 16px 0px; height: 58px; background-repeat: no-repeat; background-image: var(--logo-navbar); background-position: 50%; background-size: auto 100%; color: transparent !important; display: flex; align-items: center; } .navbar-right .dropdown-menu { right: -109px; left: auto; } .navbar .nav>li>a:hover { background: #171925; transition: 0.3s; } .navbar .nav>li>a:focus { background: none; transition: 0.3s; } .navbar-header>a:before { font-family: FontAwesome; margin-right:4px; transition: 0.3s; } .navbar-header:hover>a:before, a:hover, a:focus { color: #ee3e61; transition: 0.3s; } .dropdown-menu { border-radius: 0 0 30px 30px; background: #1c2030; } .dropdown-menu .cr-pointer:hover  { background: #171925; transition: 0.3s; } .table-wrapper .btn.btn-success { background: #ee3e61; border-radius: 5px; } .footer { background: #1d1c1c40; font-size: 10px; } @keyframes snow { 0% { background-position: 0px 0px, 0px 0px } 100% { background-position: 500px 1000px, 400px 400px } } .table-striped>tbody>tr:nth-of-type(2n+1) { background: #1c2030; } .modal-dialog.modal-sm .modal-header { background: none; } .modal-dialog.modal-sm .modal-body { background: none; } .modal-dialog.modal-sm .modal-footer { background: none; } .modal-dialog.modal-sm .modal-content { border-radius: 5px 15px 5px 15px; background: #171925; } .input-group-addon { color: rgba(255,255,255,.7); background: #1c2030; } .modal-dialog.modal-sm .btn.btn-default.pull-left { background: none; box-shadow: none; } .modal-dialog.modal-sm .close { display: none; } .modal-dialog.modal-sm .btn.btn-success { background: #ee3e61; border-radius: 5px 15px 5px 15px; } .col-md-12.m-b-10 .form-control.ng-valid { border-radius: 0 15px 5px 0; background: #1c2030; } .col-md-12.m-b-10 .form-control.ng-valid-min { border-radius: 0 15px 5px 0; background: #1c2030; } ::-webkit-scrollbar { width: 0px; } .modal-dialog.modal-lg .kit-product { background: #1c2030; border-radius: 5px 25px 5px 15px; } .modal-dialog.modal-lg .kit-product__name { background: none; } .modal-dialog.modal-lg .kit-product__quantity { background: none; width: 15%; text-align: center; } .modal-dialog.modal-lg .kit-product__image.isbp { padding: 10px; } thead { display: table-header-group; vertical-align: middle; border-color: inherit; background: #0000007a; } .xbox__footer { background: #ffffff00; } .xbox_profile-widget { box-shadow: 0px 0px 0px 2px #1c2030; } tr { display: table-row; vertical-align: inherit; border-color: inherit; background: #1c2030; } .table-striped>tbody>tr:nth-of-type(2n+1) { background: #1c2030; margin-bottom: 5; } .xbox__header { background: #1c2030; border-radius: 5px 15px 5px 15px; } .btn-desc1 { display: block; position: absolute; right: -1px; bottom: -39px } .form-group { margin-bottom: 15px; } .xbox_monitoring .xbox__footer { display: none } .xbox_store .xbox__header { display: none } .xbox__body .store { position: relative; top: -15px; } .xbox_monitoring .xbox__header { display:none; } .xbox__body .xserver { position: relative; top: -10px; } .desc-service { background: #1c2030; height: 30px; border-radius: 0 15px 15px 0; padding-left: 15px; padding-top: 5px; margin-bottom: 10px; box-shadow: -3px 0 #ee3e61; } .header-image { width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; border-radius: 30px; } .gs-loader .gs-loader-inner .spi { width: 180px; height: 180px; background-image: var(--logo-spinner); background-size: contain; background-repeat: no-repeat; animation: loader4 1s infinite ease; filter: drop-shadow(0px -0px 0px rgba(34, 78, 14, 0.53)); } .gs-loader .gs-loader-inner .spi:before { border: none !important; } .gs-loader .gs-loader-inner .spi:after { background-color: transparent; } .gs-loader .gs-loader-inner .spi:before { border: none !important; } .gs-loader .gs-loader-inner .spi:after { background-color: transparent; } .progress-bar.active, .progress.active .progress-bar { animation: progress-bar-stripes 1.1s linear infinite; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: progress-bar-stripes; } img { transition: all .2s; cursor: pointer; } img:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); transition: all .2s; } .progress-bar.active, .progress.active .progress-bar { animation: progress-bar-stripes 0s linear infinite; box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); } .progress-bar-striped, .progress-striped .progress-bar { background-image: linear-gradient(to right, #0474fa 0%, #14bac5 100%); background-size: 220px 40px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); } .store .store-categories .privileges_category { color: #fff; background: linear-gradient(90deg, #c52f19, #a8782b, #f5ad3b); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (min-width: 1560px) { .store .store-categories>.btn.btn-default { margin-left: 0px!important; transition: all .2s ease-in-out; } .store .store-categories .btn.btn-default { width: 100%; text-align: left; font-size: 0px; display: flex; align-items: center; /*background-image: linear-gradient(to right, #0474fa 0%, #16aeb7 100%);*/ border-radius: 10px 30px 10px 30px; } .store .store-categories:hover .btn.btn-default { font-size: unset; } .store .store-categories:hover { width: 206px; } .store .store-categories { text-align: left; margin-bottom: 15px; display: block; position: absolute; left: 840px; top: 0px; width: 87px; background: #1c2030; padding: 20px; border-radius: 30px; transition:width .2s ease-in-out; } .store .store-categories .btn.btn-default:before { float: left; display: flex; width: 24px; font-family: FontAwesome; font-size: 1.5rem; text-rendering: auto; -webkit-font-smoothing: antialiased; margin-right: 8px; margin-left: 3px; text-align: center; } .store .store-categories .btn:nth-child(1):before { content: "\f0c9"; } .store .store-categories .btn:nth-child(2):before { content: "\f219"; } .store .store-categories .btn:nth-child(3):before { content: "\f0fb"; } .store .store-categories .btn:nth-child(4):before { content: "\f1bb"; } .store .store-categories .btn:nth-child(5):before { content: "\f135"; } .store .store-categories .btn:nth-child(6):before { content: "\f132"; } .store .store-categories .btn:nth-child(7):before { content: "\f015"; } .store .store-categories .btn:nth-child(8):before { content: "\f0e3"; } .store .store-categories .btn:nth-child(9):before { content: "\f0fa"; } .store .store-categories .btn:nth-child(10):before { content: "\f0f5"; } .store .store-categories .btn:nth-child(11):before { content: "\f1b2"; } .store .store-categories .btn:nth-child(12):before { content: "\f0e7"; } .store .store-categories .btn:nth-child(13):before { content: "\f085"; } .store .store-categories .btn:nth-child(14):before { content: "\f06b"; } .store .store-categories .btn:nth-child(15):before { content: "\f06c"; } .store .store-categories .btn:nth-child(16):before { content: "\f0d1"; } .store .store-categories .btn:nth-child(17):before { content: "\f1b3"; } } @media (min-width: 1200px) { .serverheader span { background-image: linear-gradient(to right, #0474fa 0%, #14bac5 100%); background-size: 400% 400%; animation: gradient 5s ease infinite; padding: 2px 12px 2px 12px; border-radius: 20px; } .navbar-brand { margin-top: 5px; } .navbar { margin: 0px 0 20px auto; border: none; border-radius: 0 0 2px 2px; position: absolute; padding: 0; border-radius: 0px 0px 15px 15px; top: 5px; width: 1140px; background: none; } .header-image { margin-top: 80px; } .navbar .nav>li>a { margin: 10px; } } @media (max-width: 1200px) { .navbar { margin-top: 10px; } } .navbar { background: none; } .container .row { margin-top: 10px; } .navbar .nav>li>a[href="/files/stores/backend/steam.php?login"] { color: #fff; border-radius: 10px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); content: "\f04b"; background: linear-gradient(90deg, #540dde, #2372d5, #21ad87); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); } .navbar .nav>li>a[href="/files/stores/backend/steam.php?login"]:hover { color: #fff; border-radius: 10px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); content: "\f04b"; background: linear-gradient(90deg, #540dde, #2372d5, #21ad87); background-size: 400% 400%; animation: gradient 5s ease infinite; transform: translate3d(0, 0, 0); transition: transform 200ms cubic-bezier(0.68, -0.55, 0.27, 1.55); transform: scale(1.1); } .navbar .nav>li>a { background: #1c2030; border-radius: 10px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 95%); } .navbar-toggle { margin-top: 12px; } .ico_login { height: 20px; width: 20px; float: left; margin-right: 5px; } .dropdown-menu>li>a { border-radius: 30px; } .serverheader span:before { font-family: FontAwesome; content: '\f017'; font-weight: 100; margin-right: 5px; }
.promo-widget {
    --primary-color: #2962ff;
    --secondary-color: #304ffe;
    --accent-color: #4FC3F7;
    --bg-gradient: linear-gradient(135deg, 
        rgba(26, 35, 126, 0.85), 
        rgba(13, 71, 161, 0.85), 
        rgba(41, 98, 255, 0.85));
    
    background: var(--bg-gradient);
    border-radius: 24px;
    padding: 25px;
    max-width: 400px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
                0 0 100px rgba(41, 98, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transform-style: preserve-3d;
    animation: widgetAppear 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes widgetAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, 
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px);
    background-size: 15px 15px;
    animation: particleFloat 20s linear infinite;
}

@keyframes particleFloat {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

.glow-effect {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 70%
    );
    animation: rotateGlow 10s linear infinite;
    pointer-events: none;
}

@keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.gift-wrapper {
    perspective: 1000px;
    margin-bottom: 25px;
}

.gift-container {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    animation: giftFloat 3s ease-in-out infinite;
}

@keyframes giftFloat {
    0%, 100% {
        transform: translateY(0) rotateY(0);
    }
    50% {
        transform: translateY(-15px) rotateY(10deg);
    }
}

.gift-icon {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.gift-top, .gift-bottom {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.gift-top {
    height: 40%;
    top: 0;
    transform: translateZ(5px);
}

.gift-bottom {
    height: 60%;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-color), #82e5ff);
}

.ribbon-vertical, .ribbon-horizontal {
    position: absolute;
    background: #ff4081;
    box-shadow: 0 0 10px rgba(255, 64, 129, 0.5);
}

.ribbon-vertical {
    width: 20%;
    height: 100%;
    left: 40%;
    transform: translateZ(6px);
}

.ribbon-horizontal {
    width: 100%;
    height: 20%;
    top: 40%;
    transform: translateZ(6px);
}

.promo-content {
    transform-style: preserve-3d;
}

.promo-header {
    text-align: center;
    margin-bottom: 20px;
}

.promo-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

.promo-subtitle {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.promo-code-container {
    margin: 20px 0 5px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.promo-code {
    background: rgba(255, 255, 255, 0.2);
    padding: 15px 25px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.code-text {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(to right, #fff, #e3f2fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.copy-button {
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.copy-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

.copy-icon {
    fill: white;
}

@media (max-width: 480px) {
    .promo-widget {
        padding: 20px;
        margin: 10px;
        border-radius: 20px;
    }
    
    .promo-title {
        font-size: 22px;
    }
    
    .promo-subtitle {
        font-size: 15px;
    }
    
    .code-text {
        font-size: 28px;
    }
    
    .gift-container {
        width: 100px;
        height: 100px;
    }
}

.promo-code:hover .code-text {
    animation: neonGlow 1.5s ease-in-out infinite alternate;
}

@keyframes neonGlow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px var(--accent-color),
                     0 0 40px var(--accent-color);
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px var(--accent-color),
                     0 0 20px var(--accent-color);
    }
}
.socials__title {
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    color: #737572;
    margin-bottom: 22px
}

.socials__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding: 20px 16px;
    position: relative;
    overflow: hidden
}

.socials__item+.socials__item {
    margin-top: 16px
}

.socials__item_vk {
    background: linear-gradient(180deg, rgba(50, 119, 170, 0.6) 0%, #477bff 100%)
}

.socials__item_vk .socials__item-bg {
    background: url("https://i.imgur.com/eIEvMCw.png")
}

.socials__item_ds {
    background: linear-gradient(180deg, rgba(151, 71, 255, 0.6) 0%, #9747ff 100%)
}

.socials__item_ds .socials__item-bg {
    background-image: url("https://i.imgur.com/bcMvuX3.png")
}

.socials__item_tg {
    background: linear-gradient(180deg, rgba(50, 119, 170, 0.6) 0%, #477bff 100%)
}

.socials__item_tg .socials__item-bg {
    background: url("https://i.imgur.com/caabuFI.png")
}

.socials__item-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.socials__item-left {
    position: relative;
    z-index: 2
}

.socials__item-title {
    text-transform: uppercase;
    font-size: 10px;
    color: rgba(224, 224, 224, 0.68);
    margin-bottom: 8px;
    font-weight: 300
}

.socials__item-name {
    font-size: 15px;
    color: #f2f2f2;
    font-weight: 500
}

.socials__item-right {
    position: relative;
    z-index: 2
}

.socials__item-link {
    padding: 13px 9.5px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 500;
    color: #e0e0e0;
    font-size: 10px;
    transition: all 0.3s ease-out
}

.socials__item-link:hover {
    background: #ffffff;
    color: #121218
}