/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

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

* {
  box-sizing: border-box;
}

:root {
  --button-bg-color: rgba(247, 254, 174, 0.87);
  --button-color: rgb(21 61 255);
  --button-border: rgb(216 237 166 / 20%);
  --button-disable: rgba(216, 237, 166, 0.452);
  --body-bg: #fff;
  --popup-bg: #dfffe5;
  --popup-border: #ababab;
  --input-border: rgba(75, 131, 133, 1);
  --base-border: rgba(143, 253, 214, 0.2);
  --base-hover-border: rgba(120, 247, 202, 0.74);
  --nav-background-color: #333;
}

@font-face {
  font-family: "Neucha";
  src: url(/fonts/Neucha.ttf);
  font-display: swap;
}

@font-face {
  font-family: "IstokWeb-Bold";
  src: url(/fonts/IstokWeb-Bold.ttf);
  font-display: swap;
}

body {
  scrollbar-gutter: stable;
  height: 980px;
  min-width: 1024px;
  max-width: 1900px;
  margin: 0;
  padding: 0;
  /*font-family: "Roboto";*/
  font-family: "Neucha";
}

header {
  height: 5vh;
  /* background-color: var(--nav-background-color); */
}

header .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__toolbar {
  display: flex;
  align-items: center;
}

.header__logo {
  color: #fff;
}

.toolbar_item {
  margin-left: 10px;
  margin-right: 10px;
  list-style-type: none;
}

/* .navigation {
  height: 5vh;
} */

.disabled {
  color: rgba(0, 0, 0, 0.26) !important;
  box-shadow: none !important;
  background-color: rgba(0, 0, 0, 0.12) !important;
  pointer-events: none !important;
  cursor: default !important;
  user-select: none !important;
  appearance: none !important;
  text-decoration: none !important;
}

.header-main {
  display: flex;
  justify-content: space-between;
  text-align: justify;
  text-align-last: justify;
  /*background: linear-gradient(0.5turn, #5ac4f1, #77a2b4);*/
}



/******************************SIGN COMPONENT START**********************************/

.dialog {
  width: 28%;
  min-width: 450px;
  background-color: var(--popup-border);
}

.sign-in,
.registration {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: start;
  padding: 5px;
  /* background-color: var(--popup-bg); 
  width: 470px;*/
}

.sign-in .colum,
.registration .colum {
  width: 160px;
  flex: 1 1 auto;
  height: 40px;
  order: 10;
  margin-bottom: 5px;
  margin-right: 5px;
  display: flex;
  box-shadow: -5px 0 5px -5px rgba(51, 51, 51, 0.25),
    0 0 5px 0 rgba(51, 51, 51, 0.25);
  border: 1px solid var(--popup-border);
  background-color: var(--body-bg);
  align-items: center;
  justify-content: center;
}

.sign-in .colum p,
.registration .colum p,
.sign-out .colum p {
  margin: 0;
}

.sign-in .title,
.registration .title {
  width: 100%;
  flex: 1 1 auto;
  height: 40px;
  order: 8;
  margin-bottom: 5px;
  margin-right: 5px;
  display: flex;
  box-shadow: -5px 0 5px -5px rgba(51, 51, 51, 0.25),
    0 0 5px 0 rgba(51, 51, 51, 0.25);
  border: 1px solid var(--popup-border);
  background-color: rgb(255, 255, 255);
  align-items: center;
  justify-content: center;
}

.sign-in .footer,
.registration .footer {
  width: 100%;
  flex: 1 1 auto;
  height: 40px;
  order: 12;
  margin-bottom: 5px;
  margin-right: 5px;
  display: flex;
  box-shadow: -5px 0 5px -5px rgba(51, 51, 51, 0.25),
    0 0 5px 0 rgba(51, 51, 51, 0.25);
  border: 1px solid var(--popup-border);
  background-color: var(--body-bg);
  align-items: center;
  justify-content: center;
}

.sign-in__header .registration__header {
  width: 100%;
  flex: 1 1 auto;
  height: 40px;
  order: 12;
  margin-bottom: 5px;
  margin-right: 5px;
  display: flex;
  box-shadow: -5px 0 5px -5px rgba(51, 51, 51, 0.25),
    0 0 5px 0 rgba(51, 51, 51, 0.25);
  border: 1px solid var(--popup-border);
  background-color: var(--body-bg);
  align-items: center;
  justify-content: center;
}

.sign-in .title p,
.registration .title p {
  margin: 0;
}


/******************************SIGN COMPONENT END**********************************/


.vertical-flex {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* border: 4px solid rgba(151, 225, 150, 0.2); */
  box-shadow: 0 0 5px 2px rgb(245 245 245);
  margin: 10px;
  /*flex-direction: row;*/
}

.vertical-flex.row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* border: 4px solid rgba(151, 225, 150, 0.2); */
  box-shadow: 0 0 5px 2px rgb(245 245 245);
  padding: 2px;
  flex-direction: row;
}

.vertical-flex.shop {
  /* flex-flow: row wrap; */
  align-content: center;
  align-items: center;
  margin: 10px;
  background-color: var(--body-bg);
  min-width: 100px;
  max-width: 200px;
}

.shop-item-label {
  padding: 2px;
}

.vertical-flex.no-b {
  border: none;
  box-shadow: none;
}

.vertical-flex.trasform {
  position: absolute;
  transform: translate(10%, 80%);
  min-width: 20vw;
  min-height: 20vh;
  transition: all 1s ease;
}

.vertical-flex .margin-10 {
  margin: 10px;
}

.vertical-flex.center {
  justify-content: center;
}


.horizontal-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  margin: 10px;
  /*flex-direction: column;*/
}

.horizontal-flex-not-visible {
  margin: 5px;
  flex: auto;
  display: flex;
  flex-direction: column;
}

.horizontal-flex.wrap {
  flex-flow: row wrap;
}

.horizontal-flex.jc-space {
  justify-content: space-evenly;
}

.horizontal-flex.center {
  justify-content: center;
}

.horizontal-flex.column {
  flex-direction: column;
}

.horizontal-flex.header {
  margin: 0px;
}


.center-flex {
  display: flex;
  /* or inline-flex */
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 20px;
}

.item-flex {
  /* border: 2px dashed #e0e0e0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start; */
}

.center-flex-container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 500px;
}

.ai-center {
  align-items: center;
}

select.base-combo {
  border: 4px solid rgba(143, 253, 214, 0.2);
  box-shadow: 0 0 5px 2px rgb(245 245 245);
  padding: 2px;
  background: var(--button-bg-color);
  width: 150px;
  margin: 5px;
}

select.base-combo:hover {
  border: 4px solid rgba(21, 247, 168, 0.897);
  box-shadow: 0 0 5px 2px rgb(245 245 245);
  padding: 2px;
  background: var(--button-bg-color);
  width: 150px;
  margin: 5px;
  cursor: pointer;
}

.button .base {
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 2px;
  background: var(--button-bg-color);
  margin: 0 0 0 0;
}

.button:hover.base {
  border: 1px solid rgba(120, 247, 202, 0.74);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 2px;
  background: var(--button-bg-color);
  margin: 0 0 0 0;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.base.disable {
  background: var(--button-disable);
}

input.base {
  border: 1px solid var(--input-border);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: var(--button-bg-color);
  padding: 2px;
}

/*Button Start*/
button.base {
  border: 4px solid rgb(216 237 166 / 20%);
  box-shadow: 0 0 5px 2px rgba(245, 245, 245, 1);
  padding: 2px;
  background: var(--button-bg-color);
  /* margin: 0 0 10px 0; */
  color: rgb(21 61 255);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

button:hover.base {
  border: 4px solid rgba(93, 247, 193, 0.2);
  box-shadow: 0 0 5px 2px rgb(211, 248, 216);
  padding: 2px;
  background: var(--button-bg-color);
  /* margin: 0 0 10px 0; */
  cursor: pointer;
}

.base-disabled {
  border: 4px solid rgba(151, 225, 150, 0.2);
  color: rgba(0, 0, 0, 0.26);
  box-shadow: none;
  background-color: rgba(180, 180, 180, 0.8);
  pointer-events: none;
  cursor: default;
  user-select: none;
  appearance: none;
  text-decoration: none;
}

/*Button end*/

table.base {
  align: "center";
}

label.base {
  border: 4px solid rgba(143, 253, 214, 0.2);
  box-shadow: 0 0 5px 2px rgb(245 245 245);
  padding: 2px;
  text-align: center;
  align-content: center;
  background: var(--button-bg-color);
  margin: 5px;
  min-width: 100px;
  max-width: 300px;
}

.error-message {
  color: rgb(238, 75, 75);
}

.info-message {
  color: rgb(39 127 39);
}


ul.players-online {
  list-style: inside;
}

/*
li.players-online:first-child {
  border: 2px solid rgba(143, 253, 214, 0.2);
  box-shadow: 0 0 5px 2px rgb(245 245 245);
  background: var(--button-bg-color);
}
*/


li.players-online::marker {
  color: rgb(52, 231, 61);
}

li.base {
  padding: 10px;
}

ul {
  padding-inline-start: 20px;
  margin-block-start: 10px;
}

.conteiner-ul {
  display: flex;
  flex-wrap: wrap;
}

.conteiner-ul .item {
  display: flex;
  gap: 2em;
}




h1 {
  margin-block-start: 4px;
  margin-block-end: 4px;
  margin-left: 10px;
  writing-mode: horizontal-tb;
}

h2 {
  margin-block-start: 4px;
  margin-block-end: 4px;
  margin-left: 10px;
  writing-mode: horizontal-tb;
  /*background: rgba(247, 254, 174, 1);
  color: rgb(199, 43, 43, 1);*/
}

h3 {
  margin-block-start: 4px;
  margin-block-end: 4px;
  margin-left: 10px;
  writing-mode: horizontal-tb;
}

label.login-name {
  font-size: 20px;
  text-decoration: underline;
}

label.login-name:hover {
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
}

label.current-balance {
  font-size: 20px;
  text-decoration: underline;
}

label.current-balance:hover {
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
}

.margin-lr-10 {
  margin: 0px 10px 0px 10px;
}

.border-2 {
  border: 2px solid rgba(143, 253, 214, 0.2);
  box-shadow: 0 0 5px 2px rgb(245 245 245);
  background: var(--button-bg-color);
}

.everyday::before {
  content: "\2713";
  color: green;
}

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.p-l-r-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-b-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.m-5 {
  margin: 5px;
}

.m-10 {
  margin: 10px;
}

.w-maxc {
  width: max-content;
}

.w-minc {
  width: min-content;
}



#section {
  background: #f4f4f4;
  border-color: #ccc;
  border-style: dashed;
  border-width: 2px;
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  /* position: relative;*/
}

#tooltip {
  background-color: #fff;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 2px 2px 2px #999;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

table.base {
  border: 1px solid var(--base-border);
}

th.base {}

thead.base {
  border: 1px solid var(--base-border);
}

tbody.base {
  border: 1px solid var(--base-border);
}

table tr.base {
  border: 1px solid var(--base-border);
}

table td.base {
  border: 1px solid var(--base-border);
  background-color: var(--button-bg-color);
}

.displayText {
  /* position: relative; */
  left: 20px;
  width: auto;
  background-color: rgba(252, 239, 65, 0.1);
  color: rgb(5, 197, 172);
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  visibility: hidden;
  border-radius: 25px;
  border: 3px solid var(--base-border);

}

.displayText::before {
  content: "";
  top: -28%;
  left: 45%;
  position: absolute;
}

.show {
  visibility: visible;
}

#contents {
  padding: 5px;
  border: 1px green solid;
}

figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  margin: auto;
  align-items: center;
  background-color: #222;
  width: min-content;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
  font-size: 16px;
}


.base-height-block {
  height: 100dvh;
}

/* img {
  aspect-ratio: 16/9;
} */

.conte {
  content-visibility: auto;
}

.burbatton:focus-visible {
  border: 2px solid #fff;
  outline: none;
}

.anchor {
  anchor-name: --my-anchor;
}

a:hover,
a:focus {
  text-underline-offset: 0.25em;
}

[aria-label="close"] {
  appearance: none;
  float: right;
  border: 1px solid;
  border-radius: 50%;
}

:focus {
  outline: 2px solid #226DAA;
}

.visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 1.1em;
}

.visibility-hidden {
  content-visibility: hidden;
  contain-intrinsic-size: 0 1.1em;
}

.visibility-visible {
  content-visibility: visible;
  contain-intrinsic-size: 0 1.1em;
}


.url-okx {
  background-size: 84px 32px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAABICAQAAADSOpYzAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAHdElNRQfmBwMNKhI4Vg/yAAABMklEQVR42u3aQW6DMBBAUZyT5eSFE/RInS5psOKx8Scq0n9ZNXjA+VE3VpZFkiRJkiShYo0rrYPPWyf3+3VYXZL138nTuudLxLVfVCmHrcXY+uqjteejPF7/XH5G1teXe+ebt1E/Q0IMCTEkxJAQQ0IMCTEkxJAQQ0IMCTEkxJCQ+4XcBq+Orj87n54oPlv3iWc2Xk3A55tzZs8rd+l55OT54PB5ZLrhMjd/2M3keeXufv/a/5QhIYaEGBJiSIghIYaEGBJiSIghIYaEGBJiSEgaMjtG+/B+tw/f8eVqlPq1X7xYlX5wfTXfPj/095Hv1tdfRPLJ/X3kvRkSYkiIISGGhBgSYkiIISGGhBgSYkiIISGGhDwuOOH7a+t4p//qmflticYrf946OS9JkiRJkk75BUgSur6QrNyYAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTA3LTAzVDEzOjQyOjE4KzAwOjAwKpbwNQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0wNy0wM1QxMzo0MjoxOCswMDowMFvLSIkAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-color: #222;
}

.body-page {
  background-color: rgba(0, 0, 0, 1);
  /* height: 80vh; */
}

.border-line-red {
  border-image: radial-gradient(at center, rgba(245, 25, 25, 1), rgba(243, 31, 31, 0.01));
  border-image-slice: 1;
  border-width: 2px;
  border-style: solid;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.border-line-green {
  border-image: radial-gradient(at center, rgb(113, 248, 86), rgba(243, 31, 31, 0.01));
  border-image-slice: 1;
  border-width: 2px;
  border-style: solid;
  border-left: none;
  border-right: none;
  border-bottom: none;
}


.text-white {
  color: var(--body-bg);
  text-align: start;
}

.text-neon {
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;

}

h2.text-white {
  font-size: 1.4em;
}

h3.text-white {
  font-size: 1.2em;
}

.text-fs-2 {
  font-size: 2em;
}

.no-m {
  margin: 0;
}


a.default {
  display: inline-block;
  color: white;
  text-align: center;
}

a.default:hover {
  cursor: pointer;
  color: rgb(240, 229, 229);
  text-align: center;
  text-decoration: none;
}

.field-set-block {
  padding: 10px;
  border: 1px var(--base-hover-border) solid;
}

div.server-title {
  width: auto;
}

/******* COOKIE ********/
#cookie_note {
  display: none;
  position: fixed;
  bottom: 15px;
  left: 50%;
  max-width: 90%;
  transform: translateX(-50%);
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}

#cookie_note p {
  margin: 0;
  font-size: 0.7rem;
  text-align: left;
  color: black;
}

.cookie_accept {
  width: 20%;
}

@media (min-width: 576px) {
  #cookie_note.show {
    display: flex;
  }
}

@media (max-width: 575px) {
  #cookie_note.show {
    display: block;
    text-align: left;
  }
}

/******* COOKIE ********/

/***********************VKONTAKTE*****************/

.VkIdWebSdk__button_reset {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}

.VkIdWebSdk__button {
  background: #0077ff;
  cursor: pointer;
  transition: all .1s ease-out;
}

.VkIdWebSdk__button:hover {
  opacity: 0.8;
}

.VkIdWebSdk__button:active {
  opacity: .7;
  transform: scale(.97);
}

.VkIdWebSdk__button {
  border-radius: 8px;
  width: 100%;
  min-height: 44px;
}

.VkIdWebSdk__button_container {
  display: flex;
  align-items: center;
  padding: 8px 10px;
}

.VkIdWebSdk__button_icon+.VkIdWebSdk__button_text {
  margin-left: -28px;
}

.VkIdWebSdk__button_text {
  display: flex;
  font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
  flex: 1;
  justify-content: center;
  color: #ffffff;
}

/***********************VKONTAKTE*****************/




/***Notifaction start***/

.notification-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  font-size: 2em;
  font-weight: 700;
}

.notification {
  position: relative;
  background: #4CAF50;
  color: white;
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-20px);
  transition: all 0.4s ease;
  pointer-events: auto;
}

.notification.success {
  background: #4CAF50;
  transform: translateY(0);
}

.notification.error {
  background: #f44336;
  transform: translateY(0);
}

.notification.info {
  background: #2196F3;
  transform: translateY(0);
}

.notification .close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.notification-container.show {
  opacity: 1;
}

/***Notifaction end***/



/******Count Shop Item ****/
.quantity-counter {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2px 5px;
  font-family: Arial, sans-serif;
}

.quantity-counter .btn {
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.quantity-counter .btn:hover {
  background-color: #e0e0e0;
}

.quantity-counter .btn:active {
  background-color: #d0d0d0;
}

.quantity-counter .input-quantity {
  width: 60px;
  text-align: center;
  font-size: 16px;
  border: none;
  outline: none;
  background: transparent;
}

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

.quantity-counter .btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/******Count Shop Item ****/

/******** About ******/
.social-icons {
  display: flex;
  justify-content: center;
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0;
}

.social-icons>li {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.social-icons a {
  position: relative;
  background-color: #eee;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color .3s ease-in-out;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .25rem;
}

.social-icons a:hover {
  background-color: #e0e0e0;
}

.social-icons a::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  left: 0.25rem;
  top: .25rem;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}

.social-icons .social-icon-twitch::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' version='1.1' viewBox='0 0 40 40' fill='rgb(92, 22, 197)'%3e%3cg%3e%3cpolygon points='13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8' fill='rgb(145 71 255)'%3e%3c/polygon%3e%3cpolygon points='26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25' fill='rgb(255 255 255)'%3e%3c/polygon%3e%3cg%3e%3cpath d='M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z' fill='rgb(145 71 255)'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.social-icons .social-icon-vk-play::before {
  background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23svg-icon-logo-vk-video-live_clip0_3823_65285)'%3e%3cg clip-path='url(%23svg-icon-logo-vk-video-live_clip1_3823_65285)'%3e%3cpath d='M0 8.7744C0 1.54868 1.54868 0 8.7744 0H15.2256C22.4513 0 24 1.54868 24 8.7744V15.2256C24 22.4513 22.4513 24 15.2256 24H8.7744C1.54868 24 0 22.4513 0 15.2256V8.7744Z' fill='%230077FF'%3e%3c/path%3e%3cpath d='M12.896 24H15.184C22.2738 24 23.9239 22.5231 23.9974 15.7244C23.9991 15.5612 24 15.395 24 15.2256V8.7744C24 8.59176 23.999 8.41275 23.997 8.2373C23.9177 1.47138 22.2605 0 15.184 0H12.896C5.636 0 4.07999 1.54868 4.07999 8.7744V15.2256C4.07999 22.4513 5.636 24 12.896 24Z' fill='%23FF2B42'%3e%3c/path%3e%3cpath d='M16.935 9.92377C18.1483 10.6243 18.755 10.9745 18.9586 11.4318C19.1361 11.8306 19.1361 12.2861 18.9586 12.6849C18.755 13.1422 18.1483 13.4925 16.935 14.193L13.6103 16.1125C12.397 16.813 11.7903 17.1632 11.2925 17.1109C10.8583 17.0653 10.4639 16.8376 10.2073 16.4843C9.91306 16.0794 9.91306 15.3789 9.91306 13.9779L9.91306 10.1388C9.91306 8.73782 9.91306 8.03733 10.2073 7.63238C10.4639 7.27917 10.8583 7.05144 11.2925 7.0058C11.7903 6.95348 12.397 7.30373 13.6103 8.00422L16.935 9.92377Z' fill='white'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='svg-icon-logo-vk-video-live_clip0_3823_65285'%3e%3crect width='111' height='24' fill='white'%3e%3c/rect%3e%3c/clipPath%3e%3cclipPath id='svg-icon-logo-vk-video-live_clip1_3823_65285'%3e%3crect width='24' height='24' fill='white'%3e%3c/rect%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

.social-icons .social-icon-vk::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5 24h1c5.44 0 8.15 0 9.83-1.68C24 20.64 24 17.92 24 12.5v-1.02c0-5.4 0-8.12-1.67-9.8C20.65 0 17.93 0 12.5 0h-1C6.06 0 3.35 0 1.67 1.68 0 3.36 0 6.08 0 11.5v1.02c0 5.4 0 8.12 1.68 9.8C3.36 24 6.08 24 11.5 24Z' fill='%2307F'%3e%3c/path%3e%3cpath d='M12.77 17.29c-5.47 0-8.59-3.75-8.72-9.99h2.74c.09 4.58 2.11 6.52 3.71 6.92V7.3h2.58v3.95c1.58-.17 3.24-1.97 3.8-3.95h2.58a7.62 7.62 0 0 1-3.51 4.98 7.9 7.9 0 0 1 4.11 5.01h-2.84a4.94 4.94 0 0 0-4.14-3.57v3.57h-.31Z' fill='%23fff'%3e%3c/path%3e%3c/svg%3e");
}

.social-icons .social-icon-telegram svg {
  fill: #3390ec;
}

.social-icons .social-icon-telegram::before {
  background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg class='tg-logo' xmlns='http://www.w3.org/2000/svg' fill='rgb(51 144 236)'  width='24' height='24' viewBox='0 0 160 160'%3e%3cpath id='logo' fill-rule='evenodd' d='M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z'%3e%3c/path%3e%3c/svg%3e");
}

.social-icons .social-icon-youtube::before {
  height: 1.5rem;
  left: 0.25rem;
  top: .45rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='36' height='24' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false'%3e%3cg id='svg_1'%3e%3cpath id='svg_2' fill='%23FF0033' d='m17.9848,22c0,0 9.0847,0 11.3381,-0.6c1.2688,-0.34 2.223,-1.32 2.5579,-2.53c0.6192,-2.22 0.6192,-6.89 0.6192,-6.89c0,0 0,-4.64 -0.6192,-6.84c-0.3349,-1.24 -1.2891,-2.2 -2.5579,-2.53c-2.2534,-0.61 -11.3381,-0.61 -11.3381,-0.61c0,0 -9.06443,0 -11.30769,0.61c-1.24851,0.33 -2.22296,1.29 -2.57823,2.53c-0.59888,2.2 -0.59888,6.84 -0.59888,6.84c0,0 0,4.67 0.59888,6.89c0.35527,1.21 1.32972,2.19 2.57823,2.53c2.24326,0.6 11.30769,0.6 11.30769,0.6z'/%3e%3cpath id='svg_3' fill='white' d='m22.5,12l-7.5,-4.25l0,8.5l7.5,-4.25z'/%3e%3c/g%3e%3c/svg%3e");
}

/******** About ******/




/**** balance ****/
#balanceUser {
  font-size: 1.2em;
  font-weight: bold;
  transition: all 0.8s ease-in-out;
  display: inline-block;
  overflow: hidden;
}


.animate-balance {
  animation: jump 1.2s ease-out;
}

@keyframes jump {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/**** balance ****/