:root {
  --block: #0b194a;
  --fon: linear-gradient(90deg, rgba(3, 13, 67, 1) 0%, rgba(10, 8, 40, 1) 100%);
  --tg-safe-area-inset-bottom: 15px;
  --tg-safe-area-inset-top: 10px;
  --tg-content-safe-area-inset-top: 0px;
}

* {
  box-sizing: border-box;
  text-decoration: none;
}
@font-face {
  font-family: "SF UI Display";
  font-display: swap;
  src: url("/fonts/SFUIDisplay-Regular.eot");
  src: local("SF UI Display Regular"), local("SFUIDisplay-Regular"),
    url("/fonts/SFUIDisplay-Regular.eot?#iefix") format("embedded-opentype"),
    url("/fonts/SFUIDisplay-Regular.woff2") format("woff2"),
    url("/fonts/SFUIDisplay-Regular.woff") format("woff"),
    url("/fonts/SFUIDisplay-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SF UI Display";
  font-display: swap;
  src: url("/fonts/SFUIDisplay-Semibold.eot");
  src: local("SF UI Display Semibold"), local("SFUIDisplay-Semibold"),
    url("/fonts/SFUIDisplay-Semibold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/SFUIDisplay-Semibold.woff2") format("woff2"),
    url("/fonts/SFUIDisplay-Semibold.woff") format("woff"),
    url("/fonts/SFUIDisplay-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "SF UI Display";
  font-display: swap;
  src: url("/fonts/SFUIDisplay-Bold.eot");
  src: local("SF UI Display Bold"), local("SFUIDisplay-Bold"),
    url("/fonts/SFUIDisplay-Bold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/SFUIDisplay-Bold.woff2") format("woff2"),
    url("/fonts/SFUIDisplay-Bold.woff") format("woff"),
    url("/fonts/SFUIDisplay-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "SF UI Display";
  font-display: swap;
  src: url("/fonts/SFUIDisplay-Medium.eot");
  src: local("SF UI Display Medium"), local("SFUIDisplay-Medium"),
    url("/fonts/SFUIDisplay-Medium.eot?#iefix") format("embedded-opentype"),
    url("/fonts/SFUIDisplay-Medium.woff2") format("woff2"),
    url("/fonts/SFUIDisplay-Medium.woff") format("woff"),
    url("/fonts/SFUIDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
body {
  position: relative;
  font-style: normal;
  font-family: "SF UI Display", sans-serif;
  background-color: var(--fon);
  color: #e0e0e0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
  background: #030d43;
  background: linear-gradient(
    90deg,
    rgba(3, 13, 67, 1) 0%,
    rgba(10, 8, 40, 1) 100%
  );
  max-width: 800px;
  width: 100%;
}
body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 0.2;
  background-size: 250px;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: url(/app/img/patern.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 250px;
  background-color: #2d3134;
}
#app {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
  height: 100%;
  position: fixed;
  padding-top: calc(
    44px + var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top) +
      15px
  );
  padding-bottom: calc(51px + var(--tg-safe-area-inset-bottom) + 15px);
  z-index: 1;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-transition: background-color 200ms linear, width 150ms linear;
  transition: background-color 200ms linear, width 150ms linear;
  background: #0b194a;
  border-radius: 2px;
  width: 10px;
  height: 25px;
}

::-webkit-scrollbar-track {
  border-width: 0;
}

::-webkit-scrollbar-thumb:hover {
  width: 10px;
  height: 25px;
  border-radius: 2px;
  background: #030d43;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  z-index: 1000;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal.show {
  display: flex;
  opacity: 1;
}

.modal.show .overlay {
  display: block;
}

.article {
  font-size: 18px;
}

.head_section {
  display: flex;
  align-items: center;
  padding: 0px 12px;
  justify-content: space-between;
  width: 100%;
  background: var(--block);
  border-radius: 12px;
  margin-bottom: 12px;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.7);
  transition: transform 0.3s ease-in-out;
  z-index: 1001;
}

.modal.show .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  background: none;
  border: none;
  color: #333;
}

.modal-close:hover,
.modal-close:focus {
  color: #000;
}

.modal-content h2 {
  margin: 0 0 15px;
  font-size: 20px;
}

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

.modal-content ul li {
  margin-bottom: 10px;
  font-size: 16px;
  font-size: 13px;
  list-style: none;
  margin-top: 8px;
  color: #71717a;
}

body.modal-open {
  overflow: hidden;
}

header {
  background: var(--block);
  color: #ffffff;
  padding: 10px 20px;
  padding-top: calc(
    var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top)
  );
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(
    44px + var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top)
  );
  position: fixed;
  top: 0;
  z-index: 1000;
  background-image: url(/app/img/noise.png);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

main {
  padding: 0 16px;
}

.button,
button {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 9px 20px;
  border-width: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 18px;
  background: #0d84fb;
  border-radius: 8px;
  -webkit-transition: all 0.2s 0s ease;
  -moz-transition: all 0.2s 0s ease;
  -o-transition: all 0.2s 0s ease;
  transition: all 0.2s 0s ease;
  width: 100%;
  height: 48px;
}
.button:disabled,
button:disabled {
  background-color: #424e5a;
  color: #b5b1b1;
}
.button.big,
button.big {
  padding: 15px 30px;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  max-height: 48px;
  margin-top: 38px;
  margin-bottom: 8px;
}
.logo {
  font-size: 24px;
  font-weight: bold;
  background: url(/app/img/logo.svg);
  background-size: contain;
  width: 150px;
  height: 32px;
  background-position: center left;
  background-repeat: no-repeat;
}
.logo span {
  color: #568cff;
}
.balance {
  font-size: 16px;
  font-weight: 550;
  padding: 6px 10px;
  background: var(--fon);
  border-radius: 10px;
  display: flex;
  align-items: center;
}
.balance_nmbr {
  color: rgb(187, 187, 32);
  font-size: 14px;
}
.icon_balance {
  display: block;
  width: 20px;
  height: 20px;
  background-color: rgb(187, 187, 32);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url(/app/img/icon/money.svg);
  margin-right: 5px;
}
.container {
  /* padding: 20px; */
  width: 100%;
  margin: auto;
  margin-bottom: 74px;
  flex: 1;
  text-align: center;
}
h1 {
  margin-top: 0;
  font-size: 24px;
  margin-bottom: 15px;
}
.order-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.order-list li {
  font-size: 18px;
  margin-bottom: 10px;
}
.create-order,
.my-orders {
  background-color: #2e3b4e;
  color: #ffffff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
}
footer {
  background: var(--block);
  position: fixed;
  bottom: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  z-index: 9;
  height: calc(51px + var(--tg-safe-area-inset-bottom));
  background-image: url(/app/img/noise.png);
  padding-bottom: var(--tg-safe-area-inset-bottom);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
footer[data-grid="5"] {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.info .title {
  border-bottom: 1px solid #3e3e3e;
  margin-bottom: 8px;
  padding-bottom: 5px;
}

.views_quantity {
  font-size: 14px;
}

.info ul li {
  margin-bottom: 2px;
  display: flex;
  flex-wrap: wrap;
}

.info ul {
  font-size: 13px;
  list-style: none;
  margin-top: 8px;
  color: #71717a;
  margin-left: -38px;
}

footer .item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6px;
}

footer .item i {
  background-color: #8e8e8e;
  width: 24px;
  height: 24px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
}

footer span {
  text-align: center;
  width: 100%;
  font-size: 10px;
  bottom: 0;
  color: #9c9c9e;
  position: absolute;
}

.stat_box {
  list-style: none;
  border-radius: 8px;
  background: var(--block);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  color: #71717a;
  overflow-x: auto;
  width: 100%;
  margin-top: 18px;
}

.add_task {
  appearance: none;
  padding: 6px 10px;
  border-width: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 18px;
  background: #0d84fb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info_icon_block {
  display: flex;
  height: 6px;
  margin-bottom: 18px;
  align-items: center;
  padding-bottom: 12px;
  justify-content: flex-start;
}

.text-secondary {
  font-size: 13px;
  list-style: none;
  color: #71717a;
  margin-left: 6px;
}

.input_block_pop > .name {
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input_block_pop {
  position: relative;
}

.input_icon_block .icon.views {
  -webkit-mask-image: url(/app/svg/icons/view.svg);
}

.input_icon_block .icon.link {
  -webkit-mask-image: url(/app/svg/icons/link.svg);
}

.custom_number {
  display: flex;
  align-items: center;
  height: 48px;
}

.price {
  margin-left: 2px;
  color: rgb(187, 187, 32);
  font-size: 13px;
  font-weight: bold;
  color: #1e90ff;
}

.total_price {
  line-height: 12px;
  font-size: 14px;
  color: #71717a;
}

.down_block {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.upper_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}

.custom_number .number_btn {
  background: #222222;
  border: 1px solid #424242;
  box-sizing: border-box;
  border-radius: 7px 0px 0px 7px;
  width: 50px;
  height: 100%;
  cursor: pointer;
  transition: 300ms;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.custom_number .number_btn.plus {
  left: auto;
  right: 0;
  border-radius: 0px 7px 7px 0px;
  border-left: 0;
}
.custom_number .number_btn.minus {
  border-right: 0;
}
.custom_number input {
  text-align: center;
  border-radius: 0;
}
.custom_number .number_btn::after {
  content: "";
  width: 15px;
  height: 2px;
  background: #383838;
}
.custom_number .number_btn.plus::before {
  content: "";
  width: 2px;
  height: 15px;
  background: #383838;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
}
.custom_number .number_btn:hover {
  background: #1e1e1e;
}
.custom_number .number_btn:hover::after,
.custom_number .number_btn:hover::before {
  background: #4c4c4c;
}
.custom_number input[type="number"] {
  -moz-appearance: textfield;
}
.custom_number input::-webkit-outer-spin-button,
.custom_number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom_number_mini input[type="number"] {
  -moz-appearance: textfield;
}
.custom_number_mini input::-webkit-outer-spin-button,
.custom_number_mini input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.custom_number_mini input {
  border-radius: 8px 0 0 8px;
}
.custom_number_mini .btn_number_block {
  height: 48px;
  min-width: 48px;
  border-radius: 0px 8px 8px 0px;
  border: 1px solid #424242;
  overflow: hidden;
  border-left: 0;
  right: -5px;
  position: absolute;
  bottom: 0px;
}
.custom_number_mini .number_btn {
  /* width: 100%; */
  height: 50%;
  background: var(--fon);
  cursor: pointer;
  transition: 300ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom_number_mini {
  align-items: center;
}

.custom_number_mini .number_btn::after {
  content: "";
  -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cG9seWdvbiBwb2ludHM9IjM5Ni42LDE2MCA0MTYsMTgwLjcgMjU2LDM1MiA5NiwxODAuNyAxMTUuMywxNjAgMjU2LDMxMC41ICIvPjwvc3ZnPg==);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
  background-color: #646464;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all 0.2s 0s ease;
}
.custom_number_mini .number_btn.plus::after {
  transform: rotate(180deg);
}

.input_icon_block .input {
  padding-left: 43px;
}
.input_icon_block .icon {
  background-color: #fdfdfd;
  width: 18px;
  height: 18px;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  position: absolute;
  top: 68%;
  transform: translateY(-50%);
  left: 15px;
}

.custom_number_mini .number_btn {
  height: 50%;
  background: #152534;
  cursor: pointer;
  transition: 300ms;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini_text {
  font-weight: 400;
  color: #777;
  margin-left: 8px;
}

.main_text {
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #fff;
  margin-bottom: 8px;
}

.views_text {
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #fff;
}

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

.type_wrapping .item {
  background: var(--block);
  margin-bottom: 10px;
  position: relative;
  border-radius: 8px;
  padding: 6px 16px;
  display: grid;
  align-items: center;
  grid-template-columns: 40px 1fr 90px;
  transition: 300ms;
  cursor: pointer;
  grid-gap: 4px 0;
  color: #d4d4d4;
}

.type_wrapping {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
}

.type_wrapping .item .icon {
  background-color: #d4d4d4;
  width: 40px;
  height: 40px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
  transition: 300ms;
}

.back-btn {
  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%2216%22%20viewBox%3D%220%200%209%2016%22%20width%3D%229%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m8%2015.9c-.2%200-.4-.1-.6-.3l-7-7c-.3-.3-.3-.9%200-1.2l7-7c.3-.3.9-.3%201.2%200s.3.9%200%201.2l-6.4%206.4%206.4%206.4c.3.3.3.9%200%201.2-.2.2-.4.3-.6.3z%22%20fill%3D%22%23828a99%22%20opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E)
    15px 16px no-repeat;
  background-position: left center;
  padding: 10px;
  padding-left: 0;
  width: 31px;
  display: inline-block;
  transition: 300ms;
}

.tech_info {
  font-size: 13px;
  list-style: none;
  color: #71717a;
  text-decoration: none;
}

.i_addtask {
  -webkit-mask-image: url(/app/img/icon/add_task.svg);
}

.i_task {
  -webkit-mask-image: url(/app/img/icon/task_list.svg);
}

.i_balance {
  -webkit-mask-image: url(/app/img/icon/balance.svg);
}
.i_bonus {
  -webkit-mask-image: url(/app/img/icon/gift.svg);
}

footer .item i.i_partner {
  background: url(/app/img/icon/i_partner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.i_support {
  -webkit-mask-image: url(/app/img/icon/support.svg);
}
.i_roulette {
  -webkit-mask-image: url(/app/img/icon/roulette.svg);
}

.i_info,
.i_question {
  background-color: #71717a;
  width: 12px;
  height: 12px;
  -webkit-mask-size: contain;
  display: block;
  margin-left: 4px;
}

.tech_info_block {
  display: flex;
  justify-content: center;
}

.status_span {
  font-size: 13px;
  border-radius: 6px;
  color: #0f0;
  font-weight: 400;
}

.upper_status_block {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 2px;
}

.status_info_block {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px 0;
}

.quantity_done {
  font-size: 10px;
  color: white;
}

.tech_info_block:hover {
  cursor: pointer;
}

.info {
  border-radius: 8px;
  overflow: hidden;
}

#info_block {
  padding: 20px;
  margin-top: 22px;
  margin-bottom: 62px;
  background: var(--block);
}

.warning_block {
  display: flex;
  flex-direction: column;
}

.warning_block span {
  margin-top: 8px;
  font-size: 13px;
  list-style: none;
  margin-top: 8px;
  color: #71717a;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
  unicode-bidi: isolate;
}

.input_block_pop {
  margin-bottom: 20px;
}

.input_block_pop .name {
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  margin-bottom: 8px;
}

.type_wrapping {
}

.type_wrapping .item {
  background: #1c2733;
  border: 1px solid transparent;
  padding: 12px 16px;
  border-radius: 8px;
  display: grid;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  grid-template-columns: max-content 1fr max-content;
  grid-gap: 12px;
}

.type_wrapping .item.active {
  border-color: #0d84fb;
  background: #0d84fb20;
}

.type_wrapping .icon {
  background-color: #d4d4d4;
  width: 24px;
  height: 24px;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
}

.type_wrapping .name {
  flex: 1;
  font-weight: 500;
  font-size: 15px;
}

.tech_info {
  font-size: 12px;
  color: #71717a;
}

.button.big {
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  background-color: #0d84fb;
  border-radius: 8px;
  color: white;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s ease;
  margin-top: 20px;
}

.button.big:hover {
  background-color: #0b6edb;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.modal.show {
  opacity: 1;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.7);
  transition: transform 0.3s ease-in-out;
}
.modal.show .modal-content {
  transform: scale(1);
  background-color: var(--block);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  background: none;
  border: none;
}

.link {
  font-size: 12px;
  color: #71717a;
  margin-top: 4px;
  display: block;
}

.user_info_block {
  display: flex;
}

.order_block {
  width: 100%;
  display: flex;
  background: var(--block);
  padding: 14px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  flex-direction: column;
}

.stat_box > li {
  margin-right: 2px;
}

.acc_text {
  display: flex;
  margin-bottom: 6px;
  align-items: center;
  display: flex;
  align-items: center;
}

.acc_info {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.user_photo_block {
  margin-right: 12px;
}

.type {
  padding: 7px;
  background: #172a3c;
  border-radius: 6px;
  margin-right: 6px;
  font-size: 13px;
}

.user_photo {
  width: 38px;
  border-radius: 6px;
  height: 38px;
}

.user_info_block {
  display: flex;
}

.notification {
  display: none;
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  color: #fff;
  margin-top: 10px;
}

.notification.show {
  display: block;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.notification.hide {
  display: block;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

.notification.info {
  background-color: #1976d2;
}
.notification.success {
  background-color: #2e7d32;
}
.notification.error {
  background-color: #d32f2f;
}
.notification.warning {
  background-color: #ff9800;
}
.notification_block {
  width: 100%;
  max-width: 350px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 65px;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  max-height: calc(100vh - 65px);
}

#message {
  margin-bottom: 15px;
  background: #fc6564;
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  display: none;
}

#message.show {
  display: flex;
}

.type_block {
  font-size: 12px;
  color: #1e90ff;
}

.progress_container {
  width: 100%;
  background-color: #2e2e2e;
  border-radius: 6px;
  overflow: hidden;
  height: 14px;
  display: flex;
  align-items: center;
}

.progress_bar {
  width: 100%;
  height: 100%;
  background-color: #1e1e1e;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: baseline;
}

.progress_text {
  position: absolute;
  width: 100%;
  font-size: 11px;
  color: #fff;
  text-align: center;
  line-height: 16px;
  top: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 8px;
}

.catalog_list {
}
.catalog_list .item {
  background-color: var(--block);
  margin-bottom: 8px;
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  grid-gap: 12px;
  background-image: url(/app/img/noise.png);
}
.catalog_list .item .icon {
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.catalog_list .item .title {
  font-size: 18px;
}
.catalog_list .item .chevron {
  -webkit-mask-image: url(/app/img/icon/chevron.svg);
  background-color: #34424f;
  width: 20px;
  height: 20px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.order_list .item[data-catalog_id="1"] .soc,
.catalog_list .item .icon[data-icon="logo_vk"] {
  background-image: url(/app/img/icon/vk_logo.svg);
}
.order_list .item[data-catalog_id="2"] .soc,
.catalog_list .item .icon[data-icon="logo_inst"] {
  background-image: url(/app/img/icon/instagram_logo.svg);
}
.order_list .item[data-catalog_id="3"] .soc,
.catalog_list .item .icon[data-icon="logo_tg"] {
  background-image: url(/app/img/icon/telegram_logo.svg);
}
.order_list .item[data-catalog_id="4"] .soc,
.catalog_list .item .icon[data-icon="logo_yt"] {
  background-image: url(/app/img/icon/youtube_logo.svg);
}
.order_list .item[data-catalog_id="5"] .soc,
.catalog_list .item .icon[data-icon="logo_tiktok"] {
  background-image: url(/app/img/icon/tiktok_logo.svg);
}
.order_list .item[data-catalog_id="6"] .soc,
.catalog_list .item .icon[data-icon="logo_rutube"] {
  background-image: url(/app/img/icon/rutube_logo.svg);
}
.order_list .item[data-catalog_id="7"] .soc,
.catalog_list .item .icon[data-icon="logo_twitch"] {
  background-image: url(/app/img/icon/twitch_logo.svg);
}
.order_list .item[data-catalog_id="8"] .soc,
.catalog_list .item .icon[data-icon="logo_dzen"] {
  background-image: url(/app/img/icon/dzen_logo.svg);
}
.order_list .item[data-catalog_id="9"] .soc,
.catalog_list .item .icon[data-icon="logo_spotify"] {
  background-image: url(/app/img/icon/spotify_logo.svg);
}
.order_list .item[data-catalog_id="10"] .soc,
.catalog_list .item .icon[data-icon="logo_shazam"] {
  background-image: url(/app/img/icon/shazam_logo.svg);
  background-size: 38px;
}
.order_list .item[data-catalog_id="11"] .soc,
.catalog_list .item .icon[data-icon="logo_applemusic"] {
  background-image: url(/app/img/icon/applemusic_logo.svg);
}

.categories_list {
}
.categories_list .item {
  background: var(--block);
  margin-bottom: 8px;
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 28px 1fr 20px;
  align-items: center;
  grid-gap: 12px;
  background-image: url(/app/img/noise.png);
}
.categories_list .item .icon {
  width: 28px;
  height: 28px;
  background-color: #a7c5e3;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.categories_list .item .title {
  font-size: 18px;
}
.categories_list .item .chevron {
  -webkit-mask-image: url(/app/img/icon/chevron.svg);
  background-color: #34424f;
  width: 20px;
  height: 20px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.categories_list .item .icon[data-icon="i_vk_like"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_like.svg);
}
.categories_list .item .icon[data-icon="i_vk_subscribers"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_subscribers.svg);
}

.categories_list .item .icon[data-icon="i_vk_views"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_views.svg);
}

.categories_list .item .icon[data-icon="i_vk_audience"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_audience.svg);
}

.categories_list .item .icon[data-icon="i_vk_auditions"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_auditions.svg);
}

.categories_list .item .icon[data-icon="i_vk_visits"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_visits.svg);
}

.categories_list .item .icon[data-icon="i_vk_repost"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_repost.svg);
}

.categories_list .item .icon[data-icon="i_vk_vote"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_vote.svg);
}

.categories_list .item .icon[data-icon="i_vk_comments"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_comments.svg);
}

.categories_list .item .icon[data-icon="i_vk_stat"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_stat.svg);
}

.categories_list .item .icon[data-icon="i_vk_stories"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_stories.svg);
}

.categories_list .item .icon[data-icon="i_vk_auto"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_auto.svg);
}
.categories_list .item .icon[data-icon="i_vk_referal"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_referal.svg);
}
.categories_list .item .icon[data-icon="i_vk_premium"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_premium.svg);
}
.categories_list .item .icon[data-icon="i_vk_reads"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_reads.svg);
}
.categories_list .item .icon[data-icon="i_vk_podcasts"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_podcasts.svg);
}

.categories_list .item .icon[data-icon="i_vk_save"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_save.svg);
}

.categories_list .item .icon[data-icon="i_vk_other"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_other.svg);
}

.categories_list .item .icon[data-icon="i_vk_favorit"] {
  -webkit-mask-image: url(/app/img/icon/i_vk_favorit.svg);
}
@keyframes move-diagonal {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 80px 0;
  }
}

@keyframes fill {
  to {
    width: 100%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 600px) {
  .orders_block {
    padding: 10px;
  }

  .order_item {
    font-size: 12px;
  }

  .orders_block h2 {
    font-size: 18px;
  }

  .order_item .status {
    font-size: 10px;
    padding: 1px 3px;
    min-width: 50px;
  }
}
@media (max-width: 600px) {
  .logo {
    font-size: 20px;
  }
  .balance {
    /* font-size: 16px; */
  }
  .container {
    max-width: 100%;
  }
  h1 {
    font-size: 20px;
  }
  .order-list li {
    font-size: 16px;
  }
  .create-order,
  .my-orders {
    font-size: 16px;
    padding: 10px 20px;
  }
  .footer-btn {
    font-size: 12px;
    padding: 6px 12px;
  }
}

h2 {
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
}
.title_page {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.title_page .title {
  font-size: 20px;
  font-weight: 600;
}
.title_page .back {
  -webkit-mask-image: url(/app/img/icon/chevron_back.svg);
  background-color: #34424f;
  width: 30px;
  height: 25px;
  -webkit-mask-position: center left;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
}
a.back {
  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%2216%22%20viewBox%3D%220%200%209%2016%22%20width%3D%229%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m8%2015.9c-.2%200-.4-.1-.6-.3l-7-7c-.3-.3-.3-.9%200-1.2l7-7c.3-.3.9-.3%201.2%200s.3.9%200%201.2l-6.4%206.4%206.4%206.4c.3.3.3.9%200%201.2-.2.2-.4.3-.6.3z%22%20fill%3D%22%23828a99%22%20opacity%3D%22.7%22%2F%3E%3C%2Fsvg%3E)
    15px 16px no-repeat;
  background-position: left center;
  padding: 10px;
  padding-left: 0;
  width: 31px;
  display: inline-block;
  height: 100%;
  transition: 300ms;
}

hr {
  height: 2px;
  border: 0;
  background-color: var(--block);
  margin-bottom: 12px;
}

.task_container {
  background-color: var(--block);
  margin: 0 auto 12px auto;
  color: #e0e0e0;
  margin-top: 10px;
  border-radius: 8px;
  height: max-content;
  padding: 15px 20px;
}

.progress_fill {
  height: 100%;
  width: 0%;
  position: relative;
  border-radius: 6px;
  background-color: #3a753c;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M -20,20 L 20,-20 M -10,30 L 30,-10 M 0,40 L 40,0 M 10,50 L 50,10 M 20,60 L 60,20' stroke='rgba(255,255,255,0.1)' stroke-width='4'/></svg>");
  background-size: 80px 80px;
  animation: move-diagonal 2s linear infinite;
  transition: width 0.4s ease-in-out;
}
.error_page {
  padding: 20px;
  background: #541919;
  border-radius: 10px;
  text-align: center;
}
.error-message {
  color: #ef5f5f;
  text-align: center;
  line-height: 22px;
  width: 100%;
  margin-top: 15px;
  background: var(--block);
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  background-image: url(/app/img/noise.png);
}
.add_order_block {
  background: var(--block);
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  background-image: url(/app/img/noise.png);
}
.services_info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  margin-bottom: 15px;
  grid-gap: 8px;
}
.services_info .item {
  padding: 8px 10px;
  background: var(--fon);
  border-radius: 8px;
}
.services_info .item .name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.services_info .item .text {
  color: #9c9c9e;
  font-size: 12px;
}
.input_block {
  margin-bottom: 15px;
}
.input_block .name {
  margin-bottom: 8px;
  font-weight: 600;
}
.input {
  width: 100%;
  border: 1px solid #283644;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  line-height: 22px;
  background: 0;
  -webkit-appearance: textfield;
  -webkit-transition: all 0.2s 0s ease;
  -moz-transition: all 0.2s 0s ease;
  -o-transition: all 0.2s 0s ease;
  transition: all 0.2s 0s ease;
  height: 48px;
  background: #0a0828;
}
select {
  appearance: none; /* Убирает стандартную стрелку (в поддерживаемых браузерах) */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(/app/img/icon/chevron.svg); /* Своя иконка */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.summ_block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 15px;
  grid-gap: 10px;
}
.summ_block .item {
  font-size: 16px;
  font-weight: 600;
}
.summ_block .item .name {
  margin-bottom: 5px;
}
.summ_block .item:last-child {
  text-align: right;
}
.services_desc,
.services_warning {
  background: var(--block);
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  background-image: url(/app/img/noise.png);
}
.services_desc .title,
.services_warning .title {
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 15px;
}
.services_desc p,
.services_warning p {
  text-align: center;
}
.services_desc .item {
  margin-bottom: 15px;
}
.services_desc .item .name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}
.services_desc .item .text {
  color: #9c9c9e;
  font-size: 14px;
  line-height: 20px;
}
.enable_service[data-enable="off"] {
  pointer-events: none;
  opacity: 0.3;
}
.balance_order {
  color: #e46969;
  font-size: 14px;
}
textarea.input {
  resize: none;
  height: 120px;
}
.currency_list {
}
.currency_list .item {
  background: var(--block);
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 25px 1fr 20px;
  align-items: center;
  grid-gap: 10px;
}
.currency_list .item .flag {
  width: 100%;
  height: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.currency_list .item .name {
  font-weight: bold;
}
.currency_list .item .check {
  width: 20px;
  height: 20px;
  background: var(--fon);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.currency_list .item[data-acive="on"] .check::after {
  content: "";
  -webkit-mask-image: url(/app/img/icon/check.svg);
  background-color: #02b158;
  width: 14px;
  height: 14px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
}

.currency_list .item[data-currency="RUB"] .flag {
  background-image: url(/app/img/flag/rus.png);
}
.currency_list .item[data-currency="USD"] .flag {
  background-image: url(/app/img/flag/usa.png);
}
.currency_list .item[data-currency="UZS"] .flag {
  background-image: url(/app/img/flag/uzb.png);
}
.currency_list .item[data-currency="KZT"] .flag {
  background-image: url(/app/img/flag/kzh.png);
}
.currency_list .item[data-currency="KUS"] .flag {
  background-image: url(/app/img/flag/kus.png);
}
.currency_list .item[data-currency="EUR"] .flag {
  background-image: url(/app/img/flag/euro.png);
}
.service_warrning_info {
  color: #e46969;
  text-align: center;
  display: block;
  margin-bottom: 20px;
}
#service_warrning_info {
  color: #e46969;
}
.met_info {
  font-size: 12px;
  text-align: center;
  color: #e46969;
  margin: 20px auto;
}
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.referal_info_list .loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #23344b;
  border-top-color: #1b69d4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 12px;
  font-size: 14px;
  color: #9c9c9e;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.response .error {
  background: #e46969;
  margin-bottom: 15px;
  padding: 10px 14px;
  border-radius: 6px;
}

.response .success {
  background: #4caf50;
  margin-bottom: 15px;
  padding: 10px 14px;
  border-radius: 6px;
}
.top_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.top_title .title_page {
  margin-bottom: 0;
}
.order_list_btn {
  display: grid;
  grid-template-columns: 1fr 40px;
  grid-gap: 10px;
  height: 40px;
}
.order_list_btn .filter {
  display: flex;
  background: var(--block);
  overflow-x: auto;
  border-radius: 8px;
  background-image: url(/app/img/noise.png);
}

.order_list_btn .filter .item {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 14px;
  transition: 300ms;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE/Edge */
  justify-content: center;
}
.order_list_btn .filter .item.active {
  background-color: #0d1d5a;
}
.order_list_btn .refresh {
  background: var(--block);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-image: url(/app/img/noise.png);
}
.order_list_btn .refresh::after {
  content: "";
  background-color: white;
  width: 20px;
  height: 20px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
  -webkit-mask-image: url(/app/img/icon/refresh.svg);
}
.order_list {
  margin-top: 20px;
}
.order_list > .item {
  width: 100%;
  background: var(--block);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 15px;
  background-image: url(/app/img/noise.png);
}
.order_list .item .soc {
  min-width: 32px;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/app/img/icon/vk_logo.svg);
}
.order_list .item .info_order {
}
.order_list .item .info_order .title {
}
.order_list .item .left {
  display: flex;
  align-items: center;
}
.order_list .item .top {
}
.order_list .item .info_order a {
  color: #0d84fb;
  font-size: 12px;
}
.order_list .item .status_order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  border-top: 1px solid var(--fon);
  padding-top: 10px;
  font-size: 14px;
}
.order_list .item .status_order .status {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}
.order_list .item[data-status="In progress"] .status_order .status {
  background: #0d84fb;
}
.order_list .item[data-status="Partial"] .status_order .status {
  background: #e46969;
}
.order_list .item[data-status="Pending"] .status_order .status {
  background: #0d84fb;
}
.order_list .item[data-status="Completed"] .status_order .status {
  background: #4caf50;
}
.order_list .item[data-status="Canceled"] .status_order .status {
  background: #e46969;
}
.order_list .item .status_order .progress {
  display: flex;
  align-items: center;
}
.order_list .item .status_order .progress .real {
  margin-right: 5px;
}
.order_list .item .status_order .progress .order {
  margin-left: 5px;
}

.order_list .item .dop_info {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  background: var(--fon);
  padding: 8px 10px;
  border-radius: 6px;
}

.order_list .item .dop_info .item {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.order_list .item .dop_info .item .name {
  color: #9c9c9e;
  margin-right: 3px;
}

.order_list .item .dop_info .item .num {
}
.order_list .item .dop_info .item:nth-child(2n) {
  justify-content: flex-end;
}
.list_null {
  color: #9c9c9e;
  padding: 20px;
  text-align: center;
}
.list_null .button {
  margin-top: 20px;
}
.list_null .icon {
  margin: 0 auto 14px auto;
  background-color: #9c9c9e;
  width: 50px;
  height: 50px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
  -webkit-mask-image: url(/app/img/icon/task_list.svg);
}
.order_list_btn .filter::-webkit-scrollbar {
  display: none;
}
.preloader {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader .center {
  width: 100%;
  padding-bottom: 120px;
}
.preloader .center .icon {
  background-image: url(/app/img/rocket.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  animation: float 2s ease-in-out infinite;
}
#progress-container {
  width: 100%;
  height: 10px;
  background: rgb(16 24 93);
  max-width: 200px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 30px;
}
#progress-bar {
  width: 0%;
  height: 100%;
  background: rgb(191 197 255);
  border-radius: 14px;
  transition: 300ms;
}
@keyframes float {
  0% {
    transform: translateY(0px) rotate(-1deg);
  }
  50% {
    transform: translateY(-20px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(-1deg);
  }
}
.my_balance {
  width: 100%;
  background: var(--block);
  margin-bottom: 15px;
  background-image: url(/app/img/noise.png);
  font-size: 16px;
  padding: 16px 20px;
  border-radius: 10px;
}
.my_balance .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.my_balance .balance_nmbr {
  font-size: 20px;
  font-weight: 600;
}
.send_support,
.change_currency {
  display: block;
  width: 100%;
  background: var(--block);
  margin-bottom: 25px;
  background-image: url(/app/img/noise.png);
  font-size: 18px;
  margin-top: 15px;
  text-align: center;
  color: #568cff;
  padding: 16px 20px;
  border-radius: 10px;
}
.add_money {
  width: 100%;
  margin-top: 15px;
  background: var(--block);
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  background-image: url(/app/img/noise.png);
}
img {
  max-width: 100%;
  display: block;
}
.packets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
}
.packets .item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.packets .item .img {
  position: relative;
}

.packets .item .img img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.packets .item .img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 13, 67, 0) 0%,
    rgb(11 25 74 / 42%) 60%,
    rgb(3 13 67) 100%
  );
}
.packets .item .bottom {
  background: #0b194a;
  padding: 10px 10px;
  background-image: url(/app/img/noise.png);
  position: relative;
  width: 100%;
  text-align: center;
}
.packets .item .num {
  text-align: center;
  font-weight: bold;
  color: rgb(187, 187, 32);
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 10px;
  font-size: 18px;
}
.packets .item .bottom .price {
  background: rgb(76, 175, 80);
  color: white;
  margin: 0;
  font-size: 14px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.packets .item .sale {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  border-radius: 100%;
  background: #d53232;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}
.payment_list {
}
.payment_list .item {
  width: 100%;
  margin-bottom: 15px;
  background: var(--block);
  padding: 20px 20px;
  border-radius: 10px;
  background-image: url(/app/img/noise.png);
}
.payment_list .item .top {
  display: flex;
  justify-content: space-between;
}
.payment_list .item .top .pay_info {
  display: flex;
  align-items: center;
}
.payment_list .item .top .pay_info .icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 32px;
  margin-right: 10px;
  width: 32px;
}
.payment_list .item[data-pay_system="sbp"] .top .pay_info .icon {
  background-image: url(/app/img/payment/sbp.svg);
  width: 32px;
}
.payment_list .item[data-pay_system="stars"] .top .pay_info .icon {
  background-image: url(/app/img/payment/stars.svg);
  width: 32px;
}
.payment_list .item[data-pay_system="card"] .top .pay_info .icon {
  background-image: url(/app/img/payment/visa_master.png);
  width: 65px;
}
.payment_list .item[data-pay_system="mir"] .top .pay_info .icon {
  background-image: url(/app/img/payment/mir.png);
  width: 65px;
}
.payment_list .item[data-pay_system="youmoney"] .top .pay_info .icon {
  background-image: url(/app/img/payment/youmoney.png);
}
.payment_list .item .top .pay_info .name {
  font-size: 20px;
  white-space: nowrap;
}
.payment_list .item .bottom .commission_block {
  text-align: right;
}
.payment_list .item .bottom .commission_block .commission {
  color: #e46969;
  margin-top: 3px;
  font-size: 12px;
}
.payment_list .item .bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  border-top: 1px solid #152a73;
  padding-top: 10px;
}

.payment_list .item .top .total_amount_block {
  text-align: right;
}

.payment_list .item .bottom .name {
  color: #9c9c9e;
  font-size: 12px;
  margin-bottom: 4px;
}
.payment_list .item .top .total_amount_block .total_amount {
  color: rgb(187, 187, 32);
  font-size: 18px;
  margin-top: 5px;
}
.payment_list .item .bottom .num {
  font-size: 12px;
  color: #0d84fb;
}

.payment_list .item .bottom .name {
  font-size: 10px;
}
.tap {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent; /* отключает синий блик */
  position: relative;
  overflow: hidden;
}
.tap.pressed {
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 600ms linear;
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 100;
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: none;
  justify-content: center;
}
.popup.open {
  display: flex;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.popup.open .popup_section {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.popup.close {
  display: flex;
}
.popup.close .popup_section {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
.popup .popup_section {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  background-color: var(--block);
  background-image: url(/app/img/noise.png);
  position: absolute;
  bottom: 0;
  border-radius: 40px 40px 0 0;
  height: auto;
  max-height: calc(
    90vh - var(--tg-safe-area-inset-top) - var(--tg-content-safe-area-inset-top)
  );
  z-index: 1;
  overflow: auto;
}
.popup::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: rgb(0 0 0 / 20%); /* полупрозрачный цвет */
  backdrop-filter: blur(4px); /* эффект блюра */
  -webkit-backdrop-filter: blur(4px); /* для Safari */
}
.popup .popup_close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 36px;
  height: 36px;
  background: #152458;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.popup .popup_close::before {
  content: "";
  position: absolute;
  background-color: #cc5353;
  width: 24px;
  height: 24px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url(/app/img/icon/cancel.svg);
}
.popup .popup_content {
  height: 100%;
}
.popup .popup_padding {
  padding: 25px 25px 45px 25px;
  position: relative;
}
.popup .title {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
}
.tab {
  font-size: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  background: var(--block);
  height: 44px;
  overflow: hidden;
}
.tab[data-grid="3"] {
  grid-template-columns: 1fr 1fr 1fr;
}
.tab .item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: #9c9c9e;
  cursor: pointer;
}
.tab .item.active {
  color: #e0e0e0;
  background: rgb(255 255 255 / 10%);
}
.gift_list {
  margin-top: 15px;
  min-height: 950px;
}
.gift_list .item {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-gap: 14px;
  align-items: center;
  background: #030d43;
  background-image: url(/app/img/noise.png);
  border-radius: 12px;
  overflow: hidden;
}
.gift_list .item img {
  overflow: hidden;
}
.show_win .rare,
.gift_list .item .rare {
  font-size: 9px;
  width: max-content;
  padding: 1px 4px;
  border-radius: 4px;
  margin-bottom: 3px;
  text-align: center;
  color: black;
  font-weight: bold;
}
.show_win .rare[data-rare="1"],
.gift_list .item .rare[data-rare="1"] {
  background: #1f680f;
}
.show_win .rare[data-rare="2"],
.gift_list .item .rare[data-rare="2"] {
  background: #006787;
}
.show_win .rare[data-rare="3"],
.gift_list .item .rare[data-rare="3"] {
  background: #ffef54;
}
.show_win .rare[data-rare="4"],
.gift_list .item .rare[data-rare="4"] {
  background: #ff7676;
}
.show_win .rare[data-rare="5"],
.gift_list .item .rare[data-rare="5"] {
  background: #ff0004;
}
.show_win .rare[data-rare="6"],
.gift_list .item .rare[data-rare="6"] {
  background: #d400ff;
}
.gift_list .item .name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
}
.gift_list .item .summa {
  color: rgb(187, 187, 32);
  font-size: 16px;
  font-weight: bold;
}
.gift_list .item .date {
}
.show_win {
  background: url(/app/img/gift/bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
}
.show_win.open {
  display: flex;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.show_win.close {
  display: flex;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.show_win .center {
  padding: 60px 20px 80px 20px;
  text-align: center;
  position: relative;
}
.show_win .center .image {
  width: 160px;
  overflow: hidden;
  border-radius: 20px;
  margin: 0 auto;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: tada;
  animation-name: tada;
}
.show_win .center .title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 20px;
}
.show_win .center .name {
  font-size: 24px;
  margin-bottom: 8px;
  font-weight: bold;
}
.show_win .center .summa {
  color: rgb(234 234 19);
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.button.white {
  background: #ffffff;
  color: #030d43;
  font-size: 18px;
  border: 0;
}
.show_win .rare {
  font-size: 18px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 6px 10px;
  color: white;
}
.roulette_block::before {
  content: "";
  background: linear-gradient(180deg, rgb(3 13 67 / 0%) 0%, rgb(10 22 65) 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  backdrop-filter: blur(4px);
}
.popup_section.overflow {
  overflow: hidden;
}
.roulette_info .error_page {
  background: #030d43;
  background-image: url(/app/img/noise.png);
}
.show_win::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgb(3 13 67 / 0%) 0%, rgb(10 22 65) 100%);
  backdrop-filter: blur(4px);
  z-index: 0;
}
.partner_page .title_page {
  flex-direction: column;
  text-align: center;
}
.bonus_page .title_page {
  flex-direction: column;
  text-align: center;
}
.partner_page .image {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  margin-top: 15px;
}
.partner_page .desc {
  margin-top: 5px;
  color: #9c9c9e;
}

.bonus_page .title_page .image {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  margin-top: 15px;
}
.bonus_page .title_page .desc {
  margin-top: 5px;
  color: #9c9c9e;
}
.advantages_list {
  background-color: var(--block);
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 14px 16px;
  align-items: center;
  background-image: url(/app/img/noise.png);
  overflow: hidden;
}
.advantages_list .item {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #2f3c69;
  align-items: center;
}
.advantages_list .item i {
  background-color: #8e8e8e;
  width: 34px;
  height: 34px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
}
.advantages_list .item i[data-icon="favorite"] {
  -webkit-mask-image: url(/app/img/icon/favorite.svg);
}
.advantages_list .item i[data-icon="prize"] {
  -webkit-mask-image: url(/app/img/icon/checkback_prize.svg);
}
.advantages_list .item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: 0;
}
.advantages_list .item .text {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 14px;
}
.ref_link {
  overflow: hidden;
}
.ref_link .title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.ref_link .desc {
  margin-top: 10px;
  color: #9c9c9e;
  text-align: center;
  margin-bottom: 20px;
}
.ref_link .sendInvite {
}
.ref_link .sendInvite::before {
  content: "";
  background-color: #e0e0e0;
  width: 26px;
  height: 26px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
  -webkit-mask-image: url(/app/img/icon/users.svg);
  margin-right: 10px;
}
.ref_link .sendStory::before {
  content: "";
  background-color: #e0e0e0;
  width: 26px;
  height: 26px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
  -webkit-mask-image: url(/app/img/icon/story.svg);
  margin-right: 10px;
}
.ref_link .ili {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  position: relative;
}
.ref_link .ili::after {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  height: 1px;
  background: #2f3c69;
  top: 50%;
  left: calc(50% - -30px);
}
.ref_link .ili::before {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  height: 1px;
  background: #2f3c69;
  top: 50%;
  right: calc(50% - -30px);
}
.ref_link .also {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  position: relative;
}
.ref_link .also::after {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  height: 1px;
  background: #2f3c69;
  top: 50%;
  left: calc(50% - -60px);
}
.ref_link .also::before {
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  height: 1px;
  background: #2f3c69;
  top: 50%;
  right: calc(50% - -60px);
}
.input_block.copy {
  display: grid;
  grid-template-columns: 1fr 48px;
}
.input_block.copy input {
  border-radius: 8px 0px 0px 8px;
}
.input_block.copy .copy_button {
  border-radius: 0px 8px 8px 0px;
  width: 100%;
  height: 100%;
  background: #0d84fb;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.input_block.copy .copy_button::before {
  content: "";
  position: absolute;
  background-color: #e0e0e0;
  width: 26px;
  height: 26px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  display: block;
  -webkit-mask-image: url(/app/img/icon/copy.svg);
}
.ref_balance {
  background-color: var(--block);
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 14px 16px;
  align-items: center;
  background-image: url(/app/img/noise.png);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 100px;
  align-items: center;
}
.ref_balance .name {
  color: #9c9c9e;
  font-size: 14px;
  margin-bottom: 3px;
}
.ref_balance .balance_ref {
  color: rgb(187, 187, 32);
  font-size: 20px;
  font-weight: bold;
}
.ref_balance button {
  height: 40px;
  background: #4caf50;
  font-size: 14px;
}
.ref_user_link {
  margin-bottom: 30px;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #0d84fb;
  text-decoration: underline;
}
.advantages_list .item .text b {
  color: #e46969;
}
.ref_statistic {
  margin-bottom: 15px;
  border-radius: 8px;
  background-image: url(/app/img/noise.png);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
}

.ref_statistic .item .name {
  font-size: 12px;
  color: #9c9c9e;
  margin-bottom: 2px;
}
.ref_statistic .item .num {
  font-size: 18px;
}
.ref_statistic .item {
  padding: 10px 15px;
  background: var(--block);
  height: 100%;
  width: 100%;
}
.referal_info_list {
  margin-top: 15px;
}
.item_ref_user {
  padding: 10px 10px;
  background: var(--block);
  height: 100%;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40px 1fr max-content;
  grid-gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.item_ref_user .images {
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #909090;
  width: 40px;
  height: 40px;
}
.item_ref_user .images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item_ref_user[data-status="active"] .images {
  border: 3px solid #4caf50;
}
.item_ref_user .info .name {
  font-size: 18px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.item_ref_user .info .date {
  font-size: 12px;
  color: #9c9c9e;
  font-weight: 600;
}
.item_ref_user .profit {
  color: rgb(187, 187, 32);
  font-size: 16px;
}
.conclusion_method {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  grid-gap: 10px;
  margin-bottom: 20px;
}
.conclusion_method .item {
  height: 60px;
  background-color: #091336;
  border-radius: 8px;
  background-image: url(/app/img/noise.png);
  overflow: hidden;
  align-items: center;
  border: 2px solid #1a2752;
  transition: 500ms;
}
.conclusion_method .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.conclusion_method .item.active {
  border: 2px solid #4caf50;
}
.form_conclusion_block {
  background: var(--block);
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  background-image: url(/app/img/noise.png);
}
.my_ref_balance {
  background-color: var(--block);
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 14px 16px;
  align-items: center;
  background-image: url(/app/img/noise.png);
  text-align: center;
}
.my_ref_balance .name {
  color: #9c9c9e;
  font-size: 14px;
  margin-bottom: 3px;
}
.my_ref_balance .balance_ref {
  color: rgb(187, 187, 32);
  font-size: 20px;
  font-weight: bold;
}
.form_conclusion_block .summ_block .comission {
  color: #e46969;
  font-size: 14px;
}
.form_conclusion_block .summ_block .arrive {
  color: rgb(187, 187, 32);
  font-size: 14px;
}
.method_block {
  display: none;
}

.method_block.active {
  display: block;
}
.input_block .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.input_block .flex .min_sum {
  color: #e46969;
  font-size: 14px;
  text-align: right;
  font-weight: 600;
}
.input_block .flex .name {
  margin-bottom: 0;
}
.history_conclusion {
}
.history_conclusion .item {
  background-color: var(--block);
  margin-bottom: 10px;
  border-radius: 8px;
  padding: 14px 16px;
  align-items: center;
  background-image: url(/app/img/noise.png);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.history_conclusion .item .name {
  color: #9c9c9e;
  font-size: 14px;
  margin-bottom: 3px;
}
.history_conclusion .item .date {
  color: #9c9c9e;
}
.history_conclusion .item .num {
}
.history_conclusion .item img {
  width: 90px;
  margin-right: 10px;
}
.history_conclusion .item .tex_info {
  grid-column: 1 / 3;
  border-bottom: 1px solid #1b2b65;
  padding-bottom: 10px;
  padding-top: 5px;
}
.history_conclusion .item .wallet_info {
  grid-column: 1/5;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #1b2b65;
  padding-bottom: 10px;
}

.history_conclusion .item .status_info {
  grid-column: 3 / 5;
  text-align: right;
  border-bottom: 1px solid #1b2b65;
  padding-bottom: 10px;
  padding-top: 5px;
}
.history_conclusion .item .info_left {
  grid-column: 1/3;
  padding-top: 5px;
}
.history_conclusion .item .info_right {
  grid-column: 3 / 5;
  text-align: right;
  padding-top: 5px;
}
.form_conclusion_block .desc {
  margin-top: 15px;
  color: #9c9c9e;
  text-align: center;
}
button.pink_e,
.button.pink_e {
  background-color: #e81c5a;
  border: none;
  box-shadow: 0 0 25px #e81c5a80;
  transition: 0.2s ease;
  transition-property: background-color, box-shadow;
  white-space: nowrap;
  color: white;
}
button.blue_e,
.button.blue_e {
  position: relative;
  background: linear-gradient(
    88.39deg,
    #6c93ff -2.56%,
    #976fff 51.27%,
    #df69d1 107.39%
  );
  box-shadow: 0 0 25px rgb(223 105 209 / 40%);
  transition: 0.2s ease;
  transition-property: background-color, box-shadow;
  white-space: nowrap;
  color: white;
}
button.blue_e::after,
.button.blue_e::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

@keyframes wave {
  0% {
    transform: translate(-100%);
  }

  50% {
    transform: translate(100%);
  }

  to {
    transform: translate(100%);
  }
}
.tap {
  cursor: pointer;
}
button.pink_e:disabled,
.button.pink_e:disabled {
  background: #020b3a;
  box-shadow: 0 0 25px #e81c5a00;
  color: #706969cc;
}

button.blue_e:disabled,
.button.blue_e:disabled {
  background: #020b3a;
  color: #706969cc;
  box-shadow: 0 0 25px #e81c5a00;
}
#popup_keyinfo .top {
  width: 100%;
  background-image: url(/app/img/keyinfo_top.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#popup_keyinfo .top i {
  position: absolute;
  background-image: url(/app/img/keyinfo_key.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 140px;
  height: 140px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: tada;
  animation-name: tada;
}
.task_list {
  margin-top: 20px;
}
.task_list .pod_title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.task_list .item {
  background-color: #0b1743;
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 8px 10px;
  align-items: center;
  background-image: url(/app/img/noise.png);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.task_list .item .left {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.task_list .item .left i {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: block;
  margin-right: 10px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.task_list .item[data-type="entry_reward"] .left i {
  background-image: url(/app/img/icon/calendar.png);
}
.task_list .item[data-type="openbot"] .left i,
.task_list .item[data-type="subscription"] .left i {
  background-image: url(/app/img/icon/telegram.png);
}
.task_list .item[data-type="invite"] .left i {
  background-image: url(/app/img/icon/friends.png);
}
.task_list .item[data-type="spinner"] .left i {
  background-image: url(/app/img/icon/spin.png);
}
.task_list .item .left .info {
  overflow: hidden;
  width: 100%;
}
.task_list .item .left .info .name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.task_list .item .left .info .desc {
  color: #9c9c9e;
  font-size: 12px;
}
.task_list .item .left .info .prices {
  color: rgb(187, 187, 32);
  font-weight: 600;
}
.task_list .item .left .info .key {
  color: #d400ff;
  font-weight: 600;
}
.task_list .item .left .info .success {
  color: #4caf50;
}
.task_list .item .left .info .error {
  color: #e46969;
}
.task_list .item .left .info .warning {
  color: #ffeb3b;
}
.task_list .item .right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 10px;
}
.task_list .item .right::before {
  content: "";
  background-color: #4caf50;
  position: absolute;
  width: 20px;
  height: 20px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-image: url(/app/img/icon/check.svg);
}

.task_list .item[data-status="active"] {
  background-color: #112362;
}
.task_list .item[data-status="active"] .right::before {
  -webkit-mask-image: url(/app/img/icon/chevron_right.svg);
  background-color: white;
}
#popup_onetime .top {
  width: 100%;
  background-image: url(/app/img/keyinfo_top.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#popup_onetime .top i {
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 140px;
  height: 140px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: tada;
  animation-name: tada;
}
#popup_onetime .top i[data-type="invite"] {
  background-image: url(/app/img/icon/friends.png);
}
#popup_onetime .top i[data-type="openbot"],
#popup_onetime .top i[data-type="subscription"] {
  background-image: url(/app/img/icon/telegram.png);
}
#popup_entry_reward .top {
  width: 100%;
  background-image: url(/app/img/keyinfo_top.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#popup_entry_reward .top i {
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 140px;
  height: 140px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: tada;
  animation-name: tada;
  background-image: url(/app/img/icon/calendar.png);
}

#popup_onetime .reward {
  margin-bottom: 10px;
  color: #9c9c9e;
}

#popup_onetime .reward .prices {
  color: rgb(187, 187, 32);
  font-weight: 600;
}
#popup_onetime .reward .key {
  color: #d400ff;
  font-weight: 600;
}
#popup_onetime .count_invite {
  margin-bottom: 20px;
  color: #9c9c9e;
}
#popup_onetime .count_invite span {
  font-weight: 600;
  color: #e0e0e0;
}
b.gradient {
  background: linear-gradient(
    6deg,
    #6c93ff -2.56%,
    #976fff 51.27%,
    #df69d1 107.39%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Для Firefox */
  background-clip: text;
  color: transparent;
}
.bonus_calendar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.bonus_calendar .item {
  background-color: #030d43;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  background-image: url(/app/img/noise.png);
  justify-content: center;
  flex-direction: column;
  height: 80px;
  border: 4px solid #030d43;
  position: relative;
  overflow: hidden;
  opacity: 0.6;
}
.bonus_calendar .item .name {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 5px;
}
.bonus_calendar .item .reward {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
.bonus_calendar .item[data-status="received"] {
  background-color: rgb(39 117 22 / 44%);
  border: 3px solid rgb(39 117 22);
  opacity: 1;
}
.bonus_calendar .item[data-status="active"] {
  background-color: rgb(233 61 80 / 60%);
  border: 3px solid rgb(233 61 80 / 100%);
  opacity: 1;
}
.bonus_calendar .item .reward[data-type="balance"] {
  color: rgb(187, 187, 32);
}
.bonus_calendar .item .reward[data-type="key"] {
  color: #d400ff;
}
.bonus_calendar .item .reward span {
  font-size: 12px;
  margin-top: 4px;
}
.bonus_calendar .item[data-status="active"]::before {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: wave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
.bonus_time div {
  margin-bottom: 15px;
}
.join_chanel_block {
  margin-bottom: 10px;
}
.join_chanel_block .text {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join_chanel_block .text a {
  margin-left: 5px;
  text-decoration: underline;
  color: #e0e0e0;
}
.join_chanel_block .text::before {
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.join_chanel_block[data-join="0"] .text::before {
  background-image: url(/app/img/icon/no.svg);
}
.join_chanel_block[data-join="1"] .text::before {
  background-image: url(/app/img/icon/yes.svg);
}