@charset "UTF-8";
/*! Typography settings */
@font-face{
  font-family:"Montserrat";
  src:url(../fonts/montserrat-regular.woff2) format("woff2"), url(../fonts/montserrat-regular.woff) format("woff");
  font-weight:400;
  font-style:normal;
  font-display:fallback;
}
@font-face{
  font-family:"Montserrat";
  src:url(../fonts/montserrat-medium.woff2) format("woff2"), url(../fonts/montserrat-medium.woff) format("woff");
  font-weight:500;
  font-style:normal;
  font-display:fallback;
}
@font-face{
  font-family:"Montserrat";
  src:url(../fonts/montserrat-semibold.woff2) format("woff2"), url(../fonts/montserrat-semibold.woff) format("woff");
  font-weight:600;
  font-style:normal;
  font-display:fallback;
}
@font-face{
  font-family:"Montserrat";
  src:url(../fonts/montserrat-bold.woff2) format("woff2"), url(../fonts/montserrat-bold.woff) format("woff");
  font-weight:700;
  font-style:normal;
  font-display:fallback;
}
@font-face{
  font-family:"Montserrat";
  src:url(../fonts/montserrat-extrabold.woff2) format("woff2"), url(../fonts/montserrat-extrabold.woff) format("woff");
  font-weight:800;
  font-style:normal;
  font-display:fallback;
}
:root{
  --font-montserrat:"Montserrat", sans-serif;
}

.f-400{
  font-weight:400;
}

.f-500{
  font-weight:500;
}

.f-600{
  font-weight:600;
}

.f-700{
  font-weight:700;
}

.f-800{
  font-weight:800;
}

.critical-css-font-carrier{
  font-family:var(--font-montserrat);
}

/*! Initial styling for basic html-elements */
*,
::before,
::after{
  box-sizing:border-box;
}

*{
  padding:0;
  margin:0;
}
*:focus{
  outline:none;
}
*:not(input, textarea, .button):focus-visible{
  outline:1px dashed var(--tab-focus-color);
  outline-offset:0.5rem;
}

html{
  height:100%;
  font-family:system-ui, "-apple-system", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size:10px;
  background-color:var(--html-bg-color);
  scroll-behavior:smooth;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}

body{
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  min-width:36rem;
  height:100%;
  font-family:var(--font-montserrat);
  font-size:1.6rem;
  line-height:125%;
  font-weight:500;
  color:var(--text-body-color);
  -webkit-font-smoothing:antialiased;
}
body.no-transition *{
  transition:none !important;
}
body.no-transition *::before, body.no-transition *::after{
  transition:none !important;
}

p,
h1,
h2,
h3,
h4,
h5,
h6{
  overflow-wrap:break-word;
}

h1,
.h1,
h2,
.h2,
h3,
.h3{
  font-weight:500;
}

h1,
.h1{
  font-size:3rem;
}

.h1{
  margin-bottom:1.6rem;
}

h2,
.h2{
  font-size:2rem;
  line-height:120%;
  font-weight:800;
  text-transform:uppercase;
}

h3,
.h3{
  font-size:2rem;
}

.h3{
  margin-bottom:1rem;
}

.p{
  margin-bottom:1.6rem;
}

br.md-only{
  display:none;
}

br.lg{
  display:none;
}

ul,
ol{
  list-style:none;
  list-style-position:inside;
}

.ul,
.ol{
  margin-bottom:1.6rem;
}

a,
.link{
  display:inline-block;
  border:none;
  background-color:transparent;
  color:var(--link-color);
  transition-property:transform, opacity, var(--transition-props-color);
  transition-timing-function:var(--transition-func-cubic);
  transition-duration:var(--transition-duration-medium);
}
a:hover, a:focus-visible,
.link:hover,
.link:focus-visible{
  text-decoration-color:transparent;
  color:var(--link-hover-color);
}
a:active,
.link:active{
  color:var(--link-active-color);
}

.link--primary{
  --link-color:var(--color-primary);
  --link-hover-color:var(--color-white);
  text-decoration:underline;
}

button,
input,
optgroup,
select,
textarea{
  font-family:inherit;
  font-size:100%;
  line-height:var(--text-body-lh);
  color:inherit;
}

button,
select{
  text-transform:none;
}

select{
  visibility:hidden;
}

button,
input[type=button],
input[type=reset],
input[type=submit]{
  -webkit-appearance:button;
}

button,
input[type=submit]{
  display:block;
}
button:hover,
input[type=submit]:hover{
  cursor:pointer;
}

input[type=search]{
  -webkit-appearance:textfield;
  outline-offset:-2px;
}

progress{
  vertical-align:baseline;
}

img,
picture,
video,
canvas,
svg{
  display:block;
  max-width:100%;
}

img{
  box-sizing:content-box;
  width:100%;
  height:auto;
}

.picture-svg img{
  width:revert-layer;
}

.inline-svg{
  pointer-events:none;
}

address{
  font-style:normal;
}

table{
  table-layout:fixed;
  text-indent:0;
  border-color:inherit;
  border-collapse:collapse;
}

hr{
  height:0;
  color:inherit;
}

.hr{
  width:100%;
  height:0.1rem;
  border:none;
  background-color:var(--color-dark-3);
}
.hr[data-delimeter]{
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  height:initial;
  background-color:transparent;
}
.hr[data-delimeter]::before{
  content:attr(data-delimeter);
  z-index:1;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  padding:0 2rem;
  font-size:1.6rem;
  line-height:125%;
  font-weight:500;
  background-color:var(--color-dark-2);
  color:var(--color-white);
}
.hr[data-delimeter]::after{
  content:"";
  position:absolute;
  top:calc(50% - 0.2rem);
  left:50%;
  width:100%;
  height:0.2rem;
  background-color:var(--color-dark-3);
  transform:translate(-50%, -50%);
}

abbr[title]{
  -webkit-text-decoration:underline dotted;
          text-decoration:underline dotted;
}

b,
strong{
  font-weight:bolder;
}

code,
kbd,
samp,
pre{
  font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size:1em;
}

small{
  font-size:80%;
}

sub,
sup{
  position:relative;
  vertical-align:baseline;
  font-size:75%;
  line-height:0;
}

sub{
  bottom:-0.25em;
}

sup{
  top:-0.5em;
}

summary{
  display:list-item;
}

iframe{
  border:none;
}

::-moz-focus-inner{
  padding:0;
  border-style:none;
}

:-moz-focusring{
  outline:1px dotted ButtonText;
}

:-moz-ui-invalid{
  box-shadow:none;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button{
  height:auto;
}

::-webkit-search-decoration{
  -webkit-appearance:none;
}

::-webkit-file-upload-button{
  -webkit-appearance:button;
  font:inherit;
}

/*! Icons system */
.icon{
  display:inline-block;
  flex-shrink:0;
  font-size:2rem;
  transition:color var(--transition-medium-cubic);
}

/*! Buttons system */
.button{
  --bg-color:var(--color-primary);
  --bg-color-hover:var(--color-blue-3);
  --color:var(--color-white);
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  min-height:6rem;
  padding:0.6rem 2rem;
  border:none;
  border-radius:1.6rem;
  font-size:1.6rem;
  font-weight:500;
  text-decoration:none;
  text-align:center;
  background-color:var(--bg-color);
  color:var(--color);
  transition-property:transform, opacity, var(--transition-props-color);
  transition-timing-function:var(--transition-func-cubic);
  transition-duration:var(--transition-duration-medium);
  cursor:pointer;
}
.button:hover, .button:focus-visible{
  background-color:var(--bg-color-hover);
  color:var(--color);
}
.button:active{
  background-color:var(--bg-color);
  color:var(--color);
}
.button .icon{
  font-size:2.4rem;
}
.button:disabled{
  background-color:var(--color-dark-3);
  color:var(--color-grey-1);
  -webkit-user-select:none;
          user-select:none;
  pointer-events:none;
}

.button--primary{
  position:relative;
  z-index:0;
  min-height:6.4rem;
  padding:1.2rem 1.2rem 0.8rem;
  font-weight:700;
}
.button--primary:hover::after, .button--primary:focus-visible::after{
  background-color:var(--bg-color-hover);
}
.button--primary:active{
  background-color:var(--color-blue-4);
  color:rgba(255, 255, 255, 0.5);
  opacity:1;
}
.button--primary:active::before{
  background:linear-gradient(180deg, rgba(46, 213, 255, 0.2) 0%, rgba(46, 213, 255, 0) 55%);
}
.button--primary:active::after{
  background-color:var(--color-blue-4);
}
.button--primary:active .icon{
  transition-duration:0.1s;
}
.button--primary::before{
  content:"";
  position:absolute;
  top:0.2rem;
  left:0.2rem;
  z-index:-1;
  width:calc(100% - 0.4rem);
  height:calc(100% - 0.4rem);
  border-radius:1.6rem;
  background:linear-gradient(180deg, rgb(136, 195, 251) 0%, rgba(46, 213, 255, 0) 55%);
  transition:background var(--transition-medium-cubic);
}
.button--primary::after{
  content:"";
  position:absolute;
  top:0.3rem;
  left:0.3rem;
  z-index:-1;
  width:calc(100% - 0.6rem);
  height:calc(100% - 0.1rem);
  border-radius:1.6rem;
  background-color:var(--bg-color);
  transition:background-color var(--transition-medium-cubic);
}
.button--primary .icon{
  position:relative;
  font-size:2.4rem;
}
.button--primary .button-text{
  line-height:2.4rem;
}
.button--primary:disabled{
  background-color:var(--color-blue-5);
  color:var(--color-grey-1);
}
.button--primary:disabled::before{
  background:linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(46, 213, 255, 0) 100%);
}
.button--primary:disabled::after{
  background-color:var(--color-blue-5);
}

.button--secondary{
  --bg-color:var(--color-dark-3);
  --bg-color-hover:var(--color-blue-5);
  --color:var(--color-white);
  padding:0.6rem 1.9rem;
}

.button--tertiary{
  --bg-color:var(--color-blue-5);
  --bg-color-hover:var(--color-dark-3);
  --color:var(--color-white);
  padding:0.6rem 1.9rem;
}

.button--sm{
  min-height:4rem;
  padding:0.8rem;
  border-radius:1.2rem;
  font-size:1.4rem;
  line-height:1.6rem;
  font-weight:600;
}
.button--sm .icon{
  font-size:2.4rem;
}
.button--sm.button--bright{
  min-height:4rem;
}

.button--outline{
  --bg-color:transparent;
  --bg-color-hover:var(--color-blue-2);
  padding:0.5rem 1.8rem;
  border:2px solid var(--color-dark-3);
}

.button--bright{
  border-width:0.1rem;
  border-color:var(--color-grey-1);
}
.button--bright:hover, .button--bright:focus-visible{
  border-color:var(--color-blue-1);
  background-color:transparent;
}
.button--bright:hover .icon, .button--bright:focus-visible .icon{
  color:var(--color-blue-1);
}
.button--bright:active{
  opacity:0.8;
}

.button--xs{
  min-height:2.8rem;
  padding:0.3rem 0.7rem;
  border:1px solid var(--color-grey-1);
  border-radius:0.4rem;
  font-size:1.2rem;
  line-height:167%;
  font-weight:500;
  color:var(--color-grey-1);
}

.close-button{
  overflow:hidden;
  width:2rem;
  height:2rem;
  border:0;
  background-color:transparent;
  color:transparent;
  transition:opacity var(--transition-medium-cubic);
  -webkit-user-select:none;
          user-select:none;
}
.close-button:hover{
  opacity:0.6;
}
.close-button::before, .close-button::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  display:block;
  width:0.2rem;
  height:100%;
  margin:0 auto;
  background-color:var(--color-grey-1);
  transform:rotate(45deg) translateX(0);
}
.close-button::after{
  transform:rotate(-45deg) translateX(0);
}
.custom-select-container{
  flex-grow:1;
  border:none;
  border-radius:1rem;
  font-size:1.4rem;
  transition:box-shadow var(--transition-short-cubic), transform var(--transition-medium-cubic);
  -webkit-user-select:none;
          user-select:none;
}
.custom-select-container select{
  width:1rem;
}

.custom-select-opener{
  position:relative;
  z-index:1;
  display:flex;
  overflow:hidden;
  align-items:center;
  width:100%;
  height:6rem;
  padding-right:4rem;
  padding-left:5.3rem;
  border:var(--border-width) solid var(--border-color);
  border-radius:var(--border-radius);
  font-size:1.6rem;
  background-color:var(--bg-color);
  transition:background-color var(--transition-medium-cubic);
}
.custom-select-opener:hover, .custom-select-opener:focus-visible{
  background-color:var(--bg-color-hover);
}
.custom-select-opener:not([aria-activedescendant]){
  color:var(--color-grey-1);
}
.custom-select-opener::before{
  content:"";
  position:absolute;
  top:50%;
  left:1.9rem;
  width:2.4rem;
  height:2.4rem;
  background-image:url(../svg/ui/globe.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:2.4rem;
  transform:translateY(-50%);
}
.custom-select-opener::after{
  content:"";
  position:absolute;
  top:50%;
  right:1.9rem;
  width:2.4rem;
  height:2.4rem;
  background-image:url(../svg/ui/caret-down.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:2.4rem;
  transform:translateY(-50%);
}

.custom-select-container:has(.custom-select-option[data-value=""]) .custom-select-opener span.is-placeholder{
  color:var(--color-grey-1);
}

.custom-select-opener[aria-expanded=true]{
  border-radius:var(--border-radius) var(--border-radius) 0 0;
  background-color:var(--bg-color-hover);
}

.custom-select-panel{
  --offset-y:0;
  --translate-x:0%;
  top:calc(100% + var(--offset-y));
  left:0%;
  z-index:1;
  display:none;
  border-radius:0 0 var(--border-radius) var(--border-radius);
  background-color:transparent;
  transform:translate3d(var(--translate-x), var(--offset-y), 0);
}

.select-wrapper .custom-select-panel{
  left:-0.1rem;
  width:calc(100% + 0.2rem);
}

.custom-select-container.is-open{
  z-index:5;
  width:100%;
  box-shadow:var(--shadow-dialog);
}
.custom-select-container.is-open .custom-select-panel{
  z-index:5;
  display:block;
  max-height:24rem;
}
.custom-select-container.is-open + .select-wrapper__chevron{
  color:var(--color-secondary);
  transform:rotate(-180deg);
}

@keyframes select-panel-appear{
  from{
    opacity:0;
    transform:translate3d(var(--translate-x), -1.2rem, 0);
  }
  to{
    opacity:1;
    transform:translate3d(var(--translate-x), var(--offset-y), 0);
  }
}
@keyframes hide-scroll{
  from, to{
    overflow:hidden;
  }
}
.custom-select-option{
  position:relative;
  display:flex;
  align-items:center;
  height:6rem;
  padding-left:5.4rem;
  font-size:1.6rem;
  background-color:var(--bg-color-hover);
  transition:background-color var(--transition-short-cubic), color var(--transition-short-cubic);
}
.custom-select-option:hover, .custom-select-option:focus-visible, .custom-select-option.is-selected{
  background-color:var(--color-primary) !important;
}
.custom-select-option:hover::before, .custom-select-option:focus-visible::before, .custom-select-option.is-selected::before{
  filter:brightness(0) invert(1);
}
.custom-select-option.has-focus{
  background-color:var(--bg-color-hover);
}
.custom-select-option.is-selected{
  overflow:hidden;
  height:0;
  padding:0;
  font-weight:normal;
}
.custom-select-option::before{
  content:"";
  position:absolute;
  top:50%;
  left:2rem;
  width:2.4rem;
  height:2.4rem;
  background-image:url(../svg/ui/globe.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  transform:translateY(-50%);
}

.custom-select-option[data-value=""]{
  display:none;
}

.custom-select-container:has(.just-validate-error-field) .custom-select-opener{
  border-color:var(--color-red-1);
  background-color:var(--color-red-3);
}
.custom-select-container:has(.just-validate-error-field) .custom-select-opener::before{
  filter:brightness(0) invert(1);
}
.account-form .custom-select-opener,
.account-form .custom-select-option{
  padding-left:2rem;
}
.account-form .custom-select-opener::before,
.account-form .custom-select-option::before{
  display:none;
}

/*! Common nav rules */
.nav__list{
  display:flex;
  align-items:center;
  gap:3rem;
  padding-left:0;
  margin-bottom:0;
}

.nav__item{
  position:relative;
  margin-bottom:0;
}

.nav__link{
  display:inline-flex;
  align-items:center;
  font-weight:500;
  text-decoration:none;
}
.nav__link .icon{
  margin-left:0.6rem;
  font-size:2.2rem;
  transition:transform var(--transition-medium-cubic);
}

.nav__sublist{
  display:flex;
  overflow:hidden;
  flex-direction:column;
  gap:2rem;
  max-height:0;
  margin-bottom:0;
  transition:max-height 0.2s linear;
}

.nav__sublist-toggler.is-active .icon{
  transform:rotate(180deg);
}

.nav__sublist .nav__link{
  display:block;
  text-decoration-color:transparent;
}

@keyframes sublist-appear{
  0%{
    opacity:0;
    transform:translateY(-1.6rem) translateX(-50%);
  }
}
/*! Overlay component */
.overlay{
  position:fixed;
  top:0;
  left:0;
  z-index:99;
  visibility:hidden;
  width:100%;
  height:100%;
  background-color:var(--color-overlay-bg);
  opacity:0;
  transition:var(--transition-overlay);
  cursor:pointer;
}

.overlay.is-visible{
  visibility:visible;
  opacity:1;
}

.dialog-overlay{
  z-index:101;
}

/*! Forms and their elements */
.form{
  --border-width:0.1rem;
  --border-radius:1.6rem;
  --border-color:var(--color-dark-3);
  --border-color-hover:var(--color-blue-5);
  --border-color-focus:var(--color-blue-1);
  --input-height:6rem;
  --input-padding:0 5.3rem;
  --placeholder-color:var(--color-grey-1);
  --bg-color:var(--color-dark-3);
  --bg-color-hover:var(--color-blue-5);
  --bg-color-focus:var(--color-blue-5);
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.form__fieldset{
  display:flex;
  flex-direction:column;
  gap:2.1rem;
  border:0;
}

.form-legend{
  margin-bottom:2.1rem;
  font-size:2rem;
  line-height:120%;
  font-weight:800;
  text-transform:uppercase;
}

.form__field{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  width:100%;
}

.text-field .form__label{
  pointer-events:none;
}

.text-field__icon{
  --icon-size:2.4rem;
  position:absolute;
  top:calc(var(--input-height) / 2 - var(--icon-size) / 2);
  left:2rem;
  font-size:var(--icon-size);
  color:var(--color-grey-1);
}

.tooltip-label{
  --tooltip-height:3.4rem;
  position:absolute;
  top:calc(var(--input-height) / 2 - var(--tooltip-height) / 2);
  right:2rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  width:-webkit-max-content;
  width:max-content;
  min-height:var(--tooltip-height);
  padding:0.5rem 1rem;
  border-radius:1.6rem;
  background-color:rgba(74, 76, 88, 0.27);
  color:var(--color-grey-1);
}

.tooltip-label__button{
  border:none;
  font-size:1.4rem;
  line-height:120%;
  font-weight:700;
  background-color:transparent;
  transition:color var(--transition-medium-cubic);
  cursor:pointer;
}
.tooltip-label__button:hover, .tooltip-label__button:focus-visible{
  color:var(--color-primary);
}
.tooltip-label__button:hover + .icon, .tooltip-label__button:focus-visible + .icon{
  color:var(--color-primary);
}
.tooltip-label__button:active{
  color:var(--color-grey-1);
}
.tooltip-label__button::after{
  content:"";
  position:absolute;
  inset:0;
}

.tooltip-trigger{
  position:relative;
  font-size:2.4rem;
  pointer-events:none;
}
.tooltip-trigger:hover{
  color:var(--color-white);
}
.tooltip-trigger:hover .tooltip{
  display:block;
}

.tooltip{
  position:absolute;
  right:100%;
  bottom:100%;
  z-index:2;
  display:none;
  width:18.6rem;
  padding:1.6rem;
  border-radius:2rem 2rem 0 2rem;
  font-size:1.2rem;
  line-height:167%;
  font-weight:400;
  background-color:var(--color-blue-2);
  color:var(--color-white);
  box-shadow:0 0 80px 0 rgba(0, 0, 0, 0.25);
}

.form__label{
  display:block;
  align-self:flex-start;
  order:-1;
  font-size:1.4rem;
  line-height:114%;
  font-weight:400;
}
.form__label:has(.text-input-wrapper){
  width:100%;
  pointer-events:initial;
}

.text-input-wrapper{
  position:relative;
  display:block;
}
.text-input-wrapper:has(.tooltip-label) .form__text-input{
  padding-right:15.6rem;
}

.form__text-input{
  width:100%;
  min-height:var(--input-height);
  padding:var(--input-padding);
  border:var(--border-width) solid var(--border-color);
  border-radius:var(--border-radius);
  font-weight:500;
  background-color:var(--bg-color);
  transition:background-color var(--transition-medium-cubic), border-color var(--transition-medium-cubic);
}
.form__text-input:focus-visible{
  border-color:var(--border-color-focus);
  background-color:var(--bg-color-focus);
  outline:none;
}
.form__text-input:focus-visible ~ .text-field__icon, .form__text-input:focus-visible ~ .tooltip-label{
  color:var(--color-white);
}
.form__text-input:focus-visible::placeholder{
  opacity:0;
}
.form__text-input::placeholder{
  color:var(--placeholder-color);
  opacity:1;
}
.form__text-input[readonly]{
  pointer-events:none;
}

.input-textarea{
  display:block;
  min-height:12rem;
  max-height:24rem;
  padding:1rem 2rem;
  resize:vertical;
}

.file-field{
  flex-direction:row;
  align-items:center;
  gap:1rem;
  min-height:var(--input-height);
  padding:var(--input-padding);
  border:var(--border-width) solid var(--border-color);
  border-radius:var(--border-radius);
  background-color:var(--bg-color);
  transition:border-color var(--transition-medium-cubic);
}
.file-field:hover{
  border-color:var(--border-color-hover);
}
.file-field:focus-within{
  border-color:var(--border-color-focus);
}

.file-field.file-field--button{
  --input-padding:0 1.8rem;
  --border-width:0.2rem;
  --border-color:var(--color-dark-3);
  --border-color-hover:var(--color-dark-3);
  --border-color-focus:var(--color-dark-3);
  --bg-color:transparent;
  --bg-color-hover:var(--color-blue-2);
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  transition:background-color var(--transition-medium-cubic);
}
.file-field.file-field--button:hover, .file-field.file-field--button:focus-within{
  background-color:var(--bg-color-hover);
}
.file-field.file-field--button:active{
  background-color:var(--bg-color);
}
.file-field.file-field--button .form__label{
  align-self:center;
  font-size:1.6rem;
  font-weight:500;
}
.file-field.file-field--button .icon{
  display:none;
}

.input-file{
  position:absolute;
  top:calc(var(--border-width) * -1);
  left:calc(var(--border-width) * -1);
  z-index:1;
  width:calc(100% + var(--border-width) * 2);
  height:calc(100% + var(--border-width) * 2);
  font-size:0;
  opacity:0;
  cursor:pointer;
}
.input-file::-webkit-file-upload-button{
  cursor:pointer;
}

.label-file{
  order:initial;
}

.uploaded-file{
  display:inline-flex;
  line-height:2rem;
  font-weight:400;
}

.uploaded-file__name{
  font-size:1.8rem;
}
.uploaded-file__name .link{
  word-break:break-word;
}

.checkbox-field{
  --checkbox-size:2.4rem;
  z-index:0;
  justify-content:center;
  min-height:var(--input-height);
}

.input-checkbox{
  position:absolute;
  z-index:-1;
  opacity:0;
}
.input-checkbox:focus-visible + .label-checkbox .checkbox-input-control{
  border-color:var(--border-color-focus);
}
.input-checkbox:checked + .label-checkbox .checkbox-input-control::before{
  transform:scale(0.9);
}

.label-checkbox{
  margin-left:calc(var(--checkbox-size) + 1rem);
  font-size:1.4rem;
  line-height:2rem;
  font-weight:500;
  color:var(--color-grey-1);
  transition:color var(--transition-medium-cubic);
  -webkit-user-select:none;
          user-select:none;
  cursor:pointer;
}
.label-checkbox:hover{
  color:var(--color-white);
}
.label-checkbox:hover .checkbox-input-control{
  border-color:var(--border-color-hover);
  background-color:var(--bg-color-hover);
}
.label-checkbox:active .checkbox-input-control{
  border-color:var(--border-color-hover);
}
.label-checkbox a{
  display:inline;
}

.checkbox-input-control{
  position:absolute;
  top:50%;
  left:0;
  width:var(--checkbox-size);
  height:var(--checkbox-size);
  border:1px solid var(--border-color);
  border-radius:0.4rem;
  background-color:var(--bg-color);
  transform:translateY(-50%);
  transition:border-color var(--transition-medium-cubic);
}
.checkbox-input-control::before{
  content:"";
  position:absolute;
  top:0.2rem;
  left:0.2rem;
  width:1.8rem;
  height:1.8rem;
  background-image:url(../svg/ui/check.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  transform:scale(0);
}

.checkbox-field.checkbox-field--lg{
  --checkbox-size:3.2rem;
  min-height:initial;
}
.checkbox-field.checkbox-field--lg .label-checkbox{
  margin-left:calc(var(--checkbox-size) + 2.1rem);
  font-size:1.6rem;
}
.checkbox-field.checkbox-field--lg .checkbox-input-control{
  border-radius:0.8rem;
}
.checkbox-field.checkbox-field--lg .checkbox-input-control::before{
  top:0.3rem;
  left:0.3rem;
  width:2.4rem;
  height:2.4rem;
}

.form__fieldset--checkbox-list.custom-scroll{
  flex-direction:column;
  gap:3.2rem;
  overflow-y:auto;
  height:18.8rem;
  padding-top:0.6rem;
  margin-top:3rem;
  overscroll-behavior:contain;
}

.form__fieldset--checkbox-list.custom-scroll,
.dialog-table-wrapper.custom-scroll{
  --track-width:0.6rem;
  --thumb-width:0.6rem;
  --track-vertical-offset:0;
  --track-color:var(--color-dark-3);
  --thumb-color:var(--color-grey-1);
  --thumb-hover-color:var(--color-grey-2);
}
.form__fieldset--checkbox-list.custom-scroll::-webkit-scrollbar,
.dialog-table-wrapper.custom-scroll::-webkit-scrollbar{
  height:0.6rem;
}

.form__fieldset.radio-fieldset{
  flex-direction:column;
  gap:2rem;
}

.form__fieldset.type-fieldset{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:0.6rem;
  padding:0.5rem;
  border:1px solid var(--color-dark-3);
  border-radius:1.6rem;
}

.type-field{
  flex:1 0 0;
  min-width:28rem;
  width:100%;
}
.type-field .nav__item{
  cursor:pointer;
}
.type-field .input-radio:checked + .nav__item .nav__link{
  background-color:var(--color-blue-2);
  color:var(--color-white);
}

.radio-legend{
  margin-bottom:1rem;
  font-size:2rem;
  font-weight:500;
}

.radio-field{
  --radio-size:2.4rem;
  --check-size:1.4rem;
  --check-color:var(--color-black);
  z-index:0;
  justify-content:center;
  min-height:calc(var(--radio-size) + 0.4rem);
}

.input-radio{
  position:absolute;
  z-index:-1;
  opacity:0;
}
.input-radio:focus-visible + .label-radio .radio-input-control{
  border-color:var(--border-color-focus);
}
.input-radio:checked + .label-radio .radio-input-control::before{
  transform:scale(1);
}

.label-radio{
  margin-left:calc(var(--radio-size) + 1.6rem);
  -webkit-user-select:none;
          user-select:none;
  cursor:pointer;
}
.label-radio:hover .radio-input-control{
  border-color:var(--border-color-hover);
}
.label-radio:active .radio-input-control{
  border-color:var(--border-color-focus);
}
.label-radio a{
  display:inline;
}

.radio-input-control{
  position:absolute;
  top:50%;
  left:0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:var(--radio-size);
  height:var(--radio-size);
  border:1px solid var(--border-color);
  border-radius:50%;
  background-color:var(--bg-color);
  transform:translateY(-50%);
  transition:border-color var(--transition-medium-cubic);
}
.radio-input-control::before{
  content:"";
  width:var(--check-size);
  height:var(--check-size);
  border-radius:50%;
  background-color:var(--check-color);
  transform:scale(0);
}

.custom-field{
  min-height:var(--input-height);
}
.custom-field--no-height{
  min-height:initial;
}
.custom-field--top-delimiter{
  padding-top:3rem;
  margin-top:1.8rem;
  border-top:2px solid var(--color-dark-3);
}
.custom-field:has(.pay-radios) > .h2{
  margin-bottom:2rem;
}

.password-toggler{
  --icon-size:2.4rem;
  position:absolute;
  top:calc(var(--input-height) / 2 - var(--icon-size) / 2);
  right:1.8rem;
  width:var(--icon-size);
  height:var(--icon-size);
  border:none;
  -webkit-mask-image:url(../svg/ui/eye-hide.svg);
          mask-image:url(../svg/ui/eye-hide.svg);
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  background-color:var(--color-grey-1);
  transition:background-color var(--transition-medium-cubic);
}
.password-toggler:hover, .password-toggler:focus-visible{
  background-color:var(--color-white);
}
.password-toggler + .input-password{
  padding-right:5rem;
}
.password-toggler.is-active{
  -webkit-mask-image:url(../svg/ui/eye-show.svg);
          mask-image:url(../svg/ui/eye-show.svg);
}
.code-input-fieldset{
  display:flex;
  gap:0.8rem;
  width:100%;
  max-width:28rem;
  border:none;
}

.code-input{
  --input-height:4rem;
  --border-radius:0.8rem;
  width:4rem;
  padding:0.2rem;
  text-align:center;
}

.top-up-promocode{
  padding-right:11.6rem;
}

.top-up-promocode--success{
  border-color:var(--color-green) !important;
  background-color:var(--color-green-2) !important;
}
.top-up-promocode--success ~ .promocode-button{
  display:none;
}
.top-up-promocode--success ~ .icon{
  color:var(--color-white) !important;
}

.top-up-promocode--error{
  border-color:var(--color-red-1) !important;
  background-color:var(--color-red-3) !important;
}
.top-up-promocode--error ~ .icon{
  color:var(--color-white) !important;
}
.top-up-promocode--error ~ .promocode-status-text{
  color:var(--color-red-1) !important;
}

.promocode-button{
  --button-height:2.8rem;
  position:absolute;
  top:calc(var(--input-height) / 2 - var(--button-height) / 2);
  right:2rem;
}

.promocode-status-text{
  display:block;
  width:100%;
  margin-top:1rem;
  font-size:1.2rem;
  line-height:133%;
  font-weight:400;
  color:var(--color-green);
}

.form__submit.button--primary{
  justify-content:space-between;
  text-align:left;
}

.submit-button-info{
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:1rem;
}

.submit-button-total{
  display:flex;
  align-items:center;
  column-gap:1rem;
}
.submit-button-total s{
  font-size:1.2rem;
  color:rgba(255, 255, 255, 0.5);
}
.submit-button-total .icon{
  font-size:2.4rem;
}

.submit-button-total__price-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  column-gap:1rem;
  line-height:2.4rem;
}
.pay-radios{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.pay-radio-wrapper{
  position:relative;
  width:100%;
}
.pay-radio-wrapper .input-radio:checked + .pay-card{
  border-color:var(--color-blue-1);
  background-color:var(--color-blue-2);
}
.pay-radio-wrapper .input-radio:checked + .pay-card::after{
  background-image:url(../svg/ui/check-circle-active.svg);
}
.pay-radio-wrapper .input-radio:not(:checked) + .pay-card .pay-card__icon path[fill]{
  fill:#828998 !important;
}
.pay-radio-wrapper .input-radio:not(:checked) + .pay-card .pay-card__icon path:not([fill]){
  stroke:#828998 !important;
}

.pay-card{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:7.6rem;
  height:100%;
  padding:1.6rem 1.8rem;
  border:2px solid var(--color-dark-3);
  border-radius:1.6rem;
  font-size:1.6rem;
  line-height:150%;
  background-color:var(--color-dark-3);
  transition:background-color var(--transition-medium-cubic), border-color var(--transition-medium-cubic);
  cursor:pointer;
}
.pay-card:hover, .pay-card:focus-visible{
  background-color:var(--color-blue-2);
}
.pay-card::after{
  content:"";
  width:3.2rem;
  height:3.2rem;
  margin-left:auto;
  background-image:url(../svg/ui/check-circle.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.pay-card__icon{
  display:flex;
  justify-content:center;
  align-items:center;
  width:3.2rem;
  height:3.2rem;
}
.pay-card__icon .icon{
  font-size:3.2rem;
}

.pay-card__name--deposit{
  display:flex;
  flex-direction:column;
  gap:0.1rem;
  margin-bottom:-0.1rem;
}

.pay-card__name-caption{
  font-size:1.4rem;
  line-height:2rem;
  font-weight:500;
  color:var(--color-grey-1);
}

.pay-card__name-value{
  font-size:1.6rem;
  line-height:2rem;
  font-weight:700;
}

.payment-button{
  justify-content:space-between;
  gap:3rem;
  width:100%;
  margin-top:2rem;
  text-align:left;
}
.payment-button.is-loading{
  justify-content:center;
  gap:1rem;
  text-align:center;
  pointer-events:none;
}
.payment-button.is-loading .submit-button-info,
.payment-button.is-loading .submit-button-total,
.payment-button.is-loading .icon:not(.button-spinner){
  display:none;
}
.payment-button.is-loading .button-alt-text{
  display:initial;
}
.payment-button.is-loading .button-spinner{
  display:flex;
  animation:spin 1s linear infinite;
}
.payment-button .button-spinner,
.payment-button .button-alt-text{
  display:none;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}
.account-form{
  --input-padding:0 2rem;
}
.account-form .form__field{
  gap:1rem;
}
.account-form .text-input-wrapper:has(.text-field__icon) .form__text-input{
  padding-left:5.3rem;
}

.operator-form-actions{
  display:flex;
  flex-direction:column;
  gap:2rem;
  margin-top:1rem;
}

.operator-form-actions__row{
  display:flex;
  flex-wrap:wrap;
  column-gap:3rem;
  row-gap:2rem;
}

/*! Pop-ups & modal dialogs */
.dialog-container{
  justify-content:center;
  align-items:center;
  min-width:36rem;
  width:100%;
  max-width:100vw;
  height:100%;
  max-height:100vh;
  max-height:100dvh;
  border:none;
  background-color:transparent;
  color:var(--text-body-color);
  cursor:pointer;
}
.dialog-container[data-modal=false]{
  margin-top:10rem;
}

.dialog-container[open]{
  display:flex;
  animation:dialogSlideInUp 0.25s cubic-bezier(0.71, 1.7, 0.77, 1.24) forwards;
}

.dialog-container.close{
  animation:dialogSlideOutDown 0.25s ease backwards;
}

@keyframes dialogSlideInUp{
  from{
    opacity:0;
    transform:translate3d(0, 4rem, 0);
  }
  to{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }
}
@keyframes dialogSlideOutDown{
  from{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }
  to{
    opacity:0;
    transform:translate3d(0, 8rem, 0);
  }
}
.dialog-container[open]::backdrop{
  background-color:transparent;
}

@keyframes backdropFadeIn{
  from{
    background-color:transparent;
  }
  to{
    background-color:var(--color-overlay-bg);
  }
}
@keyframes backdropFadeOut{
  from{
    background-color:var(--color-overlay-bg);
  }
  to{
    background-color:transparent;
  }
}
.dialog{
  --horizontal-margin:1.2rem;
  position:relative;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:2rem;
  min-width:33.6rem;
  width:calc(100% - var(--horizontal-margin) * 2);
  max-width:63rem;
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content;
  padding:2rem;
  border-radius:2rem;
  margin:auto;
  background-color:var(--color-dark-2);
  box-shadow:var(--shadow-dialog);
  cursor:initial;
}

.dialog-container--lg .dialog{
  max-width:70.9rem;
}

.dialog-header{
  padding-bottom:1.8rem;
  border-bottom:2px solid var(--color-dark-3);
}
.dialog-header .h2{
  padding-right:5rem;
  margin-bottom:1.9rem;
}
.dialog-header.warning-header{
  border-bottom:none;
  padding-bottom:0;
}
.dialog-header.warning-header .h2{
  padding-bottom:0;
  margin-bottom:0;
  font-size:2rem;
  line-height:120%;
}

.dialog__close-button{
  position:absolute;
  top:2.5rem;
  right:2.2rem;
}

.dialog-content{
  padding-top:0.1rem;
}
.dialog-content .h2{
  margin-bottom:2rem;
}
.dialog-content .ol{
  font-weight:400;
}
.dialog-content .ol li{
  position:relative;
  padding-left:2.4rem;
}
.dialog-content .ol li::before{
  position:absolute;
  top:0.2rem;
  left:0.6rem;
}
.dialog-content .ol:last-child{
  margin-bottom:0;
}
.dialog-content .ol-list{
  gap:1rem;
  line-height:171%;
  font-weight:500;
}
.dialog-content .hr{
  height:0.2rem;
  margin-top:2rem;
  margin-bottom:1.8rem;
}
.dialog-content .help{
  font-size:1.4rem;
  line-height:143%;
}
.dialog-content .payment-button{
  margin-top:0;
}

.dialog-cover{
  overflow:hidden;
  border-radius:1.6rem;
}
.dialog-cover img{
  object-fit:contain;
}

.dialog-warning__button{
  width:100%;
  min-height:4.4rem;
  padding:0.8rem 2.2rem;
  margin-top:2rem;
}
.dialog-warning__button::before{
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg, rgb(46, 213, 255) 0%, rgba(46, 213, 255, 0) 55%);
}
.dialog-warning__button::after{
  top:0.1rem;
  left:0.1rem;
  width:calc(100% - 0.2rem);
  height:calc(100% - 0.4rem);
}
.dialog-warning__button.dialog__close-button{
  position:relative;
  top:unset;
  right:unset;
}
dialog[data-name=guide][data-payment-status=success] .dialog-header-success{
  opacity:1;
}
dialog[data-name=guide][data-payment-status=success] .dialog-content-success .dialog-content-wrapper{
  opacity:1;
  transform:scale(1);
}
dialog[data-name=guide][data-payment-status=success] .dialog-header-pending,
dialog[data-name=guide][data-payment-status=success] .dialog-header-error,
dialog[data-name=guide][data-payment-status=success] .dialog-content-pending,
dialog[data-name=guide][data-payment-status=success] .dialog-content-error{
  display:none;
}
dialog[data-name=guide][data-payment-status=pending] .dialog-header-pending,
dialog[data-name=guide][data-payment-status=pending] .dialog-content-pending{
  display:block;
}
dialog[data-name=guide][data-payment-status=pending] .dialog-header-success,
dialog[data-name=guide][data-payment-status=pending] .dialog-header-error{
  max-height:0;
}
dialog[data-name=guide][data-payment-status=pending] .dialog-content-success{
  max-height:0;
}
dialog[data-name=guide][data-payment-status=error] .dialog-header{
  padding-bottom:0;
  border:none;
  margin-bottom:-2rem;
}
dialog[data-name=guide][data-payment-status=error] .dialog-header-error{
  opacity:1;
}
dialog[data-name=guide][data-payment-status=error] .dialog-content-error{
  display:block;
}
dialog[data-name=guide][data-payment-status=error] .dialog-header-pending,
dialog[data-name=guide][data-payment-status=error] .dialog-header-success,
dialog[data-name=guide][data-payment-status=error] .dialog-content-pending,
dialog[data-name=guide][data-payment-status=error] .dialog-content-success{
  display:none;
}

.dialog-header-success,
.dialog-header-error{
  overflow:hidden;
  opacity:0;
  transition-property:opacity;
  transition-duration:1s;
}

.dialog-content-success{
  overflow:hidden;
  max-height:40rem;
  transition-property:max-height;
  transition-timing-function:linear;
  transition-duration:0.3s;
}
.dialog-content-success .dialog-content-wrapper{
  opacity:0;
  transform:scale(0);
  transform-origin:top center;
  transition-property:opacity, transform;
  transition-duration:0.4s;
}

.dialog-content-pending{
  position:relative;
  width:100%;
  height:16rem;
}
.dialog-content-pending svg{
  position:absolute;
  width:10rem;
  height:10rem;
  inset:0;
  margin:auto;
}
.dialog-content-pending svg path{
  animation:pending-spinner 0.8s linear infinite;
}
.dialog-content-pending svg path:nth-child(1){
  opacity:1;
  animation-delay:-0.7s;
}
.dialog-content-pending svg path:nth-child(2){
  opacity:0.9;
  animation-delay:-0.6s;
}
.dialog-content-pending svg path:nth-child(3){
  opacity:0.8;
  animation-delay:-0.5s;
}
.dialog-content-pending svg path:nth-child(4){
  opacity:0.7;
  animation-delay:-0.4s;
}
.dialog-content-pending svg path:nth-child(5){
  opacity:0.6;
  animation-delay:-0.3s;
}
.dialog-content-pending svg path:nth-child(6){
  opacity:0.5;
  animation-delay:-0.2s;
}
.dialog-content-pending svg path:nth-child(7){
  opacity:0.4;
  animation-delay:-0.1s;
}
.dialog-content-pending svg path:nth-child(8){
  opacity:0.3;
  animation-delay:0s;
}

@keyframes pending-spinner{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
.dialog-alert{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  padding-bottom:2.8rem;
  border-bottom:2px solid var(--color-dark-3);
  text-align:center;
}

.dialog-alert__text{
  font-size:2rem;
  line-height:2.4rem;
  font-weight:800;
  text-transform:uppercase;
  color:var(--color-red-1);
}

.dialog-alert__sub{
  line-height:2rem;
  font-weight:400;
}
.form.dialog-form{
  gap:1rem;
}
.form.dialog-form .submit-field{
  padding-top:3rem;
  border-top:2px solid var(--color-dark-3);
  margin-top:1.8rem;
}
.form.dialog-form .form__submit.button--primary{
  justify-content:center;
  text-align:center;
}

.dialog-table-wrapper{
  overflow:auto;
  width:100%;
  max-height:46.5rem;
  margin-top:3rem;
}
.dialog-table-wrapper .table{
  min-width:50rem;
  width:100%;
}
.dialog-table-wrapper--scatter{
  margin-top:0.1rem;
  margin-bottom:2rem;
}
.dialog-table-wrapper--scatter .table__td{
  padding-top:3rem;
}
.dialog-table-wrapper--scatter .table__td:not(:first-child)::before{
  top:3rem;
  height:calc(100% - 3.9rem);
}
.dialog-info{
  display:flex;
  flex-direction:column;
  gap:1.8rem;
  border-top:2px solid var(--color-dark-3);
  padding-top:3rem;
}

.dialog-info__text{
  font-size:1.6rem;
  line-height:2rem;
  font-weight:400;
}

.dialog-info__actions{
  display:flex;
  align-items:center;
  gap:2rem;
}
.dialog-info__actions .button{
  flex:1 0 0;
  min-width:0;
}
.dialog-info__actions .button.dialog__close-button{
  position:static;
}
dialog[data-name=warning] .warning{
  margin-top:-0.1rem;
}

/*! Tabs component */
.tabs-navbar{
  margin-top:-0.1rem;
}
.tabs-navbar .nav__list{
  flex-direction:row;
  flex-wrap:wrap;
  gap:0.6rem;
  padding:0.5rem;
  border:1px solid var(--color-dark-3);
  border-radius:1.6rem;
}
.tabs-navbar .nav__item{
  flex:1 0 0;
  min-width:28rem;
  width:100%;
}

.tab{
  justify-content:center;
  width:100%;
  min-height:4.8rem;
  padding:0.8rem 1.6rem;
  border-radius:1.2rem;
  font-size:1.4rem;
  line-height:100%;
  text-align:center;
  background-color:var(--color-dark-3);
  color:var(--color-grey-1);
}
.tab:hover, .tab:focus-visible, .tab.is-active{
  background-color:var(--color-blue-5);
}
.tab:active, .tab.is-active{
  color:var(--color-white);
}

.tab-panels-container{
  margin-top:3rem;
  margin-bottom:-0.2rem;
}

.tab-panel{
  visibility:hidden;
  overflow:hidden;
  height:0;
  opacity:0;
  transition:opacity var(--transition-cubic-bezier);
}

.tab-panel.is-visible{
  visibility:visible;
  height:inherit;
  opacity:1;
}

.tab-panel--table{
  overflow-x:auto;
}

/*! Accordion component */
.accordion{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.accordion-item{
  border-radius:1.6rem;
  font-size:1.4rem;
  line-height:143%;
  background-color:var(--color-dark-3);
}

.accordion-button{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:2rem 4.4rem 2rem 2rem;
  cursor:pointer;
}
.accordion-button:hover .icon, .accordion-button:focus-visible .icon{
  color:var(--color-white);
}
.accordion-button .icon{
  position:absolute;
  top:50%;
  right:2rem;
  color:var(--color-grey-1);
  transform:translateY(-50%);
  transition:opacity var(--transition-medium-cubic), color var(--transition-medium-cubic);
}
.accordion-button .accordion-minus{
  opacity:0;
}

.accordion-button[aria-expanded=true]::after{
  transform:rotate(180deg);
}
.accordion-button[aria-expanded=true] .accordion-plus{
  opacity:0;
}
.accordion-button[aria-expanded=true] .accordion-minus{
  opacity:1;
}

.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  padding:0 2rem;
  font-size:1.2rem;
  line-height:167%;
  transition:grid-template-rows 0.2s ease-out;
}

.accordion-button[aria-expanded=true] + .accordion-panel{
  grid-template-rows:1fr;
}

.accordion-content{
  position:relative;
  overflow:hidden;
}
.accordion-content::before{
  content:"";
  display:block;
  width:100%;
  height:2rem;
  border-top:1px solid rgba(255, 255, 255, 0.1);
}
.accordion-content::after{
  content:"";
  display:block;
  width:100%;
  height:2rem;
}

.accordion__show-more{
  display:flex;
  width:100%;
  margin-top:1rem;
}
.panel-accordion{
  border-radius:1.6rem;
  background-color:var(--color-dark-2);
}
.panel-accordion .accordion-item{
  padding:0 1rem;
  background-color:transparent;
}
.panel-accordion .accordion-button{
  padding:2rem;
  font-size:2rem;
  line-height:2.4rem;
  font-weight:800;
  text-transform:uppercase;
}
.panel-accordion .accordion-button[aria-expanded=true] .icon{
  transform:rotate(0deg);
}
.panel-accordion .accordion-button .icon{
  position:static;
  font-size:2.4rem;
  color:var(--color-white);
  transform:rotate(180deg);
}
.panel-accordion .accordion-content::before{
  height:2.1rem;
  border-color:var(--color-dark-3);
}
.panel-accordion .accordion-content::after{
  height:1.9rem;
}
.just-validate-error-label{
  margin-top:1rem;
  font-size:1.2rem;
  line-height:133%;
  font-weight:400;
  color:var(--color-red-1);
}

.just-validate-error-field{
  border-color:var(--color-red-1);
  background-color:var(--color-red-3);
}
.just-validate-error-field:hover, .just-validate-error-field:focus-visible, .just-validate-error-field:active{
  border-color:var(--color-red-1);
  background-color:var(--color-red-3);
}
.just-validate-error-field:hover .icon:not(.tooltip-trigger), .just-validate-error-field:focus-visible .icon:not(.tooltip-trigger), .just-validate-error-field:active .icon:not(.tooltip-trigger){
  color:var(--color-white);
}
.just-validate-error-field ~ .icon, .just-validate-error-field ~ .tooltip-label{
  color:var(--color-white);
}

.input-checkbox.just-validate-error-field + .form__label{
  color:var(--color-red);
}
.input-checkbox.just-validate-error-field + .form__label::before{
  border-color:var(--color-red);
}
.input-checkbox.just-validate-error-field ~ .just-validate-error-label{
  display:none;
}

.radio-fieldset--required:has(.input-radio.just-validate-error-field) .product-card{
  border-color:var(--color-red-1);
  background-color:var(--color-red-3);
}
.radio-fieldset--required:has(.input-radio.just-validate-error-field) .just-validate-error-label{
  align-self:center;
  margin-top:0;
}

.just-validate-success-field:not([type=email]){
  border-color:var(--color-green);
  background-color:var(--color-green-2);
}
.just-validate-success-field:not([type=email]):hover, .just-validate-success-field:not([type=email]):focus-visible, .just-validate-success-field:not([type=email]):active{
  border-color:var(--color-green);
  background-color:var(--color-green-2);
}
.just-validate-success-field:not([type=email]) ~ .icon, .just-validate-success-field:not([type=email]) ~ .tooltip-label{
  color:var(--color-white);
}

.code-input-fieldset.just-validate-error-field{
  background-color:transparent;
}
.code-input-fieldset.just-validate-error-field .code-input{
  border-color:var(--color-red-1);
  background-color:var(--color-red-3);
}
.code-input-fieldset.just-validate-success-field{
  background-color:transparent;
}
.code-input-fieldset.just-validate-success-field .code-input{
  border-color:var(--color-green);
  background-color:var(--color-green-2);
}
.breadcrumb{
  display:none;
  margin-bottom:3rem;
  font-size:1.4rem;
  line-height:2rem;
  color:var(--color-grey-1);
}

.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:0.4rem;
}

.breadcrumb__item{
  display:flex;
  cursor:text;
}
.breadcrumb__item:not(:last-child){
  padding-right:1.9rem;
  margin-right:2rem;
  border-right:1px solid var(--color-dark-3);
}
.breadcrumb__item:last-child::after{
  display:none;
}

.breadcrumb__link{
  display:inline-flex;
  line-height:2rem;
  text-decoration-color:transparent;
  color:inherit;
}
.breadcrumb__link:hover, .breadcrumb__link:focus-visible{
  color:var(--color-red);
}
.breadcrumb__link:active{
  color:inherit;
}
.breadcrumb__link--current-page{
  color:var(--color-grey-3);
  pointer-events:none;
}
.alert,
.warning{
  display:flex;
  align-items:center;
  gap:2rem;
  min-height:8rem;
  padding:0.9rem 1.9rem;
  border:1px solid var(--color-dark-3);
  border-radius:1.6rem;
  background:var(--color-dark-3);
  color:var(--color-grey-1);
}
.alert .icon,
.warning .icon{
  font-size:2.4rem;
}

.warning{
  align-items:flex-start;
  gap:1rem;
  padding:1.9rem;
  border-color:var(--color-orange);
  background-color:var(--color-orange-2);
  color:var(--color-white);
}
.warning .icon{
  color:var(--color-orange);
}
.account-alerts{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.account-alert{
  display:flex;
  align-items:center;
  gap:2rem;
  padding:2rem;
  border-radius:1.6rem;
  font-size:1.6rem;
  line-height:2rem;
  font-weight:500;
  background-color:var(--color-green-2);
  color:var(--color-white);
}
.account-alert--warning{
  background-color:var(--color-orange-2);
}

.account-alert__icon{
  display:inline-flex;
  flex-shrink:0;
}
.account-alert__icon .icon{
  font-size:2.4rem;
}
.games-search{
  --input-height:3.7rem;
  --input-padding:0 1rem 0 5.3rem;
  --border-radius:4rem;
  position:relative;
  order:1;
  width:100%;
  font-size:1.6rem;
  line-height:2rem;
  font-weight:500;
}
.games-search .form__field{
  position:relative;
}

.games-search__input{
  height:100%;
  letter-spacing:0.006em;
}

.games-search__button{
  position:absolute;
  top:0.5rem;
  left:2rem;
  width:2.5rem;
  height:2.4rem;
  padding:0;
  border:none;
  background:none;
  color:var(--color-grey-1);
}
.games-search__button:hover, .games-search__button:focus-visible{
  color:var(--color-white);
}
.games-search__button .icon{
  font-size:2.6rem;
}

.search-form-results{
  position:absolute;
  top:calc(100% + 1rem);
  z-index:10;
  display:flex;
  visibility:hidden;
  flex-direction:column;
  gap:1rem;
  width:100%;
  padding:2rem;
  border-radius:2rem;
  margin-left:50%;
  background-color:var(--color-dark-2);
  opacity:0;
  transform:translateX(-50%) translateY(2rem);
  transition:transform var(--transition-medium-cubic), opacity var(--transition-medium-cubic);
}
.search-form-results.is-active{
  visibility:visible;
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.search-form-result{
  position:relative;
}
.search-form-result:hover .search-form-result__link, .search-form-result:focus-visible .search-form-result__link{
  background-color:rgba(255, 255, 255, 0.1);
}

.search-form-result__link{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1rem 4rem 1rem 0.8rem;
  text-decoration:none;
  color:var(--color-white);
}
.search-form-result__link:active{
  color:var(--color-primary);
}
.search-form-result__link .icon{
  font-size:2.4rem;
  color:var(--color-white);
}

.search-form-result__icon{
  flex-shrink:0;
  width:2.4rem;
  height:2.4rem;
}

.search-form-result__cover{
  flex-shrink:0;
  width:4rem;
  height:4rem;
}
.search-form-result__cover img{
  border-radius:0.8rem;
}

.search-form-result__title{
  flex-grow:1;
  font-size:1.6rem;
  line-height:normal;
  font-weight:700;
}

.search-form-result__remove{
  position:absolute;
  top:50%;
  right:0.8rem;
  width:2.4rem;
  height:2.4rem;
  padding:0;
  border:none;
  background-color:transparent;
  color:var(--color-white);
  transform:translateY(-50%);
  transition:opacity var(--transition-medium-cubic);
}
.search-form-result__remove:hover, .search-form-result__remove:focus-visible{
  color:var(--color-primary);
}
.search-form-result__remove:active{
  opacity:0.6;
}
.search-form-result__remove .icon{
  font-size:2.4rem;
}

/*! Product filter */
.product-filter,
.message-type{
  display:flex;
  flex-wrap:wrap;
  row-gap:1.8rem;
}

.product-filter__button,
.message-type__button{
  position:relative;
  min-height:4.8rem;
  padding-bottom:1.5rem;
  border:none;
  border-bottom:2px solid var(--color-dark-3);
  font-size:1.6rem;
  line-height:2rem;
  font-weight:700;
  background-color:transparent;
  transition:color var(--transition-medium-cubic);
}
.product-filter__button:hover, .product-filter__button:focus-visible,
.message-type__button:hover,
.message-type__button:focus-visible{
  color:var(--color-blue-1);
}
.product-filter__button::after,
.message-type__button::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  display:none;
  width:100%;
  height:0.6rem;
  border-radius:0.8rem 0.8rem 0 0;
  background-color:var(--color-primary);
}
.product-filter__button:first-child .product-filter__button-text::before,
.message-type__button:first-child .product-filter__button-text::before{
  display:none;
}
.product-filter__button.is-active,
.message-type__button.is-active{
  color:var(--color-primary);
}
.product-filter__button.is-active::after,
.message-type__button.is-active::after{
  display:block;
}

.product-filter__button-text,
.message-type__button-text{
  position:relative;
  display:inline-block;
  padding:0.5rem 2rem;
}
.product-filter__button-text::before,
.message-type__button-text::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:100%;
  background-color:var(--color-dark-3);
}
.product-fieldset:not(:has(.product-field:not(.is-hidden))) .form__caption{
  display:flex;
}

.form__caption{
  display:none;
  justify-content:center;
  min-height:7.6rem;
}

/*! Input dropdown */
.input-dropdown{
  position:absolute;
  top:calc(100% + 0.5rem);
  left:0;
  z-index:2;
  display:flex;
  visibility:hidden;
  overflow:hidden;
  flex-direction:column;
  width:100%;
  border-radius:1.6rem;
  color:var(--color-white);
  opacity:0;
  transform:translateY(1rem);
  transition:opacity var(--transition-medium-cubic), transform var(--transition-medium-cubic);
}
.input-dropdown.is-visible{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}

.input-dropdown__item{
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  padding:2rem;
  border:none;
  font-weight:500;
  background-color:var(--color-blue-2);
  color:var(--color-white);
  transition:background-color var(--transition-medium-cubic);
}
.input-dropdown__item:hover, .input-dropdown__item:focus-visible{
  background-color:var(--color-primary);
}
.input-dropdown__item:hover .icon, .input-dropdown__item:focus-visible .icon{
  color:var(--color-white);
}
.input-dropdown__item .icon{
  color:var(--color-grey-1);
}

.input-dropdown__text{
  text-align:left;
  word-break:break-all;
}

/*! Quantity input */
.qty-input{
  --height:4rem;
  z-index:1;
  display:flex;
  flex-shrink:0;
  align-items:center;
}

.qty-input__label{
  display:flex;
  flex-grow:1;
  justify-content:center;
  align-items:center;
  width:4rem;
  height:var(--height);
  border-radius:0.8rem;
  font-size:1.6rem;
  line-height:2rem;
  font-weight:500;
  background-color:var(--color-grey-2);
  color:var(--color-white);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  box-shadow:0 0 17px 0 rgba(0, 0, 0, 0.45);
  -webkit-user-select:none;
          user-select:none;
}

.qty-input__minus,
.qty-input__plus{
  position:relative;
  display:flex;
  flex-shrink:0;
  justify-content:flex-start;
  align-items:center;
  width:2.4rem;
  height:var(--height);
  border:none;
  background-color:transparent;
  color:var(--color-white);
  transition:color var(--transition-medium-cubic), opacity var(--transition-medium-cubic);
  -webkit-user-select:none;
          user-select:none;
  cursor:pointer;
}
.qty-input__minus:hover, .qty-input__minus:focus-visible,
.qty-input__plus:hover,
.qty-input__plus:focus-visible{
  color:var(--color-primary);
}
.qty-input__minus:active,
.qty-input__plus:active{
  opacity:0.6;
}
.qty-input__minus .icon,
.qty-input__plus .icon{
  font-size:1.2rem;
}

.qty-input__plus{
  justify-content:flex-end;
}

/*! Link */
.link{
  --link-color:var(--color-primary);
  --link-color-hover:var(--color-white);
  --link-color-active:var(--color-grey-1);
  display:inline-flex;
  align-items:center;
  gap:1rem;
  text-decoration:none;
  color:var(--link-color);
  transition-property:transform, opacity, var(--transition-props-color);
  transition-timing-function:var(--transition-func-cubic);
  transition-duration:var(--transition-duration-medium);
}
.link:hover, .link:focus-visible{
  color:var(--link-color-hover);
}
.link:active{
  color:var(--link-color-active);
}
.link .icon{
  font-size:2.4rem;
}

span.link{
  --link-color-hover:var(--link-color);
  --link-color-active:var(--link-color);
}

.link--grey{
  --link-color:var(--color-grey-1);
  --link-color-hover:var(--color-white);
  --link-color-active:var(--color-grey-1);
}

.link--filter{
  --link-color:var(--color-grey-1);
  --link-color-hover:var(--color-primary);
  --link-color-active:var(--color-primary);
}

.link--white{
  --link-color:var(--color-white);
  --link-color-hover:var(--color-primary);
  --link-color-active:var(--color-blue-1);
}

.link--red{
  --link-color:var(--color-red-1);
  --link-color-hover:var(--color-primary);
  --link-color-active:var(--color-blue-1);
}

.link--underline{
  text-decoration:underline;
}

/*! Main navbar component */
.navbar{
  display:none;
}

.navbar-toggler{
  display:none;
}

.navbar__header{
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:100%;
  padding:2rem 2rem 1.9rem;
  border-bottom:1px solid var(--color-dark-3);
}

.navbar__username{
  font-size:1.4rem;
  line-height:1.6rem;
  font-weight:600;
}
.navbar__username::first-letter{
  text-transform:capitalize;
}

.navbar__info{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  font-size:1.4rem;
  line-height:2rem;
  font-weight:400;
}
.navbar__info:has(.navbar__deposit)::after{
  content:"·";
  display:inline-block;
  align-self:flex-start;
  width:0.5rem;
  font-size:1.6rem;
  line-height:1.7rem;
  text-align:center;
}

.navbar__deposit{
  display:inline-flex;
  align-items:center;
  order:1;
}
.navbar__deposit > span{
  margin-left:1.1rem;
}
/*! Dropdown component */
.dropdown{
  --dropdown-offset:18px;
  position:relative;
  display:flex;
}
.dropdown[data-dropdown-hover]{
  padding-bottom:var(--dropdown-offset);
  margin-bottom:calc(var(--dropdown-offset) * -1);
}

.dropdown-container{
  --scrollbar-padding:1rem;
  position:absolute;
  top:0;
  right:0;
  z-index:10;
  display:none;
  gap:1.6rem;
  min-width:30rem;
  width:100%;
  max-width:46rem;
  padding:2rem calc(2rem - var(--scrollbar-padding)) 2rem 2rem;
  border-radius:0.8rem;
  background-color:var(--color-dark-2);
  box-shadow:var(--shadow-dialog);
}
.dropdown-container.is-visible{
  display:flex;
  animation:dropdown-container-appear 0.2s;
}

@keyframes dropdown-container-appear{
  from{
    transform:translateY(1rem);
  }
}
.dropdown-content{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  width:100%;
  max-height:46rem;
  padding-right:var(--scrollbar-padding);
}
.dropdown-button--select[aria-expanded=true] .dropdown-button__arrow{
  transform:rotate(180deg);
}

.dropdown-button__arrow{
  margin-left:0.5rem;
  transition:transform var(--transition-medium-cubic);
}

/*! Notifications */
.notifications{
  display:flex;
  flex-direction:column;
  gap:1.7rem;
}

.notification{
  --link-color:var(--color-grey-1);
  --link-color-hover:var(--color-white);
  --link-color-active:var(--color-grey-1);
  align-items:center;
  gap:2rem;
  font-size:1.2rem;
  line-height:1.4rem;
  font-weight:400;
}
.notification:not(:first-child){
  padding-top:1.9rem;
  border-top:1px solid var(--color-dark-3);
}

.notification__empty{
  text-align:center;
}

.notification__icon{
  flex-shrink:0;
  margin-top:-0.1rem;
}

.notification__content{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  min-width:0;
}

.notification__title{
  margin-top:-0.2rem;
  font-size:1.4rem;
  line-height:1;
  font-weight:500;
  color:var(--color-white);
}

.notification__text{
  margin-top:-0.2rem;
}

.notification__datetime{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  margin-top:-0.3rem;
  color:var(--color-grey-1);
}
.custom-scroll,
.chat-container,
.dropdown-content,
.table-wrapper{
  --track-width:0.5rem;
  --track-vertical-offset:1rem;
  --track-color:transparent;
  --thumb-width:0.5rem;
  --thumb-color:var(--color-grey-2);
  --thumb-hover-color:var(--color-grey-1);
}
.custom-scroll::-webkit-scrollbar,
.chat-container::-webkit-scrollbar,
.dropdown-content::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar{
  width:var(--track-width);
}
.custom-scroll::-webkit-scrollbar-track,
.chat-container::-webkit-scrollbar-track,
.dropdown-content::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track{
  border-radius:1rem;
  margin-top:var(--track-vertical-offset);
  margin-bottom:var(--track-vertical-offset);
  background-color:var(--track-color);
}
.custom-scroll::-webkit-scrollbar-thumb,
.chat-container::-webkit-scrollbar-thumb,
.dropdown-content::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb{
  width:var(--thumb-width);
  border-radius:1rem;
  background-color:var(--thumb-color);
}
.custom-scroll::-webkit-scrollbar-thumb:hover,
.chat-container::-webkit-scrollbar-thumb:hover,
.dropdown-content::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover{
  background-color:var(--thumb-hover-color);
}
@-moz-document url-prefix(){
  .custom-scroll,
  .chat-container,
  .dropdown-content{
    scrollbar-width:thin;
    scrollbar-color:var(--thumb-color) var(--track-color);
  }
}
@supports (-webkit-touch-callout: none){
  .chat-wrapper::before, .chat-wrapper::after{
    display:none !important;
  }
  .chat-container{
    overscroll-behavior:contain;
    border-radius:1.6rem !important;
  }
  .chat-container::-webkit-scrollbar{
    width:0 !important;
  }
  .chat-container::-webkit-scrollbar-track{
    width:0 !important;
  }
  .chat-container::-webkit-scrollbar-thumb{
    width:0 !important;
  }
  .chat{
    padding:3rem !important;
    margin-right:0 !important;
  }
}
/*! Card table */
.card-list-wrapper{
  display:flex;
  flex-grow:1;
  flex-direction:column;
  gap:3rem;
  width:100%;
}
.card-list-wrapper .pagination-container{
  display:none;
  margin-top:auto;
}

.card-list{
  display:flex;
  flex-direction:column;
}
.card-list--deposit .card__datetime::before{
  display:none;
}
.card-list--deposit .card__status{
  grid-row:1;
}
.card-list--order-items .card__description{
  color:var(--color-white);
}
.card-list--operators .card__operator-name{
  font-weight:700;
}

.card-list-header{
  display:none;
  align-items:center;
  padding-left:1rem;
  text-align:left;
}

.card-list-header__caption{
  padding-right:2rem;
  padding-bottom:1.9rem;
  padding-left:2rem;
  border-bottom:1px solid var(--color-dark-3);
  font-size:1.6rem;
  line-height:2rem;
  font-weight:600;
}
.card-list-header__caption:first-child{
  padding-right:2rem;
  padding-left:1rem;
}
.card-list-header__caption:last-child{
  padding-right:0;
}
.card-list-header__caption--id{
  width:16.2rem;
}
.card-list--operator .card-list-header__caption--id{
  min-width:12rem;
  width:12rem;
}
.card-list-header__caption--datetime{
  width:15rem;
}
.card-list-header__caption--amount{
  width:16rem;
  text-align:center;
}
.card-list-header__caption--text{
  width:38.5%;
}
.card-list-header__caption--operator{
  min-width:20rem;
  width:25.7%;
}
.card-list-header__caption.is-hidden{
  display:none;
}

.card-list-header__caption-container{
  display:inline-flex;
  align-items:center;
  gap:1.1rem;
}

.card-list-header__caption-control{
  position:relative;
  top:-0.1rem;
  display:inline-block;
  flex-shrink:0;
}
.card-list-header__caption-control .dropdown-button{
  --link-color:var(--color-white);
  --link-color-hover:var(--color-primary);
  --link-color-active:var(--color-grey-1);
}
.card-list-header__caption-control .dropdown-button .icon{
  font-size:2rem;
}

.panel.card,
.inner-card-row{
  display:grid;
  grid-template-columns:53% 47%;
  column-gap:0;
  row-gap:1rem;
  width:100%;
  padding:2rem;
  font-size:1.4rem;
  line-height:2rem;
  font-weight:400;
}
.panel.card > *:not(.card__status),
.inner-card-row > *:not(.card__status){
  grid-column:1;
}
.card > *.is-hidden{
  display:none;
}

.inner-card-row{
  grid-column:span 2 !important;
}
.inner-card-row .card__chat::before{
  display:none;
}

.card__email a{
  text-decoration:none;
}

.card__category{
  font-weight:700;
}

.card__total{
  font-weight:700;
}

.card__status{
  grid-column:2;
  grid-row:1/3;
  font-weight:700;
  text-align:right;
  color:var(--color-green);
}
.card__status--pending{
  color:var(--color-orange);
}
.card__status--error{
  color:var(--color-red-1);
}
.card__status--info{
  color:var(--color-blue-1);
}

.card__status--item{
  font-size:1.2rem;
}

.card__amount{
  font-weight:700;
}
.card__amount:has(.card__discount) .card__amount-value{
  margin-bottom:-0.1rem;
}

.card__amount-value{
  display:block;
}

.card__discount{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:1rem;
  row-gap:0.4rem;
  font-size:1.1rem;
  line-height:2rem;
}
.card__discount:has(.card__discount-value)::after{
  font-size:1.1rem;
  line-height:2rem;
  color:var(--color-grey-1);
}

.card__original-value{
  text-decoration:line-through;
  color:var(--color-grey-1);
}

.card__discount-value{
  display:inline-flex;
  align-items:center;
  order:1;
  gap:0.4rem;
}

.card__description{
  grid-column:span 2 !important;
}

.card__description-wrapper{
  display:inline-flex;
  flex-wrap:wrap;
  gap:1.2rem;
}
.card__description-wrapper:has(.card__description-item:not(:only-child))::after{
  content:"·";
  display:inline-flex;
  align-self:flex-start;
  line-height:1.9rem;
}

.card__description-item{
  order:1;
}

.card__qty{
  font-weight:700;
}
.card__qty::before{
  content:"Кол-во: ";
  font-weight:400;
}

.card__datetime{
  color:var(--color-grey-1);
}
.card__datetime span{
  display:block;
}
.card__datetime span:last-child{
  order:1;
}
.card__datetime::after{
  content:"";
  display:inline-flex;
  width:1px;
  height:100%;
  margin-right:-0.1rem;
  background-color:var(--color-dark-3);
}

.card__operator{
  font-weight:700;
}

.card__chat{
  grid-column:span 2 !important;
  order:1;
  padding-top:2rem;
  border-top:1px solid var(--color-dark-3);
  margin-top:-0.1rem;
}

.card__chat-link{
  width:100%;
}
.card__chat-link--new-message .icon{
  color:var(--color-green);
}
.card-list--bookmarks .card-list-header__caption--id{
  width:16.4rem;
}
.card-list--bookmarks .card-list-header__caption--category{
  width:28rem;
  padding-left:1.6rem;
}

.card:has(.card-bookmark__input:checked){
  --bg-offset:1rem;
}
.card:has(.card-bookmark__input:checked):first-child{
  --bg-offset:3rem;
}

.card__id-wrapper{
  display:inline-block;
  vertical-align:middle;
}

.card__operator-categories{
  grid-column:1/3 !important;
}

.card__operator-categories-list{
  display:flex;
  flex-wrap:wrap;
  column-gap:2rem;
  row-gap:1rem;
  color:var(--color-grey-1);
}

.card-bookmark{
  --color:var(--color-white);
  position:relative;
  display:inline-block;
  vertical-align:middle;
  margin-right:2rem;
  color:var(--color);
  transition:color var(--transition-medium-cubic);
  -webkit-user-select:none;
          user-select:none;
  cursor:pointer;
}
.card-bookmark:hover, .card-bookmark:focus-visible{
  --color:var(--color-primary);
}

.card-bookmark__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.card-bookmark__input:checked + .card-bookmark__icon{
  color:var(--color-green);
}

.card-bookmark__icon{
  display:block;
  width:2.4rem;
  height:2.4rem;
}
.card-bookmark__icon .icon{
  font-size:2.4rem;
}

.card-list:not(.card-list--bookmarks):has(.card-bookmark) .card-bookmark{
  margin-right:1rem;
}
.card-list:not(.card-list--bookmarks):has(.card-bookmark) .card-bookmark__icon{
  width:2rem;
  height:2rem;
}
.card-list:not(.card-list--bookmarks):has(.card-bookmark) .card-bookmark__icon .icon{
  font-size:2rem;
}

/*! Pagination */
.pagination-container{
  display:flex;
  justify-content:flex-end;
}

.pagination{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.pagination__truncate-box{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.pagination__item{
  --border-width:0.1rem;
  --border-radius:0.8rem;
  --border-color:transparent;
  --border-color-hover:transparent;
  --border-color-active:var(--color-primary);
  --bg-color:var(--color-dark-3);
  --bg-color-hover:var(--color-blue-5);
  --bg-color-active:var(--color-dark-3);
  --color:var(--color-white);
  --color-hover:var(--color-white);
  --color-active:var(--color-white);
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:3rem;
  height:3rem;
  padding:0 0.4rem;
  border:var(--border-width) solid var(--border-color);
  border-radius:var(--border-radius);
  font-size:1.6rem;
  line-height:2rem;
  font-weight:500;
  text-decoration:none;
  background-color:var(--bg-color);
  color:var(--color);
  transition-property:var(--transition-props-color);
  transition-timing-function:var(--transition-func-cubic);
  transition-duration:var(--transition-duration-medium);
}
.pagination__item:hover, .pagination__item:focus-visible{
  border-color:var(--border-color-hover);
  background-color:var(--bg-color-hover);
  color:var(--color-hover);
}
.pagination__item:active{
  background-color:var(--bg-color-active);
}
.pagination__item.is-active{
  border-color:var(--border-color-active);
  background-color:var(--bg-color-hover);
  color:var(--color-active);
  pointer-events:none;
}

.pagination__item--ellipsis{
  pointer-events:none;
}

.pagination__item--prev.is-disabled,
.pagination__item--next.is-disabled{
  --color:var(--color-grey-2);
  pointer-events:none;
}
.account-chat-wrapper{
  display:flex;
  flex-grow:1;
  flex-direction:column;
  gap:2rem;
  width:100%;
  padding:1.6rem;
  border-radius:1.6rem;
  background-color:var(--color-dark-2);
}

.chat-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  max-height:80vh;
  padding:1.8rem 0;
}
.chat-wrapper::before, .chat-wrapper::after{
  content:"";
  position:absolute;
  left:0;
  width:calc(100% - 1.8rem);
  height:2rem;
  background-color:var(--color-dark-3);
}
.chat-wrapper::before{
  top:0;
  border-top-right-radius:1.6rem;
  border-top-left-radius:1.6rem;
}
.chat-wrapper::after{
  bottom:0;
  border-bottom-right-radius:1.6rem;
  border-bottom-left-radius:1.6rem;
}

.chat-container{
  --track-width:0.8rem;
  --track-vertical-offset:-1.8rem;
  --track-color:var(--color-dark-3);
  --thumb-width:0.8rem;
  --thumb-color:var(--color-grey-2);
  --thumb-hover-color:var(--color-grey-1);
  display:flex;
  flex-direction:column-reverse;
  overflow-y:scroll;
  height:100%;
}

.chat{
  display:flex;
  flex-direction:column;
  gap:3rem;
  padding:1.2rem 2rem;
  margin-right:1rem;
  background-color:var(--color-dark-3);
}
.chat-row{
  display:flex;
  flex-direction:column;
}

.chat-message{
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:100%;
  max-width:50rem;
}
.chat-message--owner{
  align-self:flex-end;
}

.chat-message__header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:1rem;
  row-gap:0.5rem;
  font-size:1.6rem;
  line-height:2rem;
}

.chat-message__name{
  font-weight:600;
  color:var(--color-grey-1);
}
.chat-message__name--green{
  color:var(--color-green);
}
.chat-message__name--blue{
  color:var(--color-primary);
}

.chat-message__header-info{
  display:flex;
  align-items:center;
  gap:1rem;
}

.chat-message__banned{
  font-weight:600;
  color:var(--color-red-1);
}

.chat-message__type,
.chat-message__datetime{
  font-weight:400;
  color:var(--color-grey-1);
}

.chat-message__delivery-status{
  display:inline-flex;
  color:var(--color-green);
}

.chat-message__content{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.chat-message__text{
  font-size:1.4rem;
  line-height:2rem;
  font-weight:400;
  white-space:pre-line;
  word-break:break-word;
}

.chat-message__text--comment,
.chat-message__text--comment-to-admin{
  padding:1rem 2rem;
  border-radius:1.6rem;
  font-size:1.6rem;
  font-weight:500;
  background-color:var(--color-orange);
  color:var(--color-white);
}

.chat-message__text--comment-to-admin{
  background-color:var(--color-red-1);
}

.chat-message__file{
  display:flex;
  align-items:center;
  align-self:flex-start;
  gap:1rem;
  font-size:1.4rem;
  font-weight:400;
  text-decoration:underline;
  color:var(--color-primary);
}
.chat-message__file:hover, .chat-message__file:focus-visible{
  text-decoration:none;
}
.chat-message__file:hover .icon, .chat-message__file:focus-visible .icon{
  color:var(--color-primary);
}
.chat-message__file .icon{
  font-size:2rem;
  color:var(--color-blue-1);
}
.chat-events{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3rem;
}

.chat-event{
  --bg-color:var(--color-primary);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1rem;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  padding:1rem 2rem;
  border-radius:1rem;
  font-size:1.6rem;
  line-height:2rem;
  text-align:center;
  background-color:var(--bg-color);
  color:var(--color-white);
}
.chat-event--success{
  background-color:var(--color-green-2);
}

.chat-event__text{
  font-weight:600;
}

.chat-event__datetime{
  font-weight:400;
}

.chat-message-controls{
  display:flex;
  align-items:center;
  gap:0.8rem;
}
.chat-message-controls .icon{
  font-size:2rem;
}
.customer-chat-status{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:2rem;
  row-gap:1rem;
  line-height:2rem;
  color:var(--color-grey-1);
}

.customer-chat-status__caption{
  font-weight:600;
}

.customer-chat-status__datetime{
  font-weight:400;
}
.chat-messagebox{
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:100%;
  padding:1.8rem 2rem;
  border-radius:1.6rem;
  background-color:var(--color-dark-3);
}

.chat-messagebox__container,
.chat-messagebox__controls{
  display:flex;
  align-items:center;
  gap:1rem;
}

.chat-messagebox__controls{
  flex-shrink:0;
}

.chat-messagebox__label{
  width:100%;
}

.chat-messagebox__input{
  width:100%;
  padding:0;
  border:none;
  font-size:1.6rem;
  line-height:2rem;
  font-weight:500;
  background-color:transparent;
  color:var(--color-white);
}
.chat-messagebox__input:focus-visible::placeholder{
  opacity:0;
}
.chat-messagebox__input::placeholder{
  color:var(--color-grey-1);
}

.chat-messagebox__control{
  --link-color:var(--color-grey-1);
  --link-color-hover:var(--color-white);
  --link-color-active:var(--color-grey-1);
}
.chat-messagebox__control .icon{
  font-size:2.4rem;
}
.chat-messagebox__control:disabled{
  --link-color:var(--color-grey-2);
  pointer-events:none;
}

.message-type{
  column-gap:1rem;
  margin-bottom:0.5rem;
}

.message-type__button{
  min-height:5rem;
  padding-bottom:1.2rem;
}

/*! Filter */
.filter{
  display:flex;
  flex-direction:column;
  gap:3rem;
}

.filter__list.form{
  gap:1rem;
}

.filter__item.form__field{
  --input-height:2.4rem;
}
.filter__item.form__field .label-checkbox{
  width:calc(100% - 3.4rem);
}

.filter__footer{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.filter__reset{
  margin-left:auto;
  font-size:1.2rem;
  line-height:1.6rem;
  font-weight:400;
}
.datepicker-dropdown .dropdown-container{
  width:initial;
  max-width:initial;
  padding:2rem calc(2rem - var(--scrollbar-padding)) 2rem 2rem;
  border-radius:2rem;
}
.account-search{
  position:relative;
  display:inline-flex;
}

.is-active .account-search__button{
  opacity:0;
  pointer-events:none;
}

.account-search__box{
  position:absolute;
  top:-0.5rem;
  right:0;
  z-index:1;
  display:inline-flex;
  visibility:hidden;
  width:0;
  opacity:0;
}
.account-search__box .input-text{
  --input-height:3.4rem;
  --input-padding:0 2rem 0 4.5rem;
  font-size:1.5rem;
  background-image:url(../svg/ui/search-2.svg);
  background-position:left 1.5rem center;
  background-repeat:no-repeat;
  background-size:2rem;
}
.is-active .account-search__box{
  visibility:visible;
  width:38rem;
  max-width:calc(100vw - 15.5rem);
  opacity:1;
  transition:width var(--transition-medium-cubic), opacity var(--transition-medium-cubic);
}

/*! Datepicker */
.twin-datepicker{
  display:flex;
  flex-direction:column;
  gap:3rem;
}

.twin-datepicker__inputs-wrapper{
  display:flex;
  align-items:center;
  gap:2rem;
  font-size:1.6rem;
  line-height:normal;
}
.twin-datepicker__inputs-wrapper .icon{
  font-size:2.4rem;
}

.twin-datepicker__inputs{
  display:flex;
  align-items:center;
  gap:0.4rem;
}
.twin-datepicker__inputs:has(.input-datepicker--max:not(:empty))::after{
  content:"-";
}

.input-datepicker{
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  border-color:transparent;
  background-color:transparent;
  color:var(--color-white);
}
.input-datepicker:last-child{
  order:1;
}

.twin-datepicker__container{
  display:flex;
  flex-direction:column;
  gap:5.3rem;
}

.twin-datepicker__footer{
  border-top:1px solid var(--color-dark-3);
  padding-top:2.9rem;
}

.twin-datepicker__apply-button{
  width:100%;
}

.datepicker-field{
  position:relative;
}
.datepicker-field > .icon{
  position:absolute;
  right:1rem;
  bottom:1.4rem;
  font-size:2.4rem;
  color:var(--color-black);
  pointer-events:none;
}

.air-datepicker{
  --adp-width:22.4rem;
  --adp-day-cell-height:3.2rem;
  --adp-border-color:transparent;
  --adp-border-color-inline:transparent;
  --adp-border-color-inner:transparent;
  --adp-cell-border-radius:1rem;
  --adp-padding:0.5rem 0 0;
  --adp-nav-height:2.4rem;
  --adp-nav-action-size:2.4rem;
  --adp-nav-arrow-color:var(--color-white);
  --adp-font-size:1.6rem;
  --adp-background-color:transparent;
  --adp-background-color-hover:transparent;
  --adp-background-color-active:transparent;
  --adp-cell-background-color-selected:var(--color-primary);
  --adp-cell-background-color-selected-hover:var(--color-primary);
  --adp-color:var(--color-white);
  --adp-color-other-month:var(--color-grey-1);
  --adp-color-other-month-hover:var(--color-primary);
  --adp-color-disabled:var(--color-grey-1);
  --adp-day-name-color:var(--color-white);
  --adp-color-current-date:var(--color-white);
  --adp-transition-duration:0.2s;
  border:none;
}

.air-datepicker--pointer{
  display:none !important;
}

.air-datepicker--navigation{
  margin-bottom:0.5rem;
}

.air-datepicker-nav{
  padding:0;
  border:none;
}

.air-datepicker-nav--title{
  font-weight:500;
}
.air-datepicker-nav--title i{
  color:var(--color-white);
}

.air-datepicker-nav--action{
  --adp-background-color-hover:var(--color-white);
  --adp-background-color-active:var(--color-blue-1);
  -webkit-mask-image:url(../svg/ui/chevron-left.svg);
          mask-image:url(../svg/ui/chevron-left.svg);
  -webkit-mask-size:85%;
          mask-size:85%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:center;
          mask-position:center;
  background-color:var(--color-primary);
  transition:background-color var(--transition-medium-cubic);
}
.air-datepicker-nav--action[data-action=next]{
  -webkit-mask-image:url(../svg/ui/chevron-right.svg);
          mask-image:url(../svg/ui/chevron-right.svg);
}
.air-datepicker-nav--action svg{
  display:none;
}

.air-datepicker-body--day-names{
  margin:0 0 1rem;
}

.air-datepicker-body--day-name{
  font-size:1.6rem;
  line-height:3.2rem;
  font-weight:500;
  text-transform:capitalize;
}

.air-datepicker-cell{
  font-size:1.4rem;
  line-height:3.2rem;
  font-weight:500;
  transition:color var(--transition-medium-cubic);
  -webkit-user-select:none;
          user-select:none;
}
.air-datepicker-cell:not(.-current-, .-selected-):hover, .air-datepicker-cell:not(.-current-, .-selected-):focus-visible{
  color:var(--color-primary);
}
.air-datepicker-cell.-disabled-{
  pointer-events:none;
}

/*! Table */
.table__th{
  padding-bottom:1.8rem;
  padding-left:2rem;
  border-bottom:1px solid var(--color-dark-3);
  font-size:1.6rem;
  line-height:2rem;
  font-weight:600;
}
.table__th:first-child{
  padding-left:1rem;
}

.table__th--price{
  width:11rem;
}

.table__th--category{
  width:32.4%;
}

.table__td{
  position:relative;
  padding-top:1rem;
  padding-bottom:0.9rem;
  padding-left:2rem;
  border-bottom:1px solid var(--color-dark-3);
  font-size:1.4rem;
  line-height:2rem;
  font-weight:700;
}
.table__td:first-child{
  padding-left:1rem;
}
.table__td:not(:first-child)::before{
  content:"";
  position:absolute;
  top:1rem;
  left:0;
  display:block;
  width:1px;
  height:calc(100% - 1.8rem);
  background-color:var(--color-dark-3);
}

.table-item-checkbox{
  display:block;
}
.table-item-checkbox .checkbox-field--lg{
  min-height:3.2rem;
}
.table-item-checkbox .label-checkbox{
  align-items:center;
}
.table-item-checkbox .checkbox-input-control{
  top:0;
  transform:translateY(0);
}

.table-item-checkbox__wrapper{
  display:flex;
  flex-direction:column;
  font-size:1.4rem;
  line-height:2rem;
  font-weight:400;
  color:var(--color-grey-1);
}

/*! General layout structure */
.page-wrapper{
  flex:1 0 auto;
  padding-top:3rem;
  padding-bottom:3rem;
}

.main{
  display:flex;
  flex-direction:column;
  height:100%;
}

.container{
  --container-padding:1.2rem;
  width:100%;
  padding-right:var(--container-padding);
  padding-left:var(--container-padding);
  margin:0 auto;
  min-width:36rem;
  max-width:163rem;
}

.vw-container{
  position:relative;
  width:100vw;
  margin-left:calc(-50vw + 50%);
}
.vw-container--right{
  margin-left:initial;
}
.vw-container--left{
  width:initial;
}

/*! General reusable utility classes */
.offscreen{
  position:absolute;
  overflow:hidden;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  margin:-1px;
  clip:rect(0 0 0 0);
}

.ellipsis{
  overflow:hidden;
  width:100%;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.truncate-box{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;
}

/*! Separated raw html elements rules */
.content h1{
  margin-bottom:1.6rem;
}
.content h2{
  margin-bottom:1.2rem;
}
.content h3{
  margin-bottom:1rem;
}
.content ul,
.content ol{
  display:flex;
  flex-direction:column;
}
.content ol{
  counter-reset:li;
}
.content ol li::before{
  counter-increment:li;
  content:counters(li, ".", decimal) ".";
  display:inline-block;
  flex-shrink:0;
  min-width:1.1rem;
}
.content ul li{
  position:relative;
  padding-left:2.4rem;
}
.content ul li::before{
  content:"•";
  position:absolute;
  top:1rem;
  left:0;
  width:1rem;
  height:1rem;
  font-size:5rem;
  line-height:0;
  font-weight:normal;
}
.content table{
  table-layout:fixed;
  width:100%;
  border-collapse:collapse;
}
.content th{
  text-align:left;
}

ol.ol-list{
  gap:2rem;
  margin-bottom:0;
  font-size:1.6rem;
  line-height:125%;
  font-weight:400;
}
ol.ol-list li{
  display:flex;
  align-items:center;
  gap:2rem;
}
ol.ol-list li::before{
  content:counters(li, "", decimal) "";
  display:flex;
  justify-content:center;
  align-items:center;
  align-self:center;
  width:4rem;
  height:4rem;
  border-radius:50%;
  font-size:1.6rem;
  line-height:125%;
  font-weight:700;
  background-color:var(--color-dark-3);
}

.chat-content a{
  --link-color:var(--color-primary);
  --link-hover-color:var(--color-white);
  --link-active-color:var(--color-blue-1);
  display:inline;
  word-break:break-all;
}

/*! Main header rules */
.header{
  min-width:36rem;
}
.header > .container{
  position:relative;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}

.header-wrapper{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}
.header-wrapper::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:0.1rem;
  background-color:var(--color-dark-3);
}

.logo{
  display:block;
  flex-shrink:0;
  width:14rem;
  height:4rem;
}
.logo--alt{
  width:4rem;
  height:4rem;
}

.header__controls{
  position:relative;
  display:flex;
  align-items:center;
  gap:2rem;
}
.header__controls .navbar + .header__auth-link{
  display:none;
}
.header__controls .dropdown{
  --dropdown-alignment-offset:-27px;
}

.header__deposit{
  display:none;
  align-items:center;
  gap:1rem;
  font-size:1.4rem;
  line-height:1.6rem;
  font-weight:600;
}
.header__deposit:hover .icon, .header__deposit:focus-visible .icon{
  color:currentColor;
}
.header__deposit .icon{
  color:var(--color-grey-1);
}
.header__deposit .button-text{
  display:inline-flex;
  align-items:center;
  gap:1.1rem;
}

.notifications-dropdown .dropdown-button{
  --link-color:var(--color-grey-1);
  --link-color-hover:var(--color-primary);
  --link-color-active:var(--color-primary);
}
.notifications-dropdown .dropdown-button[aria-expanded=true]{
  --link-color:var(--color-primary);
}
.notifications-dropdown.has-notifications .dropdown-button{
  --link-color:var(--color-green);
}

.button.header__auth-link{
  gap:0.9rem;
  padding:0.7rem 2rem 0.7rem 1.9rem;
  border-radius:4.2rem;
}
.button.header__auth-link:hover .icon, .button.header__auth-link:focus-visible .icon{
  color:var(--color-blue-1);
}
.button.header__auth-link .icon{
  top:0;
  font-size:2rem;
  color:var(--color-grey-1);
}
.button.header__auth-link .button-text{
  max-width:15rem;
}

/*! Main footer rules */
.footer{
  min-width:36rem;
  padding-bottom:3rem;
  font-size:1.4rem;
  line-height:143%;
}
.footer > .container{
  position:relative;
}
.footer > .container::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background-color:var(--color-dark-3);
}

.footer-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:3rem;
}

.footer__links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}

.footer__link{
  position:relative;
  text-decoration:none;
}

.footer__vk{
  position:relative;
  width:12.6rem;
  height:2.2rem;
  margin-top:3rem;
  margin-bottom:2rem;
  transition:opacity var(--transition-medium-cubic);
}
.footer__vk:hover, .footer__vk:focus-visible{
  opacity:0.8;
}
.footer__vk:active{
  opacity:0.5;
}

.footer__copyright{
  color:var(--color-grey-1);
}

/*! Base account layout */
.account-wrapper{
  display:flex;
  flex-direction:column;
  gap:2rem;
  height:100%;
}
.panel.account-menu .nav__list{
  flex-direction:column;
  gap:1rem;
}
.panel.account-menu .nav__item{
  display:inline-flex;
  width:100%;
}
.panel.account-menu .nav__link{
  --link-color:var(--color-white);
  --link-hover-color:var(--color-primary);
  gap:2rem;
  width:100%;
  min-height:5.6rem;
  padding:0 1.4rem;
  border-radius:1rem;
}
.panel.account-menu .nav__link:hover, .panel.account-menu .nav__link:focus-visible, .panel.account-menu .nav__link.is-active{
  background-color:var(--color-dark-3);
}
.panel.account-menu .nav__link.is-active{
  --link-color:var(--color-primary);
}
.panel.account-menu .nav__link .icon{
  order:-1;
  font-size:2.4rem;
}

.account-container{
  display:flex;
  flex-direction:column;
  gap:2rem;
  width:100%;
  height:100%;
}

.account-header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}
.account-header:has(.account-header__back){
  justify-content:flex-start;
}

.account-title{
  font-size:2rem;
  line-height:2.4rem;
  font-weight:800;
  text-transform:uppercase;
}

.account-filters{
  display:flex;
  align-items:center;
  gap:2rem;
}
.account-filters .dropdown{
  --dropdown-offset:10px;
}
.account-filters .dropdown-button{
  --link-color:var(--color-grey-1);
  --link-color-hover:var(--color-primary);
  --link-color-active:var(--color-primary);
}
.account-filters .dropdown-button[aria-expanded=true]{
  --link-color:var(--color-primary);
}
.account-filters .dropdown:not(.datepicker-dropdown) .dropdown-container{
  min-width:24.6rem;
}

.account-tabs{
  margin-bottom:-0.2rem;
}

.account-content-wrapper{
  display:flex;
  flex-grow:1;
  flex-direction:column;
}

.panel.account-panel{
  width:100%;
}

.account-control-button{
  align-self:flex-start;
  gap:1.1rem;
}

.empty-notice{
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:100%;
  max-width:33.6rem;
  padding:7rem 0;
  margin:auto;
  text-align:center;
}
.empty-notice > .button{
  width:100%;
  margin-top:1rem;
}

.empty-notice__title{
  font-size:2rem;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
}

.empty-notice__caption{
  font-size:1.6rem;
  line-height:2rem;
  font-weight:400;
  color:var(--color-grey-1);
}

.table-wrapper{
  --track-color:var(--color-dark-3);
  overflow-x:auto;
  width:100%;
}
.table-wrapper::-webkit-scrollbar{
  height:0.8rem;
}
.table-wrapper::-webkit-scrollbar-track{
  height:0.8rem;
}
.table-wrapper::-webkit-scrollbar-thumb{
  height:0.8rem;
}
.table-wrapper table{
  min-width:100%;
}
/*! Pages */
.hero{
  position:relative;
  z-index:0;
  display:flex;
  flex-direction:column;
  min-height:32rem;
  padding:2rem;
  border-radius:2rem;
  margin-bottom:3rem;
  background-image:url(../img/backgrounds/hero-clash-of-clans-632w.jpg);
  background-image:url(../img/backgrounds/hero-clash-of-clans-632w.webp);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.webp .hero{
  background-image:-webkit-image-set(url(../img/backgrounds/hero-clash-of-clans-632w.webp) 1x, url(../img/backgrounds/hero-clash-of-clans-1264w.webp) 2x);
  background-image:image-set(url(../img/backgrounds/hero-clash-of-clans-632w.webp) 1x, url(../img/backgrounds/hero-clash-of-clans-1264w.webp) 2x);
}
.hero::before{
  content:"";
  display:block;
  width:12.9rem;
  height:8rem;
  background-image:url(../img/backgrounds/logo-clash-of-clans-129w.png);
  background-image:url(../img/backgrounds/logo-clash-of-clans-129w.webp);
  background-size:contain;
}
.webp .hero::before{
  background-image:-webkit-image-set(url(../img/backgrounds/logo-clash-of-clans-129w.webp) 1x, url(../img/backgrounds/logo-clash-of-clans-258w.webp) 2x);
  background-image:image-set(url(../img/backgrounds/logo-clash-of-clans-129w.webp) 1x, url(../img/backgrounds/logo-clash-of-clans-258w.webp) 2x);
}
.hero::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  border-radius:1.8rem;
  background:linear-gradient(90deg, #151930 0%, rgba(21, 25, 48, 0) 100%);
}

.hero.hero--brawl-stars{
  background-image:url(../img/backgrounds/hero-brawl-stars-736w.jpg);
  background-image:url(../img/backgrounds/hero-brawl-stars-736w.webp);
}
.webp .hero.hero--brawl-stars{
  background-image:-webkit-image-set(url(../img/backgrounds/hero-brawl-stars-736w.webp) 1x, url(../img/backgrounds/hero-brawl-stars-1473w.webp) 2x);
  background-image:image-set(url(../img/backgrounds/hero-brawl-stars-736w.webp) 1x, url(../img/backgrounds/hero-brawl-stars-1473w.webp) 2x);
}
.hero.hero--brawl-stars::before{
  background-image:url(../img/backgrounds/logo-brawl-stars-98w.png);
  background-image:url(../img/backgrounds/logo-brawl-stars-98w.webp);
  width:9.8rem;
  height:8rem;
}
.webp .hero.hero--brawl-stars::before{
  background-image:-webkit-image-set(url(../img/backgrounds/logo-brawl-stars-98w.webp) 1x, url(../img/backgrounds/logo-brawl-stars-196w.webp) 2x);
  background-image:image-set(url(../img/backgrounds/logo-brawl-stars-98w.webp) 1x, url(../img/backgrounds/logo-brawl-stars-196w.webp) 2x);
}

.hero.hero--clash-royale{
  background-image:url(../img/backgrounds/hero-clash-royale-481w.jpg);
  background-image:url(../img/backgrounds/hero-clash-royale-481w.webp);
}
.webp .hero.hero--clash-royale{
  background-image:-webkit-image-set(url(../img/backgrounds/hero-clash-royale-481w.webp) 1x, url(../img/backgrounds/hero-clash-royale-962w.webp) 2x);
  background-image:image-set(url(../img/backgrounds/hero-clash-royale-481w.webp) 1x, url(../img/backgrounds/hero-clash-royale-962w.webp) 2x);
}
.hero.hero--clash-royale::before{
  background-image:url(../img/backgrounds/logo-clash-royale-184w.png);
  background-image:url(../img/backgrounds/logo-clash-royale-184w.webp);
  width:18.4rem;
  height:8rem;
}
.webp .hero.hero--clash-royale::before{
  background-image:-webkit-image-set(url(../img/backgrounds/logo-clash-royale-184w.webp) 1x, url(../img/backgrounds/logo-clash-royale-368w.webp) 2x);
  background-image:image-set(url(../img/backgrounds/logo-clash-royale-184w.webp) 1x, url(../img/backgrounds/logo-clash-royale-368w.webp) 2x);
}

.hero.hero--frimzi{
  background-image:none;
  background-color:var(--color-primary);
}
.hero.hero--frimzi .hero__title{
  margin-bottom:0;
}
.hero.hero--frimzi::before{
  display:none;
}

.hero__title{
  margin-top:auto;
  margin-bottom:2rem;
  font-size:2rem;
  line-height:120%;
  font-weight:800;
  text-transform:uppercase;
}

.hero__frimzi-logo{
  flex-shrink:0;
  width:21.3rem;
  height:6rem;
  margin:auto auto 0;
}

.hero__fields{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2.4rem;
}

.field{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  min-height:4rem;
  padding:0.9rem 1.9rem;
  border:1px solid currentColor;
  border-radius:4rem;
  font-size:1.2rem;
  line-height:1.6rem;
  font-weight:600;
  background-color:var(--color-green-2);
  color:var(--color-green);
}
.field .icon{
  font-size:2rem;
}
.field--orange{
  background-color:var(--color-orange-2);
  color:var(--color-orange);
}
.field--success, .field--warning, .field--error{
  align-items:center;
  gap:1rem;
  width:100%;
  min-height:6rem;
  padding:1.9rem;
  border-color:var(--color-green);
  border-radius:1.6rem;
  font-size:1.6rem;
  line-height:2rem;
  font-weight:500;
  color:var(--color-white);
}
.field--success .icon, .field--warning .icon, .field--error .icon{
  position:relative;
  top:-0.1rem;
  font-size:2.4rem;
}
.field--warning{
  min-height:8rem;
  border-color:#ffa600;
  background-color:rgba(255, 166, 0, 0.1);
}
.field--warning .icon{
  color:#dd9001;
}
.field--error{
  min-height:8rem;
  border-color:#d63333;
  background-color:rgba(214, 51, 51, 0.1);
}
.field--error .icon{
  color:#d63333;
}
.panels-wrapper{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.panel{
  display:flex;
  flex-direction:column;
  gap:2rem;
  padding:3rem 2rem;
  border-radius:2rem;
  background-color:var(--color-dark-2);
}

.panel__title{
  font-size:2rem;
  line-height:2.4rem;
  font-weight:800;
  text-transform:uppercase;
}

.panel.panel--text{
  gap:0;
}
.panel.panel--text h2{
  margin-top:2rem;
  margin-bottom:2rem;
  line-height:125%;
}

.warning + .top-up__title{
  margin-top:1rem;
}

.top-up__title{
  font-size:2rem;
  line-height:120%;
  font-weight:800;
  text-transform:uppercase;
}

.top-up-form .alert{
  margin-top:-0.2rem;
  margin-bottom:0.2rem;
}

.product-fieldset{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(29.6rem, 1fr));
  grid-template-rows:-webkit-min-content;
  grid-template-rows:min-content;
  padding-bottom:3rem;
  border-bottom:1px solid var(--color-dark-3);
  margin-top:-0.2rem;
  margin-bottom:0.9rem;
}

.product-field .input-radio:checked + .product-card,
.product-card.product-card--static{
  border-color:var(--color-blue-1);
  background-color:var(--color-blue-5);
}
.product-field .input-radio:checked + .product-card .qty-input,
.product-card.product-card--static .qty-input{
  display:flex;
}
.product-field .input-radio:checked + .product-card .qty-input + .product-card__price-wrapper,
.product-card.product-card--static .qty-input + .product-card__price-wrapper{
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:0.2rem;
}

.product-field .input-radio:disabled + .product-card{
  opacity:0.4;
  -webkit-user-select:none;
          user-select:none;
  pointer-events:none;
}

.product-field.is-hidden{
  display:none;
}

.product-field--sold-out::before{
  content:"Распродано";
  position:absolute;
  inset:0;
  z-index:1;
  display:inline-flex;
  align-items:center;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  min-height:4rem;
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content;
  padding:0.5rem 1.9rem;
  border-radius:1.6rem;
  margin:auto;
  font-size:1.6rem;
  line-height:2rem;
  font-weight:500;
  background-color:var(--color-grey-2);
  color:var(--color-grey-1);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  box-shadow:0 0 17px 0 rgba(0, 0, 0, 0.45);
}

.product-card{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:7.6rem;
  height:100%;
  padding:1.7rem 1.8rem 1.5rem;
  border:2px solid var(--color-dark-3);
  border-radius:1.6rem;
  line-height:125%;
  background-color:var(--color-dark-3);
  transition:background-color var(--transition-medium-cubic), border-color var(--transition-medium-cubic);
  cursor:pointer;
}
.product-card:hover, .product-card:focus-visible{
  background-color:var(--color-blue-5);
}
.product-card--tall .product-card__old-price{
  line-height:117%;
}
.product-card--golden-pass .product-card__image{
  width:4rem;
}
.product-card--static{
  min-height:7.6rem;
  background-color:var(--color-blue-2);
}
.product-card .qty-input{
  display:none;
  margin-top:0.1rem;
}
.product-card .icon[data-dialog=warning]{
  font-size:2.4rem;
  color:var(--color-orange);
}

.product-card__image{
  position:relative;
  top:-0.1rem;
  display:flex;
  overflow:hidden;
  flex-shrink:0;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:0.8rem;
}
.product-card__image img{
  border-radius:0.8rem;
  object-fit:contain;
}

.product-card__control-wrapper{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1.1rem;
  max-width:12rem;
  margin-left:auto;
}

.product-card__price-wrapper{
  display:flex;
  flex-shrink:0;
  flex-direction:column;
  align-items:flex-end;
  gap:0.4rem;
  margin-left:auto;
  font-weight:700;
  color:var(--color-grey-1);
}

.product-card__old-price{
  font-size:1.2rem;
  line-height:100%;
  white-space:nowrap;
}

.product-card__price{
  white-space:nowrap;
}

.submit-field--top-up{
  margin-top:1rem;
}
.panel.info{
  flex:1 0 0;
}
.panel.info .hr{
  margin-top:1.2rem;
  margin-bottom:0.8rem;
}

.info-tabs{
  margin-top:0.1rem;
}

.help{
  padding-top:0.1rem;
  line-height:125%;
  font-weight:400;
}
.help .h2{
  margin-bottom:2.1rem;
}
.help .button{
  width:100%;
  margin-top:1.9rem;
}
.contacts-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3rem;
  padding:2rem;
}
.contacts-panel .button{
  width:100%;
}

.contacts-panel__icon{
  display:flex;
  justify-content:center;
  align-items:center;
  width:11.5rem;
  height:11.5rem;
  border-radius:50%;
  background-color:var(--color-dark-3);
}
.contacts-panel__icon .icon{
  font-size:4.6rem;
}

.contacts-panel__theme{
  font-size:1.4rem;
  line-height:143%;
  text-align:center;
  color:var(--color-grey-1);
}

.contacts-panel__address{
  font-size:2rem;
  line-height:120%;
  text-align:center;
}
.promo-slider{
  width:100%;
  padding-bottom:3.7rem;
  border-radius:1.6rem;
  margin-bottom:-0.3rem;
}
.promo-slider .swiper-slide{
  width:100%;
}
.promo-slider .swiper-button-prev,
.promo-slider .swiper-button-next{
  top:0;
  display:none;
  width:10rem;
  height:100%;
  margin-top:0;
}
.promo-slider .swiper-button-prev:hover::after, .promo-slider .swiper-button-prev:focus-visible::after,
.promo-slider .swiper-button-next:hover::after,
.promo-slider .swiper-button-next:focus-visible::after{
  background-color:var(--color-white);
}
.promo-slider .swiper-button-prev:active::after,
.promo-slider .swiper-button-next:active::after{
  transform:translateY(0.3rem);
}
.promo-slider .swiper-button-prev::after,
.promo-slider .swiper-button-next::after{
  content:"";
  aspect-ratio:1/1;
  width:4.8rem;
  -webkit-mask-image:url(../svg/ui/circle-arrow.svg);
          mask-image:url(../svg/ui/circle-arrow.svg);
  -webkit-mask-size:contain;
          mask-size:contain;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:center;
          mask-position:center;
  background-color:var(--color-primary);
  transition:background-color 0.2s linear, transform 0.2s linear;
}
.promo-slider .swiper-button-prev.swiper-button-disabled,
.promo-slider .swiper-button-next.swiper-button-disabled{
  opacity:1;
}
.promo-slider .swiper-button-prev.swiper-button-disabled::after,
.promo-slider .swiper-button-next.swiper-button-disabled::after{
  background-color:var(--color-blue-1);
}
.promo-slider .swiper-button-prev{
  left:0;
  background:linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(4, 8, 31, 0.8) 40%);
}
.promo-slider .swiper-button-prev::after{
  margin-left:-3.6rem;
}
.promo-slider .swiper-button-next{
  right:0;
  background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(4, 8, 31, 0.8) 40%);
}
.promo-slider .swiper-button-next::after{
  margin-right:-3.6rem;
  transform:rotate(180deg);
}
.promo-slider .swiper-button-next:active::after{
  transform:rotate(180deg) translateY(-0.3rem);
}
.promo-slider .swiper-pagination{
  --swiper-pagination-bottom:0;
  --swiper-pagination-bullet-width:1.4rem;
  --swiper-pagination-bullet-height:1.4rem;
  --swiper-pagination-bullet-horizontal-gap:0.2rem;
  --swiper-pagination-bullet-border-radius:1.6rem;
  --swiper-pagination-color:rgba(255, 255, 255, 0.1);
  --swiper-pagination-bullet-inactive-color:rgba(255, 255, 255, 0.1);
  --swiper-pagination-bullet-inactive-opacity:1;
  height:1.8rem;
}
.promo-slider .swiper-pagination-bullet{
  position:relative;
  border:1px solid var(--color-white);
  transition:width 0.2s linear, border-color 0.2s linear;
}
.promo-slider .swiper-pagination-bullet:hover, .promo-slider .swiper-pagination-bullet:focus-visible{
  border-color:var(--color-primary);
}
.promo-slider .swiper-pagination-bullet::after{
  content:"";
  position:absolute;
  inset:0;
  width:calc(100% - 6px);
  height:calc(100% - 4px);
  border-radius:1.6rem;
  margin:auto;
  background-color:var(--color-white);
  opacity:0;
  transition:opacity 0.2s linear;
}
.promo-slider .swiper-pagination-bullet-active{
  --swiper-pagination-bullet-width:3.9rem;
}
.promo-slider .swiper-pagination-bullet-active::after{
  opacity:1;
}

.promo-slide{
  display:grid;
  text-decoration:none;
  color:var(--color-dark-3);
  -webkit-user-select:none;
          user-select:none;
}
.promo-slide:hover, .promo-slide:focus-visible{
  color:var(--color-primary);
}
.promo-slide:hover .promo-slide__cover img, .promo-slide:focus-visible .promo-slide__cover img{
  transform:scale(1.05);
}
.promo-slide > *{
  grid-area:1/1;
}

.promo-slide__cover{
  overflow:hidden;
  aspect-ratio:336/194;
  width:100%;
  border-radius:1.6rem;
}
.promo-slide__cover picture{
  height:100%;
}
.promo-slide__cover img{
  height:100%;
  object-fit:cover;
  transition:transform var(--transition-long-cubic);
}

.promo-slide__caption{
  z-index:1;
  align-self:flex-end;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  min-height:3.6rem;
  padding:0.9rem 1.9rem;
  border:1px solid var(--color-white);
  border-radius:4rem;
  margin:1rem;
  font-size:1.2rem;
  line-height:1.6rem;
  font-weight:600;
  background-color:rgba(255, 255, 255, 0.9);
}
.promo-slider + .games-wrapper{
  margin-top:3.3rem;
}

.games-wrapper{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2rem;
}

.game{
  display:block;
  text-decoration:none;
  color:var(--color-white);
}
.game:hover, .game:focus-visible{
  color:var(--color-primary);
}
.game:active{
  opacity:0.8;
}

.game__image{
  position:relative;
  overflow:hidden;
  border-radius:1.6rem;
  background:transparent;
}
.game__image img{
  aspect-ratio:158/180;
  border-radius:1.6rem;
}

.game__title{
  margin-top:1rem;
  font-size:1.4rem;
  line-height:1.7rem;
  font-weight:700;
  text-align:center;
}

/*! Pay status pages */

.pay-status{
  --horizontal-margin:0;
  margin-top:-0.2rem;
}
.pay-status .dialog-content-wrapper{
  opacity:1;
  transform:none;
}
.pay-status .dialog-content .h2 + .ol-list{
  margin-top:-0.8rem;
}
.pay-status > .hr{
  margin-top:-0.3rem;
}

.pay-status-success{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.pay-status-success::before{
  content:"";
  width:10rem;
  height:10rem;
  margin:-0.1rem auto 2rem;
  background-image:url(../svg/ui/success.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.pay-status-success__title{
  margin-bottom:0.9rem;
  font-size:1.6rem;
  line-height:2.4rem;
  font-weight:800;
  text-transform:uppercase;
  color:var(--color-green);
}
.pay-status-success__caption{
  font-size:1.4rem;
  line-height:2rem;
  font-weight:400;
}

.pay-status--error > .hr{
  margin-top:-2.2rem;
}

/*! Auth pages */
.auth-container{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.auth-cover{
  display:grid;
  overflow:hidden;
  border-radius:2rem;
}
.auth-cover > *{
  grid-area:1/1;
}

.auth-cover__image{
  aspect-ratio:688/400;
  width:100%;
  height:100%;
}
.auth-cover__image picture{
  height:100%;
}
.auth-cover__image img{
  height:100%;
  object-fit:cover;
  object-position:top right;
}

.auth-cover__content{
  justify-self:center;
  align-self:flex-end;
  padding:2rem 3rem;
  border-radius:0.8rem;
  margin-bottom:4rem;
  font-size:1.2rem;
  line-height:120%;
  font-weight:500;
  text-align:center;
  background-color:var(--color-blue-5);
}

.auth-cover__title{
  font-size:1.6rem;
  line-height:140%;
  font-weight:800;
  text-transform:uppercase;
}

.auth-panel{
  padding:4.8rem 1.6rem;
}
.auth-panel .hr{
  margin-top:1.1rem;
  margin-bottom:-0.1rem;
}

.auth-panel__wrapper{
  display:flex;
  overflow:hidden;
  flex-direction:row;
  width:100%;
  max-width:58.8rem;
  height:100%;
  margin:0 auto;
}

.auth-panel__front-container{
  display:flex;
  flex:1 0 auto;
  flex-direction:column;
  align-items:center;
  gap:3rem;
  width:100%;
  opacity:1;
  transition:visibility var(--transition-medium-cubic), opacity var(--transition-medium-cubic), transform var(--transition-medium-cubic);
}
.auth-panel__front-container.is-hidden{
  visibility:hidden;
  opacity:0;
  transform:translateX(-100%);
}
.auth-panel__front-container.is-hidden + .auth-panel__code-container{
  visibility:visible;
  opacity:1;
  transform:translateX(-100%);
}

.auth-panel__front-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3rem;
  width:100%;
  max-width:40rem;
  margin:0 auto;
}

.auth-panel__title{
  margin-bottom:1rem;
  font-size:2.8rem;
  line-height:3.4rem;
  font-weight:500;
  text-align:center;
}

.auth-form{
  gap:4rem;
  width:100%;
}
.auth-form .form__field{
  gap:1rem;
}
.auth-form .form__label{
  line-height:160%;
}
.auth-form .input-email{
  padding:1.9rem;
}

.auth-panel__oauth{
  display:flex;
  justify-content:center;
  gap:2rem;
  width:100%;
  margin-top:-1rem;
}
.auth-panel__oauth .button{
  flex:1 0 0;
  min-width:0;
  width:100%;
  max-width:12rem;
}

.auth-panel__copyright{
  font-size:1.4rem;
  line-height:2.2rem;
  font-weight:400;
  text-align:center;
}

.auth-panel__code-container{
  display:flex;
  visibility:hidden;
  flex:1 0 auto;
  flex-direction:column;
  align-items:center;
  gap:3rem;
  width:100%;
  opacity:0;
  transition:visibility var(--transition-medium-cubic), opacity var(--transition-medium-cubic), transform var(--transition-medium-cubic);
}

.auth-panel__code-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3rem;
  width:100%;
  max-width:58.8rem;
  height:100%;
}

.auth-panel__header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  width:100%;
}

.auth-panel__code-form-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:40rem;
  height:100%;
}

.verification-code-form__header{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  font-size:1.4rem;
  line-height:2.2rem;
  font-weight:400;
  text-align:center;
}

.verification-code-form{
  gap:4rem;
  height:100%;
}
.verification-code-form .code-input-fieldset{
  margin:0 auto;
}

.verification-code-field{
  gap:2rem;
  margin:auto;
}
.verification-code-field .just-validate-error-label,
.verification-code-field .just-validate-success-label{
  margin-top:-1rem;
  text-align:center;
}

.code-input-caption{
  order:1;
  font-size:1.4rem;
  line-height:2.2rem;
  font-weight:400;
  text-align:center;
}
.admin-auth-container{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
}

.admin-auth-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  width:100%;
  max-width:50rem;
}

.admin-auth-form{
  width:100%;
}
.admin-auth-form .submit-field{
  margin-top:2rem;
}
.admin-auth-form .form__submit.button--primary{
  justify-content:center;
  min-height:6.6rem;
  text-align:center;
}

/*! Profile page */
.profile-wrapper{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:3rem;
}
.profile-wrapper:not(:has(.profile-avatar)) .profile-info__name{
  margin-bottom:2rem;
}

.profile-avatar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}

.profile-avatar__image{
  overflow:hidden;
  aspect-ratio:1;
  width:20rem;
  border-radius:1rem;
}
.profile-avatar__image img{
  object-fit:cover;
}

.profile-avatar__control{
  font-size:1.4rem;
  line-height:2rem;
  font-weight:400;
}
.profile-avatar__control .icon{
  font-size:1.6rem;
}

.profile-info{
  display:flex;
  flex-direction:column;
  gap:2rem;
  line-height:2rem;
}

.profile-info__name{
  font-size:2.4rem;
  font-weight:600;
}

.profile-info__item{
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:1.4rem;
}
.profile-info__item .icon{
  font-size:2.4rem;
  color:var(--color-grey-1);
}

.profile-info__content{
  display:inline-flex;
  flex-wrap:wrap;
  column-gap:1rem;
}

.profile-info__label{
  font-weight:700;
  color:var(--color-grey-1);
}

.profile-info__text{
  font-weight:400;
}

/*! Deposit page */
.deposit-success{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  width:100%;
  max-width:57rem;
  padding:7rem 0;
  margin:auto;
  text-align:center;
}
.deposit-success > .icon{
  font-size:10rem;
  color:var(--color-green);
}

.deposit-success__title{
  font-size:2rem;
  line-height:2.4rem;
  font-weight:800;
  text-transform:uppercase;
  color:var(--color-green);
}

.deposit-success__caption{
  font-weight:400;
}
.deposit-success__caption .link{
  font-weight:700;
}

/*! Order pages */
.account-order-info,
.panel.panel--info{
  width:100%;
  padding:2rem 3rem;
}

.panel.panel--info{
  padding:2rem;
}

.account-order-info__item,
.account-order-info__value{
  display:flex;
  flex-direction:column;
  gap:1rem;
  font-size:1.6rem;
  line-height:2rem;
}

.account-order-info__caption{
  font-weight:600;
  color:var(--color-grey-1);
}

.account-order-info__order{
  font-weight:400;
  color:var(--color-green);
}

.account-order-info__amount{
  font-size:1.4rem;
  font-weight:700;
}

.account-order-info__discount{
  display:flex;
  flex-wrap:wrap;
  gap:0.3rem;
  font-size:1.1rem;
  font-weight:700;
  color:var(--color-grey-1);
}
.account-order-info__discount::after{
  content:"|";
}
.account-order-info__discount span:last-child{
  order:1;
}
.account-order-actions{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.account-order-actions__caption{
  font-size:1.6rem;
  font-weight:600;
  color:var(--color-grey-1);
}

.account-order-actions__controls{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
}
.order-log,
.order-log__item{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.order-log{
  gap:2rem;
}

.order-log__datetime{
  font-weight:700;
}

.order-log__text{
  font-weight:400;
  color:var(--color-grey-1);
}
.ban-info{
  display:flex;
  flex-direction:column;
  gap:1rem;
  width:100%;
}

.ban-info__caption{
  font-size:1.4rem;
  line-height:1.6rem;
  font-weight:400;
}

.ban-info__text{
  padding:2rem;
  border-radius:1.6rem;
  background-color:var(--color-dark-3);
}

/*! Page list */
.pages-container{
  display:flex;
  flex-direction:column;
  gap:3rem;
}

.pages-list{
  display:flex;
  flex-direction:column;
  gap:3rem;
  font-size:2rem;
}
:root{
  --color-primary:#178cf8;
  --color-dark-1:#04081f;
  --color-dark-2:#151930;
  --color-dark-3:#24283d;
  --color-grey-1:#828998;
  --color-grey-2:#3d4156;
  --color-blue-1:#627cb3;
  --color-blue-2:#232c49;
  --color-blue-3:#54a9f8;
  --color-blue-4:#0e3a63;
  --color-blue-5:#202b4c;
  --color-green:#8bbf1d;
  --color-green-2:#2d3f1f;
  --color-orange:#ffa600;
  --color-orange-2:#2c282b;
  --color-red-1:#d63333;
  --color-red-2:#f00;
  --color-red-3:#281c30;
  --color-black:black;
  --color-white:white;
  --html-bg-color:var(--color-dark-1);
  --text-body-color:var(--color-white);
  --link-color:var(--color-grey-1);
  --link-hover-color:var(--color-white);
  --link-active-color:var(--color-blue-1);
  --tab-focus-color:var(--color-primary);
  --shadow-dialog:0 0 80px 0 rgba(0, 0, 0, 0.25);
  --transition-props-color:color, background-color, border-color, text-decoration-color;
  --transition-func-cubic:cubic-bezier(0.4, 0.8, 0.4, 1);
  --transition-duration-short:0.1s;
  --transition-duration-medium:0.2s;
  --transition-duration-long:0.3s;
  --transition-short-cubic:var(--transition-duration-short) var(--transition-func-cubic);
  --transition-medium-cubic:var(--transition-duration-medium) var(--transition-func-cubic);
  --transition-long-cubic:var(--transition-duration-long) var(--transition-func-cubic);
  --transition-overlay:visibility 0.3s, opacity 0.3s;
  color-scheme:dark light;
}

:root,
::backdrop{
  --color-overlay-bg:rgba(3, 7, 31, 0.8);
}

.c-primary{
  color:var(--color-primary);
}

.c-green{
  color:var(--color-green);
}

.c-white{
  color:var(--color-white);
}

@media (min-width: 431px){
  .promo-slider .swiper-slide{
    max-width:33.4rem;
  }
  .promo-slide__cover{
    aspect-ratio:334/194;
  }
}

@media (min-width: 768px){
  br.sm{
    display:none;
  }
  .button--primary{
    padding:1.2rem 2.2rem 0.8rem;
    font-size:2rem;
    line-height:125%;
  }
  .button--xs{
    padding:0.5rem 1.9rem 0.5rem 1.8rem;
    border:2px solid var(--color-dark-3);
    border-radius:1.6rem;
    font-size:1.6rem;
    line-height:125%;
    color:var(--color-white);
  }
  .button--xs:hover, .button--xs:focus-visible{
    background-color:var(--color-dark-3);
  }
  .nav__sublist.is-visible{
    visibility:visible;
    max-height:initial;
    animation:sublist-appear 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  }
  .form{
    gap:3rem;
  }
  .form__fieldset{
    column-gap:2rem;
  }
  .form__fieldset--row{
    flex-direction:row;
  }
  .form-legend{
    font-size:2rem;
    line-height:120%;
  }
  .text-field--search .input-text{
    font-size:1.6rem;
  }
  .tooltip{
    width:27rem;
    font-size:1.4rem;
    line-height:143%;
  }
  .form__fieldset.type-fieldset{
    gap:0.6rem;
  }
  .code-input{
    --input-height:4.8rem;
    width:4.8rem;
  }
  .promocode-field .text-input-wrapper{
    display:grid;
    grid-template-columns:1fr 13.8rem;
    column-gap:2rem;
  }
  .promocode-button{
    position:static;
  }
  .promocode-status-text{
    grid-column:span 2;
    grid-row:2;
  }
  .payment-button{
    margin-top:3rem;
  }
  .operator-form-actions{
    gap:3rem;
  }
  .dialog{
    --horizontal-margin:6.9rem;
    gap:3rem;
    padding:3rem;
  }
  .dialog-header{
    padding-bottom:2.8rem;
  }
  .dialog-header .h2{
    margin-bottom:3rem;
  }
  .dialog__close-button{
    top:3.2rem;
    right:3.2rem;
  }
  .dialog-content{
    padding-top:0;
  }
  .dialog-content .h2{
    margin-bottom:3rem;
  }
  .dialog-content .ol-list{
    gap:2rem;
    line-height:150%;
  }
  .dialog-content .hr{
    margin-top:3rem;
    margin-bottom:2.8rem;
  }
  .dialog-content .help{
    font-size:1.6rem;
    line-height:125%;
  }
  .dialog-warning__button{
    padding:0.8rem 2.2rem;
  }
  .dialog-warning__button{
    font-size:1.6rem;
  }
  .dialog-warning__button{
    margin-top:3rem;
  }
  dialog[data-name=guide][data-payment-status=error] .dialog-header{
    margin-bottom:-3rem;
  }
  dialog[data-name=warning] .warning{
    margin-top:0;
  }
  .tabs-navbar{
    margin-top:0;
  }
  .tab-panels-container{
    margin-top:3rem;
  }
  .accordion{
    gap:2rem;
  }
  .accordion-item{
    font-size:1.6rem;
    line-height:125%;
  }
  .accordion-panel{
    font-size:1.4rem;
    line-height:143%;
  }
  .accordion__show-more{
    margin-top:2rem;
  }
  .panel-accordion .accordion-panel{
    font-size:1.6rem;
    line-height:2rem;
  }
  .radio-fieldset--required:has(.input-radio.just-validate-error-field) .just-validate-error-label{
    margin-top:0.9rem;
  }
  .games-search{
    --input-height:4rem;
    flex:1;
    order:0;
    max-width:50rem;
  }
  .games-search__button{
    top:0.7rem;
  }
  .games-search__button .icon{
    font-size:2.5rem;
  }
  .search-form-results{
    gap:2rem;
    width:65.5rem;
    padding:3.2rem;
    margin-left:calc(50% - 0.4rem);
  }
  .search-form-result__link{
    gap:2rem;
  }
  .product-filter__button:first-child .product-filter__button-text,
  .message-type__button:first-child .product-filter__button-text{
    padding-right:2rem;
  }
  .product-filter__button-text,
  .message-type__button-text{
    padding-right:2.1rem;
  }
  .chat-wrapper{
    max-height:78.4rem;
  }
  .chat-wrapper--operator{
    max-height:106.4rem;
  }
  .chat{
    padding:1.2rem 3rem;
  }
  .datepicker-dropdown .dropdown-container{
    min-width:56.1rem;
    padding:3rem calc(3rem - var(--scrollbar-padding)) 3rem 3rem;
  }
  .twin-datepicker__container{
    flex-direction:row;
  }
  .container{
    --container-padding:4rem;
  }
  .content ol li::before{
    min-width:1.5rem;
  }
  .header-wrapper{
    gap:4rem;
  }
  .footer-wrapper{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    row-gap:3rem;
    width:68.8rem;
    margin:0 auto;
  }
  .footer__links{
    flex-direction:row;
    gap:0;
    width:100%;
  }
  .footer__link{
    display:inline-flex;
    align-items:center;
    min-height:2.2rem;
    padding-right:3rem;
    padding-left:3rem;
  }
  .footer__link::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0.1rem;
    height:100%;
    background-color:var(--color-dark-3);
  }
  .footer__link:first-child{
    padding-right:6rem;
    padding-left:0;
  }
  .footer__link:first-child::before{
    display:none;
  }
  .footer__link:last-child{
    padding-right:0;
    margin-right:-1rem;
  }
  .footer__vk{
    order:1;
    margin:0;
  }
  .panel.account-menu{
    padding:3rem 2rem;
  }
  .hero{
    min-height:40rem;
    padding:3rem;
    margin-bottom:3rem;
    background-image:url(../img/backgrounds/hero-clash-of-clans-md-1570w.jpg);
    background-image:url(../img/backgrounds/hero-clash-of-clans-md-1570w.webp);
  }
  .webp .hero{
    background-image:-webkit-image-set(url(../img/backgrounds/hero-clash-of-clans-md-1570w.webp) 1x, url(../img/backgrounds/hero-clash-of-clans-md-3140w.webp) 2x);
    background-image:image-set(url(../img/backgrounds/hero-clash-of-clans-md-1570w.webp) 1x, url(../img/backgrounds/hero-clash-of-clans-md-3140w.webp) 2x);
  }
  .hero::before{
    width:12.9rem;
    height:8rem;
  }
  .hero.hero--brawl-stars{
    background-image:url(../img/backgrounds/hero-brawl-stars-md-1570w.jpg);
    background-image:url(../img/backgrounds/hero-brawl-stars-md-1570w.webp);
    background-position:center bottom;
  }
  .webp .hero.hero--brawl-stars{
    background-image:-webkit-image-set(url(../img/backgrounds/hero-brawl-stars-md-1570w.webp) 1x, url(../img/backgrounds/hero-brawl-stars-md-3140w.webp) 2x);
    background-image:image-set(url(../img/backgrounds/hero-brawl-stars-md-1570w.webp) 1x, url(../img/backgrounds/hero-brawl-stars-md-3140w.webp) 2x);
  }
  .hero.hero--brawl-stars::before{
    width:9.8rem;
    height:8rem;
  }
  .hero.hero--clash-royale{
    background-image:url(../img/backgrounds/hero-clash-royale-962w.jpg);
    background-image:url(../img/backgrounds/hero-clash-royale-962w.webp);
    background-position:center top -8rem;
  }
  .webp .hero.hero--clash-royale{
    background-image:-webkit-image-set(url(../img/backgrounds/hero-clash-royale-962w.webp) 1x, url(../img/backgrounds/hero-clash-royale-962w.webp) 2x);
    background-image:image-set(url(../img/backgrounds/hero-clash-royale-962w.webp) 1x, url(../img/backgrounds/hero-clash-royale-962w.webp) 2x);
  }
  .hero.hero--clash-royale::before{
    width:18.4rem;
    height:8rem;
  }
  .hero.hero--frimzi{
    background-image:none;
  }
  .hero__title{
    font-size:3.6rem;
    line-height:139%;
  }
  .hero__frimzi-logo{
    width:49.7rem;
    height:14rem;
    margin-top:1.8rem;
    margin-right:1.7rem;
    margin-left:auto;
  }
  .panel{
    padding:3rem;
  }
  .panel.panel--text{
    padding-top:3.1rem;
  }
  .panel.panel--text h2{
    font-size:1.6rem;
  }
  .top-up-form .alert{
    margin-top:-1.2rem;
  }
  .product-fieldset{
    grid-template-columns:repeat(2, 1fr);
    min-height:14.9rem;
    padding-bottom:3rem;
    margin-bottom:-0.1rem;
  }
  .product-card__image{
    width:40px;
    height:40px;
  }
  .submit-field--top-up{
    margin-top:0;
  }
  .panel.info .hr{
    margin-bottom:0.9rem;
  }
  .info-tabs{
    margin-top:0;
  }
  .help{
    padding-top:0;
  }
  .contacts-panel .button{
    font-size:1.6rem;
    line-height:150%;
  }
  .promo-slider{
    padding-bottom:0;
  }
  .promo-slider .swiper-button-prev,
  .promo-slider .swiper-button-next{
    display:flex;
  }
  .promo-slider .swiper-pagination{
    display:none;
  }
  .games-wrapper{
    grid-template-columns:repeat(4, 1fr);
    row-gap:1.6rem;
  }
  .game__image img{
    aspect-ratio:157/184;
  }
  .game__title{
    margin-top:2rem;
    font-size:1.6rem;
    line-height:2rem;
  }
  .main:has(.pay-status){
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .pay-status{
    --horizontal-margin:3.9rem;
    margin:auto;
  }
  .pay-status .dialog-content .h2 + .ol-list{
    margin-top:3.1rem;
  }
  .pay-status--pending .dialog-content-pending{
    height:10.1rem;
  }
  .pay-status-success::before{
    margin:0 auto 3rem;
  }
  .pay-status-success__title{
    margin-bottom:1.1rem;
    font-size:2rem;
  }
  .pay-status-success__caption{
    margin-bottom:-0.1rem;
    font-size:1.6rem;
  }
  .pay-status--error > .hr{
    margin-top:-3.2rem;
  }
  .auth-cover__image{
    max-height:60rem;
  }
  .auth-cover__image img{
    object-position:center;
  }
  .auth-cover__content{
    font-size:1.8rem;
  }
  .auth-cover__title{
    font-size:2.8rem;
  }
  .auth-panel{
    padding:4.8rem 1.6rem;
  }
  .auth-form{
    gap:4rem;
  }
  .verification-code-form__header{
    text-align:left;
  }
  .verification-code-form__header .auth-panel__title{
    text-align:left;
  }
  .account-order-info,
  .panel.panel--info{
    padding:2rem 3rem;
  }
  .panel.panel--equal-padding{
    padding:3rem;
  }
  .account-order-info__item,
  .account-order-info__value{
    flex-direction:row;
  }
  .operator-order-info-form{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1279.98px){
  br.md-only{
    display:initial;
  }
}

@media (min-width: 768px) and (max-width: 800px){
  .hero{
    background-position:-5.1rem 0;
  }
}

@media (min-width: 768px) and (max-width: 960px){
  .hero.hero--brawl-stars{
    background-position:left -0.4rem bottom;
  }
  .hero.hero--clash-royale{
    background-position:0 -3.5rem;
  }
}

@media (min-width: 1280px){
  br.lg{
    display:initial;
  }
  .nav__sublist{
    position:absolute;
    left:50%;
    z-index:10;
    visibility:hidden;
    width:-webkit-max-content;
    width:max-content;
    max-width:30rem;
    height:initial;
    padding:2rem 4rem;
    border-radius:2rem;
    margin-top:1rem;
    background-color:var(--color-white);
    box-shadow:var(--shadow-menu);
    transform:translateX(-50%);
    transition:none;
  }
  .form{
    gap:2rem;
  }
  .tooltip{
    right:initial;
    left:100%;
    border-radius:2rem 2rem 2rem 0;
  }
  .breadcrumb{
    display:block;
  }
  .card-list-wrapper{
    padding:3rem;
    border-radius:2rem;
    background-color:var(--color-dark-2);
  }
  .card-list-wrapper .pagination-container{
    display:flex;
  }
  .card-list{
    display:table;
  }
  .card-list--orders .card-list-header__caption--datetime{
    min-width:12.9rem;
    width:19rem;
  }
  .card-list--orders .card-list-header__caption--email{
    min-width:19rem;
    width:19rem;
  }
  .card-list--orders .card-list-header__caption--ip{
    min-width:14rem;
    width:14rem;
  }
  .card-list--orders .card-list-header__caption--category{
    min-width:28rem;
  }
  .card-list--orders .card-list-header__caption--text{
    min-width:24rem;
    width:29.1%;
  }
  .card-list--orders .card-list-header__caption--status{
    min-width:21.9rem;
  }
  .card-list--orders .card-list-header__caption--amount{
    text-align:left;
  }
  .card-list--orders .card-list-header__caption--nickname{
    min-width:20rem;
    width:20rem;
  }
  .card-list--orders .card-list-header__caption--user-id{
    min-width:19rem;
    width:19rem;
  }
  .card-list--orders .card-list-header__caption--chat{
    min-width:5.4rem;
    width:5.4rem;
  }
  .card-list--orders .card__id{
    display:table-cell;
    padding-left:1rem !important;
  }
  .card-list--orders .card__id::before{
    display:none;
  }
  .card-list--deposit .card__id{
    display:none;
  }
  .card-list--deposit .card__datetime{
    padding-left:1rem !important;
  }
  .card-list--operator .card-list-header__caption--text{
    width:initial;
  }
  .card-list--operator:has(.card-list-header__caption--ip:not(.is-hidden)) .card__category{
    padding-left:2rem !important;
  }
  .card-list--order-items .card-list-header__caption--text{
    width:30.2%;
  }
  .card-list--order-items .card-list-header__caption--qty{
    width:14.7%;
  }
  .card-list--order-items .card-list-header__caption--category{
    width:19rem;
  }
  .card-list--order-items .card__description{
    padding-left:1rem !important;
  }
  .card-list--order-items .card__description::before{
    display:none;
  }
  .card-list--order-items .card__description-wrapper{
    flex-direction:row;
    align-items:center;
    min-height:4rem;
  }
  .card-list--order-items .card__category{
    padding-left:2rem !important;
    font-weight:400;
  }
  .card-list--order-items .panel.card:first-child td,
  .card-list--order-items .inner-card-row:first-child td{
    padding-top:2rem;
  }
  .card-list--order-items .panel.card:first-child td::before,
  .card-list--order-items .inner-card-row:first-child td::before{
    height:calc(100% - 3rem);
  }
  .card-list--operators .panel.card td{
    padding-top:1.9rem;
    padding-bottom:2rem;
  }
  .card-list--operators .panel.card:first-child td{
    padding-top:4rem;
  }
  .card-list--operators .card-list-header__caption{
    padding-bottom:1.8rem;
  }
  .card-list--operators .card-list-header__caption--operator-name{
    width:30.3%;
  }
  .card-list--operators .card__operator-name{
    padding-left:1rem !important;
  }
  .card-list--operators .card__operator-name::before{
    display:none;
  }
  .card-list-header{
    display:table-header-group;
  }
  .card-list-header__caption--category{
    width:28rem;
  }
  .panel.card,
  .inner-card-row{
    display:table-row;
    padding:0 1rem 0.9rem;
    border-bottom:1px solid var(--color-dark-3);
    border-radius:0;
  }
  .panel.card:first-child td,
  .inner-card-row:first-child td{
    padding-top:3rem;
  }
  .panel.card:first-child td::before,
  .inner-card-row:first-child td::before{
    height:calc(100% - 4rem);
  }
  .panel.card td,
  .inner-card-row td{
    position:relative;
    min-height:2.4rem;
    padding-top:1rem;
    padding-bottom:0.9rem;
    padding-left:1.9rem;
    border-bottom:1px solid var(--color-dark-3);
  }
  .panel.card td::before,
  .inner-card-row td::before{
    content:"";
    position:absolute;
    bottom:1rem;
    left:0;
    width:1px;
    height:calc(100% - 2rem);
    background-color:var(--color-dark-3);
  }
  .card__id{
    color:var(--color-grey-1);
  }
  .card__ip,
  .card__nickname,
  .card__user-id{
    color:var(--color-grey-1);
  }
  .card__category{
    padding-left:3rem !important;
  }
  .card__total{
    display:none;
  }
  .card__status{
    padding-right:2rem;
    text-align:left;
  }
  .card__status--item{
    display:none;
  }
  .card__amount{
    padding-left:0 !important;
    text-align:center;
  }
  .card__discount{
    column-gap:0.4rem;
  }
  .card__discount:has(.card__discount-value)::after{
    content:"|";
  }
  .card__discount-value{
    font-size:1.1rem;
    color:var(--color-grey-1);
  }
  .card__discount-percent{
    display:none;
  }
  .card__description{
    color:var(--color-grey-1);
  }
  .card__description-wrapper{
    flex-direction:column;
    gap:0;
  }
  .card__description-wrapper:has(.card__description-item:not(:only-child))::after{
    display:none;
  }
  .card__qty{
    font-weight:400;
  }
  .card__qty::before{
    content:"";
  }
  .card__datetime::after{
    display:none;
  }
  .card__chat-link{
    display:block;
  }
  .card__chat-link{
    --bg-color-hover:transparent;
    --bg-color-active:transparent;
    width:2.4rem;
    min-height:2.4rem;
    height:2.4rem;
    padding:0;
    border:none;
    border-radius:0;
  }
  .card__chat-link:hover .icon, .card__chat-link:focus-visible .icon{
    color:var(--color-primary);
  }
  .card__chat-link:active .icon{
    color:var(--color-blue-1);
  }
  .card__chat-link .button-text{
    display:none;
  }
  .card-list--bookmarks .card__category{
    padding-left:2rem !important;
  }
  .card:has(.card-bookmark__input:checked) td{
    background-image:linear-gradient(to bottom, transparent 0% var(--bg-offset), var(--color-green-2) var(--bg-offset) 100%);
  }
  .card__operator-categories-list{
    column-gap:3rem;
  }
  .filter__list.form{
    gap:1rem;
  }
  .datepicker-field > .icon{
    right:3rem;
    bottom:1.8rem;
  }
  .page-wrapper{
    padding-bottom:3rem;
  }
  .container{
    --container-padding:4.5rem;
  }
  .header-wrapper{
    justify-content:space-between;
    align-items:center;
    gap:clamp(2rem, 3.1vw, 5.9rem);
  }
  .header__controls .navbar + .header__auth-link{
    display:inline-flex;
  }
  .header__deposit{
    display:inline-flex;
  }
  .footer > .container::after{
    left:var(--container-padding);
    width:calc(100% - var(--container-padding) * 2);
  }
  .footer-wrapper{
    justify-content:flex-start;
    width:initial;
  }
  .footer__links{
    width:initial;
    margin-left:3.2rem;
  }
  .footer__link:first-child{
    padding-right:3rem;
    padding-left:3rem;
  }
  .footer__link:first-child::before{
    display:block;
  }
  .footer__link:last-child{
    padding-right:3rem;
  }
  .footer__vk{
    top:0;
    margin-left:auto;
  }
  .footer__copyright{
    order:-1;
  }
  .account-wrapper{
    flex-direction:row;
    align-items:flex-start;
  }
  .panel.account-menu{
    flex-shrink:0;
    width:100%;
    max-width:36.9rem;
  }
  .account-control-button--hide-lg{
    display:none;
  }
  .empty-notice{
    max-width:36.9rem;
  }
  .table-wrapper{
    padding-bottom:3rem;
  }
  .table-wrapper{
    width:calc(100vw - 53.9rem);
    max-width:109.1rem;
  }
  .hero{
    padding:5rem;
    background-position:0 -11.6rem;
  }
  .hero.hero--brawl-stars{
    background-position:center bottom -0.8rem;
  }
  .hero.hero--clash-royale{
    background-position:center top -0.2rem;
  }
  .hero.hero--frimzi{
    flex-direction:row-reverse;
    gap:1rem;
  }
  .hero__title{
    font-size:4rem;
    line-height:125%;
  }
  .hero__title br{
    display:none;
  }
  .hero__frimzi-logo{
    width:71rem;
    height:20rem;
    margin-top:4.8rem;
    margin-right:2.5rem;
  }
  .hero__fields{
    flex-direction:row;
  }
  .panels-wrapper{
    flex-direction:row;
  }
  .panel{
    align-self:flex-start;
  }
  .panel.top-up{
    flex-grow:1;
    max-width:76rem;
  }
  .top-up-form .alert{
    margin-top:-0.2rem;
  }
  .product-fieldset{
    margin-bottom:0.9rem;
  }
  .submit-field--top-up{
    margin-top:1rem;
  }
  .contacts-panel{
    flex:1 0 0;
  }
  .promo-slider .swiper-slide{
    max-width:37rem;
  }
  .promo-slide__cover{
    aspect-ratio:370/194;
  }
  .games-wrapper{
    grid-template-columns:repeat(6, 1fr);
    row-gap:2rem;
  }
  .game__image{
    border-radius:3.6rem;
  }
  .game__image img{
    aspect-ratio:240/280;
  }
  .auth-container{
    flex-direction:row;
    min-height:61.1rem;
  }
  .auth-cover__image{
    aspect-ratio:initial;
    max-height:initial;
  }
  .auth-panel{
    flex-shrink:0;
    align-self:stretch;
    width:50rem;
    padding:4.8rem 5rem;
  }
  .auth-form{
    gap:4rem;
  }
  .operator-order-info-form{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (min-width: 1630px){
  .header-wrapper::after{
    left:4.5rem;
    width:calc(100% - 9rem);
  }
}

@media (min-width: 1920px){
  body{
    height:100%;
  }
}

@media (max-width: 1279.98px){
  .nav__sublist > .nav__item:first-child{
    padding-top:2rem;
  }
  .navbar-toggler{
    position:relative;
    z-index:101;
    display:block;
    order:1;
    width:2.4rem;
    height:2.4rem;
    padding:0 0.4rem;
    border:0;
    background-color:transparent;
  }
  .navbar-toggler:hover .navbar-toggler__burger, .navbar-toggler:focus-visible .navbar-toggler__burger{
    --burger-color:var(--color-primary);
  }
  .navbar-toggler__burger{
    --burger-color:var(--color-white);
    display:block;
    width:1.6rem;
    height:0.2rem;
    background-color:var(--burger-color);
    transition:background-color var(--transition-medium-cubic);
  }
  .navbar-toggler__burger::after, .navbar-toggler__burger::before{
    content:"";
    position:absolute;
    left:0.4rem;
    width:1.6rem;
    height:0.2rem;
    background-color:var(--burger-color);
    transition:background-color var(--transition-medium-cubic), transform var(--transition-medium-cubic);
  }
  .navbar-toggler__burger::before{
    transform:translateY(-0.5rem);
  }
  .navbar-toggler__burger::after{
    transform:translateY(0.5rem);
  }
  .navbar-toggler[aria-expanded=true] .navbar-toggler__burger{
    --burger-color:var(--color-primary);
    background-color:transparent;
  }
  .navbar-toggler[aria-expanded=true] .navbar-toggler__burger::after, .navbar-toggler[aria-expanded=true] .navbar-toggler__burger::before{
    border-radius:0;
  }
  .navbar-toggler[aria-expanded=true] .navbar-toggler__burger::before{
    transform:rotate(45deg);
  }
  .navbar-toggler[aria-expanded=true] .navbar-toggler__burger::after{
    transform:rotate(-45deg);
  }
  .navbar{
    position:absolute;
    top:calc(100% + 1.8rem);
    right:0;
    z-index:100;
    display:flex;
    visibility:hidden;
    overflow:auto;
    flex-direction:column;
    width:30rem;
    height:-webkit-fit-content;
    height:-moz-fit-content;
    height:fit-content;
    border-radius:2rem;
    background-color:var(--color-dark-2);
    box-shadow:var(--shadow-dialog);
    opacity:0;
    transform:translateY(1rem);
  }
  .navbar--rtl{
    right:0;
    transform:translateX(100%);
  }
  .navbar--ltr{
    left:0;
    transform:translateX(-100%);
  }
  .navbar--ttb{
    transform:translateY(-100%);
  }
  .navbar--btt{
    top:initial;
    bottom:0;
    transform:translateY(100%);
  }
  .navbar.is-visible{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    transition:visibility var(--transition-medium-cubic), opacity var(--transition-medium-cubic), transform var(--transition-medium-cubic);
  }
  .navbar.is-visible.navbar--rtl, .navbar.is-visible.navbar--ltr{
    transform:translateX(0%);
  }
  .navbar.is-visible.navbar--ttb, .navbar.is-visible.navbar--btt{
    transform:translateY(0%);
  }
  .navbar .nav-container{
    display:flex;
    flex-grow:1;
    flex-direction:column;
    align-items:center;
    padding-top:0;
  }
  .navbar .nav__list{
    flex-direction:column;
    align-items:initial;
    gap:1.5rem;
    width:100%;
    padding:2rem 0;
  }
  .navbar .nav__link{
    --link-color:var(--color-white);
    --link-hover-color:var(--color-primary);
    gap:2rem;
    width:100%;
    padding:0 2rem;
  }
  .navbar .nav__link .icon{
    order:-1;
    margin-left:0;
    font-size:2.4rem;
  }
  body.is-fixed{
    position:fixed;
    width:100%;
  }
  body.has-scroll{
    overflow-y:scroll;
    overflow-x:unset;
  }
  .card-list--order-items .panel.card,
  .card-list--order-items .inner-card-row{
    gap:2rem;
  }
  .card-list--order-items .inner-card-row{
    column-gap:0;
    padding:2rem 0 0;
  }
  .card-list--order-items .inner-card-row .card__description{
    margin-top:0;
  }
  .card-list--order-items .inner-card-row .card__status{
    margin-right:0;
    transform:none;
  }
  .card-list--order-items .card__description{
    grid-row:3;
  }
  .card-list--order-items .card__amount{
    border-top:none !important;
    padding-top:0 !important;
  }
  .card-list--order-items .card__category{
    grid-row:1;
  }
  .card-list--order-items .card__status,
  .card-list--order-items .inner-card-row .card__status{
    grid-row:1;
  }
  .cards{
    display:flex;
    flex-grow:1;
    flex-direction:column;
    gap:2rem;
  }
  .card:has(.inner-card-row) > .card__amount{
    grid-column:span 2 !important;
    border-top:1px solid var(--color-dark-3);
    padding-top:1rem;
  }
  .inner-card-row{
    row-gap:0;
    padding:1rem 0 0;
    border-top:1px solid var(--color-dark-3);
    margin-top:-0.1rem;
  }
  .inner-card-row .card__status{
    grid-row:2/4;
    font-size:1.2rem;
  }
  .inner-card-row .card__description{
    margin-top:1rem;
  }
  .inner-card-row .card__chat{
    display:none;
  }
  .card__status{
    justify-self:flex-end;
    max-width:16rem;
    margin-right:-1rem;
    transform:translateX(-1rem);
  }
  .card__amount:has(.card__status--item){
    grid-column:span 2 !important;
    display:grid;
    grid-template-columns:1fr auto;
  }
  .card__discount-value{
    padding:0 1rem;
    border-radius:0.4rem;
    background-color:var(--color-red-1);
  }
  .card__datetime{
    grid-column:span 2 !important;
    display:inline-flex;
    column-gap:1rem;
    order:1;
  }
  .account-wrapper:has(.account-chat-wrapper) .account-menu{
    display:none;
  }
}

@media (max-width: 430.98px){
  br.md{
    display:none;
  }
  .pay-card{
    gap:1rem;
    min-height:6rem;
    font-size:1.4rem;
    line-height:2rem;
  }
  .pay-card::after{
    width:2rem;
    height:2rem;
  }
  .pay-card__icon{
    width:2rem;
    height:2rem;
  }
  .pay-card__icon .icon{
    font-size:2rem;
  }
  .dialog-header .h2{
    font-size:1.6rem;
  }
  .dialog__close-button{
    top:2rem;
  }
  .dialog-content .h2{
    font-size:1.6rem;
  }
  .dialog-content-pending{
    height:10rem;
  }
  dialog[data-name=warning] .dialog__close-button.close-button{
    top:2.2rem;
    right:2rem;
  }
  .search-form-results{
    padding:2rem 1rem;
  }
  .search-form-result__title{
    font-size:1.4rem;
  }
  .account-search__box{
    right:initial;
    left:0;
  }
  .is-active .account-search__box{
    width:43rem;
    max-width:calc(100vw - var(--container-padding) * 2);
  }
  .account-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .account-header:has(.account-header__back){
    flex-direction:row;
    align-items:center;
  }
  .product-card--static{
    min-height:7rem;
    padding:1.2rem 1.8rem;
  }
  .pay-status--success > .hr{
    margin-top:-0.7rem;
  }
  .pay-status > .button--primary{
    min-height:6.4rem;
  }
  .pay-status .field--warning{
    font-size:1.4rem;
  }
  .auth-cover__image{
    aspect-ratio:initial;
    height:20rem;
  }
  .profile-wrapper{
    flex-direction:column;
  }
  .profile-info{
    padding-left:1.1rem;
  }
  .profile-info__content{
    max-width:80%;
  }
}

@media (max-width: 430px){
  .vw-container{
    min-width:36rem;
    width:100%;
    margin-left:initial;
  }
}

@media (max-width: 360px){
  body{
    overflow-x:auto;
  }
}

@media (hover: hover) and (pointer: fine){
  .form__text-input:focus-visible:hover{
    border-color:var(--border-color-hover);
    background-color:var(--bg-color-hover);
  }
}
/*# sourceMappingURL=main.8ab7917b.css.map */