html,
html.dark {
  --fsk-50: #f9fafb;
  --fsk-100: #ebecee;
  --fsk-200: #dcdfe3;
  --fsk-300: #c7cbd0;
  --fsk-400: #b9bfc4;
  --fsk-500: #3d3d43;
  --fsk-600: #343438;
  --fsk-700: #2b2b2f;
  --fsk-800: #202024;
  --fsk-900: #1a1a1d;
  --fsk-blue-100: #dbeafe;
  --fsk-code-1: #687282;
  --fsk-code-2: #47987b;
  --p: #EA1E63;
  --p-dk: #c0134f;
  --p-lt: #ff4081;
  --p-05: rgba(234,30,99,.05);
  --p-10: rgba(234,30,99,.10);
  --p-20: rgba(234,30,99,.20);
  --bg: #f4f5f7;
  --surf: #14161d;
  --surf2: var(--fsk-100);
  --bdr: var(--fsk-200);
  --bdr2: var(--fsk-300);
  --tx1: var(--fsk-900);
  --tx2: var(--fsk-500);
  --tx3: var(--fsk-400);
  --sb-bg: #111318;
  --sb-bdr: rgba(255,255,255,.06);
  --sb-tx: rgba(255,255,255,.5);
  --sb-tx2: rgba(255,255,255,.22);
  --sb-hov: rgba(255,255,255,.06);
  --sh-xs: 0 1px 3px rgba(0,0,0,.05);
  --sh-sm: 0 2px 10px rgba(0,0,0,.08);
  --sh: 0 4px 20px rgba(0,0,0,.10);
  --sh-lg: 0 8px 36px rgba(0,0,0,.14);
  --sh-xl: 0 16px 56px rgba(0,0,0,.18);
  --r-xs: 4px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 9999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .18s var(--ease);
  --t-lg: .3s var(--ease);
  --sb-w: 252px;
  --tb-h: 60px;
  --fsk-red: #ef4444;
  --fsk-orange: #f97316;
  --fsk-amber: #f59e0b;
  --fsk-lime: #84cc16;
  --fsk-green: #22c55e;
  --fsk-emerald: #10b981;
  --fsk-teal: #14b8a6;
  --fsk-cyan: #06b6d4;
  --fsk-sky: #0ea5e9;
  --fsk-blue: #3b82f6;
  --fsk-indigo: #6366f1;
  --fsk-violet: #8b5cf6;
  --fsk-purple: #a855f7;
  --fsk-yellow: #e1b04a;
  --fsk-fuchsia: #d946ef;
  --fsk-pink: #ec4899;
  --fsk-rose: #f43f5e;
  --fsk-red-100: #fee2e2;
  --fsk-orange-100: #fef3c7;
  --fsk-amber-100: #fefce8;
  --fsk-lime-100: #ecfccb;
  --fsk-green-100: #dcfce7;
  --fsk-emerald-100: #d1fae5;
  --fsk-teal-100: #ccfbf1;
  --fsk-cyan-100: #cffafe;
  --fsk-sky-100: #e0f2fe;
  --fsk-indigo-100: #e0e7ff;
  --fsk-violet-100: #ede9fe;
  --fsk-purple-100: #f3e8ff;
  --fsk-fuchsia-100: #fae8ff;
  --fsk-pink-100: #fce7f3;
  --fsk-rose-100: #ffe4e6
}
body,
p {
  margin: 0
}
a,
body {
  color: var(--fsk-500);
  text-decoration: none
}
html {
  --fsk-50: #f9fafb;
  --fsk-100: #ebecee;
  --fsk-200: #dcdfe3;
  --fsk-300: #c7cbd0;
  --fsk-400: #b9bfc4;
  --fsk-500: #3d3d43;
  --fsk-600: #343438;
  --fsk-700: #2b2b2f;
  --fsk-800: #202024;
  --fsk-900: #1a1a1d;
  --fsk-blue-100: #dbeafe;
  --fsk-code-color-1: #687282;
  --fsk-code-color-2: #47987b;
  --header-control-bg: #fff;
  --header-control-border: #e4e8ef;
  --header-control-hover: #f3f5f9;
  --overview-card-bg: #fff;
  --overview-card-border: #e8eaf1;
  --overview-card-text: #202432;
  --overview-card-muted: #737b8c;
  --overview-card-inset: #f5f6fa;
  --overview-card-shadow: 0 8px 24px rgba(26,20,40,.06);
  --sb-bg: #f9fafb;
  --sb-card-bg: #fff;
  --sb-bdr: #dcdfe3;
  --sb-tx: #687282;
  --sb-tx2: #9ca3af;
  --sb-hov: #ebecee;
  --sb-icon-bg: #dcdfe3;
  --sb-text: #2b2b2f;
  --sb-text-muted: #687282;
  --sb-avatar-bg: #ebecee
}
html.dark {
  --fsk-50: #14161d;
  --fsk-100: #1a1e26;
  --fsk-200: #222a38;
  --fsk-300: #2b3445;
  --fsk-400: #3a4458;
  --fsk-500: #7d8da6;
  --fsk-600: #c7cbd0;
  --fsk-700: #dcdfe3;
  --fsk-800: #ebecee;
  --fsk-900: #f9fafb;
  --fsk-blue-100: #c6d8f7;
  --fsk-code-color-1: #8fa3c5;
  --fsk-code-color-2: #6dbfa7;
  --header-control-bg: rgba(255,255,255,.035);
  --header-control-border: rgba(255,255,255,.1);
  --header-control-hover: rgba(255,255,255,.08);
  --overview-card-bg: #1b1e27;
  --overview-card-border: rgba(255,255,255,.07);
  --overview-card-text: #f5f6fa;
  --overview-card-muted: #a4a9b8;
  --overview-card-inset: rgba(255,255,255,.055);
  --overview-card-shadow: 0 8px 24px rgba(0,0,0,.16);
  --sb-bg: #111318;
  --sb-card-bg: #20242d;
  --sb-bdr: rgba(255,255,255,.06);
  --sb-tx: rgba(255,255,255,.7);
  --sb-tx2: rgba(255,255,255,.45);
  --sb-hov: rgba(255,255,255,.06);
  --sb-icon-bg: rgba(255,255,255,.09);
  --sb-text: #f9fafb;
  --sb-text-muted: rgba(255,255,255,.7);
  --sb-avatar-bg: #25252b
}
[class*=" fi-"],
[class^=fi-] {
  vertical-align: -.2em;
  line-height: 1;
  display: inline-block;
  margin-top: .05em;
  margin-bottom: -.05em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
body {
  font-family: Rubik,sans-serif;
  font-optical-sizing: auto;
  font-size: 11px;
  line-height: 1.42857;
  font-weight: 400;
  background-color: var(--fsk-50);
  appearance: none;
  margin: 0
}
* {
  --fsk-site-color: #bc00ff;
  --fsk-site-gradient: linear-gradient(90deg, rgb(60, 105, 255) 0, #bc00ff 100%);
  font-family: Rubik,sans-serif;
  --fsk-site-border: 5px
}
a {
  text-decoration: none
}
.justify-content-center {
  justify-content: center!important
}
.text-center {
  display: flex;
  justify-content: center
}
.hidden {
  display: none!important
}
.mt10 {
  margin-top: 10px
}
.pb-0 {
  padding-bottom: 0!important
}
.m-0 {
  margin: 0!important
}
.mb-0 {
  margin-bottom: 0!important
}
.noneAuth {
  padding-top: 80px
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto
}
@media(min-width:640px) {
  .container {
    max-width: 620px
  }
}
@media(min-width:768px) {
  .container {
    max-width: 720px
  }
}
@media(min-width:1024px) {
  .container {
    max-width: 968px
  }
}
@media(min-width:1280px) {
  .container {
    max-width: 1140px
  }
}
@media(min-width:1536px) {
  .container {
    max-width: 1480px
  }
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 20px;
  padding-right: calc(.75rem);
  padding-left: calc(.75rem)
}
.grid-item {
  background-color: #ccc;
  padding: 10px;
  text-align: center
}
.col-span-1 {
  grid-column: span 1/span 1
}
.col-span-2 {
  grid-column: span 2/span 2
}
.col-span-3 {
  grid-column: span 3/span 3
}
.col-span-4 {
  grid-column: span 4/span 4
}
.col-span-5 {
  grid-column: span 5/span 5
}
.col-span-6 {
  grid-column: span 6/span 6
}
.col-span-7 {
  grid-column: span 7/span 7
}
.col-span-8 {
  grid-column: span 8/span 8
}
.col-span-9 {
  grid-column: span 9/span 9
}
.col-span-10 {
  grid-column: span 10/span 10
}
.col-span-11 {
  grid-column: span 11/span 11
}
.col-span-12 {
  grid-column: span 12/span 12
}
@media only screen and (max-width:640px) {
  .grid-container {
    grid-template-columns: repeat(6,1fr);
    padding: 0 5px
  }
  .col-span-1,
  .col-span-10,
  .col-span-11,
  .col-span-12,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5,
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9 {
    grid-column: span 6/span 6
  }
}
@media only screen and (min-width:641px) and (max-width:768px) {
  .grid-container {
    grid-template-columns: repeat(8,1fr)
  }
  .col-span-1,
  .col-span-10,
  .col-span-11,
  .col-span-12,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5,
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9 {
    grid-column: span 8/span 8
  }
}
@media only screen and (min-width:769px) and (max-width:1024px) {
  .grid-container {
    grid-template-columns: repeat(12,1fr)
  }
  .col-span-1,
  .col-span-10,
  .col-span-11,
  .col-span-12,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5,
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9 {
    grid-column: span 12/span 12
  }
}
@media only screen and (min-width:1025px) and (max-width:1280px) {
  .grid-container {
    grid-template-columns: repeat(12,1fr)
  }
}
@media only screen and (min-width:1281px) and (max-width:1536px) {
  .grid-container {
    grid-template-columns: repeat(12,1fr)
  }
}
.container-fluid {
  padding-right: var(--bs-gutter-x,.65rem);
  padding-left: var(--bs-gutter-x,.65rem);
  padding-bottom: 120px
}
.main-content .row {
  gap: 100px;
  display: flex;
  flex-direction: column-reverse
}
.row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 0;
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y)
}
#fields .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0!important;
  gap: 10px;
  margin-top: 0!important
}
#fields .row > * {
  padding: 0
}
#fields .row .col-md-6 {
  display: flex;
  flex-direction: column;
  gap: 5px
}
#fields .row .form-control {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  margin: -1px
}
.col {
  flex: 1 0 0
}
.col-auto {
  flex: 0 0 auto;
  width: auto
}
.col-1 {
  flex: 0 0 auto;
  width: 8.33333%
}
.col-2,
.col-3 {
  flex: 0 0 auto
}
.col-2 {
  width: 16.6667%
}
.col-3 {
  width: 25%
}
.col-4,
.col-5 {
  flex: 0 0 auto
}
.col-4 {
  width: 33.3333%
}
.col-5 {
  width: 41.6667%
}
.col-6,
.col-7 {
  flex: 0 0 auto
}
.col-6 {
  width: 50%
}
.col-7 {
  width: 58.3333%
}
.col-8,
.col-9 {
  flex: 0 0 auto
}
.col-8 {
  width: 66.6667%
}
.col-9 {
  width: 75%
}
.col-10 {
  flex: 0 0 auto;
  width: 83.3333%
}
.col-11 {
  flex: 0 0 auto;
  width: 91.6667%
}
.col-12 {
  flex: 0 0 auto;
  width: 100%
}
input[type=checkbox],
input[type=radio] {
  --active: #3b82f6;
  --active-inner: white;
  --focus: 2px rgba(39, 94, 254, .3);
  --border: #bbc1e1;
  --border-hover: #3b82f6;
  --background: var(--fsk-300);
  --disabled: #f6f8ff;
  --disabled-inner: #e1e6f9;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 21px;
  outline: 0;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  cursor: pointer;
  border: 2px solid var(--fsk-500);
  background: var(--b,var(--background));
  transition: background .3s,border-color .3s,box-shadow .2s
}
input[type=checkbox]:after,
input[type=radio]:after {
  content: "";
  display: block;
  left: 0;
  top: 0;
  position: absolute
}
input[type=checkbox]:checked,
input[type=radio]:checked {
  --b: var(--fsk-site-color);
  --bc: var(--fsk-site-color);
  --d-o: .3s;
  --d-t: .6s;
  --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
  --b: var(--disabled);
  cursor: not-allowed;
  opacity: .9
}
input[type=checkbox]:disabled:checked,
input[type=radio]:disabled:checked {
  --b: var(--disabled-inner);
  --bc: var(--border)
}
input[type=checkbox]:disabled + label,
input[type=radio]:disabled + label {
  cursor: not-allowed
}
input[type=checkbox]:hover:not(:checked):not(:disabled),
input[type=radio]:hover:not(:checked):not(:disabled) {
  --bc: var(--border-hover)
}
input[type=checkbox]:focus,
input[type=radio]:focus {
  box-shadow: 0 0 0 var(--focus)
}
input[type=checkbox]:not(.switch),
input[type=radio]:not(.switch) {
  min-width: 22px;
  height: 22px;
  background: 0;
  border: 2px solid var(--fsk-400)
}
input[type=checkbox]:not(.switch):after,
input[type=radio]:not(.switch):after {
  opacity: var(--o, 0);
  height: 14px;
  width: 14px
}
input[type=checkbox]:not(.switch):checked,
input[type=radio]:not(.switch):checked {
  --o: 1;
  border: 2px solid var(--fsk-site-color);
  background: 0;
  min-width: 22px;
  height: 22px
}
input[type=checkbox] + label,
input[type=radio] + label {
  font-size: 14px;
  line-height: 21px;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  margin-left: 4px
}
.fsk-rtl input[type=checkbox] + label,
input[type=radio] + label {
  margin-left: 0;
  margin-right: 4px
}
.login-btn-group input:checked ~ label {
  background: var(--fsk-site-color);
  color: #fff
}
input[type=checkbox]:not(.switch) {
  border-radius: calc(var(--fsk-site-border) * 1.5)
}
input[type=checkbox]:not(.switch):after {
  width: 5px;
  height: 9px;
  border: 2px solid var(--active-inner);
  border-top: 0;
  border-left: 0;
  left: 5px;
  top: 2px;
  transform: rotate(var(--r,20deg))
}
input[type=checkbox]:not(.switch):checked {
  --r: 43deg;
  background: var(--fsk-site-color)
}
input[type=checkbox].switch {
  width: 40px;
  border-radius: calc(var(--fsk-site-border) * 2);
  border-color: var(--background)
}
input[type=checkbox].switch:after {
  left: 2px;
  top: 2px;
  border-radius: calc(var(--fsk-site-border) * 100);
  width: 13px;
  height: 13px;
  background: #fff;
  transform: translateX(var(--x,0))
}
input[type=checkbox].switch:checked {
  --ab: var(--active-inner);
  --x: 18px;
  border-color: var(--fsk-site-color)
}
input[type=checkbox].switch:disabled:not(:checked):after {
  opacity: .6
}
input[type=radio] {
  border-radius: calc(var(--fsk-site-border) * 100)
}
input[type=radio]:after {
  width: 14px;
  height: 14px;
  border-radius: calc(var(--fsk-site-border) * 100);
  background: var(--fsk-site-color);
  opacity: 0;
  transform: scale(var(--s,.7))
}
input[type=radio]:checked {
  --s: .6
}
ul {
  margin: 12px;
  padding: 0;
  list-style: none;
  width: 100%
}
ul li {
  margin: 16px 0;
  position: relative
}
input[type=radio]:not(.switch) {
  min-width: 18px!important;
  height: 18px!important;
  background: 0;
  border: 2px solid var(--fsk-400)
}
.pager,
.pagination {
  padding-left: 0;
  margin: 20px 0
}
.pagination {
  display: inline-block;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.pager li,
.pagination > li {
  display: inline
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: var(--fsk-500);
  text-decoration: none;
  background-color: var(--fsk-200);
  border: 1px solid var(--fsk-300)
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
  z-index: 2;
  color: var(--fsk-900);
  background-color: var(--fsk-400);
  border-color: var(--fsk-300)
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  z-index: 3;
  color: var(--fsk-900);
  cursor: default;
  background: var(--fsk-site-color)
}
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
  color: var(--fsk-600);
  cursor: not-allowed;
  background-color: #fff;
  border-color: var(--fsk-200)
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1.5
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px
}
.pager {
  list-style: none
}
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--fsk-400);
  border-radius: calc(var(--fsk-site-border) * 3)
}
.pager li > a:focus,
.pager li > a:hover {
  background-color: var(--fsk-500)
}
.pager .next > a,
.pager .next > span {
  float: right
}
.pager .previous > a,
.pager .previous > span {
  float: left
}
.pager .disabled > a,
.pager .disabled > a:focus,
.pager .disabled > a:hover,
.pager .disabled > span {
  color: #777;
  cursor: not-allowed;
  background-color: #fff
}
.page-container {
  display: flex;
  height: 100vh
}
.depend-fields {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.form-group__checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1
}
.form-group {
  display: flex;
  gap: 5px;
  flex-direction: column
}
.form-group label {
  color: var(--fsk-600);
  font-size: 16px
}
.master-select label {
  color: var(--fsk-600);
  font-size: 16px
}
.form-group label small {
  padding: 5px 10px;
  border: 1px solid var(--fsk-300);
  border-radius: calc(var(--fsk-site-border))
}
.form-control {
  padding: 6px 12px;
  line-height: 1.42857;
  background-color: var(--fsk-200)
}
.lite .form-control {
  padding: 6px 12px;
  line-height: 1.42857;
  background-color: var(--fsk-100)
}
.payment-box .form-control {
  background-color: var(--fsk-100)
}
.payment-xstar .form-control {
  background-color: var(--fsk-300)
}
.payment-xstar .form-control .icon-xstar {
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
  height: 100%;
  background: var(--fsk-site-color);
  border: none;
  border-radius: 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0
}
.auth-page .form-control {
  padding: 13px 20px;
  border-radius: calc(var(--fsk-site-border) * 3)
}
.service-search-box {
  margin-bottom: 20px;
  position: relative
}
.service-search-box .form-control {
  display: block;
  height: 30px;
  font-size: 14px;
  color: var(--fsk-800);
  border: 1px solid var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  background: var(--fsk-100)
}
.form-control {
  display: block;
  height: 30px;
  font-size: 14px;
  color: var(--fsk-800);
  background-image: none;
  border-radius: calc(var(--fsk-site-border) * 2);
  border: 1px solid #fff0
}
#current-email {
  display: flex;
  align-items: center;
  opacity: .6;
  cursor: no-drop
}
.ticket-form .form-control {
  background: var(--fsk-100)
}
.form-control:focus {
  border: 2px solid var(--fsk-site-color);
  outline: 0;
  margin: -1px
}
.form-control::-webkit-input-placeholder {
  color: #999
}
#charge:focus {
  border: 0;
  margin: 1px!important
}
.input-group {
  display: grid;
  grid-template-columns: 8fr 3fr
}
.input-group .form-control {
  border-radius: calc(var(--fsk-site-border) * 2) 0 0 calc(var(--fsk-site-border) * 2);
  width: 100%
}
.fsk-rtl .input-group .form-control {
  border-radius: 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0;
  width: 100%
}
.input-group .btn {
  padding: 15px 16px;
  border-radius: 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0;
  display: flex;
  justify-content: center;
  color: var(--fsk-50);
  background: var(--fsk-700);
  width: 100%
}
.fsk-rtl .input-group .btn {
  border-radius: calc(var(--fsk-site-border) * 2) 0 0 calc(var(--fsk-site-border) * 2)
}
.input-group-btn {
  display: flex;
  justify-content: flex-end
}
.btn {
  border: 0;
  border-radius: calc(var(--fsk-site-border) * 3);
  padding: 15px 30px;
  cursor: pointer;
  transition: all .14s ease 0;
  font-weight: 500;
  display: flex;
  gap: 5px;
  align-items: center
}
.btn i {
  line-height: 1
}
.btn-main {
  background: var(--fsk-200);
  color: var(--fsk-800)
}
.btn-min {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content
}
.btn-main:hover {
  background: var(--fsk-site-color);
  color: #fff
}
.order-submit-button.is-submitting {
  justify-content: center;
  gap: 8px;
  cursor: wait;
  opacity: .8
}
.order-submit-spinner {
  animation: spin .8s linear infinite
}
.btn-border {
  border-radius: calc(var(--fsk-site-border) * 3);
  background: 0 center;
  border: 2px solid var(--fsk-300);
  color: var(--fsk-800)
}
.btn-border:hover {
  opacity: .7
}
.btn-lg {
  padding: 20px 30px
}
.btn-block {
  width: 100%;
  box-sizing: border-box
}
.border-5 {
  border-radius: calc(var(--fsk-site-border))
}
.border-10 {
  border-radius: calc(var(--fsk-site-border) * 2)
}
.border-15 {
  border-radius: calc(var(--fsk-site-border) * 3)
}
.modal.disable {
  visibility: hidden;
  opacity: 0
}
.modal {
  transform: scale(1);
  display: block;
  position: fixed;
  z-index: 10;
  inset: 0;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: rgba(0,0,0,.4);
  visibility: visible;
  opacity: 1;
  transition: .14s ease
}
.modal-close {
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex
}
.modal-close {
  width: 30px;
  height: 30px;
  background: var(--fsk-200);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s ease 0;
  line-height: 1
}
.modal-close:hover {
  background: var(--fsk-300)
}
.modal-top {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0
}
.modal-title {
  color: var(--fsk-900);
  font-size: 16px;
  display: flex;
  padding-left: 5px;
  align-items: center;
  line-height: 1
}
.modal-center {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  position: relative
}
.modal-bottom {
  display: flex;
  gap: 10px;
  padding: 15px;
  padding-top: 0
}
.modal-bottom .btn {
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.currencyHider_btn_phn {
  display: none
}
@media only screen and (min-width:1024px) {
  .modal-content {
    background-color: var(--fsk-50);
    width: 400px;
    position: absolute;
    border-radius: calc(var(--fsk-site-border) * 4);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 1;
    transition: .14s ease;
    border: 3px solid var(--fsk-100)
  }
  .popupModal .modal-content {
    width: 500px!important
  }
  .modal.disable .modal-content {
    opacity: 0!important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute
  }
  .sidebar {
    width: 280px;
    background: var(--fsk-100);
    overflow: hidden;
    transition: all .3s ease 0;
    border-right: 1px solid var(--fsk-100);
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }
  .fsk-rtl .sidebar {
    right: 0;
    left: auto
  }
  .page-content {
    padding: 0 0 0 280px;
    width: 100%;
    transition: all .3s ease 0;
    position: relative;
    box-sizing: border-box
  }
  .fsk-rtl .page-content {
    padding: 0 280px 0 0!important
  }
  .masterBox .master-form.opened {
    position: fixed;
    border-radius: calc(var(--fsk-site-border) * 3);
    width: 450px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 6
  }
  .select-service-feature-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }
  .page-header {
    background: var(--fsk-50);
    border-bottom: 1px solid var(--fsk-100);
    display: flex;
    align-items: center;
    padding: 0 20px;
    min-height: 80px;
    z-index: 4;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    justify-content: flex-end
  }
  .popupimg {
    border-radius: calc(var(--fsk-site-border) * 2);
    height: 200px;
    object-fit: cover
  }
  .page-header .header-left {
    display: none!important
  }
  .main-header-mobile {
    display: none
  }
  .main-header-btn-mobile-group {
    display: none!important
  }
  .ticket-view-message-list {
    padding-right: 5px
  }
  .opened .master-form-mobile {
    display: flex
  }
  .open-order-form {
    display: none!important
  }
  .masterBox .service-dropdown-item.active .buy-btn-master .open-order-form {
    display: flex!important;
    border-radius: calc(var(--fsk-site-border))
  }
  .masterBox .buy-btn.active {
    display: flex;
    position: fixed;
    bottom: 50px;
    color: #fff;
    line-height: 1;
    border-radius: calc(var(--fsk-site-border) * 2);
    cursor: pointer;
    z-index: 1;
    font-size: 18px;
    right: 20px;
    visibility: visible!important;
    flex-direction: column;
    gap: 10px
  }
  .masterBox .service-dropdown-item.active .buy-btn-master {
    position: absolute;
    right: -51px;
    top: 0;
    display: flex;
    height: 100%;
    visibility: hidden;
    transition: .14s ease;
    opacity: 0
  }
  .masterBox .service-dropdown-item.active:hover .buy-btn-master {
    position: absolute;
    right: -51px;
    z-index: 2;
    top: 0;
    display: flex;
    height: 100%;
    visibility: visible;
    opacity: 1
  }
  .fsk-rtl .masterBox .service-dropdown-item.active .buy-btn-master {
    left: -51px!important;
    right: auto
  }
  .fsk-rtl .masterBox .service-dropdown-item.active:hover .buy-btn-master {
    left: -51px!important;
    right: auto
  }
  .link-content.active,
  .settings-content.active {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    align-items: center;
    justify-content: center;
    width: 400px
  }
  .panel-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px
  }
  .services-item-bottom {
    border-radius: calc(var(--fsk-site-border) * 1.5);
    display: flex;
    gap: 5px;
    line-height: 1
  }
  .services-item-feature {
    color: var(--fsk-500);
    padding: 10px;
    border-radius: calc(var(--fsk-site-border));
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--fsk-200)
  }
  .name-servers-list {
    padding: 10px;
    display: flex;
    gap: 5px
  }
  .sidebar-btn {
    display: none
  }
  .header-search-box {
    width: 300px
  }
  .balance-box {
    padding: 10px 20px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 2);
    cursor: pointer;
    z-index: 6;
    padding-right: 40px
  }
  .user-box {
    position: relative;
    padding: 10px 20px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 2);
    cursor: pointer;
    z-index: 10
  }
  .user-info {
    margin-left: 5px
  }
  .header-user-box {
    position: relative
  }
  .header-user-btn {
    padding: 10px 20px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 3);
    cursor: pointer;
    transition: all .3s ease 0;
    z-index: 5;
    position: relative
  }
  .header-btn-box {
    display: flex;
    gap: 15px;
    font-size: 17px;
    align-items: center
  }
  .language-dropdown.active {
    position: absolute;
    margin-top: 60px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 4);
    visibility: visible;
    opacity: 1;
    z-index: 4;
    display: flex;
    width: 269px;
    max-height: 400px;
    flex-direction: column;
    overflow: hidden;
    z-index: 8;
    border: 3px solid var(--fsk-200)
  }
  .language-dropdown {
    display: none
  }
  .currency-list {
    display: flex;
    position: absolute;
    flex-direction: column;
    top: calc(100% + 10px);
    right: 0;
    margin-top: 0;
    background: var(--fsk-100);
    padding: 10px;
    border-radius: calc(var(--fsk-site-border) * 2);
    gap: 5px;
    visibility: hidden;
    opacity: 0
  }
  .currency-list.active {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    margin-top: 0;
    background: var(--fsk-100);
    padding: 10px;
    border-radius: calc(var(--fsk-site-border) * 4);
    gap: 10px;
    visibility: visible;
    opacity: 1;
    z-index: 8;
    border: 3px solid var(--fsk-200)
  }
  .user-balance {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-end
  }
  .currency-box {
    display: flex;
    justify-content: space-between;
    background: var(--fsk-200);
    border-radius: calc(var(--fsk-site-border) * 2);
    font-size: 14px;
    transition: all .3s ease 0;
    width: 120px
  }
  .currency-box b {
    width: 60px;
    background: var(--fsk-site-color);
    color: #fff;
    font-weight: 400;
    display: flex;
    box-sizing: border-box;
    border-radius: calc(var(--fsk-site-border));
    justify-content: center;
    align-items: center;
    margin: 5px
  }
  .currency-box span {
    padding: 9px 10px
  }
  .currencies-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px
  }
  .currency-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--fsk-900)
  }
  .order-alert-box {
    max-height: 800px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 2);
    display: flex;
    flex-direction: column;
    z-index: 10;
    width: 350px;
    transition: .3s ease;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
  }
  .order-alert-box.close {
    height: 0;
    transition: .3s ease;
    overflow: hidden;
    width: 0;
    visibility: hidden
  }
  .category-dropdown.active {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    background: var(--fsk-50);
    border: 4px solid var(--fsk-100);
    margin-top: 10px;
    padding: 0 0 0 5px;
    z-index: 1;
    border-radius: calc(var(--fsk-site-border) * 4);
    display: block;
    z-index: 5;
    overflow: hidden
  }
  .service-dropdown.active {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    background: var(--fsk-100);
    margin-top: 10px;
    border-radius: calc(var(--fsk-site-border) * 4);
    display: block;
    z-index: 5;
    overflow: hidden;
    border: 4px solid var(--fsk-100)
  }
  .payment-dropdown.active {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    background: var(--fsk-100);
    margin-top: 10px;
    padding: 0 0 0 10px;
    z-index: 1;
    border-radius: calc(var(--fsk-site-border) * 4);
    display: block;
    z-index: 5;
    overflow: hidden;
    border: 3px solid var(--fsk-200)
  }
  .bottom-navigaiton {
    display: none!important
  }
  .service-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 10px
  }
  .service-dropdown-box {
    overflow: auto;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--fsk-50)
  }
  .category-dropdown-box::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .category-dropdown-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -16px
  }
  .payment-dropdown-box::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .payment-dropdown-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -16px
  }
  .service-list::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .service-list::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    z-index: 1;
    background: linear-gradient(180deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -15px
  }
  .search-service-box.empty::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .search-service-box.empty::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    z-index: 1;
    background: linear-gradient(180deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: 0
  }
  .service-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px
  }
  .language-btn {
    padding: 10px 20px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 2);
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px
  }
  .main-header .language-btn {
    background: var(--fsk-200)
  }
  .main-header .language-btn:hover {
    background: var(--fsk-300)
  }
  .language-btn:hover {
    background: var(--fsk-200)
  }
  .language-btn.active {
    background: var(--fsk-site-color)!important;
    color: #fff;
    z-index: 8
  }
  .language-btn .fa-caret-down {
    transform: rotate(0);
    transition: .3s ease;
    font-size: 18px
  }
  .language-btn.active .fa-caret-down {
    transform: rotate(-180deg)
  }
  .services-list-item {
    display: flex;
    justify-content: space-between;
    padding: 7px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 2);
    gap: 5px;
    margin-bottom: 10px
  }
  .services-list-right {
    display: flex;
    gap: 5px;
    width: 150px;
    justify-content: space-between;
    flex-direction: column
  }
  .affiliate-box {
    padding: 10px;
    background: var(--fsk-100);
    color: var(--fsk-100);
    display: flex;
    border-radius: calc(var(--fsk-site-border) * 2);
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 10px;
    color: var(--fsk-800);
    justify-content: space-between
  }
  .affiliate-pay-list .table {
    margin-bottom: 0;
    font-size: 14px
  }
}
@media only screen and (max-width:1024px) {
  .modal-content {
    background-color: var(--fsk-50);
    position: fixed;
    border-radius: calc(var(--fsk-site-border) * 3);
    bottom: 0;
    right: 0;
    left: 0;
    transition: .14s ease
  }
  .modal.disable .modal-content {
    position: fixed;
    bottom: -200px;
    right: 0;
    left: 0
  }
  .sidebar {
    width: 280px;
    overflow: hidden;
    transition: all .3s ease 0;
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column
  }
  .sidebar.active {
    left: 0;
    background: var(--fsk-100);
    z-index: 5
  }
  .fsk-rtl .sidebar.active {
    left: auto;
    right: 0
  }
  .sidebar-content.active {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 5
  }
  .page-content {
    padding: 70px 0 0;
    width: 100%
  }
  .select-service-feature-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
  }
  .page-header {
    display: flex;
    background: var(--fsk-100);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--fsk-100);
    justify-content: space-between;
    padding: 20px 15px;
    z-index: 4
  }
  .serivce-dropdown-bottom {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: flex-start
  }
  .popupimg {
    border-radius: calc(var(--fsk-site-border) * 2);
    height: 200px;
    object-fit: cover
  }
  .header-left {
    display: flex;
    align-items: center
  }
  .announcements-box {
    box-sizing: border-box;
    width: 100%!important;
    margin: 0!important;
    border-radius: 0!important;
    border: 0!important;
    left: -500px!important
  }
  .announcements-box.active {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0
  }
  .ticket-view-bottom form {
    margin-bottom: 70px
  }
  .update-service-name {
    font-size: 12px!important
  }
  .update-top {
    flex-direction: column!important;
    gap: 10px
  }
  .update-date {
    background: var(--fsk-100);
    padding: 5px;
    border-radius: calc(var(--fsk-site-border) * .7);
    margin: -2px -7px
  }
  .masterBox .service-dropdown-item.active .buy-btn-master {
    display: none
  }
  .masterBox .master-form.opened {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0 0;
    z-index: 6
  }
  .masterBox .buy-btn.active {
    display: flex;
    position: fixed;
    bottom: 90px;
    color: #fff;
    line-height: 1;
    border-radius: calc(var(--fsk-site-border) * 2);
    cursor: pointer;
    z-index: 1;
    font-size: 18px;
    right: 20px;
    visibility: visible!important;
    flex-direction: column;
    gap: 10px
  }
  .link-content.active,
  .settings-content.active {
    display: flex;
    inset: 0;
    position: fixed;
    z-index: 5;
    justify-content: center;
    width: 100%;
    bottom: 0;
    align-items: flex-end
  }
  .neworder-settings-box {
    border-radius: calc(var(--fsk-site-border) * 3) calc(var(--fsk-site-border) * 3) 0 0!important
  }
  .panel-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px
  }
  .services-item-bottom {
    border-radius: calc(var(--fsk-site-border) * 1.5);
    display: grid;
    gap: 5px;
    line-height: 1;
    grid-template-columns: 1fr 1fr
  }
  .services-item-feature {
    color: var(--fsk-500);
    padding: 10px;
    background: var(--fsk-200);
    border-radius: calc(var(--fsk-site-border));
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1
  }
  .avg {
    grid-area: 2/1/3/3
  }
  .name-servers-list {
    padding: 10px;
    display: flex;
    gap: 5px;
    flex-direction: column
  }
  .sidebar-btn {
    display: flex;
    border-radius: calc(var(--fsk-site-border) * 2);
    font-size: 1.22rem;
    align-items: center;
    justify-content: center;
    line-height: 1
  }
  .sidebar-btn i {
    font-size: 1.22rem;
    margin-left: 5px;
    margin-right: 0;
    gap: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1
  }
  .header-search-box {
    display: none
  }
  .balance-box {
    display: none
  }
  .user-info {
    display: none
  }
  .header-user-box {
    position: relative
  }
  .header-user-btn {
    padding: 10px 20px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 2);
    cursor: pointer;
    position: relative;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s ease
  }
  .header-btn-box {
    display: flex;
    font-size: 1.22rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 10px
  }
  .language-dropdown.active {
    position: fixed;
    margin-top: 60px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0 0;
    display: flex;
    max-height: 400px;
    flex-direction: column;
    overflow: hidden;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 8;
    visibility: visible;
    opacity: 1
  }
  .language-dropdown {
    visibility: hidden;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    max-height: 400px
  }
  .color-change-box img {
    width: -webkit-fill-available!important
  }
  .currency-list {
    display: flex;
    position: fixed;
    flex-direction: column;
    margin-top: 60px;
    background: var(--fsk-100);
    padding: 10px;
    border-radius: calc(var(--fsk-site-border) * 2);
    gap: 5px;
    visibility: hidden;
    left: 0;
    right: 0;
    bottom: -300px;
    opacity: 0;
    transition: all .3s ease 0
  }
  .currency-list.active {
    display: flex;
    position: fixed;
    background: var(--fsk-100);
    padding: 20px;
    border-radius: calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0 0;
    visibility: visible;
    opacity: 1;
    z-index: 4;
    bottom: 0;
    left: 0;
    right: 0;
    gap: 10px
  }
  .user-balance {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-end
  }
  .currency-box {
    display: flex;
    justify-content: space-between;
    background: var(--fsk-200);
    border-radius: calc(var(--fsk-site-border) * 2);
    font-size: 14px;
    transition: all .3s ease 0;
    gap: 5px;
    font-size: 18px
  }
  .currency-box b {
    width: 50px;
    background: var(--fsk-site-color);
    color: #fff;
    font-weight: 400;
    display: flex;
    box-sizing: border-box;
    border-radius: calc(var(--fsk-site-border));
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 5px
  }
  .currency-box span {
    gap: 5px;
    padding: 5px 10px
  }
  .currencies-box {
    gap: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }
  .currency-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--fsk-900)
  }
  .order-alert-box {
    max-height: 800px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    transition: .3s ease
  }
  .order-alert-box.close {
    height: 0;
    transition: .3s ease;
    overflow: hidden;
    visibility: hidden
  }
  .category-dropdown.active {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background: var(--fsk-50);
    margin-top: 10px;
    padding: 15px;
    z-index: 1;
    border-radius: calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding-bottom: 0
  }
  .service-dropdown.active {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background: var(--fsk-50);
    margin-top: 10px;
    padding: 0 15px 0 15px;
    z-index: 1;
    border-radius: calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 400px;
    z-index: 5;
    overflow: hidden
  }
  .payment-dropdown.active {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background: var(--fsk-100);
    margin-top: 10px;
    padding: 15px;
    z-index: 1;
    border-radius: calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding-bottom: 0
  }
  .category-dropdown-header {
    width: 100%;
    display: flex!important;
    justify-content: space-between;
    margin-top: 0;
    margin-bottom: 20px;
    box-sizing: border-box;
    align-items: center
  }
  .payment-dropdown-header {
    width: 100%;
    display: flex!important;
    justify-content: space-between;
    margin-top: 0;
    margin-bottom: 20px;
    box-sizing: border-box;
    align-items: center
  }
  .service-dropdown-header {
    width: 100%;
    display: flex!important;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 10px;
    box-sizing: border-box;
    align-items: center
  }
  .service-dropdown-box {
    overflow: auto;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 7px
  }
  .category-dropdown-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .category-dropdown-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -16px
  }
  .payment-dropdown-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .payment-dropdown-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -16px
  }
  .service-list::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(360deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .service-list::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 25px;
    background: linear-gradient(180deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -15px;
    z-index: 1
  }
  .language-list::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .language-list::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 25px;
    background: linear-gradient(180deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -10px
  }
  .search-service-box.empty::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 100%;
    height: 20px;
    background: linear-gradient(360deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box
  }
  .search-service-box.empty::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    z-index: 1;
    background: linear-gradient(180deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%);
    box-sizing: border-box;
    margin-top: -3px
  }
  .service-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 14px;
    padding-bottom: 10px
  }
  .language-btn {
    display: none
  }
  .services-list-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: var(--fsk-100);
    border-radius: calc(var(--fsk-site-border) * 3);
    gap: 5px;
    flex-direction: column;
    margin-bottom: 10px
  }
  .services-list-right {
    display: grid;
    gap: 5px;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between
  }
  .affiliate-box {
    padding: 15px;
    background: var(--fsk-100);
    color: var(--fsk-100);
    display: flex;
    border-radius: calc(var(--fsk-site-border) * 3);
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 10px;
    color: var(--fsk-800);
    justify-content: space-between;
    flex-direction: column
  }
  .affiliate-pay-list .table {
    margin-bottom: 0;
    font-size: 12px
  }
  .payout-item {
    font-size: 12px
  }
  .main-header-link {
    display: none!important
  }
  .main-header-btn {
    display: none!important
  }
  .main-header-mobile.active {
    visibility: visible;
    opacity: 1;
    z-index: 1
  }
}
.well {
  padding: 15px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 3);
  display: flex;
  flex-direction: column
}
.neworder-form {
  gap: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0
}
.neworder-form .tooltip {
  display: none!important
}
.well.masterBox {
  padding: 0;
  background: 0;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  flex-direction: column;
  position: relative
}
.marginTop {
  margin-top: 20px
}
.well form {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.masterBox .master-form {
  padding: 15px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 4)
}
.masterBox .master-form.opened .btn-min {
  width: 100%;
  display: flex;
  justify-content: center
}
#fields {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.currency-box:hover {
  background: var(--fsk-300)
}
.currency-bg.active {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 4
}
.account-bg.active {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 9
}
.header-user-btn:hover {
  background: var(--fsk-200)
}
.balance-box:hover {
  background: var(--fsk-200)
}
.balance-box.active {
  background: var(--fsk-site-color);
  color: #fff
}
.balance-box.active .fa-caret-down {
  transform: rotate(-180deg);
  transition: all .3s ease 0
}
.balance-box .fa-caret-down {
  transition: all .3s ease 0
}
.header-right {
  display: flex;
  align-items: center;
  gap: 5px
}
.header-btn-box {
  display: flex;
  align-items: center;
  gap: 14px
}
.fsk-rtl .header-btn-box {
  direction: ltr;
  flex-direction: row-reverse
}
.fsk-rtl .header-tools,
.fsk-rtl .header-account-actions {
  direction: ltr
}
.page-header .header-btn-box,
.page-header .header-tools,
.page-header .header-account-actions {
  display: flex!important;
  visibility: visible;
  opacity: 1
}
.page-header .header-tools .balance-box,
.page-header .header-tools .language-btn,
.page-header .header-tools .header-tool-btn {
  display: inline-flex!important;
  visibility: visible;
  opacity: 1
}
.header-tools,
.header-account-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  direction: ltr
}
.header-tools .user-balance {
  align-items: center
}
.header-tools .header-balance-group {
  flex-direction: row;
  gap: 6px
}
.header-balance-display {
  display: inline-flex;
  height: 40px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0 7px 0 12px;
  border: 1px solid var(--header-control-border);
  border-radius: 14px;
  background: var(--header-control-bg);
  color: var(--fsk-700);
  white-space: nowrap
}
.header-balance-value {
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums
}
.header-balance-toggle {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--header-control-hover);
  color: var(--fsk-500);
  cursor: pointer;
  transition: background var(--t), color var(--t)
}
.header-balance-toggle:hover {
  background: var(--fsk-site-color);
  color: #fff
}
.header-balance-toggle i {
  font-size: 12px
}
.header-btn-box .header-balance-toggle > i {
  font-size: 12px!important
}
.header-tools .balance-box,
.header-tools .header-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--header-control-border);
  border-radius: 14px;
  background: var(--header-control-bg);
  color: var(--fsk-700);
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t)
}
.header-tools .header-tool-btn i {
  margin: 0;
  font-size: 16px;
  line-height: 1
}
.header-tools .balance-box {
  padding-right: 12px;
  white-space: nowrap
}
.header-tools .balance-box > i:first-child,
.header-tools .language-btn > i:first-child {
  color: var(--fsk-site-color)
}
.header-tools .balance-box > i:first-child {
  color: var(--fsk-700)
}
.header-tools .header-tool-btn:hover {
  border-color: var(--fsk-site-color);
  background: var(--header-control-hover);
  color: var(--fsk-site-color);
  transform: translateY(-1px)
}
.header-tools .header-tool-btn:hover > i {
  color: var(--fsk-site-color)
}
.header-tools .header-tool-btn:focus-visible,
.header-logout:focus-visible,
.header-account:focus-visible {
  outline: 2px solid var(--fsk-site-color);
  outline-offset: 3px
}
.header-tools .balance-box.active,
.header-tools .language-btn.active {
  border-color: var(--fsk-site-color);
  background: var(--fsk-site-color)!important;
  color: #fff
}
.header-tools .balance-box.active i,
.header-tools .language-btn.active i {
  color: #fff
}
.header-tools .language-box {
  position: relative
}
.header-tools .language-btn {
  display: inline-flex;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--header-control-border);
  border-radius: 14px;
  background: var(--header-control-bg);
  color: var(--fsk-700);
  box-shadow: none
}
.header-tools .language-btn .fa-caret-down {
  font-size: 9px
}
.header-tools .header-theme-btn,
.header-tools .header-icon-btn {
  width: 40px;
  padding: 0
}
.header-notification-btn {
  position: relative
}
.header-notification-btn .notification-icon {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fsk-site-color)
}
.header-account-actions {
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent
}
.header-logout {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--fsk-site-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(80,40,180,.2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), filter var(--t)
}
.header-logout:hover {
  color: #fff;
  box-shadow: 0 6px 16px rgba(80,40,180,.27);
  filter: brightness(1.05);
  transform: translateY(-1px)
}
.header-logout i {
  font-size: 16px
}
.header-account {
  display: flex;
  direction: rtl;
  align-items: center;
  gap: 8px;
  padding: 0 3px;
  color: var(--fsk-900);
  text-decoration: none
}
.header-account-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0
}
.header-account-name {
  max-width: 180px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap
}
.header-account-status {
  color: #13a84a;
  font-size: 10px;
  font-weight: 600
}
.header-account-avatar {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fsk-200);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fsk-site-color) 10%, var(--fsk-100));
  color: var(--fsk-site-color);
  font-size: 16px;
  font-weight: 700;
  transition: border-color var(--t), transform var(--t)
}
.header-account-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px
}
.header-account-online {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--fsk-50);
  border-radius: 50%;
  background: #13b84a
}
.header-account:hover {
  color: var(--fsk-site-color)
}
.header-account:hover .header-account-avatar {
  border-color: var(--fsk-site-color);
  transform: scale(1.04)
}
.button-group {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.sidebar-top {
  display: flex;
  height: 100%;
  overflow: auto;
  position: relative;
  transition: all .3s ease 0;
  padding-top: 10px;
  flex-direction: column
}
.sb-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 20px 6px;
  padding: 10px 13px;
  border: 1px solid var(--sb-bdr);
  border-radius: var(--r-lg);
  background: var(--sb-card-bg);
  color: var(--fsk-site-color);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: background var(--t), border-color var(--t)
}
.sb-logo {
  display: block;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain
}
.sidebar-profile {
  display: grid;
  gap: 8px;
  margin: 0 20px 12px
}
.sidebar-profile-user,
.sidebar-profile-level {
  border: 1px solid var(--sb-bdr);
  border-radius: 15px;
  background: var(--sb-card-bg);
  color: var(--sb-text)
}
.sidebar-profile-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 11px;
  direction: ltr
}
.sidebar-profile-info {
  flex: 1;
  min-width: 0
}
.sidebar-profile-name {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--sb-text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl
}
.sidebar-profile-name i {
  color: var(--fsk-site-color);
  font-size: 12px
}
.sidebar-profile-balance {
  display: block;
  margin-top: 4px;
  color: var(--sb-text-muted);
  font-size: 11px;
  text-align: right;
  direction: ltr
}
.sidebar-profile-avatar {
  display: flex;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fsk-site-color);
  border-radius: 50%;
  background: var(--sb-avatar-bg);
  color: var(--sb-text);
  font-size: 16px;
  font-weight: 700
}
.sidebar-profile-settings {
  display: flex;
  flex: 0 0 32px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--sb-hov);
  color: var(--sb-tx);
  text-decoration: none
}
.sidebar-profile-level {
  padding: 9px 11px
}
.sidebar-profile-level-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--sb-text);
  font-size: 11px;
  font-weight: 600;
  direction: rtl
}
.sidebar-profile-level-title i {
  color: var(--fsk-site-color)
}
.sidebar-profile-progress {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--sb-hov)
}
.sidebar-profile-progress span {
  display: block;
  width: var(--level-progress, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--fsk-site-gradient)
}
.sidebar-profile-discount {
  display: block;
  margin-top: 7px;
  color: var(--sb-tx2);
  font-size: 10px;
  text-align: left
}
.sidebar .logo {
  height: auto;
  width: 210px;
  box-sizing: border-box;
  margin: 20px 20px 20px 35px;
  box-shadow: 0 0 20px 20px var(--fsk-100);
  z-index: 1;
  background: var(--fsk-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px
}
.page-header .logo {
  height: auto;
  width: 130px;
  box-sizing: border-box;
  box-shadow: 0 0 20px 20px var(--fsk-100);
  z-index: 1;
  background: var(--fsk-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px
}
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: auto;
  margin: 0 10px 24px;
  transition: all .3s ease 0;
}
.sidebar-heading {
  padding: 10px 12px 4px;
  color: var(--sb-tx);
  font-size: 12px;
  font-weight: 500;
  text-align: right
}
.sidebar-group-title {
  margin-top: 12px;
  padding: 13px 12px 3px;
  border-top: 1px solid var(--sb-bdr);
  color: var(--sb-text);
  font-size: 12px;
  font-weight: 700;
  text-align: right
}
.sidebar-group-title.primary {
  margin-top: 0;
  padding-top: 3px;
  border-top: 0
}
.sidebar-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 56px;
  max-height: none;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r);
  background: transparent;
  color: var(--fsk-700);
  font-size: .9rem;
  font-weight: 600;
  text-align: right;
  text-decoration: none;
  position: relative;
  transition: background var(--t), color var(--t);
  box-sizing: border-box;
  cursor: pointer
}
.sidebar-menu-item .sidebar-menu-title {
  display: flex;
  align-items: center;
  order: 1;
  flex: 1;
  width: auto;
  gap: 10px;
  color: inherit;
  white-space: normal
}
.sidebar-menu-item i {
  display: flex;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--sb-icon-bg);
  color: var(--sb-text);
  font-size: 16px;
  line-height: 1;
  transition: transform var(--t), background var(--t), color var(--t)
}
.sidebar-menu-item.active {
  background: var(--fsk-site-color);
  color: #fff
}
.sidebar-menu-item.active .sidebar-menu-title {
  color: #fff
}
.sidebar-menu-item.active::after {
  content: none
}
.sidebar-menu-item.active i {
  background: rgba(255,255,255,.18);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.18)
}
.sidebar-menu-item:hover {
  background: var(--sb-hov)
}
.sidebar-menu-item:hover i {
  transform: translateX(-3px)
}
.sidebar-bottom {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: var(--fsk-100);
  box-shadow: 0 0 50px 50px var(--fsk-100);
  z-index: 1;
  position: relative;
  transition: .3s ease
}
.sidebar-bottom.active {
  box-shadow: none
}
.sidebar-bottom .btn {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px!important;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.header-btn-box i {
  font-size: 22px
}
.balance-box i {
  font-size: 18px!important
}
.balance-info {
  margin: 0 5px
}
.header-user-box i {
  font-size: 18px!important
}
.color-change-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  color: var(--fsk-800);
  width: -webkit-fill-available
}
.color-change-box img {
  width: 73px;
  border: 2px solid var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  cursor: pointer;
  object-fit: cover;
  height: 45px
}
.color-btn.active img {
  border: 2px solid var(--fsk-site-color)
}
.color-btn.active::before {
  z-index: 2;
  content: "";
  position: absolute;
  width: 70%;
  height: 13px;
  background: var(--fsk-site-color);
  opacity: 1;
  bottom: 0;
  border-radius: calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0 0
}
.color-btn {
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 14px;
  color: var(--fsk-500);
  gap: 5px;
  justify-content: flex-end;
  align-items: center
}
.color-btn span {
  width: 100%
}
.fsk-rtl .color-btn span {
  text-align: right
}
.color-btn i,
.hidden {
  display: none!important
}
.color-btn.active i {
  position: absolute;
  z-index: 2;
  bottom: 1px;
  color: #fff;
  display: block!important;
  font-size: 12px!important
}
.close-user-box {
  width: 100%;
  display: flex;
  justify-content: flex-end
}
.close-user-box i {
  background: var(--fsk-200);
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: center;
  line-height: 1;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.close-user-box i:hover {
  background: var(--fsk-300);
  color: #fff
}
.sidebar-user-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  min-height: 52px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border,8px) * 2);
  cursor: pointer;
  transition: background .2s ease;
  position: relative;
  overflow: hidden
}
.user-avatar-container,
.userbox-arrow,
.userbox-username {
  position: relative;
  z-index: 1
}
.sidebar-user-box:hover .pattern-grid {
  opacity: .3;
  transition: opacity .2s ease
}
.light-pattern-grid {
  filter: blur(.8px);
  transform: skewX(-6deg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  grid-template-rows: repeat(5,1fr);
  pointer-events: none;
  z-index: 0;
  padding: 2px;
  margin: -2px
}
.light-pattern-grid i {
  color: var(--fsk-800);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px
}
.light-pattern-grid > :nth-child(n+1):nth-child(-n+6) {
  opacity: .018
}
.light-pattern-grid > :nth-child(n+7):nth-child(-n+12) {
  opacity: .025
}
.light-pattern-grid > :nth-child(n+13):nth-child(-n+18) {
  opacity: .055
}
.light-pattern-grid > :nth-child(n+19):nth-child(-n+24) {
  opacity: .025
}
.light-pattern-grid > :nth-child(n+25):nth-child(-n+30) {
  opacity: .016
}
.light-pattern-grid > :nth-child(10),
.light-pattern-grid > :nth-child(15),
.light-pattern-grid > :nth-child(16),
.light-pattern-grid > :nth-child(21),
.light-pattern-grid > :nth-child(22),
.light-pattern-grid > :nth-child(27),
.light-pattern-grid > :nth-child(28),
.light-pattern-grid > :nth-child(3),
.light-pattern-grid > :nth-child(4),
.light-pattern-grid > :nth-child(9) {
  opacity: calc(opacity + .01)
}
.user-avatar-container {
  position: relative;
  flex-shrink: 0
}
.user-badge {
  position: absolute;
  top: -10px;
  right: -6px;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3
}
.user-badge img {
  transform: rotate(36deg);
  width: 40px;
  height: 40px;
  object-fit: contain
}
.user-box-title {
  font-size: 16px;
  visibility: visible;
  opacity: 1;
  max-height: 100px;
  transition: all .1s ease 0
}
.userbox-username {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--fsk-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px
}
.user-box-username {
  line-height: 1;
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--fsk-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 12px
}
.userbox-username i {
  font-size: 12px;
  margin-left: 3px
}
.userbox-username .fi {
  display: inline-block;
  vertical-align: -.22em;
  line-height: 1
}
.userbox-arrow .fi {
  font-size: 12px;
  display: inline-block;
  vertical-align: -.22em;
  color: var(--fsk-600);
  line-height: 1
}
.sidebar-user-box:hover {
  border: 1px solid var(--fsk-300)
}
.red-btn {
  color: var(--fsk-red);
  align-items: center;
  line-height: 1;
  gap: 5px!important
}
.red-btn i {
  font-size: 18px
}
.sidebar-scroll {
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease 0;
  position: absolute;
  top: -27px;
  left: 22px;
  transform: scale(.2)
}
.sidebar-scroll.active {
  position: absolute;
  color: #fff;
  padding: 10px;
  z-index: 1;
  top: -38px;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  left: 14px;
  background: var(--fsk-site-color);
  visibility: initial;
  opacity: 1;
  transform: scale(1);
  cursor: pointer
}
.sidebar-scroll i {
  animation: 1s ease 0 infinite normal none running bounce
}
.currency-top i {
  display: flex;
  align-items: center;
  color: var(--fsk-500);
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  cursor: pointer
}
.curency-pagination {
  background: var(--fsk-200);
  padding: 5px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  gap: 5px;
  justify-content: space-between
}
.curency-pagination button {
  border: 0;
  background: var(--fsk-300);
  color: var(--fsk-700);
  width: 100%;
  border-radius: calc(var(--fsk-site-border));
  cursor: pointer;
  padding: 4px
}
.curency-pagination button.active {
  background: var(--fsk-site-color);
  color: #fff
}
.page-title {
  display: flex;
  gap: 10px;
  font-size: 18px;
  margin-top: 20px;
  align-items: center;
  line-height: 16px;
  gap: 10px
}
.neworder-top {
  display: flex;
  align-items: center;
  margin-top: 20px;
  justify-content: space-between
}
.neworder-top .page-title {
  margin: 0
}
.order-page-switch {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 6px;
  margin: 0;
  padding: 8px 15px 0;
  border: 0;
  border-radius: calc(var(--fsk-site-border) * 3) calc(var(--fsk-site-border) * 3) 0 0;
  background: var(--fsk-100)
}
.order-page-switch-link {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 3);
  background: var(--fsk-50);
  color: var(--fsk-700);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease
}
.order-page-switch-link:hover {
  color: var(--fsk-900);
  background: var(--fsk-200)
}
.order-page-switch-link.active {
  border-color: color-mix(in srgb, var(--fsk-site-color) 26%, var(--fsk-200));
  background: color-mix(in srgb, var(--fsk-site-color) 10%, var(--fsk-50));
  color: var(--fsk-site-color);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--fsk-site-color) 10%, transparent)
}
.order-page-switch-link.active:hover {
  border-color: color-mix(in srgb, var(--fsk-site-color) 32%, var(--fsk-200));
  background: color-mix(in srgb, var(--fsk-site-color) 14%, var(--fsk-50));
  color: var(--fsk-site-color)
}
.order-page-switch-link i {
  font-size: 14px;
  opacity: .85
}
@media only screen and (max-width: 480px) {
  .order-page-switch {
    gap: 5px;
    padding-right: 10px;
    padding-left: 10px
  }
  .order-page-switch-link {
    gap: 6px;
    min-height: 40px;
    padding: 7px 6px;
    font-size: 12px
  }
}
.affiliates-page .page-title {
  color: #fff
}
.page-title i {
  font-size: 20px
}
::-webkit-scrollbar {
  width: 6px
}
::-webkit-scrollbar-track {
  background: 0 center
}
::-webkit-scrollbar-thumb {
  background-color: var(--fsk-400);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.sidebar ::-webkit-scrollbar-thumb {
  display: none
}
.sidebar ::-webkit-scrollbar {
  width: 0
}
@keyframes bounce {
  0,
  100% {
    transform: translateY(5px)
  }
  50% {
    transform: translateY(-5px)
  }
}
.order-alert-content {
  background: #13151a69;
  display: flex;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 9;
  -webkit-backdrop-filter: blur(8px)!important;
  backdrop-filter: blur(8px);
  transition: .3s ease
}
.order-alert-content.close {
  visibility: hidden;
  transition: .3s ease;
  -webkit-backdrop-filter: blur(0)!important;
  backdrop-filter: blur(0);
  background: #13151a00
}
.order-alert-box.error {
  height: 230px
}
.alert-close {
  position: absolute;
  right: 0;
  color: var(--fsk-800);
  padding: 5px 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  margin: 10px;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 18px;
  border: 0
}
.alert-box-top {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  font-size: 18px;
  align-items: center;
  color: var(--fsk-800)
}
.alert-box-bottom {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  padding: 10px;
  gap: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0
}
.alert-box-bottom span {
  padding: 10px 15px;
  white-space: nowrap;
  color: var(--fsk-800);
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: calc(var(--fsk-site-border) * 2);
  background: var(--fsk-200)
}
.select2.select2-container .select2-selection {
  border: 0 solid #fff0;
  -webkit-border-radius: calc(var(--fsk-site-border) * 2);
  -moz-border-radius: calc(var(--fsk-site-border) * 2);
  border-radius: calc(var(--fsk-site-border) * 2);
  height: 45px;
  color: var(--fsk-800);
  display: flex;
  background: var(--fsk-200);
  outline: 0;
  transition: .15s ease-in-out;
  align-items: center
}
.lite .select2.select2-container .select2-selection {
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2)!important
}
.select2.select2-container .select2-selection .select2-selection__rendered {
  line-height: 32px;
  padding-right: 33px;
  color: var(--fsk-800);
  border: 0;
  padding-left: 15px;
  width: 100%;
  display: flex
}
.select2.select2-container .select2-selection .select2-selection__arrow {
  -webkit-border-radius: 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0;
  -moz-border-radius: 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0;
  border-radius: 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0;
  height: 100%;
  width: 26px
}
.select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.lite .select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
  -webkit-border-radius: 0 10px 0 0;
  -moz-border-radius: 0 10px 0 0
}
.select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
  border: 0 solid #34495e
}
.select2.select2-container.select2-container--focus .select2-selection {
  border: 0 solid #ffffff00;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  align-items: center
}
.select2.select2-container .select2-selection--multiple {
  height: auto;
  min-height: 34px
}
.select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin-top: 0;
  height: 32px
}
.select2.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: block;
  padding: 0 4px;
  line-height: 29px
}
.select2.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  -webkit-border-radius: calc(var(--fsk-site-border) * 2);
  -moz-border-radius: calc(var(--fsk-site-border) * 2);
  border-radius: calc(var(--fsk-site-border) * 2);
  margin: 4px 4px 0 0;
  padding: 0 6px 0 22px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  position: relative
}
.select2.select2-container .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  margin: 0;
  text-align: center;
  color: #e74c3c;
  font-weight: 700;
  font-size: 16px
}
.select2-container .select2-dropdown {
  border-radius: calc(var(--fsk-site-border) * 4);
  background: var(--fsk-200);
  border: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 3px solid var(--fsk-300)
}
.select2-container .select2-dropdown .select2-results,
.select2-container .select2-dropdown .select2-search {
  padding: 10px
}
.select2-container .select2-dropdown .select2-search input {
  outline: 0;
  border-bottom: 0;
  padding: 12px 14px;
  background: var(--fsk-300);
  border: 0;
  color: var(--fsk-800);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.select2-container .select2-dropdown .select2-results ul {
  background: 0;
  color: var(--fsk-800);
  display: flex;
  flex-direction: column;
  max-height: 286px;
  padding-right: 5px
}
.fsk-rtl .select2-container .select2-dropdown .select2-results ul {
  padding-left: 5px;
  padding-right: 0
}
.select2-results__option[aria-selected] {
  cursor: pointer;
  transition: .2s;
  padding: 12px 10px;
  font-size: 12px;
  border-radius: calc(var(--fsk-site-border) * 2);
  height: auto;
  margin: 0
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--fsk-300)!important;
  background-color: var(--fsk-300);
  padding: 12px 10px
}
.select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
  background-color: var(--fsk-300)!important;
  transition: .2s;
  border-radius: calc(var(--fsk-site-border) * 2);
  margin: 0;
  color: var(--fsk-900)
}
.has-overflow {
  padding-right: 5px
}
.select2-order-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 5
}
.select2-service-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 5
}
.service-dropdown-item {
  display: flex;
  flex-direction: column;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2);
  cursor: pointer;
  transition: all .14s ease;
  position: relative;
  gap: 3px;
  padding: 5px
}
.service-dropdown-item.active {
  border: 2px solid var(--fsk-site-color)!important;
  padding: 3px
}
.service-dropdown-item.active .service-dropdown-price {
  border-radius: calc(var(--fsk-site-border))
}
.masterBox .service-dropdown-item {
  background: var(--fsk-100);
  position: relative
}
.service-dropdown-item .buy-btn-master {
  display: none
}
.masterBox .service-dropdown-item:hover {
  background: var(--fsk-200)
}
.service-dropdown-top {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-content: flex-start;
  justify-content: space-between
}
.serivce-dropdown-bottom {
  display: flex;
  gap: 3px;
  justify-content: space-between
}
.service-dropdown-name {
  font-size: 12px;
  background: var(--fsk-200);
  padding: 5px 10px;
  width: 100%;
  box-sizing: border-box;
  border-radius: calc(var(--fsk-site-border));
  color: var(--fsk-800);
  line-height: 1;
  transition: .14s ease;
  display: flex;
  align-items: center
}
.masterBox .service-dropdown-name {
  background: var(--fsk-200)
}
.service-dropdown-item:hover {
  background: var(--fsk-200)!important
}
.service-dropdown-item:hover .service-dropdown-name {
  background: var(--fsk-300)!important
}
.service-dropdown-item:hover .service-dropdown-minmax {
  background: var(--fsk-300)!important
}
.service-dropdown-item:hover .service-dropdown-info-item.avg {
  background: var(--fsk-300)!important
}
.service-dropdown-item:hover .service-features {
  background: var(--fsk-300)!important
}
.service-dropdown-name span {
  margin-right: 5px;
  font-size: 12px;
  line-height: 1.25
}
.service-dropdown-name img {
  height: 18px;
  width: 18px;
  margin-bottom: -2px
}
.service-dropdown-price {
  background: var(--fsk-site-color);
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border));
  text-align: center;
  white-space: nowrap;
  color: #fff;
  display: flex;
  font-size: 14px;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  justify-content: center
}
.service-dropdown-price small {
  font-size: 8px
}
.service-dropdown-info {
  display: flex;
  gap: 3px;
  background: 0 0!important;
  box-sizing: border-box;
  border-radius: calc(var(--fsk-site-border));
  font-size: 12px;
  transition: .14s ease;
  align-items: center
}
.service-dropdown-info-item.avg {
  padding: 5px;
  background: var(--fsk-200)!important;
  border-radius: calc(var(--fsk-site-border));
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  color: var(--fsk-500);
  transition: .14s ease
}
.masterBox .service-dropdown-info-item.avg {
  background: var(--fsk-200)
}
.masterBox .service-dropdown-item:hover .service-dropdown-info-item.avg {
  background: var(--fsk-300)
}
.service-dropdown-minmax {
  padding: 5px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border));
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  transition: .14s ease
}
.masterBox .service-dropdown-minmax {
  background: var(--fsk-200)
}
.masterBox .service-dropdown-item:hover .service-dropdown-minmax {
  background: var(--fsk-300)
}
.masterBox .service-dropdown-info {
  background: var(--fsk-100)
}
.service-selected-icon {
  display: none!important
}
.service-dropdown-item.active .service-selected-icon {
  display: flex!important;
  position: absolute!important;
  bottom: 6px;
  right: 10px;
  gap: 5px;
  padding-right: 5px;
  transition: .14s ease;
  line-height: 1;
  align-items: center;
  color: var(--fsk-900);
  font-size: 16px
}
.service-dropdown-info b {
  font-weight: 500;
  color: var(--fsk-700)
}
.dropdwon-box {
  position: relative
}
.dropdown-select-box {
  padding: 12px 15px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer
}
.masterBox .dropdown-select-box {
  background: var(--fsk-100)
}
.payment-box .dropdown-select-box {
  background: var(--fsk-100)
}
.dropdown-select-box img {
  height: 20px;
  width: 20px;
  line-height: 1;
  margin-bottom: -1px;
  margin-right: 4px
}
.dropdown-select-name {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  gap: 10px
}
.dropdown-select-name i {
  border: 1px solid var(--fsk-400);
  background: var(--fsk-300);
  border-radius: calc(var(--fsk-site-border));
  color: var(--fsk-800);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  line-height: 1;
  flex-shrink: 0
}
.dropdown-select-name span {
  margin-right: 5px
}
.payment-dropdown {
  display: none;
  position: absolute
}
.category-dropdown {
  display: none;
  position: absolute
}
.service-dropdown {
  display: none;
  position: absolute
}
.category-dropdown-box {
  overflow: auto;
  max-height: 400px;
  display: flex;
  gap: 10px;
  padding-right: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-direction: column
}
.category-dropdown-item {
  background: var(--fsk-100);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  cursor: pointer;
  transition: .14s ease;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  content-visibility: auto;
  contain-intrinsic-size: auto 42px
}
.category-dropdown-item img {
  width: 18px;
  height: 18px;
  margin-bottom: -2px
}
.category-dropdown-item:hover {
  background: var(--fsk-200)
}
.category-dropdown-item.active {
  background: var(--fsk-site-color);
  color: #fff
}
.category-dropdown-bg.active {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  z-index: 4
}
.payment-dropdown-box {
  overflow: auto;
  max-height: 290px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px
}
.payment-dropdown-item {
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  min-height: 37px;
  cursor: pointer;
  transition: .14s ease
}
.payment-dropdown-item img {
  width: 12px;
  height: 12px;
  margin-bottom: -2px
}
.payment-dropdown-item:hover {
  background: var(--fsk-300)
}
.payment-dropdown-item.active {
  background: var(--fsk-site-color);
  color: #fff
}
.payment-dropdown-item span {
  font-size: 14px
}
.payment-dropdown-bg.active {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 4
}
.service-dropdown-bg.active {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 4
}
.service-dropdown-header {
  display: none
}
.service-dropdown-title {
  font-size: 16px;
  color: var(--fsk-900)
}
.service-dropdown-header i {
  width: 32px;
  height: 32px;
  background: var(--fsk-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--fsk-900);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.payment-dropdown-header i {
  width: 32px;
  height: 32px;
  background: var(--fsk-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--fsk-900);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.category-dropdown-header i {
  width: 32px;
  height: 32px;
  background: var(--fsk-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--fsk-900);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.category-dropdown-header {
  display: none
}
.payment-dropdown-header {
  display: none
}
.search-service-list {
  display: none
}
.search-service-list.active {
  box-sizing: border-box;
  position: absolute;
  background: var(--fsk-50);
  border: 4px solid var(--fsk-100);
  z-index: 1;
  width: 100%;
  margin-top: 20px;
  border-radius: calc(var(--fsk-site-border) * 4);
  overflow: hidden;
  display: block
}
.search-service-box {
  max-height: 500px!important;
  overflow: auto
}
#search-service-list {
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px
}
.language-box {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: flex-end
}
.language-list {
  padding: 10px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 7px
}
.language-item {
  background: var(--fsk-200);
  width: 100%;
  box-sizing: border-box;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  justify-content: space-between;
  padding: 5px;
  white-space: nowrap;
  align-items: center;
  padding-left: 10px
}
.fsk-rtl .language-item {
  padding-right: 10px;
  padding-left: 5px
}
.language-item.selected {
  background: var(--fsk-site-color);
  color: #fff
}
.language-item.selected b {
  background: var(--fsk-100);
  color: var(--fsk-800)
}
.language-bg.active {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 7
}
.language-item b {
  padding: 2.5px 10px;
  background: var(--fsk-site-color);
  color: #fff;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--fsk-site-border))
}
.select-service-detail-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 4)
}
.select-service-item {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.select-service-name {
  padding: 10px;
  background: var(--fsk-200);
  display: flex;
  border-radius: calc(var(--fsk-site-border) * 2);
  color: var(--fsk-900)
}
.select-id {
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.select-id b {
  padding: 2.5px 10px;
  background: var(--fsk-300);
  color: var(--fsk-800);
  display: flex;
  border-radius: calc(var(--fsk-site-border));
  align-items: center;
  font-weight: 500;
  font-size: 12px
}
.select-price {
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  flex-direction: column;
  gap: 4px
}
.select-price b {
  padding: 2.5px 10px;
  background: var(--fsk-300);
  color: var(--fsk-800);
  border-radius: calc(var(--fsk-site-border));
  box-sizing: border-box;
  font-weight: 500;
  font-size: 12px
}
.select-avg {
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  flex-direction: column;
  gap: 4px
}
.select-avg b {
  padding: 2.5px 10px;
  background: var(--fsk-300);
  color: var(--fsk-800);
  display: flex;
  align-items: center;
  border-radius: calc(var(--fsk-site-border));
  font-weight: 500;
  font-size: 12px
}
.select-minmax {
  background: var(--fsk-200);
  padding: 5px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px
}
.select-minmax b {
  padding: 2.5px 10px;
  background: var(--fsk-300);
  color: var(--fsk-800);
  display: flex;
  align-items: center;
  border-radius: calc(var(--fsk-site-border));
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap
}
.select-service-description {
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.services-top-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 20px;
  gap: 10px
}
.services-category-box {
  background: var(--fsk-site-color);
  padding: 15px;
  border-radius: calc(var(--fsk-site-border) * 2);
  color: #fff;
  margin-bottom: 10px
}
.services-list {
  display: flex;
  flex-direction: column
}
.services-list-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  gap: 5px;
  font-size: 12px
}
.services-item-top {
  border-radius: calc(var(--fsk-site-border) * 1.5);
  line-height: 1;
  color: var(--fsk-900);
  display: flex;
  gap: 3px;
  align-items: center;
  font-size: 14px;
  margin-top: 3px
}
.favbox span {
  width: 28px;
  height: 28px;
  background: var(--fsk-site-color);
  border-radius: calc(var(--fsk-site-border) * .7);
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  cursor: pointer
}
.services-item-top img {
  height: 14px;
  width: 14px
}
.services-item-price {
  background: var(--fsk-site-color);
  color: #fff;
  padding: 10px;
  border-radius: calc(var(--fsk-site-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  height: 8px
}
.services-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1
}
.services-item-btn .btn {
  height: 28px
}
.disabled-button {
  cursor: not-allowed;
  opacity: .5
}
.btn-sm {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--fsk-site-border));
  line-height: 1;
  box-sizing: border-box
}
.ticket-box-btn .btn-sm {
  padding: 5px 15px
}
#description-content {
  max-height: 50vh;
  overflow: auto;
  display: flex;
  padding-bottom: 15px;
  background: var(--fsk-100);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2)
}
#description-content::after {
  position: absolute;
  bottom: 15px;
  width: 100%;
  height: 20px;
  margin-left: -15px;
  background: linear-gradient(360deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
  box-sizing: border-box
}
#description-content::before {
  position: absolute;
  width: 100%;
  height: 20px;
  z-index: 1;
  margin-left: -15px;
  background: linear-gradient(180deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
  box-sizing: border-box;
  margin-top: -10px
}
.progress {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  left: 0;
  height: 30px;
  top: 0;
  border-radius: calc(var(--fsk-site-border) * 2);
  overflow: hidden;
  background: var(--fsk-200)
}
.progress-value {
  animation: 1s infinite fadebrightness;
  box-shadow: 0 10px 40px -10px var(--fsk-green);
  border-radius: calc(var(--fsk-site-border));
  background: var(--fsk-green);
  height: 30px;
  width: 0;
  position: absolute;
  cursor: wait
}
.progress span {
  z-index: 1;
  margin: 5px 15px;
  color: var(--fsk-900)
}
@keyframes fadebrightness {
  0,
  100% {
    filter: brightness(1)
  }
  50% {
    filter: brightness(1.2)
  }
}
.order-status.pending {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--fsk-orange);
  color: #fff
}
.order-status.completed {
  border: 1px solid var(--fsk-green);
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--fsk-green);
  color: #fff!important
}
.order-status.canceled {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--fsk-red);
  color: #fff
}
.order-status.partial {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--fsk-blue);
  color: #fff
}
.order-status.processing {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--fsk-indigo);
  color: #fff
}
.order-status.pending i {
  -webkit-animation: 1s linear infinite rotation2
}
.order-status.processing i {
  -webkit-animation: 1s linear infinite rotation
}
.order-status.processing span {
  color: #fff
}
.order-status.pending span {
  color: #fff
}
.order-status.partial span {
  color: #fff
}
.order-status.canceled span {
  color: #fff
}
.order-status.completed span {
  color: #fff
}
@keyframes rotation {
  from {
    transform: rotate(0)
  }
  to {
    transform: rotate(359deg)
  }
}
@keyframes rotation2 {
  0 {
    transform: rotate(0)
  }
  100%,
  50% {
    transform: rotate(180deg)
  }
}
.order-list {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr
}
.affiliate-stats-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px
}
@media(max-width:1324px) {
  .order-list {
    grid-template-columns: 1fr 1fr
  }
  .affiliate-stats-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px
  }
}
@media(max-width:675px) {
  .order-list {
    grid-template-columns: 1fr
  }
  .affiliate-stats-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }
}
.order-box {
  display: flex;
  padding: 10px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 3);
  gap: 5px;
  flex-direction: column
}
.order-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.order-top-left {
  display: flex;
  gap: 5px
}
.order-id {
  padding: 5px 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 1.5);
  cursor: pointer
}
.o-tooltip {
  position: relative
}
.o-tooltip:hover .order-tooltip {
  position: absolute;
  bottom: 35px;
  background: var(--fsk-200);
  padding: 10px;
  border-radius: 10px;
  display: flex;
  white-space: nowrap;
  color: var(--fsk-900)
}
.order-tooltip {
  display: none
}
.re-order-btn {
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  background: var(--fsk-blue);
  color: #fff;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center
}
.report-order-btn {
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  background: var(--fsk-red);
  color: #fff;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center
}
.link-order-btn {
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  background: var(--fsk-site-color);
  color: #fff;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center
}
.detail-order-btn {
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  background: var(--fsk-emerald);
  color: #fff;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}
.order-status {
  padding: 5px 15px;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  position: relative
}
.order-status.progress {
  padding: 0
}
.order-center {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  gap: 5px
}
.order-service {
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 1.5);
  grid-area: 1/1/2/6;
  color: var(--fsk-700);
  line-height: 1
}
.order-date {
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 1.5);
  grid-area: 2/1/3/4;
  line-height: 1
}
.order-remains {
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 1.5);
  grid-area: 2/4/3/6;
  line-height: 1
}
.subscriptions .order-remains {
  grid-area: 2/1/2/6
}
.order-link {
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  grid-area: 3/1/4/6;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px dashed var(--fsk-400);
  cursor: pointer;
  line-height: 1
}
.order-center-bottom {
  display: grid;
  grid-area: 4/1/5/6;
  grid-template-columns: 3fr 2fr 2fr;
  gap: 5px
}
.subscriptions .order-center-bottom {
  display: grid;
  grid-area: 4/1/5/6;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px
}
.order-center-bottom.dripfeed {
  display: grid;
  grid-area: 4/1/5/6;
  grid-template-columns: 1fr 1fr;
  gap: 5px
}
.order-center-bottom span {
  padding: 10px;
  background: var(--fsk-50);
  border-radius: calc(var(--fsk-site-border) * 1.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 5px
}
.order-btn .btn {
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--fsk-site-border) * 1.5);
  box-sizing: border-box
}
.cancel-btn .btn {
  color: var(--fsk-red)
}
.cancel-btn .btn:hover {
  background: var(--fsk-red);
  color: var(--fsk-100)
}
.refil-btn .btn {
  color: var(--fsk-green)
}
.refil-btn .btn:hover {
  background: var(--fsk-green);
  color: var(--fsk-100)
}
.sliding-text {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: flex;
  height: 34px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  align-items: center
}
.cancelReason {
  background: #ef4444;
  color: #fff
}
.refil-time {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  animation: kayanYazi 10s linear infinite;
  padding: 10px
}
.cancel-reason {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  animation: kayanYazi2 10s linear infinite;
  padding: 10px;
  left: 100%
}
@keyframes kayanYazi {
  from {
    left: 100%
  }
  to {
    left: -110%
  }
}
@keyframes kayanYazi2 {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-150%)
  }
}
@keyframes fade-in-up {
  from {
    bottom: 0;
    opacity: 0
  }
  to {
    bottom: 85px;
    opacity: 1
  }
}
@keyframes fade-out-down {
  from {
    bottom: 85px;
    opacity: 1
  }
  to {
    bottom: 0;
    opacity: 0
  }
}
.notify-box {
  padding: 5px;
  background: var(--fsk-100);
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
  gap: 10px;
  border-radius: calc(var(--fsk-site-border) * 4);
  border: 2px solid var(--fsk-300);
  padding-right: 19px;
  color: var(--fsk-800);
  z-index: 5;
  box-shadow: 0 0 45px 15px #2d2d2d30
}
.fsk-rtl .notify-box {
  padding: 7px;
  padding-left: 19px
}
.notify-box i {
  width: 66px;
  height: 50px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 3);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center
}
.service-features {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap
}
.instagram-flag-video {
  width: 100%;
  border-radius: calc(var(--fsk-site-border) * 2);
  overflow: hidden;
  display: flex
}
.instagram-flag-video video {
  width: 100%
}
.service-features-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  font-size: 12px;
  gap: 5px;
  line-height: 1;
  color: #fff
}
.service-dropdown-item .service-features-item {
  padding: 0;
  font-size: 14px
}
.service-dropdown-item .service-features {
  gap: 7px;
  font-size: 14px!important;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border));
  padding: 5px;
  transition: .14s ease
}
.masterBox .service-dropdown-item .service-features {
  background: var(--fsk-200)
}
.service-features-item.guaranteed {
  background: var(--fsk-emerald)
}
.service-features-item.newservice {
  background: var(--fsk-indigo)
}
.service-features-item.recommended {
  background: var(--fsk-blue)
}
.service-features-item.faster {
  background: var(--fsk-purple)
}
.service-features-item.canceled {
  background: var(--fsk-red)
}
.service-features-item.timed {
  background: var(--fsk-indigo)
}
.service-features-item.discounted {
  background: var(--fsk-sky)
}
.service-features-item.slow {
  background: var(--fsk-yellow)
}
.service-dropdown-item .service-features-item.guaranteed {
  background: 0 0;
  color: var(--fsk-emerald)
}
.service-dropdown-item .service-features-item.newservice {
  background: 0 0;
  color: var(--fsk-indigo)
}
.service-dropdown-item .service-features-item.recommended {
  background: 0 0;
  color: var(--fsk-blue)
}
.service-dropdown-item .service-features-item.faster {
  background: 0 0;
  color: var(--fsk-purple)
}
.service-dropdown-item .service-features-item.canceled {
  background: 0 0;
  color: var(--fsk-red)
}
.service-dropdown-item .service-features-item.timed {
  background: 0 0;
  color: var(--fsk-indigo)
}
.service-dropdown-item .service-features-item.discounted {
  background: 0 0;
  color: var(--fsk-sky)
}
.service-dropdown-item .service-features-item.slow {
  background: 0 0;
  color: var(--fsk-yellow)
}
.addfunds-bg-img {
  background-image: url('https://storage.perfectcdn.com/e2wr93/3bwa3k2a0hdjwuig.png');
  background-size: cover;
  background-position: center
}
.payment-method {
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px
}
.payment-method i {
  border: 1px solid var(--fsk-400);
  background: var(--fsk-300);
  border-radius: calc(var(--fsk-site-border));
  color: var(--fsk-800);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  line-height: 1
}
.history-payment-name i {
  border: 1px solid var(--fsk-400);
  background: var(--fsk-300);
  border-radius: calc(var(--fsk-site-border));
  color: var(--fsk-800);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin-left: 5px;
  line-height: 1
}
.payment-top {
  padding: 10px;
  border-bottom: 1px solid var(--fsk-200)
}
.payment-name {
  color: var(--fsk-900);
  display: inline-flex;
  align-items: center;
  gap: 8px
}
.payment-dropdown .payment-name {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 9px;
  direction: rtl
}
.payment-dropdown .payment-name input.payment-radio {
  flex: 0 0 auto;
  margin: 0
}
.payment-dropdown .payment-name-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.payment-dropdown-brand-icon,
.payment-dropdown-brand-icon .payment-brand-logo {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fsk-300);
  color: var(--fsk-800);
  font-size: 12px;
  font-weight: 700;
  line-height: 1
}
.payment-dropdown-brand-icon .payment-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.payment-dropdown-brand-icon .payment-brand-logo.binance {
  padding: 3px;
  background: #172338
}
.payment-dropdown-brand-icon .payment-brand-logo.vodafone {
  background: #e60000
}
.payment-dropdown-brand-icon .payment-brand-logo.instapay,
.payment-dropdown-brand-icon .payment-brand-logo.paypal,
.payment-dropdown-brand-icon .payment-brand-logo.payby,
.payment-dropdown-brand-icon .payment-brand-logo.redotpay,
.payment-dropdown-brand-icon .payment-brand-logo.mycash,
.payment-dropdown-brand-icon .payment-brand-logo.fawry {
  padding: 3px;
  background: #fff
}
.payment-dropdown-brand-icon .payment-brand-logo.tether,
.payment-dropdown-brand-icon .payment-brand-logo.tether-trc,
.payment-dropdown-brand-icon .payment-brand-logo.etisalat {
  background: #26a17b;
  color: #fff
}
.payment-dropdown-brand-icon .payment-brand-logo.tether-erc {
  background: #2775ca;
  color: #fff
}
.payment-dropdown-brand-icon .payment-brand-logo.tron,
.payment-dropdown-brand-icon .payment-brand-logo.vodafone {
  background: #e5092a;
  color: #fff
}
.payment-dropdown-brand-icon .payment-brand-logo.wepay {
  background: #7221a8;
  color: #fff
}
.payment-dropdown-brand-icon .payment-brand-logo.orange {
  background: #ff7900;
  color: #fff
}
.payment-dropdown-brand-icon .payment-brand-logo.cash {
  background: #ea5b20;
  color: #fff
}
.payment-dropdown-brand-icon .payment-brand-logo.default i,
.payment-dropdown-brand-icon .payment-brand-logo.cash i {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px
}
.payment-dropdown .payment-dropdown-option {
  --payment-option-bg: linear-gradient(105deg, #fff, #f4f7fc);
  --payment-option-border: #e1e7f0;
  --payment-option-title: #202432;
  --payment-option-muted: #69778e;
  --payment-option-chip: #edf1f8;
  display: grid;
  grid-template-columns: 68px 36px minmax(90px, 1fr) minmax(72px, auto) 20px 28px;
  min-height: 50px;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--payment-option-border);
  border-radius: 15px;
  background: var(--payment-option-bg);
  color: var(--payment-option-title);
  cursor: pointer;
  direction: ltr;
  text-align: start;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease
}
.payment-dropdown .payment-dropdown-option:hover {
  border-color: rgba(142, 42, 255, .55);
  box-shadow: 0 4px 14px rgba(76, 44, 150, .1)
}
.payment-dropdown .payment-dropdown-option.active {
  border-color: #9235ff;
  background: linear-gradient(105deg, #fbf8ff, #f0eaff);
  box-shadow: 0 0 0 1px rgba(146, 53, 255, .2), 0 0 17px rgba(146, 53, 255, .13)
}
.payment-dropdown .payment-dropdown-select-action {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: linear-gradient(110deg, #7625f5, #a014ef);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap
}
.payment-dropdown .payment-dropdown-select-action i {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font-size: 12px
}
.payment-dropdown .payment-dropdown-brand-icon,
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border: 1px solid rgba(95, 117, 164, .3);
  border-radius: 10px;
  background: #f5f7fc;
  color: #202432;
  font-size: 19px
}
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.binance {
  padding: 6px;
  background: #101d35
}
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.vodafone {
  background: #e5092a
}
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.instapay,
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.paypal,
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.payby,
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.redotpay,
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.mycash,
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.fawry {
  padding: 5px;
  background: #fff
}
.payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.reward-credit {
  background: linear-gradient(145deg, #8c27ee, #5421c5);
  color: #fff
}
.payment-dropdown .payment-dropdown-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  overflow: hidden
}
.payment-dropdown .payment-dropdown-title,
.payment-dropdown .payment-dropdown-subtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.payment-dropdown .payment-dropdown-title {
  color: var(--payment-option-title);
  font-size: 12px;
  font-weight: 700
}
.payment-dropdown .payment-dropdown-subtitle {
  color: var(--payment-option-muted);
  font-size: 10px
}
.payment-dropdown .payment-dropdown-meta {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 7px
}
.payment-dropdown .payment-dropdown-category {
  max-width: 110px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid rgba(127, 48, 229, .32);
  border-radius: 11px;
  background: rgba(126, 45, 224, .08);
  color: #8b35df;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap
}
.payment-dropdown .payment-type-badge {
  margin: 0;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: 9px;
  letter-spacing: 0
}
.payment-dropdown .payment-dropdown-radio {
  display: inline-flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  border: 2px solid #566a9f;
  border-radius: 50%;
  background: transparent
}
.payment-dropdown .payment-dropdown-radio input {
  width: 9px;
  height: 9px;
  margin: 0;
  accent-color: #982cff;
  opacity: 0
}
.payment-dropdown .payment-dropdown-option.active .payment-dropdown-radio {
  border-color: #982cff;
  background: radial-gradient(circle, #982cff 0 36%, transparent 40%)
}
.payment-dropdown .payment-dropdown-terminal {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--payment-option-border);
  border-radius: 12px;
  background: var(--payment-option-chip);
  color: #65789e;
  font-size: 13px
}
.payment-dropdown .payment-dropdown-terminal i {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit
}
html.dark .payment-dropdown .payment-dropdown-option {
  --payment-option-bg: linear-gradient(105deg, #0d1730, #101d39);
  --payment-option-border: rgba(82, 108, 163, .2);
  --payment-option-title: #f2f5fc;
  --payment-option-muted: #91a4ce;
  --payment-option-chip: #1b2948
}
html.dark .payment-dropdown .payment-dropdown-option.active {
  border-color: #9235ff;
  background: linear-gradient(105deg, #121d3a, #161b46);
  box-shadow: 0 0 0 1px rgba(146, 53, 255, .4), 0 0 18px rgba(146, 53, 255, .25)
}
html.dark .payment-dropdown .payment-dropdown-brand-icon,
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo {
  border-color: rgba(95, 117, 164, .35);
  background: #0a1731;
  color: #f2f5fc
}
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.binance {
  background: #101d35
}
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.vodafone {
  background: #e5092a
}
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.instapay,
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.paypal,
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.payby,
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.redotpay,
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.mycash,
html.dark .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo.fawry {
  background: #fff
}
@media only screen and (max-width: 700px) {
  .payment-dropdown .payment-dropdown-option {
    grid-template-columns: 64px 36px minmax(0, 1fr) 22px 28px;
    min-height: 52px;
    gap: 5px;
    padding: 5px 6px
  }
  .payment-dropdown .payment-dropdown-select-action {
    min-height: 29px;
    gap: 3px;
    padding-inline: 5px;
    font-size: 9px
  }
  .payment-dropdown .payment-dropdown-brand-icon,
  .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 9px
  }
  .payment-dropdown .payment-dropdown-title {
    font-size: 11px
  }
  .payment-dropdown .payment-dropdown-subtitle {
    font-size: 9px
  }
  .payment-dropdown .payment-dropdown-meta {
    display: none
  }
  .payment-dropdown .payment-dropdown-radio {
    width: 19px;
    height: 19px;
    border-width: 2px
  }
  .payment-dropdown .payment-dropdown-terminal {
    width: 28px;
    height: 28px;
    font-size: 12px
  }
}
@media only screen and (max-width: 420px) {
  .payment-dropdown .payment-dropdown-option {
    grid-template-columns: 50px 32px minmax(0, 1fr) 20px;
    min-height: 46px;
    gap: 4px;
    padding: 4px 5px
  }
  .payment-dropdown .payment-dropdown-select-action {
    min-height: 26px;
    gap: 2px;
    padding-inline: 3px;
    font-size: 8px
  }
  .payment-dropdown .payment-dropdown-select-action i {
    display: none
  }
  .payment-dropdown .payment-dropdown-brand-icon,
  .payment-dropdown .payment-dropdown-brand-icon .payment-brand-logo {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 8px
  }
  .payment-dropdown .payment-dropdown-terminal {
    display: none
  }
  .payment-dropdown .payment-dropdown-title {
    font-size: 10px
  }
  .payment-dropdown .payment-dropdown-subtitle {
    font-size: 8px
  }
}
.payment-description {
  color: var(--fsk-500)
}
html.light .payment-icon img {
  filter: invert(12%) sepia(0) saturate(2881%) hue-rotate(285deg) brightness(88%) contrast(102%)
}
html.dark .payment-icon img {
  filter: invert(99%) sepia(10%) saturate(364%) hue-rotate(177deg) brightness(99%) contrast(94%)
}
.payment-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px
}
.select-amount {
  display: flex;
  justify-content: space-between;
  border-radius: calc(var(--fsk-site-border) * 2);
  background: var(--fsk-100);
  overflow: hidden;
  padding: 5px;
  gap: 5px
}
.amount-item {
  display: flex;
  align-items: center
}
.amount-item {
  overflow: hidden;
  padding: 5px;
  width: -webkit-fill-available;
  justify-content: center;
  color: var(--fsk-700);
  background: var(--fsk-200);
  transition: .3s ease;
  cursor: pointer;
  border-radius: calc(var(--fsk-site-border))
}
.amount-item:hover {
  background: var(--fsk-site-color);
  color: #fff
}
.payment-box {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.payment-box .btn-main {
  background: var(--fsk-100);
  color: var(--fsk-800)
}
.payment-box .btn-main:hover {
  background: var(--fsk-site-color);
  color: #fff
}
.payment-box form {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.panel-body {
  display: flex;
  flex-direction: column;
  background: var(--fsk-100);
  padding: 15px;
  border-radius: calc(var(--fsk-site-border) * 3);
  color: var(--fsk-700)
}
.payment-title {
  color: var(--fsk-900)
}
.payment-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px
}
.history-box {
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  gap: 5px;
  justify-content: space-between;
  flex-direction: column;
  padding: 5px;
  background: var(--fsk-100)
}
.history-left {
  display: flex
}
.history-top {
  color: var(--fsk-800);
  display: flex;
  gap: 5px
}
.history-bottom {
  color: var(--fsk-800);
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse
}
.history-bottom .history-invoice {
  min-width: 23%
}
.history-bottom .invoice_btn {
  border-radius: calc(var(--fsk-site-border));
  padding: 5px 16px;
  background: var(--fsk-50);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  width: 100%;
  cursor: pointer;
  color: var(--fsk-800);
  font-size: 12px
}
.history-bottom .history-date {
  font-size: 12px;
  color: var(--fsk-500);
  background: var(--fsk-50);
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border))
}
.history-amount {
  border-radius: calc(var(--fsk-site-border));
  padding: 5px 10px;
  background: var(--fsk-200);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 20%
}
.history-payment-name {
  display: inline-flex;
  align-items: center;
  width: 80%;
  padding: 5px 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border))
}
.color-green {
  background: var(--fsk-emerald);
  color: #fff
}
.color-red {
  background: var(--fsk-red);
  color: #fff
}
.addfunds-page {
  color: var(--fsk-800)
}
.addfunds-page .addfunds-layout {
  gap: 16px;
  margin-top: 16px
}
.addfunds-hero {
  --addfunds-hero-bg: radial-gradient(ellipse at 47% 110%, rgba(110, 77, 255, .1), transparent 38%), linear-gradient(105deg, #fff 0%, #f4f5ff 55%, #f8f7ff 100%);
  --addfunds-hero-border: rgba(91, 111, 255, .2);
  --addfunds-hero-title: #202432;
  --addfunds-hero-description: #68758d;
  --addfunds-hero-logo-text: #202432;
  --addfunds-hero-breadcrumb-bg: rgba(255, 255, 255, .88);
  --addfunds-hero-breadcrumb-border: #e1e6f0;
  --addfunds-hero-breadcrumb-text: #52627a;
  --addfunds-hero-breadcrumb-link: #34425b;
  --addfunds-hero-decor: linear-gradient(115deg, rgba(31, 42, 116, .02), rgba(105, 86, 210, .1));
  --addfunds-hero-glow: rgba(123, 28, 190, .07);
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  justify-self: stretch;
  grid-template-columns: minmax(250px, 1.45fr) minmax(270px, 1.05fr) minmax(220px, .9fr) auto;
  grid-template-areas: "logo copy art crumb";
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin-top: 8px;
  padding: 8px 18px;
  overflow: hidden;
  border: 1px solid var(--addfunds-hero-border);
  border-radius: 0;
  background: var(--addfunds-hero-bg);
  box-shadow: var(--overview-card-shadow, var(--sh-sm));
  direction: ltr
}
.addfunds-hero::before {
  position: absolute;
  top: -62px;
  left: 27%;
  width: 340px;
  height: 142px;
  border: 1px solid var(--addfunds-hero-border);
  border-radius: 0 0 46% 48%;
  background: var(--addfunds-hero-decor);
  content: "";
  transform: skewX(-23deg);
  pointer-events: none
}
.addfunds-hero::after {
  position: absolute;
  top: -50px;
  right: 18%;
  width: 120px;
  height: 130px;
  border-radius: 50%;
  background: var(--addfunds-hero-glow);
  content: "";
  filter: blur(18px);
  pointer-events: none
}
.addfunds-hero-logo {
  grid-area: logo;
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-self: start;
  color: var(--addfunds-hero-logo-text);
  text-decoration: none
}
.addfunds-hero-logo img {
  display: block;
  width: auto;
  max-width: min(205px, 100%);
  max-height: 48px;
  object-fit: contain
}
.addfunds-hero-logo > span {
  color: var(--addfunds-hero-logo-text);
  font-size: 20px;
  font-weight: 800
}
.addfunds-hero-copy {
  grid-area: copy;
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  direction: rtl
}
.addfunds-hero-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--addfunds-hero-title);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  direction: ltr;
  justify-content: flex-start
}
.addfunds-hero-title > i {
  display: inline-flex;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: linear-gradient(145deg, #a900ff, #5f21d9);
  color: #fff;
  font-size: 11px
}
.addfunds-hero-title > span {
  min-width: 0
}
.addfunds-hero-description {
  overflow: hidden;
  color: var(--addfunds-hero-description);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
  padding-inline-start: 31px
}
.addfunds-hero-art {
  grid-area: art;
  position: relative;
  z-index: 1;
  height: 62px;
  min-width: 220px;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .25))
}
.addfunds-hero-card {
  position: absolute;
  display: flex;
  width: 59px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 7px;
  background: linear-gradient(155deg, #ffd447 0 24%, #f4f4ff 25% 40%, #a91bff 41% 100%);
  color: #f7d13f;
  font-size: 15px;
  box-shadow: 0 7px 15px rgba(69, 22, 154, .35)
}
.addfunds-hero-card-back {
  top: 12px;
  left: 19px;
  opacity: .95;
  transform: rotate(-21deg)
}
.addfunds-hero-card-front {
  top: 8px;
  left: 79px;
  background: linear-gradient(145deg, #f7c52f 0 31%, #fff 32% 41%, #8b21f4 43% 100%);
  color: #ffcc26;
  transform: rotate(12deg)
}
.addfunds-hero-coin {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffe36a;
  border-radius: 50%;
  background: #f4b900;
  color: #fff;
  font-size: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16)
}
.addfunds-hero-coin-one {
  top: 4px;
  left: 4px
}
.addfunds-hero-coin-two {
  right: 14px;
  bottom: 1px
}
.addfunds-hero-breadcrumb {
  grid-area: crumb;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--addfunds-hero-breadcrumb-border);
  border-radius: 999px;
  background: var(--addfunds-hero-breadcrumb-bg);
  color: var(--addfunds-hero-breadcrumb-text);
  font-size: 10px;
  white-space: nowrap;
  direction: rtl
}
.addfunds-hero-breadcrumb a,
.addfunds-hero-breadcrumb span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--addfunds-hero-breadcrumb-link);
  text-decoration: none
}
.addfunds-hero-breadcrumb a:hover {
  color: var(--fsk-site-color)
}
.addfunds-hero-breadcrumb span > i {
  color: #a900ff;
  font-size: 9px
}
.addfunds-hero-breadcrumb .addfunds-breadcrumb-separator {
  color: var(--fsk-400);
  font-size: 9px
}
html.dark .addfunds-hero {
  --addfunds-hero-bg: radial-gradient(ellipse at 47% 110%, rgba(56, 68, 217, .3), transparent 38%), radial-gradient(ellipse at 75% 20%, rgba(69, 25, 145, .3), transparent 30%), linear-gradient(105deg, #090d29 0%, #101944 55%, #0a102e 100%);
  --addfunds-hero-border: rgba(91, 111, 255, .23);
  --addfunds-hero-title: #f7f8ff;
  --addfunds-hero-description: #a9b4d5;
  --addfunds-hero-logo-text: #fff;
  --addfunds-hero-breadcrumb-bg: rgba(24, 39, 79, .8);
  --addfunds-hero-breadcrumb-border: rgba(138, 158, 220, .12);
  --addfunds-hero-breadcrumb-text: #aab5d0;
  --addfunds-hero-breadcrumb-link: #c7cfe4;
  --addfunds-hero-decor: linear-gradient(115deg, rgba(31, 42, 116, .04), rgba(49, 54, 166, .32));
  --addfunds-hero-glow: rgba(123, 28, 190, .1)
}
@media only screen and (max-width: 1100px) {
  .addfunds-hero {
    grid-template-columns: minmax(170px, 1.2fr) minmax(230px, 1.1fr) minmax(140px, .8fr) auto;
    gap: 10px;
    padding-inline: 14px
  }
  .addfunds-hero-logo img {
    max-width: 170px
  }
  .addfunds-hero-art {
    min-width: 145px
  }
  .addfunds-hero-breadcrumb {
    gap: 6px;
    padding: 7px 9px
  }
}
@media only screen and (max-width: 900px) {
  .addfunds-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo crumb" "copy art";
    gap: 10px 14px;
    min-height: 0;
    padding: 12px;
    border-radius: 12px
  }
  .addfunds-hero-logo img {
    max-height: 36px
  }
  .addfunds-hero-art {
    width: 145px;
    min-width: 145px;
    transform: scale(.8);
    transform-origin: right center
  }
}
@media only screen and (max-width: 480px) {
  .addfunds-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "logo" "crumb" "copy" "art";
    justify-items: stretch;
    gap: 9px;
    padding: 12px
  }
  .addfunds-hero-logo img {
    max-width: 150px;
    max-height: 34px
  }
  .addfunds-hero-logo > span {
    font-size: 14px
  }
  .addfunds-hero-breadcrumb {
    justify-self: start;
    max-width: 100%
  }
  .addfunds-hero-copy {
    width: 100%;
    align-items: flex-start
  }
  .addfunds-hero-title {
    gap: 6px;
    font-size: 14px
  }
  .addfunds-hero-title > span {
    white-space: nowrap
  }
  .addfunds-hero-title > i {
    width: 21px;
    height: 21px;
    flex-basis: 21px
  }
  .addfunds-hero-description {
    width: 100%;
    padding-inline-start: 27px;
    font-size: 9px;
    white-space: normal
  }
  .addfunds-hero-art {
    width: 95px;
    min-width: 95px;
    height: 48px;
    justify-self: center;
    transform: scale(.72);
    transform-origin: center
  }
}
.addfunds-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--overview-card-border, var(--fsk-200));
  border-radius: 16px;
  background: var(--overview-card-bg, var(--fsk-50));
  box-shadow: var(--overview-card-shadow, var(--sh-sm))
}
.addfunds-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--fsk-200)
}
.addfunds-panel-icon {
  display: flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--fsk-site-gradient);
  color: #fff;
  font-size: 18px;
  box-shadow: var(--sh-sm)
}
.addfunds-panel-heading .payment-title {
  display: block;
  color: var(--overview-card-text, var(--fsk-800));
  font-size: 17px;
  font-weight: 700
}
.addfunds-panel-heading p {
  margin: 4px 0 0;
  color: var(--overview-card-muted, var(--fsk-500));
  font-size: 11px
}
.addfunds-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  color: var(--fsk-800);
  font-size: 13px;
  font-weight: 700
}
.addfunds-method-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-color: var(--fsk-site-color) var(--fsk-100);
  scrollbar-width: thin
}
.addfunds-category-tabs {
  min-height: 0;
  margin: 0;
  padding: 4px 2px 8px;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  scrollbar-width: thin
}
.addfunds-category-tabs .category-tab {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--fsk-200);
  border-radius: 9px;
  background: var(--fsk-100);
  color: var(--fsk-700);
  font-size: 11px
}
.addfunds-category-tabs .category-tab:hover {
  border-color: var(--fsk-site-color);
  background: var(--fsk-200);
  transform: none;
  box-shadow: none
}
.addfunds-category-tabs .category-tab.active {
  border-color: var(--fsk-site-color);
  background: var(--fsk-site-gradient);
  color: #fff;
  box-shadow: var(--sh-xs)
}
.addfunds-category-tabs .category-tab::after {
  display: none
}
.addfunds-method-grid .payment-method-card {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 86px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 7px 8px;
  overflow: hidden;
  border: 1px solid rgba(108, 132, 180, .24);
  border-radius: 10px;
  background: var(--fsk-50);
  color: var(--fsk-800);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease
}
.addfunds-method-grid .payment-method-card:hover {
  border-color: var(--fsk-site-color);
  background: var(--fsk-100);
  transform: translateY(-1px)
}
.addfunds-method-grid .payment-method-card.active {
  border: 2px solid #a020ff;
  background: var(--fsk-100);
  box-shadow: 0 0 0 2px rgba(160, 32, 255, .18), 0 0 12px rgba(160, 32, 255, .2)
}
.addfunds-method-grid .payment-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0)
}
.addfunds-method-grid .payment-card-icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--fsk-site-color);
  font-size: 16px
}
.addfunds-method-grid .payment-brand-logo {
  position: relative;
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1
}
.addfunds-method-grid .payment-brand-logo.binance {
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
  background: #172338
}
.addfunds-method-grid .payment-brand-logo.binance img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.tether,
.addfunds-method-grid .payment-brand-logo.tether-trc {
  background: #26a17b
}
.addfunds-method-grid .payment-brand-logo.tether-erc {
  background: #2775ca
}
.addfunds-method-grid .payment-brand-logo.tron {
  background: #e5092a
}
.addfunds-method-grid .payment-brand-logo.wepay {
  background: #7221a8;
  font-size: 15px;
  font-style: italic
}
.addfunds-method-grid .payment-brand-logo.instapay {
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
  background: #fff
}
.addfunds-method-grid .payment-brand-logo.instapay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.paypal {
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
  background: #fff
}
.addfunds-method-grid .payment-brand-logo.paypal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.payby {
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
  background: #fff
}
.addfunds-method-grid .payment-brand-logo.payby img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.redotpay {
  overflow: hidden;
  padding: 5px;
  box-sizing: border-box;
  background: #fff
}
.addfunds-method-grid .payment-brand-logo.redotpay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.vodafone {
  background: #e60000;
  overflow: hidden
}
.addfunds-method-grid .payment-brand-logo.vodafone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.etisalat {
  background: #67b500;
  font-size: 14px
}
.addfunds-method-grid .payment-brand-logo.orange {
  background: #ff7900
}
.addfunds-method-grid .payment-brand-logo.mycash {
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
  background: #fff
}
.addfunds-method-grid .payment-brand-logo.mycash img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.fawry {
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
  background: #fff
}
.addfunds-method-grid .payment-brand-logo.fawry img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-method-grid .payment-brand-logo.cash {
  background: #ea5b20;
  font-size: 16px
}
.addfunds-method-grid .payment-brand-logo.default {
  background: var(--fsk-200);
  color: var(--fsk-site-color)
}
.addfunds-method-grid .payment-brand-logo.default i {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px
}
.addfunds-method-grid .payment-card-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit
}
.addfunds-method-grid .payment-card-name {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  color: var(--fsk-800);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2
}
.addfunds-method-grid .payment-card-brand,
.addfunds-method-grid .payment-card-detail {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.addfunds-method-grid .payment-card-detail {
  color: var(--fsk-500);
  font-size: 10px;
  font-weight: 500
}
.addfunds-method-grid .payment-type-badge {
  display: none
}
.addfunds-method-grid .payment-card-check {
  position: absolute;
  top: 5px;
  inset-inline-start: 5px;
  display: none;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #a020ff;
  color: #fff;
  font-size: 9px
}
.addfunds-method-grid .payment-method-card.active .payment-card-check {
  display: flex
}
.addfunds-method-grid .payment-card-more .payment-card-icon {
  background: var(--fsk-200);
  color: var(--fsk-500)
}
html.dark .addfunds-method-grid .payment-method-card {
  border-color: rgba(92, 122, 176, .3);
  background: linear-gradient(145deg, #121f39, #101a30);
  color: #f3f5fb
}
html.dark .addfunds-method-grid .payment-method-card:hover {
  border-color: #a020ff;
  background: linear-gradient(145deg, #172545, #111d35)
}
html.dark .addfunds-method-grid .payment-method-card.active {
  border-color: #a020ff;
  background: linear-gradient(145deg, #192747, #111c34);
  box-shadow: 0 0 0 2px rgba(160, 32, 255, .22), 0 0 13px rgba(160, 32, 255, .22)
}
html.dark .addfunds-method-grid .payment-card-name {
  color: #edf1fc
}
html.dark .addfunds-method-grid .payment-card-detail {
  color: #9eacc6
}
.payment-picker-tools {
  display: flex;
  justify-content: flex-end
}
.payment-picker-tools .dropdwon-box {
  width: 100%
}
.payment-picker-tools .dropdown-select-box {
  min-height: 38px;
  padding: 8px 11px;
  gap: 8px;
  border: 1px solid var(--fsk-200);
  background: var(--fsk-50);
  color: var(--fsk-600);
  font-size: 11px
}
.payment-picker-tools .dropdown-select-box > span {
  flex: 0 0 auto
}
.payment-picker-tools .dropdown-select-name {
  width: auto;
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
  color: var(--fsk-800);
  font-weight: 600
}
.payment-picker-tools .dropdown-select-box > i:first-child {
  color: var(--fsk-site-color)
}
.addfunds-panel form {
  margin-top: 2px
}
.addfunds-panel form .form-group {
  margin: 0
}
.addfunds-panel form label {
  color: var(--fsk-700);
  font-weight: 600
}
.addfunds-panel form .form-control {
  min-height: 42px;
  border: 1px solid var(--fsk-200);
  border-radius: 9px;
  background: var(--fsk-50);
  color: var(--fsk-800)
}
.addfunds-panel form .form-control:focus {
  border-color: var(--fsk-site-color);
  box-shadow: 0 0 0 2px var(--fsk-200)
}
.addfunds-panel .addfunds-submit {
  display: inline-flex;
  min-height: 46px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  background: var(--fsk-site-gradient);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-sm)
}
.addfunds-panel .addfunds-submit:hover {
  filter: brightness(1.08)
}
.addfunds-panel .addfunds-submit i {
  margin: 0
}
.addfunds-history-panel {
  height: auto;
  align-self: start
}
.addfunds-history-list {
  max-height: 680px;
  margin-top: 12px;
  overflow: auto;
  scrollbar-color: var(--fsk-site-color) var(--fsk-100);
  scrollbar-width: thin
}
.addfunds-history-table {
  min-width: 650px;
  color: #d8e1f2;
  direction: rtl
}
.addfunds-history-header,
.addfunds-history-row {
  display: grid;
  grid-template-columns: 28px 62px 74px minmax(132px, 1.15fr) minmax(112px, 1fr) 84px 30px;
  align-items: center;
  gap: 7px;
  padding: 5px 8px
}
.addfunds-history-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 29px;
  border-bottom: 1px solid rgba(109, 135, 180, .22);
  background: var(--overview-card-bg, var(--fsk-50));
  color: #8fa3c3;
  font-size: 9px;
  font-weight: 600;
  text-align: center
}
.addfunds-history-row {
  min-height: 38px;
  border-bottom: 1px solid rgba(109, 135, 180, .14);
  background: linear-gradient(90deg, rgba(25, 39, 64, .12), rgba(34, 51, 79, .24));
  font-size: 10px;
  text-align: center;
  transition: background .15s ease
}
.addfunds-history-row:hover {
  background: rgba(62, 86, 128, .24)
}
.addfunds-history-number {
  display: inline-flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 1px solid rgba(109, 135, 180, .16);
  border-radius: 50%;
  background: rgba(39, 56, 87, .55);
  color: #c4d1e7;
  font-size: 9px
}
.addfunds-history-row .history-id,
.addfunds-history-row .history-date {
  min-width: 0;
  overflow: hidden;
  color: #b4c2d9;
  text-overflow: ellipsis;
  white-space: nowrap
}
.addfunds-history-row .history-id {
  font-weight: 500
}
.addfunds-history-row .history-date {
  padding: 0;
  background: transparent;
  font-size: 10px;
  direction: ltr
}
.addfunds-history-row .history-status {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(59, 130, 246, .16);
  color: #73a9ff;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.addfunds-history-row .history-status::after {
  content: "•";
  font-size: 12px;
  line-height: 8px
}
.addfunds-history-row .history-status.is-success {
  background: rgba(16, 185, 129, .15);
  color: #16c784
}
.addfunds-history-row .history-status.is-failed {
  background: rgba(239, 68, 68, .14);
  color: #f05b63
}
.addfunds-history-row .history-payment-name {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: #d6e0f1;
  font-size: 10px;
  font-weight: 500
}
.addfunds-history-row .history-payment-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.addfunds-history-row .history-payment-icon,
.addfunds-history-row .payment-brand-logo {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  background: #1c2940;
  color: #f1bf24;
  font-size: 12px;
  font-weight: 800
}
.addfunds-history-row .payment-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.addfunds-history-row .payment-brand-logo.binance {
  padding: 3px;
  background: #172338
}
.addfunds-history-row .payment-brand-logo.vodafone {
  background: #e60000
}
.addfunds-history-row .payment-brand-logo.reward-credit {
  background: linear-gradient(145deg, #8c27ee, #5421c5);
  color: #fff
}
.addfunds-history-row .payment-brand-logo.mycash,
.addfunds-history-row .payment-brand-logo.fawry,
.addfunds-history-row .payment-brand-logo.paypal,
.addfunds-history-row .payment-brand-logo.payby,
.addfunds-history-row .payment-brand-logo.redotpay,
.addfunds-history-row .payment-brand-logo.instapay {
  padding: 2px;
  background: #fff
}
.addfunds-history-row .history-amount {
  min-width: 0;
  justify-self: stretch;
  padding: 6px 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  direction: ltr;
  white-space: nowrap
}
.addfunds-history-row .history-amount.color-green {
  background: #08bd83;
  color: #fff
}
.addfunds-history-row .history-amount.color-red {
  background: #ef343e;
  color: #fff
}
.addfunds-history-options {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border: 1px solid rgba(109, 135, 180, .16);
  border-radius: 7px;
  background: rgba(39, 56, 87, .48);
  color: #8196b8;
  font-size: 10px
}
html:not(.dark) .addfunds-history-header {
  background: #f4f7fc;
  color: #64748b
}
html:not(.dark) .addfunds-history-row {
  border-bottom-color: #e4eaf3;
  background: #fff;
  color: #334155
}
html:not(.dark) .addfunds-history-row:hover {
  background: #f5f7fb
}
html:not(.dark) .addfunds-history-row .history-id,
html:not(.dark) .addfunds-history-row .history-date {
  color: #52627a
}
html:not(.dark) .addfunds-history-row .history-payment-name {
  color: #334155
}
html:not(.dark) .addfunds-history-number,
html:not(.dark) .addfunds-history-options {
  border-color: #e1e7f0;
  background: #f3f6fb;
  color: #52627a
}
@media only screen and (max-width: 1024px) {
  .addfunds-page .addfunds-form-column,
  .addfunds-page .addfunds-history-column {
    grid-column: span 12/span 12
  }
}
@media only screen and (max-width: 640px) {
  .addfunds-history-list {
    max-height: 620px;
    overflow-x: hidden;
    overflow-y: auto
  }
  .addfunds-history-table {
    min-width: 0;
    width: 100%
  }
  .addfunds-history-header {
    display: none
  }
  .addfunds-history-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 10px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid rgba(109, 135, 180, .18);
    border-radius: 10px;
    text-align: start
  }
  .addfunds-history-row > [role="cell"]:not(.addfunds-history-number):not(.addfunds-history-options) {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: end
  }
  .addfunds-history-row > [role="cell"]:not(.addfunds-history-number):not(.addfunds-history-options)::before {
    flex: 0 0 auto;
    color: #8fa3c3;
    content: attr(data-label);
    font-size: 9px;
    font-weight: 500;
    text-align: start
  }
  .addfunds-history-row .addfunds-history-number {
    display: none
  }
  .addfunds-history-row .history-date,
  .addfunds-history-row .history-payment-name {
    grid-column: 1 / -1
  }
  .addfunds-history-row .history-status {
    justify-self: end
  }
  .addfunds-history-row .history-amount {
    justify-self: end;
    min-width: 78px;
    max-width: 120px
  }
  .addfunds-history-row .history-payment-name {
    justify-content: flex-end
  }
  .addfunds-history-row .history-payment-label {
    text-align: end
  }
  .addfunds-history-options {
    display: none
  }
  html:not(.dark) .addfunds-history-row > [role="cell"]:not(.addfunds-history-number):not(.addfunds-history-options)::before {
    color: #64748b
  }
  .addfunds-panel {
    padding: 12px;
    border-radius: 13px
  }
  .addfunds-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 310px;
    gap: 6px
  }
  .addfunds-method-grid .payment-method-card {
    min-height: 82px;
    padding: 9px 5px
  }
  .addfunds-category-tabs {
    margin-inline: -4px;
    padding-inline: 4px
  }
  .addfunds-category-tabs .category-tab {
    padding-inline: 9px;
    font-size: 10px
  }
  .addfunds-history-list {
    max-height: 430px
  }
}
@media only screen and (max-width: 390px) {
  .addfunds-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px
  }
  .addfunds-method-grid .payment-method-card {
    min-height: 88px;
    padding: 9px 6px
  }
}
.massorder form {
  margin-top: 0;
  padding: 18px;
  border-radius: 0 0 20px 20px;
  background: #141414
}
.massorder > .order-page-switch {
  margin-top: 0;
  padding: 8px 12px 0;
  border-radius: 20px 20px 0 0;
  background: #141414
}
.massorder > .order-page-switch + form {
  margin-top: 0
}
.massorder .order-page-switch-link {
  min-height: 42px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: #141414;
  color: #fff
}
.massorder .order-page-switch-link:hover {
  background: #252525;
  color: #fff
}
.massorder .order-page-switch-link.active,
.massorder .order-page-switch-link.active:hover {
  background: var(--fsk-site-color);
  color: #111;
  box-shadow: none
}
.massorder-page-header {
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: 12px;
  margin-bottom: 16px;
  direction: ltr
}
.massorder .massorder-overview {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin: 0;
  padding: 14px;
  border-radius: 20px;
  background: #141414
}
.massorder-overview .overview-card {
  min-height: 164px;
  justify-content: space-between;
  border: 0;
  border-radius: 14px;
  background: #303030;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  color: #fff
}
.massorder-overview .overview-card__title,
.massorder-overview .overview-metric__value {
  color: #fff
}
.massorder-overview .overview-card__icon {
  border-color: var(--fsk-site-color);
  background: var(--fsk-site-color);
  color: #111
}
.massorder-overview .overview-metric {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent
}
.massorder-overview .overview-metric__value {
  font-size: 22px;
  text-align: right
}
.massorder-discount {
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--fsk-site-color);
  color: #111;
  font-size: 11px;
  font-weight: 700
}
.massorder-welcome {
  display: flex;
  min-height: 164px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  background: linear-gradient(120deg,color-mix(in srgb,var(--fsk-site-color) 82%,#fff),var(--fsk-site-color));
  color: #111;
  direction: rtl;
  text-align: right
}
.massorder-welcome h2,
.massorder-welcome p {
  margin: 0
}
.massorder-welcome h2 {
  font-size: 20px;
  font-weight: 800
}
.massorder-welcome p {
  font-size: 13px;
  line-height: 1.7
}
.massorder-welcome-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 0 14px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 700
}
.massorder-welcome-link:hover {
  color: #111;
  filter: brightness(.96)
}
.massorder-form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px
}
.massorder-form-heading label {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700
}
.massorder-mode-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #222
}
.massorder-mode-button {
  min-width: 82px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #c7c7c7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background .18s ease,color .18s ease,transform .18s ease
}
.massorder-mode-button:hover {
  color: #fff
}
.massorder-mode-button.active {
  background: var(--fsk-site-color);
  color: #111;
  box-shadow: 0 3px 10px color-mix(in srgb,var(--fsk-site-color) 28%,transparent)
}
.massorder-mode-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}
.massorder #basicMode,
.massorder #advancedMode {
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent
}
.massorder #basicMode[hidden],
.massorder #advancedMode[hidden] {
  display: none
}
.massorder textarea {
  width: 100%;
  box-sizing: border-box;
  height: clamp(240px,42vh,400px);
  min-height: 260px;
  padding: 12px;
  border: 0;
  border-radius: 14px;
  background: #252525;
  color: #fff;
  resize: vertical
}
.massorder input.form-control {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  background: #252525;
  color: #fff
}
.massorder .btn {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--fsk-site-color);
  color: #111;
  font-weight: 700
}
.massorder .btn:hover {
  color: #111;
  filter: brightness(1.05)
}
@media(max-width:900px) {
  .massorder-page-header {
    grid-template-columns: 1fr;
    padding-top: 16px
  }
  .massorder-welcome {
    order: -1;
    min-height: 140px
  }
}
@media(max-width:480px) {
  .massorder form {
    padding: 12px;
    border-radius: 0 0 16px 16px
  }
  .massorder > .order-page-switch {
    padding: 8px 8px 0;
    border-radius: 16px 16px 0 0
  }
  .massorder .order-page-switch-link {
    gap: 5px;
    padding: 7px 5px;
    font-size: 11px
  }
  .massorder .massorder-overview {
    gap: 8px;
    padding: 10px;
    border-radius: 16px
  }
  .massorder-overview .overview-card {
    min-height: 142px;
    padding: 11px;
    border-radius: 12px
  }
  .massorder-overview .overview-metric__value {
    font-size: clamp(14px,4vw,17px)
  }
  .massorder-welcome {
    padding: 16px;
    border-radius: 16px
  }
  .massorder-form-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px
  }
  .massorder-mode-switch {
    width: 100%;
    box-sizing: border-box
  }
  .massorder-mode-button {
    flex: 1;
    min-width: 0
  }
  .massorder textarea {
    height: clamp(220px,48vh,340px);
    min-height: 220px
  }
}
@media(max-width:360px) {
  .massorder .massorder-overview {
    grid-template-columns: 1fr
  }
  .massorder-overview .overview-card {
    min-height: 120px
  }
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px
}
.table-bordered {
  background: var(--fsk-100);
  padding: 10px;
  margin-top: 10px;
  border-radius: calc(var(--fsk-site-border) * 3)
}
.table td,
.table th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border: 0;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border));
  text-align: right
}
.table tr {
  border: 0!important
}
.table td {
  border: 0;
  background: var(--fsk-50);
  border-radius: calc(var(--fsk-site-border))
}
.table td:nth-child(2n) {
  background: var(--fsk-50);
  border-radius: calc(var(--fsk-site-border));
  color: var(--fsk-800)
}
pre code.hljs {
  background: var(--fsk-100);
  border-radius: 0 0 15px 15px;
  color: var(--fsk-code-color-2)!important
}
.hljs-number {
  color: var(--fsk-code-color-2)
}
.hljs-punctuation {
  color: var(--fsk-500)
}
.hljs-attr {
  color: var(--fsk-code-color-1)
}
.hljs-string {
  color: var(--fsk-code-color-2);
  font-weight: 500
}
.hljs-keyword {
  font-weight: 500
}
.api-container {
  display: flex;
  flex-direction: column;
  margin-top: 10px
}
.code-block-top {
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0 0;
  display: flex;
  justify-content: space-between;
  color: var(--fsk-500)
}
.code-block-top span {
  padding: 10px 15px
}
.code-block-right {
  border-left: 1px solid var(--fsk-100)
}
.api-container pre {
  margin: 0;
  background: var(--fsk-100);
  padding: 10px;
  border-radius: 0 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2)
}
.affiliates-page {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column
}
.affiliates-page img {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  z-index: -1;
  opacity: .8;
  filter: blur(7px)
}
.affiliate-title {
  font-size: 16px
}
.affiliate-bottom {
  display: flex;
  background: var(--fsk-200)
}
.affiliate-url {
  gap: 10px;
  padding: 10px 15px;
  background: var(--fsk-200);
  color: var(--fsk-900);
  border-radius: calc(var(--fsk-site-border));
  display: flex;
  cursor: pointer;
  align-items: center;
  flex-flow: nowrap;
  overflow: hidden
}
.unpaid-progress {
  background: var(--fsk-50);
  padding: 10px;
  display: flex;
  border-radius: calc(var(--fsk-site-border));
  gap: 10px;
  align-items: center
}
.unpaid-progress .btn-main {
  border-radius: calc(var(--fsk-site-border) * 2)
}
.unpaid-amount-text {
  font-size: 10px;
  position: absolute;
  fill: var(--fsk-800)
}
.affiliate-box svg {
  height: 50px;
  transform: rotate(-90deg);
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}
.affiliate-bar-bg {
  fill: none;
  stroke: var(--fsk-300);
  stroke-width: 1.8
}
.affiliate-bar {
  fill: none;
  stroke: var(--fsk-site-color);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  stroke-width: 1.8;
  transition: stroke-dashoffset 1s ease-in-out
}
.affiliate-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}
.affiliate-stats-top {
  padding: 10px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0 0
}
.affiliate-stats-bottom {
  background: var(--fsk-200);
  padding: 10px;
  border-radius: 0 0 10px 10px
}
.affiliate-pay-list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  gap: 5px
}
.affiliate-pay-list .table td {
  border: 0;
  background: var(--fsk-100)!important;
  border-radius: calc(var(--fsk-site-border))
}
.payout-box {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr;
  gap: 5px
}
.payout-item {
  display: flex;
  flex-direction: column;
  gap: 5px
}
.payout-bottom {
  padding: 10px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border))
}
.payout-top {
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border))
}
.child-order-form {
  margin-top: 20px
}
.child-order-form form {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.child-name-servers {
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.name-servers-top {
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0 0
}
.name-servers-item {
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border));
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-sizing: border-box
}
.child-price-box {
  padding: 10px 20px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2);
  font-size: 18px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content
}
.services-item-feature i {
  color: var(--fsk-900)
}
.services-item-feature b {
  color: var(--fsk-800)
}
.panel-content {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2);
  gap: 10px
}
.panel-content-top {
  display: flex;
  justify-content: space-between;
  gap: 10px
}
.panel-date {
  padding: 5px 10px;
  background: var(--fsk-200);
  width: 100%;
  border-radius: calc(var(--fsk-site-border));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box
}
.panel-date span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box
}
.panel-content-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}
.panel-title {
  font-size: 20px;
  color: var(--fsk-900);
  display: flex;
  align-items: center
}
.panel-img-box {
  overflow: hidden;
  border-radius: calc(var(--fsk-site-border));
  height: 150px;
  position: relative
}
.panel-img {
  width: 100%;
  object-fit: cover;
  position: absolute;
  height: 100%;
  border-radius: calc(var(--fsk-site-border))
}
.shadow-img {
  width: 100%;
  position: absolute;
  height: 100%;
  z-index: 1
}
.loading-img {
  width: 100%;
  display: flex;
  border-radius: calc(var(--fsk-site-border));
  height: 100%;
  background: #1d1d21;
  background: #27272b;
  animation: yanipSonme 1s linear infinite;
  align-items: center;
  justify-content: center;
  position: absolute
}
.loading-img i {
  font-size: 30px;
  animation: spin 1s ease-in-out infinite
}
@keyframes yanipSonme {
  0,
  100% {
    background: var(--fsk-200)
  }
  50% {
    background: var(--fsk-300)
  }
}
@keyframes spin {
  0 {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}
.subject-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px
}
.subject-item {
  padding: 10px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  align-items: center;
  border: 1px solid var(--fsk-200);
  cursor: pointer;
  gap: 5px
}
.subject-item.active {
  border: 1px solid var(--fsk-site-color)
}
#message-ticket {
  min-height: 150px
}
.ticket-view-bottom #message {
  min-height: 75px
}
.tickets-uploader {
  background: var(--fsk-100);
  padding: 10px;
  color: var(--fsk-900)!important;
  border-radius: calc(var(--fsk-site-border) * 2);
  border: 1px dashed var(--fsk-200);
  cursor: pointer;
  transition: .3s ease
}
.tickets-uploader .files-label {
  color: var(--fsk-900)!important
}
.tickets-uploader:hover {
  border: 1px dashed var(--fsk-site-color)
}
.ticket-form {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.ticket-title {
  display: flex;
  margin-top: 10px
}
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px
}
.ticket-box {
  background: var(--fsk-100);
  padding: 7px;
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--fsk-site-border) * 2);
  gap: 7px;
  cursor: pointer;
  transition: .14s ease
}
.ticket-box:hover {
  background: var(--fsk-200)
}
.ticket-box.active {
  border: 2px solid var(--fsk-site-color);
  animation: 1s activeBorder infinite
}
.ticket-box-top {
  display: flex;
  justify-content: space-between;
  line-height: 1
}
.ticket-top-content {
  display: flex;
  gap: 5px;
  align-items: center
}
.ticket-id {
  padding: 5px 10px;
  background: var(--fsk-site-color);
  border-radius: calc(var(--fsk-site-border));
  color: #fff
}
.ticket-status {
  padding: 5px 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border));
  transition: .14s ease
}
.ticket-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between
}
.ticket-box:hover .ticket-date,
.ticket-box:hover .ticket-status {
  background: var(--fsk-300)
}
.ticket-date {
  background: var(--fsk-200);
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border));
  line-height: 1;
  transition: .14s ease
}
@keyframes activeBorder {
  0,
  100% {
    border: 2px solid var(--fsk-100)
  }
  50% {
    border: 2px solid var(--fsk-site-color)
  }
}
.tickets-page {
  color: var(--fsk-800);
  padding-top: 8px
}
.tickets-page .grid-container {
  gap: 16px
}
.tickets-page .page-title {
  color: var(--fsk-800);
  margin-bottom: 2px
}
.tickets-create-panel,
.tickets-history-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--overview-card-border, var(--fsk-200));
  border-radius: 18px;
  background: var(--overview-card-bg, var(--fsk-50));
  box-shadow: var(--overview-card-shadow, var(--sh-sm))
}
.tickets-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fsk-200)
}
.tickets-heading-icon {
  display: flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--fsk-site-gradient);
  color: #fff;
  font-size: 17px;
  box-shadow: var(--sh-sm)
}
.tickets-panel-heading h2 {
  margin: 0;
  color: var(--overview-card-text, var(--fsk-800));
  font-size: 17px;
  font-weight: 700
}
.tickets-panel-heading p {
  margin: 4px 0 0;
  color: var(--overview-card-muted, var(--fsk-500));
  font-size: 12px
}
.tickets-page .ticket-form {
  gap: 15px
}
.tickets-page .ticket-form .form-group {
  margin: 0
}
.tickets-page .ticket-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--fsk-800);
  font-weight: 600
}
.tickets-page .ticket-form .form-control,
.tickets-page .tickets-search .form-control {
  min-height: 46px;
  border: 1px solid var(--fsk-200);
  border-radius: 11px;
  background: var(--fsk-50);
  color: var(--fsk-800);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .18);
  transition: border-color .18s ease, box-shadow .18s ease
}
.tickets-page .ticket-form .form-control:focus,
.tickets-page .tickets-search .form-control:focus {
  border-color: var(--fsk-site-color);
  outline: 0;
  box-shadow: 0 0 0 2px var(--fsk-200)
}
.tickets-page .ticket-form .form-control::placeholder,
.tickets-page .tickets-search .form-control::placeholder {
  color: var(--fsk-500)
}
.tickets-page .ticket-form textarea.form-control {
  min-height: 132px;
  resize: vertical
}
.tickets-page .subject-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px
}
.tickets-page .subject-item {
  min-height: 44px;
  justify-content: center;
  border: 1px solid var(--fsk-200);
  border-radius: 10px;
  background: var(--fsk-50);
  color: var(--fsk-800);
  transition: border-color .18s ease, background .18s ease, color .18s ease
}
.tickets-page .subject-item:hover,
.tickets-page .subject-item.active {
  border-color: var(--fsk-site-color);
  background: var(--fsk-100);
  color: var(--fsk-site-color)
}
.tickets-page .subject-item input {
  flex: 0 0 auto;
  accent-color: var(--fsk-site-color)
}
.tickets-page .subject-item label {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  cursor: pointer
}
.tickets-page .subject-item label > i,
.tickets-page .ticket-form label > i {
  margin-inline-end: 7px;
  color: var(--fsk-site-color)
}
.tickets-page .subject-item label > i {
  margin-inline-end: 0
}
.tickets-page .ticket-message-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px
}
.tickets-page .ticket-message-options .option {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 9px 8px;
  overflow-wrap: anywhere;
  text-align: center;
  border: 1px solid var(--fsk-200);
  border-radius: 10px;
  background: var(--fsk-50);
  color: var(--fsk-800);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease
}
.tickets-page .ticket-message-options .option:hover,
.tickets-page .ticket-message-options .option.active {
  border-color: var(--fsk-site-color);
  background: var(--fsk-100);
  transform: none;
  color: var(--fsk-site-color)
}
.tickets-page .tickets-uploader,
.tickets-page .tickets-uploader .files-label {
  border-color: var(--fsk-300);
  background: var(--fsk-50);
  color: var(--fsk-800)!important
}
.tickets-page .tickets-uploader:hover {
  border-color: var(--fsk-site-color);
  background: var(--fsk-100)
}
.tickets-page .ticket-form .btn-main {
  min-height: 48px;
  width: 100%;
  border: 0;
  border-radius: 11px;
  background: var(--fsk-site-gradient);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-sm);
  transition: filter .18s ease, transform .18s ease
}
.tickets-page .ticket-form .btn-main:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px)
}
.tickets-page .ticket-form .btn-main:disabled {
  cursor: not-allowed;
  opacity: .58
}
.tickets-page .tickets-search {
  margin-bottom: 16px
}
.tickets-page .tickets-search .input-group {
  display: flex;
  gap: 8px
}
.tickets-page .tickets-search .input-group .form-control {
  min-width: 0;
  flex: 1
}
.tickets-page .tickets-search .input-group-btn {
  display: flex
}
.tickets-page .tickets-search .btn {
  min-width: 46px;
  border: 1px solid var(--fsk-site-color);
  border-radius: 11px!important;
  background: var(--fsk-site-gradient);
  color: #fff
}
.tickets-page .ticket-title {
  margin: 0 0 10px;
  color: var(--fsk-800);
  font-size: 14px;
  font-weight: 700
}
.tickets-page .ticket-list {
  max-height: 610px;
  margin-top: 0;
  padding: 1px 3px 2px 1px;
  overflow-y: auto;
  scrollbar-color: var(--fsk-site-color) var(--fsk-100);
  scrollbar-width: thin
}
.tickets-page .ticket-box {
  position: relative;
  gap: 8px;
  padding: 12px 13px 12px 54px;
  border: 1px solid var(--fsk-200);
  border-inline-start: 3px solid var(--fsk-site-color);
  border-radius: 12px;
  background: var(--fsk-50);
  color: var(--fsk-800);
  text-decoration: none
}
.tickets-page .ticket-box:hover {
  border-color: var(--fsk-site-color);
  background: var(--fsk-100)
}
.tickets-page .ticket-box.active {
  border-color: var(--fsk-site-color);
  border-inline-start-color: var(--fsk-site-color);
  animation: none;
  box-shadow: var(--sh-xs)
}
.tickets-page .ticket-box-top {
  align-items: center;
  gap: 10px
}
.tickets-page .ticket-top-content {
  min-width: 0;
  gap: 8px
}
.tickets-page .ticket-id {
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--fsk-site-gradient);
  color: #fff;
  font-weight: 700
}
.tickets-page .ticket-id i,
.tickets-page .ticket-status i,
.tickets-page .ticket-date i {
  margin-inline-end: 5px
}
.tickets-page .ticket-subject {
  overflow: hidden;
  color: var(--fsk-800);
  text-overflow: ellipsis;
  white-space: nowrap
}
.tickets-page .ticket-status,
.tickets-page .ticket-date {
  border-radius: 7px;
  background: var(--fsk-100);
  color: var(--fsk-600)
}
.tickets-page .ticket-status {
  flex: 0 0 auto
}
.tickets-page .ticket-status {
  border: 1px solid var(--fsk-green);
  background: var(--fsk-green);
  color: #fff
}
.tickets-page .ticket-open-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fsk-100);
  color: var(--fsk-site-color);
  transform: translateY(-50%);
  transition: background .18s ease, color .18s ease
}
.tickets-page .ticket-box:hover .ticket-open-icon {
  background: var(--fsk-site-color);
  color: #fff
}
.tickets-page .ticket-box:hover .ticket-date,
.tickets-page .ticket-box:hover .ticket-status {
  background: var(--fsk-200)
}
.tickets-page .ticket-box:hover .ticket-status {
  border-color: var(--fsk-green);
  background: var(--fsk-green);
  color: #fff
}
.tickets-page .ticket-bottom {
  color: var(--fsk-600)
}
.tickets-page .nav-pills.ticket-pagination {
  grid-column: 1 / -1
}
@media only screen and (max-width: 640px) {
  .tickets-create-panel,
  .tickets-history-panel {
    padding: 14px;
    border-radius: 15px
  }
  .tickets-page .subject-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .tickets-page .ticket-list {
    max-height: 430px
  }
  .tickets-page .ticket-box-top {
    align-items: flex-start
  }
  .tickets-page .ticket-status {
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
}
@media only screen and (max-width: 360px) {
  .tickets-page .subject-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px
  }
  .tickets-page .subject-item {
    min-width: 0;
    min-height: 40px;
    gap: 4px;
    padding: 6px
  }
  .tickets-page .subject-item input {
    width: 12px;
    height: 12px;
    margin: 0
  }
  .tickets-page .subject-item label {
    gap: 3px;
    font-size: 10px
  }
  .tickets-page .subject-item label > i {
    font-size: 10px
  }
}
.master-form .master-form-mobile {
  display: none
}
.master-form.opened .master-form-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.order-form-title {
  font-size: 20px;
  color: var(--fsk-800)
}
.master-form-mobile i {
  width: 30px;
  height: 30px;
  display: flex;
  border-radius: calc(var(--fsk-site-border) * 2);
  background: var(--fsk-200);
  align-items: center;
  justify-content: center;
  cursor: pointer
}
.master-select {
  display: flex;
  flex-direction: column;
  gap: 5px
}
.buy-btn {
  display: none
}
#master-service-dropdown {
  display: flex;
  flex-direction: column;
  gap: 5px
}
.settings-box-btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px
}
.settings-btn {
  background: var(--fsk-200);
  font-size: 20px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10px
}
.whatsapp_icon_top {
  background: var(--fsk-200);
  font-size: 20px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10px
}
.telegram_icon_top {
  background: var(--fsk-200);
  font-size: 30px;
  border-radius: calc(var(--fsk-site-border) * 2);
  border: 1px solid var(--fsk-300);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  gap: 10px;
  padding: 10px;
  transition: background-color .3s,transform .3s
}
.telegram_icon_top a {
  color: var(--fsk-800);
  transition: color .3s ease,transform .3s ease
}
.telegram_icon_top a:hover {
  color: var(--fsk-500);
  transform: scale(1.1)
}
.telegram_icon_top i {
  font-size: 28px
}
.telegram_icon_top:hover {
  background-color: var(--fsk-300);
  transform: scale(1.05)
}
.settings-btn i {
  animation: spin 2s ease-in-out infinite
}
.link-content,
.settings-content {
  display: none
}
.link-bg,
.settings-bg {
  display: none
}
.link-bg.active,
.settings-bg.active {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 4;
  display: flex
}
.neworder-settings-box {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: var(--fsk-50);
  border-radius: calc(var(--fsk-site-border) * 4);
  gap: 10px;
  width: -moz-available;
  border: 3px solid var(--fsk-200)
}
.link-content .neworder-settings-box {
  min-width: 580px;
  width: 400px gap: 20px
}
.close-settings {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.close-settings span {
  font-size: 18px;
  color: var(--fsk-800)
}
.close-settings i {
  width: 30px;
  height: 30px;
  background: var(--fsk-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fsk-900);
  border-radius: calc(var(--fsk-site-border) * 1.25);
  cursor: pointer
}
.neworder-size {
  display: flex;
  gap: 10px
}
.size-select-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: calc(var(--fsk-site-border) * 2);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--fsk-50) width:200px;
  width: -moz-available
}
.size-select-box.active {
  background: var(--fsk-site-color);
  border: 2px solid var(--fsk-site-color)
}
.size-img {
  padding: 10px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border))
}
.size-img img {
  width: 100%;
  height: 100%;
  filter: var(--fsk-100)
}
html.light .size-img img {
  filter: invert(91%) sepia(10%) saturate(81%) hue-rotate(175deg) brightness(99%) contrast(88%)
}
.size-text {
  padding: 5px 10px;
  background: var(--fsk-100);
  text-align: center;
  border-radius: calc(var(--fsk-site-border))
}
.theme-type {
  display: flex;
  gap: 5px;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.theme-select-btn {
  padding: 5px;
  width: 100%;
  text-align: center;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) *1.5);
  cursor: pointer
}
.theme-select-btn.active {
  background: var(--fsk-site-color);
  color: #fff
}
.buy-btn-item i {
  padding: 15px;
  background: var(--fsk-site-color);
  border-radius: calc(var(--fsk-site-border)* 1.5);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 5;
  color: #fff
}
.master-form-bg {
  display: none
}
.master-form-bg.active {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 5
}
.ticket-view-page {
  display: flex;
  flex-direction: column;
  position: relative;
  height: calc(100vh - 120px);
  margin-top: 20px;
  gap: 10px
}
.ticket-view-top {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.ticket-view-id {
  padding: 5px 20px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border))
}
.ticket-view-subject {
  padding: 5px 20px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border))
}
.ticket-view-message-list {
  display: flex;
  gap: 10px;
  flex-direction: column-reverse;
  height: 100%;
  overflow: auto;
  position: relative;
  max-height: 590px
}
.ticket-view-page::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 25px;
  background: linear-gradient(180deg,var(--fsk-50) 0,rgb(0 0 0 / 0) 100%);
  box-sizing: border-box;
  margin-top: 40px;
  display: flex;
  z-index: 1
}
.message-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px
}
.message-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px
}
.ticket-image {
  height: 75px;
  width: 150px;
  object-fit: cover;
  border-radius: calc(var(--fsk-site-border) * 2);
  cursor: zoom-in
}
.message-text {
  background: var(--fsk-100);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.message-left .message-text {
  background: var(--fsk-site-color);
  color: #fff
}
.message-left i {
  color: var(--fsk-blue)
}
.message-bottom {
  display: flex;
  font-size: 12px;
  gap: 5px
}
.message-author {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--fsk-700)
}
.ticket-view-bottom {
  width: 100%
}
.ticket-view-bottom form {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.enlarged {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: contain;
  z-index: 9999;
  cursor: zoom-out;
  background: rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px)
}
.update-list {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.update-box {
  background: var(--fsk-100);
  padding: 5px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  flex-direction: column;
  gap: 5px
}
.update-top {
  display: flex;
  justify-content: space-between;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border));
  padding: 5px 10px
}
.update-service-name {
  font-size: 14px
}
.update-bottom {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--fsk-50);
  gap: 2px;
  border-radius: calc(var(--fsk-site-border))
}
.term-and-faq {
  border-radius: calc(var(--fsk-site-border) * 2);
  margin-top: 20px
}
.service-features-item {
  border-radius: calc(var(--fsk-site-border))
}
.service-features .service-features-item .feature-name {
  position: absolute;
  margin-top: -62px!important;
  background: var(--fsk-300)!important;
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border));
  display: none;
  color: var(--fsk-900);
  z-index: 5
}
.service-features .service-features-item:hover .feature-name {
  position: absolute;
  margin-top: -70px;
  background: Var(--fsk-300);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border));
  display: block
}
.services-item-bottom .service-features {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  grid-area: 4/1/3/3
}
.user-info-box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px
}
.user-box-info {
  display: flex;
  align-items: center;
  gap: 10px
}
.user-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--fsk-100);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px)
}
.userbox-mail {
  font-size: 12px
}
.btn-apikey {
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2);
  color: var(--fsk-800);
  padding: 5px 15px 5px 15px;
  gap: 10px
}
.btn-apikey i {
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border))
}
.user-well {
  padding: 15px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 3);
  display: flex;
  flex-direction: column
}
.user-well form {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.user-well-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: var(--fsk-700);
  display: flex;
  align-items: center;
  gap: 10px
}
.tfa-span {
  background: var(--fsk-200);
  padding: 10px;
  display: flex;
  margin-bottom: 10px;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.user-box-info .fi-sr-shield-trust {
  color: var(--fsk-site-color)
}
.alert {
  padding: 15px;
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: left
}
.alert-success {
  background-color: var(--fsk-green);
  color: #fff
}
.alert-info {
  background-color: var(--fsk-blue);
  color: #fff
}
.alert-warning {
  background-color: var(--fsk-orange);
  color: #fff
}
.alert-danger {
  background-color: var(--fsk-red);
  color: #fff
}
.close {
  border-radius: calc(var(--fsk-site-border));
  width: 30px;
  height: 30px;
  background: #fff;
  border: none;
  color: #000;
  font-size: 20px;
  cursor: pointer
}
.active-2fa {
  padding: 10px;
  background: var(--fsk-green);
  color: #fff;
  border-radius: calc(var(--fsk-site-border) * 2);
  margin-bottom: 10px
}
.main-header {
  background: var(--fsk-50);
  height: 80px;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  border-bottom: 1px solid var(--fsk-100)
}
.main-header-content {
  display: flex;
  justify-content: space-between;
  padding: 0 5px
}
.main-header-btn-mobile-group {
  display: flex;
  gap: 10px
}
.main-header-right {
  display: flex;
  gap: 10px
}
.main-header-logo {
  display: flex;
  align-items: center
}
.main-header-logo .logo {
  height: 35px
}
.main-header-link {
  display: flex;
  gap: 20px;
  font-size: 16px;
  font-weight: 500;
  margin-right: 10px
}
.main-header-link-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px
}
.services-page .service-id-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  direction: ltr
}
.services-page .service-id-actions .favbox {
  flex: 0 0 auto
}
.main-header-link-item.active {
  position: relative
}
.main-header-btn {
  display: flex;
  align-items: center;
  gap: 10px
}
.main-header-btn-item {
  padding: 10px 25px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.main-header-btn-item.active {
  background: var(--fsk-site-color);
  color: #fff
}
.main-header-mobile {
  display: flex;
  flex-direction: column;
  position: fixed;
  background: var(--fsk-50);
  top: 0;
  z-index: 1;
  left: 0;
  right: 0;
  padding: 18px 12px;
  visibility: hidden;
  gap: 20px;
  opacity: 0;
  transition: .14s ease;
  border-bottom: 1px solid var(--fsk-200)
}
.main-header-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.main-header-mobile-btn {
  display: flex;
  font-size: 19px;
  background: var(--fsk-200);
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.main-header-mobile-link-item {
  padding: 10px 15px;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.main-header-mobile-link {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  gap: 5px
}
.main-header-mobile-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px
}
.main-header-mobile-bottom .main-header-btn-item {
  width: 100%;
  text-align: center
}
.auth-screen-container {
  display: flex;
  justify-content: center;
  height: calc(100vh - 100px)
}
.auth-screen-container.signup {
  display: flex;
  justify-content: center;
  height: auto;
  margin-bottom: 50px
}
@media only screen and (max-width:1024px) {
  .auth-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%
  }
}
@media only screen and (min-width:1024px) {
  .auth-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 450px;
    gap: 10px
  }
}
.auth-screen-title {
  font-size: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fsk-800)
}
.auth-screen-form {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.auth-screen-form .btn {
  justify-content: center
}
.confirm-mail-btn {
  display: flex;
  gap: 10px
}
.signup-alt-text {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 5px
}
.signup-alt-text a {
  color: var(--fsk-site-color)
}
.checkbox a {
  color: var(--fsk-site-color)
}
.auth-screen.signup {
  display: flex;
  justify-content: flex-start;
  margin-top: 150px
}
.social-slider {
  display: flex;
  padding-left: 20px;
  padding-top: 20px;
  gap: 20px;
  height: 65px;
  overflow: hidden;
  color: var(--fsk-800);
  position: relative;
  background: var(--fsk-50);
  padding-bottom: 50px
}
.social-slider::before {
  content: "";
  background: linear-gradient(90deg,var(--fsk-50) 0,rgba(254,0,0,0) 20%,rgba(255,1,1,0) 80%,var(--fsk-50) 100%);
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  z-index: 2
}
.social-item {
  display: flex;
  justify-content: space-between;
  background: var(--fsk-100);
  border-radius: calc(var(--fsk-site-border) * 2);
  min-width: 164px;
  font-size: 16px;
  z-index: 1;
  padding: 20px;
  white-space: nowrap;
  line-height: 1px;
  position: relative;
  align-items: center;
  color: var(--fsk-700)
}
.absolute-icon {
  position: absolute;
  left: 20px;
  filter: blur(20px)
}
.social-item i {
  font-size: 26px;
  line-height: 26px
}
.fa-vimeo {
  color: #80c5ec;
  -webkit-background-clip: text;
  background-clip: text
}
.fa-comment-music,
.fa-dailymotion,
.fa-discord,
.fa-pinterest,
.fa-reddit,
.fa-soundcloud,
.fa-spotify,
.fa-tumblr,
.fa-twitch,
.fa-youtube {
  -webkit-background-clip: text
}
.fa-twitch {
  color: #6842ac;
  background-clip: text
}
.fa-reddit {
  color: #f44707;
  background-clip: text
}
.fa-telegram,
.fa-telegram-plane {
  color: #1b95cf;
  -webkit-background-clip: text;
  background-clip: text
}
.fa-linkedin,
.fa-twitter {
  -webkit-background-clip: text
}
.fa-linkedin {
  color: #0475b4;
  background-clip: text
}
.fa-soundcloud {
  color: #ef7509;
  background-clip: text
}
.fa-spotify {
  color: #1fc158;
  background-clip: text
}
.fa-twitter {
  color: #1b9ff1;
  background-clip: text
}
.fa-facebook,
.fa-facebook-f {
  color: #12a1f4;
  -webkit-background-clip: text;
  background-clip: text
}
.fa-youtube {
  color: #e60606;
  background-clip: text
}
.fa-pinterest {
  color: #ee0226;
  background-clip: text
}
.fa-signal-stream {
  color: #17b3e6;
  -webkit-background-clip: text;
  background-clip: text
}
.fa-snapchat-ghost {
  color: #f9f606;
  -webkit-background-clip: text;
  background-clip: text
}
.fa-comment-music,
.fa-dailymotion,
.fa-discord,
.fa-tumblr {
  background-clip: text
}
.fa-tumblr {
  color: #33435a
}
.fa-tiktok {
  color: var(--fsk-500);
  text-shadow: 1px 1px #f72e4dfc,-1px -1px #09f3f3
}
.fa-comment-music {
  color: #f9de48
}
.fa-discord {
  color: #5865f6
}
.fa-dailymotion {
  color: #03a8fb
}
.fa-eye {
  color: #01ffee;
  -webkit-background-clip: text;
  background-clip: text
}
.fab.fa-instagram {
  background: linear-gradient(180deg,#8000ff 0,#ffb800 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
.feature-list {
  padding: 120px 0;
  background-color: var(--fsk-100);
  background-image: url('https://cdn.fsksoft.com/img/masterv3/world-map-light.svg');
  background-size: cover;
  background-position: center;
  position: relative
}
html.dark .feature-list {
  padding: 120px 0;
  background-color: var(--fsk-100);
  background-image: url('https://cdn.fsksoft.com/img/masterv3/world-map-dark.svg');
  background-size: cover;
  background-position: center;
  position: relative
}
.feature-list::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(180deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%)
}
.feature-list::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(0deg,var(--fsk-100) 0,rgb(0 0 0 / 0) 100%)
}
.feature-box {
  background: var(--fsk-200);
  padding: 20px;
  border-radius: calc(var(--fsk-site-border) * 2);
  color: var(--fsk-800);
  z-index: 1
}
.feature-icon {
  font-size: 28px
}
.main-page-title {
  display: flex;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  flex-direction: column;
  position: relative;
  align-items: center;
  margin-bottom: 70px;
  color: var(--fsk-900);
  gap: 10px
}
.feature-list .main-page-title {
  z-index: 1
}
.main-page-title i {
  width: 40px;
  height: 40px;
  display: flex;
  padding: 5px;
  background: var(--fsk-site-color);
  border-radius: calc(var(--fsk-site-border) * 100);
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 0 100px 5px var(--fsk-site-color)
}
.main-page-title img {
  height: 110px;
  width: 110px
}
.page-title img {
  height: 110px;
  width: 110px
}
.comments {
  padding-top: 50px;
  padding-bottom: 50px;
  background: var(--fsk-100)
}
.comment-list {
  gap: 20px
}
.comment-box {
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.comment-top {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid var(--fsk-300);
  justify-content: space-between
}
.comment-top .star-group {
  color: var(--fsk-amber)
}
.user-comment {
  padding: 15px
}
@media only screen and (max-width:992px) {
  .m-hidden {
    display: none!important
  }
}
.home-section {
  padding-top: 125px;
  overflow: hidden;
  position: relative
}
.particle-animation {
  position: absolute;
  height: 100%;
  width: 100%;
  margin-top: -120px;
  z-index: -1
}
.home-section-content {
  display: flex;
  justify-content: center;
  padding-bottom: 30px
}
.home-section-content::before {
  content: "";
  width: 300px;
  height: 250px;
  position: absolute;
  background: var(--fsk-site-color);
  filter: blur(250px);
  margin-top: -250px;
  z-index: -1
}
.home-title {
  font-size: 38px;
  color: var(--fsk-900);
  font-weight: 600;
  margin: 0
}
.sidebar-menu-item .badge {
  display: flex;
  padding: 5px 15px;
  justify-content: center;
  background: var(--fsk-site-color)!important;
  border: none;
  line-height: 1;
  -webkit-animation: pulse-yellow 2s infinite
}
@-webkit-keyframes pulse-yellow {
  0% {
    transform: scale(.95);
    box-shadow: 0 0 0 0 rgb(136 70 247 / 70%)
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(240,173,78,0)
  }
  100% {
    transform: scale(.95);
    box-shadow: 0 0 0 0 rgb(132 78 240 / 0%)
  }
}
.badge {
  margin: 0;
  background: var(--fsk-50);
  width: fit-content;
  padding: 5px 15px 5px 5px;
  border-radius: 100px;
  color: var(--fsk-900);
  border: 1px solid var(--fsk-100);
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px
}
.fsk-rtl .badge {
  padding: 8px 8px 8px 8px
}
.badge i {
  width: 30px;
  height: 30px;
  background: var(--fsk-site-color);
  border-radius: calc(var(--fsk-site-border) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff
}
@media only screen and (max-width:1024px) {
  .login-box-content {
    padding: 0;
    gap: 15px;
    margin: 20px 0;
    background: var(--fsk-100);
    padding: 15px;
    border-radius: calc(var(--fsk-site-border) * 2)
  }
  .home-left-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    text-align: center;
    align-items: center
  }
  footer {
    height: fit-content;
    display: flex;
    align-items: center;
    padding: 20px
  }
  .footer-list {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    color: var(--fsk-800);
    flex-direction: column
  }
  .footer-logo img {
    height: 30px;
    width: auto
  }
}
@media only screen and (min-width:1024px) {
  .login-box-content {
    padding: 0;
    gap: 15px;
    margin: 20px 0;
    background: var(--fsk-100);
    padding: 15px;
    border-radius: calc(var(--fsk-site-border) * 2);
    height: unset
  }
  .home-left-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    text-align: center;
    align-items: center;
    width: 70vh
  }
  footer {
    display: flex;
    align-items: center;
    padding: 30px 0
  }
  .footer-list {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    color: var(--fsk-800)
  }
  .footer-logo img {
    height: 30px;
    width: auto
  }
}
.site-gradient {
  display: flex;
  gap: 15px;
  border-radius: calc(var(--fsk-site-border) * 2);
  background: var(--fsk-site-gradient);
  transition: .14s ease;
  color: #fff
}
.site-gradient:hover {
  background: var(--fsk-site-gradient);
  opacity: .8
}
.login-box-form .g-recaptcha {
  display: flex
}
.login-form-control {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: var(--fsk-200);
  padding: 15px;
  color: var(--fsk-700)!important;
  display: block;
  background-image: none;
  border-radius: calc(var(--fsk-site-border));
  height: 50px
}
.login-form-control:focus {
  border: none!important;
  outline: 0
}
.login-form-control::-webkit-input-placeholder {
  color: var(--fsk-800)
}
.login-btn-group {
  display: flex;
  gap: 15px;
  width: 100%;
  height: 50px
}
.login-remember {
  min-width: 50px;
  height: 100%;
  display: flex!important;
  align-items: center;
  justify-content: center;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border));
  margin: 0!important
}
.login-resetpassword {
  min-width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border))
}
.login-signin-btn {
  width: 100%
}
.login-btn {
  height: 100%
}
.captchaBox {
  display: flex;
  justify-content: center;
  align-items: center
}
.captcha-loading {
  display: flex;
  font-size: 26px;
  position: relative;
  animation: 1s spin linear infinite;
  justify-content: center;
  align-items: center
}
.captcha-loading i {
  display: flex;
  align-items: center;
  justify-content: center
}
.why-work {
  padding: 120px 0
}
.step-box {
  background: var(--fsk-100);
  padding: 25px;
  border-radius: calc(var(--fsk-site-border) * 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: .14s ease;
  margin-bottom: 20px
}
.step-icon {
  width: 40px;
  height: 40px;
  font-size: 18px;
  background: var(--fsk-700);
  border-radius: calc(var(--fsk-site-border) * 100);
  top: -25px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  transition: .14s ease;
  color: var(--fsk-50)
}
.step-text {
  text-align: center;
  padding-bottom: 35px
}
.step-number {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: calc(var(--fsk-site-border) * 2);
  justify-content: center;
  background: var(--fsk-700);
  color: var(--fsk-50);
  bottom: 5px;
  right: 5px;
  font-size: 18px;
  transition: .14s ease
}
.step-box:hover .step-number {
  background: var(--fsk-site-color);
  color: #fff
}
.step-box:hover .step-icon {
  background: var(--fsk-site-color);
  color: #fff
}
.faq-box {
  padding: 120px 0
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 18px
}
.faq-header {
  background-color: var(--fsk-200);
  color: var(--fsk-800);
  cursor: pointer;
  padding: 20px;
  position: relative;
  border-radius: calc(var(--fsk-site-border) * 2);
  transition: .14s ease;
  border-color: var(--fsk-300)
}
.faq-item.active .faq-header {
  border-radius: calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0 0;
  border-bottom: 1px solid var(--fsk-400);
  background: var(--fsk-400)
}
.faq-header:hover {
  background-color: var(--fsk-400)
}
.faq-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(0);
  transition: transform .3s;
  font-size: 28px
}
.fsk-rtl .faq-icon {
  position: absolute;
  left: 20px;
  right: auto;
  top: 50%;
  transform: translateY(-50%) rotate(0);
  transition: transform .3s;
  font-size: 28px
}
.faq-item.active .faq-icon {
  transform: translateY(-50%) rotate(0)
}
.faq-content {
  display: none;
  padding: 10px
}
.faq-item.active .faq-content {
  display: block;
  animation: slide-down .5s ease;
  background: var(--fsk-200);
  padding: 20px;
  border-radius: 0 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2)
}
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.sms-verify {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 336px;
  gap: 10px;
  justify-content: center
}
.verify-title {
  font-size: 32px;
  color: var(--fsk-900)
}
.verification-screen input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}
.verify-small-text {
  font-size: 16px;
  color: var(--fsk-500)
}
.verify-form form {
  gap: 10px;
  display: flex;
  flex-direction: column
}
.verify-input {
  align-items: center;
  display: flex
}
.verify-aminate {
  width: 100px
}
.error-aminate {
  animation: 3s ease-in-out forwards scaleAminate
}
.lock-animate {
  animation: .3s ease-in-out forwards lockAminate
}
.verify-input-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px
}
.verify-input {
  max-width: 20px;
  font-size: 18px;
  justify-content: center;
  background: var(--fsk-100);
  border: 1px solid var(--fsk-200);
  -moz-appearance: textfield;
  display: flex;
  align-items: center;
  text-align: center
}
.sms-verify input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}
.blog-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--fsk-100);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 3)
}
.blog-title {
  color: var(--fsk-900);
  font-size: 16px;
  font-weight: 600
}
.blog-image {
  width: 100%
}
.blog-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.blog-box .btn {
  justify-content: center
}
.blog-top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px
}
.blog-view-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute
}
.blog-view-image img {
  width: 100%;
  object-fit: cover;
  opacity: .5;
  height: 100%
}
.blog-view-title {
  z-index: 1;
  color: var(--fsk-900)
}
.blog-content {
  background: var(--fsk-100);
  padding: 15px;
  border-radius: calc(var(--fsk-site-border) * 2);
  margin-top: 20px;
  margin-bottom: 20px
}
.announcements-box {
  position: fixed;
  width: 350px;
  right: -400px;
  bottom: -300px;
  background: var(--fsk-100);
  border: 3px solid var(--fsk-200);
  z-index: 4;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: .14s ease;
  margin: 10px;
  border-radius: calc(var(--fsk-site-border) * 4)
}
.announcements-box.active {
  right: 0;
  top: 0;
  bottom: 0
}
.announcements-top i {
  width: 30px;
  height: 30px;
  background: var(--fsk-300);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--fsk-site-border));
  cursor: pointer
}
.announcements-top i:hover {
  background: var(--fsk-400)
}
.announcements-top {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  align-items: center;
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2)
}
.announcements-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  gap: 5px
}
.announcements-item-top {
  display: flex;
  flex-direction: column
}
.announcements-title {
  font-size: 16px;
  color: var(--fsk-700)
}
.announcements-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.announcements-date {
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border));
  background: var(--fsk-300)
}
.announcements-stats {
  background: var(--fsk-site-color);
  padding: 5px 10px;
  border-radius: calc(var(--fsk-site-border));
  color: #fff
}
.notify-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  border-radius: calc(var(--fsk-site-border) * 2)
}
.header-btn-box i {
  cursor: pointer
}
.popupaciklama {
  background: var(--fsk-100);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  max-height: 200px;
  overflow: auto
}
.bottom-navigaiton {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--fsk-100);
  border-top: 1px solid var(--fsk-200);
  display: grid;
  grid-template-columns: repeat(5,1fr);
  padding: 10px;
  gap: 10px;
  z-index: 3
}
.voice-animation {
  display: none
}
.voice-animation.active {
  position: fixed;
  inset: 0;
  z-index: 5
}
.voice-animation.active {
  background: rgb(255 255 255 / 74%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center
}
html.dark .voice-animation.active {
  background: rgb(0 0 0 / 74%)
}
.voice-animation-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px
}
.voice-text {
  font-size: 36px;
  font-weight: 600;
  color: var(--fsk-900)
}
.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--fsk-site-border) * 2);
  font-size: 12px;
  gap: 5px;
  line-height: 1;
  padding: 10px 0
}
.bottom-item i {
  font-size: 18px
}
.bottom-item .badge {
  display: none
}
.bottom-item.active {
  color: var(--fsk-site-color)
}
.bottom-item-name {
  white-space: nowrap
}
#voice-text {
  transition: all .5s ease;
  opacity: 0;
  transform: translateY(-20px)
}
#voice-text.show {
  opacity: 1;
  transform: translateY(0);
  text-align: center
}
.signup-social {
  display: flex;
  justify-content: center
}
.wallet-SMMXSTAR {
  font-size: 14px;
  padding: 10px 10px;
  background: var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 1.5);
  cursor: pointer
}
.currencyHidder {
  position: absolute;
  z-index: 9;
  right: 0;
  top: 0;
  height: 100%;
  background: var(--fsk-site-color);
  border: none;
  border-radius: 0 calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0
}
.currencyHidder .active {
  z-index: 4;
  color: var(--fsk-900)
}
.currencyHidder .hide {
  display: none
}
.currencyHidder span i {
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: var(--fsk-700)
}
.btn-main.bg-primary {
  background: var(--fsk-site-color);
  color: #fff
}
.buttons {
  display: flex;
  align-items: center;
  background: var(--fsk-200);
  padding: 10px;
  border-radius: calc(var(--fsk-site-border) * 2);
  font-size: 12px;
  gap: 5px;
  line-height: 1;
  white-space: nowrap
}
.buttons1 {
  background: var(--fsk-site-color);
  color: #fff;
  font-size: 12px;
  border: 0;
  border-radius: calc(var(--fsk-site-border) * 3);
  padding: 15px 30px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  gap: 5px
}
.account-detail-box {
  max-height: 0;
  width: 0;
  overflow: hidden;
  padding: 15px;
  display: none;
  left: 10px;
  top: 0;
  margin-top: 75px;
  border-radius: calc(var(--fsk-site-border) * 4);
  background: var(--fsk-100);
  position: absolute;
  border: 3px solid var(--fsk-200);
  margin-right: 100px;
  -webkit-backdrop-filter: blur(0)!important;
  z-index: 10
}
.account-detail-box.active {
  display: block;
  height: auto;
  width: auto;
  min-width: 300px;
  max-height: inherit
}
.account-detail-box.active img.profile-image {
  width: 40px;
  height: 40px;
  display: block
}
.prodile-box {
  align-items: center;
  display: flex;
  gap: 8px
}
.account-detail-box .user-name {
  display: flex;
  flex-direction: column;
  color: var(--fsk-800)
}
.profile-button {
  padding: 10px 15px;
  display: flex;
  background: var(--fsk-200);
  color: var(--fsk-800);
  border-radius: calc(var(--fsk-site-border)* 2);
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1;
  gap: 10px;
  border: 1px solid var(--fsk-400)
}
.account-detail-box .profiler-btn .btn {
  display: flex;
  margin-top: 20px;
  font-size: 16px;
  border-radius: calc(var(--fsk-site-border * .5));
  justify-content: center;
  background: var(--fsk-red);
  color: var(--fsk-200);
  padding: 15px 10px;
  font-weight: 500
}
.text-danger {
  color: var(--fsk-500);
  font-size: 10px;
  display: flex;
  padding: 5px;
  align-items: center;
  line-height: 3
}
.dashboard-info_wraper {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px
}
.dashboard-info_wraper .dashboard-item {
  background: var(--fsk-100);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 5px
}
.dashboard-info_wraper .dashboard-item .icon {
  font-size: 30px;
  color: var(--fsk-site-color)
}
.dashboard-info_wraper .dashboard-item .text h3,
.dashboard-info_wraper .dashboard-item .text h4 {
  margin-bottom: 0;
  color: var(--fsk-700)
}
.dashboard-info_wraper .dashboard-item .text h3 {
  margin-top: 0
}
.dashboard-info_wraper .dashboard-item .text h4 {
  margin-top: 5px
}
.dashData h2 {
  font-size: 20px;
  color: var(--fsk-700);
  margin: 5px 0
}
.dashData h4 {
  margin: 5px 0;
  color: var(--fsk-700);
  font-size: 16px
}
@media only screen and (max-width:768px) {
  .currencyHider_btn_phn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: 0 0;
    border: none;
    padding: 0;
    color: var(--fsk-500);
    cursor: pointer
  }
  .currencyHider_btn_phn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.22rem;
    line-height: 1
  }
  .d-none-ph {
    display: none
  }
  .neworder-top {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
  }
}
@media only screen and (max-width:1024px) {
  .account-detail-box.active {
    position: fixed;
    background: var(--fsk-100);
    padding: 20px;
    border-radius: calc(var(--fsk-site-border)* 4) calc(var(--fsk-site-border)* 4) 0 0;
    visibility: visible;
    opacity: 1;
    z-index: 10;
    bottom: 0;
    left: inherit;
    right: 0;
    top: inherit;
    margin: 0;
    gap: 10px;
    width: calc(100% - 48px)
  }
  .dashboard-info_wraper {
    grid-template-columns: repeat(3,1fr)
  }
}
@media only screen and (max-width:550px) {
  .dashboard-info_wraper {
    grid-template-columns: repeat(1,1fr)
  }
  .dashboard-info_wraper .dashboard-item .icon {
    font-size: 20px
  }
  .dashboard-info_wraper {
    gap: 10px
  }
  .dashboard-info_wraper .dashboard-item {
    min-width: 50%;
    padding: 15px;
    border-radius: 5px
  }
  .dashboard-info_wraper .dashboard-item .text h3 {
    font-size: 12px
  }
  .dashboard-info_wraper .dashboard-item .text h4 {
    font-size: 10px
  }
}
.link_item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--fsk-200);
  border: 1px solid var(--fsk-400);
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 5px
}
.link_item > * {
  margin: 0;
  padding: 0
}
button.deleteLinkBtn {
  position: absolute;
  left: 0;
  top: 0;
  padding: 15px;
  font-size: 25px;
  background: 0 0;
  border: none;
  color: #ff5e5e;
  cursor: pointer
}
.link_text_with_btn {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  align-items: center
}
.link_popup_btn {
  background: 0 0;
  border: none;
  text-align: left;
  min-width: 60px;
  color: var(--fsk-site-color);
  cursor: pointer
}
@media only screen and (max-width:550px) {
  .link-content .neworder-settings-box {
    min-width: 89%
  }
}
.userProgress {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center
}
.userProgress #customRange1 {
  width: 300px
}
.userProgress .account_badges {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 20px;
  font-weight: 700
}
@media only screen and (max-width:768px) {
  .userProgress {
    flex-direction: column;
    gap: 10px
  }
  .userProgress .progress_middle {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    align-items: center
  }
  .userProgress .progress_middle #customRange1 {
    width: 100%
  }
}
.ticket-message-options {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.option {
  padding: 10px;
  margin: 5px;
  gap: 10px;
  border: 1px solid var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 2);
  cursor: pointer;
  transition: all .2s ease
}
.option:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  border-color: var(--fsk-site-color)
}
.option.active {
  background-color: var(--fsk-100);
  border-color: var(--fsk-site-color);
  color: var(--fsk-site-color)
}
#message_old,
.ticket-message-options {
  display: none
}
@media (max-width:768px) {
  .hide i,
  .show i {
    background: var(--fsk-400);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px
  }
  .hide i,
  .show i :hover {
    background: var(--fsk-site-color)
  }
}
.steps-progress {
  width: 100%;
  margin-top: 12px
}
.progress-bar {
  width: 100%;
  height: 10px;
  background: var(--fsk-300);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-top: 15px
}
.progress-fill {
  height: 100%;
  background: var(--fsk-site-gradient);
  border-radius: 5px;
  transition: width .3s ease
}
.progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 14px;
  color: var(--fsk-600);
  margin-top: 15px
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: normal;
  background: var(--fsk-site-gradient);
  gap: 50px;
  border-radius: 4px;
  padding: 2.5px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  margin-right: 2px
}
@keyframes shimmer {
  0% {
    background-position: -200% center
  }
  100% {
    background-position: 200% center
  }
}
@keyframes ai-shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg)
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg)
  }
}
@keyframes ai-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(0,0,0,.25)
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 15px 40px rgba(0,0,0,.35)
  }
}
@keyframes pulse-ring {
  0% {
    transform: scale(.8);
    opacity: 1
  }
  100% {
    transform: scale(2);
    opacity: 0
  }
}
::-webkit-scrollbar {
  width: 8px
}
::-webkit-scrollbar-track {
  background: var(--fsk-100)
}
* {
  transition: color .3s ease,background-color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease
}
@keyframes ai-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0,0,0,.2)
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(0,0,0,.25)
  }
}
.ai-whatsapp-alert-flex:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0,0,0,.2)
}
.order-before-order {
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 3);
  background: var(--fsk-100);
  direction: rtl
}
.order-before-order-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--fsk-200);
  color: var(--fsk-800);
  font-size: 14px;
  font-weight: 700
}
.order-before-order-title i {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fsk-site-color) 14%, var(--fsk-100));
  color: var(--fsk-site-color);
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  text-align: center
}
.order-before-order-list {
  display: flex;
  flex-direction: column;
  gap: 9px
}
.order-before-order-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--fsk-700);
  font-size: 12px;
  line-height: 1.65
}
.order-before-order-icon {
  position: relative;
  display: grid;
  align-self: flex-start;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  margin-top: 4px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fsk-site-color) 12%, var(--fsk-100));
  color: var(--fsk-site-color);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  text-align: center
}
.order-before-order-icon::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1
}
.order-before-order-item:nth-child(1) .order-before-order-icon {
  background: color-mix(in srgb, var(--fsk-orange) 14%, var(--fsk-100));
  color: var(--fsk-orange)
}
.order-before-order-item:nth-child(2) .order-before-order-icon {
  background: color-mix(in srgb, var(--fsk-red) 12%, var(--fsk-100));
  color: var(--fsk-red)
}
.order-before-order-item:nth-child(3) .order-before-order-icon {
  background: color-mix(in srgb, var(--fsk-blue) 12%, var(--fsk-100));
  color: var(--fsk-blue)
}
.order-before-order-item:nth-child(4) .order-before-order-icon {
  background: color-mix(in srgb, var(--fsk-rose) 12%, var(--fsk-100));
  color: var(--fsk-rose)
}
.order-before-order-item:nth-child(5) .order-before-order-icon {
  background: color-mix(in srgb, var(--fsk-green) 12%, var(--fsk-100));
  color: var(--fsk-green)
}
.order-before-order-item strong {
  display: block;
  margin-bottom: 1px;
  color: var(--fsk-800);
  font-size: 12px;
  font-weight: 700
}
.order-before-order-item p {
  margin: 0;
  color: var(--fsk-500)
}
.home-hero--features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  padding: 0 0 55px 0
}
.home-hero--features_label {
  color: var(--fsk-100);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2
}
.home-hero--features_items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px
}
.home-hero--features_item {
  display: flex;
  align-items: center;
  gap: 8px
}
.home-hero--features_item .item-icon {
  width: 32px;
  height: 32px;
  border-radius: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--fsk-200);
  color: var(--fsk-500);
  font-size: 16px;
  line-height: 1;
  vertical-align: middle
}
.home-hero--features_item .item-text {
  color: var(--fsk-600);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.28px
}
@media (max-width:768px) {
  .home-hero--features {
    gap: 16px;
    padding: 1px 0 24px 0
  }
  .home-hero--features_label {
    font-size: 12px
  }
  .home-hero--features_items {
    gap: 12px
  }
  .home-hero--features_item {
    gap: 7px
  }
  .home-hero--features_item .item-icon {
    width: 28px;
    height: 28px;
    font-size: 13px
  }
  .home-hero--features_item .item-text {
    font-size: 12px;
    line-height: 1.4
  }
}
.home-join {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: var(--fsk-100);
  border: 1px solid var(--fsk-200);
  border-radius: calc(var(--fsk-site-border) * 3);
  padding: 6px 9px;
  width: max-content;
  margin: 4px auto 0
}
.home-join .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  background: var(--fsk-200);
  color: var(--fsk-500);
  font-size: 18px;
  line-height: 1;
  vertical-align: middle
}
.home-join .text {
  align-items: center;
  justify-content: center;
  color: var(--fsk-700);
  font-size: 14px
}
@media (max-width:768px) {
  .home-join {
    gap: 10px;
    padding: 5px 8px;
    margin: 6px auto 0
  }
  .home-join .icon {
    width: 36px;
    height: 36px;
    font-size: 16px
  }
  .home-join .text {
    font-size: 13px
  }
}
.step-wrapper {
  margin-top: 50px
}
.step-card {
  background-color: var(--fsk-100)!important;
  border-radius: calc(var(--fsk-site-border) * 4);
  overflow: hidden;
  padding: 10px;
  display: grid!important;
  grid-template-columns: 1fr 1fr
}
.step-card .step-start {
  min-height: 530px;
  background-color: var(--fsk-100);
  border-radius: 0 calc(var(--fsk-site-border) * 4) calc(var(--fsk-site-border) * 4) 0;
  border: 1px solid var(--fsk-200);
  border-right: none;
  position: relative;
  overflow: hidden;
  pointer-events: none
}
.step-card .step-start-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 0;
  width: 510px;
  height: 530px;
  opacity: .15
}
.step-card .step-start-bg svg {
  width: 510px;
  height: 530px
}
.step-swiper {
  max-height: 530px
}
.step-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px
}
.step-item {
  padding: 32px 40px;
  width: 100%;
  max-width: 348px;
  border-radius: calc(var(--fsk-site-border) * 2);
  box-shadow: 0 16.488px 64.446px 0 rgba(0,0,0,.03);
  text-align: center;
  user-select: none;
  pointer-events: none;
  background: var(--fsk-50);
  border: 1px solid var(--fsk-200)
}
.step-item .icon-box {
  background: var(--fsk-200);
  width: 52px;
  height: 52px;
  color: var(--fsk-site-color);
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px
}
.step-item .title {
  color: var(--fsk-900);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -1px;
  margin: 0 0 12px
}
.step-item .text {
  color: var(--fsk-600);
  font-size: 12px;
  font-weight: 500;
  line-height: 120%
}
.step-item .skeleton {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.step-item .skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 0 32px 0
}
.step-item .skeleton::after,
.step-item .skeleton::before {
  content: "";
  height: 14px;
  width: 100%;
  border-radius: 100px;
  background-color: var(--fsk-100)
}
.step-item .skeleton::before {
  background-color: var(--fsk-300);
  width: 40px
}
.step-item .box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 32px 0
}
.step-item .step-box {
  border-radius: calc(var(--fsk-site-border) * 2);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  background-color: var(--fsk-100);
  border: 1px solid var(--fsk-200)
}
.step-item .box-icon {
  font-size: 14px;
  width: 40px
}
.step-item .box-icon img,
.step-item .box-icon svg {
  max-height: 30px;
  width: 34px
}
.step-item .box-icon i {
  font-size: 24px
}
.step-item .box-icon .fa-bitcoin {
  color: #f7931a
}
.step-item .step-box .title {
  font-size: 13px;
  line-height: 20px;
  text-align: start;
  margin: 0;
  color: var(--fsk-800)
}
.step-item .step-box .text {
  font-size: 13px;
  line-height: 18px;
  text-align: start;
  color: var(--fsk-600)
}
.step-card .step-end {
  border-radius: calc(var(--fsk-site-border) * 4) 0 0 calc(var(--fsk-site-border) * 4);
  border: 1px solid var(--fsk-200);
  padding: 50px 75px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 25px;
  background: var(--fsk-50)
}
.step-card .step-end h3 {
  font-size: 32px;
  color: var(--fsk-900)
}
.step-card .step-end h3 span {
  background: var(--fsk-site-color);
  background: -moz-linear-gradient(90deg,#ea1e63 0,#ea427b 100%);
  background: -webkit-linear-gradient(90deg,#ea1e63 0,#ea427b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  position: relative
}
.step-card .step-end p {
  color: var(--fsk-600)
}
.text-header {
  display: inline-flex;
  padding: 4px;
  align-items: center;
  gap: 5px;
  border-radius: 100px;
  border: 1px solid var(--fsk-200);
  background: var(--fsk-50);
  box-shadow: 0 0 50px 0 var(--fsk-100);
  color: var(--fsk-500);
  font-size: 14px;
  line-height: 100%
}
.text-header .icon {
  background: var(--fsk-100);
  height: 32px;
  width: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--fsk-site-color);
  border-radius: 100px
}
.text-header .text {
  padding: 0 10px;
  color: var(--fsk-900);
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500
}
@media (max-width:575.98px) {
  .step-wrapper {
    margin-top: 15px
  }
  .step-card {
    grid-template-columns: 1fr
  }
  .step-card .step-start {
    min-height: 530px;
    border-radius: calc(var(--fsk-site-border) * 3);
    padding: 0 15px
  }
  .step-card .step-end {
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: calc(var(--fsk-site-border) * 3);
    padding: 15px;
    gap: 15px;
    margin-top: 10px
  }
  .step-card .step-end h3 {
    font-size: 28px;
    margin-bottom: 0
  }
  .step-card .step-end p {
    margin-bottom: 0
  }
}
#no-results-message {
  background: var(--fsk-50);
  border-radius: calc(var(--fsk-site-border) * 2);
  margin-top: 8px
}
.payment-search-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--fsk-100);
  border: 1px solid var(--fsk-300);
  border-radius: 18px;
  min-height: 34px;
  min-width: 90px;
  max-width: 130px;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: all .2s ease;
  position: relative;
  box-sizing: border-box
}
.payment-search-wrapper.focus-visible,
.payment-search-wrapper:hover {
  background: var(--fsk-300);
  border-color: var(--fsk-500);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.06)
}
.payment-search-wrapper i {
  font-size: 13px;
  min-width: 14px;
  direction: ltr;
  text-align: center;
  color: var(--fsk-700)
}
.payment-search-input {
  background: 0 0;
  border: none;
  outline: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--fsk-700);
  width: 100%;
  direction: rtl;
  text-align: right
}
.payment-search-input::placeholder {
  color: var(--fsk-500);
  font-weight: 600;
  opacity: 1
}
.payment-search-input:focus {
  background: 0 0
}
@media (max-width:480px) {
  .payment-search-wrapper {
    min-height: 32px;
    padding: 5px 10px;
    min-width: 80px;
    max-width: 120px
  }
  .payment-search-wrapper i {
    font-size: 12px;
    min-width: 12px
  }
  .payment-search-input {
    font-size: 9.5px
  }
}
.payment-categories-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px;
  margin: 0 -2px 14px;
  background: var(--fsk-200);
  border-bottom: 1px solid var(--fsk-300);
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: calc(var(--fsk-site-border) * 2) calc(var(--fsk-site-border) * 2) 0 0;
  width: 100%;
  min-height: 60px;
  box-sizing: border-box
}
.payment-categories-tabs::-webkit-scrollbar {
  height: 5px
}
.payment-categories-tabs::-webkit-scrollbar-track {
  background: 0 0
}
.payment-methods::-webkit-scrollbar {
  height: 5px
}
.most-used {
  height: 16px;
  background-color: #e0f7fa;
  color: #006064;
  border-radius: calc(var(--fsk-site-border));
  padding: 3px 9px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  flex-shrink: 0
}
.category-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--fsk-100);
  border: 1px solid var(--fsk-300);
  border-radius: 18px;
  color: var(--fsk-700);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 34px;
  min-width: 60px;
  max-width: 140px;
  overflow: hidden;
  scroll-snap-align: start;
  text-overflow: ellipsis;
  transition: all .2s ease;
  position: relative;
  box-sizing: border-box
}
.category-tab i {
  font-size: 13px;
  min-width: 14px;
  direction: ltr;
  text-align: center
}
.category-tab:focus-visible,
.category-tab:hover {
  background: var(--fsk-300);
  border-color: var(--fsk-500);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
  outline: 0
}
.category-tab.active {
  background: var(--fsk-site-color);
  color: #fff;
  border-color: var(--fsk-site-color);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  z-index: 2
}
.category-tab::after {
  content: attr(data-count);
  background: var(--fsk-site-color);
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 16px;
  margin-inline-start: 5px;
  display: inline-block;
  min-width: 18px;
  text-align: center;
  line-height: 1
}
.category-tab.active::after {
  background: #fff;
  color: var(--fsk-site-color)
}
.category-tab:not([data-count])::after,
.category-tab[data-count="0"]::after {
  display: none
}
.payment-type-badge,
.payment-type-indicator {
  padding: 3px 9px;
  border-radius: calc(var(--fsk-site-border));
  font-size: 10px;
  font-weight: 400;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  height: 16px;
  line-height: 1;
  flex-shrink: 0
}
.payment-type-badge.auto,
.payment-type-indicator.auto {
  background-color: var(--fsk-emerald);
  color: #fff;
  border: 1px solid var(--fsk-emerald)
}
.payment-type-badge.manual,
.payment-type-indicator.manual {
  background-color: var(--fsk-amber);
  color: var(--fsk-900);
  border: 1px solid var(--fsk-amber)
}
.payment-type-indicator {
  border-radius: calc(var(--fsk-site-border));
  min-width: auto;
  padding: 2px 8px
}
.payment-type-badge,
.payment-type-indicator {
  margin-inline-start: auto
}
.payment-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  direction: rtl
}
.payment-name-container i {
  display: flex!important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  direction: ltr
}
.payment-name-and-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  justify-content: space-between;
  direction: ltr;
  text-align: left
}
.payment-text {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: right;
  direction: rtl;
  flex: 1
}
.payment-categories-content {
  max-height: 320px;
  overflow-y: auto;
  padding: 0 10px 10px
}
.category-content {
  display: none;
  flex-direction: column;
  gap: 12px
}
.category-content.active {
  display: flex;
  animation: fadeIn .3s ease
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
@media (max-width:480px) {
  .payment-categories-tabs {
    padding: 8px;
    margin: 0 -8px 12px;
    gap: 6px
  }
  .category-tab {
    padding: 5px 10px;
    font-size: 9.5px;
    min-height: 32px;
    min-width: 50px
  }
  .category-tab i {
    font-size: 12px;
    min-width: 12px
  }
  .category-tab::after {
    font-size: 7.5px;
    padding: 1px 5px;
    min-width: 16px
  }
}
.terms-page {
  line-height: 1.7;
  color: var(--fsk-800);
  padding: 30px 0
}
.terms-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px
}
.terms-page h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--fsk-900);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px
}
.terms-page h2 i {
  color: var(--fsk-site-color);
  font-size: 24px
}
.terms-page p.intro {
  font-size: 15px;
  margin-bottom: 32px;
  color: var(--fsk-700)
}
.terms-section {
  margin-bottom: 40px
}
.terms-section h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--fsk-900);
  margin: 32px 0 18px;
  display: flex;
  align-items: center;
  gap: 10px
}
.terms-section h3 i {
  color: var(--fsk-site-color);
  font-size: 18px
}
.terms-section ul {
  padding-right: 24px;
  list-style: none;
  margin: 0
}
.terms-section ul li {
  margin-bottom: 14px;
  position: relative;
  padding-right: 10px;
  font-size: 14px
}
.terms-section ul li::before {
  content: "•";
  color: var(--fsk-site-color);
  font-weight: 700;
  position: absolute;
  right: -18px;
  font-size: 18px;
  line-height: 1
}
.terms-section p {
  font-size: 14px;
  margin-bottom: 16px;
  color: var(--fsk-700)
}
@media (max-width:768px) {
  .terms-page {
    padding: 20px 0
  }
  .terms-container {
    padding: 0 15px
  }
  .terms-page h2 {
    font-size: 24px
  }
  .terms-section h3 {
    font-size: 18px
  }
  .terms-section ul {
    padding-right: 20px
  }
}
.signup-hr {
  width: 250px;
  margin: 10px auto 15px auto;
  position: relative
}
.signup-hr::before {
  position: absolute;
  left: 0;
  top: 10px;
  width: 100%;
  height: 1px;
  background: var(--fsk-100);
  content: ""
}
.signup-hr > span {
  display: flex;
  width: max-content;
  justify-content: center;
  text-align: center;
  margin: auto;
  padding: 1px 20px;
  position: relative;
  font-size: 15px;
  color: var(--fsk-500);
  background: var(--fsk-50);
  text-align: center;
  line-height: 15px
}
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
  align-items: stretch;
  gap: 12px;
  margin: 14px 0 18px;
  direction: rtl
}
.overview-card {
  --overview-accent: #bc00ff;
  --overview-accent-soft: rgba(188,0,255,.09);
  --overview-accent-border: rgba(188,0,255,.2);
  display: flex;
  min-width: 0;
  min-height: 164px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 13px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid var(--overview-card-border);
  border-radius: 18px;
  background: radial-gradient(circle at 0% 0%,var(--overview-accent-soft),transparent 58%),var(--overview-card-bg);
  box-shadow: var(--overview-card-shadow);
  color: var(--overview-card-text);
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease
}
.overview-card--orders {
  --overview-accent: #10b981;
  --overview-accent-soft: rgba(16,185,129,.09);
  --overview-accent-border: rgba(16,185,129,.2)
}
.overview-card--balance {
  --overview-accent: #60a5fa;
  --overview-accent-soft: rgba(96,165,250,.1);
  --overview-accent-border: rgba(96,165,250,.22)
}
.overview-card--profile {
  --overview-accent: #8b5cf6;
  --overview-accent-soft: rgba(139,92,246,.1);
  --overview-accent-border: rgba(139,92,246,.22)
}
@media (hover:hover) and (pointer:fine) {
  .overview-card:hover {
    transform: translateY(-2px);
    border-color: var(--overview-accent-border);
    box-shadow: 0 12px 30px rgba(0,0,0,.12)
  }
}
.overview-card__header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  direction: rtl
}
.overview-card__title {
  min-width: 0;
  color: var(--overview-card-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4
}
.overview-card__icon {
  display: inline-flex;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--overview-accent-border);
  border-radius: 12px;
  background: var(--overview-accent-soft);
  color: var(--overview-accent);
  font-size: 17px
}
.overview-card__metrics {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  min-width: 0
}
.overview-metric {
  display: flex;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid rgba(127,135,154,.08);
  border-radius: 12px;
  background: var(--overview-card-inset);
  direction: rtl
}
.overview-metric__label {
  overflow: hidden;
  color: var(--overview-card-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap
}
.overview-metric__value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--overview-card-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35
}
.overview-card--balance .overview-metric__value {
  direction: ltr;
  text-align: left
}
.overview-card--balance .overview-metric__value > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere
}
.overview-balance-value {
  direction: ltr
}
.overview-balance-label {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px
}
.overview-balance-label .overview-metric__label {
  flex: 1;
  min-width: 0
}
.overview-balance-toggle {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--overview-card-muted);
  cursor: pointer;
  transition: background .2s ease,color .2s ease
}
.overview-balance-toggle:hover,
.overview-balance-toggle:focus-visible {
  background: var(--overview-card-inset);
  color: var(--overview-accent);
  outline: none
}
.overview-balance-toggle i {
  font-size: 12px
}
.overview-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 5px;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: 1px
}
.overview-progress {
  margin-top: auto
}
.overview-progress__heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--overview-card-muted);
  font-size: 12px;
  line-height: 1.3
}
.overview-progress__heading span:last-child {
  color: var(--overview-card-text);
  font-weight: 700
}
.overview-progress__track {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--overview-card-inset)
}
.overview-progress__track span {
  display: block;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--overview-accent);
  transition: width .35s ease
}
.overview-profile {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  direction: rtl
}
.overview-profile__name,
.overview-profile__id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.overview-profile__name {
  color: var(--overview-card-text);
  font-size: 14px;
  font-weight: 700
}
.overview-profile__id {
  color: var(--overview-card-muted);
  font-size: 12px
}
.overview-card__actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: auto
}
.overview-action {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--overview-card-border);
  border-radius: 12px;
  background: var(--overview-card-inset);
  color: var(--overview-card-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease,border-color .2s ease,color .2s ease
}
.overview-action:hover {
  border-color: var(--overview-accent-border);
  color: var(--overview-accent)
}
.overview-action--primary {
  border-color: transparent;
  background: var(--fsk-site-color);
  color: #fff
}
.overview-action--primary:hover {
  background: var(--fsk-site-color);
  color: #fff;
  filter: brightness(1.08)
}
.overview-action i {
  flex: 0 0 auto;
  font-size: 12px
}
@media(max-width:400px) {
  .overview-card {
    gap: 12px;
    padding: 13px;
    border-radius: 16px
  }
  .overview-card__icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 12px
  }
  .overview-card--balance .overview-metric__value > span:last-child {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 12px
  }
}
.alert-custom {
  margin-top: 10px;
  background: var(--fsk-100);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  font-size: 14px;
  color: #fff;
  gap: 8px;
  white-space: nowrap;
  overflow-x: auto
}
.alert-custom .btns {
  display: flex;
  gap: 8px;
  align-items: center
}
.alert-custom a {
  text-decoration: none;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  transition: all .3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px
}
.alert-custom .btn-activate {
  background: linear-gradient(135deg,#007bff,#00c6ff)
}
.alert-custom .btn-whatsapp {
  background: linear-gradient(135deg,#25d366,#128c7e)
}
.alert-custom .btn-telegram {
  background: linear-gradient(135deg,#08c,#00bfff)
}
.alert-custom a:hover {
  transform: scale(1.03);
  opacity: .9
}
.alert-custom a img {
  width: 14px;
  height: 14px
}
.alert-custom .cart-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600
}
.alert-custom .cart-icon {
  width: 18px;
  height: 18px;
  fill: #00c6ff;
  vertical-align: middle
}
@media (max-width:600px) {
  .alert-custom {
    font-size: 13px;
    padding: 8px 10px
  }
  .alert-custom a {
    padding: 3px 8px;
    font-size: 12px
  }
  .alert-custom a img {
    width: 12px;
    height: 12px
  }
  .alert-custom .cart-icon {
    width: 20px;
    height: 20px
  }
}
footer {
  background: var(--fsk-100);
  padding: 30px 0 20px;
  border-top: 1px solid var(--fsk-200);
  margin-top: 40px;
  direction: rtl;
  text-align: right
}
.footer-content {
  display: block;
  margin-bottom: 25px;
  width: 100%;
  position: relative
}
.footer-brand {
  display: inline-block;
  text-align: right;
  max-width: 450px;
  vertical-align: top
}
.footer-logo {
  display: block;
  text-align: right;
  margin-bottom: 10px
}
.footer-logo-img {
  height: 45px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: opacity .3s
}
.footer-logo-img:hover {
  opacity: .9
}
.footer-logo-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--fsk-900)
}
.footer-description {
  text-align: right;
  margin-bottom: 10px
}
.footer-description p {
  color: var(--fsk-600);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  font-weight: 400
}
.footer-social {
  display: inline-flex;
  gap: 10px;
  align-items: center
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--fsk-site-color);
  font-size: 18px;
  transition: all .3s ease;
  text-decoration: none;
  line-height: 1
}
.social-icon:hover {
  transform: scale(1.15);
  color: var(--fsk-site-color)
}
.footer-action {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0
}
.footer-btn .btn {
  padding: 10px 25px;
  font-weight: 600
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--fsk-200);
  flex-wrap: wrap
}
.footer-copyright {
  color: var(--fsk-600);
  font-size: 13px;
  white-space: nowrap
}
.footer-copyright p {
  margin: 0
}
.footer-quick-links {
  display: flex;
  gap: 15px
}
.footer-quick-link {
  color: var(--fsk-700);
  text-decoration: none;
  font-size: 13px;
  transition: color .2s ease;
  padding: 3px 8px;
  border-radius: calc(var(--fsk-site-border));
  font-weight: 500
}
.footer-quick-link:hover {
  color: var(--fsk-site-color);
  background: var(--fsk-200)
}
@media (max-width:768px) {
  .footer-content {
    text-align: center
  }
  .footer-brand {
    display: block;
    text-align: center;
    margin: 0 auto 20px
  }
  .footer-action {
    position: static;
    display: block;
    margin: 0 auto
  }
  .footer-btn .btn {
    width: 100%;
    max-width: 220px
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center
  }
  .footer-quick-links {
    justify-content: center;
    flex-wrap: wrap
  }
}
.btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  height: 36px;
  background: linear-gradient(135deg,#a100ff,#6a00ff);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(153,0,255,.35);
  transition: .3s ease
}
.btn-secondary:hover {
  background: linear-gradient(135deg,#b41cff,#7a1cff);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(153,0,255,.5);
  color: #fff
}
.btn-secondary:focus {
  box-shadow: none
}
.btn-secondary::after {
  margin-left: 4px
}
.mob-svc-detail-panel {
  display: none;
  margin-top: 12px;
  border-radius: var(--r-xl)
}
@media(max-width:900px) {
  .mob-svc-detail-panel {
    display: block
  }
  #size-1 {
    grid-column: 1/-1!important;
    width: 100%!important;
    min-width: 0;
    box-sizing: border-box
  }
  .category-dropdown,
  .service-dropdown {
    width: 95vw!important;
    max-width: 95vw!important;
    max-height: 80vh!important
  }
  .s-name,
  .sdi-name,
  .service-dropdown-name {
    white-space: normal!important;
    word-break: break-word;
    line-height: 1.4;
    overflow: visible!important
  }
  .service-dropdown-item {
    padding: 8px 10px!important;
    width: 100%;
    box-sizing: border-box
  }
}
.sdc-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px
}
.sdc-title-wrap {
  flex: 1;
  min-width: 0
}
.sdc-svc-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--tx1);
  margin: 0 0 4px;
  line-height: 1.4;
  word-break: break-word
}
.sdc-svc-id {
  font-size: .72rem;
  color: var(--tx3);
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  padding: 2px 7px
}
.sdc-info-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 12px
}
.sdc-grid-6 {
  grid-template-columns: repeat(3,1fr)
}
@media(max-width:480px) {
  .sdc-grid-6 {
    grid-template-columns: repeat(2,1fr)
  }
}
.sdc-info-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  transition: all var(--t)
}
.sdc-info-item:hover {
  border-color: var(--p-20);
  background: var(--p-05)
}
.sdc-ico {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px
}
.sdc-ico-price {
  color: var(--p)
}
.sdc-ico-min {
  color: #3b82f6
}
.sdc-ico-max {
  color: #8b5cf6
}
.avg-fast,
.sdc-ico-avg-fast {
  color: #10b981
}
.avg-medium,
.sdc-ico-avg-medium {
  color: #f59e0b
}
.avg-slow,
.sdc-ico-avg-slow {
  color: #ef4444
}
.avg-veryslow,
.sdc-ico-avg-veryslow {
  color: #dc2626
}
.avg-unknown,
.sdc-ico-avg-unknown {
  color: var(--tx3)
}
.sdc-item-body {
  flex: 1;
  min-width: 0
}
.sdc-item-label {
  display: block;
  font-size: .65rem;
  font-weight: 600;
  color: var(--tx3);
  margin-bottom: 2px
}
.sdc-item-val {
  font-size: .82rem;
  font-weight: 700;
  color: var(--tx1);
  display: block
}
.sdc-price-val {
  color: var(--p)
}
.refill-yes {
  color: #10b981!important
}
.refill-no {
  color: rgba(100,116,139,.55)!important
}
.sdc-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px
}
.sdc-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px
}
.sdc-desc-wrap {
  margin-top: 8px
}
.sdc-desc {
  font-size: .82rem;
  color: var(--tx2);
  line-height: 1.6;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 10px 12px
}
.sdi-name-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 5px
}
.sdi-icon {
  color: var(--tx2);
  font-size: .88rem;
  flex-shrink: 0;
  margin-top: 1px
}
.sdi-id {
  font-size: .65rem;
  font-weight: 700;
  color: var(--tx3);
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  flex-shrink: 0;
  white-space: nowrap
}
.sdi-name {
  font-size: .84rem;
  font-weight: 600;
  color: var(--tx1);
  line-height: 1.4;
  word-break: break-word;
  min-width: 0
}
.sdi-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap
}
.sdi-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--tx3)
}
.sdi-meta-item {
  display: flex;
  align-items: center;
  gap: 3px
}
.sdi-meta-sep {
  color: var(--bdr2)
}
.sdi-price {
  font-size: .84rem;
  font-weight: 700;
  color: var(--p);
  white-space: nowrap;
  flex-shrink: 0
}
.sdi-feats {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}
html.dark .order-status.completed {
  color: #6ee7b7;
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25)
}
html.dark .order-status.partial {
  color: #fcd34d;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.25)
}
html.dark .order-status.canceled {
  color: #fca5a5;
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25)
}
html.dark .order-status.pending {
  color: #e2e8f0;
  background: rgba(100,116,139,.12);
  border-color: rgba(100,116,139,.25)
}
html.dark .order-status.processing {
  color: #93c5fd;
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.25)
}
.tickets-uploader,
.tv-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  border: 2px dashed var(--bdr);
  border-radius: var(--r-lg);
  color: var(--tx2);
  font-size: .84rem;
  cursor: pointer;
  transition: all var(--t);
  text-align: center;
  background: var(--surf2)
}
.tickets-uploader:hover,
.tv-uploader:hover {
  border-color: var(--p);
  color: var(--p);
  background: var(--p-05)
}
@media(max-width:640px) {
  .header-right,
  .header-btn-box,
  .header-tools,
  .header-account-actions {
    flex-shrink: 0
  }
  .header-btn-box {
    gap: 6px
  }
  .header-right,
  .header-tools,
  .header-account-actions {
    gap: 6px
  }
  .header-tools .balance-box,
  .header-tools .header-tool-btn,
  .header-tools .language-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 4px;
    font-size: 12px
  }
  .header-tools .header-balance-group {
    gap: 4px
  }
  .header-tools .header-tool-btn i {
    font-size: 14px
  }
  .header-account-info {
    display: flex;
    max-width: 72px
  }
  .header-account-name {
    max-width: 72px;
    font-size: 11px
  }
  .header-account-status {
    display: block;
    font-size: 9px
  }
  .header-logout {
    width: auto;
    min-height: 36px;
    padding: 0 9px;
    border-radius: 14px;
    font-size: 11px
  }
  .header-logout i {
    font-size: 13px
  }
  .header-account {
    gap: 4px
  }
  .header-account-avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 14px
  }
  .header-account-avatar-wrap {
    flex-basis: 34px;
    width: 34px;
    height: 34px
  }
  .header-account-online {
    width: 8px;
    height: 8px
  }
}
@media(max-width:400px) {
  .header-right,
  .header-btn-box {
    gap: 4px
  }
  .header-tools,
  .header-account-actions {
    gap: 4px
  }
  .header-tools .balance-box,
  .header-tools .header-tool-btn,
  .header-tools .language-btn {
    min-width: 32px;
    width: 32px;
    height: 32px
  }
  .header-account-info {
    max-width: 54px
  }
  .header-account-name {
    max-width: 54px;
    font-size: 10px
  }
  .header-account-avatar {
    flex-basis: 30px;
    width: 30px;
    height: 30px
  }
  .header-account-avatar-wrap {
    flex-basis: 30px;
    width: 30px;
    height: 30px
  }
  .header-logout {
    min-height: 32px;
    padding: 0 6px;
    font-size: 10px
  }
}
.page-header .header-right .header-btn-box,
.page-header .header-right .header-tools,
.page-header .header-right .header-account-actions {
  display: flex!important;
  visibility: visible!important;
  opacity: 1!important
}
.page-header .header-right .header-tools .balance-box,
.page-header .header-right .header-tools .language-btn,
.page-header .header-right .header-tools .header-tool-btn {
  display: inline-flex!important;
  visibility: visible!important;
  opacity: 1!important
}
.page-header .header-right .header-account-info {
  display: flex!important;
  visibility: visible!important;
  opacity: 1!important
}
.page-header .header-right .header-account-status,
.page-header .header-right .header-logout-label {
  display: inline!important;
  visibility: visible!important;
  opacity: 1!important
}
@media(max-width:640px) {
  .page-header .header-right .header-account-actions,
  .page-header .header-right .header-tools .language-box {
    display: none!important
  }
  .page-header .header-right .header-tools {
    display: flex!important
  }
  .page-header .header-right .header-tools .user-balance,
  .page-header .header-right .header-tools .balance-box,
  .page-header .header-right .header-tools .header-theme-btn,
  .page-header .header-right .header-tools .header-notification-btn,
  .page-header .header-right > .sidebar-btn {
    display: inline-flex!important;
    visibility: visible!important;
    opacity: 1!important
  }
  .page-header .header-right .header-tools .header-balance-display {
    display: none!important
  }
  .page-header .header-right > .sidebar-btn {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--header-control-border);
    border-radius: 14px;
    background: var(--header-control-bg);
    color: var(--fsk-700);
    cursor: pointer
  }
  .page-header .header-right > .sidebar-btn i {
    margin: 0!important;
    font-size: 16px;
    line-height: 1
  }
}
.page-header .header-right .header-tools .balance-box {
  width: 40px;
  min-width: 40px;
  height: 40px;
  gap: 0;
  padding: 0;
  border-radius: 14px
}
.page-header .header-right .header-tools .balance-box > i {
  font-size: 16px!important
}
@media(max-width:640px) {
  .page-header .header-right .header-tools .balance-box {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 12px
  }
  .page-header .header-right .header-tools .header-theme-btn,
  .page-header .header-right .header-tools .header-notification-btn,
  .page-header .header-right > .sidebar-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 12px
  }
  .page-header .header-right .header-tools .balance-box > i {
    font-size: 14px!important
  }
  .page-header .header-right .header-tools .header-theme-btn > i,
  .page-header .header-right .header-tools .header-notification-btn > i,
  .page-header .header-right > .sidebar-btn > i {
    font-size: 14px
  }
}
@media(max-width:400px) {
  .page-header .header-right .header-tools .balance-box {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 10px
  }
  .page-header .header-right .header-tools .header-theme-btn,
  .page-header .header-right .header-tools .header-notification-btn,
  .page-header .header-right > .sidebar-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 10px
  }
}
.order-platform-filter {
  margin-bottom: 16px;
  padding: 12px 14px 8px;
  border-radius: 18px;
  background: transparent
}
.order-platform-filter-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 1px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.45) transparent;
  cursor: grab;
  overscroll-behavior-x: contain
}
.order-platform-filter-list:active {
  cursor: grabbing
}
.order-platform-filter-list::-webkit-scrollbar {
  height: 6px
}
.order-platform-filter-list::-webkit-scrollbar-track {
  background: transparent
}
.order-platform-filter-list::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(255,255,255,.4)
}
.order-platform-filter-buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px
}
.order-platform-filter-button {
  --platform-color: #fff;
  --platform-bg: #242424;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--platform-color) 24%, transparent);
  border-radius: 24px;
  background: var(--platform-bg);
  color: var(--platform-color);
  font: inherit;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease
}
.order-platform-filter-button:hover,
.order-platform-filter-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--platform-color);
  outline: 0
}
.order-platform-filter-button.active {
  border-color: var(--platform-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--platform-color) 25%, transparent)
}
.order-platform-filter-button i {
  font-size: 19px
}
.order-platform-icon-button img {
  width: 22px;
  height: 22px;
  object-fit: contain
}
.order-platform-filter-all {
  width: auto;
  min-width: 62px;
  padding: 0 14px;
  border-color: #ffe500;
  border-radius: 24px;
  background: #ffe500;
  color: #111;
  font-size: 13px;
  font-weight: 700
}
.order-platform-filter-all:hover,
.order-platform-filter-all:focus-visible,
.order-platform-filter-all.active {
  border-color: #fff000;
  background: #fff000;
  color: #111;
  box-shadow: 0 0 0 2px rgba(255,229,0,.25)
}
.category-dropdown-item[hidden],
.order-platform-filter-button[hidden] {
  display: none
}
@media(max-width:600px) {
  .order-platform-filter {
    padding: 10px 9px 7px
  }
  .order-platform-filter-list {
    justify-content: flex-start;
    gap: 7px
  }
  .order-platform-filter-buttons {
    gap: 7px
  }
  .order-platform-filter-button {
    width: 42px;
    height: 40px
  }
  .order-platform-filter-all {
    width: auto;
    min-width: 56px
  }
}

/* New-order form visual refresh */
html {
  --order-panel: #f7f9fd;
  --order-panel-gradient: linear-gradient(145deg, #fff, #f5f8fd 70%);
  --order-panel-border: #e1e8f3;
  --order-field: #f1f5fb;
  --order-field-hover: #eaf0f9;
  --order-field-border: #d5dfed;
  --order-field-border-hover: #bdcce0;
  --order-text: #29364d;
  --order-label: #263650;
  --order-muted: #71819c;
  --order-switch-bg: #edf2fa;
  --order-switch-hover: #e4ebf6;
  --order-switch-text: #52627c;
  --order-shadow: 0 18px 42px rgba(22,42,75,.10);
  --order-scrollbar: rgba(91,111,145,.55);
  --order-field-shell: linear-gradient(145deg, #f8faff, #edf2fa);
  --order-shell-border: #dce5f2
}
html.dark {
  --order-panel: #191e27;
  --order-panel-gradient: linear-gradient(145deg, #1b202a, #191e27 70%);
  --order-panel-border: rgba(255,255,255,.06);
  --order-field: #222a38;
  --order-field-hover: #252e3d;
  --order-field-border: #303949;
  --order-field-border-hover: #465267;
  --order-text: #e7ebf3;
  --order-label: #e3e8f1;
  --order-muted: #aeb8ca;
  --order-switch-bg: #202633;
  --order-switch-hover: #272f3d;
  --order-switch-text: #cbd2df;
  --order-shadow: 0 18px 42px rgba(0,0,0,.18);
  --order-scrollbar: rgba(168,85,247,.65);
  --order-field-shell: linear-gradient(145deg, #202633, #1a202c);
  --order-shell-border: #303949
}
.order-page-switch {
  gap: 8px;
  padding: 10px 16px 0;
  background: var(--order-panel)
}
.order-page-switch-link {
  min-height: 46px;
  border-color: var(--order-field-border);
  border-radius: 12px;
  background: var(--order-switch-bg);
  color: var(--order-switch-text);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease
}
.order-page-switch-link:hover {
  transform: translateY(-1px);
  border-color: var(--order-field-border-hover);
  background: var(--order-switch-hover);
  color: var(--order-text)
}
.order-page-switch-link.active,
.order-page-switch-link.active:hover {
  border-color: color-mix(in srgb, var(--fsk-site-color) 58%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--fsk-site-color) 24%, var(--order-switch-bg)), var(--order-switch-bg) 78%);
  color: #fff;
  box-shadow: 0 5px 18px color-mix(in srgb, var(--fsk-site-color) 18%, transparent)
}
.well.neworder-form {
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--order-panel-border);
  border-radius: 0 0 18px 18px;
  background: var(--order-panel-gradient);
  box-shadow: var(--order-shadow)
}
#neworderBox > .form-group,
#neworderBox .master-form > .form-group {
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--order-shell-border);
  border-radius: 14px;
  background: var(--order-field-shell)
}
#neworderBox #fields .row {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px
}
#neworderBox #fields .row .col-md-6 {
  min-width: 0;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--order-shell-border);
  border-radius: 14px;
  background: var(--order-field-shell)
}
#neworderBox .form-group {
  gap: 8px
}
#neworderBox .form-group > .control-label,
#neworderBox .master-select > .control-label {
  color: var(--order-label);
  font-size: 14px;
  font-weight: 600
}
#neworderBox .order-field-label-icon {
  margin-inline-end: 5px;
  color: var(--fsk-site-color);
  font-size: 14px
}
#neworderBox .dropdown-select-box,
#neworderBox .form-control {
  min-height: 46px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--order-field-border);
  border-radius: 11px;
  background: var(--order-field);
  color: var(--order-text);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease
}
#neworderBox .form-control::placeholder {
  color: var(--order-muted);
  opacity: .9
}
#neworderBox .dropdown-select-box:hover,
#neworderBox .form-control:hover {
  border-color: var(--order-field-border-hover);
  background-color: var(--order-field-hover)
}
#neworderBox #fields .order-link-field,
#neworderBox #fields .order-quantity-field,
#neworderBox #charge {
  padding-left: 42px;
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 18px 18px
}
#neworderBox #fields .order-link-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239baccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")
}
#neworderBox #fields .order-quantity-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239baccc' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 3 7 21M17 3l-2 18M4 9h17M3 15h17'/%3E%3C/svg%3E")
}
#neworderBox #charge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239baccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8.5c-.8-.7-1.8-1-3-1-1.7 0-3 .9-3 2.2s1.3 2 3 2.3 3 1 3 2.3-1.3 2.2-3 2.2c-1.2 0-2.3-.4-3.2-1.2M13 5.5v13'/%3E%3C/svg%3E")
}
html[dir="rtl"] #neworderBox #fields .order-link-field,
html[dir="rtl"] #neworderBox #fields .order-quantity-field,
html[dir="rtl"] #neworderBox #charge,
.fsk-rtl #neworderBox #fields .order-link-field,
.fsk-rtl #neworderBox #fields .order-quantity-field,
.fsk-rtl #neworderBox #charge {
  padding-right: 14px;
  padding-left: 42px;
  background-position: left 14px center;
  text-align: right;
  direction: rtl
}
#neworderBox .dropdown-select-box:focus-visible,
#neworderBox .form-control:focus {
  border-color: var(--fsk-site-color);
  margin: 0;
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fsk-site-color) 18%, transparent)
}
#neworderBox .form-control[readonly] {
  border-color: color-mix(in srgb, var(--fsk-site-color) 32%, var(--order-field-border));
  background-color: color-mix(in srgb, var(--fsk-site-color) 9%, var(--order-field));
  color: var(--order-text);
  font-weight: 700
}
#neworderBox .dropdown-select-box > i {
  color: var(--order-muted)
}
#neworderBox .order-platform-filter {
  margin-bottom: 4px;
  padding: 8px 6px 4px
}
#neworderBox .order-platform-filter-list {
  scrollbar-color: var(--order-scrollbar) transparent
}
#neworderBox .order-platform-filter-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fsk-site-color) 55%, var(--order-field-border-hover))
}
#neworderBox .order-platform-filter-all {
  border-color: var(--order-field-border);
  background: var(--order-switch-bg);
  color: var(--order-text)
}
#neworderBox .order-platform-filter-all:hover,
#neworderBox .order-platform-filter-all:focus-visible,
#neworderBox .order-platform-filter-all.active {
  border-color: var(--fsk-site-color);
  background: var(--fsk-site-color);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fsk-site-color) 20%, transparent)
}
#neworderBox .order-submit-button {
  min-height: 48px;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--fsk-site-color) 78%, #6324d8), var(--fsk-site-color));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--fsk-site-color) 24%, transparent);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease
}
#neworderBox .order-submit-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--fsk-site-color) 32%, transparent)
}
#neworderBox .order-submit-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fsk-site-color) 42%, transparent);
  outline-offset: 3px
}
@media(max-width:600px) {
  .order-page-switch {
    gap: 6px;
    padding: 8px 10px 0
  }
  .well.neworder-form {
    gap: 12px;
    padding: 14px;
    border-radius: 0 0 15px 15px
  }
  #neworderBox .dropdown-select-box,
  #neworderBox .form-control {
    min-height: 44px
  }
}

.order-page-switch {
  gap: 7px;
  padding: 9px 12px 6px;
  border: 1px solid var(--order-panel-border);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--order-panel)
}
.order-page-switch-link {
  min-height: 48px;
  border: 1px solid var(--order-field-border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--order-field-shell), var(--order-switch-bg));
  color: var(--order-text);
  font-size: 13px
}
.order-page-switch-link.active,
.order-page-switch-link.active:hover {
  border-color: color-mix(in srgb, var(--fsk-site-color) 72%, #fff);
  background: linear-gradient(115deg, color-mix(in srgb, var(--fsk-site-color) 88%, #5700d9), var(--fsk-site-color) 62%, color-mix(in srgb, var(--fsk-site-color) 72%, #19003d));
  color: #fff;
  box-shadow: 0 0 16px color-mix(in srgb, var(--fsk-site-color) 42%, transparent), inset 0 1px rgba(255,255,255,.2)
}
.order-page-switch-link i {
  font-size: 16px;
  opacity: 1
}
#neworderBox .order-platform-filter {
  margin: -2px 0 2px;
  padding: 8px 12px 5px;
  overflow: hidden;
  border: 1px solid var(--order-panel-border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--order-field) 55%, var(--order-panel))
}
#neworderBox .order-platform-filter-list {
  gap: 8px;
  padding: 3px 2px 9px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fsk-site-color) 75%, transparent) transparent
}
#neworderBox .order-platform-filter-list::-webkit-scrollbar {
  height: 4px
}
#neworderBox .order-platform-filter-list::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--fsk-site-color)
}
#neworderBox .order-platform-filter-buttons {
  gap: 8px
}
#neworderBox .order-platform-filter-button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 56px;
  height: 56px;
  padding: 5px 3px 4px;
  border: 1px solid var(--order-field-border);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--order-field-hover), var(--order-field));
  color: var(--order-muted);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease
}
#neworderBox .order-platform-filter-button:hover,
#neworderBox .order-platform-filter-button:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fsk-site-color) 58%, var(--order-field-border));
  outline: 0;
  color: var(--order-text)
}
#neworderBox .order-platform-icon-button.active {
  border-color: var(--fsk-site-color);
  background: color-mix(in srgb, var(--fsk-site-color) 12%, var(--order-field));
  color: var(--fsk-site-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fsk-site-color) 20%, transparent), 0 0 14px color-mix(in srgb, var(--fsk-site-color) 20%, transparent)
}
#neworderBox .order-platform-icon-button > i,
#neworderBox .order-platform-icon-button > span:not(.order-platform-filter-label) {
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  font-size: 18px
}
#neworderBox .order-platform-icon-button img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain
}
#neworderBox .order-platform-filter-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap
}
#neworderBox .order-platform-filter-all {
  min-width: 56px;
  padding: 5px 3px 4px;
  border-color: var(--order-field-border);
  border-radius: 13px;
  background: linear-gradient(145deg, var(--order-field-hover), var(--order-field));
  color: var(--order-muted);
  font-size: inherit;
  font-weight: 400
}
#neworderBox .order-platform-filter-all > i {
  font-size: 18px
}
#neworderBox .order-platform-filter-all.active,
#neworderBox .order-platform-filter-all:hover,
#neworderBox .order-platform-filter-all:focus-visible {
  border-color: #ffe500;
  background: color-mix(in srgb, #ffe500 8%, var(--order-field));
  color: #ffe500;
  box-shadow: 0 0 0 1px rgba(255,229,0,.22), 0 0 14px rgba(255,229,0,.12)
}
@media(max-width:600px) {
  .order-page-switch {
    gap: 7px;
    padding: 9px 10px 7px
  }
  .order-page-switch-link {
    min-height: 48px;
    gap: 6px;
    padding: 7px
  }
  #neworderBox .order-platform-filter {
    padding: 7px 8px 4px
  }
  #neworderBox .order-platform-filter-list,
  #neworderBox .order-platform-filter-buttons {
    gap: 8px
  }
  #neworderBox .order-platform-filter-button {
    width: 52px;
    height: 53px
  }
  #neworderBox .order-platform-filter-all {
    min-width: 52px
  }
}

.massorder-page-header {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 16px
}
.massorder .massorder-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  direction: rtl;
  gap: 12px;
  padding: 4px;
  border: 1px solid var(--order-panel-border);
  border-radius: 20px;
  background: var(--order-panel-gradient);
  box-shadow: var(--order-shadow)
}
.massorder-overview .overview-card {
  position: relative;
  min-width: 0;
  min-height: 164px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--order-panel-border);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--order-field-shell), var(--order-panel));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.08);
  color: var(--order-text)
}
.massorder-overview .overview-card::after {
  position: absolute;
  right: -20px;
  bottom: -42px;
  width: 150px;
  height: 90px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fsk-site-color) 14%, transparent);
  content: "";
  pointer-events: none
}
.massorder-overview .overview-card__title,
.massorder-overview .overview-metric__value {
  color: var(--order-text)
}
.massorder-overview .overview-card__icon {
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 28%, var(--order-field-border));
  background: color-mix(in srgb, var(--fsk-site-color) 14%, var(--order-field));
  color: var(--fsk-site-color);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fsk-site-color) 20%, transparent)
}
.massorder-overview .overview-metric__label {
  color: var(--order-muted)
}
.massorder .massorder-discount {
  background: color-mix(in srgb, var(--fsk-site-color) 15%, var(--order-field));
  color: var(--order-text)
}
.massorder .massorder-welcome {
  position: relative;
  min-height: 172px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 22px 24px 22px 118px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 52%, var(--order-panel-border));
  border-radius: 20px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--fsk-site-color) 35%, var(--order-panel)), var(--order-panel) 76%);
  color: var(--order-text);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--fsk-site-color) 16%, transparent), inset 0 1px rgba(255,255,255,.08)
}
.massorder .massorder-welcome::after {
  position: absolute;
  right: -35px;
  bottom: -74px;
  width: 230px;
  height: 135px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fsk-site-color) 20%, transparent);
  content: "";
  pointer-events: none
}
.massorder-welcome-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 1;
  color: color-mix(in srgb, var(--fsk-site-color) 75%, #fff);
  font-size: 68px;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--fsk-site-color) 45%, transparent));
  transform: translateY(-50%) rotate(-12deg)
}
.massorder .massorder-welcome h2 {
  position: relative;
  z-index: 1;
  color: var(--order-text);
  font-size: 21px
}
.massorder .massorder-welcome p {
  position: relative;
  z-index: 1;
  color: var(--order-muted)
}
.massorder .massorder-welcome-link {
  position: relative;
  z-index: 1;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 24%, var(--order-field-border));
  background: var(--order-field);
  color: var(--fsk-site-color);
  transition: transform .18s ease, background .18s ease, color .18s ease
}
.massorder .massorder-welcome-link:hover {
  transform: translateY(-1px);
  background: var(--fsk-site-color);
  color: #fff
}
.massorder > .order-page-switch {
  margin-top: 0;
  direction: rtl;
  padding: 12px 14px 8px;
  border: 1px solid var(--order-panel-border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--order-panel)
}
.massorder .order-page-switch-link {
  min-height: 56px;
  border: 1px solid var(--order-field-border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--order-field-shell), var(--order-switch-bg));
  color: var(--order-text);
  font-size: 15px
}
.massorder .order-page-switch-link:hover {
  background: var(--order-switch-hover);
  color: var(--order-text)
}
.massorder .order-page-switch-link.active,
.massorder .order-page-switch-link.active:hover {
  border-color: color-mix(in srgb, var(--fsk-site-color) 72%, #fff);
  background: linear-gradient(115deg, color-mix(in srgb, var(--fsk-site-color) 88%, #5700d9), var(--fsk-site-color) 62%, color-mix(in srgb, var(--fsk-site-color) 72%, #19003d));
  color: #fff;
  box-shadow: 0 0 16px color-mix(in srgb, var(--fsk-site-color) 42%, transparent), inset 0 1px rgba(255,255,255,.2)
}
.massorder > form {
  margin-top: 0;
  padding: 18px;
  border: 1px solid var(--order-panel-border);
  border-radius: 0 0 20px 20px;
  background: var(--order-panel-gradient);
  box-shadow: var(--order-shadow)
}
.massorder-form-heading {
  gap: 14px;
  margin-bottom: 12px
}
.massorder-format-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fsk-site-color)
}
.massorder-form-heading label {
  color: var(--order-label);
  font-size: 14px
}
.massorder-format-title > i {
  font-size: 18px
}
.massorder-format-title .massorder-format-help {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 65%, var(--order-field-border));
  border-radius: 50%;
  color: var(--fsk-site-color);
  cursor: help;
  font-size: 15px;
  transition: background .18s ease, color .18s ease, transform .18s ease
}
.massorder-format-title .massorder-format-help:hover,
.massorder-format-title .massorder-format-help:focus-visible {
  transform: scale(1.08);
  outline: 0;
  background: var(--fsk-site-color);
  color: #fff
}
.massorder-mode-switch {
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--order-field-border);
  border-radius: 12px;
  background: var(--order-field)
}
.massorder-mode-button {
  min-width: 92px;
  min-height: 40px;
  border-radius: 9px;
  color: var(--order-muted)
}
.massorder-mode-button:hover {
  color: var(--order-text)
}
.massorder-mode-button.active {
  background: linear-gradient(110deg, color-mix(in srgb, var(--fsk-site-color) 82%, #6324d8), var(--fsk-site-color));
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--fsk-site-color) 32%, transparent)
}
.massorder-mode-button:focus-visible {
  outline: 2px solid var(--fsk-site-color);
  outline-offset: 2px
}
.massorder textarea,
.massorder input.form-control {
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 62%, var(--order-field-border));
  border-radius: 14px;
  background: var(--order-field);
  color: var(--order-text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px color-mix(in srgb, var(--fsk-site-color) 8%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease
}
.massorder textarea {
  min-height: 260px;
  padding: 16px;
  direction: rtl;
  text-align: right;
  line-height: 1.8;
  white-space: pre-wrap
}
.massorder #links::placeholder {
  color: var(--order-muted);
  opacity: 1
}
.massorder input.form-control {
  min-height: 46px;
  padding: 10px 13px
}
.massorder textarea::placeholder,
.massorder input.form-control::placeholder {
  color: var(--order-muted);
  opacity: .9
}
.massorder textarea:focus,
.massorder input.form-control:focus {
  border-color: var(--fsk-site-color);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fsk-site-color) 20%, transparent)
}
.massorder .btn {
  min-height: 58px;
  margin-top: 12px;
  border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--fsk-site-color) 78%, #6324d8), var(--fsk-site-color));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--fsk-site-color) 30%, transparent);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease
}
.massorder .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  color: #fff;
  box-shadow: 0 11px 28px color-mix(in srgb, var(--fsk-site-color) 38%, transparent)
}
@media(max-width:900px) {
  .massorder-page-header {
    grid-template-columns: minmax(0, 1fr)
  }
  .massorder .massorder-welcome {
    order: -1
  }
}
@media(max-width:600px) {
  .massorder-page-header {
    gap: 10px
  }
  .massorder .massorder-overview {
    gap: 8px;
    padding: 8px;
    border-radius: 16px
  }
  .massorder-overview .overview-card {
    min-height: 142px;
    padding: 12px;
    border-radius: 13px
  }
  .massorder .massorder-welcome {
    min-height: 148px;
    padding: 17px 16px 17px 82px;
    border-radius: 16px
  }
  .massorder-welcome-icon {
    left: 12px;
    font-size: 48px
  }
  .massorder > .order-page-switch {
    gap: 6px;
    padding: 9px 9px 7px;
    border-radius: 16px 16px 0 0
  }
  .massorder .order-page-switch-link {
    min-height: 48px;
    gap: 5px;
    padding: 7px 5px;
    font-size: 12px
  }
  .massorder > form {
    padding: 13px;
    border-radius: 0 0 16px 16px
  }
  .massorder-form-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 9px
  }
  .massorder-mode-switch {
    width: 100%;
    box-sizing: border-box
  }
  .massorder-mode-button {
    flex: 1;
    min-width: 0
  }
  .massorder textarea {
    min-height: 230px;
    height: clamp(230px, 48vh, 340px);
    padding: 13px
  }
  .massorder .btn {
    min-height: 52px
  }
}

.orders-page {
  --orders-panel: var(--order-panel, var(--fsk-50));
  --orders-card: var(--order-field-shell, var(--fsk-100));
  --orders-surface: var(--order-field, var(--fsk-200));
  --orders-border: var(--order-field-border, var(--fsk-300));
  --orders-text: var(--order-text, var(--fsk-800));
  --orders-muted: var(--order-muted, var(--fsk-500));
  color: var(--orders-text)
}
.orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  gap: 18px;
  margin: 8px 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--orders-border);
  border-radius: 20px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--fsk-site-color) 10%, var(--orders-panel)), var(--orders-panel) 60%);
  box-shadow: 0 10px 28px rgba(0,0,0,.08)
}
.orders-heading {
  display: flex;
  min-width: 160px;
  align-items: center;
  gap: 14px
}
.orders-heading .page-title {
  margin: 0;
  gap: 12px;
  color: var(--orders-text);
  font-size: 22px;
  font-weight: 800
}
.orders-heading .page-title > i {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 46%, var(--orders-border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--fsk-site-color) 16%, var(--orders-surface));
  color: var(--fsk-site-color);
  font-size: 25px;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--fsk-site-color) 18%, transparent)
}
.orders-toolbar-controls {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  direction: rtl;
  gap: 14px;
  min-width: 0
}
.orders-page .services-top-box {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  direction: rtl;
  gap: 12px;
  min-width: 0;
  margin: 0
}
.orders-page .services-top-box > .all-dropdown {
  width: auto;
  min-width: 130px;
  min-height: 44px;
  border: 1px solid var(--orders-border);
  border-radius: 12px;
  background-color: var(--orders-surface);
  color: var(--orders-text)
}
.orders-page #history-search {
  width: min(370px, 100%);
  min-width: 180px
}
.orders-page #history-search .input-group {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--orders-border);
  border-radius: 12px;
  background: var(--orders-surface);
  direction: ltr
}
.orders-page #history-search .form-control {
  height: 44px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--orders-text);
  direction: rtl
}
.orders-page #history-search .form-control:focus {
  margin: 0;
  box-shadow: inset 0 0 0 1px var(--fsk-site-color)
}
.orders-page #history-search .input-group-btn {
  flex: 0 0 auto
}
.orders-page #history-search .btn {
  height: 44px;
  min-width: 48px;
  justify-content: center;
  padding: 0 14px;
  border-radius: 0 10px 10px 0;
  background: var(--fsk-site-color);
  color: #fff
}
.orders-page .select-all-group {
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--orders-border);
  border-radius: 12px;
  background: var(--orders-surface)
}
.orders-page .select-all-group label {
  color: var(--orders-text);
  white-space: nowrap
}
.orders-page .order-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}
.orders-page .order-box {
  position: relative;
  min-width: 0;
  gap: 9px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--orders-border);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--orders-card), var(--orders-panel));
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}
.orders-page .order-box:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fsk-site-color) 48%, var(--orders-border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fsk-site-color) 10%, transparent)
}
.orders-page .order-top {
  min-height: 40px;
  gap: 8px
}
.orders-page .order-top-left {
  min-width: 0;
  align-items: center;
  gap: 7px
}
.orders-page .order-id {
  padding: 7px 9px;
  border: 1px solid var(--orders-border);
  background: var(--orders-surface);
  color: var(--orders-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap
}
.orders-page .order-status {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap
}
.orders-page .order-status.completed {
  border-color: rgba(16,185,129,.32);
  background: rgba(16,185,129,.12);
  color: #10b981
}
.orders-page .order-status.pending {
  border-color: rgba(245,158,11,.32);
  background: rgba(245,158,11,.12);
  color: #f59e0b
}
.orders-page .order-status.processing,
.orders-page .order-status.progress {
  border-color: rgba(59,130,246,.32);
  background: rgba(59,130,246,.12);
  color: #3b82f6
}
.orders-page .order-status.partial {
  border-color: rgba(245,158,11,.32);
  background: rgba(245,158,11,.12);
  color: #f59e0b
}
.orders-page .order-status.canceled {
  border-color: rgba(239,68,68,.32);
  background: rgba(239,68,68,.12);
  color: #ef4444
}
.orders-page .order-status span {
  overflow: hidden;
  color: inherit!important;
  text-overflow: ellipsis
}
.orders-page .order-status .progress {
  width: 100%;
  background: transparent
}
.orders-page .order-top-left .o-tooltip {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  transition: transform .16s ease, filter .16s ease
}
.orders-page .order-top-left .o-tooltip:hover {
  transform: translateY(-2px);
  filter: brightness(1.12)
}
.orders-page .order-center {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px
}
.orders-page .order-service,
.orders-page .order-date,
.orders-page .order-remains,
.orders-page .order-link,
.orders-page .order-center-bottom > span {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--orders-border) 78%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--orders-surface) 72%, var(--orders-panel));
  color: var(--orders-text)
}
.orders-page .order-service {
  display: flex;
  align-items: center;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid var(--orders-border);
  background: var(--orders-surface);
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis
}
.orders-page .order-date,
.orders-page .order-remains {
  display: flex;
  min-height: 37px;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap
}
.orders-page .order-date {
  color: var(--fsk-site-color)
}
.orders-page .order-remains i {
  color: var(--fsk-site-color)
}
.orders-page .order-link {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  overflow: hidden;
  border-style: solid;
  color: var(--orders-muted);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap
}
.orders-page .order-link > i {
  flex: 0 0 auto;
  color: var(--fsk-site-color)
}
.orders-page .order-center-bottom > span {
  min-height: 52px;
  justify-content: space-between;
  padding: 9px;
  color: var(--orders-muted);
  line-height: 1.3
}
.orders-page .order-center-bottom b {
  color: var(--orders-text);
  font-size: 14px
}
.orders-page .order-btn .btn {
  min-height: 38px;
  border: 1px solid var(--orders-border);
  border-radius: 10px;
  background: var(--orders-surface)
}
.orders-page .selection-bottom-bar {
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 45%, var(--orders-border));
  border-radius: 16px;
  background: var(--orders-panel);
  box-shadow: 0 12px 36px rgba(0,0,0,.2)
}
@media(max-width:1324px) {
  .orders-page .order-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .orders-toolbar {
    align-items: flex-start;
    flex-direction: column
  }
  .orders-toolbar-controls {
    width: 100%;
    justify-content: space-between
  }
}
@media(max-width:760px) {
  .orders-page .order-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px
  }
  .orders-toolbar {
    gap: 14px;
    padding: 13px;
    border-radius: 16px
  }
  .orders-heading .page-title {
    font-size: 19px
  }
  .orders-heading .page-title > i {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 21px
  }
  .orders-toolbar-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 9px
  }
  .orders-page .services-top-box {
    align-items: stretch;
    flex-direction: column;
    gap: 9px
  }
  .orders-page .services-top-box > .all-dropdown,
  .orders-page #history-search {
    width: 100%;
    min-width: 0
  }
  .orders-page .select-all-group {
    align-self: flex-start
  }
  .orders-page .order-top {
    flex-wrap: wrap
  }
}
@media(max-width:420px) {
  .orders-page .order-box {
    padding: 9px
  }
  .orders-page .order-top-left {
    gap: 5px
  }
  .orders-page .order-top-left .o-tooltip {
    width: 30px;
    height: 30px;
    flex-basis: 30px
  }
  .orders-page .order-id {
    padding: 6px
  }
  .orders-page .order-status {
    padding: 6px 7px
  }
  .orders-page .order-center-bottom span {
    padding: 7px;
    font-size: 10px
  }
}
.orders-toolbar {
  position: relative;
  min-height: 96px;
  gap: 18px;
  padding: 14px 16px;
  overflow: hidden;
  background: var(--orders-panel);
  box-shadow: 0 10px 30px rgba(0,0,0,.12)
}
.orders-toolbar::before {
  position: absolute;
  top: -42px;
  bottom: -42px;
  left: -36px;
  width: 44%;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--fsk-site-color) 42%, var(--orders-panel)), color-mix(in srgb, var(--fsk-site-color) 18%, var(--orders-panel)) 78%, transparent);
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fsk-site-color) 65%, transparent));
  content: "";
  pointer-events: none
}
.orders-heading,
.orders-toolbar-controls,
.orders-total-card {
  position: relative;
  z-index: 1
}
.orders-heading {
  flex: 0 0 43%;
  min-width: 320px;
  padding-left: 22px
}
.orders-heading .page-title {
  align-items: center;
  direction: ltr
}
.orders-heading .orders-title-icon {
  display: inline-flex;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fsk-site-color);
  border-radius: 18px;
  background: color-mix(in srgb, var(--fsk-site-color) 20%, var(--orders-panel));
  color: color-mix(in srgb, var(--fsk-site-color) 65%, #fff);
  box-shadow: 0 0 20px color-mix(in srgb, var(--fsk-site-color) 35%, transparent);
  font-size: 30px
}
.orders-heading .orders-title-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  direction: rtl
}
.orders-heading .orders-title-copy > strong {
  color: var(--orders-text);
  font-size: 27px;
  line-height: 1.1
}
.orders-heading .orders-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--orders-muted);
  font-size: 12px;
  font-weight: 500
}
.orders-heading .orders-breadcrumb a {
  color: var(--orders-muted)
}
.orders-heading .orders-breadcrumb i {
  font-size: 9px
}
.orders-toolbar-controls {
  flex: 1 1 auto;
  gap: 12px
}
.orders-page .services-top-box {
  gap: 12px
}
.orders-page .services-top-box > .all-dropdown {
  min-width: 135px
}
.orders-page #history-search {
  width: min(370px, 44vw)
}
.orders-page .select-all-group {
  padding: 9px 0;
  border: 0;
  background: transparent
}
.orders-total-card {
  display: flex;
  min-width: 220px;
  min-height: 72px;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 34%, var(--orders-border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--fsk-site-color) 10%, var(--orders-panel));
  direction: ltr
}
.orders-total-icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fsk-site-color) 20%, var(--orders-panel));
  color: var(--fsk-site-color);
  font-size: 25px
}
.orders-total-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--orders-muted);
  font-size: 12px;
  direction: rtl;
  text-align: right
}
.orders-total-copy strong {
  color: var(--fsk-site-color);
  font-size: 24px;
  line-height: 1.1
}
.orders-page .order-list {
  gap: 18px
}
.orders-page .order-box {
  gap: 8px;
  padding: 10px;
  border-radius: 17px;
  box-shadow: 0 8px 22px rgba(0,0,0,.13)
}
.orders-page .order-top {
  direction: ltr;
  min-height: 42px
}
.orders-page .order-top-left {
  order: 2;
  flex-direction: row;
  direction: rtl
}
.orders-page .order-status {
  order: 1;
  margin-right: auto
}
.orders-page .order-id {
  border: 0;
  background: transparent;
  color: var(--orders-muted);
  font-size: 13px
}
.orders-page .order-top-left .o-tooltip {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 10px;
  font-size: 16px
}
.orders-page .order-top-left .link-order-btn {
  background: #6500f5
}
.orders-page .order-top-left .re-order-btn {
  background: #1769f6
}
.orders-page .order-top-left .report-order-btn {
  background: #f43455
}
.orders-page .order-top-left .detail-order-btn {
  background: #6500f5
}
.orders-page .order-center {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px
}
.orders-page .order-service {
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 12px;
  line-height: 1.5
}
.orders-page .order-date,
.orders-page .order-remains {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 11px;
  font-weight: 600
}
.orders-page .order-link {
  min-height: 35px;
  padding: 8px 10px;
  border-radius: 11px;
  direction: rtl
}
.orders-page .order-center-bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px
}
.orders-page .order-center-bottom span {
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 11px
}
@media(max-width:1324px) {
  .orders-toolbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap
  }
  .orders-toolbar::before {
    width: 55%
  }
  .orders-heading {
    flex: 1 1 48%;
    min-width: 260px
  }
  .orders-toolbar-controls {
    flex: 1 1 48%;
    width: auto;
    justify-content: flex-end
  }
  .orders-total-card {
    min-height: 58px;
    margin-left: auto
  }
}
@media(max-width:760px) {
  .orders-toolbar {
    flex-direction: row;
    gap: 12px
  }
  .orders-toolbar::before {
    width: 100%
  }
  .orders-heading {
    flex: 1 1 calc(100% - 190px);
    min-width: 0;
    padding-left: 0
  }
  .orders-heading .orders-title-icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 13px;
    font-size: 22px
  }
  .orders-heading .orders-title-copy > strong {
    font-size: 20px
  }
  .orders-heading .orders-breadcrumb {
    gap: 5px;
    font-size: 10px
  }
  .orders-total-card {
    min-width: 150px;
    min-height: 54px;
    gap: 8px;
    padding: 7px 9px
  }
  .orders-total-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 18px
  }
  .orders-total-copy strong {
    font-size: 18px
  }
  .orders-toolbar-controls {
    flex: 1 1 100%
  }
  .orders-page .services-top-box {
    flex-direction: row;
    align-items: center
  }
  .orders-page .services-top-box > .all-dropdown {
    width: auto;
    min-width: 110px
  }
  .orders-page #history-search {
    width: auto;
    min-width: 0;
    flex: 1
  }
}
@media(max-width:460px) {
  .orders-heading {
    flex-basis: 100%
  }
  .orders-total-card {
    min-width: 0;
    margin-left: auto
  }
  .orders-page .services-top-box {
    flex-wrap: wrap
  }
  .orders-page .services-top-box > .all-dropdown {
    flex: 1
  }
  .orders-page #history-search {
    flex-basis: 100%
  }
  .orders-page .order-top {
    align-items: flex-start
  }
  .orders-page .order-top-left {
    flex-wrap: wrap;
    justify-content: flex-start
  }
  .orders-page .order-status {
    max-width: 46%
  }
}
.orders-toolbar-controls {
  direction: ltr;
  justify-content: flex-start
}
.orders-page .order-center-bottom > span {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
  direction: ltr
}
.orders-page .order-metric-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--fsk-site-color) 16%, var(--orders-panel));
  color: var(--fsk-site-color);
  font-size: 17px
}
.orders-page .order-metric-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--orders-muted);
  font-size: 11px;
  direction: rtl;
  text-align: right
}
.orders-page .order-box {
  gap: 7px;
  padding: 10px;
  border-radius: 19px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--orders-panel) 58%, var(--orders-card)), var(--orders-panel));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.16)
}
.orders-page .order-box::after {
  position: absolute;
  right: 7%;
  bottom: 0;
  left: 7%;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #10b981 75%, var(--fsk-site-color)), transparent);
  content: "";
  pointer-events: none
}
.orders-page .order-top {
  min-height: 42px
}
.orders-page .order-top-left .form-group__checkbox {
  flex: 0 0 auto;
  margin: 0 2px
}
.orders-page .order-id {
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--orders-text) 72%, var(--fsk-site-color));
  font-size: 13px;
  letter-spacing: .15px
}
.orders-page .order-status.canceled {
  border-color: rgba(244,52,85,.58);
  background: rgba(244,52,85,.09);
  box-shadow: inset 3px 0 0 #f43455;
  color: #ff526d
}
.orders-page .order-service {
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px;
  direction: ltr
}
.orders-page .order-service-copy {
  min-width: 0;
  flex: 1 1 auto;
  direction: rtl;
  text-align: right
}
.orders-page .order-platform-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--fsk-site-color) 24%, var(--orders-panel));
  color: color-mix(in srgb, var(--fsk-site-color) 84%, #fff);
  font-size: 19px;
  -webkit-text-fill-color: currentColor;
  background-clip: initial;
  -webkit-background-clip: initial
}
.orders-page .order-date,
.orders-page .order-remains {
  min-height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--orders-surface) 80%, var(--orders-panel))
}
.orders-page .order-date i,
.orders-page .order-remains i {
  color: var(--fsk-site-color)
}
.orders-page .order-link {
  min-height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--orders-surface) 80%, var(--orders-panel))
}
.orders-page .order-center-bottom {
  gap: 8px
}
.orders-page .order-center-bottom > span {
  min-height: 56px;
  padding: 7px 8px;
  border-color: color-mix(in srgb, var(--orders-border) 82%, var(--fsk-site-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--orders-panel) 74%, var(--orders-surface))
}
.orders-page .order-metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fsk-site-color) 18%, var(--orders-panel))
}
.orders-page .order-center-bottom .order-metric-copy b {
  color: var(--orders-text);
  font-size: 14px;
  font-weight: 700
}
@media(max-width:420px) {
  .orders-page .order-center-bottom > span {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 5px
  }
  .orders-page .order-metric-icon {
    width: 30px;
    height: 34px;
    font-size: 14px
  }
  .orders-page .order-metric-copy {
    font-size: 10px
  }
}
@media(min-width:761px) {
  .orders-page .order-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr))
  }
}
@media(max-width:760px) {
  .orders-page .order-list {
    grid-template-columns: minmax(0, 1fr)
  }
}
.orders-page .order-center {
  grid-template-columns: repeat(6, minmax(0, 1fr))
}
.orders-page .order-center > .order-service,
.orders-page .order-center > .order-link,
.orders-page .order-center > .order-center-bottom {
  grid-area: auto;
  grid-column: 1 / -1
}
.orders-page .order-center > .order-date,
.orders-page .order-center > .order-remains {
  grid-area: auto;
  grid-column: span 3
}
.orders-page .order-top,
.orders-page .order-top-left {
  flex-wrap: wrap
}
.orders-page .order-top {
  align-items: center
}
@media(max-width:480px) {
  .orders-page .order-box {
    padding: 9px;
    gap: 6px
  }
  .orders-page .order-top {
    row-gap: 6px
  }
  .orders-page .order-top-left {
    gap: 5px
  }
  .orders-page .order-top-left .o-tooltip {
    width: 30px;
    height: 30px;
    flex-basis: 30px
  }
  .orders-page .order-status {
    max-width: 100%;
    padding: 6px 8px;
    font-size: 10px
  }
  .orders-page .order-service {
    gap: 7px;
    padding: 7px 8px;
    font-size: 12px
  }
  .orders-page .order-platform-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 16px
  }
  .orders-page .order-date,
  .orders-page .order-remains {
    min-width: 0;
    padding: 7px;
    gap: 5px;
    font-size: 11px
  }
  .orders-page .order-center-bottom {
    gap: 6px
  }
  .orders-page .order-center-bottom > span {
    min-width: 0;
    min-height: 52px;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 4px;
    padding: 6px
  }
  .orders-page .order-metric-icon {
    width: 26px;
    height: 30px;
    font-size: 13px
  }
  .orders-page .order-metric-copy {
    font-size: 9px;
    line-height: 1.2
  }
  .orders-page .order-center-bottom .order-metric-copy b {
    font-size: 12px
  }
}
.orders-page .order-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow: hidden
}
.orders-page .order-status {
  order: 1;
  flex: 0 0 auto;
  max-width: 42%;
  margin: 0
}
.orders-page .order-top-left {
  order: 2;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none
}
.orders-page .order-top-left::-webkit-scrollbar {
  display: none
}
.orders-page .order-top-left .form-group__checkbox,
.orders-page .order-top-left .order-id,
.orders-page .order-top-left .o-tooltip {
  flex-shrink: 0
}
@media(max-width:480px) {
  .orders-page .order-status {
    max-width: 38%;
    padding: 5px 6px;
    font-size: 9px
  }
  .orders-page .order-top-left {
    gap: 4px
  }
}
.services-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--fsk-800)
}
.services-page,
.services-page * {
  box-sizing: border-box
}
html.theme-switching .services-page,
html.theme-switching .services-page *,
html.theme-switching .services-page *::before,
html.theme-switching .services-page *::after {
  transition: none!important;
  animation: none!important
}
.services-page .service-column-label,
.services-page .service-id-cell {
  display: none
}
.services-page .services-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 20px;
  margin: 8px 0 18px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 30%, var(--fsk-300));
  border-radius: 18px;
  background: var(--fsk-50);
  box-shadow: none;
  direction: ltr
}
.services-page .services-toolbar > .page-title {
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  color: var(--fsk-900);
  direction: rtl;
  text-align: right
}
.services-page .services-toolbar > .page-title > .services-title-copy {
  max-width: 100%;
  overflow-wrap: anywhere
}
.services-page .services-toolbar > .page-title > i {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 45%, var(--fsk-300));
  border-radius: 14px;
  background: color-mix(in srgb, var(--fsk-site-color) 16%, var(--fsk-50));
  color: var(--fsk-site-color);
  font-size: 21px
}
.services-page-title {
  font-size: 21px;
  font-weight: 800
}
.services-page .services-title-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px
}
.services-page-subtitle {
  display: block;
  color: var(--fsk-500);
  font-size: 11px;
  font-weight: 500
}
.services-page .services-top-box {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr) minmax(140px, .72fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  direction: ltr
}
.services-page .services-top-box > .form-group {
  grid-column: 1;
  position: relative;
  min-width: 0;
  margin: 0
}
.services-page #search-service {
  width: 100%;
  height: 42px;
  padding: 8px 14px 8px 48px;
  border: 1px solid var(--fsk-300);
  border-radius: 11px;
  background: var(--fsk-100);
  color: var(--fsk-800);
  direction: rtl
}
.services-page .services-top-box > .form-group > i {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  display: inline-flex;
  width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--fsk-site-color);
  color: #fff;
  pointer-events: none
}
.services-page .services-top-box > .all-dropdown {
  grid-column: 2;
  width: 100%;
  height: 42px;
  min-width: 0;
  border: 1px solid var(--fsk-300);
  border-radius: 11px;
  background: var(--fsk-100);
  color: var(--fsk-800)
}
.services-page .services-category-box {
  display: flex;
  min-height: 58px;
  min-width: 0;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--fsk-site-color) 34%, #14161d);
  color: #fff;
  box-shadow: none;
  direction: rtl
}
.services-page .category-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
  font-size: 18px
}
.services-page .category-icon:empty {
  display: none
}
.services-page .category-icon img {
  max-width: 23px!important;
  max-height: 23px!important;
  object-fit: contain
}
.services-page .category-name {
  min-width: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  overflow-wrap: anywhere
}
.services-page .services-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px
}
.services-page .services-list-item {
  display: grid;
  grid-template-columns: minmax(170px, .95fr) minmax(220px, 1.2fr) minmax(0, 3fr);
  grid-template-rows: minmax(42px, auto);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 20%, var(--fsk-300));
  border-radius: 15px;
  background: var(--fsk-100);
  box-shadow: none;
  direction: ltr
}
.services-page .services-list-item:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--fsk-site-color) 42%, var(--fsk-300))
}
.services-page .services-list-left {
  display: contents
}
.services-page .services-item-top {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--fsk-900);
  font-size: 14px;
  line-height: 1.45;
  direction: rtl
}
.services-page .service-name-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  font-weight: 700
}
.services-page .service-platform-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
  background: color-mix(in srgb, var(--fsk-site-color) 18%, var(--fsk-50));
  color: var(--fsk-site-color);
  font-size: 19px
}
.services-page .service-platform-icon:empty {
  display: none
}
.services-page .service-platform-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain
}
.services-page .favbox {
  flex: 0 0 auto;
  margin: 0
}
.services-page .favbox span {
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 30%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--fsk-site-color) 18%, var(--fsk-50));
  color: var(--fsk-site-color)
}
.services-page .services-item-bottom {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  direction: rtl
}
.services-page .services-item-feature {
  min-height: 27px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 18%, var(--fsk-300));
  border-radius: 9px;
  background: color-mix(in srgb, var(--fsk-200) 70%, var(--fsk-50));
  color: var(--fsk-700);
  font-size: 10px;
  line-height: 1.25
}
.services-page .services-item-feature i {
  color: var(--fsk-site-color)
}
.services-page .services-item-feature b {
  color: var(--fsk-900);
  font-weight: 700
}
.services-page .services-item-bottom .service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%
}
.services-page .service-features-item {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--fsk-300);
  border-radius: 9px;
  background: var(--fsk-100);
  color: var(--fsk-700);
  font-size: 10px
}
.services-page .service-features-item .feature-name {
  display: none!important
}
.services-page .services-list-right {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  min-width: 0;
  width: auto;
  flex-direction: column;
  justify-content: center;
  gap: 7px
}
.services-page .services-item-price {
  width: 100%;
  min-height: 36px;
  height: auto;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 36%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--fsk-site-color) 14%, var(--fsk-100));
  color: var(--fsk-site-color);
  font-size: 14px;
  font-weight: 800
}
.services-page .services-item-btn {
  width: 100%
}
.services-page .services-item-btn .btn {
  width: 100%;
  min-height: 34px;
  height: auto;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--fsk-site-color) 60%, transparent);
  border-radius: 10px;
  background: var(--fsk-site-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700
}
@media(max-width:1050px) {
  .services-page .services-list-item {
    grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr);
    grid-template-rows: auto auto
  }
  .services-page .services-item-top {
    grid-column: 2;
    grid-row: 1
  }
  .services-page .services-item-bottom {
    grid-column: 2;
    grid-row: 2
  }
  .services-page .services-list-right {
    grid-column: 1;
    grid-row: 1 / 3
  }
}
@media(max-width:700px) {
  .services-page .services-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 12px
  }
  .services-page .services-toolbar > .page-title,
  .services-page .services-top-box {
    grid-column: 1;
    grid-row: auto
  }
  .services-page .services-toolbar > .page-title {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
    direction: rtl;
    text-align: right
  }
  .services-page .services-title-copy {
    align-items: flex-end;
    text-align: right
  }
  .services-page .services-page-title {
    font-size: 19px
  }
  .services-page .services-top-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    min-width: 0
  }
  .services-page .services-top-box > .form-group,
  .services-page .services-top-box > .all-dropdown {
    grid-column: 1;
    width: 100%;
    min-width: 0
  }
  .services-page #search-service {
    box-sizing: border-box;
    width: 100%;
    min-width: 0
  }
  .services-page .services-list-item {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    min-width: 0;
    align-items: stretch
  }
  .services-page .services-category-box {
    min-height: 48px;
    gap: 9px;
    margin-bottom: 8px;
    padding: 9px 12px;
    border-color: color-mix(in srgb, var(--fsk-site-color) 62%, #fff);
    background: color-mix(in srgb, var(--fsk-site-color) 38%, #14161d)
  }
  .services-page .category-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 16px
  }
  .services-page .category-name {
    font-size: 14px;
    line-height: 1.35
  }
  .services-page .services-list-left {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 9px;
    width: 100%;
    min-width: 0;
    direction: ltr
  }
  .services-page .services-item-top {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    direction: rtl;
    text-align: right
  }
  .services-page .services-item-bottom {
    grid-column: 1 / -1;
    grid-row: 2
  }
  .services-page .services-item-bottom > .services-item-feature {
    max-width: 100%;
    overflow-wrap: anywhere
  }
  .services-page .services-list-right {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    width: 100%
  }
  .services-page .service-id-cell {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    min-width: 0;
    max-width: 42vw;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 2px
  }
  .services-page .service-id-actions {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    direction: ltr
  }
  .services-page .service-column-label {
    display: block;
    color: var(--fsk-500);
    font-size: 10px
  }
  .services-page .service-name-block .service-column-label,
  .services-page .service-id-cell .service-column-label,
  .services-page .services-list-right .service-column-label {
    display: none
  }
  .services-page .service-id-copy {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid var(--fsk-300);
    border-radius: 8px;
    background: var(--fsk-200);
    color: var(--fsk-800);
    font-size: 11px;
    font-weight: 700
  }
  .services-page .services-item-price {
    min-height: 34px
  }
  .services-page .services-item-btn .btn {
    min-height: 34px
  }
}
@media(max-width:420px) {
  .services-page .services-toolbar {
    padding: 11px;
    border-radius: 15px
  }
  .services-page .services-top-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px
  }
  .services-page .services-top-box > .form-group,
  .services-page .services-top-box > .all-dropdown {
    grid-column: 1
  }
  .services-page .services-toolbar > .page-title > i {
    width: 42px;
    height: 42px;
    flex-basis: 42px
  }
  .services-page .services-list-item {
    padding: 8px;
    gap: 8px
  }
  .services-page .services-item-top {
    gap: 7px;
    font-size: 12px
  }
  .services-page .service-platform-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 17px
  }
  .services-page .services-item-feature {
    min-height: 25px;
    padding: 5px 7px;
    font-size: 9px
  }
}
@media(min-width:1051px) {
  .services-page .services-category-box {
    min-height: 40px;
    justify-content: flex-start;
    padding: 8px 14px;
    border-color: color-mix(in srgb, var(--fsk-site-color) 65%, var(--fsk-300));
    background: color-mix(in srgb, var(--fsk-site-color) 76%, var(--fsk-800));
    box-shadow: none
  }
  .services-page .category-name {
    font-size: 14px
  }
  .services-page .services-list {
    gap: 7px
  }
  .services-page .services-list-item {
    grid-template-columns: minmax(110px, .9fr) minmax(125px, 1fr) minmax(70px, .55fr) minmax(70px, .55fr) minmax(115px, .85fr) minmax(210px, 2fr) minmax(70px, .55fr);
    grid-template-rows: minmax(66px, auto);
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-color: color-mix(in srgb, var(--fsk-site-color) 20%, var(--fsk-300));
    border-radius: 12px;
    background: var(--fsk-100);
    box-shadow: none
  }
  .services-page .services-list-item:hover {
    background: var(--fsk-100)
  }
  .services-page .services-list-left,
  .services-page .services-item-bottom,
  .services-page .services-list-right {
    display: contents
  }
  .services-page .services-item-top {
    grid-column: 6;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    direction: rtl
  }
  .services-page .service-name-block {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px
  }
  .services-page .services-item-top .service-name-copy {
    font-size: 12px;
    line-height: 1.35
  }
  .services-page .service-id-cell {
    grid-column: 7;
    grid-row: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px
  }
  .services-page .service-column-label {
    display: block
  }
  .services-page .service-id-copy {
    display: inline-flex;
    width: 100%;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 6px;
    border: 1px solid var(--fsk-300);
    border-radius: 8px;
    background: var(--fsk-200);
    color: var(--fsk-800);
    font-size: 11px;
    font-weight: 700;
    text-align: center
  }
  .services-page .service-column-label {
    color: var(--fsk-500);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap
  }
  .services-page .services-item-top .service-column-label {
    text-align: right
  }
  .services-page .services-item-bottom > .services-item-feature.min-feature {
    grid-column: 4;
    grid-row: 1
  }
  .services-page .services-item-bottom > .services-item-feature.max-feature {
    grid-column: 3;
    grid-row: 1
  }
  .services-page .services-item-bottom > .services-item-feature.avg {
    grid-column: 2;
    grid-row: 1
  }
  .services-page .services-item-bottom > .services-item-feature {
    display: flex;
    min-width: 0;
    min-height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    border-color: transparent;
    background: transparent;
    text-align: center
  }
  .services-page .services-item-bottom > .services-item-feature i {
    display: none
  }
  .services-page .services-item-bottom > .services-item-feature b {
    display: inline-flex;
    min-width: 32px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid var(--fsk-300);
    border-radius: 8px;
    background: var(--fsk-200);
    font-size: 11px
  }
  .services-page .services-item-bottom > .service-features {
    display: none
  }
  .services-page .service-features-item {
    min-height: 22px;
    padding: 4px 7px;
    white-space: nowrap
  }
  .services-page .services-list-right > .services-item-price {
    grid-column: 5;
    grid-row: 1;
    display: flex;
    min-height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    border-color: transparent;
    background: transparent;
    font-size: 12px
  }
  .services-page .services-list-right > .services-item-price .service-column-label {
    color: var(--fsk-500);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap
  }
  .services-page .services-list-right > .services-item-price b {
    display: inline-flex;
    min-width: 32px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid var(--fsk-300);
    border-radius: 8px;
    background: var(--fsk-200);
    color: var(--fsk-800);
    font-size: 11px;
    white-space: nowrap
  }
  .services-page .services-list-right > .services-item-btn {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px
  }
  .services-page .services-list-right > .services-item-btn .btn {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px
  }
}
.services-page .service-actions-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 5px;
  direction: rtl
}
.services-page .service-actions-row .service-order-btn {
  display: inline-flex;
  width: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px
}
.services-page .service-actions-row .service-order-btn span {
  display: none
}
.services-page .service-actions-row .btn-service {
  min-width: 0;
  flex: 1 1 auto
}