@charset "UTF-8";





.pt-5 {
  padding-top: 5px !important;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-200 {
  padding-top: 200px;
}

.pt-225 {
  padding-top: 225px;
}

.pt-250 {
  padding-top: 250px;
}

.pt-300 {
  padding-top: 300px;
}

.pt-350 {
  padding-top: 350px;
}

.pb-5 {
  padding-bottom: 5px !important;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pb-225 {
  padding-bottom: 225px;
}

.pb-250 {
  padding-bottom: 250px;
}

.pb-300 {
  padding-bottom: 300px;
}

.pb-350 {
  padding-bottom: 350px;
}

/*-----------------------
    Index Header
-----------------------*/
.index-header {
  position: fixed;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  background: #000;
  background: #fff;
  height: 14vh;
  padding: 0 !important;
  width: 100%;
}
.index-header .index-header-nav .index-header-link {
  color: #000;
}
.index-header.sticky-bar {
  transition: 0.5s;
}
.index-header.sticky-bar.nav-sticky {
  height: 5em;
  box-shadow: 0px 10px 40px 0px rgba(11, 34, 56, 0.05);
  background: #fff;
}
.index-header.sticky-bar.nav-sticky .index-header-nav .index-header-link {
  color: #000;
}
.nav-is-white .index-header {
  background: #fff;
}
.nav-is-white .index-header .index-header-nav .index-header-link {
  color: #000;
}

@media only screen and (max-width: 767px) {
  .index-header {
    padding: 48px 0 24px;
    border: none;
  }
}
body.dark .index-header {
  border-color: #353945;
}

.index-header-center {
  display: flex;
  align-items: center;
  padding: 0 32px;
  width: 100%;
}

.index-header-upload {
  margin-right: 12px;
}

@media only screen and (max-width: 767px) {
  .index-header-upload {
    display: none;
  }
}
.index-header-logo {
  position: relative;
  z-index: 12;
  display: inline-block;
  flex-shrink: 0;
  width: 128px;
  margin-right: 32px;
}
.index-header-logo img {
  max-width: 85px;
}

@media only screen and (max-width: 1179px) {
  .index-header-logo {
    margin-right: auto;
  }
}
.index-header-wrapper {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.index-header-wrapper .index-header-button {
  display: none;
}
.index-header-wrapper.visible .index-header-nav .index-header-link {
  color: #000;
}

@media only screen and (max-width: 767px) {
  .index-header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    min-height: calc(var(--vh, 1vh) * 100);
    margin: 0;
    padding: 140px 32px 40px;
    box-shadow: 0px 64px 64px rgba(31, 47, 70, 0.2);
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
  }

  body.dark .index-header-wrapper {
    background: #141416;
  }

  .index-header-wrapper.visible {
    visibility: visible;
    opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
  .index-header-wrapper .index-header-button {
    display: inline-flex;
    margin-top: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .index-header-wrapper .index-header-connect {
    display: none !important;
  }
}
.index-header-nav {
  display: flex;
  margin-right: auto;
  border-left: 1px solid #E6E8EC;
}

@media only screen and (max-width: 767px) {
  .index-header-nav {
    display: flex;
    flex-direction: column;
    margin: 0 0 40px;
    border: none;
  }
}
body.dark .index-header-nav {
  border-color: #353945;
}

.index-header-nav .index-header-link {
  margin-left: 32px;
  line-height: 40px;
  transition: color 0.2s;
  font-size: 14px;
  counter-increment: nav-counter;
  position: relative;
  font-weight: 600;
}
.index-header-nav .index-header-link:hover, .index-header-nav .index-header-link.active {
  color: #3772FF;
}
.index-header-nav .index-header-link::before {
  display: inline-block;
  font-weight: 700;
  width: auto;
  right: -1px;
  top: 4px;
  line-height: 0.6em;
  font-size: 0.6em;
  position: absolute;
  height: auto;
  opacity: 0.75;
}
@media (max-width: 768px) {
  .index-header-nav .index-header-link::before {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .index-header-nav .index-header-link {
    margin-left: 0;
    font-size: 24px;
    line-height: 64px;
    padding: 0 !important;
  }
}
@media only screen and (max-width: 767px) {
  .index-header-nav .index-header-link:nth-child(n+3) {
    display: block;
  }
}
.index-header-search {
  position: relative;
  flex-shrink: 0;
  width: 256px;
  margin-right: 24px;
}

@media only screen and (max-width: 1023px) {
  .index-header-search {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .index-header-search {
    display: block;
    width: 100%;
    margin: auto 0 0;
  }
}
.index-header-input {
  width: 100%;
  height: 40px;
  padding: 0 42px 0 16px;
  background: none;
  border: 2px solid #E6E8EC;
  border-radius: 8px;
  font-family: "JetBrains Mono", sans-serif;
  font-size: 12px;
  line-height: 1.66667;
  transition: border-color 0.2s;
}
.index-header-input::-webkit-input-placeholder, .index-header-input::-moz-placeholder, .index-header-input:-ms-input-placeholder, .index-header-input::-ms-input-placeholder, .index-header-input::placeholder {
  color: #777E90;
}

body.dark .index-header-input {
  border-color: #353945;
  color: #FCFCFD;
}

.index-header-input:focus, body.dark .index-header-input:focus {
  border-color: #777E90;
}

.index-header-result {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
}
.index-header-result .icon {
  width: 20px;
  height: 20px;
  fill: #777E90;
  transition: fill 0.2s;
}
.index-header-result:hover .icon {
  fill: #3772FF;
}

.index-header-item {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .index-header-item {
    position: static;
  }
}
.index-header-item_notification {
  display: none;
  margin-right: 24px;
}

@media only screen and (max-width: 767px) {
  .index-header-item_notification {
    margin-right: 20px;
  }
}
.index-header-item_notification .index-header-head {
  position: relative;
  width: 40px;
  height: 40px;
}
.index-header-item_notification .index-header-head .icon {
  width: 24px;
  height: 24px;
  fill: #777E90;
  transition: fill 0.2s;
}
.index-header-item_notification .index-header-head:hover .icon {
  fill: #3772FF;
}
.index-header-item_notification .index-header-head.active:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #45B26B;
}

.index-header-item_user .index-header-head {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 16px 4px 4px;
  border-radius: 20px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.2s;
}

@media only screen and (max-width: 767px) {
  .index-header-item_user .index-header-head {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
body.dark .index-header-item_user .index-header-head {
  box-shadow: inset 0 0 0 2px #353945;
}

@media only screen and (max-width: 767px) {
  body.dark .index-header-item_user .index-header-head {
    box-shadow: none;
  }
}
@media only screen and (max-width: 767px) {
  .index-header-item_user .index-header-head:hover {
    box-shadow: none;
  }
}
@media only screen and (max-width: 767px) {
  body.dark .index-header-item_user .index-header-head:hover {
    box-shadow: none;
  }
}
.index-header-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.index-header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.index-header-wallet {
  margin-left: 12px;
}

@media only screen and (max-width: 767px) {
  .index-header-wallet {
    display: none;
  }
}
body.dark .index-header-wallet {
  color: #FCFCFD;
}

.index-header-currency {
  color: #45B26B;
}

.index-header-body {
  position: absolute;
  left: 50%;
  box-shadow: 0px 16px 64px 0 rgba(31, 47, 70, 0.4);
  background: #FCFCFD;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transform-origin: 50% 50px;
  will-change: transform;
  transition: all 0.4s;
}
.index-header-body:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 32px;
  height: 13px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg width='32' height='13' viewBox='0 0 32 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3432 2.65685L0 13H32L21.6569 2.65686C18.5327 -0.467339 13.4673 -0.467344 10.3432 2.65685Z' fill='%23FCFCFD'/%3E%3C/svg%3E%0A") no-repeat 100% 50%/100% auto;
}

@media only screen and (max-width: 767px) {
  .index-header-body {
    left: 16px;
    right: 16px;
    box-shadow: 0px 16px 32px 0 rgba(31, 47, 70, 0.4);
  }
}
@media only screen and (max-width: 767px) {
  .index-header-body:before {
    display: none;
  }
}
body.dark .index-header-body {
  box-shadow: 0px 16px 32px 0 rgba(35, 38, 47, 0.3);
}

.index-header-item_notification .index-header-body {
  top: calc(100% + 44px);
  width: 396px;
  margin-left: -198px;
  padding: 40px 32px 32px;
  border-radius: 24px;
}

@media only screen and (max-width: 767px) {
  .index-header-item_notification .index-header-body {
    top: calc(100% + 16px);
    width: auto;
    margin: 0;
    padding: 32px 16px;
  }
}
body.dark .index-header-item_notification .index-header-body {
  background: #141416;
}
body.dark .index-header-item_notification .index-header-body:before {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='13' viewBox='0 0 32 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3432 2.65685L0 13H32L21.6569 2.65686C18.5327 -0.467339 13.4673 -0.467344 10.3432 2.65685Z' fill='%23141416'/%3E%3C/svg%3E%0A");
}

.index-header-item_user .index-header-body {
  top: calc(100% + 20px);
  width: 256px;
  margin-left: -128px;
  padding: 32px 16px 20px;
  border-radius: 12px;
}

@media only screen and (max-width: 1023px) {
  .index-header-item_user .index-header-body {
    left: auto;
    right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .index-header-item_user .index-header-body {
    left: 16px;
    right: 16px;
    top: calc(100% + 16px);
    width: auto;
    margin: 0;
  }
}
body.dark .index-header-item_user .index-header-body {
  background: #23262F;
}
body.dark .index-header-item_user .index-header-body:before {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='13' viewBox='0 0 32 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3432 2.65685L0 13H32L21.6569 2.65686C18.5327 -0.467339 13.4673 -0.467344 10.3432 2.65685Z' fill='%2323262F'/%3E%3C/svg%3E%0A");
}

.index-header-item.active .index-header-body {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.index-header-title {
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  .index-header-title {
    margin: 0 16px;
  }
}
.index-header-list {
  margin: 0 -16px;
}

@media only screen and (max-width: 767px) {
  .index-header-list {
    margin: 0;
  }
}
.index-header-notification {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 40px 16px 16px;
  border-radius: 16px;
  transition: background 0.2s;
}
.index-header-notification:hover {
  background: #F4F5F6;
}

body.dark .index-header-notification:hover {
  background: #23262F;
}

.index-header-preview {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin-right: 24px;
}
.index-header-preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 16px;
}

@media only screen and (max-width: 767px) {
  .index-header-preview {
    margin-right: 16px;
  }
}
.index-header-details {
  flex-grow: 1;
}

.index-header-subtitle {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: #141416;
}

body.dark .index-header-subtitle {
  color: #FCFCFD;
}

.index-header-price {
  font-weight: 500;
  color: #353945;
}

body.dark .index-header-price {
  color: #E6E8EC;
}

.index-header-date {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}

.index-header-status {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3772FF;
}

.index-header-item_notification .index-header-button {
  position: absolute;
  top: 40px;
  right: 32px;
}

@media only screen and (max-width: 767px) {
  .index-header-item_notification .index-header-button {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
}
.index-header-name {
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.index-header-code {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.index-header-number {
  font-weight: 500;
  color: #777E90;
}

.index-header-copy {
  margin-left: 8px;
}
.index-header-copy .icon {
  width: 16px;
  height: 16px;
  fill: #3772FF;
  transition: fill 0.2s;
}
.index-header-copy:hover .icon {
  fill: #044eff;
}

.index-header-wrap {
  margin-bottom: 7px;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0px 24px 24px -8px rgba(15, 15, 15, 0.2);
}
.index-header-wrap .this-button {
  text-transform: uppercase;
}

.index-header-line {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.index-header-img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 16px;
}
.index-header-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.index-header-info {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}

.index-header-money {
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.index-header-item_user .index-header-button {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
}

.index-header-menu .index-header-link {
  display: flex;
  align-items: center;
  padding: 17px 0 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 700;
  color: #777E90;
}
.index-header-menu .index-header-link:not(:last-child) {
  border-bottom: 1px solid #E6E8EC;
}

body.dark .index-header-menu .index-header-link:not(:last-child) {
  border-color: #353945;
}

.index-header-menu .index-header-link[href]:hover {
  color: #3772FF;
}
.index-header-menu .index-header-link[href]:hover .icon {
  fill: #3772FF;
}

.index-header-icon {
  flex-shrink: 0;
  width: 20px;
  margin-right: 8px;
}
.index-header-icon .icon {
  width: 20px;
  height: 20px;
  fill: #777E90;
  transition: fill 0.2s;
}

.header .theme {
  margin-left: auto;
}

.index-header-burger {
  display: none;
}

@media only screen and (max-width: 767px) {
  .index-header-burger {
    display: block;
    position: relative;
    width: 32px;
    height: 32px;
    background: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .index-header-burger.active:before {
    transform: translateY(0) rotate(-45deg);
  }
  .index-header-burger.active:after {
    transform: translateY(0) rotate(45deg);
  }
  .index-header-burger:before, .index-header-burger:after {
    content: "";
    position: absolute;
    top: 16px;
    left: 6px;
    width: 20px;
    height: 2px;
    background: #777E90;
    border-radius: 2px;
    transition: transform 0.2s;
  }
  .index-header-burger:before {
    transform: translateY(-4px);
  }
  .index-header-burger:after {
    transform: translateY(3px);
  }
}
@media only screen and (max-width: 767px) {
  .index-header-center > .index-header-connect {
    display: none !important;
  }
}
.header.registered .index-header-connect {
  display: none;
}
.header.registered .index-header-item_notification, .header.registered .index-header-item_user {
  display: block;
}

body.dark .some-icon {
  display: none;
}

.some-icon-dark {
  display: none;
}

body.dark .some-icon-dark {
  display: inline-block;
}

/*-----------------------
    1. BUTTON
-----------------------*/
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #e5e7eb;
  color: #000;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  min-width: 100px;
  border-radius: 16px/16px;
}
.button.no-min-w {
  min-width: initial;
}
.button.sm {
  height: 38px;
}
.button.no-shadow {
  box-shadow: none;
}
.button.full {
  width: 100%;
}
.button.medium {
  height: 54px;
  line-height: 54px;
}
.button.small {
  height: 40px;
  font-size: 0.75rem;
  line-height: 40px;
}
.button:hover {
  color: #fff;
  background-color: #00719b;
}
.button.void {
  background-color: transparent;
  color: #adafca;
  box-shadow: none;
}
.button.void .button-icon {
  fill: #adafca;
}
.button.void:hover {
  color: #fff;
  background-color: #2e2e47;
}
.button.void:hover .button-icon {
  fill: #fff;
}
.button.void.void-primary:hover {
  background-color: #23d2e2;
}
.button.void.void-secondary:hover {
  background-color: #615dfa;
}
.button.white-solid {
  background-color: #fff;
  color: #3e3f5e;
  box-shadow: none;
}
.button.white-solid:hover {
  background-color: #f7f7f7;
}
.button.outline-dark {
  border: 2px solid #170a07;
  background: transparent;
  border-radius: 8px;
  box-shadow: none;
  color: #000;
}
.button.white {
  background-color: transparent;
  border: 1px solid #dedeea;
  color: #adafca;
  box-shadow: none;
}
.button.white .button-icon {
  fill: #adafca;
}
.button.white:hover {
  color: #fff;
  background-color: #2e2e47;
  border-color: #2e2e47;
}
.button.white.white-tertiary:hover {
  background-color: #fd4350;
  border-color: #fd4350;
  box-shadow: 4px 7px 12px 0 rgba(253, 67, 80, 0.2);
}
.button.mort {
  background: #f12786;
}
.button.primary {
  background-color: #23d2e2;
  box-shadow: 4px 7px 12px 0 rgba(35, 210, 226, 0.2);
}
.button.primary:hover {
  background-color: #1bc5d4;
}
.button.secondary {
  background-color: #615dfa;
  box-shadow: 4px 7px 12px 0 rgba(97, 93, 250, 0.2);
}
.button.secondary:hover {
  background-color: #5753e4;
}
.button.tertiary {
  background-color: #fd4350;
  box-shadow: 4px 7px 12px 0 rgba(253, 67, 80, 0.2);
}
.button.tertiary:hover {
  background-color: #dd343f;
}
.button.twitch {
  background-color: #7b5dfa;
  box-shadow: 4px 7px 12px 0 rgba(123, 93, 250, 0.2);
}
.button.twitch:hover {
  background-color: #6a4fdf;
}
.button.twitter {
  background-color: #1abcff;
  box-shadow: 3px 5px 10px 0px rgba(26, 188, 255, 0.2);
}
.button.twitter:hover {
  background-color: #0aabed;
}
.button.add-field-button {
  width: 128px;
  margin-top: 40px;
}
.button.padded {
  padding: 0 24px;
}
.button .button-icon {
  fill: #fff;
  transition: fill 0.2s ease-in-out;
}
.button .button-icon.spaced {
  margin-right: 6px;
}
.button.with-only-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lined-text {
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  position: relative;
}

.lined-text::before, .lined-text::after {
  content: "";
  width: 70px;
  height: 1px;
  background-color: #eaeaf5;
  position: absolute;
  top: 7px;
}

.lined-text::before {
  left: 0;
}

.lined-text::after {
  right: 0;
}

.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem;
}

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #80bdff;
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}
.custom-control-input:disabled ~ .custom-control-label, .custom-control-input[disabled] ~ .custom-control-label {
  color: #6c757d;
}
.custom-control-input:disabled ~ .custom-control-label::before, .custom-control-input[disabled] ~ .custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}
.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}
.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50%/50% 50%;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-switch {
  padding-left: 2.25rem;
}
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}
.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  transform: translateX(0.75rem);
}
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}
.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.custom-select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}
.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}
.custom-select::-ms-expand {
  display: none;
}
.custom-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
}
.custom-file-input:focus ~ .custom-file-label {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-file-input:disabled ~ .custom-file-label, .custom-file-input[disabled] ~ .custom-file-label {
  background-color: #e9ecef;
}
.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}
.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
.custom-file-label::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.5em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  content: "Browse";
  background-color: #e9ecef;
  border-left: inherit;
  border-radius: 0 0.25rem 0.25rem 0;
}

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.custom-range:focus {
  outline: 0;
}
.custom-range:focus::-webkit-slider-thumb, .custom-range:focus::-moz-range-thumb, .custom-range:focus::-ms-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-range::-moz-focus-outer {
  border: 0;
}
.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}
.custom-range::-webkit-slider-thumb:active {
  background-color: #b3d7ff;
}
.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}
.custom-range::-moz-range-thumb:active {
  background-color: #b3d7ff;
}
.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}
.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
  background-color: #007bff;
  border: 0;
  border-radius: 1rem;
  -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
.custom-range::-ms-thumb:active {
  background-color: #b3d7ff;
}
.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}
.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}
.custom-range::-ms-fill-upper {
  margin-right: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}
.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}
.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}
.custom-range:disabled::-moz-range-track {
  cursor: default;
}
.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    -ms-transition: none;
    transition: none;
  }
}
.custom-control-label::before, .custom-file-label, .custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before, .custom-file-label, .custom-select {
    transition: none;
  }
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.4rem);
}

.custom-switch {
  position: relative;
  min-height: 1.5rem;
  display: block;
}
.custom-switch .custom-control-label::before, .custom-switch .custom-control-label::after {
  content: "";
}
.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 48px;
  background: #E6E8EC;
  border-radius: 32px;
  height: 24px;
  border: 0;
  cursor: pointer;
  top: 0.25rem;
  display: block;
  position: absolute;
}
.custom-switch .custom-control-label::after {
  top: calc(0.34rem + 2px);
  left: calc(-2.1rem + 2px);
  width: 17px;
  height: 17px;
  background-color: #27baf1;
  border-radius: 32px;
  position: absolute;
  display: block;
}

/*------------------------
    10. CHECKBOX LINE
------------------------*/
.checkbox-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkbox-line .checkbox-line-text {
  color: #00c7d9;
  font-size: 0.875rem;
  font-weight: 500;
}

/*------------------------
    11. CHECKBOX WRAP
------------------------*/
.checkbox-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.checkbox-wrap .checkbox-info {
  margin-top: 12px;
}

.checkbox-wrap .checkbox-info .checkbox-info-text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286em;
}

.checkbox-wrap.checkbox-rating .rating-list {
  position: absolute;
  top: 6px;
  left: 34px;
  pointer-events: none;
}

.checkbox-wrap.checkbox-rating label {
  padding-left: 104px;
}

.checkbox-wrap input[type=checkbox],
.checkbox-wrap input[type=radio] {
  display: none;
}

.checkbox-wrap input[type=checkbox]:checked + .checkbox-box,
.checkbox-wrap input[type=radio]:checked + .checkbox-box {
  background-color: #27baf1;
  border-color: #27baf1;
}

.checkbox-wrap input[type=checkbox]:checked + .checkbox-box.round,
.checkbox-wrap input[type=radio]:checked + .checkbox-box.round {
  border: 6px solid #27baf1;
  background-color: #fff;
}

.checkbox-wrap input[type=checkbox]:checked + .checkbox-box .icon-cross,
.checkbox-wrap input[type=radio]:checked + .checkbox-box .icon-cross {
  fill: #fff;
}

.checkbox-wrap label {
  padding-left: 34px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
}

.checkbox-wrap .checkbox-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #dedeea;
  border-radius: 6px;
  background-color: #fff;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.checkbox-wrap .checkbox-box svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.checkbox-wrap .checkbox-box.round {
  border-radius: 50%;
}

.checkbox-wrap .checkbox-box .icon-cross {
  fill: transparent;
  transition: fill 0.2s ease-in-out;
}

.checkbox-wrap.small label {
  padding-left: 24px;
  font-size: 0.75rem;
  line-height: 16px;
}

.checkbox-wrap.small .checkbox-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.checkbox-wrap.small .checkbox-box.round {
  border-radius: 50%;
}

.checkbox-wrap.small .checkbox-box .icon-cross {
  width: 8px;
  height: 8px;
}

.pickr {
  margin-top: 10px;
}
.pickr .pcr-button {
  height: 40px;
  width: 100%;
}

.pcr-app[data-theme=monolith] {
  width: 20.25em;
  padding: 17px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.8) none repeat scroll 0% 0%;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 32px 8px;
}
.pcr-app[data-theme=monolith] .pcr-interaction .pcr-result {
  height: 40px;
  padding: 12px;
  background: #f4f4f4;
  border-radius: 6px;
}
.pcr-app[data-theme=monolith] .pcr-interaction .pcr-save, .pcr-app[data-theme=monolith] .pcr-interaction .pcr-clear, .pcr-app[data-theme=monolith] .pcr-interaction .pcr-cancel {
  height: 40px;
  border-radius: 7px;
}
.pcr-app[data-theme=monolith] .pcr-interaction .pcr-type {
  display: none;
}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity {
  height: 36px;
}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
  border-radius: 5px;
}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview {
  display: none;
}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette {
  height: 300px;
  border-radius: 8px;
}
.pcr-app[data-theme=monolith] .pcr-selection .pcr-picker {
  height: 32px;
  width: 32px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 4px;
}

/*-----------------------------
  Style header Default
-----------------------------*/
.main-header {
  z-index: 9;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid rgba(11, 34, 56, 0);
  -webkit-backdrop-filter: saturate(1) blur(20px) !important;
  -moz-backdrop-filter: saturate(1) blur(20px) !important;
  -o-backdrop-filter: saturate(1) blur(20px) !important;
  backdrop-filter: saturate(1) blur(20px) !important;
  transition: 0.3s !important;
  padding: 0px 24px;
}
.main-header.no_blur {
  -webkit-backdrop-filter: none !important;
  -moz-backdrop-filter: none !important;
  -o-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.main-header {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(1) blur(20px) !important;
  -o-backdrop-filter: saturate(1) blur(20px) !important;
  backdrop-filter: saturate(1) blur(20px) !important;
  border-bottom: 1px solid #edeef1;
}

@-moz-document url-prefix() {
  .main-header {
    background: white;
    border-bottom: 0 !important;
    backdrop-filter: saturate(1) blur(0);
    box-shadow: 0px 10px 40px 0px rgba(11, 34, 56, 0.05);
  }
}
.main-header .navbar {
  height: 65px;
  padding: 0;
}
.main-header .navbar .navbar-brand {
  font-weight: 600;
  font-size: 22px;
}
.main-header .navbar .navbar-brand .logo {
  vertical-align: bottom;
  margin-right: 0.5rem;
  width: 27px;
}
.main-header .navbar .navbar-collapse {
  margin-top: 0.4rem;
}
.main-header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  margin-right: 1.25rem;
  background-color: transparent;
}
.main-header .navbar .navbar-collapse .navbar-nav .dropdown.show .nav-link {
  color: #165df5 !important;
}
.main-header .navbar .navbar-collapse .nav_account .btn {
  font-size: 15px;
}
.main-header .navbar .navbar-collapse .nav_account.btn_demo2 .btn_sm_primary {
  background-color: rgba(22, 93, 245, 0.1);
  color: #165df5;
}
.main-header .navbar .navbar-collapse .nav_account.btn_demo3 .btn_sm_primary {
  border: 1px solid #edeef1;
}

@media (max-width: 991px) {
  header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding: 0.75rem 0;
  }
}
@media (max-width: 991px) {
  header {
    background: #ffffff;
  }
  header .navbar-toggler:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
  }
  header .navbar {
    height: auto;
    padding: 0.75rem;
  }
  header .navbar-brand {
    color: #0b2238 !important;
    font-size: 18px !important;
  }
  header .navbar-brand .logo {
    width: 24px !important;
  }
  header .navbar-collapse {
    margin-left: 0 !important;
  }
  header .navbar-collapse .navbar-nav {
    padding-bottom: 1rem;
  }
  header .navbar-collapse .navbar-nav .nav-item .nav-link {
    color: #0b2238 !important;
  }
  header .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    color: #165df5 !important;
  }
  header .navbar-collapse .nav_account {
    border-top: 1px solid #edeef1;
    padding: 1rem 0;
  }
  header .navbar-collapse .nav_account .btn-default {
    color: #0b2238 !important;
  }
  header .navbar-collapse .nav_account .btn-primary {
    background-color: #165df5 !important;
    color: #ffffff !important;
  }
}
/*-----------------------------
  header-nav-center
-----------------------------*/
.header-nav-center {
  width: 100%;
  left: 0;
  z-index: 12;
}
.header-nav-center .navbar-brand {
  color: #0b2238;
}
.header-nav-center .navbar-collapse .nav-item .nav-link {
  color: #0b2238;
  transition: 0.4s !important;
}
.header-nav-center .navbar-collapse .nav-item .nav-link:hover {
  color: #165df5;
}
.header-nav-center .navbar-collapse .nav-item .nav-link.active {
  color: #165df5;
  background-color: transparent;
}
.header-nav-center .navbar-collapse .nav-item.active .nav-link {
  color: #165df5;
  background-color: transparent;
}

/*-----------------------------
  header-nav-left
-----------------------------*/
.header-nav-left .navbar-collapse {
  margin-left: 2rem;
}
.header-nav-left.light .nav-pills .nav-item .nav-link {
  color: #ffffff;
}
.header-nav-left.light .nav-pills .nav-item .nav-link.active {
  color: #ffe7aa;
}

/*-----------------------------
  Fixed header
-----------------------------*/
@media (max-width: 991px) {
  .main-header {
    background: #ffffff !important;
  }
}
.main-header .navbar-brand {
  color: #0b2238 !important;
}
.main-header .nav-pills .nav-item .nav-link {
  color: #0b2238 !important;
}
.main-header .nav-pills .nav-item .nav-link.active {
  color: #165df5 !important;
}
.main-header .nav_account .btn-default {
  color: #0b2238 !important;
}
.main-header .nav_account .btn-primary {
  background-color: #165df5 !important;
  color: #ffffff !important;
}

@media (max-width: 767px) {
  .fixed-header .gch_header_light .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active {
    -o-box-shadow: none !important;
    -ms-box-shadow: none !important;
    box-shadow: none !important;
  }
}
/*-----------------------------
  Fixed side menu
-----------------------------*/
.fixed_side_menu {
  position: fixed !important;
  right: 1%;
  top: 35%;
  z-index: 3;
}
.fixed_side_menu .nav-item .nav-link {
  position: relative;
  color: #aa9bb3;
  font-size: 16px;
  direction: rtl;
  text-align: right;
  transition: 0.3s !important;
}
.fixed_side_menu .nav-item .nav-link::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: -0.8rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0;
  transition: 3s !important;
}
.fixed_side_menu .nav-item .nav-link.active {
  background-color: transparent;
  color: #ffffff;
}
.fixed_side_menu .nav-item .nav-link.active:before {
  opacity: 1;
  -webkit-animation: bounce-top 0.9s both !important;
  animation: bounce-top 0.9s both !important;
}

/*-----------------------------
  index-header-workspace
-----------------------------*/
.index-header-workspace .navbar-collapse {
  margin-left: 0;
}
.index-header-workspace .btn_demo3 .btn {
  border: 1px solid rgba(253, 107, 59, 0.25) !important;
  color: #fd6b3b;
}

/*-----------------------------
  white_scroll_dark
-----------------------------*/
.white-scroll-dark .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
  color: #ffffff;
}

.fixed-header .white-scroll-dark .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
  color: #0b2238;
}

/*-----------------------------
  header-black 
-----------------------------*/
.header-black .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
  color: #ffffff;
}

@media (max-width: 991px) {
  .header-black .nav_account .filter-blur {
    background: #000 !important;
    color: #ffffff !important;
  }
}
.fixed-header .header-black {
  background: rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fixed-header .header-black .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
  color: #ffffff;
}
.fixed-header .header-black .navbar .filter-blur {
  -webkit-backdrop-filter: none !important;
  -moz-backdrop-filter: none !important;
  -o-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #ffffff !important;
  color: #000 !important;
}
.fixed-header .nav_account .bg-white {
  background-color: #0b2238 !important;
  color: #ffffff !important;
}

@media (max-width: 991px) {
  .fixed-header .header-black .nav_account .filter-blur {
    background: #000 !important;
    color: #ffffff !important;
  }
}
.flex-table.multi .flex-table-item:nth-child(2n) {
  background: rgba(239, 239, 239, 0.35);
}

.flex-table.is-insight .flex-table-item {
  min-height: 60px;
}

.flex-table.is-compact .flex-table-item {
  margin-bottom: 0;
  border-radius: 0;
}

.flex-table.is-compact .flex-table-item:not(:last-child) {
  border-bottom: none;
}

.flex-table.is-compact .flex-table-item:nth-child(2) {
  border-radius: 8px 8px 0 0;
}

.flex-table.is-compact .flex-table-item:last-child {
  margin-bottom: 6px;
  border-radius: 0 0 8px 8px;
}

.flex-table .flex-table-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.8);
  padding-bottom: 10px;
}

.flex-table .flex-table-header span {
  flex: 1 1 0px;
  display: flex;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  color: #6a6d73;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
  width: 45px;
  flex-shrink: 0;
}

.flex-table .flex-table-header span.is-checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  max-width: 30px;
}

.flex-table .flex-table-header span.is-checkbox .checkbox {
  padding: 0;
}

.flex-table .flex-table-header span.is-checkbox .checkbox > span {
  height: 22px;
}

.flex-table .flex-table-header span.cell-center {
  justify-content: center;
}

.flex-table .flex-table-header span.cell-end {
  justify-content: flex-end;
}

.flex-table .flex-table-header span.is-grow {
  flex-grow: 2;
}

.flex-table .flex-table-header span.is-grow-lg {
  flex-grow: 3;
}

.flex-table .flex-table-item {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 85px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.flex-table .flex-table-item.is-row {
  border: none;
  background: transparent;
}

.flex-table .flex-table-item .flex-table-cell {
  flex: 1 1 0px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
}

.flex-table .flex-table-item .flex-table-cell.is-grow {
  flex-grow: 2;
}

.flex-table .flex-table-item .flex-table-cell.cell-center {
  justify-content: center;
}

.flex-table .flex-table-item .flex-table-cell.cell-end {
  justify-content: flex-end;
}

.flex-table .flex-table-item .flex-table-cell.cell-end .button.has-dot .dot {
  position: relative;
  top: 1px;
  font-size: 4px;
  margin: 0 6px;
}

.flex-table .flex-table-item .flex-table-cell.cell-end .action-link {
  font-size: 0.9rem;
}

.flex-table .flex-table-item .flex-table-cell.is-bold > span {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}

.flex-table .flex-table-item .flex-table-cell.is-checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  max-width: 30px;
}

.flex-table .flex-table-item .flex-table-cell.is-checkbox .checkbox {
  padding: 0;
  margin-left: 4px;
}

.flex-table .flex-table-item .flex-table-cell.is-user,
.flex-table .flex-table-item .flex-table-cell.is-media {
  padding-left: 0;
}

.flex-table .flex-table-item .flex-table-cell.is-user.is-grow,
.flex-table .flex-table-item .flex-table-cell.is-media.is-grow {
  flex-grow: 2;
}

.flex-table .flex-table-item .flex-table-cell.is-user.is-grow-lg,
.flex-table .flex-table-item .flex-table-cell.is-media.is-grow-lg {
  flex-grow: 3;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div span:not(.avatar),
.flex-table .flex-table-item .flex-table-cell.is-media > div span:not(.avatar) {
  display: block;
  margin-left: 10px;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div,
.flex-table .flex-table-item .flex-table-cell.is-media > div {
  line-height: 1.2;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-name,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-name {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #000000;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta {
  color: #a2a5b9;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta svg,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta svg {
  position: relative;
  top: 2px;
  height: 14px;
  width: 14px;
  stroke-width: 1.6px;
  margin-right: 4px;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta span,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta span {
  display: inline-block;
  margin-left: 0;
  font-size: 0.9rem;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .flex-media,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .flex-media {
  margin-left: 10px;
  margin-top: 4px;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .flex-media .h-avatar,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .flex-media .h-avatar {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .flex-media .h-avatar .avatar,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .flex-media .h-avatar .avatar {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
}

.flex-table .flex-table-item .flex-table-cell.is-user > div .item-meta .separator,
.flex-table .flex-table-item .flex-table-cell.is-media > div .item-meta .separator {
  padding: 0 8px;
}

.flex-table .flex-table-item .flex-table-cell.is-user .h-avatar .avatar.is-fake span,
.flex-table .flex-table-item .flex-table-cell.is-media .h-avatar .avatar.is-fake span {
  margin: 0;
}

.flex-table .flex-table-item .flex-table-cell.is-user .media,
.flex-table .flex-table-item .flex-table-cell.is-media .media {
  display: block;
  width: 100%;
  max-width: 130px;
  min-height: 95px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
}

.flex-table .flex-table-item .flex-table-cell.is-user .cell-image,
.flex-table .flex-table-item .flex-table-cell.is-media .cell-image {
  display: block;
  width: 100%;
  max-width: 80px;
}

.flex-table .flex-table-item .flex-table-cell.is-user .cell-image.is-mini,
.flex-table .flex-table-item .flex-table-cell.is-media .cell-image.is-mini {
  max-width: 40px;
}

.flex-table .flex-table-item .flex-table-cell .cell-icon {
  margin-right: 4px;
  color: #a2a5b9;
}

.flex-table .flex-table-item .flex-table-cell .tag {
  margin-bottom: 0 !important;
  line-height: 1.8;
  height: 1.8em;
}

.flex-table .flex-table-item .flex-table-cell .flex-media {
  display: flex;
  align-items: center;
}

.flex-table .flex-table-item .flex-table-cell .flex-media .meta {
  margin-left: 6px;
  line-height: 1.3;
}

.flex-table .flex-table-item .flex-table-cell .flex-media .meta span {
  display: block !important;
  font-size: 0.8rem;
  color: #a2a5b9;
  font-family: "Roboto", sans-serif;
}

.flex-table .flex-table-item .flex-table-cell .dot-levels {
  display: flex;
  align-items: center;
}

.flex-table .flex-table-item .flex-table-cell .dot-levels .dot {
  font-size: 8px;
  color: #b3b6c6;
  margin: 0 6px;
}

.flex-table .flex-table-item .flex-table-cell .dot-levels .dot.active {
  color: #671cc9;
}

body.is-dark .flex-table .flex-table-item {
  background: #323236;
  border-color: #404046;
}

body.is-dark .flex-table .flex-table-item .flex-table-cell.is-user .h-avatar .badge,
body.is-dark .flex-table .flex-table-item .flex-table-cell.is-media .h-avatar .badge {
  border-color: #323236 !important;
}

body.is-dark .flex-table .flex-table-item .flex-table-cell.cell-end .button.dark-outlined:hover {
  border-color: #797bf2 !important;
  color: #797bf2 !important;
}

body.is-dark .flex-table .flex-table-item .flex-table-cell .dark-text {
  color: #aaaab3 !important;
}

body.is-dark .flex-table .flex-table-item .flex-table-cell .avatar-stack .h-avatar {
  border-color: #323236;
}

body.is-dark .flex-table .flex-table-item .flex-table-cell .avatar-stack .h-avatar .is-more .inner {
  border-color: #323236 !important;
}

body.is-dark .flex-table .flex-table-item .flex-table-cell .dot-levels .dot.active {
  color: #797bf2;
}

.flex-pagination {
  padding: 12px 0;
}

.flex-pagination .pagination-next,
.flex-pagination .pagination-previous {
  background: #fff;
  min-width: 85px;
}

.flex-pagination .pagination-next.has-chevron,
.flex-pagination .pagination-previous.has-chevron {
  min-width: 55px;
}

.flex-pagination .pagination-next.has-chevron svg,
.flex-pagination .pagination-previous.has-chevron svg {
  height: 16px;
  width: 16px;
  stroke-width: 3px;
  stroke: #671cc9;
}

.flex-pagination .pagination-list li .pagination-link {
  background: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 0.9em;
}

.flex-pagination .pagination-list li .pagination-link.is-current {
  background: #671cc9;
  border-color: #671cc9;
  box-shadow: 0 14px 26px -12px rgba(103, 28, 201, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(103, 28, 201, 0.2);
}

body.is-dark .flex-pagination .pagination-next,
body.is-dark .flex-pagination .pagination-previous {
  background: #28282b;
  border-color: #2d2d31;
  color: #aaaab3;
}

body.is-dark .flex-pagination .pagination-next svg,
body.is-dark .flex-pagination .pagination-previous svg {
  stroke: #797bf2;
}

body.is-dark .flex-pagination .pagination-list li .pagination-link {
  background: #28282b;
  border-color: #2d2d31;
  color: #aaaab3;
}

body.is-dark .flex-pagination .pagination-list li .pagination-link.is-current {
  background: #797bf2;
  color: #fcfcfc;
  border-color: #797bf2;
  box-shadow: 0 14px 26px -12px rgba(121, 123, 242, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(121, 123, 242, 0.2);
}

.flex-table-wrapper {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
}

.flex-table-wrapper .flex-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.flex-table-wrapper .flex-table .flex-table-item {
  margin-bottom: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

.flex-table-wrapper .flex-table .flex-table-item:last-child {
  margin-bottom: 6px;
  border-bottom: none;
}

body.is-dark .flex-table-wrapper {
  background: #323236;
  border-color: #404046;
}

.demo-table {
  margin-bottom: 3rem;
}

.table tbody th {
  font-family: "Roboto", sans-serif;
  color: #283252;
}

.table tbody th.is-media {
  width: 40px;
}

.table tbody th.is-end > div {
  display: flex;
  justify-content: flex-end;
}

.table tbody td {
  font-family: "Roboto", sans-serif;
  vertical-align: middle;
}

.table tbody td:not(:first-child) {
  color: #a2a5b9;
}

.table tbody td.is-media {
  width: 40px;
}

.table tbody td.is-end > div {
  display: flex;
  justify-content: flex-end;
}

body.is-dark .table {
  background: #323236;
  border-color: #404046;
}

body.is-dark .table.is-hoverable tr:not(.is-selected):hover {
  background: #39393e;
}

body.is-dark .table.is-striped tr:not(.is-selected):nth-child(even) {
  background: #39393e;
}

body.is-dark .table tbody th,
body.is-dark .table tbody td {
  border-color: #404046;
}

body.is-dark .table tbody th {
  color: #aaaab3;
}

body.is-dark .table tbody td:first-child {
  color: #aaaab3;
}

@media (max-width: 767px) {
  .flex-table-wrapper .flex-table-toolbar {
    margin-bottom: 10px;
  }

  .flex-table-wrapper .flex-table-toolbar .left {
    flex-grow: 2;
  }

  .flex-table-wrapper .flex-table-toolbar .right {
    display: none;
  }

  .flex-table-wrapper .flex-table .flex-table-header .is-checkbox {
    display: none;
  }

  .flex-table-wrapper .flex-table .flex-table-item {
    padding-left: 0;
    padding-right: 0;
  }

  .flex-table-wrapper .flex-table .flex-table-item .is-checkbox {
    display: none;
  }

  .flex-table .flex-table-header {
    display: none;
  }

  .flex-table .flex-table-cell {
    position: relative;
    margin-bottom: 12px;
  }

  .flex-table .flex-table-cell:before {
    content: attr(data-th);
    font-size: inherit;
    text-transform: uppercase;
    font-weight: 500;
    color: #999;
  }

  .flex-table .flex-table-cell.no-label-mobile:before {
    display: none !important;
  }

  .flex-table .flex-table-cell.cell-end {
    justify-content: flex-start !important;
  }

  .flex-table .flex-table-cell.cell-end .btn-group {
    margin-left: auto;
  }

  .flex-table .flex-table-cell.is-user span {
    font-size: 1.2rem;
  }

  .flex-table .flex-table-cell > span,
.flex-table .flex-table-cell > .is-pushed-mobile {
    margin-left: auto;
  }

  .flex-table .flex-table-cell > span.no-push,
.flex-table .flex-table-cell > .is-pushed-mobile.no-push {
    margin-left: 0 !important;
  }

  .flex-table .flex-table-item {
    flex-direction: column;
    justify-content: center;
    width: 100% !important;
    padding: 20px;
    margin-bottom: 16px;
  }

  .flex-table .flex-table-item:last-child {
    margin-bottom: 0;
  }

  .flex-table .flex-table-item > div {
    border: none !important;
  }

  .pagination-next.has-chevron,
.pagination-previous.has-chevron {
    min-width: 55px;
    max-width: 55px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .flex-table .flex-table-cell.is-user img {
    min-width: 50px;
  }

  .pagination-next.has-chevron,
.pagination-previous.has-chevron {
    min-width: 55px;
    max-width: 55px;
  }

  .pagination-next {
    margin-right: auto;
  }
}
.sandy_tooltip {
  background: 0 0;
  position: absolute;
  z-index: 8000;
}

.sandy_tooltip .sandy_tooltip_Message {
  background: #fff;
  color: #000;
  font-size: 13px;
  *margin-right: 0;
  max-width: 250px;
  padding: 20px;
  position: relative;
  _width: expression(document.body.clientWidth > 250px ? "250px": "auto");
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  border-radius: 20px;
}

.sandy_tooltip .sandy_tooltip_Message.sandy_tooltip_Has_Close {
  padding-right: 23px;
}

.sandy_tooltip .sandy_tooltip_Arrow {
  position: absolute;
  width: 28px;
  height: 14px;
  overflow: hidden;
  display: none;
}

.sandy_tooltip .sandy_tooltip_Arrow.sandy_tooltip_Arrow_Bottom {
  bottom: 2px;
}

.sandy_tooltip .sandy_tooltip_Arrow.sandy_tooltip_Arrow_Bottom div {
  top: 0;
  border-color: #000 transparent transparent;
  _border-bottom-color: pink;
}

.sandy_tooltip .sandy_tooltip_Arrow.sandy_tooltip_Arrow_Bottom div.sandy_tooltip_Arrow_Border {
  border-color: #fff transparent transparent;
}

.sandy_tooltip .sandy_tooltip_Arrow.sandy_tooltip_Arrow_Top {
  top: 2px;
}

.sandy_tooltip .sandy_tooltip_Arrow.sandy_tooltip_Arrow_Top div {
  bottom: 0;
  border-color: transparent transparent #000;
  _border-top-color: pink;
}

.sandy_tooltip .sandy_tooltip_Arrow.sandy_tooltip_Arrow_Top div.sandy_tooltip_Arrow_Border {
  border-color: transparent transparent #fff;
}

.sandy_tooltip .sandy_tooltip_Arrow div {
  position: absolute;
  border-style: solid;
  border-width: 10px;
  width: 0;
  height: 0;
  left: 4px;
  _border-left-color: pink;
  _border-right-color: pink;
  _filter: chroma(color=pink);
}

.sandy_tooltip .sandy_tooltip_Arrow div.sandy_tooltip_Arrow_Border {
  border-width: 14px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  left: 0;
}

.sandy_tooltip .sandy_tooltip_Close {
  color: #fff;
  background: #222;
  border-radius: 15px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  position: absolute;
  right: 2px;
  text-decoration: none;
  top: 2px;
}

.sandy_tooltip .sandy_tooltip_Close:hover {
  color: #000;
  background: #fff;
}

/*-----------------------
    Footer
-----------------------*/
.footer {
  border: 1px solid rgba(119, 126, 144, 0.3);
}

body.dark .footer {
  border-color: #353945;
}

.footer-row {
  display: flex;
  border-bottom: 1px solid #E6E8EC;
}

@media only screen and (max-width: 1023px) {
  .footer-row {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .footer-row {
    padding: 64px 0 48px;
  }
}
body.dark .footer-row {
  border-color: #353945;
}

.footer-col {
  padding: 80px 86px 64px;
}
@media (max-width: 768px) {
  .footer-col {
    padding: 0;
  }
}
.footer-col:first-child {
  flex-grow: 1;
  padding-right: 32px;
}
.footer-col:nth-child(2) {
  display: flex;
  border-left: 1px solid #E6E8EC;
}
.footer-col:nth-child(3) {
  flex-shrink: 0;
  width: 384px;
  border-left: 1px solid #E6E8EC;
  padding-right: 0;
}

@media only screen and (max-width: 1023px) {
  .footer-col:first-child {
    position: relative;
    margin-bottom: 32px;
    padding: 0;
  }
}
@media only screen and (max-width: 1179px) {
  .footer-col:nth-child(2) {
    width: 276px;
  }
}
@media only screen and (max-width: 1023px) {
  .footer-col:nth-child(2) {
    width: auto;
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-col:nth-child(2) {
    display: block;
    border-width: 1px 0;
    border-style: solid;
    border-color: #E6E8EC;
  }

  body.dark .footer-col:nth-child(2) {
    border-color: #353945;
  }
}
@media only screen and (max-width: 1179px) {
  .footer-col:nth-child(3) {
    width: 304px;
  }
}
@media only screen and (max-width: 1023px) {
  .footer-col:nth-child(3) {
    width: 100%;
    padding: 0;
  }
}
.footer-logo {
  display: inline-block;
  margin-bottom: 32px;
}
.footer-logo img {
  width: 128px;
}

.footer-info {
  max-width: 256px;
  font-size: 24px;
  line-height: 1.33333;
  letter-spacing: -0.01em;
}

@media only screen and (max-width: 1179px) {
  .footer-info {
    font-size: 16px;
  }
}
.footer-theme {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

@media only screen and (max-width: 1023px) {
  .footer-theme {
    position: absolute;
    top: 5px;
    right: 0;
    margin: 0;
  }
}
.footer-details {
  margin-right: 16px;
  font-size: 12px;
  line-height: 1.66667;
}

@media only screen and (max-width: 767px) {
  .footer-details {
    margin-right: 10px;
  }
}
.footer-group:first-child {
  padding-right: 16px;
}
.footer-group:nth-child(2) {
  padding-left: 16px;
}

@media only screen and (max-width: 767px) {
  .footer-group:first-child {
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer-group:nth-child(2) {
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .footer-group:not(:last-child) {
    border-bottom: 1px solid #E6E8EC;
  }

  body.dark .footer-group:not(:last-child) {
    border-color: #353945;
  }
}
.footer-head {
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
.footer-head .icon {
  display: none;
}
.footer-head.active .icon {
  transform: translateY(-50%) rotate(180deg);
}

@media only screen and (max-width: 1023px) {
  .footer-head {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-head {
    position: relative;
    margin-bottom: 0;
    padding: 32px 32px 32px 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
  }
}
@media only screen and (max-width: 767px) {
  .footer-head .icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    fill: #777E90;
    transition: transform 0.2s;
  }
}
@media only screen and (min-width: 768px) {
  .footer-body {
    display: flex !important;
  }
}
@media only screen and (max-width: 767px) {
  .footer-body {
    display: none;
    padding-bottom: 32px;
  }
}
.footer-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-link {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 700;
  color: #777E90;
  transition: color 0.2s;
}
.footer-link:hover {
  color: #3772FF;
}
.footer-link:not(:last-child) {
  margin-bottom: 24px;
}

.footer-category {
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.footer-text {
  margin-bottom: 24px;
}

.footer-foot {
  display: flex;
  justify-content: space-between;
  padding: 32px 0;
  font-size: 12px;
  line-height: 1.66667;
}

@media only screen and (max-width: 767px) {
  .footer-foot {
    display: block;
    padding: 24px 0 32px;
  }
}
.footer-copyright {
  color: #777E90;
}

@media only screen and (max-width: 767px) {
  .footer-copyright {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .footer-note {
    display: none;
  }
}
.footer-note a {
  margin-left: 16px;
  font-weight: 600;
  color: #3772FF;
  transition: color 0.2s;
}
.footer-note a:hover {
  color: #044eff;
}

/*-----------------------
    Common
-----------------------*/
.center {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}

@media only screen and (max-width: 1023px) {
  .center {
    padding: 0 40px;
  }
}
@media only screen and (max-width: 767px) {
  .center {
    padding: 0 32px;
  }
  .center.is-center-sm {
    padding: 0;
  }
}
/*-----------------------------
  need_help
-----------------------------*/
.need-help-sec .block-help {
  position: relative;
  overflow: hidden;
  background-color: #040309;
  border-radius: 12px;
  padding: 3rem;
  z-index: 1;
}

.need-help-sec .block-help-overlay {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.14;
  height: 100%;
  width: 100%;
  background-position: 98% 96%;
  z-index: -1;
}
.need-help-sec .block-help-overlay img {
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .need-help-sec .block-help:before {
    background-size: 180%;
  }
}
.need-help-sec .item-help {
  margin-top: 2rem;
}

.need-help-sec .item-help span {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-bottom: 0.3rem;
}

.need-help-sec .item-help p {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}

.need-help-sec .img-help {
  width: 300px;
  display: flex;
  margin: auto;
}

.popular__item {
  padding: 24px;
  border-radius: 16px;
  background: #FCFCFD;
  transition: box-shadow 0.2s;
}

body.dark .popular__item {
  background: #141416;
}

.popular__item:hover {
  box-shadow: 0px 64px 64px -48px rgba(31, 47, 70, 0.12);
}

.popular__item:hover .popular__avatar {
  width: 80px;
}

@media only screen and (max-width: 1179px) {
  .popular__item:hover .popular__avatar {
    width: 64px;
  }
}
.popular__head {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E6E8EC;
}

body.dark .popular__head {
  border-color: #353945;
}

.popular__rating {
  display: flex;
  align-items: center;
  height: 24px;
  margin-right: auto;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.66667;
  font-weight: 600;
  color: #FCFCFD;
}

.popular__icon {
  margin-right: 4px;
}

.popular__icon img {
  width: 16px;
}

.popular__control {
  display: flex;
}

.popular__button .icon {
  width: 24px;
  height: 24px;
  fill: #B1B5C3;
  transition: fill 0.2s;
}

.popular__button:hover .icon {
  fill: #3772FF;
}

.popular__button:not(:last-child) {
  margin-right: 8px;
}

.popular__add {
  position: relative;
}

.popular__add .icon {
  transition: all 0.2s;
}

.popular__add .icon:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.popular__add.active .icon:first-child {
  opacity: 0;
}

.popular__add.active .icon:nth-child(2) {
  opacity: 1;
}

.popular__body {
  text-align: center;
}

.popular__avatar {
  position: relative;
  width: 64px;
  margin: 0 auto 16px;
  transition: width 0.2s;
}

.popular__avatar:before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.popular__preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.popular__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1.05);
}

.popular__reward {
  position: absolute;
  right: -4px;
  bottom: -4px;
}

.popular__name {
  margin-bottom: 2px;
  font-weight: 500;
}

.popular__price {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}

.popular__price span {
  font-weight: 600;
  color: #23262F;
}

body.dark .popular__price span {
  color: #E6E8EC;
}

.search__form {
  position: relative;
  z-index: 3;
  max-width: 496px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

.search__input {
  width: 100%;
  height: 64px;
  padding: 0 64px 0 30px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.33333;
  font-weight: 500;
  color: #11142D;
}

.search__input::-moz-placeholder {
  color: #808191;
}

.search__input:-ms-input-placeholder {
  color: #808191;
}

.search__input::placeholder {
  color: #808191;
}

.search__btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64px;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search__btn .icon {
  font-size: 20px;
  fill: #11142D;
  transition: fill 0.2s;
  width: 1em;
  height: 1em;
}

.search__btn:hover .icon {
  fill: #355DFF;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}
.list-group .list-group-item {
  display: inline-flex;
  position: relative;
  padding: 0.75rem 1.25rem;
  padding-left: 0;
  background: #fff;
  align-items: flex-start;
}
.list-group .list-group-item i {
  font-weight: 800;
  font-size: 20px;
  margin-top: 0.1rem;
}
.list-group .list-group-item .media-body {
  flex: 1;
}

.title-sections .before-title span {
  color: #0b2238;
  font-size: 1rem;
  font-weight: 500;
}
.title-sections .before-title span:last-child {
  color: #f28e1c;
}
.title-sections h2 {
  font-size: 1.875rem;
  margin-bottom: 0.6rem !important;
  font-weight: 600;
  color: #0b2238;
}
.title-sections p {
  color: #6c7a87;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.paragraph, p {
  margin: 0;
  line-height: 1.7;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

h4, h5, h6 {
  font-weight: 700;
}

.h1, h1 {
  font-size: 48px;
}

@media (max-width: 767px) {
  .h1, h1 {
    font-size: 40px;
  }
}
.h2, h2 {
  font-size: 38px;
}

@media (max-width: 767px) {
  .h2, h2 {
    font-size: 30px;
  }
}
.h3, h3 {
  font-size: 30px;
}

@media (max-width: 767px) {
  .h3, h3 {
    font-size: 26px;
  }
}
.h4, h4 {
  font-size: 24px;
}

.h5, h5 {
  font-size: 18px;
}

.h6, h6 {
  font-size: 15px;
}

.line-link {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  font-weight: 500;
}

.line-link .arrow-up-right, .line-link .icon {
  position: relative;
  top: 3px;
  margin-left: 3px;
}

.line-link.text-white:hover {
  color: #00ea79 !important;
}

.content .line-link.h1:not(.text-white)::after, .content .line-link.h1:not(.text-white)::before, .content .line-link.h2:not(.text-white)::after, .content .line-link.h2:not(.text-white)::before, .content .line-link.h3:not(.text-white)::after, .content .line-link.h3:not(.text-white)::before, .content .line-link.h4:not(.text-white)::after, .content .line-link.h4:not(.text-white)::before, .content .line-link.h5:not(.text-white)::after, .content .line-link.h5:not(.text-white)::before, .content .line-link.h6:not(.text-white)::after, .content .line-link.h6:not(.text-white)::before, .content h1.line-link:not(.text-white)::after, .content h1.line-link:not(.text-white)::before, .content h2.line-link:not(.text-white)::after, .content h2.line-link:not(.text-white)::before, .content h3.line-link:not(.text-white)::after, .content h3.line-link:not(.text-white)::before, .content h4.line-link:not(.text-white)::after, .content h4.line-link:not(.text-white)::before, .content h5.line-link:not(.text-white)::after, .content h5.line-link:not(.text-white)::before, .content h6.line-link:not(.text-white)::after, .content h6.line-link:not(.text-white)::before, .line-link.text-dark::after, .line-link.text-dark::before {
  background-color: #001213;
}

.content .line-link.h1:not(.text-white)::before, .content .line-link.h2:not(.text-white)::before, .content .line-link.h3:not(.text-white)::before, .content .line-link.h4:not(.text-white)::before, .content .line-link.h5:not(.text-white)::before, .content .line-link.h6:not(.text-white)::before, .content h1.line-link:not(.text-white)::before, .content h2.line-link:not(.text-white)::before, .content h3.line-link:not(.text-white)::before, .content h4.line-link:not(.text-white)::before, .content h5.line-link:not(.text-white)::before, .content h6.line-link:not(.text-white)::before, .line-link.text-dark::before {
  background-color: rgba(0, 183, 95, 0.7);
}

.content .line-link.h1:hover:not(.text-white), .content .line-link.h2:hover:not(.text-white), .content .line-link.h3:hover:not(.text-white), .content .line-link.h4:hover:not(.text-white), .content .line-link.h5:hover:not(.text-white), .content .line-link.h6:hover:not(.text-white), .content h1.line-link:hover:not(.text-white), .content h2.line-link:hover:not(.text-white), .content h3.line-link:hover:not(.text-white), .content h4.line-link:hover:not(.text-white), .content h5.line-link:hover:not(.text-white), .content h6.line-link:hover:not(.text-white), .line-link.text-dark:hover {
  color: #000 !important;
}

.line-link::after, .line-link::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 0%;
  background-color: rgba(0, 183, 95, 0.8);
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  pointer-events: none;
}

.line-link::before {
  width: 100%;
  z-index: -2;
  transition: 0s;
  background-color: rgba(0, 183, 95, 0.3);
}

.line-link:hover::before {
  width: 0%;
  transition: 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.line-link:hover::after {
  width: 100%;
  right: auto;
  left: 0;
  transition-delay: 0.3s;
}

.btn {
  font-size: 15px;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  font-weight: 500;
  border: 0;
  outline: 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-block;
  line-height: 1;
}

@media (max-width: 575px) {
  .btn {
    padding: 0 25px;
  }
}
.btn:active, .btn:focus {
  box-shadow: none !important;
}

.btn:active, .btn:focus, .btn:hover {
  outline: 0;
  box-shadow: none !important;
}

.btn span {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  transition: transform 0.65s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.2s;
}

.btn::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  content: attr(data-text);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  height: 100%;
  line-height: 50px;
  transition: transform 0.65s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.2s;
  transform: scale(0.95) translateY(12px);
}

.btn:hover span {
  opacity: 0;
  transform: scale(0.95) translateY(-12px);
}

.btn:hover::after {
  top: 0;
  opacity: 1;
  transform: scale(1) translateY(0);
}

.btn-white {
  background: #fff;
  color: #000;
  font-weight: 600;
}

.btn-white:active, .btn-white:focus, .btn-white:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}

.btn-black {
  background: #000;
  color: #fff;
}

.btn-black:active, .btn-black:focus, .btn-black:hover {
  color: #fff;
  background: #000;
  border-color: #000;
}

.btn-circle-black, .btn-circle-white {
  height: 90px;
  width: 90px;
  border: 2px solid;
  border-radius: 100%;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-left: 2px;
  padding-bottom: 2px;
}

@media (max-width: 991px) {
  .btn-circle-black, .btn-circle-white {
    height: 70px;
    width: 70px;
  }
}
.btn-circle-white {
  color: #000;
  border-color: #000;
}

.btn-circle-white:hover {
  background-color: #000;
  color: #fff;
}

.btn-circle-black {
  color: #fff;
  border-color: #fff;
}

.btn-circle-black:hover {
  background-color: #fff;
  color: #000;
}

ul {
  list-style-type: none;
  margin: 0;
}

img {
  vertical-align: middle;
  border: 0;
}

a, a:focus, a:hover {
  text-decoration: none;
}

.content a.h1:hover:not(.text-white), .content a.h2:hover:not(.text-white), .content a.h3:hover:not(.text-white), .content a.h4:hover:not(.text-white), .content a.h5:hover:not(.text-white), .content a.h6:hover:not(.text-white), a.text-dark:hover, a.text-light:hover, a.text-white:hover {
  color: #00b75f !important;
}

a, button {
  cursor: pointer;
}

.outline-0, .outline-0:focus {
  outline: 0;
}

.d-unset {
  display: unset !important;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1300px;
  }
}
.row.gap-lg {
  margin-left: 20px;
  margin-right: 20px;
}

@media (max-width: 991px) {
  .row.gap-lg {
    margin-left: -15px !important;
    margin-right: -15px !important;
  }
}
.row.gap-lg .col, .row.gap-lg .col-1, .row.gap-lg .col-10, .row.gap-lg .col-11, .row.gap-lg .col-12, .row.gap-lg .col-2, .row.gap-lg .col-3, .row.gap-lg .col-4, .row.gap-lg .col-5, .row.gap-lg .col-6, .row.gap-lg .col-7, .row.gap-lg .col-8, .row.gap-lg .col-9, .row.gap-lg .col-auto, .row.gap-lg .col-lg, .row.gap-lg .col-lg-1, .row.gap-lg .col-lg-10, .row.gap-lg .col-lg-11, .row.gap-lg .col-lg-12, .row.gap-lg .col-lg-2, .row.gap-lg .col-lg-3, .row.gap-lg .col-lg-4, .row.gap-lg .col-lg-5, .row.gap-lg .col-lg-6, .row.gap-lg .col-lg-7, .row.gap-lg .col-lg-8, .row.gap-lg .col-lg-9, .row.gap-lg .col-lg-auto, .row.gap-lg .col-md, .row.gap-lg .col-md-1, .row.gap-lg .col-md-10, .row.gap-lg .col-md-11, .row.gap-lg .col-md-12, .row.gap-lg .col-md-2, .row.gap-lg .col-md-3, .row.gap-lg .col-md-4, .row.gap-lg .col-md-5, .row.gap-lg .col-md-6, .row.gap-lg .col-md-7, .row.gap-lg .col-md-8, .row.gap-lg .col-md-9, .row.gap-lg .col-md-auto, .row.gap-lg .col-sm, .row.gap-lg .col-sm-1, .row.gap-lg .col-sm-10, .row.gap-lg .col-sm-11, .row.gap-lg .col-sm-12, .row.gap-lg .col-sm-2, .row.gap-lg .col-sm-3, .row.gap-lg .col-sm-4, .row.gap-lg .col-sm-5, .row.gap-lg .col-sm-6, .row.gap-lg .col-sm-7, .row.gap-lg .col-sm-8, .row.gap-lg .col-sm-9, .row.gap-lg .col-sm-auto, .row.gap-lg .col-xl, .row.gap-lg .col-xl-1, .row.gap-lg .col-xl-10, .row.gap-lg .col-xl-11, .row.gap-lg .col-xl-12, .row.gap-lg .col-xl-2, .row.gap-lg .col-xl-3, .row.gap-lg .col-xl-4, .row.gap-lg .col-xl-5, .row.gap-lg .col-xl-6, .row.gap-lg .col-xl-7, .row.gap-lg .col-xl-8, .row.gap-lg .col-xl-9, .row.gap-lg .col-xl-auto {
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 991px) {
  .row.gap-lg .col, .row.gap-lg .col-1, .row.gap-lg .col-10, .row.gap-lg .col-11, .row.gap-lg .col-12, .row.gap-lg .col-2, .row.gap-lg .col-3, .row.gap-lg .col-4, .row.gap-lg .col-5, .row.gap-lg .col-6, .row.gap-lg .col-7, .row.gap-lg .col-8, .row.gap-lg .col-9, .row.gap-lg .col-auto, .row.gap-lg .col-lg, .row.gap-lg .col-lg-1, .row.gap-lg .col-lg-10, .row.gap-lg .col-lg-11, .row.gap-lg .col-lg-12, .row.gap-lg .col-lg-2, .row.gap-lg .col-lg-3, .row.gap-lg .col-lg-4, .row.gap-lg .col-lg-5, .row.gap-lg .col-lg-6, .row.gap-lg .col-lg-7, .row.gap-lg .col-lg-8, .row.gap-lg .col-lg-9, .row.gap-lg .col-lg-auto, .row.gap-lg .col-md, .row.gap-lg .col-md-1, .row.gap-lg .col-md-10, .row.gap-lg .col-md-11, .row.gap-lg .col-md-12, .row.gap-lg .col-md-2, .row.gap-lg .col-md-3, .row.gap-lg .col-md-4, .row.gap-lg .col-md-5, .row.gap-lg .col-md-6, .row.gap-lg .col-md-7, .row.gap-lg .col-md-8, .row.gap-lg .col-md-9, .row.gap-lg .col-md-auto, .row.gap-lg .col-sm, .row.gap-lg .col-sm-1, .row.gap-lg .col-sm-10, .row.gap-lg .col-sm-11, .row.gap-lg .col-sm-12, .row.gap-lg .col-sm-2, .row.gap-lg .col-sm-3, .row.gap-lg .col-sm-4, .row.gap-lg .col-sm-5, .row.gap-lg .col-sm-6, .row.gap-lg .col-sm-7, .row.gap-lg .col-sm-8, .row.gap-lg .col-sm-9, .row.gap-lg .col-sm-auto, .row.gap-lg .col-xl, .row.gap-lg .col-xl-1, .row.gap-lg .col-xl-10, .row.gap-lg .col-xl-11, .row.gap-lg .col-xl-12, .row.gap-lg .col-xl-2, .row.gap-lg .col-xl-3, .row.gap-lg .col-xl-4, .row.gap-lg .col-xl-5, .row.gap-lg .col-xl-6, .row.gap-lg .col-xl-7, .row.gap-lg .col-xl-8, .row.gap-lg .col-xl-9, .row.gap-lg .col-xl-auto {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
.has-anim {
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease-out;
  transform: translateY(25px) scale(0.99);
}

.has-anim.fade {
  transform: translateY(8px) scale(1);
}

.has-anim.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.has-anim.anim-delay-1 {
  transition-delay: 0.1s;
}

.has-anim.anim-delay-2 {
  transition-delay: 0.2s;
}

.has-anim.anim-delay-3 {
  transition-delay: 0.3s;
}

.has-anim.anim-delay-4 {
  transition-delay: 0.4s;
}

.has-anim.anim-delay-6 {
  transition-delay: 0.6s;
}

.has-anim.anim-delay-7 {
  transition-delay: 0.7s;
}

.has-anim.anim-delay-8 {
  transition-delay: 0.8s;
}

.has-anim.anim-delay-9 {
  transition-delay: 0.9s;
}

@media (max-width: 767px) {
  .has-anim {
    transition-delay: 0s !important;
  }
}
.section {
  padding: 100px 0;
}

.section.pt-n30 {
  padding-top: 70px;
}

@media (max-width: 767px) {
  .section {
    padding: 80px 0;
  }

  .section.pt-n30 {
    padding-top: 50px;
  }
}
.section-sm {
  padding: 70px 0;
}

.section-sm.pt-n30 {
  padding-top: 40px;
}

.section-title {
  margin-bottom: 60px;
}

.section-title p.mb-2 {
  font-weight: 500;
}

.section-title .title {
  font-weight: 500;
  font-size: 34px;
}

@media (max-width: 767px) {
  .section-title .title {
    font-size: 28px;
  }
}
.section-title .title::after {
  content: ".";
  color: #00b75f;
}

.lead {
  font-size: 22px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .lead {
    font-size: 17px;
  }
}
.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.custom-select {
  background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='currentColor'/></g></svg>") no-repeat right 15px center;
}

.tooltip {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  z-index: 9999;
}

.tooltip.show {
  opacity: 1;
}

.tooltip .tooltip-inner {
  background-color: #001213;
  border-radius: 3px;
  padding: 8px 14px;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
  border-top-color: #001213 !important;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
  border-right-color: #001213 !important;
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
  border-bottom-color: #001213 !important;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
  border-left-color: #001213 !important;
}

.list-inline-item:not(:last-child) {
  margin-right: 1.4rem;
}

.social-icons li a {
  font-size: 20px;
}

.line-height-1 {
  line-height: 1;
}

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

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

.content .h1, .content .h2, .content .h3, .content .h4, .content .h5, .content .h6, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .font-weight-600 {
  font-weight: 600;
}

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

.text-primary {
  color: #00b75f !important;
}

.bg-primary {
  background-color: #00b75f !important;
}

a.text-primary:hover {
  color: #00ea79 !important;
}

.content .h1:not(.text-white), .content .h2:not(.text-white), .content .h3:not(.text-white), .content .h4:not(.text-white), .content .h5:not(.text-white), .content .h6:not(.text-white), .content h1:not(.text-white), .content h2:not(.text-white), .content h3:not(.text-white), .content h4:not(.text-white), .content h5:not(.text-white), .content h6:not(.text-white), .text-dark {
  color: #001213;
}

.content a.h1:hover:not(.text-white), .content a.h2:hover:not(.text-white), .content a.h3:hover:not(.text-white), .content a.h4:hover:not(.text-white), .content a.h5:hover:not(.text-white), .content a.h6:hover:not(.text-white), a.text-dark:hover {
  color: #00b75f;
}

.bg-dark {
  background-color: #001213 !important;
}

.text-light {
  color: #bbb !important;
}

.bg-light {
  background-color: #bbb !important;
}

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

.overflow-initial {
  overflow: initial;
}

.text-circleed {
  position: relative;
}

.text-circleed svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 115%;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
}

@-webkit-keyframes svg_line {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes svg_line {
  to {
    stroke-dashoffset: 0;
  }
}
.visible .text-circleed svg {
  -webkit-animation: svg_line 1.5s linear forwards;
  animation: svg_line 1.5s linear forwards;
}

.scroll-progress {
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 14;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: translateY(15px);
  transition: 0.2s linear;
  mix-blend-mode: difference;
}

@media (max-width: 575px) {
  .scroll-progress {
    right: 15px;
    bottom: 15px;
    height: 42px;
    width: 42px;
  }
}
.scroll-progress.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-progress::after, .scroll-progress::before {
  position: absolute;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='451.8' height='451.8' fill='%23ffffff'%3E%3Cpath d='M248.3 106.4l194.3 194.3a31.6 31.6 0 11-44.8 44.7L226 173.5 54 345.5a31.6 31.6 0 01-44.7-44.8l194.3-194.3a31.5 31.5 0 0144.7 0z'/%3E%3C/svg%3E");
  left: 7%;
  top: 7%;
  height: 86%;
  width: 86%;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  border-radius: 50%;
  transition: 0.2s;
  mix-blend-mode: difference;
}

.scroll-progress::before {
  background-color: #fff;
  background-image: none;
  transform: scale(0.5);
  opacity: 0;
}

.scroll-progress svg path {
  fill: none;
}

.scroll-progress svg.progress-circle path {
  stroke: #fff;
  mix-blend-mode: difference;
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 0.2s linear;
}

.scroll-progress:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='451.8' height='451.8' fill='%23FFFFFF'%3E%3Cpath d='M248.3 106.4l194.3 194.3a31.6 31.6 0 11-44.8 44.7L226 173.5 54 345.5a31.6 31.6 0 01-44.7-44.8l194.3-194.3a31.5 31.5 0 0144.7 0z'/%3E%3C/svg%3E");
}

.scroll-progress:hover::before {
  transform: scale(1);
  opacity: 1;
}

.accordion .content :not(:last-child) {
  margin-bottom: 20px !important;
}

.accordion .content ol li:not(:last-child), .accordion .content ul li:not(:last-child) {
  margin-bottom: 7px !important;
}

.accordion .card {
  border: 0 !important;
  border-radius: 0;
}

.accordion .card:not(:last-child) {
  margin-bottom: 10px;
}

.accordion .card .card-header {
  margin-bottom: 0;
}

.accordion .card-body {
  font-size: 17px;
  padding: 25px;
  background-color: #fbfdff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-top: 0;
}

.accordion .card-header a {
  font-size: 18px;
  padding: 20px 30px;
  padding-right: 65px;
  background: #001213;
  color: #fff;
  position: relative;
}

.accordion .card-header a::after {
  font-family: "Line Awesome Free";
  font-weight: 900;
  content: "\F067";
  transition: 0.3s cubic-bezier(0.7, 0, 0.3, 1);
  position: absolute;
  right: 30px;
  top: 50%;
  line-height: 1;
}

.accordion .card-header a[aria-expanded=true]::after {
  transform: translateY(-50%) rotate(-136deg);
}

.accordion .card-header a[aria-expanded=false]::after {
  transform: translateY(-50%) rotate(0);
}

.content * {
  word-break: break-word;
  overflow-wrap: break-word;
}

.content :not(:last-child) {
  margin-bottom: 15px;
}

.content .h1, .content .h2, .content .h3, .content .h4, .content .h5, .content .h6, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  margin-bottom: 20px;
  margin-top: 20px;
}

.content.content-dark .h2:not(.text-white), .content.content-dark .h3:not(.text-white), .content.content-dark .h4:not(.text-white), .content.content-dark .h5:not(.text-white), .content.content-dark .h6:not(.text-white), .content.content-dark h2:not(.text-white), .content.content-dark h3:not(.text-white), .content.content-dark h4:not(.text-white), .content.content-dark h5:not(.text-white), .content.content-dark h6:not(.text-white) {
  color: #ddd !important;
}

.content img {
  max-width: 100%;
}

.content a:not(.btn) {
  color: #333;
  text-decoration: underline;
}

.content a:not(.btn):hover {
  color: #000;
  text-decoration: none;
}

.content.content-dark a:not(.btn) {
  color: #fff;
  text-decoration: underline;
}

.content.content-dark a:not(.btn):hover {
  color: #fff;
  text-decoration: none;
}

.content ol {
  margin-left: 0;
  padding-left: 0;
  list-style-position: inside;
}

.content ol li:not(:last-child) {
  margin-bottom: 7px !important;
}

.content ul {
  padding-left: 0;
}

.content ul li {
  position: relative;
  padding-left: 18px;
  list-style-type: none;
}

.content ul li:not(:last-child) {
  margin-bottom: 7px !important;
}

.content ul li::after {
  position: absolute;
  content: "";
  height: 7px;
  width: 7px;
  background-color: #000;
  opacity: 0.5;
  left: 0;
  top: 10px;
  transform: rotate(-45deg);
}

.content.content-dark ul li::after {
  background-color: #fff;
}

.fade-slider {
  position: relative;
  overflow: hidden;
}

.fade-slider img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.fade-slider .slider-item:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.navbar-brand {
  color: #fff !important;
  font-size: 30px;
}

.navbar-brand img {
  width: 110px;
}

.navbar-brand p {
  font-size: 32px;
  padding-top: 5px;
}

.navbar-toggler {
  border: 0;
  outline: 0 !important;
  padding: 5px;
  padding-right: 0;
}

.navbar-toggler svg {
  height: 22px;
  width: 22px;
  fill: #fff;
  transition: opacity 0.3s;
}

.navbar-toggler:hover svg {
  opacity: 0.7;
}

[data-toggle=navbar-menu-close] {
  display: none;
  text-align: right;
  margin-bottom: 15px;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 10px 0;
  font-weight: 400;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

[data-toggle=navbar-menu-close] i {
  font-size: 15px;
  transform: translateY(1px);
}

.navbar-expanded [data-toggle=navbar-menu-close] {
  margin-right: 30px;
  transition: 0.3s;
}

.navbar-expanded [data-toggle=navbar-menu-close] i {
  font-size: 25px;
}

.navbar-expanded [data-toggle=navbar-menu-close]:hover {
  opacity: 0.5;
}

.navbar-light [data-toggle=navbar-menu-close] {
  color: #001213;
}

.sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 150vh;
  width: 100vw;
  background-color: rgba(0, 18, 19, 0.7);
  z-index: 3333;
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden;
}

.sidenav-overlay.show {
  opacity: 1;
  visibility: visible;
}

.navbar-dark .navbar-toggler svg {
  color: #eee;
}

.navbar-dark .navbar-nav .nav-link {
  color: #eee;
}

.navbar-expanded.navbar-light .navbar-nav .nav-link {
  color: #000;
}

.adjust-navigation-height {
  height: 106px;
}

@media (max-width: 991px) {
  .adjust-navigation-height {
    height: 90px;
  }
}
.navigation {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 9992;
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
  will-change: transform;
  background-color: #001213;
}

.navigation.visible {
  transition: 0s;
}

.navigation.header-unpinned {
  transform: translateY(-100%);
}

.navigation.header-unpinned .navbar-collapse {
  top: 106px !important;
}

@media (max-width: 991px) {
  .navigation.header-unpinned .navbar-collapse {
    top: 90px !important;
  }
}
.navigation .nav-item .nav-link {
  padding: 20px 23px;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  position: relative;
}

.navigation .navbar-dark .navbar-nav:hover .nav-item:not(:hover) .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navigation .navbar-dark .navbar-nav .nav-link:focus, .navigation .navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}

.navigation .navbar-light .navbar-nav .nav-link:focus, .navigation .navbar-light .navbar-nav .nav-link:hover {
  color: #000;
}

.navigation .navbar-light .navbar-nav:hover .nav-item:not(:hover) .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navigation .dropdown-toggle {
  padding-right: 19px;
}

.navigation .dropdown-toggle::after {
  border: 2px solid transparent;
  border-radius: 2px;
  border-right: 0;
  border-top: 0;
  content: "";
  height: 0.5em;
  width: 0.5em;
  position: relative;
  top: 1px;
  margin-left: 7px;
  pointer-events: none;
  transform: rotate(-45deg);
  transform-origin: center;
  border-color: inherit;
}

.navigation .dropdown-menu {
  border: 0;
  z-index: 1;
  background-color: #011c1e;
  margin-top: 0;
  padding-bottom: 12px;
  padding: 0;
}

.navigation .dropdown-menu .dropdown-submenu .dropdown-toggle {
  font-size: 15px;
  color: rgba(0, 18, 19, 0.9);
  padding: 14px 1rem 10px 1rem;
  border-radius: 4px;
}

@media (max-width: 1200px) {
  .navigation .dropdown-menu .dropdown-submenu .dropdown-toggle {
    padding: 12px 1rem 8px 1rem;
    font-weight: 600;
  }
}
.navigation .dropdown-menu .dropdown-submenu .dropdown-toggle:active, .navigation .dropdown-menu .dropdown-submenu .dropdown-toggle:focus, .navigation .dropdown-menu .dropdown-submenu .dropdown-toggle:hover {
  color: #00b75f;
  background-color: rgba(0, 183, 95, 0.15);
}

.navigation .dropdown-menu li:first-child a {
  padding-top: 18px;
}

.navigation .dropdown-menu li:last-child a {
  padding-bottom: 18px;
}

.navigation .dropdown-menu .dropdown-item {
  padding: 11px 20px 7px 20px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}

.navigation .dropdown-menu .dropdown-item:active, .navigation .dropdown-menu .dropdown-item:focus, .navigation .dropdown-menu .dropdown-item:hover {
  color: #fff;
  background-color: transparent;
}

@media (max-width: 1200px) {
  .navigation .dropdown-menu .dropdown-item {
    padding: 8px 1rem 4px 1rem;
  }
}
.navigation .dropdown-menu:hover li:not(:hover) .dropdown-item {
  color: rgba(255, 255, 255, 0.4);
}

@media only screen and (min-width: 991px) {
  .navigation nav.navbar:not(.navbar-expanded) .dropdown .dropdown-menu {
    position: absolute;
    left: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    min-width: 200px;
    border-radius: 0;
    background-color: #00181a;
  }

  .navigation nav.navbar:not(.navbar-expanded) .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}
@media (max-width: 991px) {
  .navigation .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 100%;
    height: 100vh;
    background-color: #000d0e;
    padding: 30px;
    padding-right: 0;
    transform: translateX(100%);
    z-index: 9999;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  .navigation .navbar-collapse {
    width: 300px;
  }
}
@media (max-width: 991px) {
  .navigation .navbar-collapse.show {
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
  }

  .navigation .navbar-actions {
    padding-right: 30px;
  }

  .navigation .navbar-nav {
    margin-bottom: 15px;
    padding-right: 30px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .navigation .navbar-nav::-webkit-scrollbar {
    width: 5px;
    background-color: #0f111b;
  }

  .navigation .nav-item .nav-link {
    padding: 15px 0;
  }

  .navigation .dropdown-menu {
    background-color: #001213;
    border-radius: 0;
  }

  .navigation .dropdown-menu .dropdown-item {
    padding: 8px 1rem 6px 1rem;
  }

  .navigation .navbar-light .dropdown-menu {
    background-color: #fff;
  }

  .navigation .dropdown-toggle::after {
    float: right;
    margin-right: 5px;
  }

  .navigation .btn {
    display: block;
  }

  .navigation [data-toggle=navbar-menu-close] {
    display: block;
  }
}
.navigation .navbar-expanded .navbar-collapse {
  position: fixed;
  top: 0;
  right: auto;
  left: 0;
  width: 320px;
  max-width: 100%;
  height: 100vh;
  padding: 30px;
  padding-right: 0;
  transform: translateX(-100%);
  z-index: 9999;
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.navigation .navbar-expanded .navbar-collapse.show {
  transform: translateX(0);
}

.navigation .navbar-expanded.navbar-light .navbar-collapse {
  background-color: #fff;
}

.navigation .navbar-expanded .navbar-actions {
  position: absolute;
  bottom: 35px;
  padding-top: 3px;
  background-color: #fff;
}

.navigation .navbar-expanded .navbar-actions .social-icons a:hover {
  color: #001213 !important;
  opacity: 0.7;
}

.navigation .navbar-expanded .navbar-nav {
  margin-bottom: 15px;
  padding-right: 30px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  position: absolute;
  width: calc(100% - 30px);
  top: 50%;
  transform: translateY(-50%);
}

.navigation .navbar-expanded .navbar-nav::-webkit-scrollbar {
  width: 5px;
  background-color: #ddd;
}

.navigation .navbar-expanded .nav-item .nav-link {
  padding: 13px 0;
  font-size: 22px;
}

.navigation .navbar-expanded .dropdown-menu {
  background-color: #001213;
  border-radius: 0;
}

.navigation .navbar-expanded .dropdown-menu .dropdown-item {
  padding: 8px 1rem 6px 1rem;
}

.navigation .navbar-expanded .navbar-light .dropdown-menu {
  background-color: #fff;
}

.navigation .navbar-expanded .dropdown-toggle::after {
  float: right;
  margin-right: 5px;
}

.navigation .navbar-expanded [data-toggle=navbar-menu-close] {
  display: block;
}

.banner {
  padding-top: 130px;
  padding-bottom: 150px;
  color: #aaa;
}

@media (max-width: 991px) {
  .banner {
    padding: 90px 0;
  }
}
@media (max-width: 767px) {
  .banner {
    padding-top: 60px;
  }
}
.banner .banner-title {
  font-size: 56px;
  font-weight: 300;
  line-height: 1.2;
}

@media (max-width: 991px) {
  .banner .banner-title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .banner .banner-title {
    font-size: 44px;
  }
}
@media (max-width: 575px) {
  .banner .banner-title {
    font-size: 38px;
  }
}
@media (max-width: 480px) {
  .banner .banner-title {
    font-size: 36px;
  }
}
.banner .banner-shape {
  height: 600px;
  width: 560px;
  max-width: 100%;
  position: absolute;
  top: -50%;
  left: -200px;
  z-index: -1;
  opacity: 0.2;
  color: #332d2b;
}

@media (max-width: 767px) {
  .banner .banner-shape {
    left: -100px;
    opacity: 0.3;
  }
}
.banner.personal-portfolio {
  padding: 100px 0 40px 0;
}

@media (max-width: 767px) {
  .banner.personal-portfolio {
    padding: 60px 0 0 0;
  }
}
.banner.personal-portfolio .user-image {
  position: relative;
  padding: 20px;
  max-width: 100%;
}

@media (max-width: 991px) {
  .banner.personal-portfolio .user-image {
    padding: 15px;
    margin-bottom: 45px;
    width: 360px;
  }
}
@media (max-width: 767px) {
  .banner.personal-portfolio .user-image {
    width: 320px;
    padding: 10px;
  }
}
@media (max-width: 575px) {
  .banner.personal-portfolio .user-image {
    width: 280px;
  }
}
.banner.personal-portfolio .user-image::after, .banner.personal-portfolio .user-image::before {
  position: absolute;
  content: "";
  height: calc(100% - 20px);
  width: 50%;
  background-color: #00b75f;
  right: 0;
  top: -20px;
  z-index: -2;
}

@media (max-width: 991px) {
  .banner.personal-portfolio .user-image::after, .banner.personal-portfolio .user-image::before {
    top: -15px;
  }
}
@media (max-width: 991px) {
  .banner.personal-portfolio .user-image::after, .banner.personal-portfolio .user-image::before {
    top: -10px;
  }
}
.banner.personal-portfolio .user-image::before {
  top: auto;
  bottom: -20px;
  right: auto;
  left: 0;
}

@media (max-width: 991px) {
  .banner.personal-portfolio .user-image::before {
    bottom: -15px;
  }
}
@media (max-width: 767px) {
  .banner.personal-portfolio .user-image::before {
    bottom: -10px;
  }
}
.banner.personal-portfolio .user-image .shape {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.banner.personal-portfolio .user-image .shape::before {
  content: "\F6BB";
  font-size: 48vw;
  color: #001213;
  line-height: 1;
  font-weight: 400;
  font-family: "Line Awesome Free";
  font-weight: 900;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 991px) {
  .banner.personal-portfolio .user-image .shape::before {
    font-size: 62vw;
  }
}
@media (max-width: 767px) {
  .banner.personal-portfolio .user-image .shape::before {
    font-size: 85vh;
  }
}
@media (max-width: 575px) {
  .banner.personal-portfolio .user-image .shape::before {
    font-size: 110vh;
  }
}
.page-header {
  padding: 50px 0 60px 0;
  color: #bbb;
}

.portfolio-card {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background-color: transparent;
}

.portfolio-card .card-img {
  border-radius: 0 !important;
}

.card-img img, .card-img-overlay, .card-subtitle, .card-title {
  display: block;
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.7s cubic-bezier(0.2, 1, 0.2, 1);
}

.card-subtitle a, .card-title a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: transparent;
  -webkit-text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
}

.card-subtitle a:hover, .card-title a:hover {
  text-decoration: underline !important;
  text-decoration-color: #fff;
  -webkit-text-decoration-color: #fff;
  -moz-text-decoration-color: #fff;
}

.card-overlay .card-img-overlay {
  top: auto;
  border-radius: 0;
  z-index: 3;
  padding: 3rem;
}

@media (max-width: 575px) {
  .card-overlay .card-img-overlay {
    padding: 2rem;
  }
}
.card-overlay .card-title {
  transform: translateY(100%);
}

@media (max-width: 991px) {
  .card-overlay .card-title {
    font-size: 30px;
  }
}
.card-overlay .card-subtitle {
  font-size: 15px;
  opacity: 0.8;
  transform: translateY(calc(-100% - 15px));
}

.card-overlay:hover .card-img-overlay, .card-overlay:hover .card-subtitle, .card-overlay:hover .card-title {
  transform: translateY(0);
}

.card-img .img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  opacity: 0;
  background-color: #000;
  transition: 0.3s ease;
}

.card-hover-zoom:hover .card-img img {
  transform: scale(1.2);
}

.card-hover-zoom:hover .card-img .img-overlay {
  opacity: 0.95;
}

.portfolio-carousel-fluid .swiper-container {
  cursor: -webkit-grab;
  cursor: grab;
}

.portfolio-carousel-fluid .swiper-slide .portfolio-card {
  margin: 0 40px;
}

@media (max-width: 1200px) {
  .portfolio-carousel-fluid .swiper-slide .portfolio-card {
    margin: 0 30px;
  }
}
@media (max-width: 991px) {
  .portfolio-carousel-fluid .swiper-slide .portfolio-card {
    margin: 0 15px;
  }
}
.portfolio-carousel-fluid .card-img-overlay {
  height: 100%;
  top: 0;
  padding: 1.25rem;
  transform: translateY(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-carousel-fluid .card-img-overlay .block .card-subtitle, .portfolio-carousel-fluid .card-img-overlay .block .card-title {
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.2, 1) !important;
  transform: translateY(60px);
}

.portfolio-carousel-fluid .card-img-overlay .block .card-subtitle {
  transition-delay: 0s !important;
}

.portfolio-carousel-fluid .card-hover-zoom:hover .card-img-overlay .block .card-subtitle, .portfolio-carousel-fluid .card-hover-zoom:hover .card-img-overlay .block .card-title {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-carousel-fluid .card-hover-zoom:hover .card-img-overlay .block .card-subtitle {
  transition-delay: 0.2s !important;
}

.portfolio-carousel-fluid .swiper-pagination-progressbar {
  top: auto;
  bottom: 10px;
  left: calc(50% - 165px);
  width: 330px;
  height: 3px;
  background: rgba(200, 200, 200, 0.4);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 575px) {
  .portfolio-carousel-fluid .swiper-pagination-progressbar {
    left: calc(50% - 100px);
    width: 200px;
  }
}
.portfolio-carousel-fluid .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #001213;
}

.portfolio-carousel-fluid .swipeCarousel-control {
  position: relative;
  height: 50px;
  top: -10px;
  pointer-events: none;
}

.portfolio-carousel-fluid .swipeCarousel-control .activeslide, .portfolio-carousel-fluid .swipeCarousel-control .totalslide {
  color: #000;
  position: absolute;
  top: calc(50% + 5px);
  left: calc(50% - 200px);
  line-height: 1;
  font-weight: 600;
}

@media (max-width: 575px) {
  .portfolio-carousel-fluid .swipeCarousel-control .activeslide, .portfolio-carousel-fluid .swipeCarousel-control .totalslide {
    left: calc(50% - 140px);
  }
}
.portfolio-carousel-fluid .swipeCarousel-control .totalslide {
  left: auto;
  right: calc(50% - 200px);
}

@media (max-width: 575px) {
  .portfolio-carousel-fluid .swipeCarousel-control .totalslide {
    right: calc(50% - 140px);
  }
}
.portfolio-carousel-fluid .swiper-button {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #000;
  padding: 10px 12px;
}

@media (max-width: 991px) {
  .portfolio-masonry .row {
    margin-bottom: 30px;
  }
}
.portfolio-masonry .portfolio-item {
  margin-bottom: 80px;
}

@media (max-width: 991px) {
  .portfolio-masonry .portfolio-item {
    margin-bottom: 30px;
  }
}
.portfolio-grid-creative .portfolio-card .block {
  background-color: #fff;
  position: relative;
  z-index: 2;
  margin: 0 30px;
  margin-top: -40px;
  padding: 15px 25px;
  transition: margin 0.3s;
  text-align: center;
}

.portfolio-grid-creative .portfolio-card:hover .block {
  margin-top: -50px;
  margin-left: 15px;
  margin-right: 15px;
}

.portfolio-floating .portfolio-card {
  overflow: initial;
  position: initial;
}

.floating-info-block-tile {
  position: fixed;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  padding: 18px 20px 10px 20px;
  color: #000;
  pointer-events: none;
}

.floating-info-block-tile > * {
  color: #000 !important;
}

.floating-info-block-tile::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transform: scale(0.4);
  background-color: #fff;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.floating-info-block-tile.visible {
  opacity: 1;
  visibility: visible;
}

.floating-info-block-tile.visible::after {
  transform: scale(1);
  transition: 0.5s cubic-bezier(0.2, 1, 0.2, 1);
}

.floating-image-block {
  position: relative;
}

.floating-image-block::before {
  content: attr(data-text);
  font-weight: 700;
  margin-right: 15px;
  position: absolute;
  bottom: 27px;
  left: 30px;
  transition: 0.3s cubic-bezier(0.2, 1, 0.2, 1);
  transition-delay: 0.2s;
  opacity: 0;
}

.floating-image-block:hover::before {
  left: 0;
  opacity: 1;
}

.floating-image-block .block {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.floating-image-block .block .floating-image-link {
  display: inline-block;
  z-index: 1;
  line-height: 1;
}

.floating-image-block .block .floating-image-link a {
  padding: 20px 0;
  display: block;
  font-size: 62px;
}

@media (max-width: 767px) {
  .floating-image-block .block .floating-image-link a {
    font-size: 52px;
  }
}
@media (max-width: 575px) {
  .floating-image-block .block .floating-image-link a {
    font-size: 42px;
  }
}
.floating-image-block .block .floating-image-link:hover a {
  padding-left: 30px;
  color: #fff !important;
}

.floating-image-block .block .floating-image {
  width: 380px;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  pointer-events: none;
}

@media (max-width: 991px) {
  .floating-image-block .block .floating-image {
    width: 280px;
  }
}
.floating-image-block .block .floating-image .image {
  overflow: hidden;
}

.floating-image-block .block .floating-image .image img {
  max-width: 100%;
  transform: scale(1.2);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.1s ease-out;
}

.floating-image-block .block.enter {
  z-index: 5;
}

.floating-image-block .block.enter .image img {
  transform: scale(1);
  opacity: 1;
}

.broken-portfolio .card-img-overlay {
  height: 100%;
  top: 0;
  padding: 1.25rem;
  transform: translateY(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.broken-portfolio .card-img-overlay .block .card-subtitle, .broken-portfolio .card-img-overlay .block .card-title {
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.2, 1) !important;
  transform: translateY(60px);
}

.broken-portfolio .card-img-overlay .block .card-subtitle {
  transition-delay: 0s !important;
}

.broken-portfolio .card-hover-zoom:hover .card-img-overlay .block .card-subtitle, .broken-portfolio .card-hover-zoom:hover .card-img-overlay .block .card-title {
  opacity: 1;
  transform: translateY(0);
}

.broken-portfolio .card-hover-zoom:hover .card-img-overlay .block .card-subtitle {
  transition-delay: 0.2s !important;
}

.service-item {
  padding: 0 10px;
  margin-bottom: 45px;
}

.service-icon-lg {
  position: absolute;
  width: calc(70% - 30px);
  opacity: 0.05;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.service-info-list {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.service-info-list li {
  list-style-type: none;
  margin-bottom: 10px;
  font-weight: 500;
  flex: 0 0 calc(47% - 5px);
  width: 100%;
  margin-right: 5px;
}

.clients-logo-grid {
  display: grid;
  row-gap: 60px;
  -moz-column-gap: 40px;
  column-gap: 40px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .clients-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}
@media (max-width: 767px) {
  .clients-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .clients-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.clients-logo-grid .logo-item {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  padding: 0 30px;
  opacity: 0.6;
  transition: 0.3s;
}

.clients-logo-grid .logo-item:hover {
  opacity: 1;
}

@media (max-width: 991px) {
  .clients-logo-grid .logo-item {
    padding: 0 20px;
  }
}
.clients-logo-grid .logo-item img {
  width: 100%;
  max-width: 100%;
}

.review-carousel .swiper-wrapper {
  cursor: -webkit-grab;
  cursor: grab;
  padding-bottom: 80px;
}

.review-carousel .review-icon {
  color: #555;
  margin-bottom: 25px;
}

.review-carousel.review-carousel-light .review-icon {
  color: #eee;
}

.review-carousel .review-text {
  color: #001213;
}

.review-carousel.review-carousel-light .review-text {
  color: #fff;
}

.review-carousel .review-text {
  line-height: 1.5;
  font-weight: 400;
}

.review-carousel .review-item {
  text-align: center;
  transition: 0.3s;
  opacity: 0;
}

.review-carousel .swiper-slide-active .review-item {
  opacity: 1;
}

.review-carousel .review-author {
  margin-top: 20px;
  display: inline-block;
  font-weight: 600;
}

.review-carousel .swipeCarousel-control {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.review-carousel .swipeCarousel-control div {
  display: inline-block;
  position: relative;
  width: 75px;
  font-weight: 500;
  text-align: center;
}

.review-carousel .swipeCarousel-control div:first-child::after {
  content: "";
  height: 1px;
  width: 20px;
  background-color: #001213;
  top: 45%;
  right: -13px;
  position: absolute;
}

.review-carousel.review-carousel-light .swipeCarousel-control div {
  color: #aaa;
}

.review-carousel.review-carousel-light .swipeCarousel-control div:first-child::after {
  background-color: #fff;
}

.work-process-item {
  margin: auto;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  overflow: hidden;
  margin-top: 38px;
}

@media (max-width: 991px) {
  .work-process-item {
    padding: 0 50px;
  }
}
@media (max-width: 767px) {
  .work-process-item {
    padding: 0;
  }
}
@media (max-width: 575px) {
  .work-process-item {
    width: 60%;
  }
}
@media (max-width: 420px) {
  .work-process-item {
    width: 100%;
    padding: 0 20px;
  }
}
.work-process-item .process-title {
  position: relative;
}

.work-process-item .process-title::after {
  position: absolute;
  content: "0";
  top: 0;
  left: 50%;
  color: #fff;
  opacity: 0.015;
  font-size: 300px;
  font-weight: 900;
  line-height: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .work-process-item .process-title::after {
    font-size: 210px;
  }
}
.work-process-item .process-text {
  -webkit-text-stroke: 1px #fff;
  -webkit-text-fill-color: transparent;
  font-size: 90px;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .work-process-item .process-text {
    font-size: 60px;
  }
}
.work-process-item.focus .process-text, .work-process-item:hover .process-text {
  -webkit-animation: shadow-anim 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation: shadow-anim 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

@-webkit-keyframes shadow-anim {
  0% {
    text-shadow: 4px 4px rgba(0, 183, 95, 0.6), -5px 4px rgba(240, 255, 24, 0.8);
  }
  25% {
    text-shadow: -5px 4px rgba(33, 150, 243, 0.7), 4px 4px rgba(240, 255, 24, 0.6);
  }
  50% {
    text-shadow: 4px -4px rgba(3, 236, 139, 0.8), -5px 4px rgba(33, 150, 243, 0.2);
  }
  75% {
    text-shadow: -4px -4px rgba(240, 255, 24, 0.7), 4px 4px rgba(3, 236, 139, 0.6);
  }
  100% {
    text-shadow: 4px 4px rgba(0, 183, 95, 0.7), -5px 4px rgba(255, 87, 219, 0.4);
  }
}
@keyframes shadow-anim {
  0% {
    text-shadow: 4px 4px rgba(0, 183, 95, 0.6), -5px 4px rgba(240, 255, 24, 0.8);
  }
  25% {
    text-shadow: -5px 4px rgba(33, 150, 243, 0.7), 4px 4px rgba(240, 255, 24, 0.6);
  }
  50% {
    text-shadow: 4px -4px rgba(3, 236, 139, 0.8), -5px 4px rgba(33, 150, 243, 0.2);
  }
  75% {
    text-shadow: -4px -4px rgba(240, 255, 24, 0.7), 4px 4px rgba(3, 236, 139, 0.6);
  }
  100% {
    text-shadow: 4px 4px rgba(0, 183, 95, 0.7), -5px 4px rgba(255, 87, 219, 0.4);
  }
}
.blog-card {
  position: relative;
  margin-top: 30px;
  height: calc(100% - 30px);
  padding: 30px;
}

@media (max-width: 420px) {
  .blog-card {
    padding: 20px;
  }
}
.blog-card .card-background {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.05;
}

.blog-card .card-image {
  overflow: hidden;
  display: block;
}

.blog-card .card-image img {
  transform: scale(1.02);
  transition: 0.3s;
  transform-origin: right;
}

.blog-card .card-image:hover img {
  transform-origin: left;
}

.blog-card .card-text {
  font-size: 15px;
}

.blog-card .card-tag {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
}

.blog-card .card-tag a {
  color: #909090;
}

.blog-card .card-tag a:hover {
  color: #444;
  text-decoration: underline;
}

.blog-card .card-title a {
  display: inline-block;
  color: #001213;
  transition: 0.2s;
  text-decoration: underline;
  text-decoration-color: transparent;
  -webkit-text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
}

.blog-card .card-title a:hover {
  color: #222;
  text-decoration-color: #444;
  -webkit-text-decoration-color: #444;
  -moz-text-decoration-color: #444;
}

.blog-card .card-meta {
  font-size: 14px;
}

.team-group-carousel .swiper-container {
  cursor: -webkit-grab;
  cursor: grab;
}

@media (max-width: 767px) {
  .team-group-carousel .swiper-container {
    padding-right: 100px;
  }
}
@media (max-width: 575px) {
  .team-group-carousel .swiper-container {
    padding-right: 75px;
  }
}
@media (max-width: 480px) {
  .team-group-carousel .swiper-container {
    padding-right: 50px;
  }
}
.team-group-carousel .swiper-slide {
  display: flex;
  justify-content: center;
}

.team-group-carousel .team-group-image {
  text-align: center;
  overflow: hidden;
  display: inline-block;
}

.team-group-carousel .team-group-image img {
  max-width: 100%;
  transition: 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.team-group-carousel .team-group-image img.hold {
  transform: scale(1.2);
  transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 420px) {
  .row-team .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.team-item {
  margin-top: 35px;
}

.team-item .block img {
  transition: 0.3s;
}

.team-item .block .social-profile {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 0, #000 100%);
  z-index: 2;
  opacity: 0;
  transition: 0.3s;
}

@media (max-width: 480px) {
  .team-item .block .social-profile ul {
    text-align: center;
  }
}
.team-item .block .social-profile ul li {
  transform: translateY(-30px);
  opacity: 0;
  transition: transform 0.3s, opacity 0.2s;
}

.team-item .block .social-profile ul li:nth-child(2) {
  transition-delay: 0.08s;
}

.team-item .block .social-profile ul li:nth-child(3) {
  transition-delay: 0.16s;
}

.team-item .block .social-profile ul li:nth-child(4) {
  transition-delay: 0.24s;
}

.team-item .block .social-profile ul li:nth-child(5) {
  transition-delay: 0.32s;
}

.team-item .block .social-profile ul li:nth-child(6) {
  transition-delay: 0.4s;
}

@media (max-width: 480px) {
  .team-item .block .social-profile ul li {
    margin: 0 0.5rem;
  }
}
.team-item .block .social-profile ul li a {
  font-size: 22px;
  color: #fff;
}

.team-item .block .social-profile ul li a:hover {
  opacity: 0.7;
}

.team-item:hover .block img {
  transform: scale(1.1);
}

.team-item:hover .block .social-profile {
  opacity: 1;
}

.team-item:hover .block .social-profile ul li {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 575px) {
  .team-item {
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}
.open-positions-list li:not(:last-child) {
  padding-bottom: 25px;
  margin-bottom: 19px;
  border-bottom: 1px solid #20222d;
}

@media (max-width: 767px) {
  .open-positions-list li:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 14px;
  }
}
.about-me-image {
  border-top-left-radius: 300px;
  border-top-right-radius: 300px;
  box-shadow: 0 -5px 0 #00b75f, 0 -10px 0 rgba(0, 183, 95, 0.5), 0 -15px 0 rgba(0, 183, 95, 0.25);
}

.about-me-slider {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
}

.about-me-block:not(:last-child) {
  margin-bottom: 80px;
}

.about-me-block .about-me-title {
  position: relative;
  padding-left: 30px;
  margin-bottom: 40px;
}

.about-me-block .about-me-title::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 12px;
  background-color: #00b75f;
  top: 0;
  left: 0;
  border-radius: 15px;
}

.pricing-plans .block {
  padding: 40px;
}

@media (max-width: 767px) {
  .pricing-plans .block {
    padding: 40px 30px;
  }
}
@media (max-width: 575px) {
  .pricing-plans .block {
    padding: 40px 20px;
  }
}
.pricing-plans .price-wrapper {
  margin: 25px 0;
}

.pricing-plans .price-wrapper .price {
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
}

.footer-alt {
  padding: 130px 0;
}

@media (max-width: 991px) {
  .footer-alt {
    padding: 100px 0;
  }

  .footer-alt .h1 {
    font-size: 36px;
  }
}
.footer-link {
  margin-bottom: 10px;
}

.footer-link li:not(:last-child) {
  margin-bottom: 10px;
}

.footer-link.text-center li {
  margin-left: 13px !important;
  margin-right: 13px !important;
}

.footer-link a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-decoration-color: transparent;
  -webkit-text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
}

.footer-link a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration-color: rgba(255, 255, 255, 0.8);
  -webkit-text-decoration-color: rgba(255, 255, 255, 0.8);
  -moz-text-decoration-color: rgba(255, 255, 255, 0.8);
}

.simplebar-scroll-content {
  min-height: 100%;
  width: 100%;
}

.simplebar-content {
  padding-bottom: 0.25rem !important;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[data-simplebar] {
  position: relative;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit;
}

.simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0;
}

.simplebar-offset {
  direction: inherit !important;
  box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.simplebar-content-wrapper,
.simplebar-scroll-content {
  direction: inherit;
  box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  visibility: visible;
  max-width: 100%;
  max-height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: hidden scroll;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-scroll-content::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.simplebar-content:before,
.simplebar-content:after {
  content: " ";
  display: table;
}

.simplebar-placeholder {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  pointer-events: none;
}

.simplebar-height-auto-observer-wrapper {
  box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  flex-grow: inherit;
  flex-shrink: 0;
  flex-basis: 0;
}

.simplebar-height-auto-observer {
  box-sizing: inherit;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1000%;
  width: 1000%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}

.simplebar-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 10px;
}

.simplebar-scrollbar .hidden-scrollbar {
  visibility: hidden;
}

.simplebar-scrollbar:before {
  position: absolute;
  content: "";
  background: #8094ae;
  border-radius: 5px;
  left: 2px;
  right: 2px;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.simplebar-scrollbar.simplebar-visible:before {
  opacity: 0.5;
  transition: opacity 0s linear;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 8px !important;
  transition: width 0.1s;
}

.simplebar-track.simplebar-vertical.simplebar-hover {
  width: 10px !important;
}

.simplebar-track.simplebar-vertical,
.simplebar-track.simplebar-vertical,
.simplebar-track.simplebar-vertical,
.simplebar-track.simplebar-vertical {
  visibility: hidden;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px;
}

.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 8px !important;
  transition: height 0.1s;
}

.simplebar-track.simplebar-horizontal.simplebar-hover {
  height: 10px !important;
}

.simplebar-track.simplebar-horizontal,
.simplebar-track.simplebar-horizontal,
.simplebar-track.simplebar-horizontal {
  visibility: hidden !important;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  height: 100%;
  left: 2px;
  right: 2px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 2px;
  height: 7px;
  min-height: 0;
  min-width: 10px;
  width: auto;
}

[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0;
}

.admin-menu {
  width: 200px;
  position: fixed;
  z-index: 999;
  height: 100%;
  background: #fff;
}
.admin-menu .main-menu {
  padding: 1rem 1.5rem;
  margin-bottom: 0;
}
.admin-menu .main-menu .sub-header {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  padding-top: 10px;
  padding-bottom: 0px;
  display: block;
  margin-bottom: 10px;
  color: #448eef;
}
.admin-menu .main-menu .sub-header span {
  padding: 7px;
  padding-left: 5px;
  display: block;
  transition: all 0.2s ease;
}
.admin-menu .main-menu .sub-header:first-child span {
  padding-top: 0;
}
.admin-menu .main-menu .menu-items {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
.admin-menu .main-menu .menu-items .menu-item {
  color: #3E4B5B;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 12px;
}
.admin-menu .main-menu .menu-items .menu-item .icon {
  font-size: 16px;
  padding: 7px 10px 7px 0;
  width: 40px;
  color: #0073ff;
}
.admin-menu .main-menu .menu-items .menu-item span {
  padding: 7px;
  display: block;
  flex: 1;
  transition: all 0.2s ease;
  font-size: 12px;
  color: #3e4b5b;
}
.admin-menu .main-menu .menu-items .menu-item .icon + span {
  padding-left: 0;
}

#app-sandy-admin {
  background: #fff;
}
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;
  vertical-align: baseline;
}

button:focus {
  outline: none;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

img, fieldset, a img {
  border: none;
}

input[type=text], input[type=email], input[type=tel] {
  -webkit-appearance: none;
}

textarea {
  -webkit-appearance: none;
}

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

input[type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
}

input, button {
  margin: 0;
  padding: 0;
  border: 0;
}

div, input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus {
  outline: none;
}

ul, ol {
  list-style-type: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track, .slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before {
  content: "";
  display: table;
}
.slick-track:after {
  content: "";
  display: table;
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.nice-select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: #fff;
  border-radius: 5px;
  border: solid 1px #e8e8e8;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: 42px;
  line-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto;
}
.nice-select:hover {
  border-color: #dbdbdb;
}
.nice-select:active, .nice-select.open, .nice-select:focus {
  border-color: #999;
}
.nice-select:after {
  border-bottom: 2px solid #999;
  border-right: 2px solid #999;
  content: "";
  display: block;
  height: 5px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform-origin: 66% 66%;
  transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  width: 5px;
}
.nice-select.open:after {
  transform: rotate(-135deg);
}
.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}
.nice-select.disabled:after {
  border-color: #cccccc;
}
.nice-select.wide {
  width: 100%;
}
.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important;
}
.nice-select.right {
  float: right;
}
.nice-select.right .list {
  left: auto;
  right: 0;
}
.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}
.nice-select.small:after {
  height: 4px;
  width: 4px;
}
.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}
.nice-select .list {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: 50% 0;
  transform: scale(0.75) translateY(-21px);
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
}
.nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important;
}
.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  transition: all 0.2s;
}
.nice-select .option:hover, .nice-select .option.focus {
  background-color: #f6f6f6;
}
.nice-select .option.selected {
  font-weight: bold;
}
.nice-select .option.selected.focus {
  background-color: #f6f6f6;
}
.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}

.no-csspointerevents .nice-select .list {
  display: none;
}
.no-csspointerevents .nice-select.open .list {
  display: block;
}

.tooltipster-fall, .tooltipster-grow.tooltipster-show {
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-base {
  display: flex;
  pointer-events: none;
  position: absolute;
}

.tooltipster-box {
  flex: 1 1 auto;
}

.tooltipster-content {
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
}

.tooltipster-ruler {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
}

.tooltipster-fade {
  opacity: 0;
  transition-property: opacity;
}
.tooltipster-fade.tooltipster-show {
  opacity: 1;
}

.tooltipster-grow {
  transform: scale(0, 0);
  transition-property: transform;
  -webkit-backface-visibility: hidden;
}
.tooltipster-grow.tooltipster-show {
  transform: scale(1, 1);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-swing {
  opacity: 0;
  transform: rotateZ(4deg);
  transition-property: transform;
}
.tooltipster-swing.tooltipster-show {
  opacity: 1;
  transform: rotateZ(0);
  transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
  transition-property: top;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.tooltipster-fall.tooltipster-initial {
  top: 0 !important;
}
.tooltipster-fall.tooltipster-dying {
  transition-property: all;
  top: 0 !important;
  opacity: 0;
}

.tooltipster-slide {
  transition-property: left;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}
.tooltipster-slide.tooltipster-initial {
  left: -40px !important;
}
.tooltipster-slide.tooltipster-dying {
  transition-property: all;
  left: 0 !important;
  opacity: 0;
}

@-webkit-keyframes tooltipster-fading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tooltipster-fading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tooltipster-update-fade {
  -webkit-animation: tooltipster-fading 0.4s;
  animation: tooltipster-fading 0.4s;
}

@-webkit-keyframes tooltipster-rotating {
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes tooltipster-rotating {
  25% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0);
  }
}
.tooltipster-update-rotate {
  -webkit-animation: tooltipster-rotating 0.6s;
  animation: tooltipster-rotating 0.6s;
}

@-webkit-keyframes tooltipster-scaling {
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tooltipster-scaling {
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.tooltipster-update-scale {
  -webkit-animation: tooltipster-scaling 0.6s;
  animation: tooltipster-scaling 0.6s;
}

.tooltipster-sidetip .tooltipster-box {
  background: #565656;
  border: 2px solid #000;
  border-radius: 4px;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
  margin-top: 8px;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-box {
  margin-right: 8px;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-box {
  margin-left: 8px;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-box {
  margin-bottom: 8px;
}
.tooltipster-sidetip .tooltipster-content {
  color: #fff;
  line-height: 18px;
  padding: 6px 14px;
}
.tooltipster-sidetip .tooltipster-arrow {
  overflow: hidden;
  position: absolute;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
  height: 10px;
  margin-left: -10px;
  top: 0;
  width: 20px;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
  height: 20px;
  margin-top: -10px;
  right: 0;
  top: 0;
  width: 10px;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
  height: 20px;
  margin-top: -10px;
  left: 0;
  top: 0;
  width: 10px;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
  bottom: 0;
  height: 10px;
  margin-left: -10px;
  width: 20px;
}
.tooltipster-sidetip .tooltipster-arrow-background, .tooltipster-sidetip .tooltipster-arrow-border {
  height: 0;
  position: absolute;
  width: 0;
}
.tooltipster-sidetip .tooltipster-arrow-background {
  border: 10px solid transparent;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #565656;
  left: 0;
  top: 3px;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
  border-left-color: #565656;
  left: -3px;
  top: 0;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
  border-right-color: #565656;
  left: 3px;
  top: 0;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #565656;
  left: 0;
  top: -3px;
}
.tooltipster-sidetip .tooltipster-arrow-border {
  border: 10px solid transparent;
  left: 0;
  top: 0;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: #000;
}
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
  border-left-color: #000;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
  border-right-color: #000;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
  border-top-color: #000;
}
.tooltipster-sidetip .tooltipster-arrow-uncropped {
  position: relative;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
  top: -10px;
}
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
  left: -10px;
}

/*
 RichText: WYSIWYG editor developed as jQuery plugin

 @name RichText
 @author https://github.com/webfashionist - Bob Schockweiler - richtext@webfashion.eu

 Copyright (C) 2020 Bob Schockweiler ( richtext@webfashion.eu )

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published
 by the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
.richText {
  position: relative;
  background-color: #FAFAFA;
  border: #EFEFEF solid 1px;
  color: #333333;
  width: 100%;
}
.richText .richText-form {
  font-family: Calibri, Verdana, Helvetica, sans-serif;
}
.richText .richText-form label {
  display: block;
  padding: 10px 15px;
}
.richText .richText-form input[type=text], .richText .richText-form input[type=file], .richText .richText-form input[type=number] {
  padding: 10px 15px;
  border: #999999 solid 1px;
  min-width: 200px;
  width: 100%;
}
.richText .richText-form select {
  padding: 10px 15px;
  border: #999999 solid 1px;
  min-width: 200px;
  width: 100%;
  cursor: pointer;
}
.richText .richText-form button {
  margin: 10px 0;
  padding: 10px 15px;
  background-color: #3498db;
  border: none;
  color: #FAFAFA;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
}
.richText .richText-toolbar {
  min-height: 20px;
  border-bottom: #EFEFEF solid 1px;
}
.richText .richText-toolbar .richText-length {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 13px;
  vertical-align: middle;
  line-height: 34px;
}
.richText .richText-toolbar .richText-length .black {
  color: #000;
}
.richText .richText-toolbar .richText-length .orange {
  color: orange;
}
.richText .richText-toolbar .richText-length .red {
  color: red;
}
.richText .richText-toolbar ul {
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.richText .richText-toolbar ul li {
  float: left;
  display: block;
  list-style: none;
}
.richText .richText-toolbar ul li a {
  display: block;
  padding: 10px 13px;
  border-right: #EFEFEF solid 1px;
  cursor: pointer;
  transition: background-color 0.4s;
}
.richText .richText-toolbar ul li a .fa, .richText .richText-toolbar ul li a .fas, .richText .richText-toolbar ul li a .far, .richText .richText-toolbar ul li a svg {
  pointer-events: none;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: default;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown {
  position: relative;
  display: block;
  margin: 3% auto 0 auto;
  background-color: #FAFAFA;
  border: #EFEFEF solid 1px;
  min-width: 100px;
  width: 300px;
  max-width: 90%;
  box-shadow: 0 0 5px 0 #333;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer .richText-dropdown .richText-dropdown-close {
  position: absolute;
  top: 0;
  right: -23px;
  background: #FFF;
  color: #333;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  width: 20px;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown {
  list-style: none;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li {
  display: block;
  float: none;
  font-family: Calibri, Verdana, Helvetica, sans-serif;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a {
  display: block;
  padding: 10px 15px;
  border-bottom: #EFEFEF solid 1px;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li a:hover {
  background-color: #FFFFFF;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline {
  margin: 10px 6px;
  float: left;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline a {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 10px 0 #999;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer ul.richText-dropdown li.inline a span {
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
.richText .richText-toolbar ul li a .richText-dropdown-outer div.richText-dropdown {
  padding: 10px 15px;
}
.richText .richText-toolbar ul li a:hover {
  background-color: #FFFFFF;
}
.richText .richText-toolbar ul li[data-disable=true] {
  opacity: 0.1;
}
.richText .richText-toolbar ul li[data-disable=true] a {
  cursor: default;
}
.richText .richText-toolbar ul li:not([data-disable=true]).is-selected .richText-dropdown-outer {
  display: block;
}
.richText .richText-toolbar ul:after {
  display: block;
  content: "";
  clear: both;
}
.richText .richText-toolbar:last-child {
  font-size: 12px;
}
.richText .richText-toolbar:after {
  display: block;
  clear: both;
  content: "";
}
.richText .richText-editor {
  padding: 20px;
  background-color: #FFFFFF;
  border-left: #FFFFFF solid 2px;
  font-family: Calibri, Verdana, Helvetica, sans-serif;
  height: 300px;
  outline: none;
  overflow-y: scroll;
  overflow-x: auto;
}
.richText .richText-editor ul, .richText .richText-editor ol {
  margin: 10px 25px;
}
.richText .richText-editor table {
  margin: 10px 0;
  border-spacing: 0;
  width: 100%;
}
.richText .richText-editor table td, .richText .richText-editor table th {
  padding: 10px;
  border: #EFEFEF solid 1px;
}
.richText .richText-editor:focus {
  border-left: #3498db solid 2px;
}
.richText .richText-initial {
  margin-bottom: -4px;
  padding: 10px;
  background-color: #282828;
  border: none;
  color: #33FF33;
  font-family: Monospace, Calibri, Verdana, Helvetica, sans-serif;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  min-height: 400px;
  height: 400px;
}
.richText .richText-help {
  float: right;
  display: block;
  padding: 10px 15px;
  cursor: pointer;
}
.richText .richText-undo, .richText .richText-redo {
  float: left;
  display: block;
  padding: 10px 15px;
  border-right: #EFEFEF solid 1px;
  cursor: pointer;
}
.richText .richText-undo.is-disabled, .richText .richText-redo.is-disabled {
  opacity: 0.4;
}
.richText .richText-help-popup a {
  color: #3498db;
  text-decoration: underline;
}
.richText .richText-help-popup hr {
  margin: 10px auto 5px auto;
  border: none;
  border-top: #EFEFEF solid 1px;
}
.richText .richText-list.list-rightclick {
  position: absolute;
  background-color: #FAFAFA;
  border-right: #EFEFEF solid 1px;
  border-bottom: #EFEFEF solid 1px;
}
.richText .richText-list.list-rightclick li {
  padding: 5px 7px;
  cursor: pointer;
  list-style: none;
}

body.compensate-for-scrollbar {
  overflow: hidden;
}

.fancybox-active {
  height: auto;
}

.fancybox-is-hidden {
  left: -9999px;
  margin: 0;
  position: absolute !important;
  top: -9999px;
  visibility: hidden;
}

.fancybox-container {
  -webkit-backface-visibility: hidden;
  height: 100%;
  left: 0;
  outline: none;
  position: fixed;
  -webkit-tap-highlight-color: transparent;
  top: 0;
  touch-action: manipulation;
  transform: translateZ(0);
  width: 100%;
  z-index: 99992;
}
.fancybox-container * {
  box-sizing: border-box;
}

.fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.fancybox-outer {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

.fancybox-bg {
  background: #1e1e1e;
  opacity: 0;
  transition-duration: inherit;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71);
}

.fancybox-is-open .fancybox-bg {
  opacity: 0.9;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar {
  direction: ltr;
  opacity: 0;
  position: absolute;
  transition: opacity 0.25s ease, visibility 0s ease 0.25s;
  visibility: hidden;
  z-index: 99997;
}

.fancybox-show-caption .fancybox-caption, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-nav .fancybox-navigation .fancybox-button, .fancybox-show-toolbar .fancybox-toolbar {
  opacity: 1;
  transition: opacity 0.25s ease 0s, visibility 0s ease 0s;
  visibility: visible;
}

.fancybox-infobar {
  color: #ccc;
  font-size: 13px;
  -webkit-font-smoothing: subpixel-antialiased;
  height: 44px;
  left: 0;
  line-height: 44px;
  min-width: 44px;
  mix-blend-mode: difference;
  padding: 0 10px;
  pointer-events: none;
  top: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fancybox-toolbar {
  right: 0;
  top: 0;
}

.fancybox-stage {
  direction: ltr;
  overflow: visible;
  transform: translateZ(0);
  z-index: 99994;
}

.fancybox-is-open .fancybox-stage {
  overflow: hidden;
}

.fancybox-slide {
  -webkit-backface-visibility: hidden;
  display: none;
  height: 100%;
  left: 0;
  outline: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 44px;
  position: absolute;
  text-align: center;
  top: 0;
  transition-property: transform, opacity;
  white-space: normal;
  width: 100%;
  z-index: 99994;
}
.fancybox-slide:before {
  content: "";
  display: inline-block;
  font-size: 0;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous {
  display: block;
}

.fancybox-slide--image {
  overflow: hidden;
  padding: 44px 0;
}
.fancybox-slide--image:before {
  display: none;
}

.fancybox-slide--html {
  padding: 6px;
}

.fancybox-content {
  background: #fff;
  display: inline-block;
  margin: 0;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 44px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

.fancybox-slide--image .fancybox-content {
  -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
  -webkit-backface-visibility: hidden;
  background: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 0;
  max-width: none;
  overflow: visible;
  padding: 0;
  position: absolute;
  top: 0;
  transform-origin: top left;
  transition-property: transform, opacity;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 99995;
}

.fancybox-can-zoomOut .fancybox-content {
  cursor: zoom-out;
}

.fancybox-can-zoomIn .fancybox-content {
  cursor: zoom-in;
}

.fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content {
  cursor: -webkit-grab;
  cursor: grab;
}

.fancybox-is-grabbing .fancybox-content {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.fancybox-container [data-selectable=true] {
  cursor: text;
}

.fancybox-image {
  background: transparent;
  border: 0;
  height: 100%;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}

.fancybox-spaceball {
  background: transparent;
  border: 0;
  height: 100%;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  position: absolute;
  top: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  z-index: 1;
}

.fancybox-slide--iframe .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--pdf .fancybox-content {
  height: 100%;
  overflow: visible;
  padding: 0;
  width: 100%;
}

.fancybox-slide--video .fancybox-content {
  height: 100%;
  overflow: visible;
  padding: 0;
  width: 100%;
  background: #000;
}

.fancybox-slide--map .fancybox-content {
  background: #e5e3df;
}

.fancybox-slide--iframe .fancybox-content {
  background: #fff;
}

.fancybox-iframe, .fancybox-video {
  background: transparent;
  border: 0;
  display: block;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.fancybox-iframe {
  left: 0;
  position: absolute;
  top: 0;
}

.fancybox-error {
  background: #fff;
  cursor: default;
  max-width: 400px;
  padding: 40px;
  width: 100%;
}
.fancybox-error p {
  color: #444;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 0;
}

.fancybox-button {
  background: rgba(30, 30, 30, 0.6);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  height: 44px;
  margin: 0;
  padding: 10px;
  position: relative;
  transition: color 0.2s;
  vertical-align: top;
  visibility: inherit;
  width: 44px;
  color: #ccc;
}
.fancybox-button:link, .fancybox-button:visited {
  color: #ccc;
}
.fancybox-button:hover {
  color: #fff;
}
.fancybox-button:focus {
  outline: none;
}
.fancybox-button.fancybox-focus {
  outline: 1px dotted;
}
.fancybox-button[disabled] {
  color: #888;
  cursor: default;
  outline: none;
}
.fancybox-button[disabled]:hover {
  color: #888;
  cursor: default;
  outline: none;
}
.fancybox-button div {
  height: 100%;
}
.fancybox-button svg {
  display: block;
  height: 100%;
  overflow: visible;
  position: relative;
  width: 100%;
}
.fancybox-button svg path {
  fill: currentColor;
  stroke-width: 0;
}

.fancybox-button--fsenter svg:nth-child(2), .fancybox-button--fsexit svg:first-child, .fancybox-button--pause svg:first-child, .fancybox-button--play svg:nth-child(2) {
  display: none;
}

.fancybox-progress {
  background: #ff5268;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0;
  transition-property: transform;
  transition-timing-function: linear;
  z-index: 99998;
}

.fancybox-close-small {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #ccc;
  cursor: pointer;
  opacity: 0.8;
  padding: 8px;
  position: absolute;
  right: -12px;
  top: -44px;
  z-index: 401;
}
.fancybox-close-small:hover {
  color: #fff;
  opacity: 1;
}

.fancybox-slide--html .fancybox-close-small {
  color: currentColor;
  padding: 10px;
  right: 0;
  top: 0;
}

.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
  overflow: hidden;
}

.fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
  display: none;
}

.fancybox-navigation .fancybox-button {
  background-clip: content-box;
  height: 100px;
  opacity: 0;
  position: absolute;
  top: calc(50% - 50px);
  width: 70px;
}
.fancybox-navigation .fancybox-button div {
  padding: 7px;
}
.fancybox-navigation .fancybox-button--arrow_left {
  left: 0;
  left: env(safe-area-inset-left);
  padding: 31px 26px 31px 6px;
}
.fancybox-navigation .fancybox-button--arrow_right {
  padding: 31px 6px 31px 26px;
  right: 0;
  right: env(safe-area-inset-right);
}

.fancybox-caption {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent);
  bottom: 0;
  color: #eee;
  font-size: 14px;
  font-weight: 400;
  left: 0;
  line-height: 1.5;
  padding: 75px 44px 25px;
  pointer-events: none;
  right: 0;
  text-align: center;
  z-index: 99996;
}

@supports (padding: 0px) {
  .fancybox-caption {
    padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left));
  }
}
.fancybox-caption--separate {
  margin-top: -50px;
}

.fancybox-caption__body {
  max-height: 50vh;
  overflow: auto;
  pointer-events: all;
}

.fancybox-caption a {
  color: #ccc;
  text-decoration: none;
}
.fancybox-caption a:link, .fancybox-caption a:visited {
  color: #ccc;
  text-decoration: none;
}
.fancybox-caption a:hover {
  color: #fff;
  text-decoration: underline;
}

.fancybox-loading {
  -webkit-animation: a 1s linear infinite;
  animation: a 1s linear infinite;
  background: transparent;
  border: 4px solid #888;
  border-bottom-color: #fff;
  border-radius: 50%;
  height: 50px;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 99999;
}

@-webkit-keyframes a {
  to {
    transform: rotate(1turn);
  }
}
@keyframes a {
  to {
    transform: rotate(1turn);
  }
}
.fancybox-animated {
  transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}

.fancybox-fx-slide.fancybox-slide--previous {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.fancybox-fx-slide.fancybox-slide--next {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.fancybox-fx-slide.fancybox-slide--current {
  opacity: 1;
  transform: translateZ(0);
}

.fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.fancybox-fx-fade.fancybox-slide--current {
  opacity: 1;
}

.fancybox-fx-zoom-in-out.fancybox-slide--previous {
  opacity: 0;
  transform: scale3d(1.5, 1.5, 1.5);
}
.fancybox-fx-zoom-in-out.fancybox-slide--next {
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
}
.fancybox-fx-zoom-in-out.fancybox-slide--current {
  opacity: 1;
  transform: scaleX(1);
}

.fancybox-fx-rotate.fancybox-slide--previous {
  opacity: 0;
  transform: rotate(-1turn);
}
.fancybox-fx-rotate.fancybox-slide--next {
  opacity: 0;
  transform: rotate(1turn);
}
.fancybox-fx-rotate.fancybox-slide--current {
  opacity: 1;
  transform: rotate(0deg);
}

.fancybox-fx-circular.fancybox-slide--previous {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0);
}
.fancybox-fx-circular.fancybox-slide--next {
  opacity: 0;
  transform: scale3d(0, 0, 0) translate3d(100%, 0, 0);
}
.fancybox-fx-circular.fancybox-slide--current {
  opacity: 1;
  transform: scaleX(1) translateZ(0);
}

.fancybox-fx-tube.fancybox-slide--previous {
  transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg);
}
.fancybox-fx-tube.fancybox-slide--next {
  transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg);
}
.fancybox-fx-tube.fancybox-slide--current {
  transform: translateZ(0) scale(1);
}

@media (max-height: 576px) {
  .fancybox-slide {
    padding-left: 6px;
    padding-right: 6px;
  }

  .fancybox-slide--image {
    padding: 6px 0;
  }

  .fancybox-close-small {
    right: -6px;
  }

  .fancybox-slide--image .fancybox-close-small {
    background: #4e4e4e;
    color: #f2f4f6;
    height: 36px;
    opacity: 1;
    padding: 6px;
    right: 0;
    top: 0;
    width: 36px;
  }

  .fancybox-caption {
    padding-left: 12px;
    padding-right: 12px;
  }

  @supports (padding: 0px) {
    .fancybox-caption {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
  }
}
.fancybox-share {
  background: #f4f4f4;
  border-radius: 3px;
  max-width: 90%;
  padding: 30px;
  text-align: center;
}
.fancybox-share h1 {
  color: #222;
  font-size: 35px;
  font-weight: 700;
  margin: 0 0 20px;
}
.fancybox-share p {
  margin: 0;
  padding: 0;
}

.fancybox-share__button {
  border: 0;
  border-radius: 3px;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
  margin: 0 5px 10px;
  min-width: 130px;
  padding: 0 15px;
  text-decoration: none;
  transition: all 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}
.fancybox-share__button:link, .fancybox-share__button:visited {
  color: #fff;
}
.fancybox-share__button:hover {
  text-decoration: none;
}

.fancybox-share__button--fb {
  background: #3b5998;
}
.fancybox-share__button--fb:hover {
  background: #344e86;
}

.fancybox-share__button--pt {
  background: #bd081d;
}
.fancybox-share__button--pt:hover {
  background: #aa0719;
}

.fancybox-share__button--tw {
  background: #1da1f2;
}
.fancybox-share__button--tw:hover {
  background: #0d95e8;
}

.fancybox-share__button svg {
  height: 25px;
  margin-right: 7px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 25px;
}
.fancybox-share__button svg path {
  fill: #fff;
}

.fancybox-share__input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d7d7d7;
  border-radius: 0;
  color: #5d5b5b;
  font-size: 14px;
  margin: 10px 0 0;
  outline: none;
  padding: 10px 15px;
  width: 100%;
}

.fancybox-thumbs {
  background: #ddd;
  bottom: 0;
  display: none;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  padding: 2px 2px 4px;
  position: absolute;
  right: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  top: 0;
  width: 212px;
  z-index: 99995;
}

.fancybox-thumbs-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.fancybox-show-thumbs .fancybox-thumbs {
  display: block;
}
.fancybox-show-thumbs .fancybox-inner {
  right: 212px;
}

.fancybox-thumbs__list {
  font-size: 0;
  height: 100%;
  list-style: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.fancybox-thumbs-x .fancybox-thumbs__list {
  overflow: hidden;
}

.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar {
  width: 7px;
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 10px;
}

.fancybox-thumbs__list a {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  float: left;
  height: 75px;
  margin: 2px;
  max-height: calc(100% - 8px);
  max-width: calc(50% - 4px);
  outline: none;
  overflow: hidden;
  padding: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  width: 100px;
}
.fancybox-thumbs__list a:before {
  border: 6px solid #ff5268;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 99991;
}
.fancybox-thumbs__list a:focus:before {
  opacity: 0.5;
}
.fancybox-thumbs__list a.fancybox-thumbs-active:before {
  opacity: 1;
}

@media (max-width: 576px) {
  .fancybox-thumbs {
    width: 110px;
  }

  .fancybox-show-thumbs .fancybox-inner {
    right: 110px;
  }

  .fancybox-thumbs__list a {
    max-width: calc(100% - 10px);
  }
}
:root {
  --tagify-dd-color-primary:rgb(53, 149, 246);
  --tagify-dd-bg-color:white;
}

.tagify {
  --tags-disabled-bg:#F1F1F1;
  --tags-border-color:#DDD;
  --tags-hover-border-color:#CCC;
  --tags-focus-border-color:#3595f6;
  --tag-bg:#E5E5E5;
  --tag-hover:#D3E2E2;
  --tag-text-color:black;
  --tag-text-color--edit:black;
  --tag-pad:0.3em 0.5em;
  --tag-inset-shadow-size:1.1em;
  --tag-invalid-color:#D39494;
  --tag-invalid-bg:rgba(211, 148, 148, 0.5);
  --tag-remove-bg:rgba(211, 148, 148, 0.3);
  --tag-remove-btn-color:black;
  --tag-remove-btn-bg:none;
  --tag-remove-btn-bg--hover:#c77777;
  --input-color:inherit;
  --tag--min-width:1ch;
  --tag--max-width:auto;
  --tag-hide-transition:0.3s;
  --placeholder-color:rgba(0, 0, 0, 0.4);
  --placeholder-color-focus:rgba(0, 0, 0, 0.25);
  --loader-size:.8em;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid #ddd;
  border: 1px solid var(--tags-border-color);
  padding: 0;
  line-height: 0;
  cursor: text;
  outline: 0;
  position: relative;
  box-sizing: border-box;
  transition: 0.1s;
}
.tagify:hover {
  border-color: #ccc;
  border-color: var(--tags-hover-border-color);
}
.tagify.tagify--focus {
  transition: 0s;
  border-color: #3595f6;
  border-color: var(--tags-focus-border-color);
}
.tagify[disabled] {
  background: var(--tags-disabled-bg);
  filter: saturate(0);
  opacity: 0.5;
  pointer-events: none;
}
.tagify[readonly].tagify--select {
  pointer-events: none;
}
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) {
  cursor: default;
}
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) > .tagify__input {
  visibility: hidden;
  width: 0;
  margin: 5px 0;
}
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div {
  padding: 0.3em 0.5em;
  padding: var(--tag-pad);
}
.tagify[readonly]:not(.tagify--mix):not(.tagify--select) .tagify__tag > div::before {
  background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
  box-shadow: none;
  filter: brightness(0.95);
}
.tagify[readonly] .tagify__tag__removeBtn {
  display: none;
}

@-webkit-keyframes tags--bump {
  30% {
    transform: scale(1.2);
  }
}
@keyframes tags--bump {
  30% {
    transform: scale(1.2);
  }
}
@-webkit-keyframes rotateLoader {
  to {
    transform: rotate(1turn);
  }
}
@keyframes rotateLoader {
  to {
    transform: rotate(1turn);
  }
}
.tagify--loading .tagify__input > br:last-child {
  display: none;
}
.tagify--loading .tagify__input::before {
  content: none;
}
.tagify--loading .tagify__input::after {
  content: "";
  vertical-align: middle;
  opacity: 1;
  width: 0.7em;
  height: 0.7em;
  width: var(--loader-size);
  height: var(--loader-size);
  border: 3px solid;
  border-color: #eee #bbb #888 transparent;
  border-radius: 50%;
  -webkit-animation: rotateLoader 0.4s infinite linear;
  animation: rotateLoader 0.4s infinite linear;
  content: "" !important;
  margin: -2px 0 -2px 0.5em;
}
.tagify--loading .tagify__input:empty::after {
  margin-left: 0;
}

.tagify + input, .tagify + textarea {
  position: absolute !important;
  left: -9999em !important;
  transform: scale(0) !important;
}

.tagify__tag {
  display: inline-flex;
  align-items: center;
  margin: 5px 0 5px 5px;
  position: relative;
  z-index: 1;
  outline: 0;
  line-height: normal;
  cursor: default;
  transition: 0.13s ease-out;
}
.tagify__tag > div {
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.3em 0.5em;
  padding: var(--tag-pad, 0.3em 0.5em);
  color: #000;
  color: var(--tag-text-color, #000);
  line-height: inherit;
  border-radius: 3px;
  white-space: nowrap;
  transition: 0.13s ease-out;
}
.tagify__tag > div > * {
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
  min-width: 1ch;
  max-width: auto;
  min-width: var(--tag--min-width, 1ch);
  max-width: var(--tag--max-width, auto);
  transition: 0.8s ease, 0.1s color;
}
.tagify__tag > div > [contenteditable] {
  outline: 0;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
  margin: -2px;
  padding: 2px;
  max-width: 350px;
}
.tagify__tag > div::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  transition: 120ms ease;
  -webkit-animation: tags--bump 0.3s ease-out 1;
  animation: tags--bump 0.3s ease-out 1;
  box-shadow: 0 0 0 1.1em #e5e5e5 inset;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-bg, #e5e5e5) inset;
}
.tagify__tag:focus div::before, .tagify__tag:hover:not([readonly]) div::before {
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  box-shadow: 0 0 0 1.1em #d3e2e2 inset;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-hover, #d3e2e2) inset;
}

.tagify__tag--loading {
  pointer-events: none;
}
.tagify__tag--loading .tagify__tag__removeBtn {
  display: none;
}
.tagify__tag--loading::after {
  --loader-size:.4em;
  content: "";
  vertical-align: middle;
  opacity: 1;
  width: 0.7em;
  height: 0.7em;
  width: var(--loader-size);
  height: var(--loader-size);
  border: 3px solid;
  border-color: #eee #bbb #888 transparent;
  border-radius: 50%;
  -webkit-animation: rotateLoader 0.4s infinite linear;
  animation: rotateLoader 0.4s infinite linear;
  margin: 0 0.5em 0 -0.1em;
}

.tagify__tag--flash div::before {
  -webkit-animation: none;
  animation: none;
}

.tagify__tag--hide {
  width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
  transform: scale(0);
  transition: 0.3s;
  transition: var(--tag-hide-transition, 0.3s);
  pointer-events: none;
}
.tagify__tag--hide > div > * {
  white-space: nowrap;
}

.tagify__tag.tagify--noAnim > div::before {
  -webkit-animation: none;
  animation: none;
}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div > span {
  opacity: 0.5;
}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before {
  box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.5) inset !important;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-invalid-bg, rgba(211, 148, 148, 0.5)) inset !important;
  transition: 0.2s;
}
.tagify__tag[readonly] .tagify__tag__removeBtn {
  display: none;
}
.tagify__tag[readonly] > div::before {
  background: linear-gradient(45deg, var(--tag-bg) 25%, transparent 25%, transparent 50%, var(--tag-bg) 50%, var(--tag-bg) 75%, transparent 75%, transparent) 0/5px 5px;
  box-shadow: none;
  filter: brightness(0.95);
}

.tagify__tag--editable > div {
  color: #000;
  color: var(--tag-text-color--edit, #000);
}
.tagify__tag--editable > div::before {
  box-shadow: 0 0 0 2px #d3e2e2 inset !important;
  box-shadow: 0 0 0 2px var(--tag-hover, #d3e2e2) inset !important;
}
.tagify__tag--editable > .tagify__tag__removeBtn {
  pointer-events: none;
}
.tagify__tag--editable > .tagify__tag__removeBtn::after {
  opacity: 0;
  transform: translateX(100%) translateX(5px);
}
.tagify__tag--editable.tagify--invalid > div::before {
  box-shadow: 0 0 0 2px #d39494 inset !important;
  box-shadow: 0 0 0 2px var(--tag-invalid-color, #d39494) inset !important;
}

.tagify__tag__removeBtn {
  order: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  cursor: pointer;
  font: 14px/1 Arial;
  background: 0 0;
  background: var(--tag-remove-btn-bg, none);
  color: #000;
  color: var(--tag-remove-btn-color, #000);
  width: 14px;
  height: 14px;
  margin-right: 4.6666666667px;
  margin-left: auto;
  overflow: hidden;
  transition: 0.2s ease-out;
}
.tagify__tag__removeBtn::after {
  content: "\D7";
  transition: 0.3s, color 0s;
}
.tagify__tag__removeBtn:hover {
  color: #fff;
  background: #c77777;
  background: var(--tag-remove-btn-bg--hover, #c77777);
}
.tagify__tag__removeBtn:hover + div > span {
  opacity: 0.5;
}
.tagify__tag__removeBtn:hover + div::before {
  box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.3) inset !important;
  box-shadow: 0 0 0 var(--tag-inset-shadow-size, 1.1em) var(--tag-remove-bg, rgba(211, 148, 148, 0.3)) inset !important;
  transition: box-shadow 0.2s;
}

.tagify:not(.tagify--mix) .tagify__input br {
  display: none;
}
.tagify:not(.tagify--mix) .tagify__input * {
  display: inline;
  white-space: nowrap;
}

.tagify__input {
  flex-grow: 1;
  display: inline-block;
  min-width: 110px;
  margin: 5px;
  padding: 0.3em 0.5em;
  padding: var(--tag-pad, 0.3em 0.5em);
  line-height: normal;
  position: relative;
  white-space: pre-wrap;
  color: inherit;
  color: var(--input-color, inherit);
  box-sizing: inherit;
}
.tagify__input:focus {
  outline: 0;
}
.tagify__input:focus::before {
  transition: 0.2s ease-out;
  opacity: 0;
  transform: translatex(6px);
}
.tagify__input:focus:empty::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  color: rgba(0, 0, 0, 0.25);
  color: var(--placeholder-color-focus);
}
.tagify__input::before {
  content: attr(data-placeholder);
  height: 1em;
  line-height: 1em;
  margin: auto 0;
  z-index: 1;
  color: rgba(0, 0, 0, 0.4);
  color: var(--placeholder-color);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  position: absolute;
}
.tagify__input::after {
  content: attr(data-suggest);
  display: inline-block;
  white-space: pre;
  color: #000;
  opacity: 0.3;
  pointer-events: none;
  max-width: 100px;
}
.tagify__input .tagify__tag {
  margin: 0 1px;
}
.tagify__input .tagify__tag > div {
  padding-top: 0;
  padding-bottom: 0;
}

@supports (-ms-ime-align: auto) {
  .tagify__input:focus::before {
    display: none;
  }
}
@-moz-document url-prefix() {
  .tagify__input:focus:empty::after {
    display: none;
  }
}
.tagify--mix {
  display: block;
}
.tagify--mix .tagify__input {
  padding: 5px;
  margin: 0;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  display: block;
}
.tagify--mix .tagify__input::before {
  height: auto;
  display: none;
  line-height: inherit;
}
.tagify--mix .tagify__input::after {
  content: none;
}

.tagify--select::after {
  content: ">";
  opacity: 0.5;
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  font: 16px monospace;
  line-height: 8px;
  height: 8px;
  pointer-events: none;
  transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
  transition: 0.2s ease-in-out;
}
.tagify--select[aria-expanded=true]::after {
  transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2);
}
.tagify--select .tagify__tag {
  position: absolute;
  top: 0;
  right: 1.8em;
  bottom: 0;
}
.tagify--select .tagify__tag div {
  display: none;
}
.tagify--select .tagify__input {
  width: 100%;
}

.tagify--empty .tagify__input::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  display: inline-block;
  width: auto;
}

.tagify--mix .tagify--empty .tagify__input::before {
  display: inline-block;
}

.tagify--invalid {
  --tags-border-color:#D39494;
}

.tagify__dropdown {
  position: absolute;
  z-index: 9999;
  transform: translateY(1px);
  overflow: hidden;
}
.tagify__dropdown[placement=top] {
  margin-top: 0;
  transform: translateY(-100%);
}
.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
  border-top-width: 1.1px;
  border-bottom-width: 0;
}
.tagify__dropdown[position=text] {
  box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
  font-size: 0.9em;
}
.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
  border-width: 1px;
}

.tagify__dropdown__wrapper {
  max-height: 300px;
  overflow: auto;
  background: #fff;
  background: var(--tagify-dd-bg-color);
  border: 1px solid #3595f6;
  border-color: var(--tagify-dd-color-primary);
  border-bottom-width: 1.33px;
  border-top-width: 0;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  transition: 0.25s cubic-bezier(0, 1, 0.5, 1);
}

.tagify__dropdown--initial .tagify__dropdown__wrapper {
  max-height: 20px;
  transform: translateY(-1em);
}
.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
  transform: translateY(2em);
}

.tagify__dropdown__item {
  box-sizing: inherit;
  padding: 0.3em 0.5em;
  margin: 1px;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
  outline: 0;
}

.tagify__dropdown__item--active {
  background: #3595f6;
  background: var(--tagify-dd-color-primary);
  color: #fff;
}

.tagify__dropdown__item:active, .tagify__dropdown__item.nice-select.open {
  filter: brightness(105%);
}

.date-picker {
  width: 170px;
  height: 25px;
  padding: 0;
  border: 0;
  line-height: 25px;
  padding-left: 10px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  color: #303030;
  position: relative;
  z-index: 2;
}

.date-picker-wrapper {
  position: absolute;
  z-index: 1;
  border: 1px solid #bfbfbf;
  background-color: #efefef;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 20px;
  color: #aaa;
  font-family: Arial, sans-serif;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  box-sizing: initial;
}

.dp-clearfix {
  clear: both;
  height: 0;
  font-size: 0;
}

.date-picker-wrapper.inline-wrapper {
  position: relative;
  box-shadow: none;
  display: inline-block;
}
.date-picker-wrapper.single-date {
  width: auto;
}
.date-picker-wrapper.no-shortcuts {
  padding-bottom: 12px;
}
.date-picker-wrapper.no-topbar {
  padding-top: 12px;
}
.date-picker-wrapper .footer {
  font-size: 11px;
  padding-top: 3px;
}
.date-picker-wrapper b {
  color: #666;
  font-weight: 700;
}
.date-picker-wrapper a {
  color: #6bb4d6;
  text-decoration: underline;
}
.date-picker-wrapper .month-name {
  text-transform: uppercase;
}
.date-picker-wrapper .select-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.date-picker-wrapper .select-wrapper:hover {
  text-decoration: underline;
}
.date-picker-wrapper .month-element {
  display: inline-block;
  vertical-align: middle;
}
.date-picker-wrapper .select-wrapper select {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: -1px;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
  opacity: 0.01;
}
.date-picker-wrapper .month-wrapper {
  border: 1px solid #bfbfbf;
  border-radius: 3px;
  background-color: #fff;
  padding: 5px;
  cursor: default;
  position: relative;
  _overflow: hidden;
}
.date-picker-wrapper .month-wrapper table {
  width: 190px;
  float: left;
}
.date-picker-wrapper .month-wrapper table.month2 {
  width: 190px;
  float: left;
}
.date-picker-wrapper .month-wrapper table th, .date-picker-wrapper .month-wrapper table td {
  vertical-align: middle;
  text-align: center;
  line-height: 14px;
  margin: 0px;
  padding: 0px;
}
.date-picker-wrapper .month-wrapper table .day {
  padding: 5px 0;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 1px;
  color: #ccc;
  cursor: default;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth, .date-picker-wrapper .month-wrapper table div.day.nextMonth {
  color: #999;
  cursor: default;
}
.date-picker-wrapper .month-wrapper table .day.checked {
  background-color: #9cdbf7;
}
.date-picker-wrapper .month-wrapper table .week-name {
  height: 20px;
  line-height: 20px;
  font-weight: 100;
  text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
  cursor: help !important;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {
  white-space: nowrap;
}
.date-picker-wrapper .time label {
  white-space: nowrap;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
  color: #333;
  cursor: pointer;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {
  background-color: #cdecfa;
}
.date-picker-wrapper .month-wrapper table .day.nextMonth, .date-picker-wrapper .month-wrapper table .day.lastMonth {
  display: none;
}
.date-picker-wrapper .month-wrapper table .day.real-today {
  background-color: #ffe684;
}
.date-picker-wrapper .month-wrapper table .day.real-today.checked, .date-picker-wrapper .month-wrapper table .day.real-today.hovering {
  background-color: #70ccd5;
}
.date-picker-wrapper table .caption {
  height: 40px;
}
.date-picker-wrapper table .caption > th:first-of-type, .date-picker-wrapper table .caption > th:last-of-type {
  width: 27px;
}
.date-picker-wrapper table .caption .next, .date-picker-wrapper table .caption .prev {
  padding: 0 5px;
  cursor: pointer;
}
.date-picker-wrapper table .caption .next:hover, .date-picker-wrapper table .caption .prev:hover {
  background-color: #ccc;
  color: white;
}
.date-picker-wrapper .gap {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 100%;
  background-color: red;
  font-size: 0;
  line-height: 0;
  float: left;
  top: -5px;
  margin: 0 10px -10px;
  visibility: hidden;
  height: 0;
}
.date-picker-wrapper .gap .gap-lines {
  height: 100%;
  overflow: hidden;
}
.date-picker-wrapper .gap .gap-line {
  height: 15px;
  width: 15px;
  position: relative;
}
.date-picker-wrapper .gap .gap-line .gap-1 {
  z-index: 1;
  height: 0;
  border-left: 8px solid white;
  border-top: 8px solid #eee;
  border-bottom: 8px solid #eee;
}
.date-picker-wrapper .gap .gap-line .gap-2 {
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 2;
  height: 0;
  border-left: 8px solid transparent;
  border-top: 8px solid white;
}
.date-picker-wrapper .gap .gap-line .gap-3 {
  position: absolute;
  right: 0;
  top: 8px;
  z-index: 2;
  height: 0;
  border-left: 8px solid transparent;
  border-bottom: 8px solid white;
}
.date-picker-wrapper .gap .gap-top-mask {
  width: 6px;
  height: 1px;
  position: absolute;
  top: -1px;
  left: 1px;
  background-color: #eee;
  z-index: 3;
}
.date-picker-wrapper .gap .gap-bottom-mask {
  width: 6px;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 7px;
  background-color: #eee;
  z-index: 3;
}
.date-picker-wrapper .selected-days {
  display: none;
}
.date-picker-wrapper .drp_top-bar {
  line-height: 1.4;
  position: relative;
  padding: 10px 40px 10px 0;
}
.date-picker-wrapper .drp_top-bar .error-top, .date-picker-wrapper .drp_top-bar .normal-top {
  display: none;
}
.date-picker-wrapper .drp_top-bar .default-top {
  display: block;
}
.date-picker-wrapper .drp_top-bar.error .default-top {
  display: none;
}
.date-picker-wrapper .drp_top-bar.error .error-top {
  display: block;
  color: red;
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
  display: none;
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
  display: block;
}
.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {
  color: #333;
}
.date-picker-wrapper .drp_top-bar .apply-btn {
  position: absolute;
  right: 0px;
  top: 6px;
  padding: 3px 5px;
  margin: 0;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: #d9eef7;
  border: solid 1px #0076a3;
  background: #0095cd;
  background: -moz-linear-gradient(top, #00adee, #0078a5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00adee", endColorstr="#0078a5");
  color: white;
  line-height: initial;
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
  cursor: pointer;
  color: #606060;
  border: solid 1px #b7b7b7;
  background: #fff;
  background: -moz-linear-gradient(top, #fff, #ededed);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ededed");
}
.date-picker-wrapper .time {
  position: relative;
}
.date-picker-wrapper.single-month .time {
  display: block;
}
.date-picker-wrapper .time input[type=range] {
  vertical-align: middle;
  width: 129px;
  padding: 0;
  margin: 0;
  height: 20px;
}
.date-picker-wrapper .time1 {
  width: 180px;
  padding: 0 5px;
  text-align: center;
}

/*time styling*/
.time2 {
  width: 180px;
  padding: 0 5px;
  text-align: center;
}

.date-picker-wrapper .time1 {
  float: left;
}
.date-picker-wrapper .time2 {
  float: right;
}
.date-picker-wrapper .hour {
  text-align: right;
}

.minute {
  text-align: right;
}

.date-picker-wrapper .hide {
  display: none;
}
.date-picker-wrapper .first-date-selected, .date-picker-wrapper .last-date-selected {
  background-color: #49e !important;
  color: white !important;
}
.date-picker-wrapper .date-range-length-tip {
  position: absolute;
  margin-top: -4px;
  margin-left: -8px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  display: none;
  background-color: yellow;
  padding: 0 6px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 16px;
  -moz-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
  -ms-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
  -o-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
.date-picker-wrapper .date-range-length-tip:after {
  content: "";
  position: absolute;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid yellow;
  left: 50%;
  margin-left: -4px;
  bottom: -4px;
}
.date-picker-wrapper.two-months.no-gap .month1 .next, .date-picker-wrapper.two-months.no-gap .month2 .prev {
  display: none;
}
.date-picker-wrapper .week-number {
  padding: 5px 0;
  line-height: 1;
  font-size: 12px;
  margin-bottom: 1px;
  color: #999;
  cursor: pointer;
}
.date-picker-wrapper .week-number.week-number-selected {
  color: #49e;
  font-weight: bold;
}

/*! nouislider - 11.0.3 - 2018-01-21 14:04:07 */
.noUi-target {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
  position: relative;
  direction: ltr;
}
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  z-index: 0;
}

.noUi-connect, .noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: 0 0;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0;
}

.noUi-vertical .noUi-origin {
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  position: absolute;
}

.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {
  transition: transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  left: -17px;
  top: -6px;
}

.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto;
}

.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}

.noUi-connects {
  border-radius: 3px;
}

.noUi-connect {
  background: #3FB8AF;
}

.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}

.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}

.noUi-handle:after, .noUi-handle:before {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}

.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}

[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled] .noUi-handle, [disabled].noUi-handle, [disabled].noUi-target {
  cursor: not-allowed;
}

.noUi-pips {
  box-sizing: border-box;
  position: absolute;
  color: #999;
}
.noUi-pips * {
  box-sizing: border-box;
}

.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

.noUi-marker {
  position: absolute;
  background: #CCC;
}

.noUi-marker-large, .noUi-marker-sub {
  background: #AAA;
}

.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  transform: translate(0, -50%, 0);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

body {
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  color: #1A1D1F;
}
body.dark {
  background: #111315;
  color: #FCFCFC;
}
body.no-scroll {
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

html.no-scroll {
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

a {
  text-decoration: none;
}

button {
  background: none;
  font-family: "Inter", sans-serif;
}

input, textarea {
  font-family: "Inter", sans-serif;
}

svg, img {
  vertical-align: middle;
}

.icon {
  width: 16px;
  height: 16px;
  fill: #1A1D1F;
}

body.dark .some-icon, .some-icon-dark {
  display: none;
}

body.dark .some-icon-dark {
  display: inline-block;
}

.select {
  float: none;
  width: auto;
  height: 48px;
  padding: 0 48px 0 16px;
  background: none;
  box-shadow: inset 0 0 0 2px #EFEFEF;
  border-radius: 12px;
  border: none;
  opacity: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 48px;
  color: #1A1D1F;
}
.select:after {
  display: none;
}
.select:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12.707 15.707l-.094.083a1 1 0 0 1-1.32-.083h0l-6-6-.083-.094a1 1 0 0 1 1.497-1.32h0L12 13.585l5.293-5.292.094-.083a1 1 0 0 1 1.32 1.497h0l-6 6z' fill='%236f767e'/%3E%3C/svg%3E") no-repeat 50% 50%/24px auto;
  transition: transform 0.2s;
}

body.dark .select {
  background: none;
  box-shadow: inset 0 0 0 2px #272B30;
  -webkit-appearance: none;
  color: #6F767E;
}

.select:hover {
  box-shadow: inset 0 0 0 2px #9A9FA5;
}

body.dark .select:hover {
  box-shadow: inset 0 0 0 2px #33383F;
}

.select.open {
  box-shadow: inset 0 0 0 2px #9A9FA5;
  background: #FFFFFF;
}

body.dark .select.open {
  box-shadow: inset 0 0 0 2px #33383F;
  background: #111315;
  color: #FCFCFC;
}

.select.open:before {
  transform: rotate(180deg);
}
.select .current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select .list {
  right: 0;
  margin-top: 2px;
  padding: 8px 0;
  border-radius: 12px;
  background: #FFFFFF;
  border: none;
  box-shadow: inset 0 0 0 2px #EFEFEF, 0 4px 12px rgba(244, 244, 244, 0.1);
}

body.dark .select .list {
  background: #111315;
  box-shadow: inset 0 0 0 2px #33383F, 0 4px 12px rgba(17, 19, 21, 0.1);
}

.select .option {
  min-height: auto;
  padding: 8px 16px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}
.select .option:hover, .select .option.focus, .select .option.selected.focus {
  background: none;
}
.select .option:hover, .select .option.focus {
  font-weight: 600;
  color: #1A1D1F;
}

body.dark .select .option:hover, body.dark .select .option.focus {
  color: #FCFCFC;
}

.select .option.selected {
  font-weight: 600;
  color: #2A85FF;
}

body.dark .select .option.selected {
  color: #2A85FF;
}

.select_small {
  height: 40px;
  padding: 0 40px 0 16px;
  line-height: 40px;
}
.select_small:before {
  width: 40px;
  background-size: 16px auto;
}
.select_small .option {
  padding: 4px 16px;
}

.select_up .list {
  top: auto;
  bottom: 100%;
  margin: 0 0 2px;
}

.tooltip {
  display: inline-block;
  margin-left: 4px;
  cursor: pointer;
}

.tooltipster-base .tooltipster-box {
  margin: 0 !important;
  background: #272B30;
  border: none;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 0px 1px #000000;
}
.tooltipster-base .tooltipster-content {
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #F4F4F4;
}
.tooltipster-base .tooltipster-arrow {
  display: none;
}

.apexcharts-canvas .apexcharts-text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  fill: #9A9FA5;
}
.apexcharts-canvas .apexcharts-gridline {
  stroke: #EFEFEF;
}

body.dark .apexcharts-canvas .apexcharts-gridline {
  stroke: #272B30 !important;
}

.apexcharts-canvas .apexcharts-xcrosshairs.apexcharts-active, .apexcharts-canvas .apexcharts-ycrosshairs.apexcharts-active {
  stroke: rgba(111, 118, 126, 0.5);
}

body.dark .apexcharts-canvas .apexcharts-xcrosshairs.apexcharts-active, body.dark .apexcharts-canvas .apexcharts-ycrosshairs.apexcharts-active {
  stroke: #6F767E;
}

.apexcharts-canvas .apexcharts-marker {
  stroke-width: 0;
}
.apexcharts-canvas .apexcharts-tooltip {
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 0px 1px #000000;
}
.apexcharts-canvas .apexcharts-tooltip-title {
  margin-bottom: 8px;
  padding: 0;
}
.apexcharts-canvas .apexcharts-tooltip-series-group {
  background: none !important;
  padding: 0 !important;
}
.apexcharts-canvas .apexcharts-tooltip-y-group {
  padding: 0;
}
.apexcharts-canvas .apexcharts-tooltip-marker {
  margin-right: 4px;
  border-radius: 4px;
}
.apexcharts-canvas .apexcharts-tooltip-text {
  font-weight: 600;
  color: #FCFCFC;
}
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
  border-color: rgba(255, 255, 255, 0.12);
  background: #272B30;
}
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: none;
  border: none;
  color: #EFEFEF;
}
.apexcharts-canvas .apexcharts-legend.position-bottom.apexcharts-align-center, .apexcharts-canvas .apexcharts-legend.position-top.apexcharts-align-center {
  justify-content: space-between;
}
.apexcharts-canvas .apexcharts-legend-marker {
  border-radius: 4px !important;
}
.apexcharts-canvas .apexcharts-legend-series {
  margin-top: 6px !important;
}
.apexcharts-canvas .apexcharts-legend-text {
  font-weight: 600 !important;
  color: #1A1D1F !important;
}

@media only screen and (max-width: 767px) {
  .apexcharts-canvas .apexcharts-legend.position-bottom.apexcharts-align-center, .apexcharts-canvas .apexcharts-legend.position-top.apexcharts-align-center {
    justify-content: center;
  }
}
body.dark .apexcharts-canvas .apexcharts-legend-text {
  color: #EFEFEF !important;
}
body.dark .apexcharts-canvas .apexcharts-pie-area {
  stroke: #1A1D1F;
}

.slick-arrow {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0;
  transition: all 0.2s;
}
.slick-arrow svg {
  position: relative;
  z-index: 2;
}
.slick-arrow path {
  fill: #6F767E;
  transition: fill 0.2s;
}
.slick-arrow:hover {
  box-shadow: inset 0 0 0 2px #272B30;
}

body.dark .slick-arrow:hover {
  box-shadow: inset 0 0 0 2px #EFEFEF;
}
body.dark .slick-arrow:hover path {
  fill: #272B30;
}

.fancybox-caption__body {
  color: #6F767E;
}

.fancybox-image {
  border-radius: 16px;
}

.fancybox-infobar {
  font-size: 14px;
  font-weight: 700;
  color: #6F767E;
}

.fancybox-bg {
  background: #1A1D1F;
}

.fancybox-is-open .fancybox-bg {
  opacity: 1;
}

.tagify {
  padding: 3px;
  background: #F4F4F4;
  border: none;
  border-radius: 6px;
}

body.dark .tagify {
  background: #272B30;
}

.tagify__tag > div::before {
  border-radius: 6px;
}

.tagify__input::before {
  line-height: 1.4em;
}

body.dark .tagify__input::before {
  color: #FCFCFC;
}

.tagify__input::after, .tagify__input:focus:empty:before {
  color: #9A9FA5;
}

.noUi-horizontal {
  height: 4px;
}

.noUi-target {
  border: none;
  background: #EFEFEF;
  box-shadow: none;
}

body.dark .noUi-target {
  background: #272B30;
}

.noUi-connect {
  background: #2A85FF;
}

.noUi-handle {
  border: none;
  box-shadow: none;
  background: #FCFCFC;
  border-radius: 50%;
  cursor: pointer;
}
.noUi-handle:before, .noUi-handle:after {
  display: none;
}

.noUi-horizontal .noUi-handle {
  right: -12px;
  top: -6px;
  width: 16px;
  height: 16px;
  border: 2px solid #2A85FF;
  background: #FCFCFC;
  box-shadow: 0px 1px 2px #2881FF, inset 0px 2px 2px #FFFFFF;
}

.noUi-tooltip {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  padding: 3px 10px;
  background: #272B30;
  border-radius: 8px;
  border: 1px solid rgba(252, 252, 252, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: #FCFCFC;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}
.noUi-tooltip:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: #272B30 transparent transparent transparent;
}

body.dark .noUi-tooltip {
  background: #111315;
}
body.dark .noUi-tooltip:before {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: #111315 transparent transparent transparent;
}

.noUi-handle:hover .noUi-tooltip {
  visibility: visible;
  opacity: 1;
}

.noUi-horizontal .noUi-tooltip {
  bottom: 24px;
}

.range_time .noUi-horizontal {
  height: 2px;
}
.range_time .noUi-handle {
  top: -11px;
}

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
  right: -12px;
}

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

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

.text-uppercase {
  text-transform: uppercase;
}

.m-auto {
  margin: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.align-baseline {
  align-items: baseline;
}

@media only screen and (max-width: 1259px) {
  .desktop-hide {
    display: none !important;
  }
}
.desktop-show, .tablet-show, .mobile-show {
  display: none !important;
}

@media only screen and (max-width: 1259px) {
  .desktop-show {
    display: block !important;
  }
}
@media only screen and (max-width: 1259px) {
  .desktop-text-right {
    text-align: right !important;
  }
}
@media only screen and (max-width: 1023px) {
  .tablet-hide {
    display: none !important;
  }
}
@media only screen and (max-width: 1023px) {
  .tablet-show {
    display: block !important;
  }
}
@media only screen and (max-width: 1023px) {
  .tablet-text-right {
    text-align: right !important;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-hide {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-show {
    display: block !important;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-text-right {
    text-align: right !important;
  }
}
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}

.h1, .h2, .h3, .h4 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.h1 {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.h2 {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.h3 {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .h3 {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.03em;
  }
}
.h4 {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.button-stroke, .button-stroke-red {
  background: none;
  box-shadow: 0 0 0 2px #EFEFEF inset;
}

body.dark .button-stroke, body.dark .button-stroke-red {
  box-shadow: 0 0 0 2px #272B30 inset;
}

.button-stroke {
  color: #1A1D1F;
}
.button-stroke svg {
  fill: #6F767E;
}

body.dark .button-stroke {
  color: #FCFCFC;
}

.button-stroke:hover {
  background: none;
  box-shadow: 0 0 0 2px #1A1D1F inset;
}
.button-stroke:hover svg {
  fill: #1A1D1F;
}

body.dark .button-stroke:hover {
  box-shadow: 0 0 0 2px #EFEFEF inset;
}
body.dark .button-stroke:hover svg {
  fill: #FCFCFC;
}

.button-stroke.active {
  background: #272B30;
  box-shadow: 0 0 0 2px #272B30 inset;
}
.button-stroke.active svg {
  fill: #1A1D1F;
}

.button-stroke-red {
  color: #FF6A55;
}
.button-stroke-red svg {
  fill: #FF6A55;
}
.button-stroke-red:hover, .button-stroke-red.active {
  background: #FF6A55;
  box-shadow: 0 0 0 2px #FF6A55 inset;
  color: #FCFCFC;
}
.button-stroke-red:hover svg, .button-stroke-red.active svg {
  fill: #FCFCFC;
}

.button-white {
  box-shadow: 0 0 0 2px #EFEFEF inset;
  background: #FCFCFC;
  color: #1A1D1F;
}
.button-white svg {
  fill: #1A1D1F;
}
.button-white:hover, .button-white.active {
  box-shadow: 0 0 0 2px #1A1D1F inset;
  background: #FFFFFF;
  color: #1A1D1F;
}
.button-white:hover svg, .button-white.active svg {
  fill: #1A1D1F;
}

.button-small {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
}

.button-square-stroke {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  box-shadow: 0 0 0 2px #EFEFEF inset;
  transition: all 0.2s;
}
.button-square-stroke svg {
  fill: #6F767E;
}

body.dark .button-square-stroke {
  box-shadow: 0 0 0 2px #272B30 inset;
}

.button-square-stroke:hover {
  background: #2A85FF;
  box-shadow: 0 0 0 2px #2A85FF inset;
}
.button-square-stroke:hover svg {
  fill: #FCFCFC;
}
.button-square-stroke.button-small {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

[class^=status] {
  display: inline-block;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 24px;
  font-weight: 700;
}

.status-green {
  background: #EAFAE5;
  color: #83BF6E;
}

body.dark .status-green {
  background: rgba(131, 191, 110, 0.15);
}

.status-green-dark {
  background: #B5E4CA;
  color: #1A1D1F;
}

.status-red {
  background: #FFE7E4;
  color: #FF6A55;
}

body.dark .status-red {
  background: rgba(255, 106, 85, 0.15);
}

.status-red-dark {
  background: #FFBC99;
  color: #FCFCFC;
}

.status-purple {
  background: #CABDFF;
  color: #8E59FF;
}

.status-blue {
  background: #B1E5FC;
  color: #2A85FF;
}

.status-yellow {
  background: #FFD88D;
  color: #1A1D1F;
}

/*[class^="title"] {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -.02em;

  &:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 32px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 4px;
  }
}

@media only screen and (max-width: 767px) {
  [class^="title"] {
    font-size: 18px;
  }
}*/
.title-red:before {
  background: #FFBC99;
}

.title-blue:before {
  background: #B1E5FC;
}

.title-purple:before {
  background: #CABDFF;
}

.title-yellow:before {
  background: #FFD88D;
}

.title-green:before {
  background: #B5E4CA;
}

.balance.negative, .balance.positive {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
}
.balance.negative svg, .balance.positive svg {
  width: 23px;
  height: 23px;
  stroke-width: 5 !important;
}
.balance.negative svg, .balance.positive svg {
  margin-right: 4px;
}
.balance.negative {
  color: #FF6A55;
}
.balance.negative svg {
  transform: rotate(180deg);
  stroke: #FF6A55;
}
.balance.positive {
  color: #83BF6E;
}
.balance.positive svg {
  stroke: #83BF6E;
}
.balance.background.positive, .balance.background.negative {
  height: 24px;
  padding: 0 4px;
  border-radius: 8px;
}
.balance.background.positive {
  background: #EAFAE5;
}

body.dark .balance.background.positive {
  background: rgba(234, 250, 229, 0.25);
}

.balance.background.negative {
  background: #FFE7E4;
}

body.dark .balance.background.negative {
  background: rgba(255, 216, 211, 0.15);
}

.favorite {
  position: relative;
  width: 20px;
  height: 20px;
}
.favorite .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  fill: #9A9FA5;
  transition: all 0.2s;
}
.favorite .icon:nth-child(2) {
  z-index: 2;
  opacity: 0;
}
.favorite:hover .icon {
  fill: #2A85FF;
}
.favorite.active .icon {
  fill: #2A85FF;
}
.favorite.active .icon:first-child {
  opacity: 0;
}
.favorite.active .icon:nth-child(2) {
  opacity: 1;
}

.page {
  padding: 96px 0 0 340px;
}

@media only screen and (max-width: 1339px) {
  .page {
    padding: 80px 0 0 300px;
  }
}
@media only screen and (max-width: 1259px) {
  .page {
    padding-left: 96px;
  }
}
@media only screen and (max-width: 1023px) {
  .page {
    overflow: hidden;
  }
}
@media only screen and (max-width: 767px) {
  .page {
    padding-left: 0;
  }
}
.page__inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 96px);
  padding: 40px;
}

@media only screen and (max-width: 1339px) {
  .page__inner {
    padding: 32px 24px;
  }
}
@media only screen and (max-width: 767px) {
  .page__inner {
    padding: 24px 16px;
  }
}
.page__container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.page__container.wide {
  max-width: 100%;
}

.page__title {
  margin-bottom: 24px;
}

@media only screen and (max-width: 767px) {
  .page__title {
    margin-bottom: 16px;
  }
}
.page__row {
  display: flex;
}
.page__row:not(:last-child) {
  margin-bottom: 8px;
}

@media only screen and (max-width: 1023px) {
  .page__row {
    display: block;
  }
}
.page__col:first-child {
  flex: 0 0 calc(100% - 340px);
  width: calc(100% - 340px);
  padding-right: 8px;
}
.page__col:nth-child(2) {
  flex-shrink: 0;
  width: 340px;
}

@media only screen and (max-width: 1339px) {
  .page__col:first-child {
    flex: 0 0 calc(100% - 324px);
    width: calc(100% - 324px);
  }
}
@media only screen and (max-width: 1259px) {
  .page__col:first-child {
    flex: 0 0 calc(100% - 312px);
    width: calc(100% - 312px);
  }
}
@media only screen and (max-width: 1023px) {
  .page__col:first-child {
    width: 100%;
    margin-bottom: 8px;
    padding-right: 0;
  }
}
@media only screen and (max-width: 1339px) {
  .page__col:nth-child(2) {
    width: 324px;
  }
}
@media only screen and (max-width: 1259px) {
  .page__col:nth-child(2) {
    width: 312px;
  }
}
@media only screen and (max-width: 1023px) {
  .page__col:nth-child(2) {
    width: 100%;
  }
}
.page_simple {
  padding: 0;
}

@media only screen and (max-width: 1339px) {
  .page_simple {
    padding: 0;
  }
}
@media only screen and (max-width: 1259px) {
  .page_simple {
    padding-left: 0;
  }
}
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 340px;
  padding: 24px;
  background: #FCFCFC;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border: 1px solid #e7e9ef;
}
.sidebar::-webkit-scrollbar {
  display: none;
}

@media only screen and (max-width: 1339px) {
  .sidebar {
    width: 300px;
    padding: 16px;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar {
    z-index: 30;
    width: 96px;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar {
    width: 100%;
    align-items: stretch;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
}
body.dark .sidebar {
  background: #1A1D1F;
}

.sidebar.visible {
  transform: translateX(0);
}

@media only screen and (max-width: 1259px) {
  .sidebar.active {
    align-items: stretch;
    width: 300px;
    box-shadow: 4px 0 32px rgba(17, 19, 21, 0.05);
  }
  .sidebar.active .sidebar__item, .sidebar.active .sidebar__link, .sidebar.active .sidebar__help {
    width: 100%;
    font-size: 15px;
  }
  .sidebar.active .sidebar__item > .icon, .sidebar.active .sidebar__help > .icon {
    margin-right: 12px;
  }
  .sidebar.active .sidebar__counter {
    display: block;
  }
  .sidebar.active .sidebar__toggle {
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .sidebar.active .sidebar__toggle .icon {
    fill: #1A1D1F;
  }
  .sidebar.active .sidebar__toggle .icon:first-child {
    display: none;
  }
  .sidebar.active .sidebar__toggle .icon:nth-child(2) {
    display: inline-block;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar.active {
    width: 100%;
  }
}
.sidebar__logo {
  display: block;
  width: 48px;
  margin-bottom: 48px;
}
.sidebar__logo img {
  width: 100%;
}

@media only screen and (max-width: 1339px) {
  .sidebar__logo {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__logo {
    margin-left: auto;
  }
}
.sidebar__menu {
  display: flex;
  flex-direction: column;
  margin-bottom: auto;
}

.sidebar__item:not(:last-child) {
  margin-bottom: 8px;
}
.sidebar__item[href] {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

.sidebar__separator {
  margin-top: 36px;
  margin-bottom: 12px;
  line-height: 1.7;
  color: #b4b6b9;
  text-transform: uppercase;
  display: flex;
  font-size: 0.75rem;
  font-weight: 600;
  align-items: center;
  justify-content: space-between;
}

.sidebar__help, .sidebar__head, .sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

.sidebar__item[href] .icon, .sidebar__help .icon, .sidebar__head .icon {
  width: 20px;
  height: 20px;
  stroke: #6F767E;
  stroke-width: 4;
  transition: fill 0.2s;
}

.sidebar__item[href].active, .sidebar__help.active {
  color: #1A1D1F;
}

body.dark .sidebar__item[href].active, body.dark .sidebar__help.active {
  color: #FCFCFC;
}
body.dark .sidebar__item[href].active .icon, body.dark .sidebar__help.active .icon {
  stroke: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
  .sidebar__item[href], .sidebar__help {
    width: 48px;
    font-size: 0;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__item[href], .sidebar__help {
    width: 100%;
    font-size: 15px;
  }
}
.sidebar__item[href] .icon, .sidebar__help .icon {
  margin-right: 12px;
}

@media only screen and (max-width: 1259px) {
  .sidebar__item[href] .icon, .sidebar__help .icon {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__item[href] .icon, .sidebar__help .icon {
    margin-right: 12px;
  }
}
.sidebar__item[href].active, .sidebar__help.active {
  background: #EFEFEF;
  box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
}

body.dark .sidebar__item[href].active, body.dark .sidebar__help.active {
  background: #272B30;
  box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
}

.sidebar__item_dropdown.active .sidebar__body, .sidebar__item_dropdown.visible .sidebar__body {
  display: block;
}
.sidebar__item_dropdown.active .sidebar__head > .icon:last-child, .sidebar__item_dropdown.visible:not(.wide) .sidebar__head > .icon:last-child {
  transform: rotate(180deg);
}

@media only screen and (max-width: 1259px) {
  .sidebar__item_dropdown.active .sidebar__body, .sidebar__item_dropdown.visible .sidebar__body {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__item_dropdown.active .sidebar__body, .sidebar__item_dropdown.visible .sidebar__body {
    display: block;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar__item_dropdown.wide .sidebar__head {
    font-size: 15px;
  }
}
@media only screen and (max-width: 1259px) and (max-width: 1259px) {
  .sidebar__item_dropdown.wide .sidebar__head > .icon:first-child {
    margin-right: 12px;
  }
}
@media only screen and (max-width: 1259px) and (max-width: 1259px) {
  .sidebar__item_dropdown.wide .sidebar__head > .icon:last-child {
    display: inline-block;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar__item_dropdown.wide .sidebar__add {
    display: flex;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar__item_dropdown.wide.active .sidebar__head > .icon:last-child {
    transform: rotate(180deg);
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar__item_dropdown.wide.active .sidebar__body {
    display: block;
  }
}
.sidebar__top {
  position: relative;
}
.sidebar__top.active .sidebar__head {
  background: #EFEFEF;
  box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
  color: #1A1D1F;
}

body.dark .sidebar__top.active .sidebar__head {
  background: #272B30;
  box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
  color: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
  .sidebar__item.visible:not(.wide) .sidebar__head {
    background: #EFEFEF;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
    color: #1A1D1F;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__item.visible:not(.wide) .sidebar__head {
    background: none;
    box-shadow: none;
    color: #6F767E;
  }
}
@media only screen and (max-width: 1259px) {
  body.dark .sidebar__item.visible:not(.wide) .sidebar__head {
    background: #272B30;
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
    color: #FCFCFC;
  }
  body.dark .sidebar__item.visible:not(.wide) .sidebar__head .icon {
    fill: #FCFCFC;
  }
}
@media only screen and (max-width: 767px) {
  body.dark .sidebar__item.visible:not(.wide) .sidebar__head {
    background: none;
    box-shadow: none;
    color: #6F767E;
  }
  body.dark .sidebar__item.visible:not(.wide) .sidebar__head .icon {
    fill: #6F767E;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar__head {
    font-size: 0;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__head {
    font-size: 15px;
  }
}
.sidebar__head .icon {
  transition: transform 0.2s, fill 0.2s;
}
.sidebar__head .icon.icon-arrow-down {
  width: 30px;
  height: 30px;
  stroke-width: 5px;
}
.sidebar__head .icon:first-child {
  margin-right: 12px;
}
.sidebar__head .icon:last-child {
  margin-left: auto;
}

@media only screen and (max-width: 1259px) {
  .sidebar__head .icon:first-child {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__head .icon:first-child {
    margin-right: 12px;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar__head .icon:last-child {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__head .icon:last-child {
    display: inline-block;
  }
}
.sidebar__add {
  position: absolute;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 48px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #EFEFEF;
  transform: translateY(-50%);
  font-size: 0;
  transition: border-color 0.2s;
}

@media only screen and (max-width: 1259px) {
  .sidebar__add {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__add {
    display: flex;
  }
}
body.dark .sidebar__add {
  border-color: #33383F;
}

.sidebar__add .icon {
  width: 10px;
  height: 10px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.sidebar__add:hover {
  border-color: #1A1D1F;
}
.sidebar__add:hover .icon {
  fill: #1A1D1F;
}

body.dark .sidebar__add:hover, .sidebar__add.active {
  border-color: #9A9FA5;
}
body.dark .sidebar__add:hover .icon, .sidebar__add.active .icon {
  fill: #9A9FA5;
}

.sidebar__body {
  position: relative;
  display: none;
  padding-left: 36px;
}
.sidebar__body:before {
  content: "";
  position: absolute;
  top: 0;
  left: 23px;
  bottom: 32px;
  width: 2px;
  border-radius: 2px;
  background: #EFEFEF;
}

body.dark .sidebar__body:before {
  background: #272B30;
}

.sidebar__link:before {
  content: "";
  position: absolute;
  top: 12px;
  left: -13px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath d='M1 1v4a8 8 0 0 0 8 8h4' stroke='%23efefef' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

body.dark .sidebar__link:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath d='M1 1v4a8 8 0 0 0 8 8h4' stroke='%23272B30' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sidebar__link .icon {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  opacity: 0;
  fill: #1A1D1F;
  transition: opacity 0.2s;
}

body.dark .sidebar__link .icon {
  fill: #FCFCFC;
}

.sidebar__link:hover {
  color: #1A1D1F;
}

body.dark .sidebar__link:hover {
  color: #FCFCFC;
}

.sidebar__link.active {
  background: #EFEFEF;
  box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px #FFFFFF;
  color: #1A1D1F;
}

body.dark .sidebar__link.active {
  background: #272B30;
  box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4), inset 0px 1px 1px rgba(255, 255, 255, 0.11);
  color: #FCFCFC;
}

.sidebar__link.active .icon {
  opacity: 1;
}

.sidebar__counter {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  min-width: 24px;
  margin-left: auto;
  border-radius: 6px;
  text-align: center;
  line-height: 24px;
  color: #1A1D1F;
}

.sidebar__toggle {
  display: none;
  width: 48px;
  height: 48px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sidebar__toggle .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
}
.sidebar__toggle .icon:nth-child(2) {
  display: none;
}

@media only screen and (max-width: 1259px) {
  .sidebar__toggle {
    display: inline-block;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__toggle {
    display: none;
  }
}
.sidebar__close {
  display: none;
}

@media only screen and (max-width: 767px) {
  .sidebar__close {
    display: block;
    position: absolute;
    top: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
  }
  .sidebar__close .icon {
    width: 24px;
    height: 24px;
    fill: #1A1D1F;
  }

  body.dark .sidebar__close .icon {
    fill: #FCFCFC;
  }
}
.sidebar__foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid #F4F4F4;
}

@media (max-width: 768px) {
  .sidebar__foot {
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    bottom: 0;
    left: 0;
    padding-bottom: 15px;
    background: #fff;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar__foot {
    margin-top: 12px;
    padding-top: 12px;
  }
}
body.dark .sidebar__foot {
  border-color: #272B30;
}

.sidebar .theme {
  margin-top: 16px;
}

.sidebar__help .sidebar__counter {
  background: #CABDFF;
}

@media only screen and (max-width: 1259px) {
  .sidebar__help .sidebar__counter {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar__help .sidebar__counter {
    display: block;
  }
}
@media only screen and (max-width: 1259px) {
  .sidebar + .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    background: rgba(244, 244, 244, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
  }

  body.dark .sidebar + .overlay {
    background: rgba(39, 43, 48, 0.9);
  }

  .sidebar + .overlay.active {
    visibility: visible;
    opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar + .overlay {
    display: none;
  }
}
.theme {
  display: block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 0;
}

@media only screen and (max-width: 1259px) {
  .theme.wide .theme__input:checked + .theme__inner .theme__box:first-child {
    display: flex;
  }
  .theme.wide .theme__inner {
    display: flex;
    padding: 4px 2px;
    border-radius: 20px;
  }
  .theme.wide .theme__box {
    display: flex;
    height: 32px;
    border-radius: 16px;
    font-size: 15px;
  }
  .theme.wide .theme__box .icon {
    margin-right: 8px;
  }
}
.theme__input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.theme__input:checked + .theme__inner {
  background: #111315;
}
.theme__input:checked + .theme__inner .theme__box:first-child {
  background: none;
  box-shadow: none;
  color: #6F767E;
}
.theme__input:checked + .theme__inner .theme__box:first-child .icon {
  fill: #6F767E;
}
.theme__input:checked + .theme__inner .theme__box:first-child:hover {
  color: #FCFCFC;
}
.theme__input:checked + .theme__inner .theme__box:first-child:hover .icon {
  fill: #FCFCFC;
}
.theme__input:checked + .theme__inner .theme__box:nth-child(2) {
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.49), inset 0px 2px 1px rgba(255, 255, 255, 0.06);
  background: #272B30;
  color: #FCFCFC;
}
.theme__input:checked + .theme__inner .theme__box:nth-child(2) .icon {
  fill: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
  .theme__input:checked + .theme__inner .theme__box:first-child {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .theme__input:checked + .theme__inner .theme__box:first-child {
    display: flex;
  }
}
@media only screen and (max-width: 1259px) {
  .theme__input:checked + .theme__inner .theme__box:nth-child(2) {
    display: flex;
  }
}
.theme__inner {
  position: relative;
  display: flex;
  padding: 4px 2px;
  border-radius: 20px;
  background: #F4F4F4;
  transition: background 0.2s;
}

@media only screen and (max-width: 1259px) {
  .theme__inner {
    display: block;
    padding: 2px;
    border-radius: 50%;
  }
}
@media only screen and (max-width: 767px) {
  .theme__inner {
    display: flex;
    padding: 4px 2px;
    border-radius: 20px;
  }
}
.theme__box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 calc(50% - 4px);
  height: 32px;
  margin: 2px;
  border-radius: 16px;
  font-size: 15px;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
.theme__box .icon {
  margin-right: 8px;
  width: 24px;
  height: 24px;
  transition: fill 0.2s;
}
.theme__box:first-child {
  background: #FCFCFC;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}
.theme__box:nth-child(2) {
  color: #6F767E;
}
.theme__box:nth-child(2) .icon {
  fill: #6F767E;
}
.theme__box:hover {
  color: #1A1D1F;
}
.theme__box:hover .icon {
  fill: #1A1D1F;
}

@media only screen and (max-width: 1259px) {
  .theme__box {
    height: 40px;
    border-radius: 50%;
    font-size: 0;
  }
}
@media only screen and (max-width: 767px) {
  .theme__box {
    height: 32px;
    border-radius: 16px;
    font-size: 15px;
  }
}
@media only screen and (max-width: 1259px) {
  .theme__box .icon {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .theme__box .icon {
    margin-right: 8px;
  }
}
@media only screen and (max-width: 1259px) {
  .theme__box:nth-child(2) {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .theme__box:nth-child(2) {
    display: flex;
  }
}
.help {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 340px;
  padding: 24px 12px;
  background: #FFFFFF;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform 0.3s;
}

@media only screen and (max-width: 1339px) {
  .help {
    width: 320px;
    padding: 16px 8px;
  }
}
@media only screen and (max-width: 767px) {
  .help {
    width: 100%;
  }
}
body.dark .help {
  background: #111315;
}

.help.active {
  transform: translateX(0);
}

@media only screen and (max-width: 1259px) {
  .help.active {
    box-shadow: 4px 0 32px rgba(17, 19, 21, 0.05);
  }
}
.help__head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
}
.help__head > .icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  stroke: #1A1D1F;
}

body.dark .help__head > .icon {
  stroke: #FCFCFC;
}

.help__close {
  margin-left: auto;
}
.help__close .icon {
  width: 24px;
  height: 24px;
  fill: #1A1D1F;
  transition: fill 0.2s;
}

body.dark .help__close .icon {
  fill: #FCFCFC;
}

.help__close:hover .icon, body.dark .help__close:hover .icon {
  fill: #2A85FF;
}

.help__list {
  margin-bottom: auto;
  padding: 24px 0;
  border-top: 1px solid #EFEFEF;
}

body.dark .help__list {
  border-color: rgba(111, 118, 126, 0.2);
}

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

.help__item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  color: #1A1D1F;
  cursor: pointer;
  transition: all 0.2s;
}

@media only screen and (max-width: 1339px) {
  .help__item {
    padding: 6px;
  }
}
body.dark .help__item {
  color: #FCFCFC;
}

.help__item:hover {
  background: #F4F4F4;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

body.dark .help__item:hover {
  background: #1A1D1F;
  box-shadow: none;
}

.help__item:not(:last-child) {
  margin-bottom: 8px;
}

.help__preview {
  flex-shrink: 0;
  width: 96px;
  height: 72px;
  margin-right: 16px;
}
.help__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
}

.help__title {
  margin-bottom: 8px;
}

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

.help__status {
  margin-right: 4px;
  color: #1A1D1F;
}

.help__user {
  display: flex;
  align-items: center;
  padding: 1px 8px 1px 1px;
  border: 1px solid #EFEFEF;
  border-radius: 4px;
}

body.dark .help__user {
  border-color: #272B30;
}

.help__avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  font-size: 0;
}
.help__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 2px;
}

.help__time {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  color: #6F767E;
}

.help__link {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  color: #6F767E;
  transition: all 0.2s;
}
.help__link .icon {
  width: 24px;
  height: 24px;
  stroke: #6F767E;
  transition: fill 0.2s;
}
.help__link > .icon {
  margin-right: 12px;
}
.help__link:hover {
  color: #1A1D1F;
}
.help__link:hover .icon {
  fill: #1A1D1F;
}

body.dark .help__link:hover {
  color: #FCFCFC;
}
body.dark .help__link:hover .icon {
  fill: #FCFCFC;
}

.help__link:not(:last-child) {
  margin-bottom: 8px;
}

@media only screen and (max-width: 1339px) {
  .help__link:not(:last-child) {
    margin-bottom: 4px;
  }
}
.help__arrow {
  margin-left: auto;
}
.help__arrow .icon {
  width: 24px;
  height: 24px;
}

.help__counter {
  flex-shrink: 0;
  min-width: 24px;
  margin-left: auto;
  border-radius: 6px;
  background: #FFBC99;
  text-align: center;
  line-height: 24px;
  color: #1A1D1F;
}

.help + .overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: rgba(244, 244, 244, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

body.dark .help + .overlay {
  background: rgba(39, 43, 48, 0.9);
}

.help + .overlay.active {
  visibility: visible;
  opacity: 1;
}

.card {
  position: relative;
  padding: 24px;
  background: #FFF;
  border-radius: 8px;
}

@media only screen and (max-width: 767px) {
  .card {
    padding: 16px;
  }
}
body.dark .card {
  background: #1A1D1F;
}

.card__head {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
  .card__head {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .card__head_wide {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .card__head_wide .card__title {
    margin-bottom: 16px;
  }
}
.card__title {
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .card__title {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
.card__chart {
  width: auto;
}

.card__chart_product-views {
  height: 274px;
  margin-left: -10px;
  margin-bottom: -10px;
}

.card__chart_product-views-small {
  height: 172px;
  margin-left: -10px;
  margin-bottom: -10px;
}

.card__chart_traffic-channel {
  height: 358px;
  margin-left: -10px;
}

.card__chart_active-customers {
  height: 244px;
  margin-left: -10px;
  margin-bottom: -10px;
}

.card__chart_top-country, .card__chart_new-customers {
  height: 274px;
  margin-bottom: -10px;
}

@media only screen and (max-width: 767px) {
  .card__chart_top-country {
    margin-top: -10px;
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .card__chart_new-customers {
    max-width: 310px;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  .card__chart_new-customers {
    margin: -10px auto 0;
  }
}
.card__chart_performance-by-day {
  height: 250px;
  margin-left: -15px;
  margin-bottom: -10px;
}

.card__chart_product-sales {
  height: 335px;
  margin-left: -15px;
  margin-bottom: -15px;
}

.card__full {
  width: 40px;
  height: 40px;
  margin-left: auto;
}
.card__full .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.card__full:hover .icon {
  fill: #2A85FF;
}

.card__sorting {
  display: flex;
  margin-left: auto;
}
.card__sorting .card__link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.card__sorting .card__link .icon {
  width: 24px;
  height: 24px;
  fill: #9A9FA5;
  transition: fill 0.2s;
}
.card__sorting .card__link:hover .icon {
  fill: #1A1D1F;
}

body.dark .card__sorting .card__link:hover .icon {
  fill: #FCFCFC;
}

.card__sorting .card__link.active {
  background: #FCFCFC;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}
.card__sorting .card__link.active .icon {
  fill: #1A1D1F;
}

body.dark .card__sorting .card__link.active {
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.1), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.05);
  background: #111315;
}
body.dark .card__sorting .card__link.active .icon {
  fill: #FCFCFC;
}

.card__sorting .card__link:not(:last-child) {
  margin-right: 12px;
}

.card__nav {
  display: flex;
}
.card__nav .card__link {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.card__nav .card__link:hover, .card__nav .card__link.active {
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .card__nav {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .card__nav .card__link {
    flex: 1;
  }
}
body.dark .card__nav .card__link:hover, body.dark .card__nav .card__link.active {
  color: #FCFCFC;
}

.card__nav .card__link.active {
  background: #EFEFEF;
}

body.dark .card__nav .card__link.active {
  background: #272B30;
}

.card__nav .card__link:not(:last-child) {
  margin-right: 8px;
}

@media only screen and (max-width: 767px) {
  .card__nav .card__link:not(:last-child) {
    margin-right: 0;
  }
}
.card__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.card__indicator {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 700;
}

.card__color {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 4px;
}

.card:not(:last-child) {
  margin-bottom: 8px;
}

.actions {
  position: relative;
  display: inline-block;
  z-index: 3;
}

.actions__button {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background 0.2s;
}
.actions__button .icon {
  width: 24px;
  height: 24px;
  transition: fill 0.2s;
  fill: #6F767E;
}
.actions__button:hover .icon {
  fill: #2A85FF;
}

body.dark .actions__button {
  background: #111315;
}
body.dark .actions__button:hover .icon {
  fill: #2A85FF;
}

.actions__body {
  position: absolute;
  top: calc(100% + 12px);
  right: -12px;
  width: 264px;
  z-index: 2;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  box-shadow: 0px 40px 64px -12px rgba(0, 0, 0, 0.08), 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
  visibility: hidden;
  opacity: 0;
  transform: translateY(3px);
  transition: all 0.2s;
}

body.dark .actions__body {
  background: #111315;
  border-color: #272B30;
}

.actions__body:before {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 100%;
  width: 20px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

body.dark .actions__body:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23272B30'/%3E%3C/svg%3E");
}

.actions__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.actions__option .icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.actions__option:hover, .actions__option.selectioned {
  background: #EFEFEF;
  color: #1A1D1F;
}
.actions__option:hover .icon, .actions__option.selectioned .icon {
  fill: #1A1D1F;
}

body.dark .actions__option:hover, body.dark .actions__option.selectioned {
  background: transparent;
  color: #FCFCFC;
}
body.dark .actions__option:hover .icon, body.dark .actions__option.selectioned .icon {
  fill: #FCFCFC;
}

.actions.active {
  z-index: 10;
}
.actions.active .actions__button {
  background: #EFEFEF;
}
.actions.active .actions__button .icon {
  fill: #1A1D1F;
}

body.dark .actions.active .actions__button {
  background: #272B30;
}
body.dark .actions.active .actions__button .icon {
  fill: #FCFCFC;
}

.actions.active .actions__body {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.actions_small .actions__button {
  width: 32px;
  height: 32px;
}
.actions_small .actions__button .icon {
  width: 20px;
  height: 20px;
}
.actions_small .actions__body {
  right: -8px;
}
.actions_small .actions__body:before {
  right: 14px;
}

.actions_up .actions__body {
  top: auto;
  bottom: calc(100% + 12px);
  box-shadow: 0px 20px 32px -6px rgba(0, 0, 0, 0.08), 0px 0px 7px -4px rgba(0, 0, 0, 0.05), 0px 16px 24px -4px rgba(0, 0, 0, 0.1);
}
.actions_up .actions__body:before {
  top: 100%;
  bottom: auto;
  transform: rotate(180deg);
}

.header {
  position: fixed;
  top: 0;
  left: 340px;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 24px 40px;
  background: #FCFCFC;
  box-shadow: inset 1px 0px 0px #F4F4F4, inset 0 -1px 0px #EFEFEF;
}

@media only screen and (max-width: 1339px) {
  .header {
    left: 300px;
    padding: 16px 24px;
  }
}
@media only screen and (max-width: 1259px) {
  .header {
    left: 96px;
  }
}
@media only screen and (max-width: 767px) {
  .header {
    left: 0;
    padding: 16px 24px 16px 16px;
  }
}
body.dark .header {
  background: #1A1D1F;
  box-shadow: inset 1px 0px 0px #111315, inset 0 -1px 0px #111315;
}

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-right: auto;
}
.header__burger:before, .header__burger:after {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #6F767E;
}
.header__burger:before {
  margin-bottom: 6px;
}

@media only screen and (max-width: 767px) {
  .header__burger {
    display: flex;
  }
}
.header__control {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.header__control .header__button:not(:last-child) {
  margin-right: 24px;
}

@media only screen and (max-width: 767px) {
  .header__control {
    margin-left: 0;
  }
}
.header__item:not(:last-child) {
  margin-right: 24px;
}

.header__search {
  display: none;
  width: 48px;
  height: 48px;
}
.header__search:not(:last-child) {
  margin-right: 24px;
}
.header__search .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.header__search.active .icon {
  fill: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .header__search {
    display: inline-block;
  }
}
body.dark .header__search.active .icon {
  fill: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
  .header__control .header__button {
    display: none;
  }
}
.header__control .header__button .icon {
  width: 24px;
  height: 24px;
}

.header__item {
  position: relative;
}
.header__item.active .header__body {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

@media only screen and (max-width: 767px) {
  .header__item {
    position: static;
  }
}
.header__item_messages.active .header__head .icon, .header__item_notifications.active .header__head .icon {
  fill: #1A1D1F;
}

body.dark .header__item_messages.active .header__head .icon, body.dark .header__item_notifications.active .header__head .icon {
  fill: #FCFCFC;
}

.header__head {
  width: 48px;
  height: 48px;
}

.header__item_messages .header__head, .header__item_notifications .header__head {
  position: relative;
}

.header__item_messages .header__head .icon, .header__item_notifications .header__head .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}

.header__item_messages .header__head:hover .icon, .header__item_notifications .header__head:hover .icon {
  fill: #1A1D1F;
}

body.dark .header__item_messages .header__head:hover .icon, body.dark .header__item_notifications .header__head:hover .icon {
  fill: #FCFCFC;
}

.header__item_messages .header__head.active:before, .header__item_notifications .header__head.active:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: #FF6A55;
}

body.dark .header__item_messages .header__head.active:before, body.dark .header__item_notifications .header__head.active:before {
  border-color: #1A1D1F;
}

.header__item_user .header__head {
  border-radius: 50%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.header__item_user .header__head img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.header__body {
  position: absolute;
  top: calc(100% + 18px);
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: 0px 40px 64px -12px rgba(0, 0, 0, 0.08), 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
  visibility: hidden;
  opacity: 0;
  transform: translateY(3px);
  transition: all 0.2s;
}

@media only screen and (max-width: 1339px) {
  .header__body {
    top: calc(100% + 15px);
  }
}
@media only screen and (max-width: 767px) {
  .header__body {
    top: 100%;
    left: 16px;
  }
}
body.dark .header__body {
  background: #111315;
  border-color: #272B30;
}

.header__body:before {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 20px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

body.dark .header__body:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23111315'/%3E%3C/svg%3E");
}

.header__item_messages .header__body {
  right: -12px;
  width: 392px;
  padding: 12px 24px 24px;
}
.header__item_messages .header__body:before {
  right: 26px;
}

@media only screen and (max-width: 767px) {
  .header__item_messages .header__body {
    right: 16px;
    width: auto;
    padding: 12px 16px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .header__item_messages .header__body:before {
    right: 165px;
  }
}
.header__item_notifications .header__body {
  right: -92px;
  width: 392px;
  padding: 12px 24px 24px;
}
.header__item_notifications .header__body:before {
  right: 105px;
}

@media only screen and (max-width: 1339px) {
  .header__item_notifications .header__body {
    right: -72px;
  }
}
@media only screen and (max-width: 767px) {
  .header__item_notifications .header__body {
    right: 16px;
    width: auto;
    padding: 12px 16px 20px;
  }
}
@media only screen and (max-width: 1339px) {
  .header__item_notifications .header__body:before {
    right: 84px;
  }
}
@media only screen and (max-width: 767px) {
  .header__item_notifications .header__body:before {
    right: 92px;
  }
}
.header__item_user .header__body {
  right: -20px;
  width: 280px;
  padding: 16px;
}
.header__item_user .header__body:before {
  right: 33px;
}

@media only screen and (max-width: 1339px) {
  .header__item_user .header__body {
    right: 0;
    border-radius: 12px;
  }
}
@media only screen and (max-width: 767px) {
  .header__item_user .header__body {
    right: 16px;
    width: auto;
    padding: 12px 16px 20px;
  }
}
@media only screen and (max-width: 1339px) {
  .header__item_user .header__body:before {
    right: 13px;
  }
}
@media only screen and (max-width: 767px) {
  .header__item_user .header__body:before {
    right: 21px;
  }
}
.header__top {
  display: flex;
  align-items: center;
  margin: 0 -12px 12px 0;
}

@media only screen and (max-width: 767px) {
  .header__top {
    margin-right: -8px;
  }
}
.header__title {
  margin-right: auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .header__title {
    font-size: 18px;
  }
}
.header .actions__button {
  background: #EFEFEF;
}

body.dark .header .actions__button {
  background: #272B30;
}
body.dark .header .actions__button .icon {
  fill: #FCFCFC;
}

.header__list {
  margin: 0 -12px;
}

@media only screen and (max-width: 767px) {
  .header__item_messages .header__list {
    margin: 0 -8px;
  }
}
.header__message, .header__notification {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px;
  transition: background 0.2s;
}

.header__message:after, .header__notification:after {
  content: "";
  position: absolute;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9A9FA5;
  transition: background 0.2s;
}

.header__message:not(:last-child):before, .header__notification:not(:last-child):before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .header__message:nth-child(n+3), .header__notification:nth-child(n+3) {
    display: none;
  }
}
@media only screen and (max-width: 639px) {
  .header__message:nth-child(n+3), .header__notification:nth-child(n+3) {
    display: flex;
  }
}
@media only screen and (max-width: 639px) {
  .header__message:nth-child(n+6), .header__notification:nth-child(n+6) {
    display: none;
  }
}
.header__message {
  border-radius: 12px;
}
.header__message:hover {
  background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .header__message {
    padding: 8px;
  }
}
body.dark .header__message:hover {
  background: #272B30;
}

@media only screen and (max-width: 767px) {
  .header__message:hover {
    background: none;
  }
}
.header__message:hover .header__avatar.online:before {
  border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .header__message:hover .header__avatar.online:before {
    border-color: #FFFFFF;
  }
}
body.dark .header__message:hover .header__avatar.online:before {
  border-color: #272B30;
}

@media only screen and (max-width: 767px) {
  body.dark .header__message:hover .header__avatar.online:before {
    border-color: #111315;
  }
}
.header__message:after {
  top: 20px;
}
.header__message.new:after {
  background: #2A85FF;
}
.header__message:not(:last-child) {
  margin-bottom: 8px;
}

@media only screen and (max-width: 767px) {
  .header__message:after {
    top: 14px;
  }
}
body.dark .header__message:not(:last-child):before {
  background: transparent;
}

.header__notification {
  border-radius: 8px;
}
.header__notification:hover {
  background: #F4F4F4;
}
.header__notification:hover .icon {
  border-color: #F4F4F4;
}

@media only screen and (max-width: 767px) {
  .header__notification:hover {
    background: none;
  }
}
body.dark .header__notification:hover {
  background: #33383F;
}
body.dark .header__notification:hover .icon {
  border-color: #33383F;
}

.header__notification:after {
  top: 18px;
}
.header__notification.new:after {
  background: #2A85FF;
}

body.dark .header__notification:not(:last-child):before {
  background: #272B30;
}

.header__avatar {
  position: relative;
  flex-shrink: 0;
}
.header__avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.header__item_messages .header__avatar {
  width: 56px;
  height: 56px;
}
.header__item_messages .header__avatar.online:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 20px;
  height: 20px;
  border: 4px solid #FFFFFF;
  background: #83BF6E;
  border-radius: 50%;
  transition: border-color 0.2s;
}

@media only screen and (max-width: 767px) {
  .header__item_messages .header__avatar {
    width: 48px;
    height: 48px;
  }
}
body.dark .header__item_messages .header__avatar.online:before {
  border-color: #111315;
}

.header__item_notifications .header__avatar {
  width: 48px;
  height: 48px;
}

.header__icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  transition: border-color 0.2s;
}

body.dark .header__icon {
  border-color: #111315;
}

.header__icon img {
  width: 12px;
  height: 12px;
}

.header__details {
  padding-left: 12px;
}

.header__item_messages .header__details {
  flex: 0 0 calc(100% - 56px);
  width: calc(100% - 56px);
}

.header__item_notifications .header__details {
  flex: 0 0 calc(100% - 48px);
  width: calc(100% - 48px);
}

.header__line {
  display: flex;
  align-items: center;
  padding-right: 24px;
}

.header__item_messages .header__line {
  margin-bottom: 4px;
}

.header__subtitle {
  font-weight: 700;
  color: #1A1D1F;
}

body.dark .header__subtitle {
  color: #FCFCFC;
}

.header__item_messages .header__subtitle {
  margin-right: auto;
}

.header__item_notifications .header__subtitle {
  margin-right: 4px;
}

.header__login {
  font-weight: 500;
  color: #9A9FA5;
}

.header__item_messages .header__login {
  margin-left: 16px;
}

.header__item_notifications .header__login {
  margin-right: auto;
}

.header__time {
  margin-left: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.header__content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #6F767E;
}

.header__item_messages .header__content {
  padding-right: 40px;
}

.header__item_notifications .header__content strong {
  font-weight: 700;
  color: #1A1D1F;
}

body.dark .header__item_notifications .header__content strong {
  color: #FCFCFC;
}

.header__body .header__button {
  width: 100%;
  margin-top: 24px;
}

@media only screen and (max-width: 767px) {
  .header__body .header__button {
    margin-top: 16px;
  }
}
.header__nav:not(:last-child) {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .header__nav:not(:last-child) {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
}
body.dark .header__nav:not(:last-child) {
  border-color: #272B30;
}

.header__link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.header__link .icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  stroke: #6F767E;
  transition: fill 0.2s;
}
.header__link:hover, .header__link.active {
  color: #1A1D1F;
}
.header__link:hover .icon, .header__link.active .icon {
  stroke: #1A1D1F;
}

body.dark .header__link:hover, body.dark .header__link.active {
  color: #FCFCFC;
}
body.dark .header__link:hover .icon, body.dark .header__link.active .icon {
  fill: #FCFCFC;
}

.header__link.active {
  background: #F4F4F4;
}

body.dark .header__link.active {
  background: transparent;
}

.header__link.color, body.dark .header__link.color {
  color: #8E59FF;
}
.header__link.color .icon, body.dark .header__link.color .icon {
  stroke: #8E59FF;
}

.header__link.color:hover {
  opacity: 0.8;
}

.header__btns {
  display: none;
  align-items: center;
  margin-left: auto;
}
.header__btns .header__button {
  white-space: nowrap;
}
.header__btns .header__link {
  margin-right: 32px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1D1F;
  transition: color 0.2s;
}

@media only screen and (max-width: 767px) {
  .header__btns {
    margin-left: 0;
  }
}
body.dark .header__btns .header__link {
  color: #FCFCFC;
}

@media only screen and (max-width: 767px) {
  .header__btns .header__link {
    margin-right: 24px;
  }
}
.header__btns .header__link:hover, body.dark .header__btns .header__link:hover {
  color: #2A85FF;
}

.header.unauthorized .header__control {
  display: none;
}
.header.unauthorized .header__btns {
  display: flex;
}

.search {
  position: relative;
  flex-shrink: 0;
  width: 360px;
}
.search.active .search__start, .search.active .search__result {
  visibility: hidden;
  opacity: 0;
}
.search.active .search__direction, .search.active .search__close, .search.active .search__body {
  visibility: visible;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .search {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    width: 100%;
    padding: 12px 16px;
    background: #FFFFFF;
    box-shadow: 0 8px 12px rgba(17, 19, 21, 0.05);
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
  }

  body.dark .search {
    background: #111315;
  }
}
@media only screen and (max-width: 767px) {
  .search.visible {
    visibility: visible;
    opacity: 1;
  }
}
.search__head {
  position: relative;
  z-index: 2;
}

.search__start, .search__direction, .search__result, .search__head .search__close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s;
}

.search__start .icon, .search__direction .icon, .search__result .icon, .search__head .search__close .icon {
  width: 24px;
  height: 24px;
  transition: fill 0.2s;
}

.search__start {
  left: 12px;
}
.search__start .icon {
  fill: #6F767E;
}
.search__start:hover .icon {
  fill: #1A1D1F;
}

.search__result {
  right: 8px;
  width: 56px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
  font-size: 16px;
  font-weight: 600;
  color: #1A1D1F;
}

body.dark .search__result {
  background: #1A1D1F;
  box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 1px 0px rgba(255, 255, 255, 0.08);
  color: #FCFCFC;
}

@media only screen and (max-width: 767px) {
  .search__result {
    display: none;
  }
}
.search__result:hover {
  color: #2A85FF;
}

.search__direction {
  left: 10px;
}
.search__direction .icon {
  fill: #2A85FF;
}
.search__direction:hover {
  transform: translate(-2px, -50%);
}

.search__head .search__close {
  right: 10px;
  width: 32px;
  height: 32px;
}
.search__head .search__close .icon {
  fill: #9A9FA5;
}
.search__head .search__close:hover .icon {
  fill: #FF6A55;
}

.search__direction, .search__head .search__close {
  visibility: hidden;
  opacity: 0;
}

.search__input {
  width: 100%;
  height: 48px;
  padding: 0 68px 0 42px;
  background: #F4F4F4;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #1A1D1F;
  transition: all 0.2s;
}

body.dark .search__input {
  background: #272B30;
  color: #FCFCFC;
}

.search__input::-webkit-input-placeholder, .search__input::-moz-placeholder, .search__input:-ms-input-placeholder, .search__input::-ms-input-placeholder, .search__input::placeholder {
  color: #9A9FA5;
}
.search__input:focus {
  border-color: #2A85FF;
  background: #FFFFFF;
}

body.dark .search__input:focus {
  background: #111315;
}

.search__body {
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  padding: 84px 12px 12px;
  border: 1px solid transparent;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
  border-radius: 16px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

@media only screen and (max-width: 767px) {
  .search__body {
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 152px);
    padding: 16px 8px;
    border-radius: 0;
    border-top: 1px solid #EFEFEF;
    box-shadow: 0 12px 32px rgba(17, 19, 21, 0.05);
    overflow: auto;
  }
}
body.dark .search__body {
  background: #1A1D1F;
  border-color: #272B30;
}

.search__box:not(:last-child) {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .search__box:not(:last-child) {
  border-color: #272B30;
}

@media only screen and (max-width: 767px) {
  .search__box:not(:last-child) {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
}
.search__category {
  margin-bottom: 12px;
  padding-left: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.search__item, .search__suggestion {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
}

.search__link {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.search__link:hover .search__title {
  color: #2A85FF;
}

.search__suggestion:hover .search__title {
  color: #2A85FF;
}
.search__suggestion:hover .search__arrow {
  transform: translateX(2px);
}

.search__preview {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.search__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.search__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 16px;
  border-radius: 50%;
  border: 2px solid #CABDFF;
}
.search__icon .icon {
  width: 24px;
  height: 24px;
  fill: #1A1D1F;
}

body.dark .search__icon .icon {
  fill: #FCFCFC;
}

.search__details {
  flex-grow: 1;
}

.search__content {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.search__item .search__content {
  margin-bottom: 4px;
}

.search__title {
  color: #1A1D1F;
  transition: color 0.2s;
}

body.dark .search__title {
  color: #FCFCFC;
}

.search__suggestion .search__title {
  margin-bottom: 4px;
}

.search__remove {
  flex-shrink: 0;
  margin-left: 24px;
}
.search__remove .icon {
  width: 24px;
  height: 24px;
  fill: #9A9FA5;
  transition: fill 0.2s;
}
.search__remove:hover .icon {
  fill: #FF6A55;
}

.search__arrow {
  margin-left: 24px;
  transition: transform 0.2s;
}
.search__arrow .icon {
  width: 24px;
  height: 24px;
  fill: #9A9FA5;
}

.overview__nav {
  display: flex;
  margin-bottom: 32px;
  padding: 8px;
  background: #F4F4F4;
  border-radius: 20px;
}

@media only screen and (max-width: 767px) {
  .overview__nav {
    margin-bottom: 24px;
  }
}
body.dark .overview__nav {
  background: rgba(17, 19, 21, 0.5);
}

.overview__link {
  display: flex;
  padding: 20px;
  flex: 0 0 50%;
  border-radius: 12px;
  color: #1A1D1F;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: all 0.2s;
}

@media only screen and (max-width: 1419px) {
  .overview__link {
    padding: 20px 16px;
  }
}
@media only screen and (max-width: 767px) {
  .overview__link {
    display: block;
  }
}
body.dark .overview__link {
  color: #FCFCFC;
}

.overview__link.active {
  background: #FCFCFC;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}

body.dark .overview__link.active {
  background: #272B30;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.06);
}

.overview__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  border-radius: 50%;
}
.overview__icon .icon {
  width: 24px;
  height: 24px;
}

@media only screen and (max-width: 767px) {
  .overview__icon {
    display: none;
  }
}
.overview__subtitle {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.overview .tooltip .icon {
  fill: #9A9FA5;
}

.overview__counter {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media only screen and (max-width: 1419px) {
  .overview__counter {
    font-size: 40px;
    line-height: 48px;
  }
}
.overview .balance {
  margin: -12px -12px 0 auto;
}

@media only screen and (max-width: 767px) {
  .overview .balance {
    margin: 4px 0 0;
  }
}
body.dark .overview .balance {
  background: #272B30 !important;
}

.overview__item {
  display: none;
}

.overview__chart {
  width: auto;
  height: 238px;
  margin: 0 0 -10px -10px;
}

@media only screen and (max-width: 767px) {
  .overview__chart {
    height: 206px;
  }
}
.overview__chart_snapshot {
  height: 329px;
  margin-left: -10px;
}

@media only screen and (max-width: 1023px) {
  .overview__chart_snapshot {
    height: 300px;
  }
}
.users__head {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

@media only screen and (max-width: 767px) {
  .users__button {
    margin-left: 16px;
  }
}
.users__button span {
  margin-left: 4px;
}

@media only screen and (max-width: 767px) {
  .users__button span {
    display: none;
  }
}
.users__info {
  max-width: 240px;
  margin-right: auto;
  font-weight: 500;
  color: #6F767E;
}
.users__info strong {
  font-weight: 600;
  color: #1A1D1F;
}

body.dark .users__info strong {
  color: #FCFCFC;
}

.users__list {
  display: flex;
}

.users__item, .users__all {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 32px 16px;
  flex: 0 0 25%;
  text-align: center;
  color: #1A1D1F;
  transition: color 0.2s;
}

@media only screen and (max-width: 767px) {
  .users__item, .users__all {
    flex: 0 0 33.333%;
    padding: 16px 8px;
  }
}
body.dark .users__item, body.dark .users__all {
  color: #FCFCFC;
}

.users__item:hover, .users__all:hover {
  color: #2A85FF;
}

.users__item {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.23077;
}

@media only screen and (max-width: 639px) {
  .users__item:nth-child(n+3) {
    display: none;
  }
}
.users__all {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
}

.users__avatar, .users__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
}

.users__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.users__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #EFEFEF;
  border-radius: 50%;
  background: #EFEFEF;
  transition: all 0.2s;
}
.users__icon .icon {
  width: 24px;
  height: 24px;
  stroke: #6F767E;
  transition: fill 0.2s;
}

body.dark .users__icon {
  background: #272B30;
  border-color: #272B30;
}

.users__all:hover .users__icon {
  border-color: #2A85FF;
  background: none;
}
.users__all:hover .users__icon .icon {
  fill: #2A85FF;
}

.tips__info {
  margin-bottom: 24px;
  font-weight: 500;
  color: #6F767E;
}

.tips__list {
  display: flex;
  flex-wrap: wrap;
  margin: -32px -16px 0;
}

@media only screen and (max-width: 767px) {
  .tips__list {
    display: block;
    margin: 0;
  }
}
.tips__item {
  display: flex;
  align-items: center;
  flex: 0 0 calc(50% - 32px);
  width: calc(50% - 32px);
  margin: 32px 16px 0;
  color: #1A1D1F;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .tips__item {
    width: 100%;
    margin: 0;
  }
}
body.dark .tips__item {
  color: #FCFCFC;
}

.tips__item:hover .tips__icon {
  background: #EFEFEF;
}

body.dark .tips__item:hover .tips__icon {
  background: #272B30;
}

@media only screen and (max-width: 767px) {
  .tips__item:not(:last-child) {
    margin-bottom: 24px;
  }
}
.tips__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #EFEFEF;
  margin-right: 12px;
  transition: background 0.2s;
}
.tips__icon .icon {
  width: 24px;
  height: 24px;
  stroke: #272B30;
}

body.dark .tips__icon {
  border-color: #272B30;
}
body.dark .tips__icon .icon {
  fill: #FCFCFC;
}

.tips__details {
  flex-grow: 1;
}

.tips__title {
  margin-bottom: 8px;
}

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

.tips__status {
  margin-right: 4px;
  color: #1A1D1F;
}

.tips__user {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px 1px 1px;
  border: 1px solid #EFEFEF;
  border-radius: 4px;
}

body.dark .tips__user {
  border-color: #272B30;
}

.tips__avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  font-size: 0;
}
.tips__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 2px;
}

.tips__action {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  color: #6F767E;
}

.media__content {
  margin-bottom: 16px;
  font-weight: 500;
  color: #6F767E;
}

.media__btns {
  display: flex;
  margin: 0 -8px;
}

@media only screen and (max-width: 767px) {
  .media__btns {
    margin: 0 -6px;
  }
}
.media__button {
  flex: 0 0 calc(33.333% - 16px);
  width: calc(33.333% - 16px);
  margin: 0 8px;
}
.media__button .icon {
  width: 24px;
  height: 24px;
}

@media only screen and (max-width: 767px) {
  .media__button {
    flex: 0 0 calc(33.333% - 12px);
    width: calc(33.333% - 12px);
    margin: 0 6px;
    font-size: 0;
  }
  .media__button .icon {
    margin: 0 !important;
  }
}
.popular__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

body.dark .popular__head {
  border-color: #272B30;
}

.popular__list {
  margin: 0 -12px;
}

.popular__item {
  display: flex;
  align-items: center;
  padding: 12px;
  color: #1A1D1F;
  cursor: pointer;
}

body.dark .popular__item {
  color: #FCFCFC;
}

.popular__item:hover .popular__title {
  color: #2A85FF;
}
.popular__item:not(:last-child) {
  margin-bottom: 12px;
}

.popular__preview {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin-right: 12px;
  border-radius: 8px;
  overflow: hidden;
}
.popular__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.popular__title {
  flex-grow: 1;
  padding-right: 16px;
  transition: color 0.2s;
}

.popular__details {
  flex-shrink: 0;
  text-align: right;
}

.popular__button {
  width: 100%;
  margin-top: 12px;
}

.review__item {
  display: flex;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .review__item {
  border-color: #272B30;
}

.review__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 12px;
}
.review__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.review__details {
  flex-grow: 1;
}

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

.review__user {
  margin-right: auto;
}

.review__title {
  font-weight: 700;
}

.review__login {
  margin-left: 5px;
  font-weight: 500;
  color: #9A9FA5;
}

.review__time {
  margin-left: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.review__product {
  margin-bottom: 8px;
  font-weight: 500;
  color: #9A9FA5;
}
.review__product strong {
  font-weight: 700;
  color: #1A1D1F;
}

body.dark .review__product strong {
  color: #FCFCFC;
}

.review__content {
  margin-bottom: 16px;
  font-weight: 500;
  color: #1A1D1F;
}

body.dark .review__content {
  color: #FCFCFC;
}

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

.review__link .icon {
  width: 20px;
  height: 20px;
  fill: #9A9FA5;
  transition: fill 0.2s;
}
.review__link:hover .icon {
  fill: #2A85FF;
}

.review__button {
  width: 100%;
}

.refund__item {
  display: flex;
}
.refund__item:not(:last-child) {
  margin-bottom: 12px;
}

.refund__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  background: #FFE7E4;
}
.refund__icon .icon {
  width: 24px;
  height: 24px;
  stroke: #FF6A55;
  stroke-width: 5;
}

.refund__content {
  font-weight: 500;
  color: #6F767E;
}
.refund__content strong {
  font-weight: 600;
  color: #1A1D1F;
}

body.dark .refund__content strong {
  color: #FCFCFC;
}

.refund__button {
  width: 100%;
  margin-top: 24px;
}

.popup {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  min-width: 320px;
  padding: 20px 10px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  overflow: auto;
  z-index: 999;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.popup.visible {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.popup.animation .popup__wrap {
  opacity: 1;
}

.popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 244, 244, 0.8);
}

body.dark .popup__overlay {
  background: rgba(39, 43, 48, 0.9);
}

.popup__wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 26px 24px 24px;
  margin: auto;
  opacity: 0;
  background: #FCFCFC;
  border-radius: 16px;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  transition: opacity 0.5s;
}

body.dark .popup__wrap {
  background: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .popup__wrap {
    box-shadow: none;
  }
}
.popup:not(.popup_product) .popup__wrap {
  max-width: 408px;
}

.popup__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
  transition: background 0.2s;
}
.popup__close .icon {
  width: 20px;
  height: 20px;
  fill: #33383F;
  transition: transform 0.25s;
}

body.dark .popup__close {
  background: #272B30;
}
body.dark .popup__close .icon {
  fill: #FCFCFC;
}

.popup__close:hover .icon {
  transform: rotate(90deg);
}

.popup_product {
  padding: 120px 24px 24px;
}
.popup_product .popup__overlay {
  background: #F4F4F4;
}

@media only screen and (max-width: 767px) {
  .popup_product {
    padding: 88px 16px 24px;
  }
}
body.dark .popup_product .popup__overlay {
  background: #111315;
}

.popup_product .popup__wrap {
  position: static;
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 0;
  border-radius: 8px;
  z-index: 2;
  box-shadow: none;
}

@media only screen and (max-width: 1259px) {
  .popup_product .popup__wrap {
    background: none;
  }
}
.popup_post:not(.popup_product) .popup__wrap, .popup_success:not(.popup_product) .popup__wrap {
  max-width: 560px;
}

.popup_refunds:not(.popup_product) .popup__wrap {
  max-width: 896px;
}

@media only screen and (max-width: 767px) {
  .popup_refunds:not(.popup_product) .popup__wrap {
    padding: 28px 16px 16px;
  }
}
.product__wrapper {
  position: relative;
  width: 100%;
  max-width: 1020px;
  background: #FCFCFC;
  border-radius: 8px;
}

@media only screen and (max-width: 1259px) {
  .product__wrapper {
    max-width: calc(100% - 88px);
  }
}
@media only screen and (max-width: 767px) {
  .product__wrapper {
    max-width: 100%;
  }
}
body.dark .product__wrapper {
  background: #1A1D1F;
}

.product__details {
  padding: 24px;
  flex-grow: 1;
}

@media only screen and (max-width: 767px) {
  .product__details {
    padding: 16px;
    overflow: hidden;
  }
}
.product__comments {
  display: none;
  flex-shrink: 0;
  width: 472px;
}

@media only screen and (max-width: 1259px) {
  .product__comments {
    width: 600px;
  }
}
@media only screen and (max-width: 1023px) {
  .product__comments {
    width: 100%;
  }
}
.product__next {
  position: absolute;
  left: calc(100% + 24px);
  bottom: 256px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  background: #FFFFFF;
  border-radius: 50%;
}

@media only screen and (max-width: 1259px) {
  .product__next {
    left: auto;
    right: -88px;
    bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .product__next {
    display: none;
  }
}
body.dark .product__next {
  background: #272B30;
}

.product__next .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.product__next:hover .icon {
  fill: #2A85FF;
}

.product__control {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .product__control {
    top: 16px;
    left: 16px;
    right: 16px;
  }
}
body.dark .product__control .product__button {
  background: #1A1D1F;
  box-shadow: inset 0 0 0 2px #272B30;
  color: #FCFCFC;
}
body.dark .product__control .product__button:hover {
  background: #272B30;
}

.product__close {
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06);
  font-size: 0;
}
.product__close .icon {
  width: 20px;
  height: 20px;
  fill: #33383F;
  transition: transform 0.2s;
}

body.dark .product__close {
  background: #1A1D1F;
}
body.dark .product__close .icon {
  fill: #FCFCFC;
}

.product__close:hover .icon {
  transform: rotate(90deg);
}

.product__head {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

@media only screen and (max-width: 767px) {
  .product__head {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
}
.product__nav {
  display: flex;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .product__nav {
    width: 100%;
    margin: 0 0 16px;
  }
}
.product__link {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.product__link:hover, .product__link.active {
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .product__link {
    flex: 1;
  }
}
body.dark .product__link:hover, body.dark .product__link.active {
  color: #FCFCFC;
}

.product__link.active {
  background: #EFEFEF;
}

body.dark .product__link.active {
  background: #272B30;
}

.product__link:not(:last-child) {
  margin-right: 8px;
}

@media only screen and (max-width: 767px) {
  .product__link:not(:last-child) {
    margin-right: 0;
  }
}
.product__btns {
  display: flex;
  align-items: center;
}

.product__favorite {
  margin-right: 16px;
}
.product__favorite .icon {
  width: 24px;
  height: 24px;
  fill: #FF6A55;
}
.product__favorite:hover {
  box-shadow: inset 0 0 0 1px #FF6A55;
  background: #FF6A55;
  color: #FCFCFC;
}

body.dark .product__favorite:hover {
  box-shadow: inset 0 0 0 1px #FF6A55;
}

.product__favorite:hover .icon {
  fill: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
  .product__buy {
    padding: 0 16px;
  }
}
@media only screen and (max-width: 767px) {
  .product__buy {
    flex-grow: 1;
  }
}
.product__buy .icon {
  width: 24px;
  height: 24px;
}

.product__inner {
  display: inline-flex;
  align-items: center;
}
.product__inner span {
  margin-left: 4px;
}

@media only screen and (max-width: 1023px) {
  .product__inner span {
    display: none;
  }
}
.product__price {
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid #4493FC;
  box-shadow: 1px 0 0 0 #186FE3;
  line-height: 48px;
}

@media only screen and (max-width: 1023px) {
  .product__price {
    margin-right: 16px;
    padding-right: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .product__price {
    margin-right: 12px;
    padding-right: 12px;
  }
}
.product__title {
  margin-bottom: 12px;
}

@media only screen and (max-width: 767px) {
  .product__title {
    font-size: 24px;
  }
}
.product__info {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #6F767E;
}

@media only screen and (max-width: 767px) {
  .product__info {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .product__info {
    font-size: 14px;
  }
}
.product__line {
  display: flex;
  align-items: center;
}

.product__author {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}
.product__author span {
  margin-left: 4px;
  color: #1A1D1F;
}

body.dark .product__author span {
  color: #FCFCFC;
}

.product__author .product__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.product__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.product__rating {
  display: flex;
  align-items: center;
  margin-left: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}
.product__rating .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: #FFC554;
}

.product__counter {
  margin-left: 4px;
  color: #6F767E;
}

.product__gallery {
  position: relative;
  margin-top: 40px;
}
.product__gallery .product__button {
  position: absolute;
  left: 12px;
  bottom: 12px;
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .product__gallery {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .product__gallery .product__button {
    bottom: 5px;
  }
}
body.dark .product__gallery .product__button {
  box-shadow: inset 0 0 0 2px #272B30;
  background: #1A1D1F;
  color: #FCFCFC;
}
body.dark .product__gallery .product__button:hover {
  background: #272B30;
}

.product__preview {
  display: block;
  cursor: pointer;
}
.product__preview img {
  width: 100%;
  border-radius: 12px;
}
.product__preview:not(:first-child) {
  display: none;
}

.product__row {
  display: flex;
  margin-top: 40px;
}

@media only screen and (max-width: 1023px) {
  .product__row {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .product__row {
    margin-top: 32px;
  }
}
.product__col:first-child {
  flex-grow: 1;
  padding-right: 64px;
}
.product__col:nth-child(2) {
  flex-shrink: 0;
  width: 308px;
}

@media only screen and (max-width: 1259px) {
  .product__col:first-child {
    padding-right: 48px;
  }
}
@media only screen and (max-width: 1023px) {
  .product__col:first-child {
    padding-right: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .product__col:nth-child(2) {
    width: 100%;
    margin-top: 32px;
  }
}
.product__subtitle {
  margin-bottom: 32px;
}

@media only screen and (max-width: 1023px) {
  .product__subtitle {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .product__subtitle {
    margin-bottom: 12px;
  }
}
.product__content {
  font-weight: 500;
  color: #33383F;
}

body.dark .product__content {
  color: #EFEFEF;
}

.product__content p:not(:last-child) {
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  .product__features {
    margin-top: 12px;
  }
}
.product__features li {
  position: relative;
  padding-left: 40px;
  color: #33383F;
}

body.dark .product__features li {
  color: #EFEFEF;
}

.product__features li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%23b5e4ca'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}
.product__features li:not(:last-child) {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .product__features li:not(:last-child) {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
}
body.dark .product__features li:not(:last-child) {
  border-color: #272B30;
}

.product__panel {
  position: absolute;
  top: 16px;
  left: calc(100% + 24px);
  display: flex;
  flex-direction: column;
}
.product__panel .product__avatar:not(:last-child) {
  margin-bottom: 24px;
}

@media only screen and (max-width: 1259px) {
  .product__panel {
    top: 0;
    left: auto;
    right: -88px;
  }
}
@media only screen and (max-width: 767px) {
  .product__panel {
    display: none;
  }
}
.product__brand:not(:last-child), .product__share:not(:last-child) {
  margin-bottom: 24px;
}

.product__panel .product__avatar, .product__brand, .product__share {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.product__brand {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #FFFFFF;
}

body.dark .product__brand {
  background: #272B30;
}

.product__brand img {
  max-height: 32px;
}

.product__number {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 20px;
  padding: 0 4px;
  background: #1A1D1F;
  border-radius: 50%;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #FCFCFC;
}

body.dark .product__number {
  background: #FCFCFC;
  color: #1A1D1F;
}

.product__share {
  background: #FFFFFF;
  border-radius: 50%;
}

body.dark .product__share {
  background: #272B30;
}

.product__share .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.product__share:hover .icon {
  fill: #2A85FF;
}

.product.active .product__wrapper {
  display: flex;
  max-width: 1440px;
}
.product.active .product__details {
  flex: 0 0 calc(100% - 472px);
  width: calc(100% - 472px);
}
.product.active .product__comments {
  display: block;
}
.product.active .product__panel, .product.active .product__next {
  display: none;
}

@media only screen and (max-width: 1259px) {
  .product.active .product__wrapper {
    max-width: 100%;
    margin-right: 0;
  }
}
@media only screen and (max-width: 1259px) {
  .product.active .product__details {
    display: none;
  }
}
.hit {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .hit {
    margin-top: 48px;
    padding-top: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .hit {
    margin-top: 32px;
    padding-top: 32px;
  }
}
body.dark .hit {
  border-color: #272B30;
}

.hit__head {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.hit__title {
  margin-right: auto;
}

.hit__button .icon {
  width: 24px;
  height: 24px;
}

.hit__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 767px) {
  .hit__wrapper {
    margin: 0;
  }
}
.hit .summary {
  margin: 0 12px;
}

.hit__slider {
  padding-bottom: 48px;
}

@media only screen and (max-width: 767px) {
  .hit .slick-list {
    margin: 0 -296px 0 -8px;
  }
}
.hit .slick-arrow {
  bottom: 0;
}

body.dark .hit .slick-arrow:hover {
  box-shadow: inset 0 0 0 2px #272B30;
}
body.dark .hit .slick-arrow:hover path {
  fill: #FCFCFC;
}

.hit .slick-prev {
  left: calc(50% - 48px);
}
.hit .slick-next {
  right: calc(50% - 48px);
}

.summary__preview:after, .summary__control, .summary .checkbox {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.summary__preview {
  position: relative;
  height: 200px;
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
}
.summary__preview:after, .summary__preview:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s;
}
.summary__preview:after {
  background: rgba(17, 19, 21, 0.8);
}
.summary__preview:before {
  z-index: 2;
  border: 2px solid transparent;
  border-radius: 12px;
  pointer-events: none;
}
.summary__preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.summary__preview .checkbox {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}
.summary__preview .checkbox .checkbox__tick {
  border-color: #2A85FF;
}

@media only screen and (max-width: 1023px) {
  .summary__preview .checkbox {
    display: none;
  }
}
.summary__control {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  transform: translate(-50%, -50%);
}

.summary__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FCFCFC;
}
.summary__button .icon {
  width: 20px;
  height: 20px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.summary__button:hover .icon {
  fill: #2A85FF;
}
.summary__button:not(:last-child) {
  margin-right: 16px;
}

.summary__line {
  display: flex;
  align-items: flex-start;
}

.summary__title {
  margin-right: auto;
}

.summary__price, .summary__empty {
  flex-shrink: 0;
  display: inline-block;
  margin-left: 32px;
  padding: 0 8px;
  border-radius: 6px;
  line-height: 32px;
  font-weight: 700;
}

.summary__price {
  background: #B5E4CA;
}

body.dark .summary__price {
  color: #1A1D1F;
}

.summary__empty {
  background: #EFEFEF;
}

body.dark .summary__empty {
  background: #272B30;
  color: #FCFCFC;
}

.summary__date {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}
.summary__date .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: #6F767E;
}

@media only screen and (max-width: 767px) {
  .summary__date {
    margin-top: 2px;
  }
}
.summary__rating {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}
.summary__rating .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: #FFC554;
}

@media only screen and (max-width: 767px) {
  .summary__rating {
    margin-top: 4px;
  }
}
.summary__rating_empty {
  color: #6F767E;
}
.summary__rating_empty .icon {
  fill: #6F767E;
}

.summary__counter {
  margin-left: 4px;
  color: #6F767E;
}

.summary:hover .summary__preview:after, .summary:hover .summary__control, .summary:hover .checkbox {
  visibility: visible;
  opacity: 1;
}
.summary.active .checkbox {
  visibility: visible;
  opacity: 1;
}
.summary.active .summary__preview:before {
  border-color: #2A85FF;
}

.editor__label {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #33383F;
}

body.dark .editor__label {
  color: #EFEFEF;
}

.editor .tooltip {
  position: relative;
  top: -1px;
}
.editor .tooltip .icon {
  fill: #9A9FA5;
}
.editor .richText {
  background: #F4F4F4;
  border: 2px solid rgba(154, 159, 165, 0.25);
  border-radius: 12px;
}

body.dark .editor .richText {
  background: #111315;
  border-color: rgba(154, 159, 165, 0.15);
}

.editor .richText-toolbar {
  border: none;
  padding: 0 3px;
}
.editor .richText-toolbar ul li {
  margin: 6px;
}
.editor .richText-toolbar ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none !important;
  transition: color 0.2s;
}
.editor .richText-toolbar ul li a:hover {
  color: #2A85FF;
}

@media only screen and (max-width: 767px) {
  .editor .richText-toolbar ul li {
    margin: 3px;
  }
}
body.dark .editor .richText-toolbar ul li a {
  color: #9A9FA5;
}
body.dark .editor .richText-toolbar ul li a:hover {
  color: #FCFCFC;
}

.editor .richText-toolbar:first-child {
  padding-right: 100px;
  background: #FCFCFC;
  border-radius: 10px 10px 0 0;
}

body.dark .editor .richText-toolbar:first-child {
  background: #272B30;
}

@media only screen and (max-width: 767px) {
  .editor .richText-toolbar:first-child {
    padding-right: 85px;
  }
}
.editor .richText-toolbar:last-child {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
}
.editor .richText-undo, .editor .richText-redo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin: 6px;
  padding: 0;
  border: none;
  transition: color 0.2s;
}

@media only screen and (max-width: 767px) {
  .editor .richText-undo, .editor .richText-redo {
    margin: 3px;
  }
}
body.dark .editor .richText-undo, body.dark .editor .richText-redo {
  color: #9A9FA5;
}

.editor .richText-undo:not(.is-disabled):hover, .editor .richText-redo:not(.is-disabled):hover {
  color: #2A85FF;
}

body.dark .editor .richText-undo:not(.is-disabled):hover, body.dark .editor .richText-redo:not(.is-disabled):hover {
  color: #FCFCFC;
}

.editor .richText-help {
  display: none;
}
.editor .richText-editor {
  min-height: 122px;
  max-height: 200px;
  height: auto;
  padding: 12px;
  border: none !important;
  background: none;
  border-radius: 0 0 10px 10px;
  font-family: "Inter", sans-serif;
  color: #33383F;
}

body.dark .editor .richText-editor {
  color: #FCFCFC;
}

.editor .richText-dropdown {
  z-index: 2;
}

.editor__wrap {
  position: relative;
}
.editor__wrap .richText {
  padding-bottom: 60px;
}
.editor__wrap .richText-editor {
  min-height: 60px;
}

.editor__button {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
}

.answer {
  display: none;
  position: relative;
  margin-top: 28px;
  padding-left: 60px;
}
.answer:before {
  content: "";
  position: absolute;
  top: -23px;
  left: -45px;
  width: 33px;
  height: 44px;
  border-bottom-left-radius: 12px;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .answer {
    padding-left: 52px;
  }
}
@media only screen and (max-width: 767px) {
  .answer:before {
    left: -37px;
  }
}
body.dark .answer:before {
  border-color: #33383F;
}

.answer__avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}
.answer__avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.answer__details {
  flex-grow: 1;
}
.answer__details textarea {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 360px;
  height: 19px;
  min-height: 19px;
  padding: 0;
  resize: none;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: #272B30;
}

@media only screen and (max-width: 767px) {
  .answer__details textarea {
    padding-right: 8px;
  }
}
body.dark .answer__details textarea {
  color: #FCFCFC;
}

body.dark .answer__details textarea::-webkit-input-placeholder, body.dark .answer__details textarea::-moz-placeholder, body.dark .answer__details textarea:-ms-input-placeholder, body.dark .answer__details textarea::-ms-input-placeholder, body.dark .answer__details textarea::placeholder {
  color: #6F767E;
}

.answer__btns {
  display: flex;
  margin-top: 16px;
}

body.dark .answer__button:nth-child(2) {
  background: #1A1D1F;
  box-shadow: inset 0 0 0 2px #1A1D1F;
}
body.dark .answer__button:nth-child(2):hover {
  background: #111315;
  box-shadow: inset 0 0 0 2px #111315;
}

.answer__button:not(:last-child) {
  margin-right: 8px;
}

.comments {
  padding: 24px;
  border-left: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .comments {
    padding: 16px 16px 24px;
  }
}
body.dark .comments {
  border-color: #111315;
}

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

.comments__title {
  display: flex;
  align-items: center;
  margin-right: auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .comments__title {
    font-size: 18px;
  }
}
.comments__counter {
  flex-shrink: 0;
  min-width: 38px;
  margin-right: 12px;
  padding: 0 6px;
  border-radius: 8px;
  background: #CABDFF;
  text-align: center;
  line-height: 36px;
}

body.dark .comments__counter {
  color: #1A1D1F;
}

.comments__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.comments__close .icon {
  width: 20px;
  height: 20px;
  fill: #33383F;
  transition: fill 0.2s;
}

body.dark .comments__close .icon {
  fill: #FCFCFC;
}

.comments__close:hover .icon {
  fill: #2A85FF;
}

.comments .editor {
  margin-top: 24px;
}

.comments__list {
  margin-top: 40px;
}

@media only screen and (max-width: 767px) {
  .comments__list {
    margin-top: 24px;
  }
}
.comments__item, .comments__answer {
  display: flex;
}

.comments__item .comments__avatar {
  width: 48px;
  height: 48px;
}
.comments__item .comments__details {
  flex: 0 0 calc(100% - 48px);
  width: calc(100% - 48px);
  padding-left: 16px;
}
.comments__item:not(:first-child) {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #EFEFEF;
}

body.dark .comments__item:not(:first-child) {
  border-color: #272B30;
}

.comments__answer {
  margin-top: 32px;
  padding: 24px 0 0 64px;
  border-top: 1px solid #EFEFEF;
}

body.dark .comments__answer {
  border-color: #272B30;
}

.comments__answer .comments__avatar {
  width: 32px;
  height: 32px;
}
.comments__answer .comments__details {
  flex: 0 0 calc(100% - 32px);
  width: calc(100% - 32px);
  padding-left: 16px;
}

.comments__avatar {
  flex-shrink: 0;
}
.comments__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

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

.comments__author {
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comments__time {
  margin-left: 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #9A9FA5;
}

.comments__rating {
  display: flex;
  align-items: center;
  margin-left: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}
.comments__rating .icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  fill: #FFC554;
}

.comments__login {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  font-weight: 500;
  color: #6F767E;
}

.comments__content {
  margin-top: 12px;
  font-weight: 500;
  color: #33383F;
}

body.dark .comments__content {
  color: #FCFCFC;
}

.comments__content strong {
  font-weight: 600;
}

.comments__control {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.comments__favorite, .comments__reply {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.23077;
  color: #9A9FA5;
  transition: color 0.2s;
}

.comments__favorite .icon, .comments__reply .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  fill: #9A9FA5;
  transition: fill 0.2s;
}

.comments__favorite:hover, .comments__favorite.active {
  color: #1A1D1F;
}

.comments__reply:hover, .comments__reply.active {
  color: #1A1D1F;
}

.comments__favorite:hover .icon, .comments__favorite.active .icon {
  fill: #1A1D1F;
}

.comments__reply:hover .icon, .comments__reply.active .icon {
  fill: #1A1D1F;
}

body.dark .comments__favorite:hover, body.dark .comments__favorite.active {
  color: #FCFCFC;
}
body.dark .comments__reply:hover, body.dark .comments__reply.active {
  color: #FCFCFC;
}
body.dark .comments__favorite:hover .icon, body.dark .comments__favorite.active .icon {
  fill: #FCFCFC;
}
body.dark .comments__reply:hover .icon, body.dark .comments__reply.active .icon {
  fill: #FCFCFC;
}

.comments__favorite:not(:last-child), .comments__reply:not(:last-child) {
  margin-right: 24px;
}

.comments__favorite .icon:nth-child(2) {
  display: none;
}
.comments__favorite.active .icon:first-child {
  display: none;
}
.comments__favorite.active .icon:nth-child(2) {
  display: inline-block;
}

.share__head, .share__preview {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .share__head, body.dark .share__preview {
  border-color: #272B30;
}

.share__head {
  padding-right: 50px;
}

.share__title {
  position: 40px;
}

.share__field {
  position: relative;
  margin-bottom: 24px;
}

.share__icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  pointer-events: none;
}
.share__icon .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
}

.share__input {
  width: 100%;
  height: 40px;
  padding: 0 60px 0 44px;
  border-radius: 8px;
  background: #F4F4F4;
  font-size: 15px;
  font-weight: 600;
  color: #9A9FA5;
}

body.dark .share__input {
  background: #272B30;
}

.share__copy {
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 40px;
  color: #2A85FF;
  transition: opacity 0.2s;
}
.share__copy:hover {
  opacity: 0.8;
}

.share__preview img {
  width: 100%;
  border-radius: 12px;
}

.share__btns {
  display: flex;
  margin: 0 -8px;
}

.share__button {
  flex-grow: 1;
  margin: 0 8px;
}
.share__button .icon {
  width: 24px;
  height: 24px;
}

.stock__list {
  display: flex;
  margin: 0 -6px;
}

@media only screen and (max-width: 1023px) {
  .stock__list {
    margin: 0 -24px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .stock__list::-webkit-scrollbar {
    display: none;
  }
  .stock__list:before, .stock__list:after {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 1px;
  }
}
@media only screen and (max-width: 767px) {
  .stock__list {
    margin: 0 -16px;
  }
  .stock__list:before, .stock__list:after {
    width: 16px;
  }
}
.stock__item {
  display: block;
  flex: 0 0 calc(33.333% - 12px);
  width: calc(33.333% - 12px);
  margin: 0 6px;
  padding: 32px;
  border-radius: 12px;
  color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
  .stock__item {
    flex: 0 0 295px;
    width: 295px;
    margin: 0;
  }
  .stock__item:not(:last-child) {
    margin-right: 12px;
  }
}
@media only screen and (max-width: 767px) {
  .stock__item {
    flex: 0 0 285px;
    width: 285px;
  }
}
body.dark .stock__item {
  color: #EFEFEF;
}
body.dark .stock__item:nth-child(2n+1) {
  background: rgba(167, 170, 247, 0.15) !important;
}
body.dark .stock__item:nth-child(2n) {
  background: rgba(177, 229, 252, 0.1) !important;
}

.stock__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #1A1D1F;
}
.stock__icon .icon {
  width: 24px;
  height: 24px;
  stroke: #FCFCFC;
}

body.dark .stock__icon {
  background: #FCFCFC;
}
body.dark .stock__icon .icon {
  fill: #1A1D1F;
}

.stock__line {
  display: flex;
}

.stock__category {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #33383F;
}

body.dark .stock__category {
  color: #EFEFEF;
}

.stock .tooltip .icon {
  fill: #33383F;
}

body.dark .stock .tooltip .icon {
  fill: #EFEFEF;
}

.stock__counter {
  margin-bottom: 4px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.stock__indicator {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 4px;
  background: #FCFCFC;
  color: #6F767E;
}

body.dark .stock__indicator {
  background: #1A1D1F;
}

.stock__indicator span {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
}

.stock__chart {
  width: 80px;
  height: 80px;
  margin-left: auto;
}

.activity__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .activity__table {
    display: block;
  }
}
.activity__row {
  display: table-row;
}
.activity__row:first-child .activity__col {
  padding-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

@media only screen and (max-width: 767px) {
  .activity__row {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .activity__row:first-child {
    display: none;
  }
}
body.dark .activity__row:first-child .activity__col {
  border-color: #272B30;
}

.activity__row:not(:first-child) .activity__col {
  padding-top: 24px;
}
.activity__row:not(:first-child) .activity__col:first-child {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}
.activity__row:nth-child(2) .activity__col {
  padding-top: 32px;
}
.activity__row:not(:last-child):not(:first-child) .activity__col {
  padding-bottom: 16px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .activity__row:not(:first-child) .activity__col {
    padding: 0;
  }
}
@media only screen and (max-width: 1419px) {
  .activity__row:not(:first-child) .activity__col:first-child {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1023px) {
  .activity__row:not(:first-child) .activity__col:first-child {
    font-size: 14px;
  }
}
@media only screen and (max-width: 767px) {
  .activity__row:nth-child(2) .activity__col {
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .activity__row:not(:last-child):not(:first-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .activity__row:not(:last-child):not(:first-child) {
    border-color: #272B30;
  }
}
@media only screen and (max-width: 767px) {
  .activity__row:not(:last-child):not(:first-child) .activity__col {
    padding-bottom: 0;
    border: none;
  }
}
body.dark .activity__row:not(:last-child):not(:first-child) .activity__col {
  border-color: #272B30;
}

.activity__col {
  display: table-cell;
  vertical-align: middle;
}
.activity__col:not(:last-child) {
  padding-right: 16px;
}

@media only screen and (max-width: 767px) {
  .activity__col {
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .activity__col:not(:last-child) {
    margin-bottom: 8px;
    padding-right: 0;
  }
}
.activity__label {
  display: none;
}

@media only screen and (max-width: 767px) {
  .activity__label {
    display: block;
    flex-shrink: 0;
    width: 116px;
    padding-right: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
  }
}
.activity__item {
  display: inline-flex;
  align-items: center;
}

.activity__counter {
  padding: 0 6px;
  border-radius: 6px;
  cursor: pointer;
}

body.dark .activity__counter {
  color: #1A1D1F;
}

.activity__counter:hover + .balance {
  visibility: visible;
  opacity: 1;
}

.activity .balance {
  margin-left: 6px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

@media only screen and (max-width: 1259px) {
  .activity .balance {
    visibility: visible;
    opacity: 1;
    font-size: 11px;
  }
}
@media only screen and (max-width: 1023px) {
  .activity .balance {
    font-size: 12px;
  }
}
.activity__nav {
  display: none;
  margin-top: 32px;
}

@media only screen and (max-width: 767px) {
  .activity__nav {
    display: flex;
  }
}
.activity__link {
  flex: 1;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.activity__link:hover, .activity__link.active {
  color: #1A1D1F;
}

body.dark .activity__link:hover, body.dark .activity__link.active {
  color: #FCFCFC;
}

.activity__link.active {
  background: #EFEFEF;
}

body.dark .activity__link.active {
  background: #272B30;
}

.form {
  position: relative;
  width: 360px;
}

.form__input {
  width: 100%;
  height: 40px;
  padding: 0 20px 0 44px;
  background: #F4F4F4;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #1A1D1F;
}

body.dark .form__input {
  background: #272B30;
  color: #FCFCFC;
}

.form__input::-webkit-input-placeholder, .form__input::-moz-placeholder, .form__input:-ms-input-placeholder, .form__input::-ms-input-placeholder, .form__input::placeholder {
  color: #9A9FA5;
}

.form__button {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 44px;
  padding-right: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form__button .icon {
  width: 24px;
  height: 24px;
  stroke: #6F767E;
  stroke-width: 4;
  transition: fill 0.2s;
}
.form__button:hover .icon {
  fill: #2A85FF;
}

.checkbox {
  display: block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.checkbox__input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.checkbox__inner {
  display: flex;
}
.checkbox__inner:hover .checkbox__tick {
  border-color: #2A85FF;
}

.checkbox__tick {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(111, 118, 126, 0.4);
  transition: all 0.2s;
}
.checkbox__tick:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='12' viewBox='0 0 17 12'%3E%3Cpath d='M16.707.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0L.293 6.707A1 1 0 0 1 .735 5.02a1 1 0 0 1 .973.273l3.586 3.586a1 1 0 0 0 1.414 0L15.293.293a1 1 0 0 1 1.414 0z' fill='%23fcfcfc' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
  opacity: 0;
  transition: opacity 0.2s;
}

.checkbox__text {
  flex-grow: 1;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.71429;
  font-weight: 600;
  color: #1A1D1F;
}

body.dark .checkbox__text {
  color: #FCFCFC;
}

.checkbox__input:checked + .checkbox__inner .checkbox__tick {
  background: #2A85FF;
  border-color: #2A85FF;
}
.checkbox__input:checked + .checkbox__inner .checkbox__tick:before {
  opacity: 1;
}

.checkbox_reverse .checkbox__inner {
  flex-direction: row-reverse;
}
.checkbox_reverse .checkbox__text {
  padding: 0 16px 0 0;
}

.radio {
  display: block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.radio__input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.radio__inner {
  display: flex;
}
.radio__inner:hover .radio__tick {
  border-color: #2A85FF;
}

.radio__tick {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(111, 118, 126, 0.4);
  transition: all 0.2s;
}
.radio__tick:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FCFCFC;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 2px #DEDEDE;
  transition: transform 0.2s;
}

.radio__text {
  flex-grow: 1;
  padding-right: 16px;
  line-height: 1.71429;
  color: #1A1D1F;
}

body.dark .radio__text {
  color: #FCFCFC;
}

.radio__input:checked + .radio__inner .radio__tick {
  background: #2A85FF;
  border-color: #2A85FF;
}
.radio__input:checked + .radio__inner .radio__tick:before {
  transform: translate(-50%, -50%) scale(1);
}

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

.control__button {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 24px;
  border-radius: 50%;
  background: #FCFCFC;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1023px) {
  .control__button {
    display: none;
  }
}
body.dark .control__button {
  background: #1A1D1F;
}

.control__button .icon {
  width: 20px;
  height: 20px;
  transition: fill 0.2s;
}

.control .actions__button {
  width: 36px;
  height: 36px;
  background: #FCFCFC;
}

body.dark .control .actions__button {
  background: #1A1D1F;
}

.control .actions__button:hover .icon {
  fill: #2A85FF;
}
.control .actions__button .icon {
  fill: #6F767E;
}
.control .actions.active .actions__button {
  background: #FCFCFC;
}

body.dark .control .actions.active .actions__button {
  background: #1A1D1F;
}

.control .actions__body:before {
  right: 19px;
}

body.dark .control .actions__body:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23111315'/%3E%3C/svg%3E");
}

.control .actions__option:first-child, .control .actions__option:nth-child(2) {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .control .actions__option:first-child, .control .actions__option:nth-child(2) {
    display: flex;
  }
}
.products__head {
  display: flex;
  align-items: center;
  margin-bottom: 44px;
}

@media only screen and (max-width: 1023px) {
  .products__head {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .products__head {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 1419px) {
  .products__head .form {
    width: 300px;
  }
}
@media only screen and (max-width: 1023px) {
  .products__head .form {
    width: 250px;
  }
}
@media only screen and (max-width: 767px) {
  .products__head .form {
    width: 100%;
    margin: 16px 0 0;
  }
}
.products__title {
  margin-right: 24px;
}

@media only screen and (max-width: 767px) {
  .products__title {
    margin-right: 0;
  }
}
.products__indicators {
  display: none;
  align-items: center;
}
.products__indicators .products__button {
  margin-right: 8px;
}

@media only screen and (max-width: 1023px) {
  .products__indicators {
    display: none;
  }
}
.products__counter {
  margin-left: 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.84615;
}

.products__select {
  min-width: 154px;
  margin-left: auto;
}

@media only screen and (max-width: 767px) {
  .products__select {
    width: 100%;
    margin-top: 16px;
  }
}
@media only screen and (max-width: 767px) {
  body.dark .products__select .select {
    background: #272B30;
    box-shadow: inset 0 0 0 2px #272B30;
    color: #FCFCFC;
  }
}
.products__nav {
  display: flex;
  margin-left: auto;
}

@media only screen and (max-width: 1023px) {
  .products__nav {
    display: none;
  }
}
.products__link {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.products__link:hover, .products__link.active {
  color: #1A1D1F;
}

body.dark .products__link:hover, body.dark .products__link.active {
  color: #FCFCFC;
}

.products__link.active {
  background: #EFEFEF;
}

body.dark .products__link.active {
  background: #272B30;
}

.products__link:not(:last-child) {
  margin-right: 8px;
}

.products__tab {
  display: none;
}

.products__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
  .products__wrapper {
    margin: 0;
  }
}
.products__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .products__table {
    display: block;
  }
}
.products__row {
  display: table-row;
}
.products__row:first-child .products__col {
  padding: 0 12px 16px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.products__row:not(:first-child) {
  transition: background 0.2s;
}
.products__row:not(:first-child) .products__col:not(:first-child):not(:nth-child(2)) {
  padding-top: 20px;
}

@media only screen and (max-width: 1023px) {
  .products__row {
    position: relative;
    display: block;
  }
}
@media only screen and (max-width: 1023px) {
  .products__row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .products__row:not(:first-child) .products__col:not(:first-child):not(:nth-child(2)) {
    padding-top: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .products__row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .products__row:not(:first-child):hover {
    background: #272B30;
  }

  .products__row:not(:first-child):hover .products__number, .products__row:not(:first-child):hover .products__status {
    background: #FCFCFC;
  }

  body.dark .products__row:not(:first-child):hover .products__number {
    background: #33383F;
  }
  body.dark .products__row:not(:first-child):hover .products__status {
    background: #1A1D1F;
  }

  .products__row:not(:first-child):hover .control {
    visibility: visible;
    opacity: 1;
  }
}
@media only screen and (max-width: 1023px) {
  .products__row:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .products__row:not(:last-child) {
    border-color: #272B30;
  }
}
.products__col {
  position: relative;
  display: table-cell;
  padding: 16px 12px;
  vertical-align: top;
  color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
  .products__col {
    position: static;
    display: flex;
    align-items: center;
    padding: 0;
  }
}
body.dark .products__col {
  color: #FCFCFC;
}

.products__col:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

body.dark .products__col:after {
  background: #272B30;
}

@media only screen and (max-width: 1023px) {
  .products__col:after {
    display: none;
  }
}
.products__col:first-child {
  width: 56px;
  border-radius: 8px 0 0 8px;
  font-size: 0;
}
.products__col:first-child:after {
  left: 12px;
}
.products__col:last-child {
  border-radius: 0 8px 8px 0;
}
.products__col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 1023px) {
  .products__col:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .products__col:nth-child(4) {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .products__col:not(:first-child):not(:last-child) {
    margin-bottom: 12px;
  }
}
.products__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1A1D1F;
  transition: color 0.2s;
}

@media only screen and (max-width: 767px) {
  .products__item {
    align-items: stretch;
  }
}
body.dark .products__item {
  color: #FCFCFC;
}

.products__item:hover, body.dark .products__item:hover {
  color: #2A85FF;
}

.products__preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.products__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 1023px) {
  .products__preview {
    width: 104px;
  }
}
.products__subtitle {
  max-width: 170px;
  margin-bottom: 4px;
}

@media only screen and (max-width: 1023px) {
  .products__subtitle {
    max-width: 100%;
    margin-bottom: 8px;
    padding-right: 42px;
    font-size: 18px;
    line-height: 1.33333;
    letter-spacing: -0.02em;
  }
}
@media only screen and (max-width: 1023px) {
  .products__wrap {
    display: flex;
    align-items: center;
  }
}
.products__category {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

@media only screen and (max-width: 1023px) {
  .products__category {
    font-size: 15px;
  }
}
body.dark .products__category {
  color: #9A9FA5;
}

.products__sales {
  display: inline-flex;
  align-items: center;
}

.products__number, .products__price {
  display: inline-block;
  padding: 0 8px;
  border-radius: 6px;
  background: #EFEFEF;
  transition: background 0.2s;
}

body.dark .products__number, body.dark .products__price {
  background: #33383F;
  color: #FCFCFC;
}

.products__price {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .products__price {
    display: inline-block;
    margin-right: 12px;
  }
}
.products .balance {
  margin-left: 8px;
}

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

.products__line {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 8px;
  margin-left: 8px;
}

@media only screen and (max-width: 1259px) {
  .products__line {
    width: 36px;
  }
}
@media only screen and (max-width: 1023px) {
  .products__line {
    width: 44px;
  }
}
.products__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 2px;
}

.products__progress_views {
  background: #2A85FF;
}

.products__progress_likes {
  background: #8E59FF;
}

.products__status {
  transition: background 0.2s;
}

.products .control {
  position: absolute;
  left: 12px;
  bottom: 16px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

@media only screen and (max-width: 1023px) {
  .products .control {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    visibility: visible;
    opacity: 1;
  }
}
.products__label {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .products__label {
    display: block;
    flex-shrink: 0;
    width: 124px;
    padding-right: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
  }
}
.products__foot {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.products__arrow {
  width: 40px;
  height: 40px;
  border: 2px solid #EFEFEF;
  border-radius: 50%;
  transition: border-color 0.2s;
}

body.dark .products__arrow {
  border-color: transparent;
}

.products__arrow .icon {
  width: 20px;
  height: 20px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.products__arrow:hover {
  border-color: #EFEFEF;
}
.products__arrow:hover .icon {
  fill: #1A1D1F;
}

body.dark .products__arrow:hover {
  border-color: #272B30;
}
body.dark .products__arrow:hover .icon {
  fill: #FCFCFC;
}

.products__arrow:not(:last-child) {
  margin-right: 8px;
}

.statistics__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
  .statistics__wrapper {
    margin: 0;
  }
}
.statistics__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .statistics__table {
    display: block;
  }
}
.statistics__row {
  display: table-row;
}
.statistics__row:first-child .statistics__col {
  padding: 0 12px 16px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.statistics__row:not(:first-child) {
  transition: background 0.2s;
}

@media only screen and (max-width: 1023px) {
  .statistics__row {
    display: block;
  }
}
@media only screen and (max-width: 1023px) {
  .statistics__row:first-child {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .statistics__row:first-child .statistics__col {
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .statistics__row:first-child .statistics__col:nth-child(2) {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .statistics__row:not(:first-child) {
    position: relative;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .statistics__row:not(:first-child) {
    border-color: #272B30;
  }
}
@media only screen and (min-width: 1024px) {
  .statistics__row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .statistics__row:not(:first-child):hover {
    background: #272B30;
  }

  .statistics__row:not(:first-child):hover .control {
    visibility: visible;
    opacity: 1;
  }
}
.statistics__col {
  position: relative;
  display: table-cell;
  vertical-align: top;
  padding: 16px 12px;
  color: #1A1D1F;
}
.statistics__col:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .statistics__col {
    position: static;
    display: block;
    padding: 0;
  }
}
body.dark .statistics__col:after {
  background: #272B30;
}

@media only screen and (max-width: 1023px) {
  .statistics__col:after {
    display: none;
  }
}
.statistics__col:first-child {
  width: 56px;
  border-radius: 8px 0 0 8px;
  font-size: 0;
}
.statistics__col:first-child:after {
  left: 12px;
}
.statistics__col:nth-child(2) {
  width: 300px;
}
.statistics__col:last-child {
  border-radius: 0 8px 8px 0;
}
.statistics__col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 1023px) {
  .statistics__col:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .statistics__col:nth-child(2) {
    width: 100%;
  }
}
.statistics__control {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1023px) {
  .statistics__control {
    display: block;
  }
}
.statistics__info {
  margin-right: auto;
}

@media only screen and (max-width: 1023px) {
  .statistics__info {
    display: none;
  }
}
.statistics__indicators {
  display: flex;
  flex-wrap: wrap;
  margin: -8px 0 0 -24px;
}
.statistics__indicators .statistics__legend {
  position: relative;
  margin: 8px 0 0 24px;
  padding-left: 24px;
}
.statistics__indicators .statistics__color {
  position: absolute;
  top: 2px;
  left: 0;
}

@media only screen and (max-width: 1419px) {
  .statistics__indicators {
    margin-left: -12px;
  }
}
@media only screen and (max-width: 1023px) {
  .statistics__indicators {
    margin-left: -24px;
  }
}
@media only screen and (max-width: 1419px) {
  .statistics__indicators .statistics__legend {
    margin-left: 12px;
  }
}
@media only screen and (max-width: 1259px) {
  .statistics__indicators .statistics__legend {
    padding-left: 18px;
  }
}
@media only screen and (max-width: 1023px) {
  .statistics__indicators .statistics__legend {
    margin-left: 24px;
    padding-left: 24px;
  }
}
.statistics__color {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.statistics__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1A1D1F;
  transition: color 0.2s;
}

@media only screen and (max-width: 767px) {
  .statistics__item {
    align-items: stretch;
  }
}
body.dark .statistics__item {
  color: #FCFCFC;
}

.statistics__item:hover, body.dark .statistics__item:hover {
  color: #2A85FF;
}

.statistics__preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.statistics__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 1023px) {
  .statistics__preview {
    width: 104px;
  }
}
.statistics__product {
  max-width: 170px;
  margin-bottom: 4px;
}

@media only screen and (max-width: 1023px) {
  .statistics__product {
    max-width: 100%;
    margin-bottom: 8px;
    padding-right: 42px;
    font-size: 18px;
    line-height: 1.33333;
    letter-spacing: -0.02em;
  }
}
.statistics__date {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.statistics__line {
  display: flex;
  margin: 11px 0 0 -1px;
}

@media only screen and (max-width: 1023px) {
  .statistics__line {
    margin-top: 20px;
  }
}
.statistics__box {
  position: relative;
  height: 12px;
  margin-left: 1px;
  border-radius: 2px;
  cursor: pointer;
}
.statistics__box:hover .statistics__tooltip {
  visibility: visible;
  opacity: 1;
}

.statistics__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 8px;
  background: #272B30;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 0px 1px #000000;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}

.statistics__subtitle {
  margin-bottom: 8px;
  white-space: nowrap;
  color: #EFEFEF;
}

.statistics__tooltip .statistics__legend {
  display: flex;
  align-items: center;
  color: #FCFCFC;
}
.statistics__tooltip .statistics__color {
  flex-shrink: 0;
  margin-right: 4px;
}

.statistics .control {
  position: absolute;
  left: 12px;
  bottom: 16px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

@media only screen and (max-width: 1023px) {
  .statistics .control {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    visibility: visible;
    opacity: 1;
  }
}
.statistics__foot {
  margin-top: 20px;
  text-align: center;
}

@media only screen and (max-width: 1023px) {
  .statistics__foot {
    margin-top: 0;
  }
}
.switch {
  display: inline-block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 0;
}

.switch__input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.switch__input:checked + .switch__inner .switch__box {
  background: #2A85FF;
}
.switch__input:checked + .switch__inner .switch__box:before {
  transform: translate(24px, -50%);
  background: #FCFCFC;
}

.switch__inner {
  position: relative;
  display: inline-block;
  transition: all 0.2s;
}

.switch__box {
  position: relative;
  display: block;
  width: 48px;
  height: 24px;
  background: #F4F4F4;
  border-radius: 12px;
  transition: all 0.2s;
}

body.dark .switch__box {
  background: #111315;
}

.switch__box:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FCFCFC;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

body.dark .switch__box:before {
  background: #272B30;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 1px 2px rgba(255, 255, 255, 0.1), inset 0px -1px 1px rgba(0, 0, 0, 0.1);
}

.field__label {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #33383F;
}

body.dark .field__label {
  color: #EFEFEF;
}

.field .tooltip {
  position: relative;
  top: -1px;
}
.field .tooltip .icon {
  fill: #9A9FA5;
}

.field__wrap {
  position: relative;
}

.field__input {
  width: 100%;
  height: 48px;
  padding: 0 10px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #F4F4F4;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #1A1D1F;
  transition: all 0.2s;
}

body.dark .field__input {
  border-color: #272B30;
  background: #272B30;
  color: #FCFCFC;
}

body.dark .field__input::-webkit-input-placeholder, body.dark .field__input::-moz-placeholder, body.dark .field__input:-ms-input-placeholder, body.dark .field__input::-ms-input-placeholder, body.dark .field__input::placeholder {
  color: #9A9FA5;
}

.field__input:focus {
  border-color: #9A9FA5;
  background: #FFFFFF;
}

body.dark .field__input:focus {
  border-color: #33383F;
  background: #111315;
}

.field__icon, .field__copy {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
}

.field__icon .icon, .field__copy .icon {
  width: 24px;
  height: 24px;
}

.field__icon {
  left: 0;
  pointer-events: none;
}
.field__icon .icon {
  fill: #6F767E;
}

.field__copy {
  right: 0;
}
.field__copy .icon {
  fill: #6F767E;
  transition: fill 0.2s;
}
.field__copy:hover .icon {
  fill: #2A85FF;
}

.field__currency {
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  padding-top: 1px;
  border-radius: 10px 0 0 10px;
  background: #F4F4F4;
  color: #1A1D1F;
}

body.dark .field__currency {
  background: #272B30;
  color: #6F767E;
}

.field_icon .field__input {
  padding-left: 48px;
}

.field_currency .field__input {
  padding-left: 58px;
  background: none;
  border-color: #EFEFEF;
}
.field_currency .field__input:focus {
  border-color: #9A9FA5;
}

body.dark .field_currency .field__input {
  border-color: #272B30;
}
body.dark .field_currency .field__input:focus {
  border-color: #33383F;
}

.field_copy .field__input {
  padding-right: 48px;
}

.field.error .field__icon .icon {
  fill: #FF6A55;
}
.field.error .field__wrap:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a1 1 0 0 0 1-1V9a1 1 0 1 0-2 0v5a1 1 0 0 0 1 1zm7.675 2.504L12.87 5.563a1 1 0 0 0-1.738 0L4.327 17.504A1 1 0 0 0 5.196 19h13.61a1 1 0 0 0 .869-1.495zM14.607 4.573c-1.151-2.019-4.062-2.019-5.213 0L2.589 16.514C1.45 18.514 2.894 21 5.196 21h13.61c2.302 0 3.746-2.486 2.606-4.485L14.607 4.573z' fill-rule='evenodd' fill='%23ff6a55'/%3E%3Cpath d='M13 17a1 1 0 1 1-2 0 1 1 0 1 1 2 0z' fill='%23ff6a55'/%3E%3C/svg%3E") no-repeat 50% 50%/24px auto;
}
.field.error .field__input {
  padding-right: 48px;
  background: rgba(255, 188, 153, 0.25);
  border-color: transparent;
  color: #FF6A55;
}

body.dark .field.error .field__input:focus {
  border-color: #FF6A55;
  color: #FF6A55;
}

.field.error .field__input::-webkit-input-placeholder, .field.error .field__input::-moz-placeholder, .field.error .field__input:-ms-input-placeholder, .field.error .field__input::-ms-input-placeholder, .field.error .field__input::placeholder {
  color: #FF6A55;
}
.field.success .field__wrap:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%2383bf6e'/%3E%3C/svg%3E") no-repeat 50% 50%/24px auto;
}
.field.success .field__input {
  padding-right: 48px;
  background: #FFFFFF;
  border-color: #9A9FA5;
}

body.dark .field.success .field__input {
  background: #111315;
}

.file__label {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #33383F;
}

body.dark .file__label {
  color: #EFEFEF;
}

.file .tooltip {
  position: relative;
  top: -1px;
}
.file .tooltip .icon {
  fill: #9A9FA5;
}

.file__wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border-radius: 12px;
  background: #F4F4F4;
  overflow: hidden;
}

body.dark .file__wrap {
  background: #272B30;
}

.file__input {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 340px;
  opacity: 0;
}
.file__input:hover + .file__box {
  border-color: #6F767E;
}

body.dark .file__input:hover + .file__box {
  border-color: #33383F;
}

.file__box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  border: 2px solid #EFEFEF;
  border-radius: 12px;
  background: #FCFCFC;
  box-shadow: 0px 12px 13px -6px rgba(0, 0, 0, 0.04);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  transition: border-color 0.2s;
}

body.dark .file__box {
  background: #1A1D1F;
  border-color: #272B30;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 12px 13px -6px rgba(0, 0, 0, 0.04), inset 0px 2px 4px #31353B;
}

.file__box .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

body.dark .file__box .icon {
  fill: #FCFCFC;
}

.create__row {
  display: flex;
}

@media only screen and (max-width: 1023px) {
  .create__row {
    display: block;
  }
}
.create__col:first-child {
  flex: 0 0 calc(100% - 340px);
  width: calc(100% - 340px);
  padding-right: 8px;
}
.create__col:nth-child(2) {
  flex-shrink: 0;
  width: 340px;
}

@media only screen and (max-width: 1259px) {
  .create__col:first-child {
    flex: 0 0 calc(100% - 296px);
    width: calc(100% - 296px);
  }
}
@media only screen and (max-width: 1023px) {
  .create__col:first-child {
    width: 100%;
    padding: 0;
  }
}
@media only screen and (max-width: 1259px) {
  .create__col:nth-child(2) {
    width: 296px;
  }
}
@media only screen and (max-width: 1023px) {
  .create__col:nth-child(2) {
    width: auto;
  }
}
.create__card:not(:last-child) {
  margin-bottom: 8px;
}

.create .card__button .icon {
  width: 24px;
  height: 24px;
}

.create__card > .field:not(:last-child) {
  margin-bottom: 32px;
}

.create .editor:not(:last-child), .create .file:not(:last-child) {
  margin-bottom: 32px;
}

@media only screen and (max-width: 1259px) {
  .create__card > .field:not(:last-child) {
    margin-bottom: 24px;
  }

  .create .editor:not(:last-child), .create .file:not(:last-child) {
    margin-bottom: 24px;
  }
}
.create__group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 0 -6px -12px;
}
.create__group .field {
  flex: 0 0 calc(50% - 12px);
  width: calc(50% - 12px);
  margin: 0 6px 12px;
}

@media only screen and (max-width: 767px) {
  .create__group {
    display: block;
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .create__group .field {
    width: 100%;
    margin: 12px 0 0;
  }
}
.create__line {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .create__line {
  border-color: #272B30;
}

.create__info {
  margin-right: auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #33383F;
}

body.dark .create__info {
  color: #EFEFEF;
}

.create .tooltip {
  position: relative;
  top: -1;
}
.create .tooltip .icon {
  fill: #9A9FA5;
}
.create .switch {
  margin-left: 12px;
}

.create__fieldset {
  display: flex;
  margin: 0 -6px;
}
.create__fieldset .field {
  flex: 0 0 calc(50% - 12px);
  width: calc(50% - 12px);
  margin: 0 6px;
}
.create__fieldset .field__label {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.33333;
  font-weight: 700;
  color: #6F767E;
}

.create__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #33383F;
}

body.dark .create__label {
  color: #EFEFEF;
}

.create__list {
  display: flex;
  flex-wrap: wrap;
  margin: -4px -16px 32px 0;
}
.create__list .checkbox {
  flex: 0 0 calc(33.33% - 16px);
  width: calc(33.33% - 16px);
  margin: 16px 16px 0 0;
}

@media only screen and (max-width: 1259px) {
  .create__list {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .create__list .checkbox {
    flex: 0 0 calc(50% - 16px);
    width: calc(50% - 16px);
  }
}
.create__top {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.create__top .create__label {
  margin-right: auto;
}

.create__counter {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.23077;
  color: #9A9FA5;
}
.create__counter span {
  color: #1A1D1F;
}

body.dark .create__counter span {
  color: #FCFCFC;
}

.create__preview {
  position: -webkit-sticky;
  position: sticky;
  top: 102px;
}
.create__preview .card__head {
  margin-bottom: 24px;
}

@media only screen and (max-width: 1339px) {
  .create__preview {
    top: 86px;
  }
}
@media only screen and (max-width: 1023px) {
  .create__preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    padding: 64px 16px;
    overflow: auto;
    background: #F4F4F4;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
  }

  body.dark .create__preview {
    background: #111315;
  }

  .create__preview.visible {
    visibility: visible;
    opacity: 1;
  }
}
@media only screen and (max-width: 1259px) {
  .create__preview .card {
    padding: 16px;
  }
}
@media only screen and (max-width: 1023px) {
  .create__preview .card {
    max-width: 340px;
    margin: auto;
  }
}
.create__close {
  position: absolute;
  top: 32px;
  left: 32px;
  display: none;
}
.create__close .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
}

@media only screen and (max-width: 1023px) {
  .create__close {
    display: inline-block;
  }
}
.create__photo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}
.create__photo img {
  width: 100%;
  border-radius: 12px;
}

.create__flex {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.create__subtitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .create__subtitle {
    font-size: 18px;
  }
}
.create__price {
  flex-shrink: 0;
  margin-left: 12px;
  padding: 0 8px;
  background: #B5E4CA;
  border-radius: 6px;
  line-height: 32px;
  font-weight: 700;
}

body.dark .create__price {
  color: #1A1D1F;
}

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

.create__avatar {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.create__avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.create__text {
  font-weight: 500;
  color: #6F767E;
}
.create__text span {
  font-weight: 600;
  color: #1A1D1F;
}

body.dark .create__text span {
  color: #FCFCFC;
}

.panel {
  position: relative;
  display: flex;
  align-items: center;
  margin: auto -40px -40px;
  padding: 60px 40px 20px;
}
.panel:before {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #FCFCFC;
  box-shadow: inset 1px 0px 0px #F4F4F4;
}

@media only screen and (max-width: 1339px) {
  .panel {
    margin: auto -24px -32px;
    padding: 44px 24px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .panel {
    display: block;
    margin: auto -16px -24px;
    padding: 40px 16px 16px;
  }
}
@media only screen and (max-width: 1339px) {
  .panel:before {
    top: 24px;
  }
}
body.dark .panel:before {
  background: #1A1D1F;
  box-shadow: inset 1px 0px 0px #111315;
}

.panel__info {
  margin-right: auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.panel__info .icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  fill: #6F767E;
}
.panel__info span {
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .panel__info {
    margin: 0 0 24px;
  }
}
body.dark .panel__info span {
  color: #FCFCFC;
}

.panel__note {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  background: #272B30;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  color: #F4F4F4;
}
.panel__note > .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: #83BF6E;
}
.panel__note span {
  position: relative;
  top: -2px;
  margin-left: 4px;
}

.panel .close {
  margin-left: 20px;
}
.panel .close .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.panel .close:hover .icon {
  fill: #FCFCFC;
}

.panel__btns {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.panel__btns .panel__button {
  margin-right: 8px;
}
.panel__btns .panel__button .icon {
  width: 24px;
  height: 24px;
}

@media only screen and (max-width: 767px) {
  .panel__btns .panel__button {
    flex-grow: 1;
  }
}
.panel .actions__button {
  width: 48px;
  height: 48px;
  border: 2px solid #EFEFEF;
  border-radius: 12px;
  transition: all 0.2s;
}
.panel .actions__button .icon {
  transform: rotate(90deg);
  fill: #6F767E;
}
.panel .actions__button:hover {
  background: #EFEFEF;
}
.panel .actions__button:hover .icon {
  fill: #1A1D1F;
}

body.dark .panel .actions__button {
  border-color: #272B30;
  background: transparent;
}

.panel .actions__option:first-child {
  display: none;
}
.panel .actions__body {
  right: 0;
}
.panel .actions__body:before {
  right: 14px;
}

@media only screen and (max-width: 1023px) {
  .panel .actions__option:first-child {
    display: flex;
  }
}
.loader {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  font-size: 4px;
  -webkit-animation: loader 1.1s infinite ease;
  animation: loader 1.1s infinite ease;
  text-indent: -9999em;
  transform: translateZ(0);
}

body.dark .loader, .loader_white {
  -webkit-animation-name: loader-white;
  animation-name: loader-white;
}

@-webkit-keyframes loader {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #777e90, 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.5), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.7), 1.8em -1.8em 0 0em #777e90, 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.5), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7), 2.5em 0em 0 0em #777e90, 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5), 2.5em 0em 0 0em rgba(119, 126, 144, 0.7), 1.75em 1.75em 0 0em #777e90, 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.5), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.7), 0em 2.5em 0 0em #777e90, -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.5), 0em 2.5em 0 0em rgba(119, 126, 144, 0.7), -1.8em 1.8em 0 0em #777e90, -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.5), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.7), -2.6em 0em 0 0em #777e90, -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.5), -2.6em 0em 0 0em rgba(119, 126, 144, 0.7), -1.8em -1.8em 0 0em #777e90;
  }
}
@keyframes loader {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #777e90, 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.5), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.7), 1.8em -1.8em 0 0em #777e90, 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.5), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7), 2.5em 0em 0 0em #777e90, 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5), 2.5em 0em 0 0em rgba(119, 126, 144, 0.7), 1.75em 1.75em 0 0em #777e90, 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.5), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.7), 0em 2.5em 0 0em #777e90, -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.5), 0em 2.5em 0 0em rgba(119, 126, 144, 0.7), -1.8em 1.8em 0 0em #777e90, -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.5), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.7), -2.6em 0em 0 0em #777e90, -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.5), -2.6em 0em 0 0em rgba(119, 126, 144, 0.7), -1.8em -1.8em 0 0em #777e90;
  }
}
@-webkit-keyframes loader-white {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes loader-white {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
.schedule__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
  .schedule__wrapper {
    margin: 0;
  }
}
.schedule__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .schedule__table {
    display: block;
  }
}
.schedule__row {
  display: table-row;
}
.schedule__row:first-child .schedule__col {
  padding: 0 12px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.schedule__row:not(:first-child) {
  transition: background 0.2s;
}

@media only screen and (max-width: 1023px) {
  .schedule__row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .schedule__row:not(:first-child) {
    position: relative;
    display: block;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .schedule__row:not(:first-child) {
    border-color: #272B30;
  }
}
@media only screen and (min-width: 1260px) {
  .schedule__row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .schedule__row:not(:first-child):hover {
    background: #272B30;
  }

  .schedule__row:not(:first-child):hover .schedule__control {
    visibility: visible;
    opacity: 1;
  }
}
.schedule__col {
  position: relative;
  display: table-cell;
  padding: 16px 12px;
  vertical-align: middle;
  color: #1A1D1F;
}
.schedule__col:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .schedule__col {
    display: block;
    position: static;
    padding: 0;
  }
}
body.dark .schedule__col:after {
  background: #272B30;
}

@media only screen and (max-width: 1023px) {
  .schedule__col:after {
    display: none;
  }
}
.schedule__col:first-child {
  width: 56px;
  border-radius: 8px 0 0 8px;
  font-size: 0;
}
.schedule__col:first-child:after {
  left: 12px;
}
.schedule__col:last-child {
  padding-right: 164px;
  border-radius: 0 8px 8px 0;
  color: #6F767E;
}
.schedule__col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 1023px) {
  .schedule__col:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .schedule__col:last-child {
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .schedule__col:not(:nth-child(2)) {
    display: none;
  }
}
.schedule__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s;
}

@media only screen and (max-width: 767px) {
  .schedule__item {
    align-items: stretch;
  }
}
body.dark .schedule__item {
  color: #FCFCFC;
}

.schedule__item:hover {
  color: #2A85FF;
}
.schedule__item .schedule__price, .schedule__item .schedule__empty, .schedule__item .schedule__date {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .schedule__item .schedule__price, .schedule__item .schedule__empty {
    display: inline-block;
  }
}
@media only screen and (max-width: 1023px) {
  .schedule__item .schedule__date {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #9A9FA5;
  }
  .schedule__item .schedule__date .icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    fill: #9A9FA5;
  }
}
.schedule__preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.schedule__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 1023px) {
  .schedule__preview {
    width: 104px;
    height: 116px;
  }
}
.schedule__product {
  max-width: 170px;
  margin-bottom: 4px;
  font-weight: 700;
}

@media only screen and (max-width: 1023px) {
  .schedule__product {
    max-width: 100%;
    margin-bottom: 8px;
    padding-right: 44px;
    font-size: 18px;
    line-height: 1.33333;
    letter-spacing: -0.02em;
  }
}
.schedule__link {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

@media only screen and (max-width: 1023px) {
  .schedule__link {
    display: none;
  }
}
.schedule__price, .schedule__empty {
  flex-shrink: 0;
  display: inline-block;
  padding: 0 8px;
  border-radius: 6px;
  line-height: 32px;
  font-weight: 700;
}

.schedule__price {
  background: #B5E4CA;
}

body.dark .schedule__price {
  color: #1A1D1F;
}

.schedule__empty {
  background: #EFEFEF;
}

body.dark .schedule__empty {
  background: #272B30;
  color: #FCFCFC;
}

.schedule__control {
  position: absolute;
  top: 50%;
  right: 12px;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}
.schedule__control .schedule__button {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
  .schedule__control {
    visibility: visible;
    opacity: 1;
  }
}
@media only screen and (max-width: 1023px) {
  .schedule__control {
    display: none;
  }
}
@media only screen and (max-width: 1259px) {
  .schedule__control .schedule__button {
    background: #EFEFEF;
  }
}
body.dark .schedule__control .schedule__button {
  background: #1A1D1F;
}

@media only screen and (max-width: 1259px) {
  body.dark .schedule__control .schedule__button {
    background: #272B30;
  }
}
.schedule__control .schedule__button .icon {
  width: 20px;
  height: 20px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.schedule__control .schedule__button:hover .icon {
  fill: #2A85FF;
}
.schedule__control .schedule__button:not(:last-child) {
  margin-right: 16px;
}

.schedule .actions {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .schedule .actions {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
  .schedule .actions.active {
    z-index: 10;
  }
}
body.dark .schedule .actions__button {
  background: none;
}

.schedule__foot {
  margin-top: 20px;
  text-align: center;
}
.schedule__foot .schedule__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 1023px) {
  .schedule__foot {
    margin-top: 0;
  }
}
.drafts .card__head {
  margin-bottom: 44px;
}
.drafts .card__title {
  margin-right: 24px;
}

@media only screen and (max-width: 1023px) {
  .drafts .card__head {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .drafts .card__head {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .drafts .form {
    width: 300px;
  }
}
@media only screen and (max-width: 767px) {
  .drafts .form {
    width: 100%;
    margin-top: 16px;
    order: 3;
  }
}
.drafts__tab {
  display: none;
}

.drafts__list {
  display: flex;
  flex-wrap: wrap;
  margin: -32px -12px 0;
}

@media only screen and (max-width: 639px) {
  .drafts__list {
    display: block;
    margin: 0 -8px;
  }
}
.drafts .summary {
  flex: 0 0 calc(33.333% - 24px);
  width: calc(33.333% - 24px);
  margin: 32px 12px 0;
}

@media only screen and (max-width: 1023px) {
  .drafts .summary {
    flex: 0 0 calc(50% - 24px);
    width: calc(50% - 24px);
  }
}
@media only screen and (max-width: 639px) {
  .drafts .summary {
    width: 100%;
    margin: 0;
  }
  .drafts .summary:not(:last-child) {
    margin-bottom: 32px;
  }
}
.drafts__foot {
  margin-top: 44px;
  text-align: center;
}
.drafts__foot .drafts__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 767px) {
  .drafts__foot {
    margin-top: 32px;
  }
}
.calendar__title {
  padding-right: 48px;
}

.calendar__note {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #EFEFEF;
  font-weight: 500;
  color: #6F767E;
}

body.dark .calendar__note {
  border-color: #272B30;
}

.calendar__list {
  margin-top: 24px;
}

.calendar__item {
  display: block;
}
.calendar__item.active .calendar__head {
  border-color: #2A85FF;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.05);
}
.calendar__item.active .calendar__head .icon {
  fill: #1A1D1F;
}

@media only screen and (max-width: 1259px) {
  .calendar__item {
    position: relative;
  }
}
@media only screen and (max-width: 767px) {
  .calendar__item {
    position: static;
  }
}
body.dark .calendar__item.active .calendar__head .icon {
  fill: #FCFCFC;
}

.calendar__item.active .calendar__body {
  visibility: visible;
  opacity: 1;
}
.calendar__item:not(:last-child) {
  margin-bottom: 8px;
}

.calendar__head {
  display: flex;
  min-height: 68px;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #EFEFEF;
  cursor: pointer;
  transition: all 0.2s;
}
.calendar__head .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 12px;
  fill: #6F767E;
  transition: fill 0.2s;
}

body.dark .calendar__head {
  border-color: #272B30;
}

.calendar__head:hover, body.dark .calendar__head:hover {
  border-color: #2A85FF;
}

.calendar__category {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #6F767E;
}

.calendar__value {
  width: 100%;
  height: 24px;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A1D1F;
}

body.dark .calendar__value {
  color: #FCFCFC;
}

.calendar__body {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  background: #FCFCFC;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
  z-index: 9999;
}

@media only screen and (max-width: 1259px) {
  .calendar__body {
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
  }
}
@media only screen and (max-width: 767px) {
  .calendar__body {
    top: 50%;
    left: 12px;
    right: 12px;
    transform: translateY(-50%);
  }
}
body.dark .calendar__body {
  background: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  body.dark .calendar__body {
    box-shadow: inset 0 0 0 1px #272B30;
  }
}
.calendar__item_date .calendar__body {
  padding: 10px 0 24px;
  text-align: center;
}

.calendar__item_time .calendar__body {
  width: 280px;
  padding: 24px;
}

@media only screen and (max-width: 1259px) {
  .calendar__item_time .calendar__body {
    width: auto;
  }
}
.calendar__date {
  padding: 24px 12px;
}

@media only screen and (max-width: 1259px) {
  .calendar__date {
    width: 100%;
    text-align: center;
  }
}
.calendar__time {
  max-height: 360px;
  overflow: auto;
}
.calendar__time li {
  padding: 0 12px;
  border-radius: 4px;
  line-height: 40px;
  color: #6F767E;
  cursor: pointer;
  transition: all 0.2s;
}
.calendar__time li:hover, .calendar__time li.active {
  background: #EFEFEF;
  color: #1A1D1F;
}

@media only screen and (max-width: 1259px) {
  .calendar__time {
    max-height: 240px;
  }
}
@media only screen and (max-width: 767px) {
  .calendar__time {
    max-height: 360px;
  }
}
body.dark .calendar__time li:hover, body.dark .calendar__time li.active {
  background: #272B30;
  color: #FCFCFC;
}

.calendar__foot {
  margin: 6px 20px 0;
  padding-top: 16px;
  border-top: 1px solid #EFEFEF;
  text-align: right;
}

body.dark .calendar__foot {
  border-color: #272B30;
}

.calendar__foot .calendar__button:not(:last-child) {
  margin-right: 8px;
}

.calendar__top {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 23px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .calendar__top {
  border-color: #272B30;
}

.calendar__subtitle {
  margin-right: auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .calendar__subtitle {
    font-size: 18px;
  }
}
.calendar__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
  font-size: 0;
}
.calendar__close .icon {
  width: 20px;
  height: 20px;
  fill: #33383F;
  transition: transform 0.2s;
}

body.dark .calendar__close {
  background: #272B30;
}
body.dark .calendar__close .icon {
  fill: #FCFCFC;
}

.calendar__close:hover .icon {
  transform: rotate(90deg);
}

.calendar__btns {
  margin-top: 24px;
  text-align: right;
}

.date-picker-wrapper {
  padding: 0;
  border: none;
  border-radius: 24px;
  box-shadow: 0px 40px 32px -24px rgba(15, 15, 15, 0.12);
  background: none;
  z-index: 20;
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

@media only screen and (max-width: 767px) {
  .date-picker-wrapper {
    width: 262px !important;
    padding: 0 19px;
  }
}
body.dark .date-picker-wrapper {
  background: none;
}

.date-picker-wrapper.single-month .month-wrapper {
  width: 252px !important;
  padding: 0 19px;
}
.date-picker-wrapper.single-month .month-wrapper table {
  width: 100% !important;
}
.date-picker-wrapper.single-date .day {
  border-radius: 50% !important;
}
.date-picker-wrapper.single-date .day.first-date-selected:before, .date-picker-wrapper.single-date .day.last-date-selected:before {
  display: none;
}
.date-picker-wrapper .month-wrapper {
  background: none;
  border: none;
  box-shadow: none;
}
.date-picker-wrapper .month-wrapper table {
  display: block;
}
.date-picker-wrapper .month-wrapper table thead, .date-picker-wrapper .month-wrapper table tbody {
  display: block;
  width: 100%;
}
.date-picker-wrapper .month-wrapper table tr {
  display: flex;
  align-items: center;
  height: 36px;
}
.date-picker-wrapper .month-wrapper table th, .date-picker-wrapper .month-wrapper table td {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 1;
  font-weight: 500;
}
.date-picker-wrapper .month-wrapper table thead tr:first-child {
  height: 36px;
}
.date-picker-wrapper .month-wrapper table thead tr:first-child th:first-child, .date-picker-wrapper .month-wrapper table thead tr:first-child th:nth-child(3) {
  flex: 0 0 24px;
}
.date-picker-wrapper .month-wrapper table .week-name, .date-picker-wrapper .month-wrapper table .caption {
  height: auto;
}
.date-picker-wrapper .month-wrapper table .week-name {
  height: 40px;
}
.date-picker-wrapper .month-wrapper table .week-name th {
  height: auto;
}
.date-picker-wrapper .month-wrapper table .day {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 0;
  transition: background 0.2s, color 0.2s;
}
.date-picker-wrapper .month-wrapper table .day.valid.toMonth {
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .date-picker-wrapper.single-month .month-wrapper {
    margin: 0 5px;
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .date-picker-wrapper.two-months .month-wrapper {
    display: flex;
    width: 600px !important;
  }
  .date-picker-wrapper.two-months .month-wrapper table {
    flex: 0 0 calc(50% - 48px);
    width: calc(50% - 48px);
    margin: 0 24px;
  }
}
@media only screen and (max-width: 767px) {
  .date-picker-wrapper .month-wrapper table {
    width: 100%;
  }
}
body.dark .date-picker-wrapper .month-wrapper table .day.valid.toMonth {
  color: #FCFCFC;
}

.date-picker-wrapper .month-wrapper table .day:hover {
  background: #6F767E;
  color: #F4F4F4 !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day:hover {
  background: #FCFCFC;
  color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.checked {
  background: #272B30;
  border-radius: 0;
}

body.dark .date-picker-wrapper .month-wrapper table .day.checked {
  background: #FCFCFC;
  color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.hovering {
  border-radius: 0;
  background: #EFEFEF !important;
  color: #1A1D1F !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day.hovering {
  background: #FCFCFC !important;
  color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.real-today {
  background: #2A85FF !important;
  color: #FCFCFC !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day.real-today {
  background: #2A85FF !important;
  color: #111315 !important;
}

.date-picker-wrapper .month-wrapper table .day.day.real-today.checked, .date-picker-wrapper .month-wrapper table .day.day.real-today.hovering {
  background: #2A85FF;
}
.date-picker-wrapper .month-wrapper table .day.first-date-selected, .date-picker-wrapper .month-wrapper table .day.last-date-selected {
  position: relative;
  border-radius: 50% !important;
  background: #1A1D1F !important;
  color: #FCFCFC !important;
}

body.dark .date-picker-wrapper .month-wrapper table .day.first-date-selected, body.dark .date-picker-wrapper .month-wrapper table .day.last-date-selected {
  background: #272B30 !important;
  color: #F4F4F4 !important;
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected:before, .date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 50%;
  background: #272B30;
}

body.dark .date-picker-wrapper .month-wrapper table .day.first-date-selected:before, body.dark .date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
  background: #FCFCFC;
}

.date-picker-wrapper .month-wrapper table .day.first-date-selected:before {
  right: 0;
}
.date-picker-wrapper .month-wrapper table .day.last-date-selected:before {
  left: 0;
}
.date-picker-wrapper .month-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .date-picker-wrapper .month-name {
    font-size: 18px;
  }
}
body.dark .date-picker-wrapper .month-name {
  color: #FCFCFC;
}

.date-picker-wrapper .month-element:not(:last-child) {
  margin-right: 5px;
}
.date-picker-wrapper .week-name {
  font-size: 14px;
  color: #6F767E;
}
.date-picker-wrapper .week-name th {
  font-weight: 500;
  text-transform: capitalize;
}
.date-picker-wrapper .gap {
  display: none;
}
.date-picker-wrapper table .caption .next:hover, .date-picker-wrapper table .caption .prev:hover {
  background: none;
}
.date-picker-wrapper table .caption .next:hover path, .date-picker-wrapper table .caption .prev:hover path {
  fill: #2A85FF;
}
.date-picker-wrapper .footer {
  display: none;
}

.released__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
  .released__wrapper {
    margin: 0;
  }
}
.released__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .released__table {
    display: block;
  }
}
.released__row {
  display: table-row;
}
.released__row:first-child .released__col {
  padding: 0 12px 16px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.released__row:not(:first-child) {
  transition: background 0.2s;
}
.released__row:not(:first-child) .released__col:not(:first-child):not(:nth-child(2)) {
  padding-top: 20px;
}

@media only screen and (max-width: 1023px) {
  .released__row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .released__row:not(:first-child) {
    position: relative;
    display: block;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .released__row:not(:first-child) {
    border-color: #272B30;
  }
}
@media only screen and (min-width: 1024px) {
  .released__row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .released__row:not(:first-child):hover {
    background: #272B30;
  }

  .released__row:not(:first-child):hover .number, .released__row:not(:first-child):hover .status {
    background: #FCFCFC;
  }

  body.dark .released__row:not(:first-child):hover .number, body.dark .released__row:not(:first-child):hover .status {
    background: #33383F;
  }
}
@media only screen and (max-width: 1023px) {
  .released__row:not(:first-child) .released__col:not(:first-child):not(:nth-child(2)) {
    padding-top: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .released__row:last-child .released__col {
    padding-bottom: 0;
  }
  .released__row:last-child .released__col:after {
    display: none;
  }
}
.released__col {
  position: relative;
  display: table-cell;
  vertical-align: top;
  padding: 16px 12px;
  color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
  .released__col {
    position: static;
    display: flex;
    align-items: center;
    padding: 0;
  }
}
body.dark .released__col {
  color: #FCFCFC;
}

.released__col:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .released__col:after {
    display: none;
  }
}
body.dark .released__col:after {
  background: #272B30;
}

.released__col:first-child {
  width: 56px;
  border-radius: 8px 0 0 8px;
  font-size: 0;
}
.released__col:first-child:after {
  left: 12px;
}
.released__col:last-child {
  border-radius: 0 8px 8px 0;
}
.released__col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 1023px) {
  .released__col:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .released__col:nth-child(3) {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .released__col:not(:first-child):not(:last-child) {
    margin-bottom: 12px;
  }
}
.released__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1A1D1F;
  transition: color 0.2s;
}

@media only screen and (max-width: 767px) {
  .released__item {
    align-items: stretch;
  }
}
body.dark .released__item {
  color: #FCFCFC;
}

.released__item:hover, body.dark .released__item:hover {
  color: #2A85FF;
}

.released__preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.released__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 1023px) {
  .released__preview {
    width: 104px;
  }
}
.released__product {
  max-width: 170px;
  margin-bottom: 4px;
}

@media only screen and (max-width: 1023px) {
  .released__product {
    max-width: 100%;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.33333;
    letter-spacing: -0.02em;
  }
}
@media only screen and (max-width: 1023px) {
  .released__wrap {
    display: flex;
    align-items: center;
  }
}
.released__category {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

@media only screen and (max-width: 1023px) {
  .released__category {
    font-size: 15px;
  }
}
.released__sales {
  display: inline-flex;
  align-items: center;
}

.released__number, .released__price {
  display: inline-block;
  padding: 0 8px;
  border-radius: 6px;
  background: #EFEFEF;
  transition: background 0.2s;
}

body.dark .released__number, body.dark .released__price {
  background: #33383F;
}

.released__price {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .released__price {
    display: inline-block;
    margin-right: 12px;
  }
}
.released__status {
  transition: background 0.2s;
}

.released__rating {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}
.released__rating .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: #FFC554;
}

.released__rating_empty {
  white-space: nowrap;
  color: #6F767E;
}
.released__rating_empty .icon {
  fill: #6F767E;
}

.released__counter {
  margin-left: 4px;
  color: #6F767E;
}

.released .balance {
  margin-left: 8px;
}

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

.released__line {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 12px;
  margin-left: 8px;
}

.released__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 2px;
  background: #2A85FF;
}

.released__label {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .released__label {
    display: block;
    flex-shrink: 0;
    width: 124px;
    padding-right: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
  }
}
.released__foot {
  margin-top: 32px;
  text-align: center;
}
.released__foot .released__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 1023px) {
  .released__foot {
    margin-top: 24px;
  }
}
.recall .card__head {
  margin-bottom: 44px;
}
.recall .card__title {
  margin-right: 24px;
}

@media only screen and (max-width: 1023px) {
  .recall .card__head {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .recall .card__head {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .recall .form {
    width: 320px;
  }
}
@media only screen and (max-width: 767px) {
  .recall .form {
    width: 100%;
  }
}
@media only screen and (max-width: 1023px) {
  .recall .card__title {
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  .recall .card__title {
    margin: 0 0 16px;
  }
}
.recall__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
  .recall__wrapper {
    margin: 0;
  }
}
.recall__row {
  position: relative;
  display: flex;
}
.recall__row:after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 0;
  right: 12px;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .recall__row:after {
    display: none;
  }
}
body.dark .recall__row:after {
  background: #272B30;
}

.recall__row:first-child {
  align-items: center;
  padding: 0 12px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.recall__row:not(:first-child) {
  padding: 16px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}
.recall__row:not(:first-child).active .recall__control {
  display: none;
}
.recall__row:not(:first-child).active .answer {
  display: block !important;
}

@media only screen and (max-width: 1023px) {
  .recall__row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .recall__row:not(:first-child) {
    display: block;
    margin-bottom: 16px;
    padding: 0 0 16px;
    border-radius: 0;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .recall__row:not(:first-child) {
    border-color: #272B30;
  }
}
@media only screen and (min-width: 1260px) {
  .recall__row:not(:first-child):hover {
    background: #EFEFEF;
  }

  body.dark .recall__row:not(:first-child):hover {
    background: #272B30;
  }

  .recall__row:not(:first-child):hover .recall__control {
    visibility: visible;
    opacity: 1;
  }
}
@media only screen and (max-width: 1023px) {
  .recall__row:not(:first-child).active .recall__control {
    display: flex;
  }
}
@media only screen and (min-width: 1024px) {
  .recall__row:not(:first-child).active {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    background: #FFFFFF;
  }

  body.dark .recall__row:not(:first-child).active {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background: #272B30;
  }
}
.recall__col:first-child {
  flex-shrink: 0;
  width: 24px;
  font-size: 0;
}
.recall__col:nth-child(2) {
  flex-grow: 1;
  padding: 0 32px;
}
.recall__col:last-child {
  flex-shrink: 0;
  width: 268px;
}

@media only screen and (max-width: 1023px) {
  .recall__col:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .recall__col:nth-child(2) {
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .recall__col:last-child {
    display: none;
  }
}
.recall__item {
  display: flex;
  align-items: center;
}

.recall__preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.recall__preview img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  -o-object-fit: cover;
  object-fit: cover;
}

.recall__product {
  margin-bottom: 4px;
  font-weight: 700;
  color: #1A1D1F;
}

body.dark .recall__product {
  color: #FCFCFC;
}

.recall__category {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.recall__box {
  display: flex;
}

.recall__avatar {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 20px;
}
.recall__avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .recall__avatar {
    margin-right: 12px;
  }
}
.recall__details {
  flex-grow: 1;
}

.recall__line {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.recall__author {
  margin-right: auto;
  font-weight: 700;
}

.recall__time {
  margin-left: 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.recall__content {
  color: #33383F;
}

body.dark .recall__content {
  color: #FCFCFC;
}

.recall__control {
  display: flex;
  align-items: center;
  margin: 12px 0 -4px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

@media only screen and (max-width: 1259px) {
  .recall__control {
    visibility: visible;
    opacity: 1;
  }
}
.recall__button {
  flex-shrink: 0;
}
.recall__button .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.recall__button:hover .icon {
  fill: #2A85FF;
}
.recall__button.active .icon {
  fill: #1A1D1F;
}

body.dark .recall__button.active .icon {
  fill: #FCFCFC;
}

.recall .favorite .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
}
.recall .favorite:hover .icon, .recall .favorite.active .icon {
  fill: #2A85FF;
}

body.dark .recall .favorite.active .icon {
  fill: #2A85FF;
}

.recall__button:not(:last-child), .recall .favorite:not(:last-child) {
  margin-right: 32px;
}

.recall__foot {
  margin-top: 24px;
  text-align: center;
}
.recall__foot .recall__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 1023px) {
  .recall__foot {
    margin-top: 0;
  }
}
.smile {
  display: inline-block;
  position: relative;
}

.smile__head .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.smile__head:hover .icon {
  fill: #2A85FF;
}

.smile__body {
  position: absolute;
  width: 264px;
  padding: 4px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

@media only screen and (max-width: 767px) {
  .smile__body {
    max-width: 168px;
  }
}
body.dark .smile__body {
  background: #1A1D1F;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.3);
}

.smile__list {
  display: flex;
  flex-wrap: wrap;
}

.smile__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background 0.2s;
}
.smile__item img {
  width: 100%;
}
.smile__item:hover {
  background: #EFEFEF;
}

body.dark .smile__item:hover {
  background: #272B30;
}

.smile.active .smile__head .icon {
  fill: #1A1D1F;
}

body.dark .smile.active .smile__head .icon {
  fill: #FCFCFC;
}

.smile.active .smile__body {
  visibility: visible;
  opacity: 1;
}

.smile_right .smile__body {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .smile_right .smile__body {
    top: auto;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 0);
  }
}
.smile_up .smile__body {
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
}

@media only screen and (max-width: 767px) {
  .total .card__head {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .total .card__title {
    margin-bottom: 16px;
  }
}
.total__details {
  margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
  .total__details {
    margin-bottom: 24px;
    text-align: center;
  }
}
.total__title {
  margin-bottom: 4px;
}

.total__line {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 700;
  color: #9A9FA5;
}

@media only screen and (max-width: 767px) {
  .total__line {
    justify-content: center;
  }
}
.total .balance {
  margin-right: 4px;
}

.total__chart {
  width: auto;
  height: 238px;
  margin: 0 0 -10px -10px;
}

.total .users {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .total .users {
    margin-top: 24px;
    padding-top: 24px;
  }
}
body.dark .total .users {
  border-color: #272B30;
}

@media only screen and (max-width: 767px) {
  .promote .card__head .button {
    display: none;
  }
}
.promote__list {
  display: flex;
  flex-wrap: wrap;
  margin: -32px -16px 0;
}

@media only screen and (max-width: 767px) {
  .promote__list {
    display: block;
    margin: 0;
  }
}
.promote .summary {
  flex: 0 0 calc(50% - 32px);
  width: calc(50% - 32px);
  margin: 32px 16px 0;
}
.promote .media {
  margin: 32px 0 16px;
  padding-top: 32px;
  border-top: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .promote .summary {
    width: 100%;
    margin: 0;
  }
  .promote .summary:not(:last-child) {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .promote .media {
    margin-top: 24px;
    padding-top: 24px;
  }
}
body.dark .promote .media {
  border-color: #272B30;
}

.device__chart {
  width: auto;
  height: 230px;
}

@media only screen and (max-width: 1023px) {
  .device__chart {
    max-width: 310px;
    margin: 0 auto;
  }
}
.device__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}
.device__legend .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}

.device__indicator_mobile .icon {
  fill: #8E59FF;
}

.device__indicator_tablet .icon {
  fill: #83BF6E;
}

.device__indicator_desktop .icon {
  fill: #2A85FF;
}

.device__title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}

.device__percent {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .device__percent {
    font-size: 18px;
  }
}
.message__item {
  display: flex;
}
.message__item:not(:last-child) {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .message__item:not(:last-child) {
    margin-bottom: 24px;
  }
}
body.dark .message__item:not(:last-child) {
  border-color: #272B30;
}

.message__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 12px;
}
.message__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.message__details {
  flex-grow: 1;
}

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

.message__user {
  margin-right: auto;
}

.message__title {
  font-weight: 700;
}

.message__login {
  font-weight: 500;
  color: #9A9FA5;
}

.message__time {
  margin-left: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.message__content {
  font-weight: 500;
  color: #1A1D1F;
}

body.dark .message__content {
  color: #FCFCFC;
}

.message__button {
  width: 100%;
  margin-top: 32px;
}

.customer .card__head {
  margin-bottom: 44px;
}
.customer .card__head .form {
  margin-right: auto;
}
.customer .card__title {
  margin-right: 24px;
}
.customer .filters {
  margin-left: 8px;
}

@media only screen and (max-width: 1023px) {
  .customer .card__head {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .customer .card__head {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .customer .card__head .form {
    width: 250px;
  }
}
@media only screen and (max-width: 767px) {
  .customer .card__head .form {
    width: 100%;
    margin: 0 0 16px;
  }
}
@media only screen and (max-width: 767px) {
  .customer .card__title {
    margin: 0 0 16px;
  }
}
@media only screen and (max-width: 1023px) {
  .customer .filters {
    display: none;
  }
}
.customer__details {
  display: none;
}

.customer__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 1023px) {
  .customer__wrapper {
    margin: 0;
  }
}
.customer__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .customer__table {
    display: block;
  }
}
.customer__row {
  display: table-row;
}
.customer__row:first-child .customer__col {
  padding: 0 12px 16px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.customer__row:not(:first-child) {
  transition: all 0.2s;
}

@media only screen and (max-width: 1023px) {
  .customer__row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .customer__row:not(:first-child) {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EFEFEF;
  }
}
body.dark .customer__row:not(:first-child) {
  border-color: #272B30;
}

@media only screen and (min-width: 1024px) {
  .customer__row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .customer__row:not(:first-child):hover {
    background: #272B30;
  }

  .customer__row:not(:first-child):hover .price {
    background: #FCFCFC;
  }

  body.dark .customer__row:not(:first-child):hover .price {
    background: #111315;
  }
}
.customer__row:last-child .customer__col:after {
  display: none;
}
.customer__row.active {
  background: #EFEFEF !important;
}

body.dark .customer__row.active {
  background: #272B30 !important;
  box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px rgba(255, 255, 255, 0.08);
}

.customer__row.active .customer__col:first-child {
  border-radius: 12px 0 0 12px;
}
.customer__row.active .customer__col:nth-child(2) {
  padding-right: 40px;
  border-radius: 0 12px 12px 0;
}
.customer__row.active .customer__col:nth-child(2):before {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M8.293 17.293a1 1 0 0 0 1.414 1.414l-1.414-1.414zM15 12l.707.707a1 1 0 0 0 0-1.414L15 12zM9.707 5.293a1 1 0 1 0-1.414 1.414l1.414-1.414zm0 13.414l6-6-1.414-1.414-6 6 1.414 1.414zm6-7.414l-6-6-1.414 1.414 6 6 1.414-1.414z' fill='%236f767e'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}

.customer__col {
  position: relative;
  display: table-cell;
  vertical-align: top;
  padding: 16px 12px;
  color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
  .customer__col {
    display: block;
    padding: 0;
  }
}
body.dark .customer__col {
  color: #FCFCFC;
}

.customer__col:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .customer__col:after {
    display: none;
  }
}
body.dark .customer__col:after {
  background: #272B30;
}

.customer__col:first-child {
  width: 56px;
  border-radius: 8px 0 0 8px;
  font-size: 0;
}
.customer__col:first-child:after {
  left: 12px;
}
.customer__col:last-child {
  border-radius: 0 8px 8px 0;
}
.customer__col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 1023px) {
  .customer__col:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .customer__col:nth-child(5) {
    margin-left: auto;
    padding-left: 16px;
  }
}
@media only screen and (max-width: 1023px) {
  .customer__col:nth-child(3), .customer__col:nth-child(4), .customer__col:nth-child(6), .customer__col:nth-child(7) {
    display: none;
  }
}
.customer__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s;
}
.customer__item:hover {
  color: #2A85FF;
}
.customer__item .customer__email {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .customer__item .customer__email {
    display: block;
    font-size: 13px;
    line-height: 1;
    color: #9A9FA5;
  }
}
.customer__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}
.customer__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.customer__user {
  max-width: 160px;
  margin-bottom: 4px;
}

.customer__login {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

@media only screen and (max-width: 1023px) {
  .customer__login {
    display: none;
  }
}
body.dark .customer__login {
  color: #9A9FA5;
}

.customer__email {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}

@media only screen and (max-width: 1023px) {
  .customer__col > .customer__email {
    display: none;
  }
}
.customer__lifetime {
  display: inline-flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .customer__lifetime {
    flex-direction: column;
    align-items: flex-end;
  }
}
.customer__price {
  display: inline-block;
  padding: 0 8px;
  border-radius: 6px;
  background: #EFEFEF;
  transition: backround 0.2s;
}

body.dark .customer__price {
  background: #272B30;
}

.customer .balance {
  margin-left: 8px;
}

@media only screen and (max-width: 767px) {
  .customer .balance {
    margin: 4px 0 0;
  }
}
.customer__foot {
  margin-top: 32px;
  text-align: center;
}
.customer__foot .customer__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 1023px) {
  .customer__foot {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .customer.active .card__head {
    display: none;
  }
}
.customer.active .customer__inner {
  display: flex;
}
.customer.active .customer__container {
  flex-shrink: 0;
  width: 360px;
}
.customer.active .customer__row:hover {
  background: none;
}

@media only screen and (max-width: 1419px) {
  .customer.active .customer__container {
    width: 350px;
  }
}
@media only screen and (max-width: 1259px) {
  .customer.active .customer__container {
    width: 320px;
  }
}
@media only screen and (max-width: 1023px) {
  .customer.active .customer__container {
    display: none;
  }
}
body.dark .customer.active .customer__row:hover {
  background: none;
}

.customer.active .customer__col:not(:first-child):not(:nth-child(2)) {
  display: none;
}
.customer.active .customer__col:nth-child(2):after {
  right: 12px;
}
.customer.active .customer__details {
  display: block;
}

.filters {
  position: relative;
}

.filters__head .icon {
  width: 24px;
  height: 24px;
}

.filters__body {
  position: absolute;
  top: -24px;
  right: -24px;
  z-index: 30;
  width: 408px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  background: #FCFCFC;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

@media only screen and (max-width: 767px) {
  .filters__body {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    overflow: auto;
  }
}
body.dark .filters__body {
  background: #1A1D1F;
}

.filters__top {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.filters__title {
  margin-right: auto;
}

.filters__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
  margin-left: 24px;
}
.filters__close .icon {
  width: 20px;
  height: 20px;
  fill: #1A1D1F;
  transition: transform 0.2s;
}

body.dark .filters__close {
  background: #272B30;
}
body.dark .filters__close .icon {
  fill: #FCFCFC;
}

.filters__close:hover .icon {
  transform: rotate(90deg);
}

.filters .form {
  width: 100%;
  margin-bottom: 24px;
}

.filters__item:not(:last-child) {
  margin-bottom: 24px;
}

.filters__label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}

.filters .field__label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}
.filters .checkbox:not(:last-child) {
  margin-bottom: 12px;
}

.filters__range {
  margin: 20px 0;
}

.filters__box {
  position: relative;
}
.filters__box .select {
  padding-left: 48px;
}
.filters__box .icon {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 10;
  pointer-events: none;
  width: 24px;
  height: 24px;
  fill: #FFD88D;
}

.filters__btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.filters__btns .filters__button:not(:last-child) {
  margin-right: 12px;
}

.filters__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  background: rgba(244, 244, 244, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

body.dark .filters__overlay {
  background: rgba(39, 43, 48, 0.9);
}

.filters.active .filters__body, .filters.active .filters__overlay {
  visibility: visible;
  opacity: 1;
}

.details {
  position: relative;
  flex-grow: 1;
  padding: 60px 0 0 48px;
}

@media only screen and (max-width: 1419px) {
  .details {
    padding: 48px 0 0 48px;
  }
}
@media only screen and (max-width: 1023px) {
  .details {
    padding: 0;
  }
}
.details__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
}
.details__close .icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}

@media only screen and (max-width: 1023px) {
  .details__close {
    top: -90px;
    background: #FCFCFC;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  }
}
@media only screen and (max-width: 767px) {
  .details__close {
    top: -70px;
  }
}
body.dark .details__close {
  background: #272B30;
}
body.dark .details__close .icon {
  fill: #FCFCFC;
}

.details__close:hover .icon {
  transform: rotate(90deg);
}

.details__head, .details .editor {
  margin-bottom: 48px;
}

@media only screen and (max-width: 1339px) {
  .details__head, .details .editor {
    margin-bottom: 32px;
  }
}
.details__head {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .details__head {
    display: block;
  }
}
.details__user {
  display: flex;
  align-items: center;
  margin-right: 24px;
  color: white;
}
.details__user2 {
  display: flex;
  align-items: center;
  margin-right: 24px;
  color: black;
}

@media only screen and (max-width: 767px) {
  .details__user {
    margin: 0 0 24px;
    color: white;
  }
  .details__user2 {
    margin: 0 0 24px;
    color: black;
  }
}
.details__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 24px;
}
.details__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 1419px) {
  .details__avatar {
    width: 64px;
    height: 64px;
    margin-right: 16px;
  }
}
.details__man {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .details__man {
    font-size: 18px;
  }
}
.details__login {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #ffffff;
}

.details__btns {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.details__btns .details__button .icon {
  width: 24px;
  height: 24px;
}
.details__btns .details__button:not(:last-child) {
  margin-right: 8px;
}

@media only screen and (max-width: 767px) {
  .details__btns .details__button {
    flex-grow: 1;
  }
}
@media only screen and (max-width: 1419px) {
  .details__btns .details__button:first-child {
    width: 48px;
    padding: 0;
    font-size: 0;
  }
  .details__btns .details__button:first-child .icon:last-child {
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .details__btns .details__button:first-child {
    width: auto;
    padding: 0 20px;
    font-size: 15px;
  }
  .details__btns .details__button:first-child .icon:last-child {
    margin-left: 8px;
  }
}
.details__line {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #1A1D1F;
  transition: color 0.2s;
}
.details__line .icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  fill: #6F767E;
  transition: fill 0.2s;
}

body.dark .details__line {
  color: #FCFCFC;
}

.details__line:hover {
  color: #2A85FF;
}
.details__line:hover .icon {
  fill: #2A85FF;
}

.details__socials {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-width: 1px 0;
  border-style: solid;
  border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .details__socials {
    padding: 16px 0;
  }
}
body.dark .details__socials {
  border-color: #272B30;
}

.details__social .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.details__social:hover .icon {
  fill: #2A85FF;
}
.details__social:not(:last-child) {
  margin-right: 32px;
}

.details__line:not(:last-child), .details__socials:not(:last-child) {
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .details__line:not(:last-child), .details__socials:not(:last-child) {
    margin-bottom: 16px;
  }
}
.details .history {
  margin-top: 48px;
}

@media only screen and (max-width: 1339px) {
  .details .history {
    margin-top: 32px;
  }
}
.history__label {
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #33383F;
}

body.dark .history__label {
  color: #EFEFEF;
}

.history .tooltip {
  position: relative;
  top: -1;
}
.history .tooltip .icon {
  fill: #9A9FA5;
}

.history__inner {
  margin: 0 -12px;
}

@media only screen and (max-width: 767px) {
  .history__inner {
    margin: 0;
  }
}
.history__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .history__table {
    display: block;
  }
}
.history__row {
  display: table-row;
  cursor: pointer;
  transition: background 0.2s;
}
.history__row:first-child .history__col {
  padding-top: 0;
  padding-bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}

@media only screen and (max-width: 767px) {
  .history__row {
    display: block;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .history__row {
    border-color: #272B30;
  }
}
@media only screen and (max-width: 767px) {
  .history__row:first-child {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .history__row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .history__row:not(:first-child):hover {
    background: #272B30;
  }
}
.history__col {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  padding: 12px;
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .history__col {
    display: block;
    padding: 0;
  }
}
body.dark .history__col {
  color: #FCFCFC;
}

.history__col:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .history__col:after {
    display: none;
  }
}
body.dark .history__col:after {
  background: #272B30;
}

.history__col:first-child {
  border-radius: 8px 0 0 8px;
}
.history__col:first-child:after {
  left: 12px;
}
.history__col:last-child {
  border-radius: 0 8px 8px 0;
}
.history__col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 767px) {
  .history__col:not(:first-child) {
    display: none;
  }
}
.history__item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.history__item .history__price {
  display: none;
}

@media only screen and (max-width: 767px) {
  .history__item .history__price {
    display: inline-block;
    margin-top: 8px;
  }
}
.history__preview {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-right: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.history__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .history__preview {
    width: 104px;
    height: 112px;
    margin-right: 20px;
  }
}
.history__product {
  max-width: 200px;
  margin-bottom: 4px;
}

@media only screen and (max-width: 767px) {
  .history__product {
    max-width: 100%;
  }
}
.history__link {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.history__price {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: #B5E4CA;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}

body.dark .history__price {
  color: #1A1D1F;
}

.history__date {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}

.history__foot {
  margin-top: 20px;
  text-align: center;
}
.history__foot .history__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

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

@media only screen and (max-width: 767px) {
  .quality__list {
    display: block;
  }
}
.quality__item {
  display: block;
  padding: 0 32px 0 64px;
  color: #1A1D1F;
}

@media only screen and (max-width: 1339px) {
  .quality__item {
    padding: 0 32px 0 32px;
  }
}
@media only screen and (max-width: 1023px) {
  .quality__item {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .quality__item {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
  }
}
body.dark .quality__item {
  color: #FCFCFC;
}

.quality__item:not(:first-child) {
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .quality__item:not(:first-child) {
    margin-top: 24px;
    padding-top: 24px;
    border-width: 1px 0 0;
  }
}
body.dark .quality__item:not(:first-child) {
  border-color: #272B30;
}

.quality__item:first-child {
  padding-left: 0;
}
.quality__item:last-child {
  padding-right: 0;
}

.quality__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border-radius: 50%;
}
.quality__icon .icon {
  width: 24px;
  height: 24px;
  fill: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .quality__icon {
    margin: 0 0 0 auto;
  }
}
.quality__label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.quality .tooltip .icon {
  fill: #6F767E;
}

.quality__counter {
  min-width: 146px;
  margin-bottom: 8px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media only screen and (max-width: 1023px) {
  .quality__counter {
    min-width: auto;
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .quality__counter {
    font-size: 48px;
  }
}
.quality__indicator {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  color: #6F767E;
}

body.dark .quality__indicator {
  background: #272B30;
}

.quality__indicator span {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
}

.press .card__head {
  margin-bottom: 44px;
}
.press .card__button {
  margin-left: 16px;
}

@media only screen and (max-width: 1023px) {
  .press .card__head {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .press .card__head {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .press .card__head .card__title {
    width: 100%;
    margin: 0 0 16px;
  }
}
.press__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .press__table {
    display: block;
  }
}
.press__row {
  display: table-row;
}
.press__row:first-child .press__col {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}
.press__row:not(:first-child) .press__col:not(:first-child) {
  padding-top: 32px;
}
.press__row:not(:last-child) .press__col {
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .press__row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .press__row:not(:first-child) {
    display: block;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .press__row:not(:first-child) {
    border-color: #272B30;
  }
}
@media only screen and (max-width: 1023px) {
  .press__row:not(:first-child) .press__col:not(:first-child) {
    padding-top: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .press__row:not(:last-child) .press__col {
    border: none;
  }
}
body.dark .press__row:not(:last-child) .press__col {
  border-color: #272B30;
}

.press__col {
  display: table-cell;
  vertical-align: top;
  padding-top: 20px;
  padding-bottom: 20px;
}
.press__col:not(:last-child) {
  padding-right: 24px;
}

@media only screen and (max-width: 1023px) {
  .press__col {
    display: flex;
    align-items: center;
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .press__col:not(:last-child) {
    margin-bottom: 12px;
    padding-top: 0;
  }
}
.press__item {
  display: flex;
  align-items: center;
}

.press__preview {
  position: relative;
  flex-shrink: 0;
  width: 136px;
  height: 112px;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.press__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .press__preview {
    width: 112px;
    height: 96px;
    margin-right: 16px;
  }
}
.press__icon {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #FCFCFC;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

body.dark .press__icon {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.36);
  background: #111315;
}

.press__icon .icon {
  fill: #6F767E;
}

.press__post {
  max-width: 160px;
  margin-bottom: 12px;
  font-weight: 700;
}

@media only screen and (max-width: 1023px) {
  .press__post {
    max-width: 100%;
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .press__post {
    font-size: 15px;
  }
}
.press__socials {
  display: flex;
}

.press__social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
  transition: all 0.2s;
}
.press__social .icon {
  width: 20px;
  height: 20px;
  fill: #1A1D1F;
  transition: fill 0.2s;
}

body.dark .press__social {
  background: #272B30;
}
body.dark .press__social .icon {
  fill: #FCFCFC;
}

.press__social:hover, body.dark .press__social:hover {
  background: #2A85FF;
}
.press__social:hover .icon, body.dark .press__social:hover .icon {
  fill: #FCFCFC;
}

.press__social:not(:last-child) {
  margin-right: 12px;
}

.press__distribution {
  font-size: 15px;
  font-weight: 600;
  color: #1A1D1F;
}

.press__label {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .press__label {
    display: block;
    flex-shrink: 0;
    width: 156px;
    padding-right: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
  }
}
@media only screen and (max-width: 767px) {
  .press__label {
    width: 128px;
  }
}
@media only screen and (max-width: 1023px) {
  .press__cell {
    display: flex;
    align-items: center;
  }
}
.press__box {
  display: flex;
  align-items: center;
}

.press__number {
  padding: 0 7px;
  border-radius: 6px;
  background: #EFEFEF;
  line-height: 24px;
}

body.dark .press__number {
  background: #272B30;
}

.press__line {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 12px;
  margin-left: 8px;
}

@media only screen and (max-width: 1023px) {
  .press__line {
    margin-left: 12px;
  }
}
.press__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 2px;
}

.press__progress_red {
  background: #FF6A55;
}

.press__progress_green {
  background: #83BF6E;
}

.press__progress_blue {
  background: #2A85FF;
}

.press .balance {
  margin-top: 8px;
  padding: 4px;
  border-radius: 4px;
}

@media only screen and (max-width: 1023px) {
  .press .balance {
    margin: 0 0 0 4px;
  }
}
body.dark .press .balance {
  background: #272B30;
}

.press__foot {
  margin-top: 20px;
  text-align: center;
}
.press__foot .press__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 1023px) {
  .press__foot {
    margin-top: 0;
  }
}
.post__title {
  margin-bottom: 24px;
}

.post__list {
  display: flex;
  margin-bottom: 24px;
}

.post__avatar {
  position: relative;
  width: 48px;
  height: 48px;
}
.post__avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}
.post__avatar:not(:last-child) {
  margin-right: 24px;
}

.post__social {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #FCFCFC;
  background: #2A85FF;
}

body.dark .post__social {
  border-color: #1A1D1F;
}

.post__social .icon {
  width: 12px;
  height: 12px;
  fill: #FCFCFC;
}

.post__textarea {
  width: 100%;
  height: 132px;
  background: none;
  border: none;
  box-shadow: none;
  resize: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .post__textarea {
    font-size: 18px;
  }
}
body.dark .post__textarea {
  color: #FCFCFC;
}

body.dark .post__textarea::-webkit-input-placeholder, body.dark .post__textarea::-moz-placeholder, body.dark .post__textarea:-ms-input-placeholder, body.dark .post__textarea::-ms-input-placeholder, body.dark .post__textarea::placeholder {
  color: #9A9FA5;
}

.post__info {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .post__info {
    font-size: 18px;
  }
}
.post__preview img {
  width: 100%;
  border-radius: 8px;
}

.post__foot {
  display: flex;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #EFEFEF;
}

body.dark .post__foot {
  border-color: #272B30;
}

.post__files {
  display: flex;
  margin-right: auto;
}

.post__file {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.post__file input {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 120px;
  opacity: 0;
}
.post__file input:hover + .post__icon {
  background: #EFEFEF;
  cursor: pointer;
}
.post__file input:hover + .post__icon .icon {
  fill: #1A1D1F;
}

body.dark .post__file input:hover + .post__icon {
  background: #272B30;
}
body.dark .post__file input:hover + .post__icon .icon {
  fill: #FCFCFC;
}

.post__file.active .post__icon {
  background: #EFEFEF;
}
.post__file:not(:last-child) {
  margin-right: 16px;
}

.post__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: all 0.2s;
}
.post__icon .icon {
  width: 20px;
  height: 20px;
  fill: #6F767E;
  transition: fill 0.2s;
}

.post__button .icon {
  width: 24px;
  height: 24px;
}

.notification__row {
  display: flex;
  align-items: flex-start;
}

@media only screen and (max-width: 1023px) {
  .notification__row {
    display: block;
  }
}
.notification__col:first-child {
  flex: 0 0 calc(100% - 340px);
  width: calc(100% - 340px);
  padding-right: 8px;
}
.notification__col:nth-child(2) {
  flex-shrink: 0;
  width: 340px;
  position: -webkit-sticky;
  position: sticky;
  top: 102px;
}

@media only screen and (max-width: 1259px) {
  .notification__col:first-child {
    flex: 0 0 calc(100% - 300px);
    width: calc(100% - 300px);
  }
}
@media only screen and (max-width: 1023px) {
  .notification__col:first-child {
    width: 100%;
    padding-right: 0;
  }
}
@media only screen and (max-width: 1339px) {
  .notification__col:nth-child(2) {
    top: 86px;
  }
}
@media only screen and (max-width: 1259px) {
  .notification__col:nth-child(2) {
    width: 300px;
  }
}
@media only screen and (max-width: 1023px) {
  .notification__col:nth-child(2) {
    display: none;
  }
}
.notification .actions {
  margin-left: 16px;
}

body.dark .notification .actions__button {
  background: #272B30;
}

.notification .select {
  min-width: 105px;
}

.notification__item {
  position: relative;
  display: flex;
  padding: 12px;
  border-radius: 12px;
  transition: background 0.2s;
}
.notification__item:after {
  content: "";
  position: absolute;
  top: 18px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9A9FA5;
  transition: background 0.2s;
}
.notification__item.new:after {
  background: #2A85FF;
}
.notification__item:not(:last-child) {
  margin-bottom: 41px;
}
.notification__item:not(:last-child):before {
  content: "";
  position: absolute;
  top: calc(100% + 20px);
  left: 12px;
  right: 12px;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .notification__item {
    padding: 0;
    border-radius: 0;
  }
}
@media only screen and (min-width: 768px) {
  .notification__item:hover {
    background: #F4F4F4;
  }

  body.dark .notification__item:hover {
    background: #272B30;
  }
}
@media only screen and (max-width: 767px) {
  .notification__item:after {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .notification__item:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .notification__item:not(:last-child) {
    border-color: #272B30;
  }
}
@media only screen and (max-width: 767px) {
  .notification__item:not(:last-child):before {
    display: none;
  }
}
body.dark .notification__item:not(:last-child):before {
  background: #272B30;
}

.notification__avatar {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.notification__avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.notification__icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
}

body.dark .notification__icon {
  border-color: #1A1D1F;
}

.notification__icon img {
  width: 16px;
}

.notification__details {
  flex: 0 0 calc(100% - 64px);
  width: calc(100% - 64px);
  padding-left: 12px;
}

.notification__line {
  display: flex;
  align-items: center;
  padding-right: 24px;
}

.notification__subtitle {
  margin-right: 4px;
  font-weight: 700;
  color: #1A1D1F;
}

body.dark .notification__subtitle {
  color: #FCFCFC;
}

.notification__login {
  margin-right: auto;
  font-weight: 500;
  color: #9A9FA5;
}

.notification__time {
  margin-left: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.notification__content {
  font-weight: 500;
  color: #6F767E;
}
.notification__content strong {
  font-weight: 700;
  color: #1A1D1F;
}

body.dark .notification__content strong {
  color: #FCFCFC;
}

.notification__comment {
  margin-top: 8px;
  font-weight: 500;
}

.notification__control {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.notification__action {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1D1F;
  transition: color 0.2s;
}

body.dark .notification__action {
  color: #FCFCFC;
}

.notification__action:hover {
  color: #2A85FF;
}
.notification__action:not(:last-child) {
  margin-right: 24px;
}

.notification__action_favorite span {
  display: none;
}
.notification__action_favorite.active {
  color: #2A85FF;
}
.notification__action_favorite.active span {
  display: inline;
}

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

.notification .checkbox:not(:last-child), .notification .radio:not(:last-child) {
  margin-bottom: 16px;
}

.notification__btns {
  display: flex;
  margin: 32px -6px 0;
}
.notification__btns .notification__button {
  width: calc(50% - 12px);
  flex: 0 0 calc(50% - 12px);
  margin: 0 6px;
}

.notification__variants {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #EFEFEF;
}

body.dark .notification__variants {
  border-color: #272B30;
}

.notification__foot {
  margin-top: 32px;
  text-align: center;
}
.notification__foot .notification__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

.settings {
  display: flex;
  align-items: flex-start;
  padding: 24px;
  border-radius: 8px;
  background: #FCFCFC;
}

@media only screen and (max-width: 1023px) {
  .settings {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .settings {
    padding: 24px 16px;
  }
}
body.dark .settings {
  background: #1A1D1F;
}

.settings__menu {
  position: -webkit-sticky;
  position: sticky;
  top: 116px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 280px;
}

@media only screen and (max-width: 1259px) {
  .settings__menu {
    width: 210px;
  }
}
@media only screen and (max-width: 1023px) {
  .settings__menu {
    display: none;
  }
}
.settings__link {
  padding: 8px 16px;
  border-radius: 8px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.settings__link:not(:last-child) {
  margin-bottom: 8px;
}
.settings__link:hover, .settings__link.active {
  color: #1A1D1F;
}

body.dark .settings__link:hover, body.dark .settings__link.active {
  color: #FCFCFC;
}

.settings__link.active {
  background: #EFEFEF;
}

body.dark .settings__link.active {
  background: #272B30;
}

.settings__wrapper {
  flex-grow: 1;
  padding-left: 32px;
}
.settings__wrapper > .settings__button {
  margin-top: 48px;
}
.settings__wrapper > .select {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .settings__wrapper {
    padding-left: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .settings__wrapper > .settings__button {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 1023px) {
  .settings__wrapper > .select {
    display: block;
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .settings__wrapper > .select {
    margin-bottom: 24px;
  }
}
body.dark .settings__wrapper > .select {
  background: #272B30;
  box-shadow: 0 0 0 #272B30 inset;
}

.settings__item {
  position: relative;
}
.settings__item:not(:last-child) {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .settings__item:not(:last-child) {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }
}
body.dark .settings__item:not(:last-child) {
  border-color: #272B30;
}

.settings__title {
  margin-bottom: 32px;
  line-height: 40px;
}

.settings__anchor {
  position: absolute;
  top: -116px;
  left: 0;
  right: 0;
}

@media only screen and (max-width: 1023px) {
  .settings__anchor {
    top: -106px;
  }
}
@media only screen and (max-width: 767px) {
  .settings__anchor {
    top: -90px;
  }
}
.settings__profile {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

@media only screen and (max-width: 1023px) {
  .settings__profile {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .settings__profile > .settings__button {
    display: none;
  }
}
.settings__avatar {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  margin-right: 32px;
}
.settings__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

@media only screen and (max-width: 767px) {
  .settings__avatar {
    width: 80px;
    height: 80px;
    margin-right: 16px;
  }
}
.settings__remove {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FCFCFC;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
  font-size: 0;
}

@media only screen and (max-width: 767px) {
  .settings__remove {
    display: inline-block;
  }
}
.settings__file {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  overflow: hidden;
}
.settings__file input {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 160px;
  opacity: 0;
}
.settings__file .settings__button .icon {
  width: 24px;
  height: 24px;
}

@media only screen and (max-width: 767px) {
  .settings__file {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .settings__file .settings__button {
    padding: 0 10px;
  }
}
.settings__fieldset > .field:not(:last-child) {
  margin-bottom: 32px;
}

@media only screen and (max-width: 1023px) {
  .settings__fieldset > .field:not(:last-child) {
    margin-bottom: 24px;
  }
}
.settings__row {
  display: flex;
  margin: 0 -8px;
}
.settings__row .field {
  flex: 0 0 calc(50% - 16px);
  width: calc(50% - 16px);
  margin: 0 8px;
}
.settings__row:not(:last-child) {
  margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
  .settings__row {
    display: block;
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .settings__row .field {
    width: 100%;
    margin: 0;
  }
  .settings__row .field:not(:last-child) {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .settings__row:not(:last-child) {
    margin-bottom: 24px;
  }
}
.settings__line {
  display: flex;
  padding-bottom: 16px;
}
.settings__line:not(:last-child) {
  margin-bottom: 32px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1023px) {
  .settings__line:not(:last-child) {
    margin-bottom: 24px;
  }
}
body.dark .settings__line:not(:last-child) {
  border-color: #272B30;
}

.settings__label {
  margin-right: 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #33383F;
}

body.dark .settings__label {
  color: #EFEFEF;
}

.settings .tooltip {
  position: relative;
  top: -1px;
}
.settings .tooltip .icon {
  fill: #9A9FA5;
}
.settings .switch {
  margin-left: auto;
}

.settings__top {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .settings__top {
  border-color: #272B30;
}

.settings__top .settings__label {
  margin-right: 24px;
}
.settings__top .settings__button {
  margin-left: auto;
}

.settings__email {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}

.settings__content {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}

.packages {
  padding: 48px;
  background: #FCFCFC;
  border-radius: 8px;
}

@media only screen and (max-width: 1259px) {
  .packages {
    padding: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .packages {
    padding: 24px;
  }
}
body.dark .packages {
  background: #1A1D1F;
}

.packages__group {
  display: flex;
  flex-wrap: wrap;
  margin: -80px -80px 0;
}

@media only screen and (max-width: 1419px) {
  .packages__group {
    margin: -64px -64px 0;
  }
}
@media only screen and (max-width: 1023px) {
  .packages__group {
    display: block;
    margin: 0;
  }
}
.packages__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
  margin-top: 80px;
  padding: 0 80px;
}
.packages__item:nth-child(2n+1) {
  border-right: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1419px) {
  .packages__item {
    margin-top: 64px;
    padding: 0 64px;
  }
}
@media only screen and (max-width: 1023px) {
  .packages__item {
    margin: 0;
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .packages__item:nth-child(2n+1) {
    border: none;
  }
}
body.dark .packages__item:nth-child(2n+1) {
  border-color: #272B30;
}

@media only screen and (max-width: 1023px) {
  .packages__item:not(:last-child) {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .packages__item:not(:last-child) {
    border-color: #272B30;
  }
}
.packages__top {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 24px;
}

.packages__recommended {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  margin-left: 18px;
  padding: 0 14px;
  border-radius: 20px;
  background: #B5E4CA;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.84615;
}

body.dark .packages__recommended {
  color: #1A1D1F;
}

.packages__content {
  margin-bottom: 24px;
  color: #6F767E;
}

.packages__line {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px 0;
  border-width: 1px 0;
  border-style: solid;
  border-color: #EFEFEF;
}

body.dark .packages__line {
  border-color: #272B30;
}

.packages__percent {
  margin-right: 24px;
}

.packages__note {
  max-width: 190px;
  margin-right: auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.packages .tooltip {
  margin-left: 24px;
}
.packages .tooltip .icon {
  width: 24px;
  height: 24px;
  fill: #9A9FA5;
}

@media only screen and (max-width: 767px) {
  .packages .tooltip {
    display: none;
  }
}
.packages__list {
  flex-grow: 1;
}
.packages__list li {
  position: relative;
  padding-left: 40px;
  color: #33383F;
}

body.dark .packages__list li {
  color: #EFEFEF;
}

.packages__list li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%23b5e4ca'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}
.packages__list li:not(:last-child) {
  margin-bottom: 24px;
}

.packages__button {
  width: 100%;
  margin-top: 72px;
}

@media only screen and (max-width: 1023px) {
  .packages__button {
    margin-top: 48px;
  }
}
.packages:not(:last-child) {
  margin-bottom: 40px;
}

.faq__title {
  margin-bottom: 24px;
}

.faq__container {
  display: flex;
  padding: 48px;
  border-radius: 8px;
  background: #FCFCFC;
}

@media only screen and (max-width: 1259px) {
  .faq__container {
    padding: 32px;
  }
}
@media only screen and (max-width: 1023px) {
  .faq__container {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .faq__container {
    padding: 24px;
  }
}
body.dark .faq__container {
  background: #1A1D1F;
}

.faq__sidebar {
  flex-shrink: 0;
  width: 224px;
}

@media only screen and (max-width: 1023px) {
  .faq__sidebar {
    width: 100%;
    margin-bottom: 32px;
  }
}
.faq__menu {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 1023px) {
  .faq__menu {
    display: none;
  }
}
.faq__link {
  padding: 8px 16px;
  border-radius: 8px;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.faq__link:not(:last-child) {
  margin-bottom: 8px;
}
.faq__link:hover, .faq__link.active {
  color: #1A1D1F;
}

body.dark .faq__link:hover, body.dark .faq__link.active {
  color: #FCFCFC;
}

.faq__link.active {
  background: #EFEFEF;
}

body.dark .faq__link.active {
  background: #272B30;
}

.faq .select {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .faq .select {
    display: block;
  }
}
body.dark .faq .select {
  background: #272B30;
  box-shadow: inset 0 0 0 2px #272B30;
}

.faq__wrapper {
  flex-grow: 1;
  padding-left: 64px;
}

@media only screen and (max-width: 1259px) {
  .faq__wrapper {
    padding-left: 48px;
  }
}
@media only screen and (max-width: 1023px) {
  .faq__wrapper {
    padding-left: 0;
  }
}
.faq__tab {
  display: none;
}

.faq__item:hover .faq__head .icon, .faq__item.active .faq__head .icon {
  fill: #1A1D1F;
}

body.dark .faq__item:hover .faq__head .icon, body.dark .faq__item.active .faq__head .icon {
  fill: #FCFCFC;
}

.faq__item.active .faq__head .icon {
  transform: rotate(45deg);
}
.faq__item:not(:last-child) {
  margin-bottom: 24px;
}

.faq__head {
  position: relative;
  display: flex;
  padding-bottom: 12px;
  border-bottom: 1px solid #EFEFEF;
  color: #33383F;
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body.dark .faq__head {
  border-color: #272B30;
  color: #FCFCFC;
}

.faq__head .icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 24px;
  fill: #6F767E;
  transition: all 0.2s;
}

.faq__subtitle {
  flex-grow: 1;
}

.faq__body {
  display: none;
  padding-top: 24px;
  font-weight: 500;
  color: #6F767E;
}

.messages {
  display: flex;
  height: 776px;
  padding: 12px;
  border-radius: 8px;
  background: #FCFCFC;
}

@media only screen and (max-width: 1419px) {
  .messages {
    height: 700px;
  }
}
@media only screen and (max-width: 1023px) {
  .messages {
    display: block;
    height: calc(100vh - 218px);
    padding: 0;
  }
  .messages.active .messages__users {
    display: none;
  }
  .messages.active .messages__messenger {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .messages {
    height: calc(100vh - 184px);
  }
}
body.dark .messages {
  background: #1A1D1F;
}

.messages__users {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 340px;
  margin-right: 12px;
  padding: 12px;
}

@media only screen and (max-width: 1259px) {
  .messages__users {
    width: 310px;
  }
}
@media only screen and (max-width: 1023px) {
  .messages__users {
    width: 100%;
    height: 100%;
    margin-right: 0;
    padding: 24px 32px;
  }
}
@media only screen and (max-width: 767px) {
  .messages__users {
    padding: 16px;
  }
}
.messages__nav {
  display: flex;
  margin-bottom: 36px;
  padding: 4px;
  border-radius: 20px;
  background: #F4F4F4;
}

@media only screen and (max-width: 1259px) {
  .messages__nav {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .messages__nav {
    margin-bottom: 16px;
  }
}
body.dark .messages__nav {
  background: #111315;
}

.messages__link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 50%;
  height: 32px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: color 0.2s;
}
.messages__link .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.messages__link:hover, .messages__link.active {
  color: #1A1D1F;
}
.messages__link:hover .icon, .messages__link.active .icon {
  fill: #1A1D1F;
}

body.dark .messages__link:hover, body.dark .messages__link.active {
  color: #FCFCFC;
}
body.dark .messages__link:hover .icon, body.dark .messages__link.active .icon {
  fill: #FCFCFC;
}

.messages__link.active {
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
  background: #FCFCFC;
}

body.dark .messages__link.active {
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.49), inset 0px 2px 1px rgba(255, 255, 255, 0.06);
  background: #272B30;
}

.messages__list {
  max-height: 100%;
  margin: 0 -12px 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 767px) {
  .messages__list {
    margin: 0 -8px 16px;
  }
}
.messages__item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.messages__item:hover, .messages__item.active {
  background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .messages__item {
    padding: 8px;
  }
}
body.dark .messages__item:hover, body.dark .messages__item.active {
  background: #272B30;
}

.messages__item.new .messages__head:after {
  background: #2A85FF;
}
.messages__item.online .messages__avatar {
  position: relative;
}
.messages__item.online .messages__avatar:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #83BF6E;
  border: 4px solid #FCFCFC;
  transition: border-color 0.2s;
}

body.dark .messages__item.online .messages__avatar:before {
  border-color: #1A1D1F;
}

.messages__item.online:hover .messages__avatar:before {
  border-color: #EFEFEF;
}

body.dark .messages__item.online:hover .messages__avatar:before {
  border-color: #272B30;
}

.messages__item:not(:last-child) {
  margin-bottom: 8px;
}

@media only screen and (max-width: 767px) {
  .messages__item:not(:last-child) {
    margin-bottom: 0;
  }
}
.messages__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.messages__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.messages__details {
  flex: 0 0 calc(100% - 56px);
  max-width: calc(100% - 56px);
  padding-left: 12px;
}

.messages__head {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.messages__head:after {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 12px;
  height: 12px;
  margin-left: 12px;
  border-radius: 50%;
  background: #9A9FA5;
  transition: background 0.2s;
}

.messages__man {
  margin-right: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}

.messages__time {
  flex-shrink: 0;
  margin-left: 24px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.messages__content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #6F767E;
}
.messages__content.\--n {
  overflow: initial;
  white-space: initial;
  text-overflow: initial;
}

.messages .form {
  width: 100%;
  margin-top: auto;
}

@media only screen and (max-width: 1023px) {
  .messages__messenger {
    display: none;
  }
}
.messenger {
  flex-grow: 1;
  border: 1px solid #EFEFEF;
  border-radius: 12px;
}

@media only screen and (max-width: 1023px) {
  .messenger {
    height: 100%;
  }
}
body.dark .messenger {
  border-color: #272B30;
}

.messenger__wrapper {
  position: relative;
  height: calc(100% - 104px);
  padding: 96px 24px;
}
.messenger__wrapper > .messenger__button {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}

@media only screen and (max-width: 1023px) {
  .messenger__wrapper {
    height: calc(100% - 88px);
  }
}
@media only screen and (max-width: 767px) {
  .messenger__wrapper {
    height: calc(100% - 72px);
    padding: 64px 16px 72px;
  }
}
@media only screen and (max-width: 767px) {
  .messenger__wrapper > .messenger__button {
    top: 12px;
  }
}
.messenger__list {
  max-height: 100%;
  flex-grow: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.messenger__panel {
  padding: 24px;
  border-radius: 12px 12px 0 0;
  background: #F4F4F4;
}

@media only screen and (max-width: 1023px) {
  .messenger__panel {
    background: none;
    box-shadow: inset 0 -1px 0 0 #EFEFEF;
  }
}
@media only screen and (max-width: 767px) {
  .messenger__panel {
    padding: 16px;
  }
}
body.dark .messenger__panel {
  background: #272B30;
}

@media only screen and (max-width: 1023px) {
  body.dark .messenger__panel {
    background: none;
    box-shadow: inset 0 -1px 0 0 #272B30;
  }
}
.messenger__line {
  display: flex;
  align-items: center;
}
.messenger__line .messenger__man {
  margin-right: auto;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .messenger__line .messenger__man {
    font-size: 18px;
  }
}
.messenger__close {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 12px;
}
.messenger__close .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
}

@media only screen and (max-width: 1023px) {
  .messenger__close {
    display: inline-block;
  }
}
@media only screen and (max-width: 1023px) {
  body.dark .messenger__close {
    background: #272B30;
  }
}
.messenger__parameters {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
}

@media only screen and (max-width: 1419px) {
  .messenger__parameters {
    margin-top: 8px;
  }
}
@media only screen and (max-width: 1023px) {
  .messenger__parameters {
    display: none;
  }
}
.messenger__parameter {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  font-weight: 500;
  color: #6F767E;
}
.messenger__parameter span {
  font-weight: 700;
  color: #33383F;
}

body.dark .messenger__parameter span {
  color: #FCFCFC;
}

.messenger__parameter:not(:first-child) {
  position: relative;
  padding-left: 14px;
}
.messenger__parameter:not(:first-child):before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: rgba(111, 118, 126, 0.51);
}

.messenger .actions__button {
  background: #FCFCFC !important;
}

body.dark .messenger .actions__button {
  background: rgba(17, 19, 21, 0.5) !important;
}
body.dark .messenger .actions__body:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23111315'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 1023px) {
  body.dark .messenger .actions__button {
    background: #272B30 !important;
  }
}
@media only screen and (max-width: 1023px) {
  body.dark .messenger .actions__body:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath d='M6.927 1.687L0 10h20l-6.927-8.313a4 4 0 0 0-6.146 0z' fill='%23272B30'/%3E%3C/svg%3E");
  }
}
.messenger__item {
  display: flex;
}
.messenger__item:not(:last-child) {
  margin-bottom: 32px;
}

.messenger__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.messenger__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.messenger__details {
  flex: 0 0 calc(100% - 40px);
  max-width: calc(100% - 40px);
  padding-left: 16px;
}

.messenger__head {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.messenger__head .messenger__man {
  color: #6F767E;
}

.messenger__time {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.messenger__content {
  font-weight: 500;
}
.messenger__content a {
  font-weight: 600;
  color: #2A85FF;
}

.messenger__send {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .messenger__send {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}
.messenger__file, .messenger .smile {
  flex-shrink: 0;
  margin-right: 24px;
}

@media only screen and (max-width: 767px) {
  .messenger__file, .messenger .smile {
    margin-right: 12px;
  }
}
.messenger__file {
  position: relative;
  overflow: hidden;
}
.messenger__file input {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 140px;
  opacity: 0;
}
.messenger__file .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.messenger__file input:hover + svg {
  fill: #1A1D1F;
}

body.dark .messenger__file input:hover + svg {
  fill: #2A85FF;
}

.messenger__form {
  position: relative;
  flex-grow: 1;
}

.messenger__input {
  width: 100%;
  height: 48px;
  padding: 0 96px 0 10px;
  border-radius: 12px;
  border: 2px solid #EFEFEF;
  background: #F4F4F4;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #1A1D1F;
}
.messenger__input::-webkit-input-placeholder, .messenger__input::-moz-placeholder, .messenger__input:-ms-input-placeholder, .messenger__input::-ms-input-placeholder, .messenger__input::placeholder {
  color: #6F767E;
}
.messenger__input:focus {
  border-color: rgba(42, 133, 255, 0.35);
  background: #FFFFFF;
}

body.dark .messenger__input {
  background: #272B30;
  border-color: #272B30;
  color: #FCFCFC;
}
body.dark .messenger__input:focus {
  background: #111315;
}

.messenger__form .messenger__button {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

.creators {
  padding: 24px;
  border-radius: 8px;
  background: #FCFCFC;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .creators {
    padding: 16px;
  }
}
body.dark .creators {
  background: #1A1D1F;
}

.creators__head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .creators__head {
    display: block;
  }
}
body.dark .creators__head {
  border-color: #272B30;
}

.creators__nav {
  display: flex;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .creators__nav {
    margin: 0 0 20px;
  }
}
.creators__link {
  padding: 8px 16px;
  text-align: center;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.creators__link:hover, .creators__link.active {
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .creators__link {
    flex-grow: 1;
  }
}
body.dark .creators__link:hover, body.dark .creators__link.active {
  color: #FCFCFC;
}

.creators__link.active {
  background: #EFEFEF;
}

body.dark .creators__link.active {
  background: #272B30;
}

.creators__link:not(:last-child) {
  margin-right: 8px;
}

.creators__info {
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.creators__item {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .creators__item {
  border-color: #272B30;
}

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

.creators__user {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.creators__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 16px;
}
.creators__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

@media only screen and (max-width: 767px) {
  .creators__avatar {
    width: 64px;
    height: 64px;
  }
}
.creators__line {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.creators__man {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .creators__man {
    font-size: 18px;
  }
}
.creators__number {
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
}

body.dark .creators__number {
  color: #1A1D1F;
}

.creators__parameters {
  display: flex;
  margin-left: -12px;
}

.creators__parameter {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}
.creators__parameter span {
  color: #6F767E;
}
.creators__parameter:not(:first-child) {
  position: relative;
  padding-left: 14px;
}
.creators__parameter:not(:first-child):before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: #EFEFEF;
}

body.dark .creators__parameter:not(:first-child):before {
  background: #272B30;
}

.creators__btns {
  display: flex;
  margin-left: 24px;
}
.creators__btns .creators__button span {
  display: none;
}
.creators__btns .creators__button:not(:last-child) {
  margin-right: 8px;
}
.creators__btns .creators__button:first-child.active {
  background: #EFEFEF;
  box-shadow: inset 0 0 0 3px #EFEFEF;
}
.creators__btns .creators__button:first-child.active span {
  display: inline;
}

@media only screen and (max-width: 767px) {
  .creators__btns {
    display: none;
  }
}
body.dark .creators__btns .creators__button:first-child.active {
  background: transparent;
  box-shadow: 0 0 0 2px #6F767E inset;
}

.creators__products {
  display: flex;
  margin: 24px -24px 0;
  overflow: auto;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.creators__products::-webkit-scrollbar {
  display: none;
}
.creators__products:before, .creators__products:after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 1px;
}

.creators__product {
  position: relative;
  flex-shrink: 0;
  width: 212px;
  height: 166px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.creators__product img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.creators__product:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 19, 21, 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='18' fill='%23fcfcfc'/%3E%3Cpath d='M19.077 22.827c-.325.325-.325.853 0 1.178s.853.325 1.178 0l4.827-4.827c.651-.651.651-1.706 0-2.357l-4.827-4.827c-.325-.325-.853-.325-1.178 0s-.325.853 0 1.178l3.994 3.994H11.333c-.46 0-.833.373-.833.833s.373.833.833.833h11.738l-3.994 3.994z' fill='%236f767e'/%3E%3C/svg%3E") no-repeat 50% 50%/36px auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}
.creators__product:hover:before {
  visibility: visible;
  opacity: 1;
}
.creators__product:not(:last-child) {
  margin-right: 12px;
}

.creators__foot {
  padding: 12px 0;
  text-align: center;
}
.creators__foot .creators__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 767px) {
  .creators__foot {
    padding: 0;
  }
}
.indicators {
  background: #FCFCFC;
  border-radius: 8px;
}

body.dark .indicators {
  background: #1A1D1F;
}

.indicators__table {
  display: table;
  width: 100%;
}

.indicators__row {
  display: table-row;
}
.indicators__row:first-child .indicators__col {
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}
.indicators__row:nth-child(2n) .indicators__col {
  background: rgba(239, 239, 239, 0.35);
}

@media only screen and (max-width: 767px) {
  .indicators__row:first-child .indicators__col {
    padding: 16px;
  }
}
body.dark .indicators__row:nth-child(2n) .indicators__col {
  background: rgba(17, 19, 21, 0.5);
}

.indicators__col {
  display: table-cell;
  padding: 16px;
  white-space: nowrap;
}
.indicators__col:first-child {
  padding-left: 24px;
  color: #6F767E;
}
.indicators__col:last-child {
  padding-right: 24px;
}

@media only screen and (max-width: 1259px) {
  .indicators__col {
    padding: 16px 8px;
  }
}
@media only screen and (max-width: 767px) {
  .indicators__col {
    padding-left: 16px;
  }
}
@media only screen and (max-width: 1259px) {
  .indicators__col:first-child {
    font-size: 13px;
  }
}
@media only screen and (max-width: 767px) {
  .indicators__col:first-child {
    padding-left: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .indicators__col:nth-child(3n+1) {
    display: none;
  }
}
.indicators .tooltip {
  position: relative;
  top: -1px;
}
.indicators .tooltip .icon {
  fill: #9A9FA5;
}

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

.indicators__line {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 12px;
  margin-left: 8px;
}

.indicators__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 2px;
}

.indicators__progress_blue {
  background: #2A85FF;
}

.indicators__progress_purple {
  background: #8E59FF;
}

.indicators .counter {
  padding: 0 7px;
  border-radius: 6px;
  background: #EFEFEF;
}

body.dark .indicators .counter {
  background: #272B30;
}

.indicators .balance {
  margin-top: 10px;
}

.link__title {
  margin-bottom: 16px;
  color: #6F767E;
}

.link__fieldset {
  margin-bottom: 32px;
}
.link__fieldset .select, .link__fieldset .field {
  margin-bottom: 12px;
}

.link__box:not(:last-child) {
  margin-bottom: 32px;
}

.link__label {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  font-weight: 500;
  color: #6F767E;
}

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

.link__list {
  display: flex;
  margin-right: auto;
}

.link__avatar {
  position: relative;
  width: 48px;
  height: 48px;
}
.link__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}
.link__avatar:not(:last-child) {
  margin-right: 24px;
}

.link__icon {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: #2A85FF;
}

body.dark .link__icon {
  border-color: #1A1D1F;
}

.link__icon .icon {
  width: 12px;
  height: 12px;
  fill: #FCFCFC;
}

.link__button .icon {
  width: 24px;
  height: 24px;
}

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

@media only screen and (max-width: 1023px) {
  .income__list {
    display: block;
  }
}
.income__item {
  display: block;
  padding: 0 32px 0 64px;
  color: #1A1D1F;
}
.income__item:not(:first-child) {
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: #EFEFEF;
}

@media only screen and (max-width: 1339px) {
  .income__item {
    padding-left: 48px;
  }
}
@media only screen and (max-width: 1259px) {
  .income__item {
    padding: 0 32px 0 24px;
  }
}
@media only screen and (max-width: 1023px) {
  .income__item {
    display: flex;
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .income__item:not(:first-child) {
    margin-top: 16px;
    padding-top: 16px;
    border-width: 1px 0 0;
  }
}
body.dark .income__item:not(:first-child) {
  border-color: #272B30;
}

.income__item:first-child {
  padding-left: 0;
}
.income__item:last-child {
  padding-right: 0;
}

.income__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-bottom: 24px;
  border-radius: 50%;
}
.income__icon .icon {
  width: 24px;
  height: 24px;
  stroke: #1A1D1F;
  stroke-width: 5 !important;
}

@media only screen and (max-width: 1023px) {
  .income__icon {
    margin: 0 16px 0 0;
  }
}
.income__label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.income .tooltip .icon {
  fill: #6F767E;
}

.income__counter {
  min-width: 238px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media only screen and (max-width: 1339px) {
  .income__counter {
    min-width: 200px;
  }
}
@media only screen and (max-width: 1023px) {
  .income__counter {
    min-width: auto;
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .income__counter {
    font-size: 32px;
  }
}
body.dark .income__counter {
  color: #FCFCFC;
}

.income__indicator {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px;
  color: #6F767E;
}

body.dark .income__indicator {
  background: #272B30;
  border-radius: 8px;
}

.income__indicator span {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
}

.countries__list {
  height: 315px;
  overflow-y: auto;
}

.countries__item {
  display: flex;
  align-items: center;
  color: #33383F;
}

body.dark .countries__item {
  color: #EFEFEF;
}

.countries__item:not(:last-child) {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .countries__item:not(:last-child) {
  border-color: #272B30;
}

.countries__flag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 50%;
  background: #EFEFEF;
}

body.dark .countries__flag {
  background: #272B30;
}

.countries__price {
  margin-left: auto;
  padding-left: 20px;
  color: #1A1D1F;
}

body.dark .countries__price {
  color: #FCFCFC;
}

.earning {
  padding-bottom: 24px;
  background: #FCFCFC;
  border-radius: 8px;
}

body.dark .earning {
  background: #1A1D1F;
}

.earning__table {
  display: table;
  width: 100%;
}

.earning__row {
  display: table-row;
}
.earning__row:first-child .earning__col {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}
.earning__row:nth-child(2n) .earning__col {
  background: rgba(239, 239, 239, 0.35);
}

body.dark .earning__row:nth-child(2n) .earning__col {
  background: rgba(39, 43, 48, 0.3);
}

.earning__col {
  display: table-cell;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}
.earning__col:first-child {
  padding-left: 24px;
  white-space: nowrap;
  color: #6F767E;
}
.earning__col:last-child {
  padding-right: 24px;
}

@media only screen and (max-width: 767px) {
  .earning__col:first-child {
    padding-left: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .earning__col:nth-child(2) {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .earning__col:last-child {
    padding-right: 16px;
  }
}
.earning__status {
  font-size: 14px;
  line-height: 28px;
  font-weight: 600;
}

@media only screen and (max-width: 767px) {
  .refunds .card__head {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .refunds .card__title {
    margin: 0 0 16px;
  }
}
.refunds .card__nav {
  display: flex;
  margin-left: auto;
}
.refunds .card__nav .card__link {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.refunds .card__nav .card__link:hover, .refunds .card__nav .card__link.active {
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .refunds .card__nav .card__link {
    flex: 1;
  }
}
body.dark .refunds .card__nav .card__link:hover, body.dark .refunds .card__nav .card__link.active {
  color: #FCFCFC;
}

.refunds .card__nav .card__link.active {
  background: #EFEFEF;
}

body.dark .refunds .card__nav .card__link.active {
  background: #272B30;
}

.refunds .card__nav .card__link:not(:last-child) {
  margin-right: 4px;
}

@media only screen and (max-width: 767px) {
  .refunds .card__nav .card__link:not(:last-child) {
    margin-right: 0;
  }
}
.refunds__wrapper {
  margin: 0 -12px;
}

@media only screen and (max-width: 767px) {
  .refunds__wrapper {
    margin: 0;
  }
}
.refunds__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .refunds__table {
    display: block;
  }
}
.refunds__row {
  display: table-row;
}
.refunds__row:first-child .refunds__col {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}
.refunds__row:not(:first-child) {
  cursor: pointer;
  transition: background 0.2s;
}
.refunds__row:not(:first-child) .refunds__col {
  position: relative;
  vertical-align: top;
  padding: 16px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .refunds__row {
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .refunds__row:first-child {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .refunds__row:not(:first-child) {
    align-items: flex-start;
  }
}
body.dark .refunds__row:not(:first-child) .refunds__col {
  color: #FCFCFC;
}

@media only screen and (max-width: 767px) {
  .refunds__row:not(:first-child) .refunds__col {
    padding: 0;
  }
}
.refunds__row:not(:first-child) .refunds__col:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .refunds__row:not(:first-child) .refunds__col:after {
    display: none;
  }
}
body.dark .refunds__row:not(:first-child) .refunds__col:after {
  background: #272B30;
}

.refunds__row:not(:first-child) .refunds__col:first-child:after {
  left: 12px;
}
.refunds__row:not(:first-child) .refunds__col:not(:first-child) {
  padding-top: 22px;
}
.refunds__row:not(:first-child) .refunds__col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 767px) {
  .refunds__row:not(:first-child) .refunds__col:not(:first-child) {
    padding: 0;
  }
}
@media only screen and (min-width: 768px) {
  .refunds__row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .refunds__row:not(:first-child):hover {
    background: #272B30;
  }
}
@media only screen and (max-width: 767px) {
  .refunds__row:not(:first-child):not(:last-child) {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .refunds__row:not(:first-child):not(:last-child) {
    border-color: #272B30;
  }
}
.refunds__col {
  display: table-cell;
  padding: 4px 12px 16px;
}
.refunds__col:first-child {
  border-radius: 8px 0 0 8px;
}
.refunds__col:last-child {
  border-radius: 0 8px 8px 0;
}

@media only screen and (max-width: 767px) {
  .refunds__col {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .refunds__col:first-child {
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  .refunds__col:nth-child(2) {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .refunds__col:nth-child(3) {
    display: none;
  }
}
.refunds__item {
  display: flex;
  align-items: center;
}
.refunds__item .refunds__new, .refunds__item .refunds__progress {
  display: none;
}

@media only screen and (max-width: 767px) {
  .refunds__item .refunds__new, .refunds__item .refunds__progress {
    display: inline-block;
  }
}
.refunds__preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.refunds__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.refunds__product {
  max-width: 170px;
  margin-bottom: 4px;
  font-size: 15px;
}

.refunds__category {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

@media only screen and (max-width: 767px) {
  .refunds__category {
    display: none;
  }
}
.refunds__new, .refunds__progress {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

body.dark .refunds__new, body.dark .refunds__progress {
  color: #111315;
}

.refunds__new {
  background: #B5E4CA;
}

.refunds__progress {
  background: #CABDFF;
}

.refunds__user {
  display: flex;
  align-items: center;
  margin-top: -2px;
}

@media only screen and (max-width: 767px) {
  .refunds__user {
    font-size: 0;
  }
}
.refunds__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.refunds__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .refunds__avatar {
    margin-right: 0;
  }
}
.refunds__foot {
  margin-top: 12px;
  text-align: center;
}
.refunds__foot .refunds__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

@media only screen and (max-width: 767px) {
  .refunds__foot {
    margin-top: 32px;
  }
}
.description__title {
  margin-bottom: 24px;
}

.description__row {
  display: flex;
}

@media only screen and (max-width: 1023px) {
  .description__row {
    display: block;
  }
}
.description__col {
  flex: 0 0 50%;
}
.description__col:first-child {
  padding: 24px;
  border-radius: 12px;
  background: rgba(244, 244, 244, 0.5);
}

@media only screen and (max-width: 1023px) {
  .description__col:first-child {
    margin-bottom: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .description__col:first-child {
    margin-bottom: 32px;
    padding: 16px;
  }
}
body.dark .description__col:first-child {
  background: #272B30;
}

.description__col:nth-child(2) {
  padding: 30px 0 0 24px;
}

@media only screen and (max-width: 1023px) {
  .description__col:nth-child(2) {
    padding: 0;
  }
}
.description__product {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.description__preview {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.description__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.description__subtitle {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .description__subtitle {
    font-size: 18px;
  }
}
.description__category {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}

.description__new, .description__progress {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.description__new {
  background: #B5E4CA;
}

body.dark .description__new {
  color: #1A1D1F;
}

.description__progress {
  background: #CABDFF;
}

.description__parameters li {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(17, 19, 21, 0.1);
}

body.dark .description__parameters li {
  border-color: rgba(111, 118, 126, 0.15);
}

.description__label {
  margin-right: auto;
  padding-right: 12px;
  color: #6F767E;
}

.description .tooltip {
  position: relative;
  top: -1px;
}
.description .tooltip .icon {
  fill: #6F767E;
}

.description__yes, .description__no {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

body.dark .description__yes, body.dark .description__no {
  color: #1A1D1F;
}

.description__yes {
  background: #B5E4CA;
}

.description__no {
  background: #FFBC99;
}

.description__content {
  text-align: right;
}

.description__btns {
  display: flex;
  margin: 24px -4px 0;
}
.description__btns .description__button {
  flex: 0 0 calc(50% - 8px);
  width: calc(50% - 8px);
  margin: 0 4px;
}

@media only screen and (max-width: 767px) {
  .description__btns .description__button {
    padding: 0 8px;
  }
}
body.dark .description__btns .description__button:first-child {
  background: #111315;
  box-shadow: inset 0 0 0 2px #111315;
}
body.dark .description__btns .description__button:first-child:hover {
  box-shadow: inset 0 0 0 2px #FCFCFC;
}

.description__box:not(:last-child) {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(17, 19, 21, 0.1);
}

.description__info {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .description__info {
    font-size: 18px;
  }
}
.description__list li {
  position: relative;
  padding-left: 36px;
  font-weight: 500;
  color: #33383F;
}

body.dark .description__list li {
  color: #EFEFEF;
}

.description__list li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.707 6.293a1 1 0 0 1 0 1.414l-8.586 8.586a3 3 0 0 1-4.243 0l-3.586-3.586a1 1 0 0 1 1.414-1.414l3.586 3.586a1 1 0 0 0 1.414 0l8.586-8.586a1 1 0 0 1 1.414 0z' fill='%23b5e4ca'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
}
.description__list li:not(:last-child) {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .description__list li:not(:last-child) {
  border-color: #272B30;
}

.description__comment {
  margin-bottom: 12px;
  font-weight: 500;
  color: #33383F;
}

body.dark .description__comment {
  color: #EFEFEF;
}

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

.description__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.description__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.description .editor {
  margin-top: 32px;
}

@media only screen and (max-width: 767px) {
  .description .editor {
    margin-top: 24px;
  }
}
.balance {
  display: flex;
}

@media only screen and (max-width: 1023px) {
  .balance {
    display: block;
  }
}
.balance__list {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  margin-right: 64px;
}

@media only screen and (max-width: 1259px) {
  .balance__list {
    margin-right: 48px;
  }
}
@media only screen and (max-width: 1023px) {
  .balance__list {
    display: block;
    margin: 0 0 32px;
  }
}
.balance__item {
  display: flex;
  padding: 0 64px;
  border-right: 1px solid #EFEFEF;
  color: #1A1D1F;
}

@media only screen and (max-width: 1419px) {
  .balance__item {
    padding: 0 48px;
  }
}
@media only screen and (max-width: 1339px) {
  .balance__item {
    padding: 0 32px;
  }
}
@media only screen and (max-width: 1023px) {
  .balance__item {
    padding: 0;
    border: none;
  }
}
body.dark .balance__item {
  border-color: #272B30;
  color: #FCFCFC;
}

.balance__item:first-child {
  padding-left: 0;
}

@media only screen and (max-width: 1023px) {
  .balance__item:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .balance__item:not(:last-child) {
    border-color: #272B30;
  }
}
.balance__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 24px;
  border-radius: 50%;
}
.balance__icon .icon {
  width: 24px;
  height: 24px;
  stroke: #1A1D1F;
}

.balance__label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

.balance .tooltip .icon {
  fill: #6F767E;
}

.balance__counter {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media only screen and (max-width: 1339px) {
  .balance__counter {
    font-size: 40px;
  }
}
.balance__button {
  flex-shrink: 0;
}

@media only screen and (max-width: 767px) {
  .balance__button {
    width: 100%;
  }
}
.success {
  padding: 60px 0 24px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .success {
    padding: 32px 0 16px;
  }
}
.success__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 128px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #B5E4CA;
  font-size: 48px;
}

.success__info {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #33383F;
}

@media only screen and (max-width: 767px) {
  .success__info {
    font-size: 18px;
  }
}
body.dark .success__info {
  color: #EFEFEF;
}

.success__price {
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  .success__price {
    font-size: 40px;
  }
}
.success__text {
  margin-bottom: 20px;
  color: #6F767E;
}
.success__text span {
  color: #1A1D1F;
}

body.dark .success__text span {
  color: #FCFCFC;
}

.payout__wrapper {
  margin: 0 -24px;
  background: #FCFCFC;
}

@media only screen and (max-width: 767px) {
  .payout__wrapper {
    margin: 0 -16px;
  }
}
body.dark .payout__wrapper {
  background: transparent;
}

.payout__table {
  display: table;
  width: 100%;
}

.payout__row {
  display: table-row;
}
.payout__row:first-child .payout__col {
  padding-top: 12px;
  padding-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}
.payout__row:nth-child(2n) .payout__col {
  background: rgba(239, 239, 239, 0.35);
}

body.dark .payout__row:nth-child(2n) .payout__col {
  background: rgba(39, 43, 48, 0.5);
}

.payout__col {
  display: table-cell;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}
.payout__col:first-child {
  padding-left: 24px;
  color: #6F767E;
}
.payout__col:last-child {
  padding-right: 24px;
}

@media only screen and (max-width: 767px) {
  .payout__col {
    padding: 12px;
  }
}
@media only screen and (max-width: 767px) {
  .payout__col:first-child {
    padding-left: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .payout__col:last-child {
    padding-right: 16px;
    text-align: right;
  }
}
@media only screen and (max-width: 767px) {
  .payout__col:nth-child(2), .payout__col:nth-child(3) {
    display: none;
  }
}
.payout__status {
  font-size: 14px;
  line-height: 28px;
  font-weight: 600;
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .transactions .card__head {
    flex-wrap: wrap;
  }
  .transactions .card__head .card__title {
    width: 100%;
    flex-grow: 1;
    margin: 0 0 16px;
  }
}
.transactions .card__button {
  margin-left: 16px;
}

@media only screen and (max-width: 767px) {
  .transactions .card__button {
    flex-grow: 1;
  }
}
.transactions__wrapper {
  margin: 0 -24px;
  background: #FCFCFC;
}

@media only screen and (max-width: 767px) {
  .transactions__wrapper {
    margin: 0 -16px;
  }
}
body.dark .transactions__wrapper {
  background: transparent;
}

.transactions__table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .transactions__table {
    display: block;
  }
}
.transactions__row {
  display: table-row;
}
.transactions__row:first-child .transactions__col {
  padding-top: 8px;
  padding-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}
.transactions__row:nth-child(2n) .transactions__col {
  background: rgba(239, 239, 239, 0.35);
}

@media only screen and (max-width: 1023px) {
  .transactions__row {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
  }
}
@media only screen and (max-width: 767px) {
  .transactions__row {
    padding: 16px;
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__row:nth-child(2n) {
    background: rgba(239, 239, 239, 0.35);
  }

  body.dark .transactions__row:nth-child(2n) {
    background: rgba(39, 43, 48, 0.5);
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__row:nth-child(2n) .transactions__col {
    background: none;
  }
}
body.dark .transactions__row:nth-child(2n) .transactions__col {
  background: rgba(39, 43, 48, 0.5);
}

@media only screen and (max-width: 1023px) {
  body.dark .transactions__row:nth-child(2n) .transactions__col {
    background: none;
  }
}
.transactions__col {
  display: table-cell;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}
.transactions__col:first-child {
  padding-left: 24px;
}
.transactions__col:last-child {
  padding-right: 24px;
}

@media only screen and (max-width: 1023px) {
  .transactions__col {
    display: flex;
    align-items: center;
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__col:first-child {
    padding-left: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__col:nth-child(2) {
    align-items: flex-start;
    order: -1;
    padding-bottom: 12px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .transactions__col:nth-child(2) {
    border-color: #272B30;
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__col:nth-child(3) {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__col:last-child {
    padding-right: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .transactions__col:not(:last-child) {
    margin-bottom: 12px;
  }
}
.transactions__status {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 14px;
  line-height: 28px;
  font-weight: 600;
  color: #1A1D1F;
}

.transactions__details {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .transactions__details {
    display: block;
    margin-right: auto;
    padding-right: 16px;
  }
}
.transactions__product {
  color: #33383F;
}

body.dark .transactions__product {
  color: #EFEFEF;
}

.transactions__invoice {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33333;
  font-weight: 500;
  color: #6F767E;
}

.transactions__amount_negative {
  color: #FF6A55;
}

.transactions__foot {
  padding: 12px 0;
  text-align: center;
}
.transactions__foot .transactions__button .loader {
  transform: scale(0.8);
  margin: 0 18px 0 8px;
}

.transactions__label {
  display: none;
  margin-right: auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}

@media only screen and (max-width: 1023px) {
  .transactions__label {
    display: block;
  }
}
.shop__background {
  height: 400px;
  margin: -40px -40px 0;
}
.shop__background img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 1339px) {
  .shop__background {
    margin: -32px -24px 0;
  }
}
@media only screen and (max-width: 1259px) {
  .shop__background {
    height: 320px;
  }
}
@media only screen and (max-width: 767px) {
  .shop__background {
    height: 252px;
    margin: -24px -16px 0;
  }
}
.shop .card {
  max-width: 1200px;
  margin: -64px auto 0;
}

@media only screen and (max-width: 767px) {
  .shop .card {
    margin-top: -188px;
  }
}
.shop__profile {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #EFEFEF;
}

@media only screen and (max-width: 1259px) {
  .shop__profile {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }
}
@media only screen and (max-width: 1023px) {
  .shop__profile {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .shop__profile {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }
}
body.dark .shop__profile {
  border-color: #272B30;
}

.shop__details {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

@media only screen and (max-width: 1023px) {
  .shop__details {
    margin-bottom: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .shop__details {
    margin-bottom: 12px;
  }
}
.shop__avatar {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 16px;
}
.shop__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.shop__add {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: #2A85FF;
  font-size: 0;
  transition: background 0.2s;
}
.shop__add .icon {
  fill: #FFFFFF;
}
.shop__add:hover {
  background: #1176ff;
}

@media only screen and (max-width: 767px) {
  .shop__man {
    font-size: 20px;
  }
}
.shop__info {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #6F767E;
}

@media only screen and (max-width: 767px) {
  .shop__info {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .shop__info {
    margin-top: 4px;
    font-size: 15px;
  }
}
.shop__contacts {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 40px;
}

@media only screen and (max-width: 1023px) {
  .shop__contacts {
    margin-left: 0;
  }
}
.shop__socials {
  display: flex;
  align-items: center;
}

.shop__social .icon {
  width: 24px;
  height: 24px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.shop__social:hover .icon {
  fill: #2A85FF;
}
.shop__social:not(:last-child) {
  margin-right: 32px;
}

.shop__contacts .shop__button {
  margin-left: 32px;
}

@media only screen and (max-width: 1023px) {
  .shop__contacts .shop__button {
    margin-left: auto;
  }
}
@media only screen and (max-width: 767px) {
  .shop__contacts .shop__button {
    min-width: 132px;
  }
}
.shop__control {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

@media only screen and (max-width: 767px) {
  .shop__control {
    flex-wrap: wrap;
  }
}
.shop__nav {
  display: flex;
  margin-right: auto;
}
.shop__nav .shop__link {
  padding: 8px 16px;
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #6F767E;
  transition: all 0.2s;
}
.shop__nav .shop__link:hover, .shop__nav .shop__link.active {
  color: #1A1D1F;
}

@media only screen and (max-width: 767px) {
  .shop__nav {
    width: 100%;
    margin: 0 0 16px;
  }
}
@media only screen and (max-width: 767px) {
  .shop__nav .shop__link {
    flex-grow: 1;
  }
}
body.dark .shop__nav .shop__link:hover, body.dark .shop__nav .shop__link.active {
  color: #FCFCFC;
}

.shop__nav .shop__link.active {
  background: #EFEFEF;
}

body.dark .shop__nav .shop__link.active {
  background: #272B30;
}

.shop__nav .shop__link:not(:last-child) {
  margin-right: 8px;
}

@media only screen and (max-width: 767px) {
  .shop__nav .shop__link:not(:last-child) {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .shop__select {
    flex-grow: 1;
  }
}
.shop .filters {
  margin-left: 16px;
}

@media only screen and (max-width: 767px) {
  .shop .filters {
    margin-left: 12px;
  }
}
.shop__products {
  display: flex;
  flex-wrap: wrap;
  margin: -32px -12px 0;
}

@media only screen and (max-width: 639px) {
  .shop__products {
    display: block;
    margin: 0;
  }
}
.shop .summary {
  flex: 0 0 calc(33.333% - 24px);
  width: calc(33.333% - 24px);
  margin: 32px 12px 0;
}

@media only screen and (max-width: 1023px) {
  .shop .summary {
    flex: 0 0 calc(50% - 24px);
    width: calc(50% - 24px);
  }
}
@media only screen and (max-width: 639px) {
  .shop .summary {
    width: 100%;
    margin: 24px 0 0;
  }
}
.shop__foot {
  margin-top: 40px;
  text-align: center;
}

@media only screen and (max-width: 1339px) {
  .shop__foot {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .shop__foot {
    margin-top: 24px;
  }
}
.follower {
  display: flex;
  align-items: flex-start;
  padding-bottom: 24px;
}
.follower:not(:last-child) {
  margin-bottom: 24px;
  border-bottom: 1px solid #EFEFEF;
}

body.dark .follower:not(:last-child) {
  border-color: #272B30;
}

.follower__details {
  display: flex;
  padding-right: 24px;
  flex-grow: 1;
}

@media only screen and (max-width: 1023px) {
  .follower__details {
    padding-right: 0;
  }
}
.follower__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 16px;
}
.follower__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .follower__avatar {
    width: 64px;
    height: 64px;
  }
}
.follower__man {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 767px) {
  .follower__man {
    font-size: 18px;
  }
}
.follower__list {
  display: flex;
  align-items: center;
}

.follower__counter {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #9A9FA5;
}
.follower__counter span {
  color: #6F767E;
}
.follower__counter:not(:first-child) {
  position: relative;
  margin-left: 12px;
  padding-left: 14px;
}
.follower__counter:not(:first-child):before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: #EFEFEF;
}

body.dark .follower__counter:not(:first-child):before {
  background: #272B30;
}

.follower__gallery {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  width: 480px;
  margin: -12px -6px 0 0;
}

@media only screen and (max-width: 1023px) {
  .follower__gallery {
    display: none;
  }
}
.follower__preview {
  flex: 0 0 calc(33.333% - 12px);
  width: calc(33.333% - 12px);
  height: 116px;
  margin: 12px 6px 0;
}
.follower__preview img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  -o-object-fit: cover;
  object-fit: cover;
}
.follower__preview:nth-child(n+4) {
  display: none;
}

.follower__btns {
  display: flex;
  margin-top: 16px;
}
.follower__btns .follower__button_follow span {
  display: none;
}
.follower__btns .follower__button_follow.active {
  box-shadow: inset 0 0 0 2px #EFEFEF;
  background: #EFEFEF;
}

body.dark .follower__btns .follower__button_follow.active {
  box-shadow: inset 0 0 0 2px #33383F;
  background: #272B30;
}

.follower__btns .follower__button_follow.active span {
  display: inline;
}
.follower__btns .follower__button:not(:last-child) {
  margin-right: 8px;
}

.os-agents-list-w {
  box-shadow: 0px 10px 70px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 400px;
}
.os-agents-list-w .agents-header {
  margin: 0px;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.os-agents-list-w .agents-footer {
  padding: 10px 20px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
}
.os-agents-list-w .agents-footer .latepoint-btn:last-child {
  margin-left: auto;
}

.os-agents-list {
  height: 240px;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
}
.os-agents-list .os-agent {
  flex: 0 0 33.3%;
  box-sizing: border-box;
  align-items: center;
  padding: 15px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  cursor: pointer;
}
.os-agents-list .os-agent:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.os-agents-list .os-agent:hover .barber-name {
  color: #0937ff;
}
.os-agents-list .os-agent.selected .barber-avatar {
  position: relative;
  box-shadow: 0px 0px 0px 4px #0937ff;
}
.os-agents-list .os-agent.selected .barber-avatar:before {
  content: "\E904";
  color: #0937ff;
  position: absolute;
  top: -3px;
  right: -14px;
  width: 20px;
  height: 20px;
  font-size: 12px;
  padding: 2px;
  background-color: #0937ff;
  color: #fff;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
}
.os-agents-list .barber-avatar {
  border-radius: 50%;
  height: 40px;
  margin-bottom: 10px;
  display: inline-block;
}
.os-agents-list .barber-avatar img {
  width: 40px;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}
.os-agents-list .barber-name {
  margin: 0px;
}

.index-barber-boxes .barber-box-w {
  background-color: #fff;
  box-shadow: 6px 6px 0px 0px black, inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
  padding: 20px;
  flex: 0 0 23%;
  text-align: center;
  margin-right: 2%;
  margin-bottom: 2%;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  display: block;
  border-radius: 0px;
  border: 1px solid black;


}
.index-barber-boxes .barber-box-w.barber-status-disabled {
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6), inset 0px 3px 0px 0px #ffbcbc;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.index-barber-boxes .barber-box-w.barber-status-disabled .barber-schedule, .index-barber-boxes .barber-box-w.barber-status-disabled .barber-schedule-info {
  opacity: 0.4;
}
.index-barber-boxes .barber-box-w.barber-status-disabled .barber-name {
  color: #ca1616;
  opacity: 0.7;
}
.index-barber-boxes .barber-box-w.barber-status-disabled .barber-avatar {
  opacity: 0.7;
}
.index-barber-boxes .barber-box-w:nth-child(4n+4) {
  margin-right: 0px;
}
.index-barber-boxes .barber-box-w:hover {
  box-shadow:  6px 4px 6px var(--c-button-background-color);
}
.index-barber-boxes .barber-box-w:hover .schedule-day.is-on:before {
  transform: translateX(-50%) scale(1.4);
}
.index-barber-boxes .barber-box-w:hover .barber-avatar {
  transform: scale(1.1);
}
.index-barber-boxes .barber-box-w:hover .barber-edit-icon,
.index-barber-boxes .barber-box-w:hover .barber-remove-trigger {
  display: block;
}
.index-barber-boxes .barber-info-w {
  display: flex;
  border-bottom: 1px solid #f0f1f5;
  align-items: center;
  padding-bottom: 15px;
}
.index-barber-boxes .barber-info-w .barber-info {
  text-align: left;
  flex: 1;
}
.index-barber-boxes .barber-schedule {
  display: flex;
  padding: 15px 0px;
  border-bottom: 1px solid #f0f1f5;
}
.index-barber-boxes .barber-schedule .schedule-day {
  position: relative;
  flex: 1;
  text-align: center;
  padding-top: 15px;
  font-size: 11px;
  color: #d4d5e1;
}
.index-barber-boxes .barber-schedule .schedule-day + .schedule-day {
  border-left: 1px solid #f0f1f5;
}
.index-barber-boxes .barber-schedule .schedule-day:before {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #d4d5e1;
  transform-origin: center center;
  transition: transform 0.2s ease;
}
.index-barber-boxes .barber-schedule .schedule-day.is-on {
  color: #38406d;
}
.index-barber-boxes .barber-schedule .schedule-day.is-on:before {
  background-color: #59d193;
}
.index-barber-boxes .barber-avatar {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  background-size: cover;
  background-position: center center;
  border-radius: 50%;
  transition: all 0.2s ease;
  margin-right: 20px;
}
.index-barber-boxes .barber-name {
  font-weight: 500;
  color: #1B3164;
  font-size: 20px;
  transition: all 0.2s ease;
  margin-bottom: 3px;
}
.index-barber-boxes .barber-phone {
  color: #8894AF;
  font-size: 14px;
}
.index-barber-boxes .barber-edit-icon {
  display: none;
  position: absolute;
  line-height: 1;
  top: 0px;
  left: 0px;
  color: #0937ff;
  font-size: 14px;
  padding: 5px;
  opacity: 0.8;
}
.index-barber-boxes .barber-edit-icon:hover {
  transform: scale(1.3);
  opacity: 1;
}
.index-barber-boxes .barber-schedule-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.index-barber-boxes .barber-schedule-info .barber-today-info {
  color: #8894AF;
  font-size: 14px;
  text-align: left;
  padding-top: 15px;
}
.index-barber-boxes .barber-schedule-info .barber-today-info .today-status {
  display: inline-block;
  padding: 2px 5px;
  color: #fff;
  background-color: #85d7ad;
  font-size: 12px;
  margin-left: 4px;
}
.index-barber-boxes .barber-schedule-info .barber-today-info .today-status.is-off-duty {
  color: #fff;
  background-color: #ef7a7a;
}
.index-barber-boxes .barber-schedule-info .barber-today-info .today-schedule {
  font-weight: 500;
  color: #1B3164;
  font-size: 17px;
  margin-top: 4px;
}
.index-barber-boxes .barber-schedule-info .barber-today-info .today-schedule span {
  display: inline-block;
  font-size: 14px;
  margin-right: 10px;
}
.index-barber-boxes .barber-schedule-info .today-bookings {
  color: #8894AF;
  font-size: 14px;
  border-left: 1px solid #f0f1f5;
  padding: 15px 0px 0px 15px;
}
.index-barber-boxes .barber-schedule-info .today-bookings-count {
  font-weight: 500;
  color: #1B3164;
  font-size: 20px;
  margin-top: 4px;
}
.index-barber-boxes .barber-remove-trigger {
  color: #E88181;
  font-size: 14px;
  padding: 5px;
  line-height: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  display: none;
}
.index-barber-boxes .barber-remove-trigger:hover {
  color: #ff2222;
  transform: scale(1.3);
}

.create-barber-link-w {
  border: 3px dotted rgba(0, 0, 0, 1);
  border-radius: 3px;
  flex: 0 0 23%;
  text-align: center;
  position: relative;
  cursor: pointer;
  display: block;
  outline: none;
  box-shadow: none;
  margin-bottom: 2%;
  min-height: 150px;
}
.create-barber-link-w .create-barber-link-i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.create-barber-link-w .add-barber-graphic-w {
  width: 80px;
  height: 80px;
  position: relative;
  margin: 0px auto;
}
.create-barber-link-w .add-barber-graphic-w .add-barber-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background-color: #000000;
 
  color: #fff;
  transform: translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.create-barber-link-w .add-barber-graphic-w .add-barber-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 12px;
  transform: translate(-45%, -47%);
  transition: all 0.2s ease;
}
.create-barber-link-w .add-barber-label {
  color: #000000;
  font-weight: 500;
  font-size: 19.2px;
  margin-top: 5px;
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.create-barber-link-w:hover {
  border-color: #6574cd;
  border-style: solid;
}
.create-barber-link-w:hover .add-barber-plus {
  box-shadow: 0px 0px 0px 15px rgba(208, 213, 220, 0.3);
  transform: translate(-50%, -50%) scale(1.2);
}
.create-barber-link-w:hover .add-barber-label {
  transform: translateY(5px);
}

.entry {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(8.7px, 1vh) * 100);
  padding: 48px;
  background: #FCFCFC;
}

@media only screen and (max-width: 767px) {
  .entry {
    padding: 24px;
  }
}
body.dark .entry {
  background: #1A1D1F;
}

.entry__wrapper {
  max-width: 296px;
}

@media only screen and (max-width: 767px) {
  .entry__wrapper {
    max-width: 100%;
  }
}
.entry__logo {
  display: inline-block;
  width: 48px;
  margin-bottom: 32px;
}

.entry__logo img {
  width: 100%;
}

.entry__title {
  margin-bottom: 32px;
}

.entry__top {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 2px solid #EFEFEF;
}

@media only screen and (max-width: 767px) {
  .entry__top {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }
}
body.dark .entry__top {
  border-color: #272B30;
}

.entry__text {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
}

.entry__btns {
  display: flex;
  margin: 0 -4px;
}

.entry__btns .entry__button {
  flex: 0 0 calc(50% - 8px);
  width: calc(50% - 8px);
  margin: 0 4px;
  padding: 0 16px;
}

.entry__btns .entry__button img {
  margin-right: 10px;
}

.entry__fieldset .entry__button {
  width: 100%;
}

.entry .field {
  margin-bottom: 12px;
}

.entry__note {
  margin-top: 32px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #9A9FA5;
}

@media only screen and (max-width: 767px) {
  .entry__note {
    margin-top: 24px;
  }
}
.entry__info {
  margin-top: 32px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}

@media only screen and (max-width: 767px) {
  .entry__info {
    margin-top: 24px;
  }
}
.entry__info a {
  font-weight: 700;
  color: #1A1D1F;
  transition: color 0.2s;
}

body.dark .entry__info a {
  color: #FCFCFC;
}

.entry__info a:hover {
  color: #2A85FF;
}

body.dark .entry__info a:hover {
  color: #2A85FF;
}

@-webkit-keyframes jump {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jump {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes jumpTwo {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 20px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jumpTwo {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 20px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes jumpThree {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -20px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jumpThree {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -20px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes rotated {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotated {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotatedTwo {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotatedTwo {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes rotatedHalf {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes rotatedHalf {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes rotatedHalfTwo {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes rotatedHalfTwo {
  0% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@-webkit-keyframes scale-upOne {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scale-upOne {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes scale-right {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes scale-right {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0.7;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0.7;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@-webkit-keyframes fade-in-rev {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-rev {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes hvr-ripple-out {
  0% {
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
  }
  50% {
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    opacity: 0.8;
  }
  100% {
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    opacity: 1;
  }
}
@keyframes hvr-ripple-out {
  0% {
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
  }
  50% {
    top: -15px;
    right: -15px;
    bottom: -15px;
    left: -15px;
    opacity: 0.8;
  }
  100% {
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    opacity: 1;
  }
}
@-webkit-keyframes hvr-ripple-out-two {
  0% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100% {
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    opacity: 0;
  }
}
@keyframes hvr-ripple-out-two {
  0% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100% {
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    opacity: 0;
  }
}
@-webkit-keyframes scale-up-one {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scale-up-one {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes scale-up-two {
  0% {
    transform: scale(0.5);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes scale-up-two {
  0% {
    transform: scale(0.5);
  }
  40% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0.5);
  }
}
@-webkit-keyframes scale-up-three {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scale-up-three {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes jump5p {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jump5p {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes jump5pRsv {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jump5pRsv {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -5px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes jump10p {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jump10p {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes jump10pRsv {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes jump10pRsv {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes sandy_jump {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 20px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes sandy_jump {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 20px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes sandy_jump_2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes sandy_jump_2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.sandy-jump-animation {
  -webkit-animation: sandy_jump 7s ease infinite;
          animation: sandy_jump 7s ease infinite;
}

.sandy-jump-2-animation {
  -webkit-animation: sandy_jump_2 7s ease infinite;
          animation: sandy_jump_2 7s ease infinite;
}

.sandy-down-2-animation {
  -webkit-animation: jumpThree 7s ease infinite;
          animation: jumpThree 7s ease infinite;
}

.sandy-scale-up-1-animation {
  -webkit-animation: scale-upOne 9s ease infinite;
          animation: scale-upOne 9s ease infinite;
}

@-webkit-keyframes wizardWrapperAnimation {
  0% {
    transform: translate3d(0, 40px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}

@keyframes wizardWrapperAnimation {
  0% {
    transform: translate3d(0, 40px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}
.text-gray-400-c {
  color: #8083A3;
}

.h-550 {
  height: 550px !important;
}

.text-hidden {
  font-size: 0 !important;
}

.z-999 {
  z-index: 999;
}

.text-black {
  color: #000 !important;
}

.flex-0-0-auto {
  flex: 0 0 auto !important;
}

.min-w-122px {
  min-width: 122px !important;
}

.bdrs-inherit {
  border-radius: inherit !important;
}

html, body {
  overflow-x: hidden;
  position: relative;
}

.orion-svg-icon {
  fill: none;
  stroke: #202020;
  stroke-width: 2;
}
.orion-svg-icon2 {
  fill: black;
  stroke: white;
  stroke-width: 2;
}
.c-contain-750 {
  max-width: 750px;
  margin: 0 auto;
}

.c-contain-780 {
  max-width: 780px;
  margin: 0 auto;
}

.c-contain-560 {
  max-width: 560px;
  margin: 0 auto;
}

.title-font-fam {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
}

::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
  width: 0;
  background: transparent;
}

body {
  background: #fff;
}
body.is-dark {
  background: #000 !important;
}
[app-wj=dashboard] {
  background: #f8f8f8;
}

.w-initial {
  width: initial !important;
}

.max-w-570 {
  max-width: 570px;
}

.w-initial {
  width: initial !important;
}

* {
  font-family: "JetBrains Mono", sans-serif;
  outline: 0;
}

button:disabled,
button[disabled], a.disabled {
  opacity: 0.5;
  background-color: #cccccc !important;
  color: #666666;
  box-shadow: none !important;
}

a.is-link {
  color: #7c3aed;
}

.w-half {
  width: 50% !important;
}

.hide {
  display: none;
}

.no-shadow {
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .md\:leading-65 {
    line-height: 65px;
  }
}

.w-v1 {
  width: 1% !important;
}

.w-v2 {
  width: 2% !important;
}

.w-v3 {
  width: 3% !important;
}

.w-v4 {
  width: 4% !important;
}

.w-v5 {
  width: 5% !important;
}

.w-v6 {
  width: 6% !important;
}

.w-v7 {
  width: 7% !important;
}

.w-v8 {
  width: 8% !important;
}

.w-v9 {
  width: 9% !important;
}

.w-v10 {
  width: 10% !important;
}

.w-v11 {
  width: 11% !important;
}

.w-v12 {
  width: 12% !important;
}

.w-v13 {
  width: 13% !important;
}

.w-v14 {
  width: 14% !important;
}

.w-v15 {
  width: 15% !important;
}

.w-v16 {
  width: 16% !important;
}

.w-v17 {
  width: 17% !important;
}

.w-v18 {
  width: 18% !important;
}

.w-v19 {
  width: 19% !important;
}

.w-v20 {
  width: 20% !important;
}

.w-v21 {
  width: 21% !important;
}

.w-v22 {
  width: 22% !important;
}

.w-v23 {
  width: 23% !important;
}

.w-v24 {
  width: 24% !important;
}

.w-v25 {
  width: 25% !important;
}

.w-v26 {
  width: 26% !important;
}

.w-v27 {
  width: 27% !important;
}

.w-v28 {
  width: 28% !important;
}

.w-v29 {
  width: 29% !important;
}

.w-v30 {
  width: 30% !important;
}

.w-v31 {
  width: 31% !important;
}

.w-v32 {
  width: 32% !important;
}

.w-v33 {
  width: 33% !important;
}

.w-v34 {
  width: 34% !important;
}

.w-v35 {
  width: 35% !important;
}

.w-v36 {
  width: 36% !important;
}

.w-v37 {
  width: 37% !important;
}

.w-v38 {
  width: 38% !important;
}

.w-v39 {
  width: 39% !important;
}

.w-v40 {
  width: 40% !important;
}

.w-v41 {
  width: 41% !important;
}

.w-v42 {
  width: 42% !important;
}

.w-v43 {
  width: 43% !important;
}

.w-v44 {
  width: 44% !important;
}

.w-v45 {
  width: 45% !important;
}

.w-v46 {
  width: 46% !important;
}

.w-v47 {
  width: 47% !important;
}

.w-v48 {
  width: 48% !important;
}

.w-v49 {
  width: 49% !important;
}

.w-v50 {
  width: 50% !important;
}

.w-v51 {
  width: 51% !important;
}

.w-v52 {
  width: 52% !important;
}

.w-v53 {
  width: 53% !important;
}

.w-v54 {
  width: 54% !important;
}

.w-v55 {
  width: 55% !important;
}

.w-v56 {
  width: 56% !important;
}

.w-v57 {
  width: 57% !important;
}

.w-v58 {
  width: 58% !important;
}

.w-v59 {
  width: 59% !important;
}

.w-v60 {
  width: 60% !important;
}

.w-v61 {
  width: 61% !important;
}

.w-v62 {
  width: 62% !important;
}

.w-v63 {
  width: 63% !important;
}

.w-v64 {
  width: 64% !important;
}

.w-v65 {
  width: 65% !important;
}

.w-v66 {
  width: 66% !important;
}

.w-v67 {
  width: 67% !important;
}

.w-v68 {
  width: 68% !important;
}

.w-v69 {
  width: 69% !important;
}

.w-v70 {
  width: 70% !important;
}

.w-v71 {
  width: 71% !important;
}

.w-v72 {
  width: 72% !important;
}

.w-v73 {
  width: 73% !important;
}

.w-v74 {
  width: 74% !important;
}

.w-v75 {
  width: 75% !important;
}

.w-v76 {
  width: 76% !important;
}

.w-v77 {
  width: 77% !important;
}

.w-v78 {
  width: 78% !important;
}

.w-v79 {
  width: 79% !important;
}

.w-v80 {
  width: 80% !important;
}

.w-v81 {
  width: 81% !important;
}

.w-v82 {
  width: 82% !important;
}

.w-v83 {
  width: 83% !important;
}

.w-v84 {
  width: 84% !important;
}

.w-v85 {
  width: 85% !important;
}

.w-v86 {
  width: 86% !important;
}

.w-v87 {
  width: 87% !important;
}

.w-v88 {
  width: 88% !important;
}

.w-v89 {
  width: 89% !important;
}

.w-v90 {
  width: 90% !important;
}

.w-v91 {
  width: 91% !important;
}

.w-v92 {
  width: 92% !important;
}

.w-v93 {
  width: 93% !important;
}

.w-v94 {
  width: 94% !important;
}

.w-v95 {
  width: 95% !important;
}

.w-v96 {
  width: 96% !important;
}

.w-v97 {
  width: 97% !important;
}

.w-v98 {
  width: 98% !important;
}

.w-v99 {
  width: 99% !important;
}

.w-v100 {
  width: 100% !important;
}

.remove-after::after {
  content: initial !important;
}

.remove-before::before {
  content: initial !important;
}

.section-pb {
  padding: 136px 0;
}

.button.mort {
  background: #f12786;
}

.mort-main-bg {
  background: #f5f7fc !important;
}

.card-shadow {
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1) !important;
}

.href-link-button {
  transition: color 0.3s linear;
  cursor: pointer;
}
.href-link-button:hover {
  color: #000;
  text-decoration: underline;
}

.tag-link-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.tag-link {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  line-height: 40px;
  font-weight: 600;
  color: #808191;
  transition: all 0.2s;
  background: rgba(228, 228, 228, 0.3);
  color: #355DFF;
}

.text-link {
  font-weight: 600;
  color: #3772FF;
  transition: color 0.2s;
}

.bio-body.radius-round .bio-radius {
  border-radius: 10px !important;
}
.bio-body.radius-straight .bio-radius {
  border-radius: 0px !important;
}
.bio-body.radius-rounded .bio-radius {
  border-radius: 550px !important;
}

.text-60 {
  font-size: 60px;
}

.step-banner {
  position: relative;
  margin-bottom: 48px;
  padding: 32px;
  border-radius: 16px;
  background: #efefef;
  color: #ffffff;
  width: 100%;
}
.step-banner.remove-shadow::before, .step-banner.remove-shadow::after {
  content: initial;
}
.step-banner.just-black {
  background: #000 !important;
  border-radius: 5px;
}
.step-banner.just-black::before, .step-banner.just-black::after {
  content: initial;
}
.step-banner .is-label {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.33333;
  font-weight: 500;
  color: #808191;
}
.step-banner.nav {
  background: #f5f7fc;
}
.step-banner.nav .sidebar__nav {
  margin-bottom: 0;
}
.step-banner.nav .sidebar__nav .sidebar__text {
  color: #000;
}
.step-banner.nav .sidebar__nav .sidebar__item {
  cursor: pointer;
}
.step-banner::before, .step-banner::after {
  content: "";
  position: absolute;
  border-radius: 16px;
}
.step-banner::before {
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: -16px;
  z-index: -2;
  background: inherit;
  opacity: 0.3;
}
.step-banner::after {
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: -8px;
  z-index: -1;
  background: inherit;
  opacity: 0.7;
}
.step-banner.is-blue {
  background: radial-gradient(103.03% 103.03% at 0% 0%, #1875be 0%, #27baf1 100%);
}
.step-banner.is-blue::before {
  background: #27baf12b;
}
.step-banner.is-blue::after {
  background: #34b3e28c;
}
.step-banner p, .step-banner h2, .step-banner a {
  color: #000 !important;
}

.c-dark {
  color: #0b2238 !important;
}

.c-white {
  color: #ffffff !important;
}

.c-blue {
  color: #165df5 !important;
}

.c-gold {
  color: #ffce53 !important;
}

.c-green {
  color: #19a389 !important;
}

.c-aquamarine {
  color: #17e79b !important;
}

.c-orange {
  color: #f28e1c !important;
}

.c-orange-red {
  color: #fd6b3b !important;
}

.c-red {
  color: #f93542 !important;
}

.c-yollow {
  color: #ffc329 !important;
}

.c-gray {
  color: #6c7a87 !important;
}

.c-light {
  color: #9da6af !important;
}

.c-beiget {
  color: #ffe7aa !important;
}

.c-skuy {
  color: #6bb0f8 !important;
}

.c-magenta {
  color: #fd4ffe !important;
}

.c-currency-d {
  color: #29013e !important;
}

.c-currency-p {
  color: #aa9bb3 !important;
}

.c-sea {
  color: #4d81f7 !important;
}

.c-cyan {
  color: #16f5f5 !important;
}

.c-purple {
  color: #6f5fa6 !important;
}

.c-lightgreen {
  color: #7bd88a !important;
}

.c-green2 {
  color: #31d1ab !important;
}

.c-black {
  color: #000 !important;
}

.c-blue2 {
  color: #3875f7 !important;
}

.c-orange2 {
  color: #fd7028 !important;
}

.bg-dark {
  background-color: #0b2238 !important;
}

.bg-white {
  background: #ffffff !important;
}

.bg-blue {
  background-color: #165df5 !important;
}

.bg-gold {
  background-color: #ffce53 !important;
}

.bg-green {
  background-color: #19a389 !important;
}

.bg-aquamarine {
  background-color: #17e79b !important;
}

.bg-orange {
  background-color: #f28e1c !important;
}

.bg-red {
  background-color: #f93542 !important;
}

.bg-yollow {
  background-color: #ffc329 !important;
}

.bg-gray {
  background-color: #6c7a87 !important;
}

.bg-light {
  background-color: #9da6af !important;
}

.bg-beiget {
  background-color: #ffe7aa !important;
}

.bg-sandy-cream {
  background-color: #fff0ce !important;
}

.bg-skuy {
  background-color: #6bb0f8 !important;
}

.bg-magenta {
  background-color: #fd4ffe !important;
}

.bg-green2 {
  background-color: #31d1ab !important;
}

.bg-currency-d {
  background-color: #29013e !important;
}

.bg-orange-red {
  background-color: #fd6b3b !important;
}

.bg-currency-p {
  background-color: #aa9bb3 !important;
}

.bg-sea {
  background-color: #4d81f7 !important;
}

.bg-purple {
  background-color: #6f5fa6 !important;
}

.bg-lightgreen {
  background-color: #7bd88a !important;
}

.bg-black {
  background-color: #000 !important;
}

.bg-snow {
  background-color: #f7f8fa !important;
}

.bg-blue2 {
  background-color: #3875f7 !important;
}

.bg-orange2 {
  background-color: #fd7028 !important;
}

.font-8 {
  font-size: 8px;
}

img {
  border: 0;
}

body.is-dark h1, body.is-dark h2, body.is-dark h3, body.is-dark h4, body.is-dark h5, body.is-dark h6, body.is-dark p, body.is-dark div, body.is-dark li, body.is-dark ul, body.is-dark a, body.is-dark button, body.is-dark .bio-courses-card-v1 .course-detials *, body.is-dark .product-card-v2 *, body.is-dark .sandy-compact-embed * {
  color: #fff;
}

.sandy-tabs-item {
  display: none;
}

[data-sandy-open] {
  display: none;
}

.sandy-btn {
  text-transform: none;
  font-size: 0.9rem;
  line-height: 1.47;
  display: block;
  transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  color: #000;
  padding: 0.6rem 1.25rem 0.75rem;
  border-radius: 16px/16px;
}
.sandy-btn:hover {
  color: #000;
}
.sandy-btn:hover .hover {
  transform: translateZ(0) translate(-50%, 50%) scale(1);
}
.sandy-btn:hover .background {
  opacity: 0;
}
.sandy-btn .background {
  position: absolute;
  display: block;
  background: #f7f9fb;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sandy-btn .hover {
  background: #5DC2D3;
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  transform: translateZ(0) translate(-50%, 50%) scale(0);
  FONT-WEIGHT: 200;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
  pointer-events: none;
  width: 250%;
  height: 250%;
  display: block;
  position: absolute;
}
.sandy-btn .text {
  position: relative;
}

.sandy-accordion {
  border-top: 1px solid #E6E8EC;
}
.sandy-accordion.active .sandy-accordion-head::before {
  transform: translateY(-50%) rotate(180deg);
}
.sandy-accordion .sandy-accordion-head {
  position: relative;
  padding: 32px 40px 32px 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: color 0.2s;
}
.sandy-accordion .sandy-accordion-head::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath fill-rule='evenodd' d='M9.207.793a1 1 0 0 0-1.414 0L5 3.586 2.207.793A1 1 0 1 0 .793 2.207l3.5 3.5a1 1 0 0 0 1.414 0l3.5-3.5a1 1 0 0 0 0-1.414z' fill='%23777e91'/%3E%3C/svg%3E") no-repeat 50% 50%/100% auto;
  transition: transform 0.2s;
}
.sandy-accordion .sandy-accordion-body {
  display: none;
  padding-bottom: 32px;
  font-size: 16px;
  line-height: 1.5;
  color: #777E90;
}

.form-wrap label {
  color: #adafca;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  margin-bottom: 10px;
}

.fp-fontspec {
  font-family: inherit;
}

.font-picker .fp-modal {
  width: 450px;
  padding: 20px;
}
.font-picker .fp-modal .fp-filter {
  border: 0;
}
.font-picker .fp-modal .fp-filter .fp-search-wrap {
  width: 100%;
}
.font-picker .fp-modal .fp-filter .fp-search-wrap .fp-search {
  height: 40px;
  background: #f5f6f8;
  border: 0;
}
.font-picker .fp-modal .fp-filter .fp-lang {
  display: none;
}
.font-picker .fp-modal .fp-filter .fp-category {
  display: none;
}
.font-picker .fp-sample {
  height: 70px;
  padding: 0 10px;
  border: 0;
}
.font-picker .fp-results li {
  margin: 15px 0;
}
.font-picker .fp-results .fp-divider {
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  margin: 17px 0;
  border: 0;
}

.form-input {
  position: relative;
}
.form-input.is-disabled {
  opacity: 0.7;
}
.form-input.is-disabled input, .form-input.is-disabled textarea, .form-input.is-disabled select {
  background: #f8f9fb !important;
  pointer-events: none;
}
.form-input .invalid-feedback {
  color: #f43636;
  font-size: 14px;
  margin: 7px 10px;
  display: block;
}
.form-input .password-strength-indicator {
  width: calc(100% - 28px);
  height: 4px;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 13px;
  margin-right: 13px;
}
.form-input .password-strength-indicator [strength-bar] {
  background: #d8d9da;
  border-radius: 24px;
  flex: 1;
  height: 4px;
  margin-left: 1px;
  margin-right: 1px;
  width: 25%;
}
.form-input .password-strength-indicator [strength-bar].bad {
  background: #ff2934;
}
.form-input .password-strength-indicator [strength-bar].mediocre {
  background: #ffcd38;
}
.form-input .password-strength-indicator [strength-bar].strong {
  background: #19d681;
}
.form-input.pre .input-side-pre {
  background: #eceff3;
  width: 100%;
  padding: 17px;
}
.form-input .text-count-field {
  position: absolute;
  right: 0;
  font-size: 0.75rem;
  background: #fff;
  padding: 0 15px;
  top: -6px;
  color: #adafca;
  border-radius: 0px;
  transition: 0.6s;
  z-index: 999;
  border: 1px solid #fff;
}
.form-input.active label {
  background-color: #fff;
  padding: 0 6px;
  font-size: 0.75rem;
  top: -6px;
  left: 12px;
}
.form-input label {
  color: #adafca;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 16.5px;
  left: 17px;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  box-shadow: none;
}
.form-input label.initial {
  position: initial;
  margin-bottom: 10px;
}
.form-input input {
  height: 54px;
  font-size: 14px;
}
.form-input textarea.no-resize {
  resize: none;
}
.form-input input, .form-input textarea {
  background: #f5f6f8;
  border: 0;
  border-radius: 16px;
  padding: 18px;
  width: 100%;
}
body.is-dark .form-input input, body.is-dark .form-input textarea {
  background: #000;
}
.form-input input:focus, .form-input input:focus-visible, .form-input textarea:focus, .form-input textarea:focus-visible {
  border: 0;
  outline: 0 !important;
}
.form-input input.bg-w, .form-input textarea.bg-w {
  background-color: #fff;
}
.form-input .initial + select, .form-input .initial + input, .form-input .initial + textarea {
  margin-top: 10px;
}
.form-input select {
  height: 56px;
  padding-left: 20px;
  padding-right: 45px;
  border-radius: 16px;
  border: none;
  float: none;
  line-height: 56px;
  font-weight: 600;
  transition: all 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: #f5f6f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath d='M10.281.305L5.988 4.598 1.695.305A1 1 0 0 0 .293.317a1 1 0 0 0-.012 1.402l5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-.441-1.687 1 1 0 0 0-.973.273z' fill='%2311142d'/%3E%3C/svg%3E") no-repeat right 1rem center/8px 10px;
}
.form-input select.bg-w {
  background-color: #fff;
}
.form-input.is-password input {
  padding-right: 56px;
}
.form-input.is-password .show-password {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-input.is-password .show-password i {
  font-size: 17px;
}
.form-input.is-link .is-link-inner {
  display: flex;
  background: #f5f6f8;
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: 100%;
  height: 54px;
}
.form-input.is-link .is-link-inner .side-info {
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #686d73;
  padding-right: 10px;
}
.form-input.is-link .is-link-inner input {
  background: transparent;
  padding-left: 5px;
}
.form-input.copy input {
  background: rgba(228, 228, 228, 0.24);
  padding-right: 56px;
}
.form-input.copy .copy-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-input.copy .copy-btn i {
  font-size: 17px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
}
.social-links.is-auth {
  flex-wrap: unset;
  flex-wrap: initial;
}
.social-links.is-auth .google {
  border: 1px solid #e5e7eb;
  background: transparent !important;
}
.social-links.is-auth .social-link {
  width: 100%;
  height: 50px;
  border-radius: 5px;
  font-size: 20px;
}
.social-links.is-auth .social-link:not(:last-child) {
  margin-right: 15px;
}
.social-links.is-auth .social-link svg {
  width: 30px;
  height: 30px;
}
.social-links .social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  transition: transform 0.2s ease-in-out;
  margin-right: 12px;
  background: #000;
}
.social-links .social-link:hover {
  transform: translateY(-4px);
}
.social-links .social-link.add {
  border: 2px dashed #000;
  background: transparent;
}
.social-links .social-link.add i {
  color: #000;
}
.social-links .social-link i {
  color: #fff;
}
.social-links .social-link:last-child {
  margin-right: 0;
}
.social-links .social-link.googleplus {
  background-color: #dd4b39;
}
.social-links .social-link.pinterest {
  background-color: #cb2027;
}
.social-links .social-link.linkedin {
  background-color: #007bb6;
}
.social-links .social-link.youtube {
  background-color: #bb0000;
}
.social-links .social-link.vimeo {
  background-color: #aad450;
}
.social-links .social-link.tumblr {
  background-color: #32506d;
}
.social-links .social-link.instagram {
  background-color: #517fa4;
}
.social-links .social-link.flickr {
  background-color: #ff0084;
}
.social-links .social-link.dribbble {
  background-color: #ea4c89;
}
.social-links .social-link.quora {
  background-color: #a82400;
}
.social-links .social-link.foursquare {
  background-color: #0072b1;
}
.social-links .social-link.forrst {
  background-color: #5b9A68;
}
.social-links .social-link.wordpress {
  background-color: #21759b;
}
.social-links .social-link.stumbleupon {
  background-color: #eb4823;
}
.social-links .social-link.yahoo {
  background-color: #7b0099;
}
.social-links .social-link.blogger {
  background-color: #fb8f3d;
}
.social-links .social-link.github {
  background-color: #333333;
}
.social-links .social-link.vine {
  background-color: #00bf8f;
}
.social-links .social-link.rss {
  background-color: #ff9900;
}
.social-links .social-link.snapchat {
  background-color: #fffc00;
  color: #333;
}
.social-links .social-link.facebook {
  background-color: #3b5998;
}
.social-links .social-link.twitter {
  background-color: #1abcff;
}
.social-links .social-link.twitch {
  background-color: #7b5dfa;
}
.social-links .social-link.patreon {
  background-color: #ff7a51;
}
.social-links .social-link.discord {
  background-color: #7289da;
}
.social-links .social-link.google {
  background-color: #ffc529;
}
.social-links .social-link.behance {
  background-color: #3486f5;
}
.social-links .social-link.deviantart {
  background-color: #32e1d3;
}
.social-links .social-link.artstation {
  background-color: #00e194;
}
.social-links .social-link.whatsapp {
  background: #4dc247;
}
.social-links .social-link.void {
  background-color: #fff;
  box-shadow: 3px 5px 20px 0 rgba(94, 92, 154, 0.12);
}
.social-links .social-link.void.facebook .icon-facebook {
  color: #3763d2;
}
.social-links .social-link.void.twitter .icon-twitter {
  color: #1abcff;
}

.highlights {
  display: flex;
  overflow-x: auto;
  min-height: 10em;
  align-items: center;
  scrollbar-width: none;
}
.highlights::before, .highlights::after {
  content: "";
  display: block;
  padding: 17px;
}
.highlights .highlights-inner {
  display: flex;
  width: 100%;
}
.highlights .simplebar-track.simplebar-horizontal {
  visibility: visible !important;
}
.highlights .simplebar-content {
  flex-direction: row;
}
.highlights .lighting {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  position: absolute !important;
  right: 0;
  top: 0;
  font-weight: 500;
  background: linear-gradient(190deg, #0000002e, #0000);
  border-radius: inherit;
}
.highlights .lighting i {
  font-size: 15px;
  color: #fff;
}
.highlights .highlight {
  margin: 10px 22px 10px 0;
  height: 90px;
  width: 90px;
  min-width: 90px;
  position: relative;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.highlights .highlight:hover {
  transform: translateY(-4px);
}
.highlights .highlight:last-child {
  margin-right: 0;
}
.highlights .highlight:not(.add)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #00000042);
  border-radius: inherit;
}
.highlights .highlight.add {
  border: 2px dashed #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.highlights .highlight.add i {
  font-size: 20px;
}
.highlights .highlight p {
  bottom: 7px;
  font-size: 12px;
  left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
  text-align: center;
}
.highlights .highlight .thumbnail {
  width: inherit;
  height: inherit;
  border-radius: inherit;
}
.highlights .highlight .thumbnail img, .highlights .highlight .thumbnail .image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}

.thumbnail-upload {
  position: relative;
  display: flex;
}
.thumbnail-upload .button {
  background-color: #fff;
  padding: 0 6px;
  font-size: 0.75rem;
  box-shadow: none;
  font-weight: 600;
  color: #adafca;
}
.thumbnail-upload.boxed {
  height: 100%;
  width: 150px;
}
.thumbnail-upload.boxed .thumbnail {
  padding: initial;
  box-shadow: none;
  position: relative;
  z-index: 1;
  background: transparent;
}
.thumbnail-upload.boxed .thumbnail img {
  height: 150px;
  width: 150px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 15px;
  border: 0;
  padding: 7px;
}
.thumbnail-upload.boxed .thumbnail::before, .thumbnail-upload.boxed .thumbnail::after {
  content: "";
  position: absolute;
  border-radius: 16px;
}
.thumbnail-upload.boxed .thumbnail::before {
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: -5px;
  z-index: -2;
  background: #27baf12b;
}
.thumbnail-upload.boxed .thumbnail::after {
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 1px;
  z-index: -1;
  background: #34b3e28c;
}
.thumbnail-upload .thumbnail {
  padding: 6px;
  background: #fff;
  border-radius: 550px;
  box-shadow: 0px 5px 20px rgba(126, 142, 177, 0.2);
}
.thumbnail-upload .thumbnail img {
  height: 50px;
  width: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 550px;
}
.thumbnail-upload .content {
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.thumbnail-upload .content h5 {
  font-size: 14px;
}
.thumbnail-upload input[type=file] {
  position: absolute;
  cursor: pointer;
  z-index: 59;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}

.avatar-upload {
  position: relative;
  display: flex;
}
.avatar-upload .avatar {
  padding: 6px;
  background: #fff;
  border-radius: 550px;
  box-shadow: 0px 5px 20px rgba(126, 142, 177, 0.2);
}
.avatar-upload .avatar img {
  height: 50px;
  width: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 550px;
}
.avatar-upload .content {
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.avatar-upload .content h5 {
  font-size: 14px;
}
.avatar-upload input[type=file] {
  position: absolute;
  cursor: pointer;
  z-index: 59;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}

.inner-page-banner {
  min-height: 200px;
  background: #f5f7fc;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inner-page-banner.remove-min-height {
  min-height: initial;
}
.inner-page-banner.preview {
  position: relative;
  justify-content: initial;
}
@media (max-width: 768px) {
  .inner-page-banner.preview {
    padding: 20px;
  }
}
.inner-page-banner.preview::after {
  position: absolute;
  background: var(--elem-color, none);
  opacity: 0.2;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.inner-page-banner.preview .h-avatar {
  width: 76px;
  height: 72px;
  font-size: 30px;
}
.inner-page-banner.preview .thumbnail {
  display: flex;
}
.inner-page-banner.preview .thumbnail .thumbnail-inner {
  width: 75px;
  height: 75px;
}
.inner-page-banner.preview .thumbnail img {
  width: inherit;
  height: inherit;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}
.inner-page-banner.preview .content {
  padding-top: 10px;
}
.inner-page-banner.preview .content .title {
  font-size: 22px;
  font-weight: bold;
}
.inner-page-banner.preview .content .title + p {
  margin-top: 5px;
}
.inner-page-banner.preview .content .use-button {
  height: 30px;
  padding: 0 19px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 3px 5px 20px 0 rgba(94, 92, 154, 0.12);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 32px;
  display: inline-flex;
  margin-top: 9px;
}
.inner-page-banner h1 {
  font-size: 21px;
  margin-bottom: 10px;
}
.inner-page-banner p {
  font-size: 13px;
}

#app-sandy-mix {
  background: #f1f1f1;
  overflow: hidden;
}
#app-sandy-mix .user-list {
  min-height: 44px;
  padding: 4px 0 0 55px;
  position: relative;
  margin-bottom: 22px;
}
#app-sandy-mix .user-list:last-child {
  margin-bottom: 0;
}
#app-sandy-mix .user-list .highlighted {
  color: #00c7d9;
  font-weight: 600;
}
#app-sandy-mix .user-list .bold {
  color: #3e3f5e;
  font-weight: 700;
}
#app-sandy-mix .user-list .activity-reaction {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 5%;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}
#app-sandy-mix .user-list .activity-reaction i {
  font-size: 20px;
  color: #fff;
}
#app-sandy-mix .user-list .user-list-title {
  color: #3e3f5e;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4em;
}
#app-sandy-mix .user-list .user-list-timestamp {
  margin-top: 4px;
  color: #8f91ac;
  font-size: 10px;
  font-weight: 200;
}
#app-sandy-mix .header {
  width: 700px;
  margin: auto;
  background: #F4F4F4;
  height: 60px;
  z-index: 1001;
  position: relative;
  max-width: 100%;
  padding: 10px;
  left: inherit;
  right: initial;
  top: initial;
  display: block;
  box-shadow: none;
}
#app-sandy-mix .header .header-brand {
  margin-right: auto;
}
#app-sandy-mix .header .header-actions {
  height: 100%;
}
#app-sandy-mix .border-types {
  display: flex;
  justify-content: space-between;
}
#app-sandy-mix .border-types .border {
  width: calc(33% - 8px);
  padding: 9px;
  border: 2px solid;
}
#app-sandy-mix .border-types .border img {
  height: 100%;
  width: 34px;
  background: black none repeat scroll 0% 0%;
}
#app-sandy-mix .border-types .border.round {
  border-radius: 15px;
}
#app-sandy-mix .border-types .border.round img {
  border-radius: 10px;
}
#app-sandy-mix .border-types .border.rounded {
  border-radius: 550px;
}
#app-sandy-mix .border-types .border.rounded img {
  border-radius: 550px;
}
#app-sandy-mix .card.customize {
  padding: 20px;
  background: #f5f7fc;
  border-radius: 1rem;
}
#app-sandy-mix .card.customize .card-header .title {
  font-size: 16px;
  margin-bottom: 0.38rem;
}
#app-sandy-mix .card.customize .card-header .subtitle {
  font-size: 12px;
  line-height: 1.5;
}
#app-sandy-mix .app-tile {
  flex: 0 1 130px;
  margin-bottom: 10px;
  padding-bottom: 0px;
  border-bottom: none;
  padding: 0px;
  align-items: center;
  display: flex;
  position: relative;
  z-index: 50;
}
#app-sandy-mix .app-tile .app-tile-box {
  width: 100%;
  border-radius: 6px;
  padding: 22px;
  background-color: #f5f7fc;
  text-decoration: none;
  color: #3E4B5B;
  transition: all 0.25s ease;
  display: flex;
  position: relative;
}
#app-sandy-mix .app-tile .app-tile-box::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: -8px;
  z-index: -1;
  border-radius: 24px;
  background: #f5f7fc;
  opacity: 0.57;
}
#app-sandy-mix .app-tile .app-tile-box::after {
  background: var(--elem-color, none);
  opacity: 0.2;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
#app-sandy-mix .app-tile .app-tile-box::before, #app-sandy-mix .app-tile .app-tile-box::after {
  content: "";
  position: absolute;
  border-radius: 24px;
}
@media (max-width: 768px) {
  #app-sandy-mix .app-tile .app-tile-box {
    display: block;
  }
  #app-sandy-mix .app-tile .app-tile-box .content {
    margin-left: 0 !important;
    margin-top: 13px;
  }
}
#app-sandy-mix .app-tile .app-tile-box .thumbnail {
  height: 100px;
  width: 70px;
  font-size: 35px;
}
@media (max-width: 768px) {
  #app-sandy-mix .app-tile .app-tile-box .thumbnail {
    height: 70px;
    width: 70px;
  }
}
#app-sandy-mix .app-tile .app-tile-box .thumbnail img {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 19%;
}
#app-sandy-mix .app-tile .app-tile-box .content {
  margin-left: 13px;
  width: 100%;
  display: flex;
}
#app-sandy-mix .app-tile .app-tile-box .description {
  font-size: 12px;
}
#app-sandy-mix .app-tile .app-tile-box .action-a {
  margin-left: auto;
}
#app-sandy-mix .app-tile .app-tile-box .name {
  border-top: none;
  padding-top: 0px;
  text-transform: none;
  font-size: 0.9rem;
  line-height: 1.2;
  font-weight: 900;
  display: block;
}
#app-sandy-mix .menu-main {
  display: flex;
  height: 100%;
  align-items: center;
}
#app-sandy-mix .menu-main .menu-main-item {
  position: relative;
}
#app-sandy-mix .menu-main .menu-main-item .menu-main-item-link {
  padding: 0 24px;
  display: block;
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 80px;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
#app-sandy-mix .bio-username-text {
  font-size: 13px;
  color: #78797c;
  margin-top: 2px;
}
body.is-dark #app-sandy-mix .bio-username-text {
  color: #fff;
}
#app-sandy-mix .bio-name-text {
  font-weight: 800;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
  color: #000000;
}
body.is-dark #app-sandy-mix .bio-name-text {
  color: #fff;
}
#app-sandy-mix .avatar-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#app-sandy-mix .avatar-thumb .avatar-container {
  height: 80px;
  max-width: 80px;
  position: relative;
}
#app-sandy-mix .avatar-thumb .avatar-container .thumb {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
}
#app-sandy-mix .avatar-thumb .avatar-container .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
#app-sandy-mix .avatar-thumb .avatar-container .action {
  position: absolute;
  z-index: 2;
  height: 37px;
  width: 37px;
  border-radius: 550px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  right: -7px;
  top: 64px;
  cursor: pointer;
}
#app-sandy-mix .avatar-thumb .avatar-container .action input {
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#app-sandy-mix .boxed-card .boxed-inner {
  color: #484848;
  padding: 20px 0;
  cursor: pointer;
  border-bottom: 0px solid #ebebeb;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding-bottom: 25px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1px;
}
#app-sandy-mix .boxed-card .boxed-inner a {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#app-sandy-mix .boxed-card .boxed-inner a i {
  font-size: 18px;
  -webkit-text-stroke: 0.2px;
}
#app-sandy-mix #content {
  width: 700px;
  margin: auto;
  min-height: 100vh;
  max-width: 100%;
}
#app-sandy-mix .default-bio-banner {
  height: 312px;
  position: relative;
  transition: 0.5s;
  z-index: 10;
  border-radius: 22px;
}
#app-sandy-mix .default-bio-banner.active {
  z-index: 99999;
}
#app-sandy-mix .default-bio-banner.active .bio-background {
  padding-bottom: 100%;
  position: absolute;
  height: 100%;
  box-shadow: 0px 16px 32px 0 rgba(31, 47, 70, 0.4);
}
#app-sandy-mix .default-bio-banner.active .bio-background .gradient-color {
  padding-bottom: 100%;
}
#app-sandy-mix .default-bio-banner .bio-background {
  display: block !important;
  position: relative;
  transition: 0.5s;
}
#app-sandy-mix .default-bio-banner .bio-background * {
  border-radius: 15px !important;
}
#app-sandy-mix .context-head {
  padding-top: 0 !important;
  margin-top: -3rem;
  padding: 7em 1.25rem 0 1.25em;
}
#app-sandy-mix .gallery.preview {
  display: flex;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  overflow: auto;
  align-items: center;
  margin-top: 20px;
  width: 100%;
}
#app-sandy-mix .gallery.preview .gallery-single {
  scroll-snap-align: start;
  padding-left: 16px;
}
#app-sandy-mix .gallery.preview .gallery-single .gallery-single-inner {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f4f4f4;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  height: 420px;
  min-height: 420px;
  max-height: 420px;
  position: relative;
}
#app-sandy-mix .gallery.preview .gallery-single .gallery-single-inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  overflow: hidden;
}
#app-sandy-mix .action-list {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
}
#app-sandy-mix .action-list .action-list-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: 0.3s;
  color: var(--c-bottom-bar-text); /* Apply bottom bar text color */
  margin-bottom:10px;
}
#app-sandy-mix .action-list .action-list-item.is-huge {
  position: relative;
  background: transparent !important;
}
#app-sandy-mix .action-list .action-list-item.is-huge .huge-icon {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -25px;
  border-radius: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  background: #fff;
}
#app-sandy-mix .action-list .action-list-item.is-huge i {
  color: #000;
  font-size: 20px;
  margin: 0 !important;
}
#app-sandy-mix .action-list .action-list-item.is-huge svg {
  width: 30px;
  height: 23px;
}
#app-sandy-mix .action-list .action-list-item.active i {
  margin-right: 10px;
}
@media (max-width: 768px) {
  #app-sandy-mix .action-list .action-list-item.active i {
    font-size: 17px;
  }
}
#app-sandy-mix .action-list .action-list-item.active span {
  opacity: 1 !important;
  position: relative;
  right: 0;
}
@media (max-width: 768px) {
  #app-sandy-mix .action-list .action-list-item.active span {
    font-size: 11px;
  }
}
#app-sandy-mix .action-list .action-list-item i {
  font-size: 20px;
  -webkit-text-stroke: 0.2px;
}
#app-sandy-mix .action-list .action-list-item span {
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.06px;
  display: block;
  margin-top: 4px;
  color: #000;
}

.landing-banner {
  height: 100%;
  max-height: 100vh;
  width: 100%;
  position: relative;
}
.landing-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.65;
}
@media (max-width: 768px) {
  .landing-banner {
    height: 33vh;
  }
}
.landing-banner img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}
.landing-banner .banner-texts {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 50px 50px 0;
}
.landing-banner .banner-texts .title-sections::after {
  background-color: #16f5f5 !important;
}
@media (max-width: 768px) {
  .landing-banner .banner-texts .list-point {
    display: none;
  }
}

.landing-form {
  position: relative;
  right: initial;
  top: initial;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
@media (max-width: 768px) {
  .landing-form {
    align-items: start;
  }
}
.landing-form .form-box {
  padding: 54px;
  box-shadow: none;
  margin-top: 0;
  position: relative;
  top: 0;
}
@media (max-width: 768px) {
  .landing-form .form-box {
    padding: 0 25px;
    width: 90%;
  }
}
@media (min-width: 991px) {
  .landing-form .form-box {
    width: 604px;
  }
}
.landing-form .form-box .form-box-title {
  margin-bottom: 10px;
  text-align: left;
}
.landing-form .form-row + .form-row {
  margin-top: 40px;
}

.meta-app {
  width: 100%;
  display: flex;
  align-items: center;
  color: #000;
}
.meta-app .thumbnail {
  height: 40px;
  width: 40px;
  border-radius: 5px;
  background-size: cover;
  margin-right: 15px;
}
.meta-app .content .title {
  font-size: 14px;
}
.meta-app .content span {
  font-size: 11px;
}
.meta-app a {
  position: absolute;
  right: 42px;
  height: 30px;
  padding: 0 19px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 3px 5px 20px 0 rgba(94, 92, 154, 0.12);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 32px;
  display: inline-flex;
  margin-top: 9px;
}

#app-sandy-mix.is-bio {
  background: #fff;
  overflow: auto;
}
body.is-dark #app-sandy-mix.is-bio {
  background: #000;
}
body.is-dark #app-sandy-mix.is-bio #content {
  background: #000;
}
#app-sandy-mix.is-bio .bio-menu {
  width: 700px;
  max-width: 100%;
  margin: auto;
  position: fixed;
  z-index: 9999;
}
#app-sandy-mix.is-bio .bio-menu.is-element .bio-menu-container {
  height: 70px !important;
  opacity: 1 !important;
}
#app-sandy-mix.is-bio .bio-menu.is-element .bio-menu-container .bio-menu-info .social-modal {
  margin-left: 0;
  margin-right: auto;
}
#app-sandy-mix.is-bio .bio-menu .bio-menu-container {
  background: rgba(255, 255, 255, 0.93);
  display: flex;
  height: 70px;
  align-items: center;
  transition: 0.2s;
  opacity: 1;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  #app-sandy-mix.is-bio .bio-menu .bio-menu-container {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.62);
  }
}
body.is-dark #app-sandy-mix.is-bio .bio-menu .bio-menu-container {
  background: rgba(45, 44, 44, 0.6);
}
#app-sandy-mix.is-bio .bio-menu .bio-menu-info {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 18px 20px;
}
#app-sandy-mix.is-bio .bio-menu .bio-menu-info .bio-name-text {
  font-size: 16px;
  margin-left: 17px;
}
#app-sandy-mix.is-bio .bio-menu .bio-menu-info .social-modal {
  margin-left: auto;
  cursor: pointer;
}
#app-sandy-mix.is-bio .bio-menu .bio-menu-info .social-modal i {
  font-size: 20px;
}
#app-sandy-mix.is-bio .bio-menu .user-img img {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
}
#app-sandy-mix.is-bio #content {
  box-shadow: none !important;
}
#app-sandy-mix.is-bio #content .simplebar-content {
  padding: 0 !important;
}
#app-sandy-mix.is-bio .bio-dark {
  position: fixed;
  left: 30px;
  bottom: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 200px;
  background: #ffffff;
  color: #000;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  font-size: 20px;
}
#app-sandy-mix.is-bio .bio-dark i {
  color: #000;
}
#app-sandy-mix.is-bio .bio-dark input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
@media (max-width: 600px) {
  #app-sandy-mix.is-bio .bio-dark {
    left: auto;
    z-index: 99;
    right: 20px;
    width: 40px;
    height: 40px;
  }
  #app-sandy-mix.is-bio .bio-dark input {
    z-index: 100;
  }
}

.context-body {
  margin-top: -3em;
  z-index: 999;
  border-radius: 25px 25px 0 0;
  padding-top: 2em;
  height: 100%;
  background: #f5f7fc;
}
body.has-background .context-body {
  background: rgba(255, 255, 255, 0.25);
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  body.has-background .context-body {
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
}
body.is-dark .context-body {
  background: #222;
}

.context .context-head {
  padding-bottom: 6em;
  background: #fff;
  padding-top: 7rem !important;
}
.context .avatar-thumb {
  display: flex;
}
.context .avatar-thumb .bio-info-container {
  margin-left: 15px;
  margin-top: 1.5em;
}
.context .context-title {
  padding: 10px 14px;
  margin: 20px 0;
  border-radius: 20px;
}
.context .context-title h4 {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.context .context-links {
  background: #f5f7fc;
}
.context .context-links .links .link {
  position: relative;
  margin-bottom: 15px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.context .context-links .links .link:hover {
  transform: translateY(-4px);
}
.context .context-links .links .link:last-child {
  margin-bottom: 0;
}
.context .context-links .links .link::before {
  top: 5px;
  left: 6px;
  right: 6px;
  bottom: -3px;
  z-index: 1;
  border-radius: 5px;
  background: rgba(247, 214, 214, 0.79);
  position: absolute;
  content: "";
}
.context .context-links .links .link .link-container {
  display: flex;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  z-index: 2;
  position: relative;
}
.context .context-links .links .link .thumbnail {
  margin-left: auto;
  margin-left: 0;
  position: absolute;
  left: 10px;
}
.context .context-links .links .link .thumbnail img, .context .context-links .links .link .thumbnail .image {
  height: 40px;
  width: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  background-position: center;
  border-radius: 550px;
}
.context .context-links .links .link .icon {
  position: absolute;
  right: 10px;
  color: #000;
  font-size: 18px;
}
.context .context-links .links .link .icon .sio {
  font-size: 23px;
}
.context .context-links .links .link .content-container .content p {
  font-size: 14px;
  color: #000;
}
.context .context-links .links .link .content-container .content-type {
  font-size: 11px;
  color: #4f4f4f;
}
.context .context-add-item .context-add {
  padding: 0;
  background: #fff;
  display: flex;
}
.context .context-add-item .context-add .view, .context .context-add-item .context-add .setting {
  background: #f5f7fc;
  width: 80px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0000007d;
}
.context .context-add-item .step-banner::before {
  background: #dde4f5;
  bottom: -9px;
}
.context .context-add-item .step-banner::after {
  bottom: -5px;
  background: #00000036;
}
.context .context-add-item .add-item {
  border: 2px dashed #ccc;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  height: 70px;
  width: 100%;
  font-size: 17px;
  padding: 0 35px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}
.context .context-add-item .add-item span {
  color: #383838;
  font-size: 13px;
  margin-right: 11px;
}
.context .context-add-item .add-item i {
  border: 1px dashed #ccc;
  padding: 11px;
  border-radius: 550px;
  color: #000;
}
.context.bio.a-right .context-head .avatar-thumb {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.context.bio.a-right .context-highlights, .context.bio.a-right .context-social {
  display: flex;
}
.context.bio.a-center .context-head {
  text-align: center;
}
.context.bio.a-center .context-head .avatar-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.context.bio.a-center .context-head .bio-info-container {
  margin-left: 0;
}
.context.bio.a-center .context-highlights .highlights-inner, .context.bio.a-center .context-social {
  display: flex;
  justify-content: center;
}
.context.bio .bio-des {
  line-height: 1.66 !important;
}
body.is-dark .context.bio .bio-des {
  color: #fff;
}
.context.bio .context-links {
  background: transparent;
}
.context.bio .context-links .links .link {
  height: 60px;
}
.context.bio .context-links .links .link::before {
  content: initial;
}
.context.bio .context-links .links .link .link-container {
  height: 100%;
  justify-content: center;
  align-items: center;
}
.context.bio .context-links .links .link .thumbnail {
  margin-left: 0;
  position: absolute;
  left: 10px;
}
.context.bio .context-links .links .link .thumbnail img {
  width: 37px;
  height: 37px;
}

.sandy-select {
  box-sizing: border-box;
  clear: both;
  font-size: 1rem;
  position: relative;
  text-align: inherit;
}
.sandy-select .sandy-select-inner {
  width: 100%;
  z-index: 3;
}
.sandy-select .select-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 13px;
  width: 100%;
  border-radius: 10px;
  color: #999;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
}
.sandy-select .select-icon {
  position: absolute;
  top: 50%;
  right: 0;
  width: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 10px;
}
.sandy-select .select-drop {
  position: absolute;
  top: -270px;
  left: 0;
  width: 100%;
  max-height: -300px;
  overflow-y: auto;
  background: #fff;
  border-radius: 15px;
  z-index: 5;
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  padding: 20px;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  scrollbar-width: none;
  z-index: 9999999;
}
.sandy-select .drop-inner {
  position: relative;
}
.sandy-select .drop-inner .meta-app a {
  right: 4px;
}
.sandy-select .drop-inner .option-row {
  padding: 14px 0;
  border-bottom: 1px solid #f7f2f2;
  position: relative;
}
.sandy-select .drop-inner .option-row:last-child {
  border-bottom: 0;
}
.sandy-select .drop-inner .option-row:first-child {
  padding-top: 0;
}
.sandy-select .drop-inner .option-row input {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.sandy-select.is-active .select-drop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.link-thumbnail {
  width: 186px;
  height: 186px;
  border-radius: 10px;
  background: #f4f4f4 none repeat scroll 0% 0%;
  display: flex;
  position: relative;
}
.link-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
.link-thumbnail .action {
  position: absolute;
  z-index: 2;
  top: 69px;
  right: -24px;
  width: 48px;
  height: 48px;
  border-radius: 10%;
  border: 2px solid white;
  background-color: #f4f4f4;
  color: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.link-thumbnail .action i {
  font-size: 20px;
}

.link-types-box {
  display: -ms-flexbox;
  display: block;
  justify-content: space-between;
  align-items: center;
  padding: 28px;
  border-radius: 15px;
  background: #25e0f3;
  box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06);
}
.link-types-box .link-type-box-info-wrap {
  display: flex;
  align-items: center;
}
.link-types-box .link-type-box-info-wrap .box-info {
  margin-left: 13px;
}
.link-types-box .link-type-box-info-wrap img {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
.link-types-box .link-type-box-info-wrap .box-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.link-types-box .link-type-box-info-wrap .box-text {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
}

.text-sticker-v2 {
  display: inline-block;
  overflow: hidden;
  outline: none;
  background: #ebeef0;
  color: #394047;
  text-decoration: none !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  fill: #fff;
  font-weight: 500;
  border-radius: 3px;
  transition: all 0.2s ease;
  transition-property: color, border-color, background, width, height, box-shadow;
  -webkit-font-smoothing: subpixel-antialiased;
  padding: 0 14px;
  height: 34px;
  font-size: 12px;
  line-height: 34px;
  text-align: center;
  letter-spacing: 0.2px;
  border-radius: 3px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.is-dark .text-sticker-v2 {
  background: #171719;
  color: #fff !important;
}

.text-sticker {
  height: 30px;
  padding: 0 19px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 3px 5px 20px 0 rgba(94, 92, 154, 0.12);
  font-size: 0.875rem;
  font-weight: 700;
  color: white;
  line-height: 32px;
  display: inline-flex;
  margin-top: 9px;
  text-shadow: none !important;
  outline: none !important;
}
.text-sticker2 {
  height: 30px;
  padding: 0 19px;
  border-radius: 10px;
  background-color: black;
  box-shadow: 3px 5px 20px 0 rgba(94, 92, 154, 0.12);
  font-size: 0.875rem;
  font-weight: 700;
  color: white;
  line-height: 32px;
  display: inline-flex;
  margin-top: 9px;
  text-shadow: none !important;
  outline: none !important;
}
.text-sticker3 {
  height: 30px;
  padding: 0 19px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: 3px 5px 20px 0 rgba(94, 92, 154, 0.12);
  font-size: 0.875rem;
  font-weight: 700;
  color: black;
  line-height: 32px;
  display: inline-flex;
  margin-top: 9px;
  text-shadow: none !important;
  outline: none !important;
}
body.is-dark .text-sticker {
  background: #222;
}
.text-sticker.secondary-box {
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}
.text-sticker.is-submit {
  background: #27baf1;
  color: #fff;
}
.text-sticker.xs {
  width: 30px;
  padding: 0;
}
.text-sticker .has-loader {
  font-size: 2.5px;
}
.text-sticker .highlighted {
  color: #00c7d9;
  margin-right: 5px;
}
.text-sticker.success {
  color: #267338;
  background-color: #c6eccf;
}
.text-sticker.danger {
  color: #981b27;
  background-color: #f4bec3;
}
.text-sticker.info {
  color: #1f6e7a;
  background-color: #bbeff7;
}
.text-sticker.no-shadow {
  box-shadow: none;
}

.sandy-big-checkbox {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: column;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.sandy-big-checkbox .sandy-input-inner {
  opacity: 0;
  position: absolute;
}
.sandy-big-checkbox .sandy-input-inner:checked + .checkbox-inner {
  background: #fff;
  box-shadow: none;
  color: black;
}
.sandy-big-checkbox .sandy-input-inner:checked + .checkbox-inner .active-dot {
  background: #000;
}
.sandy-big-checkbox .sandy-input-inner:checked + .checkbox-inner .active-dot i {
  opacity: 1;
  color: #fff;
}
.sandy-big-checkbox .checkbox-inner {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 5em;
  border-radius: 7px;
  border: 1px solid #f0f0f0;
  padding: 22px 15px;
}
.sandy-big-checkbox .checkbox-inner .checkbox-wrap {
  display: flex;
}
.sandy-big-checkbox .checkbox-inner .checkbox-wrap .content {
  width: 100%;
}
.sandy-big-checkbox .checkbox-inner .checkbox-wrap .content h1 {
  font-size: 12px;
}
.sandy-big-checkbox .checkbox-inner .checkbox-wrap .content p {
  font-size: 10px;
}
.sandy-big-checkbox .checkbox-inner .checkbox-wrap .icon {
  display: flex;
  align-items: center;
}
.sandy-big-checkbox .checkbox-inner .active-dot {
  width: 25px;
  height: 25px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sandy-big-checkbox .checkbox-inner .active-dot i {
  opacity: 0;
}

.sandy-big-checkbox.is-theme .board-theme-wrapper .board-theme-body {
  border: 2px solid #f3f4f6;
}
.sandy-big-checkbox.is-theme input[type=radio]:checked + div .board-theme-body {
  border: 2px solid #000;
}

.sandy-big-radio {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: column;
  width: 100%;
  cursor: pointer;
}
.sandy-big-radio input[type=radio]:checked + div, .sandy-big-radio input[type=checkbox]:checked + div {
 // background: black; //
  box-shadow: none;
  border-color: #FFD300;
  color: black;
}
.sandy-big-radio input[type=radio]:checked + div .active-dot, .sandy-big-radio input[type=checkbox]:checked + div .active-dot {
  background: #000;
}
.sandy-big-radio input[type=radio]:checked + .is-payment {
  border-color: var(--c-payment-text-color); /* Using payment text color for border */
}

.sandy-big-radio input[type=radio]:checked + .is-payment .active-dot {
  background: var(--c-payment-text-color); /* Using payment text color for active dot */
}

.sandy-big-radio input[type=radio]:checked + .is-payment .active-dot svg {
  opacity: 1;
  stroke: var(--c-payment-background-color); /* Using payment background color for the stroke */
  stroke-width: 5px;
}

.sandy-big-radio .radio-select-inner {
  position: relative;
  background: var(--c-payment-background-color); /* Use payment background color */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8em;
  border-radius: var(--c-payment-border-radius); /* Use payment border radius */
  border: 2px solid var(--c-payment-text-color); /* Use payment text color as the border color */
  padding: 22px;
  color: var(--c-payment-text-color); /* Use payment text color for the text */
}

.sandy-big-radio .radio-select-inner.locale {
  min-height: 0;
  padding: 9px;
  border-radius: 11px;
}
.sandy-big-radio .radio-select-inner.locale .text-title {
  font-size: 14px;
  opacity: 0.76;
  font-weight: 700;
}
.sandy-big-radio .radio-select-inner.is-payment {
  height: 60px;
  min-height: 0;
  background: var(--c-payment-background-color);
  border-radius: var(--c-payment-border-radius, 15px); /* Fallback to 15px if --c-payment-border-radius is not defined */
  border-color: transparent;
}

.sandy-big-radio .radio-select-inner.is-payment .card-info {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  text-align: justify;
  color: var(--c-payment-text-color); /* Using the payment text color */
}

.sandy-big-radio .radio-select-inner.is-payment .active-dot {
  position: absolute;
  top: 50%;
  right: 21px;
  width: 20px;
  height: 20px;
  background: var(--c-payment-text-color); /* Background color for active dot */
  transform: translateY(-50%);
  border-radius: 550px;
}

.sandy-big-radio .radio-select-inner.is-payment .active-dot svg {
  opacity: 0;
}
.sandy-big-radio .radio-select-inner.font {
  border-radius: 15px;
}
.sandy-big-radio .radio-select-inner.font .active-dot {
  position: absolute;
  top: 19px;
  right: 21px;
  width: 25px;
  height: 5px;
  background: rgba(0, 0, 0, 0.15);
}
.sandy-big-radio .radio-select-inner.font .font-preview {
  font-size: 13px;
  opacity: 0.76;
  font-weight: 400;
}
.sandy-big-radio .radio-select-inner.font h1 {
  font-size: 15px;
  margin-bottom: 6px;
}

.form-wrap.text-color .pickr {
  width: 100%;
}
.dialog-overflow-all-height {
  height: calc(100vh - 111px);
}

.sandy-dialog-disable-scroll {
  overflow: hidden;
}

.sandy-dialog-modal {
  overflow: hidden !important;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .sandy-dialog-modal {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* background: rgba(21, 21, 31, 0) !important; */
  }
}
.sandy-dialog-modal .iframe-header {
  width: 100%;
  height: 41px;
  position: absolute;
  top: -40px;
  left: 0px;
  background: #fff;
  border-bottom: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  display: flex;
}
.sandy-dialog-modal .iframe-header .icon {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 9px 14px 7px 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.sandy-dialog-modal .iframe-header .out {
  margin-left: auto;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px 10px 12px;
  color: #111111;
  font-size: 17px;
}
.sandy-dialog-modal .sandy-bio-element-dialog {
  width: 100%;
  max-width: 659px;
  height: 100% !important;
  padding: 0px !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 32px 8px;
  top: 57.5%;
  padding-bottom: 4em !important;
  overflow: initial !important;
  /*[data-open-popup]{
  	  display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      cursor: pointer;
      position: absolute;
      top: -51px;
      right: 10px;
      z-index: 2;
      transition: background-color 0.2s ease-in-out;
      font-size: 20px;
      color: #fff;
  }*/
}
.sandy-dialog-modal .sandy-bio-element-dialog .sandy-dialog-body {
  height: 100%;
  width: 100%;
}
.sandy-dialog-modal .sandy-bio-element-dialog iframe {
  width: 100%;
  height: 100%;
}
.sandy-dialog-modal .connect-img {
  height: 70px;
  min-height: 60px;
  top: -4.2em;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
.sandy-dialog-modal .connect-img img {
  width: 70px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 100px;
}
.sandy-dialog-modal .connect-social a {
  padding: 16px 15px 16px 15px;
  background: #000;
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
}
.sandy-dialog-modal .connect-social a h3 {
  color: #fff;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.sandy-dialog-modal .connect-social a i {
  color: #fff;
}
.sandy-dialog-modal .connect-header {
  padding: 0px 0px 30px;
  text-align: center;
  margin-top: -3em;
}
.sandy-dialog-modal .connect-header .connect-title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
}
body.is-dark .sandy-dialog-modal .connect-header .connect-title {
  color: #000;
}
.sandy-dialog-modal .connect-header .connect-subtitle {
  font-size: 14px;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  margin-top: 9px;
  line-height: 1.55;
}
body.is-dark .sandy-dialog-modal .connect-header .connect-subtitle {
  color: #000;
}
.sandy-dialog-modal .sandy-dialog-overflow {
  padding: 30px;
  overflow: auto;
  overflow-x: hidden;
  position: relative;
}
@media (max-width: 639px) {
  .sandy-dialog-modal .sandy-dialog-overflow {
    height: calc(100vh - 111px);
  }
}
.sandy-dialog-modal .sandy-dialog-overflow.h100 {
  height: calc(100vh - 111px);
}
.sandy-dialog-modal .sandy-dialog {
  width: 90%;
  max-width: 584px;
  border-radius: 12px;
  background-color: #fff;
  padding: 30px;
  height: auto;
  max-height: calc(100% - 50px);
  overflow-y: auto;
  overflow-x: hidden;
}
body.is-dark .sandy-dialog-modal .sandy-dialog {
  background-color: #222;
  border: 0;
}
.sandy-dialog-modal .sandy-dialog.is-loading .sandy-dialog-body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sandy-dialog-modal .sandy-dialog.is-loading .has-loader {
  font-size: 6px;
  position: absolute;
}
.sandy-dialog-modal .sandy-dialog.large {
  max-width: 984px;
}
.sandy-dialog-modal .sandy-dialog.mid {
  max-width: 700px;
}
.sandy-dialog-modal .sandy-dialog.small {
  max-width: 384px;
}
.sandy-dialog-modal .sandy-dialog [data-close-popup] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #27baf1;
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 2;
  transition: background-color 0.2s ease-in-out;
}
.sandy-dialog-modal .sandy-dialog [data-close-popup] i {
  color: #fff;
}
.sandy-dialog-modal .half-short {
  width: 100%;
  transform: translate(-50%, 0);
  top: initial;
  bottom: 0;
  border-radius: 25px 25px 0 0;
  position: fixed;
  max-height: calc(100vh - 111px);
  height: initial;
}
.sandy-dialog-modal .small-floating {
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: 6px 6px 0px 0px #000;
}

@media (max-width: 600px) {
  .sandy-dialog-modal .small-floating {
    transform: translate(-50%, 0);
    top: initial;
    bottom: 13px;
  }
}

div[data-popup] {
  display: none;
}

.profile-background-types-wrapper input[type=radio] {
  opacity: 0;
}
.profile-background-types-wrapper input[type=radio]:checked + .profile-background-types {
  border-color: #27baf1;
}
.profile-background-types-wrapper input[type=radio]:checked + .profile-background-types .active-dot {
  background: #27baf1;
}
.dark-input-checkbox input[type=radio] {
  opacity: 0;
}
.dark-input-checkbox input[type=radio]:checked + .checkbox-inner .nav__link {
  background: #353945;
  color: #FCFCFD;
}
.dark-input-checkbox input[type=radio]:checked + .checkbox-inner .active-dot {
  background: #27baf1;
}
.profile-background-types-wrapper.active .active-dot {
  background: #000;
  z-index: 999;
}
.profile-background-types-wrapper.active .icon {
  background: #000;
}

.profile-background-types {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8em;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
  padding: 22px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  background-size: cover !important;
  border: 1px solid transparent;
  transition: 0.2s;
  position: relative;
}
.profile-background-types.active::before {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #00000042);
  border-radius: 5px;
}
.profile-background-types.active .icon, .profile-background-types.active p {
  z-index: 99;
  color: #fff;
}
.profile-background-types.active .icon {
  background: #fff;
}
.profile-background-types.active .active-dot {
  background: #000;
  z-index: 999;
}
.profile-background-types .icon {
  width: 100%;
  height: 62px;
  z-index: 99;
  background: rgba(40, 40, 40, 0.13) none repeat scroll 0% 0%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  cursor: pointer;
  position: relative;
  border-radius: inherit;
}
.profile-background-types .icon.is-ava::before {
  content: "";
  background: #00000038;
  z-index: 98;
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}
.profile-background-types .icon.is-ava i {
  color: #fff;
  z-index: 999999;
}
.profile-background-types .icon .bio-background {
  border-radius: inherit;
  position: absolute;
}
.profile-background-types .icon .bio-background > * {
  border-radius: inherit !important;
}
.profile-background-types .icon i {
  color: #848484;
  font-size: 24px;
}
.profile-background-types .active-dot {
  position: absolute;
  top: 19px;
  right: 21px;
  width: 25px;
  height: 5px;
  z-index: 99;
  background: rgba(0, 0, 0, 0.15);
}
.profile-background-types p {
  font-size: 12px;
  text-transform: uppercase;
}

.section-header {
  display: flex;
  justify-content: space-between;
}
.section-header .section-header-info .section-title {
  color: #3e3f5e;
  font-size: 1.6rem;
  font-weight: 700;
}
.section-header .section-header-actions {
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
}
.section-header .section-header-action {
  color: #adafca;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
.section-header .section-header-action.text-sticker {
  color: #000 !important;
}
.section-header .section-pretitle {
  color: #8f91ac;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.bio-background + .bio {
  z-index: 1;
  position: relative;
}
.bio-background + .bio .context-head {
  background: transparent;
}

.bio-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
body.is-dark .bio-background {
  display: none;
}
.bio-background .bio-background-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  border-radius: 0 !important;
  background-color: var(--c-header-default);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  background-position: center;
}
.bio-background .solid-color {
  height: 100%;
  width: 100%;
}
.bio-background .gradient-color {
  width: 100%;
  height: 100%;
}
.bio-background .gradient-color.animate {
  -webkit-animation: animateBackground 25s ease infinite;
  animation: animateBackground 25s ease infinite;
}
.bio-background .video-background {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  outline: currentcolor none medium;
  border: medium none;
  opacity: 1;
  transition: opacity 0.2s ease-in-out 0s;
}

.blog-cards {
  padding: 20px;
  background: #fff;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  padding: 1.5rem;
  border-radius: 12px;
  position: relative;
}
.blog-cards .thumbnail {
  height: 220px;
}
.blog-cards .thumbnail img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 10px;
}
.blog-cards .drag {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  outline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.blog-cards .drag i {
  font-size: 18px;
}
.blog-cards .content {
  position: relative;
  padding: 27px 0 0;
}
.blog-cards .content .text-sticker {
  right: -8px;
  position: absolute;
  top: -17px;
}
.blog-cards .content .blog-title {
  font-size: 0.775rem;
  font-weight: 700;
}

.custom-table {
  width: 100%;
}
.custom-table tr {
  cursor: pointer;
  transition: all 0.2s;
}
.custom-table tr:first-child {
  background: rgba(228, 228, 228, 0.2);
}
.custom-table tr th, .custom-table tr td:first-child {
  border-radius: 8px 0 0 8px;
}
.custom-table tr th:last-child, .custom-table tr td:last-child {
  border-radius: 0 8px 8px 0;
}
.custom-table tr:not(:first-child):hover {
  background: #000;
}
.custom-table tr:not(:first-child):hover th, .custom-table tr:not(:first-child):hover td {
  color: #fff;
}
.custom-table tr th {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  color: #808191;
}
.custom-table tr td {
  font-size: 12px;
  line-height: 1.33333;
  font-weight: 500;
  color: #808191;
}
.custom-table tr th, .custom-table tr td {
  height: 40px;
  vertical-align: middle;
  transition: color 0.2s;
  padding: 15px 16px;
}
.custom-table .icon {
  font-size: 14px;
  height: 1em;
  width: 1em;
}

.not-plan {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.not-plan .opacity-reduce {
  opacity: 0.7;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: 998;
}
.not-plan .content {
  z-index: 999;
  position: relative;
  width: 50%;
}
@media (max-width: 768px) {
  .not-plan .content {
    width: 100%;
  }
}

.page-trans {
  position: relative;
  padding: 20px 32px;
  border-radius: 24px 24px 0 0;
  background: #ffffff;
}
.page-trans::before {
  content: "";
  position: absolute;
  top: 43px;
  left: 32px;
  right: 32px;
  bottom: -43px;
  z-index: -1;
  background: #E3E6EC;
  opacity: 0.91;
  filter: blur(86.985px);
  border-radius: 24px;
}
.page-trans .page-trans-table .table-flex {
  display: flex;
  padding: 30px 0;
  border-bottom: 1px solid #E4E4E4;
}
.page-trans .page-trans-table .table-flex:last-child {
  border: 0;
}
.page-trans .page-trans-table .table-flex .title {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.1875;
  font-weight: 600;
  letter-spacing: initial !important;
}
.page-trans .page-trans-table .table-flex .caption {
  color: #808191;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38462;
}
.page-trans .page-trans-table .table-flex .first-action {
  width: 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
}
.page-trans .page-trans-table .table-flex .middle {
  width: 87%;
}
.page-trans .page-trans-table .table-flex .action {
  width: 10%;
}

.sandy-prompt-bg {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(218 215 215 / 57%);
}

.sandy-prompt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 4px;
  border: 1px solid black;
}
.sandy-prompt .sandy-prompt-inner {
  background: #fff;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
}
.sandy-prompt .sandy-prompt-content {
  padding: 0 10px;
  font-size: 14px;
  max-width: 260px;
  margin: auto;
  text-align: center;
  margin-bottom: 1em;
}
.sandy-prompt .sandy-prompt-title {
  padding: 25px 10px 0;
  font-size: 16px;
  margin-bottom: 13px;
  font-weight: 800;
  text-align: center;
}

.sandy-prompt-bg.confirm .sandy-prompt-btn ul {
  display: flex;
  width: 100%;
  border-top: 0.5px solid #eee;
}
.sandy-prompt-bg.confirm .sandy-prompt-btn ul li {
  width: 50%;
  display: flex;
  height: 100%;
  cursor: pointer;
}
.sandy-prompt-bg.confirm .sandy-prompt-btn ul li a {
  padding: 15px 0;
  justify-content: center;
  display: flex;
  width: 100%;
  font-weight: 500;
}
.sandy-prompt-bg.confirm .sandy-prompt-btn ul li:first-child {
  border-right: 0.5px solid #eee;
}
[data-hover] {
  position: relative;
  margin: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
  cursor: pointer;
}

.users {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0 0 20px 20px;
  transition: 0.2s;
  border: 2px solid transparent;
}
.users.active {
  border: 2px solid #27baf1;
}
.users .user-preview {
  height: 180px;
  border-radius: 15px 15px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
}
.users .user-preview .checkbox {
  position: absolute;
  top: 10px;
  left: 8px;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
}
.users .user-preview .avatar {
  padding: 10px;
  background: #fff;
  border-radius: 20px;
  width: 130px;
  height: 130px;
}
.users .user-preview .avatar .img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
}
.users .details {
  background: #fff;
  position: relative;
  margin: 12px;
  border-radius: 0 0 15px 15px;
}
.users .details .content {
  padding: 20px;
}
.users .details .content .title {
  font-size: 15px;
  letter-spacing: 0;
}
.users .details .content .email {
  color: #808191;
  margin-top: 5px;
  font-size: 14px;
}
.users .details .user-actions {
  padding: 15px;
  border: 1px solid #eee;
  margin: 16px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
}
.users .details .user-actions .la {
  font-size: 17px;
}
.users .details::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  bottom: -8px;
  z-index: -1;
  border-radius: 24px;
  background: #E4E4E4;
  filter: blur(86.985px);
}

.status {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #808191;
}
.status::before {
  content: "";
  position: absolute;
  top: 53%;
  left: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status.green:before {
  background: #7FBA7A;
}

.admin-plans {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(47.9deg, #27baf126 1%, transparent 44.7%);
  color: #11142D;
  transition: all 0.25s;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
}
.admin-plans.is-side {
  background: transparent;
  justify-content: space-between;
  box-shadow: none;
}
.admin-plans.is-side:not(:last-child) {
  margin-bottom: 20px;
}
.admin-plans.is-side:last-child {
  margin-bottom: 0;
}
.admin-plans.is-side .plan-details .title {
  padding-right: 0;
  margin-bottom: 10px;
}
.admin-plans.is-side .plan-cta {
  width: 55px;
  height: 55px;
  border-radius: 550px;
  margin-right: 0;
}
.admin-plans.is-side .plan-cta::before {
  opacity: 0;
}
.admin-plans.is-side .plan-cta .name {
  font-size: 10px;
}
.admin-plans.is-side .plan-cta .number {
  font-size: 20px;
}
.admin-plans .plan-details .title {
  font-size: 16px;
  line-height: 1.1875;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding-right: 35px;
  font-weight: 100 !important;
  letter-spacing: 0;
}
.admin-plans .plan-details .info {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33333;
  margin-bottom: 8px;
  color: #808191;
}
.admin-plans .plan-details .plan-actions {
  display: flex;
}
.admin-plans .plan-details .plan-actions .action {
  display: inline-block;
  padding: 3px 10px;
  background: #6C5DD3;
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.3;
  margin-right: 5px;
}
.admin-plans .plan-details .plan-actions .action.delete {
  background: #ffa2c0;
}

.plan-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 88px;
  height: 80px;
  margin-right: 24px;
  padding-top: 7px;
  border-radius: 12px;
  background: radial-gradient(103.03% 103.03% at 0% 0%, #27baf1 0%, #80d5ff 100%);
}
.plan-cta::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 9px;
  right: 9px;
  height: 7px;
  border-radius: 0 0 10px 10px;
  background: radial-gradient(103.03% 103.03% at 0% 0%, #27baf1 0%, #80d5ff 100%);
  opacity: 0.2;
}
.plan-cta .name {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}
.plan-cta .number {
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #fff;
}

.h-avatar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 96px;
  height: 72px;
  border-radius: 8px;
  background: #A0D7E7;
}
.h-avatar.is-trans {
  background: transparent;
}
.h-avatar.is-trans::before, .h-avatar.is-trans::after {
  background: transparent;
}
.h-avatar.is-video {
  background: #000;
  color: #fff;
}
.h-avatar.is-video::before {
  background: inherit;
  opacity: 0.2;
}
.h-avatar.is-upload {
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}
.h-avatar.is-upload.active::after {
  content: "";
}
.h-avatar.is-upload.active img {
  height: 100%;
  width: 100%;
}
.h-avatar.is-upload.active i {
  color: #fff;
  z-index: 999;
}
.h-avatar.is-upload .file-name {
  position: absolute;
  bottom: 11px;
  left: 13px;
  font-size: 16px;
  padding: 1px 4px;
  background: #ffe8e8;
}
.h-avatar.is-upload .image {
  background-size: cover;
  background-position: center;
}
.h-avatar.is-upload img, .h-avatar.is-upload video, .h-avatar.is-upload .image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.h-avatar.is-upload.is-outline-dark {
  background: transparent;
  color: #000;
}
.h-avatar.is-upload.is-outline-dark::before {
  border-color: #000;
}
.h-avatar.is-upload.is-outline-dark i {
  color: #000 !important;
  z-index: 98;
  border-radius: 550px;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  -webkit-animation: goPulse 5s infinite;
          animation: goPulse 5s infinite;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}
.h-avatar.is-upload input[type=file] {
  position: absolute;
  cursor: pointer;
  z-index: 99;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}
.h-avatar.is-upload::after {
  position: absolute;
  background: rgba(20, 20, 22, 0.6);
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9;
  border-radius: inherit;
}
.h-avatar.is-upload::before {
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 2px dashed #E6E8EC;
  border-radius: 7px;
  position: absolute;
  content: "";
  height: initial;
  background: transparent;
}
.h-avatar.sm {
  width: 25px;
  height: 25px;
}
.h-avatar.md {
  width: 50px;
  height: 46px;
}
.h-avatar.md {
  width: 50px;
  height: 46px;
  font-size: 25px;
  color: #fff;
  -webkit-text-stroke: 0.4px;
}
.h-avatar::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 7px;
  right: 7px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: #E7FAFF;
}
.h-avatar .image {
  background-size: cover;
  background-position: center;
}
.h-avatar img, .h-avatar .image, .h-avatar video {
  max-height: 100%;
  width: 100%;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

.apexcharts-tooltip {
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.05) !important;
  border: 0 !important;
  padding: 20px;
}

.widget-main {
  padding: 32px;
  border-radius: 24px;
  background: #ffffff;
  position: relative;
  text-align: center;
}
.widget-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #E3E6EC;
  opacity: 0.91;
  filter: blur(86.985px);
  border-radius: 24px;
}
.widget-main .widget-chart {
  max-width: 130px;
  height: 115px;
  margin: 0 auto 32px;
}
.widget-main .widget-title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 12px;
}
.widget-main .widget-counter {
  font-size: 72px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -1px;
  color: #e69fef;
}
.widget-main .widget-text {
  margin-bottom: 32px;
  color: #808191;
}
.widget-main .is-earning {
  padding-bottom: 70px 50px 41px;
  text-align: center;
}
.widget-main .is-cur {
  position: absolute;
  top: 12px;
  right: 20px;
  background: #ecffe9;
  padding: 5px 12px;
  color: #1d8631;
  border-radius: 550px;
  font-size: 11px;
}

.details-container {
  position: relative;
  padding: 32px 32px 38px;
  background: #ffffff;
  border-radius: 24px;
}
.details-container:before {
  content: "";
  position: absolute;
  top: 28px;
  left: 18px;
  right: 18px;
  bottom: -28px;
  z-index: -1;
  background: #F0F3F6;
  opacity: 0.91;
  filter: blur(86px);
  border-radius: 24px;
}

.details-title {
  margin-bottom: 40px;
}

.details-row {
  display: flex;
  margin-bottom: 30px;
}

.details-col:first-child {
  flex-shrink: 0;
  width: 170px;
  padding-right: 24px;
}
.details-col:nth-child(2) {
  flex: 0 0 calc(100% - 170px);
  width: calc(100% - 170px);
  max-width: calc(100% - 170px);
}

.details-top {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E4E4E4;
}

.details-flex {
  display: flex;
  align-items: center;
}
.details-flex:not(:last-child) {
  margin-bottom: 16px;
}

.details-line {
  display: flex;
  align-items: center;
  color: #5F75EE;
  transition: color 0.25s;
}
.details-line:hover {
  color: #6C5DD3;
}

.details-preview {
  font-size: 0;
}

.details-line .details-preview {
  width: 32px;
  flex-shrink: 0;
  color: #000;
  font-size: 27px;
  margin-right: 6px;
}

.details-statistics {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.details-status {
  display: flex;
  align-items: center;
}
.details-status .details-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 50%;
  font-size: 0;
}
.details-status .details-icon .icon {
  font-size: 6px;
  fill: #ffffff;
}

.details-box {
  position: relative;
  padding: 5px 5px 13px;
  border-radius: 16px;
  background: #348491;
}

.details-chart_activity {
  width: 60px;
  height: 25px;
}

.details-chart_counter {
  height: 200px;
}
.details-chart_counter .apexcharts-tooltip.apexcharts-theme-light {
  background: #1B1D21;
  border: none;
  color: #ffffff;
}

.details-list {
  display: flex;
  border-radius: 16px;
  border: 1px solid #F0F3F6;
}
@media (max-width: 767px) {
  .details-list {
    flex-wrap: wrap;
  }
}

.details-item {
  flex: 0 0 25%;
  width: 25%;
  padding: 24px;
}
.details-item:not(:last-child) {
  border-right: 1px solid #F0F3F6;
}
@media (max-width: 767px) {
  .details-item {
    flex: 0 0 50%;
    width: 50%;
  }
  .details-item:nth-child(2n+1) {
    border-right: 1px solid #F0F3F6;
  }
  .details-item:not(:last-child) {
    border-right: none;
    border-right: 1px solid #F0F3F6;
  }
}

.details-head {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.details-head .details-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 6px;
  font-size: 0;
}
.details-head .details-pic {
  max-width: 8px;
}

.details-indicator {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: #E4E4E4;
}

.details-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.details-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  font-size: 0;
}
.details-remove .icon {
  font-size: 10px;
  transition: transform 0.25s;
}
.details-remove:hover .icon {
  transform: rotate(90deg);
}

.details-sm .details-chart_activity {
  width: 60px;
  margin-left: auto;
  padding: 0;
}
.details-sm .details-chart_counter {
  height: 210px;
}
.details-sm .details-line {
  margin-right: auto;
}
.details-sm .details-status {
  flex-shrink: 0;
  margin-left: 20px;
}
.details-sm .details-box {
  margin-bottom: 16px;
  padding: 5px 10px 0 3px;
}
.details-sm .details-container {
  padding: 16px;
}
.details-sm .details-container:before {
  top: 0;
  left: 11px;
  right: 11px;
  bottom: -30px;
}
.details-sm .details-list {
  flex-wrap: wrap;
}
.details-sm .details-item {
  flex: 0 0 50%;
  width: 50%;
  padding: 16px;
}
.details-sm .details-item:not(:last-child) {
  border-right: none;
}
.details-sm .details-item:nth-child(2n+1) {
  border-right: 1px solid #F0F3F6;
}
.details-sm .details-item:nth-child(n+3) {
  border-top: 1px solid #F0F3F6;
}

.details-big:not(:last-child) {
  margin-bottom: 90px;
}
.details-big .details-container:before {
  left: 40px;
  right: 40px;
}
.details-big .details-number {
  margin-bottom: 16px;
}
.details-big .details-line {
  color: #3F8CFF;
}
.details-big .details-chart_activity {
  width: 80px;
  margin-right: auto;
}
.details-big .details-chart-counter {
  height: 200px;
}

.header-username {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding-left: 24px;
  white-space: nowrap;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-text {
  line-height: 1.6rem !important;
}

.profile-tabs .navbar-links {
  display: flex;
}
/* Inactive link (normal state) */
.profile-tabs .navbar-links a.sandy-tabs-link {
  padding: 20px;
  background: rgba(228, 228, 228, 0.3); /* Background for inactive state */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  color: var(--c-button-text-color); /* Text color of button */
  border: 1px solid var(--c-button-text-color); /* Border using button text color */
  transition: all 0.3s ease; /* Smooth transition for hover and active states */
}

/* Active link (pressed state) */
.profile-tabs .navbar-links a.sandy-tabs-link.active {
  color: var(--c-button-text-color); /* Text color for active link */
  background: var(--c-button-background-color); /* Background for active state */
  border: 1px solid var(--c-button-background-color); /* Border color to match background */
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); /* Inner shadow to give pressed effect */
  transform: translateY(2px); /* Slight downward movement to simulate being pressed */
}

/* Hover effect for both active and inactive links */
.profile-tabs .navbar-links a.sandy-tabs-link:hover {
  background: rgba(228, 228, 228, 0.4); /* Slightly darker background on hover */
  border: 1px solid var(--c-button-hover-background-color); /* Border change on hover */
  cursor: pointer; /* Change cursor to indicate it's clickable */
}

.profile-tabs .navbar-links a.sandy-tabs-link:last-child {
  margin-right: 0;
}
.profile-tabs.sec .navbar-links a.sandy-tabs-link {
  color: #BBB9C5;
  background: #fff;
  font-size: 13px;
}
.profile-tabs.sec .navbar-links a.sandy-tabs-link.active {
  color: #fff;
  background: #000;
  border-radius: 10px;
}

.moc-app {
  position: relative;
  padding: 30px;
  min-height: 280px;
  z-index: 9;
}
.moc-app::before {
  content: "";
  position: absolute;
  height: 280px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 40px;
  left: 0;
  bottom: -20px;
  z-index: -1;
}
.moc-app .device-iphone-x {
  width: 100%;
  height: 631px;
  box-shadow: -30px 60px 40px -18px rgba(11, 34, 56, 0.07) !important;
  border-radius: 54px;
}
.moc-app .device-iphone-x .device-frame {
  width: 100%;
  height: 631px;
  padding: 17px;
  border-radius: 54px;
}
.moc-app .device-iphone-x .device-frame .device-content {
  width: 100%;
  border-radius: 40px;
  height: 598px;
}
.moc-app .device-iphone-x .device-header {
  top: 14px;
  width: 180px;
  left: 53%;
}
.moc-app .device-iphone-x .device-sensors::before {
  content: initial;
}
.moc-app .device-iphone-x .device-sensors::after {
  top: 26px;
}
.moc-app img {
  width: 100%;
  box-shadow: -30px 60px 40px -18px rgba(11, 34, 56, 0.07);
  border-radius: 46px;
}

#app-sandy-index h1, #app-sandy-index h2, #app-sandy-index h3, #app-sandy-index h4, #app-sandy-index h5, #app-sandy-index h6, #app-sandy-index p, #app-sandy-index div, #app-sandy-index span, #app-sandy-index a, #app-sandy-index button, #app-sandy-index li, #app-sandy-index input, #app-sandy-index label {
  font-family: "Karla", sans-serif;
}
#app-sandy-index .index-header-user {
  position: relative;
}
#app-sandy-index .index-header-user.active .index-user-body {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
#app-sandy-index .index-header-user .index-user-body {
  position: absolute;
  left: 50%;
  box-shadow: 0px 16px 64px 0 rgba(31, 47, 70, 0.4);
  background: #FCFCFD;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transform-origin: 50% 50px;
  will-change: transform;
  transition: all 0.4s;
  padding: 32px 16px 20px;
  border-radius: 12px;
  top: calc(100% + 20px);
  width: 256px;
  margin-left: -128px;
}
#app-sandy-index .index-header-user .index-user-body .index-user-name {
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#app-sandy-index .index-header-user .index-user-plan {
  margin-bottom: 7px;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0px 24px 24px -8px rgba(15, 15, 15, 0.2);
}
#app-sandy-index .index-header-user .index-user-plan .this-line {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
#app-sandy-index .index-header-user .index-user-plan .this-line .h-avatar {
  height: 40px;
  width: 40px;
  margin-right: 16px;
}
#app-sandy-index .index-header-user .index-user-plan .this-button {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-radius: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 0 0 2px #E6E8EC inset;
  color: #23262F;
}
#app-sandy-index .index-header-user .index-user-plan .details {
  flex-grow: 1;
}
#app-sandy-index .index-header-user .index-user-plan .details .info {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}
#app-sandy-index .index-header-user .index-user-plan .details .des {
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  #app-sandy-index .index-header-user {
    position: static;
  }
  #app-sandy-index .index-header-user .index-user-body {
    left: 16px;
    right: 16px;
    top: calc(100% + 16px);
    width: auto;
    margin: 0;
  }
}
#app-sandy-index .index-profile-bio {
  background: #f8f7f7;
}
#app-sandy-index .index-profile-bio .profile-bio-container {
  padding: 50px 20px;
}
#app-sandy-index .dynamic-typist-input {
  margin: 0px auto;
  padding: 0px;
  width: 570px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: white;
  border: 1px solid #7551e9;
  transform-origin: 50% 50% 0px;
  overflow: hidden;
  max-width: 84vw;
}
#app-sandy-index .dynamic-typist-input form {
  padding: 0px 16px 0px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-sandy-index .dynamic-typist-input form .typist-input {
  display: flex;
}
#app-sandy-index .dynamic-typist-input form .typist-input .prefix {
  font-size: 32px;
}
#app-sandy-index .dynamic-typist-input form .typist-input .typist {
  color: #cccccc !important;
  font-size: 32px;
  line-height: 38px;
}
#app-sandy-index .main-center .main-head {
  max-width: 600px;
  margin: 0 auto 128px;
  text-align: center;
}
#app-sandy-index .main-center .main-stage {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: #777E90;
}
#app-sandy-index .main-center .main-title {
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
#app-sandy-index .feature-tree {
  position: relative;
}
#app-sandy-index .feature-tree .scribble-1 {
  position: absolute;
  right: 5em;
}
#app-sandy-index .feature-tree .scribble-2 {
  position: absolute;
  bottom: 1em;
  left: 6em;
}
#app-sandy-index .feature-tree .classic-text {
  font-size: 18px;
  line-height: 1.5;
}
#app-sandy-index .index-changes {
  padding: 110px 120px;
  background-color: #f6f6f6;
  background-repeat: repeat-y;
  background-position: right 0;
  border-radius: 20px;
}
#app-sandy-index .index-changes a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: none;
}
#app-sandy-index .index-changes .index-changes-content {
  max-width: 810px;
}
#app-sandy-index .index-changes .info {
  font-weight: 400;
  font-size: 32px;
  line-height: 1.5;
  color: #333;
}
#app-sandy-index .index-changes .text {
  margin-top: 24px;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.25;
  color: #000;
}
@media (max-width: 1350px) {
  #app-sandy-index .index-changes {
    background-image: none !important;
    padding: 80px 90px;
  }
}
@media (max-width: 1100px) {
  #app-sandy-index .index-changes {
    padding: 70px;
  }
  #app-sandy-index .index-changes .info {
    font-size: 25px;
  }
  #app-sandy-index .index-changes .text {
    font-size: 40px;
  }
}
@media (max-width: 768px) {
  #app-sandy-index .index-changes {
    padding: 10%;
    text-align: center;
  }
  #app-sandy-index .index-changes .info {
    font-size: 20px;
  }
  #app-sandy-index .index-changes .text {
    font-size: 30px;
  }
}

.actions {
  display: flex;
  margin-top: 50px;
}
.actions .action {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: #0669ff;
  transition: color 0.1s ease;
  cursor: pointer;
}
.actions .action svg {
  stroke: #0669ff;
}
.actions .action:first-child {
  margin-right: 50px;
}
@media (max-width: 768px) {
  .actions {
    margin-top: 40px;
    justify-content: center;
  }
  .actions .action {
    font-size: 17px;
  }
  .actions .action:first-child {
    margin-right: 35px;
  }
}

.plan-payment-method .sandy-big-checkbox .checkbox-inner {
  height: 7em;
  border-radius: 20px;
  border: 0;
}
.plan-payment-method .sandy-big-checkbox .checkbox-inner .h-avatar {
  margin-right: 10px;
  height: 45px;
  width: 50px;
  border-radius: 12px;
  padding: 5px;
  background: #fff;
}
.plan-payment-method .sandy-big-checkbox .checkbox-inner .h-avatar img {
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0 !important;
}
.plan-payment-method .sandy-big-checkbox .checkbox-inner .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plan-payment-method .sandy-big-checkbox .checkbox-inner .content h1 {
  font-weight: 600;
}

.invoice-wrapper {
  max-width: 740px;
  margin: 0 auto;
}
.invoice-wrapper.is-webapp {
  margin-top: 30px;
}
.invoice-wrapper .invoice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e3e3;
}
.invoice-wrapper .invoice-header .left h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #283252;
}
.invoice-wrapper .invoice-header .right .controls {
  display: flex;
}
.invoice-wrapper .invoice-header .right .controls .action {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  min-width: 32px;
  border-radius: 50%;
  color: #a2a5b9;
  margin: 0 4px;
  transition: all 0.3s;
}
.invoice-wrapper .invoice-header .right .controls .action:hover {
  color: #283252;
  background: #e3e3e3;
}
.invoice-wrapper .invoice-header .right .controls .action svg {
  height: 16px;
  width: 16px;
  stroke-width: 1.6px;
}
.invoice-wrapper .invoice-body .invoice-card {
  padding: 0;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section {
  padding: 40px;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex {
  display: flex;
  align-items: center;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .meta {
  margin-left: 16px;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .meta h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .meta span {
  display: block;
  color: #a2a5b9;
  font-weight: 400;
  font-size: 0.9rem;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .end {
  margin-left: auto;
  text-align: right;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .end.is-left {
  text-align: left;
  max-width: 300px;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .end.is-left p {
  padding-top: 4px;
  font-size: 0.95rem;
  line-height: 1.2;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .end h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .end span {
  display: block;
  color: #a2a5b9;
  font-weight: 400;
  font-size: 0.9rem;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section.is-bordered {
  border-bottom: 1px solid #e5e5e5;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section .h-avatar.is-customer {
  border: 1.6px solid #e5e5e5;
  border-radius: 50%;
  box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section .flex-table.sub-table .flex-table-item {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  min-height: 40px;
  border: none;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section .flex-table.sub-table .flex-table-item .table-label {
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #a2a5b9;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section .flex-table.sub-table .flex-table-item .table-total {
  color: #283252;
  font-weight: 500;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section .flex-table.sub-table .flex-table-item .table-total.is-bigger {
  font-size: 1.2rem;
  font-weight: 600;
}
.invoice-wrapper .invoice-body .invoice-card .invoice-section .flex-table .flex-table-header span:not(:first-child), .invoice-wrapper .invoice-body .invoice-card .invoice-section .flex-table .flex-table-item .flex-table-cell:not(:first-child) {
  justify-content: flex-end;
}

@media (max-width: 991px) {
  .invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex {
    flex-direction: column;
  }
  .invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .meta {
    margin-left: 0;
    text-align: center;
  }
  .invoice-wrapper .invoice-body .invoice-card .invoice-section.is-flex .end {
    margin-left: 0;
    text-align: center;
    margin-top: 20px;
  }
}
.title-sections {
  border-bottom: 1px solid #edeef1;
  position: relative;
  margin-bottom: 3.1em;
}
.title-sections h2 {
  font-size: 1.875rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: #0b2238;
  margin-bottom: 1em;
}
.title-sections::after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  left: 0;
  background-color: #0b2238;
}

.person {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.person .txt h3 {
  color: #0b2238;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
}
.person .txt time {
  font-size: 12px;
  color: #6c7a87;
  display: block;
}

.avatar-blog {
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
}
.avatar-blog:hover .blog-cover img {
  transform: scale3d(1.12, 1.12, 1) !important;
}
.avatar-blog .blog-cover {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  border-radius: 8px;
}
.avatar-blog .blog-cover img {
  width: 100%;
  border-radius: 8px;
  height: 220px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1) !important;
  transform: scale3d(1, 1, 1) !important;
}
.avatar-blog .blog-body .blog-link {
  margin-bottom: 30px;
  display: block;
}
.avatar-blog .blog-body .blog-link .read-time {
  font-size: 12px;
  letter-spacing: 0.32px;
  color: #6c7a87;
}
.avatar-blog .blog-body .blog-link .blog-title {
  color: #0b2238;
  font-weight: 500;
  font-size: 20px;
  transition: 0.3s !important;
}
.avatar-blog .blog-body .blog-link .short-des {
  color: #6c7a87;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
  display: -webkit-box;
  height: 43px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-blog.horizontal {
  display: flex;
  align-items: center;
}
.avatar-blog.horizontal .blog-cover {
  margin-bottom: 0;
  margin-right: 20px;
  display: flex;
  width: 120px;
}
.avatar-blog.horizontal .blog-cover img {
  height: 120px;
}
.avatar-blog.horizontal .blog-body {
  flex: 1;
}
.avatar-blog.horizontal .blog-body .blog-link {
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .avatar-blog.horizontal {
    padding: 0;
    border-bottom: 1px solid #eeedfb;
    padding-bottom: 26px;
  }
}

.banner-title-inner {
  margin-top: 30px;
  text-align: center;
}
.banner-title-inner h1 {
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: -2.8;
  font-weight: bold;
  padding: 16px 0 24px;
}
@media (max-width: 768px) {
  .banner-title-inner h1 {
    padding: 8px 0 16px;
    font-size: 25px;
    letter-spacing: -0.64px;
  }
}

.blog-banner {
  margin: 25px 0;
}
.blog-banner img {
  width: 100%;
  border-radius: 12px;
  height: 550px;
  -o-object-fit: cover;
     object-fit: cover;
}

.article-user {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.article-user .person {
  margin: 40px 0 !important;
  flex-direction: column;
}
.article-user .person .h-avatar {
  height: 55px;
  width: 55px;
  margin-bottom: 10px;
  margin-right: 0 !important;
}
.article-user .person .txt {
  text-align: center;
}
.article-user .person .txt h3 {
  font-size: 20px;
}
.article-user .person .txt time {
  font-size: 14px;
}

.blog-article {
  max-width: 880px;
}
.blog-article .article-share {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.blog-article .article-share svg {
  margin-bottom: 20px;
}
.blog-article .article-share svg path {
  stroke: #bbb;
}
.blog-article .article-share .share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.blog-article .article-share .share-buttons a {
  margin-right: 10px;
  color: #8a86e5;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .blog-article .article-share .share-buttons a {
    margin-right: 0;
    width: 49%;
  }
}
.blog-article .article-share .share-buttons a:last-child {
  margin-right: 0;
}

.blog-banner-background {
  position: relative;
  height: 450px;
  padding: 10rem 0 0;
  border-radius: 0 0 16px 16px;
  display: block;
  margin-top: -14.1vh;
  background: radial-gradient(103.03% 103.03% at 100% 150%, #9999995c 0%, #27baf100 100%);
}
.blog-banner-background::before {
  content: initial;
}
.blog-banner-background .title-section {
  z-index: 1;
  position: relative;
}
.blog-banner-background .title-section h2 {
  font-size: 3.125rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  margin-top: 0.625rem;
  color: #000 !important;
}
.blog-banner-background .title-section p {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.625rem;
  color: #000 !important;
}

.index-split-section .split-app {
  position: relative;
}
.index-split-section .split-app .split-app-inner {
  position: relative;
  padding-top: 57px;
}
.index-split-section .split-app .split-app-inner::before {
  content: "";
  width: 350px;
  height: 705px;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='55' ry='55' stroke='%23C6CCD3FF' stroke-width='1' stroke-dasharray='10' stroke-dashoffset='5' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 55px;
  position: absolute;
  top: 0;
  right: -57px;
  z-index: -1;
  background-repeat: no-repeat;
}
.index-split-section .split-app .split-app-inner img {
  height: 728px;
  -o-object-fit: contain;
     object-fit: contain;
}
.index-split-section .split-item-right {
  position: relative;
}
.index-split-section .split-item-right .split-app .split-app-inner::before {
  left: -57px;
  right: initial;
}
.index-split-section .split-item-right::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 740px;
  top: -100px;
  border-top-left-radius: 40px;
  right: 0;
  background: linear-gradient(rgba(34, 2, 95, 0.05), rgba(34, 2, 95, 0));
}
.index-split-section .content {
  padding: 12.9vw 2.7vw 13.6vw 8.3vw;
}
.index-split-section .content .img-title::before {
  content: "";
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background-color: #f7f8fa;
  position: absolute;
  left: -50%;
  z-index: -1;
}
.index-split-section .content h3 {
  display: flex;
  flex-direction: column;
  font-size: 2vw;
  line-height: 1.4;
  font-weight: 400;
  color: #1e2432;
  margin: 0 0 2.6rem;
  width: 22.6vw;
}
.index-split-section .content p {
  width: 22.6vw;
  color: #687086;
  margin: 0 0 2.8rem;
}
.index-split-section .images {
  display: flex;
  background: #f9b8c4;
  align-items: center;
  padding: 35px;
  justify-content: center;
}
.index-split-section .images img {
  height: 38vw;
}
@media (max-width: 768px) {
  .index-split-section .content h3 {
    font-size: 1.9rem;
    margin-bottom: 1.5rem;
    width: 100%;
  }
  .index-split-section .content p {
    width: 100%;
  }
}

.index-form-register {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  width: 32vw;
}
.index-form-register label {
  display: block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  flex: 1 1 auto;
  border-radius: 16px/16px;
  color: #687086;
  background: #f7f9fb;
  margin-right: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.467;
  padding: 1.125rem 1.9375rem 1.25rem;
}
.index-form-register label span {
  pointer-events: none;
  transform: translateZ(0);
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, opacity;
  text-overflow: ellipsis;
  display: block;
  position: relative;
  white-space: norwrap;
  overflow: hidden;
}
.index-form-register label.focus span {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.index-form-register input {
  padding: 1.0625rem 1.9375rem 1.3125rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 0 0;
  font-size: 0.9375rem;
  line-height: 1.467;
}
.index-form-register input:focus-visible {
  outline: none;
}
.index-form-register button {
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 1.1rem 1.9rem 1.25rem;
  flex: 0 0 auto;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  display: inline-block;
  transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.index-form-register button:hover {
  color: #000;
}
.index-form-register button .background {
  background: #5DC2D3;
}
.index-form-register button .hover {
  background: #fff;
}

.index-hero {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-size: cover;
  height: 100vh;
  margin-bottom: 7em;
  margin-top: -14.1vh;
}
.index-hero.is-pricing {
  height: 35rem;
}
.index-hero.is-pricing .hero-right {
  padding: 2rem;
}
.index-hero.is-payment-error {
  height: 100vh !important;
  margin: 0;
}
.index-hero.is-payment-error .hero-right {
  padding: 2rem;
}
.index-hero.is-payment-error .index-hero-container {
  width: 60%;
  margin: auto;
}
@media (max-width: 768px) {
  .index-hero.is-payment-error .index-hero-container {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .index-hero {
    height: 100%;
  }
}
.index-hero .index-hero-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
}
.index-hero .index-hero-container .pricing-lists li:not(:last-child) {
  margin-bottom: 0.5rem;
}
.index-hero .index-hero-container .bg-circle {
  display: block;
  width: 34.9vw;
  width: 34.9vw;
  height: 35.55556vw;
  height: 35.5vw;
  position: absolute;
  top: 0;
  left: 1.25vw;
  z-index: -1;
  transform: translate(-50%, -56%);
  pointer-events: none;
}
.index-hero .index-hero-container .bg-circle .bg-circle-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffda54;
  transform-origin: 50% 0;
  transform: translateZ(0);
  will-change: transform;
}
.index-hero .index-hero-container .hero-left {
  position: relative;
  width: 50%;
  padding-right: 4.1vw;
  padding-top: 15vh;
  padding-bottom: 0;
  padding-left: 8.4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.index-hero .index-hero-container .hero-left h1 {
  font-size: 4.3rem;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 4.3rem;
  color: #1e2432;
  position: relative;
}
.index-hero .index-hero-container .hero-left p {
  width: 25vw;
  margin: 0 0 4.1rem;
  color: #687086;
}
.index-hero .index-hero-container .hero-right {
  background: #0099ff;
  width: 50%;
  position: relative;
}
@media (max-width: 768px) {
  .index-hero .index-hero-container {
    display: block;
  }
  .index-hero .index-hero-container .hero-left {
    width: 100%;
    padding: 40px;
    padding-top: 18vh;
  }
  .index-hero .index-hero-container .hero-left h1 {
    font-size: 3rem;
    margin-bottom: 3rem;
  }
  .index-hero .index-hero-container .hero-left p {
    width: 100%;
  }
  .index-hero .index-hero-container .index-form-register {
    width: 100%;
  }
  .index-hero .index-hero-container .hero-right {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .index-hero .index-hero-container .hero-left h1 {
    font-size: 3rem;
    margin-bottom: 1.3rem;
  }
  .index-hero .index-hero-container .hero-left p {
    width: 100%;
    margin-bottom: 2rem;
  }
  .index-hero .index-hero-container .hero-right {
    display: flex;
  }
  .index-hero .index-hero-container .hero-right .main-img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.index-hero .content {
  text-align: center;
  max-width: 800px;
  margin: auto;
}
.index-hero .content .title {
  font-size: 48px;
  color: #000;
  margin-bottom: 32px;
  font-weight: 700;
  line-height: 1em;
}
@media (max-width: 768px) {
  .index-hero .content .title {
    font-size: 29px;
  }
}
.index-hero .content p {
  font-size: 18px;
  line-height: 32px;
}
.index-hero .content-banner {
  margin-top: 3rem;
}
.index-hero .content-banner img {
  width: 60vh;
}

.list-point .item {
  margin-bottom: 1.875rem;
  display: flex;
}

.list-point .item .icob {
  width: 60px;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10%;
  transition: transform 0.2s ease-in-out;
  margin-right: 1.563rem;
}
.list-point .item .icob:hover {
  transform: translateY(-4px);
}

.list-point .item .icob i {
  font-size: 20px;
  color: #ffffff;
}

.list-point .item p {
  color: #ffffff;
  margin-bottom: 0;
}

.list-point .item:first-child .icob {
  background: radial-gradient(103.03% 103.03% at 0% 0%, #d7e3ff 0%, #9fa0ef 100%);
}

.list-point .item:nth-child(2) .icob {
  background: radial-gradient(103.03% 103.03% at 0% 0%, #efd7ff 0%, #d69fef 100%);
}

.list-point .item:nth-child(3) .icob {
  background-color: #ffce53;
}

.docs-search-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.docs-search-header .search-image-container {
  position: relative;
  width: 100%;
  min-height: 200px;
  max-height: 360px;
  height: 420px;
  background-color: #5DC2D3;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}
.docs-search-header .search-image-container.is-query {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
}
.docs-search-header .search-image-container::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #00000061;
  z-index: 1;
  border-radius: inherit;
}
.docs-search-header .search-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left;
     object-position: left;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
}
.docs-search-header .search-image-text {
  z-index: 2;
  position: relative;
  color: #fff;
  text-align: center;
  padding: 15px;
}
.docs-search-header .search-image-text .search-heading-text {
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
  margin-top: 6%;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .docs-search-header .search-image-text .search-heading-text {
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
  }
}
.docs-search-header .search-results {
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
}
.docs-search-header .search-results .search__form {
  transform: translateY(-50%);
  max-width: 550px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  margin: 0 auto;
}
.docs-search-header .search-results .search__form input {
  border-radius: 8px;
}
.docs-search-header .search-results .search__form input:focus-visible {
  outline: 0 !important;
}
.docs-search-header .search-results .search__form .icon-search {
  font-size: 15px;
}

#app-sandy-docs {
  background: #1f1f1f;
}
@media (min-width: 768px) {
  #app-sandy-docs .index-header {
    display: none;
  }
}
#app-sandy-docs .docs-crate .crate-item {
  height: 100%;
}
#app-sandy-docs .docs-crate .crate-item:not(:last-child) {
  margin-bottom: 20px;
}
#app-sandy-docs .docs-crate .crate-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: -8px;
  z-index: -1;
  border-radius: 24px;
  background: rgba(216, 216, 216, 0.58);
}
#app-sandy-docs .docs-crate .crate-item .view-all-button {
  position: absolute;
  bottom: 10px;
}
#app-sandy-docs .docs-crate .crate-item .content h3 {
  font-size: 1.2rem;
}
#app-sandy-docs .docs-crate .crate-item .crate-li {
  display: flex;
  flex-direction: column;
}
#app-sandy-docs .docs-crate .crate-item .crate-li a {
  display: flex;
}
#app-sandy-docs .docs-crate .crate-item .crate-li a svg {
  height: 20px;
  margin-right: 10px;
  width: 20px;
}
#app-sandy-docs .docs-crate .crate-item .crate-li a span {
  color: #717171;
  font-size: 13px;
}
#app-sandy-docs .docs-crate .crate-item .crate-li a:not(:last-child) {
  margin-bottom: 17px;
}
#app-sandy-docs .docs-nav {
  background-color: #222;
  padding: 2rem 3rem 2rem 2rem;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  min-height: 100vh;
  z-index: 999;
  transition: transform 0.2s;
}
#app-sandy-docs .docs-nav .simplebar-content-wrapper, #app-sandy-docs .docs-nav .simplebar-content {
  height: 100% !important;
}
@media (max-width: 768px) {
  #app-sandy-docs .docs-nav {
    transform: translateX(0);
  }
  #app-sandy-docs .docs-nav:not(.visible) {
    transform: translateX(-100%);
  }
}
#app-sandy-docs .docs-nav .brand-top {
  padding: 2rem;
  padding-top: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app-sandy-docs .docs-nav .brand-top a {
  color: #0B2238;
  font-size: 20px;
  font-weight: 500;
}
#app-sandy-docs .docs-nav .brand-top span {
  display: inline-flex;
  margin: auto;
  vertical-align: sub;
}
#app-sandy-docs .docs-nav .docs-navbar {
  text-align: left;
}
#app-sandy-docs .docs-nav .docs-navbar p {
  color: #fff;
}
#app-sandy-docs .docs-nav .docs-navbar .nav-link {
  text-align: left;
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
  padding: 0.95rem 1.2rem;
  color: #fff;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
}
#app-sandy-docs .docs-nav .docs-navbar .nav-link .i-2 {
  font-size: 20px;
  margin-right: 13px;
  -webkit-text-stroke: 0.3px;
}
#app-sandy-docs .docs-nav .docs-navbar .nav-link i {
  vertical-align: middle;
  margin-right: 0.3rem;
  font-size: 18px;
}
#app-sandy-docs .docs-nav + .content {
  padding-left: 445px;
  padding-right: 120px;
  padding-top: 70px;
}
#app-sandy-docs .docs-nav + .content.is-small {
  padding-left: 350px;
  padding-right: 32px;
  padding-top: 28px;
}
@media (max-width: 768px) {
  #app-sandy-docs .docs-nav + .content {
    padding: 20px !important;
  }
}
#app-sandy-docs > .content {
  width: 100%;
  height: 100%;
}

.api-docs-div .api-docs-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.api-docs-div .api-docs-menu .nav-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 700;
  color: #777E90;
  cursor: pointer;
  transition: color 0.2s;
}
.api-docs-div .api-docs-menu .nav-link .icon {
  margin-right: 12px;
  font-size: 19px;
}
.api-docs-div .api-docs-menu .nav-link .sio {
  font-size: 21px;
  -webkit-text-stroke: 0.3px;
}
.api-docs-div .api-docs-menu .nav-link:not(:last-child) {
  margin-bottom: 40px;
}
.api-docs-div .api-docs-menu .nav-link:hover, .api-docs-div .api-docs-menu .nav-link.active {
  color: #23262f;
}
@media (max-width: 992px) {
  .api-docs-div .api-docs-menu {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .api-docs-div .api-docs-menu .nav-link {
    width: 50%;
  }
}

pre[class*=language-] {
  font-size: 85%;
}

.dark-code {
  background: #272822;
  white-space: pre-wrap;
  border-radius: 0.3em;
  color: #fff;
  word-wrap: break-word;
}

.textarea-content .heading {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 6px;
}
.textarea-content .text ul {
  list-style: initial;
  padding-left: 1em;
}
.textarea-content .text p {
  margin: 1em;
  font-size: 14px;
  line-height: 1.66;
  margin-left: 0;
}

.two-burger-icon {
  display: block;
  position: relative;
  width: 32px;
  height: 32px;
  background: none;
}
.two-burger-icon::before, .two-burger-icon::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 6px;
  width: 20px;
  height: 2px;
  background: #777E90;
  border-radius: 2px;
  transition: transform 0.2s;
}
.two-burger-icon::before {
  transform: translateY(-4px);
}
.two-burger-icon::after {
  transform: translateY(3px);
}
.two-burger-icon.active::before {
  transform: translateY(0) rotate(-45deg);
}
.two-burger-icon.active::after {
  transform: translateY(0) rotate(45deg);
}

.multi-image-container {
  display: flex;
  flex-wrap: wrap;
}
.multi-image-container .inner-image-container {
  flex-grow: 1;
  width: 50%;
  padding: 0 7px;
  padding-bottom: 14px;
}
.multi-image-container .inner-image-container:nth-child(2n+1) {
  padding-left: 0;
}
.multi-image-container .inner-image-container:nth-child(2n) {
  padding-right: 0;
}
.multi-image-container .inner-image-container:nth-last-child(-n+2) {
  padding-bottom: 0;
}
.multi-image-container .inner-image {
  position: relative;
  cursor: pointer;
  display: flex;
  border-radius: 10px;
  width: 100%;
  display: 100%;
}
.multi-image-container .inner-image:hover img {
  transform: scale(1.05);
}
.multi-image-container .inner-image .link-out {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: absolute !important;
  right: 0;
  top: 0;
  font-weight: 500;
  background: linear-gradient(190deg, #0000002e, #0000);
  border-radius: inherit;
}
.multi-image-container .inner-image .link-out * {
  width: 14px;
  height: auto;
  min-width: 14px;
  right: 20px;
  top: 17px;
  color: #fff;
  stroke: #fff;
}
.multi-image-container .inner-image .thumbnail {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: inherit;
  height: 100%;
  width: 100%;
}
.multi-image-container .inner-image .thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
  border-radius: inherit !important;
}
.multi-image-container .inner-image .image-title {
  z-index: 2;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.45) 100%, rgba(0, 0, 0, 0.65) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 25px 15px 12px;
  color: #ffffff;
  width: 100% !important;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0px 3px 20px rgba(0, 0, 0, 0.8);
  font-weight: 500;
  font-size: 14px;
  border-radius: inherit;
}

.tox .tox-pop__dialog, .tox .tox-menu {
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1) !important;
  padding: 15px !important;
  border: 0 !important;
}
.tox .tox-pop__dialog .tox-toolbar, .tox .tox-menu .tox-toolbar {
  border: 0 !important;
}

.bio-tox.is-white .tox-tinymce .tox-toolbar__primary {
  background: #fff;
}
.bio-tox .tox-tinymce {
  border: none;
}
.bio-tox .tox-tinymce .tox-toolbar-overlord {
  background: transparent;
}
.bio-tox .tox-tinymce .tox-statusbar {
  border: 0;
}
.bio-tox .tox-tinymce .tox-statusbar .tox-statusbar__text-container {
  justify-content: start;
}
.bio-tox .tox-tinymce .tox-statusbar .tox-statusbar__text-container a {
  font-size: 9px;
}
.bio-tox .tox-tinymce .tox-statusbar .tox-statusbar__path {
  display: none;
}
.bio-tox .tox-tinymce .tox-statusbar .tox-statusbar__wordcount {
  display: none;
}
.bio-tox .tox-tinymce .tox-statusbar .tox-statusbar__resize-handle {
  display: none;
}
.bio-tox .tox-tinymce .tox-toolbar__primary {
  border: none;
  background: #f7f7f7;
  padding: 13px 20px;
  margin: 17px;
  justify-content: center;
  border-radius: 5px;
}
.bio-tox .tox-tinymce .tox-tbtn:not(.tox-split-button__chevron) {
  margin-right: 10px;
}
.bio-tox .tox-tinymce .tox-split-button {
  position: relative;
  margin-right: 10px;
}
.bio-tox .tox-tinymce .tox-split-button .tox-tbtn {
  margin-right: 0;
}
.bio-tox .tox-tinymce .tox-split-button .tox-split-button__chevron {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.card-block {
  padding: 0.5px 20px 0;
  margin: 20px 0;
  border-radius: 17px;
}
.card-block .card-thumb {
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 10px;
  margin: 20px 0 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  font-size: 25px;
}
.card-block .card-title {
  padding: 0 20px 20px;
  margin-left: -20px;
  margin-right: -20px;
  cursor: pointer;
  position: relative;
}
.card-block .card-title h3 {
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 10px !important;
  color: #000;
}
.card-block .card-title p {
  color: rgba(0, 0, 0, 0.6);
  margin-top: 5px;
  margin-bottom: 30px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 605px;
  font-weight: 400;
}

.links-accordion .sandy-accordion {
  padding: 20px;
  background: #f0f0f0;
  border: 0;
  border-radius: 10px;
  margin-bottom: 20px;
}
.links-accordion .sandy-accordion .sandy-accordion-head {
  padding: 0;
  font-size: 14px;
}

.add-new-link {
  display: flex;
}
.add-new-link .el-btn {
  width: 63px;
  height: 63px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  cursor: pointer;
}
.add-new-link .el-btn:active {
  outline: dashed;
  outline-width: 0.5px;
}

[data-checkbox-item] {
  display: none;
}

.card-elements {
  border-radius: 13px;
  padding: 20px;
  position: relative;
}
.card-elements.is-matching {
  color: inherit;
}
.card-elements.is-matching * {
  color: inherit !important;
}
.card-elements.is-matching .h-avatar {
  background: #fff !important;
  color: #000 !important;
}
.card-elements:not(:last-child) {
  margin-bottom: 10px;
}
.card-elements .is-edit {
  position: absolute;
  right: 20px;
  top: 21px;
  color: #000 !important;
}
.card-elements .elements-header {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
  background: #fff;
  margin-bottom: 20px;
}
.card-elements .elements-header .others {
  width: 80%;
  display: flex;
  justify-content: flex-end;
}
.card-elements .elements-header .others a {
  margin-right: 17px;
  color: #5A606D;
  font-size: 15px;
}
.card-elements .elements-header .others a:last-child {
  margin-right: 0;
}
.card-elements .card-titles .title {
  font-size: 14px;
  color: #6b7a99;
  line-height: 30px;
}
.card-elements .card-titles .link-title {
  margin: 17px 0;
  font-size: 12px;
  color: #ADB8CC;
}
.card-elements .card-titles .type {
  color: #7D8FB3;
  font-size: 12px;
}
.card-elements .card-titles .type i {
  margin-right: 5px;
}
.card-elements .card-titles .date {
  font-size: 12px;
  line-height: 20px;
  color: #7D8FB3;
  margin-top: 10px;
}

.element-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-bottom: 15px;
  transition: transform 0.2s ease-in-out;
}
.element-list.awesome-border:hover .list-thumbnail img {
  transform: initial;
}
.element-list.awesome-border .list-thumbnail img {
  border-radius: 12px;
}
.element-list.awesome-border .list-container {
  border: 2px dashed #cecccc;
  border-radius: 15px;
  background: transparent;
}
.element-list.reverse .list-content {
  flex-direction: row-reverse;
}
.element-list.reverse .list-content .list-thumbnail {
  margin-left: 0 !important;
  margin-right: 15px;
}
.element-list.reverse .list-content .list-inner {
  margin-right: auto;
}
.element-list:hover {
  transform: translateY(-4px);
}
.element-list:hover .list-thumbnail img {
  transform: scale(1.05);
}
.element-list:last-child {
  margin-bottom: 0;
}
.element-list .list-container {
  padding: 18px;
  background: #fff;
  font-weight: 500;
  width: 100%;
  display: block;
  position: relative;
}
body.is-dark .element-list .list-container {
  background: #000;
}
.element-list .list-container .list-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.element-list .list-container .list-content .list-thumbnail {
  width: 60px;
  height: 60px;
  min-width: 60px;
  margin-left: 15px;
}
.element-list .list-container .list-content .list-thumbnail.is-10 {
  height: 10em !important;
}
.element-list .list-container .list-content .list-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.2s ease-in-out;
  border-radius: inherit;
}
.element-list .list-container .list-content .list-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.element-list .list-container .list-title {
  margin: 5px 0;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
body.is-dark .element-list .list-container .list-title {
  color: #fff;
}
.element-list .list-container .list-desc {
  font-weight: 400;
  font-size: 12px;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
body.is-dark .element-list .list-container .list-desc {
  color: #d7d7d7;
}

@-webkit-keyframes goPulse {
  0% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  70% {
    transform: scale3d(1, 1, 1);
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale3d(0.9, 0.9, 0.9);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes goPulse {
  0% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  70% {
    transform: scale3d(1, 1, 1);
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale3d(0.9, 0.9, 0.9);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.element-video .heading {
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 25px;
  font-size: 15px;
  font-weight: 400;
}
.element-video .element-single-video {
  width: 100%;
  margin: auto auto 20px;
  padding: 0px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.element-video .element-single-video iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.element-video .element-single-video.is-iframe .element-single-video-container::before {
  content: initial;
}
.element-video .element-single-video .element-single-video-container {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
  border-radius: inherit;
}
.element-video .element-single-video .element-single-video-container::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  background: rgba(0, 0, 0, 0.32);
}
.element-video .element-single-video .element-single-video-container .play-button {
  width: 50px !important;
  height: 50px !important;
  background: #fff;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  border: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: auto;
  -webkit-animation: goPulse 2s infinite;
          animation: goPulse 2s infinite;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 20px;
}
.element-video .element-single-video .element-single-video-container .play-button i {
  color: #000;
}
.element-video .element-single-video .element-single-video-container .banner {
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  -o-object-fit: cover;
  object-fit: cover;
  bottom: 0;
  height: 100%;
  position: absolute;
  border-radius: inherit !important;
}

.context-block-edit .context-block-single {
  border: 1px dashed;
  padding: 28px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.context-block-header {
  display: flex;
  margin-bottom: 20px;
}
.context-block-header .actions {
  margin-left: auto;
  display: flex;
}
.context-block-header .actions a, .context-block-header .actions button {
  height: 38px;
  width: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 550px;
  margin-left: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  background: #fff;
}
.context-block-header .actions a:first-child, .context-block-header .actions button:first-child {
  margin-left: 0;
}

.bio-titles {
  margin-bottom: 30px;
}
.bio-titles .heading {
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 400;
}
.bio-titles .subheading {
  font-size: 13px;
}

.bio-margin {
  margin-bottom: 2.5rem;
}
.bio-margin:last-child {
  margin-bottom: 0;
}

.context-block-single .list-container {
  background: #f5f7fc;
  border-radius: 15px;
}

.bio-swiper-container {
  margin: 0 auto;
  margin-bottom: 0;
  margin-left: -20px;
  margin-right: -20px;
  overflow: visible;
  position: relative;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.bio-swiper-container .card-infos {
  z-index: 2;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.45) 100%, rgba(0, 0, 0, 0.65) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 25px 15px 12px;
  color: #ffffff;
  width: 100% !important;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 500;
  font-size: 14px;
  border-radius: inherit;
}
.bio-swiper-container .bio-swiper-wrapper {
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  left: 0px;
  max-width: 768px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  transform: translate3d(0, 0, 0);
}
.bio-swiper-container .bio-swiper-slide {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
  justify-content: space-between;
  display: flex;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  -ms-scroll-snap-points-y: repeat(50%);
  scroll-snap-points-y: repeat(50%);
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 40px;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  flex-direction: row;
}
.bio-swiper-container .bio-swiper-slide::-webkit-scrollbar, .bio-swiper-container .bio-swiper-slide::-webkit-scrollbar-thumb {
  width: 0;
  background: transparent;
}
.bio-swiper-container .bio-swiper-slide::before, .bio-swiper-container .bio-swiper-slide::after {
  content: "";
  display: block;
}
.bio-swiper-container .bio-swiper-slide::before {
  padding-left: 1.25rem;
}
.bio-swiper-container .bio-swiper-slide::after {
  padding-right: 1.25rem;
}
@media (max-width: 768px) {
  .bio-swiper-container .bio-swiper-slide {
    scroll-padding-left: 20px;
  }
}
.bio-swiper-container .bio-swiper-slide > .swiper-item {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-right: 20px;
  width: calc(50% - 30px);
  flex-shrink: 0;
  scroll-snap-align: start;
}
.bio-swiper-container .bio-swiper-slide > .swiper-item:last-child {
  padding-right: 0;
  width: calc(50% - 50px);
}
@media (max-width: 680px) {
  .bio-swiper-container .bio-swiper-slide > .swiper-item {
    width: calc(100% - 50px);
  }
  .bio-swiper-container .bio-swiper-slide > .swiper-item:last-child {
    width: calc(100% - 60px);
  }
}
@media (max-width: 600px) {
  .bio-swiper-container .bio-swiper-slide > .swiper-item {
    width: calc(100% - 40px);
  }
}
.bio-swiper-container .bio-swiper-slide > .swiper-item .is-card {
  height: 365px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
}
.bio-swiper-container .bio-swiper-slide > .swiper-item .is-card img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit !important;
}
@media (max-width: 768px) {
  .bio-swiper-container .bio-swiper-slide > .swiper-item .is-card {
    height: 400px;
  }
}
.bio-swiper-container .bio-slider-arrows .slide-right {
  right: 25px;
}
.bio-swiper-container .bio-slider-arrows .slide-left {
  left: 25px;
}
.bio-swiper-container .bio-slider-arrows * {
  width: 38px;
  height: 38px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  color: #3d626c;
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 7 0 10px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  outline: 0;
  -webkit-appearance: none;
  z-index: 3;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.bio-slide .is-card {
  height: 365px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
}
.bio-slide .is-card img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
@media (max-width: 768px) {
  .bio-slide .is-card {
    height: 400px;
  }
}
.bio-slide .card-infos {
  z-index: 2;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.45) 100%, rgba(0, 0, 0, 0.65) 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 25px 15px 12px;
  color: #ffffff;
  width: 100% !important;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 500;
  font-size: 14px;
  border-radius: inherit;
}
.bio-slide .bio-slider-arrows .swiper-slide-right {
  right: 25px;
}
.bio-slide .bio-slider-arrows .swiper-slide-left {
  left: 25px;
}
.bio-slide .bio-slider-arrows * {
  width: 38px;
  height: 38px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  color: #3d626c;
  background: #fff;
  border: 0;
  border-radius: 100%;
  box-shadow: 7 0 10px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  outline: 0;
  -webkit-appearance: none;
  z-index: 3;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.insight-card {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
}
.insight-card .icon {
  width: 50px;
  height: 50px;
  background: #f0f0f0;
  border-radius: 10px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .insight-card .icon {
    width: 38px;
    height: 38px;
  }
}
.insight-card h2 {
  font-size: 18px;
  margin: 10px 0 8px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .insight-card h2 {
    font-size: 14px;
    margin: 10px 0 3px;
  }
}
.insight-card h5 {
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}
@media (max-width: 600px) {
  .insight-card h5 {
    margin-bottom: 0;
    font-size: 10px;
  }
}
.insight-card .view {
  font-size: 10px;
  margin: 0;
  margin-top: 10px;
  font-weight: 600;
  color: #000;
}

.insight-split-card {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.insight-split-card .split-card {
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding: 34px;
  border-right: 1px solid #c9c9c9;
  width: 50%;
}
.insight-split-card .split-card:nth-child(4n-2) {
  border: 0;
}
.insight-split-card .split-card .heading {
  font-size: 13px;
  line-height: 22px;
  color: #666666;
  text-transform: uppercase;
}
.insight-split-card .split-card .heading.has-icon {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.insight-split-card .split-card .heading.has-icon i {
  font-size: 30px;
  margin-right: 10px;
}
.insight-split-card .split-card .bold-stats {
  font-size: 34px;
  line-height: 41px;
  font-weight: bold;
}
.insight-split-card .split-card .sub-heading {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #666666;
}
.insight-split-card.is-not .sub-heading {
  font-size: 14px;
  color: #000;
}
@media (max-width: 768px) {
  .insight-split-card.is-not .split-card {
    width: 100%;
    border-right: 0 !important;
    border-bottom: 1px solid #e8e8e8;
  }
}

.mix-padding-10 {
  padding: 1.25rem;
}
.mix-padding-101 {
  padding: .5rem;
}
@media (min-width: 640px) {
  .mix-padding-10 {
    padding: 2.5rem;
  }
}

.theme-html {
  height: 245px;
  border-radius: 10px;
  position: relative;
}
.theme-html .context.bio .context-links .links .link {
  height: 37px;
}
.theme-html input[type=radio]:checked + div, .theme-html input[type=checkbox]:checked + div {
  background: #fff;
  box-shadow: none;
  border-color: #27baf1;
  color: black;
}
.theme-html input[type=radio]:checked + div .active-dot, .theme-html input[type=checkbox]:checked + div .active-dot {
  background: #27baf1;
}
.theme-html .inner {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: inherit;
  border: 2px solid transparent;
  height: 100%;
}
.theme-html .inner .active-dot {
  position: absolute;
  top: 19px;
  right: 21px;
  width: 25px;
  height: 5px;
  background: rgba(0, 0, 0, 0.15);
}
.theme-html .info {
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.85) 100%, rgba(0, 0, 0, 0.92) 100%);
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 37%;
  width: 100%;
  border-radius: inherit;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.theme-html .info .name {
  font-size: 13px;
  color: #fff;
}
.theme-html .info .description {
  font-size: 10px;
  color: #fff;
}
.theme-html img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: inherit;
}

.links-editing {
  padding: 20px;
  background: #f0f0f0;
  border: 0;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 14px;
}

@-webkit-keyframes animateBackground {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes animateBackground {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.crate-item {
  position: relative;
  height: 25vw;
}
.crate-item:nth-child(4n) .item-background, .crate-item:nth-child(4n+1) .item-background {
  background: #f7f9fb;
}
.crate-item:nth-child(4n) .item-background .item-background-hover, .crate-item:nth-child(4n+1) .item-background .item-background-hover {
  background: #fff;
}
.crate-item:nth-child(4n) .button-hover, .crate-item:nth-child(4n+1) .button-hover {
  background: #f7f9fb !important;
}
.crate-item:nth-child(even):hover .item-background-hover {
  opacity: 0;
}
.crate-item:hover {
  z-index: 1;
}
.crate-item:hover .item-background {
  transform: scale(1.05);
  box-shadow: 0 1.3vw 2.7vw rgba(0, 0, 0, 0.05);
}
.crate-item:hover .item-background .item-background-hover {
  transform: translate(-50%, 50%) scale(1);
}
.crate-item:hover .button-container {
  box-shadow: 0 0.27vw 0.27vw rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}
.crate-item:hover .button-container .button-hover {
  opacity: 1;
}
.crate-item:hover .content {
  transform: translateY(-1.875rem);
}
.crate-item:hover .item-desc {
  transform: translateY(-1.8rem);
  opacity: 1;
}
.crate-item .item-background {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: 50% 100%;
  box-shadow: none;
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, box-shadow;
  overflow: hidden;
}
.crate-item .item-background .item-background-hover {
  background: #f7f9fb;
  display: block;
  width: 230%;
  height: 230%;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) scale(0);
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.crate-item > a, .crate-item > .crate-item-contents {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4.7vw 3.4vw;
  color: #000;
  text-decoration: none;
  position: relative;
}
.crate-item .content {
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.crate-item .content h3 {
  font-size: 1.4rem;
  line-height: 1.11;
  font-weight: 400;
  margin: 1.1rem 0 0;
}
.crate-item .icon i {
  font-size: 35px;
  -webkit-text-stroke: 0.2px;
}
.crate-item .item-desc {
  color: #687086;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.47;
  margin: 1.25rem -0.69444vw 0 0;
  transform: translateY(0);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, opacity;
}
.crate-item .button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background-color: #f7f9fb;
  box-shadow: none;
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, box-shadow;
  overflow: hidden;
}
.crate-item .button-container i {
  z-index: 5;
  color: #000;
}
.crate-item .button-container .button-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #fff;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (max-width: 768px) {
  .crate-item {
    height: 100%;
    padding: 17px;
  }
  .crate-item .item-desc {
    opacity: 1;
    margin-bottom: 1.25rem;
    font-size: 13px;
  }
  .crate-item .content h3 {
    font-size: 17px;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .crate-item {
    height: 100%;
    padding: 17px;
  }
  .crate-item .item-desc {
    opacity: 1;
    margin-bottom: 1.25rem;
    font-size: 13px;
  }
}

.featured-profile {
  padding: 1.8rem;
  border-bottom-right-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem;
  background: #fff;
  position: relative;
  z-index: 1;
}
.featured-profile::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: -8px;
  z-index: -1;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
}
.featured-profile .thumbnail {
  box-shadow: 0 0.6rem 0.5rem rgba(0, 0, 0, 0.06);
  margin: 0 0 1.1rem;
  display: block;
  border-radius: 5%;
  width: 80px;
  margin-bottom: 1.125rem;
}
.featured-profile .thumbnail img {
  border-radius: inherit;
}
.featured-profile .content h3 {
  font-size: 1.1rem;
  line-height: 1.32;
  margin: 0;
  font-weight: 600;
}
.featured-profile .content .country {
  display: flex;
  margin-top: 7px;
}
.featured-profile .content .country img {
  height: 16px;
}
.featured-profile .content .country .label {
  margin-left: 5px;
  font-size: 0.75rem;
  line-height: 1.5;
}
.featured-profile .arrow {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 11px;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f7f9fb;
  box-shadow: none;
  transform: scale(1);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, box-shadow;
  overflow: hidden;
}

.crate-large {
  padding: 5.5vw 8.3vw 2.7vw;
}
.crate-large .crate-inner h2 {
  line-height: 1.4;
  font-size: 2.75rem;
  color: #1e2432;
  margin-bottom: 1.5rem;
}
.crate-large .crate-inner p {
  line-height: 1.4;
  font-size: 0.9rem;
  color: #687086;
}
@media (max-width: 768px) {
  .crate-large {
    margin-bottom: 2rem;
  }
  .crate-large .crate-inner h2 {
    font-size: 2rem;
  }
}

.tiny-content-init a {
  color: #551A8B;
  text-decoration: underline;
}
.tiny-content-init ol, .tiny-content-init ul {
  padding: revert;
  list-style: revert;
  margin: revert;
}
.tiny-content-init h1, .tiny-content-init h2, .tiny-content-init h3, .tiny-content-init h4, .tiny-content-init h5, .tiny-content-init h6, .tiny-content-init p {
  font-size: revert;
  font-weight: revert;
}
.tiny-content-init code {
  color: #333;
  background: #e8e8e8;
}

.social-act-list .social-act-item {
  position: relative;
  display: flex;
  padding: 22px 16px;
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
  cursor: pointer;
  transition: all 0.25s;
}
.social-act-list .social-act-item:not(:last-child) {
  margin-bottom: 15px;
}
.social-act-list .social-act-item.active::before {
  background: #f0f0f0;
}
.social-act-list .social-act-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transition: background 0.25s;
}
.social-act-list .social-act-item .details {
  padding: 0 32px 0 24px;
  display: flex;
  align-items: center;
  z-index: 2;
}
.social-act-list .social-act-item .details h1, .social-act-list .social-act-item .details .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  color: #11142d;
}

.z-body {
  z-index: 9999;
  position: relative;
}
@-webkit-keyframes sandyFadeIn {
  0% {
    opacity: 0;
    top: -100%;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    top: 17px;
    transform: translateY(0);
  }
}

@keyframes sandyFadeIn {
  0% {
    opacity: 0;
    top: -100%;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    top: 17px;
    transform: translateY(0);
  }
}

@-webkit-keyframes sandyFadeOut {
  0% {
    opacity: 1;
    top: 17px;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    top: -100%;
    transform: translateY(-50px);
  }
}

@keyframes sandyFadeOut {
  0% {
    opacity: 1;
    top: 17px;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    top: -100%;
    transform: translateY(-50px);
  }
}

.sandy-toast {
  background: #fff;
  width: 100%;
  max-width: 350px;
  border-radius: 0;
  border: 2px solid #000;
  position: fixed;
  left: 50%;
  top: 17px;
  transform: translate(-50%, 0);
  z-index: 999999;
  box-shadow: 6px 6px 0px 0px #000;
  transition: all 0.2s ease-out 0s;
  -webkit-animation: sandyFadeIn 0.5s ease;
          animation: sandyFadeIn 0.5s ease;
  opacity: 1;
}

.sandy-toast.hide {
  -webkit-animation: sandyFadeOut 0.5s ease;
          animation: sandyFadeOut 0.5s ease;
  opacity: 0;
  top: -100%;
}

.sandy-toast .sandy-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
}

.sandy-toast .sandy-toast-header .title {
  display: flex;
  align-items: center;
  width: 100%;
}

.sandy-toast .sandy-toast-header .title .icon {
  width: 1.2em;
  height: 1.2em;
  margin-right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #19a389;
  font-size: 18px;
}

.sandy-toast .sandy-toast-header .title .close {
  font-size: 10px;
  background: #3772FF;
  height: 35px;
  border-radius: 550px;
  color: #fff;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.sandy-toast .sandy-toast-header .title .text {
  font-weight: 700;
  font-size: 15px;
  display: inline-block;
}

.sandy-toast .sandy-toast-body {
  padding: 0 2rem 2rem 2rem;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}


.pricing-table-card {
  border: 1px solid #d7d7d7;
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
}
.pricing-table-card.active {
  background: white;
  color:white;
  transform: scale(1.03);
  border: 0;
  position: relative;
  color:black;
}

.pricing-table-card.active .h5 {
  color:white;


}
.pricing-table-card.active::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: -8px;
  z-index: -1;
  border-radius: 24px;
  background: inherit;
  opacity: 0.5;
}
.pricing-table-card.active .pricing-table-header .pricing-price-content .number .duration {
  color: #fff;
}
.pricing-table-card .pricing-table-header .pricing-title h5 {
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  margin-bottom: 1px;
  font-weight: 700;
  color: #170a07;
}
.pricing-table-card .pricing-table-header .pricing-title p {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0;
}
.pricing-table-card .pricing-table-header .pricing-price-content .price {
  margin-bottom: 2px;
  font-weight: 900;
  color: #170a07;
  font-size: 27px;
  line-height: 44px;
  transition: 0.3s;
}
.pricing-table-card .pricing-table-header .pricing-price-content .number {
  display: flex;
  align-items: center;
}
.pricing-table-card .pricing-table-header .pricing-price-content .number .duration {
  font-size: 22px;
  color: #000000;
  padding-left: 0.5rem;
  font-weight: 600;
}
.pricing-table-card .pricing-table-header .pricing-price-content .des {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.pricing-table-card .pricing-list {
  list-style: none;
  margin-top: 32px;
}
.pricing-table-card .pricing-list li {
  display: flex;
  align-items: center;
}
.pricing-table-card .pricing-list li:not(:last-child) {
  margin-bottom: 12px;
}
.pricing-table-card .pricing-list li .icon {
  font-size: 12px;
}

.pricing-signup-cta {
  background: #f9fafb;
  position: relative;
  padding: 6.6rem 15.4vw 7.6rem;
  margin-top: 4rem;
  align-items: center;
  display: flex;
}
.pricing-signup-cta .cta-background-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}
.pricing-signup-cta .cta-background-shade img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.pricing-signup-cta.is-dark {
  background: #12161b;
}
.pricing-signup-cta.is-dark .content h2 {
  color: #fff;
  font-size: 40px;
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .pricing-signup-cta.is-dark .content h2 {
    font-size: 20px;
  }
}
.pricing-signup-cta.is-dark .content p {
  color: #7d8598;
}
.pricing-signup-cta .content h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 2vw;
  padding: 0 1.3vw 0 0;
  flex: 1 1 auto;
  width: 100%;
}
.pricing-signup-cta .index-form-register {
  width: 100%;
}
.pricing-signup-cta .index-form-register label {
  background: #fff;
}
@media (max-width: 768px) {
  .pricing-signup-cta {
    padding: 6.6rem 7.4vw 7.6rem;
  }
  .pricing-signup-cta .content h2 {
    font-size: 20px;
  }
  .pricing-signup-cta .form {
    margin-top: 20px;
  }
}

.change-pricing-selector {
  border-radius: 15px;
  padding: 0.65rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background: rgba(22, 93, 245, 0.05);
  background: transparent;
  display: flex;
  margin-bottom: 10px;
  border: 3px solid #000000;
}
.change-pricing-selector a {
  color: #000;
  transition: 0.3s;
  padding: 0.5rem 1rem;
  display: block;
  margin-right: 5px;
  border-radius: 12px;
}
.change-pricing-selector a.active {
  color: #ffffff;
  background-color: #000000;
}

@-webkit-keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;
          animation: spinner-border 0.75s linear infinite;
}

.custom-domain .custom-domain-row {
  display: flex;
}
@media (max-width: 768px) {
  .custom-domain .custom-domain-row {
    display: block;
  }
}
.custom-domain .custom-domain-details {
  flex-shrink: 0;
  width: 225px;
  margin-right: 16px;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(227, 230, 236, 0.6);
}
@media (max-width: 768px) {
  .custom-domain .custom-domain-details {
    margin-bottom: 18px;
    width: 100%;
  }
}
.custom-domain .cap-title {
  font-size: 16px;
  line-height: 1.1875;
  font-weight: 600;
  margin-bottom: 16px;
}
.custom-domain .caption {
  width: 100%;
  max-width: 140px;
  color: #B2B3BD;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33333;
}
.custom-domain .custom-domain-variants {
  flex-grow: 1;
}
.custom-domain .custom-domain-variants .custom-domain-label {
  display: block;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.custom-domain .custom-domain-variants .custom-domain-label:not(:last-child) {
  margin-bottom: 18px;
}
.custom-domain .custom-domain-variants .custom-domain-radio {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.custom-domain .custom-domain-variants .custom-domain-radio:checked + .custom-domain-in {
  box-shadow: inset 0 0 0 2px #5DC2D3;
}
.custom-domain .custom-domain-variants .custom-domain-radio:checked + .custom-domain-in .custom-domain-tick {
  background: #5DC2D3;
  border-color: #5DC2D3;
}
.custom-domain .custom-domain-variants .custom-domain-radio:checked + .custom-domain-in .custom-domain-tick::before {
  opacity: 1;
}
.custom-domain .custom-domain-variants .custom-domain-label:hover .custom-domain-in {
  box-shadow: inset 0 0 0 1px #5DC2D3;
}
.custom-domain .custom-domain-variants .custom-domain-in {
  display: flex;
  padding: 34px 32px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #E3E6EC;
  transition: box-shadow 0.25s;
  align-items: center;
}
.custom-domain .custom-domain-variants .custom-domain-in .custom-domain-tick {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-right: 36px;
  border-radius: 4px;
  border: 2px solid #E4E4E4;
  transition: all 0.25s;
}
.custom-domain .custom-domain-variants .custom-domain-in .custom-domain-tick::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 9px;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5.375L1.5 3.375L0 4.875L3.5 8.375L10 1.875L8.5 0.375L3.5 5.375Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 50% 50%/100% auto;
  transition: opacity 0.25s;
}

.sandy-widget {
  padding: 32px;
  border-radius: 24px;
  background: #ffffff;
}
.sandy-widget.has-shadow {
  position: relative;
}
.sandy-widget.has-shadow::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 18px;
  right: 18px;
  bottom: -40px;
  z-index: -2;
  background: #E3E6EC;
  opacity: 0.91;
  filter: blur(86.985px);
  border-radius: 24px;
}
.sandy-widget .sandy-widget-top {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.sandy-widget .sandy-widget-title {
  font-size: 18px;
  line-height: 1.3;
}
.sandy-widget .sandy-widget-next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}

.sandy-quality .sandy-quality-list .sandy-quality-item {
  display: flex;
  align-items: center;
}
.sandy-quality .sandy-quality-list .sandy-quality-item:not(:last-child) {
  margin-bottom: 48px;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .preview {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 14px;
  border-radius: 12px;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .preview img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .sandy-quality-details {
  position: relative;
  z-index: 2;
  flex-grow: 1;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .sandy-quality-line {
  display: flex;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .sandy-quality-line > * {
  font-size: 16px;
  line-height: 1.1875;
  font-weight: 600;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .sandy-quality-line .price {
  margin-left: auto;
  padding-left: 10px;
  color: #7FBA7A;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .sandy-quality-line .nr {
  margin-left: auto;
  background: #ffede9;
  color: #f65b49;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 4px;
}
.sandy-quality .sandy-quality-list .sandy-quality-item .sandy-quality-info {
  margin-top: 5px;
  color: #808191;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.sandy-quality-button {
  width: 100%;
  box-shadow: none;
  margin-top: 40px;
  height: 56px;
  border-radius: 16px/16px;
}

.fancy-user-single {
  border: 1px solid #F0F3F6;
  border-radius: 25px;
  background: #69696A;
  padding: 46px;
}
.fancy-user-single .tooltip-round-custom {
  box-shadow: 0 5px 20px rgba(227, 230, 236, 0.85);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: #fff;
  color: #000;
  font-size: 20px;
}
.fancy-user-single > a, .fancy-user-single h1, .fancy-user-single h2, .fancy-user-single h3, .fancy-user-single h4, .fancy-user-single h5, .fancy-user-single h6, .fancy-user-single p {
  color: #fff;
}
.fancy-user-single .left-text > h4 {
  font-weight: bold;
  font-size: 40px;
  margin: 0;
}
.fancy-user-single .left-text p {
  color: #fff;
  margin-bottom: 7px;
}
.fancy-user-single .left-text span {
  background: #ffede9;
  color: #f65b49 !important;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 4px;
}
.fancy-user-single .avatar-side {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.fancy-user-single .avatar-side .avatar-inner {
  display: flex;
}
.fancy-user-single .avatar-side .avatar-inner .avatar {
  width: 3.5em;
  height: 3.5em;
}
.fancy-user-single .avatar-side .avatar-inner .avatar img {
  height: 100%;
  width: 100%;
  border-radius: 550px;
  -o-object-fit: cover;
     object-fit: cover;
}
.fancy-user-single .avatar-side .avatar-inner .details {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fancy-user-single .avatar-side .avatar-inner .details h3 {
  font-size: 19px;
  font-weight: 699;
  margin: 0;
}
.fancy-user-single .avatar-side .avatar-inner .details p {
  font-size: 13px;
  margin: 0;
}
@media (max-width: 768px) {
  .fancy-user-single {
    padding: 30px;
  }
  .fancy-user-single .left-text > h4 {
    font-size: 20px;
  }
}

@keyframes loader {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #777e90, 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.5), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.7), 1.8em -1.8em 0 0em #777e90, 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.5), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.7), 2.5em 0em 0 0em #777e90, 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.5), 2.5em 0em 0 0em rgba(119, 126, 144, 0.7), 1.75em 1.75em 0 0em #777e90, 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.5), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.7), 0em 2.5em 0 0em #777e90, -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.2), -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.5), 0em 2.5em 0 0em rgba(119, 126, 144, 0.7), -1.8em 1.8em 0 0em #777e90, -2.6em 0em 0 0em rgba(119, 126, 144, 0.2), -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.5), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.7), -2.6em 0em 0 0em #777e90, -1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(119, 126, 144, 0.2), 1.8em -1.8em 0 0em rgba(119, 126, 144, 0.2), 2.5em 0em 0 0em rgba(119, 126, 144, 0.2), 1.75em 1.75em 0 0em rgba(119, 126, 144, 0.2), 0em 2.5em 0 0em rgba(119, 126, 144, 0.2), -1.8em 1.8em 0 0em rgba(119, 126, 144, 0.5), -2.6em 0em 0 0em rgba(119, 126, 144, 0.7), -1.8em -1.8em 0 0em #777e90;
  }
}
@keyframes loader-white {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
.has-loader {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  font-size: 4px;
  -webkit-animation: loader 1.1s infinite ease;
          animation: loader 1.1s infinite ease;
  text-indent: -9999em;
  transform: translateZ(0);
}
body.is-dark .has-loader {
  -webkit-animation-name: loader-white;
          animation-name: loader-white;
}
.is-loader-submit {
  display: flex;
  justify-content: center;
  align-items: center;
}
.is-loader-submit.loader-white .has-loader {
  -webkit-animation-name: loader-white;
          animation-name: loader-white;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  margin: -8px 0 0 -8px;
}
.pagination .page-item {
  width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 48px;
  margin: 8px 0 0 8px;
  border-radius: 12px;
  border: 1px solid #E4E4E4;
  font-size: 14px;
  font-weight: 700;
  color: #11142D;
  transition: all 0.2s;
  position: relative;
}
.pagination .page-item.active {
  background: #355DFF;
  border-color: #355DFF;
  color: #ffffff;
}
.pagination .page-item.disabled {
  opacity: 0.7;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.pagination .page-item .page-link {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
}

.fancy-select select {
  height: 64px;
  padding-left: 20px;
  padding-right: 45px;
  border-radius: 16px;
  border: none;
  float: none;
  line-height: 64px;
  font-weight: 600;
  transition: all 0.2s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  background: rgba(228, 228, 228, 0.3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath d='M10.281.305L5.988 4.598 1.695.305A1 1 0 0 0 .293.317a1 1 0 0 0-.012 1.402l5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-.441-1.687 1 1 0 0 0-.973.273z' fill='%2311142d'/%3E%3C/svg%3E") no-repeat right 1rem center/8px 10px;
}
@media (max-width: 768px) {
  .fancy-select select {
    height: 56px;
    padding-left: 16px;
    padding-right: 36px;
    border-radius: 12px;
    line-height: 56px;
  }
}

.list-file {
  height: auto;
  position: relative;
  transition: all 350ms ease-in-out;
  border-radius: 10px;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.list-file .list-header {
  display: flex;
  align-items: center;
  position: absolute;
  padding: 4px;
  left: 0;
  right: 0;
  top: 0;
  line-height: normal;
  background: linear-gradient(#0e0e0e, #00000003) !important;
  color: #fff;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 7px;
  padding-top: 5px;
  padding-right: 10px;
  width: 70%;
}
.list-file .list-header .list-title {
  font-size: 13px;
  margin-bottom: 2px;
  font-weight: 400;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.list-file .list-header .list-size {
  font-size: 10px;
  color: #c3c3c3;
}
.list-file .list-thumbnail {
  background: #0e0e0e;
  position: relative;
  width: 100%;
  height: auto;
  transition: all 350ms ease-in-out;
  display: block;
  height: 150px;
}
.list-file .list-thumbnail * {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}

.card_widget.has-sweet-container {
  padding: 0;
}
.card_widget.has-sweet-container .card-container {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: inherit;
}
.card_widget.has-sweet-container .side-cta {
  margin: 0;
  font-size: initial;
  font-size: unset;
  right: -7em;
  top: 0;
}
.card_widget.has-sweet-container .side-cta.is-small {
  right: -10em;
}
.card_widget.has-sweet-container .side-cta img {
  width: 250px;
}
.card_widget.has-sweet-container .is-info {
  width: 70%;
}
@media (max-width: 768px) {
  .card_widget.has-sweet-container .is-info {
    width: 60%;
  }
}

.side-cta {
  margin: 0 auto;
  font-size: 0;
  right: 0;
  position: absolute;
}
.side-cta img {
  width: 100%;
  max-width: 350px;
  max-height: 350px;
}

.sandy-select .select-drop {
  position: fixed;
  overflow-y: auto;
  background: #fff;
  transition: all 0.3s;
  padding: 20px;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  scrollbar-width: none;
  z-index: 9999999;
  width: 500px;
  margin: auto;
  transform: translateX(-50%) !important;
  left: 50%;
  border-radius: 15px 15px 0 0;
  height: calc(100% - 100px);
  max-width: 100%;
  bottom: 0;
  top: unset;
}

.prism-wrap {
  position: relative;
  min-height: 200px;
}
.prism-wrap textarea {
  color: transparent;
  background: transparent;
  caret-color: white;
  z-index: 1;
}
.prism-wrap #highlighting {
  z-index: 0;
}
.prism-wrap textarea, .prism-wrap #highlighting {
  position: absolute;
  left: 0;
  top: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  margin: 10px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  resize: none;
}
.prism-wrap textarea, .prism-wrap #highlighting, .prism-wrap #highlighting-content * {
  font-size: 12px;
  font-family: monospace;
  line-height: 20px;
}
.prism-wrap #highlighting-content {
  white-space: pre-wrap;
}

.plan-star {
  position: relative;
}
.plan-star .star-span {
  position: absolute;
  font-size: 32px;
  right: 13px;
  top: -16px;
  background: #fff;
  color: #000;
  border-radius: 10px;
}

.bio-branding-mobile-wrapper {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex;
}

.bio-branding-mobile {
  background: #fff;
  cursor: pointer;
  height: 30px;
  width: auto;
  border-radius: 5px;
  padding: 0 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  position: relative;
  display: flex;
  margin: 15px 0;
  font-size: 11px;
}
body.is-dark .bio-branding-mobile {
  background: #000;
  color: #fff;
}

.mix-admin-href {
  background: #fff;
  cursor: pointer;
  height: 40px;
  width: auto;
  border-radius: 5px;
  padding: 0 21px;
  z-index: 1;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  position: absolute;
  display: flex;
  bottom: 69px;
  font-size: 11px;
  left: 14px;
}
.mix-admin-href i {
  font-size: 20px;
  margin-right: 10px;
}
body.is-dark .mix-admin-href {
  background: #000;
  color: #fff;
}

.sandy-switch {
  display: inline-block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-size: 0;
  transition: opacity 0.25s;
}

.sandy-switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.sandy-switch-in {
  display: inline-block;
}

.sandy-switch-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 30px;
  height: 18px;
  background: #d3d3d6;
  border-radius: 16px;
  transition: transform 0.2s ease;
  padding: 2px;
}
.sandy-switch-box2 {
  position: relative;
  display: flex;
  align-items: center;
  width: 30px;
  height: 18px;
  background: #ffffff;
  border-radius: 16px;
  transition: transform 0.2s ease;
  padding: 2px;
}

.sandy-switch-box:before {
  content: "";
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  display: block;
}

.sandy-switch-icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 0;
}

.sandy-switch-icon .icon {
  font-size: 24px;
  fill: #808191;
}

.sandy-switch-icon .icon-theme-dark {
  display: none;
}

.sandy-switch-input:checked + .sandy-switch-flex .sandy-switch-box:before {
  transform: translate(24px, -50%);
}

.sandy-switch .sandy-switch-in {
  position: relative;
  transition: padding 0.2s;
}

.sandy-switch .sandy-switch-input:checked + .sandy-switch-in .sandy-switch-box:before {
  border-radius: 400px;
  transform: translateX(12px);
  background: #fff;
}

.sandy-switch .sandy-switch-input:checked + .sandy-switch-in .sandy-switch-box {
  background: black;
}

.sandy-switch .sandy-switch-input:checked + .sandy-switch-in .icon-theme-dark {
  display: inline-block;
}

.sandy-switch .sandy-switch-input:checked + .sandy-switch-in .icon-theme-light {
  display: none;
}

.sandy-switch.reverse-switch .sandy-switch-box {
  background: #3F8CFF;
}
.sandy-switch.reverse-switch .sandy-switch-box:before {
  transform: translateX(12px);
}
.sandy-switch.reverse-switch .sandy-switch-input:checked + .sandy-switch-in .sandy-switch-box {
  background: black;
}
.sandy-switch.reverse-switch .sandy-switch-input:checked + .sandy-switch-in .sandy-switch-box:before {
  transform: translateX(0);
}

.is-empty.full img {
  width: 50%;
}
@media (max-width: 768px) {
  .is-empty.full img {
    width: 100%;
  }
}

.sandy-date-pickr-wrapper .datepicker {
  border: 0 !important;
  border-radius: 1rem;
  padding: 16px;
}

.auth-row {
  display: flex;
  overflow: hidden;
  min-height: 100vh;
}
.auth-row .auth-col {
  padding: 80px;
}
.auth-row .auth-col:first-child {
  position: relative;
  width: 44%;
  flex: 0 0 44%;
  background: #5DC2D3;
  color: #fff;
}
.auth-row .auth-col:nth-child(2) {
  flex: 0 0 56%;
  width: 56%;
  align-self: center;
}
@media (max-width: 1259px) {
  .auth-row .auth-col {
    padding: 80px 48px;
  }
  .auth-row .auth-col:first-child {
    position: relative;
    flex: 0 0 40%;
    width: 40%;
  }
  .auth-row .auth-col:nth-child(2) {
    flex: 0 0 60%;
    width: 60%;
  }
}
@media (max-width: 1023px) {
  .auth-row {
    align-items: center;
    padding: 24px;
    justify-content: center;
    align-items: center;
  }
  .auth-row .landing-form {
    min-height: 100vh;
  }
  .auth-row .auth-col {
    padding: 0;
  }
  .auth-row .auth-col:first-child {
    display: none;
  }
  .auth-row .auth-col:nth-child(2) {
    flex: 0 0 500px;
    width: 500px;
  }
}
@media (max-width: 768px) {
  .auth-row {
    display: block;
  }
  .auth-row .auth-col:nth-child(2) {
    width: 100%;
  }
}

.auth-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #355DFF;
  transition: color 0.2s;
}
.auth-link svg {
  width: 1.14em;
  height: 1em;
  fill: #11142D;
  margin-right: 12px;
  transition: fill 0.2s;
}

.auth-logo img {
  width: 20%;
}

.auth-preview {
  position: absolute;
  bottom: 0px;
  right: -113px;
  width: 245px;
  pointer-events: none;
}

.auth-text {
  font-size: 13px;
  font-weight: 700;
}

.notification-bar {
  padding: 10px 15px;
  position: fixed;
  bottom: 4.4vh;
  background-color: #f9f9f9;
  z-index: 100;
  transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  border-radius: 13px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
  max-width: 700px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999999;
}
body.is-dark .notification-bar {
  background: #222;
  color: #fff;
}
.notification-bar.hide {
  display: none;
}
.notification-bar.show {
  display: block;
}
.notification-bar .notification-text {
  font-size: 0.94rem;
  display: flex;
  padding-right: 30px;
}
@media (max-width: 768px) {
  .notification-bar {
    bottom: 1.4vh;
    width: calc(100% - 24px);
  }
}
.bio-body .notification-bar {
  display: none !important;
}
.notification-bar .noti-close-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 100%;
  display: flex;
  align-items: center;
}
.notification-bar .noti-close-btn i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
  position: relative;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
  transition: background cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
  display: block;
}

.intro-dark {
  background: #121212;
  padding: 7em 10em;
}
.intro-dark .intro-list-cards {
  background: #fff;
  border-radius: 19px;
  display: flex;
  padding: 25px;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.intro-dark .intro-list-cards:hover {
  transform: scale(1.05);
}
.intro-dark .intro-list-cards .h-avatar {
  height: 45px;
  width: 45px;
  margin-right: 18px;
  background: #fff;
  color: #000;
}
.intro-dark .intro-list-cards .h-avatar .icon {
  font-size: 20px;
  -webkit-text-stroke: 0.3px;
}
.intro-dark .intro-list-cards .content .content-title {
  font-size: 12px;
  color: #1E2432;
}
.intro-dark .intro-list-cards .content .content-desc {
  font-size: 12px;
  color: #7D8598;
}

#instantclick-bar {
  background: #5DC2D3;
}

.bio-name-text .verified {
  height: 27px;
  width: 18px;
}
.bio-name-text .verified .cls-1 {
  fill: #2b95e9;
  fill-rule: evenodd;
}
.bio-name-text .verified .cls-2 {
  fill: #fff;
}

.datepickers-container {
  z-index: 999999999;
}

.dropdown {
  position: relative;
}

.dropdown__head {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  font-size: 20px;
}

.dropdown__head .icon {
  font-size: 12px;
  fill: #11142D;
  transition: fill 0.2s;
}

.dropdown__head:hover .icon {
  fill: #355DFF;
}

.dropdown__body {
  position: absolute;
  top: calc(100% + 13px);
  left: -16px;
  z-index: 2;
  min-width: 272px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  z-index: -99;
}

.dropdown__body:not(.has-simplebar) {
  max-height: 30rem;
  overflow-y: auto;
  padding: 24px;
}

.dropdown__body [data-simplebar] {
  overflow-y: auto;
  height: 30rem;
  padding: 35px 24px;
}

.dropdown__link {
  position: relative;
  display: block;
  padding-left: 28px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.71429;
  font-weight: 600;
  color: #808191;
  transition: color 0.2s;
}

.dropdown__link:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 16px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg width='16' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.6 8.60001L2.4 5.40001L0 7.80001L5.6 13.4L16 3.00001L13.6 0.600006L5.6 8.60001Z' fill='%23355DFF'/%3E%3C/svg%3E%0A") no-repeat 50% 50%/100% auto;
  opacity: 0;
  transition: opacity 0.2s;
}

.dropdown__link:hover {
  color: #11142D;
}

.dropdown__link.selected {
  color: #355DFF;
}

.dropdown__link.selected:before {
  opacity: 1;
}

.dropdown__link:not(:last-child) {
  margin-bottom: 8px;
}

.dropdown.active {
  z-index: 5;
}

.dropdown.active .dropdown__head .icon {
  fill: #355DFF;
}

.dropdown.active .dropdown__body {
  visibility: visible;
  opacity: 1;
  z-index: 99999;
}

.trans-index-dropdown .dropdown__body {
  min-width: 200px;
  right: -36px;
  left: initial;
}

.subscription-btn-wrapper {
  position: relative;
}
.subscription-btn-wrapper .subscription-input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 14px;
  border-radius: 15px;
  background: none;
  border: 2px solid #E6E8EC;
  font-size: 14px;
  line-height: 1.71429;
  color: #23262F;
  transition: border-color 0.2s;
}
.subscription-btn-wrapper .subscription-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5DC2D3;
  transition: background 0.2s;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-btn-wrapper .subscription-btn i {
  color: #fff;
}

.login-modal-wrapper {
  padding: 72px 96px;
}
@media (max-width: 640px) {
  .login-modal-wrapper {
    padding: 40px 30px;
  }
}

.social-link.is-index {
  box-shadow: rgba(38, 50, 56, 0.16) 0px 8px 16px, rgba(0, 0, 0, 0.3) 0px 4px 5px -4px, rgba(255, 255, 255, 0.5) 0px 2px 5px inset, rgba(0, 0, 0, 0.2) 0px -1px 3px inset;
  background: #fff;
}
.social-link.is-index i {
  color: #000;
}
.social-link.is-index:first-child {
  margin-left: 0;
}

.discovery-wrapper-bg {
  background: #F4F5F6;
}

.discovery-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.discovery-wrapper .discovery-items {
  flex: 0 0 calc(20% - 48px);
  width: calc(20% - 48px);
  margin: 48px 24px 0;
  display: block;
  overflow: hidden;
  padding: 8px 8px 24px;
  border-radius: 16px;
  background: #FCFCFD;
  text-align: center;
  color: #23262F;
  transition: box-shadow 0.2s;
  position: relative;
}
.discovery-wrapper .discovery-items:nth-child(-n+5) {
  margin-top: 0;
}
.discovery-wrapper .discovery-items * {
  z-index: 10;
  position: relative;
}
.discovery-wrapper .discovery-items::before {
  content: "";
  background: var(--background-color, none);
  position: absolute;
  opacity: 0.2;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.discovery-wrapper .discovery-items:hover {
  box-shadow: 0px 64px 64px -48px rgba(31, 47, 70, 0.12);
}
.discovery-wrapper .discovery-items:hover .discovery-items-avatar {
  width: 90px;
  height: 90px;
}
.discovery-wrapper .discovery-items .discovery-items-title {
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
.discovery-wrapper .discovery-items .discovery-items-username {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}
.discovery-wrapper .discovery-items .discovery-items-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.discovery-wrapper .discovery-items .discovery-items-head .discovery-items-head-number {
  min-width: 39px;
  padding: 8px 12px 6px;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: #FCFCFD;
  background: #000;
}
.discovery-wrapper .discovery-items .discovery-items-avatar {
  position: relative;
  overflow: hidden;
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  transition: width 0.2s, height 0.2s;
}
.discovery-wrapper .discovery-items .discovery-items-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 1339px) {
  .discovery-wrapper .discovery-items {
    flex: 0 0 calc(20% - 32px);
    width: calc(20% - 32px);
    margin: 32px 16px 0;
  }
}
@media (max-width: 1179px) {
  .discovery-wrapper .discovery-items {
    flex: 0 0 calc(25% - 32px);
    width: calc(25% - 32px);
  }
}
@media (max-width: 1023px) {
  .discovery-wrapper .discovery-items {
    flex: 0 0 calc(33.333% - 32px);
    width: calc(33.333% - 32px);
  }
}
@media (max-width: 768px) {
  .discovery-wrapper .discovery-items {
    flex: 0 0 calc(50% - 32px);
    width: calc(50% - 32px);
  }
}

.discovery-preview {
  position: relative;
}
.discovery-preview::before {
  content: "";
  display: block;
  padding-bottom: 39.63%;
}
.discovery-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  -o-object-fit: cover;
     object-fit: cover;
}
.discovery-preview .discovery-preview-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 145px 80px;
}
.discovery-preview .discovery-preview-hero {
  max-width: 450px;
  margin-bottom: 16px;
  font-size: 96px;
}
@media (max-width: 1339px) {
  .discovery-preview .discovery-preview-hero {
    font-size: 80px;
  }
}
@media (max-width: 1179px) {
  .discovery-preview .discovery-preview-hero {
    font-size: 64px;
  }
}

.docs-search-header.is-discover .search-image-container {
  border-radius: 25px;
  padding: 145px 80px;
  justify-content: start;
  max-height: 400px;
}
@media (max-width: 768px) {
  .docs-search-header.is-discover .search-image-container {
    padding: 45px 30px;
  }
}
.docs-search-header.is-discover .search-image-container .search-image-text {
  text-align: left;
  max-width: 450px;
}
.docs-search-header.is-discover .search-image-container .search-image-text .search-heading-text {
  line-height: initial;
}
@media (min-width: 768px) {
  .docs-search-header.is-discover .search-image-container .search-image-text .search-heading-text {
    font-size: 47px;
  }
}

.card_widget {
  padding: 32px;
  border-radius: 24px;
  background: #ffffff;
}
.card_widget::before, .card_widget::after {
  content: "";
  position: absolute;
  border-radius: 24px;
}
.card_widget::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: -8px;
  z-index: -1;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
}
.card_widget::after {
  top: 32px;
  right: 32px;
  left: 32px;
  bottom: -32px;
  z-index: -2;
  background: #E4E4E4;
  filter: blur(86.985px);
}
.card_widget.card-inherit::before {
  background: inherit;
  opacity: 0.4;
}

.card {
  position: relative;
}

.card-appoi {
  background:var(--c-button-background-color);
}

.installation-center-wrapper {
  background: #f9f9f9;
}
.installation-center-wrapper .installation-content {
  width: 700px;
  margin: auto;
  min-height: 100vh;
  max-width: 100%;
  display: flex;
}

.is-install-card {
  background: radial-gradient(circle farthest-corner at 10% 20%, rgba(255, 255, 255, 0.67) 0.1%, #bbc5c7 90.1%);
}
.is-install-card::before {
  background: inherit;
  opacity: 0.5;
}
.is-install-card .card-container {
  padding: 32px;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.is-install-card .side-cta {
  right: -189px;
  bottom: -104px;
  z-index: 0;
}

.context.is-element {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pricing-short-item {
  position: relative;
  padding: 2.5rem 2rem;
  text-align: center;
  height: auto;
  border-radius: 15px;
}
.pricing-short-item.is-best {
  background: #5DC2D3;
}
.pricing-short-item.is-best * {
  color: #fff !important;
}
.pricing-short-item.is-best .button {
  border-color: #fff;
}
.pricing-short-item .number {
  margin-bottom: 1.8rem;
}
.pricing-short-item .number .n-price {
  font-size: 50px;
  font-weight: 600;
  color: #0b2238;
  position: relative;
}
.pricing-short-item .number .coins {
  position: absolute;
  color: #6c7a87;
  font-size: 20px;
  font-weight: 600;
}
.pricing-short-item .number .per {
  color: #6c7a87;
  font-size: 14px;
  font-weight: 400;
}
.pricing-short-item .item-name {
  font-size: 25px;
  font-weight: 600;
  color: #0b2238;
  margin-bottom: 1.8rem;
}

.sandy-upload-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px;
  border: 1.4px solid #d6d6d6;
  padding: 8px 10px 8px 15px;
  background: white;
  position: relative;
}
.sandy-upload-v2.active {
  padding-left: 10px;
}
.sandy-upload-v2.active .info {
  display: none;
}
.sandy-upload-v2.active .image-con {
  display: flex;
}
.sandy-upload-v2 .info {
  font-style: normal;
  font-weight: normal;
  line-height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: -0.41px;
  color: #111111;
}
.sandy-upload-v2 .image-con {
  display: none;
  align-items: center;
  width: 80%;
}
@media (max-width: 640px) {
  .sandy-upload-v2 .image-con {
    width: 70%;
  }
}
@media (max-width: 500px) {
  .sandy-upload-v2 .image-con .file-name {
    width: 100px !important;
  }
}
.sandy-upload-v2 .image-con .file-name {
  margin-left: 10px;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sandy-upload-v2 .image {
  height: 41px;
  width: 3em;
  background-size: cover;
  border-radius: 10px;
}
.sandy-upload-v2 .add-button {
  background: #f2f2f2;
  border-radius: 10px;
  padding: 10px 17px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.4px;
  color: #000;
}
.sandy-upload-v2 input[type=file] {
  position: absolute;
  cursor: pointer;
  z-index: 59;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}

.text-sticker .is-link {
  max-width: 100%;
  overflow: hidden;
}
.text-sticker .is-link span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.integration-logo {
  height: 770px;
}
.integration-logo .block-circle {
  position: relative;
}
.integration-logo .block-circle::before {
  content: "";
  width: 100%;
  height: 685px;
  position: absolute;
  left: 0;
  bottom: -320px;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: -1;
}
.integration-logo .block-circle .item-logo:first-of-type {
  width: 120px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -60px;
  left: 160px;
  -o-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  -ms-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
}
.integration-logo .block-circle .item-logo:first-of-type img {
  width: 102px;
  height: 102px;
}
.integration-logo .block-circle .item-logo:nth-of-type(2) {
  width: 100px;
  height: 100px;
  background-color: #0b2238;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -290px;
  left: 260px;
}
.integration-logo .block-circle .item-logo:nth-of-type(2) img {
  width: 50px;
  height: 50px;
}
.integration-logo .block-circle .item-logo:nth-of-type(3) {
  width: 60px;
  height: 60px;
  background-color: #ffce53;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30px;
  left: 420px;
}
.integration-logo .block-circle .item-logo:nth-of-type(3) img {
  width: 30px;
  height: 30px;
}
.integration-logo .block-circle .item-logo:nth-of-type(4) {
  width: 100px;
  height: 100px;
  background-color: #2a6cfa;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -70px;
  right: 280px;
}
.integration-logo .block-circle .item-logo:nth-of-type(4) img {
  width: 50px;
  height: 50px;
}
.integration-logo .block-circle .item-logo:nth-of-type(5) {
  width: 120px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -360px;
  left: 45%;
  -o-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  -ms-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
}
.integration-logo .block-circle .item-logo:nth-of-type(5) img {
  width: 92px;
  height: 92px;
}
.integration-logo .block-circle .item-logo:nth-of-type(6) {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -200px;
  left: 61%;
  -o-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  -ms-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
}
.integration-logo .block-circle .item-logo:nth-of-type(6) img {
  width: 84px;
  height: 84px;
}
.integration-logo .block-circle .item-logo:nth-of-type(7) {
  width: 120px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: -170px;
  right: 8%;
  -o-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  -ms-box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
  box-shadow: 0px 5px 60px 0px rgba(11, 34, 56, 0.05) !important;
}
.integration-logo .block-circle .item-logo:nth-of-type(7) img {
  width: 100px;
  height: 100px;
}

@media (max-width: 767px) {
  .integration-logo {
    height: 830px;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle {
    margin-top: 5rem;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle::before {
    height: 470px;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle::before {
    display: none;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle .item-logo:first-of-type {
    left: 0;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle .item-logo:nth-of-type(2) {
    bottom: -250px;
    left: 140px;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle .item-logo:nth-of-type(2) {
    bottom: -200px;
    left: 0;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle .item-logo:nth-of-type(3) {
    left: 280px;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle .item-logo:nth-of-type(3) {
    left: 140px;
    top: 60px;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle .item-logo:nth-of-type(4) {
    right: 80px;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle .item-logo:nth-of-type(4) {
    right: 0;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle .item-logo:nth-of-type(5) {
    bottom: -340px;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle .item-logo:nth-of-type(5) {
    left: 15%;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle .item-logo:nth-of-type(6) {
    bottom: -177px;
    left: 58%;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle .item-logo:nth-of-type(6) {
    bottom: -317px;
    left: 60%;
  }
}
@media (max-width: 991px) {
  .integration-logo .block-circle .item-logo:nth-of-type(7) {
    right: 0;
  }
}
@media (max-width: 767px) {
  .integration-logo .block-circle .item-logo:nth-of-type(7) {
    bottom: -190px;
  }
}
.block-style-six {
  position: relative;
}
.block-style-six:nth-child(even):before {
  content: "";
  position: absolute;
  width: 100%;
  height: 13px;
  left: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.block-style-six .shapes {
  position: absolute;
  z-index: -1;
}
.block-style-six .text-details .title {
  font-size: 42px;
  line-height: 1.26em;
  padding: 24px 0 34px;
}
.block-style-six .text-details .text-meta {
  font-size: 22px;
  line-height: 1.54em;
  padding-bottom: 65px;
}
.block-style-six .text-details .quote-wrapper {
  background: #f4f9fc;
  border-radius: 5px;
  padding: 35px 50px 25px 35px;
  position: relative;
}
.block-style-six .text-details .quote-wrapper .quote-icon {
  width: 57px;
  height: 57px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 27px;
  top: -29px;
}
.block-style-six .text-details .quote-wrapper blockquote {
  font-size: 18px;
  line-height: 1.55em;
  color: #0d0d0d;
}
.block-style-six .text-details .name {
  font-size: 16px;
  color: #a8a8a8;
  margin-top: 24px;
  line-height: 1.44em;
}
.block-style-six .text-details .name strong {
  font-weight: 500;
  color: #191717;
}
.block-style-six .illustration-one .shape-one {
  width: 6px;
  height: 6px;
  background: #f2dad5;
  top: -7%;
  right: 41%;
  -webkit-animation: jumpThree 5s infinite linear;
          animation: jumpThree 5s infinite linear;
}
.block-style-six .illustration-one .shape-two {
  width: 14px;
  height: 14px;
  background: #f77a56;
  top: 14%;
  right: -10%;
  -webkit-animation: jumpTwo 5s infinite linear;
          animation: jumpTwo 5s infinite linear;
}
.block-style-six .illustration-one .shape-three {
  width: 7px;
  height: 7px;
  background: #f2dad5;
  bottom: 29%;
  right: -5%;
  -webkit-animation: jumpThree 5s infinite linear;
          animation: jumpThree 5s infinite linear;
}
.block-style-six .illustration-one .shape-four {
  width: 10px;
  height: 10px;
  background: #f77a56;
  bottom: -2%;
  right: 51%;
  -webkit-animation: jumpTwo 5s infinite linear;
          animation: jumpTwo 5s infinite linear;
}
.block-style-six .illustration-one .shape-five {
  width: 7px;
  height: 7px;
  background: #f2dad5;
  top: 45%;
  left: 5%;
  -webkit-animation: jumpThree 5s infinite linear;
          animation: jumpThree 5s infinite linear;
}
.block-style-six .illustration-one .shape-six {
  top: 17%;
  left: 6%;
  -webkit-animation: jumpTwo 8s infinite linear;
          animation: jumpTwo 8s infinite linear;
}
.block-style-six .illustration-one .shape-seven {
  top: 42%;
  right: -3%;
  -webkit-animation: rotatedTwo 35s infinite linear;
          animation: rotatedTwo 35s infinite linear;
}
.block-style-six .illustration-two .shape-one {
  width: 6px;
  height: 6px;
  background: #f2dad5;
  top: -5%;
  left: 22%;
  -webkit-animation: jumpThree 5s infinite linear;
          animation: jumpThree 5s infinite linear;
}
.block-style-six .illustration-two .shape-two {
  width: 8px;
  height: 8px;
  background: #f2dad5;
  top: 63%;
  right: 12%;
  -webkit-animation: jumpTwo 5s infinite linear;
          animation: jumpTwo 5s infinite linear;
}
.block-style-six .illustration-two .shape-three {
  width: 6px;
  height: 6px;
  background: #f77a56;
  bottom: -11%;
  right: 44%;
  -webkit-animation: jumpThree 5s infinite linear;
          animation: jumpThree 5s infinite linear;
}
.block-style-six .illustration-two .shape-four {
  width: 10px;
  height: 10px;
  background: #f77a56;
  bottom: 39%;
  left: -10%;
  -webkit-animation: jumpTwo 5s infinite linear;
          animation: jumpTwo 5s infinite linear;
}
.block-style-six .illustration-two .shape-five {
  top: 9%;
  left: -3%;
  -webkit-animation: rotatedTwo 35s infinite linear;
          animation: rotatedTwo 35s infinite linear;
}
.block-style-six .illustration-two .shape-six {
  bottom: 3%;
  right: 20%;
  -webkit-animation: jumpTwo 8s infinite linear;
          animation: jumpTwo 8s infinite linear;
}

.sandy-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .sandy-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .sandy-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .sandy-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .sandy-container {
    max-width: 1140px;
  }
}
.sandy-container.footer {
  padding-right: 40px;
  padding-left: 40px;
}

.moc-app {
  position: relative;
  padding: 30px;
}
.moc-app::before {
  content: "";
  position: absolute;
  height: 280px;
  width: 100%;
  background-color: #f7f7f7;
  border-radius: 40px;
  left: 0;
  bottom: -20px;
  z-index: -1;
}
.moc-app img {
  box-shadow: -30px 60px 40px -18px rgba(11, 34, 56, 0.07);
  border-radius: 46px;
  width: 100%;
}
@media (max-width: 768px) {
  .moc-app img {
    border-radius: 33px;
  }
}

.index-mock-switch .switch-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.index-mock-switch .switch-links .switch-links-inner {
  padding: 35px;
  border-radius: 13px;
  transition: 0.4s !important;
  background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
  opacity: 0.15;
  width: 66%;
  cursor: pointer;
}
@media (max-width: 768px) {
  .index-mock-switch .switch-links .switch-links-inner {
    width: 100%;
  }
}
.index-mock-switch .switch-links .switch-links-inner .switch-links-content span {
  display: block;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #0b2238;
}
.index-mock-switch .switch-links .switch-links-inner .switch-links-content h3 {
  color: #0b2238;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 0;
}
.index-mock-switch .switch-links .switch-links-inner.active {
  opacity: 1;
}

.has-cta-bg-shade {
  position: relative;
}
.has-cta-bg-shade .cta-background-shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.has-cta-bg-shade .cta-background-shade img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.sio.sligh-thick {
  -webkit-text-stroke: 0.2px;
}

.editor__wrap {
  background: #fafafa;
  border-radius: 12px;
}

.editor__head {
  display: flex;
  padding: 24px;
  border-bottom: 1px solid #E4E4E4;
}

.editor__control {
  display: flex;
  flex-wrap: wrap;
  margin: -16px auto 0 -16px;
}

.editor__action {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin: 16px 0 0 16px;
  border-radius: 4px;
  background: #E4E4E4;
  transition: all 0.25s;
  cursor: pointer;
}

.editor__action .icon {
  font-size: 12px;
  fill: #808191;
  transition: fill 0.25s;
}

.editor__action:hover, .editor__action.active {
  background: #fff;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
}

.editor__action:hover .icon, .editor__action.active .icon {
  fill: #ffffff;
}

.editor__add {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: 30px;
  border-radius: 50%;
  background: #1B1D21;
  transition: all 0.25s;
}

.editor__add:before, .editor__add:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
}

.editor__add:before {
  width: 8px;
  height: 2px;
}

.editor__add:after {
  width: 2px;
  height: 8px;
}

.editor__add:hover {
  background: rgba(27, 29, 33, 0.8);
}

.editor__body {
  padding: 32px 24px;
}

.editor__textarea {
  width: 100%;
  height: 110px;
  border: none;
  background: none;
  resize: none;
  font-size: 14px;
}

.editor__gallery {
  display: flex;
  flex-wrap: wrap;
  max-width: 360px;
  margin: -16px 0 0 -8px;
}

.editor__preview {
  position: relative;
  flex: 0 0 calc(50% - 16px);
  width: calc(50% - 16px);
  margin: 16px 8px 0;
  font-size: 0;
  cursor: pointer;
}

.editor__pic {
  border-radius: 8px;
}

.editor__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  font-size: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s;
}

.editor__close .icon {
  font-size: 6px;
  fill: #1B1D21;
  transition: transform 0.25s;
}

.editor__close:hover .icon {
  transform: rotate(90deg);
}

.editor__preview:hover .editor__close {
  visibility: visible;
  opacity: 1;
}

.editor__btn {
  min-width: 232px;
  margin-top: 24px;
}

.editor__btn.btn_wide {
  min-width: 100%;
}

.editor .files {
  width: 100%;
  margin-top: 24px;
}

.message-list:not(:last-child) {
  margin-bottom: 32px;
}

.message-item {
  display: flex;
}

.message-item:not(:last-child) {
  margin-bottom: 24px;
}

.message-ava {
  flex-shrink: 0;
  margin-right: 10px;
  font-size: 0;
}

.message-ava .message-pic {
  width: 100%;
  min-height: 100%;
  border-radius: 50%;
}

.message-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 40px;
  border-radius: 12px;
  background: #1B1D21;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s;
}

.message-action {
  width: 16px;
  height: 16px;
  font-size: 0;
  transition: opacity 0.25s;
}

.message-action .icon {
  font-size: 16px;
  fill: #ffffff;
}

.message-action .icon-menu {
  font-size: 4px;
}

.message-action:hover {
  opacity: 0.75;
}

.message-action:not(:last-child) {
  margin-right: 24px;
}

.message-head {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}

.message-time {
  margin-left: 16px;
  color: #808191;
}

.message-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: -8px;
}
.message-body .\--actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.3s;
  z-index: 999;
}
.message-body .\--actions .-actions-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 19px;
}
.message-body:hover .\--actions {
  opacity: 1;
}

.message-text {
  position: relative;
  min-width: 180px;
  margin-top: 8px;
  padding: 10px 13px;
  border-radius: 13px;
  background: #f4f5f7;
  line-height: 1.71429;
  color: #000;
  cursor: pointer;
  transition: all 0.25s;
  font-size: 13px;
}

.message-text + .files-item {
  border-top-right-radius: 0 !important;
}

.message-text + .image-container {
  border-top-right-radius: 0 !important;
}

.message-item .msg-info-ava .\--name {
  display: flex;
}
.message-item .msg-info-ava .\--wrap {
  margin-left: 0.5rem;
}
.message-item.is-left .message-text {
  border-top-left-radius: 0px;
}
.message-item.is-left .msg-info-ava .\--wrap {
  margin-right: auto;
}
.message-item.is-right .message-details .h-avatar {
  display: none;
}
.message-item.is-right .message-ava {
  display: none;
}
.message-item.is-right .msg-info-ava .\--name {
  display: none;
}
.message-item.is-right .msg-info-ava .\--wrap {
  margin-left: auto;
}
.message-item.is-right .message-text {
  border-bottom-right-radius: 0px;
}

.message-text:hover {
  background: #3F8CFF;
  color: #ffffff;
}

.message-text:not(:first-child) {
  border-top-left-radius: 4px;
}

.message-text:not(:last-child) {
  border-bottom-left-radius: 4px;
}

.message-text:hover .message-actions {
  visibility: visible;
  opacity: 1;
}

.msg-info-ava {
  display: none;
}

.support-chat {
  max-height: 100%;
  padding: 32px 64px;
}
@media (max-width: 768px) {
  .support-chat {
    padding: 0;
  }
}
.support-chat .divider-container .divider {
  margin: 1.5em auto 1.5em auto;
  text-align: center;
}
.support-chat .divider-container .divider span {
  color: #cecece;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.support-chat .messages .message-item.is-right + .message-item.is-right .message-head, .support-chat .messages .message-item.is-left + .message-item.is-left .message-head {
  display: none;
}
.support-chat .messages .message-item.is-right ~ .message-item.is-right .msg-info-ava, .support-chat .messages .message-item.is-left ~ .message-item.is-left .msg-info-ava {
  display: flex;
}
.support-chat .messages .message-item.is-right {
  flex-direction: row-reverse;
}
.support-chat .messages .message-item.is-right .image-container {
  margin-left: auto;
}
.support-chat .messages .message-item.is-right .message-head {
  justify-content: flex-end;
  margin-right: 23px;
}
.support-chat .messages .message-item.is-right .message-ava {
  margin-right: 0;
  margin-left: 20px;
}
.support-chat .messages .message-item.is-right .message-text {
  background: #058fff;
  color: #fff;
  margin-left: auto;
}
.support-chat .image-container {
  height: 280px;
  border-radius: 20px;
  min-width: 230px;
  max-width: 40%;
  position: relative;
}
.support-chat .image-container:hover .image-overlay {
  opacity: 0.4;
}
.support-chat .image-container:hover .image-actions {
  opacity: 1;
  pointer-events: all;
}
.support-chat .image-container img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}
.support-chat .image-container .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #909090;
  border-radius: inherit;
  transition: all 0.3s;
  z-index: 2;
}
.support-chat .image-container .image-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 5;
}
.support-chat .image-container .image-actions .actions-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 19px;
}
.support-chat .image-container .image-actions .actions-inner .action {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 10px;
  background: #fff;
  margin: 0 6px;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 0;
}
.support-chat .files {
  width: 100%;
}
.support-chat .files-list {
  display: flex;
  margin: -8px -4px 0;
}
.support-chat .files-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  color: #11142D;
  transition: opacity 0.25s;
  position: relative;
  width: 400px;
}
@media (max-width: 600px) {
  .support-chat .files-item {
    width: 100%;
  }
}
.support-chat .files-item .hoverable-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #fff;
  border-radius: 16px;
  transition: all 0.3s;
  z-index: 2;
}
.support-chat .files-item .hoverable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 5;
  border-radius: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}
.support-chat .files-item.purple {
  background: rgba(207, 200, 255, 0.5);
}
.support-chat .files-item.purple .files-preview {
  background: #CFC8FF;
}
.support-chat .files-item.blue {
  background: #E7FAFF;
}
.support-chat .files-item.blue .files-preview {
  background: #A0D7E7;
}
.support-chat .files-item:hover {
  opacity: 0.8;
}
.support-chat .files > .files-item:not(:last-child) {
  margin-bottom: 10px;
}
.support-chat .files-list .files-item {
  flex: 0 0 calc(50% - 8px);
  width: calc(50% - 8px);
  margin: 4px 4px 0;
}
@media (max-width: 768px) {
  .support-chat .files-list .files-item {
    width: 100%;
    flex: 0 0 100%;
  }
}
.support-chat .files-preview {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  font-size: 0;
  z-index: 10;
  position: relative;
}
.support-chat .files-preview:hover + .files-details .hoverable-overlay {
  opacity: 0.7;
  z-index: 15;
}
.support-chat .files-preview:hover + .files-details .hoverable {
  opacity: 1;
  pointer-events: all;
  z-index: 15;
}
.support-chat .files-pic {
  max-width: 100%;
  max-height: 100%;
}
.support-chat .files-details {
  flex: 0 0 calc(100% - 48px);
  width: calc(100% - 48px);
  padding-left: 16px;
}
.support-chat .files-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5F75EE;
}

.inbox {
  padding: 32px 64px;
}
@media (max-width: 768px) {
  .inbox {
    padding: 0;
  }
}
.inbox .inbox-tags {
  display: flex;
  flex-wrap: wrap;
  margin: -18px 0 28px -18px;
}
.inbox .inbox-tag {
  margin: 18px 0 0 18px;
  border: 2px solid #FF754C;
  border-radius: 12px;
  padding: 6px 16px;
  line-height: 1.42857;
  font-weight: 600;
  color: #11142D;
  transition: all 0.25s;
}
.inbox .inbox-tag:hover, .inbox .inbox-tag.active {
  background: #6C5DD3;
  border-color: #6C5DD3;
  color: #ffffff;
}
.inbox .inbox-container {
  position: relative;
  padding: 32px;
  border-radius: 24px;
  background: #ffffff;
}
.inbox .inbox-container:before {
  content: "";
  position: absolute;
  top: 32px;
  left: 18px;
  right: 18px;
  bottom: -32px;
  z-index: -1;
  background: #E3E6EC;
  opacity: 0.91;
  filter: blur(86.985px);
  border-radius: 24px;
}
.inbox .inbox-container > .inbox-title {
  margin-bottom: 16px;
}
.inbox .inbox-list {
  margin: 0 -16px;
}
.inbox .inbox-item {
  display: flex;
  padding: 32px 16px;
  border-radius: 13px;
  background: whitesmoke;
  color: #808191;
  cursor: pointer;
  transition: all 0.25s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: 1px solid #F0F3F6;
}
.inbox .inbox-item:not(:last-child) {
  margin-bottom: 15px;
}
.inbox .inbox-counter {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 550px;
  font-size: 12px;
  font-weight: 600;
}
.inbox .inbox-ava {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 0;
}
.inbox .inbox-ava .inbox-pic {
  width: 100%;
  min-height: 100%;
  border-radius: 50%;
}
.inbox .inbox-details {
  flex: 0 0 calc(100% - 48px);
  width: calc(100% - 48px);
  padding-left: 24px;
}
.inbox .inbox-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.inbox .inbox-author {
  color: #5F75EE;
  transition: color 0.25s;
}
.inbox .inbox-time {
  margin-left: 10px;
}
.inbox .inbox-item .inbox-title {
  margin-bottom: 18px;
  color: #11142D;
  transition: color 0.25s;
}
.inbox .inbox-text {
  margin-bottom: 16px;
}
.inbox .inbox-text p:not(:last-child) {
  margin-bottom: 20px;
}
.inbox .inbox-item:hover {
  background: rgba(228, 228, 228, 0.3);
}
.inbox .inbox-item.active {
  background: #6C5DD3;
  color: #ffffff;
}
.inbox .inbox-item.active .actions__btn {
  border-color: #ffffff;
}
.inbox .inbox-item.active .actions__btn .icon {
  fill: #ffffff;
}
.inbox .inbox-item.active .inbox-title,
.inbox .inbox-item.active .inbox-author {
  color: #ffffff;
}
.inbox .inbox-foot {
  padding-top: 12px;
  text-align: center;
}
.inbox .inbox-foot .inbox-btn {
  min-width: 180px;
}
.inbox .inbox-control {
  display: flex;
  margin-bottom: 60px;
}
.inbox .inbox-btns {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.inbox .inbox-btns .inbox-btn {
  min-width: 140px;
}
.inbox .inbox-btns .inbox-btn:not(:last-child) {
  margin-right: 16px;
}
.inbox .inbox-more {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 0;
  transition: box-shadow 0.25s;
}
.inbox .inbox-more .icon {
  font-size: 6px;
  fill: #11142D;
}
.inbox .inbox-more:hover {
  box-shadow: 0 5px 20px rgba(227, 230, 236, 0.85);
}
.inbox .inbox-box {
  display: flex;
}
.inbox .inbox-box:not(:last-child) {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E4E4E4;
}
.inbox .inbox-box .inbox-author {
  color: #11142D;
}
.inbox .inbox-box .inbox-time {
  margin-left: 24px;
  color: #B2B3BD;
}
.inbox .inbox-box .inbox-title {
  margin-bottom: 32px;
}
.inbox .inbox-box .inbox-text {
  color: #808191;
}

.emoji-picker {
  padding: 20px;
  border: 0 !important;
  box-shadow: 0px 20px 60px 0px rgba(11, 34, 56, 0.1);
  border-radius: 28px !important;
}
.emoji-picker .emoji-picker__search-container {
  height: 3rem !important;
}
.emoji-picker .emoji-picker__search {
  padding: 0.5em 2.25em 0.5em 1.5em !important;
  border-radius: 20px !important;
  background: #fafafa !important;
}
.emoji-picker .emoji-picker__content {
  margin-top: 52px;
}
.emoji-picker .emoji-picker__preview {
  margin-top: 20px;
  border: 0 !important;
}

.htmx-request .custom-indicator {
  display: inline;
}

.htmx-request.custom-indicator {
  display: inline;
}

.main1 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 880px;
  padding: 34px 0 180px;
  overflow: hidden;
}

@media only screen and (max-width: 1179px) {
  .main1 {
    min-height: 606px;
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {
  .main1 {
    min-height: auto;
    padding: 64px 0 0;
  }
}
.main1__wrap {
  position: relative;
  z-index: 3;
  max-width: 450px;
}

@media only screen and (max-width: 1023px) {
  .main1__wrap {
    max-width: 350px;
  }
}
@media only screen and (max-width: 767px) {
  .main1__wrap {
    max-width: 100%;
    margin-bottom: 32px;
  }
}
.main1__title {
  margin-bottom: 20px;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.main1__text {
  margin-bottom: 40px;
  color: #777E90;
}

.main1__btns {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .main1__button {
    padding: 0 22px;
  }
}
.main1__button:not(:last-child) {
  margin-right: 16px;
}

.main1 .scroll {
  position: absolute;
  bottom: 96px;
}

@media only screen and (max-width: 1179px) {
  .main1 .scroll {
    display: none;
  }
}
.main1__gallery {
  position: absolute;
  top: 50%;
  right: calc(50% - 720px);
  width: 800px;
  transform: translateY(-50%);
  pointer-events: none;
}

@media only screen and (max-width: 1179px) {
  .main1__gallery {
    top: 54%;
    right: calc(50% - 600px);
    width: 600px;
  }
}
@media only screen and (max-width: 1023px) {
  .main1__gallery {
    right: calc(50% - 520px);
    width: 550px;
  }
}
@media only screen and (max-width: 767px) {
  .main1__gallery {
    position: relative;
    top: auto;
    right: auto;
    width: 580px;
    margin: 0 auto;
    transform: translateY(0);
  }
}
@media only screen and (max-width: 474px) {
  .main1__gallery {
    left: -32%;
  }
}
.main1__preview:first-child {
  position: relative;
  z-index: 2;
}
.main1__preview:nth-child(2) {
  top: 10%;
  right: 20%;
  z-index: 3;
  width: 20%;
}
.main1__preview:nth-child(3) {
  top: 47%;
  left: 12%;
  z-index: 1;
  width: 8.5%;
}
.main1__preview:not(:first-child) {
  position: absolute;
}
.main1__preview img {
  width: 100%;
}

.program__wrap {
  display: flex;
  align-items: center;
  padding: 48px 76px 64px;
  background: #FCFCFD;
  box-shadow: 0px 64px 64px -48px rgba(15, 15, 15, 0.1);
  border-radius: 24px;
}

@media only screen and (max-width: 1179px) {
  .program__wrap {
    padding: 48px 24px;
  }
}
@media only screen and (max-width: 767px) {
  .program__wrap {
    display: block;
    border-radius: 16px;
  }
}
body.dark .program__wrap {
  background: #141416;
}

.program__col:first-child {
  flex: 0 0 372px;
  padding-bottom: 40px;
}
.program__col:nth-child(2) {
  flex-grow: 1;
  padding-left: 20px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .program__col:first-child {
    margin: 0 -10px 16px;
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .program__col:nth-child(2) {
    padding-left: 0;
  }
}
.program .stage-small {
  margin-bottom: 24px;
  padding-left: 24px;
}

@media only screen and (max-width: 767px) {
  .program .stage-small {
    margin-bottom: 16px;
    padding-left: 10px;
  }
}
.program__item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
  font-size: 24px;
  line-height: 1.33333;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #23262F;
  transition: background 0.2s;
}
.program__item:hover {
  background: #F4F5F6;
}

@media only screen and (max-width: 767px) {
  .program__item {
    padding: 10px;
    font-size: 18px;
  }
}
body.dark .program__item {
  background: #23262F;
  color: #FCFCFD;
}
body.dark .program__item:hover {
  background: #353945;
}

.program__item:not(:last-child) {
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  .program__item:not(:last-child) {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  body.dark .program__item:not(:last-child) {
    margin-bottom: 8px;
  }
}
.program__arrow {
  margin-left: auto;
  padding-left: 20px;
}
.program__arrow .icon {
  width: 14px;
  height: 14px;
  fill: #777E90;
}

.program__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 20px;
  border-radius: 12px;
}
.program__icon img {
  max-width: 24px;
  max-height: 24px;
}

@media only screen and (max-width: 767px) {
  .program__icon {
    margin-right: 12px;
  }
}
.program__preview {
  margin-bottom: 42px;
}
.program__preview img {
  max-width: 400px;
}

@media only screen and (max-width: 767px) {
  .program__preview {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 1179px) {
  .program__preview img {
    max-width: 240px;
  }
}
.program__info {
  max-width: 380px;
  margin: 0 auto 24px;
  color: #777E90;
}

.offers {
  text-align: center;
}
.offers .stage {
  margin-bottom: 16px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: #777E90;
}

.offers__title {
  max-width: 650px;
  margin: 0 auto 32px;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

@media only screen and (max-width: 1023px) {
  .offers__title {
    max-width: 550px;
  }
}
.offers__text {
  max-width: 450px;
  margin: 0 auto 48px;
  color: #777E90;
}

@media only screen and (max-width: 767px) {
  .lifestyle {
    padding-top: 64px;
  }
}
.lifestyle__head {
  max-width: 545px;
  margin-bottom: 80px;
}

@media only screen and (max-width: 767px) {
  .lifestyle__head {
    margin-bottom: 48px;
  }
}
.lifestyle__stage {
  margin-bottom: 32px;
}

.lifestyle__title {
  margin-bottom: 20px;
  font-size: 48px;
  line-height: 1.16667;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.lifestyle__info {
  margin-bottom: 24px;
  font-size: 24px;
  line-height: 1.33333;
  letter-spacing: -0.01em;
  color: #777E90;
}

@media only screen and (max-width: 767px) {
  .lifestyle__button {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .lifestyle__wrap {
    margin: 0 -12px;
  }
}
@media only screen and (max-width: 767px) {
  .lifestyle__slider {
    padding-bottom: 70px;
    visibility: hidden;
  }
  .lifestyle__slider.slick-initialized {
    visibility: visible;
  }
}
.lifestyle__row {
  display: flex;
  align-items: center;
  margin: 0 -16px;
}
.lifestyle__row:not(:last-child) {
  margin-bottom: 112px;
}

@media only screen and (max-width: 767px) {
  .lifestyle__row {
    display: flex !important;
    flex-direction: column-reverse;
    margin: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .lifestyle__row:not(:last-child) {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .lifestyle__row:not(:last-child) {
    margin-bottom: 0;
  }
}
.lifestyle__col {
  flex: 0 0 calc(50% - 32px);
  width: calc(50% - 32px);
  margin: 0 16px;
}
.lifestyle__col img {
  width: 100%;
  border-radius: 24px;
}
.lifestyle__col:first-child {
  padding-top: 32px;
}

@media only screen and (max-width: 767px) {
  .lifestyle__col {
    flex: 0 0 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 1179px) {
  .lifestyle__col:first-child {
    padding-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .lifestyle__col:first-child {
    margin-top: 48px;
  }
}
.lifestyle__details {
  max-width: 260px;
}

@media only screen and (max-width: 767px) {
  .lifestyle__details {
    max-width: 100%;
  }
}
.lifestyle__number {
  margin-bottom: 24px;
  padding-bottom: 26px;
  border-bottom: 2px solid #E6E8EC;
  font-size: 32px;
  line-height: 1.25;
}

body.dark .lifestyle__number {
  border-color: #353945;
}

.lifestyle__category {
  margin-bottom: 16px;
  font-weight: 600;
}

.lifestyle__content {
  font-size: 14px;
  line-height: 1.71429;
  color: #777E90;
}

.lifestyle .slick-slide {
  padding: 0 12px;
}
.lifestyle .slick-arrow {
  bottom: 0;
}
.lifestyle .slick-prev {
  left: 12px;
}
.lifestyle .slick-next {
  left: 56px;
}

.workouts {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1096px;
  padding: 100px 0;
  overflow: hidden;
}

@media only screen and (max-width: 1339px) {
  .workouts {
    min-height: 960px;
  }
}
@media only screen and (max-width: 1179px) {
  .workouts {
    min-height: 840px;
  }
}
@media only screen and (max-width: 767px) {
  .workouts {
    min-height: auto;
    padding: 64px 0;
  }
}
.workouts__wrap {
  position: relative;
  z-index: 3;
  max-width: 450px;
}

@media only screen and (max-width: 1179px) {
  .workouts__wrap {
    max-width: 420px;
  }
}
.workouts__title {
  margin-bottom: 32px;
}

.workouts__info {
  margin-bottom: 32px;
  font-size: 24px;
  line-height: 1.33333;
  letter-spacing: -0.01em;
  color: #777E90;
}

.workouts__list {
  margin-bottom: 48px;
}
.workouts__list li {
  position: relative;
  padding-left: 36px;
  font-weight: 600;
  color: #777E90;
}
.workouts__list li:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12L10 16L18 8' stroke='%2345B36B' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%/100% auto;
}
.workouts__list li:not(:last-child) {
  margin-bottom: 16px;
}

.workouts__btns {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .workouts__button {
    padding: 0 20px;
  }
}
.workouts__button:not(:last-child) {
  margin-right: 12px;
}

.workouts__gallery {
  position: absolute;
  top: 50%;
  right: calc(50% - 663px);
  width: 744px;
  transform: translateY(-50%);
  pointer-events: none;
}

@media only screen and (max-width: 1339px) {
  .workouts__gallery {
    right: calc(50% - 570px);
    width: 640px;
  }
}
@media only screen and (max-width: 1179px) {
  .workouts__gallery {
    width: 550px;
  }
}
@media only screen and (max-width: 767px) {
  .workouts__gallery {
    position: relative;
    top: auto;
    right: auto;
    left: -4%;
    width: 380px;
    margin: 0 auto 42px;
    transform: translateY(0);
  }
}
.workouts__preview:first-child {
  position: relative;
  z-index: 1;
}
.workouts__preview:nth-child(2) {
  top: 10%;
  left: 47%;
  z-index: 2;
  width: 13.5%;
}
.workouts__preview:nth-child(3) {
  top: 32%;
  right: 2.5%;
  z-index: 2;
  width: 14.5%;
}
.workouts__preview:not(:first-child) {
  position: absolute;
}
.workouts__preview img {
  width: 100%;
}

.about {
  position: relative;
}

@media only screen and (max-width: 767px) {
  .about {
    padding: 48px 0;
    border: none;
  }
}
.about__row {
  display: flex;
  margin: 0 -12px;
}
.about__row:not(:last-child) {
  margin-bottom: 128px;
}

@media only screen and (max-width: 1179px) {
  .about__row {
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .about__row:first-child {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .about__row:nth-child(2) {
    flex-direction: column-reverse;
  }
  .about__row:nth-child(2) .about__col:nth-child(2) {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 1179px) {
  .about__row:not(:last-child) {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .about__row:not(:last-child) {
    margin-bottom: 60px;
  }
}
.about__col {
  flex: 0 0 calc(50% - 24px);
  width: calc(50% - 24px);
  margin: 0 12px;
}

@media only screen and (max-width: 1179px) {
  .about__col {
    margin: 0;
  }
}
@media only screen and (max-width: 1179px) {
  .about__col:first-child {
    flex: 1 0 auto;
    width: auto;
    padding-right: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .about__col:first-child {
    flex: 0 0 100%;
    width: 100%;
    padding: 0;
  }
}
@media only screen and (max-width: 1179px) {
  .about__col:nth-child(2) {
    flex: 0 0 528px;
    width: 528px;
  }
}
@media only screen and (max-width: 1023px) {
  .about__col:nth-child(2) {
    flex: 0 0 400px;
    width: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .about__col:nth-child(2) {
    flex: 0 0 100%;
    width: 100%;
  }
}
.about__title {
  margin-bottom: 20px;
}

.about__info {
  max-width: 450px;
  color: #777E90;
}

.about__list {
  max-width: 260px;
}

@media only screen and (max-width: 767px) {
  .about__list {
    max-width: 100%;
  }
}
.about__item:not(:last-child) {
  margin-bottom: 48px;
}

@media only screen and (max-width: 1023px) {
  .about__item:not(:last-child) {
    margin-bottom: 32px;
  }
}
.about__number {
  display: inline-block;
  width: 38px;
  margin-bottom: 24px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #FCFCFD;
}

@media only screen and (max-width: 1023px) {
  .about__number {
    margin-bottom: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .about__number {
    margin-bottom: 24px;
  }
}
.about__subtitle {
  margin-bottom: 16px;
  font-weight: 500;
}

@media only screen and (max-width: 1023px) {
  .about__subtitle {
    margin-bottom: 12px;
  }
}
@media only screen and (max-width: 767px) {
  .about__subtitle {
    margin-bottom: 16px;
  }
}
.about__content {
  font-size: 14px;
  line-height: 1.71429;
  color: #777E90;
}

.about__bg {
  position: relative;
  background: #E6E8EC;
  border-radius: 24px;
}

body.dark .about__bg {
  background: #353945;
}

.about__bg img {
  width: 100%;
}
.about__bg > img {
  border-radius: 24px;
}

@media only screen and (max-width: 1179px) {
  .about__bg_overflow {
    overflow: hidden;
  }
}
.about__preview {
  position: absolute;
  top: 1.5%;
  left: -31%;
  width: 64.5%;
  pointer-events: none;
}

@media only screen and (max-width: 1179px) {
  .about__preview {
    top: 0;
    left: 0;
    width: 45%;
  }
}
.about__photo {
  position: absolute;
  pointer-events: none;
}
.about__photo:first-child {
  top: 11%;
  left: -31%;
  width: 68%;
}
.about__photo:nth-child(2) {
  top: 9.5%;
  left: 25%;
  width: 23%;
}

[class^=play] {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  box-shadow: 0px 8px 16px -8px rgba(15, 15, 15, 0.2);
  border-radius: 50%;
  background: #FCFCFD;
}
[class^=play] .icon {
  width: 21px;
  height: 21px;
  fill: #777E90;
  transition: all 0.2s;
}
[class^=play]:hover .icon {
  transform: scale(1.3);
  fill: #3772FF;
}

@media only screen and (max-width: 767px) {
  [class^=play] {
    width: 48px;
    height: 48px;
  }
}
@media only screen and (max-width: 767px) {
  [class^=play] .icon {
    width: 12px;
    height: 12px;
  }
}
.play-small {
  width: 48px;
  height: 48px;
}
.play-small .icon {
  width: 12px;
  height: 12px;
}

.details__head {
  max-width: 580px;
  margin: 0 auto 80px;
  text-align: center;
}

@media only screen and (max-width: 1179px) {
  .details__head {
    margin-bottom: 64px;
  }
}
@media only screen and (max-width: 767px) {
  .details__head {
    text-align: left;
  }
}
.details__stage {
  margin-bottom: 8px;
  color: #777E90;
}

.details__list {
  display: flex;
}

@media only screen and (max-width: 767px) {
  .details__list {
    display: block;
  }
}
.details__item {
  flex: 0 0 31%;
  padding: 34px 83px;
}
.details__item:first-child {
  padding-left: 0;
}
.details__item:nth-child(2) {
  flex: 0 0 38%;
  border-width: 0 1px;
  border-style: solid;
  border-color: #E6E8EC;
}

@media only screen and (max-width: 1339px) {
  .details__item {
    padding: 34px 64px;
  }
}
@media only screen and (max-width: 1179px) {
  .details__item {
    padding: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .details__item {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .details__item:nth-child(2) {
    border: none;
  }
}
.details__item:last-child {
  padding-right: 0;
}

@media only screen and (max-width: 767px) {
  .details__item:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E6E8EC;
  }
}
.details__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
}

.details__category {
  margin-bottom: 32px;
  font-weight: 600;
}

.details__content {
  font-size: 14px;
  line-height: 1.71429;
  color: #777E90;
}

.pricing-table-v2 .pricing__title {
  margin-bottom: 16px;
  text-align: center;
}
.pricing-table-v2 .pricing__info {
  margin-bottom: 104px;
  text-align: center;
  color: #6E757C;
}
.pricing-table-v2 .pricing__list {
  display: flex;
  padding-bottom: 36px;
  border-radius: 24px;
  background: #f5f7fc;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__list {
    background: transparent;
  }
}
.pricing-table-v2 .pricing__item {
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-box-flex: 0;
}
.pricing-table-v2 .pricing__item.active {
  background: #ffffff;
  border-radius: 24px;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__item {
    padding: 24px;
    width: 100%;
    background: #f5f7fc !important;
    border-radius: 24px;
  }
  .pricing-table-v2 .pricing__item:not(:last-child) {
    margin-bottom: 24px;
  }
}
.pricing-table-v2 .pricing__head {
  position: relative;
  z-index: 3;
  padding: 40px 40px 50px;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__head {
    padding: 0;
    margin-bottom: 32px;
  }
}
.pricing-table-v2 .pricing__item.active .pricing__head:before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  bottom: -32px;
  z-index: -1;
  background: #ffffff;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 24px;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__item.active .pricing__head:before {
    box-shadow: none;
    background: transparent;
  }
}
.pricing-table-v2 .pricing__item:not(.active) .pricing__head {
  box-shadow: inset 0 -1px 0 #EEEFF2;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__item:not(.active) .pricing__head {
    box-shadow: none;
  }
}
.pricing-table-v2 .pricing__note {
  position: absolute;
  top: -24px;
  right: 8px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 16px;
  background: #748FB5;
  font-size: 11px;
  line-height: 1.45455;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
}
.pricing-table-v2 .pricing__subtitle {
  margin-bottom: 24px;
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
}
.pricing-table-v2 .pricing__price {
  position: relative;
  display: flex;
  height: 110px;
  margin-bottom: 24px;
  padding-bottom: 36px;
  border-bottom: 2px solid rgba(116, 143, 181, 0.1);
}
.pricing-table-v2 .pricing__img {
  position: absolute;
  top: 50%;
  left: -63px;
  transform: translateY(-60%);
}
.pricing-table-v2 .pricing__currency {
  position: relative;
  top: 4px;
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
}
.pricing-table-v2 .pricing__number {
  font-size: 64px;
  line-height: 1.125;
  font-weight: 600;
}
.pricing-table-v2 .pricing__time {
  position: relative;
  top: -7px;
  align-self: flex-end;
  color: #6E757C;
}
.pricing-table-v2 .pricing__text {
  max-width: 200px;
  min-height: 72px;
  margin-bottom: 12px;
  color: #6E757C;
}
.pricing-table-v2 .pricing__text:empty {
  display: none;
}
.pricing-table-v2 .pricing__details {
  position: relative;
  padding: 130px 40px 65px;
}
@media (max-width: 1179px) {
  .pricing-table-v2 .pricing__details {
    padding: 130px 24px 65px;
  }
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__details {
    padding: 0;
  }
}
.pricing-table-v2 .pricing__stage {
  position: absolute;
  top: 70px;
  left: 40px;
  right: 40px;
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__stage {
    display: none;
  }
}
.pricing-table-v2 .pricing__category {
  margin-bottom: 43px;
  padding-bottom: 35px;
  border-bottom: 2px solid rgba(116, 143, 181, 0.2);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  color: #6E757C;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__category {
    display: none;
  }
}
.pricing-table-v2 .pricing__item:first-child .pricing__category {
  margin-right: -40px;
  padding-right: 40px;
}
.pricing-table-v2 .pricing__item:nth-child(2) .pricing__category {
  margin-left: -40px;
  margin-right: -40px;
  padding-left: 40px;
  padding-right: 40px;
}
.pricing-table-v2 .pricing__item:last-child .pricing__category {
  margin-left: -40px;
  padding-left: 40px;
}
.pricing-table-v2 .pricing__view {
  display: none;
  align-items: center;
  font-weight: 600;
  color: #272E35;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__view {
    display: inline-flex;
  }
}
.pricing-table-v2 .pricing__view .icon {
  margin-left: 10px;
  font-size: 9px;
  transition: transform 0.2s;
}
.pricing-table-v2 .pricing__view.active .icon {
  transform: rotate(180deg);
}
.pricing-table-v2 .pricing__options li {
  position: relative;
  padding-left: 36px;
  color: #6E757C;
}
.pricing-table-v2 .pricing__options li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23748fb5'/%3E%3Cg clip-path='url(%23A)'%3E%3Cpath d='M18.3 6.3L9 15.6l-3.3-3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l4 4c.2.2.4.3.7.3s.5-.1.7-.3l10-10c.4-.4.4-1 0-1.4s-1-.4-1.4 0z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='A'%3E%3Cpath fill='%23fff' transform='translate(4 4)' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat 0 0/100% auto;
}
.pricing-table-v2 .pricing__options li:not(:last-child) {
  margin-bottom: 32px;
}
.pricing-table-v2 .pricing:not(:last-child) {
  margin-bottom: 88px;
}
@media (max-width: 768px) {
  .pricing-table-v2 .pricing__options {
    display: none;
    padding-top: 32px;
  }
}

.div-block-10 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 550px;
}

.hero {
  background-color: #fff;
  color: #000;
  padding: 120px 0 0 0;
}
.hero .button, .hero .button_secondary, .hero .button_black, .hero .button_outline {
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.2px;
  padding: 12px 16px;
  display: flex;
  background-color: #2958ff;
  color: #fff;
  justify-content: center;
  border-radius: 55px;
  font-weight: 500;
  transition: background-color 0.15s ease-in, color 0.15s ease-in, border-color 0.15s ease-in;
  border: 2px solid #2958ff;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .hero .button, .hero .button_secondary, .hero .button_black, .hero .button_outline {
    font-size: 17px;
    line-height: 20px;
    letter-spacing: -0.25px;
  }
}
@media screen and (min-width: 992px) {
  .hero .button, .hero .button_secondary, .hero .button_black, .hero .button_outline {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.3px;
  }
}
.hero .button:hover, .hero .button_secondary:hover, .hero .button_black:hover, .hero .button_outline:hover {
  cursor: pointer;
  background-color: #5c80ff;
  border-color: #5c80ff;
  text-decoration: none;
  color: #fff;
}
.hero .button:focus, .hero .button_secondary:focus, .hero .button_black:focus, .hero .button_outline:focus {
  outline: none;
}
.hero .button_secondary {
  background-color: #bcfe2f;
  border: 2px solid #bcfe2f;
  color: #000;
}
.hero .button_secondary:hover {
  background-color: #ddfe95;
  border-color: #ddfe95;
  color: #333;
}
.hero .button_black {
  background-color: #262626;
  border: 2px solid #262626;
  color: #fff;
}
.hero .button_black:hover {
  background-color: #595959;
  border-color: #595959;
  color: #fff;
}
.hero .button_outline {
  background-color: #fff;
  color: #262626;
  border: 2px solid #262626;
}
.hero .button_outline:hover {
  background-color: #fff;
  border-color: #595959;
  color: #595959;
}

.hero__tag-container {
  margin: 0 0 25px 0;
  display: flex;
}
.hero__tag-container .tag, .hero__tag-container .tag_light {
  margin-right: 10px;
}
.hero__tag-container .tag:last-child, .hero__tag-container .tag_light:last-child {
  margin-right: 0;
}

@media screen and (min-width: 768px) {
  .hero__tag-container {
    margin: 0 0 28px 0;
  }
}
@media screen and (min-width: 992px) {
  .hero__tag-container {
    margin: 0 0 36px 0;
  }
}
.hero .title_big {
  max-width: 427px;
}

.hero__subtitle {
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.03em;
  margin: 20px 0 30px;
  color: #8c8c8c;
  max-width: 427px;
}

@media screen and (min-width: 768px) {
  .hero__subtitle {
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.03em;
  }
}
@media screen and (min-width: 992px) {
  .hero__subtitle {
    font-size: 21px;
    line-height: 140%;
    letter-spacing: -0.03em;
  }
}
.hero__button-group {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hero__button-group .button, .hero__button-group .button_secondary, .hero__button-group .button_black, .hero__button-group .button_outline {
  width: 100%;
  margin-right: 0;
  margin-bottom: 15px;
}
.hero__button-group .button:last-child, .hero__button-group .button_secondary:last-child, .hero__button-group .button_black:last-child, .hero__button-group .button_outline:last-child {
  margin-bottom: 0;
}
.hero__button-group svg {
  margin-top: 30px;
  margin-left: 0;
}

.hero__footer-text {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.3px;
  color: #999;
  margin-top: 40px;
  margin-bottom: 0;
}

.hero picture {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__image {
  width: 100%;
}

@media (min-width: 420px) {
  .hero__button-group .button, .hero__button-group .button_secondary, .hero__button-group .button_black, .hero__button-group .button_outline {
    width: auto;
    margin-right: 15px;
    margin-bottom: 0;
  }
  .hero__button-group .button:last-child, .hero__button-group .button_secondary:last-child, .hero__button-group .button_black:last-child, .hero__button-group .button_outline:last-child {
    margin-right: 0;
  }
  .hero__button-group svg {
    margin-top: 0;
    margin-left: 30px;
  }
}
@media (min-width: 992px) {
  .hero__footer-text {
    margin-top: 0;
    margin-bottom: 30px;
  }
}
.two-colls {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.two-colls__item {
  width: 100%;
  margin-right: 0;
  margin-bottom: 30px;
}
.two-colls__item:last-child {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .two-colls {
    flex-direction: row;
  }

  .two-colls__item {
    width: calc(50% - 15px);
    margin-right: 30px;
    margin-bottom: 0;
  }
  .two-colls__item:nth-child(2n) {
    margin-right: 0;
  }
}
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 16px;
  padding: 6px 8px;
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  border-radius: 8px;
}

.tag_light {
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  padding: 6px 8px;
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
}

.title_big {
  font-size: 45px;
  line-height: 90%;
  letter-spacing: -0.05em;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .title_big {
    font-size: 56px;
    line-height: 90%;
    letter-spacing: -0.05em;
  }
}
@media screen and (min-width: 992px) {
  .title_big {
    font-size: 65px;
    line-height: 90%;
    letter-spacing: -0.05em;
  }
}
.title_small {
  font-size: 28px;
  line-height: 110%;
  letter-spacing: -0.05em;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .title_small {
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.05em;
  }
}
@media screen and (min-width: 992px) {
  .title_small {
    font-size: 35px;
    line-height: 110%;
    letter-spacing: -0.05em;
  }
}
.subtitle {
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.03em;
}

@media screen and (min-width: 768px) {
  .subtitle {
    font-size: 15px;
    line-height: 140%;
    letter-spacing: -0.03em;
  }
}
@media screen and (min-width: 992px) {
  .subtitle {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.03em;
  }
}
.container_thin {
  width: 100%;
  max-width: 1200px;
  padding: 0 30px;
  margin: 0 auto;
}

.hero-preview {
  position: relative;
  /*! -webkit-perspective:1000px; */
  /*! perspective:1000px */
  width: 100%;
  height: 300px;
}

.hero-shape {
  padding-bottom: 45.6%;
}

.layer {
  z-index: 2;
}

.image-32 {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.hero-preview-item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.hero-preview-item.b-1 {
  left: -5.77%;
  top: -18.5%;
  width: 111%;
}
.hero-preview-item.b-2 {
  left: 27.5%;
  top: 87%;
  width: 14%;
}
.hero-preview-item.b-3 {
  left: 38.2%;
  top: 1%;
  width: 12.3%;
}
.hero-preview-item.b-4 {
  left: 80%;
  top: 8%;
  width: 15%;
}
.hero-preview-item.b-5 {
  left: 75%;
  top: -18%;
  width: 10%;
}
.hero-preview-item.b-6 {
  left: 87%;
  top: -16%;
  width: 11%;
}
.hero-preview-item.b-7 {
  left: 14.2%;
  top: 97%;
  width: 14%;
}
.hero-preview-item.b-8 {
  left: 85%;
  top: 58%;
  width: 21%;
}
.hero-preview-item.b-9 {
  left: 94.8%;
  top: 7.6%;
  width: 9%;
}
.hero-preview-item.b-10 {
  left: 1%;
  top: -5%;
  width: 11%;
}
.hero-preview-item.b-11 {
  left: 12.8%;
  top: 5.6%;
  width: 14%;
}
.hero-preview-item.b-12 {
  left: 41.2%;
  top: 84.2%;
  width: 13%;
}

.preview-ui {
  position: relative;
  margin-left: -14px;
}
@media (max-width: 991px) {
  .preview-ui {
    margin-left: 30px;
  }
}
@media (max-width: 768px) {
  .preview-ui {
    max-width: 584px;
    margin-right: auto;
    margin-left: auto;
  }
}

.preview-ui-image {
  border-radius: 24px;
}

.preview-ui-item {
  position: absolute;
}
.preview-ui-item.p-1 {
  left: -17%;
  top: 20%;
  width: 12%;
}
.preview-ui-item.p-2 {
  left: 83%;
  top: 10%;
  width: 12%;
}
.preview-ui-item.p-3 {
  left: 66%;
  top: 15%;
  width: 47%;
}
.preview-ui-item.p-4 {
  left: -44px;
  top: 29%;
  width: 29%;
}
.preview-ui-item.p-5 {
  left: 83%;
  top: 47%;
  width: 25%;
}
.preview-ui-item.p-6 {
  left: -16%;
  top: 62%;
  width: 6%;
}
.preview-ui-item.p-7 {
  left: -10%;
  top: 69%;
  width: 24%;
}
.preview-ui-item.p-8 {
  left: 58%;
  top: 72%;
  width: 40%;
}
.preview-ui-item.p-9 {
  left: 103%;
  top: 78%;
  width: 8.3%;
}
.preview-ui-item.k-1 {
  left: 2%;
  top: 14%;
  width: 6%;
}
.preview-ui-item.k-2 {
  left: -14%;
  top: 20%;
  width: 23.8%;
}
.preview-ui-item.k-4 {
  left: 96%;
  top: 21%;
  width: 8%;
}
.preview-ui-item.k-5 {
  left: 88%;
  top: 36%;
  width: 24%;
}
.preview-ui-item.k-6 {
  left: -15%;
  top: 46%;
  width: 26%;
}
.preview-ui-item.k-7 {
  left: 69%;
  top: 49%;
  width: 43%;
}
.preview-ui-item.k-8 {
  left: -13%;
  top: 71%;
  width: 7.7%;
}
.preview-ui-item.k-9 {
  left: -17%;
  top: 74%;
  width: 46%;
}

.section-block {
  position: relative;
  max-width: 312px;
}
@media (min-width: 1280px) {
  .section-block {
    max-width: 600px;
  }
  .section-block .subtitle-s {
    font-size: 17px;
  }
}
@media (max-width: 768px) {
  .section-block {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

.h2-bolder {
  margin-top: 0;
  margin-bottom: 0;
  color: #2e2e33;
  font-size: 48px;
  line-height: 52px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
@media (min-width: 1280px) {
  .h2-bolder {
    font-size: 56px;
    line-height: 56px;
  }
}
@media (max-width: 992px) {
  .h2-bolder {
    font-size: 38px;
    line-height: 44px;
  }
}
@media (max-width: 768px) {
  .h2-bolder {
    font-size: 32px;
    line-height: 40px;
  }
}

.subtitle-s {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 28px;
}
@media (min-width: 1280px) {
  .subtitle-s {
    margin-top: 32px;
    font-size: 20px;
    line-height: 30px;
  }
}
@media (max-width: 992px) {
  .subtitle-s {
    margin-top: 16px;
  }
}

.home-section {
  min-height: 825px;
  padding-top: 120px;
  padding-bottom: 120px;
}
.home-section.has-pattern {
  background-size: cover;
  background-image: url("../image/others/Pattern_Shape.svg");
}

.sandy-container {
  max-width: 1288px;
  margin-top: 20px;
  padding-right: 64px;
  padding-left: 64px;
}
@media screen and (max-width: 991px) {
  .sandy-container {
    padding-right: 32px;
    padding-left: 32px;
  }
}
@media screen and (max-width: 479px) {
  .sandy-container {
    margin-top: 20px;
  }
}
@media screen and (min-width: 1280px) {
  .sandy-container {
    margin-top: 20px;
    margin-bottom: 40px;
    padding-right: 56px;
    padding-left: 56px;
  }
}

.layouts-view .layouts-preview:first-child {
  width: 786px;
}
.layouts-view .layouts-preview:nth-child(2) {
  top: -76px;
  right: -52px;
  width: 200px;
}
.layouts-view .layouts-preview:nth-child(3) {
  right: 110px;
  bottom: 61px;
  width: 99px;
}
.layouts-view .layouts-preview:nth-child(4) {
  left: 47px;
  bottom: -21px;
  width: 200px;
}
.layouts-view .layouts-preview:nth-child(5) {
  top: -155px;
  left: 19px;
  width: 426px;
}
.layouts-view .layouts-preview:not(:first-child) {
  position: absolute;
}
@media only screen and (max-width: 1199px) {
  .layouts-view .layouts-preview:first-child {
    width: 730px;
  }
  .layouts-view .layouts-preview:nth-child(2) {
    top: -80px;
    width: 210px;
  }
  .layouts-view .layouts-preview:nth-child(3) {
    display: none;
  }
  .layouts-view .layouts-preview:nth-child(4) {
    width: 200px;
  }
  .layouts-view .layouts-preview:nth-child(5) {
    width: 400px;
  }
}
@media only screen and (max-width: 1023px) {
  .layouts-view .layouts-preview:nth-child(2) {
    right: 150px;
    width: 150px;
  }
  .layouts-view .layouts-preview:nth-child(4) {
    left: 140px;
    width: 150px;
  }
  .layouts-view .layouts-preview:nth-child(5) {
    top: -100px;
    left: 160px;
    width: 300px;
  }
}
@media (max-width: 767px) {
  .layouts-view .layouts-preview:first-child {
    width: auto;
    max-width: 600px;
    margin: 0 auto;
  }
  .layouts-view .layouts-preview:nth-child(2) {
    top: 40px;
    right: calc(50% - 170px);
    width: 120px;
  }
  .layouts-view .layouts-preview:nth-child(4) {
    left: calc(50% - 180px);
    bottom: 125px;
    width: 120px;
  }
  .layouts-view .layouts-preview:nth-child(5) {
    top: -66px;
    left: calc(50% - 197px);
    width: 234px;
  }
}

.link-block-cta {
  position: relative;
  display: block;
  overflow: hidden;
  max-width: 480px;
  padding: 20px 160px 20px 20px;
  border-radius: 12px;
  background-image: linear-gradient(90deg, #eeeeee, #f3f3f3);
  color: #000;
}
.link-block-cta .link-block-cta-text {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}
.link-block-cta .link-block-cta-heading {
  margin-top: 0;
  margin-right: 12px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.link-block-cta img {
  position: absolute;
  top: 18px;
  right: -20px;
}
.link-block-cta .link-block-cta-gs i {
  transition: 0.5s;
}
.link-block-cta:hover .link-block-cta-gs i {
  transform: translate3d(8px, 0px, 0px);
}

.quality {
  position: relative;
}

.quality-head {
  position: relative;
  padding: 300px 0 90px;
}

.quality-stage {
  margin-bottom: 24px;
  color: #C75C6F;
}

.quality-top {
  margin-bottom: 48px;
}

.quality-info {
  max-width: 410px;
}

.quality-line, .quality-preview, .quality-circle, .quality-icon {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.quality-line {
  position: absolute;
  top: 0;
  left: calc(50% - 517px);
  bottom: -1px;
  font-size: 0;
}

.quality-line .quality-pic {
  width: auto;
  height: 100%;
}

.quality-preview {
  top: 126px;
  right: calc(50% - 724px);
  width: 480px;
  font-size: 0;
}

.quality-pic {
  width: 100%;
}

.quality-body {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #E3E6E9;
}

.quality-col {
  display: flex;
  align-items: center;
  flex: 0 0 50%;
  width: 50%;
  height: 444px;
  padding-top: 5px;
  border-bottom: 1px solid #E3E6E9;
}

.quality-col:nth-child(2n+1) {
  border-right: 1px solid #E3E6E9;
}

.quality-col:nth-child(2n+1) .quality-item {
  margin-left: auto;
  margin-right: 100px;
}

.quality-col:nth-child(2n) .quality-item {
  margin-left: 100px;
}

.quality-col:nth-child(1) .quality-icon {
  top: 3px;
  left: -18px;
  width: 295px;
}

.quality-col:nth-child(2) .quality-icon {
  top: -11px;
  left: -71px;
  width: 255px;
}

.quality-col:nth-child(2) .quality-link {
  color: #5956E9;
}

.quality-col:nth-child(2) .quality-link .icon {
  fill: #5956E9;
}

.quality-col:nth-child(3) .quality-icon {
  top: 0;
  left: -33px;
  width: 202px;
}

.quality-col:nth-child(4) .quality-icon {
  top: 0;
  left: -162px;
  width: 348px;
}

.quality-item {
  position: relative;
  max-width: 420px;
  padding-left: 180px;
}

.quality-category {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
}

.quality-text {
  margin-bottom: 46px;
  color: #999FAE;
}

.quality-link {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  color: #292930;
}

.quality-link .icon {
  margin-left: 20q;
  font-size: 14px;
  fill: #292930;
  transition: transform 0.25s;
}

.quality-link:hover .icon {
  transform: translateX(3px);
}

.quality-circle {
  border-radius: 50%;
}

.quality-circle:first-child {
  top: -74px;
  right: calc(50% - 577px);
  width: 148px;
  height: 148px;
  background: #5956E9;
}

.quality-circle:nth-child(2) {
  top: 356px;
  right: calc(50% - 618px);
  width: 40px;
  height: 40px;
  background: #FFDC60;
}

.parallax-item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
}
.parallax-item.p-1 {
  left: 86.5%;
  top: -15%;
  width: 53px;
}
.parallax-item.p-2 {
  left: -1%;
  top: 2%;
  z-index: 2;
  width: 70px;
}
.parallax-item.p-3 {
  left: -5.5%;
  top: 12%;
  width: 44px;
}
.parallax-item.p-4 {
  left: 93.5%;
  top: 13.5%;
  width: 88px;
}
@media screen and (min-width: 1280px) {
  .parallax-item.p-1 {
    left: 82.5%;
  }
  .parallax-item.p-2 {
    left: -0.5%;
    top: -2.5%;
  }
  .parallax-item.p-3 {
    left: -12.5%;
  }
  .parallax-item.p-4 {
    left: 93%;
  }
}
@media screen and (max-width: 991px) {
  .parallax-item.p-1 {
    left: 88.5%;
    top: -11%;
  }
  .parallax-item.p-2 {
    left: -2%;
    top: 5.5%;
  }
  .parallax-item.p-3 {
    display: none;
  }
  .parallax-item.p-4 {
    left: 94%;
    top: 4%;
  }
}
@media screen and (max-width: 767px) {
  .parallax-item.p-1 {
    left: 82.5%;
    top: -7.5%;
    width: 32px;
  }
  .parallax-item.p-2 {
    left: -10%;
    top: -2%;
  }
  .parallax-item.p-3 {
    left: 6.5%;
    top: 5.5%;
    display: block;
    width: 36px;
  }
  .parallax-item.p-4 {
    left: 87%;
    top: 49.5%;
    width: 72px;
  }
}

.is-block-create .has-sweet-container .icon {
  position: absolute;
  right: -2em;
  bottom: -2em;
}
.is-block-create .has-sweet-container .icon i {
  font-size: 8em;
}

.sandy-compact-embed {
  display: flex;
  max-width: 100%;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 15px;
}
body.is-dark .sandy-compact-embed {
  background: #171719;
}
.sandy-compact-embed .sandy-compact-embed-thumb {
  min-width: 110px;
  width: 110px;
  min-height: 110px;
  border-radius: inherit;
}
.sandy-compact-embed .sandy-compact-embed-thumb img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 360px) {
  .sandy-compact-embed .sandy-compact-embed-thumb {
    min-width: 100px;
    width: 100px;
    min-height: 100px;
  }
}
.sandy-compact-embed .sandy-compact-embed-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 15px;
  overflow: hidden;
}
@media (max-width: 360px) {
  .sandy-compact-embed .sandy-compact-embed-content {
    padding: 8px 10px;
  }
}
.sandy-compact-embed .sandy-compact-embed-title {
  color: #000;
  -webkit-line-clamp: 1;
  max-height: 1.4rem;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .sandy-compact-embed .sandy-compact-embed-title {
    font-size: 13px;
  }
}
.sandy-compact-embed .sandy-compact-embed-description {
  font-size: 13px;
  margin-bottom: 0.6em;
  max-height: 2.8em;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .sandy-compact-embed .sandy-compact-embed-description {
    font-size: 12px;
  }
}
.sandy-compact-embed .sandy-compact-embed-site {
  display: flex;
  align-items: center;
}
.sandy-compact-embed .sandy-compact-embed-site .sandy-compact-embed-site-thumb img {
  display: block;
  min-width: 16px;
  min-height: 16px;
  width: 1em;
  height: 1em;
  margin-right: 6px;
}
.sandy-compact-embed .sandy-compact-embed-site span {
  font-size: 13px;
}
@media (max-width: 360px) {
  .sandy-compact-embed .sandy-compact-embed-site span {
    font-size: 12px;
  }
}

@-webkit-keyframes circleRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1440deg);
  }
}
@keyframes circleRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1440deg);
  }
}
/**
 * When `<dialog>` is properly supported, the overlay is implied and can be
 * styled with `::backdrop`, which means the DOM one should be removed.
 */
[data-a11y-dialog-native] .dialog-overlay {
  display: none;
}

/**
   * When `<dialog>` is not supported, its default display is `inline` which can
   * cause layout issues.
   */
dialog[open] {
  display: block;
}

.sandy-embed-dialog-container[aria-hidden=true] {
  display: none;
}

/* -------------------------------------------------------------------------- *\
   * Styling to make the dialog look like a dialog
   * -------------------------------------------------------------------------- */
.sandy-embed-dialog-container {
  z-index: 999999998;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.sandy-embed-dialog-overlay {
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.66);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.sandy-embed-dialog-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 76px;
  overflow: auto;
  pointer-events: none;
}

.sandy-embed-dialog-content-wrapper a, .sandy-embed-dialog-content-wrapper button {
  pointer-events: all;
}

@media only screen and (max-width: 1024px) {
  .sandy-embed-dialog-content-wrapper {
    padding: 76px 4px 76px 4px;
  }
}
@media only screen and (max-height: 400px) {
  .sandy-embed-dialog-content-wrapper {
    padding: 4px;
  }
}
.sandy-embed-dialog-content {
  height: 100%;
  display: flex;
  align-items: start;
  justify-content: center;
  position: relative;
  pointer-events: all;
}

.sandy-embed-dialog-content iframe,
.sandy-embed-dialog-content embed {
  border: 0;
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
  border-radius: 4px !important;
}

.sandy-embed-dialog-iframe-fill iframe,
.sandy-embed-dialog-content embed {
  position: absolute !important;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.8);
}

/* -------------------------------------------------------------------------- *\
   * Extra dialog styling to make it shiny
   * -------------------------------------------------------------------------- */
@-webkit-keyframes sandy-embed-card-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sandy-embed-card-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes sandy-embed-card-appear {
  from {
    transform: translate(0 -50px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes sandy-embed-card-appear {
  from {
    transform: translate(0 -50px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.sandy-embed-dialog-container:not([aria-hidden=true]) > .sandy-embed-dialog-overlay {
  -webkit-animation: sandy-embed-card-fade-in 200ms both;
          animation: sandy-embed-card-fade-in 200ms both;
}

/* .sandy-embed-dialog-container:not([aria-hidden='true'])  .sandy-embed-dialog-content iframe{
    animation: sandy-embed-card-fade-in 400ms 200ms both, sandy-embed-card-appear 400ms 200ms both;
} */
.sandy-embed-dialog-close {
  color: #fff;
  position: fixed !important;
  top: 20px;
  right: 20px;
  border: 0;
  padding: 0;
  background-color: transparent;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transition: 0.15s;
  opacity: 0.85;
  border-radius: 100px;
  outline: none;
}

.sandy-embed-dialog-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.sandy-embed-dialog-source {
  position: fixed !important;
  top: 20px;
  right: 76px;
  z-index: 1000;
  outline: none;
}

.sandy-embed-dialog-btn {
  text-transform: uppercase;
  text-decoration: none;
  line-height: 36px;
  padding: 0 15px;
  border-radius: 50px;
  height: 36px;
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.25px;
}

.sandy-embed-dialog-btn-white:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  opacity: 1;
}

.sandy-embed-dialog-btn-white {
  color: white !important;
  opacity: 0.85;
}

.sandy-embed-dialog-content .twitter-timeline,
.sandy-embed-dialog-content .twitter-tweet:not(.twitter-tweet-rendered) {
  display: none;
}

.sandy-embed-dialog-content .twitter-tweet {
  height: 100%;
  overflow: auto;
  border-radius: 12px;
}

.bio-installation-bar-wrapper .notification-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
  padding-left: 10px;
}
.bio-installation-bar-wrapper .notification-bar.hide {
  display: none !important;
}
body.is-dark .bio-installation-bar-wrapper .notification-bar {
  background: #222;
  color: #fff;
}
@media (max-width: 768px) {
  .bio-installation-bar-wrapper .notification-bar {
    width: calc(100% - 80px);
  }
}
.bio-installation-bar-wrapper .notification-bar .add-pwa {
  font-weight: 500;
  padding: 0 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 40px;
  width: 40px;
  margin: 0;
  font-size: 12px;
  line-height: 24px;
  background: #e6e6ea;
  margin-right: 5px;
}
body.is-dark .bio-installation-bar-wrapper .notification-bar .add-pwa {
  background: #000;
}
body.is-dark .bio-installation-bar-wrapper .notification-bar .add-pwa i {
  color: #fff;
}
.bio-installation-bar-wrapper .notification-bar .text-sticker {
  cursor: pointer;
  box-shadow: rgba(38, 50, 56, 0.16) 0px 8px 16px, rgba(0, 0, 0, 0.3) 0px 4px 5px -4px, rgba(255, 255, 255, 0.5) 0px 2px 5px inset, rgba(0, 0, 0, 0.2) 0px -1px 3px inset;
}
body.is-dark .bio-installation-bar-wrapper .notification-bar .text-sticker {
  background: #000;
  color: #fff;
}
.bio-installation-bar-wrapper .notification-bar .isnd-sprite {
  fill: none;
  stroke: #449afc;
  stroke-width: 2;
  width: 30px;
  height: 30px;
}
.bio-installation-bar-wrapper .notification-bar::before {
  content: "";
  position: absolute;
  top: -11px;
  right: 15px;
  width: 32px;
  height: 13px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg width='32' height='13' viewBox='0 0 32 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3432 2.65685L0 13H32L21.6569 2.65686C18.5327 -0.467339 13.4673 -0.467344 10.3432 2.65685Z' fill='%23FCFCFD'/%3E%3C/svg%3E%0A") no-repeat 100% 50%/100% auto;
}
.bio-installation-bar-wrapper .notification-bar.is-android::before {
  content: initial;
}
.bio-installation-bar-wrapper .notification-bar.is-ios {
  bottom: 2.4vh;
}
.bio-installation-bar-wrapper .notification-bar.is-ios::before {
  top: initial;
  right: initial;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%) rotate(180deg);
}
.product-card-v2 {
  padding: 12px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  background: #fff;
}
body.is-dark .product-card-v2 {
  background: #171719;
}
.product-card-v2 .product-type {
  color: #4b5563;
}
.product-card-v2 .product-card-v2-preview {
  display: block;
  position: relative;
  padding-bottom: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #F6F7FB;
  font-size: 0;
}
.product-card-v2 .product-card-v2-preview * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1s;
}
.product-card-v2 .star-rating {
  background: #fff;
  padding: 5px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}
body.is-dark .product-card-v2 .star-rating {
  background: #222;
}
.product-card-v2 .product-card-v2-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px 0;
  color: #23262F;
}
.product-card-v2 .product-card-v2-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.product-card-v2 .product-card-v2-line {
  display: flex;
  align-items: flex-start;
}
.product-card-v2 .product-card-v2-line:first-child {
  margin-bottom: 12px;
}
.product-card-v2 .product-card-v2-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E6E8EC;
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}

.order-timeline {
  position: relative;
}
.order-timeline * {
  font-family: "Inter", sans-serif;
}
.order-timeline .order-timeline-sep {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  width: 2px;
  margin-left: 28px;
  height: 16px;
  background: #25252d;
}
.order-timeline:last-child .order-timeline-sep {
  display: none;
}

.sandy-counter {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 176px;
}
.sandy-counter .counter-btn {
  width: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 50px;
  font-size: 0;
  transition: all 0.25s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none !important;
}
.sandy-counter .counter-btn i {
  font-size: 15px;
  color: #000;
}
.sandy-counter .counter-input {
  width: 100%;
  height: 64px;
  padding: 0 50px;
  border-radius: 14px;
  border: 2px solid #F6F7FB;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #1A202C;
}
.sandy-counter .counter-btn-minus {
  left: 0;
  padding-left: 10px;
}
.sandy-counter .counter-btn-plus {
  right: 0;
  padding-right: 10px;
}
@media (max-width: 768px) {
  .sandy-counter {
    margin: 0 0 24px;
    width: 136px;
  }
  .sandy-counter .counter-btn {
    width: 40px;
  }
  .sandy-counter .counter-input {
    height: 48px;
    padding: 0 40px;
    border-radius: 14px;
    font-size: 20px;
  }
}

.bio-single-shop-product .product-share-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 2px solid #F6F7FB;
  border-radius: 50%;
  transition: border-color 0.25s;
}
@media (max-width: 768px) {
  .bio-single-shop-product .product-share-btn {
    width: 40px;
    height: 40px;
  }
}
.bio-single-shop-product .single-banner {
  height: 512px;
  width: 512px;
  max-width: 100%;
  border-radius: 32px;
  margin: auto;
}
@media (max-width: 640px) {
  .bio-single-shop-product .single-banner {
    height: 350px;
  }
}
.bio-single-shop-product .single-banner .div-map {
  height: 350px;
}
.bio-single-shop-product .single-banner * {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}
.bio-single-shop-product .product-code {
  margin-bottom: 48px;
  line-height: 2;
  font-weight: 500;
  color: rgba(26, 32, 44, 0.4);
}
@media (max-width: 768px) {
  .bio-single-shop-product .product-code {
    margin-bottom: 38px;
  }
}
.bio-single-shop-product .product-code .product-number {
  margin-left: 8px;
  color: #1A202C;
}
.bio-single-shop-product .product-tag {
  margin-right: 32px;
  padding: 0 32px;
  border-radius: 32px;
  font-size: 20px;
  font-weight: 700;
  line-height: 56px;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 768px) {
  .bio-single-shop-product .product-tag {
    margin-right: 24px;
    padding: 0 24px;
    border-radius: 24px;
    font-size: 16px;
    line-height: 48px;
  }
}
.bio-single-shop-product .product-prices {
  font-weight: 600;
  display: flex;
  align-items: center;
}
.bio-single-shop-product .product-prices .compare {
  margin-right: 16px;
  text-decoration: line-through;
  font-size: 20px;
  color: rgba(26, 32, 44, 0.24);
}
@media (max-width: 768px) {
  .bio-single-shop-product .product-prices .compare {
    font-size: 16px;
    margin-right: 8px;
  }
}
.bio-single-shop-product .product-prices .actual {
  font-size: 32px;
}
@media (max-width: 768px) {
  .bio-single-shop-product .product-prices .actual {
    font-size: 24px;
  }
}
.bio-single-shop-product .product-title {
  font-size: 40px;
  line-height: 1.4;
  font-weight: 400;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .bio-single-shop-product .product-title {
    font-size: 32px;
    line-height: 1.5;
  }
}
.bio-single-shop-product.is-course .lessions:not(:last-child) {
  margin-bottom: 15px;
}
.bio-single-shop-product.is-course .lessions .icon {
  width: 40px;
  height: 40px;
  /* box-shadow: 0 5px 10px rgb(0 0 0 / 8%); */
  border-radius: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bio-single-shop-product.is-course .single-banner {
  border-radius: 0;
}
.bio-single-shop-product.is-course .course-body {
  position: relative;
  top: -51px;
  background: #fff;
  border-radius: 20px;
  z-index: 99;
  padding: 32px;
}
body.is-dark .bio-single-shop-product.is-course .course-body {
  background: #000;
}

.lession-or-review {
  padding: 7px;
  background: #f2f2f2;
  margin: 20px 0;
  display: flex;
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
}
body.is-dark .lession-or-review {
  background: #222;
}
.lession-or-review a {
  padding: 12px;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  cursor: pointer;
}
.lession-or-review a.active {
  color: #fff;
  background: #000;
}

.text-stage {
  margin-bottom: 8px;
  line-height: 1.5;
  font-weight: 600;
  font-style: italic;
  color: #2975FF;
}

.inner-pages-header {
  height: 50px;
  max-height: 50px;
}
.inner-pages-header .inner-pages-header-container {
  height: inherit;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  background: #f2f2f2;
}
body.is-dark .inner-pages-header .inner-pages-header-container {
  background: #222;
}
.inner-pages-header .previous-page {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  height: 100%;
  cursor: pointer;
}
.inner-pages-header .previous-page .inner-pages-title {
  font-size: 12px;
  font-weight: 500;
  position: relative;
  line-height: 1.4;
}
.inner-pages-header .buy-now-button {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  width: 50%;
  font-size: 12px;
  height: 100%;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px 5px 7px;
  color: #fff;
  background: #000;
  border-radius: 0;
}

.bio-courses-card-v1 {
  position: relative;
  padding: 0;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.06);
  background: #fff;
  border-radius: 13px;
}
.bio-courses-card-v1.is-upload .courses-preview {
  border: 2px dashed #e9e9e9;
}
.bio-courses-card-v1 svg {
  stroke: #777E90;
  stroke-width: 5px;
}
body.is-dark .bio-courses-card-v1 {
  background: #000;
}
body.is-dark .bio-courses-card-v1 svg {
  stroke: #fff;
}
.bio-courses-card-v1::before {
  border-radius: 32px;
}
.bio-courses-card-v1::after {
  top: 95px;
  right: 32px;
  left: 32px;
  bottom: -24px;
  z-index: -2;
  background: #dadada;
  filter: blur(41.985px);
}
body.is-dark .bio-courses-card-v1::after {
  background: #000;
}
.bio-courses-card-v1 .courses-preview {
  display: block;
  position: relative;
  padding-bottom: 75%;
  border-radius: inherit;
  overflow: hidden;
  background: #F6F7FB;
  font-size: 0;
}
.bio-courses-card-v1 .courses-preview *:not(i) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.bio-courses-card-v1 .course-star-rating, .bio-courses-card-v1 .course-bag-icon {
  position: absolute;
  z-index: 9;
  background: #fff;
  padding: 5px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}
body.is-dark .bio-courses-card-v1 .course-star-rating, body.is-dark .bio-courses-card-v1 .course-bag-icon {
  background: #000;
}
body.is-dark .bio-courses-card-v1 .course-star-rating svg, body.is-dark .bio-courses-card-v1 .course-bag-icon svg {
  stroke: #fff;
}
.bio-courses-card-v1 .course-star-rating {
  left: 14px;
  top: 10px;
}
.bio-courses-card-v1 .course-bag-icon {
  right: 14px;
  top: 10px;
  font-size: 17px;
}
.bio-courses-card-v1 .course-detials {
  padding: 17px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bio-courses-card-v1 .course-detials .course-name {
  font-size: 15px;
}
.bio-courses-card-v1 .course-detials .entrolled-text {
  font-size: 12px;
}

.bio-courses-hero-search::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 11%;
  background: inherit;
  right: -2%;
  left: -2%;
  border-radius: 11%/71%;
}

.comment-form {
  margin-bottom: 48px;
}

@media only screen and (max-width: 1179px) {
  .comment-form {
    margin-bottom: 40px;
  }
}
.comment-title {
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.comment-form .comment-title {
  margin-bottom: 8px;
}

.comment-head {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

@media only screen and (max-width: 1179px) {
  .comment-head {
    display: block;
  }
}
.comment-text {
  margin-right: auto;
  color: #777E90;
}

.comment-text span {
  font-weight: 500;
  color: #23262F;
}

body.dark .comment-text span {
  color: #FCFCFD;
}

.comment .rating {
  position: relative;
  top: -3px;
  flex-shrink: 0;
}

@media only screen and (max-width: 1179px) {
  .comment .rating {
    margin: 8px 0 0 -4px;
  }
}
.comment-field {
  position: relative;
}

.comment-input {
  width: 100%;
  height: 72px;
  padding: 0 20px;
  border-radius: 15px;
  background: none;
  border: 2px solid #E6E8EC;
  font-size: 16px;
  line-height: 1.5;
  color: #23262F;
  transition: border-color 0.2s;
}

@media only screen and (max-width: 767px) {
  .comment-input {
    height: 64px;
  }
}
body.dark .comment-input {
  border-color: #353945;
  color: #FCFCFD;
}

.comment-input:focus {
  border-color: #777E90;
}

.comment-input::-moz-placeholder {
  color: #777E90;
}

.comment-input:-ms-input-placeholder {
  color: #777E90;
}

.comment-input::placeholder {
  color: #777E90;
}

.comment-form .comment-button {
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 2;
  transform: translateY(-50%);
}

.comment-form .comment-button .icon {
  width: 14px;
  height: 14px;
}

@media only screen and (max-width: 767px) {
  .comment-form .comment-button {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
  }

  .comment-form .comment-button .icon:last-child {
    margin-left: 0 !important;
  }
}
.comment .smile {
  position: absolute;
  top: 50%;
  right: 140px;
  z-index: 2;
  transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
  .comment .smile {
    right: 64px;
  }
}
.comment-head {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.comment-head .comment-title {
  margin-right: auto;
}

.comment-item {
  display: flex;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid #E6E8EC;
}

body.dark .comment-item {
  border-color: #353945;
}

.comment-item:not(:last-child) {
  margin-bottom: 24px;
}

.comment-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 20px;
}

@media only screen and (max-width: 767px) {
  .comment-avatar {
    margin-right: 14px;
  }
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}

.comment-details {
  flex-grow: 1;
}

.comment-top {
  display: flex;
  margin-bottom: 4px;
}

.comment-author {
  margin-right: auto;
  font-weight: 500;
}

.comment .rating {
  position: relative;
  top: -2px;
  margin-left: 8px;
  flex-shrink: 0;
}

.comment-content {
  margin-bottom: 8px;
  color: #353945;
}

body.dark .comment-content {
  color: #B1B5C3;
}

.comment-time {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}

.comment-foot {
  display: flex;
  align-items: center;
}

.comment-actions {
  display: flex;
}

.comment-action {
  margin-left: 16px;
  font-size: 12px;
  line-height: 1.66667;
  font-weight: 600;
  transition: color 0.2s;
}

body.dark .comment-action {
  color: #FCFCFD;
}

.comment-action:hover {
  color: #3B71FE;
}

.comment-btns {
  margin-top: 32px;
  text-align: center;
}

.comment-btns .comment-button .loader {
  margin: 0 16px 0 5px;
  transform: scale(0.8);
}

.tiny-avatar {
  border: 2px solid #fff;
  height: 30px;
  width: 30px;
  border-radius: 550px;
  margin-left: 10px;
}
.tiny-avatar * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}

.product-variation .product-variation-inner {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  color: #252a2e;
  display: block;
  font-size: 17px;
  margin-top: 10px;
  overflow: hidden;
  padding: 15px;
  text-decoration: none;
  transition: all 0.05s ease-in-out;
}
body.is-dark .product-variation .product-variation-inner {
  background: #171719;
  border: 2px solid #171719;
}
.product-variation .variant-price-tag {
  background: #eee;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 6px 10px;
  pointer-events: none;
  position: relative;
}
.product-variation .variant-price-tag::before, .product-variation .variant-price-tag::after {
  border: 16px solid transparent;
  content: "";
  height: 0;
  left: 100%;
  margin-left: -16px;
  position: absolute;
  transform: scaleX(0.65);
  width: 0;
}
.product-variation .variant-price-tag::before {
  top: 0;
  border-top-color: #eee;
}
.product-variation .variant-price-tag::after {
  border-bottom-color: #eee;
  bottom: 0;
}
.product-variation .sandy-input-inner:checked + .product-variation-inner {
  box-shadow: 0 0 0 2px #000;
}
body.is-dark .product-variation .sandy-input-inner:checked + .product-variation-inner {
  box-shadow: 0 0 0 2px #222;
  border: 2px solid #565656;
}
.product-variation .sandy-input-inner:checked + .product-variation-inner .variant-price-tag {
  background: #000;
  color: #fff;
}
.product-variation .sandy-input-inner:checked + .product-variation-inner .variant-price-tag::before {
  border-top-color: #000;
}
.product-variation .sandy-input-inner:checked + .product-variation-inner .variant-price-tag::after {
  border-bottom-color: #000;
}

.product-cart {
  display: flex;
  background: #f4f5f6;
  padding: 20px;
  border-radius: 14px;
  position: relative;
}
.product-cart:not(:last-child) {
  margin-bottom: 15px;
}
.product-cart .banner {
  margin-right: 10px;
}
.product-cart .banner * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.product-cart .cart-remove {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-left: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  background: #fff;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.sandy-expandable-block {
  border-bottom: 1px solid #fff;
  padding: 18px 24px;
  margin: 0;
  background: #f5f6f6;
  margin-bottom: 10px;
  border-radius: 10px;
}
.sandy-expandable-block .sandy-expandable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sandy-expandable-block .sandy-expandable-title {
  font-size: 14px;
  font-weight: 600;
  color: #15171a;
  margin: 0;
  padding: 0;
}
.sandy-expandable-block .sandy-expandable-description {
  margin: 0;
  padding: 0;
  color: #7c8b9a;
  font-size: 13px;
  font-weight: 400;
}

.sandy-expandable-btn {
  display: inline-block;
  outline: none;
  background: #000000;
  color: #ffffff;
  text-decoration: none !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  fill: #fff;
  font-weight: 500;
  border-radius: 3px;
  transition: all 0.2s ease;
  transition-property: color, border-color, background, width, height, box-shadow;
  -webkit-font-smoothing: subpixel-antialiased;
}
body.is-dark .sandy-expandable-btn {
  background: #000000;
}
.sandy-expandable-btn span {
  display: block;
  overflow: hidden;
  padding: 0 14px;
  height: 34px;
  font-size: 12px;
  line-height: 34px;
  text-align: center;
  letter-spacing: 0.2px;
  border-radius: 3px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-fancy-card-v1 {
  background: #f5f7fc;
  min-height: 124px;
  border-radius: 20px;
  padding: 8px;
}
.dashboard-fancy-card-v1 .dashboard-fancy-card-v1-single {
  border-radius: 12px;
  padding: 8px;
}
.dashboard-fancy-card-v1 .dashboard-fancy-card-v1-single.active {
  background: #FCFCFC;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}

.nice-select {
  float: none;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 16px;
  background: #f5f6f8;
  border-radius: 12px;
  border: none;
  opacity: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 48px;
  display: flex;
  align-items: center;
}
.nice-select.bg-w {
  background: #fff;
}
.nice-select.has-multiple .multiple-options {
  margin-left: 0;
}
.nice-select.has-multiple span.current {
  border: 0;
  background: #ebeef0;
}
.nice-select .list {
  right: 0;
  margin-top: 2px;
  border-radius: 12px;
  background: #FCFCFD;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(35, 38, 47, 0.1);
  z-index: 9998;
}
.nice-select .nice-select-search-box {
  z-index: 9999 !important;
  border: 0;
  box-shadow: none;
}
.nice-select .nice-select-search-box input {
  border: 0;
}

.settings-page .settings-header {
  margin: 4vw 0 0 1px;
  color: #15171a;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.35px;
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e6e9eb;
}
.settings-page .settings-card {
  display: flex;
  color: #ffffff;
  padding: 20px 20px 20px 0;
  min-height: 85px;
  text-align: left;
}
.settings-page .settings-card .settings-card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: #ffffff;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  color: #fff;
}
.settings-page .settings-card .settings-card-avatar svg {
  stroke: #000;
  stroke-width: 0px;
  width: 1rem;
  height: 1rem;
}
.settings-page .settings-card .settings-card-avatar + .settings-card-info {
  margin-left: 2rem;
  color: white;
}
.settings-page .settings-card .settings-card-info {
  flex-shrink: 1;
}
.settings-page .settings-card .settings-card-info h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 2px;
}
.settings-page .settings-card .settings-card-info p {
  color: white;
  margin: 4px 0 0;
  font-size: 13px;
}
.settings-page .settings-element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: #202a3e;
  border-top: 1px solid rgba(221, 221, 221, 0.8);
}
.settings-page .settings-element.can-edit-awesome input {
  font-weight: 700;
  font-size: 14px;
  display: none;
}
.settings-page .settings-element.can-edit-awesome input:focus {
  outline: none;
  border: 0;
}
.settings-page .settings-element.can-edit-awesome.active {
  border-bottom: 1px solid;
  border-color: #aab40c;
}
.settings-page .settings-element.can-edit-awesome.active input {
  display: block;
}
.settings-page .settings-element.can-edit-awesome.active .name {
  display: none;
}
.settings-page .settings-element .name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 5px;
}
.settings-page .settings-element .info {
  max-width: 400px;
  margin-bottom: 3px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  color: #6a6d73;
}
.settings-page .settings-element .info:last-child {
  margin-bottom: 0;
}
.settings-page .settings-features {
  margin-top: 30px;
}

.settings-title {
  margin-top: 60px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #202a3e;
}

.text-button {
  font-weight: 700;
  font-size: 14px;
  color: #2d7ffb;
  cursor: pointer;
}

.wj-table {
  width: 100%;
}
.wj-table .name {
  max-width: calc(100% - 10px);
  flex-grow: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wj-table .avatar {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background: #f6f6f7;
}
.wj-table thead {
  display: block;
  border-bottom: 1px solid rgba(221, 221, 221, 0.8);
}
.wj-table tbody {
  display: block;
}
.wj-table th {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  color: #6a6d73;
  text-transform: uppercase;
  text-align: left;
  padding: 0;
  width: 45px;
  flex-shrink: 0;
}
.wj-table th:nth-of-type(2) {
  width: calc(55% - 45px);
}
.wj-table th:nth-of-type(3) {
  width: 30%;
}
.wj-table th:nth-of-type(4) {
  width: 15%;
}
.wj-table tr {
  width: 100%;
  display: flex;
  padding-bottom: 10px;
}
.wj-table tr td {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: #202a3e;
}
.wj-table .tr-row {
  height: 36px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(221, 221, 221, 0.8);
}
.wj-table .tr-row:last-of-type {
  border: none;
}
.wj-table .tr-row td {
  width: 45px;
  flex-shrink: 0;
}
.wj-table .tr-row td:nth-of-type(2) {
  width: calc(55% - 45px);
}
.wj-table .tr-row td:nth-of-type(3) {
  width: 30%;
}
.wj-table .tr-row td:nth-of-type(4) {
  width: 15%;
}
.wj-table .tr-row td.-role {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  color: #6a6d73;
  text-transform: capitalize;
}

.add-item {
  border: 2px dashed #ccc;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  height: 70px;
  width: 100%;
  font-size: 17px;
  padding: 0 35px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.salon-hero-svg-icons {
  background: #F2E4D9;
  width: 42px;
  height: 42px;
  border-radius: 550px;
  display: flex;
  padding: 13px;
}
.salon-hero-svg-icons svg {
  stroke-width: 4px;
}

.salon-hero {
  height: 252px;
  position: relative;
  z-index: 10;
}
.salon-hero .salon-hero-header {
  position: absolute;
  top: 10px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-top: 20px;
  width: 100%;
  z-index: 10;
}
.salon-hero .salon-hero-header .salon-hero-logo {
  width: 48px;
  height: 48px;
}
.salon-hero .salon-hero-header .salon-hero-logo * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.salon-hero .search__form {
  position: absolute;
  bottom: 10px;
  padding: 15px;
}
.salon-hero .search__input {
  background: #FBF6F1;
  border-radius: 20px;
}

.salon-barbers-card {
  min-width: 144px;
  border-radius: 24px;
  min-height: 99px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.salon-barbers-card .avatar img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 68px;
  width: 68px;
  border-radius: 550px;
}
.salon-barbers-card .name {
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: #3A2228;
  margin-top: 6px;
}
.salon-barbers-card .book-btn {
  background: #CA987E;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 12px;
  margin-top: 14px;
}
.salon-barbers-card .book-btn, .salon-barbers-card .name, .salon-barbers-card .avatar {
  z-index: 10;
}
.salon-barbers-card .bg {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 13.43%;
  bottom: 12.69%;
  background: #F2E4D9;
  border-radius: 24px;
}

.floaty-bar {
  width: 100%;
  height: 70px;
  left: 0;
  bottom: 0;
  z-index: 1000;
  justify-content: center;
  position: fixed;
  display: flex;
  max-width: 700px;
  transform: translateX(-50%);
  left: 50%;
}

.floaty-bar .bar-actions {
  width: 100%;
  max-width: 100%;
  background: #fff;
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 1);
  position: relative;
}

.floaty-bar .bar-actions::after {
  content: "";
  position: absolute;
  border-radius: 0px;
  top: 32px;
  right: 32px;
  left: 32px;
  bottom: -32px;
  z-index: -2;
  background: #E4E4E4;
  filter: blur(86.985px);
}

.floaty-bar .action-list .action-list-item .action-list-icon {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.floaty-bar .action-list .action-list-item .action-list-icon svg {
  stroke: #8c8b88;
  width: 100%;
  height: 100%;
  stroke-width: 0px;
  transition: all 0.3s ease;
}

.floaty-bar .action-list .action-list-item.active .action-list-icon {
  animation: subtle-bounce 0.6s ease-in-out;
}

.floaty-bar .action-list .action-list-item.active .action-list-icon svg {
  stroke: #000;
}

.floaty-bar .action-list .action-list-item.active .h-avatar {
  animation: subtle-bounce 0.6s ease-in-out;
}

.floaty-bar .action-list .action-list-item span {
  color: #000;
}

.floaty-bar .action-list .action-list-item.active span {
  color: #000;
}

@keyframes subtle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.location-card .thumbnail {
  height: 160px;
}
.location-card .thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.products-group:hover .products-group-thumbnails-container::after {
  opacity: 0.2;
}
.products-group .products-group-thumbnails-container {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}
.products-group .products-group-thumbnails-container .products-group-thumbnails-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}
.products-group .products-group-thumbnails-container .other-products-container {
  display: flex;
  height: 25%;
  margin-top: 7px;
}
.products-group .products-group-thumbnails-container .other-products-container .other-product-image {
  height: 75px;
  border-radius: 8px;
}
.products-group .products-group-thumbnails-container .other-products-container .other-product-image:not(:first-child) {
  margin-left: 7px;
}
.products-group .products-group-thumbnails-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  border-radius: 8px;
  transition: opacity 200ms ease;
  background: #fff;
}
.products-group .main-product-image {
  height: 75%;
  border-radius: 8px;
}
.products-group .product-image {
  width: 100%;
  background-color: #e7e7e9;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.products-group .products-group-description-container .collection-name {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #23262F;
}
.products-group .products-group-description-container .products-group-meta {
  display: flex;
  justify-content: space-between;
  padding: 0;
}
.products-group .products-group-description-container .products-group-meta .by-who {
  font-size: 14px;
  line-height: 24px;
  color: #353945;
}
.products-group .products-group-description-container .products-group-meta .products-count {
  border: 2px solid #E6E8EC;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 8px 8px 6px;
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
  color: #23262F;
}

.product-collection-small-card {
  background: #F4F5F6;
  border-radius: 16px;
  margin: 0 8px;
  padding: 24px;
}
.product-collection-small-card:first-child {
  margin-left: 0;
}
.product-collection-small-card p {
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.quest-item.is-collection .text-sticker.price {
  border-radius: 9px;
  transition: all 0.4s ease;
}
.quest-item.is-collection .text-sticker.price:hover {
  transform: translateY(-5px) scale(1.02);
}
.quest-item.is-collection .quest-item-info {
  padding: 30px 28px 0;
}
.quest-item.is-collection .quest-item-info .quest-item-text {
  font-weight: 300;
}
.quest-item.is-collection .divider-stat .divider-stat-bar {
  padding: 2px;
  background: #00c7d9;
  border-radius: 550px;
}
.quest-item.is-collection .products-group .products-group-thumbnails-container {
  padding-bottom: initial;
}
.quest-item.is-collection .products-group .products-group-thumbnails-container .products-group-thumbnails-content {
  position: relative;
}
.quest-item.is-collection .products-group .products-group-thumbnails-container .other-products-container {
  padding: 20px;
}

.quest-item {
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06);
  position: relative;
}
.quest-item .quest-item-cover {
  width: 100%;
  height: 120px;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}
.quest-item .text-sticker {
  position: absolute;
  top: 10px;
  right: -6px;
}
.quest-item .quest-item-info {
  padding: 44px 28px 0;
  position: relative;
}
.quest-item .quest-item-badge {
  border: 6px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: -28px;
  left: 22px;
}
.quest-item .quest-item-title {
  font-size: 1.125rem;
  font-weight: 700;
}
.quest-item .quest-item-text {
  margin-top: 18px;
  color: #3e3f5e;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286em;
}
.quest-item .progress-stat {
  max-width: 228px;
  margin-top: 48px;
}
.quest-item .quest-item-meta {
  display: flex;
  align-items: center;
  margin-top: 22px;
  padding: 14px 0;
  border-top: 1px solid #eaeaf5;
}
.quest-item .quest-item-meta .quest-item-meta-info {
  margin-left: 10px;
}
.quest-item .quest-item-meta .quest-item-meta-title {
  font-size: 0.75rem;
  font-weight: 700;
}
.quest-item .quest-item-meta .quest-item-meta-text {
  color: #3e3f5e;
  font-size: 0.625rem;
  font-weight: 500;
}

.salon-products-card {
  min-height: 168px;
  display: flex;
}
.salon-products-card .thumbnail {
  width: 116px;
  height: 168px;
  border-radius: 24px;
}
.salon-products-card .thumbnail * {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.salon-products-card .info {
  margin-left: 16px;
}
.salon-products-card .info .name {
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  margin: 8px 0px;
}

.sandy-table {
  display: table;
  width: 100%;
}

@media only screen and (max-width: 1023px) {
  .sandy-table {
    display: block;
  }
}
.sandy-table-row {
  display: table-row;
}
.sandy-table-row:first-child .sandy-table-col {
  padding: 0 12px 16px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.23077;
  color: #6F767E;
}
.sandy-table-row:not(:first-child) {
  transition: background 0.2s;
}
.sandy-table-row:not(:first-child) .sandy-table-col:not(:first-child):not(:nth-child(2)) {
  padding-top: 20px;
}

@media only screen and (max-width: 1023px) {
  .sandy-table-row {
    position: relative;
    display: block;
  }
}
@media only screen and (max-width: 1023px) {
  .sandy-table-row:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .sandy-table-row:not(:first-child) .sandy-table-col:not(:first-child):not(:nth-child(2)) {
    padding-top: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .sandy-table-row:not(:first-child):hover {
    background: #F4F4F4;
  }

  body.dark .sandy-table-row:not(:first-child):hover {
    background: #272B30;
  }

  .sandy-table-row:not(:first-child):hover .products__number, .sandy-table-row:not(:first-child):hover .products__status {
    background: #FCFCFC;
  }

  body.dark .sandy-table-row:not(:first-child):hover .products__number {
    background: #33383F;
  }
  body.dark .sandy-table-row:not(:first-child):hover .products__status {
    background: #1A1D1F;
  }

  .sandy-table-row:not(:first-child):hover .control {
    visibility: visible;
    opacity: 1;
  }
}
@media only screen and (max-width: 1023px) {
  .sandy-table-row:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EFEFEF;
  }

  body.dark .sandy-table-row:not(:last-child) {
    border-color: #272B30;
  }
}
.sandy-table-col {
  position: relative;
  display: table-cell;
  padding: 16px 12px;
  vertical-align: top;
  color: #1A1D1F;
}

@media only screen and (max-width: 1023px) {
  .sandy-table-col {
    position: static;
    display: flex;
    align-items: center;
    padding: 0;
  }
}
body.dark .sandy-table-col {
  color: #FCFCFC;
}

.sandy-table-col:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #EFEFEF;
}

body.dark .sandy-table-col:after {
  background: #272B30;
}

@media only screen and (max-width: 1023px) {
  .sandy-table-col:after {
    display: none;
  }
}
.sandy-table-col:first-child {
  width: 56px;
  border-radius: 8px 0 0 8px;
  font-size: 0;
}
.sandy-table-col:first-child:after {
  left: 12px;
}
.sandy-table-col:last-child {
  border-radius: 0 8px 8px 0;
}
.sandy-table-col:last-child:after {
  right: 12px;
}

@media only screen and (max-width: 1023px) {
  .sandy-table-col:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .sandy-table-col:nth-child(4) {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .sandy-table-col:not(:first-child):not(:last-child) {
    margin-bottom: 12px;
  }
}
.sandy-table .control {
  position: absolute;
  left: 12px;
  bottom: 16px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

@media only screen and (max-width: 1023px) {
  .sandy-table .control {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    visibility: visible;
    opacity: 1;
  }
}
.sandy-table-label {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .sandy-table-label {
    display: block;
    flex-shrink: 0;
    width: 124px;
    padding-right: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.23077;
    color: #6F767E;
  }
}
.sandy-table-foot {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.sandy-table-arrow {
  width: 40px;
  height: 40px;
  border: 2px solid #EFEFEF;
  border-radius: 50%;
  transition: border-color 0.2s;
}

body.dark .sandy-table-arrow {
  border-color: transparent;
}

.sandy-table-arrow .icon {
  width: 20px;
  height: 20px;
  fill: #6F767E;
  transition: fill 0.2s;
}
.sandy-table-arrow:hover {
  border-color: #EFEFEF;
}
.sandy-table-arrow:hover .icon {
  fill: #1A1D1F;
}

body.dark .sandy-table-arrow:hover {
  border-color: #272B30;
}
body.dark .sandy-table-arrow:hover .icon {
  fill: #FCFCFC;
}

.sandy-table-arrow:not(:last-child) {
  margin-right: 8px;
}

.salon-hero-v2 {
  position: relative;
  margin-top: 29px;
  border-radius: 30px;
  background-color: #fff;
  box-shadow: 0 0 60px 0 rgba(94, 92, 154, 0.12);
  padding: 20px;
  height: 100%;
  margin-bottom: 40px;
}
.salon-hero-v2 .salon-hero-header {
  position: absolute;
  top: 10px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-top: 20px;
  width: 100%;
  z-index: 10;
}
.salon-hero-v2 .salon-hero-header .salon-hero-logo {
  width: 48px;
  height: 48px;
}
.salon-hero-v2 .salon-hero-header .salon-hero-logo * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.salon-hero-v2 .salon-hero-banner {
  width: 100%;
  height: 34vh;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}
.salon-hero-v2 .salon-hero-banner * {
  width: 100%;
  height: 100%;
  -o-object-fit: inherit;
     object-fit: inherit;
  border-radius: inherit;
}

.context-border {
  border: 1px solid rgba(228, 230, 232, 0.6);
  border-radius: 16px;
}

.peoples-info {
  display: flex;
}
.peoples-info .thumbnail {
  width: 42px;
  height: 42px;
  border-radius: 550px;
}
.peoples-info .thumbnail * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  border-radius: inherit;
}
.peoples-info .info {
  margin-left: 15px;
}

.context-menu {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}
.context-menu .context-menu-item {
  min-width: 100px;
  height: 42px;
  background: #FFFFFF;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.context-menu .context-menu-item.active {
  box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
}
.context-menu .context-menu-item .s-svg-icon {
  width: 18px;
  height: 18px;
}
.context-menu .context-menu-item .s-svg-icon svg {
  width: 100%;
  height: 100%;
}
.context-menu .context-menu-item span {
  margin-left: 4px;
  font-size: 12px;
}

.barber {
  overflow: hidden;
  padding-bottom: 140px;
}

@media only screen and (max-width: 1339px) {
  .barber {
    padding-bottom: 112px;
  }
}
@media only screen and (max-width: 767px) {
  .barber {
    padding-bottom: 64px;
  }
}
.barber__top {
  display: flex;
  align-items: center;
  margin-bottom: 54px;
}

@media only screen and (max-width: 767px) {
  .barber__top {
    display: block;
    margin-bottom: 32px;
  }
}
.barber__stage {
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #777E90;
}

.barber .field .select {
  min-width: 256px;
}

@media only screen and (max-width: 767px) {
  .barber .field .select {
    min-width: 100%;
  }
}
body.dark .barber .field .select {
  background: none;
}

.barber__box {
  margin-right: auto;
}
.barber__box .select-empty {
  width: auto;
  min-width: 240px;
  margin-left: -24px;
}

@media only screen and (max-width: 767px) {
  .barber__box {
    margin: 0 0 16px;
  }
}
@media only screen and (max-width: 767px) {
  .barber__box .select-empty {
    display: inline-block;
  }
}
.barber__wrapper {
  margin: 0 -16px;
}

@media only screen and (max-width: 767px) {
  .barber__wrapper {
    margin: 0 -4px;
  }
}
.barber__item {
  padding: 24px;
  border-radius: 16px;
  background: #FCFCFD;
  transition: box-shadow 0.2s;
  box-shadow: 1px 4px 13px -2px rgba(0, 0, 0, 0.14);
}

body.dark .barber__item {
  background: #141416;
}

.barber__item:hover {
  box-shadow: 0px 64px 64px -48px rgba(31, 47, 70, 0.12);
}
.barber__item:hover .barber__avatar {
  width: 80px;
}

@media only screen and (max-width: 1179px) {
  .barber__item:hover .barber__avatar {
    width: 64px;
  }
}
.barber__head {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E6E8EC;
}

body.dark .barber__head {
  border-color: #353945;
}

.barber__rating {
  display: flex;
  align-items: center;
  height: 24px;
  margin-right: auto;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.66667;
  font-weight: 600;
  color: #FCFCFD;
}

.barber__icon {
  margin-right: 4px;
}
.barber__icon img {
  width: 16px;
}

.barber__control {
  display: flex;
}

.barber__button .icon {
  width: 24px;
  height: 24px;
  fill: #B1B5C3;
  transition: fill 0.2s;
}
.barber__button:hover .icon {
  fill: #3772FF;
}
.barber__button:not(:last-child) {
  margin-right: 8px;
}

.barber__add {
  position: relative;
}
.barber__add .icon {
  transition: all 0.2s;
}
.barber__add .icon:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.barber__add.active .icon:first-child {
  opacity: 0;
}
.barber__add.active .icon:nth-child(2) {
  opacity: 1;
}

.barber__body {
  text-align: center;
}

.barber__avatar {
  position: relative;
  width: 64px;
  margin: 0 auto 16px;
  transition: width 0.2s;
}
.barber__avatar:before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.barber__preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.barber__preview img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1.05);
}

.barber__reward {
  position: absolute;
  right: -4px;
  bottom: -4px;
}

.barber__name {
  margin-bottom: 2px;
  font-weight: 500;
}

.barber__price {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}
.barber__price span {
  font-weight: 600;
  color: #23262F;
}

body.dark .barber__price span {
  color: #E6E8EC;
}

.barber__slider {
  visibility: hidden;
}
.barber__slider.slick-initialized {
  visibility: visible;
}

@media only screen and (max-width: 1023px) {
  .barber__slider {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .barber__slider {
    padding-bottom: 72px;
  }
}
.barber .slick-list {
  overflow: visible;
  height: 231px;
}
.barber .slick-track {
  display: flex;
}
.barber .slick-slide {
  height: auto;
  padding: 0 16px;
  opacity: 0;
  transition: opacity 0.4s;
}
.barber .slick-slide.slick-active {
  opacity: 1;
}
.barber .slick-arrow {
  top: 111px;
}
.barber .slick-prev {
  left: -60px;
}
.barber .slick-next {
  right: -60px;
}

@media only screen and (max-width: 474px) {
  .barber .slick-list {
    margin: 0 -136px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .barber .slick-slide {
    padding: 0 4px;
  }
}
@media only screen and (max-width: 1023px) {
  .barber .slick-arrow {
    top: auto;
    bottom: 0;
  }
}
@media only screen and (max-width: 1339px) {
  .barber .slick-prev {
    left: -40px;
  }
}
@media only screen and (max-width: 1023px) {
  .barber .slick-prev {
    left: calc(50% - 56px);
  }
}
@media only screen and (max-width: 767px) {
  .barber .slick-prev {
    left: calc(50% - 44px);
  }
}
@media only screen and (max-width: 1339px) {
  .barber .slick-next {
    right: -40px;
  }
}
@media only screen and (max-width: 1023px) {
  .barber .slick-next {
    right: calc(50% - 56px);
  }
}
@media only screen and (max-width: 767px) {
  .barber .slick-next {
    right: calc(50% - 44px);
  }
}
.section-context-banner {
  position: relative;
  padding-top: 10px;
}
.section-context-banner .context-search-wrapper .context-search {
  padding: 8px 12px;
  text-align: left;
  color: #a9a9a9;
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.09px;
}
.section-context-banner .context-search-wrapper .context-search .svg-icon {
  width: 14px;
  height: 14px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
.section-context-banner .context-search-wrapper .context-search .svg-icon svg {
  stroke: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
}
.section-context-banner .context-search-wrapper .context-search span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  color: #c2c2c2;
}
.section-context-banner .context-banner {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 13em;
  z-index: 1;
  background-color: var(--c-header-default);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}
.section-context-banner .context-content {
  z-index: 2;
  position: relative;
}
.section-context-banner .context-tagline {
  text-align: left;
  margin-top: 20px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #fff;
}
.is-color .section-context-banner .context-tagline {
  color: var(--c-header-text);
}

.section-context-page .section-context-heading {
  color: #383734;
  margin-top: 36px;
  margin-bottom: 32px;
  line-height: 35px;
  font-size: 24px;
  letter-spacing: 0;
}

.context-location-slide-wrapper .slick-track {
  margin: 0;
}
.context-location-slide-wrapper .slick-slide {
  padding: 0 12px;
}
.context-location-slide-wrapper .context-location-slide {
  visibility: hidden;
}
.context-location-slide-wrapper .context-location-slide.slick-initialized {
  visibility: visible;
}
.context-location-slide-wrapper .context-location-slide .context-location-item {
  cursor: pointer;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-body {
  display: flex;
  flex-direction: column;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-heading {
  font-size: 16px;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #484848;
  word-break: break-word;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-desc {
  min-height: 37px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08px;
  color: #767676;
  word-break: break-word;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-header {
  position: relative;
  margin-bottom: 5px;
  border-radius: 7px;
  overflow: hidden;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-thumbnail {
  padding-top: 66.6667%;
  overflow: hidden;
  position: relative;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-thumbnail .div-map {
  height: 205px;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-rating {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 12px;
  border-radius: 0 6px;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-rating .rate-text {
  font-size: 18px;
  color: #fff;
  letter-spacing: 0;
  line-height: 24px;
}
.context-location-slide-wrapper .context-location-slide .context-location-item .context-location-rating .rate-review {
  letter-spacing: 0;
  line-height: 16px;
  word-wrap: break-word;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #fff;
}

.sandy-wrapper {
  margin-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}
@media (min-width: 960px) {
  .sandy-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
  }
}

.context-barbers-wrapper {
  background-color: #f5f5f5;
  border-radius: 20px;
  margin-bottom: 80px;
  padding: 19px 16px;
  position: relative;
}
.context-barbers-wrapper .context-heading {
  font-size: 43px;
  line-height: normal;
  text-align: center;
  width: auto;
}
.context-barbers-wrapper .context-sub {
  font-size: 18px;
  color: #767676;
  text-align: center;
}
.context-barbers-wrapper .slick-track {
  margin: 0;
}
.context-barbers-wrapper .slick-slide {
  padding: 12px 12px;
}
.context-barbers-wrapper .slick-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 24px;
  box-shadow: 0 13px 24px -7px rgba(0, 0, 0, 0.1);
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
}
.context-barbers-wrapper .slick-arrow.slick-prev {
  top: -40px;
  left: 20px;
}
.context-barbers-wrapper .slick-arrow.slick-next {
  display: none !important;
  top: -50px;
}

.context-service-slide-wrapper .context-service-slide {
  visibility: hidden;
  display: none;
}
.context-service-slide-wrapper .context-service-slide.slick-initialized {
  visibility: visible;
  display: block;
}
.context-service-slide-wrapper .slick-track {
  margin: 0;
}
.context-service-slide-wrapper .context-service-slide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.context-service-slide-wrapper .context-service-slide-item .icon {
  width: 87px;
  height: 87px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  text-align: center;
}
.context-service-slide-wrapper .context-service-slide-item .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.context-service-slide-wrapper .context-service-slide-item .icon .svg-icon {
  width: 50px;
  height: 50px;
}
.context-service-slide-wrapper .context-service-slide-item .icon .svg-icon svg {
  width: 100%;
  height: 100%;
}
.context-service-slide-wrapper .context-service-slide-item .name {
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  overflow: hidden;
  width: 89px;
  display: block;
  color: #fff;
  margin: 0 auto;
}
.is-color .context-service-slide-wrapper .context-service-slide-item .name {
  color: var(--c-header-text);
}

.time-slots-flex .time-btn {
  background: #F8F8F8;
  border-radius: 15px;
}
.time-slots-flex .sandy-input-inner:checked + .time-btn {
  border: 2px solid #c4c4c4;
}

.time-btn {
  font-size: 12px;
  cursor: pointer;
}
.time-btn.disabled {
  opacity: 0.4;
  background-color: #cccccc !important;
  color: #666666 !important;
  cursor: auto;
  pointer-events: none;
}

.time_btn.active:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #28a745;
  box-shadow: 0px 0px 0px 2px #fff;
  border-radius: 50%;
  width: 14px;
  line-height: 14px;
  height: 14px;
  top: -5px;
  right: -5px;
  font-size: 10px;
  text-align: center;
  position: absolute;
  color: #fff;
}

.board-colors-wrapper {
  border: 1px solid var(--c-bg-hairline);
  border-radius: 8px;
}
.board-colors-wrapper .board-colors-head {
  border-bottom: 1px solid var(--c-bg-hairline);
}
.board-colors-wrapper .board-colors-head .pickr .pcr-button {
  height: 60px;
  box-shadow: none;
  border-radius: 0px;
}
.board-colors-wrapper .board-colors-head .pickr .pcr-button::after {
  box-shadow: none;
}
.board-colors-wrapper .board-colors-body {
  padding: 15px;
}
.board-colors-wrapper .form-wrap {
  position: relative;
}
.board-colors-wrapper .form-wrap label {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  margin-left: 16px;
  z-index: 99;
}
.board-colors-wrapper .pickr {
  margin-top: 0;
}
.board-colors-wrapper .pickr .pcr-button {
  height: 50px;
  border-radius: 15px;
}
.board-colors-wrapper .pickr .pcr-button::before, .board-colors-wrapper .pickr .pcr-button::after {
  border-radius: inherit;
}
.board-colors-wrapper .pickr .pcr-button::before {
  background: transparent;
}
.board-colors-wrapper .pickr .pcr-button::after {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px inset;
}

.settings-section {
  display: flex;
  flex-wrap: wrap;
  max-width: 880px;
  margin: 0 auto;
}

.settings-section .settings-box {
  position: relative;
  width: calc(20% - 16px);
  background: #f0f0f0;
  text-align: center;
  padding: 16px;
  margin: 8px;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.settings-section .settings-box:hover, .settings-section .settings-box:focus {
  border-color: #243d66;
  box-shadow: var(--light-box-shadow);
}

.settings-section .settings-box:hover .edit-icon, .settings-section .settings-box:focus .edit-icon {
  opacity: 1;
  pointer-events: all;
}

.settings-section .settings-box:hover .icon-wrap i, .settings-section .settings-box:focus .icon-wrap i {
  color: #243d66;
}

.settings-section .settings-box:hover h3, .settings-section .settings-box:focus h3 {
  color: #243d66;
}

.settings-section .settings-box.is-active .icon-wrap i {
  color: #243d66;
}

.settings-section .settings-box.is-active h3 {
  color: #243d66;
}

.settings-section .settings-box .edit-icon {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18px;
  width: 18px;
  border-radius: var(--radius-rounded);
  background: var(--fade-grey-light-3);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.settings-section .settings-box .edit-icon i {
  font-size: 0.8rem;
}

.settings-section .settings-box .icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background: none !important;
  border: none;
  box-shadow: none;
  height: 52px;
  width: 100%;
}

.settings-section .settings-box .icon-wrap i {
  font-size: 2.7rem;
  color: var(--light-text-light-12);
  margin-bottom: 4px;
  transition: color 0.3s;
}

.settings-section .settings-box .icon-wrap img {
  display: block;
  max-width: 90px;
}

.settings-section .settings-box span {
  text-align: center;
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 1px;
  word-break: break-word;
}

.settings-section .settings-box h3 {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--light-text);
  transition: color 0.3s;
}

@media only screen and (max-width: 767px) {
  .settings-section .settings-box {
    width: calc(50% - 16px);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .settings-section .settings-box {
    width: calc(25% - 16px);
  }
}
body.dark .settings-section .settings-box {
  background: #222;
}
body.dark .settings-section .settings-box .icon-wrap svg {
  stroke: #fff;
}
body.dark .settings-section .settings-box .edit-icon svg {
  stroke: #fff;
}

.login {
  display: flex;
}

@media only screen and (max-width: 1023px) {
  .login {
    display: block;
  }
}
.login__col {
  position: relative;
}

.login__col:first-child {
  flex-shrink: 0;
  width: 512px;
  min-height: 100vh;
  background-color: #23262F;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: cover;
}

@media only screen and (max-width: 1339px) {
  .login__col:first-child {
    width: 420px;
  }
}
@media only screen and (max-width: 1179px) {
  .login__col:first-child {
    width: 350px;
  }
}
@media only screen and (max-width: 1023px) {
  .login__col:first-child {
    width: auto;
    min-height: auto;
    background: none !important;
  }
}
body.dark .login__col:first-child {
  background-color: #23262F;
}

.login__col:nth-child(2) {
  position: relative;
  display: flex;
  flex-grow: 1;
  padding: 148px 64px 132px;
}

@media only screen and (max-width: 1419px) {
  .login__col:nth-child(2) {
    padding: 124px 48px 76px;
  }
}
@media only screen and (max-width: 1023px) {
  .login__col:nth-child(2) {
    min-height: calc(var(--vh, 1vh) * 100);
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .login__col:nth-child(2) {
    flex-direction: column;
    padding: 100px 32px 32px;
  }
}
.login__logo {
  position: absolute;
  top: 64px;
  left: 80px;
  width: 156px;
}

@media only screen and (max-width: 1419px) {
  .login__logo {
    top: 48px;
    left: 64px;
  }
}
@media only screen and (max-width: 767px) {
  .login__logo {
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.login__logo img {
  width: 100%;
}

.login__logo img:first-child {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .login__logo img:first-child {
    display: inline-block;
  }

  body.dark .login__logo img:first-child {
    display: none;
  }
}
@media only screen and (max-width: 1023px) {
  .login__logo img:nth-child(2) {
    display: none;
  }

  body.dark .login__logo img:nth-child(2) {
    display: inline-block;
  }
}
.login__head {
  position: absolute;
  top: 80px;
  right: 80px;
  left: 80px;
  text-align: right;
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 700;
}

@media only screen and (max-width: 1419px) {
  .login__head {
    top: 56px;
    right: 64px;
    left: 64px;
  }
}
@media only screen and (max-width: 1023px) {
  .login__head {
    right: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .login__head {
    position: static;
    margin-bottom: 32px;
    text-align: center;
  }
}
.login__head .login__link {
  margin-left: 5px;
  color: #3772FF;
  transition: color 0.2s;
}

.login__head .login__link:hover {
  color: #044eff;
}

.login__wrap {
  width: 380px;
  margin: auto;
}

@media only screen and (max-width: 639px) {
  .login__wrap {
    width: 100%;
  }
}
.login__top {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #E6E8EC;
}

body.dark .login__top {
  border-color: #353945;
}

.login__title {
  margin-bottom: 32px;
  text-align: center;
}

.login__form .login__info {
  text-align: center;
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}

.login__form .login__button,
.login__new .login__button {
  width: 100%;
}

.login__form .login__button {
  margin-top: 32px;
}

.login__foot {
  margin-top: 24px;
  text-align: center;
}

.login__form .login__link {
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 700;
  color: #23262F;
  transition: color 0.2s;
}

body.dark .login__form .login__link {
  color: #FCFCFD;
}

.login__form .login__link:hover {
  color: #3772FF;
}

.login__verification .login__title {
  margin: 0 -5px 32px;
  text-align: center;
}

.login__note {
  margin-bottom: 4px;
  text-align: center;
  font-size: 12px;
  line-height: 1.66667;
  color: #353945;
}

body.dark .login__note {
  color: #777E90;
}

.login__text {
  margin-bottom: 24px;
  text-align: center;
  color: #777E90;
}

.login__text span {
  font-weight: 500;
  color: #23262F;
}

body.dark .login__text span {
  color: #FCFCFD;
}

.login__numbers {
  display: flex;
  margin: 0 -8px 32px;
}

.login__number {
  flex: 0 0 calc(25% - 16px);
  width: calc(25% - 16px);
  margin: 0 8px;
}

.login__number input {
  width: 100%;
  height: 96px;
  border-radius: 8px;
  border: 1px solid #F4F5F6;
  background: #F4F5F6;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #23262F;
  transition: all 0.2s;
}

.login__number input:focus {
  border-color: #E6E8EC;
  background: #FCFCFD;
}

body.dark .login__number input {
  background: #23262F;
  border-color: #23262F;
  color: #FCFCFD;
}

body.dark .login__number input:focus {
  background: none;
  border-color: #353945;
}

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

.login__new .field:not(:last-child) {
  margin-bottom: 32px;
}

.login__verification, .login__new {
  display: none;
}

.entry__top {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #E6E8EC;
}

body.dark .entry__top {
  border-color: #353945;
}

.entry__title {
  margin-bottom: 32px;
  text-align: center;
}

.entry__info {
  margin-bottom: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}

.entry__correct {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 24px;
  background: #F4F5F6;
  border-radius: 20px;
  font-weight: 500;
  color: #58BD7D;
}

body.dark .entry__correct {
  background: #353945;
}

.entry__correct .icon {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  fill: #58BD7D;
}

.entry__correct span {
  color: #23262F;
}

body.dark .entry__correct span {
  color: #FCFCFD;
}

.entry .nav {
  justify-content: center;
  margin-bottom: 32px;
}

.entry .nav__link:not(:last-child) {
  margin-right: 24px;
}

.entry__container {
  margin-bottom: 32px;
}

.entry__item {
  display: none;
}

.entry__line {
  display: flex;
  align-items: flex-end;
}

.entry__line .field:first-child {
  flex-shrink: 0;
  width: 128px;
  margin-right: 8px;
}

.entry__line .field:nth-child(2) {
  flex-grow: 1;
}

.entry__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.66667;
  font-weight: 600;
}

.entry__foot .entry__link {
  color: #3772FF;
  transition: color 0.2s;
}

.entry__foot .entry__link:hover {
  color: #044eff;
}

.entry__scan {
  font-size: 12px;
  line-height: 1.66667;
  font-weight: 600;
  color: #777E90;
  transition: color 0.2s;
}

.entry__scan:hover {
  color: #23262F;
}

body.dark .entry__scan:hover {
  color: #FCFCFD;
}

.entry__form .entry__button {
  width: 100%;
  margin-top: 32px;
}

.entry__box {
  display: flex;
  margin-top: 32px;
  background: #F4F5F6;
  border-radius: 16px;
}

@media only screen and (max-width: 767px) {
  .entry__box {
    margin-bottom: -32px;
    background: none;
  }
}
body.dark .entry__box {
  background: #23262F;
}

@media only screen and (max-width: 767px) {
  body.dark .entry__box {
    background: none;
  }
}
.entry__details {
  max-width: 256px;
  margin: 64px auto 0;
  padding: 32px 48px;
  border-radius: 32px 32px 0 0;
  background: #FCFCFD;
}

@media only screen and (max-width: 767px) {
  .entry__details {
    margin-top: 0;
    background: #F4F5F6;
  }
}
body.dark .entry__details {
  background: #353945;
}

.entry__code {
  padding: 16px;
  border-radius: 8px;
  border: 2px dashed #3772FF;
}

.entry__code img {
  width: 100%;
  border-radius: 8px;
}

.entry__wrap {
  display: none;
}

.entry__wrap .entry__button {
  width: 100%;
  margin-top: 48px;
}

body.dark .entry__wrap .entry__button {
  box-shadow: inset 0 0 0 2px #777E90;
}

body.dark .entry__wrap .entry__button:hover {
  box-shadow: inset 0 0 0 2px #B1B5C3;
}

.nav__link {
  display: flex;
  padding: 6px 12px;
  border-radius: 14px;
  background: none;
  font-size: 14px;
  line-height: 1.14286;
  font-weight: 700;
  color: #777E90;
  transition: all 0.2s;
}

.nav__link .icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  fill: #777E90;
  transition: fill 0.2s;
}

.nav__link:hover {
  color: #353945;
}

.nav__link:hover .icon {
  fill: #353945;
}

body.dark .nav__link:hover {
  color: #E6E8EC;
}

body.dark .nav__link:hover .icon {
  fill: #E6E8EC;
}

.nav__link.active {
  background: #353945;
  color: #FCFCFD;
}

.nav__link.active .icon {
  fill: #FCFCFD;
}

body.dark .nav__link.active {
  background: #353945;
  color: #FCFCFD;
}

body.dark .nav__link.active .icon {
  fill: #FCFCFD;
}

.nav__link:not(:last-child) {
  margin-right: 8px;
}

.profile-background-types-wrapper.is-barber .profile-background-types {
  height: 0;
  padding: 0;
  min-height: 0;
  box-shadow: none;
}
.profile-background-types-wrapper.is-barber.active .nav__link {
  background: #353945;
  color: #FCFCFD;
}

.salon-service-v1-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.salon-service-v1-wrapper .salon-service-v1-item {
  display: flex;
  align-items: center;
  width: calc(50% - 16px);
  margin: 8px;
}

.salon-service-v1-wrapper .salon-service-v1-item img {
  display: block;
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 550px;
  border: 1px solid #e3e3e3;
}

.salon-service-v1-wrapper .salon-service-v1-item .meta {
  margin-left: 10px;
}

.salon-service-v1-wrapper .salon-service-v1-item .meta > span {
  display: block;
}

.salon-service-v1-wrapper .salon-service-v1-item .meta > span:first-child {
  font-weight: 600;
  color: #283252;
  font-size: 0.85rem;
}

.salon-service-v1-wrapper .salon-service-v1-item .meta > span:nth-child(2), .salon-service-v1-wrapper .salon-service-v1-item .meta > span:nth-child(3) {
  font-size: 0.85rem;
  color: #a3a6b8;
}

.salon-service-v1-wrapper .salon-service-v1-item .meta > span:nth-child(2) i, .salon-service-v1-wrapper .salon-service-v1-item .meta > span:nth-child(3) i {
  position: relative;
  top: -2px;
  font-size: 4px;
  margin: 0 6px;
}

.salon-service-v1-wrapper .salon-service-v1-item .meta > span:nth-child(3) {
  color: #41b983;
}

.salon-service-v1-wrapper .salon-service-v1-item .meta > span span {
  display: inline-block;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.section-title h4 {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #000;
  margin-right: 6px;
}

.section-title i {
  color: #bbb;
}

.action-link {
  position: relative;
  top: -2px;
  margin-left: auto;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.sandy-big-checkbox .sandy-input-inner:checked + .board-theme-wrapper {
  position: relative;
}
.sandy-big-checkbox .sandy-input-inner:checked + .board-theme-wrapper::before {
  content: "";
  position: absolute;
  inset: 0px;
  border: 3px solid var(--c-text-title);
  border-radius: 5px;
}

.board-theme-wrapper {
  position: relative;
  border: 1px solid var(--c-bg-hairline);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}
.board-theme-wrapper .board-theme-head {
  height: 2rem;
}
.board-theme-wrapper .board-theme-body {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  line-height: 1rem;
}

.board-footer {
  position: fixed;
  z-index: 1000;
  bottom: 0;
  right: 0;
  left: 0;
  height: 40px;
  background: var(--c-accent);
  box-shadow: 0 0 15px rgba(50, 50, 93, 0.18);
  padding: 0 20px;
}
.board-footer a {
  font-size: 12px;
  color: var(--c-accent-text);
  display: flex;
  align-items: center;
}
.board-footer a svg {
  height: 15px;
  width: 15px;
  margin-left: 5px;
  stroke: var(--c-accent-text);
}

.links-v2 {
  border-radius: 10px;
  padding: 16px 17px 16px 20px;
  display: block;
  align-items: center;
  justify-content: space-between;
  background: #000;
  position: relative;
}
.links-v2:not(:last-child) {
  margin-bottom: 20px;
}
.links-v2 .thumbnail-preview * {
  height: 30px;
  width: 30px;
  min-width: 30px;
  -o-object-fit: cover;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  border-radius: 550px;
  margin-right: 12px;
}
.links-v2 .links-v2-inner {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
  width: 100%;
}
.links-v2 .links-v2-inner span {
  width: calc(100% - 65px);
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
@media (max-width: 600px) {
  .links-v2 .links-v2-inner span {
    width: calc(100% - 20px);
  }
}
.links-v2 .links-v2-inner svg {
  stroke: #fff;
}
body.is-dark .links-v2 {
  background: #000;
}
body.is-dark .links-v2 span {
  color: #fff;
}
body.is-dark .links-v2 svg {
  stroke: #fff;
}

.fc td, .fc th {
  border: 0 !important;
  padding: 0.5rem 0.2rem 0.2rem !important;
}
.fc .fc-scrollgrid {
  border: 0 !important;
}
.fc .fc-daygrid-day-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fc .fc-today-button {
  display: none !important;
}

.appointment-item {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #EEF1FE;
  box-shadow: 0px 7px 10px #f1f1f1;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 30px;
}

.app-head {
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E6E9F4;
  padding-bottom: 10px;
}
.app-head p {
  margin-bottom: 0;
}
.app-head .con-time {
  background: #FF8E3E;
  border-radius: 80px;
  padding: 4px 8px;
  font-weight: 600;
  color: #FFFFFF;
}

.app-user {
  border-bottom: 1px solid #E6E9F4;
}
.app-user .app-img {
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  margin: 10px 0;
}
.app-user .app-img:last-child {
  border-left: 1px solid #E6E9F4;
}
.app-user .app-img img {
  width: 42px;
  height: 42px;
  border-radius: 5px;
  margin-right: 8px;
}
.app-user .app-name h6 {
  color: #7E84A3;
  margin-bottom: 1px;
}
.app-user .app-name p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 110px;
}

.app-info {
  display: flex;
  display: -ms-flexbox;
  justify-content: space-between;
  border-bottom: 1px solid #E6E9F4;
  padding: 10px 0;
}
.app-info p {
  color: #7E84A3;
  margin-bottom: 3px;
}
.app-info h6 {
  font-size: 14px;
  font-weight: 600;
}

.app-footer {
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
}

.app-mode p {
  color: #7E84A3;
}

.app-footer h6 {
  color: #F0142F;
  font-weight: 700;
  margin-bottom: 0;
}

.app-mode {
  display: flex;
  display: -ms-flexbox;
  align-items: center;
}
.app-mode p {
  margin: 0 10px 0 0;
}
.app-mode .mode-box {
  width: 39px;
  height: 39px;
  background: #FFFFFF;
  border: 1px solid #EEF1FE;
  box-sizing: border-box;
  box-shadow: 0px 4px 24px #EEF1FE;
  border-radius: 4px;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  justify-content: center;
}
.app-mode .mode-box i {
  font-size: 20px;
}

.order-details-header {
  display: flex;
  justify-content: space-between;
  padding: 30px 0;
}
.order-details-header .left span {
  display: block;
}
.order-details-header .left span:first-child {
  font-size: 1rem;
  font-weight: 600;
  color: #4a4a4a;
}
.order-details-header .left span:nth-child(2) {
  font-size: 0.9rem;
  color: #999;
}
.order-details-header .right {
  display: flex;
  align-items: center;
}
.order-details-header .right img {
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.order-details-header .right .inner-meta {
  margin-left: 12px;
}
.order-details-header .right .inner-meta span {
  display: block;
}
.order-details-header .right .inner-meta span:first-child {
  text-transform: uppercase;
  font-size: 0.7rem;
  line-height: 1;
  color: #999;
}
.order-details-header .right .inner-meta span:nth-child(2) {
  font-weight: 600;
  color: #4a4a4a;
}

.credit-card {
  background: var(--card-background);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  position: relative;
  box-shadow: 0 14px 26px -12px rgba(149, 149, 149, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(216, 216, 216, 0.2);
}
.credit-card .cc-info {
  display: none;
}
.credit-card:hover .cc-info {
  display: block;
}
.credit-card .type-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.credit-card .type-brand .h4, .credit-card .type-brand h4 {
  color: var(--card-color);
  font-size: 14px;
}
.credit-card .type-brand img {
  height: 30px;
  padding: 4px 6px;
  border-radius: 8px;
}
.credit-card .cc-number {
  padding: 20px 0;
}
.credit-card .cc-number .h6, .credit-card .cc-number h6 {
  display: inline-block;
  margin-right: 20px;
  color: var(--card-color);
  font-size: 20px;
}
.credit-card .cc-holder-exp {
  display: flex;
  justify-content: space-between;
}
.credit-card .cc-holder-exp .h5, .credit-card .cc-holder-exp h5 {
  color: var(--card-color);
  margin-bottom: 0;
}
.credit-card .cc-holder-exp .exp {
  color: var(--card-color);
}
.credit-card .cc-holder-exp .exp strong {
  color: var(--card-color);
}

.cc-info {
  padding: 15px 20px 20px;
  border-radius: 0;
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  z-index: 1;
  transition: all 0.15s ease-in-out;
  background: var(--card-background);
}
.cc-info p {
  margin-bottom: 0;
  margin-top: 5px;
  color: var(--card-color);
}
.cc-info p strong {
  color: var(--card-color);
  opacity: 1;
}

.tiny-credit-card-boxed {
  display: flex;
  width: 100%;
}
.tiny-credit-card-boxed .tiny-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 70px;
  width: 120px;
  min-width: 120px;
  background: #ededed;
  border-radius: 7px;
  padding: 6px 10px 8px 10px;
  overflow: hidden;
  box-shadow: 0 14px 26px -12px rgba(3, 155, 229, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(3, 155, 229, 0.2);
}
.tiny-credit-card-boxed .tiny-card .card-exp {
  font-weight: 400;
  font-size: 8px;
  line-height: 12px;
  text-transform: uppercase;
}
.tiny-credit-card-boxed .tiny-card .shape {
  position: absolute;
  bottom: -10px;
  right: -10px;
  height: 46px;
  width: 46px;
  background: #a1a1a1;
  border-radius: 50%;
  opacity: 0.15;
}
.tiny-credit-card-boxed .tiny-card .top .card-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tiny-credit-card-boxed .tiny-card .top .card-number span {
  font-size: 0.6rem;
  font-weight: 500;
  color: #000;
  display: block;
}
.tiny-credit-card-boxed .tiny-card .top .card-number img {
  display: block;
  width: 100%;
  max-width: 28px;
}
.tiny-credit-card-boxed .tiny-card .bottom span {
  font-size: 0.5rem;
  font-weight: 500;
  color: #000;
}
.tiny-credit-card-boxed .tiny-card-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
}
.tiny-credit-card-boxed .tiny-card-meta span {
  font-size: 13px;
  margin-bottom: 11px;
}
.tiny-credit-card-boxed .tiny-card-meta span.price {
  font-weight: 900;
}

.info-block-inner {
  padding: 10px 20px 20px;
}

.info-block-inner .title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 12px;
}

.info-block-inner .title-wrap h3 {
  font-size: 1rem;
  color: #283252;
  font-weight: 500;
}

.info-block-inner .title-wrap .action-link {
  font-size: 0.9rem;
}

.info-block-inner .info-block-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.info-block-inner .info-block-line h4 {
  font-weight: 500;
  color: #283252;
  font-size: 0.9rem;
  line-height: 2;
}

.info-block-inner .info-block-line span {
  color: #a2a5b9;
  font-size: 0.9rem;
}

.info-block-inner .info-block-line span.has-image {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 2;
}

.info-block-inner .info-block-line span.has-image img {
  max-width: 28px;
  margin-right: 6px;
}

.info-block-inner .info-block-line span i {
  position: relative;
  top: 0;
  font-size: 10px;
  margin-right: 8px;
}

.dashboard-card {
  flex: 1;
  display: inline-block;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
  transition: all 0.3s;
}

.card-list {
  background: #F8F9FD;
  border-radius: 9px;
  display: flex;
  min-height: 57px;
  align-items: center;
  padding: 0 15px;
}
.card-list .card-brand {
  width: 40px;
  height: 31px;
  background: #fff;
  padding: 5px;
  margin-right: 10px;
}
.card-list .card-brand img {
  -o-object-fit: contain;
     object-fit: contain;
}
.card-list .card-info .card-title {
  font-weight: 600;
  font-size: 10px;
  line-height: 15px;
  text-transform: uppercase;
  color: #000000;
}
.card-list .card-info .card-num {
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  text-transform: uppercase;
  color: #000000;
}
.card-list .card-info .card-exp {
  font-weight: 400;
  font-size: 8px;
  line-height: 12px;
  text-transform: uppercase;
}

.flex-services {
  display: flex;
  background: linear-gradient(183.28deg, #FDFDFE 7.27%, #FDFDFE 7.27%, #FBFBFE 33.06%, #F7F8FD 97.29%);
  border-radius: 24px;
  box-shadow: 0px 5px 20px rgba(126, 142, 177, 0.2);
  padding: 15px;
}
.flex-services .services-banner {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  margin-right: 10px;
  display: flex;
  padding: 10px;
  box-shadow: 0px -25px 60px rgba(255, 255, 255, 0.09), 1px 15px 10px rgba(0, 0, 0, 0.04), 0px 50px 30px #f0f0f4;
  background: #fff;
  border-radius: 550px;
}
.flex-services .services-banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 550px;
}
.flex-services .services-info .service-title {
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  color: #000000;
}
.flex-services .services-info .service-desc {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #000000;
}
.flex-services .service-meta {
  display: flex;
}
.flex-services .service-meta-items .service-meta-title {
  font-weight: 300;
  font-size: 8px;
  line-height: 12px;
  color: #000000;
}
.flex-services .service-meta-items .service-meta-content {
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #000000;
}
.flex-services .service-meta-items .service-meta-content svg {
  height: 12px;
  width: 12px;
}
.flex-services .service-divider {
  border-right: 0.5px solid #B1B1B1;
  margin: 0 15px;
}

.day-status {
  height: 4px;
  position: absolute;
  border-radius: 2px;
  overflow: hidden;
  bottom: 3px;
  left: 3px;
  right: 3px;
  background-color: #f5d5d5;
  margin: 9px 15px;
  display: flex;
}
.day-status .day-status-inner {
  height: 4px;
  position: relative;
  overflow: hidden;
  bottom: 0;
  left: 0;
  background-color: #8fe286;
}
.day-status .day-status-inner.is-booked {
  background-color: #e6e9ef;
}

.sel-date {
  background: transparent;
  color: #ABAAB1;
}

.sandy-date-picker .sandy-input-inner:checked + .sandy-date-picker-item {
  border: 2px solid #000;
}
.sandy-date-picker .sandy-date-picker-slide::-webkit-scrollbar, .sandy-date-picker .sandy-date-picker-slide::-webkit-scrollbar-thumb {
  width: 0;
  background: transparent;
}
.sandy-date-picker * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: -moz-scrollbars-none !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none;
}
.sandy-date-picker .sandy-date-picker-slide {
  display: flex;
  overflow-x: auto;
}
.sandy-date-picker .sandy-date-picker-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.875rem;
  max-width: 100%;
  text-align: center;
  color: rgba(23, 23, 23, 0.7);
  transition: color 0.3s, border-color 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  min-width: 2.5rem;
  min-height: 5.25rem;
  justify-content: flex-start;
  height: 101px;
  box-sizing: border-box;
  border-radius: 22px;
  flex: none;
  order: 2;
  flex-grow: 0;
  padding: 25px 23px;
  width: 80px;
  background: white;
  position: relative;
}
.sandy-date-picker .sandy-date-picker-item.is-booked {
  background: #f7e9e9;
}
.sandy-date-picker .sandy-date-picker-item .date-picker-title {
  font-size: 13px;
  margin-bottom: 5px;
  font-weight: 600;
  color: #000000;
}
.sandy-date-picker .sandy-date-picker-item .date-picker-title-sub {
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  text-align: center;
  color: #000000;
}
.sandy-date-picker .slick-track {
  gap: 1rem;
  display: flex;
}
.sandy-date-picker.is-barber {
  box-shadow: 8px 6px 0px 0px rgba(0, 0, 0, 1);
  background-color: rgb(0, 0, 0);
}
.sandy-date-picker.is-barber .sandy-date-picker-item {
  border-radius: 1;
}
.sandy-date-picker.is-barber .sandy-input-inner:checked + .sandy-date-picker-item {
  border: 0;
  background-color: rgb(0, 0, 0);
  border-radius: 5px;
}
.sandy-date-picker.is-barber .sandy-input-inner:checked + .sandy-date-picker-item .date-picker-title, .sandy-date-picker.is-barber .sandy-input-inner:checked + .sandy-date-picker-item .date-picker-title-sub {
  color: #fff;
}

.wj-list-creatores .wj-title-default {
  margin-bottom: 5px;
}
.wj-list-creatores .content-list-creatores {
  padding: 0 20px;
}
.wj-list-creatores .content-list-creatores .nav-item .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dde1ec;
  padding: 15px 0;
  color: #000;
}
.wj-list-creatores .content-list-creatores .nav-item .nav-link .item-user-img {
  display: flex;
  align-items: center;
}
.wj-list-creatores .content-list-creatores .nav-item .nav-link .item-user-img .avt-img {
  width: 45px;
  height: 45px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  margin-right: 15px;
}
.wj-list-creatores .content-list-creatores .nav-item .nav-link .item-user-img .txt-user h5 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 2px;
  color: #000;
}
.wj-list-creatores .content-list-creatores .nav-item .nav-link .item-user-img .txt-user p {
  font-size: 13px;
  color: #000;
  font-weight: 500;
  margin: 0;
}
.wj-list-creatores .content-list-creatores .nav-item:last-child .nav-link {
  border-bottom: 0;
}
.floaty-bar.is-barber .bar-actions {
  background: #fff;
  border-radius: 0px;
}

.floaty-bar.is-barber .action-list .action-list-item span {
  color: #000 !important;
  display: none !important;
}

.floaty-bar.is-barber .action-list .action-list-item .action-list-icon svg {
  stroke: #000;
  stroke-width: 4;
}

.floaty-bar.is-barber .action-list .action-list-item.active .action-list-icon {
  display: flex; /* Keep icons visible instead of hiding them */
  animation: brutal-scale 0.6s ease-in-out infinite; /* Added infinite */
}

.floaty-bar.is-barber .action-list .action-list-item.active .action-list-icon svg {
  stroke: #000; /* Darker stroke for active state */
}

.floaty-bar.is-barber .action-list .action-list-item.active span {
  display: none !important; /* Hide text completely */
}

/* Remove the ::before pseudo-element since we don't need it */
.floaty-bar.is-barber .action-list .action-list-item.active span::before {
  display: none;
}

/* Add bounce animation for avatar too */
.floaty-bar.is-barber .action-list .action-list-item.active .h-avatar {
  animation: subtle-bounce 0.6s ease-in-out infinite; /* Added infinite */
}

@keyframes brutal-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.list-item {
  border-top: 1px solid #dedede;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list .list-item:last-child {
  border-bottom: 1px solid #dedede;
}

.list-item-company {
  display: flex;
  align-items: center;
}

.list-item-company-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.list-item-company-logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list-item-company-logo--square {
  border-radius: 12px;
  box-shadow: 0 0 4px 0 #dedede;
}

.list-item-company-info {
  margin-left: 1.25rem;
}

.list-item-company-name {
  font-weight: 600;
}

.list-item-company-hashtag {
  display: inline-block;
  text-decoration: none;
  color: #6d7680;
  margin-top: 0.125rem;
}
.list-item-company-hashtag + .list-item-company-hashtag {
  margin-left: 0.25rem;
}

.list-item-transaction {
  display: flex;
  align-items: center;
}

.list-item-transaction-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.list-item-transaction-value {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.list-item-transaction-value i {
  margin-right: 0.5rem;
}
.list-item-transaction-value--positive {
  color: #63C4B1;
}

.list-item-transaction-time {
  color: #6d7680;
  font-size: 0.875rem;
}

.list-item-transaction-action {
  border: none;
  background-color: #f0f4f5;
  border-radius: 8px;
  margin-left: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  color: #6d7680;
}

.sandy-timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}
.sandy-timeline .timeline__nav {
  position: fixed;
  z-index: 99;
  top: 0;
  transition: top 0.3s ease-out;
}
.sandy-timeline .timeline__nav ul {
  list-style: none;
  list-style-position: inside;
  margin: 15px 0;
}
.sandy-timeline .timeline__nav ul li {
  margin: 15px 0;
  padding-left: 0;
  list-style-type: none;
  color: #bfc1c3;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.sandy-timeline .timeline__nav ul li.active {
  font-weight: bold;
  color: #f94125;
  border-bottom: 1px dotted transparent;
  transform: scale(1.2);
}
.sandy-timeline .timeline__nav ul li:hover {
  color: #000;
}
.sandy-timeline .sandy-timeline-wrapper {
  margin: 0 auto;
  padding: 0 0 50px;
  padding-left: 20%;
  width: 100%;
}

.aw-back-title {
  height: 183px;
}
.aw-back-title .back-button {
  width: 40px;
  height: 40px;
  background: #F1F1F1;
  border-radius: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aw-back-title .back-button svg {
  width: 24px;
  height: 24px;
}

.aw-content {
  background: #f5f5f5;
}

.salon-body .form-input label {
  text-transform: uppercase;
  color: #0F0F0F;
  position: relative;
  top: initial;
  left: initial;
  margin-bottom: 5px;
  display: block;
  padding: 0;
  font-size: 14px;
}
.salon-body .form-input input {
  background: #F8F8F8;
  border-radius: 15px;
  color: #000;
  height: 50px;
  border-radius: 10px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #dee2ed;
  font-weight: 500;
  font-size: 12px;
  color: #201e2f;
}
.salon-body .form-input select {
  height: 50px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath d='M10.281.305L5.988 4.598 1.695.305A1 1 0 0 0 .293.317a1 1 0 0 0-.012 1.402l5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-.441-1.687 1 1 0 0 0-.973.273z' fill='%2311142d'/%3E%3C/svg%3E") no-repeat right 1rem center/8px 10px;
  border: 1px solid #dee2ed;
  font-size: 12px;
  padding: 10px;
  line-height: 10px;
}
.salon-body .inner-pages-header .inner-pages-header-container {
  top: 25px;
  background: transparent;
  padding: 0 30px;
}
.salon-body .inner-pages-header .back-button {
  width: 40px;
  height: 40px;
  background: #F1F1F1;
  border-radius: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-account {
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px 0;
  bottom: 34px;
}
.footer-account .display-actions {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 34px;
}
.footer-account .acc-sup {
  margin-top: 28px;
}
.footer-account .acc-sup p {
  font-size: 12px;
  color: #59566c;
  margin-bottom: 0;
}
.footer-account .acc-sup p a {
  color: #395aff;
  text-decoration: none;
}

.connect-with-apps {
  display: flex;
  align-items: center;
  -moz-column-gap: 14px;
       column-gap: 14px;
  row-gap: 10px;
  margin-top: 24px;
}
.connect-with-apps a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
}
.connect-with-apps a.apple {
  background-color: #222032;
}
.connect-with-apps a.google {
  border: 1px solid #dde1ce;
  color: #000;
}
.connect-with-apps a.google img {
  width: 24px;
  height: 24px;
}
.connect-with-apps a.facebook {
  background-color: #395aff;
}

.dividar {
  border-bottom: 1px solid #dde1ce;
}

.ico {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.env-pb {
  padding-bottom: env(safe-area-inset-bottom);
}

.wj-services-list .wj-service {
  background-color: #fff;
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
  border-radius: 3px;
  margin-bottom: 30px;
  margin-right: 30px;
  width: 220px;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}
.wj-services-list .wj-service .wj-form-w {
  padding: 0px;
  margin: 0px;
  background-color: transparent;
}
.wj-services-list .wj-service.wj-service-status-disabled {
  opacity: 0.7;
}
.wj-services-list .wj-service.wj-service-status-disabled .wj-service-header {
  box-shadow: inset 0px 3px 0px 0px #ca1616;
}
.wj-services-list .wj-service.wj-service-status-disabled .wj-service-header .service-name {
  color: #ca1616;
}
.wj-services-list .wj-service-header {
  padding: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
}
.wj-services-list .wj-service-header .service-hidden {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #e83c3c;
  font-size: 15px;
}
.wj-services-list .wj-service-header .service-image {
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}
.wj-services-list .wj-service-header .service-image img {
  height: 40px;
  width: auto;
  display: block;
}
.wj-services-list .wj-service-header .service-name {
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
  color: #0937ff;
}
.wj-services-list .wj-service-body .selected-count {
  background-color: #fff6c7;
  border: 1px solid #e0be0d;
  color: #c18018;
  border-radius: 4px;
  font-size: 12px;
  padding: 3px 5px;
  line-height: 1.1;
}
.wj-services-list .wj-service-body .selected-count.selected-count-all {
  background-color: #ceffce;
  border-color: #15c340;
  color: #0e8e25;
}
.wj-services-list .wj-service-body .service-info-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.wj-services-list .wj-service-body .wj-service-agents,
.wj-services-list .wj-service-body .wj-service-info {
  padding: 15px;
}
.wj-services-list .wj-service-body .wj-service-agents .label,
.wj-services-list .wj-service-body .wj-service-info .label {
  flex: 0 0 50%;
  color: #000000;
  font-weight: 500;
  text-align: right;
  padding-right: 10px;
}
.wj-services-list .wj-service-body .wj-service-agents .value,
.wj-services-list .wj-service-body .wj-service-info .value {
  flex: 1;
  color: #000000;
}
.wj-services-list .wj-service-body .wj-service-agents .value strong,
.wj-services-list .wj-service-body .wj-service-info .value strong {
  color: #000000;
}
.wj-services-list .wj-service-foot {
  padding: 10px;
  padding-top: 0px;
}
.wj-services-list .assign-agent-btn {
  display: inline-block;
  vertical-align: middle;
}
.wj-services-list .service-agents-avatars {
  vertical-align: middle;
  padding: 10px 0px;
  display: inline-block;
}
.wj-services-list .service-agents-avatars img {
  width: 35px;
  height: auto;
  border-radius: 40px;
  display: inline-block;
}
.wj-services-list .service-agents-avatars img + img {
  margin-left: 10px;
}
.wj-services-list .service-agents-avatars img:last-child {
  margin-right: 30px;
}
.wj-services-list .create-service-link-w {
  border: 2px dotted rgba(0, 0, 0);
  border-radius: 0px;
  margin-bottom: 30px;
  margin-right: 30px;
  width: 220px;
  text-align: center;
  position: relative;
  cursor: pointer;
  display: block;
  outline: none;
  box-shadow: none;
  min-height: 200px;
}
.wj-services-list .create-service-link-w .create-service-link-i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wj-services-list .create-service-link-w .add-service-graphic-w {
  width: 90px;
  height: 90px;
  position: relative;
  margin: 0px auto;
}
.wj-services-list .create-service-link-w .add-service-graphic-w .add-service-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background-color: #000000;
  box-shadow: 0px 0px 0px 10px rgba(208, 213, 220, 0.3);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.wj-services-list .create-service-link-w .add-service-graphic-w .add-service-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 12px;
  transform: translate(-45%, -47%);
  transition: all 0.2s ease;
}
.wj-services-list .create-service-link-w .add-service-label {
  color: #000000;
  font-weight: 500;
  font-size: 19.2px;
  margin-top: 20px;
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.wj-services-list .create-service-link-w:hover {
  border-color: #0937ff;
  border-style: solid;
}
.wj-services-list .create-service-link-w:hover .add-service-plus {
  box-shadow: 0px 0px 0px 20px rgba(208, 213, 220, 0.3);
  transform: translate(-50%, -50%) scale(1.3);
}
.wj-services-list .create-service-link-w:hover .add-service-label {
  transform: translateY(5px);
}

.wj-service-agents {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}
.wj-service-agents .agents-avatars {
  flex: 1;
  position: relative;
  display: flex;
}
.wj-service-agents .agents-avatars .agent-avatar {
  width: 30px;
  height: 30px;
  display: block;
  background-size: cover;
  border-radius: 30px;
  box-shadow: 0px 0px 0px 3px #fff;
}
.wj-service-agents .agents-avatars .agent-avatar + .agent-avatar {
  margin-left: -10px;
}
.wj-service-agents .agents-avatars .agents-more {
  position: absolute;
  background-color: #fff;
  padding: 3px 5px;
  font-size: 12.8px;
  font-weight: 500;
  top: 50%;
  left: 40px;
  border-radius: 3px;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateY(-50%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.wj-form-sub-header {
  border: none;
  text-align: center;
  position: relative;
  padding: 0px;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center; /* Add this to center inside */
}

.wj-form-sub-header h3 {
  background-color: white; /* Change background */
  color: black;            /* Change text to white */
  font-size: 19px;
  position: relative;
  padding: 5px 10px;
  z-index: 2;
}
.wj-form-sub-header::after {
  display: none; /* Remove the grey border thing */
}

.md-full-event {
  width: 100%;
  padding: 10px 0;
}

.md-full-event-img {
  width: 100px;
  border-radius: 6px;
  float: left;
}

.md-full-event-details {
  margin-left: 114px;
}

.md-full-event-title {
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 10px;
}

.md-full-event-location {
  display: inline-block;
  line-height: 1.4;
  margin-right: 40px;
}

.md-full-event-time {
  display: inline-block;
  line-height: 1.4;
}

.md-full-event-label {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
}

/*<hidden>*/
.demo-full-event-customization,
mbsc-page.mbsc-page {
  height: 100%;
}

/*</hidden>*/
.md-custom-event-img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.md-custom-event-cont {
  display: flex;
  align-items: center;
  padding-top: 10px;
  font-size: 13px;
}

.md-custom-event-btn,
.md-custom-event-btn.mbsc-button {
  position: absolute;
  right: 10px;
  bottom: 8px;
  line-height: 20px;
}

.md-custom-event .mbsc-material.mbsc-event-time {
  margin-top: 5px;
}

/*<hidden>*/
.demo-event-content-customization {
  height: 100%;
}

/*</hidden>*/
.saved-cards-list {
  min-height: 96px;
  border-radius: 12px;
  display: flex;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
  padding: 20px;
}
.saved-cards-list.active {
  border: 2px solid #CA987E;
}
.saved-cards-list .card-brand {
  width: 48px;
  height: 48px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saved-cards-list .card-brand img {
  width: 100%;
  width: 100%;
  object: contain;
}
.saved-cards-list .card-info {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #A77366;
}
.saved-cards-list .card-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: #3A2228;
}

.c-agender-calender .mbsc-ios.mbsc-schedule-date-header, .c-agender-calender .mbsc-ios.mbsc-calendar-header, .c-agender-calender .mbsc-ios.mbsc-calendar-wrapper, .c-agender-calender .mbsc-ios.mbsc-eventcalendar .mbsc-calendar-header, .c-agender-calender .mbsc-ios.mbsc-eventcalendar .mbsc-calendar-week-days {
  border: 0 !important;
  background: #fff !important;
}
.c-agender-calender .mbsc-ios.mbsc-schedule-date-header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-agender-calender .mbsc-schedule-date-header.mbsc-flex.mbsc-ios::before {
  content: "";
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  transform: translateY(50%);
  bottom: 50%;
}
.c-agender-calender .mbsc-schedule-date-header-text {
  z-index: 999;
  display: block;
  padding: 0.5em 5em !important;
  flex: initial !important;
  background: #fff;
}
.c-agender-calender .mbsc-ios.mbsc-selected .mbsc-calendar-cell-text {
  background: #000 !important;
  border: 0 !important;
}
.c-agender-calender .mbsc-ios.mbsc-calendar-day-text {
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  border-radius: 9px !important;
}

.floaty-book {
  --floaty-book-color: #000;
  --floaty-book-background: #F1F1F1;
  background: var(--floaty-book-background);
  height: 95px;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  border-radius: 25px 25px 0 0;
  display: flex;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
}
.floaty-book .floaty-book-price {
  font-weight: 400;
  font-size: 24px;
  line-height: 26px;
  display: flex;
  align-items: center;
  color: var(--floaty-book-color);
}
.floaty-book .floaty-book-desc {
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.408px;
  color: #BFBFBF;
}

.hide-scrollbar * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: -moz-scrollbars-none !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar, .hide-scrollbar::-webkit-scrollbar-thumb {
  width: 0;
  background: transparent;
}

.barbers-book-wrapper::-webkit-scrollbar, .barbers-book-wrapper::-webkit-scrollbar-thumb {
  width: 0;
  background: transparent;
}

.barbers-book-wrapper * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: -moz-scrollbars-none !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none;
}
.barbers-book-wrapper .sandy-input-inner:checked + .barbers-group-item {
  border: 2px solid #000;
}
.barbers-book-wrapper .barbers-group-item {
  height: 100%;
  padding: 17px;
  background: #F8F8F8;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px solid transparent;
}
.barbers-book-wrapper .barbers-group-item .barbers-thumb {
  height: 64px;
  width: 64px;
}
.barbers-book-wrapper .barbers-group-item .barbers-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
}
.barbers-book-wrapper .barbers-group-item .barber-name {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: #191632;
  margin-top: 9px;
}
.barbers-book-wrapper .barbers-group-item .barber-title {
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: #ABAAB1;
}

/* Neo-Brutalist Black Progress Bar */
.sandy-ball-loader {
  display: block;
  width: 300px; /* Adjust width */
  height: 20px;
  border: 4px solid #000; /* Black border for brutalist look */
  background: #fff; /* Solid white background for the box only */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 1), 6px 6px 0px 2px rgba(255, 255, 255, 0.3); /* Brutalist shadow */
  overflow: hidden;
}

/* Black Progress Bar Fill Animation */
.sandy-ball-loader::after {
  content: "";
  display: block;
  height: 100%;
  width: 0%;
  background: #000; /* Fully black progress bar */
  animation: loadingBar 3s ease-in-out infinite;
}

/* Bold Loading Text */
.sandy-ball-loader::before {
  content: "";
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #000; /* Black text */
  text-transform: uppercase;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff; /* White background for text */
  padding: 6px 12px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 1), 4px 4px 0px 2px rgba(255, 255, 255, 0.3); /* Brutalist shadow */
}

/* Progress Bar Animation */
@keyframes loadingBar {
  0% { width: 0%; }
  25% { width: 30%; }
  50% { width: 60%; }
  75% { width: 85%; }
  100% { width: 100%; }
}

/* Full-Screen Loader */
.full-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0); /* Fully transparent so the page remains visible */
  z-index: 1000;
}


.book-services .book-service-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 19px 18px;
  background: #F8F8F8;
  border-radius: 15px;
}
.book-services .book-service-group .book-service-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  text-align: justify;
  color:var(--c-button-text-color) !important;
}
.book-services .book-service-group .book-service-price {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  text-align: justify;
  color: #432BDF;
}

.checkout-barber {
  display: flex;
}
.checkout-barber .checkout-barber-thumb {
  width: 50px;
  height: 50px;
}
.checkout-barber .checkout-barber-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}
.checkout-barber .checkout-barber-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  text-align: justify;
  color: var(--c-button-text-color) !important;
  margin-bottom: 3px;
}
.checkout-barber .checkout-barber-location {
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  text-align: justify;
  color: var(--c-button-text-color) !important;
}
.checkout-barber .jq-ry-group-wrapper svg {
  width: 12px;
  height: 12px;
}

.salon-banner-v4 {
  height: 337px;
  position: relative;
  border-radius: 40px;
}
.salon-banner-v4 .background-i {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #C4C4C4;
  opacity: 0.3;
  z-index: 2;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}

.block-grid-card {
  display: flex;
  flex-wrap: wrap;
}

.block-card-v1 {
  height: 110px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 5px;
  box-shadow: 0px 15px 20px -10px rgba(0, 0, 0, 0.3);
}
.block-card-v1 .block-card-v1-title {
  margin: 0;
  position: absolute;
  bottom: 6px;
  left: 12px;
  font-size: 23px;
  color: #fff;
}
.block-card-v1 .block-card-v1-icon {
  position: absolute;
  right: 2px;
  width: 60px;
  height: 65px;
  top: 10px;
}
.block-card-v1 .block-card-v1-icon img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.app-lists .app-lists-item {
  display: flex;
  align-items: center;
}
.app-lists .app-lists-item:not(:last-child) {
  margin-bottom: 24px;
}
.app-lists .app-lists-item img {
  display: block;
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #e3e3e3;
}
.app-lists .app-lists-item .meta > span {
  display: block;
}
.app-lists .app-lists-item .meta > span:nth-child(3) {
  font-size: 0.85rem;
  color: #a2a5b9;
}
.app-lists .app-lists-item .meta > span:first-child {
  font-weight: 600;
  color: #283252;
  font-size: 0.9rem;
}

.appointment-boxes-squared-w {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.appointment-boxes-squared-w.is-overflow {
  overflow-x: auto;
}
.appointment-boxes-squared-w.is-overflow .appointment-box-squared, .appointment-boxes-squared-w.is-overflow .no-results-w {
  flex: 0 0 285px;
  width: 285px;
  margin-right: 12px;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.25), inset 0px -1px 1px rgba(0, 0, 0, 0.04), inset 0px 2px 0px rgba(255, 255, 255, 0.25);
}
.appointment-boxes-squared-w .appointment-boxes-caption {
  flex: 0 0 26px;
  width: 26px;
  border: 1px solid #0937ff;
  color: #0937ff;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 4px 4px 0px 0px rgba(9, 55, 255, 0.1);
  position: relative;
}
.appointment-boxes-squared-w .appointment-boxes-caption div {
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1;
  font-weight: 500;
}

.appointment-box-squared {
  flex-basis: 250px;
  background-color: #fff;
  border: 1px solid #e0e1e8;
  border-radius: 3px;
  border-top-left-radius: 0px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.appointment-box-squared:hover {
  border-color: #d3d4e0;
  border-bottom-color: #c4c5d5;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  transform: translate3d(0px, -4px, 0px);
}
.appointment-box-squared.snd-loading:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: snd-loading 700ms infinite linear;
          animation: snd-loading 700ms infinite linear;
  background-color: transparent !important;
  right: 5px;
  left: auto;
  top: 14px;
  transform: none;
}
.appointment-box-squared .appointment-main-info {
  padding: 20px;
  position: relative;
  background-color: #fff;
  border-radius: 0px 3px 0px 0px;
}
.appointment-box-squared .appointment-main-info .appointment-color-elem {
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 2px;
  transition: all 0.1s ease-in;
}
.appointment-box-squared .appointment-sub-info {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0px 0px 3px 3px;
}
.appointment-box-squared .appointment-sub-info .appointment-person-info {
  padding: 15px 20px;
  text-align: left;
  display: flex;
  align-items: center;
}
.appointment-box-squared .appointment-sub-info .appointment-person-info .avatar-w {
  background-size: cover;
  background-position: center center;
  width: 35px;
  height: 35px;
  display: block;
  border-radius: 50%;
  margin-right: 15px;
}
.appointment-box-squared .appointment-sub-info .agent-label {
  color: #8894AF;
  margin-bottom: 1px;
}
.appointment-box-squared .appointment-sub-info .agent-name {
  font-size: 17px;
  font-weight: 500;
  color: #2D303A;
}
.appointment-box-squared .appointment-service-name {
  font-size: 19px;
  color: #2D303A;
  font-weight: 500;
  margin-right: auto;
  margin-bottom: 10px;
}
.appointment-box-squared .appointment-time-left {
  border: 1px solid #0937ff;
  color: #0937ff;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 17px;
  padding: 5px 5px;
  line-height: 1.2;
  border-radius: 4px;
  margin-right: 10px;
}
.appointment-box-squared .appointment-date-w {
  display: flex;
  align-items: center;
}
.appointment-box-squared .appointment-date-w .appointment-date {
  color: #8894AF;
  font-size: 14px;
  margin-bottom: 1px;
}
.appointment-box-squared .appointment-date-w .appointment-time {
  color: #0937ff;
  font-weight: 500;
  font-size: 16px;
}
.appointment-box-squared .appointment-date-w .avatar-w {
  margin-left: auto;
  background-size: cover;
  background-position: center center;
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
  position: relative;
}
.appointment-box-squared .appointment-date-w .avatar-w .agent-info-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  background-color: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 15px;
  z-index: 9999;
  transform: translate(-50%, -5px);
  white-space: nowrap;
}
.appointment-box-squared .appointment-date-w .avatar-w:hover .agent-info-tooltip {
  display: block;
}
.appointment-box-squared .appointment-capacity-info {
  padding: 20px;
  padding-top: 15px;
}
.appointment-box-squared .appointment-capacity-info .appointment-capacity-info-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.appointment-box-squared .appointment-capacity-info .appointment-capacity-info-label span, .appointment-box-squared .appointment-capacity-info .appointment-capacity-info-label strong {
  display: block;
}
.appointment-box-squared .appointment-capacity-info .appointment-capacity-info-label span {
  color: #8894AF;
}
.appointment-box-squared .appointment-capacity-info .appointment-capacity-info-label strong {
  color: #2D303A;
}
.appointment-box-squared .appointment-capacity-progress-w {
  background-color: rgba(9, 55, 255, 0.1);
}
.appointment-box-squared .appointment-capacity-progress-w .appointment-capacity-progress {
  height: 10px;
  background-color: #0937ff;
}

.no-results-w {
  padding: 20px;
  border: 4px dotted #eee;
  border-radius: 4px;
  text-align: center;
  padding: 30px;
  text-align: center;
}
.no-results-w h2 {
  color: black;
  margin-top: 0px;
  font-size: 1.3em;
}
.no-results-w .icon-w {
  margin-bottom: 15px;
}
.no-results-w .count-number {
  font-size: 42px;
  margin-bottom: 10px;
  color: #8894AF;
}

.cal-header-nav {
  width: 200px;
}

.cal-header-picker {
  flex: 1 0 auto;
}

.mbsc-segmented-item {
  margin: 0;
  position: relative;
  vertical-align: top;
  text-align: center;
  font-size: 1em;
  flex: 1 1 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width: 0;
}

.wj-locations-list {
  display: flex;
  flex-wrap: wrap;
}
.wj-locations-list .wj-location {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(95, 129, 196, 0.25), 0 10px 15px 0 rgba(119, 145, 207, 0.16);
  border-radius: 3px;
  margin-bottom: 30px;
  margin-right: 30px;
  width: 320px;
}
.wj-locations-list .wj-location .snd-form-w {
  padding: 0px;
  margin: 0px;
  background-color: transparent;
}
.wj-locations-list .wj-location.wj-location-status-disabled {
  opacity: 0.7;
}
.wj-locations-list .wj-location.wj-location-status-disabled .wj-location-header {
  box-shadow: inset 0px 3px 0px 0px #ca1616;
}
.wj-locations-list .wj-location.wj-location-status-disabled .wj-location-header .location-name {
  color: #ca1616;
}
.wj-locations-list .wj-location-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 17px;
  position: relative;
}
.wj-locations-list .wj-location-header .edit-location-btn {
  position: absolute;
  top: 10px;
  text-decoration: none;
  font-size: 14px;
  right: 10px;
  display: block;
}
.wj-locations-list .wj-location-header .wj-location-info {
  font-size: 16px;
  color: #8894AF;
  margin-top: 5px;
}
.wj-locations-list .wj-location-header .location-image {
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}
.wj-locations-list .wj-location-header .location-image img {
  height: 40px;
  width: auto;
  display: block;
}
.wj-locations-list .wj-location-header .location-name {
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
  font-size: 26px;
}
.wj-locations-list .wj-location-body .no-agents-for-location {
  display: inline-block;
  padding: 3px 5px;
  background-color: #ffd7d7;
  border: 1px solid #e64f4f;
  color: #e64f4f;
  border-radius: 3px;
  text-decoration: none;
}
.wj-locations-list .wj-location-body .wj-location-address {
  background-color: #eee;
  min-height: 240px;
}
.wj-locations-list .wj-location-body .wj-location-agents {
  padding: 15px 20px;
}
.wj-locations-list .wj-location-body .wj-location-agents .agents-avatars {
  position: relative;
  overflow-x: auto;
  display: flex;
}
.wj-locations-list .wj-location-body .wj-location-agents .agents-avatars .agent-avatar {
  min-width: 35px;
  width: 35px;
  height: 35px;
  display: block;
  background-size: cover;
  border-radius: 30px;
  box-shadow: 0px 0px 0px 3px #fff;
}
.wj-locations-list .wj-location-body .wj-location-agents .agents-avatars .agent-avatar + .agent-avatar {
  margin-left: -5px;
}
.wj-locations-list .wj-location-body .wj-location-agents .agents-avatars .agents-more {
  position: absolute;
  background-color: #fff;
  padding: 3px 5px;
  font-size: 12.8px;
  font-weight: 500;
  top: 50%;
  left: 40px;
  border-radius: 3px;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateY(-50%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.wj-locations-list .wj-location-body .location-info-row {
  display: flex;
  align-items: center;
}
.wj-locations-list .wj-location-body .wj-location-agents .label {
  font-weight: 500;
  text-align: left;
  padding-right: 10px;
  margin-bottom: 10px;
}
.wj-locations-list .wj-location-body .wj-location-agents .value {
  flex: 1;
  color: #929cb3;
}
.wj-locations-list .wj-location-body .wj-location-agents .value strong {
  color: #38406d;
}
.wj-locations-list .wj-location-body .wj-location-address {
  border-radius: 3px 3px 0px 0px;
  overflow: hidden;
}
.wj-locations-list .wj-location-body .wj-location-address .div-map {
  height: 240px;
}
.wj-locations-list .wj-location-body .wj-location-address iframe {
  border-radius: 3px;
  display: block;
  margin: 0px;
}
.wj-locations-list .assign-connection-btn {
  display: inline-block;
  vertical-align: middle;
}
.wj-locations-list .location-agents-avatars {
  vertical-align: middle;
  padding: 10px 0px;
  display: inline-block;
}
.wj-locations-list .location-agents-avatars img {
  width: 35px;
  height: auto;
  border-radius: 40px;
  display: inline-block;
}
.wj-locations-list .location-agents-avatars img + img {
  margin-left: 10px;
}
.wj-locations-list .location-agents-avatars img:last-child {
  margin-right: 30px;
}

.create-location-link-w {
  border: 4px dotted rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-bottom: 30px;
  width: 320px;
  text-align: center;
  position: relative;
  cursor: pointer;
  display: block;
  outline: none;
  box-shadow: none;
  min-height: 200px;
}
.create-location-link-w .create-location-link-i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.create-location-link-w .add-location-graphic-w {
  width: 90px;
  height: 90px;
  position: relative;
  margin: 0px auto;
}
.create-location-link-w .add-location-graphic-w .add-location-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  background-color: #6574cd;
  box-shadow: 0px 0px 0px 10px rgba(208, 213, 220, 0.3);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.create-location-link-w .add-location-graphic-w .add-location-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 12px;
  transform: translate(-45%, -47%);
  transition: all 0.2s ease;
}
.create-location-link-w .add-location-label {
  color: #6574cd;
  font-weight: 500;
  font-size: 26px;
  margin-top: 20px;
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.create-location-link-w:hover {
  border-color: #6574cd;
  border-style: solid;
}
.create-location-link-w:hover .add-location-plus {
  box-shadow: 0px 0px 0px 20px rgba(208, 213, 220, 0.3);
  transform: translate(-50%, -50%) scale(1.3);
}
.create-location-link-w:hover .add-location-label {
  transform: translateY(5px);
}

.bio-bar-container {
  position: fixed;
  bottom: 5rem;
  z-index: 200;
  left: 50%;
  transform: translate(-50%, 0);
  background: #040404cc;
  box-shadow: 0 6px 16px #0003;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 0.5rem;
  overflow: hidden;
}
.bio-bar-container .bio-bar-actions {
  display: flex;
  align-items: center;
}
.bio-bar-container a {
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  border: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bio-bar-container a svg, .bio-bar-container a img {
  color: #fff;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.25rem;
}

.salon-banner-v5 .cover-image {
  position: relative;
}
.salon-banner-v5 .cover-image img {
  width: 100%;
  height: 155px;
  -o-object-fit: cover;
     object-fit: cover;
}
.salon-banner-v5 .text-user-creator .user-img {
  position: relative;
  margin-left: 20px;
  margin-top: -76px;
}
.salon-banner-v5 .text-user-creator .user-img img {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
}

.user-barbers-group {
  position: absolute;
  right: 0;
  bottom: 0;
}
.user-barbers-group .item-barbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.user-barbers-group .item-barbers .users-text .img-user img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid #fff;
  display: inline-block;
  margin-left: -18px;
}

.block-header {
  display: flex;
  padding: 10px;
  border-radius: 16px;
  padding: 50px;
  background: #671cc9;
  box-shadow: 0 14px 26px -12px rgba(103, 28, 201, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(103, 28, 201, 0.2);
}

.block-header .left,
.block-header .right {
  width: 30%;
}

.block-header .middle-center {
  display: flex;
  flex-direction: column;
  width: 40%;
  padding-right: 30px;
  margin-right: 30px;
  border-right: 1px solid #8035e3;
}

.block-header .middle-center .block-text {
  margin-bottom: 16px;
}

.block-header .middle-center .candidates {
  margin-top: auto;
}

.block-header .middle-center .candidates > .h-avatar {
  margin-right: 10px;
  height: 40px;
  width: 40px;
}

.block-header .middle-center .candidates button {
  height: 40px;
  width: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #fff;
  color: #a2a5b9;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
}

.block-header .center .candidates button svg {
  height: 18px;
  width: 18px;
}

.block-header .left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-header .left .current-user .h-avatar {
  margin-bottom: 1rem;
}

.block-header .left .current-user h3 {
  font-weight: 700;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1.2;
}

.block-header .right {
  display: flex;
  flex-direction: column;
}

.block-header .right .button {
  margin-top: auto;
}

.block-header .block-heading {
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 4px;
}

.block-header .block-text {
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 16px;
}

.block-header .header-meta {
  margin-left: 0px;
  padding-right: 30px;
}

.block-header .header-meta h3 {
  color: #fcfcfc;
  font-weight: 700;
  font-size: 1.3rem;
  max-width: 280px;
}

.block-header .header-meta p {
  font-weight: 400;
  color: #f7f7f7;
  margin-bottom: 16px;
  max-width: 320px;
}

.block-header .header-meta .action-link span {
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-right: 6px;
}

.block-header .header-meta .action-link i {
  font-size: 12px;
}

.subtitle-border {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E6E8EC;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  color: #B1B5C3;
}

.shop-icon-count {
  position: relative;
}
.shop-icon-count svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  stroke-width: 5;
}
.shop-icon-count span {
  position: absolute;
  right: -6px;
  top: 9px;
  background: #f4f2f2;
  height: 15px;
  width: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  border-radius: 550px;
  font-size: 10px;
}

.board-button-v2 {
  position: relative;
  opacity: 1;
  border-radius: 50px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out;
  background: #f1f1f1;
  color: #37352f;
}

.board-list-card {
  border: 1px solid #e5e5ee;
  padding: 20px;
  border-radius: 10px;
  min-height: 5em;
  width: 10em;
}
.board-list-card .board-list-card-footer {
  display: flex;
  border-top: 1px solid #e5e5ee;
  padding: 10px;
  padding-bottom: 0;
  margin-top: 10px;
}
.board-list-card .board-list-card-footer div.svg-icon {
  width: 50%;
  height: 17px;
}
.board-list-card .board-list-card-footer div.svg-icon:first-child {
  border-right: 1px solid #e5e5ee;
}
.board-list-card .board-list-card-footer div.svg-icon svg {
  width: 100%;
  height: 100%;
}

.board-logo-v2 {
  display: flex;
  align-items: center;
}
.board-logo-v2 .board-logo-avatar {
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-repeat: no-repeat;
  font-weight: 700;
  font-size: 1.125rem;
  height: 2rem;
  width: 2rem;
  display: flex;
  border-radius: 0.3125rem;
}
.board-logo-v2 .board-logo-avatar:not(.is-text) * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.board-logo-v2 .board-logo-avatar.is-text::before {
  background-color: currentColor;
  opacity: 0.08;
}
.board-logo-v2 .board-logo-avatar.is-text::after {
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: 0.15;
}
.board-logo-v2 .board-logo-avatar.is-text::before, .board-logo-v2 .board-logo-avatar.is-text::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
}
.board-logo-v2 .board-name {
  margin-left: 0.75rem;
  max-width: 10rem;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-input.is-hour input {
  width: 100%;
  display: flex;
  min-height: 68px;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #EFEFEF;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.ui-timepicker-standard {
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  border: 0 !important;
  border-radius: 16px;
}
.ui-timepicker-standard .ui-state-hover {
  border: 0 !important;
  background: #f1f1f1 !important;
  padding: 10px !important;
}
.ui-timepicker-standard a {
  transition: 0.2s;
  border: 0 !important;
}

.ui-widget.ui-widget-content {
  border: 0 !important;
}

.unList-creatores .un-title-default {
  margin-bottom: 5px;
}
.unList-creatores .content-list-creatores {
  padding: 0 20px;
}
.unList-creatores .content-list-creatores .nav-item .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray-200);
  padding: 15px 0;
}
.unList-creatores .content-list-creatores .nav-item .nav-link .item-user-img {
  display: flex;
  align-items: center;
}
.unList-creatores .content-list-creatores .nav-item .nav-link .item-user-img .avt-img {
  width: 45px;
  height: 45px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  margin-right: 15px;
}
.unList-creatores .content-list-creatores .nav-item .nav-link .item-user-img .txt-user h5 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--dark);
}
.unList-creatores .content-list-creatores .nav-item .nav-link .item-user-img .txt-user p {
  font-size: 13px;
  color: var(--secondary);
  font-weight: 500;
  margin: 0;
}
.unList-creatores .content-list-creatores .nav-item:last-child .nav-link {
  border-bottom: 0;
}

.collection-creatores .content-list-creatores {
  padding: 0 !important;
}
.collection-creatores .content-list-creatores .nav-item:first-of-type .nav-link {
  padding-top: 0 !important;
}
.collection-creatores .content-list-creatores .nav-item .nav-link {
  padding: 20px;
  display: block !important;
  text-decoration: none !important;
}
.collection-creatores .content-list-creatores .nav-item .nav-link .collection-img {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 5px;
       column-gap: 5px;
  align-items: center;
  margin-bottom: 18px;
}
.collection-creatores .content-list-creatores .nav-item .nav-link .collection-img picture {
  width: 100%;
  max-width: 20%;
}
.collection-creatores .content-list-creatores .nav-item .nav-link .collection-img .img-cot {
  width: 80px;
  flex: 0 0 80px;
  height: 70px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.collection-creatores .content-list-creatores .nav-item .nav-link .item-user-img {
  text-decoration: none !important;
}
.collection-creatores .content-list-creatores .nav-item .nav-link .item-user-img .wrapper-image {
  position: relative;
}
.collection-creatores .content-list-creatores .nav-item .nav-link .item-user-img .wrapper-image .icon {
  position: absolute;
  bottom: -10px;
  right: 9px;
  font-size: 17px;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
  padding: 0.5em 0 0.5em 3em;
}

.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
  height: 24px;
  width: 24px;
  top: 0.1em;
}

.nav-is-white .main-index-wrapper {
  box-shadow: none;
}
@media (max-width: 768px) {
  .main-index-wrapper {
    box-shadow: none;
  }
}
.main-index-wrapper .pt_banner_inner {
  padding-top: 10rem;
}
.main-index-wrapper .pt_banner_inner .content_social {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.main-index-wrapper .pt_banner_inner .content_social p {
  font-size: 14px;
  color: #9da6af;
  margin-top: auto;
  margin-bottom: 1rem;
}
.main-index-wrapper .pt_banner_inner .photo_image {
  margin-top: -50px;
}
.main-index-wrapper .pt_banner_inner .photo_image img {
  width: 100%;
  height: 500px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 768px) {
  .main-index-wrapper .pt_banner_inner .photo_image img {
    height: 11rem;
    width: initial;
  }
}

.banner_title h1 {
  font-size: 70px;
  font-weight: 700;
  margin-bottom: 1.875rem;
  margin-top: 1.875rem;
  line-height: 1.2;
}
.banner_title h2 {
  margin-top: 0;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.25;
}
.banner_title p {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1.875rem;
}

.btn-social {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #0b2238;
  border: 1px solid transparent;
  transition: 0.35s !important;
}

.feature_app {
  background-color: rgba(56, 24, 64, 0.05);
}

.feature_app .app--crypto {
  width: 100%;
  -mo-box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important;
  -o-box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important;
  -ms-box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important;
  box-shadow: 0px 0px 70px 0px rgba(56, 24, 64, 0.1) !important;
  -mo-border-radius: 52px !important;
  border-radius: 52px !important;
}

.feature_app .item-feat {
  margin-bottom: 7rem;
}

@media (max-width: 991px) {
  .feature_app .item-feat {
    direction: ltr;
    margin-bottom: 2rem;
  }
}
.feature_app .item-feat .icon-iim {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  display: flex;
  text-align: center;
  justify-content: center;
  border-radius: 15px;
  margin-bottom: 1.25rem;
  padding: 1rem;
}

.feature_app .item-feat h3 {
  font-size: 20px;
  font-weight: 500;
  color: #0b2238;
  margin-bottom: 10px;
}

.feature_app .item-feat p {
  font-size: 16px;
  font-weight: 400;
  color: #6c7a87;
}

.tryit_now {
  background-color: #381840;
  position: relative;
  overflow: hidden;
  margin-top: -6rem;
}

.tryit_now .title_sections h2 {
  font-size: 1.875rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: #0b2238;
}

.tryit_now .title_sections p {
  color: #6c7a87;
  font-size: 1rem;
  font-weight: 400;
}

.tryit_now:before {
  content: "";
  background-image: var(--bg-img);
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 35%;
  height: 100%;
  width: 100%;
  background-size: 50%;
}

@media (max-width: 767px) {
  .tryit_now:before {
    background-size: cover;
  }
}
.container.is-c {
  max-width: 1140px;
}

.showcase_device {
  background-color: #ffffff;
  position: relative;
  margin-top: -30px;
  z-index: 2;
}

.showcase_device::before {
  content: "";
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: #0e0e0f;
}

@media (max-width: 767px) {
  .showcase_device::before {
    display: none;
  }
}
.showcase_device::after {
  content: "";
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: #0e0e0f;
}

@media (max-width: 767px) {
  .showcase_device::after {
    display: none;
  }
}
.showcase .images_desc:before {
  display: none;
}

.showcase .images_desc img:first-of-type {
  width: 390px;
  margin-right: 1.5rem;
}

@media (max-width: 767px) {
  .showcase .images_desc img:first-of-type {
    width: 100%;
    margin: 0;
  }
}
.showcase .images_desc img:last-of-type {
  width: 150px;
}

.section_library_use {
  background-color: #ffffff;
  position: relative;
  z-index: 2;
}
.section_library_use::before {
  content: "";
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: #0e0e0f;
}
.section_library_use::after {
  content: "";
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: #0e0e0f;
}
.section_library_use .box_lib .item {
  display: inline-block;
  text-align: center;
  margin-bottom: 40px;
  cursor: pointer;
}
.section_library_use .box_lib .item .imag_lib {
  width: 90px;
  height: 90px;
  background-color: rgba(11, 34, 56, 0.03);
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  margin-bottom: 15px;
}
.section_library_use .box_lib .item .imag_lib img {
  width: 50px;
}
.section_library_use .box_lib .item h5 {
  color: #0b2238;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}

@media (max-width: 767px) {
  .section_library_use::before {
    display: none;
  }
}
@media (max-width: 767px) {
  .section_library_use::after {
    display: none;
  }
}
@media (max-width: 767px) {
  .section_library_use .box_lib {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .section_library_use .box_lib .item {
    margin: 0 5px 20px 5px;
  }
}
@media (min-width: 1200px) {
  .section_library_use .box_lib .item {
    width: 11.1111111111%;
  }
}
.purchase_section {
  background-color: #ffffff;
}
.purchase_section .price_item .txt h3 {
  color: #0b2238;
  font-size: 50px;
  font-weight: 600;
}
.purchase_section .price_item .txt h3 sup {
  font-size: 25px;
}
.purchase_section .price_item .txt p {
  color: #6c7a87;
  font-size: 16px;
  margin-bottom: 0;
}

.sh_footer_email .email_logo .brand_logo {
  margin-right: 40px;
}
.sh_footer_email .email_logo .brand_logo img {
  width: 27px;
}
.sh_footer_email .email_logo .txt span {
  display: block;
  color: #9da6af;
  margin-bottom: 0;
}
.sh_footer_email .email_logo .txt a {
  display: block;
  font-size: 50px;
  color: #ffffff;
  text-decoration: none;
}
.sh_footer_email .dividar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  margin: 80px 0;
}
.sh_footer_email .copyright p {
  margin-bottom: 0;
  color: #6c7a87;
  font-size: 14px;
  font-weight: 400;
}
.sh_footer_email .copyright p a {
  color: #ffffff;
}
.sh_footer_email .nav .nav-item .nav-link {
  color: #6c7a87;
  font-size: 14px;
  font-weight: 400;
  padding-left: 0;
  transition: 0.3s !important;
}
.sh_footer_email .nav .nav-item .nav-link:hover {
  color: #ffffff;
}
.sh_footer_email.bg_fitness {
  background-color: #06121e;
  padding-top: 340px;
}

@media (max-width: 991px) {
  .sh_footer_email .email_logo .txt a {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .sh_footer_email .email_logo .txt a {
    font-size: 25px;
  }
}
@media (max-width: 991px) {
  .sh_footer_email .dividar {
    margin: 50px 0;
  }
}
.product_d .item_full {
  margin-left: -10%;
}
.product_d .img_produc img {
  border-radius: 12px;
  height: 695px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right;
     object-position: right;
}
.product_d .title_sections {
  margin-bottom: 2.5rem;
}
.product_d .title_sections h2 {
  color: #0b2238;
}
.product_d .title_sections p {
  color: #6c7a87;
}
.product_d .item_pro .icon_t {
  background-image: none !important;
  background-color: rgba(22, 93, 245, 0.1);
  width: 60px;
  height: 60px;
  border-radius: 20px;
  position: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.875rem;
}
.product_d .item_pro h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #0b2238;
}
.product_d .item_pro p {
  color: #9da6af;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}
.product_d .item_pro.item_red .icon_t {
  background-color: rgba(249, 53, 66, 0.1);
}

@media (max-width: 991px) {
  .product_d .item_full {
    margin-left: auto;
  }
}
@media (max-width: 991px) {
  .product_d .img_produc img {
    height: 100%;
    -o-object-position: center;
       object-position: center;
    margin-bottom: 2rem;
  }
}
body:not(.salon-body) .form-input {
  position: relative;
}
body:not(.salon-body) .form-input.is-disabled {
  opacity: 0.7;
}
body:not(.salon-body) .form-input.is-disabled input, body:not(.salon-body) .form-input.is-disabled textarea, body:not(.salon-body) .form-input.is-disabled select {
  background: #f8f9fb !important;
  pointer-events: none;
}
body:not(.salon-body) .form-input .invalid-feedback {
  color: #f43636;
  font-size: 14px;
  margin: 7px 10px;
  display: block;
}
body:not(.salon-body) .form-input .password-strength-indicator {
  width: calc(100% - 28px);
  height: 4px;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 13px;
  margin-right: 13px;
}
body:not(.salon-body) .form-input .password-strength-indicator [strength-bar] {
  background: #d8d9da;
  border-radius: 24px;
  flex: 1;
  height: 4px;
  margin-left: 1px;
  margin-right: 1px;
  width: 25%;
}
body:not(.salon-body) .form-input .password-strength-indicator [strength-bar].bad {
  background: #ff2934;
}
body:not(.salon-body) .form-input .password-strength-indicator [strength-bar].mediocre {
  background: #ffcd38;
}
body:not(.salon-body) .form-input .password-strength-indicator [strength-bar].strong {
  background: #19d681;
}
body:not(.salon-body) .form-input.pre .input-side-pre {
  background: #eceff3;
  width: 100%;
  padding: 17px;
}
body:not(.salon-body) .form-input .text-count-field {
  position: absolute;
  right: 0;
  font-size: 0.75rem;
  background: #fff;
  padding: 0 15px;
  top: -6px;
  color: #adafca;
  border-radius: 0px;
  transition: 0.6s;
  z-index: 999;
  border: 1px solid #fff;
}
body:not(.salon-body) .form-input.active label {
  background-color: #fff;
  padding: 0 6px;
  font-size: 0.75rem;
  top: -6px;
  left: 12px;
}
body:not(.salon-body) .form-input label {
  color: #adafca;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 16.5px;
  left: 17px;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  box-shadow: none;
  z-index: 50;
}
body:not(.salon-body) .form-input label.initial {
  position: initial;
  margin-bottom: 10px;
}
body:not(.salon-body) .form-input input {
  height: 54px;
  font-size: 14px;
}
body:not(.salon-body) .form-input textarea.no-resize {
  resize: none;
}
body:not(.salon-body) .form-input input, 
body:not(.salon-body) .form-input textarea {
  background: #fafafa;
  border: 2px solid #000000;  /* Corrected border property */
  border-radius: 2px;         /* Corrected border-radius property */
  padding: 18px;
  width: 100%;
}
body:not(.salon-body) .form-input input.has-border, body:not(.salon-body) .form-input textarea.has-border {
  border: 2px solid #000;
  background: #fff;
}
body.is-dark body:not(.salon-body) .form-input input, body.is-dark body:not(.salon-body) .form-input textarea {
  background: #000;
}
body:not(.salon-body) .form-input input:focus, body:not(.salon-body) .form-input input:focus-visible, body:not(.salon-body) .form-input textarea:focus, body:not(.salon-body) .form-input textarea:focus-visible {
  border: 0;
  outline: 0 !important;
}
body:not(.salon-body) .form-input input.bg-w, body:not(.salon-body) .form-input textarea.bg-w {
  background-color: #fff;
  border-color: #fff;
}
body:not(.salon-body) .form-input .initial + select, body:not(.salon-body) .form-input .initial + input, body:not(.salon-body) .form-input .initial + textarea {
  margin-top: 10px;
}
body:not(.salon-body) .form-input .is-alt-label {
  position: initial;
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
  color: #b1b5c3;
}
body:not(.salon-body) .form-input .is-alt-input {
  background: #fff;
  border-radius: 12px;
  border: 2px solid #000000;
  font-size: 14px;
  height: 48px;
}
body:not(.salon-body) .form-input select {
  height: 56px;
  padding-left: 20px;
  padding-right: 45px;
  border-radius: 16px;
  border: none;
  float: none;
  line-height: 56px;
  font-weight: 600;
  transition: all 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: #f5f6f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath d='M10.281.305L5.988 4.598 1.695.305A1 1 0 0 0 .293.317a1 1 0 0 0-.012 1.402l5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-.441-1.687 1 1 0 0 0-.973.273z' fill='%2311142d'/%3E%3C/svg%3E") no-repeat right 1rem center/8px 10px;
}
body:not(.salon-body) .form-input select.bg-w {
  background-color: #fff;
}
body:not(.salon-body) .form-input.is-password input {
  padding-right: 56px;
}
body:not(.salon-body) .form-input.is-password .show-password {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
body:not(.salon-body) .form-input.is-password .show-password i {
  font-size: 17px;
}
body:not(.salon-body) .form-input.is-link .is-link-inner {
  display: flex;
  background: #f5f6f8;
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: 100%;
  height: 54px;
}
body.is-dark body:not(.salon-body) .form-input.is-link .is-link-inner {
  background: #222222;
}
body:not(.salon-body) .form-input.is-link .is-link-inner .side-info {
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #686d73;
  padding-right: 10px;
}
body:not(.salon-body) .form-input.is-link .is-link-inner input {
  background: transparent;
  padding-left: 5px;
}
body:not(.salon-body) .form-input.copy input {
  background: rgba(228, 228, 228, 0.24);
  padding-right: 56px;
}
body:not(.salon-body) .form-input.copy .copy-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
body:not(.salon-body) .form-input.copy .copy-btn i {
  font-size: 17px;
}

.layout-base-header {
  width: 100%;
}
.layout-base-header .layout-nav {
  box-sizing: border-box;
  padding: 25px 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.layout-base-header .layout-nav .auth-link {
  font-size: 16px;
}
.layout-base-header .logo-wrapper * {
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}

.ath-entry {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  padding: 25px;
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.big-input-sider {
  border: 1px solid #dee2ed;
}

.banner_title_inner {
  margin-bottom: 3.75rem;
}

.banner_title_inner .before_title {
  margin-bottom: 0.625rem;
}

.banner_title_inner .before_title span {
  font-size: 16px;
}

.banner_title_inner h1 {
  font-size: 3.125rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  margin-top: 0.625rem;
}
@media (max-width: 768px) {
  .banner_title_inner h1 {
    font-size: 2rem;
  }
}

.banner_title_inner p {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.625rem;
}

.banner_title_inner .btn {
  margin-top: 0.625rem;
}

.abo_company {
  position: relative;
  margin-top: -16rem;
}

@media (max-width: 767px) {
  .abo_company {
    margin-top: 2rem;
  }
}
.abo_company .gq_item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 2rem;
  height: 530px;
  min-height: 530px;
}

@media (max-width: 767px) {
  .abo_company .gq_item {
    height: 100%;
  }
}
.abo_company .gq_item .title_sections {
  margin-bottom: 0;
  margin-top: 9rem;
}

.abo_company .gq_item .title_sections p {
  margin-bottom: 0;
}

.abo_company .gq_item.ill_item .ill_sec {
  margin: 3rem 0;
  width: 100%;
  height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

.abo_company .gq_item.ill_item .title_sections {
  margin-top: 0;
}

.abo_company .emo:nth-of-type(1) .gq_item {
  background-color: #165df5;
}

.abo_company .emo:nth-of-type(2) .gq_item {
  background-color: #e9f0ff;
}

.abo_company .emo:nth-of-type(3) .gq_item {
  background-color: #f6eef4;
}

.simplecontact_section {
  position: relative;
  overflow: hidden;
}

.simplecontact_section .circle-ripple {
  position: absolute;
  left: 43.5%;
  top: 20%;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 991px) {
  .simplecontact_section .circle-ripple {
    left: 39.5%;
  }
}
@media (max-width: 767px) {
  .simplecontact_section .circle-ripple {
    left: 23.5%;
  }
}
.simplecontact_section .circle-ripple .ripple {
  position: absolute;
  border: 3px solid #edeef1;
  width: 200px;
  height: 200px;
  border-radius: 500px;
}

.simplecontact_section .circle-ripple .ripple-1 {
  -webkit-animation: circleRipple 3s infinite linear !important;
  animation: circleRipple 3s infinite linear !important;
}

.simplecontact_section .circle-ripple .ripple-2 {
  -webkit-animation: circleRipple 3s infinite linear 0.75s !important;
  animation: circleRipple 3s infinite linear 0.75s !important;
}

.simplecontact_section .circle-ripple .ripple-3 {
  -webkit-animation: circleRipple 3s infinite linear 1.5s !important;
  animation: circleRipple 3s infinite linear 1.5s !important;
}

.top-bar {
  width: 100%;
  height: 64px;
  position: fixed;
  z-index: 100;
}
.top-bar .top-bar-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 48px;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  flex-wrap: wrap;
  background: #f6f6f7;
}
.top-bar .top-bar-user {
  height: 100%;
  position: relative;
  padding: 0 35px;
  margin-right: -35px;
  height: 64px;
  display: flex;
  align-items: center;
}
.top-bar .top-bar-user .h-avatar::before {
  content: initial;
}

[app-sandy=dashboard] .control-main {
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[app-sandy=dashboard] .top-bar {
  width: 100%;
  height: 64px;
  position: fixed;
  z-index: 100;
}
[app-sandy=dashboard] .top-bar .top-bar-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 48px;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  flex-wrap: wrap;
  background: #f6f6f7;
}
[app-sandy=dashboard] .top-bar .top-bar-user {
  height: 100%;
  position: relative;
  padding: 0 35px;
  margin-right: -35px;
  height: 64px;
  display: flex;
  align-items: center;
}
[app-sandy=dashboard] .top-bar .top-bar-user .h-avatar::before {
  content: initial;
}
[app-sandy=dashboard] .legal {
  margin-top: 15px;
  margin-bottom: 10px;
  padding-left: 26px;
  list-style: none;
}
[app-sandy=dashboard] .legal .legal-link {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.7;
  color: #6a6d73;
  text-decoration: none;
}
[app-sandy=dashboard] .legal .legal-separator {
  margin: 0 10px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.7;
  color: #b4b6b9;
  text-transform: uppercase;
}
[app-sandy=dashboard] .sandy-control-wrapper {
  flex-grow: 1;
  display: flex;
  margin-top: 64px;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-main {
  flex-grow: 1;
  margin-left: 280px;
  padding: 48px;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-main.colored {
  background: #F5F5F5;
  margin-top: 40px;
  border-radius: 30px;
  margin-right: 40px;
  margin-bottom: 40px;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar {
  width: 280px;
  height: calc(100% - 64px);
  padding: 32px;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav {
  margin: 0;
  padding-left: 24px;
  margin-top: 14px;
  list-style: none;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav .separator {
  margin-top: 36px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.7;
  color: #b4b6b9;
  text-transform: uppercase;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav .sandy-control-navlist {
  margin-bottom: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav .sandy-control-navlist .sandy-control-navlink {
  display: flex;
  align-items: center;
  position: relative;
  padding: 10px 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: #202a3e;
  text-decoration: none;
  cursor: pointer;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav .sandy-control-navlist .sandy-control-navlink svg {
  margin-right: 16px;
  stroke: #b4b6b9;
  outline: none;
  transition: fill 0.05s ease;
  width: 20px;
  height: 20px;
  stroke-width: 4px;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav .sandy-control-navlist .sandy-control-navlink.active {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav .sandy-control-navlist .sandy-control-navlink.active::before {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  left: -15px;
  background: #202a3e;
  border-radius: 100%;
}
[app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar .sandy-control-nav .sandy-control-navlist .sandy-control-navlink.active svg {
  stroke: #202a3e;
}

@media (max-width: 992px) {
  [app-sandy=dashboard] .sandy-control-wrapper .sandy-control-main {
    margin-left: 0;
    padding: 8%;
  }
}
@media (max-width: 992px) {
  [app-sandy=dashboard] .sandy-control-wrapper .sandy-control-main.colored {
    margin-left: 40px;
  }
}
@media (max-width: 992px) {
  [app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar {
    transition: transform 0.35s ease-in-out;
    z-index: 99999;
    background: #fff;
    height: 100%;
  }
  [app-sandy=dashboard] .sandy-control-wrapper .sandy-control-sidebar:not(.show-menu) {
    transform: translate(-100%);
  }
}
.mobile-card, .mobile-card_black {
  width: 100%;
  background-color: #49a3d9;
  padding: 30px 30px 0 30px;
  border-radius: 20px;
  color: #fff;
  overflow: hidden;
}

.mobile-card .title_small, .mobile-card_black .title_small {
  max-width: 343px;
  margin-bottom: 10px;
}

.mobile-card .subtitle, .mobile-card_black .subtitle {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.55);
}

.mobile-card__tag {
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  padding: 6px 8px;
  background-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  border-radius: 8px;
  margin-bottom: 26px;
}

.mobile-card__image {
  margin: -2% auto 0 auto;
  width: 100%;
}
.mobile-card__image .inner {
  position: relative;
  width: calc(100% + 60px);
  margin-left: -30px;
  display: flex;
}
.mobile-card__image .inner picture {
  width: 100%;
}
.mobile-card__image .inner img {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .mobile-card__image {
    margin: -20px auto 0 auto;
  }
}
@media screen and (min-width: 992px) {
  .mobile-card__image {
    margin: -5px auto 0 auto;
  }
}
.mobile-card_black {
  background-color: #000;
}

@media (max-width: 375px) {
  .mobile-card__image {
    width: calc(100% + 40px);
    margin-left: -20px;
  }
}
.item-price {
  width: 235px;
  border-radius: 8px;
  position: relative;
  padding: 2.5rem 2rem;
  text-align: center;
}
@media (max-width: 768px) {
  .item-price {
    width: 100%;
  }
}
.item-price .name-p {
  font-size: 25px;
  font-weight: 600;
  color: #0b2238;
  margin-bottom: 1.875rem;
}
.item-price .number {
  margin-bottom: 1.875rem;
}
.item-price .number .n-price {
  font-size: 50px;
  font-weight: 600;
  color: #0b2238;
  position: relative;
}
.item-price .number .coins {
  position: absolute;
  color: #6c7a87;
  font-size: 20px;
  font-weight: 600;
}
.item-price .number .per {
  color: #6c7a87;
  font-size: 14px;
  font-weight: 400;
}
.item-price.is-best {
  background: #165df5;
}
.item-price.is-best .name-p, .item-price.is-best .coins, .item-price.is-best .per, .item-price.is-best .n-price {
  color: #fff;
}

.transaction-confirm-action {
  margin-top: 15px;
  margin-right: 0;
  margin-left: 0;
  max-width: 100%;
  justify-content: flex-start;
}
.transaction-confirm-action input {
  max-width: 49px !important;
  background: #fff;
  border: 1px solid #f4f4f4;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 100% !important;
  height: 44px;
  outline: none;
  text-align: center;
  font-weight: 600;
}
.transaction-confirm-action input:not(:last-child) {
  margin-right: 10px;
}
@media (max-width: 768px) {
  .transaction-confirm-action input {
    font-size: 16px;
  }
}
.transaction-confirm-action .sandy-expandable-btn {
  width: 49px;
  height: 44px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.text_count {
  font-size: 13px;
  color: #535065;
  font-weight: 400;
  margin: 0;
}

.sandy-page-row {
  display: flex;
  flex-grow: 1;
}

.sandy-page-col {
  padding: 0 64px 64px;
}

.sandy-page-col:first-child {
  flex: 0 0 calc(100% - 426px);
  max-width: calc(100% - 426px);
}

.sandy-page-col:nth-child(2) {
  flex: 0 0 426px;
  width: 426px;
  border-left: 1px solid #E4E4E4;
}

.sandy-page-col_pt100 {
  padding-top: 100px;
}

.sandy-page-col_pt198 {
  padding-top: 198px;
}

@media only screen and (max-width: 1419px) {
  .sandy-page-row {
    padding: 0 64px 64px;
  }

  .sandy-page-col {
    padding: 0;
  }

  .sandy-page-col:first-child {
    flex: 0 0 calc(100% - 290px);
    max-width: calc(100% - 290px);
    padding-right: 64px;
  }

  .sandy-page-col:nth-child(2) {
    flex: 0 0 290px;
    width: 290px;
    border: none;
  }
}
@media only screen and (max-width: 1339px) {
  .sandy-page-row {
    padding: 0 48px 64px;
  }

  .sandy-page-col:first-child {
    padding-right: 48px;
  }
}
@media only screen and (max-width: 1259px) {
  .sandy-page-row {
    display: block;
    padding: 0 64px 64px;
  }

  .sandy-page-col:first-child {
    max-width: 100%;
    margin-bottom: 64px;
    padding: 0;
  }

  .sandy-page-col:nth-child(2) {
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .sandy-page-row {
    padding: 0 16px 32px;
  }

  .sandy-page-col:first-child {
    margin-bottom: 42px;
  }
}
.daily-agent-monthly-calendar-w {
  padding: 15px;
  margin-bottom: 30px;
}
.daily-agent-monthly-calendar-w .snd-weekdays {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.daily-agent-monthly-calendar-w .snd-weekdays .weekday {
  text-transform: uppercase;
  font-size: 11.2px;
  color: #6f8aff;
  font-weight: 500;
  letter-spacing: 2px;
  width: 14.2%;
  text-align: center;
  padding: 5px 0px;
}
.daily-agent-monthly-calendar-w .snd-weekdays .weekday.weekday-6, .daily-agent-monthly-calendar-w .snd-weekdays .weekday.weekday-7 {
  color: #ccb63b;
  background-color: #fffef2;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w {
  position: relative;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .cc-location-selector {
  margin-left: auto;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn {
  position: absolute;
  border: none;
  font-size: 14px;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: #111;
  top: 55%;
  transform: translateY(-50%);
  padding: 0px;
  margin: 0px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading {
  color: transparent !important;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading span, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading i {
  color: transparent !important;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading span, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading i {
  color: transparent !important;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading:after, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading:after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #38406d;
  border-left: 2px solid #38406d;
  border-top: 2px solid #38406d;
  border-right: 2px solid rgba(0, 0, 0, 0);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: snd-loading 700ms infinite linear;
          animation: snd-loading 700ms infinite linear;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn:hover, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn:hover {
  color: #0937ff;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.disabled, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.disabled {
  color: rgba(0, 0, 0, 0.1);
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn {
  left: 5px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn {
  right: 5px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label {
  text-align: center;
  font-weight: 500;
  font-size: 17.6px;
  color: #2D303A;
  margin-bottom: 15px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label .current-day {
  display: inline-block;
  vertical-align: middle;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label .current-year {
  display: inline-block;
  vertical-align: middle;
  color: rgba(45, 48, 58, 0.4);
  margin-left: 3px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label .current-month {
  display: inline-block;
  vertical-align: middle;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days-w {
  display: none;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days-w.active {
  display: block;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-shadow: 0px 3px 0px #e2e5f1;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day {
  width: 14.2%;
  padding: 2.3%;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
@media (max-width: 768px) {
  .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day {
    width: auto;
    flex: 0 0 40px;
  }
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.is-f {
  width: auto;
  flex: 0 0 40px;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-6, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-7 {
  background-color: #f8f8f8;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-next-month, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-prev-month {
  color: #B7BCCB;
  background-color: #fff;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-current .snd-day-box {
  background-color: #f5f6fb;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-passed .snd-day-box {
  background-color: #f5f6fb;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-passed .snd-day-box .snd-day-number {
  color: #B7BCCB;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-today .snd-day-box {
  background-color: #fff6cb;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-next .snd-day-box, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-prev .snd-day-box {
  opacity: 0.4;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-next .snd-day-box:hover, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-prev .snd-day-box:hover {
  opacity: 1;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day .snd-day-box {
  padding-bottom: 100%;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day .snd-day-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #525765;
  white-space: nowrap;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day:hover .snd-day-box .snd-day-number {
  font-size: 19px;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.selected .snd-day-box {
  background-color: #0937ff;
  color: #fff;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.selected .snd-day-box .snd-day-number {
  font-size: 19px;
  color: #fff;
}
.daily-agent-monthly-calendar-w .snd-day-status {
  margin: 0px;
  margin-top: 10px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  bottom: 3px;
  left: 3px;
  right: 3px;
  transition: all 0.3s ease;
  position: absolute;
  background-color: #e2e5f1;
}
.daily-agent-monthly-calendar-w .snd-day-status .day-available {
  background-color: #80dc6e;
  top: 0px;
  bottom: 0px;
  position: absolute;
  z-index: 1;
  min-width: 3px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar {
  padding: 0px;
  box-shadow: none;
  background-color: transparent;
  margin-bottom: 20px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-months {
  border: 1px solid #eee;
  border-bottom: none;
  background-color: #fff;
  border-radius: 0px;
}
@media (max-width: 768px) {
  .daily-agent-monthly-calendar-w.horizontal-calendar .snd-months {
    overflow: auto;
    padding-bottom: 3px;
    margin-right: -15px;
    margin-left: -15px;
  }
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.snd-day-passed .snd-day-box .snd-day-number {
  color: #525765;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 15px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label {
  font-size: 30px;
  margin: 0px;
  padding: 0px;
  line-height: 1;
  position: relative;
  color: #0937ff;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label .current-day {
  z-index: 2;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label .current-month {
  z-index: 2;
  position: relative;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label .current-year {
  font-weight: 500;
  color: rgba(45, 48, 58, 0.07);
  position: absolute;
  font-size: 100px;
  line-height: 100px;
  bottom: -7px;
  display: block;
  margin: 0px;
  left: 0px;
  z-index: 1;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-service-selector {
  margin-left: auto;
  margin-right: 20px;
  display: flex;
  align-items: center;
  padding-right: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-service-selector label {
  margin-right: 5px;
  display: block;
  margin-left: auto;
  color: #8894AF;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-service-selector input {
  display: block;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w .snd-month-prev-btn, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w .snd-month-next-btn {
  position: relative;
  bottom: auto;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  padding: 3px 2px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w .snd-month-today-btn {
  margin: 0px 15px;
  padding: 5px 10px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days {
  flex-wrap: nowrap;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day {
  padding: 0px;
  border-right: 1px solid #eee;
  overflow: visible;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day:hover .snd-day-status {
  height: 7px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day:hover .snd-day-number {
  transform: translate(-50%, -60%);
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day:last-child {
  border-right: none;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected {
  background-color: #0937ff !important;
  z-index: 2;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected .snd-day-weekday {
  color: rgba(255, 255, 255, 0.5) !important;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected .snd-day-box {
  background-color: #0937ff;
  border-radius: 0px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected .snd-day-box .snd-day-number {
  color: #fff;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-box {
  padding: 0px;
  border-radius: 0px;
  background-color: transparent;
  height: 30px;
  overflow: visible;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-weekday {
  color: rgba(9, 55, 255, 0.4);
  font-size: 9px;
  font-weight: 500;
  padding: 8px 0px 0px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-status {
  bottom: -3px;
  margin: 0px;
  left: -1px;
  right: -1px;
  border-radius: 0px;
  height: 3px;
  transition: none;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .day-status {
  bottom: -3px;
  margin: 0px;
  left: -1px;
  right: -1px;
  border-radius: 0px;
  height: 3px;
  transition: none;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-number {
  font-size: 16px;
  top: 42%;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-6, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-7 {
  background-color: #f8f8f8;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-6 .snd-day-weekday, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-7 .snd-day-weekday {
  color: #b9997d;
}

.wj-bookings-daily.os-loading .no-results-w .icon-w {
  position: relative;
}
.wj-bookings-daily.os-loading .no-results-w .icon-w:before {
  display: block;
  content: "";
  width: 20px !important;
  height: 20px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.wj-bookings-daily.os-loading .no-results-w .icon-w .latepoint-icon {
  color: transparent;
}
.wj-bookings-daily.os-loading .ch-filter .ch-filter-trigger {
  display: none;
}
.wj-bookings-daily.os-loading .ch-filter:before {
  display: block;
  content: "";
  width: 20px !important;
  height: 20px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.wj-bookings-daily .calendar-hours {
  position: relative;
}
.wj-bookings-daily .ch-filter {
 
  border-right: none;
  height: 50px;
  margin-bottom: 20px;
  position: relative;
}
.wj-bookings-daily .ch-filter .ch-filter-trigger {
  width: 5px;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  height: 5px;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 8px 0px 0px rgba(0, 0, 0, 0.3), -8px 0px 0px rgba(0, 0, 0, 0.3);
  border-radius: 1px;
}
.wj-bookings-daily .da-head-agents {
  display: flex;
  background-color: #fff;
  height: 50px;
  margin-bottom: 20px;
}
.wj-bookings-daily .ch-agents {
  flex: 1;
  position: relative;
}
.wj-bookings-daily .da-agents-bookings {
  display: flex;
}
.wj-bookings-daily .da-agents-bookings .da-agent-bookings-and-periods {
  flex: 1;
  position: relative;
}
.wj-bookings-daily .da-head-agent {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  flex: 1;
  background-color: transparent;
  position: relative;
}
.wj-bookings-daily .da-head-agent:first-child:before {
  content: "";
  position: absolute;
  bottom: -21px;
  left: -1px;
  height: 20px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}
.wj-bookings-daily .da-head-agent:after {
  content: "";
  position: absolute;
  bottom: -21px;
  right: -1px;
  height: 20px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}
.wj-bookings-daily .da-head-agent .da-head-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-size: cover;
  background-position: center center;
  margin-right: 10px;
  margin-left: auto;
}
.wj-bookings-daily .da-head-agent .da-head-agent-name {
  text-decoration: none;
  color: #2D303A;
  border-bottom: 1px dotted rgba(9, 55, 255, 0.4);
  font-weight: 700;
  margin-right: auto;
  white-space: nowrap;
}
.wj-bookings-daily .da-head-agent .da-head-agent-name:hover {
  color: #0937ff;
}

.daily-agent-calendar-w.make-scrollable .ch-agents {
  overflow: auto;
}
.daily-agent-calendar-w.make-scrollable .da-head-agent, .daily-agent-calendar-w.make-scrollable .da-agents-bookings .da-agent-bookings-and-periods {
  flex: 0 0 240px;
}
.daily-agent-calendar-w.make-scrollable .da-agent-bookings-and-periods:first-child .ch-day-periods .chd-period .chd-period-minutes-value {
  left: auto;
  right: 0px;
  transform: translate(100%, -50%);
}

.wj-bookings-daily .da-head-agent .da-head-agent-name {
  max-width: 130px;
  overflow: hidden;
}
.wj-bookings-daily.is-single .wj-bookings-daily-contents {
  display: flex;
  padding-top: 30px;
}
.wj-bookings-daily.is-single .daily-agent-calendar-w {
  flex: 1;
}
.wj-bookings-daily.is-single .daily-agent-side {
  flex: 0 0 420px;
  width: 420px;
}
.wj-bookings-daily.os-loading .daily-agent-monthly-calendar-w .os-monthly-calendar-days .os-day.selected .os-day-box {
  position: relative;
}
.wj-bookings-daily.os-loading .daily-agent-monthly-calendar-w .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number {
  display: none;
}
.wj-bookings-daily.os-loading .daily-agent-monthly-calendar-w .os-monthly-calendar-days .os-day.selected .os-day-box:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}

.calendar-daily-head-w {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.calendar-daily-head-w .calendar-daily-target-date {
  color: #8894AF;
  font-size: 22.4px;
  font-weight: 500;
  line-height: 1.43;
}
.calendar-daily-head-w .calendar-daily-target-date.agent-has-day-off {
  color: #ec7e70;
}
.calendar-daily-head-w label {
  margin-left: auto;
  margin-right: 5px;
  color: #8894AF;
}

.calendar-daily-agent-w .calendar-hours {
  display: flex;
}
.calendar-daily-agent-w .calendar-hours .ch-hours {
  flex: 0 0 61px;
  
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period {
  height: 20px;
  vertical-align: middle;
  text-align: right;
  line-height: 20px;
  font-size: 12.8px;
  color: #AAB1CB;
  font-weight: 500;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.last-period {
  height: 1px !important;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-minutes {
  position: relative;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-minutes span {
  display: none;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-minutes:before {
  content: "";
  height: 1px;
  width: 3px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -1px;
  right: -2px;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-hour {
  position: center;
  padding-right: 10px;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-hour span {
  transform: translateY(-50%);
  display: block;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-hour:before {
  content: "";
  height: 1px;
  width: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0px;
  right: -3px;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-disabled {
  background-color: rgba(0, 0, 0, 0.03);
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods {
  flex: 1;
  
  position: relative;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period {
  height: 20px;
  position: relative;
  cursor: copy;
}
/* Updated styling for time off periods */
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-off {
  background: repeating-linear-gradient(
  -45deg, 
  #ffebee, /* Light red background */
  #ffebee 10px, 
  #ffcdd2 10px, /* Slightly darker red for stripes */
  #ffcdd2 20px
);

  height: 100%;
  width: 100%;
  padding: 10px;
  border-radius: 0px;
  border: 1px solid #d0d0d0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add "Time Off" text overlay */
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-off:after {
  content: "Time Off";
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
  font-size: 16px;
  color: #444;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-off:hover:before {
  border-top-color: #E42806;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-off:hover .chd-period-minutes-value {
  background-color: #E42806;
  color: #fff;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period:before {
  content: "";
  height: 1px;
  top: -1px;
  position: absolute;
  left: 0px;
  right: 0px;
  border-top: 1px dashed transparent;
  z-index: 999;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period .chd-period-minutes-value {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9999;
  transform: translate(-100%, -50%);
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 12.8px;
  font-weight: 500;
  background-color: #0937ff;
  color: #fff;
  display: none;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.os-loading .chd-period-minutes-value {
  color: transparent;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.os-loading .chd-period-minutes-value:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period:hover .chd-period-minutes-value {
  display: block;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period:hover:before {
  border-top-color: #0937ff;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.last-period {
  height: 1px !important;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-hour {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-disabled {
  background-color: rgba(0, 0, 0, 0.03);
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods.ch-day-tue, .calendar-daily-agent-w .calendar-hours .ch-day-periods.ch-day-thu {
  background-color: #fafbfd;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking {
  background-color: #1449ff;
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #fff;
  position: absolute;
  left: 5px;
  right: 5px;
  text-align: left;
  z-index: 1000;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 50px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking.status-pending:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\EE\A5\17D";
  position: absolute;
  bottom: 5px;
  right: 5px;
  color: #fff;
  font-size: 16px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking:hover {
  left: 0px;
  right: 0px;
  min-height: 60px;
  z-index: 9999;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking:hover .booking-time {
  color: rgba(255, 255, 255, 0.9);
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .ch-day-buffer-before {
  position: absolute;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
  z-index: -1;
  left: 0px;
  right: 0px;
  top: 0px;
  transform: translateY(-100%);
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .ch-day-buffer-after {
  position: absolute;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-top: none;
  border-radius: 0px 0px 4px 4px;
  z-index: -1;
  left: 0px;
  right: 0px;
  bottom: 0px;
  transform: translateY(100%);
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booked-percentage {
  width: 70px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  margin: 0px auto;
  margin-top: 2px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booked-percentage .booked-bar {
  background-color: #fff;
  border-radius: 2px;
  height: 6px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-attendies {
  font-size: 10.4px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  position: absolute;
  bottom: 5px;
  right: 5px;
  line-height: 1.2;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-attendies span {
  color: #fff;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-service-name {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-align: left;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-time {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking.os-loading {
  -webkit-animation: animate_appointment_small_box 0.8s ease infinite;
          animation: animate_appointment_small_box 0.8s ease infinite;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking.os-loading:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
  left: -10px;
}

.calendar-month-agents-w {
  position: relative;
}
.calendar-month-agents-w.os-loading .ma-days-with-bookings-i {
  opacity: 0.5;
}
.calendar-month-agents-w.os-loading:after {
  display: block;
  content: "";
  width: 24px !important;
  height: 24px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
  top: 25px;
  left: 40px;
  z-index: 999;
}
.calendar-month-agents-w.os-loading .ma-head-info {
  color: transparent;
}
.calendar-month-agents-w.os-loading .ma-head-info span + span {
  border-top-color: transparent;
}
.calendar-month-agents-w .ma-head {
  display: flex;
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 80px;
  right: 0px;
}
.calendar-month-agents-w .ma-head-info {
  padding: 12px 15px 5px 15px;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  width: 80px;
  height: 52px;
  font-weight: 500;
  font-size: 11.2px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ddd;
  position: relative;
}
.calendar-month-agents-w .ma-head-info span {
  display: block;
}
.calendar-month-agents-w .ma-head-info span + span {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.calendar-month-agents-w .ma-head-agent {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 249px;
  background-color: #fff;
}
.calendar-month-agents-w .ma-head-agent .ma-head-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-size: cover;
  background-position: center center;
  margin-right: 10px;
  margin-left: auto;
}
.calendar-month-agents-w .ma-head-agent .ma-head-agent-name {
  font-weight: 500;
  margin-right: auto;
  white-space: nowrap;
}
.calendar-month-agents-w .ma-month-label {
  color: #fff;
  font-weight: 500;
  text-align: center;
  display: flex;
}
.calendar-month-agents-w .ma-month-label div {
  padding: 3px;
  background-color: #0937ff;
  flex: 0 0 250px;
  color: #0937ff;
  box-shadow: 0px -1px 0px #0937ff, 0px 1px 0px #0937ff;
  position: relative;
  z-index: 2;
}
.calendar-month-agents-w .ma-floated-days-w {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  border-right: 1px solid #c1c1c1;
}
.calendar-month-agents-w .ma-floated-days-w .ma-month-label {
  display: block;
}
.calendar-month-agents-w .ma-floated-days-w .ma-month-label div {
  flex: 1;
  color: #fff;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day {
  display: flex;
  height: 35px;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day .ma-day-info {
  display: flex;
  align-items: stretch;
  font-size: 11.2px;
  font-weight: 500;
  flex: 0 0 80px;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day .ma-day-info .ma-day-number {
  border-right: 1px solid #eee;
  flex: 0 0 30px;
  line-height: 35px;
  text-align: center;
  background-color: #fff;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day .ma-day-info .ma-day-weekday {
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  flex: 0 0 50px;
  color: rgba(0, 0, 0, 0.3);
  line-height: 35px;
  background-color: #fff;
}
.calendar-month-agents-w .ma-days-with-bookings-w {
  padding-left: 80px;
  position: relative;
  overflow-x: auto;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-days-with-bookings-i {
  padding-top: 52px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day {
  display: flex;
  height: 35px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:hovers {
  box-shadow: 0px 0px 0px 2px #6b9fff;
  z-index: 2;
  position: relative;
  background-color: #fff !important;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:hovers .ma-day-agent-bookings {
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings {
  border-right: 1px solid #d8d8d8;
  flex: 0 0 249px;
  position: relative;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-off {
  top: 0px;
  bottom: 0px;
  position: absolute;
background: url(/assets/image/others/blockedoff.svg) no-repeat left center;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-off span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  padding: 3px 4px;
  line-height: 1.1;
  background-color: #e02727;
  display: none;
  transform: translate(-50%, -50%);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-off:hover span {
  display: block;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking {
  top: 12px;
  bottom: 12px;
  position: absolute;
  cursor: pointer;
  box-shadow: inset -1px 0px 0px 0px #fff;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking.os-loading {
  top: 10px;
  bottom: 10px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking.os-loading:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -120%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
  display: block;
  align-items: flex-start;
  box-shadow: 0 20px 40px 0 rgba(108, 120, 143, 0.15), 0 1px 2px 0 rgba(206, 211, 222, 0.7);
  z-index: 999;
  background: #FFFFFF;
  cursor: pointer;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info {
  flex: 1;
  padding: 15px 30px 10px 20px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-color-elem {
  background-color: #2752E4;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-time {
  color: #8894AF;
  white-space: nowrap;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-time .at-date {
  font-weight: 500;
  color: #0937ff;
  font-size: 16px;
  margin-bottom: 0px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-service-name {
  font-weight: 500;
  font-size: 19px;
  margin-bottom: 5px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w {
  flex: 1;
  padding: 15px 10px 15px 20px;
  align-items: flex-start;
  border-left: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .avatar-w {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  margin-right: 15px;
  box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-name {
  font-weight: 500;
  font-size: 16px;
  color: #0937ff;
  margin-bottom: 3px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-property {
  margin-bottom: 2px;
  white-space: nowrap;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-property .label {
  color: #8894AF;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-property .value {
  font-weight: 500;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking:hover {
  top: 10px;
  bottom: 10px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking:hover .appointment-box-small {
  transform: translate(-50%, -105%);
  visibility: visible;
  opacity: 1;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:first-child .appointment-box-small {
  left: 0px;
  transform: translate(0%, -120%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, -105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:last-child .appointment-box-small {
  left: auto;
  right: 0px;
  transform: translate(0%, -120%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, -105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-booking .appointment-box-small {
  top: auto;
  bottom: 0px;
  transform: translate(-50%, 110%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-booking:hover .appointment-box-small {
  transform: translate(-50%, 100%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:first-child .appointment-box-small {
  left: 0px;
  top: auto;
  bottom: 0px;
  transform: translate(5%, 105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, 100%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:last-child .appointment-box-small {
  left: auto;
  right: 0px;
  top: auto;
  bottom: 0px;
  transform: translate(0%, 105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, 100%);
}
.calendar-month-agents-w .ma-floated-days-w .ma-day:nth-child(even) .ma-day-agent-bookings, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(even) .ma-day-agent-bookings {
  background-color: rgba(0, 0, 0, 0.02);
}
.calendar-month-agents-w .ma-floated-days-w .ma-day:nth-child(even) .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(even) .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-floated-days-w .ma-day:nth-child(even) .ma-day-info .ma-day-weekday, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(even) .ma-day-info .ma-day-weekday {
  background-color: #fafafa;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-6 .ma-day-agent-bookings, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-agent-bookings {
  background-color: #F8F5EC;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-6 .ma-day-agent-bookings, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-agent-bookings {
  background-color: #F8F5EC;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-agent-bookings, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-agent-bookings, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-info, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-info {
  border-bottom: 1px solid #dac59b;
}
.calendar-month-agents-w.calendar-month-not-scrollable .ma-days-with-bookings-w {
  overflow-x: visible;
}
.calendar-month-agents-w.calendar-month-not-scrollable .ma-head-agent, .calendar-month-agents-w.calendar-month-not-scrollable .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings {
  flex: 1;
}

.timeline-with-info-w {
  align-items: center;
  display: flex;
}
.timeline-with-info-w .timeline-side-w {
  flex: 1;
}
.timeline-with-info-w .timeline-info-w {
  margin-left: 40px;
  padding-left: 40px;
  padding-right: 20px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  flex: 0 0 320px;
}
.timeline-with-info-w .timeline-info-w .os-add-box {
  border: none;
  background-color: #0937ff;
  padding: 10px;
  margin-top: 15px;
}
.timeline-with-info-w .timeline-info-w .os-add-box .add-box-label {
  margin-right: auto;
  color: #fff;
  margin-left: 10px;
}
.timeline-with-info-w .timeline-info-w .os-add-box .add-box-graphic-w {
  margin-left: auto;
  width: 30px;
  height: 30px;
}
.timeline-with-info-w .timeline-info-w .os-add-box .add-box-graphic-w .add-box-plus {
  background-color: #fff;
  color: #0937ff;
  box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.1);
}

.agent-day-bookings-timeline-compact-w {
  position: relative;
  display: flex;
}
.agent-day-bookings-timeline-compact-w .agents-avatars {
  flex: 0 0 50px;
  margin-right: 20px;
  padding-top: 30px;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .agents-ava-div {
  height: 100px;
  margin-bottom: 20px;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .avatar-w {
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  margin-bottom: 20px;
  display: block;
  text-decoration: none;
  position: relative;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .avatar-w span {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  background-color: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 15px;
  z-index: 9999;
  transform: translate(-50%, -5px);
  white-space: nowrap;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .avatar-w:hover span {
  display: block;
}
.agent-day-bookings-timeline-compact-w .agents-timelines-w {
  flex: 1;
}
.agent-day-bookings-timeline-compact-w .timeline-bottom-w {
  display: flex;
}
.agent-day-bookings-timeline-compact-w .timeline-top-w {
  display: flex;
  height: 30px;
}
.agent-day-bookings-timeline-compact-w .timeslot {
  flex: 1;
}
.agent-day-bookings-timeline-compact-w .timeslot:last-child:not(:first-child) {
  width: 1px;
  flex: 0 0 1px;
}
.agent-day-bookings-timeline-compact-w .timeslot.with-tick .tick {
  background-color: rgba(0, 0, 0, 0.05);
  position: absolute;
  z-index: 2;
  top: 20px;
  bottom: 20px;
  width: 1px;
}
.agent-day-bookings-timeline-compact-w .timeslot .timeslot-time {
  font-weight: 500;
  font-size: 12.8px;
  text-align: center;
  line-height: 1.2;
  transform: translateX(-50%);
  display: inline-block;
}
.agent-day-bookings-timeline-compact-w .timeslot .timeslot-time .timeslot-ampm {
  color: #8894AF;
  font-size: 9.6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w {
  margin-bottom: 20px;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline {
  height: 100px;
  background-color: #F2F5F8;
  position: relative;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block {
  height: 95px;
  z-index: 3;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px #f2f5f8;
  background-color: rgba(0, 0, 0, 0.2);
  background: #ffc0c0;
  padding: 10px;
  border-radius: 10px;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block * {
  color: #fff;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block.os-loading:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block .appointment-box-small {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -120%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block:hover .appointment-box-small {
  transform: translate(-50%, -105%);
  visibility: visible;
  opacity: 1;
}

.kiosk-info-nav {
  height: 100px;
  background:var(--c-button-background-color);
}

.wj-widget .wj-widget-header.with-actions {
  flex-wrap: wrap;
  align-items: center;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions-trigger {
  display: block;
  margin-left: auto;
  padding: 0px 0px 0px 5px;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions {
  display: none;
  text-align: left;
  margin: 0px;
  padding-bottom: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  width: 100%;
  flex: 0 0 100%;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions select {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  font-size: 16px;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  font-size: 16px;
  padding: 7px 4px 9px 6px;
  position: relative;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker > i {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.wj-widget .wj-widget-header.with-actions.wj-show-actions .wj-widget-header-actions {
  display: block;
}

.wj-widget {
  margin-bottom: 40px;
  background-color: #fff;
  border: 1px solid #e0e1e8;
  border-radius: 3px;
}
.wj-widget.wj-widget-transparent {
  background-color: transparent;
  border: none;
  padding: 0px;
  box-shadow: none;
}
.wj-widget.wj-widget-transparent .wj-widget-header {
  padding: 9px 10px 10px 37px;
  border: none;
}
.wj-widget.wj-widget-transparent .wj-widget-header:before {
  display: none;
}
.wj-widget.wj-widget-transparent .wj-widget-content {
  padding: 0px;
}
.wj-widget .wj-widget-header {
  font-size: 19px;
  font-weight: 500;
  border-bottom: 1px solid #e7e9ef;
  color: #2D303A;
  padding: 10px 10px 10px 37px;
  margin-top: 0px;
  line-height: 1.4;
}
.wj-widget .wj-widget-header.centered {
  text-align: center;
}
.wj-widget .wj-widget-header h3 {
  font-size: 40px;
  padding: 4px 0px;
  margin: 0px;
  line-height: 1;
  color: black;
}
.wj-widget .wj-widget-header.with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-text {
  position: relative;
  padding: 3px 5px 4px 0px;
  line-height: 1;
  vertical-align: middle;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions-trigger {
  display: none;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions {
  margin-left: auto;
  text-align: right;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker {
  cursor: pointer;
  border-radius: 4px;
  border: none;
  background-color: #F0F2F8;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #d6d6e1;
  border-bottom-color: #bebfc7;
  box-shadow: none;
  font-size: 14px;
  padding: 6px 4px 6px 10px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker i, .wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker span {
  display: inline-block;
  vertical-align: middle;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker i {
  font-size: 14px;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker span {
  color: #38406d;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker:hover {
  background-color: #fff;
}
.wj-widget .wj-widget-header.with-actions select {
  max-width: 130px;
  box-shadow: none;
  border: none;
  background-color: #F0F2F8;
  color: #32373c;
  background-color: #fff;
  border: 1px solid #d6d6e1;
  border-bottom-color: #bebfc7;
  box-shadow: none;
  border-radius: 4px;
  font-size: 14px;
}
.wj-widget .wj-widget-header:before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #0937ff;
  box-shadow: 8px 8px 0px rgba(9, 55, 255, 0.6), 0px 8px 0px rgba(9, 55, 255, 0.6), 0px 16px 0px rgba(9, 55, 255, 0.3), 8px 24px 0px rgba(9, 55, 255, 0.7), 8px 16px 0px rgba(9, 55, 255, 0.4);
  position: absolute;
  top: 11px;
  left: 12px;
}
.wj-widget .wj-widget-content {
  padding: 20px;
}
.wj-widget .wj-widget-content.no-padding {
  padding: 0px;
}
.wj-widget.wj-widget-boxed {
  background-color: #fff;
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
  padding: 15px;
  border-radius: 3px;
}
.wj-widget.wj-widget-boxed .wj-widget-header {
  padding-top: 0px;
  border-bottom: none;
}

.timeline-with-info-w {
  align-items: center;
  display: flex;
}
.timeline-with-info-w .timeline-side-w {
  flex: 1;
}
.timeline-with-info-w .timeline-info-w {
  margin-left: 40px;
  padding-left: 40px;
  padding-right: 20px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  flex: 0 0 320px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box {
  border: none;
  background-color: #0937ff;
  padding: 10px;
  margin-top: 15px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box .add-box-label {
  margin-right: auto;
  color: #fff;
  margin-left: 10px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box .add-box-graphic-w {
  margin-left: auto;
  width: 30px;
  height: 30px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box .add-box-graphic-w .add-box-plus {
  background-color: #fff;
  color: #0937ff;
  box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.1);
}

.wj-widget-today-info {
  border: none;
  margin-bottom: 0px;
}
.wj-widget-today-info .day-info-progress {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
}
.wj-widget-today-info .day-info-progress .di-progress-value {
  height: 8px;
  position: relative;
}
.wj-widget-today-info .day-info-progress .di-progress-value .progress-label-w {
  transform: translateY(-120%);
  transition: all 0.1s ease-in;
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #000;
  padding: 10px;
  font-size: 17px;
}
.wj-widget-today-info .day-info-progress .di-progress-value .progress-label-w .progress-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  margin-top: 5px;
}
.wj-widget-today-info .day-info-progress .di-progress-value .progress-label-w .progress-value {
  white-space: nowrap;
  color: #fff;
}
.wj-widget-today-info .day-info-progress .di-progress-value:hover .progress-label-w {
  transform: translateY(-105%);
  display: block;
}
.wj-widget-today-info .day-main-info {
  padding-bottom: 20px;
  text-align: center;
}
.wj-widget-today-info .big-counter {
  font-size: 68px;
  line-height: 1;
  color: #2D303A;
  font-weight: 500;
}
.wj-widget-today-info .counter-label {
  color: #8894AF;
  font-size: 22px;
}
.wj-widget-today-info .day-sub-info {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.wj-widget-today-info .day-sub-info-col {
  padding: 15px 0px;
}
.wj-widget-today-info .day-sub-info-col + .day-sub-info-col {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.wj-widget-today-info .day-sub-info-col.with-avatars {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wj-widget-today-info .day-sub-info-col.with-avatars .agents-on-duty-avatars {
  margin-left: 20px;
  display: flex;
  flex-direction: row-reverse;
  position: relative;
}
.wj-widget-today-info .day-sub-info-col.with-avatars .avatar-w {
  background-size: cover;
  background-position: center center;
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 2px #fff;
  margin-right: -10px;
}
.wj-widget-today-info .day-sub-info-col.with-avatars .avatar-w:first-child {
  margin-right: 0px;
}
.wj-widget-today-info .sub-info-value {
  color: #0937ff;
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px;
  padding-right: 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.wj-widget-today-info .sub-info-value:last-child {
  border-right: none;
  margin-right: 0px;
  padding-right: 0px;
}
.wj-widget-today-info .sub-info-label {
  color: #8894AF;
  font-size: 16px;
  margin-bottom: 5px;
}

.midone-dash {
  background: white;
}
.midone-dash .mobile-menu .menu .menu__icon {
  color: #000;
}
.midone-dash .mobile-menu .menu .menu__title {
  color: #000;
}
.midone-dash .side-nav .side-menu.side-menu--active {
  background-color: #fff;
}
.midone-dash .side-nav .side-menu.side-menu--active::before, .midone-dash .side-nav .side-menu.side-menu--active::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52'%3E%3Cpath data-name='Path 143' d='M259.51 259.52c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828a237.651 237.651 0 0 0-7.292-8.589c-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3A115.051 115.051 0 0 0 0 .081h259.51Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.midone-dash .side-nav .side-menu.side-menu--active .side-menu__icon::before {
  background-color: #fff;
  z-index: 0;
}
.midone-dash .side-nav .side-menu .side-menu__icon svg {
  color: #000;
}
.midone-dash .side-nav .side-menu .side-menu__title {
  color: #000;
}
.os-page-tabs {
  margin-top: 15px;
  display: flex;
}

.os-page-tabs li {
  margin-right: 25px;
}

.os-page-tabs li a {
  padding: 15px 0px;
  white-space: nowrap;
  font-size: 20px;
  display: block;
  text-decoration: none;
  color: #8894AF;
  position: relative;
  outline: none;
}

.os-page-tabs .os-page-tab-active a:after {
  content: "";
  background-color: #0937ff;
  height: 1px;
  left: 0px;
  right: 0px;
  position: absolute;
  bottom: 0px;
}

.left-side-popup {
  transform: translate(0, -50%) !important;
  left: initial !important;
  right: 0;
  border-radius: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
}

.search-result {
  max-width: 450px;
  width: 100%;
  min-width: 400px;
}

.report-box__indicator {
  background: #84cc16;
}
.report-box__indicator.negative {
  background: #dc2626;
}
.report-box__indicator.negative svg {
  transform: rotate(180deg);
}

.svg-clock .hour_marker {
  fill: transparent;
  stroke: #000;
  stroke-width: 7;
  stroke-dasharray: 0.2, 4.8;
  stroke-dashoffset: 0.1;
}
.svg-clock .minute_marker {
  fill: transparent;
  stroke: #0f0e0e;
  stroke-width: 7;
  stroke-dasharray: 0.2, 0.8;
  stroke-dashoffset: 0.1;
}
.svg-clock .hand {
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
}
.svg-clock .hand--thick {
  stroke-width: 7;
}
.svg-clock .c-center {
  fill: #7b0828;
  stroke-width: 2;
  stroke: white;
}
.svg-clock .c-text {
  fill: #000;
  text-anchor: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.col-1224 {
  max-width: 1224px;
  padding: 0 8%;
  margin: 0 auto;
}
.col-1224.mt-full {
  margin-top: 200px;
}
.after-hours-barber-button {
 background-color: rgb(23, 23, 23);
 color: white

}
.management-index-button {
 background-color: rgb(23, 23, 23);
 color: white

}
.earning-stat-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100px;
  padding: 0 20px;
  
  background-color: rgb(0, 0, 0);
  box-shadow: 6px 6px 0px 0px #000;
}
.earning-stat-box .earning-stat-box-info {
  padding-left: 66px;
  position: relative;
}
.earning-stat-box .earning-stat-box-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.earning-stat-box .earning-stat-box-icon-wrap.stat-balance {
  background-color: rgb(0, 0, 0);
}
.earning-stat-box .earning-stat-box-title {
  font-size: 19px;
  font-weight: 700;
  color: #118C4F;
}
.earning-stat-box .earning-stat-box-text {
  margin-top: 2px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.earning-stat-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 100px;
  padding: 0 20px;
  
  background-color: rgb(0, 0, 0);
  box-shadow: 6px 6px 0px 0px #000;
}
.earning-stat-box .earning-stat-box-info {
  padding-left: 66px;
  position: relative;
}
.earning-stat-box .earning-stat-box-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.earning-stat-box .earning-stat-box-icon-wrap.stat-balance {
  background-color: rgb(0, 0, 0);
}
.earning-stat-box .earning-stat-box-title {
  font-size: 19px;
  font-weight: 700;
  color: #118C4F;
}
.earning-stat-box .earning-stat-box-text {
  margin-top: 2px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.user-stats {
  display: flex;
  justify-content: center;
}
.user-stats .user-stat {
  padding: 0 24px;
}
.user-stats .user-stat .user-stat-text, .user-stats .user-stat .user-stat-title {
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
.user-stats .user-stat .user-stat-text {
  margin-top: 10px;
  color: #ffffff;
  font-size: 0.6875rem;
}
.user-stats .user-stat .user-stat-title {
  font-size: 0.875rem;
}

.header-mobile-bar-v2 {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #615dfa;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background: #f0f0f0;
}
.header-mobile-bar-v2 .header-actions, .header-mobile-bar-v2 .header-brand {
  display: flex;
  align-items: center;
}
.header-mobile-bar-v2 .mobilemenu-trigger, .header-mobile-bar-v2 .sidemenu-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
}
.header-mobile-bar-v2 .header-actions.search-bar {
  height: 100%;
  margin-right: 0;
  width: 80%;
}
.header-mobile-bar-v2 .header-actions.search-bar .interactive-input {
  height: 100%;
}
.header-mobile-bar-v2 .header-actions .header-brand .logo {
  margin-left: 16px;
}
.header-mobile-bar-v2 .header-actions .header-brand .logo * {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
}

.burger-icon {
  width: 20px;
  height: 14px;
  position: relative;
}
.burger-icon .burger-icon-bar {
  height: 2px;
  background-color: #000;
  position: absolute;
  right: 0;
  transition: width 0.4s ease-in-out;
}
.burger-icon .burger-icon-bar:first-child {
  top: 0;
  width: 10px;
}
.burger-icon .burger-icon-bar:nth-child(2) {
  top: 6px;
  width: 14px;
}
.burger-icon .burger-icon-bar:nth-child(3) {
  top: 12px;
  width: 100%;
}
.burger-icon.inverted .burger-icon-bar {
  left: 0;
}
.burger-icon.inverted .burger-icon-bar:first-child {
  width: 100%;
}
.burger-icon.inverted .burger-icon-bar:nth-child(2) {
  width: 14px;
}
.burger-icon.inverted .burger-icon-bar:nth-child(3) {
  width: 10px;
}

.interactive-input {
  width: 100%;
  height: 52px;
  position: relative;
}
.interactive-input input {
  height: 100%;
  padding-right: 60px;
  background-color: #fff;
  color: #000;
  transition: border-color 0.2s ease-in-out;
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
}
.interactive-input input:focus {
  border: 0 !important;
}
.interactive-input input::-moz-placeholder {
  color: #000;
  font-size: 0.875rem;
  font-weight: 500;
}
.interactive-input input:-ms-input-placeholder {
  color: #000;
  font-size: 0.875rem;
  font-weight: 500;
}
.interactive-input input::placeholder {
  color: #000;
  font-size: 0.875rem;
  font-weight: 500;
}

.fixed-mobile-menu {
  position: fixed;
  z-index: 100000;
  width: 300px;
  background-color: #f0f0f0;
  box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06);
  margin: 0;
  top: 0;
  bottom: 0;
  padding: 0 16px;
  overflow-y: auto;
  transition: transform 0.35s ease-in-out;
}
.fixed-mobile-menu:not(.show-menu) {
  transform: translate(-100%);
}

.navigation-widget-info {
  min-height: 44px;
  padding: 8px 0 0 50px;
  position: relative;
}
.navigation-widget-info .user-avatar {
  width: 40px;
  height: 40px;
}
.navigation-widget-info .user-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.navigation-widget-info .navigation-widget-info-text {
  margin-top: 4px;
  color: #8f91ac;
  font-size: 0.75rem;
  font-weight: 500;
}
.navigation-widget-info .navigation-widget-info-title {
  font-size: 0.875rem;
  font-weight: 700;
}

.wj-onboard-setup-w {
  margin: 40px auto;
  background-color: #fff;
  width: 580px;
  border-radius: 0px;
  position: relative;
  border-radius: 4px;
  border: 1px solid #e3e4ec;
  -webkit-animation: 0.5s cubic-bezier(0.25, 1.3, 0.5, 1.15) 0s wizardWrapperAnimation;
          animation: 0.5s cubic-bezier(0.25, 1.3, 0.5, 1.15) 0s wizardWrapperAnimation;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  max-width: 100%;
}
.wj-onboard-setup-w .wj-onboard-close-trigger {
  position: absolute;
  top: -25px;
  line-height: 1.2;
  right: 0px;
  font-size: 12px;
  color: #b71638;
}
.wj-onboard-setup-w .wj-onboard-close-trigger span {
  display: inline-block;
  vertical-align: middle;
}
.wj-onboard-setup-w .wj-onboard-close-trigger i {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  font-size: 16px;
}
.wj-onboard-setup-w.is-sub-editing .wj-onboard-footer {
  display: none;
}
.wj-onboard-setup-w .wj-onboard-setup-i {
  display: flex;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w {
  flex: 0 0 220px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  text-align: left;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .logo-w {
  background-color: #0937ff;
  padding: 18px;
  padding-left: 30px;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .logo-w img {
  width: 35px;
  height: auto;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-steps {
  padding-top: 20px;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step {
  padding: 20px 20px 20px 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step .ws-number {
  color: #0937ff;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 3px;
  font-size: 14.4px;
  opacity: 0.5;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step .ws-name {
  font-size: 19.2px;
  color: #0E3280;
  opacity: 0.4;
  font-weight: 500;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step.current .ws-number {
  color: #0937ff;
  opacity: 1;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step.current .ws-name {
  opacity: 1;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step.complete .ws-number {
  color: #52B69A;
  opacity: 1;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step.complete .ws-name {
  text-decoration: line-through;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-steps-w .wj-onboard-step:last-child {
  border-bottom: none;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-step-content-w {
  flex: 1;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-step-content-w .wj-onboard-next-btn .latepoint-icon {
  transition: transform 0.2s ease;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-step-content-w .wj-onboard-next-btn:hover .latepoint-icon {
  transform: translateX(5px);
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-step-content-w .wj-onboard-prev-btn .latepoint-icon {
  transition: transform 0.2s ease;
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-step-content-w .wj-onboard-prev-btn:hover .latepoint-icon {
  transform: translateX(-5px);
}
.wj-onboard-setup-w .wj-onboard-setup-i .wj-onboard-step-content-w .wj-onboard-step-content {
  padding: 40px;
}
.wj-onboard-setup-w .wj-onboard-sub-header {
  color: #0937ff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 15px;
  margin-bottom: 0px;
  margin-top: 0px;
  text-align: center;
}
.wj-onboard-setup-w .wj-onboard-header {
  font-size: 33px;
  margin: 10px 0px 10px 0px;
  text-align: center;
}
.wj-onboard-setup-w .wj-onboard-desc {
  color: #8894AF;
  margin-bottom: 30px;
  text-align: center;
  font-size: 17px;
  line-height: 1.3;
}
.wj-onboard-setup-w .os-form-w {
  margin: 0px;
}
.wj-onboard-setup-w .os-form-w form > .os-form-group:last-child {
  margin-bottom: 0px;
}
.wj-onboard-setup-w.step-intro {
  text-align: center;
  width: 450px;
}
.wj-onboard-setup-w.step-intro .wj-onboard-step-content {
  padding: 70px;
}
.wj-onboard-setup-w.step-intro .wj-onboard-steps-w, .wj-onboard-setup-w.step-intro .wj-onboard-footer {
  display: none;
}
.wj-onboard-setup-w.step-intro .wj-onboard-logo-w {
  margin-bottom: 50px;
}
.wj-onboard-setup-w.step-intro .wj-onboard-logo-w .latepoint-icon {
  font-size: 70px;
  color: #0937ff;
}
.wj-onboard-setup-w.step-intro .latepoint-btn {
  padding: 15px 25px 18px 30px !important;
}
.wj-onboard-setup-w.step-intro .latepoint-btn i {
  margin-left: 20px;
}
.wj-onboard-setup-w.step-complete {
  text-align: center;
}
.wj-onboard-setup-w.step-complete .wj-onboard-steps-w, .wj-onboard-setup-w.step-complete .wj-onboard-footer {
  display: none;
}
.wj-onboard-setup-w.step-complete .latepoint-btn {
  padding: 15px 25px 18px 30px !important;
}
.wj-onboard-setup-w.step-complete .latepoint-btn i {
  margin-left: 20px;
}
.wj-onboard-setup-w.step-agents .agent-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w {
  background-color: #fff;
  border: 1px solid #e3e4ec;
  padding: 15px;
  flex: 0 0 30%;
  text-align: center;
  margin-right: 5%;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w.os-loading:after {
  display: block;
  content: "";
  width: 82px !important;
  height: 82px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
  top: 50px;
  transform: translateX(-50%);
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w:nth-child(n+4) {
  margin-top: 5%;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w:nth-child(3n+3) {
  margin-right: 0px;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w:hover {
  border-color: #0937ff;
  transform: translateY(-3px);
  box-shadow: 0px 0px 0px 1px #0937ff;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w:hover .agent-name {
  color: #0937ff;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w:hover .agent-edit-icon, .wj-onboard-setup-w.step-agents .agent-boxes .agent-box-w:hover .agent-remove-trigger {
  opacity: 1;
  transform: translateX(0px);
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-avatar {
  width: 70px;
  height: 70px;
  background-size: cover;
  background-position: center center;
  margin: 0px auto;
  margin-bottom: 10px;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-name {
  font-weight: 500;
  color: #1B3164;
  font-size: 19.2px;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-edit-icon {
  transform: translateX(10px);
  display: block;
  position: absolute;
  line-height: 1;
  top: 0px;
  left: 0px;
  color: #0937ff;
  font-size: 14px;
  padding: 5px;
  opacity: 0;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-edit-icon:hover {
  transform: scale(1.3);
  opacity: 1;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-remove-trigger {
  transform: translateX(-10px);
  display: block;
  color: #E88181;
  font-size: 14px;
  padding: 5px;
  line-height: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-agents .agent-boxes .agent-remove-trigger:hover {
  color: #ff2222;
  transform: scale(1.3);
}
.wj-onboard-setup-w.step-agents .add-agent-box {
  border: 3px dotted #E0E6EB;
  border-radius: 4px;
  flex: 0 0 30%;
  text-align: center;
  padding: 18px;
  cursor: pointer;
  margin: 0px;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-agents .add-agent-box:nth-child(n+4) {
  margin-top: 5%;
}
.wj-onboard-setup-w.step-agents .add-agent-box.os-loading {
  -webkit-animation: animate_appointment_small_box 0.8s ease infinite;
          animation: animate_appointment_small_box 0.8s ease infinite;
}
.wj-onboard-setup-w.step-agents .add-agent-box.os-loading .add-agent-plus {
  color: rgba(255, 255, 255, 0.4);
}
.wj-onboard-setup-w.step-agents .add-agent-box.os-loading .add-agent-plus:after {
  display: block;
  content: "";
  width: 42px !important;
  height: 42px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.wj-onboard-setup-w.step-agents .add-agent-box .add-agent-graphic-w {
  width: 80px;
  height: 80px;
  margin: 0px auto;
  margin-bottom: 10px;
  position: relative;
}
.wj-onboard-setup-w.step-agents .add-agent-box .add-agent-graphic-w .add-agent-graphic {
  position: relative;
  overflow: hidden;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.wj-onboard-setup-w.step-agents .add-agent-box .add-agent-graphic-w .add-agent-graphic .add-agent-head {
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background-color: #eaeef4;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.wj-onboard-setup-w.step-agents .add-agent-box .add-agent-graphic-w .add-agent-graphic .add-agent-body {
  border-radius: 50%;
  height: 65px;
  width: 65px;
  background-color: #eaeef4;
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, 0%);
}
.wj-onboard-setup-w.step-agents .add-agent-box .add-agent-graphic-w .add-agent-plus {
  position: absolute;
  top: 25%;
  left: 55%;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  background-color: #0937ff;
  box-shadow: 0px 0px 0px 10px rgba(189, 214, 252, 0.3);
  color: #fff;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-agents .add-agent-box .add-agent-graphic-w .add-agent-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 10px;
  transform: translate(-45%, -47%);
}
.wj-onboard-setup-w.step-agents .add-agent-box .add-agent-label {
  color: #0937ff;
  font-weight: 500;
  font-size: 19.2px;
}
.wj-onboard-setup-w.step-agents .add-agent-box:hover {
  border-color: #0937ff;
  transform: translateY(-3px);
}
.wj-onboard-setup-w.step-agents .add-agent-box:hover .add-agent-plus {
  transform: scale(1.3);
  box-shadow: 0px 0px 0px 12px rgba(189, 214, 252, 0.3);
}
.wj-onboard-setup-w.step-services .sub-header {
  text-align: center;
  font-size: 23px;
  margin-bottom: -13px;
}
.wj-onboard-setup-w.step-services .sub-header span {
  display: inline-block;
  padding: 0px 10px;
  background-color: #fff;
}
.wj-onboard-setup-w.step-services .os-agents-selector {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 20px;
  border: 2px solid #f3f5f7;
  border-radius: 4px;
  padding: 15px;
  display: flex;
  border-radius: 3px;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent {
  flex: 0 0 29%;
  border-radius: 4px;
  background-color: #F3F5F7;
  border: 2px solid #F3F5F7;
  margin: 2%;
  padding: 15px 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent:before {
  background-color: #fff;
  color: #fff;
  padding: 2px;
  font-size: 12px;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\EE\A4\201E";
  position: absolute;
  top: 15px;
  left: 7px;
  display: block;
  border-radius: 5px;
  transform: translateY(-50%);
  box-shadow: inset 0px 0px 0px 2px #DDE3ED;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent:hover {
  border-color: #0937ff;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent.active {
  border-color: #0937ff;
  background-color: #F1F5FF;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent.active:before {
  background-color: #0937ff;
  box-shadow: none;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent.active .agent-name {
  color: #0028d5;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent.active:hover {
  background-color: #fff;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent-avatar {
  background-size: cover;
  background-position: center center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0px auto;
  margin-bottom: 10px;
}
.wj-onboard-setup-w.step-services .os-agents-selector .agent-name {
  font-weight: 500;
  color: #1B3164;
  font-size: 17.6px;
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w {
  padding: 13px;
  background-color: #fff;
  border: 1px solid #e3e4ec;
  border-radius: 3px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w.os-loading:after {
  display: block;
  content: "";
  width: 15px !important;
  height: 15px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
  right: 4px;
  left: auto;
  transform: translateY(-50%);
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w.os-loading .service-remove-trigger {
  color: transparent;
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w:hover {
  border-color: #0937ff;
  box-shadow: 0px 0px 0px 1px #0937ff;
  transform: translateY(-3px);
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w .service-image-placeholder {
  width: 40px;
  height: 40px;
  position: relative;
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w .service-image-placeholder:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\EE\A5\2DC";
  position: absolute;
  top: 50%;
  left: 50%;
  color: #dde1e9;
  transform: translate(-50%, -50%);
  font-size: 30px;
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w .service-image {
  width: 40px;
  height: 40px;
  background-size: cover;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w .service-name {
  font-weight: 500;
  color: #1B3164;
  font-size: 19.2px;
  margin-right: auto;
  margin-left: 15px;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-services .service-boxes .service-box-w:last-child {
  margin-bottom: 0px;
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box {
  padding: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 3px dotted #E0E6EB;
  border-radius: 3px;
  transition: all 0.2s ease;
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box.os-loading {
  -webkit-animation: animate_appointment_small_box 0.8s ease infinite;
          animation: animate_appointment_small_box 0.8s ease infinite;
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box.os-loading .add-service-plus {
  color: rgba(255, 255, 255, 0.4);
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box.os-loading .add-service-plus:after {
  display: block;
  content: "";
  width: 42px !important;
  height: 42px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box .add-service-graphic-w {
  width: 40px;
  height: 40px;
  position: relative;
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box .add-service-graphic-w .add-service-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  background-color: #0937ff;
  box-shadow: 0px 0px 0px 10px rgba(189, 214, 252, 0.3);
  color: #fff;
  transform: translate(-50%, -50%);
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box .add-service-graphic-w .add-service-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 10px;
  transform: translate(-45%, -47%);
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box .add-service-label {
  color: #0937ff;
  font-weight: 500;
  font-size: 19.2px;
  margin-left: 15px;
}
.wj-onboard-setup-w.step-services .service-boxes .add-service-box:hover {
  border-color: #0937ff;
  transform: translateY(-3px);
}
.wj-onboard-setup-w.step-services .service-boxes .service-agents {
  display: flex;
}
.wj-onboard-setup-w.step-services .service-boxes .service-agents .agents-avatars {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.wj-onboard-setup-w.step-services .service-boxes .service-agents .agents-avatars .agent-avatar {
  width: 22px;
  height: 22px;
  display: block;
  background-size: cover;
  border-radius: 30px;
  box-shadow: 0px 0px 0px 4px #F3F5F7;
}
.wj-onboard-setup-w.step-services .service-boxes .service-agents .agents-avatars .agent-avatar + .agent-avatar {
  margin-left: -2px;
}
.wj-onboard-setup-w.step-services .service-boxes .service-agents .agents-avatars .agents-more {
  background-color: #fff;
  padding: 2px 3px;
  z-index: 4;
  font-size: 12.8px;
  font-weight: 500;
  border-radius: 0px;
  line-height: 1.1;
  white-space: nowrap;
  margin-left: -5px;
}
.wj-onboard-setup-w.step-services .service-boxes .service-remove-trigger {
  color: #E88181;
  font-size: 10px;
  line-height: 1;
  margin-left: 20px;
  cursor: pointer;
  transition: all 0.1s ease;
}
.wj-onboard-setup-w.step-services .service-boxes .service-remove-trigger:hover {
  color: #ff2222;
  transform: scale(1.4);
}
.wj-onboard-setup-w .wj-onboard-footer {
  padding: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wj-onboard-setup-w .wj-onboard-footer .latepoint-btn {
  border-radius: 0px;
  padding: 15px 25px;
  font-weight: 500;
}
.wj-onboard-setup-w .wj-onboard-footer .wj-onboard-next-btn, .wj-onboard-setup-w .wj-onboard-footer .wj-onboard-prev-btn {
  text-decoration: none;
  box-shadow: none;
}
.wj-onboard-setup-w .wj-onboard-footer .wj-onboard-next-btn:hover, .wj-onboard-setup-w .wj-onboard-footer .wj-onboard-next-btn:focus {
  text-decoration: none;
  box-shadow: none;
}
.wj-onboard-setup-w .wj-onboard-footer .wj-onboard-prev-btn:hover, .wj-onboard-setup-w .wj-onboard-footer .wj-onboard-prev-btn:focus {
  text-decoration: none;
  box-shadow: none;
}
.wj-onboard-setup-w .wj-onboard-footer .wj-onboard-next-btn {
  margin-left: auto;
}
.wj-onboard-setup-w .wj-onboard-footer .wj-onboard-prev-btn {
  margin-right: auto;
}
.wj-onboard-setup-w .wj-onboard-footer > a {
  box-shadow: none;
  text-decoration: none;
}
.wj-onboard-setup-w .wj-onboard-footer > a i, .wj-onboard-setup-w .wj-onboard-footer > a span {
  display: inline-block;
  vertical-align: middle;
}
.wj-onboard-setup-w .wj-onboard-footer > a i + span, .wj-onboard-setup-w .wj-onboard-footer > a span + i {
  margin-left: 10px;
}

.wj-image-selector-w {
  position: relative;
}
.wj-image-selector-w.active .wj-image-container svg {
  display: none;
}
.wj-image-selector-w.active .wj-image-container img {
  display: block;
}
.wj-image-selector-w:not(.active) .wj-image-container svg {
  display: block;
}
.wj-image-selector-w:not(.active) .wj-image-container img {
  display: none;
}
.wj-image-selector-w .wj-image-container {
  position: relative;
}

.wj-image-selector-w .wj-image-container::after {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  z-index: 60;
  pointer-events: none;
}

.wj-image-selector-w input[type=file] {
  position: absolute;
  cursor: pointer;
  z-index: 59;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  top: 0;
}
.wj-image-selector-w .wj-image-selector-trigger {
  outline: none;
  box-shadow: none;
  border: 3px dotted #000;
  margin-bottom: 25px;
  padding: 10px;
  display: block;
  border-radius: 4px;
}
.wj-image-selector-w .wj-image-selector-trigger:hover {
  border-color: #0937ff;
}
.wj-image-selector-w .wj-image-selector-trigger:hover .os-image-selector-text {
  color: #0937ff;
}
.wj-image-selector-w.is-avatar .wj-image-container {
  border-radius: 0%;
  width: 50px;
  height: 50px;
  background-color: #000000;
}
.wj-image-selector-w .wj-image-container {
  border: none;
  border-radius: 3px;
  width: 50px;
  height: 50px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.wj-image-selector-w .wj-image-container img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.wj-image-selector-w .wj-image-container.has-image:before {
  display: none;
}
.wj-image-selector-w .wj-image-selector-text {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  margin-left: 20px;
  color: #8894AF;
  font-size: 19.2px;
}

.weekday-schedule-w {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.weekday-schedule-w:last-child {
  border-bottom: none;
}
.weekday-schedule-w.day-off .ws-day-name {
  color: #C45252;
}
.weekday-schedule-w.day-off .ws-day-name:after {
  width: 100%;
}
.weekday-schedule-w.day-off .ws-head:hover .ws-day-name {
  border-bottom-color: transparent;
}
.weekday-schedule-w.day-off .ws-head .ws-day-hours, .weekday-schedule-w.day-off .ws-head .wp-edit-icon {
  display: none;
}
.weekday-schedule-w.day-off .weekday-schedule-form {
  display: none;
}
.weekday-schedule-w .ws-head-w {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.weekday-schedule-w .ws-head-w .sandy-switch .sandy-switch-input:checked + .sandy-switch-in .sandy-switch-box::before {
  transform: translateX(8.5px);
}
.weekday-schedule-w .ws-head-w .sandy-switch-box {
  width: 23px;
  height: 14px;
}
.weekday-schedule-w .ws-head-w .sandy-switch-box::before {
  width: 8px;
  height: 8px;
  top: 0px;
  right: -1px;
}
.weekday-schedule-w .ws-head {
  flex: 1;
  margin-left: 15px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 15px 0px;
}
.weekday-schedule-w .ws-head .wp-edit-icon {
  font-size: 14px;
  color: #0937ff;
  position: absolute;
  top: 56%;
  right: 0px;
  transform: translate(0%, -50%);
}
.weekday-schedule-w .ws-head:hover .ws-day-name {
  border-bottom: 1px solid #38406d;
}
.weekday-schedule-w .ws-day-name {
  color: #38406d;
  font-size: 19px;
  font-weight: 500;
  position: relative;
  margin-right: 20px;
  border-bottom: 1px solid transparent;
}
.weekday-schedule-w .ws-day-name:after {
  width: 0%;
  background-color: #C45252;
  opacity: 0.7;
  height: 2px;
  top: 55%;
  left: 0px;
  position: absolute;
  transform: translateY(-50%);
  content: "";
  display: block;
}
.weekday-schedule-w .ws-day-hours {
  text-align: right;
  color: #8894AF;
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
  cursor: pointer;
  padding-right: 25px;
}
.weekday-schedule-w .ws-day-hours span {
  display: inline-block;
  vertical-align: middle;
}
.weekday-schedule-w .ws-day-hours span:hover {
  color: #0937ff;
}
.weekday-schedule-w .ws-day-hours span + span {
  margin-left: 5px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  padding-left: 5px;
}
.weekday-schedule-w.is-editing .weekday-schedule-form {
  display: block;
}

.weekday-schedule-form {
  padding-bottom: 20px;
  padding-top: 5px;
  text-align: center;
  display: none;
}
.weekday-schedule-form.active {
  display: block;
}
.weekday-schedule-form .ws-period-add {
  border: 2px dashed #E0E6EB;
  display: block;
  background-color: #fff;
  box-shadow: none;
  padding: 5px;
  margin: 0px;
  color: #738db3;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 4px;
}
.weekday-schedule-form .ws-period-add:hover {
  border-color: #0937ff;
  color: #0937ff;
}
.weekday-schedule-form .ws-period-add .add-period-graphic-w {
  width: 30px;
  height: 30px;
  position: relative;
}
.weekday-schedule-form .ws-period-add .add-period-graphic-w .add-period-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  transform: translate(-50%, -50%);
}
.weekday-schedule-form .ws-period-add .add-period-graphic-w .add-period-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(-50%, -50%);
}
.weekday-schedule-form .ws-period-add .add-period-label {
  color: #8894AF;
  font-weight: 500;
  font-size: 16px;
  margin-left: 5px;
}
.weekday-schedule-form .ws-period-add.os-loading .latepoint-icon {
  display: none !important;
}
.weekday-schedule-form .ws-period-add.os-loading:after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
}

.wj-time-group {
  margin: 0px;
  margin-bottom: 15px;
}
.wj-time-group .wj-time-input-fields {
  display: flex;
  align-items: center;
}
.wj-time-group .time-ampm-w {
  display: flex;
  background: #F5F6FA;
  border: 1px solid #E0E6F0;
  border-radius: 4px;
  margin-left: 5px;
}
.wj-time-group .time-ampm-w .time-ampm-select {
  padding: 4px 5px 5px 5px;
  line-height: 1;
  font-weight: 500;
  color: #8894AF;
  cursor: pointer;
  font-size: 14.4px;
}
.wj-time-group .time-ampm-w .time-ampm-select.active {
  background: #FFFFFF;
  box-shadow: 0px 0px 0px 1px #0937ff, 0 1px 2px 0 rgba(46, 87, 243, 0.18);
  border-radius: 4px;
  color: #0937ff;
}
.wj-time-group label {
  display: block;
  margin: 0px;
  font-size: 16px;
  color: #9A9FB1;
  font-weight: 500;
}
.wj-time-group .wj-form-control {
  font-size: 14px;
  flex: 0 0 60px;
  padding: 3px 2px !important;
  line-height: 1;
  margin: 0px;
  border: 1px solid #EDEFF6;
  background-color: #EDEFF6;
  border-radius: 3px;
  text-align: center;
  box-shadow: none;
  width: 90px;
  max-width: 90px;
}
.wj-time-group .wj-form-control:focus {
  border-color: #0937ff;
}
.wj-time-group + .wj-time-group {
  border-top: 1px solid #E0E6F0;
}
.wj-time-group.as-period {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 0px;
}
.wj-time-group.as-period label {
  padding-right: 10px;
  padding-left: 5px;
}
.wj-time-group.as-period input.wj-form-control {
  margin-left: auto;
}
.wj-time-group.as-period .wj-time-input-fields {
  margin-left: auto;
  justify-content: flex-end;
}

.booking-wrapper {
  display: flex;
  flex-grow: 1;
  flex-basis: auto;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  max-height: 100%;
}
@media (min-width: 992px) {
  .booking-wrapper {
    flex-direction: row;
    overflow-y: hidden;
  }
}
@media (min-width: 992px) {
  .booking-wrapper .booking-left, .booking-wrapper .booking-right {
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.booking-wrapper .sandy-tabs .sandy-tabs-link {
  line-height: 16px;
  display: block;
  position: relative;
  padding: 16px 0;
  color: #878c93;
  text-decoration: none;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
  border: none;
  background-color: transparent;
  outline: none;
  white-space: nowrap;
  transition: color 0.1s linear 0s;
  margin: auto 16px;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
@media (min-width: 992px) {
  .booking-wrapper .sandy-tabs .sandy-tabs-link {
    font-size: 15px;
  }
}
.booking-wrapper .sandy-tabs .sandy-tabs-link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  display: block;
  height: 4px;
  content: "";
  opacity: 0;
  transition: opacity 0.1s linear 0s;
  background-color: #101928;
  border-radius: 3px;
}
.booking-wrapper .sandy-tabs .sandy-tabs-link.active::after {
  opacity: 1;
}
.booking-wrapper .booking-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .booking-wrapper .booking-left {
    flex-basis: 33.3%;
    min-width: 400px;
    max-width: 448px;
    flex-grow: 0;
    order: 1;
    border-left: 1px solid #dee3e7;
    background-color: #fff;
  }
}
.booking-wrapper .booking-right {
  position: relative;
  flex-basis: 66.7%;
  flex-shrink: 1;
  flex-grow: 1;
  background: none;
}

.booking-wrapper-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  position: relative;
  height: 56px;
}
@media (min-width: 992px) {
  .booking-wrapper-header {
    padding: 14px 0;
    min-height: 66px;
    height: auto;
  }
}
.booking-wrapper-header::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid #dee3e7;
  padding-bottom: 1px;
}

.booking-form {
  position: relative;
  padding: 3rem 4rem;
}
.booking-form::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 4rem;
  right: initial;
  border-left: 3px dashed rgba(0, 0, 0, 0.11);
  margin: 0 0 0 6px;
}
@media (max-width: 992px) {
  .booking-form {
    padding: 3rem 10px;
  }
  .booking-form::before {
    left: 10px;
  }
}
.booking-form .booking-form-inner {
  position: relative;
  font-size: 0.95rem;
  padding: 0 0 0 calc(3rem + 6px);
}
.booking-form .booking-timeline-dot {
  position: absolute;
  top: -1px;
  left: -5px;
  right: initial;
  margin: 0px 2px;
}
.booking-form .booking-timeline-dot .booking-timeline-dot-inner {
  width: 20px;
  height: 20px;
  border: 2px solid #dee3e7;
  border-radius: 550px;
  background: #fff;
}
.booking-form .booking-timeline-desc {
  margin: 0px 0px 3rem;
  color: rgba(73, 73, 73, 0.71);
  font-size: 0.8rem;
  text-transform: capitalize;
}
.booking-form .booking-timeline-desc::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0px;
  right: initial;
  border-top: 2px dashed rgba(0, 0, 0, 0.11);
  margin: 0 6px;
  width: 2.5rem;
}

.auth-contain-switch {
  flex-grow: 1;
}
.auth-contain-switch .auth-contain-title {
  padding: 0 0 40px 0;
}
.auth-contain-switch .auth-contain-title p {
  font-size: 28px;
  font-weight: 800;
  line-height: 36px;
}
.auth-contain-switch .auth-contain-card {
  width: 560px;
  padding: 40px 40px 40px 40px;
  box-shadow: 0 4px 8px 0 rgba(16, 25, 40, 0.1);
  border-radius: 16px;
}
.auth-contain-switch .auth-contain-card .auth-contain-card-title {
  font-size: 32px;
  color: #101928;
  font-weight: 800;
  line-height: 40px;
}
.auth-contain-switch .auth-contain-card .auth-contain-card-desc {
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  color: #101928;
  margin-top: 4px;
}

.update-pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: -1px 3px 15px 0 rgba(0, 0, 0, 0.06);
  margin-bottom: 1rem;
  padding: 8px 12px 8px 8px;
  border-radius: 10px;
}
.update-pill .inner-tag {
  height: 26px;
  background: #f55;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0 8px;
  line-height: 2.2;
  border-radius: 8px;
}
.update-pill .inner-text {
  color: #8e9baf;
  font-size: 0.9rem;
  margin-left: 8px;
}

.hero-image-composition-4 .image-wrap {
  min-height: 580px;
  margin: 0 auto;
  width: 100%;
}
.hero-image-composition-4 .image-wrap .inner-image {
  position: absolute;
  bottom: 0.75rem;
  right: -10%;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 740px;
  z-index: 2;
}
.hero-image-composition-4 .image-wrap .perspective {
  position: absolute;
  top: 10%;
  right: -2%;
  width: 100%;
  max-width: 720px;
  min-height: 410px;
  background: #f55;
  border-radius: 2rem;
  box-shadow: 0 14px 26px -12px rgba(255, 85, 85, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 85, 85, 0.2) !important;
  transform-origin: center center;
  transform: perspective(600px) rotatey(-18deg);
  z-index: 1;
}
.hero-image-composition-4 .image-wrap .person-bubble {
  position: absolute;
  background: #fff;
  padding: 0.85rem 1.25rem 0.85rem 0.85rem;
  border: 1px solid #dbdbdb;
  border-radius: 50rem;
  box-shadow: -1px 3px 15px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  min-width: 230px;
  z-index: 4;
}
.hero-image-composition-4 .image-wrap .person-bubble.person-bubble-1 {
  bottom: 30%;
  right: -16%;
}
.hero-image-composition-4 .image-wrap .person-bubble.person-bubble-2 {
  top: 44%;
  right: 38%;
}
.hero-image-composition-4 .image-wrap .person-bubble img {
  height: 40px;
  width: 40px;
  min-width: 40px;
  border-radius: 50%;
}
.hero-image-composition-4 .image-wrap .person-bubble .bubble-content {
  flex-grow: 2;
  margin-left: 0.75rem;
}
.hero-image-composition-4 .image-wrap .person-bubble .bubble-content span {
  display: block;
  border-radius: 5rem;
  height: 0.75rem;
  background: #ededed;
}
.hero-image-composition-4 .image-wrap .person-bubble .bubble-content span:first-child {
  margin-bottom: 0.25rem;
  max-width: 80%;
}
.hero-image-composition-4 .image-wrap .person-bubble .bubble-content span:nth-child(2) {
  max-width: 50%;
}
.hero-image-composition-4 .image-wrap .half-circle {
  position: absolute;
  height: 26px;
  width: 52px;
  border-top-left-radius: 52px;
  border-top-right-radius: 52px;
  z-index: 3;
}
.hero-image-composition-4 .image-wrap .half-circle.half-circle-1 {
  top: 27%;
  right: 52%;
  transform: rotate(-35deg);
  background: #06d6a0;
}
.hero-image-composition-4 .image-wrap .half-circle.half-circle-2 {
  top: 2%;
  right: 5%;
  transform: rotate(65deg) scale(0.8);
  background: #e62965;
}

@media only screen and (max-width: 767px) {
  .hero-image-composition-4 .image-wrap {
    min-height: 280px;
  }
  .hero-image-composition-4 .image-wrap .inner-image {
    right: 0;
  }
  .hero-image-composition-4 .image-wrap .perspective {
    min-height: 225px;
    top: initial;
    right: 1%;
    bottom: 5%;
  }
  .hero-image-composition-4 .image-wrap .half-circle {
    z-index: 0;
  }
  .hero-image-composition-4 .image-wrap .half-circle.half-circle-1 {
    top: 27%;
    left: -15%;
    right: initial;
  }
  .hero-image-composition-4 .image-wrap .half-circle.half-circle-2 {
    top: 12%;
    right: 5%;
  }
  .hero-image-composition-4 .image-wrap .person-bubble {
    transform: scale(0.6);
  }
  .hero-image-composition-4 .image-wrap .person-bubble.person-bubble-1 {
    bottom: 17%;
    right: -35%;
  }
  .hero-image-composition-4 .image-wrap .person-bubble.person-bubble-2 {
    top: initial;
    bottom: 5%;
    right: 45%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-image-composition-4 .image-wrap .inner-image {
    right: -2%;
  }
  .hero-image-composition-4 .image-wrap .perspective {
    top: 42%;
    right: 8%;
  }
  .hero-image-composition-4 .image-wrap .person-bubble.person-bubble-2 {
    top: 75%;
    left: -3%;
    right: initial;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .hero-image-composition-4 .image-wrap .inner-image {
    max-width: 660px;
  }
  .hero-image-composition-4 .image-wrap .perspective {
    top: 20%;
    right: 2%;
    max-width: 545px;
    min-height: 400px;
  }
  .hero-image-composition-4 .image-wrap .person-bubble.person-bubble-2 {
    top: 50%;
    right: 34%;
  }
}
.hero-image-composition-5 {
  padding: 31px;
}
@media (max-width: 768px) {
  .hero-image-composition-5 .banner_title h1 {
    font-size: 40px;
  }
}
.hero-image-composition-5 .banner_title p {
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .hero-image-composition-5 .banner_title p {
    font-size: 1rem;
  }
}
.hero-image-composition-5 .hero-image-composition-5-inner .main-img-wrap {
  position: relative;
}
@media (min-width: 480px) {
  .hero-image-composition-5 .hero-image-composition-5-inner .main-img-wrap {
    bottom: -47px;
    left: 0;
  }
}
@media (min-width: 576px) {
  .hero-image-composition-5 .hero-image-composition-5-inner .main-img-wrap {
    bottom: -47px;
    left: 0;
  }
}
@media (min-width: 768px) {
  .hero-image-composition-5 .hero-image-composition-5-inner .main-img-wrap {
    position: absolute;
    bottom: -47px;
    left: 0;
  }
}
@media (min-width: 1200px) {
  .hero-image-composition-5 .hero-image-composition-5-inner .main-img-wrap {
    position: absolute;
    bottom: -500px;
    left: -31px;
    padding: 42px;
  }
}

.section-boxes-wrap > div {
  background: #f6f6f6;
  padding: 19px;
  border-radius: 15px;
}

.white-box-wrap .white-box {
  margin-bottom: 20px;
  background-color: #fff;
  border: 2px solid #000000;
  border-radius: 0px;
}
.white-box-wrap .white-box .white-box-header .white-box-sub-header {
  padding: 15px 20px 15px 40px;
  margin-bottom: 0px;
  border-bottom: 1px solid #e7eaf3;
  margin-top: 0px;
  position: relative;
  display: flex;
  align-items: center;
}
.white-box-wrap .white-box .white-box-header .white-box-sub-header::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #e5e2e2;
  position: absolute;
  top: 20px;
  left: 15px;
  border-radius: 550px;
}
.white-box-wrap .white-box .white-box-header .white-box-sub-header h3 {
  color: #000000;
  margin: 0px;
  padding: 0px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
}
.white-box-wrap .white-box .white-box-content {
  padding: 20px;
}

.wj-image-selector-w.is-120 {
  height: 120px;
}
.wj-image-selector-w.is-120.is-overflow {
  width: 140px;
  flex: 0 0 140px;
}
.wj-image-selector-w.is-120 .wj-image-selector-trigger {
  height: 100%;
}

.small-card-images {
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  height: 120px;
}
.small-card-images.is-overflow {
  width: 140px;
  flex: 0 0 140px;
}
.small-card-images:hover .action-right, .small-card-images:hover .action-left {
  transform: translateX(0px);
  opacity: 1;
}
.small-card-images .small-card-images-inner {
  position: relative;
  padding: 24px 20px;
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.2s ease;
  height: 100%;
}
.small-card-images .small-card-images-inner img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.small-card-images .action-right {
  right: 0px;
  color: #d24646;
  transform: translateX(-10px);
  border-radius: 0 0 0 5px;
}
.small-card-images .action-left {
  left: 0px;
  transform: translateX(10px);
  border-radius: 0 0 5px 0;
}
.small-card-images .action-right, .small-card-images .action-left {
  position: absolute;
  top: 0px;
  font-size: 14px;
  padding: 10px;
  text-decoration: none;
  line-height: 1;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 9999;
  outline: none;
  box-shadow: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.ws-period {
  border: 1px solid #E0E6F0;
  font-size: 14.4px;
  align-items: center;
  background-color: #fff;
  position: relative;
  margin-bottom: 15px;
  border-radius: 4px;
}

.custom-day-work-periods .add-custom-day-w {
  border: 3px dotted rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  margin-right: 15px;
  width: 140px;
  flex: 0 0 140px;
  text-align: center;
  position: relative;
  cursor: pointer;
  display: block;
  outline: none;
  box-shadow: none;
  min-height: 115px;
  border-radius: 3px;
}
.custom-day-work-periods .add-custom-day-w .add-custom-day-i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.custom-day-work-periods .add-custom-day-w .add-day-graphic-w {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 0px auto;
}
.custom-day-work-periods .add-custom-day-w .add-day-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  background-color: #0937ff;
  box-shadow: 0px 0px 0px 10px rgba(208, 213, 220, 0.3);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.custom-day-work-periods .add-custom-day-w .add-day-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 10px;
  transform: translate(-45%, -47%);
  transition: all 0.2s ease;
}
.custom-day-work-periods .add-custom-day-w:hover {
  border-color: #0937ff;
  border-style: solid;
}
.custom-day-work-periods .add-custom-day-w:hover .add-day-plus {
  box-shadow: 0px 0px 0px 15px rgba(208, 213, 220, 0.3);
  transform: translate(-50%, -50%) scale(1.2);
}
.custom-day-work-periods .add-custom-day-w:hover .add-day-label {
  transform: translateY(5px);
}
.custom-day-work-periods .add-custom-day-w .add-day-label {
  color: #0937ff;
  font-weight: 500;
  font-size: 19.2px;
  margin-top: 5px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.custom-day-work-periods .add-custom-day-w.os-loading .add-day-plus {
  color: rgba(255, 255, 255, 0.4);
}
.custom-day-work-periods .add-custom-day-w.os-loading .add-day-plus:after {
  display: block;
  content: "";
  width: 52px !important;
  height: 52px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}

.custom-day-work-period {
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  width: 140px;
  flex: 0 0 140px;
  height: 120px;
}
.custom-day-work-period:hover {
  transform: translateY(-5px);
}
.custom-day-work-period:hover .custom-day-work-period-i {
  box-shadow: 0 15px 30px 0 rgba(108, 120, 143, 0.2), 0 1px 3px 0 rgba(170, 179, 197, 0.9);
}
.custom-day-work-period:hover .remove-custom-day, .custom-day-work-period:hover .edit-custom-day {
  transform: translateX(0px);
  opacity: 1;
}
.custom-day-work-period .remove-custom-day {
  right: 0px;
  color: #d24646;
  transform: translateX(-10px);
}
.custom-day-work-period .edit-custom-day {
  left: 0px;
  transform: translateX(10px);
}
.custom-day-work-period .remove-custom-day, .custom-day-work-period .edit-custom-day {
  position: absolute;
  top: 0px;
  font-size: 14px;
  padding: 10px;
  text-decoration: none;
  line-height: 1;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 9999;
  outline: none;
  box-shadow: none;
}
.custom-day-work-period .custom-day-work-period-i {
  position: relative;
  padding: 24px 20px;
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.2s ease;
}
.custom-day-work-period .custom-day-work-period-i::before {
  top: 50%;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 1px;
  position: absolute;
  content: "";
}
.custom-day-work-period .custom-day-month {
  font-size: 19.2px;
  line-height: 1;
  color: #9DA8D5;
}
.custom-day-work-period .custom-day-number {
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  color: #b2b2b2;
}
.custom-day-work-period .custom-day-periods {
  padding-top: 10px;
}
.custom-day-work-period .custom-day-periods .custom-day-period {
  background-color: #eeeff5;
  color: #2D303A;
  color: #8894AF;
  padding: 4px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 13px;
}

.yetti-popup {
  position: relative;
  z-index: 999999;
}

.yetti-popup-head .icon {
  width: 24px;
  height: 24px;
}

.yetti-popup-body {
  position: absolute;
  top: -24px;
  right: -24px;
  z-index: 9999;
  width: 700px;
  max-width: 100%;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  background: #FCFCFC;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
}

.yetti-popup-top {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.yetti-popup-title {
  margin-right: auto;
}

.yetti-popup-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
  margin-left: 24px;
}
.yetti-popup-close .icon {
  width: 20px;
  height: 20px;
  fill: #1A1D1F;
  transition: transform 0.2s;
}

body.dark .yetti-popup-close {
  background: #272B30;
}
body.dark .yetti-popup-close .icon {
  fill: #FCFCFC;
}

.yetti-popup-close:hover .icon {
  transform: rotate(90deg);
}

.yetti-popup .form {
  width: 100%;
  margin-bottom: 24px;
}

.yetti-popup-item:not(:last-child) {
  margin-bottom: 24px;
}

.yetti-popup-label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}

.yetti-popup .field__label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}
.yetti-popup .checkbox:not(:last-child) {
  margin-bottom: 12px;
}

.yetti-popup-range {
  margin: 20px 0;
}

.yetti-popup-box {
  position: relative;
}
.yetti-popup-box .select {
  padding-left: 48px;
}
.yetti-popup-box .icon {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 10;
  pointer-events: none;
  width: 24px;
  height: 24px;
  fill: #FFD88D;
}

.yetti-popup-btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.yetti-popup-btns .yetti-popup-button:not(:last-child) {
  margin-right: 12px;
}

.yetti-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  background: rgba(244, 244, 244, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

body.dark .yetti-popup-overlay {
  background: rgba(39, 43, 48, 0.9);
}

.yetti-popup.active .yetti-popup-body, .yetti-popup.active .yetti-popup-overlay {
  visibility: visible;
  opacity: 1;
}

.settings-menu-bar .settings-menu-bar-inner {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
}
.settings-menu-bar .settings-menu-bar-inner .icon-lib svg {
  height: 1rem;
  width: 1rem;
  margin-right: 0.5rem;
}
@media (max-width: 1024px) {
  .settings-menu-bar {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
  }
  .settings-menu-bar .settings-menu-bar-inner {
    display: flex;
    text-align: center;
    cursor: pointer;
    margin-top: 0;
    flex-direction: column;
    justify-content: center;
  }
  .settings-menu-bar .settings-menu-bar-inner .icon-lib {
    width: 70px;
    height: 70px;
    background-color: rgba(11, 34, 56, 0.03);
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin-bottom: 15px;
  }
  .settings-menu-bar .settings-menu-bar-inner .icon-lib svg {
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0;
  }
  .settings-menu-bar .settings-menu-bar-inner span {
    width: 90px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
  }
}

.qr-banner-wrapper {
  background: linear-gradient(to bottom right, #b7b7b7, #e8e8e8);
  background: #f3f4f6;
  border-radius: 15px;
}
.qr-banner-wrapper .qr-widget {
  width: 100%;
  max-width: 396px;
  height: 560px;
  background-color: #1e4392;
  border: 8px solid #ffffff;
  margin-left: auto;
  margin-right: auto;
}
.qr-banner-wrapper .draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.qr-banner-wrapper .label {
  line-height: 12px;
}
.qr-banner-wrapper .main-qr {
  border: 8px solid #fff;
}

.salon-body.is-color {
  background: var(--c-bg-body) !important;
}

.salon-body.is-color .book-services .book-service-group {
  background-color: var(--c-button-background-color) !important;
  border: 3px solid var(--c-bg-body) !important;
  color: var(--c-button-text-color) !important;
  box-shadow: var(--c-button-box-shadow) !important;
    font-size: var(--c-button-size) !important;
    border-style: var(--c-border-style) !important;
    border-width: var(--c-border-width) !important;
    border-color: var(--c-border-color) !important;
}
.salon-body.is-color .product-variation .sandy-input-inner:checked + .book-service-group {
  box-shadow: var(--c-button-box-shadow) !important;
}
.salon-body.is-color .time-slots-flex .time-btn, .salon-body.is-color .sandy-date-picker .sandy-date-picker-item, .salon-body.is-color .barbers-book-wrapper .barbers-group-item {
  border: 2px solid var(--c-bg-body) !important;
}
.salon-body.is-color .time-slots-flex .sandy-input-inner:checked + .time-btn, .salon-body.is-color .sandy-date-picker .sandy-input-inner:checked + .sandy-date-picker-item, .salon-body.is-color .barbers-book-wrapper .sandy-input-inner:checked + .barbers-group-item {
  box-shadow: 0 0 0 2px var(--c-checkbox-active);
  border: 2px solid var(--c-bg-body);
}
.salon-body.is-color #app-sandy-mix.is-bio {
  background: transparent;
}
.salon-body.is-color .\--c-text-title-stroke {
  stroke: var(--c-text-title) !important;
}
.salon-body.is-color .\--c-dot-1-bg {
  background: var(--c-bg-body) !important;
}
.salon-body.is-color .\--c-dot-1-bg-text {
  color: var(--c-dot-1-bg-text) !important;
}
.salon-body.is-color .\--c-dot-4-bg {
  background: var(--c-accent) !important;
}
.salon-body.is-color .\--c-dot-4-bg-text {
  color: var(--c-dot-4-bg-text) !important;
}
.salon-body.is-color .\--c-text-title {
  color: var(--c-text-title) !important;
}
.salon-body.is-color .\--c-bg-body {
  background: var(--c-bg-body) !important;
}
.salon-body.is-color .\--c-accent {
  background: var(--c-accent) !important;
}
.salon-body.is-color .\--c-accent-text {
  color: var(--c-accent-text) !important;
}
.salon-body.is-color .flex-table-item {
  background: var(--c-dot-4-bg);
}
.salon-body.is-color .flex-table-item span {
  color: var(--c-dot-4-bg-text) !important;
}
.salon-body.is-color .sandy-expandable-btn {
  background: var(--c-button-background-color);
  color: var(--c-button-text-color);
}

.salon-body.is-color .form-input label {
  background: transparent;
  color: var(--c-text-title);
}
.salon-body.is-color .form-input input {
  background: var(--c-button-background-color); /* Button background color */
  border-color: var(--c-button-text-color); /* Button text color as border */
  color: var(--c-button-text-color); /* Button text color */
}

.salon-body.is-color .button {
  background: var(--c-button-background-color);
  color: var(--c-button-text-color);
}
.salon-body.is-color .button:hover {
  background: var(--c-button-background-color);
  color: var(--c-button-text-color);
}
.salon-body.is-color .floaty-bar .bar-actions {
  background: var(--c-bottom-bar-bg);
  margin-left: -0.1rem;
}
.salon-body.is-color .floaty-bar .bar-actions svg * {
  fill: var(--c-bottom-bar-text);
}
.salon-body.is-color .floaty-bar .bar-actions span {
  color: var(--c-bottom-bar-text) !important;
}
.salon-body.is-color .links-v2 {
    background-color: var(--c-button-background-color) !important;
}

.salon-body.is-color .links-v2 .links-v2-inner span {
    color: var(--c-button-text-color) !important;
}

.salon-body.is-color .links-v2 .links-v2-inner svg {
    stroke: var(--c-button-text-color) !important;
}

.salon-body.is-color .inner-pages-header .back-button, .salon-body.is-color .aw-back-title .back-button {
  background: var(--c-accent);
  color: var(--c-accent-text);
}
.salon-body.is-color .inner-pages-header .back-button svg, .salon-body.is-color .aw-back-title .back-button svg {
  stroke: var(--c-accent-text);
}
.salon-body.is-color .inner-pages-header .previous-page .inner-pages-title, .salon-body.is-color .aw-back-title .previous-page .inner-pages-title {
  color: var(--c-text-title);
}
.salon-body.is-color .section-context-banner .context-tagline {
  color: var(--c-text-title);
}
.salon-body.is-color .boxed-card .boxed-inner .orion-svg-icon {
  stroke: var(--c-text-title);
}
.salon-body.is-color .boxed-card .boxed-inner .icon-jar-svg svg * {
  fill: var(--c-text-title);
}
.salon-body.is-color .boxed-card .boxed-inner span {
  color: var(--c-text-title);
}
.salon-body.is-color .social-links .social-link {
  background: var(--c-accent);
}
.salon-body.is-color .social-links .social-link i {
  color: var(--c-accent-text);
}
.salon-body.is-color .sandy-dialog {
  border: 0;
  background-color: var(--c-bg-body);
}
.salon-body.is-color .default-theme .months .cell .date-formatted, .salon-body.is-color .default-theme .months .cell .month-name {
  color: var(--c-text-title);
}
.salon-body.is-color .default-theme .months .cell.selected {
  background: var(--c-accent);
  color: var(--c-accent-text);
}
.salon-body.is-color .default-theme .months .cell.selected .date-formatted, .salon-body.is-color .default-theme .months .cell.selected .month-name {
  color: var(--c-accent-text);
}
.salon-body.is-color .default-theme .calendar .cell .day-number, .salon-body.is-color .default-theme .calendar .cell .day {
  color: var(--c-text-title);
}
.salon-body.is-color .default-theme .calendar .cell.is--weekend {
  background: var(--c-accent);
}
.salon-body.is-color .default-theme .calendar .cell.is--weekend .day-number, .salon-body.is-color .default-theme .calendar .cell.is--weekend .day {
  color: var(--c-accent-text);
}
.salon-body.is-color .default-theme .calendar .cell.is--weekend.selected {
  background: transparent;
}
.salon-body.is-color .default-theme .calendar .cell .range-bar {
  border: 2px solid var(--c-accent);
}

.mix-back-button * {
  transition: 0.2s;
}
.mix-back-button span {
  -webkit-animation: translate-left-out 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
          animation: translate-left-out 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
  transform: translateX(30px);
  opacity: 0;
  display: none;
}
.mix-back-button:active span, .mix-back-button:hover span {
  display: block;
  -webkit-animation: translate-left-in 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
          animation: translate-left-in 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
  transform: translateX(0);
  opacity: 1;
}
.mix-back-button:active svg, .mix-back-button:hover svg {
  display: none;
}

@-webkit-keyframes translate-left-in {
  0% {
    -webkit-transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}
@keyframes translate-left-in {
  0% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes translate-left-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(30px);
  }
}
@keyframes translate-left-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(30px);
  }
}
.avatar-thumb.salon-logo .avatar-container {
  height: var(--logo-size) !important;
  width: var(--logo-size) !important;
  max-width: inherit !important;
}

.message-comment-form {
  transition: all 0.4s ease;
  opacity: 1;
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 0 15px rgba(50, 50, 93, 0.18);
  padding: 0 20px;
  z-index: 1001;
  max-width: 100%;
  width: 700px;
  margin: 0 auto;
}

.after-hour-days .sandy-big-radio {
  flex: 0 0 65px;
}
.after-hour-days .radio-select-inner {
  overflow: visible;
  padding: 10px;
  border-radius: 10px;
  background: #000000;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: auto;
}
.after-hour-days .radio-select-inner .snd-day-weekday {
  color: rgba(9, 55, 255, 0.4);
  font-size: 9px;
  font-weight: 500;
  padding: 8px 0px 0px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.after-hour-days .radio-select-inner .snd-day-box {
  position: relative;
  padding: 0px;
  border-radius: 0px;
  background-color: transparent;
  height: 30px;
  overflow: visible;
}

.main-sandy-index-section {
  position: relative;
  overflow: hidden;
  background-position: 50% 0%;
  background-size: auto;
  background-repeat: no-repeat;
}

.home-section-app-e {
  position: relative;
  padding: 10px 120px 320px;
}
.home-section-app-e .button-e-view {
  position: absolute;
  left: 50%;
  right: 30px;
  bottom: 50px;
  z-index: 100;
  max-width: 320px;
  margin-left: -160px;
  transition: background-color 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.home-section-app-e .app-section-e {
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 10;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.home-section-app-e .app-section-e img {
  position: static;
  z-index: 1;
  width: 390px;
  margin-top: 90px;
  flex: 0 auto;
}
.home-section-app-e .app-section-e .text-section-a-left, .home-section-app-e .app-section-e .text-section-a-right {
  position: absolute;
  left: 0px;
  top: 15px;
  bottom: 0px;
  width: 50px;
  height: 395px;
}
.home-section-app-e .app-section-e .text-section-a-left {
  left: 120px;
  background-image: linear-gradient(90deg, #000, transparent);
}
.home-section-app-e .app-section-e .text-section-a-right {
  left: auto;
  right: 120px;
  background-image: linear-gradient(270deg, #000, transparent);
}
.home-section-app-e .text-bg-section-e {
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
  flex-wrap: wrap;
  color: #fff;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-section-app-e .text-bg-section-e .text-marquee {
  margin-right: 20px;
  float: left;
}
.home-section-app-e .text-bg-section-e .text-marquee-wrapper {
  width: 100000px;
  transform: translateX(0px);
}
.home-section-app-e .text-bg-section-e.text-bg-1 {
  font-size: 100px;
  text-align: center;
}
.home-section-app-e .text-bg-section-e.text-bg-1 .text-marquee-wrapper {
  -webkit-animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
          animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
}
.home-section-app-e .text-bg-section-e.text-bg-2 {
  font-size: 68px;
  text-align: center;
}
.home-section-app-e .text-bg-section-e.text-bg-2 .text-marquee-wrapper {
  -webkit-animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
          animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
}
.home-section-app-e .text-bg-section-e.text-bg-3 {
  font-size: 60px;
  text-align: center;
}
.home-section-app-e .text-bg-section-e.text-bg-3 .text-marquee-wrapper {
  -webkit-animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
          animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
}
.home-section-app-e .text-bg-section-e.text-bg-4 {
  font-size: 50px;
  text-align: center;
}
.home-section-app-e .text-bg-section-e.text-bg-4 .text-marquee-wrapper {
  -webkit-animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
          animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
}
.home-section-app-e .text-bg-section-e.text-bg-5 {
  font-size: 58px;
  text-align: center;
}
.home-section-app-e .text-bg-section-e.text-bg-5 .text-marquee-wrapper {
  -webkit-animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
          animation: 13.8s linear 1s infinite normal none running sliding-animation-e-1;
}
@-webkit-keyframes sliding-animation-e-1 {
  100% {
    transform: translateX(-2343.54px);
  }
}
@keyframes sliding-animation-e-1 {
  100% {
    transform: translateX(-2343.54px);
  }
}
@-webkit-keyframes sliding-animation-e-2 {
  100% {
    transform: translateX(0);
  }
}
@keyframes sliding-animation-e-2 {
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes sliding-animation-e-3 {
  100% {
    transform: translateX(-2009.91px);
  }
}
@keyframes sliding-animation-e-3 {
  100% {
    transform: translateX(-2009.91px);
  }
}
@-webkit-keyframes sliding-animation-e-4 {
  100% {
    transform: translateX(0);
  }
}
@keyframes sliding-animation-e-4 {
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes sliding-animation-e-5 {
  100% {
    transform: translateX(-1390.28px);
  }
}
@keyframes sliding-animation-e-5 {
  100% {
    transform: translateX(-1390.28px);
  }
}

.sandy-content-section-b-home {
  position: relative;
  z-index: 1;
  display: block;
  width: 60%;
  margin-left: 40%;
  padding-top: 110px;
  flex-wrap: nowrap;
  align-items: flex-end;
}
@media (max-width: 991px) {
  .sandy-content-section-b-home {
    padding-top: 0px;
    padding-right: 60px;
  }
}
@media (max-width: 767px) {
  .sandy-content-section-b-home {
    width: 100%;
    margin-left: 0%;
    padding-right: 0px;
    padding-left: 0px;
  }
}
@media (max-width: 479px) {
  .sandy-content-section-b-home {
    z-index: 1;
  }
}
.sandy-content-section-b-home .image-home-1 {
  position: absolute;
  left: -650px;
  z-index: 100;
  width: 590px;
  height: auto;
}
@media (max-width: 991px) {
  .sandy-content-section-b-home .image-home-1 {
    left: -340px;
    width: 280px;
    background-image: none;
  }
}
@media (max-width: 767px) {
  .sandy-content-section-b-home .image-home-1 {
    position: relative;
    left: auto;
    width: 100%;
  }
}
.sandy-content-section-b-home .image-home-2 {
  position: absolute;
  left: -405px;
  top: 530px;
  width: 590px;
}
@media (max-width: 991px) {
  .sandy-content-section-b-home .image-home-2 {
    left: -190px;
    top: 252px;
    width: 340px;
    background-position: 50% 50%;
  }
}
@media (max-width: 767px) {
  .sandy-content-section-b-home .image-home-2 {
    position: relative;
    left: 0px;
    top: 0px;
    display: block;
    width: 50%;
    float: left;
  }
}
.sandy-content-section-b-home .image-home-3 {
  position: absolute;
  left: 130px;
  top: 620px;
  width: 590px;
}
@media (max-width: 991px) {
  .sandy-content-section-b-home .image-home-3 {
    left: auto;
    top: 300px;
    right: 0px;
    width: 320px;
    background-position: 50% 50%;
  }
}
@media (max-width: 767px) {
  .sandy-content-section-b-home .image-home-3 {
    position: relative;
    left: 0px;
    top: 0%;
    display: block;
    width: 60%;
    margin-top: -40%;
    float: right;
    clear: none;
  }
}

.sx-container {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .sx-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .sx-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .sx-container {
    padding-right: 0;
    padding-left: 0;
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .sx-container {
    max-width: 1170px;
  }
}

.hero-banner-five {
  position: relative;
  text-align: center;
  padding: 56px 0 0;
}
@media (min-width: 1200px) {
  .hero-banner-five .sx-hero-heading-contain {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}
@media (min-width: 992px) {
  .hero-banner-five .sx-hero-heading-contain {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
}
@media (min-width: 768px) {
  .hero-banner-five .sx-hero-heading-contain {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
}
.hero-banner-five .hero-heading {
  font-size: 82px;
  line-height: 1.219em;
}
@media (max-width: 991px) {
  .hero-banner-five .hero-heading {
    font-size: 45px;
    line-height: 1.29em;
  }
}
.hero-banner-five .hero-heading span {
  position: relative;
  color: #ff2759;
  text-decoration: underline;
  text-decoration-thickness: 4px;
}
.hero-banner-five .hero-sub-heading {
  font-size: 24px;
  padding: 20px 0 62px;
  color: #000;
}
@media (max-width: 991px) {
  .hero-banner-five .hero-sub-heading {
    font-size: 18px;
    padding-bottom: 40px;
  }
}
.hero-banner-five .sing-in-call {
  font-size: 16px;
  padding-top: 20px;
  color: #979797;
}
.hero-banner-five .sing-in-call a {
  color: #000;
  transition: all 0.25s ease-in-out;
}
.hero-banner-five .sing-in-call a:hover {
  text-decoration: underline;
}
.hero-banner-five .button-group a {
  width: 200px;
  height: 60px;
  padding: 0 5px 0 25px;
  margin: 10px 12px;
  border: 2px solid #111;
  border-radius: 6px;
  color: #000;
  text-align: left;
  transition: all 0.3s ease-in-out;
}
.hero-banner-five .button-group a:hover {
  transform: translateY(-5px);
  box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.1);
}
.hero-banner-five .button-group a .icon {
  margin-right: 15px;
}
.hero-banner-five .button-group a span {
  font-size: 11px;
  color: #737373;
  display: block;
  margin-bottom: -5px;
  margin-top: -5px;
}
.hero-banner-five .button-group a strong {
  font-weight: 500;
  font-size: 18px;
  display: block;
}
.hero-banner-five .button-group a.ios-button {
  background: #111;
  color: #fff;
}
.hero-banner-five .button-group a.ios-button span {
  color: rgba(255, 255, 255, 0.7);
}
.hero-banner-five .img-gallery {
  border-bottom: 1px solid #eaeaea;
  margin-top: 80px;
  position: relative;
  z-index: 1;
}
.hero-banner-five .img-gallery .screen-container {
  border: 4px solid #000;
  border-radius: 45px 45px 0 0;
  border-bottom: none;
  position: relative;
}
.hero-banner-five .img-gallery .screen-container .main-screen {
  width: 100%;
  border-radius: 40px 40px 0 0;
}
.hero-banner-five .img-gallery .screen-one {
  width: 19%;
  top: 26%;
  right: -10%;
  z-index: 1;
  box-shadow: 0 35px 70px rgba(12, 21, 44, 0.08);
  -webkit-animation: jumpTwo 5s linear infinite;
  animation: jumpTwo 5s linear infinite;
}
.hero-banner-five .img-gallery .screen-two {
  width: 31%;
  bottom: -12%;
  left: -16%;
  z-index: 1;
  box-shadow: -10px 40px 80px rgba(25, 42, 70, 0.05);
  -webkit-animation: jumpThree 5s linear infinite;
  animation: jumpThree 5s linear infinite;
}
.hero-banner-five .shape-one {
  left: 0;
  top: 25%;
}
.hero-banner-five .shape-two {
  right: 0;
  bottom: 9%;
}
.hero-banner-five .shape-three {
  right: 10%;
  top: 27%;
}
.hero-banner-five .shape-four {
  left: 11%;
  top: 56%;
}

.fancy-feature-ten {
  padding-left: 15px;
  padding-right: 15px;
}
.fancy-feature-ten .bg-wrapper {
  max-width: 1600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  padding: 130px 0 150px;
  position: relative;
  z-index: 1;
}
.fancy-feature-ten .shape-one {
  bottom: -37px;
  right: 10%;
}
.fancy-feature-ten .sub-text {
  font-size: 24px;
  line-height: 1.91em;
  color: #000;
}

.block-style-fifteen {
  background: #1f1f1f;
  border-radius: 10px;
  position: relative;
  padding: 45px 35px 30px 40px;
  color: #ffffff;
  z-index: 1;
}
.block-style-fifteen:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 2px solid #000;
  z-index: -1;
  border-radius: 10px;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.block-style-fifteen:hover:before {
  opacity: 1;
}
.block-style-fifteen .icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}
.block-style-fifteen h3 {
  font-weight: 500;
  font-size: 24px;
  text-transform: capitalize;
  padding: 27px 0 22px;
}
.block-style-fifteen p {
  font-size: 18px;
}

.shapes {
  position: absolute;
  z-index: -1;
}

.title-style-one h2 {
  font-family: gilroy-black;
  font-size: 58px;
  line-height: 1.15em;
}
.title-style-one h6 {
  font-size: 20px;
  color: #cacaca;
  padding-bottom: 15px;
}
.title-style-one p {
  font-size: 22px;
  line-height: 1.58em;
  color: #2a2a2a;
  padding-top: 25px;
}

.title-style-two p {
  text-transform: uppercase;
  font-size: 16px;
  color: #adb1b5;
  letter-spacing: 1.12px;
  padding-bottom: 7px;
}
.title-style-two h2 {
  font-family: gilroy-black;
  font-size: 58px;
  line-height: 1.15em;
}
.title-style-two span {
  position: relative;
}
.title-style-two span img {
  position: absolute;
  bottom: -30px;
  left: 0;
  z-index: -1;
}
.title-style-two .sub-text {
  font-size: 24px;
  line-height: 1.5em;
  color: #6d6d6d;
  padding-top: 15px;
}

.title-style-three p {
  text-transform: uppercase;
  font-size: 20px;
  color: #adb1b5;
  letter-spacing: 1.12px;
  padding-bottom: 17px;
}
.title-style-three h6 {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  color: #adb1b5;
  padding-bottom: 15px;
}
.title-style-three h2 {
  font-family: gilroy-black;
  font-size: 54px;
  line-height: 1.18em;
}
.title-style-three span {
  position: relative;
}
.title-style-three span img {
  position: absolute;
  bottom: -21px;
  left: 0;
  z-index: -1;
}

.title-style-four h6 {
  font-family: Roboto, sans-serif;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.35);
  padding-bottom: 15px;
}
.title-style-four h2 {
  font-family: gilroy-black;
  font-size: 58px;
  line-height: 1.15em;
  color: #2a2a2a;
}
.title-style-four span {
  position: relative;
  z-index: 1;
}
.title-style-four span img {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.title-style-four .sub-text {
  font-size: 22px;
  line-height: 1.59em;
  color: #2a2a2a;
}

.title-style-five h2 {
  font-family: Roboto Slab, serif;
  font-size: 54px;
  line-height: 1.25em;
}
.title-style-five h2 span {
  position: relative;
  z-index: 1;
}
.title-style-five h2 span:before {
  content: "";
  width: 100%;
  height: 15px;
  position: absolute;
  background: rgba(241, 193, 83, 0.45);
  left: 0;
  bottom: 12px;
  z-index: -1;
}
.title-style-five h6 {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 12px;
}

.title-style-six h2 {
  font-family: Recoleta;
  font-weight: 400;
  font-size: 72px;
  line-height: 1.27em;
  color: #000;
}
@media (max-width: 991px) {
  .title-style-six h2 {
    font-size: 45px;
  }
}

.dark-style .title-style-six h2 {
  color: #fff;
}

.title-style-six h2 span {
  color: #ff2759;
  text-decoration: underline;
  text-decoration-thickness: 4px;
}
.title-style-six h6 {
  font-size: 18px;
  text-transform: uppercase;
  color: #bfbfbf;
  padding-bottom: 20px;
  letter-spacing: 1.8px;
}
.title-style-six .text-xs {
  font-size: 22px;
  line-height: 1.65em;
  padding-top: 30px;
}

.dark-style .title-style-six .text-xs {
  color: rgba(255, 255, 255, 0.4);
}

.title-style-seven h2 {
  font-size: 64px;
  font-weight: 500;
  line-height: 1.32em;
}
.title-style-seven h2 span {
  position: relative;
  display: inline-block;
}
.title-style-seven h2 span:before {
  content: "";
  width: 100%;
  height: 13px;
  background: #ffeaa0;
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: -1;
}
.title-style-seven p {
  font-size: 22px;
  color: #000;
  padding-top: 22px;
}

.title-style-eight h2 {
  font-size: 68px;
  font-weight: 700;
  line-height: 1.26em;
}
.title-style-eight p {
  font-size: 22px;
  color: #000;
  padding-top: 40px;
}
.title-style-eight h6 {
  font-size: 16px;
  letter-spacing: 2px;
  color: rgba(0, 0, 0, 0.3);
  padding-bottom: 20px;
}
.title-style-eight h2 span {
  display: inline-block;
  position: relative;
}
.title-style-eight h2 span img {
  position: absolute;
  max-height: 100%;
  z-index: -1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.title-style-nine h6 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c8c8c8;
  padding-bottom: 25px;
}
.title-style-nine h2 {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.34em;
}
.title-style-nine h2 span {
  display: inline-block;
  position: relative;
}
.title-style-nine h2 span img {
  position: absolute;
  max-height: 100%;
  z-index: -1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.title-style-nine p {
  font-size: 20px;
  color: #6a6b72;
  padding-top: 28px;
}

.title-style-ten h6 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(0, 0, 0, 0.25);
  padding-bottom: 20px;
}
.title-style-ten h2 {
  font-family: gordita;
  font-size: 68px;
  font-weight: 500;
  line-height: 1.27em;
}
.title-style-ten p {
  font-size: 24px;
  line-height: 1.91em;
  color: #000;
}

.title-style-eleven .upper-title {
  font-size: 14px;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 3px;
  padding-bottom: 10px;
}
.title-style-eleven h2 {
  font-family: gordita;
  font-size: 58px;
  font-weight: 500;
  line-height: 1.29em;
  letter-spacing: -2px;
}
.title-style-eleven p {
  font-size: 20px;
}

.title-style-twelve .upper-title {
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 3px;
  padding-bottom: 8px;
}
.title-style-twelve h2 {
  font-weight: 700;
  font-size: 58px;
  line-height: 1.29em;
}
.title-style-twelve span {
  position: relative;
}
.title-style-twelve span img {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.title-style-twelve p {
  font-size: 24px;
  line-height: 1.75em;
}

.title-style-thirteen .upper-title {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.2);
  letter-spacing: 3px;
  padding-bottom: 16px;
}
.title-style-thirteen h2 {
  font-family: gordita;
  font-weight: 700;
  font-size: 72px;
  line-height: 1.25em;
  letter-spacing: -1px;
}
.title-style-thirteen span {
  position: relative;
}
.title-style-thirteen span img {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.title-style-fourteen h2 {
  font-size: 52px;
  font-weight: 500;
  line-height: 1.25em;
  letter-spacing: -1px;
}
.title-style-fourteen .upper-title {
  text-transform: uppercase;
  font-size: 14px;
  color: #000;
  letter-spacing: 2px;
  padding-bottom: 10px;
}

.title-style-fifteen h2 {
  font-size: 64px;
  font-weight: 500;
  line-height: 1.4em;
  text-transform: uppercase;
}
.title-style-fifteen .upper-title {
  text-transform: uppercase;
  font-size: 18px;
  color: #b6b6b6;
  letter-spacing: 3px;
  padding-bottom: 18px;
}

.title-style-sixteen h2 {
  font-size: 58px;
  font-weight: 500;
  line-height: 1.29em;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.title-style-sixteen .upper-title {
  font-size: 20px;
  color: #bababa;
  padding-bottom: 25px;
}

.fancy-text-block-twentyOne .sx-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 15px;
}
.fancy-text-block-twentyOne .text-wrapper .client-info {
  font-size: 24px;
  color: #a09a92;
  padding: 36px 0 28px;
}
.fancy-text-block-twentyOne .text-wrapper .client-info span {
  color: #000;
  text-decoration: underline;
}
.fancy-text-block-twentyOne .text-wrapper p {
  font-size: 48px;
  color: #000;
  line-height: 1.59em;
  padding-bottom: 40px;
}
.fancy-text-block-twentyOne .text-wrapper p span {
  color: #ff2759;
  text-decoration: underline;
}
.fancy-text-block-twentyOne .text-wrapper .name {
  font-size: 20px;
  color: #000;
  font-weight: 500;
  font-style: italic;
  position: relative;
  padding-left: 30px;
  margin-top: 32px;
}
.fancy-text-block-twentyOne .text-wrapper .name:before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 13px;
}
.fancy-text-block-twentyOne .img-meta {
  position: relative;
}
.fancy-text-block-twentyOne .img-meta .shape-one {
  bottom: -123px;
  left: 6px;
}

.counter-box-four {
  text-align: center;
  margin-top: 40px;
}
.counter-box-four .number {
  font-size: 60px;
  color: #000;
}
@media (max-width: 767px) {
  .counter-box-four .number {
    font-size: 40px;
  }
}
.counter-box-four p {
  color: #000;
}

.counter-style-two {
  padding: 0 15px;
  margin-top: 150px;
}
@media (max-width: 991px) {
  .counter-style-two {
    margin-top: 60px;
  }
}
.counter-style-two .border-bottom {
  max-width: 1600px;
  margin: 0 auto;
  border-bottom: 1px solid #e8e8e8 !important;
  padding-bottom: 120px;
}

.fancy-feature-eleven {
  position: relative;
  z-index: 1;
  padding-top: 130px;
}
@media (max-width: 991px) {
  .fancy-feature-eleven {
    padding-top: 80px;
  }
}
.fancy-feature-eleven .inner-container {
  max-width: 1630px;
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
}
.fancy-feature-eleven .shape-one {
  top: 3%;
  left: 7%;
}
.fancy-feature-eleven .shape-two {
  bottom: -60px;
  left: 37%;
  z-index: 1;
}

.block-style-sixteen {
  margin-top: 120px;
  position: relative;
  border-radius: 40px;
  padding: 125px 0 120px;
  overflow: hidden;
  background: #3b3939;
}
@media (max-width: 768px) {
  .block-style-sixteen {
    padding: 2.5rem 1.25rem;
  }
}
.block-style-sixteen .icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}
.block-style-sixteen .title {
  font-weight: 500;
  font-size: 48px;
  line-height: 1.31em;
  padding: 25px 0 40px;
}
.block-style-sixteen p {
  font-size: 24px;
  line-height: 1.91em;
  color: #000;
  padding-bottom: 75px;
}
.block-style-sixteen .screen-one {
  right: 70px;
  width: 48%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.block-style-sixteen .screen-two {
  left: 10px;
  width: 48%;
  bottom: 0;
  z-index: 1;
}
.block-style-sixteen .screen-three {
  right: 0;
  width: 48%;
  bottom: 0;
  z-index: 1;
}
@media (max-width: 991px) {
  .block-style-sixteen .shapes {
    position: static;
    transform: none;
    margin: 10px auto 0;
  }
}
@media (max-width: 768px) {
  .block-style-sixteen .shapes {
    width: 95% !important;
    margin-top: 30px;
  }
}

.fancy-short-banner-six {
  position: relative;
  text-align: center;
  padding-top: 150px;
}
@media (max-width: 991px) {
  .fancy-short-banner-six {
    padding-top: 80px;
  }
}
.fancy-short-banner-six .shape-one {
  left: 0;
  top: 22%;
}
.fancy-short-banner-six p {
  font-size: 24px;
  color: #000;
  padding: 30px 0 75px;
}

.theme-btn-seven {
  font-weight: 500;
  text-align: center;
  line-height: 60px;
  color: #fff;
  border-radius: 6px;
  padding: 0 45px;
  background: #000;
  transition: all 0.3s ease-in-out;
}

.pricing-table-area-four {
  max-width: 1350px;
  padding: 0 15px;
  margin: 0 auto;
}
.pricing-table-area-four .row {
  margin: 0 -30px;
}
.pricing-table-area-four .row [class*=col-] {
  padding: 0 30px;
}
.pricing-table-area-four .pr-table-wrapper {
  border: 1px solid #ececec;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
  padding: 25px 35px 35px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.pricing-table-area-four .pr-table-wrapper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 15px;
  border: 2px solid #000;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.pricing-table-area-four .pr-table-wrapper.most-popular:after {
  content: url(/img/populer-tag.44aeab00.svg);
  position: absolute;
  top: -97px;
  right: -87px;
}
.pricing-table-area-four .pr-table-wrapper .pack-name {
  font-weight: 500;
  font-size: 28px;
  color: #fff;
}
.pricing-table-area-four .pr-table-wrapper .pack-details {
  color: #fff;
  padding: 5px 0 45px;
}
.pricing-table-area-four .pr-table-wrapper .top-banner {
  padding: 9px 5px 15px 22px;
  color: #000;
  text-align: left;
}
.pricing-table-area-four .pr-table-wrapper .price {
  font-size: 40px;
  font-weight: 500;
  padding: 25px 20px 0 0;
}
.pricing-table-area-four .pr-table-wrapper .price sup {
  font-size: 20px;
  top: -22px;
}
.pricing-table-area-four .pr-table-wrapper .top-banner span {
  font-size: 22px;
}
.pricing-table-area-four .pr-table-wrapper .top-banner em {
  font-size: 14px;
  font-style: normal;
  display: block;
  margin-top: -7px;
}
.pricing-table-area-four .pr-table-wrapper .pr-feature {
  text-align: left;
  padding: 38px 0 60px 20px;
}
.pricing-table-area-four .pr-table-wrapper .pr-feature li {
  position: relative;
  line-height: 42px;
  color: #fff;
  padding-left: 30px;
}
.pricing-table-area-four .pr-table-wrapper .pr-feature li:before {
  content: url(/img/76.c8197e3e.svg);
  position: absolute;
  top: 0;
  left: 0;
}
.pricing-table-area-four .pr-table-wrapper .trial-button {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 52px;
  border: 2px solid #000;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.pricing-table-area-four .pr-table-wrapper .trial-text {
  font-size: 16px;
  padding-top: 20px;
}
.pricing-table-area-four .pr-table-wrapper.active:before, .pricing-table-area-four .pr-table-wrapper:hover:before {
  opacity: 1;
}
.pricing-table-area-four .pr-table-wrapper .trial-button:hover, .pricing-table-area-four .pr-table-wrapper.active .trial-button {
  background: #000;
  color: #fff;
}

.hero-banner-nine {
  position: relative;
  z-index: 1;
  padding-top: 270px;
}
.hero-banner-nine .hero-heading {
  font-weight: 700;
  font-size: 72px;
  line-height: 1.25em;
}
.hero-banner-nine .hero-heading span {
  display: inline-block;
  position: relative;
}
.hero-banner-nine .hero-heading span img {
  position: absolute;
  max-height: 100%;
  z-index: -1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.hero-banner-nine .hero-sub-heading {
  font-size: 24px;
  line-height: 1.5em;
  color: #2f2f2f;
  padding: 36px 0 58px 0;
}
.hero-banner-nine form {
  max-width: 550px;
  height: 70px;
  position: relative;
}
.hero-banner-nine form input {
  border: none;
  background: #f4f4f4;
  border-radius: 54px;
  width: calc(100% - 100px);
  height: 100%;
  font-size: 16px;
  padding: 0 50px;
}
.hero-banner-nine form button {
  position: absolute;
  right: 0;
  top: 0;
  background: #572ff6;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 17px;
  transition: all 0.3s ease-in-out;
}
.hero-banner-nine form button:hover {
  background: #ff4a8b;
}
.hero-banner-nine form ::-moz-placeholder {
  color: #0b0b0b;
}
.hero-banner-nine form ::-moz-placeholder, .hero-banner-nine form ::placeholder {
  color: #0b0b0b;
}
.hero-banner-nine .term-text {
  font-size: 16px;
  color: #a5a5a5;
  margin-top: 22px;
}
.hero-banner-nine .term-text a {
  color: #572ff6;
}
.hero-banner-nine .bg-shape {
  top: 0;
  right: 0;
}
.hero-banner-nine .illustration-container {
  position: absolute;
  right: 0;
  top: 22%;
  z-index: 1;
  width: 44%;
}
.hero-banner-nine .illustration-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  right: -30px;
  bottom: 50px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  z-index: -1;
}
.hero-banner-nine .illustration-container:after {
  content: "";
  position: absolute;
  top: -25px;
  left: 100px;
  right: -30px;
  bottom: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  z-index: -2;
}

.yetti-popup {
  position: absolute;
  z-index: 9999;
  display: none;
  top: 50%;
  width: 100%;
}

.yetti-popup-head .icon {
  width: 24px;
  height: 24px;
}

.yetti-popup-body {
  position: relative;
  z-index: 9999;
  max-width: 700px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.05), 0px 32px 48px -8px rgba(0, 0, 0, 0.1);
  background: #FCFCFC;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  width: 100%;
  transform: translateX(-50%);
  left: 50%;
}

.yetti-popup-top {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.yetti-popup-title {
  margin-right: auto;
}

.yetti-popup-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #EFEFEF;
  margin-left: 24px;
}
.yetti-popup-close .icon {
  width: 20px;
  height: 20px;
  fill: #1A1D1F;
  transition: transform 0.2s;
}

body.dark .yetti-popup-close {
  background: #272B30;
}
body.dark .yetti-popup-close .icon {
  fill: #FCFCFC;
}

.yetti-popup-close:hover .icon {
  transform: rotate(90deg);
}

.yetti-popup .form {
  width: 100%;
  margin-bottom: 24px;
}

.yetti-popup-item:not(:last-child) {
  margin-bottom: 24px;
}

.yetti-popup-label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}

.yetti-popup .field__label {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.71429;
  color: #6F767E;
}
.yetti-popup .checkbox:not(:last-child) {
  margin-bottom: 12px;
}

.yetti-popup-range {
  margin: 20px 0;
}

.yetti-popup-box {
  position: relative;
}
.yetti-popup-box .select {
  padding-left: 48px;
}
.yetti-popup-box .icon {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 10;
  pointer-events: none;
  width: 24px;
  height: 24px;
  fill: #FFD88D;
}

.yetti-popup-btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.yetti-popup-btns .yetti-popup-button:not(:last-child) {
  margin-right: 12px;
}

.yetti-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 28;
  background: rgba(244, 244, 244, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

body.dark .yetti-popup-overlay {
  background: rgba(39, 43, 48, 0.9);
}

.yetti-popup.active {
  display: block;
}
.yetti-popup.active .yetti-popup-body, .yetti-popup.active .yetti-popup-overlay {
  visibility: visible;
  opacity: 1;
}

.yetti-popup-wrapper {
  position: relative;
}

.mobile-modal .modal-handle {
  left: 0px;
  right: 0px;
  top: 10px;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  width: 36px;
  height: 5px;
  transform: translateZ(0px);
  background: #c0c0be;
  z-index: 11;
}

@font-face {
  font-family: gordita;
  src: url(/assets/fonts/Gordita/gordita_medium-webfont.2c5243dd.woff2) format("woff2"), url(/assets/fonts/Gordita/gordita_medium-webfont.664ad640.woff) format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: gordita;
  src: url(/assets/fonts/Gordita/gordita_regular-webfont.54867ac9.woff2) format("woff2"), url(/assets/fonts/Gordita/gordita_regular-webfont.41d071df.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
#app-sandy-index h1, #app-sandy-index h2, #app-sandy-index h3, #app-sandy-index h4, #app-sandy-index h5, #app-sandy-index h6, #app-sandy-index p, #app-sandy-index div, #app-sandy-index span, #app-sandy-index a, #app-sandy-index button, #app-sandy-index li, #app-sandy-index input, #app-sandy-index label {
  font-family: "Karla", sans-serif;
}

.index-header .index-header-nav .index-header-link {
  color: #000;
  font-size: 20px;
  margin: 0 23px;
  padding: 30px 0;
  font-weight: initial;
}

.hero-banner-five [class*=icon-box] {
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
@media (max-width: 991px) {
  .hero-banner-five [class*=icon-box] {
    display: none;
  }
}
.hero-banner-five [class*=icon-box] img {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.hero-banner-five .icon-box-one {
  width: 58px;
  height: 58px;
  box-shadow: 0 20px 50px rgba(31, 36, 44, 0.07);
  top: 9%;
  left: 17%;
  -webkit-animation: jumpTwo 3.5s linear infinite;
  animation: jumpTwo 3.5s linear infinite;
}
.hero-banner-five .icon-box-one img {
  width: 29px;
}
.hero-banner-five .icon-box-two {
  width: 90px;
  height: 90px;
  box-shadow: 10px 20px 50px rgba(31, 36, 44, 0.07);
  top: 32%;
  left: 5%;
  -webkit-animation: jumpTwo 4s linear infinite;
  animation: jumpTwo 4s linear infinite;
}
.hero-banner-five .icon-box-two img {
  width: 42px;
}
.hero-banner-five .icon-box-three {
  width: 70px;
  height: 70px;
  box-shadow: 10px 25px 70px rgba(31, 36, 44, 0.07);
  top: 45%;
  left: 20%;
  -webkit-animation: jumpThree 3.5s linear infinite;
  animation: jumpThree 3.5s linear infinite;
}
.hero-banner-five .icon-box-three img {
  width: 30px;
}
.hero-banner-five .icon-box-four {
  width: 75px;
  height: 75px;
  box-shadow: 10px 30px 60px rgba(31, 36, 44, 0.07);
  bottom: 12%;
  left: 10%;
  -webkit-animation: jumpThree 3s linear infinite;
  animation: jumpThree 3s linear infinite;
}
.hero-banner-five .icon-box-four img {
  width: 40px;
}
.hero-banner-five .icon-box-five {
  width: 58px;
  height: 58px;
  box-shadow: 0 20px 50px rgba(31, 36, 44, 0.07);
  top: 9%;
  right: 17%;
  -webkit-animation: jumpTwo 3.5s linear infinite;
  animation: jumpTwo 3.5s linear infinite;
}
.hero-banner-five .icon-box-five img {
  width: 35px;
}
.hero-banner-five .icon-box-six {
  width: 90px;
  height: 90px;
  box-shadow: 10px 20px 50px rgba(31, 36, 44, 0.07);
  top: 32%;
  right: 5%;
  -webkit-animation: jumpTwo 4s linear infinite;
  animation: jumpTwo 4s linear infinite;
}
.hero-banner-five .icon-box-six img {
  width: 54px;
}
.hero-banner-five .icon-box-seven {
  width: 70px;
  height: 70px;
  box-shadow: 10px 25px 70px rgba(31, 36, 44, 0.07);
  top: 45%;
  right: 20%;
  -webkit-animation: jumpThree 3.5s linear infinite;
  animation: jumpThree 3.5s linear infinite;
}
.hero-banner-five .icon-box-seven img {
  width: 26px;
}
.hero-banner-five .icon-box-eight {
  width: 75px;
  height: 75px;
  box-shadow: 10px 30px 60px rgba(31, 36, 44, 0.07);
  bottom: 12%;
  right: 10%;
  -webkit-animation: jumpThree 3s linear infinite;
  animation: jumpThree 3s linear infinite;
}
.hero-banner-five .icon-box-eight img {
  width: 30px;
}
.hero-banner-five [class*=bubble] {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.hero-banner-five [class*=bubble]:before {
  content: "";
  border-radius: 50%;
  position: absolute;
}
.hero-banner-five .bubble-one {
  width: 120px;
  height: 120px;
  left: 4%;
  top: 15%;
  -webkit-animation: rotated 12s linear infinite;
  animation: rotated 12s linear infinite;
}
.hero-banner-five .bubble-one:before {
  width: 6px;
  height: 6px;
  background: #fac3ff;
  top: 0;
  left: 50%;
}
.hero-banner-five .bubble-two {
  width: 160px;
  height: 160px;
  top: 30%;
  left: 15%;
  -webkit-animation: rotated 17s linear infinite;
  animation: rotated 17s linear infinite;
}
.hero-banner-five .bubble-two:before {
  width: 10px;
  height: 10px;
  background: #8fe9e0;
  top: 50%;
  right: 100%;
}
.hero-banner-five .bubble-three {
  width: 120px;
  height: 120px;
  bottom: 33%;
  left: 4%;
  -webkit-animation: rotated 12s linear infinite;
  animation: rotated 12s linear infinite;
}
.hero-banner-five .bubble-three:before {
  width: 6px;
  height: 6px;
  background: #ffd5ad;
  bottom: 0;
  left: 50%;
}
.hero-banner-five .bubble-four {
  width: 120px;
  height: 120px;
  right: 4%;
  top: 15%;
  -webkit-animation: rotated 12s linear infinite;
  animation: rotated 12s linear infinite;
}
.hero-banner-five .bubble-four:before {
  width: 6px;
  height: 6px;
  background: #8fe9e1;
  top: 0;
  left: 50%;
}
.hero-banner-five .bubble-five {
  width: 160px;
  height: 160px;
  top: 30%;
  right: 15%;
  -webkit-animation: rotated 17s linear infinite;
  animation: rotated 17s linear infinite;
}
.hero-banner-five .bubble-five:before {
  width: 10px;
  height: 10px;
  background: #ffd5ad;
  top: 50%;
  right: 100%;
}
.hero-banner-five .bubble-six {
  width: 120px;
  height: 120px;
  bottom: 33%;
  right: 4%;
  -webkit-animation: rotated 12s linear infinite;
  animation: rotated 12s linear infinite;
}
.hero-banner-five .bubble-six:before {
  width: 6px;
  height: 6px;
  background: #fac3ff;
  bottom: 0;
  left: 50%;
}

.footer-bg-wrapper {
  position: relative;
  padding-top: 230px;
}
.footer-bg-wrapper:before {
  content: url(/assets/image/svg/11.3b4e8619.svg);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.footer-bg-wrapper [class*=bubble] {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.footer-bg-wrapper .bubble-one {
  width: 25px;
  height: 25px;
  background: #ff6cc4;
  top: 4%;
  left: 26%;
  -webkit-animation: scale-up-one 4s linear infinite;
  animation: scale-up-one 4s linear infinite;
}
.footer-bg-wrapper .bubble-two {
  -webkit-animation: scale-up-one 4s linear infinite;
  animation: scale-up-one 4s linear infinite;
  width: 14px;
  height: 14px;
  background: #ffbe50;
  top: 48%;
  left: 10%;
}
.footer-bg-wrapper .bubble-three {
  width: 7px;
  height: 7px;
  background: #04e8f4;
  bottom: 18%;
  left: 20%;
  -webkit-animation: scale-up-three 4s linear infinite;
  animation: scale-up-three 4s linear infinite;
}

.fancy-short-banner-two .content-wrapper {
  position: relative;
}
.fancy-short-banner-two .content-wrapper:before {
  content: url(/img/12.552ab72e.svg);
  position: absolute;
  top: -117px;
  right: -117px;
  z-index: -1;
  opacity: 0.9;
  -webkit-animation: jumpTwo 5s linear infinite;
  animation: jumpTwo 5s linear infinite;
}
.fancy-short-banner-two .bg-wrapper {
  position: relative;
  overflow: hidden;
  background: #7034ff;
  box-shadow: 0 20px 60px 0 rgba(104, 103, 255, 0.2);
  border-radius: 5px;
  padding: 50px 55px;
  z-index: 1;
}
.fancy-short-banner-two h2 {
  font-size: 36px;
  line-height: 1.16em;
  color: #fff;
  max-width: 560px;
}
.fancy-short-banner-two a {
  width: 178px;
  line-height: 54px;
  background: #fff;
  border-radius: 5px;
  color: var(--blue-dark);
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.fancy-short-banner-two a:hover {
  background: #ffba12;
  color: #fff;
}
.fancy-short-banner-two [class*=bubble] {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}
.fancy-short-banner-two .bubble-one {
  width: 13px;
  height: 13px;
  background: rgba(217, 217, 217, 0.14);
  top: 27%;
  left: 60%;
  -webkit-animation: scale-up-one 4s linear infinite;
  animation: scale-up-one 4s linear infinite;
}
.fancy-short-banner-two .bubble-two {
  width: 6px;
  height: 6px;
  top: 62%;
  right: 28%;
}
.fancy-short-banner-two .bubble-three, .fancy-short-banner-two .bubble-two {
  background: rgba(217, 217, 217, 0.14);
  -webkit-animation: scale-up-three 4s linear infinite;
  animation: scale-up-three 4s linear infinite;
}
.fancy-short-banner-two .bubble-three {
  width: 5px;
  height: 5px;
  bottom: 37%;
  right: 51%;
}
.fancy-short-banner-two .bubble-four {
  width: 245px;
  height: 245px;
  top: -103px;
  right: -70px;
}
.fancy-short-banner-two .bubble-five, .fancy-short-banner-two .bubble-four {
  background: rgba(217, 217, 217, 0.14);
  -webkit-animation: jello 3s linear infinite;
  animation: jello 3s linear infinite;
}
.fancy-short-banner-two .bubble-five {
  width: 68px;
  height: 68px;
  bottom: -24px;
  left: -28px;
}

.theme-footer-one {
  position: relative;
}
.theme-footer-one:before {
  content: url(/assets/image/svg/ils_01.a224199e.svg);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.theme-footer-one .top-footer [class*=col-] {
  margin-bottom: 30px;
}
.theme-footer-one .top-footer .footer-title {
  font-family: Rubik, sans-serif;
  font-size: 24px;
  padding-bottom: 25px;
}
.theme-footer-one .top-footer .footer-list ul li a {
  font-size: 16px;
  line-height: 38px;
  color: #727272;
  transition: all 0.3s ease-in-out;
}
.theme-footer-one .top-footer .footer-list ul li a:hover {
  color: var(--blue-dark);
}
.theme-footer-one .top-footer .address-list ul li a {
  font-size: 16px;
  color: #727272;
  margin-bottom: 10px;
}
.theme-footer-one .top-footer .address-list ul li a:hover {
  text-decoration: underline;
}
.theme-footer-one .top-footer .address-list ul li a.mobile-num {
  font-size: 20px;
  color: #030303;
}
.theme-footer-one .bottom-footer-content {
  padding: 26px 0 30px;
}
.theme-footer-one .bottom-footer-content ul li {
  display: inline-block;
}
.theme-footer-one .bottom-footer-content ul li a {
  font-size: 16px;
  color: #727272;
  margin-left: 20px;
}
.theme-footer-one .bottom-footer-content ul li a:hover {
  color: #000;
}
.theme-footer-one .bottom-footer-content p {
  font-size: 15px;
  color: #6a6a6a;
}
.theme-footer-one .bottom-footer-content ul {
  padding-right: 97px;
}

#app-sandy-index {
  background: #fff;
}

.mobile-modal .modal-handle {
  left: 0px;
  right: 0px;
  top: 10px;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  width: 36px;
  height: 5px;
  transform: translateZ(0px);
  background: #c0c0be;
  z-index: 11;
}

.new-salon-wrapper {
  display: grid;
  grid-template-columns: [content] auto;
  grid-template-rows: [nav] 4.5rem [content] auto;
  min-height: 100vh;
}
@media (min-width: 48em) {
  .new-salon-wrapper {
    grid-template-columns: [nav] 80px [content] auto;
    grid-template-rows: [content] auto;
  }
}
.new-salon-wrapper .salon-nav {
  position: absolute;
  width: 100vw;
  height: 4.5rem;
  background: none;
  flex-direction: row;
  display: flex;
  will-change: width;
  justify-content: space-between;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    bottom: 0px;
    height: 100vh;
    width: 80px;
    border-right: 0.125rem solid #ededf0;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    flex-direction: column;
    background: #fff;
    justify-content: space-between;
    display: flex;
    will-change: width;
  }
}
.new-salon-wrapper .salon-main {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 176px auto;
  justify-items: center;
  padding-bottom: 6rem;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-main {
    grid-template-rows: 334px auto;
  }
}
.new-salon-wrapper .salon-main .salon-banner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 0px 0px 2rem 2rem;
  overflow: hidden;
}
.new-salon-wrapper .salon-main .salon-banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.new-salon-wrapper .salon-main .salon-main-contents {
  width: 100%;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  gap: 16px;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-main .salon-main-contents {
    padding: 0 2.5rem;
    grid-template-columns: repeat(8, 1fr [grid-col]);
  }
}
@media (min-width: 72em) {
  .new-salon-wrapper .salon-main .salon-main-contents {
    grid-template-columns: repeat(12, 1fr [grid-col]);
  }
}
@media (min-width: 90em) {
  .new-salon-wrapper .salon-main .salon-main-contents {
    width: 1232px;
  }
}
@media (min-width: 120em) {
  .new-salon-wrapper .salon-main .salon-main-contents {
    width: 1544px;
    grid-template-columns: repeat(10, 1fr [grid-col]);
  }
}
.new-salon-wrapper .salon-main .salon-main-contents .salon-main-inner {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -48px;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-main .salon-main-contents .salon-main-inner {
    margin-top: -88px;
  }
}
.new-salon-wrapper .salon-main .salon-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 29px;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-main .salon-avatar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
  }
}
.new-salon-wrapper .salon-main .salon-avatar .-content {
  border-radius: 100%;
  position: relative;
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 0.375rem #fff;
  flex-shrink: 0;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-main .salon-avatar .-content {
    box-shadow: 0 0 0 0.75rem #fff;
    width: 11rem;
    height: 11rem;
  }
}
.new-salon-wrapper .salon-main .salon-avatar .-content img {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background: #dfe0e2;
}
.new-salon-wrapper .salon-main .salon-about {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.new-salon-wrapper .salon-main .salon-about .-\/inner {
  flex: 1 1 0%;
  text-align: center;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-main .salon-about .-\/inner {
    padding-right: 1rem;
    text-align: left;
    max-width: 608px;
  }
}
.new-salon-wrapper .salon-main .salon-about .-\/inner .-\/name {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.25;
}
@media (min-width: 48em) {
  .new-salon-wrapper .salon-main .salon-about .-\/inner .-\/name {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
  }
}
.new-salon-wrapper .salon-main .salon-about .-\/inner .-\/username {
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  background: linear-gradient(87.27deg, #e43a7a -9.25%, #893cb8 99.26%) padding-box text;
  color: transparent;
}
.new-salon-wrapper .salon-main .salon-about .-\/inner .-\/about {
  color: #696c74;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
}
@-webkit-keyframes bg-anim {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100%;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes bg-anim {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100%;
  }
  to {
    background-position: 0 0;
  }
}
.new-salon-wrapper .salon-main .salon-block .-lists {
  display: flex;
  flex-flow: row wrap;
}
.new-salon-wrapper .salon-main .salon-block .-item-box {
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 40px;
  padding: 30px 20px;
  align-items: center;
  min-width: 150px;
  margin: 0 10px 30px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}
.new-salon-wrapper .salon-main .salon-block .-item-box img {
  margin-bottom: 20px;
}
.new-salon-wrapper .salon-main .salon-block .-item-box h4 {
  font-size: 15px;
  font-weight: 300;
  text-align: center;
  line-height: 110%;
}
.new-salon-wrapper .salon-main .salon-block .-item-box h4 span {
  font-size: 15px;
  font-weight: 700;
  display: block;
  line-height: 140%;
}
.new-salon-wrapper .salon-main .salon-barbers {
  overflow-x: auto;
}
@media (min-width: 1536px) {
  .new-salon-wrapper .salon-main .salon-barbers {
    overflow-x: hidden;
  }
}
.new-salon-wrapper .salon-main .salon-barbers .-\/inner {
  width: 1100px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}
@media (min-width: 1280px) {
  .new-salon-wrapper .salon-main .salon-barbers .-\/inner {
    width: 100%;
  }
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items {
  display: flex;
  cursor: pointer;
  width: 174.91px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items:not(:first-child) {
  margin-left: 48px;
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items .thumbnail {
  transition: 0.25s ease-in-out;
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items .thumbnail:hover {
  -webkit-animation-name: bg-anim;
          animation-name: bg-anim;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background: linear-gradient(0.351turn, #ff5858 23.71%, #c058ff 78.8%);
  background-size: 165%;
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items .thumbnail img {
  width: 174.91px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 174.91px;
  border-radius: 550px;
  transition-duration: 0.3s;
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items .thumbnail img:hover {
  transform: scaleX(0.95) scaleY(0.95);
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items .-\/name {
  color: #000;
  margin-top: 16px;
  line-height: 17px;
  font-size: 18px;
  font-weight: 500;
}
.new-salon-wrapper .salon-main .salon-barbers .barber-items .-\/username {
  background: #000;
  background-color: #000;
  background-image: linear-gradient(0.351turn, #ff5858 23.71%, #c058ff 78.8%);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.75s ease;
  margin-top: 12px;
  font-size: 16px;
}
@media (max-width: 768px) {
  .new-salon-wrapper .salon-main-contents, .new-salon-wrapper .salon-main, .new-salon-wrapper {
    display: flex !important;
    flex-direction: column;
  }
}

.salon-footer {
  margin-top: 90px;
  width: 100%;
}
@media (min-width: 1024px) {
  .salon-footer {
    width: 840px;
  }
}
@media (min-width: 1280px) {
  .salon-footer {
    width: 1100px;
  }
}
.salon-footer .w-125p {
  width: 125px;
}
.salon-footer .menu-lists-wrap {
  margin-top: 32px;
  margin-bottom: 32px;
  font-size: 16px;
}
@media (max-width: 600px) {
  .salon-footer .menu-lists-wrap {
    gap: 72px;
  }
}
.salon-footer .menu-lists-wrap .-\/lists {
  gap: 32px;
}
@media (max-width: 600px) {
  .salon-footer .menu-lists-wrap .-\/lists {
    align-items: flex-start;
    gap: 24px;
    flex-direction: column;
  }
}
.salon-footer .social-links .social-link {
  background: transparent !important;
}
.salon-footer .social-links .social-link i {
  color: #000 !important;
  font-size: 40px;
}
.salon-footer .-copyright {
  font-size: 16px;
  margin-top: 34px;
}
.salon-footer .-copyright a {
  background: #000;
  background-color: #000;
  background-image: linear-gradient(0.351turn, #ff5858 23.71%, #c058ff 78.8%);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  transition: all 0.75s ease;
  -webkit-text-fill-color: transparent;
}

body:not(.salon-body) .form-input {
  text-align: left;
}
body:not(.salon-body) .form-input label {
  position: initial;
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
  color: #000;
}
body:not(.salon-body) .form-input input {
  background: #fff;
  border-radius: 2px;
  border: 2px solid #000000;
  font-size: 14px;
  height: 48px;
  padding: 18px;
}

.form-input.is-link .is-link-inner {
  display: flex;
  background: #f5f6f8;
  border: 0;
  border-radius: 2px;
  padding: 0;
  width: 100%;
  height: 54px;
}
.form-input.is-link .is-link-inner .side-info {
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #686d73;
  padding-right: 10px;
}
.form-input.is-link .is-link-inner input {
  background: #fff;
  border-radius: 12px;
  border: 2px solid #e6e8ec !important;
  font-size: 14px;
  height: 48px;
  padding: 18px;
  padding-left: 10px;
}

.sandy-register-wizard {
  padding-left: 200px;
  position: relative;
  min-height: 450px;
}
@media (max-width: 768px) {
  .sandy-register-wizard {
    padding-left: 0;
  }
}
.sandy-register-wizard .-wizard-step-title {
  font-size: 20px;
  font-weight: bold;
  color: #7b7f89;
  margin-bottom: 45px;
}
.sandy-register-wizard .-wizard-step-heading {
  font-size: 35px;
  font-weight: bold;
  color: #030303;
  margin-bottom: 17px;
}
.sandy-register-wizard .-wizard-step-desc {
  font-size: 16px;
  color: #030303;
}
.sandy-register-wizard .sandy-tabs-menu {
  padding-top: 30px;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .sandy-register-wizard .sandy-tabs-menu {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 600px;
    position: absolute;
    left: 0;
    display: flex;
    top: 50%;
    transform: translateY(-50%);
  }
}
.sandy-register-wizard .sandy-tabs-menu ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: space-between;
  background-image: linear-gradient(#7b7f89, #7b7f89);
  background-size: calc(100% - 50px) 4px;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 768px) {
  .sandy-register-wizard .sandy-tabs-menu ul {
    width: 50px;
    flex-direction: column;
    background-size: 4px calc(100% - 50px);
    margin-bottom: 0;
  }
}
.sandy-register-wizard .sandy-tabs-menu ul li {
  cursor: pointer;
}
.sandy-register-wizard .sandy-tabs-menu ul li span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 10%;
  background-color: #7b7f89;
  text-align: center;
  line-height: 50px;
  color: #fff;
}
.sandy-register-wizard .sandy-tabs-menu ul li.active span {
  background-color: #000;
}

@-webkit-keyframes flip-horizontal-bottom {
  0% {
    transform: rotateX(-180deg);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    transform: rotateX(-180deg);
  }
  100% {
    transform: rotateX(0);
  }
}
.item-price-select .-select-inner {
  cursor: pointer;
  border-radius: 15px;
  border: 1px solid #edeef1;
  padding: 1.25rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  transition: 0.4s;
}
.item-price-select .-select-inner .part-one .check-select {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1px solid #ced2d7;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 1.25rem;
  transition: 0.4s;
  font-size: 0;
  background: #fff;
}
.item-price-select .-select-inner .part-one h3 {
  display: inline-block;
  font-size: 18px;
  color: #0b2238;
  margin-bottom: 0;
  font-weight: 400;
  transition: 0.4s;
}
.item-price-select .-select-inner .part-one h3 .offer {
  display: inline-block;
  border-radius: 20px;
  font-size: 12px;
  color: #fd6b3b;
  background-color: rgba(253, 107, 59, 0.1);
  padding: 8px 13px;
  margin-left: 12px;
}
.item-price-select .-select-inner .part-two h4 {
  font-size: 30px;
  font-weight: 600;
  color: #0b2238;
  margin-bottom: 0;
  transition: 0.4s;
}
.item-price-select .-select-inner .part-two h4 span {
  font-size: 14px;
  color: #6c7a87;
  font-weight: 400;
}
.item-price-select input {
  display: none;
}
.item-price-select input:checked + .-select-inner {
  background: #000;
  border-color: transparent;
}
.item-price-select input:checked + .-select-inner .part-one h3 {
  color: #fff;
}
.item-price-select input:checked + .-select-inner .part-one .check-select {
  opacity: 1;
  font-size: 13px;
  -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both !important;
          animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both !important;
}
.item-price-select input:checked + .-select-inner .part-two h4 {
  color: #fff;
}
.item-price-select input:checked + .-select-inner .part-two h4 span {
  color: rgba(255, 255, 255, 0.6);
}

.dashboard-header-banner {
  border-radius: 24px;
  background: white;
  padding: 0;
}
.dashboard-header-banner .card-container {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: inherit;
}
.dashboard-header-banner .card-container .is-info {
  width: 70%;
  display: block;
}
@media (max-width: 768px) {
  .dashboard-header-banner .card-container .is-info {
    width: 60%;
  }
}
.dashboard-header-banner .card-container .side-cta {
  margin: 0;
  font-size: initial;
  font-size: unset;
  right: -8rem;
  top: 0;
  right: -4rem;
}
.dashboard-header-banner .card-container .side-cta img, .dashboard-header-banner .card-container .side-cta svg {
  width: 250px;
  max-width: 350px;
  max-height: 350px;
  max-height: 150px;
  -o-object-fit: contain;
     object-fit: contain;
}
body.is-dark .dashboard-header-banner {
  background: #222;
}
body.is-dark .dashboard-header-banner svg {
  stroke: #fff;
}

.book-services .book-service-group .services-addons {
  display: none;
}
.book-services .sandy-input-inner:checked + .book-service-group.has-addons .services-addons {
  display: block;
}

.flex-basis-0 {
  flex-basis: 0 !important;
}

.balance-express {
  height: 70px;
  background: var(--c-accent);
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  padding: 16px;
}
.balance-express .-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}
.balance-express .-overlay svg {
  width: 100%;
  stroke: #fff;
  top: 3rem;
  position: relative;
  left: 40px;
  transform: rotate(87deg);
}
.balance-express .-text-bal {
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}
.balance-express .-bal-val {
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0.02em;
  color: #F0FFCE;
  margin-top: 8px;
}
.balance-express .-svg-i {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
  width: 40px;
  height: 38px;
}
.balance-express .-svg-i::before {
  content: "";
  width: 1px;
  height: 38px;
  opacity: 0.3;
  border: 1px solid #FFFFFF;
}

.sandy-big-radio.sel-tabs {
  flex: 0 0 120px;
}
.sandy-big-radio.sel-tabs .radio-select-inner {
  border-radius: 0;
  padding: 10px;
  min-height: 100%;
  padding-right: 20px;
  border-color: transparent;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}
.sandy-big-radio.sel-tabs .active-dot {
  position: absolute;
  top: 19px;
  right: 7px;
  width: 9px;
  height: 5px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 550px;
}
.sandy-big-radio.sel-tabs h1 {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sandy-big-radio.sel-tabs input[type=radio]:checked + div {
  border-color: transparent;
  border-bottom: 2px solid #db3162;
  border-radius: 0;
}
.sandy-big-radio.sel-tabs input[type=radio]:checked + div .active-dot {
  background: #db3162;
}

.giftbox-badge {
  position: fixed;
  right: 10px;
  top: 10px;
  background: #000;
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.giftbox-badge svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  stroke-width: 4;
}
.giftbox-badge span {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
  background: #fff;
  border-radius: 550px;
  height: 15px;
  width: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.giftbox--indicator {
  border-radius: 100%;
  height: 14px;
  left: 45px;
  position: absolute;
  width: 14px;
}
.giftbox--indicator.available {
  background: #49A972;
}
.giftbox--indicator.unavailable {
  background: #ff7c7c;
}
@media (max-width: 1023px) {
  .giftbox--indicator {
    left: 25px;
  }
}

.barber-box-w.unavailable {
  box-shadow: 0px 0px 0px 2px #ff7c7c, 0px 4px 10px #cbd7ff;
}
.barber-box-w.available {
  box-shadow: 0px 0px 0px 2px var(--c-button-background-color);
}

.sandy_tooltip {
  z-index: 999999;
}

.default-theme .months {
  overflow-x: auto;
  display: flex;
  float: initial !important;
  width: 100% !important;
  left: initial !important;
}
.default-theme .months .cell {
  border-right: 1px solid rgba(0, 0, 0, 0.09);
  flex: 0 0 105px;
  float: initial;
  display: flex;
  justify-content: center;
}
.default-theme .months .cell.selected {
  background: #000;
}
.default-theme .months .cell .bullet {
  display: none !important;
}
@media (max-width: 768px) {
  .default-theme .months .cell {
    flex: 0 0 85px;
  }
}
.default-theme .months .date-formatted {
  color: #000;
}
.default-theme .calendar {
  display: flex;
  overflow-x: auto;
  float: initial !important;
  width: 100% !important;
}
.default-theme .calendar .cell {
  flex: 0 0 70px;
  float: initial !important;
}
@media (max-width: 768px) {
  .default-theme .calendar .cell {
    flex: 0 0 70px;
  }
}

.range-calendar .calendar .cell {
  position: relative;
  border-radius: 12px;
}
.range-calendar .calendar .cell.selected:first-child {
  margin-left: 5px;
}

.default-theme .calendar .cell .day-number {
  color: #000;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.default-theme .range-bar {
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 13px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent !important;
}

.range-calendar .calendar .cell .day {
  color: rgba(0, 0, 0, 0.4);
  font-size: 9px;
  font-weight: 500;
}

.cal-cell.cell.is--weekend {
  background: #000;
}
.cal-cell.cell.is--weekend.is-6 {
  margin-left: 7px;
}
.cal-cell.cell.is--weekend .day-number, .cal-cell.cell.is--weekend .day {
  color: #fff;
}
.cal-cell.cell.is--weekend:hover {
  background: #000;
}
.cal-cell.cell.is--weekend:hover .day-number, .cal-cell.cell.is--weekend:hover .day {
  color: #888;
}

.cal-cell.cell.-disabled::before {
  content: "x";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background: #ffffffc2;
  border-radius: inherit;
  color: #f87171;
}

.cal-cell.cell.is--weekend + .cal-cell.cell.is--weekend {
  margin: 0 7px;
}

.default-theme .calendar .cell.selected .day-number, .default-theme .calendar .cell.selected .day {
  color: #000;
}

.barbers-book-group.is-modern .barbers-group-item {
  background: transparent;
}
.barbers-book-group.is-modern .barbers-group-item .barber-name {
  font-weight: 500;
  font-size: 11px;
}
.barbers-book-group.is-modern .barbers-thumb {
  position: relative;
  border-radius: 550px;
}
.barbers-book-group.is-modern .barbers-thumb img {
  border-radius: inherit;
}
.barbers-book-group.is-modern .sandy-input-inner:checked + .barbers-group-item {
  border: 0 !important;
  box-shadow: none !important;
}
.barbers-book-group.is-modern .sandy-input-inner:checked + .barbers-group-item .barbers-thumb::before {
  background: #ffffff9c;
  content: "\2713";
  height: 100%;
  width: 100%;
  z-index: 99;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: inherit;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #909090;
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  -webkit-animation: lds-ellipsis1 0.6s infinite;
          animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
          animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
          animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  -webkit-animation: lds-ellipsis3 0.6s infinite;
          animation: lds-ellipsis3 0.6s infinite;
}

@-webkit-keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@-webkit-keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
.dashboard-header-m {
  background: ##fff;
  border-radius: 0 0 25px 25px;
  padding-top: 1rem;
}

.small-menu-cog {
  background: #fff;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.is-dark .small-menu-cog {
  background: #000;
  border-color: #222;
}
body.is-dark .small-menu-cog svg {
  color: #fff;
}
.small-menu-cog svg {
  width: 18px;
  height: 18px;
  stroke-width: 6;
}

.dashhead {
  background: #fff;
  display: flex;
  padding: 10px;
  border-radius: 10px;
  flex-direction: column;
  margin-top: 1.25rem;
  width: 100%;
}
@media (min-width: 640px) {
  .dashhead {
    flex-direction: row;
  }
}
.dashhead .-icon {
  height: 3rem;
  width: 3rem;
  background: #fff;
  border-radius: 10px;
  padding: 13px;
}
.dashhead .-icon svg {
  width: 100%;
  height: 100%;
  stroke: #000
}
.dashhead .-content {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
}
.dashhead .-content .\--title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-top: auto;
}
.dashhead .-content .\--sub {
  font-size: 14px;
  color: #4d5760;
  margin-bottom: 10px;
}

.sandy-btn {
  height: 45px;
  font-size: 16px;
  background: #000;
  border-radius: 4px;
  color: #fff;
  width: 100%;
  font-weight: 700;
}
.feedback-comment-form {
  transition: all 0.4s ease;
  opacity: 1;
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 0 20px;
  z-index: 1001;
  border-top: 1px solid #dfe0e2;
}
.feedback-comment-form .comment-post {
  display: flex;
  align-items: center;
}
.feedback-comment-form .comment-post textarea {
  display: block;
  width: calc(100% - 80px);
  border: none;
  height: 0;
  margin: 10px 0;
  margin-right: 100px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  min-height: 21px;
  max-height: 300px;
  outline: none;
  overflow: hidden;
  background: #fff;
  color: #000;
}

.feed-post .-actions {
  z-index: 1;
  position: absolute;
  bottom: 25px;
  right: 25px;
}
.feed-post .-actions .\--action {
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: none;
  border: 0;
}
.feed-post .-actions .\--action .\--ic svg {
  width: 29px;
  height: 29px;
  stroke: #fff;
}
.feed-post .-actions .\--action .\--count {
  display: block;
  font-size: 13px;
  color: #fff;
}
@media (min-width: 1024px) {
  .feed-post .-actions .\--action .\--count {
    font-size: 15px;
  }
}
.feed-post .-background-media {
  --chessboard-size: 20px;
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 122.64151% 0 0;
  text-align: center;
  color: #fafafa;
  background: none;
  border: none;
  overflow: hidden;
  width: 100%;
  padding-top: 125.69444%;
  border-radius: 4px;
}
@media (min-width: 1024px) {
  .feed-post .-background-media {
    --chessboard-size: 40px;
    width: 100%;
    height: 0;
    padding-top: 126.14841%;
  }
}
.feed-post .-background-media img {
  z-index: 0;
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  background-color: transparent;
  background-image: linear-gradient(45deg, #2a2a2d 25%, transparent 0), linear-gradient(135deg, #2a2a2d 25%, transparent 0), linear-gradient(45deg, transparent 75%, #2a2a2d 0), linear-gradient(135deg, transparent 75%, #2a2a2d 0);
  background-position: 0 0, var(--chessboard-size) 0, var(--chessboard-size) calc(var(--chessboard-size) * -1), 0 calc(var(--chessboard-size) * -1);
  background-size: calc(var(--chessboard-size) * 2) calc(var(--chessboard-size) * 2);
}
.feed-post .-background-media::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(-180deg, rgba(2, 4, 8, 0) 77%, rgba(2, 4, 8, 0.12) 81%, rgba(2, 4, 8, 0.92));
  pointer-events: none;
}
.feed-post .-post-content {
  z-index: 1;
  position: absolute;
  bottom: 10px;
  left: 16px;
  max-width: 70%;
}
@media (min-width: 1024px) {
  .feed-post .-post-content {
    bottom: 24px;
    left: 24px;
  }
}
.feed-post .-post-content .\--time {
  display: block;
  margin-top: 3px;
  font-size: 0.6875rem;
  line-height: 1.54545em;
  color: #b2b2b2;
}
@media (min-width: 1024px) {
  .feed-post .-post-content .\--time {
    margin-top: 12px;
    font-size: 0.8125rem;
    line-height: 1.30769em;
  }
}
.feed-post .-post-content .\--post-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-post .-post-content .\--name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4em;
  margin-top: 4px;
}
@media (min-width: 1024px) {
  .feed-post .-post-content .\--name {
    font-size: 1.5625rem;
    line-height: 1.4em;
  }
}
.feed-post .-post-content .\--avatar {
  width: 40px;
  height: 40px;
  position: relative;
}
@media (min-width: 1024px) {
  .feed-post .-post-content .\--avatar {
    width: 52px;
    height: 52px;
  }
}
.feed-post .-post-content .\--avatar img {
  z-index: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
  transform: translate(-50%, -50%);
  border-radius: 550px;
}

.user-offline::before {
  background: #adadad;
  position: absolute;
  border: 3px solid #fff;
  display: block;
  bottom: -3px;
  right: 0;
  content: "";
  border-radius: 50%;
  height: 30%;
  min-height: 30%;
  width: 30%;
  min-width: 30%;
}

.user-offline::before {
  background: #adadad;
  position: absolute;
  border: 3px solid #fff;
  display: block;
  bottom: -3px;
  right: 0;
  content: "";
  border-radius: 50%;
  height: 30%;
  min-height: 30%;
  width: 30%;
  min-width: 30%;
}

.user-online-profile::before {
  background: #4caf50;
  position: absolute;
  border: 3px solid #fff;
  display: block;
  bottom: 10px;
  right: 15px;
  content: "";
  border-radius: 50%;
  height: 12%;
  width: 12%;
}

.user-offline-profile::before {
  background: #adadad;
  position: absolute;
  border: 3px solid #fff;
  display: block;
  bottom: 10px;
  right: 15px;
  content: "";
  border-radius: 50%;
  height: 12%;
  width: 12%;
}

.create-post .compose-form {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.create-post .compose-form img {
  height: 42px;
  width: 42px;
  border-radius: 50%;
}
.create-post .compose-form .sandy-dropdown .-dropdown-head {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  font-weight: 400;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 14.5px;
  font-size: 14px;
  width: 140px;
  height: 27px;
  margin-bottom: 16px;
  justify-content: center;
}
.create-post .compose-form .sandy-dropdown .-dropdown-head svg {
  margin-left: 5px;
  margin-right: 0;
  width: 14px;
  height: 14px;
  stroke-width: 5;
  stroke: #000;
}
.create-post .compose-form .sandy-dropdown .-dropdown-body {
  border: none;
  padding: 0;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  min-width: 10rem;
  z-index: 2;
}
.create-post .compose-form .sandy-dropdown ul {
  padding: 5px;
}
.create-post .compose-form .sandy-dropdown ul li {
  cursor: pointer;
  padding: 8px 10px;
  transition: all 0.5s ease;
}
.create-post .compose-form .sandy-dropdown ul li a {
  color: #647589;
  text-transform: capitalize;
  font-size: calc(11px + 1 * (100vw - 320px) / 1600);
  display: flex;
  align-items: center;
}
.create-post .compose-form .sandy-dropdown ul li a svg {
  margin-right: 10px;
  height: 16px;
  width: 16px;
  stroke: rgba(100, 117, 137, 0.6);
}
.create-post .compose-form .sandy-dropdown ul li + li {
  border-top: 1px solid rgba(100, 117, 137, 0.1);
}
.create-post .compose-form .control {
  width: 100%;
  margin-left: 20px;
  box-sizing: border-box;
  clear: both;
  font-size: 1rem;
  position: relative;
  text-align: inherit;
}
.create-post .compose-form .control textarea {
  display: block;
  max-width: 100%;
  min-width: 100%;
  background-color: #fff;
  color: #363636;
  -moz-appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
  position: relative;
  font-size: 0.9rem;
  transition: all 0.3s;
}
.create-post .gradient-bg {
  margin-top: 25px;
}
.create-post .gradient-bg li {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  cursor: pointer;
}
.create-post .-add-watermark {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}
.create-post .-small-border-card {
  width: 34.35px;
  height: 34.35px;
  border: 1px solid #888888;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-post .-small-border-card svg {
  width: 16.49px;
  height: 16.49px;
}
.create-post .feed-upload .upload-wrap {
  position: relative;
  height: auto;
  width: 140px;
  min-width: 60px;
}
.create-post .feed-upload .upload-wrap img {
  display: inline-block;
  width: 140px;
  height: 78px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
}
.create-post .feed-upload .upload-wrap .remove-file {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.3s;
}
.create-post .feed-upload .upload-wrap .remove-file svg {
  height: 16px;
  width: 16px;
  stroke: #757a91;
}

.create-post-header {
  position: fixed;
  width: 100%;
  z-index: 9001;
  left: 0;
  top: 0;
  background: #fff;
  height: 5rem;
  padding: 2rem 1.5rem;
}
.create-post-header .button-cancel {
  font-weight: 500;
  font-size: 12px;
  color: #000000;
}
.create-post-header .button-save {
  width: 83px;
}

.chat-header {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  padding: 14px;
  background: #fff;
}
.chat-header .\--avatar {
  width: 34px;
  height: 34px;
  margin-right: 12px;
}
.chat-header .\--avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 550px;
}
.chat-header .-content {
  display: flex;
  margin-left: 34px;
}
.chat-header .-content .\--name {
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #202020;
  margin-bottom: 0px;
}
.chat-header .-content .\--online-status {
  width: 9px;
  height: 9px;
  border-radius: 550px;
}
.chat-header .-content .\--online-status.online {
  background: #04D900;
}
.chat-header .-content .\--online-status.offline {
  background: #adadad;
}
.chat-header .-content .\--online-status-t {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: -0.165px;
  color: #888888;
  margin-left: 4px;
}

nav[role=navigation] {
  overflow-x: auto;
}

.ios-padding-bottom-space {
  height: 100vh;
}

.white-box-wrap .white-box {
  margin-bottom: 20px;
  background-color: #fff;
  border: 2px solid #000000;
  border-radius: 0px;
}
.white-box-wrap .white-box .white-box-header .white-box-sub-header {
  padding: 15px 20px 15px 40px;
  margin-bottom: 0px;
  border-bottom: 1px solid #e7eaf3;
  margin-top: 0px;
  position: relative;
  display: flex;
  align-items: center;
}
.white-box-wrap .white-box .white-box-header .white-box-sub-header::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #e5e2e2;
  position: absolute;
  top: 20px;
  left: 15px;
  border-radius: 550px;
}
.white-box-wrap .white-box .white-box-header .white-box-sub-header h3 {
  color: #000000;
  margin: 0px;
  padding: 0px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
}
.white-box-wrap .white-box .white-box-content {
  padding: 20px;
}

.wj-image-selector-w.is-120 {
  height: 120px;
}
.wj-image-selector-w.is-120.is-overflow {
  width: 140px;
  flex: 0 0 140px;
}
.wj-image-selector-w.is-120 .wj-image-selector-trigger {
  height: 100%;
}

.small-card-images {
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  height: 120px;
}
.small-card-images.is-overflow {
  width: 140px;
  flex: 0 0 140px;
}
.small-card-images:hover .action-right, .small-card-images:hover .action-left {
  transform: translateX(0px);
  opacity: 1;
}
.small-card-images .small-card-images-inner {
  position: relative;
  padding: 24px 20px;
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.2s ease;
  height: 100%;
}
.small-card-images .small-card-images-inner img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}
.small-card-images .action-right {
  right: 0px;
  color: #d24646;
  transform: translateX(-10px);
  border-radius: 0 0 0 5px;
}
.small-card-images .action-left {
  left: 0px;
  transform: translateX(10px);
  border-radius: 0 0 5px 0;
}
.small-card-images .action-right, .small-card-images .action-left {
  position: absolute;
  top: 0px;
  font-size: 14px;
  padding: 10px;
  text-decoration: none;
  line-height: 1;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 9999;
  outline: none;
  box-shadow: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.ws-period {
  border: 1px solid #E0E6F0;
  font-size: 14.4px;
  align-items: center;
  background-color: #fff;
  position: relative;
  margin-bottom: 15px;
  border-radius: 4px;
}

.custom-day-work-periods .add-custom-day-w {
  border: 3px dotted rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  margin-right: 15px;
  width: 140px;
  flex: 0 0 140px;
  text-align: center;
  position: relative;
  cursor: pointer;
  display: block;
  outline: none;
  box-shadow: none;
  min-height: 115px;
  border-radius: 3px;
}
.custom-day-work-periods .add-custom-day-w .add-custom-day-i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.custom-day-work-periods .add-custom-day-w .add-day-graphic-w {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 0px auto;
}
.custom-day-work-periods .add-custom-day-w .add-day-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 0%;
  height: 24px;
  width: 24px;
  background-color: #000000;
  box-shadow: 0px 0px 0px 0px rgba(208, 213, 220, 0.3);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.custom-day-work-periods .add-custom-day-w .add-day-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 10px;
  transform: translate(-45%, -47%);
  transition: all 0.2s ease;
}
.custom-day-work-periods .add-custom-day-w:hover {
  border-color: #0937ff;
  border-style: solid;
}
.custom-day-work-periods .add-custom-day-w:hover .add-day-plus {
  box-shadow: 0px 0px 0px 15px rgba(208, 213, 220, 0.3);
  transform: translate(-50%, -50%) scale(1.2);
}
.custom-day-work-periods .add-custom-day-w:hover .add-day-label {
  transform: translateY(5px);
}
.custom-day-work-periods .add-custom-day-w .add-day-label {
  color: #000000;
  font-weight: 500;
  font-size: 19.2px;
  margin-top: 5px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
}
.custom-day-work-periods .add-custom-day-w.os-loading .add-day-plus {
  color: rgba(255, 255, 255, 0.4);
}
.custom-day-work-periods .add-custom-day-w.os-loading .add-day-plus:after {
  display: block;
  content: "";
  width: 52px !important;
  height: 52px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}

.custom-day-work-period {
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  width: 140px;
  flex: 0 0 140px;
  height: 120px;
}
.custom-day-work-period:hover {
  transform: translateY(-5px);
}
.custom-day-work-period:hover .custom-day-work-period-i {
  box-shadow: 0 15px 30px 0 rgba(108, 120, 143, 0.2), 0 1px 3px 0 rgba(170, 179, 197, 0.9);
}
.custom-day-work-period:hover .remove-custom-day, .custom-day-work-period:hover .edit-custom-day {
  transform: translateX(0px);
  opacity: 1;
}
.custom-day-work-period .remove-custom-day {
  right: 0px;
  color: #d24646;
  transform: translateX(-10px);
}
.custom-day-work-period .edit-custom-day {
  left: 0px;
  transform: translateX(10px);
}
.custom-day-work-period .remove-custom-day, .custom-day-work-period .edit-custom-day {
  position: absolute;
  top: 0px;
  font-size: 14px;
  padding: 10px;
  text-decoration: none;
  line-height: 1;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 9999;
  outline: none;
  box-shadow: none;
}
.custom-day-work-period .custom-day-work-period-i {
  position: relative;
  padding: 24px 20px;
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.2s ease;
}
.custom-day-work-period .custom-day-work-period-i::before {
  top: 50%;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.05);
  height: 1px;
  position: absolute;
  content: "";
}
.custom-day-work-period .custom-day-month {
  font-size: 19.2px;
  line-height: 1;
  color: #9DA8D5;
}
.custom-day-work-period .custom-day-number {
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  color: #b2b2b2;
}
.custom-day-work-period .custom-day-periods {
  padding-top: 10px;
}
.custom-day-work-period .custom-day-periods .custom-day-period {
  background-color: #eeeff5;
  color: #2D303A;
  color: #8894AF;
  padding: 4px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 13px;
}

.weekday-schedule-w {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.weekday-schedule-w:last-child {
  border-bottom: none;
}
.weekday-schedule-w.day-off .ws-day-name {
  color: #C45252;
}
.weekday-schedule-w.day-off .ws-day-name:after {
  width: 100%;
}
.weekday-schedule-w.day-off .ws-head:hover .ws-day-name {
  border-bottom-color: transparent;
}
.weekday-schedule-w.day-off .ws-head .ws-day-hours, .weekday-schedule-w.day-off .ws-head .wp-edit-icon {
  display: none;
}
.weekday-schedule-w.day-off .weekday-schedule-form {
  display: none;
}
.weekday-schedule-w .ws-head-w {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.weekday-schedule-w .ws-head {
  flex: 1;
  margin-left: 15px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 15px 0px;
}
.weekday-schedule-w .ws-head .wp-edit-icon {
  font-size: 14px;
  color: #0937ff;
  position: absolute;
  top: 56%;
  right: 0px;
  transform: translate(0%, -50%);
}
.weekday-schedule-w .ws-head:hover .ws-day-name {
  border-bottom: 1px solid #38406d;
}
.weekday-schedule-w .ws-day-name {
  color: #38406d;
  font-size: 19px;
  font-weight: 500;
  position: relative;
  margin-right: 20px;
  border-bottom: 1px solid transparent;
}
.weekday-schedule-w .ws-day-name:after {
  width: 0%;
  background-color: #C45252;
  opacity: 0.7;
  height: 2px;
  top: 55%;
  left: 0px;
  position: absolute;
  transform: translateY(-50%);
  content: "";
  display: block;
}
.weekday-schedule-w .ws-day-hours {
  text-align: right;
  color: #8894AF;
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
  cursor: pointer;
  padding-right: 25px;
}
.weekday-schedule-w .ws-day-hours span {
  display: inline-block;
  vertical-align: middle;
}
.weekday-schedule-w .ws-day-hours span:hover {
  color: #0937ff;
}
.weekday-schedule-w .ws-day-hours span + span {
  margin-left: 5px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  padding-left: 5px;
}
.weekday-schedule-w.is-editing .weekday-schedule-form {
  display: block;
}

.weekday-schedule-form {
  padding-bottom: 20px;
  padding-top: 5px;
  text-align: center;
  display: none;
}
.weekday-schedule-form.active {
  display: block;
}
.weekday-schedule-form .ws-period-add {
  border: 2px dashed #E0E6EB;
  display: block;
  background-color: #fff;
  box-shadow: none;
  padding: 5px;
  margin: 0px;
  color: #738db3;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 4px;
}
.weekday-schedule-form .ws-period-add:hover {
  border-color: #0937ff;
  color: #0937ff;
}
.weekday-schedule-form .ws-period-add .add-period-graphic-w {
  width: 30px;
  height: 30px;
  position: relative;
}
.weekday-schedule-form .ws-period-add .add-period-graphic-w .add-period-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  transform: translate(-50%, -50%);
}
.weekday-schedule-form .ws-period-add .add-period-graphic-w .add-period-plus i {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-size: 18px;
  transform: translate(-50%, -50%);
}
.weekday-schedule-form .ws-period-add .add-period-label {
  color: #8894AF;
  font-weight: 500;
  font-size: 16px;
  margin-left: 5px;
}
.weekday-schedule-form .ws-period-add.os-loading .latepoint-icon {
  display: none !important;
}
.weekday-schedule-form .ws-period-add.os-loading:after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
}

.wj-time-group {
  margin: 0px;
  margin-bottom: 15px;
}
.wj-time-group .wj-time-input-fields {
  display: flex;
  align-items: center;
}
.wj-time-group .time-ampm-w {
  display: flex;
  background: #F5F6FA;
  border: 1px solid #E0E6F0;
  border-radius: 4px;
  margin-left: 5px;
}
.wj-time-group .time-ampm-w .time-ampm-select {
  padding: 4px 5px 5px 5px;
  line-height: 1;
  font-weight: 500;
  color: #8894AF;
  cursor: pointer;
  font-size: 14.4px;
}
.wj-time-group .time-ampm-w .time-ampm-select.active {
  background: #FFFFFF;
  box-shadow: 0px 0px 0px 1px #0937ff, 0 1px 2px 0 rgba(46, 87, 243, 0.18);
  border-radius: 4px;
  color: #0937ff;
}
.wj-time-group label {
  display: block;
  margin: 0px;
  font-size: 16px;
  color: #9A9FB1;
  font-weight: 500;
}
.wj-time-group .wj-form-control {
  font-size: 14px;
  flex: 0 0 60px;
  padding: 3px 2px !important;
  line-height: 1;
  margin: 0px;
  border: 1px solid #EDEFF6;
  background-color: #EDEFF6;
  border-radius: 3px;
  text-align: center;
  box-shadow: none;
  width: 90px;
  max-width: 90px;
}
.wj-time-group .wj-form-control:focus {
  border-color: #0937ff;
}
.wj-time-group + .wj-time-group {
  border-top: 1px solid #E0E6F0;
}
.wj-time-group.as-period {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 0px;
}
.wj-time-group.as-period label {
  padding-right: 10px;
  padding-left: 5px;
}
.wj-time-group.as-period input.wj-form-control {
  margin-left: auto;
}
.wj-time-group.as-period .wj-time-input-fields {
  margin-left: auto;
  justify-content: flex-end;
}

.book-services .book-service-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 19px 18px;
  background: #F8F8F8;
  border-radius: 15px;
}
.book-services .book-service-group .book-service-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  text-align: justify;
  color: #ABAAB1;
}
.book-services .book-service-group .book-service-price {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  text-align: justify;
  color: #432BDF;
}

.daily-agent-monthly-calendar-w {
  padding: 15px;
  margin-bottom: 30px;
}
.daily-agent-monthly-calendar-w .snd-weekdays {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.daily-agent-monthly-calendar-w .snd-weekdays .weekday {
  text-transform: uppercase;
  font-size: 11.2px;
  color: #6f8aff;
  font-weight: 500;
  letter-spacing: 2px;
  width: 14.2%;
  text-align: center;
  padding: 5px 0px;
}
.daily-agent-monthly-calendar-w .snd-weekdays .weekday.weekday-6, .daily-agent-monthly-calendar-w .snd-weekdays .weekday.weekday-7 {
  color: #ccb63b;
  background-color: #fffef2;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w {
  position: relative;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .cc-location-selector {
  margin-left: auto;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn {
  position: absolute;
  border: none;
  font-size: 14px;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: #111;
  top: 55%;
  transform: translateY(-50%);
  padding: 0px;
  margin: 0px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading {
  color: transparent !important;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading span, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading i {
  color: transparent !important;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading span, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading i {
  color: transparent !important;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.snd-loading:after, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.snd-loading:after {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border-bottom: 2px solid #38406d;
  border-left: 2px solid #38406d;
  border-top: 2px solid #38406d;
  border-right: 2px solid rgba(0, 0, 0, 0);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: snd-loading 700ms infinite linear;
          animation: snd-loading 700ms infinite linear;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn:hover, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn:hover {
  color: #0937ff;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn.disabled, .daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn.disabled {
  color: rgba(0, 0, 0, 0.1);
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-prev-btn {
  left: 5px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-month-next-btn {
  right: 5px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label {
  text-align: center;
  font-weight: 500;
  font-size: 17.6px;
  color: #2D303A;
  margin-bottom: 15px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label .current-day {
  display: inline-block;
  vertical-align: middle;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label .current-year {
  display: inline-block;
  vertical-align: middle;
  color: rgba(45, 48, 58, 0.4);
  margin-left: 3px;
}
.daily-agent-monthly-calendar-w .snd-current-month-label-w .snd-current-month-label .current-month {
  display: inline-block;
  vertical-align: middle;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days-w {
  display: none;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days-w.active {
  display: block;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day {
  width: 14.2%;
  padding: 2.3%;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid #eee !important;
}
@media (max-width: 768px) {
  .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day {
    width: auto;
    flex: 0 0 40px;
  }
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.is-f {
  width: auto;
  flex: 0 0 40px;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-6, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-7 {
  background-color: #000;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-6 .snd-day-number, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-6 .snd-day-weekday, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-7 .snd-day-number, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.week-day-7 .snd-day-weekday {
  color: #fff;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-next-month, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-prev-month {
  color: #B7BCCB;
  background-color: #fff;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-current .snd-day-box {
  background-color: #f5f6fb;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-passed .snd-day-box {
  background-color: #f5f6fb;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-day-passed .snd-day-box .snd-day-number {
  color: #B7BCCB;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-today .snd-day-box {
  background-color: #fff6cb;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-next .snd-day-box, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-prev .snd-day-box {
  opacity: 0.4;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-next .snd-day-box:hover, .daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.snd-month-prev .snd-day-box:hover {
  opacity: 1;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day .snd-day-box {
  padding-bottom: 100%;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day:hover .snd-day-box .snd-day-number {
  font-size: 19px;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.selected {
  background-color: #fff !important;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.selected .snd-day-box {
  background-color: #fff !important;
  color: #fff;
}
.daily-agent-monthly-calendar-w .snd-monthly-calendar-days .snd-day.selected .snd-day-box .snd-day-number {
  font-size: 19px;
  color: #fff;
}
.daily-agent-monthly-calendar-w .snd-day-status {
  margin: 0px;
  margin-top: 10px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  bottom: 3px;
  left: 3px;
  right: 3px;
  transition: all 0.3s ease;
  position: absolute;
  background-color: #e2e5f1;
}
.daily-agent-monthly-calendar-w .snd-day-status .day-available {
  background-color: #80dc6e;
  top: 0px;
  bottom: 0px;
  position: absolute;
  z-index: 1;
  min-width: 3px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar {
  padding: 0px;
  box-shadow: none;
  background-color: transparent;
  margin-bottom: 20px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-months {
  border: none !important;
  border-bottom: none;
  border-radius: 0px;
}
@media (max-width: 768px) {
  .daily-agent-monthly-calendar-w.horizontal-calendar .snd-months {
    overflow: auto;
    padding-bottom: 16px;
    margin-right: -15px;
    margin-left: -15px;
  }
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.snd-day-passed .snd-day-box .snd-day-number {
  color: #525765;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 15px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label {
  font-size: 30px;
  margin: 0px;
  padding: 0px;
  line-height: 1;
  position: relative;
  color: #0937ff;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label .current-day {
  z-index: 2;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label .current-month {
  z-index: 2;
  position: relative;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-current-month-label .current-year {
  font-weight: 500;
  color: rgba(45, 48, 58, 0.07);
  position: absolute;
  font-size: 100px;
  line-height: 100px;
  bottom: -7px;
  display: block;
  margin: 0px;
  left: 0px;
  z-index: 1;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-service-selector {
  margin-left: auto;
  margin-right: 20px;
  display: flex;
  align-items: center;
  padding-right: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-service-selector label {
  margin-right: 5px;
  display: block;
  margin-left: auto;
  color: #8894AF;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-service-selector input {
  display: block;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w .snd-month-prev-btn, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w .snd-month-next-btn {
  position: relative;
  bottom: auto;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  padding: 3px 2px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-current-month-label-w .snd-month-control-buttons-w .snd-month-today-btn {
  margin: 0px 15px;
  padding: 5px 10px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days {
  flex-wrap: nowrap;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day {
  overflow: visible;
  padding: 10px;
  flex: 0 0 65px;
  border: 2px solid #000 !important;
  border-radius: 0px;
  background: #fff;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.disabled {
  opacity: 0.5;
  background-color: #cccccc;
  color: #666666;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day:hover .snd-day-status {
  height: 7px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day:last-child {
  border-right: none;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected {
  border: 2px solid #000 !important;
  border-radius: 0 !important; /* Ensures no rounded corners */
  background-color: #fff !important;
  box-shadow: 6px 6px 0px 0px #000 !important;
  z-index: 2;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected .day-status {
  background: #000;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected .snd-day-weekday {
  color: black !important;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected .snd-day-box {
  border-radius: 0px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.selected .snd-day-box .snd-day-number {
  color: black;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-box {
  padding: 0px;
  border-radius: 0px;
  background-color: transparent;
  overflow: visible;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-weekday {
  color: rgba(0, 0, 0, 0.4);
  font-size: 9px;
  font-weight: 500;
  padding: 8px 0px 0px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-status {
  bottom: -3px;
  margin: 0px;
  left: -1px;
  right: -1px;
  border-radius: 0px;
  height: 3px;
  transition: none;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .day-status {
  bottom: -3px;
  margin: 0px;
  left: -1px;
  right: -1px;
  border-radius: 0px;
  height: 3px;
  transition: none;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day .snd-day-number {
  font-size: 16px;
  top: 42%;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-6, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-7 {
  background-color: #000;
}
.daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-6 .snd-day-number, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-6 .snd-day-weekday, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-7 .snd-day-number, .daily-agent-monthly-calendar-w.horizontal-calendar .snd-monthly-calendar-days .snd-day.week-day-7 .snd-day-weekday {
  color: #fff;
}
.wj-bookings-daily.os-loading .no-results-w .icon-w {
  position: relative;
}
.wj-bookings-daily.os-loading .no-results-w .icon-w:before {
  display: block;
  content: "";
  width: 20px !important;
  height: 20px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.wj-bookings-daily.os-loading .no-results-w .icon-w .latepoint-icon {
  color: transparent;
}
.wj-bookings-daily.os-loading .ch-filter .ch-filter-trigger {
  display: none;
}
.wj-bookings-daily.os-loading .ch-filter:before {
  display: block;
  content: "";
  width: 20px !important;
  height: 20px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.wj-bookings-daily .calendar-hours {
  position: relative;
}
.wj-bookings-daily .ch-filter {
  
  border-right: none;
  height: 50px;
  margin-bottom: 20px;
  position: relative;
}
.wj-bookings-daily .ch-filter .ch-filter-trigger {
  width: 5px;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  height: 5px;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 8px 0px 0px rgba(0, 0, 0, 0.3), -8px 0px 0px rgba(0, 0, 0, 0.3);
  border-radius: 1px;
}
.wj-bookings-daily .da-head-agents {
  display: flex;
  height: 50px;
  margin-bottom: 20px;
}
.wj-bookings-daily .ch-agents {
  flex: 1;
  position: relative;
}
.wj-bookings-daily .da-agents-bookings {
  display: flex;
}
.wj-bookings-daily .da-agents-bookings .da-agent-bookings-and-periods {
  flex: 1;
  position: relative;
}
.wj-bookings-daily .da-head-agent {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  flex: 1;
  background-color: transparent;
  position: relative;
}
.wj-bookings-daily .da-head-agent:first-child:before {
  content: "";
  position: absolute;
  bottom: -21px;
  left: -1px;
  height: 20px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}
.wj-bookings-daily .da-head-agent:after {
  content: "";
  position: absolute;
  bottom: -21px;
  right: -1px;
  height: 20px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.05);
}
.wj-bookings-daily .da-head-agent .da-head-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-size: cover;
  background-position: center center;
  margin-right: 10px;
  margin-left: auto;
}
.wj-bookings-daily .da-head-agent .da-head-agent-name {
  text-decoration: none;
  color: #2D303A;
  border-bottom: 1px dotted rgba(9, 55, 255, 0.4);
  font-weight: 500;
  margin-right: auto;
  white-space: nowrap;
}
.wj-bookings-daily .da-head-agent .da-head-agent-name:hover {
  color: #0937ff;
}

.daily-agent-calendar-w.make-scrollable .ch-agents {
  overflow: auto;
}
.daily-agent-calendar-w.make-scrollable .da-head-agent, .daily-agent-calendar-w.make-scrollable .da-agents-bookings .da-agent-bookings-and-periods {
  flex: 0 0 240px;
}
.daily-agent-calendar-w.make-scrollable .da-agent-bookings-and-periods:first-child .ch-day-periods .chd-period .chd-period-minutes-value {
  left: auto;
  right: 0px;
  transform: translate(100%, -50%);
}

.wj-bookings-daily .da-head-agent .da-head-agent-name {
  max-width: 130px;
  overflow: hidden;
}
.wj-bookings-daily.is-single .wj-bookings-daily-contents {
  display: flex;
  padding-top: 30px;
}
.wj-bookings-daily.is-single .daily-agent-calendar-w {
  flex: 1;
}
.wj-bookings-daily.is-single .daily-agent-side {
  flex: 0 0 420px;
  width: 420px;
}
.wj-bookings-daily.os-loading .daily-agent-monthly-calendar-w .os-monthly-calendar-days .os-day.selected .os-day-box {
  position: relative;
}
.wj-bookings-daily.os-loading .daily-agent-monthly-calendar-w .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number {
  display: none;
}
.wj-bookings-daily.os-loading .daily-agent-monthly-calendar-w .os-monthly-calendar-days .os-day.selected .os-day-box:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}

.calendar-daily-head-w {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.calendar-daily-head-w .calendar-daily-target-date {
  color: #8894AF;
  font-size: 22.4px;
  font-weight: 500;
  line-height: 1.43;
}
.calendar-daily-head-w .calendar-daily-target-date.agent-has-day-off {
  color: #ec7e70;
}
.calendar-daily-head-w label {
  margin-left: auto;
  margin-right: 5px;
  color: #8894AF;
}

.calendar-daily-agent-w .calendar-hours {
  display: flex;
}
.calendar-daily-agent-w .calendar-hours .ch-hours {
  flex: 0 0 61px;
 
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period {
  height: 20px;
  vertical-align: middle;
  text-align: right;
  line-height: 20px;
  font-size: 12.8px;
  color: #AAB1CB;
  font-weight: 500;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.last-period {
  height: 1px !important;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-minutes {
  position: relative;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-minutes span {
  display: none;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-minutes:before {
  content: "";
  height: 1px;
  width: 3px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -1px;
  right: -2px;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-hour {
  position: center;
  padding-right: 10px;
  color: black !important;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-hour span {
  transform: translateY(-50%);
  display: block;
  color: black !important;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-hour:before {
  content: "";
  height: 1px;
  width: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0px;
  right: -3px;
}
.calendar-daily-agent-w .calendar-hours .ch-hours .chh-period.chh-period-disabled {
  background-color: rgba(0, 0, 0, 0.03);
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods {
  flex: 1;
  
  position: relative;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period {
  height: 20px;
  position: relative;
  cursor: copy;
}
  


  
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-off:hover:before {
  border-top-color: #E42806;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-off:hover .chd-period-minutes-value {
  background-color: #E42806;
  color: #fff;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period:before {
  content: "";
  height: 1px;
  top: -1px;
  position: absolute;
  left: 0px;
  right: 0px;
  border-top: 1px dashed transparent;
  z-index: 999;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period .chd-period-minutes-value {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9999;
  transform: translate(-100%, -50%);
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 12.8px;
  font-weight: 500;
  background-color: #0937ff;
  color: #fff;
  display: none;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.os-loading .chd-period-minutes-value {
  color: transparent;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.os-loading .chd-period-minutes-value:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period:hover .chd-period-minutes-value {
  display: block;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period:hover:before {
  border-top-color: #0937ff;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.last-period {
  height: 1px !important;
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-hour {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods .chd-period.chd-period-disabled {
  background-color: rgba(0, 0, 0, 0.03);
}
.calendar-daily-agent-w .calendar-hours .ch-day-periods.ch-day-tue, .calendar-daily-agent-w .calendar-hours .ch-day-periods.ch-day-thu {
  background-color: #fafbfd;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking {
  padding-top: 3px;
  position: absolute;
  left: 5px;
  right: 5px;
  text-align: left;
  z-index: 1000;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  min-height: 60px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .ch-day-booking-i {
  height: 100%;
  width: 100%;
  padding: 10px;
  border-radius: 0px;
  border: 2px solid #000000;
 
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking:hover {
  left: 0px;
  right: 0px;
  min-height: 60px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .ch-day-buffer-before {
  position: absolute;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
  z-index: -1;
  left: 0px;
  right: 0px;
  top: 0px;
  transform: translateY(-100%);
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .ch-day-buffer-after {
  position: absolute;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-top: none;
  border-radius: 0px 0px 4px 4px;
  z-index: -1;
  left: 0px;
  right: 0px;
  bottom: 0px;
  transform: translateY(100%);
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booked-percentage {
  width: 70px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  margin: 0px auto;
  margin-top: 2px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booked-percentage .booked-bar {
  background-color: #fff;
  border-radius: 2px;
  height: 6px;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-attendies {
  font-size: 10.4px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  position: absolute;
  bottom: 5px;
  right: 5px;
  line-height: 1.2;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-attendies span {
  color: #fff;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-service-name {
  color: black;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-align: left;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking .booking-time {
  color: black;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking.os-loading {
  -webkit-animation: animate_appointment_small_box 0.8s ease infinite;
          animation: animate_appointment_small_box 0.8s ease infinite;
}
.calendar-daily-agent-w .calendar-hours .ch-day-booking.os-loading:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
  left: -10px;
}

.calendar-month-agents-w {
  position: relative;
}
.calendar-month-agents-w.os-loading .ma-days-with-bookings-i {
  opacity: 0.5;
}
.calendar-month-agents-w.os-loading:after {
  display: block;
  content: "";
  width: 24px !important;
  height: 24px !important;
  border-bottom: 2px solid #0937ff;
  border-left: 2px solid #0937ff;
  border-top: 2px solid #0937ff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
  top: 25px;
  left: 40px;
  z-index: 999;
}
.calendar-month-agents-w.os-loading .ma-head-info {
  color: transparent;
}
.calendar-month-agents-w.os-loading .ma-head-info span + span {
  border-top-color: transparent;
}
.calendar-month-agents-w .ma-head {
  display: flex;
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 80px;
  right: 0px;
}
.calendar-month-agents-w .ma-head-info {
  padding: 12px 15px 5px 15px;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
  width: 80px;
  height: 52px;
  font-weight: 500;
  font-size: 11.2px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ddd;
  position: relative;
}
.calendar-month-agents-w .ma-head-info span {
  display: block;
}
.calendar-month-agents-w .ma-head-info span + span {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.calendar-month-agents-w .ma-head-agent {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 249px;
  background-color: #fff;
}
.calendar-month-agents-w .ma-head-agent .ma-head-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-size: cover;
  background-position: center center;
  margin-right: 10px;
  margin-left: auto;
}
.calendar-month-agents-w .ma-head-agent .ma-head-agent-name {
  font-weight: 500;
  margin-right: auto;
  white-space: nowrap;
}
.calendar-month-agents-w .ma-month-label {
  color: #fff;
  font-weight: 500;
  text-align: center;
  display: flex;
}
.calendar-month-agents-w .ma-month-label div {
  padding: 3px;
  background-color: #0937ff;
  flex: 0 0 250px;
  color: #0937ff;
  box-shadow: 0px -1px 0px #0937ff, 0px 1px 0px #0937ff;
  position: relative;
  z-index: 2;
}
.calendar-month-agents-w .ma-floated-days-w {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  border-right: 1px solid #c1c1c1;
}
.calendar-month-agents-w .ma-floated-days-w .ma-month-label {
  display: block;
}
.calendar-month-agents-w .ma-floated-days-w .ma-month-label div {
  flex: 1;
  color: #fff;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day {
  display: flex;
  height: 35px;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day .ma-day-info {
  display: flex;
  align-items: stretch;
  font-size: 11.2px;
  font-weight: 500;
  flex: 0 0 80px;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day .ma-day-info .ma-day-number {
  border-right: 1px solid #eee;
  flex: 0 0 30px;
  line-height: 35px;
  text-align: center;
  background-color: #fff;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day .ma-day-info .ma-day-weekday {
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  flex: 0 0 50px;
  color: rgba(0, 0, 0, 0.3);
  line-height: 35px;
  background-color: #fff;
}
.calendar-month-agents-w .ma-days-with-bookings-w {
  padding-left: 80px;
  position: relative;
  overflow-x: auto;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-days-with-bookings-i {
  padding-top: 52px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day {
  display: flex;
  height: 35px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:hovers {
  box-shadow: 0px 0px 0px 2px #6b9fff;
  z-index: 2;
  position: relative;
  background-color: #fff !important;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:hovers .ma-day-agent-bookings {
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings {
  border-right: 1px solid #d8d8d8;
  flex: 0 0 249px;
  position: relative;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-off {
  top: 0px;
  bottom: 0px;
  position: absolute;
 background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-off span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  padding: 3px 4px;
  line-height: 1.1;
  background-color: #e02727;
  display: none;
  transform: translate(-50%, -50%);
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-off:hover span {
  display: block;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking {
  top: 12px;
  bottom: 12px;
  position: absolute;
  cursor: pointer;
  box-shadow: inset -1px 0px 0px 0px #fff;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking.os-loading {
  top: 10px;
  bottom: 10px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking.os-loading:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -120%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
  display: block;
  align-items: flex-start;
  box-shadow: 0 20px 40px 0 rgba(108, 120, 143, 0.15), 0 1px 2px 0 rgba(206, 211, 222, 0.7);
  z-index: 999;
  background: #FFFFFF;
  cursor: pointer;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info {
  flex: 1;
  padding: 15px 30px 10px 20px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-color-elem {
  background-color: #2752E4;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-time {
  color: #8894AF;
  white-space: nowrap;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-time .at-date {
  font-weight: 500;
  color: #0937ff;
  font-size: 16px;
  margin-bottom: 0px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .appointment-info .appointment-service-name {
  font-weight: 500;
  font-size: 19px;
  margin-bottom: 5px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w {
  flex: 1;
  padding: 15px 10px 15px 20px;
  align-items: flex-start;
  border-left: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .avatar-w {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  margin-right: 15px;
  box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.4);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-name {
  font-weight: 500;
  font-size: 16px;
  color: #0937ff;
  margin-bottom: 3px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-property {
  margin-bottom: 2px;
  white-space: nowrap;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-property .label {
  color: #8894AF;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking .appointment-box-small .customer-info-w .customer-property .value {
  font-weight: 500;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking:hover {
  top: 10px;
  bottom: 10px;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings .ma-day-booking:hover .appointment-box-small {
  transform: translate(-50%, -105%);
  visibility: visible;
  opacity: 1;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:first-child .appointment-box-small {
  left: 0px;
  transform: translate(0%, -120%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, -105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:last-child .appointment-box-small {
  left: auto;
  right: 0px;
  transform: translate(0%, -120%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, -105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-booking .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-booking .appointment-box-small {
  top: auto;
  bottom: 0px;
  transform: translate(-50%, 110%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-booking:hover .appointment-box-small {
  transform: translate(-50%, 100%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:first-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:first-child .appointment-box-small {
  left: 0px;
  top: auto;
  bottom: 0px;
  transform: translate(5%, 105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:first-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, 100%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:last-child .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:last-child .appointment-box-small {
  left: auto;
  right: 0px;
  top: auto;
  bottom: 0px;
  transform: translate(0%, 105%);
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(1) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(2) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(3) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(4) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(5) .ma-day-agent-bookings:last-child .ma-day-booking:hover .appointment-box-small {
  transform: translate(0%, 100%);
}
.calendar-month-agents-w .ma-floated-days-w .ma-day:nth-child(even) .ma-day-agent-bookings, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(even) .ma-day-agent-bookings {
  background-color: rgba(0, 0, 0, 0.02);
}
.calendar-month-agents-w .ma-floated-days-w .ma-day:nth-child(even) .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(even) .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-floated-days-w .ma-day:nth-child(even) .ma-day-info .ma-day-weekday, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day:nth-child(even) .ma-day-info .ma-day-weekday {
  background-color: #fafafa;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-6 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-number, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-info .ma-day-weekday {
  background-color: #fffaf0;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-6 .ma-day-agent-bookings, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-agent-bookings {
  background-color: #F8F5EC;
}
.calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-6 .ma-day-agent-bookings, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-agent-bookings {
  background-color: #F8F5EC;
}
.calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-agent-bookings, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-agent-bookings, .calendar-month-agents-w .ma-floated-days-w .ma-day.ma-day-number-7 .ma-day-info, .calendar-month-agents-w .ma-days-with-bookings-w .ma-day.ma-day-number-7 .ma-day-info {
  border-bottom: 1px solid #dac59b;
}
.calendar-month-agents-w.calendar-month-not-scrollable .ma-days-with-bookings-w {
  overflow-x: visible;
}
.calendar-month-agents-w.calendar-month-not-scrollable .ma-head-agent, .calendar-month-agents-w.calendar-month-not-scrollable .ma-days-with-bookings-w .ma-day .ma-day-agent-bookings {
  flex: 1;
}

.timeline-with-info-w {
  align-items: center;
  display: flex;
}
.timeline-with-info-w .timeline-side-w {
  flex: 1;
}
.timeline-with-info-w .timeline-info-w {
  margin-left: 40px;
  padding-left: 40px;
  padding-right: 20px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  flex: 0 0 320px;
}
.timeline-with-info-w .timeline-info-w .os-add-box {
  border: none;
  background-color: #0937ff;
  padding: 10px;
  margin-top: 15px;
}
.timeline-with-info-w .timeline-info-w .os-add-box .add-box-label {
  margin-right: auto;
  color: #fff;
  margin-left: 10px;
}
.timeline-with-info-w .timeline-info-w .os-add-box .add-box-graphic-w {
  margin-left: auto;
  width: 30px;
  height: 30px;
}
.timeline-with-info-w .timeline-info-w .os-add-box .add-box-graphic-w .add-box-plus {
  background-color: #fff;
  color: #0937ff;
  box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.1);
}

.agent-day-bookings-timeline-compact-w {
  position: relative;
  display: flex;
}
.agent-day-bookings-timeline-compact-w .agents-avatars {
  flex: 0 0 50px;
  margin-right: 20px;
  padding-top: 30px;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .agents-ava-div {
  height: 100px;
  margin-bottom: 20px;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .avatar-w {
  height: 50px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  margin-bottom: 20px;
  display: block;
  text-decoration: none;
  position: relative;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .avatar-w span {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  background-color: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 15px;
  z-index: 9999;
  transform: translate(-50%, -5px);
  white-space: nowrap;
}
.agent-day-bookings-timeline-compact-w .agents-avatars .avatar-w:hover span {
  display: block;
}
.agent-day-bookings-timeline-compact-w .agents-timelines-w {
  flex: 1;
}
.agent-day-bookings-timeline-compact-w .timeline-bottom-w {
  display: flex;
}
.agent-day-bookings-timeline-compact-w .timeline-top-w {
  display: flex;
  height: 30px;
}
.agent-day-bookings-timeline-compact-w .timeslot {
  flex: 1;
}
.agent-day-bookings-timeline-compact-w .timeslot:last-child:not(:first-child) {
  width: 1px;
  flex: 0 0 1px;
}
.agent-day-bookings-timeline-compact-w .timeslot.with-tick .tick {
  background-color: rgba(0, 0, 0, 0.05);
  position: absolute;
  z-index: 2;
  top: 20px;
  bottom: 20px;
  width: 1px;
}
.agent-day-bookings-timeline-compact-w .timeslot .timeslot-time {
  font-weight: 500;
  font-size: 12.8px;
  text-align: center;
  line-height: 1.2;
  transform: translateX(-50%);
  display: inline-block;
}
.agent-day-bookings-timeline-compact-w .timeslot .timeslot-time .timeslot-ampm {
  color: #8894AF;
  font-size: 9.6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w {
  margin-bottom: 20px;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline {
  height: 100px;
  background-color: #F2F5F8;
  position: relative;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block {
  height: 95px;
  z-index: 3;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px #f2f5f8;
  background-color: rgba(0, 0, 0, 0.2);
  background: #ffc0c0;
  padding: 10px;
  border-radius: 10px;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block * {
  color: #fff;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block.os-loading:after {
  display: block;
  content: "";
  width: 14px !important;
  height: 14px !important;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  border-right: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: os-loading 700ms infinite linear;
          animation: os-loading 700ms infinite linear;
  background-color: transparent !important;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block .appointment-box-small {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -120%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease;
}
.agent-day-bookings-timeline-compact-w .agent-timeline-w .agent-timeline .booking-block:hover .appointment-box-small {
  transform: translate(-50%, -105%);
  visibility: visible;
  opacity: 1;
}

.kiosk-info-nav {
  height: 100px;
  background:var(--c-button-background-color);
}

.wj-widget .wj-widget-header.with-actions {
  flex-wrap: wrap;
  align-items: center;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions-trigger {
  display: block;
  margin-left: auto;
  padding: 0px 0px 0px 5px;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions {
  display: none;
  text-align: left;
  margin: 0px;
  padding-bottom: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  width: 100%;
  flex: 0 0 100%;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions select {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  font-size: 16px;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  font-size: 16px;
  padding: 7px 4px 9px 6px;
  position: relative;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker > i {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.wj-widget .wj-widget-header.with-actions.wj-show-actions .wj-widget-header-actions {
  display: block;
}

.wj-widget {
  margin-bottom: 40px;
  background-color: #fff;
  border: 1px solid #e0e1e8;
  border-radius: 3px;
}
.wj-widget.wj-widget-transparent {
  background-color: transparent;
  border: none;
  padding: 0px;
  box-shadow: none;
}
.wj-widget.wj-widget-transparent .wj-widget-header {
  padding: 9px 10px 10px 37px;
  border: none;
}
.wj-widget.wj-widget-transparent .wj-widget-header:before {
  display: none;
}
.wj-widget.wj-widget-transparent .wj-widget-content {
  padding: 0px;
}
.wj-widget .wj-widget-header {
  font-size: 19px;
  font-weight: 500;
  border-bottom: 1px solid #e7e9ef;
  color: #2D303A;
  padding: 10px 10px 10px 37px;
  margin-top: 0px;
  line-height: 1.4;
}
.wj-widget .wj-widget-header.centered {
  text-align: center;
}
.wj-widget .wj-widget-header h3 {
  font-size: 40px;
  padding: 4px 0px;
  margin: 0px;
  line-height: 1;
  color: black;
}
.wj-widget .wj-widget-header.with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-text {
  position: relative;
  padding: 3px 5px 4px 0px;
  line-height: 1;
  vertical-align: middle;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions-trigger {
  display: none;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions {
  margin-left: auto;
  text-align: right;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker {
  cursor: pointer;
  border-radius: 4px;
  border: none;
  background-color: #F0F2F8;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #d6d6e1;
  border-bottom-color: #bebfc7;
  box-shadow: none;
  font-size: 14px;
  padding: 6px 4px 6px 10px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker i, .wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker span {
  display: inline-block;
  vertical-align: middle;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker i {
  font-size: 14px;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker span {
  color: #38406d;
}
.wj-widget .wj-widget-header.with-actions .wj-widget-header-actions .wj-date-range-picker:hover {
  background-color: #fff;
}
.wj-widget .wj-widget-header.with-actions select {
  max-width: 130px;
  box-shadow: none;
  border: none;
  background-color: #F0F2F8;
  color: #32373c;
  background-color: #fff;
  border: 1px solid #d6d6e1;
  border-bottom-color: #bebfc7;
  box-shadow: none;
  border-radius: 4px;
  font-size: 14px;
}
.wj-widget .wj-widget-header:before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #0937ff;
  box-shadow: 8px 8px 0px rgba(9, 55, 255, 0.6), 0px 8px 0px rgba(9, 55, 255, 0.6), 0px 16px 0px rgba(9, 55, 255, 0.3), 8px 24px 0px rgba(9, 55, 255, 0.7), 8px 16px 0px rgba(9, 55, 255, 0.4);
  position: absolute;
  top: 11px;
  left: 12px;
}
.wj-widget .wj-widget-content {
  padding: 20px;
}
.wj-widget .wj-widget-content.no-padding {
  padding: 0px;
}
.wj-widget.wj-widget-boxed {
  background-color: #fff;
  box-shadow: 0 10px 30px 0 rgba(115, 125, 146, 0.11), 0 1px 2px 0 rgba(160, 170, 185, 0.6);
  padding: 15px;
  border-radius: 3px;
}
.wj-widget.wj-widget-boxed .wj-widget-header {
  padding-top: 0px;
  border-bottom: none;
}

.timeline-with-info-w {
  align-items: center;
  display: flex;
}
.timeline-with-info-w .timeline-side-w {
  flex: 1;
}
.timeline-with-info-w .timeline-info-w {
  margin-left: 40px;
  padding-left: 40px;
  padding-right: 20px;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  flex: 0 0 320px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box {
  border: none;
  background-color: #0937ff;
  padding: 10px;
  margin-top: 15px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box .add-box-label {
  margin-right: auto;
  color: #fff;
  margin-left: 10px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box .add-box-graphic-w {
  margin-left: auto;
  width: 30px;
  height: 30px;
}
.timeline-with-info-w .timeline-info-w .wj-add-box .add-box-graphic-w .add-box-plus {
  background-color: #fff;
  color: #0937ff;
  box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.1);
}

.wj-widget-today-info {
  border: none;
  margin-bottom: 0px;
}
.wj-widget-today-info .day-info-progress {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
}
.wj-widget-today-info .day-info-progress .di-progress-value {
  height: 8px;
  position: relative;
}
.wj-widget-today-info .day-info-progress .di-progress-value .progress-label-w {
  transform: translateY(-120%);
  transition: all 0.1s ease-in;
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #000;
  padding: 10px;
  font-size: 17px;
}
.wj-widget-today-info .day-info-progress .di-progress-value .progress-label-w .progress-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  margin-top: 5px;
}
.wj-widget-today-info .day-info-progress .di-progress-value .progress-label-w .progress-value {
  white-space: nowrap;
  color: #fff;
}
.wj-widget-today-info .day-info-progress .di-progress-value:hover .progress-label-w {
  transform: translateY(-105%);
  display: block;
}
.wj-widget-today-info .day-main-info {
  padding-bottom: 20px;
  text-align: center;
}
.wj-widget-today-info .big-counter {
  font-size: 68px;
  line-height: 1;
  color: #2D303A;
  font-weight: 500;
}
.wj-widget-today-info .counter-label {
  color: #8894AF;
  font-size: 22px;
}
.wj-widget-today-info .day-sub-info {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.wj-widget-today-info .day-sub-info-col {
  padding: 15px 0px;
}
.wj-widget-today-info .day-sub-info-col + .day-sub-info-col {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.wj-widget-today-info .day-sub-info-col.with-avatars {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wj-widget-today-info .day-sub-info-col.with-avatars .agents-on-duty-avatars {
  margin-left: 20px;
  display: flex;
  flex-direction: row-reverse;
  position: relative;
}
.wj-widget-today-info .day-sub-info-col.with-avatars .avatar-w {
  background-size: cover;
  background-position: center center;
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 2px #fff;
  margin-right: -10px;
}
.wj-widget-today-info .day-sub-info-col.with-avatars .avatar-w:first-child {
  margin-right: 0px;
}
.wj-widget-today-info .sub-info-value {
  color: #0937ff;
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px;
  padding-right: 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.wj-widget-today-info .sub-info-value:last-child {
  border-right: none;
  margin-right: 0px;
  padding-right: 0px;
}
.wj-widget-today-info .sub-info-label {
  color: #8894AF;
  font-size: 16px;
  margin-bottom: 5px;
}

.midone-dash {
  background: white;
}
.midone-dash .mobile-menu .menu .menu__icon {
  color: #000;
}
.midone-dash .mobile-menu .menu .menu__title {
  color: #000;
}
.midone-dash .side-nav .side-menu.side-menu--active {
  background-color: #fff;
}
.midone-dash .side-nav .side-menu.side-menu--active::before, .midone-dash .side-nav .side-menu.side-menu--active::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259.51' height='259.52'%3E%3Cpath data-name='Path 143' d='M259.51 259.52c-.167-2.608.05-5.319-.19-8.211-.084-1.012-.031-2.15-.118-3.12-.113-1.25-.1-2.682-.236-4.061-.172-1.722-.179-3.757-.365-5.394-.328-2.889-.478-5.857-.854-8.61-.509-3.714-.825-7.252-1.38-10.543-.934-5.535-2.009-11.312-3.189-16.692-.855-3.9-1.772-7.416-2.752-11.2-1.1-4.256-2.394-8.149-3.687-12.381-1.1-3.615-2.366-6.893-3.623-10.493-1.3-3.739-2.917-7.26-4.284-10.7-1.708-4.295-3.674-8.078-5.485-12.023-1.145-2.493-2.5-4.932-3.727-7.387-1.318-2.646-2.9-5.214-4.152-7.518-1.716-3.16-3.517-5.946-5.274-8.873-1.692-2.818-3.589-5.645-5.355-8.334-2.326-3.542-4.637-6.581-7.039-9.848-2.064-2.809-4.017-5.255-6.088-7.828a237.651 237.651 0 0 0-7.292-8.589c-3.027-3.411-6.049-6.744-9.055-9.763-2.4-2.412-4.776-4.822-7.108-6.975-3-2.767-5.836-5.471-8.692-7.854-3.332-2.779-6.657-5.663-9.815-8.028-2.958-2.216-5.784-4.613-8.7-6.6-3.161-2.159-6.251-4.414-9.219-6.254-3.814-2.365-7.533-4.882-11.168-6.89-4.213-2.327-8.513-4.909-12.478-6.834-4.61-2.239-9.234-4.619-13.51-6.416-4.1-1.725-8.11-3.505-11.874-4.888-4.5-1.652-8.506-3.191-12.584-4.47-6.045-1.9-12.071-3.678-17.431-5-9.228-2.284-17.608-3.757-24.951-4.9-7.123-1.112-13.437-1.64-18.271-2.035l-2.405-.2c-1.638-.136-3.508-.237-4.633-.3A115.051 115.051 0 0 0 0 .081h259.51Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.midone-dash .side-nav .side-menu.side-menu--active .side-menu__icon::before {
  background-color: #fff;
  z-index: 0;
}
.midone-dash .side-nav .side-menu .side-menu__icon svg {
  color: #000;
}
.midone-dash .side-nav .side-menu .side-menu__title {
  color: #000;
}
.os-page-tabs {
  margin-top: 15px;
  display: flex;
}

.os-page-tabs li {
  margin-right: 25px;
}

.os-page-tabs li a {
  padding: 15px 0px;
  white-space: nowrap;
  font-size: 20px;
  display: block;
  text-decoration: none;
  color: #8894AF;
  position: relative;
  outline: none;
}

.os-page-tabs .os-page-tab-active a:after {
  content: "";
  background-color: #0937ff;
  height: 1px;
  left: 0px;
  right: 0px;
  position: absolute;
  bottom: 0px;
}

.left-side-popup {
  transform: translate(0, -50%) !important;
  left: initial !important;
  right: 0;
  border-radius: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
}

.search-result {
  max-width: 450px;
  width: 100%;
  min-width: 400px;
}

.report-box__indicator {
  background: #84cc16;
}
.report-box__indicator.negative {
  background: #dc2626;
}
.report-box__indicator.negative svg {
  transform: rotate(180deg);
}

.report-box {
  position: relative;
}
.report-box:before {
  --tw-bg-opacity:1;
  background-color: rgb(var(--color-slate-50)/var(--tw-bg-opacity));
  border-radius: 0.375rem;
  box-shadow: 0 3px 20px #0000000b;
  content: "";
  height: 100%;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
  position: absolute;
  right: 0;
  width: 90%;
}

.dark .report-box:before {
  background-color: rgb(var(--color-darkmode-400)/0.7);
}

.report-box .report-box__icon {
  height: 28px;
  width: 28px;
}
.report-box .report-box__indicator {
  --tw-text-opacity:1;
  align-items: center;
  border-radius: 9999px;
  color: rgb(255 255 255/var(--tw-text-opacity));
  display: flex;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 3px 0.25rem 3px 0.5rem;
}

.payment-process-wrapper {
  width: 100%;
  padding: 40px;
  box-shadow: 0px 64px 64px -48px rgba(15, 15, 15, 0.1);
  border-radius: 16px;
  background: #FCFCFD;
}
body.is-dark .payment-process-wrapper {
  background: #222;
}
body.is-dark .payment-process-wrapper::after {
  background: #4c4c4c;
}
@media only screen and (max-width: 1179px) {
  .payment-process-wrapper {
    flex-grow: 1;
    width: auto;
    padding: 32px;
  }
}
.payment-process-wrapper .payment-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 48px;
  padding: 24px 36px;
  border-radius: 16px;
  background: #F4F5F6;
}
@media only screen and (max-width: 767px) {
  .payment-process-wrapper .payment-options {
    display: block;
    margin-bottom: 32px;
  }
}
.payment-process-wrapper body.dark .payment-options {
  background: #23262F;
}
.payment-process-wrapper .payment-option {
  display: flex;
}
@media only screen and (max-width: 767px) {
  .payment-process-wrapper .payment-option:not(:last-child) {
    margin-bottom: 32px;
  }
}
.payment-process-wrapper .payment-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
}
.payment-process-wrapper .payment-icon .icon {
  width: 20px;
  height: 20px;
  fill: #FCFCFD;
}
.payment-process-wrapper .payment-category {
  font-size: 12px;
  line-height: 1.66667;
  color: #777E90;
}
.payment-process-wrapper .payment-content {
  font-weight: 500;
}
.payment-process-wrapper .payment-line {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.payment-process-wrapper .payment-subtitle {
  margin-right: auto;
  font-size: 24px;
  line-height: 1.33333;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.payment-process-wrapper .payment-cards {
  display: flex;
  align-items: center;
}
.payment-process-wrapper .payment-fieldset > .field {
  margin-bottom: 32px;
}
.payment-process-wrapper .payment-row {
  display: flex;
  margin: 0 -8px;
}
.payment-process-wrapper .payment-row .field {
  flex: 0 0 calc(50% - 16px);
  width: calc(50% - 16px);
  margin: 0 8px;
}
.payment-process-wrapper .payment .checkbox {
  margin-top: 32px;
}
.payment-process-wrapper .payment-info {
  margin-bottom: 48px;
  font-size: 16px;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .payment-process-wrapper .payment-info {
    margin-bottom: 32px;
  }
}
.payment-process-wrapper .payment-flex {
  display: flex;
  justify-content: space-between;
}
.payment-process-wrapper .payment-flex:first-child {
  padding-bottom: 12px;
  border-bottom: 1px solid #E6E8EC;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
.payment-process-wrapper body.dark .payment-flex:first-child {
  border-color: #353945;
}
.payment-process-wrapper .payment-flex:not(:first-child) .payment-cell:first-child {
  color: #777E90;
}
.payment-process-wrapper .payment-flex:not(:last-child) {
  margin-bottom: 12px;
}
.payment-process-wrapper .payment-cell:nth-child(2) {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
.payment-process-wrapper .payment-btns {
  margin-top: 48px;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .payment-process-wrapper .payment-btns {
    margin-top: 32px;
  }
}
.payment-process-wrapper .payment-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
}
@media only screen and (max-width: 767px) {
  .payment-process-wrapper .payment-foot {
    display: block;
    margin-top: 32px;
  }
  .payment-process-wrapper .payment-foot .payment-button {
    width: 100%;
  }
  .payment-process-wrapper .payment-foot .payment-button:not(:last-child) {
    margin-bottom: 10px;
  }
}

.-k-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  padding-right: 12px;
}
.-k-header .-logo {
  --icon-size: 60px;
  display: flex;
  place-items: center;
  position: relative;
  height: var(--icon-size);
  width: var(--icon-size);
}
.-k-header .-logo img {
  width: 100%;
  height: 100%;
  border-radius: 550px;
}
.-k-header .\--title {
  font-weight: 600;
  color: #111111;
  margin-top: 1.5rem;
  font-size: 26px;
}
.-k-header .\--subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-top: 10px;
}

[x-cloak] {
  display: none !important;
}
.call-buton .cc-calto-action-ripple {
	z-index: 99999;
	position: fixed;
	right: 1rem;
	bottom: 8rem;
	background: #ec8b00;
	width: 4rem;
	height: 4rem;
	padding: 1rem;
	border-radius: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #ffffff;
	-webkit-animation: cc-calto-action-ripple 0.6s linear infinite;
	animation: cc-calto-action-ripple 0.6s linear infinite;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-decoration: none; }
	.call-buton .cc-calto-action-ripple i {
	  -webkit-transition: 0.3s ease;
	  transition: 0.3s ease;
	  font-size: 2.2rem; }
	.call-buton .cc-calto-action-ripple:hover i {
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg); }
  
  @-webkit-keyframes cc-calto-action-ripple {
	0% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2); }
	100% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0); } }
  
  @keyframes cc-calto-action-ripple {
	0% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2); }
	100% {
	  -webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
	  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0); } }

	span.num{
		position: absolute;
    color: #ec8b00;
    left: -30%;
    bottom: -50%;
	}



:root {
    --unit: .625rem;
    --vh: 1vh;
    --a-speed: .3s;
    --c-light: #FFF;
    --c-gray1: #EEE;
    --c-gray2: #CCC;
    --c-gray3: #999;
    --c-gray4: #666;
    --c-gray5: #555;
    --c-gray6: #222;
    --c-dark: #111;
    --c-overlay-light: rgb(0 0 0 / .5);
    --c-overlay-dark: rgb(0 0 0 / .8);
    --c-glass-light: rgba(255, 255, 255, .7);
    --c-glass-dark: rgba(17, 17, 17, .7);
    --c-glass-light-subtle: rgba(255, 255, 255, .9);
    --c-glass-dark-subtle: rgba(17, 17, 17, .9);
    --c-nav-light: rgb(255 255 255 / .5);
    --c-nav-dark: rgb(0 0 0 / .5);
    --c-success: #1b0;
    --c-error: #f20;
    --c-pulse-light: 255, 255, 255;
    --c-pulse-dark: 0, 0, 0;
    --c-shadow-dark: drop-shadow(0px 0px 20px rgba(0, 0, 0, .5));
    --c-shadow-light: drop-shadow(0px 0px 20px rgba(0, 0, 0, .1));
    --c-shadow-dark-subtle: drop-shadow(0px 0px 10px rgba(0, 0, 0, .5));
    --c-shadow-light-subtle: drop-shadow(0px 0px 10px rgba(0, 0, 0, .1));
    --c-glass-dark-2: rgba(0, 0, 0, .3);
    --c-glass-light-2: rgba(0, 0, 0, .05);
    --c-yellow: #FC0;
    --c-orange: #F80;
    --c-brown: #A63;
    --c-red: #F20;
    --c-pink: #F58;
    --c-magenta: #B1C;
    --c-violet: #80F;
    --c-blue: #08F;
    --c-cyan: #0BA;
    --c-green: #0A0;
    --c-lemon: #AC4;
    --c-mono: var(--foreground);
    --f-base: Inter, var(--f-sans);
    --f-headings: Cormorant, var(--f-serif);
    --f-body: Inter, var(--f-sans);
    --f-sans: -apple-system,system-ui, BlinkMacSystemFont,"Helvetica","Arial",sans-serif;
    --f-serif: Georgia,"Times New Roman",Times, serif;
    --f-mono: "Lucida Console",Monaco,monospace;
    --l-title: 1.2;
    --l-body: 1.6;
    --t-xs: 10px;
    --t-s: 12px;
    --t-m: 14px;
    --t-xm: 16px;
    --t-l: 24px;
    --t-xl: 32px;
    --t-base: 1rem;
    --t-scale: 1.25;
    --t-0: calc(10px * var(--t-scale));
    --t-1: var(--t-base);
    --t-2: calc(var(--t-1) * var(--t-scale));
    --t-3: calc(var(--t-2) * var(--t-scale));
    --t-4: calc(var(--t-3) * var(--t-scale));
    --t-5: calc(var(--t-4) * var(--t-scale));
    --t-6: calc(var(--t-5) * var(--t-scale));
    --t-7: calc(var(--t-6) * var(--t-scale));
    --t-8: calc(var(--t-7) * var(--t-scale));
    --r-none: 0rem;
    --r-small: calc(var(--unit) / 2);
    --r-full: 1000rem;
    --min-r-none: 0px;
    --min-r-small: 10px;
    --min-r-full: 20px;
    --s-1: var(--unit);
    --s-2: calc(var(--unit) * 2);
    --s-3: calc(var(--unit) * 3);
    --s-4: calc(var(--unit) * 4);
    --s-5: calc(var(--unit) * 5);
    --s-6: calc(var(--unit) * 6);
    --s-7: calc(var(--unit) * 7);
    --s-8: calc(var(--unit) * 8);
    --background: var(--c-light);
    --foreground: var(--c-dark);
    --c-mix-1: var(--c-gray1);
    --c-mix-2: var(--c-gray3);
    --c-mix-3: var(--c-gray4);
    --c-mix-4: var(--c-overlay-light);
    --c-mix-5: var(--c-nav-dark);
    --c-mix-6: var(--c-glass-light);
    --c-mix-7: var(--c-pulse-dark);
    --c-mix-8: var(--c-shadow-light);
    --c-mix-9: var(--c-gray5);
    --c-mix-10: var(--c-gray2);
    --c-mix-11: var(--c-shadow-light-subtle);
    --c-mix-12: var(--c-glass-light-subtle);
    --c-glass-bg: var(--c-glass-light-2)
}

.page-type-options{background:var(--c-mix-1);padding:var(--s-1);border-radius:var(--r-small);margin-bottom:var(--s-2);height:auto;}
.page-type-options>div:first-child{background:var(--background);width:100%;height:200px;border-radius:3px;overflow-y:hidden;overflow-x:hidden;}
.page-type-options>div:first-child::-webkit-scrollbar{display:none;}
.page-type-options>div:last-child{display:flex;gap:10px;padding-top:var(--s-1);}
.template .template-container{height:auto;border:1px solid var(--c-mix-1);border-radius:var(--r-small);}
.template .template-container:hover{background:var(--c-mix-1);}
.template .template-container:hover .template-footer-button a{background:var(--background);color:var(--foreground);transition:none;}
.template .template-container .template-block{width:100%;position:relative;cursor:pointer;font-size:var(--t-m);color:var(--foreground);-webkit-user-select:none;-moz-user-select:none;user-select:none;display:block;}
.template .template-container .template-block .template-image{height:auto;background:var(--c-mix-1);margin:20px;border-radius:var(--r-small);position:relative;}
.template .template-container .template-block .template-image .template-content{display:flex;justify-content:center;align-items:center;width:100%;height:100%;}
.template .template-container .template-block .template-footer{display:flex;align-items:center;margin:0 var(--s-1) 0 var(--s-2);position:relative;}
.template .template-container .template-block .template-footer .template-details{flex:0 0 calc(100% - 40px);}
.template .template-container .template-block .template-footer .template-details p.template-name{font-size:var(--t-m);text-transform:capitalize;}
.template .template-container .template-block .template-footer .template-details p.template-creator{font-size:var(--t-xs);color:var(--c-mix-3);}
.template .template-container .template-block .template-footer .template-price{min-width:100px;height:30px;display:flex;position:absolute;right:10px;color:var(--foreground);font-size:var(--t-m);text-align:right;}
.template .template-container .template-block .template-footer .template-price:after{position:absolute;content:var(--template-price);right:0;}
.template .template-container .template-footer-button{height:62px;display:flex;gap:20px;align-items:center;padding:0 20px;}
.template .template-container .template-footer-button a{width:50%;height:32px;background:var(--c-mix-1);color:var(--foreground);font-size:var(--t-s);transition:none;}
.template .template-container .template-footer-button button{width:50%;height:32px;display:flex;align-items:center;justify-content:center;font-size:var(--t-s);transition:none;}

.yena-themes-wrapper {
    display:flex;
    padding-bottom:10vmin
  }
  .yena-themes-sidebar {
    display:block;
    flex-shrink:0;
    height:100%;
    margin-right:4.8rem;
    position:sticky;
    top:3rem;
    width:24rem
  }
  @media (max-width:800px) {
    .yena-themes-sidebar {
      display:none
    }
  }
  .yena-themes-filter {
    border-radius:5px;
    color:currentColor;
    display:flex;
    flex-direction:column;
    font-size:1.4rem;
    font-weight:500;
    line-height:1.3em;
    margin:0 0 3.2rem -1rem;
    padding:.8rem 1rem
  }
  .yena-themes-filter h3 {
    font-size:1.2rem;
    font-weight:600;
    letter-spacing:.5px;
    margin:0 0 .9rem;
    text-transform:uppercase
  }
  .yena-themes-filter a {
    border-radius:5px;
    color:var(--color-midgrey);
    margin:0 0 0 -1rem;
    padding:.8rem 1rem;
    text-decoration:none
  }
  .yena-themes-filter a:hover {
    color:var(--color-darkgrey)!important;
    text-decoration:none
  }
  .yena-themes-filter a.active {
    background:#f0f6f9;
    color:var(--color-darkgrey)
  }
  .yena-themes-filter-rating .yena-theme-stars {
    display:flex;
    gap:3px
  }
  .yena-themes-filter-rating svg {
    height:20px;
    width:20px
  }
  .yena-themes-filter-rating .yena-theme-stars:hover svg,
  .yena-themes-filter-rating .yena-theme-stars>svg,
  .yena-themes-filter-rating button.active svg,
  .yena-themes-filter-rating button:first-of-type svg {
    color:#9ca3af
  }
  .yena-themes-filter-rating .yena-theme-stars button:hover~button svg,
  .yena-themes-filter-rating button svg {
    color:#d1d5db
  }
  .yena-themes-feed {
    display:grid;
    justify-content:space-between;
    grid-gap:5.6vmin 4.8vmin;
    grid-template-columns:1fr 1fr 1fr
  }
  @media (max-width:1000px) {
    .yena-themes-feed {
      grid-template-columns:1fr 1fr
    }
  }
  .yena-themes-feed.no-wrap {
    flex-wrap:nowrap
  }
  .yena-no-themes-found h2 {
    font-size:2.6rem;
    margin-bottom:2.4rem
  }
  .yena-no-themes-found a {
    color:var(--color-green);
    font-size:1.6rem;
    font-weight:600;
    text-decoration:none
  }
  .yena-section-themes-submit {
    padding-bottom:0
  }
  .yena-theme-submit-gradient {
    background:linear-gradient(0deg,#efefef,#fff);
    margin:0 -6vmin;
    padding-bottom:8vmin
  }
  .yena-section-marketplace-submit img {
    text-align:center
  }
  .yena-theme-submit>*+* {
    margin-top:2.4rem
  }
  .yena-theme-submit>h2 {
    font-size:3rem;
    font-weight:700;
    letter-spacing:-.015em;
    margin:0 0 2.4rem;
    padding-top:6rem
  }
  .yena-theme-submit h4 {
    font-size:2.4rem;
    font-weight:600;
    letter-spacing:-.015em;
    margin:6rem 0 2.4rem
  }
  .yena-theme-submit a {
    color:var(--color-base);
    font-weight:500;
    text-decoration:underline
  }
  .yena-theme-submit>ul:not([class]) {
    list-style-type:disc;
    padding-left:36px
  }
  .yena-theme-submit>ul:not([class]) li+li {
    margin-top:8px
  }
  .yena-theme-submit .yena-marketplace-form {
    font-size:1.6rem;
    line-height:1.5;
    margin-top:8vmin
  }
  .yena-theme-submit-checklist {
    list-style-type:none;
    padding:0
  }
  .yena-theme-submit-checklist>li {
    cursor:pointer;
    padding-left:3rem;
    position:relative
  }
  .yena-theme-submit-checklist>li+li {
    margin-top:1.2rem
  }
  .yena-theme-submit-checklist>li:before {
    border:2px solid var(--color-midgrey);
    border-radius:3px;
    content:"";
    display:block;
    height:20px;
    left:0;
    position:absolute;
    top:4px;
    width:20px
  }
  .yena-theme-submit-checklist>li.active {
    text-decoration:line-through
  }
  .yena-theme-submit-checklist>li.active:before {
    background-color:var(--color-green);
    border-color:var(--color-green)
  }
  .yena-theme-submit-checklist input[type=checkbox] {
    display:none
  }
  .yena-theme-submit-checklist ul {
    list-style-type:none;
    padding:0
  }
  .yena-theme-submit-checklist ul>li {
    margin:.4em 0
  }
  .yena-theme-submit-checklist ul>li:first-child strong {
    color:var(--color-green)
  }
  .yena-theme-submit-checklist ul>li:last-child strong {
    color:var(--color-red)
  }
  .yena-theme-card {
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    position:relative
  }
  .yena-theme-card.Hidden {
    display:none
  }
  .yena-theme-card-link {
    text-decoration:none
  }
  .yena-theme-card-image-wrapper {
    border-radius:0 0 6px 6px;
    box-shadow:2px 5px 15px 0 rgba(0,0,0,.08);
    overflow:hidden;
    position:relative;
    transition:all .4s ease;
    will-change:box-shadow;
    z-index:30
  }
  .yena-theme-card-link:hover .yena-theme-card-image-wrapper {
    box-shadow:0 10px 20px 0 rgba(0,0,0,.15)
  }
  .yena-theme-card-image {
    background:var(--color-lightgrey) no-repeat center center;
    border-radius:2px;
    display:block;
    overflow:hidden;
    position:relative;
    width:100%
  }
  .yena-theme-card-image-wrapper.featured:before {
    background:var(--color-green);
    color:#fff;
    content:"Featured";
    font-size:1.3rem;
    font-weight:600;
    position:absolute;
    right:-42px;
    text-align:center;
    top:20px;
    transform:rotate(45deg);
    width:150px;
    z-index:100
  }
  .yena-theme-card-toolbar {
    background-color:#f2f2f2;
    border-radius:6px 6px 0 0;
    height:28px;
    padding:0 12px;
    position:relative
  }
  .yena-theme-card-toolbar-button {
    background-color:#c4c4c4;
    border-radius:50%;
    display:block;
    height:6px;
    position:relative;
    top:11px;
    width:6px
  }
  .yena-theme-card-toolbar-button:after,
  .yena-theme-card-toolbar-button:before {
    background-color:#c4c4c4;
    border-radius:50%;
    content:"";
    height:6px;
    position:absolute;
    width:6px
  }
  .yena-theme-card-toolbar-button:before {
    left:12px
  }
  .yena-theme-card-toolbar-button:after {
    left:24px
  }
  .yena-theme-card-image-wrapper .yena-theme-card-overlay {
    align-items:center;
    background-color:hsla(0,0%,100%,.9);
    border:1px solid rgba(0,0,0,.05);
    border-radius:2px;
    display:flex;
    flex-direction:column;
    height:100%;
    justify-content:center;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    transition:opacity .3s cubic-bezier(.694,0,.31,1);
    width:100%
  }
  .yena-theme-card-image-wrapper:hover .yena-theme-card-overlay {
    opacity:1
  }
  .yena-theme-card-overlay .yena-btn {
    margin-bottom:1vmin
  }
  .yena-theme-card-preview {
    color:#384348;
    font-size:1.8rem;
    font-weight:500;
    letter-spacing:-.3px;
    margin-top:.5em;
    text-decoration:underline
  }
  .yena-theme-meta {
    display:flex;
    justify-content:space-between;
    margin-top:2.4rem
  }
  .yena-theme-description {
    flex-grow:1
  }
  .yena-theme-header {
    align-items:center;
    display:flex;
    justify-content:space-between
  }
  .yena-theme-title {
    color:var(--color-base);
    font-size:2rem;
    font-weight:600;
    margin-bottom:.2rem
  }
  .yena-theme-title span {
    font-weight:400;
    letter-spacing:.29px
  }
  .yena-theme-category {
    color:#6b7280;
    font-size:1.2rem;
    font-weight:500;
    margin-bottom:0;
    text-transform:uppercase
  }
  .yena-theme-price {
    background-color:#9ca3af;
    border-radius:3px;
    color:#fff;
    font-size:1.3rem;
    font-weight:600;
    height:100%;
    line-height:1;
    padding:.4rem .5rem
  }
  .free .yena-theme-price {
    background-color:#22c55e
  }
  .yena-theme-footer {
    align-items:center;
    display:flex;
    justify-content:space-between
  }
  [class*=yena-theme-stars] {
    align-items:center;
    display:flex;
    gap:2px
  }
  .yena-theme-stars-active {
    color:#9ca3af
  }
  .yena-theme-stars-inactive {
    color:#d1d5db
  }
  .yena-marketplace-theme-preview .yena-head {
    display:none
  }
  .yena-marketplace-theme-preview .yena-main {
    background:linear-gradient(0deg,#efefef,#fff)
  }
  .yena-section-theme-preview {
    padding:4vmin
  }
  .yena-section-theme-preview .inner {
    max-width:1600px
  }
  .yena-theme-preview-bar {
    align-items:center;
    border-bottom:1px solid var(--color-whitegrey);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    height:80px
  }
  .yena-theme-preview-info {
    align-items:center;
    color:var(--color-midgrey);
    display:flex;
    font-size:1.8rem;
    font-weight:500
  }
  .yena-theme-preview-info a {
    color:var(--color-midgrey);
    text-decoration:none
  }
  .yena-theme-preview-info>span {
    margin:0 1rem
  }
  .yena-theme-preview-title {
    font-size:1.8rem;
    font-weight:600;
    letter-spacing:0
  }
  .yena-theme-preview-selector {
    background-color:#f1f2f5;
    border-radius:4px;
    display:flex;
    height:36px;
    padding:2px
  }
  .yena-theme-preview-selector button {
    align-items:center;
    border-radius:3px;
    display:flex;
    justify-content:center;
    width:70px
  }
  .yena-theme-preview-selector button.active {
    background-color:#fff;
    box-shadow:0 2px 4px rgba(0,0,0,.08)
  }
  .yena-theme-preview-selector svg {
    width:20px
  }
  .yena-theme-preview-action {
    align-items:center;
    display:flex;
    justify-content:flex-end
  }
  .yena-theme-preview-external {
    color:var(--color-base);
    font-size:1.5rem;
    font-weight:600;
    text-decoration:none
  }
  .yena-theme-preview-demo-wrapper {
    position:relative
  }
  .yena-theme-preview-demo {
    box-shadow:0 3px 20px rgba(0,0,0,.08)
  }
  .yena-theme-preview-demo.desktop {
    border-radius:5.33333px;
    overflow:hidden;
    transform-origin:right
  }
  .yena-theme-preview-demo.desktop .yena-theme-card-toolbar {
    background-color:#fff;
    border-radius:4.70588px 4.70588px 0 0;
    height:32px;
    padding:0 14.11765px
  }
  .yena-theme-preview-demo.desktop .yena-theme-card-toolbar-button {
    height:7.05882px;
    top:12.94118px;
    width:7.05882px
  }
  .yena-theme-preview-demo.desktop .yena-theme-card-toolbar-button:after,
  .yena-theme-preview-demo.desktop .yena-theme-card-toolbar-button:before {
    height:7.05882px;
    width:7.05882px
  }
  .yena-theme-preview-demo.desktop .yena-theme-card-toolbar-button:before {
    left:14.11765px
  }
  .yena-theme-preview-demo.desktop .yena-theme-card-toolbar-button:after {
    left:28.23529px
  }
  .yena-theme-preview-demo.desktop .yena-theme-preview-frame {
    height:calc(100vh - 8vmin - 112px);
    width:100%
  }
  @media (max-width:767px) {
    .yena-theme-preview-bar {
      grid-template-columns:auto auto
    }
    .yena-theme-preview-action .yena-btn,
    .yena-theme-preview-selector {
      display:none
    }
    .yena-theme-preview-external {
      margin-right:0
    }
  }
  .yena-theme-preview-demo.mobile {
    background-color:#fff;
    border-radius:40px;
    height:calc(100vh - 8vmin - 80px);
    margin:0 auto;
    max-height:800px;
    padding:10px;
    width:400px
  }
  .yena-theme-preview-demo.mobile .yena-theme-preview-frame {
    border-radius:32px;
    height:100%;
    width:100%
  }
  .yena-theme-preview-demo.mobile .yena-theme-card-toolbar {
    display:none
  }
.z-\[99999\] {
    z-index: 99999;
}
.to-\[\#efefef\] {
    --tw-gradient-to: #efefef;
}
.loader-o20 {
	color: #000;
	font-size: 10px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	transform: translateZ(0);
	animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
    display: block;
}
  
  @keyframes mltShdSpin {
	0% {
	  box-shadow: 0 -0.83em 0 -0.4em,
	  0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
	  0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	5%,
	95% {
	  box-shadow: 0 -0.83em 0 -0.4em, 
	  0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 
	  0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	10%,
	59% {
	  box-shadow: 0 -0.83em 0 -0.4em, 
	  -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, 
	  -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
	}
	20% {
	  box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
	   -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, 
	   -0.749em -0.34em 0 -0.477em;
	}
	38% {
	  box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
	   -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, 
	   -0.82em -0.09em 0 -0.477em;
	}
	100% {
	  box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 
	  0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
  }
  
  @keyframes round {
	0% { transform: rotate(0deg) }
	100% { transform: rotate(360deg) }
  }