@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap);
@charset "UTF-8";
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
    box-sizing: border-box;
}

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

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

blockquote,
q {
    quotes: none;
}

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

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

body {
    font-size: 16px;
    min-width: 320px;
    position: relative;
    line-height: normal;
    font-family: "Roboto", sans-serif;
    font-weight: normal;
    background: #f6f6f6;
    color: #0e0e0e;
}

.bg-white {
    background: #fff;
}
html,
body {
    overflow-x: hidden;
    height: 100%;
}
html.no-scroll,
body.no-scroll {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.text-center {
    text-align: center;
}

a {
    display: block;
    text-decoration: none;
    transition: 0.3s ease;
    outline: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
a:hover,
a:focus {
    text-decoration: none;
}

input,
textarea,
select {
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 16px;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #f6f6f6;
    font-family: "Roboto", sans-serif;
    color: #0e0e0e;
    font-size: 16px;
    transition: 0.3s ease;
}
input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
    color: #676767;
}
input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
    color: #676767;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
    color: #676767;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #676767;
}
input:hover,
input:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus {
    outline: none;
    box-shadow: none;
    background: #f6f6f6;
    color: #0e0e0e;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    border: 1px solid transparent;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #f6f6f6 inset;
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
    color: #0e0e0e;
}
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid transparent;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #f6f6f6 inset;
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
    color: #0e0e0e;
    opacity: 1;
}
input:-webkit-autofill:hover::placeholder,
input:-webkit-autofill:focus::placeholder,
textarea:-webkit-autofill:hover::placeholder,
textarea:-webkit-autofill:focus::placeholder,
select:-webkit-autofill:hover::placeholder,
select:-webkit-autofill:focus::placeholder {
    color: #0e0e0e;
}

textarea {
    height: 152px;
    resize: none;
    padding: 10px 16px;
}

.form-row {
    margin: 0 0 32px;
    width: 100%;
}
.form-row:last-child {
    margin: 0;
}

.form-group {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.form-group .w-50 {
    width: calc(50% - 12px);
}

.input-title {
    margin: 0 0 8px;
    color: #9d9d9d;
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.input-description {
    width: 100%;
    margin: 8px 0 0;
    color: #676767;
    font-size: 12px;
}

.form .btn-view-password {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 16px;
}

.btn-view-password {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: none;
    stroke: #9d9d9d;
}
.btn-view-password .svg-icon-hide {
    display: none;
  }
  .btn-view-password.view .svg-icon {
    display: none;
  }
  .btn-view-password.view .svg-icon-hide {
    display: flex;
  }

.input-subtext {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 16px;
    color: #0e0e0e;
    font-size: 16px;
}

label {
    display: block;
    width: 100%;
    position: relative;
}

button,
.btn {
    outline: none;
    transition: 0.3s ease;
    cursor: pointer;
    box-shadow: none;
    font-family: "Roboto", sans-serif;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
}
button:hover,
button:focus,
.btn:hover,
.btn:focus {
    outline: none;
    box-shadow: none;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 30px;
}

.btn-md {
    padding: 7px 24px;
    height: 40px;
}

.btn-lg {
    padding: 13px 24px;
}

.btn-accent {
    color: #fff;
    background: #118ff2;
}
.btn-accent:hover {
    background: #0e72be;
    color: #fff;
}
.btn-accent:focus,
.btn-accent:active,
.btn-accent.active {
    background: #0c65a8;
    color: #fff;
}
.btn-accent.disabled {
    color: #fff;
    background: #676767;
    cursor: auto;
}

.btn-border {
    border: 1px solid #118ff2;
    color: #118ff2;
    background: transparent;
}
.btn-border:hover {
    color: #fff;
    border-color: #118ff2;
    background: #118ff2;
}
.btn-border:focus,
.btn-border:active,
.btn-border.active {
    border-color: #118ff2;
    background: #118ff2;
    color: #fff;
}
.btn-border.disabled {
    color: #676767;
    border-color: #676767;
}

.btn-white {
    background: #118ff2;
    color: #fff;
}
.btn-white:hover {
    color: #fff;
    background: #2645b5;
}
.btn-white:focus,
.btn-white:active,
.btn-white.active {
    background: #fff;
    color: #141414;
}
.btn-white.disabled {
    background: #9d9d9d;
    color: #393939;
}

.timer {
    display: inline-block;
    margin: 0 0 0 5px;
}
.svg-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
}

strong,
b {
    font-weight: bold;
    display: inline-block;
}

ul,
ol {
    padding: 0 0 0 20px;
}

.my-ul {
    list-style: none;
    padding: 0;
}

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

.content {
    flex: 1 0 auto;
}

.container {
    width: 100%;
    max-width: 1308px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 0 14px;
    margin: 0 auto;
}

.w-100 {
    width: 100%;
}

.row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0 -14px;
}

.col-3 {
    width: 33.3%;
    padding: 0 14px;
}

.col-6 {
    width: 60%;
    padding: 0 14px;
}

.col-5 {
    width: 50%;
    padding: 0 14px;
}
.col-10 {
    width: 100%;
    padding: 0 14px;
}

.col-4 {
    width: 40%;
    padding: 0 14px;
}

h1 {
    font-weight: bold;
    width: 100%;
    font-size: 36px;
    margin: 0 0 36px;
}

h2 {
    width: 100%;
    font-weight: bold;
    font-size: 28px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-40 {
    margin-bottom: 40px;
}

.m-auto {
    margin: auto;
}

.color-grey {
    color: #676767;
}

a.color-grey:hover {
    color: #118ff2;
}

.color-accent {
    color: #118ff2;
}

a.color-accent:hover {
    color: #118ff2;
}

.color-white {
    color: #fff;
}

a.color-white:hover {
    color: #0e0e0e;
}

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

.list-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.list-social li {
    margin: 0 32px 0 0;
}
.list-social li:last-child {
    margin: 0;
}
.list-social li a {
    width: 24px;
    height: 24px;
    fill: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-social li a:hover {
    fill: #9d9d9d;
}
.list-social li .vk-link {
    background: #fff;
    padding: 7px 3px;
    border-radius: 5px;
    fill: #118ff2;
}
.list-social li .vk-link:hover {
    background: #9d9d9d;
    fill: #0e0e0e;
}

.btn-group {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.btn-group .btn {
    margin: 0 16px 0 0;
}
.btn-group .btn:last-child {
    margin: 0;
}

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

.dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0);
    z-index: 3;
    max-width: 311px;
    width: 100%;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    filter: drop-shadow(0px 9px 24px rgba(0, 0, 0, 0.14));
}
.dropdown-menu__head {
    display: flex;
    align-items: center;
    padding: 20px;
    font-weight: 500;
    width: 100%;
    color: #0e0e0e;
}
.dropdown-menu__body {
    width: 100%;
}

.dropdown-cabinet {
    margin: 0 32px;
}
.dropdown-cabinet .dropdown-menu {
    top: calc(100% + 23px);
    min-width: 311px;
}

.dropdown-menu__link {
    display: flex;
    align-items: center;
    color: #0e0e0e;
    padding: 16px 20px;
    font-size: 14px;
    width: 100%;
    border-top: 1px solid #e1e1e1;
}
.dropdown-menu__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 16px 0 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
}
.dropdown-menu__link:hover {
    color: #0e0e0e;
    background: #f6f6f6;
}

.money-value {
    margin-left: auto;
}

.dropdown-toggle.active .dropdown-toggle__icon {
    transform: rotate(180deg);
}

.dropdown-select .dropdown-toggle {
    background: #ececec;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    color: #0e0e0e;
}
.dropdown-select .dropdown-toggle__icon {
    margin-left: auto;
    width: 16px;
    height: 16px;
    min-width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/images/arrow-select.svg?ec1261761257ab066b776a7e5c030719) no-repeat center;
    background-size: 100%;
}
.dropdown-select .dropdown-toggle.active {
    border-radius: 8px 8px 0 0;
}

.dropdown-select .dropdown-menu {
    max-width: none;
    border-radius: 0 0 8px 8px;
}

.dropdown-payment .dropdown-toggle__icon {
    margin: 0;
}

.input-sum {
    margin: 0 16px 0 auto;
    font-size: 16px;
    font-weight: 500;
}
.input-sum sup {
    margin: 0 0 0 3px;
    color: #0e0e0e;
}

.list-tags {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 14px;
}
.list-tags li {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
}
.list-tags li:after {
    content: "·";
    display: inline-block;
    margin: 0 8px;
}
.list-tags li:last-child:after {
    display: none;
}
.list-tags li a {
    color: #9d9d9d;
}
.list-tags li a:hover {
    color: #118ff2;
}

.btn-toggle {
    margin: 32px auto 0;
}
.text-decoration {
    text-decoration: underline;
}

.d-inline {
    display: inline-block;
}

.list-payment {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-left: auto;
}
.list-payment li {
    margin: 0 8px 0 0;
}
.list-payment li:last-child {
    margin: 0;
}
.list-payment li a {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 88px;
    width: 100%;
}

/*==========  section header ==========*/
header {
    flex: 0 0 auto;
    padding: 22.5px 0;
    color: #fff;
    background: #fff;
    margin: 0 0 68px;
}
header .container {
    align-items: center;
}
header .logo {
    margin: 0 32px 0 0;
}

.logo {
    color: #118ff2;
    font-size: 28px;
    font-weight: bold;
}

.search-wrapper {
    position: relative;
    width: 100%;
    max-width: 542px;
    margin: 0 auto 0 0;
}

.form-search {
    width: 100%;
    position: relative;
    border-radius: 20px;
}
.form-search input {
    height: 40px;
    background: #ececec;
    border-radius: 20px;
    padding: 0 32px 0 44px;
}
.form-search input:hover {
    background: #ececec;
}
.form-search.active input {
    border: none;
    border-radius: 20px 20px 0 0;
    background: #ececec;
}
.form-search.active .clear-search {
    display: flex;
}

.clear-search {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #676767;
    cursor: pointer;
    right: 16px;
    display: none;
    align-items: center;
    justify-content: center;
}

.btn-search {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background: transparent;
    fill: none;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    width: 15px;
    height: 15px;
    left: 18.5px;
    stroke: #676767;
}

.search-result {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 2;
    width: 100%;
    background: #e1e1e1;
    border: none;
    border-top: none;
    border-radius: 0 0 20px 20px;
}
.search-result__link {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #676767;
    font-size: 14px;
}
.search-result__link-icon {
    margin: 0 10.5px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #676767;
}
.search-result__link:hover {
    background: #118ff2;
    color: #fff;
}

.btn-burger {
    display: none;
    align-items: center;
    justify-content: space-between;
    fill: none;
    stroke: #118ff2;
    margin-left: auto;
    width: 18px;
    height: 14px;
    position: relative;
}
.btn-burger span {
    display: block;
    background: #118ff2;
    width: 100%;
    height: 2px;
    border-radius: 3px;
    transition: 0.3s ease;
}
.btn-burger.active span {
    position: absolute;
    left: 0;
    top: 7px;
}
.btn-burger.active span:nth-child(2) {
    width: 0;
}
.btn-burger.active span:first-child {
    transform: rotate(45deg);
}
.btn-burger.active span:last-child {
    transform: rotate(135deg);
}

.salesman-user-avatar,
.user-avatar,
.user-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: linear-gradient(163.36deg, #2295ff -2.71%, #0a7eda 88.5%);
    font-weight: 600;
    overflow: hidden;
    color: #fff;
}
.salesman-user-avatar,
.user-avatar img,
.user-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.user-name {
    margin-left: 16px;
}

.user-menu__link {
    display: flex;
    align-items: center;
    color: #0e0e0e;
}
.user-menu__link:hover .user-menu__val {
    color: #fff;
}

.user-menu__val {
    margin: 0 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e93b3b;
    color: #fff;
    border-radius: 40px;
    padding: 2px 12px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 14px;
    font-weight: 500;
    height: 26px;
}

/*==========  section header end  ==========*/
/*==========  section mobile-menu ==========*/
.mobile-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 85px);
    overflow-y: auto;
    z-index: 4;
    background: #fff;
    color: #fff;
    display: none;
    flex-direction: column;
}
.mobile-menu.active {
    display: flex;
}
.mobile-menu__head {
    width: 100%;
    display: flex;
    align-items: center;
    color: #0e0e0e;
    font-weight: normal;
    padding: 12px 16px;
}
.mobile-menu__body {
    width: 100%;
    margin: 0 0 30px;
}
.mobile-menu__footer {
    margin: auto 0 0;
    padding: 0 0 48px;
}
.mobile-menu__footer .btn {
    margin: 0 auto;
    max-width: 265px;
    width: 100%;
}
.mobile-menu .dropdown-menu__link {
    padding: 16px;
}
.mobile-menu .dropdown-menu__link:last-child {
    border-bottom: 1px solid #e1e1e1;
}

/*==========  section mobile-menu end  ==========*/

/*==========  section footer ==========*/
footer {
    color: #676767;
    background: #fff;
    padding: 22.5px 0;
    font-size: 14px;
    flex: 0 0 auto;
    margin: 34px 0 0;
}
footer .container {
    align-items: center;
}
footer .list-social {
    margin-left: auto;
}

.copyright {
    margin: 0 32px 0 0;
}

/*==========  section footer end  ==========*/
/*==========  section modal ==========*/
.overlay {
    z-index: 100;
    position: fixed;
    background-color: #0e0e0e;
    opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}

.modal__div {
    position: fixed;
    max-width: 735px;
    width: 100%;
    height: 100%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    overflow: auto;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    color: #0e0e0e;
}
.modal__div .input-title {
    color: #676767;
  }
.modal__div h2 {
    font-size: 32px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.modal__div-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 32px;
}
.modal__div-body {
    width: 100%;
    padding: 0 32px 40px;
}
.modal__div-footer {
    position: relative;
    width: 100%;
    padding: 32px;
    border-top: 1px solid #282828;
}
.modal__div-footer .btn-group .btn {
    margin: 0 24px 0 0;
}
.modal__div-footer .btn-group .btn:last-child {
    margin: 0;
}

.modal__close {
    stroke: #0e0e0e;
    fill: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
}

.modal__wrapper {
    background: #fff;
    box-shadow: 0px 4px 19px rgba(0, 0, 0, 0.16);
    border: none;
    border-radius: 22px;
    width: 100%;
    height: auto;
    overflow: auto;
    margin: 50px auto;
    box-sizing: border-box;
    position: relative;
}

.footer-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.footer-list li {
    margin: 0 32px 0 0;
}
.footer-list li:last-child {
    margin: 0;
}

.modal__div-body {
    width: 100%;
}

.info-finance-line {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 0 24px;
}
.info-finance-line:last-child {
    margin: 0;
}

.info-finance-line__item {
    color: #0e0e0e;
    font-size: 16px;
    width: 100%;
}
.info-finance-line__item.w-50 {
    width: 50%;
}
.info-finance-line__item span {
    color: #9d9d9d;
    margin: 0 0 8px;
    display: block;
    font-size: 14px;
}

.label-file {
    position: relative;
    display: flex;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    border: 1px solid #ffffff;
    border-radius: 30px;
    padding: 15px 16px;
}
.label-file__icon {
    fill: none;
    stroke: #fff;
    width: 16px;
    height: 16px;
    min-width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px 0 0;
}

.input-file {
    display: none;
}
/*==========  section modal end  ==========*/

@charset "UTF-8";
/*==========  section registration-section ==========*/
.registration-section {
    height: 100%;
}
.registration-section .container {
    height: 100%;
    align-items: center;
}

.registration-box {
    max-width: 724px;
    width: 100%;
    margin: 0 auto 30px;
    background: #ffffff;
    color: #0e0e0e;
    border-radius: 22px;
}
.registration-box .input-title,
.registration-box .input-description {
    color: #676767;
}
.registration-box:last-child {
    margin: 0 auto;
}
.registration-box__head {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 40px 40px 0;
    color: #0e0e0e;
}
.registration-box__head h2 {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 0 0;
}
.registration-box__footer {
    border-top: 1px solid #e1e1e1;
    padding: 32px 40px;
}
.registration-box__footer .box-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 14px;
    margin: 24px auto 0;
}
.registration-box__footer .box-text a {
    margin-left: 8px;
}
.registration-box__body {
    padding: 32px 40px 40px;
}
.registration-box__body .box-text {
    line-height: 24px;
}
.registration-box form button {
    max-width: 406px;
    width: 100%;
    margin: 0 auto;
}
.registration-box__item {
    border-bottom: 1px solid #cccccc;
}
.registration-box__item:last-child {
    border: none;
}
.registration-box .color-accent {
    color: #676767;
}

.registration-box-settings .registration-box__body {
    padding: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.registration-box-settings .text {
    margin: 0 auto 0 0;
    max-width: 415px;
    font-size: 24px;
    font-weight: bold;
}
.registration-box-settings .text p {
    line-height: 22px;
    margin: 8px 0 0;
    color: #6b6b6b;
    font-size: 14px;
    font-weight: normal;
}
.btn-confirm {
    max-width: 406px;
    width: 100%;
}

.registration-box__header {
    background-color: #f6f6f6;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 6px;
    word-break: break-word;
}

.date {
    width: 100%;
    margin: 6px 0 0;
    margin-bottom: 0px;
    color: #676767;
    font-size: 12px;
    margin-bottom: 38px;
}

.form-row-attention {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    background: #f6f6f6;
    border-radius: 8px;
}
.form-row-attention__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1.5px solid #118ff2;
    border-radius: 50%;
    stroke: #118ff2;
    fill: none;
    padding: 4px;
    margin: 0 9px 0 0;
}

/*==========  section registration-section end  ==========*/
/*==========  section settings-page ==========*/
.settings-page h1 {
    margin: 0 auto 36px;
}

.settings-page .form-password button {
    max-width: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 0 0 auto;
}

.page-wrapper {
    max-width: 724px;
    width: 100%;
    margin: 0 auto;
}

.form-row-profile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 0 32px;
    border-bottom: 1px solid #cccccc;
}
.form-row-profile .user-photo {
    margin: 0 32px 0 0;
    width: 68px;
    height: 68px;
    min-width: 68px;
}

.tabs {
    width: 100%;
}
.tabs .form-search {
    max-width: 299px;
}

.tabs__content {
    display: none;
}
.tabs__content.active {
    display: block;
}

.tabs__caption {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 32px;
    border-bottom: 1px solid #e1e1e1;
    font-size: 14px;
}
.tabs__caption li {
    cursor: pointer;
    position: relative;
    padding: 0 0 16px;
    margin: 0 32px 0 0;
    display: flex;
    align-items: center;
}
.tabs__caption li p {
    display: flex;
    align-items: center;
}
.tabs__caption li p:after {
    content: "·";
    display: inline-block;
    margin: 0 8px;
}
.tabs__caption li:last-child {
    margin: 0;
}
.tabs__caption li:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: #0e0e0e;
    transition: 0.3s ease;
}
.tabs__caption li.active:before {
    width: 100%;
}

.link-delete {
    margin-left: 24px;
}

/*==========  section settings-page end  ==========*/
/*==========  section popular-games ==========*/
.popular-games h1 {
    margin: 0 0 40px;
}

.search-result-wrapper h3 {
    font-size: 20px;
    font-weight: 500;
}

.popular-game-card {
    width: 100%;
    height: 100%;
    position: relative;
    background: #118ff2;
    border-radius: 22px;
    overflow: hidden;
}
.popular-game-card .list-tags li a {
    color: #fff;
}
.popular-game-card__img {
    width: 100%;
    height: 174px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popular-game-card__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.popular-game-card__body {
    padding: 50px 24px 15px;
    position: relative;
}
.popular-game-card__logo {
    position: absolute;
    z-index: 1;
    left: 24px;
    top: -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    padding: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popular-game-card__title {
    color: #fff;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 20px;
}
.popular-game-card__title:hover {
    color: #9d9d9d;
}

.games {
    margin: 52px 0 0;
}
.games h2 {
    margin: 0 0 40px;
}

.games-line {
    margin: 0 0 40px;
    border-bottom: 1px solid #202020;
}
.games-line:last-child {
    border: none;
    margin: 0;
}

.game-item {
    width: 100%;
}
.game-item__title {
    color: #118ff2;
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}
.game-item__title:hover {
    color: #118ff2;
}

/*==========  section end popular-games ==========*/
/*==========  section ads ==========*/
.main-block-section {
    margin: 0 0 83px;
}
.main-block-section .search-result-wrapper {
    margin: 32px 0 0;
}

.table {
    width: 100%;
    margin: 16px 0 0;
    font-size: 14px;
    border-spacing: 0 10px;
    border-collapse: inherit;
}

.thead,
.tbody {
    width: 100%;
}

.thead {
    color: #676767;
    text-align: left;
}
.thead .td {
    background: transparent;
}

.tbody {
    font-size: 16px;
}
.tbody .tr {
    border-radius: 16px;
    margin: 0 0 8px;
}
.tbody .tr:last-child {
    margin: 0;
}
.tbody .td {
    padding: 26px 23px;
}

.tr {
    vertical-align: middle;
    width: 100%;
}

.td {
    padding: 16px 23px;
    vertical-align: middle;
    background: #fff;
    color: #0e0e0e;
    border: 1px solid #e1e1e1;
    border-right: none;
    border-left: none;
}
.td:first-child,
td.first-td {
    border-radius: 16px 0 0 16px;
    -moz-border-radius: 16px 0 0 16px;
    -webkit-border-radius: 16px 0 0 16px;
    border-left: 1px solid #e1e1e1;
}
.td:last-child {
    border-radius: 0 16px 16px 0;
    -moz-border-radius: 0 16px 16px 0;
    -webkit-border-radius: 0 16px 16px 0;
    border-right: 1px solid #e1e1e1;
}

.thead {
    color: #676767;
    text-align: left;
}
.thead .td {
    background: transparent;
    color: #676767;
    border: none;
}

.td-salesman {
    width: 15%;
}

.td-price {
    width: 14%;
}

/* Local (non-LOLZ) marketplace listing row: title + description + seller + price columns together */
.with-description.tr .td-ad-title {
    width: 40%;
}
.with-description.tr .td-description {
    width: 25%;
}
.with-description.tr .td-salesman {
    width: 20%;
}
.with-description.tr .td-price {
    width: 15%;
}
.with-description.tr {
    align-items: stretch;
}
.with-description.tr .td {
    display: flex;
    align-items: center;
}

.main-block-item-title {
    color: #0e0e0e;
    line-height: 24px;
}
.main-block-item-title:hover {
    color: #118ff2;
}

.salesman-box {
    display: flex;
    align-items: center;
    background: #e6e6e6;
    border-radius: 39px;
    padding: 4px 10px 4px 4px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.salesman-box__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 10px 0 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
}
.salesman-box__photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}
.salesman-box.system {
    margin-bottom: 8px;
}
.status {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.status-off {
    background: #9d9d9d;
}

.status-on {
    background: #15d97b;
}

.form-search-no-active.active input {
    border-radius: 20px;
    border: 1px solid #373737;
}

/*==========  section ads end  ==========*/
/*==========  section deals ==========*/
.dropdown-order .dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
    border-radius: 8px;
    min-width: 183px;
}

.dropdown-toggle-dots {
    width: 24px;
    height: 24px;
    min-width: 24px;
    stroke: #676767;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropdown-toggle-dots.active {
    stroke: #fff;
}
.icon-arrow-price {
    width: 10px;
    height: 14px;
    fill: none;
    stroke: #676767;
    margin: 0 0 -3px 4px;
}
.icon-arrow-price:last-child {
    margin-left: 0;
}

.icon-close-price {
    width: 14px;
}

.filter-wrapper {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.dropdown-server {
    width: 250px;
}

.dropdown-server .dropdown-toggle {
    display: flex;
    align-items: center;
    background: #ececec;
    border-radius: 31px;
    padding: 5px 16px;
    height: 40px;
}

.dropdown-server .dropdown-menu {
    margin-top: 12px;
}

.dropdown-server .dropdown-toggle__icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0 0 0 8px;
    margin-left: auto;
    background: url(/images/arrow-select.svg?ec1261761257ab066b776a7e5c030719) no-repeat center;
    background-size: 100%;
}
.dropdown-server.active .dropdown-toggle__icon {
    display: none;
}
.dropdown-server.active .link-replace {
    color: #118ff2;
}
.dropdown-server.active .link-replace__icon {
    stroke: #118ff2;
}

.dropdown-price {
    margin: 0 0 0 16px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.dropdown-price .dropdown-toggle {
    display: flex;
    align-items: center;
    background: #ececec;
    border-radius: 31px;
    padding: 5px 16px;
    height: 40px;
    color: #0e0e0e;
}
.dropdown-price .dropdown-toggle__icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0 0 0 8px;
    background: url(/images/arrow-select.svg?ec1261761257ab066b776a7e5c030719) no-repeat center;
    background-size: 100%;
}
.dropdown-price .dropdown-menu {
    padding: 20px;
    border-radius: 8px;
    margin: 12px 0 0;
    min-width: 316px;
    left: 0;
    transform: none;
}
.dropdown-price.active .dropdown-toggle__icon {
    display: none;
}
.dropdown-price.active .btn-clear {
    display: flex;
}
.dropdown-price.active .link-replace {
    color: #118ff2;
}
.dropdown-price.active .link-replace__icon {
    stroke: #118ff2;
}
.dropdown-price .input-group input {
    background: #f6f6f6;
}
.dropdown-select-v2 .dropdown-toggle__icon {
    margin: 0;
}

.dropdown-select-v2 .input-subtext {
    margin: 0 16px 0 auto;
    position: relative;
    top: 0;
    right: 0;
    transform: none;
    font-size: 16px;
    font-weight: 500;
    color: #0e0e0e;
}
.dropdown-select-v2 .input-subtext span {
    margin: 0 0 0 4px;
    color: #0e0e0e;
}

.btn-clear {
    stroke: #fff;
    width: 16px;
    height: 16px;
    margin: 0 0 0 8px;
    display: none;
    align-items: center;
    justify-content: center;
}

.input-group {
    display: flex;
    align-items: flex-start;
}
.input-group label {
    width: 134px;
    margin: 0 8px 0 0;
}
.input-group label:last-child {
    margin: 0;
}
.input-group input {
    background: #fff;
    color: #676767;
    padding: 0 23px 0 16px;
}
.input-group input:focus {
    border: 1px solid #676767;
}

.link-replace {
    display: flex;
    align-items: center;
    margin: 20px 0 0 auto;
    color: #118ff2;
    font-size: 14px;
}
.link-replace.active {
    color: #118ff2;
}
.link-replace.active .link-replace__icon {
    stroke: #118ff2;
}
.link-replace__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    fill: none;
    stroke: #118ff2;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 0 8px 0 0;
}

.status-order {
    display: flex;
    align-items: center;
    background: #f6f6f6;
    border-radius: 20px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 4px 10px;
    line-height: 24px;
}
.status-order__icon {
    margin: 0 8px 0 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
}
.status-order-wait {
    color: #dd9f00;
    background: #faf3e0;
}
.status-order-wait .status-order-dot {
    background: #f2d17b;
}
.status-order-error {
    color: #e93b3b;
    background: #fce7e7;
}
.status-order-error .status-order-dot {
    background: #e06565;
}

.status-order-off {
    color: #9d9d9d;
}

.status-order-on {
    color: #00ae5b;
    background: #e0f7ec;
}
.status-order-on .status-order-dot {
    background: #15d97b;
}

.status-order-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px 0 0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #676767;
}

.td-salesman .status-order {
    display: none;
}

/*==========  section deals end  ==========*/
/*==========  section history ==========*/
.finance-box {
    background: #fff;
    padding: 32px;
    width: 100%;
    max-width: 626px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 16px;
    color: #0e0e0e;
}
.finance-box h4 {
    width: 100%;
    margin: 0 0 8px;
    color: #676767;
    font-size: 14px;
}
.finance-box__val {
    font-size: 32px;
    font-weight: bold;
    margin: 0 250px 0 0;
    line-height: 40px;
}

.history {
    margin: 48px 0 96px;
}

.table-history .td {
    width: 20%;
}

.table-history .td-status .salesman-box {
    display: none;
}
.table-history .td-description {
    width: 35%;
}
.total-sum-val {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 500;
}
.total-sum-val p {
    margin: 0 4px 0 0;
}

.percent {
    display: flex;
    align-items: center;
    margin: 8px 0 0;
    color: #676767;
    font-size: 14px;
}
.percent p {
    margin: 0 4px 0 0;
}

/*==========  section history end  ==========*/
/*==========  section  ==========*/
.attention-text {
    margin: 14px auto 0;
    color: #676767;
    font-size: 12px;
    line-height: 18px;
    max-width: 391px;
    width: 100%;
    text-align: center;
}

.description-text p {
    margin: 0 0 30px;
    word-break: break-word;
    white-space: pre-wrap;
    -moz-white-space: pre-wrap;
}
.description-text p:last-child {
    margin: 0;
}

.order-box {
    max-width: none;
    width: 100%;
    overflow: hidden;
}

.form-chat .message-input {
    margin: 0 auto 7px 0;
}

.form-chat .add-quote {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0;
}

.form-chat .registration-box__body {
    height: 375px;
    overflow-y: auto;
    width: calc(100% - 6px);
    padding: 30px 32px;
}
.form-chat .registration-box__body .text-info {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    color: #676767;
    font-size: 14px;
}
.form-chat .registration-box__body::-webkit-scrollbar {
    width: 6px;
    background: transparent;
    border-radius: 21px;
}
.form-chat .registration-box__body::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 21px;
    background: #2e2e2e;
}
.form-chat .registration-box__footer {
    padding: 16px 32px;
    margin: auto 0 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    width: calc(100% + 5px);
}

.form-chat .file-result__box:before {
    display: none;
}

.form-chat .file-result__box:after {
    width: calc(100% - 8px);
    opacity: 0.4;
}

.image-chat {
    overflow: hidden;
    margin: 0 8px 6px 0;
    border-radius: 8px;
    width: 79px;
    height: 75px;
    position: relative;
}
.image-chat:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/images/lupe.svg?8f496b63a5f40b34eb56864387851a19) no-repeat center;
    background-size: 100%;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 1;
}
.image-chat:after {
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    position: absolute;
    transition: 0.3s ease;
}
.image-chat:hover:after {
    opacity: 0.7;
}
.image-chat:hover:before {
    opacity: 1;
}
.image-chat img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.image-chat:last-child {
    margin-right: 0;
}
.message-input {
    width: calc(100% - 130px - 36px);
    padding: 0 0 0 16px;
}
.message-input input,
.message-input textarea {
    padding: 0;
    width: 100%;
    height: auto;
    font-size: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
}
.message-input textarea {
    resize: none;
    display: flex;
    align-items: center;
    height: 24px;
    max-height: 200px;
    transition: none;
    overflow-wrap: anywhere;
}

.error-box {
    display: flex;
    align-items: center;
    margin: 8px 0 0;
    color: #ff0000;
    font-weight: 500;
    font-size: 12px;
    width: 100%;
}
.error-box img {
    margin: 0 4px 0 0;
}

.quote-box {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 0 38px;
}
.quote-box:last-child {
    margin: 0;
}
.quote-box__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
}
.quote-box__photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.quote-box__content {
    width: calc(100% - 32px);
    padding: 0 0 0 8px;
}
.quote-box .date {
    width: 100%;
    margin: 6px 0 0;
    color: #676767;
    font-size: 12px;
    padding: 0 0 0 40px;
}

.quote-box-cat {
    position: relative;
    padding: 6px 12px;
    background: #f6f6f6;
    border-radius: 18px;
    z-index: 1;
    margin: 0 0 6px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 16px;
    line-height: 24px;
    word-break: break-word;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.quote-box-cat:before {
    content: "";
    position: absolute;
    background: url(/images/chat-decor.svg?9ec6d5538f482cac2224a454a47d941a) no-repeat center;
    background-size: 100%;
    left: -5px;
    bottom: 0;
    width: 16px;
    height: 20px;
    display: none;
}
.quote-box-cat:last-child {
    margin: 0;
}
.quote-box-cat:last-child:before {
    display: block;
}

.answer-box {
    justify-content: flex-end;
}
.answer-box .date {
    padding: 0;
    text-align: right;
}
.answer-box .quote-box-cat {
    background: #f6f6f6;
    color: #0e0e0e;
}
.answer-box .quote-box-cat:before {
    display: block;
    background: url(/images/answer-decor.svg?b6a47e89533f09f3e0fa8a1d723ffe73) no-repeat center;
    background-size: 100%;
    left: auto;
    right: -5px;
}

.btn-confirm {
    margin: 0 auto;
    max-width: 407px;
    width: 100%;
}

.title-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 36px;
}
.title-wrapper h1 {
    margin: 0 16px 0 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

/*==========  section end  ==========*/

/*==========  Notification  ==========*/
.notification-box {
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: space-between;

    top: 100px;
    right: 70px;
    word-wrap: break-word;
    background: #fff;
    border-radius: 16px;
    margin-bottom: 16px;

    padding: 16px 24px;
    width: 384px;
    color: white;
    fill: white;

    z-index: 1000;
}

.notification-box.success {
    background-color: #14a760;
}

.notification-box.error {
    background-color: #e15a5a;
}

.notification-box.attention {
    color: black;
    background-color: #f5cc64;
}

.notification-box.info {
    color: color;
    background-color: #37acee;
}

.notification-box-logo {
    display: flex;
    align-items: center;
}

.notification-box-chat {
    display: flex;
    flex-direction: column;

    justify-content: space-between;

    bottom: 100px;
    right: 70px;
    word-wrap: break-word;
    background: #f6f6f6;
    border-radius: 16px;
    margin-bottom: 16px;

    padding: 16px 24px;
    max-width: 384px;
    min-width: 384px;
    color: #393939;

    z-index: 1000;
}

.notification-box-chat__text {
    /* display: flex; */
    overflow: hidden;
}

.notification-box-chat__avatar-wrapper {
    display: flex;
    overflow: hidden;
}

.notification-box-chat__button-wrapper {
    display: block;
    text-align: center;
}

.notification-box-chat__button {
    background: #fff;
    color: #141414;

    padding: 9px 24px;
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    /* identical to box height, or 157% */

    /* bg */
    border-radius: 69px;

    color: #141414;
}

.notification-box-chat__title {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    width: 384px;
    /* identical to box height, or 150% */

    /* white */

    color: #ffffff;
}

.notification-box-chat__message {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 20px;
    text-overflow: ellipsis;
    padding-right: 12px;
    color: #9d9d9d;
}

.notification-box-chat-close {
    min-width: 45px;
    min-height: 45px;
}

.quote-box__photo.chat {
    min-width: 45px;
    min-height: 45px;
    margin-right: 15px;
}

.notification-box-chat-wrapper {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    padding: 1rem;
}

/*==========  section end  ==========*/

@media only screen and (max-width: 768px) {
    /* For mobile phones: */

    .notification-box-chat-wrapper {
        width: 100%;
        align-items: center;
        justify-content: center;

        position: fixed;
        left: 50%;
        top: 0;
        transform: translate(-50%, 0);
    }

    .notification-box {
        width: 90%;
    }

    .notification-box-chat {
        width: 90%;
    }
}

.chat-item {
    margin: 0 0 16px;
    width: 100%;
}
.chat-item .date {
    color: #676767;
    font-size: 12px;
    margin: 6px 0 0;
}
.chat-item:last-child {
    margin: 0;
}
.chat-item__wrapper {
    background: #f6f6f6;
    border-radius: 16px;
    padding: 16px;
}
.chat-item ul {
    padding: 0;
    list-style: none;
}
.chat-item .box-text {
    line-height: 24px;
}
.chat-item .box-text p {
    margin: 0 0 30px;
}
.chat-item .box-text p:last-child {
    margin: 0;
}
.chat-item .box-text strong {
    display: block;
    font-weight: 500;
}
.chat-item .salesman-box {
    margin: 0 0 8px;
    background: #fff;
}

.status-verification {
    padding: 4px 10px 4px 4px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background: #fff;
    border-radius: 39px;
    margin: 0 0 8px;
}
.status-verification .status-order__icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: #f6f6f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: none;
    stroke: #14a760;
    padding: 6px;
}

.chat-box-status .registration-box__footer {
    border: none;
}

.error-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.error-page h1 {
    text-align: center;
    line-height: 200px;
    margin: 0 auto;
    font-weight: bold;
    font-size: 260px;
}
.error-page .subtitle {
    margin: 40px auto;
    font-size: 24px;
    font-weight: bold;
}

.file {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    stroke: #676767;
    fill: none;
    margin: 0 0 10px;
}
.file .file-icon {
    width: 20px;
    height: 20px;
}

.inp-file {
    display: none;
}

.file-result {
    width: calc(100% + 8px);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 16px -4px 0;
}
.file-result__box {
    width: 88px;
    height: 80px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 8px 0;
    padding: 0 4px;
}

.file-result__box:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: calc(100% - 12px);
    height: 100%;
    background: #000;
    opacity: 0;
    border-radius: 8px;
    transition: 0.3s ease;
}
.file-result__box:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: url(/images/lupe.svg?8f496b63a5f40b34eb56864387851a19) no-repeat center;
    opacity: 0;
    transition: 0.3s ease;
    z-index: 1;
}
.file-result__box:hover:after {
    opacity: 0.5;
}
.file-result__box:hover:before {
    opacity: 1;
}
.file-result__box:last-child {
    margin: 0 0 8px;
}
.file-result__box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px;
}

.file-result-order {
    width: calc(100% + 12px);
    margin: 24px -6px 0;
}
.file-result-order .file-result__box {
    width: 136px;
    height: 124px;
    margin: 0 0 12px;
    padding: 0 6px;
}
.file-result-order .file-result__box:last-child {
    margin: 0;
}

.btn-delete-file {
    display: flex;
    align-items: center;
    justify-content: center;
    stroke: #fff;
    top: 2px;
    right: 6px;
    position: absolute;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    padding: 1px;
}

/*==========  section end  ==========*/
/*==========  authentication   ==========*/
.form-authentication h3 {
    margin: 0 0 24px;
    font-size: 16px;
    font-weight: 500;
}

.image-qr {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.number-qr {
    text-align: center;
    width: 100%;
    margin: 16px auto;
}

.btn-copy {
    margin: 0 auto;
}

.link-info {
    display: flex;
    align-items: center;
}
.link-info .svg-icon {
    stroke: #fff;
    fill: none;
    margin: 0 0 0 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.levels-game {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.levels-game-preview {
    width: calc(100% - 399px);
    padding: 0 12px 0 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: auto;
    max-height: 668px;
}
.levels-game-preview__item {
    width: calc(50% - 6px);
    height: 124px;
    margin: 0 0 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
    background: #e1e1e1 url(/images/bg-overlay1.png?795cec024ef85dfd034bd801230a9dca) no-repeat center;
    background-size: cover;
    border: 1.5px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
}
.levels-game-preview__item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.levels-game-preview__item.active {
    border: 1.5px solid #ffffff;
}
.levels-game-preview__item.active .level-value {
    background: #118ff2;
    color: #fff;
}

.level-value {
    position: absolute;
    text-align: center;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #e1e1e1;
    padding: 2px;
    font-size: 12px;
    line-height: 18px;
}

.levels-game-max {
    max-width: 399px;
    width: 100%;
}

.levels-game-box {
    width: 100%;
    height: 668px;
    position: relative;
    background: #fff;
    border-radius: 8px;
}
.levels-game-box__images {
    position: relative;
    width: 100%;
    height: 100%;
}
.levels-game-box__images .img-bg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 8px;
}

.list-weapon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 8px 0 0;
}
.list-weapon:last-child {
    margin: 16px 0 0;
}
.list-weapon li {
    margin: 0 0 8px 0;
}
.list-weapon li:last-child {
    margin: 0;
}
.list-weapon__item {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    background: #118ff2;
    border-radius: 8px;
}

.weapon-box {
    position: absolute;
    left: 16px;
    top: 16px;
    display: flex;
    align-items: flex-start;
}

.bonuses-box {
    position: absolute;
    top: 236px;
    right: 16px;
    display: flex;
    align-items: flex-start;
}

.list-bonuses {
    display: flex;
    flex-direction: column;
    margin: 0 8px 0 0;
}
.list-bonuses li {
    margin: 0 0 8px;
}
.list-bonuses li:last-child {
    margin: 0;
}
.list-bonuses:last-child {
    margin: 16px 0 0 0;
}

.bonuses-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background: #118ff2;
    fill: none;
    stroke: #fff;
    padding: 14px;
}
.bonuses-item svg {
    z-index: 2;
}
.bonuses-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    opacity: 0.5;
}
.bonuses-item.active svg {
    display: none;
}
.bonuses-item.active img {
    opacity: 1;
}

.tooltip {
    position: relative;
}
.tooltip:before {
    content: attr(data-text);
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin: 0 auto 16px;
    transform: translate(-50%, 0);
    background: #0e0e0e;
    border-radius: 36px;
    padding: 5px 16px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    transition: 0.3s ease;
    display: none;
    z-index: 999;
}
.tooltip:after {
    content: "";
    position: absolute;
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 21px;
    height: 10px;
    background: #0e0e0e;
    border-radius: 1px;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 100%;
    margin: 0 auto 8px;
    transition: 0.3s ease;
    display: none;
}
.tooltip:hover {
    background: #0e0e0e;
}
.tooltip:hover:before,
.tooltip:hover:after {
    display: block;
}

.levels-game-box__body {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.levels-game-box__head {
    width: 100%;
    text-align: center;
    background: #118ff2;
    font-size: 14px;
    padding: 5px;
    font-weight: 500;
    line-height: 22px;
    color: #fff;
}

.levels-game-box__text {
    width: 100%;
    padding: 16px;
    background: #e1e1e1;
    border-radius: 0px 0px 8px 8px;
}
.levels-game-box__text h3 {
    font-weight: 500;
    margin: 0 0 16px;
}
.levels-game-box__text .box-text {
    font-size: 14px;
    line-height: 22px;
}

.levels-game-box__it {
    margin: 16px 0;
    display: flex;
    align-items: center;
}
.levels-game-box__it-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    min-width: 54px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    margin: 0 16px 0 0;
}
.levels-game-box__it-text {
    font-size: 14px;
    line-height: 22px;
}
.levels-game-box__it-text p {
    font-weight: 500;
}
.levels-game-box__it-text span {
    color: #9d9d9d;
    display: block;
    margin: 4px 0 0;
}

/*==========  authentication end  ==========*/
/*==========  selected-additions  ==========*/
.selected-additions {
    width: 100%;
    margin: 24px 0 0;
}
.selected-additions__head {
    width: 100%;
    margin: 0 0 20px;
    font-weight: 500;
    color: #0e0e0e;
}
.selected-additions__body {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0 -6px;
}

.col-20 {
    width: 20%;
    padding: 0 6px;
}

.selected-additions-box {
    width: 100%;
    height: 124px;
    margin: 0 0 12px;
    position: relative;
    background: linear-gradient(180deg, #c36aff -46.77%, #4a2981 100%);
    border-radius: 8px;
    overflow: hidden;
}
.selected-additions-box__image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selected-additions-box__image img {
    max-height: 100%;
}
.selected-additions-box__text {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0px 0px 8px 8px;
    background: #ececec;
    text-align: center;
    color: #0e0e0e;
    font-size: 12px;
    padding: 4px;
}

.scroll-vertical {
    padding: 0 20px 0 0;
    overflow-y: auto;
    max-height: 260px;
}
.scroll-vertical::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-vertical::-webkit-scrollbar-thumb {
    background: #9d9d9d;
    border: none;
    border-radius: 12px;
}

.bg-orange-gradient {
    background: linear-gradient(180deg, #ff8b51 -46.77%, #773821 100%);
}

.bg-green-gradient {
    background: linear-gradient(180deg, #8fff62 -46.77%, #1b511c 100%);
}

.bg-blue-gradient {
    background: linear-gradient(180deg, #4da1eb -46.77%, #11407e 100%);
}

.bg-yellow-gradient {
    background: linear-gradient(180deg, #e6d81b -46.77%, #8d8513 100%);
}

.bg-default-gradient {
    background: linear-gradient(180deg, #c4c4c4 -46.77%, #5f5f5f 100%);
}

.bg-light-yellow {
    background: #f6f6f6;
}
/*==========  selected-additions end  ==========*/

/*==========  Desktop First  ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {
    .search-wrapper {
        max-width: 480px;
    }
    .dropdown-cabinet {
        margin: 0 15px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    header .logo {
        margin: 0 20px 0 0;
    }
    .search-wrapper {
        max-width: 280px;
    }
    .dropdown-cabinet {
        margin: 0 15px;
    }
    table,
    tbody,
    thead {
        display: block;
    }
    .tbody .td {
        padding: 8px 16px;
    }
    .td {
        background: transparent;
        padding: 8px 16px;
    }
    .td:first-child {
        border-radius: 0;
    }
    .td:last-child {
        border-radius: 0;
    }
    .tr {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        border-radius: 16px;
        border: 1px solid #e1e1e1;
        background: #fff;
    }
    .td {
        border: none;
    }
    .td:last-child {
        border: none;
    }
    .td:first-child {
        border: none;
    }
    thead .tr {
        background: transparent;
    }
    .td-description,
    .td-ad-title {
        width: 50%;
    }
    .td-salesman,
    .td-price {
        width: 20%;
        padding: 26px 10px;
    }
    .td-server {
        width: 10%;
    }
    .table-deals .thead {
        display: none;
    }
    .table-deals .td-date,
    .table-deals .td-order {
        width: 50%;
        color: #9d9d9d;
        font-size: 14px;
        padding: 16px 16px 8px;
    }
    .table-deals .td-order {
        padding: 16px 16px 8px;
        text-align: right;
    }
    .table-deals .td-order a {
        margin-left: auto;
        color: #9d9d9d;
    }
    .table-deals .td-description,
    .table-deals .td-ad-title {
        width: 100%;
        padding: 0 16px 8px;
    }
    .table-deals .td-sum {
        padding: 0 16px 16px;
        width: 100%;
    }
    .table-deals .td-sum {
        width: 100%;
    }
    .table-deals .td-status {
        border-top: 1px solid #cccccc;
        width: 100%;
        order: 1;
        padding: 16px;
    }
    .table-deals .td-settings {
        position: absolute;
        bottom: 20px;
        right: 16px;
        padding: 0;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
    .tr {
        position: relative;
    }
    .table-buy .td-salesman {
        border-top: 1px solid #cccccc;
        width: 100%;
        order: 1;
        padding: 16px;
        display: flex;
        align-items: center;
    }
    .table-buy .td-status {
        display: none;
    }
    .table-buy .td-sum {
        width: 100%;
        padding: 0 16px 16px;
    }
    .td-salesman .status-order {
        display: flex;
        margin-left: 8px;
    }
    .table-history .td {
        width: 100%;
    }
    .table-history .td-date,
    .table-history .td-number {
        width: 50%;
        font-size: 14px;
        padding: 16px 16px 8px;
        color: #9d9d9d;
    }
    .table-history .td-number {
        text-align: right;
    }
    .table-history .td:nth-child(3) {
        padding: 0 16px 16px;
    }
    .table-history .td-method {
        display: none;
    }
    .table-history .td-status {
        padding: 16px;
        border-top: 1px solid #cccccc;
    }
    .table-history .td-status {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .table-history .td-status .salesman-box {
        display: flex;
        margin: 0 8px 8px 0;
    }
    .table-history .thead {
        display: none;
    }
    .table-history .td-sum {
        font-weight: 500;
        font-size: 20px;
    }
    .history {
        margin: 40px 0 42px;
    }
    .col-4,
    .col-6 {
        width: 100%;
    }
    .order-box {
        max-width: none;
    }
    .footer-list li {
        margin: 0 10px 0 0;
    }
    .list-payment li a {
        max-width: 50px;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
    .search-wrapper {
        max-width: 220px;
    }
    header .logo {
        margin: 0 20px 0 0;
    }
    header .btn-group {
        display: none;
    }
    .btn-burger {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
    }
    .dropdown-cabinet {
        margin-right: 0;
    }
    .registration-box {
        max-width: 500px;
        border-radius: 16px;
    }
    .registration-box__head {
        padding: 24px 16px 0;
    }
    .registration-box__body {
        padding: 32px 16px;
    }
    .registration-box__footer {
        padding: 24px 16px;
    }
    .settings-page h1 {
        margin: 0 auto 24px;
    }
    .settings-page .form-password button {
        margin: 0 auto;
    }
    h1 {
        font-size: 28px;
    }
    .modal__div,
    .page-wrapper {
        max-width: 500px;
    }
    .col-3 {
        width: 50%;
    }
    .games {
        margin: 24px 0 0;
    }
    .games h2 {
        margin: 0 0 24px;
    }
    .games-line {
        margin: 0 0 32px;
    }
    .main-block-section {
        margin: 0 0 26px;
    }
    .thead {
        display: none;
    }
    .table {
        margin: 24px 0 0;
    }
    .table-ads .td {
        padding: 16px;
    }
    .table-ads .td-server {
        width: 10%;
    }
    .table-ads .td-description,
    .table-ads .td-ad-title {
        width: 70%;
    }
    .table-ads .td-salesman {
        order: 1;
        width: 100%;
        padding: 16px;
        border-top: 1px solid #e1e1e1;
    }
    .tr:before {
        display: block;
        content: attr(data-table);
        margin: 0 0 8px;
        width: 100%;
        color: #9d9d9d;
        font-size: 14px;
        padding: 16px 16px 0;
    }
    .table-deals .tr:before {
        display: none;
    }
    .table-deals .td-settings {
        padding: 0;
    }
    .table-deals .td-sum {
        padding-top: 0;
    }
    .table-history .tr:before {
        display: none;
    }
    .td-sum {
        font-weight: 500;
        font-size: 20px;
    }
    .form-chat .registration-box__body {
        padding: 30px 16px;
    }
    .registration-box-settings .registration-box__body {
        padding: 24px 16px;
    }
    .registration-box-settings .text {
        width: 100%;
        max-width: none;
        margin: 0 0 16px;
    }
    .order-box {
        max-width: none;
    }
    .list-payment {
        flex-direction: column;
        align-items: flex-end;
    }
    .list-payment li {
        margin: 0 0 8px;
    }
    .list-payment li:last-child {
        margin: 0;
    }
    .footer-list {
        max-width: 400px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 680px) {
    .wrapper-registration .search-wrapper {
        display: none;
    }
    .wrapper-registration header {
        background: #1c1c1c;
        padding: 9px 0;
    }
    .wrapper-registration footer {
        display: none;
    }
    body {
        background: #141414;
    }
    header {
        border: none;
        padding: 9px 0 0;
    }
    header .btn-group {
        display: none;
    }
    .search-wrapper {
        max-width: none;
        order: 1;
        width: 100%;
        margin: 9px 0;
    }
    .btn-burger {
        margin-left: auto;
    }
    .user-menu,
    .dropdown-cabinet {
        display: none;
    }
    .col-3 {
        width: 100%;
    }
    .finance-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 0;
    }
    .finance-box h4 {
        padding: 0 16px;
        margin: 0 0 8px;
    }
    .finance-box__val {
        width: 100%;
        padding: 0 16px 24px;
        margin: 0;
        border-bottom: 1px solid #cccccc;
    }
    .finance-box .btn {
        margin: 24px auto 0;
    }
    .filter-wrapper .form-search {
        width: 100%;
        max-width: none;
    }
    .form-search {
        margin-bottom: 16px;
    }
    .dropdown-price {
        margin: 16px 0 0;
    }
    .copyright,
    .footer-list li {
        margin: 0 15px 0 0;
    }
    .levels-game-max {
        max-width: 311px;
    }
    .levels-game-preview {
        width: calc(100% - 311px);
    }
    .mobile-menu {
        height: calc(100% - 100px);
    }
}

@media only screen and (max-width: 786px) {
    header {
        margin: 0 0 24px;
    }
    .container {
        padding: 0 16px;
    }
    .btn-group-user {
        display: none;
    }
    .wrapper-registration header {
        margin: 0;
    }
    .wrapper-registration .registration-box {
        background: transparent;
    }
    .wrapper-registration .registration-box__head {
        padding: 0;
    }
    .wrapper-registration .registration-box__body {
        padding: 0;
        margin: 32px 0;
    }
    .wrapper-registration .registration-box__footer {
        padding: 0;
        border: none;
    }
    .form-row {
        margin: 0 0 24px;
    }
    footer {
        margin: 33px 0 0;
    }
    footer .container {
        align-items: flex-start;
    }
    .footer-list {
        align-items: flex-start;
        flex-direction: column;
    }
    .footer-list {
        width: 70%;
    }
    .footer-list li {
        width: 100%;
        margin: 0 0 12px;
    }
    .footer-list li:last-child {
        margin: 0;
    }
    .copyright {
        width: 100%;
        order: 1;
        margin: 12px 0 0;
    }
    .page {
        padding: 24px 0 0;
    }
    h1 {
        margin: 0 0 20px;
    }
    h2 {
        font-size: 22px;
    }
    .settings-page .form-password button {
        width: 100%;
    }
    .modal__div {
        max-width: 345px;
    }
    .modal__div h2 {
        font-size: 22px;
    }
    .modal__div-head {
        padding: 24px 16px 32px;
    }
    .modal__div-body {
        padding: 0 16px 32px;
    }
    .modal__div-footer {
        padding: 24px 16px;
    }
    .modal__wrapper {
        border-radius: 16px;
    }
    .btn-close-modal {
        display: none;
    }
    .modal-form button {
        max-width: none;
        width: 100%;
    }
    .page-wrapper {
        max-width: 343px;
    }
    .tabs__caption {
        margin: 0 0 24px;
    }
    .tabs__caption li {
        padding: 0 0 12px;
        margin: 0 28px 0 0;
    }
    .add-photo {
        display: none;
    }
    .link-delete {
        margin: 0;
        height: 40px;
        border: 1px solid #fff;
        border-radius: 69px;
        padding: 7px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .form-row-profile .user-photo {
        margin: 0 16px 0 0;
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
    .mb-40 {
        margin-bottom: 24px;
    }
    .table-ads .td {
        width: 100%;
    }
    .table-ads .td:first-child,
    .table-ads .td-description {
        display: none;
    }

    .table-ads .td:nth-child(2) {
        width: 100%;
        padding: 0 16px;
    }
    /* .table-ads .td:nth-child(4) {
        width: 100%;
        margin: 8px 0 0;
        padding: 0 16px 16px;
    } */
    .btn-toggle {
        margin: 16px auto 0;
    }
    .chat-box h2 {
        display: none;
    }
    .form-chat .registration-box__body {
        height: 324px;
    }
    .title-wrapper {
        margin: 0 0 24px;
    }
    .title-wrapper h1 {
        margin: 0 0 8px;
        width: 100%;
    }
    .chat-box-status h2 {
        display: block;
    }
    .error-page h1 {
        font-size: 150px;
        line-height: 128px;
    }
    .error-page .subtitle {
        margin: 24px auto;
        font-size: 16px;
        font-weight: 500;
    }
    .file-result__box {
        width: 68px;
        height: 60px;
    }
    .table-ads .td-salesman {
        order: 1;
        width: 100%;
        padding: 16px;
        border-top: 1px solid #cccccc;
    }

    .info-finance-line:last-child .w-50 {
        width: 100%;
    }
    .info-finance-line:last-child .info-finance-line__item {
        margin: 0 0 24px;
    }
    .info-finance-line:last-child .info-finance-line__item:last-child {
        margin: 0;
    }
    .file-result-order {
        margin: 16px -4px 0;
        width: calc(100% + 8px);
    }
    .file-result-order .file-result__box {
        width: 106px;
        height: 98px;
        padding: 0 4px;
        margin: 0 0 8px;
    }
    .file-result-order .file-result__box:last-child {
        margin: 0;
    }
    .modal__div-body .file-result__box {
        width: 106px;
        height: 98px;
        padding: 0 4px;
        margin: 0 0 8px;
    }
    .levels-game-max {
        max-width: none;
    }
    .levels-game-preview {
        width: 100%;
        padding: 0;
    }
    .levels-game-preview__item {
        width: calc(33.3% - 6px);
        display: none;
    }
    .levels-game-preview__item:nth-child(-n + 9) {
        display: block;
    }
    .col-20 {
        width: 33.3%;
      }
}

@media only screen and (max-width: 480px) {
    .levels-game-preview__item {
        height: 98px;
    }
    .levels-game-box {
        height: 690px;
    }
    .image-chat {
        width: 60px;
        height: 60px;
    }
}

@media only screen and (max-width: 420px) {
    .col-20 {
      width: 50%;
    }
  }

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.25s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  top: 40%;
  opacity: 0;
}

.form-row-attention {
  margin-bottom: 0.5rem;
}
.form-row-attention.error {
  background: #ffe8e8;
  color: #9f3e3e;
}
.form-row-attention.error .form-row-attention__icon {
  border-color: #9f3e3e;
  stroke: #9f3e3e;
}
.form-row-attention.success {
  background: #d9f9b9;
  color: #334225;
}
.form-row-attention.success .form-row-attention__icon {
  border-color: #334225;
  stroke: #334225;
}

.form-attention-container {
  margin-bottom: 32px;
}

.mobile-btn-login {
  display: none;
  margin-left: auto;
}
@media (max-width: 680px) {
  .mobile-btn-login {
    display: block;
  }
}

.link {
  cursor: pointer;
}

.loader-container {
  position: relative;
  width: 28px;
  height: 28px;
}
.loader-container .loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid #222222;
  border-radius: 50%;
  border-top-color: #393939 !important;
  -webkit-animation: loader 0.7s infinite linear;
          animation: loader 0.7s infinite linear;
}
.loader-container.white .loader {
  border-color: #fff;
  border-top-color: transparent !important;
}
.loader-container.orange .loader {
  border-color: #118FF2;
  border-top-color: #9bc5e5 !important;
}

@-webkit-keyframes loader {
  from {
    transform: rotate(0);
    --webkit-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
    --webkit-transform: rotate(1turn);
    -o-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    -moz-transform: rotate(1turn);
  }
}

@keyframes loader {
  from {
    transform: rotate(0);
    --webkit-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
    --webkit-transform: rotate(1turn);
    -o-transform: rotate(1turn);
    -ms-transform: rotate(1turn);
    -moz-transform: rotate(1turn);
  }
}
.mobile-menu__head {
  color: #fff;
}

.salesman-user-avatar {
  min-width: 24px;
  height: 24px;
  width: 24px;
}

.answer-box .quote-box__content {
  width: auto;
  text-align: right;
}
.answer-box .quote-box__content .quote-box-cat {
  margin-left: auto !important;
}

.w-50 {
  max-width: 100%;
}

.d-flex {
  display: flex;
  justify-content: space-between;
}

.blurred-background {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  --webkit-backdrop-filter: blur(2px);
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.blurred-background .blurred-background-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.blurred {
  filter: blur(2px);
  -ms-filter: blur(2px);
  -webkit-filter: blur(2px);
}

.progress-bar-on-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #202020;
}
.progress-bar-on-top .progress {
  background: #118FF2;
  position: absolute;
  top: 0;
  left: 0;
  width: 24%;
  height: inherit;
}

.withoutCount p::after {
  display: none !important;
}

.search-result {
  display: block;
}

.search-result__link:last-child {
  border-radius: 0 0 20px 20px;
}

.text-gray {
  color: #9d9d9d;
}

.cursor-pointer {
  cursor: pointer;
}

.search-result {
  max-height: 150px;
  overflow: auto;
}

.user-menu {
  display: flex;
  gap: 1rem;
}

em {
  font-style: italic;
}

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: #F6F6F6;
}
.loader-wrapper .loader-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.finance-box__val {
  margin-bottom: 0.6rem;
}

.dropdown-menu__body {
  max-height: 250px;
  overflow: auto;
}

.text-orange {
  color: #118FF2;
}