.row {
  display: flex !important;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}
@media (max-width: 576px) {
  .row {
    margin-right: -8px;
    margin-left: -8px;
  }
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}
@media (max-width: 576px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col,
  .col-auto,
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm,
  .col-sm-auto,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md,
  .col-md-auto,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg,
  .col-lg-auto,
  .col-xl-1,
  .col-xl-2,
  .col-xl-3,
  .col-xl-4,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-xl-8,
  .col-xl-9,
  .col-xl-10,
  .col-xl-11,
  .col-xl-12,
  .col-xl,
  .col-xl-auto {
    padding-right: 8px;
    padding-left: 8px;
  }
}
.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.order-first {
  order: -1;
}
.order-last {
  order: 13;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 6;
}
.order-7 {
  order: 7;
}
.order-8 {
  order: 8;
}
.order-9 {
  order: 9;
}
.order-10 {
  order: 10;
}
.order-11 {
  order: 11;
}
.order-12 {
  order: 12;
}
.offset-1 {
  margin-left: 8.333333%;
}
.offset-2 {
  margin-left: 16.666667%;
}
.offset-3 {
  margin-left: 25%;
}
.offset-4 {
  margin-left: 33.333333%;
}
.offset-5 {
  margin-left: 41.666667%;
}
.offset-6 {
  margin-left: 50%;
}
.offset-7 {
  margin-left: 58.333333%;
}
.offset-8 {
  margin-left: 66.666667%;
}
.offset-9 {
  margin-left: 75%;
}
.offset-10 {
  margin-left: 83.333333%;
}
.offset-11 {
  margin-left: 91.666667%;
}
@media (min-width: 577px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-sm-first {
    order: -1;
  }
  .order-sm-last {
    order: 13;
  }
  .order-sm-0 {
    order: 0;
  }
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-6 {
    order: 6;
  }
  .order-sm-7 {
    order: 7;
  }
  .order-sm-8 {
    order: 8;
  }
  .order-sm-9 {
    order: 9;
  }
  .order-sm-10 {
    order: 10;
  }
  .order-sm-11 {
    order: 11;
  }
  .order-sm-12 {
    order: 12;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 769px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-md-first {
    order: -1;
  }
  .order-md-last {
    order: 13;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-6 {
    order: 6;
  }
  .order-md-7 {
    order: 7;
  }
  .order-md-8 {
    order: 8;
  }
  .order-md-9 {
    order: 9;
  }
  .order-md-10 {
    order: 10;
  }
  .order-md-11 {
    order: 11;
  }
  .order-md-12 {
    order: 12;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-last {
    order: 13;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
  .order-lg-6 {
    order: 6;
  }
  .order-lg-7 {
    order: 7;
  }
  .order-lg-8 {
    order: 8;
  }
  .order-lg-9 {
    order: 9;
  }
  .order-lg-10 {
    order: 10;
  }
  .order-lg-11 {
    order: 11;
  }
  .order-lg-12 {
    order: 12;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}
@media (min-width: 1201px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-xl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .order-xl-first {
    order: -1;
  }
  .order-xl-last {
    order: 13;
  }
  .order-xl-0 {
    order: 0;
  }
  .order-xl-1 {
    order: 1;
  }
  .order-xl-2 {
    order: 2;
  }
  .order-xl-3 {
    order: 3;
  }
  .order-xl-4 {
    order: 4;
  }
  .order-xl-5 {
    order: 5;
  }
  .order-xl-6 {
    order: 6;
  }
  .order-xl-7 {
    order: 7;
  }
  .order-xl-8 {
    order: 8;
  }
  .order-xl-9 {
    order: 9;
  }
  .order-xl-10 {
    order: 10;
  }
  .order-xl-11 {
    order: 11;
  }
  .order-xl-12 {
    order: 12;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}
.container {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 1200px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }
}
.container.container-xxl {
  width: 1400px;
}
@media (max-width: 1400px) {
  .container.container-xxl {
    width: 100%;
    padding: 0 16px;
  }
}
.container.container-lg {
  width: 1291px;
}
@media (max-width: 1291px) {
  .container.container-lg {
    width: 100%;
    padding: 0 16px;
  }
}
.container.container-md {
  width: 768px;
}
@media (max-width: 768px) {
  .container.container-md {
    width: 100%;
    padding: 0 16px;
  }
}
.container.container-sm {
  width: 576px;
}
@media (max-width: 576px) {
  .container.container-sm {
    width: 100%;
    padding: 0 16px;
  }
}
:root {
  scroll-padding-top: 180px;
  scroll-behavior: smooth;
  --progress: 0%;
}
@media (max-width: 768px) {
  :root {
    scroll-padding-top: 104px;
  }
}
html,
body {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  height: 100svh;
  color: #fff;
  font-size: 0.75rem;
  font-family: "SF Pro Display", sans-serif;
  font-weight: 400;
  letter-spacing: -0.4px;
  background-color: #040a1c;
  background-image: linear-gradient(to bottom, #0d162e, #101931);
  position: relative;
  -webkit-text-size-adjust: none;
  overflow: hidden;
}
body .sticky {
  top: 124px;
}
* {
  outline: none;
  box-sizing: border-box;
}
main {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  position: relative;
  padding: 16px 24px;
  display: flex;
  flex-flow: column;
  align-items: center;
  overflow: hidden auto;
  padding-bottom: 96px;
}
main:before {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: -80px;
  left: 0;
  background: linear-gradient(
    223deg,
    rgba(75, 108, 152, 0.4) 15.96%,
    rgba(31, 104, 213, 0.4) 41.33%,
    rgba(214, 68, 156, 0.4) 66.7%,
    rgba(214, 68, 156, 0.4) 97.8%
  );
  pointer-events: none;
  transform: rotate(0deg);
  z-index: -1;
  filter: blur(120px);
}
main:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border: 2px solid rgba(0, 0, 0, 0);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  background: linear-gradient(#b80cdd 0%, rgba(184, 12, 221, 0) 15%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (min-width: 768px) {
  main {
    border-radius: 0;
    padding-left: 264px;
    padding-bottom: 24px;
  }
  main:after {
    display: none;
  }
}
@media (min-width: 1291px) {
  main {
    padding-right: 264px;
    padding-left: 504px;
  }
  main.smaller {
    padding-right: calc(100vw - 880px);
  }
  main.with-sidebar {
    padding-right: calc(100vw - 1600px);
  }
}
button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}
section {
  position: relative;
}
img {
  display: block;
}
hr {
  border: 0;
  height: 1px;
  background-color: #243763;
}
.primaryColor {
  color: #c57b07;
}
.secondaryColor {
  color: #102b42;
}
.gray50 {
  color: #f7f7f7;
}
.gray100 {
  color: #f5f5f5;
}
.gray200 {
  color: #dbdbdb;
}
.gray300 {
  color: #c2c2c2;
}
.gray400 {
  color: #a8a8a8;
}
.gray500 {
  color: #8f8f8f;
}
.gray600 {
  color: #757575;
}
.gray700 {
  color: #5c5c5c;
}
.gray800 {
  color: #424242;
}
.gray900 {
  color: #292929;
}
.green {
  color: #30ff38;
}
.bgr-primaryColor {
  background-color: #c57b07;
}
.bgr-primaryColor50 {
  background-color: #fef5e6;
}
.bgr-primaryColor100 {
  background-color: #fdebce;
}
.bgr-primaryColor200 {
  background-color: #fcd79d;
}
.bgr-primaryColor300 {
  background-color: #fac26b;
}
.bgr-primaryColor400 {
  background-color: #f8ae3a;
}
.bgr-primaryColor500 {
  background-color: #f69a09;
}
.bgr-primaryColor600 {
  background-color: #c57b07;
}
.bgr-primaryColor700 {
  background-color: #945c05;
}
.bgr-primaryColor800 {
  background-color: #633e04;
}
.bgr-primaryColor900 {
  background-color: #311f02;
}
.bgr-secondaryColor {
  background-color: #102b42;
}
.bgr-secondaryColor50 {
  background-color: #eff5fb;
}
.bgr-secondaryColor100 {
  background-color: #c6ddf1;
}
.bgr-secondaryColor200 {
  background-color: #9ec5e6;
}
.bgr-secondaryColor300 {
  background-color: #75acdc;
}
.bgr-secondaryColor400 {
  background-color: #4c94d2;
}
.bgr-secondaryColor500 {
  background-color: #2f7bbc;
}
.bgr-secondaryColor600 {
  background-color: #256093;
}
.bgr-secondaryColor700 {
  background-color: #1b456a;
}
.bgr-secondaryColor800 {
  background-color: #102b42;
}
.bgr-secondaryColor900 {
  background-color: #061019;
}
.bgr-gray50 {
  background-color: #f7f7f7;
}
.bgr-gray100 {
  background-color: #f5f5f5;
}
.bgr-gray200 {
  background-color: #dbdbdb;
}
.bgr-gray300 {
  background-color: #c2c2c2;
}
.bgr-gray400 {
  background-color: #a8a8a8;
}
.bgr-gray500 {
  background-color: #8f8f8f;
}
.bgr-gray600 {
  background-color: #757575;
}
.bgr-gray700 {
  background-color: #5c5c5c;
}
.bgr-gray800 {
  background-color: #424242;
}
.bgr-gray900 {
  background-color: #292929;
}
.bgr-dark {
  background-color: rgba(10, 16, 34, 0.5);
}
.bgr-white {
  background-color: #fff;
}
.bgr-red {
  background-color: rgba(255, 47, 0, 0.31);
}
.white {
  color: #fff;
}
.blue {
  color: #3780ee;
}
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 1rem;
  flex: 0 0 24px;
}
.icon.xs {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.icon.sm {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.icon.round {
  border-radius: 100vw;
  background-color: rgba(244, 238, 247, 0.1);
  padding: 2px;
}
.icon.green:before {
  background-color: #30ff38 !important;
}
.icon.yellow:before {
  background-color: #c2bd24 !important;
}
.icon.blue:before {
  background-color: #3780ee !important;
}
.icon-small {
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 0.75rem;
  flex: 0 0 16px;
}
.icon-large {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 1.25rem;
  flex: 0 0 32px;
}
[class*="icon-"]:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-size: cover !important;
  mask-size: cover !important;
  background-color: #fff;
}
[class*="icon-"].colored:before {
  background-color: #c57b07;
}
.icon-arrow-right:before {
  -webkit-mask: url(../assets/icons/arrow-right.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/arrow-right.svg) no-repeat 50% 50%;
}
.icon-calendar:before {
  -webkit-mask: url(../assets/icons/calendar.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/calendar.svg) no-repeat 50% 50%;
}
.icon-checkmark:before {
  -webkit-mask: url(../assets/icons/checkmark.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/checkmark.svg) no-repeat 50% 50%;
}
.icon-checkmark-circle:before {
  -webkit-mask: url(../assets/icons/checkmark-circle.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/checkmark-circle.svg) no-repeat 50% 50%;
}
.icon-chevron-down:before {
  -webkit-mask: url(../assets/icons/chevron-down.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/chevron-down.svg) no-repeat 50% 50%;
}
.icon-chevron-left:before {
  -webkit-mask: url(../assets/icons/chevron-left.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/chevron-left.svg) no-repeat 50% 50%;
}
.icon-chevron-right:before {
  -webkit-mask: url(../assets/icons/chevron-right.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/chevron-right.svg) no-repeat 50% 50%;
}
.icon-chevron-up:before {
  -webkit-mask: url(../assets/icons/chevron-up.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/chevron-up.svg) no-repeat 50% 50%;
}
.icon-close:before {
  -webkit-mask: url(../assets/icons/close.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/close.svg) no-repeat 50% 50%;
}
.icon-copy:before {
  -webkit-mask: url(../assets/icons/copy.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/copy.svg) no-repeat 50% 50%;

}
.icon-envelope:before {
  -webkit-mask: url(../assets/icons/envelope.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/envelope.svg) no-repeat 50% 50%;
}
.icon-facebook:before {
  -webkit-mask: url(../assets/icons/facebook.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/facebook.svg) no-repeat 50% 50%;
}
.icon-instagram:before {
  -webkit-mask: url(../assets/icons/instagram.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/instagram.svg) no-repeat 50% 50%;
}
.icon-location:before {
  -webkit-mask: url(../assets/icons/location.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/location.svg) no-repeat 50% 50%;
}
.icon-phone:before {
  -webkit-mask: url(../assets/icons/phone.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/phone.svg) no-repeat 50% 50%;
}
.icon-play:before {
  -webkit-mask: url(../assets/icons/play.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/play.svg) no-repeat 50% 50%;
}
.icon-quote-down:before {
  -webkit-mask: url(../assets/icons/quote-down.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/quote-down.svg) no-repeat 50% 50%;
}
.icon-quote-up:before {
  -webkit-mask: url(../assets/icons/quote-up.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/quote-up.svg) no-repeat 50% 50%;
}
.icon-settings:before {
  -webkit-mask: url(../assets/icons/settings.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/settings.svg) no-repeat 50% 50%;
}
.icon-star:before {
  -webkit-mask: url(../assets/icons/star.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/star.svg) no-repeat 50% 50%;
}
.icon-star-light:before {
  -webkit-mask: url(../assets/icons/star-light.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/star-light.svg) no-repeat 50% 50%;
}
.icon-tooltip:before {
  -webkit-mask: url(../assets/icons/tooltip.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/tooltip.svg) no-repeat 50% 50%;
}
.icon-telegram:before {
  -webkit-mask: url(../assets/icons/telegram.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/telegram.svg) no-repeat 50% 50%;
}
.icon-share:before {
  -webkit-mask: url(../assets/icons/share.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/share.svg) no-repeat 50% 50%;
}
.icon-youtube:before {
  -webkit-mask: url(../assets/icons/youtube.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/youtube.svg) no-repeat 50% 50%;
}
.icon-x:before {
  -webkit-mask: url(../assets/icons/x.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/x.svg) no-repeat 50% 50%;
}
.icon-link:before {
  -webkit-mask: url(../assets/icons/link.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/link.svg) no-repeat 50% 50%;
}
.icon-channel-members:before {
  -webkit-mask: url(../assets/icons/channel-members.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/channel-members.svg) no-repeat 50% 50%;
}
.icon-group-members:before {
  -webkit-mask: url(../assets/icons/group-members.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/group-members.svg) no-repeat 50% 50%;
}
.icon-bot-users:before {
  -webkit-mask: url(../assets/icons/bot-users.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/bot-users.svg) no-repeat 50% 50%;
}
.icon-post-views:before {
  -webkit-mask: url(../assets/icons/post-views.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/post-views.svg) no-repeat 50% 50%;
}
.icon-deposit:before {
  -webkit-mask: url(../assets/icons/deposit.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/deposit.svg) no-repeat 50% 50%;
}
.icon-withdraw:before {
  -webkit-mask: url(../assets/icons/withdraw.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/withdraw.svg) no-repeat 50% 50%;
}
.icon-pending:before {
  -webkit-mask: url(../assets/icons/pending.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/pending.svg) no-repeat 50% 50%;
}
.icon-paypal:before {
  -webkit-mask: url(../assets/icons/paypal.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/paypal.svg) no-repeat 50% 50%;
}
.icon-paste:before {
  -webkit-mask: url(../assets/icons/paste.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/paste.svg) no-repeat 50% 50%;
}
.icon-question-mark-circle:before {
  -webkit-mask: url(../assets/icons/question-mark-circle.svg) no-repeat 50% 50%;
  mask: url(../assets/icons/question-mark-circle.svg) no-repeat 50% 50%;
}
.topbar {
  height: 40px;
  width: 100%;
  background: rgba(0, 0, 0, 0.16);
  display: flex;
  justify-content: space-between;
  top: 0;
  text-transform: uppercase;
  transition: 0.3s ease;
}
.topbar .left-part,
.topbar .right-part {
  width: 100%;
  line-height: 40px;
  font-size: 0.8em;
}
.topbar .right-part {
  text-align: right;
}
nav {
  height: 60px;
  width: calc(768px - 24px);
  max-width: calc(100% - 24px);
  position: fixed;
  bottom: 24px;
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  display: flex;
  align-items: stretch;
  border-radius: 22px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  margin: 0 auto;
  z-index: 100;
}
nav:before {
  content: "";
  position: absolute;
  inset: -24px;
  display: block;
  background-image: linear-gradient(
    -45deg,
    rgba(75, 108, 152, 0.8) 15.96%,
    rgba(31, 104, 213, 0.8) 41.33%,
    rgba(214, 68, 156, 0.8) 66.7%,
    rgba(214, 68, 156, 0.8) 97.8%
  );
  filter: blur(24px);
  pointer-events: none;
}
nav:after {
  content: "";
  position: absolute;
  border-radius: 22px;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.24),
      rgba(102, 102, 102, 0)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.menu {
  display: flex;
  flex: auto;
  align-items: stretch;
  padding: 2px;
}
.menu li {
  position: relative;
  margin: 0;
  flex: 0 0 20%;
  height: 100%;
}
.menu li img {
  height: 26px;
}
.menu li a {
  font-weight: 400;
  color: #e3cccc;
  font-size: 0.625rem;
  display: flex;
  height: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  letter-spacing: -0.4px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.menu li a * {
  position: relative;
  z-index: 1;
}
.menu li a.active,
.menu li a:hover {
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.2);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.4) 0%,
    transparent 64%
  );
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: -15px -5px;
}
.menu li a.active:after,
.menu li a:hover:after {
  content: "";
  position: absolute;
  border-radius: 20px;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.4),
      rgba(241, 241, 241, 0.1)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.menu li a.active:before,
.menu li a:hover:before {
  content: "";
  position: absolute;
  display: block;
  width: 64px;
  height: 35px;
  border-radius: 100vw;
  filter: blur(16px);
  background-image: linear-gradient(130deg, #313afc, #c622ff);
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}
.menu li:hover .sub-menu {
  opacity: 1;
  transform: scale(1);
}
header {
  width: 100%;
  z-index: 400;
}
.btn,
input[type="submit"] {
  display: inline-flex;
  height: 48px;
  line-height: 48px;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0 20px;
  border-radius: 12px;
  border: none;
  transition: 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.btn-small {
  height: 40px;
  line-height: 40px;
}
.btn-large {
  height: 56px;
  line-height: 56px;
}
.btn-round {
  border-radius: 100vw;
  padding: 0;
  width: 48px;
}
.btn-square {
  padding: 0;
  width: 48px;
}













.btn-primary,
input[type="submit"] {
  background: rgba(0, 0, 0, 0);
  color: #fff;
  will-change: background-color;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.btn-primary:before,
input[type="submit"]:before {
  content: "";
  position: absolute;
  inset: -24px;
  display: block;
  background-image: linear-gradient(
    -45deg,
    rgba(75, 108, 152, 0.8) 15.96%,
    rgba(31, 104, 213, 0.8) 41.33%,
    rgba(214, 68, 156, 0.8) 66.7%,
    rgba(214, 68, 156, 0.8) 97.8%
  );
  filter: blur(24px);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:after,
input[type="submit"]:after {
  content: "";
  position: absolute;
  border-radius: 12px;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.24),
      rgba(102, 102, 102, 0)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-primary:hover,
input[type="submit"]:hover,
.btn-primary:focus,
input[type="submit"]:focus {
  box-shadow: 0px -1px 12px 0px rgba(139, 133, 255, 0.5),
    0px 1px 12px 0px #8b85ff, 0px -2px 5px 0px rgba(249, 175, 255, 0.3) inset,
    0px 2px 4.8px 0px rgba(249, 175, 255, 0.5) inset,
    0px -15px 20.4px 0px rgba(111, 58, 239, 0.8) inset;
}
.btn-primary:focus,
input[type="submit"]:focus {
  box-shadow: 0px -1px 12px 0px rgba(139, 133, 255, 0.5),
    0px 1px 12px 0px #8b85ff, 0px -2px 5px 0px rgba(249, 175, 255, 0.3) inset,
    0px 2px 4.8px 0px rgba(249, 175, 255, 0.5) inset,
    0px -15px 20.4px 0px rgba(111, 58, 239, 0.8) inset;
}
.btn-primary:disabled,
input[type="submit"]:disabled {
  background-color: #dbdbdb;
  color: #a8a8a8;
}
.btn-primary .icon,
input[type="submit"] .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.btn-primary .icon:before,
input[type="submit"] .icon:before {
  background-color: #fff;
}
.btn-secondary {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  will-change: background-color;
  box-shadow: 0px 4px 13px 0px rgba(90, 136, 205, 0.06) inset,
    0px 4px 10px 0px rgba(0, 0, 0, 0.21);
}
.btn-secondary:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 16px;
  background: linear-gradient(
      -45deg,
      rgba(33, 56, 180, 0.32) 0%,
      rgba(93, 141, 234, 0.32) 39%
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-secondary:disabled {
  background-color: #dbdbdb;
  color: #a8a8a8;
}
.btn-tertiary {
  background-color: #f5f5f5;
  color: #424242;
  will-change: background-color, color;
}
.btn-tertiary:hover,
.btn-tertiary:focus {
  background-color: #e8e8e8;
}
.btn-tertiary:focus {
  box-shadow: 0 0 0 4px rgba(245, 245, 245, 0.4);
}
.btn-tertiary:disabled {
  color: #dbdbdb;
}
.btn-red {
  box-shadow: 0px -0.86px 6px 0px rgba(255, 75, 75, 0.25),
    0px -1.72px 4.3px 0px rgba(255, 175, 175, 0.3) inset,
    0px 1.72px 4.128px 0px rgba(255, 175, 175, 0.5) inset,
    0px -12.9px 17.544px 0px rgba(140, 11, 11, 0.8) inset;
  background: linear-gradient(
    90deg,
    #ce0e0e -6.12%,
    #f26653 52.39%,
    #ce0e0e 106.23%
  );
  color: #fff;
    flex: 1;
}
.btn-red:hover,
.btn-red:focus {
  box-shadow: 0px -0.86px 6px 0px rgba(255, 75, 75, 0.25),
    0px 0.86px 6px 0px rgba(255, 75, 75, 0.8),
    0px -1.72px 4.3px 0px rgba(255, 175, 175, 0.3) inset,
    0px 1.72px 4.128px 0px rgba(255, 175, 175, 0.5) inset,
    0px -12.9px 17.544px 0px rgba(140, 11, 11, 0.8) inset;
}
.btn-green {
  box-shadow: 0px -0.86px 6px 0px rgba(75, 255, 223, 0.25),
    0px -1.72px 4.3px 0px rgba(109, 255, 141, 0.3) inset,
    0px 1.72px 4.128px 0px rgba(109, 255, 141, 0.5) inset,
    0px -12.9px 17.544px 0px rgba(17, 124, 111, 0.8) inset;
  background: linear-gradient(
    90deg,
    #12ae6c -6.12%,
    #4ccd4a 52.39%,
    #12ae6c 106.23%
  );
  border-radius: 10px;
  color: #fff;
    flex: 1;
}
.btn-green:hover,
.btn-green:focus {
  box-shadow: 0px -0.86px 6px 0px rgba(75, 255, 223, 0.25),
    0px 0.86px 6px 0px rgba(75, 255, 223, 0.8),
    0px -1.72px 4.3px 0px rgba(109, 255, 141, 0.3) inset,
    0px 1.72px 4.128px 0px rgba(109, 255, 141, 0.5) inset,
    0px -12.9px 17.544px 0px rgba(17, 124, 111, 0.8) inset;
}
.btn-link {
  background-color: rgba(0, 0, 0, 0);
  color: rgba(255, 255, 255, 0.2);
  will-change: background-color, color;
}
.btn-link:hover,
.btn-link:focus {
  filter: brightness(1.5);
}
.btn-link:disabled {
  color: #dbdbdb;
}
.btn-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  background-color: #0a1022;
  border-radius: 100vw;
  z-index: 500;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-popup-close .icon {
  width: 12px;
  height: 12px;
  display: block;
}
.btn-popup-close .icon:before {
  background-color: #2b3d6e;
}
.btn-popup-close.outside {
  transform: translateY(-100%);
}
.accordion-item {
  overflow: hidden;
  border: none;
  margin: 0 0 8px;
  background: linear-gradient(180deg, #273355 0%, #152247 100%);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 12px;
}
.accordion-item .accordion-header {
  padding: 0 8px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1rem;
  position: relative;
  margin: 0;
}
.accordion-item .accordion-header .btn-expandable {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  color: #fff;
  text-align: left;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: 0.3s linear;
  gap: 8px;
  font-family: "SF Pro Display", sans-serif;
}
.accordion-item .accordion-header span.icon {
  margin-left: auto;
  transform: rotate(180deg);
  transition: 0.3s linear;
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  border-radius: 8px;
  width: 16px;
  height: 16px;
}
.accordion-item .accordion-header span.icon.round {
  background-color: rgba(255, 255, 255, 0.2);
}
.accordion-item .accordion-header:has(.collapsed) {
  background-color: rgba(0, 0, 0, 0);
}
.accordion-item .accordion-header:has(.collapsed) span.icon {
  transform: rotate(0deg);
}
.accordion-item .expandable-body {
  padding: 8px;
}
.expandable {
  opacity: 1;
  transition: 0.3s ease;
  overflow: hidden;
  will-change: opacity, height;
}
.expandable.collapsed {
  height: 0;
  opacity: 0;
}
.badge {
  height: 32px;
  line-height: 32px;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0 8px;
  border-radius: 100vw;
  border: none;
  transition: 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  background-color: rgba(244, 238, 247, 0.1);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.4) 0%,
    transparent 64%
  );
  background-size: 160px 40px;
  background-repeat: no-repeat;
  background-position: -80px -15px;
  color: rgba(244, 238, 247, 0.7);
  display: inline-flex;
  position: relative;
}
.badge:after {
  content: "";
  position: absolute;
  border-radius: 22px;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.24),
      rgba(102, 102, 102, 0)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.badge.green {
  background-color: rgba(48, 255, 56, 0.2);
  background-image: radial-gradient(rgba(48, 255, 56, 0.4) 0%, transparent 64%);
  color: #30ff38;
  padding: 0 16px;
  border-radius: 10px;
}
.badge.green:after {
  border-radius: 10px;
  background: linear-gradient(
      45deg,
      rgba(124, 244, 94, 0.4),
      rgba(24, 118, 15, 0.4)
    )
    border-box;
}
.badge.currency-badge {
  border-radius: 5px;
  padding: 0 16px;
  font-weight: 700;
}
.badge.currency-badge:after {
  border-radius: 5px;
}
.badge.currency-badge.selected,
.badge.currency-badge:hover,
.badge.currency-badge:focus {
  color: #000;
  background: radial-gradient(
      43.01% 53.8% at 0% 6.9%,
      rgba(96, 58, 58, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    rgba(191, 217, 248, 0.84);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(10%);
  }
}
dialog {
  border: none;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #0d162e 0%, #101931 100%);
  color: rgba(255, 255, 255, 0.5);
  width: calc(576px - 24px);
  max-width: calc(100% - 24px);
}
dialog::backdrop {
  background-color: rgba(10, 16, 34, 0.8);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
dialog:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: linear-gradient(#b80cdd 0%, rgba(184, 12, 221, 0.24) 100%)
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
dialog .dialog-content {
  border-radius: 16px;
  padding: 24px;
  position: relative;
  max-height: 80svh;
  overflow: hidden auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
dialog .dialog-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}
@media (max-width: 768px) {
  dialog.drawer {
    width: 576px;
    max-width: 100%;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    left: 0;
  }
  dialog.drawer:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 0, 0, 0);
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    background: linear-gradient(#b80cdd 0%, rgba(184, 12, 221, 0) 15%)
      border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  dialog.drawer:before {
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    border-radius: 100vw;
    background: #2b3e6e;
  }
  dialog.drawer .dialog-content {
    padding-top: 32px;
  }
}
dialog.top {
  margin-top: 16px;
}
dialog.right {
  margin-right: 16px;
}
dialog.bottom {
  margin-bottom: 16px;
}
dialog.left {
  margin-left: 16px;
}
dialog .popup-content {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
}
dialog .card {
  border-radius: 0px;
  border: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  max-width: 400px;
}
dialog .card.horizontal {
  max-width: 800px;
}
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
.tab .tab-item .tab-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #0d6efd;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
  margin-bottom: -1px;
  background: 0 0;
  border: 1px solid rgba(0, 0, 0, 0);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.tab .tab-item .tab-link.active {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
.tab .tab-item .tab-link.disabled {
  color: #6c757d;
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}
.input-container {
  margin-bottom: 1rem;
}
.input-container .message {
  display: block;
  margin-top: 8px;
}
.input-container.error .state,
.input-container.error .message,
.input-container.error label {
  color: #bb0020;
}
.input-container.error .state *,
.input-container.error .message *,
.input-container.error label * {
  color: #bb0020;
}
.input-container.error input[type="text"],
.input-container.error input[type="email"],
.input-container.error input[type="password"],
.input-container.error input[type="number"],
.input-container.error input[type="date"],
.input-container.error input[type="file"],
.input-container.error input[type="search"],
.input-container.error select,
.input-container.error textarea {
  border-color: #bb0020;
}
.input-container.success .state {
  color: green;
}
.input-container.success input[type="text"],
.input-container.success input[type="email"],
.input-container.success input[type="password"],
.input-container.success input[type="number"],
.input-container.success input[type="date"],
.input-container.success input[type="file"],
.input-container.success input[type="search"],
.input-container.success select,
.input-container.success textarea {
  border-color: green;
}
.input-container.icon-left input {
  padding-left: 48px;
}
.input-container.icon-left .input-icon {
  left: 16px;
}
.input-container.icon-right input,
.input-container.icon-right select {
  padding-right: 48px;
}
.input-container.icon-right .input-icon {
  right: 16px;
}
.input-container.icon-right .state {
  right: 48px;
}
.input-container.icon-right .input .input-icon + .input-icon {
  margin-right: 32px;
}
.input-container .icon .icon {
  left: 0;
}
.input-container.dark {
  background-color: #0a1022;
}
label {
  display: block;
  position: relative;
  font-weight: 400;
  margin-bottom: 12px;
  transition: 0.3s ease;
  color: rgba(255, 255, 255, 0.5);
}
.input {
  position: relative;
}
.input .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.input .state {
  right: 16px;
}
.input.floating-label label {
  position: absolute;
  width: 100%;
  padding-left: 16px;
  font-weight: 300;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  margin-bottom: 0;
}
.input.floating-label input {
  height: 64px;
  padding-top: 20px;
}
.input.floating-label input:not(:-moz-placeholder-shown) + label {
  font-size: 12px;
  top: 12px;
  transform: translateY(0);
}
.input.floating-label input:focus + label,
.input.floating-label input:not(:placeholder-shown) + label {
  font-size: 12px;
  top: 12px;
  transform: translateY(0);
}
.input button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  position: relative;
}
.input button .icon {
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
.input button.input-btn {
  border-radius: 8px;
  border: 0.5px solid rgba(93, 141, 234, 0.24);
  background: rgba(80, 118, 163, 0.2);
  box-shadow: 0px 4px 13px 0px rgba(90, 136, 205, 0.06) inset,
    0px 4px 10px 0px rgba(0, 0, 0, 0.21);
  height: 40px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.input button.input-btn .icon {
  position: relative;
  top: 0;
  left: 0 !important;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transform: none;
  margin-left: 8px;
}
.input-icon .icon {
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
input[type="search"],
select,
textarea {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid #293a70;
  border-radius: 12px;
  font-family: "SF Pro Display", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  transition: 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="text"]:focus,
input[type="text"]:hover,
input[type="email"]:focus,
input[type="email"]:hover,
input[type="password"]:focus,
input[type="password"]:hover,
input[type="number"]:focus,
input[type="number"]:hover,
input[type="date"]:focus,
input[type="date"]:hover,
input[type="time"]:focus,
input[type="time"]:hover,
input[type="file"]:focus,
input[type="file"]:hover,
input[type="search"]:focus,
input[type="search"]:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
  border: 1px solid #5d8dea;
}
input[type="text"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
input[type="number"]:-webkit-autofill,
input[type="date"]:-webkit-autofill,
input[type="time"]:-webkit-autofill,
input[type="file"]:-webkit-autofill,
input[type="search"]:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset;
}
::-moz-placeholder {
  color: #8f8f8f;
  font-family: "SF Pro Display", sans-serif;
  font-size: 1rem;
  font-weight: 300;
}
::placeholder {
  color: #8f8f8f;
  font-family: "SF Pro Display", sans-serif;
  font-size: 1rem;
  font-weight: 300;
}
input[type="date"],
input[type="time"] {
  line-height: 48px;
}
::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 0;
}
::-webkit-date-and-time-value {
  text-align: left;
}
.textarea .state {
  top: 16px;
  transform: none;
}
textarea {
  height: 200px;
  resize: none;
  padding: 16px;
}
.select .icon-chevron-down {
  width: 16px;
  height: 16px;
}
.checkbox input {
  display: none;
}
.checkbox input:checked + label:before {
  background: #072c73;
}
.checkbox input:checked + label:after {
  right: 4px;
}
.checkbox label {
  padding-right: 64px;
  font-size: 0.875rem;
  line-height: 1em;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0;
  min-height: 24px;
  line-height: 24px;
}
.checkbox label:before {
  content: "";
  display: block;
  width: 48px;
  height: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(93, 141, 234, 0.2);
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.3s ease;
}
.checkbox label:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 24px;
  background: #5076a3;
  position: absolute;
  right: 26px;
  top: 3px;
  transition: 0.3s ease;
}
.checkbox.error label:before {
  box-shadow: inset 0 0 0 1px #bb0020;
}
.radio input {
  display: none;
}
.radio input:checked + label:before {
  box-shadow: inset 0 0 0 12px #c57b07;
  transition: 0.3s ease;
}
.radio input:checked + label:after {
  transform: scale(1);
  transition: 0.15s 0.3s ease;
}
.radio label {
  padding-left: 40px;
  font-size: 1em;
  line-height: 1.75em;
  font-weight: 300;
  margin-bottom: 0;
}
.radio label:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c2c2c2;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s 0.15s ease;
  box-sizing: border-box;
}
.radio label:after {
  content: "";
  display: block;
  position: absolute;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  top: 6px;
  left: 6px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #c57b07;
  transform: scale(0);
  transform-origin: center;
  transition: 0.15s ease;
}
.radio.error label:before {
  box-shadow: inset 0 0 0 1px #bb0020;
}
table {
  position: relative;
  min-width: 100%;
  width: auto;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 0.75rem;
}
table th {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
table th:first-child {
  text-align: left;
}
table th:last-child {
  text-align: right;
}
table tr {
  width: 100%;
  z-index: 9;
}
table tr td {
  position: relative;
  margin: 0;
  border-spacing: 0;
  font-weight: 400;
  padding: 8px 0;
  text-align: center;
}
table tr td:first-child {
  text-align: left;
}
table tr td:last-child {
  text-align: right;
}
table tr td .fa-check-circle {
  color: #c57b07;
}
table tr td .fa-times-circle {
  color: red;
}
table tr td .fa-ellipsis-v {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
table tr td a {
  cursor: pointer;
}
table tr td.setup {
  position: relative;
  width: 50px;
  text-align: center;
}
table tr td.setup i {
  right: inherit;
}
table tr td.setup .setting-box {
  position: absolute;
  height: 160px;
  width: 160px;
  right: 15px;
  top: 45px;
  transform: translateX(5%);
  box-shadow: 0 30px 30px rgba(0, 4, 8, 0.16);
  z-index: 999;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transition: 0.3s ease;
}
table tr td.setup .setting-box ul {
  display: block;
  height: 160px;
  width: 160px;
  z-index: 999;
  background-color: #fff;
  padding: 16px;
  margin: 0 !important;
  list-style-type: none;
  transition: 0.3s ease;
}
table tr td.setup .setting-box ul li {
  margin-bottom: 12px;
}
table tr td.setup .setting-box ul li a {
  text-decoration: none;
  font-size: 14px;
  color: #6b6b6b;
}
table tr td.setup .setting-box ul li a i {
  padding-right: 16px;
}
table tr td.setup .setting-box ul li:last-child {
  margin: 0;
}
table tr td.setup .setting-box ul li.delete a {
  color: red;
}
table tr td.setup .setting-box.active {
  opacity: 1;
}
table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.04);
}
table tr.delete * {
  opacity: 0.16;
}
table tr.delete .far,
table tr.delete .fas {
  opacity: 1;
}
.table-container {
  width: 100%;
  overflow: auto;
}
h1,
.h1 {
  font-size: clamp(3.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 0;
  font-family: "SF Pro Display", sans-serif;
}
h2,
.h2 {
  font-size: clamp(3rem, 5vw, 3.5rem);
  font-weight: 700;
  margin: 0;
  padding: 0;
  font-family: "SF Pro Display", sans-serif;
}
h3,
.h3 {
  font-size: clamp(2rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  font-family: "SF Pro Display", sans-serif;
}
h4,
.h4 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  font-family: "SF Pro Display", sans-serif;
}
h5,
.h5 {
  font-size: clamp(1.25rem, 5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  font-family: "SF Pro Display", sans-serif;
}
p,
.p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
}
@media (max-width: 576px) {
  p,
  .p {
    font-size: 0.875rem;
  }
}
.lead {
  font-size: clamp(1.125rem, 5vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}
.small {
  font-size: clamp(0.75rem, 5vw, 0.75rem);
  font-weight: 400;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
  opacity: 0.7;
}
.label {
  font-size: clamp(0.75rem, 5vw, 1rem);
  font-weight: 700;
  line-height: 157%;
  margin: 0;
  padding: 0;
}
.title {
  font-size: clamp(4rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 0;
}
.pre-title {
  font-size: clamp(0.5rem, 5vw, 0.5rem);
  font-weight: 400;
  line-height: 1.1em;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  opacity: 0.4;
}
a {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}
a.link {
  font-weight: 700;
  will-change: color;
  white-space: nowrap;
}
a.tx-link {
  font-weight: 400;
  color: #3780ee;
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
ul li {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  color: #102b42;
  position: relative;
}
ol {
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
ol li {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0;
  position: relative;
  margin-left: 1rem;
}
.light-text .title,
.light-text h1,
.light-text .h1,
.light-text h2,
.light-text .h2,
.light-text h3,
.light-text .h3,
.light-text h4,
.light-text .h4,
.light-text h5,
.light-text .h5,
.light-text p,
.light-text span {
  color: #828282;
}
.light-text span strong {
  color: #f4eef7;
}
.dark-text {
  color: #fff;
}
@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../webfonts/SF-Pro-Display-Regular.OTF") format("opentype");
}
@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../webfonts/SF-Pro-Display-Regular.OTF") format("opentype");
}
@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../webfonts/SF-Pro-Display-Medium.OTF") format("opentype");
}
@font-face {
  font-family: "SF Pro Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../webfonts/SF-Pro-Display-Bold.OTF") format("opentype");
}
.avatar {
  border-radius: 100vw;
}
.avatar.lg {
  width: 30px;
  height: 30px;
}
.avatar.md {
  width: 24px;
  height: 24px;
}
.avatar.sm {
  width: 20px;
  height: 20px;
}
.avatar.xs {
  width: 16px;
  height: 16px;
}
.no-m {
  margin: 0 !important;
}
.mc {
  margin: 0 auto;
}
.m-1 {
  margin: 8px !important;
}
.m-2 {
  margin: 16px !important;
}
.m-3 {
  margin: 24px !important;
}
.m-4 {
  margin: 32px !important;
}
.m-5 {
  margin: 40px !important;
}
.m-6 {
  margin: 48px !important;
}
.m-7 {
  margin: 56px !important;
}
.m-8 {
  margin: 64px !important;
}
.m-9 {
  margin: 72px !important;
}
.m-10 {
  margin: 80px !important;
}
.no-mt {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 8px !important;
}
.mt-2 {
  margin-top: 16px !important;
}
.mt-3 {
  margin-top: 24px !important;
}
.mt-4 {
  margin-top: 32px !important;
}
.mt-5 {
  margin-top: 40px !important;
}
.mt-6 {
  margin-top: 48px !important;
}
.mt-7 {
  margin-top: 56px !important;
}
.mt-8 {
  margin-top: 64px !important;
}
.mt-9 {
  margin-top: 72px !important;
}
.mt-10 {
  margin-top: 80px !important;
}
.mt-auto {
  margin-top: auto;
}
.no-mb {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 8px !important;
}
.mb-2 {
  margin-bottom: 16px !important;
}
.mb-3 {
  margin-bottom: 24px !important;
}
.mb-4 {
  margin-bottom: 32px !important;
}
.mb-5 {
  margin-bottom: 40px !important;
}
.mb-6 {
  margin-bottom: 48px !important;
}
.mb-7 {
  margin-bottom: 56px !important;
}
.mb-8 {
  margin-bottom: 64px !important;
}
.mb-9 {
  margin-bottom: 72px !important;
}
.mb-10 {
  margin-bottom: 80px !important;
}
.mb-auto {
  margin-bottom: auto;
}
.no-ml {
  margin-left: 0 !important;
}
.ml-1 {
  margin-left: 8px !important;
}
.ml-2 {
  margin-left: 16px !important;
}
.ml-3 {
  margin-left: 24px !important;
}
.ml-4 {
  margin-left: 32px !important;
}
.ml-5 {
  margin-left: 40px !important;
}
.ml-6 {
  margin-left: 48px !important;
}
.ml-7 {
  margin-left: 56px !important;
}
.ml-8 {
  margin-left: 64px !important;
}
.ml-9 {
  margin-left: 72px !important;
}
.ml-10 {
  margin-left: 80px !important;
}
.ml-auto {
  margin-left: auto;
}
.no-mr {
  margin-right: 0 !important;
}
.mr-1 {
  margin-right: 8px !important;
}
.mr-2 {
  margin-right: 16px !important;
}
.mr-3 {
  margin-right: 24px !important;
}
.mr-4 {
  margin-right: 32px !important;
}
.mr-5 {
  margin-right: 40px !important;
}
.mr-6 {
  margin-right: 48px !important;
}
.mr-7 {
  margin-right: 56px !important;
}
.mr-8 {
  margin-right: 64px !important;
}
.mr-9 {
  margin-right: 72px !important;
}
.mr-10 {
  margin-right: 80px !important;
}
.mr-auto {
  margin-right: auto;
}
.no-my {
  margin: 0 !important;
}
.my-1 {
  margin: 8px 0 !important;
}
.my-2 {
  margin: 16px 0 !important;
}
.my-3 {
  margin: 24px 0 !important;
}
.my-4 {
  margin: 32px 0 !important;
}
.my-5 {
  margin: 40px 0 !important;
}
.my-6 {
  margin: 48px 0 !important;
}
.my-7 {
  margin: 56px 0 !important;
}
.my-8 {
  margin: 64px 0 !important;
}
.my-9 {
  margin: 72px 0 !important;
}
.my-10 {
  margin: 80px 0 !important;
}
.my-auto {
  margin: 0 auto;
}
.no-mx {
  margin: 0 !important;
}
.mx-1 {
  margin: 8px !important;
}
.mx-2 {
  margin: 0 16px !important;
}
.mx-3 {
  margin: 0 24px !important;
}
.mx-4 {
  margin: 0 32px !important;
}
.mx-5 {
  margin: 0 40px !important;
}
.mx-6 {
  margin: 0 48px !important;
}
.mx-7 {
  margin: 0 56px !important;
}
.mx-8 {
  margin: 0 64px !important;
}
.mx-9 {
  margin: 0 72px !important;
}
.mx-10 {
  margin: 0 80px !important;
}
.mx-auto {
  margin: 0 auto;
}
@media (min-width: 577px) {
  .no-m-sm {
    margin: 0 !important;
  }
  .m-sm-1 {
    margin: 8px !important;
  }
  .m-sm-2 {
    margin: 16px !important;
  }
  .m-sm-3 {
    margin: 24px !important;
  }
  .m-sm-4 {
    margin: 32px !important;
  }
  .m-sm-5 {
    margin: 40px !important;
  }
  .m-sm-6 {
    margin: 48px !important;
  }
  .m-sm-7 {
    margin: 56px !important;
  }
  .m-sm-8 {
    margin: 64px !important;
  }
  .m-sm-9 {
    margin: 72px !important;
  }
  .m-sm-10 {
    margin: 80px !important;
  }
  .no-mt-sm {
    margin-top: 0 !important;
  }
  .mt-sm-1 {
    margin-top: 8px !important;
  }
  .mt-sm-2 {
    margin-top: 16px !important;
  }
  .mt-sm-3 {
    margin-top: 24px !important;
  }
  .mt-sm-4 {
    margin-top: 32px !important;
  }
  .mt-sm-5 {
    margin-top: 40px !important;
  }
  .mt-sm-6 {
    margin-top: 48px !important;
  }
  .mt-sm-7 {
    margin-top: 56px !important;
  }
  .mt-sm-8 {
    margin-top: 64px !important;
  }
  .mt-sm-9 {
    margin-top: 72px !important;
  }
  .mt-sm-10 {
    margin-top: 80px !important;
  }
  .no-mb-sm {
    margin-bottom: 0 !important;
  }
  .mb-sm-1 {
    margin-bottom: 8px !important;
  }
  .mb-sm-2 {
    margin-bottom: 16px !important;
  }
  .mb-sm-3 {
    margin-bottom: 24px !important;
  }
  .mb-sm-4 {
    margin-bottom: 32px !important;
  }
  .mb-sm-5 {
    margin-bottom: 40px !important;
  }
  .mb-sm-6 {
    margin-bottom: 48px !important;
  }
  .mb-sm-7 {
    margin-bottom: 56px !important;
  }
  .mb-sm-8 {
    margin-bottom: 64px !important;
  }
  .mb-sm-9 {
    margin-bottom: 72px !important;
  }
  .mb-sm-10 {
    margin-bottom: 80px !important;
  }
  .no-ml-sm {
    margin-left: 0 !important;
  }
  .ml-sm-1 {
    margin-left: 8px !important;
  }
  .ml-sm-2 {
    margin-left: 16px !important;
  }
  .ml-sm-3 {
    margin-left: 24px !important;
  }
  .ml-sm-4 {
    margin-left: 32px !important;
  }
  .ml-sm-5 {
    margin-left: 40px !important;
  }
  .ml-sm-6 {
    margin-left: 48px !important;
  }
  .ml-sm-7 {
    margin-left: 56px !important;
  }
  .ml-sm-8 {
    margin-left: 64px !important;
  }
  .ml-sm-9 {
    margin-left: 72px !important;
  }
  .ml-sm-10 {
    margin-left: 80px !important;
  }
  .no-mr-sm {
    margin-right: 0 !important;
  }
  .mr-sm-1 {
    margin-right: 8px !important;
  }
  .mr-sm-2 {
    margin-right: 16px !important;
  }
  .mr-sm-3 {
    margin-right: 24px !important;
  }
  .mr-sm-4 {
    margin-right: 32px !important;
  }
  .mr-sm-5 {
    margin-right: 40px !important;
  }
  .mr-sm-6 {
    margin-right: 48px !important;
  }
  .mr-sm-7 {
    margin-right: 56px !important;
  }
  .mr-sm-8 {
    margin-right: 64px !important;
  }
  .mr-sm-9 {
    margin-right: 72px !important;
  }
  .mr-sm-10 {
    margin-right: 80px !important;
  }
  .my-sm-1 {
    margin: 8px 0 !important;
  }
  .my-sm-2 {
    margin: 16px 0 !important;
  }
  .my-sm-3 {
    margin: 24px 0 !important;
  }
  .my-sm-4 {
    margin: 32px 0 !important;
  }
  .my-sm-5 {
    margin: 40px 0 !important;
  }
  .my-sm-6 {
    margin: 48px 0 !important;
  }
  .my-sm-7 {
    margin: 56px 0 !important;
  }
  .my-sm-8 {
    margin: 64px 0 !important;
  }
  .my-sm-9 {
    margin: 72px 0 !important;
  }
  .my-sm-10 {
    margin: 80px 0 !important;
  }
  .mx-sm-1 {
    margin: 0 8px !important;
  }
  .mx-sm-2 {
    margin: 0 16px !important;
  }
  .mx-sm-3 {
    margin: 0 24px !important;
  }
  .mx-sm-4 {
    margin: 0 32px !important;
  }
  .mx-sm-5 {
    margin: 0 40px !important;
  }
  .mx-sm-6 {
    margin: 0 48px !important;
  }
  .mx-sm-7 {
    margin: 0 56px !important;
  }
  .mx-sm-8 {
    margin: 0 64px !important;
  }
  .mx-sm-9 {
    margin: 0 72px !important;
  }
  .mx-sm-10 {
    margin: 0 80px !important;
  }
}
@media (min-width: 769px) {
  .no-m-md {
    margin: 0 !important;
  }
  .m-md-1 {
    margin: 8px !important;
  }
  .m-md-2 {
    margin: 16px !important;
  }
  .m-md-3 {
    margin: 24px !important;
  }
  .m-md-4 {
    margin: 32px !important;
  }
  .m-md-5 {
    margin: 40px !important;
  }
  .m-md-6 {
    margin: 48px !important;
  }
  .m-md-7 {
    margin: 56px !important;
  }
  .m-md-8 {
    margin: 64px !important;
  }
  .m-md-9 {
    margin: 72px !important;
  }
  .m-md-10 {
    margin: 80px !important;
  }
  .no-mt-md {
    margin-top: 0 !important;
  }
  .mt-md-1 {
    margin-top: 8px !important;
  }
  .mt-md-2 {
    margin-top: 16px !important;
  }
  .mt-md-3 {
    margin-top: 24px !important;
  }
  .mt-md-4 {
    margin-top: 32px !important;
  }
  .mt-md-5 {
    margin-top: 40px !important;
  }
  .mt-md-6 {
    margin-top: 48px !important;
  }
  .mt-md-7 {
    margin-top: 56px !important;
  }
  .mt-md-8 {
    margin-top: 64px !important;
  }
  .mt-md-9 {
    margin-top: 72px !important;
  }
  .mt-md-10 {
    margin-top: 80px !important;
  }
  .no-mb-md {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: 8px !important;
  }
  .mb-md-2 {
    margin-bottom: 16px !important;
  }
  .mb-md-3 {
    margin-bottom: 24px !important;
  }
  .mb-md-4 {
    margin-bottom: 32px !important;
  }
  .mb-md-5 {
    margin-bottom: 40px !important;
  }
  .mb-md-6 {
    margin-bottom: 48px !important;
  }
  .mb-md-7 {
    margin-bottom: 56px !important;
  }
  .mb-md-8 {
    margin-bottom: 64px !important;
  }
  .mb-md-9 {
    margin-bottom: 72px !important;
  }
  .mb-md-10 {
    margin-bottom: 80px !important;
  }
  .no-m-l-md {
    margin-left: 0 !important;
  }
  .ml-md-1 {
    margin-left: 8px !important;
  }
  .ml-md-2 {
    margin-left: 16px !important;
  }
  .ml-md-3 {
    margin-left: 24px !important;
  }
  .ml-md-4 {
    margin-left: 32px !important;
  }
  .ml-md-5 {
    margin-left: 40px !important;
  }
  .ml-md-6 {
    margin-left: 48px !important;
  }
  .ml-md-7 {
    margin-left: 56px !important;
  }
  .ml-md-8 {
    margin-left: 64px !important;
  }
  .ml-md-9 {
    margin-left: 72px !important;
  }
  .ml-md-10 {
    margin-left: 80px !important;
  }
  .no-mr-md {
    margin-right: 0 !important;
  }
  .mr-md-1 {
    margin-right: 8px !important;
  }
  .mr-md-2 {
    margin-right: 16px !important;
  }
  .mr-md-3 {
    margin-right: 24px !important;
  }
  .mr-md-4 {
    margin-right: 32px !important;
  }
  .mr-md-5 {
    margin-right: 40px !important;
  }
  .mr-md-6 {
    margin-right: 48px !important;
  }
  .mr-md-7 {
    margin-right: 56px !important;
  }
  .mr-md-8 {
    margin-right: 64px !important;
  }
  .mr-md-9 {
    margin-right: 72px !important;
  }
  .mr-md-10 {
    margin-right: 80px !important;
  }
  .my-md-1 {
    margin: 8px 0 !important;
  }
  .my-md-2 {
    margin: 16px 0 !important;
  }
  .my-md-3 {
    margin: 24px 0 !important;
  }
  .my-md-4 {
    margin: 32px 0 !important;
  }
  .my-md-5 {
    margin: 40px 0 !important;
  }
  .my-md-6 {
    margin: 48px 0 !important;
  }
  .my-md-7 {
    margin: 56px 0 !important;
  }
  .my-md-8 {
    margin: 64px 0 !important;
  }
  .my-md-9 {
    margin: 72px 0 !important;
  }
  .my-md-10 {
    margin: 80px 0 !important;
  }
  .mx-md-1 {
    margin: 0 8px !important;
  }
  .mx-md-2 {
    margin: 0 16px !important;
  }
  .mx-md-3 {
    margin: 0 24px !important;
  }
  .mx-md-4 {
    margin: 0 32px !important;
  }
  .mx-md-5 {
    margin: 0 40px !important;
  }
  .mx-md-6 {
    margin: 0 48px !important;
  }
  .mx-md-7 {
    margin: 0 56px !important;
  }
  .mx-md-8 {
    margin: 0 64px !important;
  }
  .mx-md-9 {
    margin: 0 72px !important;
  }
  .mx-md-10 {
    margin: 0 80px !important;
  }
}
@media (min-width: 992px) {
  .no-m-lg {
    margin: 0 !important;
  }
  .m-lg-1 {
    margin: 8px !important;
  }
  .m-lg-2 {
    margin: 16px !important;
  }
  .m-lg-3 {
    margin: 24px !important;
  }
  .m-lg-4 {
    margin: 32px !important;
  }
  .m-lg-5 {
    margin: 40px !important;
  }
  .m-lg-6 {
    margin: 48px !important;
  }
  .m-lg-7 {
    margin: 56px !important;
  }
  .m-lg-8 {
    margin: 64px !important;
  }
  .m-lg-9 {
    margin: 72px !important;
  }
  .m-lg-10 {
    margin: 80px !important;
  }
  .no-mt-lg {
    margin-top: 0 !important;
  }
  .mt-lg-1 {
    margin-top: 8px !important;
  }
  .mt-lg-2 {
    margin-top: 16px !important;
  }
  .mt-lg-3 {
    margin-top: 24px !important;
  }
  .mt-lg-4 {
    margin-top: 32px !important;
  }
  .mt-lg-5 {
    margin-top: 40px !important;
  }
  .mt-lg-6 {
    margin-top: 48px !important;
  }
  .mt-lg-7 {
    margin-top: 56px !important;
  }
  .mt-lg-8 {
    margin-top: 64px !important;
  }
  .mt-lg-9 {
    margin-top: 72px !important;
  }
  .mt-lg-10 {
    margin-top: 80px !important;
  }
  .no-mb-lg {
    margin-bottom: 0 !important;
  }
  .mb-lg-1 {
    margin-bottom: 8px !important;
  }
  .mb-lg-2 {
    margin-bottom: 16px !important;
  }
  .mb-lg-3 {
    margin-bottom: 24px !important;
  }
  .mb-lg-4 {
    margin-bottom: 32px !important;
  }
  .mb-lg-5 {
    margin-bottom: 40px !important;
  }
  .mb-lg-6 {
    margin-bottom: 48px !important;
  }
  .mb-lg-7 {
    margin-bottom: 56px !important;
  }
  .mb-lg-8 {
    margin-bottom: 64px !important;
  }
  .mb-lg-9 {
    margin-bottom: 72px !important;
  }
  .mb-lg-10 {
    margin-bottom: 80px !important;
  }
  .no-ml-lg {
    margin-left: 0 !important;
  }
  .ml-lg-1 {
    margin-left: 8px !important;
  }
  .ml-lg-2 {
    margin-left: 16px !important;
  }
  .ml-lg-3 {
    margin-left: 24px !important;
  }
  .ml-lg-4 {
    margin-left: 32px !important;
  }
  .ml-lg-5 {
    margin-left: 40px !important;
  }
  .ml-lg-6 {
    margin-left: 48px !important;
  }
  .ml-lg-7 {
    margin-left: 56px !important;
  }
  .ml-lg-8 {
    margin-left: 64px !important;
  }
  .ml-lg-9 {
    margin-left: 72px !important;
  }
  .ml-lg-10 {
    margin-left: 80px !important;
  }
  .no-mr-lg {
    margin-right: 0 !important;
  }
  .mr-lg-1 {
    margin-right: 8px !important;
  }
  .mr-lg-2 {
    margin-right: 16px !important;
  }
  .mr-lg-3 {
    margin-right: 24px !important;
  }
  .mr-lg-4 {
    margin-right: 32px !important;
  }
  .mr-lg-5 {
    margin-right: 40px !important;
  }
  .mr-lg-6 {
    margin-right: 48px !important;
  }
  .mr-lg-7 {
    margin-right: 56px !important;
  }
  .mr-lg-8 {
    margin-right: 64px !important;
  }
  .mr-lg-9 {
    margin-right: 72px !important;
  }
  .mr-lg-10 {
    margin-right: 80px !important;
  }
  .my-lg-1 {
    margin: 8px 0 !important;
  }
  .my-lg-2 {
    margin: 16px 0 !important;
  }
  .my-lg-3 {
    margin: 24px 0 !important;
  }
  .my-lg-4 {
    margin: 32px 0 !important;
  }
  .my-lg-5 {
    margin: 40px 0 !important;
  }
  .my-lg-6 {
    margin: 48px 0 !important;
  }
  .my-lg-7 {
    margin: 56px 0 !important;
  }
  .my-lg-8 {
    margin: 64px 0 !important;
  }
  .my-lg-9 {
    margin: 72px 0 !important;
  }
  .my-lg-10 {
    margin: 80px 0 !important;
  }
  .mx-lg-1 {
    margin: 0 8px !important;
  }
  .mx-lg-2 {
    margin: 0 16px !important;
  }
  .mx-lg-3 {
    margin: 0 24px !important;
  }
  .mx-lg-4 {
    margin: 0 32px !important;
  }
  .mx-lg-5 {
    margin: 0 40px !important;
  }
  .mx-lg-6 {
    margin: 0 48px !important;
  }
  .mx-lg-7 {
    margin: 0 56px !important;
  }
  .mx-lg-8 {
    margin: 0 64px !important;
  }
  .mx-lg-9 {
    margin: 0 72px !important;
  }
  .mx-lg-10 {
    margin: 0 80px !important;
  }
}
@media (min-width: 1201px) {
  .no-m-xl {
    margin: 0 !important;
  }
  .m-xl-1 {
    margin: 8px !important;
  }
  .m-xl-2 {
    margin: 16px !important;
  }
  .m-xl-3 {
    margin: 24px !important;
  }
  .m-xl-4 {
    margin: 32px !important;
  }
  .m-xl-5 {
    margin: 40px !important;
  }
  .m-xl-6 {
    margin: 48px !important;
  }
  .m-xl-7 {
    margin: 56px !important;
  }
  .m-xl-8 {
    margin: 64px !important;
  }
  .m-xl-9 {
    margin: 72px !important;
  }
  .m-xl-10 {
    margin: 80px !important;
  }
  .no-mt-xl {
    margin-top: 0 !important;
  }
  .mt-xl-1 {
    margin-top: 8px !important;
  }
  .mt-xl-2 {
    margin-top: 16px !important;
  }
  .mt-xl-3 {
    margin-top: 24px !important;
  }
  .mt-xl-4 {
    margin-top: 32px !important;
  }
  .mt-xl-5 {
    margin-top: 40px !important;
  }
  .mt-xl-6 {
    margin-top: 48px !important;
  }
  .mt-xl-7 {
    margin-top: 56px !important;
  }
  .mt-xl-8 {
    margin-top: 64px !important;
  }
  .mt-xl-9 {
    margin-top: 72px !important;
  }
  .mt-xl-10 {
    margin-top: 80px !important;
  }
  .no-mb-xl {
    margin-bottom: 0 !important;
  }
  .mb-xl-1 {
    margin-bottom: 8px !important;
  }
  .mb-xl-2 {
    margin-bottom: 16px !important;
  }
  .mb-xl-3 {
    margin-bottom: 24px !important;
  }
  .mb-xl-4 {
    margin-bottom: 32px !important;
  }
  .mb-xl-5 {
    margin-bottom: 40px !important;
  }
  .mb-xl-6 {
    margin-bottom: 48px !important;
  }
  .mb-xl-7 {
    margin-bottom: 56px !important;
  }
  .mb-xl-8 {
    margin-bottom: 64px !important;
  }
  .mb-xl-9 {
    margin-bottom: 72px !important;
  }
  .mb-xl-10 {
    margin-bottom: 80px !important;
  }
  .no-ml-xl {
    margin-left: 0 !important;
  }
  .ml-xl-1 {
    margin-left: 8px !important;
  }
  .ml-xl-2 {
    margin-left: 16px !important;
  }
  .ml-xl-3 {
    margin-left: 24px !important;
  }
  .ml-xl-4 {
    margin-left: 32px !important;
  }
  .ml-xl-5 {
    margin-left: 40px !important;
  }
  .ml-xl-6 {
    margin-left: 48px !important;
  }
  .ml-xl-7 {
    margin-left: 56px !important;
  }
  .ml-xl-8 {
    margin-left: 64px !important;
  }
  .ml-xl-9 {
    margin-left: 72px !important;
  }
  .ml-xl-10 {
    margin-left: 80px !important;
  }
  .no-mr-xl {
    margin-right: 0 !important;
  }
  .mr-xl-1 {
    margin-right: 8px !important;
  }
  .mr-xl-2 {
    margin-right: 16px !important;
  }
  .mr-xl-3 {
    margin-right: 24px !important;
  }
  .mr-xl-4 {
    margin-right: 32px !important;
  }
  .mr-xl-5 {
    margin-right: 40px !important;
  }
  .mr-xl-6 {
    margin-right: 48px !important;
  }
  .mr-xl-7 {
    margin-right: 56px !important;
  }
  .mr-xl-8 {
    margin-right: 64px !important;
  }
  .mr-xl-9 {
    margin-right: 72px !important;
  }
  .mr-xl-10 {
    margin-right: 80px !important;
  }
}
.my-xl-1 {
  margin: 8px 0 !important;
}
.my-xl-2 {
  margin: 16px 0 !important;
}
.my-xl-3 {
  margin: 24px 0 !important;
}
.my-xl-4 {
  margin: 32px 0 !important;
}
.my-xl-5 {
  margin: 40px 0 !important;
}
.my-xl-6 {
  margin: 48px 0 !important;
}
.my-xl-7 {
  margin: 56px 0 !important;
}
.my-xl-8 {
  margin: 64px 0 !important;
}
.my-xl-9 {
  margin: 72px 0 !important;
}
.my-xl-10 {
  margin: 80px 0 !important;
}
.mx-xl-1 {
  margin: 0 8px !important;
}
.mx-xl-2 {
  margin: 0 16px !important;
}
.mx-xl-3 {
  margin: 0 24px !important;
}
.mx-xl-4 {
  margin: 0 32px !important;
}
.mx-xl-5 {
  margin: 0 40px !important;
}
.mx-xl-6 {
  margin: 0 48px !important;
}
.mx-xl-7 {
  margin: 0 56px !important;
}
.mx-xl-8 {
  margin: 0 64px !important;
}
.mx-xl-9 {
  margin: 0 72px !important;
}
.mx-xl-10 {
  margin: 0 80px !important;
}
.mt-extra-small {
  margin-top: 8px;
}
.mt-small {
  margin-top: 16px;
}
.mt-medium {
  margin-top: 24px;
}
.mt-large {
  margin-top: 32px;
}
.mt-extra-large {
  margin-top: 40px;
}
@media (min-width: 1200px) {
  .mt-extra-large {
    margin-top: 80px;
  }
}
.mb-extra-small {
  margin-bottom: 8px;
}
.mb-small {
  margin-bottom: 16px;
}
.mb-medium {
  margin-bottom: 24px;
}
.mb-large {
  margin-bottom: 32px;
}
.mb-extra-large {
  margin-bottom: 40px;
}
@media (min-width: 1200px) {
  .mb-extra-large {
    margin-bottom: 80px;
  }
}
.no-p {
  padding: 0 !important;
}
.p-1 {
  padding: 8px !important;
}
.p-2 {
  padding: 16px !important;
}
.p-3 {
  padding: 24px !important;
}
.p-4 {
  padding: 32px !important;
}
.p-5 {
  padding: 40px !important;
}
.p-6 {
  padding: 48px !important;
}
.p-7 {
  padding: 56px !important;
}
.p-8 {
  padding: 64px !important;
}
.p-9 {
  padding: 72px !important;
}
.p-10 {
  padding: 80px !important;
}
.no-pt {
  padding-top: 0 !important;
}
.pt-1 {
  padding-top: 8px !important;
}
.pt-2 {
  padding-top: 16px !important;
}
.pt-3 {
  padding-top: 24px !important;
}
.pt-4 {
  padding-top: 32px !important;
}
.pt-5 {
  padding-top: 40px !important;
}
.pt-6 {
  padding-top: 48px !important;
}
.pt-7 {
  padding-top: 56px !important;
}
.pt-8 {
  padding-top: 64px !important;
}
.pt-9 {
  padding-top: 72px !important;
}
.pt-10 {
  padding-top: 80px !important;
}
.no-pb {
  padding-bottom: 0 !important;
}
.pb-1 {
  padding-bottom: 8px !important;
}
.pb-2 {
  padding-bottom: 16px !important;
}
.pb-3 {
  padding-bottom: 24px !important;
}
.pb-4 {
  padding-bottom: 32px !important;
}
.pb-5 {
  padding-bottom: 40px !important;
}
.pb-6 {
  padding-bottom: 48px !important;
}
.pb-7 {
  padding-bottom: 56px !important;
}
.pb-8 {
  padding-bottom: 64px !important;
}
.pb-9 {
  padding-bottom: 72px !important;
}
.pb-10 {
  padding-bottom: 80px !important;
}
.no-pl {
  padding-left: 0 !important;
}
.pl-1 {
  padding-left: 8px !important;
}
.pl-2 {
  padding-left: 16px !important;
}
.pl-3 {
  padding-left: 24px !important;
}
.pl-4 {
  padding-left: 32px !important;
}
.pl-5 {
  padding-left: 40px !important;
}
.pl-6 {
  padding-left: 48px !important;
}
.pl-7 {
  padding-left: 56px !important;
}
.pl-8 {
  padding-left: 64px !important;
}
.pl-9 {
  padding-left: 72px !important;
}
.pl-10 {
  padding-left: 80px !important;
}
.no-pr {
  padding-right: 0 !important;
}
.pr-1 {
  padding-right: 8px !important;
}
.pr-2 {
  padding-right: 16px !important;
}
.pr-3 {
  padding-right: 24px !important;
}
.pr-4 {
  padding-right: 32px !important;
}
.pr-5 {
  padding-right: 40px !important;
}
.pr-6 {
  padding-right: 48px !important;
}
.pr-7 {
  padding-right: 56px !important;
}
.pr-8 {
  padding-right: 64px !important;
}
.pr-9 {
  padding-right: 72px !important;
}
.pr-10 {
  padding-right: 80px !important;
}
.no-py {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.py-1 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.py-2 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.py-3 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.py-4 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.py-5 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.py-6 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.py-7 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.py-8 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.py-9 {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.py-10 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.no-px {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.px-1 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.px-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.px-3 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.px-4 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.px-5 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.px-6 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
.px-7 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}
.px-8 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
.px-9 {
  padding-left: 72px !important;
  padding-right: 72px !important;
}
.px-10 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}
@media (min-width: 577px) {
  .no-p-sm {
    padding: 0 !important;
  }
  .p-sm-1 {
    padding: 8px !important;
  }
  .p-sm-2 {
    padding: 16px !important;
  }
  .p-sm-3 {
    padding: 24px !important;
  }
  .p-sm-4 {
    padding: 32px !important;
  }
  .p-sm-5 {
    padding: 40px !important;
  }
  .p-sm-6 {
    padding: 48px !important;
  }
  .p-sm-7 {
    padding: 56px !important;
  }
  .p-sm-8 {
    padding: 64px !important;
  }
  .p-sm-9 {
    padding: 72px !important;
  }
  .p-sm-10 {
    padding: 80px !important;
  }
  .no-pt-sm {
    padding-top: 0 !important;
  }
  .pt-sm-1 {
    padding-top: 8px !important;
  }
  .pt-sm-2 {
    padding-top: 16px !important;
  }
  .pt-sm-3 {
    padding-top: 24px !important;
  }
  .pt-sm-4 {
    padding-top: 32px !important;
  }
  .pt-sm-5 {
    padding-top: 40px !important;
  }
  .pt-sm-6 {
    padding-top: 48px !important;
  }
  .pt-sm-7 {
    padding-top: 56px !important;
  }
  .pt-sm-8 {
    padding-top: 64px !important;
  }
  .pt-sm-9 {
    padding-top: 72px !important;
  }
  .pt-sm-10 {
    padding-top: 80px !important;
  }
  .no-pb-sm {
    padding-bottom: 0 !important;
  }
  .pb-sm-1 {
    padding-bottom: 8px !important;
  }
  .pb-sm-2 {
    padding-bottom: 16px !important;
  }
  .pb-sm-3 {
    padding-bottom: 24px !important;
  }
  .pb-sm-4 {
    padding-bottom: 32px !important;
  }
  .pb-sm-5 {
    padding-bottom: 40px !important;
  }
  .pb-sm-6 {
    padding-bottom: 48px !important;
  }
  .pb-sm-7 {
    padding-bottom: 56px !important;
  }
  .pb-sm-8 {
    padding-bottom: 64px !important;
  }
  .pb-sm-9 {
    padding-bottom: 72px !important;
  }
  .pb-sm-10 {
    padding-bottom: 80px !important;
  }
  .no-pl-sm {
    padding-left: 0 !important;
  }
  .pl-sm-1 {
    padding-left: 8px !important;
  }
  .pl-sm-2 {
    padding-left: 16px !important;
  }
  .pl-sm-3 {
    padding-left: 24px !important;
  }
  .pl-sm-4 {
    padding-left: 32px !important;
  }
  .pl-sm-5 {
    padding-left: 40px !important;
  }
  .pl-sm-6 {
    padding-left: 48px !important;
  }
  .pl-sm-7 {
    padding-left: 56px !important;
  }
  .pl-sm-8 {
    padding-left: 64px !important;
  }
  .pl-sm-9 {
    padding-left: 72px !important;
  }
  .pl-sm-10 {
    padding-left: 80px !important;
  }
  .no-pr-sm {
    padding-right: 0 !important;
  }
  .pr-sm-1 {
    padding-right: 8px !important;
  }
  .pr-sm-2 {
    padding-right: 16px !important;
  }
  .pr-sm-3 {
    padding-right: 24px !important;
  }
  .pr-sm-4 {
    padding-right: 32px !important;
  }
  .pr-sm-5 {
    padding-right: 40px !important;
  }
  .pr-sm-6 {
    padding-right: 48px !important;
  }
  .pr-sm-7 {
    padding-right: 56px !important;
  }
  .pr-sm-8 {
    padding-right: 64px !important;
  }
  .pr-sm-9 {
    padding-right: 72px !important;
  }
  .pr-sm-10 {
    padding-right: 80px !important;
  }
  .no-py-sm {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-sm-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .py-sm-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .py-sm-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .py-sm-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .py-sm-5 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .py-sm-6 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .py-sm-7 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .py-sm-8 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .py-sm-9 {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .py-sm-10 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .no-px-sm {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .px-sm-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .px-sm-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .px-sm-3 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .px-sm-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .px-sm-5 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .px-sm-6 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .px-sm-7 {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
  .px-sm-8 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .px-sm-9 {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }
  .px-sm-10 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}
@media (min-width: 769px) {
  .no-p-md {
    padding: 0 !important;
  }
  .p-md-1 {
    padding: 8px !important;
  }
  .p-md-2 {
    padding: 16px !important;
  }
  .p-md-3 {
    padding: 24px !important;
  }
  .p-md-4 {
    padding: 32px !important;
  }
  .p-md-5 {
    padding: 40px !important;
  }
  .p-md-6 {
    padding: 48px !important;
  }
  .p-md-7 {
    padding: 56px !important;
  }
  .p-md-8 {
    padding: 64px !important;
  }
  .p-md-9 {
    padding: 72px !important;
  }
  .p-md-10 {
    padding: 80px !important;
  }
  .no-pt-md {
    padding-top: 0 !important;
  }
  .pt-md-1 {
    padding-top: 8px !important;
  }
  .pt-md-2 {
    padding-top: 16px !important;
  }
  .pt-md-3 {
    padding-top: 24px !important;
  }
  .pt-md-4 {
    padding-top: 32px !important;
  }
  .pt-md-5 {
    padding-top: 40px !important;
  }
  .pt-md-6 {
    padding-top: 48px !important;
  }
  .pt-md-7 {
    padding-top: 56px !important;
  }
  .pt-md-8 {
    padding-top: 64px !important;
  }
  .pt-md-9 {
    padding-top: 72px !important;
  }
  .pt-md-10 {
    padding-top: 80px !important;
  }
  .no-pb-md {
    padding-bottom: 0 !important;
  }
  .pb-md-1 {
    padding-bottom: 8px !important;
  }
  .pb-md-2 {
    padding-bottom: 16px !important;
  }
  .pb-md-3 {
    padding-bottom: 24px !important;
  }
  .pb-md-4 {
    padding-bottom: 32px !important;
  }
  .pb-md-5 {
    padding-bottom: 40px !important;
  }
  .pb-md-6 {
    padding-bottom: 48px !important;
  }
  .pb-md-7 {
    padding-bottom: 56px !important;
  }
  .pb-md-8 {
    padding-bottom: 64px !important;
  }
  .pb-md-9 {
    padding-bottom: 72px !important;
  }
  .pb-md-10 {
    padding-bottom: 80px !important;
  }
  .no-p-l-md {
    padding-left: 0 !important;
  }
  .pl-md-1 {
    padding-left: 8px !important;
  }
  .pl-md-2 {
    padding-left: 16px !important;
  }
  .pl-md-3 {
    padding-left: 24px !important;
  }
  .pl-md-4 {
    padding-left: 32px !important;
  }
  .pl-md-5 {
    padding-left: 40px !important;
  }
  .pl-md-6 {
    padding-left: 48px !important;
  }
  .pl-md-7 {
    padding-left: 56px !important;
  }
  .pl-md-8 {
    padding-left: 64px !important;
  }
  .pl-md-9 {
    padding-left: 72px !important;
  }
  .pl-md-10 {
    padding-left: 80px !important;
  }
  .no-pr-md {
    padding-right: 0 !important;
  }
  .pr-md-1 {
    padding-right: 8px !important;
  }
  .pr-md-2 {
    padding-right: 16px !important;
  }
  .pr-md-3 {
    padding-right: 24px !important;
  }
  .pr-md-4 {
    padding-right: 32px !important;
  }
  .pr-md-5 {
    padding-right: 40px !important;
  }
  .pr-md-6 {
    padding-right: 48px !important;
  }
  .pr-md-7 {
    padding-right: 56px !important;
  }
  .pr-md-8 {
    padding-right: 64px !important;
  }
  .pr-md-9 {
    padding-right: 72px !important;
  }
  .pr-md-10 {
    padding-right: 80px !important;
  }
  .no-py-md {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-md-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .py-md-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .py-md-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .py-md-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .py-md-5 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .py-md-6 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .py-md-7 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .py-md-8 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .py-md-9 {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .py-md-10 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .no-px-md {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .px-md-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .px-md-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .px-md-3 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .px-md-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .px-md-5 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .px-md-6 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .px-md-7 {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
  .px-md-8 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .px-md-9 {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }
  .px-md-10 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}
@media (min-width: 992px) {
  .no-p-lg {
    padding: 0 !important;
  }
  .p-lg-1 {
    padding: 8px !important;
  }
  .p-lg-2 {
    padding: 16px !important;
  }
  .p-lg-3 {
    padding: 24px !important;
  }
  .p-lg-4 {
    padding: 32px !important;
  }
  .p-lg-5 {
    padding: 40px !important;
  }
  .p-lg-6 {
    padding: 48px !important;
  }
  .p-lg-7 {
    padding: 56px !important;
  }
  .p-lg-8 {
    padding: 64px !important;
  }
  .p-lg-9 {
    padding: 72px !important;
  }
  .p-lg-10 {
    padding: 80px !important;
  }
  .no-pt-lg {
    padding-top: 0 !important;
  }
  .pt-lg-1 {
    padding-top: 8px !important;
  }
  .pt-lg-2 {
    padding-top: 16px !important;
  }
  .pt-lg-3 {
    padding-top: 24px !important;
  }
  .pt-lg-4 {
    padding-top: 32px !important;
  }
  .pt-lg-5 {
    padding-top: 40px !important;
  }
  .pt-lg-6 {
    padding-top: 48px !important;
  }
  .pt-lg-7 {
    padding-top: 56px !important;
  }
  .pt-lg-8 {
    padding-top: 64px !important;
  }
  .pt-lg-9 {
    padding-top: 72px !important;
  }
  .pt-lg-10 {
    padding-top: 80px !important;
  }
  .no-pb-lg {
    padding-bottom: 0 !important;
  }
  .pb-lg-1 {
    padding-bottom: 8px !important;
  }
  .pb-lg-2 {
    padding-bottom: 16px !important;
  }
  .pb-lg-3 {
    padding-bottom: 24px !important;
  }
  .pb-lg-4 {
    padding-bottom: 32px !important;
  }
  .pb-lg-5 {
    padding-bottom: 40px !important;
  }
  .pb-lg-6 {
    padding-bottom: 48px !important;
  }
  .pb-lg-7 {
    padding-bottom: 56px !important;
  }
  .pb-lg-8 {
    padding-bottom: 64px !important;
  }
  .pb-lg-9 {
    padding-bottom: 72px !important;
  }
  .pb-lg-10 {
    padding-bottom: 80px !important;
  }
  .no-pl-lg {
    padding-left: 0 !important;
  }
  .pl-lg-1 {
    padding-left: 8px !important;
  }
  .pl-lg-2 {
    padding-left: 16px !important;
  }
  .pl-lg-3 {
    padding-left: 24px !important;
  }
  .pl-lg-4 {
    padding-left: 32px !important;
  }
  .pl-lg-5 {
    padding-left: 40px !important;
  }
  .pl-lg-6 {
    padding-left: 48px !important;
  }
  .pl-lg-7 {
    padding-left: 56px !important;
  }
  .pl-lg-8 {
    padding-left: 64px !important;
  }
  .pl-lg-9 {
    padding-left: 72px !important;
  }
  .pl-lg-10 {
    padding-left: 80px !important;
  }
  .no-pr-lg {
    padding-right: 0 !important;
  }
  .pr-lg-1 {
    padding-right: 8px !important;
  }
  .pr-lg-2 {
    padding-right: 16px !important;
  }
  .pr-lg-3 {
    padding-right: 24px !important;
  }
  .pr-lg-4 {
    padding-right: 32px !important;
  }
  .pr-lg-5 {
    padding-right: 40px !important;
  }
  .pr-lg-6 {
    padding-right: 48px !important;
  }
  .pr-lg-7 {
    padding-right: 56px !important;
  }
  .pr-lg-8 {
    padding-right: 64px !important;
  }
  .pr-lg-9 {
    padding-right: 72px !important;
  }
  .pr-lg-10 {
    padding-right: 80px !important;
  }
  .no-py-lg {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-lg-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .py-lg-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .py-lg-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .py-lg-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .py-lg-5 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .py-lg-6 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .py-lg-7 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .py-lg-8 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .py-lg-9 {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .py-lg-10 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .no-px-lg {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .px-lg-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .px-lg-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .px-lg-3 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .px-lg-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .px-lg-5 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .px-lg-6 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .px-lg-7 {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
  .px-lg-8 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .px-lg-9 {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }
  .px-lg-10 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}
@media (min-width: 1201px) {
  .no-p-xl {
    padding: 0 !important;
  }
  .p-xl-1 {
    padding: 8px !important;
  }
  .p-xl-2 {
    padding: 16px !important;
  }
  .p-xl-3 {
    padding: 24px !important;
  }
  .p-xl-4 {
    padding: 32px !important;
  }
  .p-xl-5 {
    padding: 40px !important;
  }
  .p-xl-6 {
    padding: 48px !important;
  }
  .p-xl-7 {
    padding: 56px !important;
  }
  .p-xl-8 {
    padding: 64px !important;
  }
  .p-xl-9 {
    padding: 72px !important;
  }
  .p-xl-10 {
    padding: 80px !important;
  }
  .no-pt-xl {
    padding-top: 0 !important;
  }
  .pt-xl-1 {
    padding-top: 8px !important;
  }
  .pt-xl-2 {
    padding-top: 16px !important;
  }
  .pt-xl-3 {
    padding-top: 24px !important;
  }
  .pt-xl-4 {
    padding-top: 32px !important;
  }
  .pt-xl-5 {
    padding-top: 40px !important;
  }
  .pt-xl-6 {
    padding-top: 48px !important;
  }
  .pt-xl-7 {
    padding-top: 56px !important;
  }
  .pt-xl-8 {
    padding-top: 64px !important;
  }
  .pt-xl-9 {
    padding-top: 72px !important;
  }
  .pt-xl-10 {
    padding-top: 80px !important;
  }
  .no-pb-xl {
    padding-bottom: 0 !important;
  }
  .pb-xl-1 {
    padding-bottom: 8px !important;
  }
  .pb-xl-2 {
    padding-bottom: 16px !important;
  }
  .pb-xl-3 {
    padding-bottom: 24px !important;
  }
  .pb-xl-4 {
    padding-bottom: 32px !important;
  }
  .pb-xl-5 {
    padding-bottom: 40px !important;
  }
  .pb-xl-6 {
    padding-bottom: 48px !important;
  }
  .pb-xl-7 {
    padding-bottom: 56px !important;
  }
  .pb-xl-8 {
    padding-bottom: 64px !important;
  }
  .pb-xl-9 {
    padding-bottom: 72px !important;
  }
  .pb-xl-10 {
    padding-bottom: 80px !important;
  }
  .no-pl-xl {
    padding-left: 0 !important;
  }
  .pl-xl-1 {
    padding-left: 8px !important;
  }
  .pl-xl-2 {
    padding-left: 16px !important;
  }
  .pl-xl-3 {
    padding-left: 24px !important;
  }
  .pl-xl-4 {
    padding-left: 32px !important;
  }
  .pl-xl-5 {
    padding-left: 40px !important;
  }
  .pl-xl-6 {
    padding-left: 48px !important;
  }
  .pl-xl-7 {
    padding-left: 56px !important;
  }
  .pl-xl-8 {
    padding-left: 64px !important;
  }
  .pl-xl-9 {
    padding-left: 72px !important;
  }
  .pl-xl-10 {
    padding-left: 80px !important;
  }
  .no-pr-xl {
    padding-right: 0 !important;
  }
  .pr-xl-1 {
    padding-right: 8px !important;
  }
  .pr-xl-2 {
    padding-right: 16px !important;
  }
  .pr-xl-3 {
    padding-right: 24px !important;
  }
  .pr-xl-4 {
    padding-right: 32px !important;
  }
  .pr-xl-5 {
    padding-right: 40px !important;
  }
  .pr-xl-6 {
    padding-right: 48px !important;
  }
  .pr-xl-7 {
    padding-right: 56px !important;
  }
  .pr-xl-8 {
    padding-right: 64px !important;
  }
  .pr-xl-9 {
    padding-right: 72px !important;
  }
  .pr-xl-10 {
    padding-right: 80px !important;
  }
  .no-py-xl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xl-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .py-xl-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .py-xl-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .py-xl-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .py-xl-5 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .py-xl-6 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .py-xl-7 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .py-xl-8 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .py-xl-9 {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  .py-xl-10 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .no-px-xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .px-xl-1 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .px-xl-2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .px-xl-3 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .px-xl-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .px-xl-5 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .px-xl-6 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .px-xl-7 {
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
  .px-xl-8 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .px-xl-9 {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }
  .px-xl-10 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}
.text-center {
  text-align: center;
}
.text-center img {
  margin: 0 auto;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.d-flex {
  display: flex;
  flex-wrap: wrap;
}
.d-flex-column {
  display: flex;
  flex-direction: column;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.align-start {
  align-items: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.absolute-centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.absolute-centered-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.absolute-centered-y {
  top: 0%;
  transform: translateY(-50%);
}
@media (min-width: 577px) {
  .d-flex-sm {
    display: flex;
  }
  .d-flex-column-sm {
    display: flex;
    flex-direction: column;
  }
  .align-center-sm {
    align-items: center;
  }
  .align-end-sm {
    align-items: end;
  }
  .align-start-sm {
    align-items: start;
  }
  .justify-center-sm {
    justify-content: center;
  }
  .justify-start-sm {
    justify-content: start;
  }
  .justify-end-sm {
    justify-content: end;
  }
}
@media (min-width: 769px) {
  .d-flex-md {
    display: flex;
  }
  .d-flex-column-md {
    display: flex;
    flex-direction: column;
  }
  .align-center-md {
    align-items: center;
  }
  .align-end-md {
    align-items: end;
  }
  .align-start-md {
    align-items: start;
  }
  .justify-center-md {
    justify-content: center;
  }
  .justify-start-md {
    justify-content: start;
  }
  .justify-end-md {
    justify-content: end;
  }
}
@media (min-width: 992px) {
  .d-flex-lg {
    display: flex;
  }
  .d-flex-column-lg {
    display: flex;
    flex-direction: column;
  }
  .align-center-lg {
    align-items: center;
  }
  .align-end-lg {
    align-items: end;
  }
  .align-start-lg {
    align-items: start;
  }
  .justify-center-lg {
    justify-content: center;
  }
  .justify-start-lg {
    justify-content: start;
  }
  .justify-end-lg {
    justify-content: end;
  }
}
@media (min-width: 1201px) {
  .d-flex-xl {
    display: flex;
  }
  .d-flex-column-xl {
    display: flex;
    flex-direction: column;
  }
  .align-center-xl {
    align-items: center;
  }
  .align-end-xl {
    align-items: end;
  }
  .align-start-xl {
    align-items: start;
  }
  .justify-center-xl {
    justify-content: center;
  }
  .justify-start-xl {
    justify-content: start;
  }
  .justify-end-xl {
    justify-content: end;
  }
}
.d-none {
  display: none !important;
}
@media (max-width: 576px) {
  .d-xs-none {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .d-sm-none {
    display: none !important;
  }
}
@media (max-width: 1291px) {
  .d-md-none {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }
}
@media (max-width: 576px) {
  .d-xs-block {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .d-sm-block {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .d-sm-flex {
    display: flex !important;
  }
}
@media (max-width: 1291px) {
  .d-md-block {
    display: block !important;
  }
}
.overflow-visible {
  overflow: visible;
}
.overflow-hidden {
  overflow: hidden;
}
.vw100 {
  width: 100vw !important;
}
.vh100 {
  height: 100vh !important;
}
@media (max-width: 768px) {
  .vh100 {
    height: calc(100vh - 80px) !important;
  }
}
.h-100 {
  height: 100% !important;
}
.w-100 {
  width: 100% !important;
}
.ar-4\:3 {
  aspect-ratio: 4/3;
}
.ar-16\:9 {
  aspect-ratio: 16/9;
}
.ar-5\:8 {
  aspect-ratio: 5/8;
}
.r-1 {
  border-radius: 8px;
}
.r-2 {
  border-radius: 16px;
}
.r-3 {
  border-radius: 24px;
}
.r-4 {
  border-radius: 32px;
}
.r-5 {
  border-radius: 40px;
}
.r-6 {
  border-radius: 48px;
}
.r-7 {
  border-radius: 56px;
}
.r-8 {
  border-radius: 64px;
}
.r-9 {
  border-radius: 72px;
}
.r-10 {
  border-radius: 80px;
}
.r-full {
  border-radius: 100vw;
}
.r-tl-1 {
  border-top-left-radius: 8px;
}
.r-tl-2 {
  border-top-left-radius: 16px;
}
.r-tl-3 {
  border-top-left-radius: 24px;
}
.r-tl-4 {
  border-top-left-radius: 32px;
}
.r-tl-5 {
  border-top-left-radius: 40px;
}
.r-tl-6 {
  border-top-left-radius: 48px;
}
.r-tl-7 {
  border-top-left-radius: 56px;
}
.r-tl-8 {
  border-top-left-radius: 64px;
}
.r-tl-9 {
  border-top-left-radius: 72px;
}
.r-tl-10 {
  border-top-left-radius: 80px;
}
.r-tr-1 {
  border-top-right-radius: 8px;
}
.r-tr-2 {
  border-top-right-radius: 16px;
}
.r-tr-3 {
  border-top-right-radius: 24px;
}
.r-tr-4 {
  border-top-right-radius: 32px;
}
.r-tr-5 {
  border-top-right-radius: 40px;
}
.r-tr-6 {
  border-top-right-radius: 48px;
}
.r-tr-7 {
  border-top-right-radius: 56px;
}
.r-tr-8 {
  border-top-right-radius: 64px;
}
.r-tr-9 {
  border-top-right-radius: 72px;
}
.r-tr-10 {
  border-top-right-radius: 80px;
}
.r-bl-1 {
  border-bottom-left-radius: 8px;
}
.r-bl-2 {
  border-bottom-left-radius: 16px;
}
.r-bl-3 {
  border-bottom-left-radius: 24px;
}
.r-bl-4 {
  border-bottom-left-radius: 32px;
}
.r-bl-5 {
  border-bottom-left-radius: 40px;
}
.r-bl-6 {
  border-bottom-left-radius: 48px;
}
.r-bl-7 {
  border-bottom-left-radius: 56px;
}
.r-bl-8 {
  border-bottom-left-radius: 64px;
}
.r-bl-9 {
  border-bottom-left-radius: 72px;
}
.r-bl-10 {
  border-bottom-left-radius: 80px;
}
.r-br-1 {
  border-bottom-right-radius: 8px;
}
.r-br-2 {
  border-bottom-right-radius: 16px;
}
.r-br-3 {
  border-bottom-right-radius: 24px;
}
.r-br-4 {
  border-bottom-right-radius: 32px;
}
.r-br-5 {
  border-bottom-right-radius: 40px;
}
.r-br-6 {
  border-bottom-right-radius: 48px;
}
.r-br-7 {
  border-bottom-right-radius: 56px;
}
.r-br-8 {
  border-bottom-right-radius: 64px;
}
.r-br-9 {
  border-bottom-right-radius: 72px;
}
.r-br-10 {
  border-bottom-right-radius: 80px;
}
.no-g {
  gap: 0;
}
.g-1 {
  gap: 8px;
}
.g-2 {
  gap: 16px;
}
.g-3 {
  gap: 24px;
}
.g-4 {
  gap: 32px;
}
.g-5 {
  gap: 40px;
}
.g-6 {
  gap: 48px;
}
.g-7 {
  gap: 56px;
}
.g-8 {
  gap: 64px;
}
.g-9 {
  gap: 72px;
}
.g-10 {
  gap: 80px;
}
.relative {
  position: relative;
}
.z--1 {
  z-index: -1;
}
.z-1 {
  z-index: 100;
}
.z-2 {
  z-index: 200;
}
.z-3 {
  z-index: 300;
}
.z-4 {
  z-index: 400;
}
.z-5 {
  z-index: 500;
}
.z-6 {
  z-index: 600;
}
.z-7 {
  z-index: 700;
}
.z-8 {
  z-index: 800;
}
.z-9 {
  z-index: 900;
}
.z-10 {
  z-index: 1000;
}
@keyframes pulseSmall {
  0% {
    inset: 0;
    filter: blur(2px);
  }
  50% {
    inset: -4px;
    filter: blur(4px);
  }
  100% {
    inset: 0;
    filter: blur(2px);
  }
}
@keyframes pulseMedium {
  0% {
    filter: blur(5px);
  }
  50% {
    filter: blur(7px);
  }
  100% {
    filter: blur(5px);
  }
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(20px);
  }
  15% {
    transform: translateX(-20px);
  }
  30% {
    transform: translateX(8px);
  }
  40% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes easyShake {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(6px);
  }
  15% {
    transform: translateX(-6px);
  }
  30% {
    transform: translateX(3px);
  }
  40% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes digitFlip {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-100%);
    opacity: 0;
  }
  51% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.green-highlight {
  font-weight: 600;
  color: #30ff38;
}
.glow {
  position: relative;
}
.glow:after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  animation: pulseMedium 1s ease-in-out infinite;
  opacity: 0.4;
}
.glow.yellow:after {
  background-color: #fff620;
}
.dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100vw;
  position: absolute;
  top: -3px;
  right: 2px;
  z-index: 10;
}
.dot:before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 100vw;
  filter: blur(2px);
  animation: pulseSmall 1s ease-in-out infinite;
  opacity: 0.8;
}
.dot.green {
  background-color: #30ff38;
  background-image: linear-gradient(180deg, #39ff4d 0%, #2c9009 100%);
}
.dot.green:before {
  background-color: #30ff38;
}
.counter {
  display: flex;
  position: relative;
  overflow: hidden;
}
.counter .digit {
  display: block;
  position: relative;
  transition: transform 0.3s ease;
}
.counter .digit.animate {
  animation: digitFlip 0.3s ease-out;
}
.progress-bar {
  height: 8px;
  width: 100%;
  background-color: rgba(244, 238, 247, 0.1);
  border-radius: 100vw;
  position: relative;
}
.progress-bar:after {
  content: "";
  position: absolute;
  border-radius: 100vw;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.44),
      rgba(102, 102, 102, 0.4)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.progress-bar:before {
  content: "";
  display: block;
  height: 100%;
  width: var(--progress);
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(90deg, #9250ff -32.95%, #54b7ff 110.14%);
  border-radius: 100vw;
  transition: 0.3s ease-in-out;
}
.dark-gradient {
  background: linear-gradient(180deg, #273355 0%, #152247 100%);
}
.tasks {
  width: 100%;
}
.task.active {
  background: #f4eef7;
  color: rgba(0, 0, 0, 0.7);
  animation: shake 1s ease-in-out infinite;
}
.shake {
  animation: easyShake 1s ease-in-out infinite;
}
.tabs {
  display: flex;
  flex: auto;
  align-items: stretch;
  justify-content: space-evenly;
  padding: 2px;
  width: 100%;
  position: relative;
  border-radius: 12px;
  background-color: rgba(244, 238, 247, 0.1);
  max-height: 44px;
}
.tabs:after {
  content: "";
  position: absolute;
  border-radius: 12px;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.44),
      rgba(102, 102, 102, 0.4)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.tabs li {
  position: relative;
  margin: 0;
  height: 100%;
  flex-grow: 1;
  height: 40px;
}
.tabs li img {
  height: 26px;
}
.tabs li a {
  font-weight: 400;
  color: #e3cccc;
  font-size: 0.75rem;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
  letter-spacing: -0.4px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  height: 40px;
  line-height: 40px;
}
.tabs li a * {
  position: relative;
  z-index: 1;
}
.tabs li a.active {
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.2);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.2) 0%,
    transparent 64%
  );
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: -15px -5px;
  color: #fff;
}
.tabs li a.active:after {
  content: "";
  position: absolute;
  border-radius: 10px;
  inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.4),
      rgba(241, 241, 241, 0.1)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}


#ads li a.active:after {
    border: 2.1px solid #5d8dea;

}


.tabs li a.active:before {
  content: "";
  position: absolute;
  display: block;
  width: 64px;
  height: 35px;
  border-radius: 100vw;
  filter: blur(12px);
  background-image: linear-gradient(130deg, #313afc, #c622ff);
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.tabs li:hover .sub-menu {
  opacity: 1;
  transform: scale(1);
}
.tabs.styled {
  height: 80px;
  max-height: 80px;
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
  gap: 8px;
}
.tabs.styled:after {
  display: none;
}
.tabs.styled li {
  height: 80px;
}
.tabs.styled li a {
  height: 80px;
  line-height: 1rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  border: 0.5px solid rgba(93, 141, 234, 0.24);
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 13px 0px rgba(90, 136, 205, 0.06) inset,
    0px 4px 10px 0px rgba(0, 0, 0, 0.21);
}

.tabs.styled .icon:before {
  background-color: #4696e3;
}
.subcategories {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 -24px;
  padding: 0 24px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  height: 40px;
}
.subcategories::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}
.subcategories li .badge {
  padding: 0 16px;
  border-radius: 12px;
  background: #0a1022;
  font-size: 0.875rem;
  line-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
}
.subcategories li .badge:after,
.subcategories li .badge:before {
  display: none;
}
.subcategories li .badge.active:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 12px;
  inset: 0;
  border: 2.1px solid #5d8dea; /* Hex code for purple */
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.44),
      rgba(102, 102, 102, 0.4)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.subcategories li .badge .icon {
  width: 22px;
  height: 22px;
}
.subcategories li .badge .icon:before {
  background-color: #4f6098;
}
.dropdown {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0d162e;
  border-radius: 12px;
  min-width: 160px;
  z-index: 100;
  right: 0;
  top: 100%;
  border: 1px solid #263255;
}
.dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-size: 0.875rem;
  padding: 0 16px;
  line-height: 48px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}
.dropdown .dropdown-item:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #263255;
  position: absolute;
  bottom: 0;
  left: 0;
}
.dropdown .dropdown-item:last-child:after {
  display: none;
}
.dropdown .dropdown-item.selected {
  font-weight: 700;
  color: #fff;
}
.blue-border {
  position: relative;
}
.blue-border:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 16px;
  background: linear-gradient(135deg, #2138b4 0%, #5d8dea 39%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
aside {
  width: 240px;
  position: fixed;
  top: 0;
  left: 246px;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}
aside nav {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  flex-flow: column;
  gap: 8px;
  padding: 8px;
  height: auto;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
aside nav:after,
aside nav:before {
  display: none;
}
aside nav .menu {
  display: flex;
  flex-flow: column;
  gap: 8px;
}
aside nav .menu li {
  flex-basis: 40px;
}
aside nav .menu li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px;
  font-size: 0.875rem;
}
aside .avatar-dropdown .dropdown,
aside .settings-dropdown .dropdown {
  bottom: inherit;
  right: inherit;
  top: -16px;
  left: 0;
  transform: translateY(-100%);
}
@media (max-width: 1291px) {
  aside {
    left: 0;
  }
}
@media (min-width: 1291px) {
  .info-box {
    position: relative;
    background: linear-gradient(180deg, #273355 0%, #152247 100%);
  }
  .info-box:after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 16px;
    background: linear-gradient(135deg, #2138b4 0%, #5d8dea 39%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}



.balance {
  width: calc(100% + 48px);
  position: sticky;
  top: -16px;
  z-index: 100;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
@media (min-width: 768px) {
  .balance {
  width: 350px;
    border-radius: 16px;
  position: sticky;
  top: -16px;
  z-index: 100;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  }
}/*# sourceMappingURL=main.css.map */



.gradient-button {
background: linear-gradient(271deg, #05E1FF -1.82%, #C215FF 102.56%);
box-shadow:
0px -2px 5px 0px rgba(249, 175, 255, 0.30) inset, 
0px 2px 4.8px 0px rgba(249, 175, 255, 0.50) inset;
transition: all 0.3s ease-in-out;
  border-radius: 10px;
  color: #fff;
    flex: 1;
}
.gradient-button::before {
display: inline-flex;
height: 50px;
padding: 19px 131px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.gradient-button:hover,
.gradient-button:focus {
box-shadow: 0px -1px 12px 0px rgba(139, 133, 255, 0.50), 
0px 1px 12px 0px #8B85FF, 
0px -2px 5px 0px rgba(249, 175, 255, 0.30) inset, 
0px 2px 4.8px 0px rgba(249, 175, 255, 0.50) inset, 
0px -15px 20.4px 0px rgba(111, 58, 239, 0.80) inset;
}




.wallet-deposit {
background: linear-gradient(271deg, #05E1FF -1.82%, #C215FF 102.56%);
box-shadow: 0px -2px 5px 0px rgba(249, 175, 255, 0.30) inset, 0px 2px 4.8px 0px rgba(249, 175, 255, 0.50) inset;
  color: #fff;
    flex: 1;
}
.wallet-deposit::before {
display: flex;
height: 33px;
padding: 19px 12px;
justify-content: center;
align-items: center;
gap: 10px;
flex: 1 0 0;
}
.wallet-deposit:hover,
.wallet-deposit:focus {
border-radius: 10px;
background: linear-gradient(271deg, #05E1FF -1.82%, #C215FF 102.56%);
box-shadow: 0px 1px 12px 0px #8B85FF, 0px -2px 5px 0px rgba(249, 175, 255, 0.30) inset, 0px 2px 4.8px 0px rgba(249, 175, 255, 0.50) inset;
}


.wallet-withdraw {
border-radius: 10px;
background: radial-gradient(43.01% 53.8% at 0% 6.9%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(255, 255, 255, 0.10);
    flex: 1;
}
.wallet-withdraw::before {
display: flex;
height: 33px;
padding: 10px 24px;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
.wallet-withdraw:hover,
.wallet-withdraw:focus {
border-radius: 10px;
border: 0.5px solid #FFF;
background: radial-gradient(43.01% 53.8% at 0% 6.9%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(255, 255, 255, 0.10);
backdrop-filter: blur(25px);
}





.btn-second {
border-radius: 12px;
border: 1px solid #A90DCE;
}
.btn-second::before {
display: flex;
width: 295px;
height: 50px;
padding: 2px;
justify-content: center;
align-items: center;
gap: 1px;
flex-shrink: 0;
}
.btn-second:hover,
.btn-second:focus {
border-radius: 12px;
border: 1px solid #A90DCE;
backdrop-filter: blur(30px);
}



#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


body{background-color:#060a25;background-image:linear-gradient(to bottom,#0b1035,#11183e)}main:before{background:linear-gradient(223deg,rgba(106,67,191,.4) 15.96%,rgba(85,122,246,.4) 41.33%,rgba(169,83,255,.4) 66.7%,rgba(169,83,255,.4) 97.8%);filter:blur(120px)}main:after{background:linear-gradient(#a953ff 0%,rgba(169,83,255,0) 15%) border-box}
.tasks{width:100%}.tasks>.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:4px;width:100%;min-height:46px;max-height:none;margin-top:16px;padding:4px;border:1px solid rgba(191,193,247,.28);border-radius:20px;overflow:hidden;background:linear-gradient(90deg,#373e76,#292f65);box-shadow:none;}.tasks>.tabs:after{display:none!important}.tasks>.tabs li{position:relative;min-width:0;height:auto;margin:0;padding:0}.tasks>.tabs li a{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:36px;height:100%;margin:0;padding:9px 5px;border:0;border-radius:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#afb5d4;background:transparent;font-size:13px;font-weight:400;line-height:1.1;letter-spacing:-.4px;text-align:center;box-shadow:none;}.tasks>.tabs li a.active{color:#fff;background:linear-gradient(180deg,#7379b2,#535a91);box-shadow:0 2px 8px rgba(3,6,28,.25);font-weight:400;}.tasks>.tabs li a.active:before,.tasks>.tabs li a.active:after{display:none!important}@media (hover:hover) and (pointer:fine){}@media (max-width:390px){.tasks>.tabs li a{font-size:11px}}





























@media (hover:hover) and (pointer:fine){
  
}
@media (max-width:390px){
  
  
  
  
  
  
  
  
}


/* Compact promoted social cards — no advertiser profile row */












@media (max-width:390px){
  
  
  
  
  
}





















@media (hover:hover) and (pointer:fine){
  
}

@media (max-width:390px){
  
  
  
  
  
  
  
  
}

























@keyframes cb-promoted-dot-pulse{
  0%,100%{
    opacity:.82;
    transform:scale(1);
    box-shadow:0 0 7px rgba(var(--card-accent),.42);
  }
  50%{
    opacity:1;
    transform:scale(1.18);
    box-shadow:0 0 12px rgba(var(--card-accent),.70);
  }
}

@media (hover:hover) and (pointer:fine){
  

  

  

  

  

  

  

  

  

  
}





@media (hover:none),(pointer:coarse){
  
}

@media (prefers-reduced-motion:reduce){
  

  
}


/* Expanded task platform rail — preserves original v4 colours */
.tasks>.tabs{
  display:flex;
  grid-template-columns:none;
  align-items:stretch;
  gap:4px;
  width:100%;
  min-height:46px;
  padding:4px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tasks>.tabs::-webkit-scrollbar{display:none}
.tasks>.tabs li{
  flex:0 0 auto;
  scroll-snap-align:center;
}
.tasks>.tabs li a{
  width:auto;
  min-width:78px;
  min-height:36px;
  padding:9px 12px;
}
.tasks>.tabs li:first-child a{min-width:84px}
.tasks>.tabs li a[data-filter="instagram"]{min-width:88px}
.tasks>.tabs li a[data-filter="facebook"]{min-width:86px}
.tasks>.tabs li a[data-filter="web"]{min-width:86px}








@media (max-width:390px){
  .tasks>.tabs li a{
    min-width:74px;
    padding-left:10px;
    padding-right:10px;
    font-size:11px;
  }
  .tasks>.tabs li:first-child a{min-width:80px}
  .tasks>.tabs li a[data-filter="instagram"]{min-width:84px}
}


/* Robust task-filter shell
   Outer shell owns the visual inset.
   Inner .tabs rail only handles scrolling.
   This keeps all four sides equal regardless of tab count. */
.tasks>.task-tabs-shell{
  box-sizing:border-box;
  width:100%;
  height:46px;
  min-height:46px;
  padding:4px;
  border:1px solid rgba(191,193,247,.28);
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(90deg,#373e76,#292f65);
  box-shadow:none;
}

.tasks>.task-tabs-shell>.tabs{
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  gap:4px;
  width:100%;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow-x:auto;
  overflow-y:hidden;
  background:transparent;
  box-shadow:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.tasks>.task-tabs-shell>.tabs::-webkit-scrollbar{
  display:none;
}

.tasks>.task-tabs-shell>.tabs>li{
  box-sizing:border-box;
  position:relative;
  flex:1 0 78px;
  min-width:78px;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0;
  scroll-snap-align:center;
}

.tasks>.task-tabs-shell>.tabs>li>a,
.tasks>.task-tabs-shell>.tabs>li:first-child>a,
.tasks>.task-tabs-shell>.tabs>li>a[data-filter="instagram"],
.tasks>.task-tabs-shell>.tabs>li>a[data-filter="facebook"],
.tasks>.task-tabs-shell>.tabs>li>a[data-filter="web"]{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0 11px;
  border:0;
  border-radius:16px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#afb5d4;
  background:transparent;
  font-size:11px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.4px;
  text-align:center;
  box-shadow:none;
}

.tasks>.task-tabs-shell>.tabs>li>a.active{
  color:#fff;
  background:linear-gradient(180deg,#7379b2,#535a91);
  box-shadow:0 2px 8px rgba(3,6,28,.25);
  font-weight:400;
}

.tasks>.task-tabs-shell>.tabs>li>a.active:before,
.tasks>.task-tabs-shell>.tabs>li>a.active:after{
  display:none!important;
}

/* With fewer tabs, flex-grow distributes the free width evenly.
   With more tabs, 78px is the minimum and the inner rail scrolls.
   No tab-count-specific widths are required. */
@media (min-width:480px){
  .tasks>.task-tabs-shell>.tabs>li{
    flex-basis:84px;
    min-width:84px;
  }
  .tasks>.task-tabs-shell>.tabs>li>a{
    font-size:12px;
    padding-left:12px;
    padding-right:12px;
  }
}


/* True equal task-rail edge spacing
   Use real flex spacers at both scroll ends so edge gaps survive scrolling. */
.tasks>.task-tabs-shell{
  box-sizing:border-box;
  width:100%;
  height:46px;
  min-height:46px;
  padding:4px 0;
  border:1px solid rgba(191,193,247,.28);
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(90deg,#373e76,#292f65);
}

.tasks>.task-tabs-shell>.tabs{
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  gap:4px;
  width:100%;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0;
  border:0;
  overflow-x:auto;
  overflow-y:hidden;
  background:transparent;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.tasks>.task-tabs-shell>.tabs::-webkit-scrollbar{
  display:none;
}

/* These are real scrollable 4px gutters, so the first and last tab
   always keep the same 4px inset as top/bottom. */
.tasks>.task-tabs-shell>.tabs::before,
.tasks>.task-tabs-shell>.tabs::after{
  content:"";
  display:block;
  flex:0 0 4px;
  width:4px;
  min-width:4px;
  height:36px;
  pointer-events:none;
}

.tasks>.task-tabs-shell>.tabs>li{
  box-sizing:border-box;
  flex:1 0 78px;
  min-width:78px;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0;
}

.tasks>.task-tabs-shell>.tabs>li>a{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0 11px;
  border-radius:16px;
}


/* Remove inherited legacy .tabs:after visual artifact from end spacers */
.tasks>.task-tabs-shell>.tabs::before,
.tasks>.task-tabs-shell>.tabs::after{
  position:relative;
  inset:auto;
  border:0;
  border-radius:0;
  background:none;
  -webkit-mask:none;
  mask:none;
  -webkit-mask-composite:initial;
  mask-composite:initial;
  box-shadow:none;
}


/* Discord + Facebook card colour refinement only */













/* Apps card colour — premium emerald/cyan + violet on ClickBee indigo */





/* Apps card colour — luxury aurora */









/* Equal premium effect treatment for every promoted task card.
   Platform-specific colours remain unchanged; this only normalizes depth/effects. */


















/* Apps keeps its existing unique colour recipe; only the shared depth system above applies. */
@media (hover:hover) and (pointer:fine){
  

  

  

  

  

  
}

@media (prefers-reduced-motion:reduce){
  
}


/* Apps normalization — keep Apps colours, remove extra lower shading */


/* Use the same shared component treatment as every other platform card */










/* Keep Apps identity in the label only */





/* Platform colour variables only */










/* Exact same card recipe for every platform */


/* Same top sheen */


/* Same vertical accent glow */


/* Same Promoted chip */


/* Same platform chip */


/* Same platform mark treatment */


/* Same promoted dot */


/* Same action pill */


/* Same action icon */


/* Same footer separator */


/* Same reward treatment */




/* Exact same hover recipe */
@media (hover:hover) and (pointer:fine){
  

  

  

  

  

  

  

  
}

/* Exact same pressed state */


/* Consistent reduced-motion behavior */
@media (prefers-reduced-motion:reduce){
  
}




/* Preserve platform identities through variables only */










/* Exact YouTube-style shell for all */


/* YouTube-style top sheen */


/* YouTube-style side glow */


/* YouTube-style promoted/platform chips */








/* YouTube-style footer/action/reward */










/* Exact YouTube-style hover/press for all */
@media (hover:hover) and (pointer:fine){
  

  

  
}




/* Premium task filter menu with scroll hint on small screens */
.tasks>.task-tabs-shell{
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:50px;
  min-height:50px;
  padding:4px 0;
  border:1px solid rgba(194,202,255,.12);
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(110% 180% at 100% 0%, rgba(120,112,255,.11) 0%, rgba(120,112,255,0) 54%),
    linear-gradient(145deg, rgba(57,64,121,.98), rgba(38,46,102,.98) 58%, rgba(31,37,86,.98));
  box-shadow:
    0 12px 28px rgba(2,5,26,.18),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(8,11,34,.22);
}

.tasks>.task-tabs-shell:before{
  content:"";
  position:absolute;
  top:0;
  left:9%;
  width:82%;
  height:1px;
  opacity:.92;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.12) 22%,
      rgba(154,166,255,.22) 50%,
      rgba(255,255,255,.12) 78%,
      transparent
    );
  pointer-events:none;
}

.tasks>.task-tabs-shell>.tabs{
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  gap:4px;
  width:100%;
  height:42px;
  min-height:42px;
  margin:0;
  padding:0;
  border:0;
  overflow-x:auto;
  overflow-y:hidden;
  background:transparent;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}

.tasks>.task-tabs-shell>.tabs::-webkit-scrollbar{
  display:none;
}

/* Keep the equal end spacing, but invisible */
.tasks>.task-tabs-shell>.tabs::before,
.tasks>.task-tabs-shell>.tabs::after{
  content:"";
  display:block;
  flex:0 0 4px;
  width:4px;
  min-width:4px;
  height:42px;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none;
}

/* Desktop / larger phones */
.tasks>.task-tabs-shell>.tabs>li{
  box-sizing:border-box;
  flex:0 0 92px;
  min-width:92px;
  height:42px;
  min-height:42px;
  margin:0;
  padding:0;
  scroll-snap-align:start;
}

.tasks>.task-tabs-shell>.tabs>li>a{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:42px;
  min-height:42px;
  margin:0;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:17px;
  color:#b4bbd9!important;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.015),
      rgba(255,255,255,0)
    );
  font-size:11.5px;
  line-height:1;
  letter-spacing:-.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.tasks>.task-tabs-shell>.tabs>li>a:hover{
  color:#d7ddf6!important;
  border-color:rgba(173,182,244,.10);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.005)
    );
}

.tasks>.task-tabs-shell>.tabs>li>a.active{
  color:#fff!important;
  border-color:rgba(198,205,255,.16)!important;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(166,140,255,.18) 0%, rgba(166,140,255,0) 56%),
    linear-gradient(180deg, rgba(120,126,191,.98), rgba(85,93,153,.98));
  box-shadow:
    0 8px 18px rgba(17,21,56,.18),
    0 4px 12px rgba(109,118,205,.16),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.tasks>.task-tabs-shell>.tabs>li>a.active:before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  width:76%;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.32),
      transparent
    );
  opacity:.95;
}

.tasks>.task-tabs-shell>.tabs>li>a.active:after{
  content:"";
  position:absolute;
  inset:auto 10px 4px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.42), rgba(255,255,255,.10));
  opacity:.82;
}

/* Small screens: intentionally show ~3.5 tabs so people know it scrolls */
@media (max-width: 479.98px){
  .tasks>.task-tabs-shell{
    height:48px;
    min-height:48px;
  }

  .tasks>.task-tabs-shell>.tabs{
    height:40px;
    min-height:40px;
  }

  .tasks>.task-tabs-shell>.tabs::before,
  .tasks>.task-tabs-shell>.tabs::after{
    height:40px;
  }

  .tasks>.task-tabs-shell>.tabs>li{
    /* visible area = viewport minus 8px end spacers and 3 inner 4px gaps for 3.5 tabs */
    flex:0 0 calc((100% - 20px) / 3.5);
    min-width:calc((100% - 20px) / 3.5);
    height:40px;
    min-height:40px;
  }

  .tasks>.task-tabs-shell>.tabs>li>a{
    height:40px;
    min-height:40px;
    padding:0 10px;
    font-size:11px;
    border-radius:16px;
  }
}

@media (min-width: 480px) and (max-width: 767.98px){
  .tasks>.task-tabs-shell>.tabs>li{
    flex:0 0 88px;
    min-width:88px;
  }
}

@media (hover:hover) and (pointer:fine){
  .tasks>.task-tabs-shell>.tabs>li>a.active:hover{
    transform:translateY(-1px);
    box-shadow:
      0 10px 22px rgba(17,21,56,.22),
      0 5px 13px rgba(109,118,205,.18),
      inset 0 1px 0 rgba(255,255,255,.16);
  }
}

@media (prefers-reduced-motion:reduce){
  .tasks>.task-tabs-shell>.tabs>li>a{
    transition:none!important;
  }
}


/* Task rail spacing + desktop drag fix
   True 4px scrollable side insets, centered only when everything fits. */
.tasks>.task-tabs-shell{
  --rail-gap:4px;
  --rail-inset:4px;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:50px!important;
  min-height:50px!important;
  padding:4px 0!important;
  overflow:hidden!important;
}

.tasks>.task-tabs-shell>.tabs{
  box-sizing:border-box!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:var(--rail-gap)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;

  /* Real scroll-content insets: these remain visible at BOTH ends. */
  padding:0 var(--rail-inset)!important;

  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity!important;
  scroll-padding-inline:var(--rail-inset)!important;
}

.tasks>.task-tabs-shell>.tabs::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

/* No inherited pseudo-spacers. */
.tasks>.task-tabs-shell>.tabs::before,
.tasks>.task-tabs-shell>.tabs::after{
  content:none!important;
  display:none!important;
}

/* Content-sized tabs at every breakpoint. */
.tasks>.task-tabs-shell>.tabs>li,
.tasks>.task-tabs-shell>.tabs:not(.has-overflow)>li,
.tasks>.task-tabs-shell>.tabs.has-overflow>li{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:72px!important;
  max-width:none!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:normal!important;
}

.tasks>.task-tabs-shell>.tabs>li>a,
.tasks>.task-tabs-shell>.tabs>li:first-child>a,
.tasks>.task-tabs-shell>.tabs>li>a[data-filter]{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-width:72px!important;
  max-width:none!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0 13px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1!important;
}

/* When the whole row fits, center the group so left/right empty space is equal. */
.tasks>.task-tabs-shell>.tabs.rail-ready:not(.has-overflow){
  justify-content:center!important;
  cursor:default!important;
}

/* When it overflows, keep the first tab at the left inset and expose the next cut tab. */
.tasks>.task-tabs-shell>.tabs.has-overflow{
  justify-content:flex-start!important;
  cursor:grab!important;
}

/* Make the whole visible tab surface feel draggable on desktop when overflow exists. */
@media (hover:hover) and (pointer:fine){
  .tasks>.task-tabs-shell>.tabs.has-overflow>li>a{
    cursor:grab!important;
  }

  .tasks>.task-tabs-shell>.tabs.has-overflow.is-dragging,
  .tasks>.task-tabs-shell>.tabs.has-overflow.is-dragging>li>a{
    cursor:grabbing!important;
  }
}

.tasks>.task-tabs-shell>.tabs.is-dragging{
  scroll-behavior:auto!important;
  user-select:none!important;
}

@media (prefers-reduced-motion:reduce){
  .tasks>.task-tabs-shell>.tabs{
    scroll-behavior:auto!important;
  }
}


/* Dynamic fill + premium scrolling refinement.
   No visual redesign: only sizing behavior and scroll feel. */

/* If all tabs fit, let them grow evenly to use the available rail width.
   Their existing minimum/content sizing is preserved, but few tabs become larger. */
.tasks>.task-tabs-shell>.tabs.rail-ready:not(.has-overflow)>li,
.tasks>.task-tabs-shell>.tabs.rail-ready:not(.has-overflow)>li:first-child{
  flex:1 1 0!important;
  width:auto!important;
  min-width:72px!important;
  max-width:none!important;
}

.tasks>.task-tabs-shell>.tabs.rail-ready:not(.has-overflow)>li>a,
.tasks>.task-tabs-shell>.tabs.rail-ready:not(.has-overflow)>li:first-child>a,
.tasks>.task-tabs-shell>.tabs.rail-ready:not(.has-overflow)>li>a[data-filter]{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

/* When overflow exists, keep the natural content-sized behavior. */
.tasks>.task-tabs-shell>.tabs.has-overflow>li{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:72px!important;
  max-width:none!important;
}

.tasks>.task-tabs-shell>.tabs.has-overflow>li>a,
.tasks>.task-tabs-shell>.tabs.has-overflow>li>a[data-filter]{
  width:max-content!important;
  min-width:72px!important;
  max-width:none!important;
}

/* JS handles wheel easing; CSS smooth scrolling causes stacked/laggy wheel motion. */
.tasks>.task-tabs-shell>.tabs{
  scroll-behavior:auto!important;
  will-change:scroll-position;
}

.tasks>.task-tabs-shell>.tabs.is-dragging{
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
}

@media (prefers-reduced-motion:reduce){
  .tasks>.task-tabs-shell>.tabs{
    scroll-behavior:auto!important;
  }
}


/* Desktop sidebar micro-polish — preserve original ClickBee style exactly */
@media (min-width:768px){
  aside nav .menu li a{
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      filter .22s ease,
      background-color .22s ease;
  }

  aside nav .menu li a.active,
  aside nav .menu li a:hover{
    box-shadow:
      0 8px 20px rgba(8,12,38,.18),
      inset 0 1px 0 rgba(255,255,255,.045);
  }

  aside nav .menu li a:hover{
    transform:translateY(-1px);
  }

  aside nav .menu li a.active:before,
  aside nav .menu li a:hover:before{
    opacity:.96;
  }

  aside nav .menu li img{
    transition:
      transform .22s ease,
      filter .22s ease;
  }

  aside nav .menu li a:hover img,
  aside nav .menu li a.active img{
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
  }

  aside nav .menu li a:hover img{
    transform:translateY(-1px);
  }
}

@media (prefers-reduced-motion:reduce){
  aside nav .menu li a,
  aside nav .menu li img{
    transition:none!important;
  }
}


/* Desktop ClickBee logo normalization only */
@media(min-width:769px){
  aside > .d-flex.g-1.align-center.p-2 > img[src="images/clickbee-logo.svg"]{
    display:block!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    object-fit:contain!important;
    object-position:center!important;
    flex:0 0 32px!important;
  }

  aside > .d-flex.g-1.align-center.p-2 > h5{
    margin:0!important;
    line-height:1.1!important;
  }
}


/* Home summary micro-polish
   Preserve the exact existing look/layout; add only premium app-like depth and feedback. */

/* "Drew earned" badge */
main > a[href="#tasks"] > .badge{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:
    0 6px 18px rgba(5,9,32,.14),
    inset 0 1px 0 rgba(255,255,255,.045);
  transition:
    transform .18s cubic-bezier(.22,1,.36,1),
    box-shadow .18s ease,
    filter .18s ease;
  will-change:transform;
}

main > a[href="#tasks"] > .badge .avatar{
  box-shadow:
    0 3px 8px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.045);
}

main > a[href="#tasks"] > .badge .green-highlight{
  text-shadow:0 0 8px rgba(48,255,56,.14);
}

main > a[href="#tasks"]:active > .badge{
  transform:translate3d(0,1px,0) scale(.985);
  box-shadow:
    0 3px 10px rgba(5,9,32,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Existing [Advertise] link — same appearance at rest, more polished interaction. */
main > p.mt-2 > a[href="advertise.html"]{
  display:inline-block;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:
    transform .16s cubic-bezier(.22,1,.36,1),
    filter .16s ease,
    text-shadow .16s ease;
}

main > p.mt-2 > a[href="advertise.html"]:active{
  transform:translate3d(0,1px,0) scale(.975);
}

/* Balance trigger — keep the exact existing position/size, improve depth only. */
.balance > .dropdown-trigger{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:
    transform .18s cubic-bezier(.22,1,.36,1),
    filter .18s ease;
  cursor:pointer;
}

.balance > .dropdown-trigger > img.avatar.lg{
  box-shadow:
    0 5px 14px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.045);
  transition:
    transform .18s cubic-bezier(.22,1,.36,1),
    filter .18s ease,
    box-shadow .18s ease;
}

.balance > .dropdown-trigger > .counter{
  text-shadow:
    0 2px 10px rgba(6,10,34,.18),
    0 0 12px rgba(139,133,255,.055);
}

.balance > .dropdown-trigger:active{
  transform:translate3d(0,1px,0) scale(.988);
}

.balance > .dropdown-trigger:active > img.avatar.lg{
  transform:scale(.96);
}

/* Hover only on devices that actually support hover. */
@media(hover:hover) and (pointer:fine){
  main > a[href="#tasks"]:hover > .badge{
    transform:translate3d(0,-1px,0);
    box-shadow:
      0 9px 22px rgba(5,9,32,.18),
      inset 0 1px 0 rgba(255,255,255,.06);
    filter:brightness(1.025);
  }

  main > p.mt-2 > a[href="advertise.html"]:hover,
  main > p.mt-2 > a[href="advertise.html"]:focus-visible{
    transform:translate3d(0,-1px,0);
    filter:brightness(1.08);
    text-shadow:0 0 10px rgba(139,133,255,.16);
  }

  .balance > .dropdown-trigger:hover{
    transform:translate3d(0,-1px,0);
  }

  .balance > .dropdown-trigger:hover > img.avatar.lg{
    transform:scale(1.045);
    filter:brightness(1.04);
    box-shadow:
      0 7px 17px rgba(0,0,0,.24),
      0 0 9px rgba(139,133,255,.10),
      0 0 0 1px rgba(255,255,255,.055);
  }
}

@media(prefers-reduced-motion:reduce){
  main > a[href="#tasks"] > .badge,
  main > p.mt-2 > a[href="advertise.html"],
  .balance > .dropdown-trigger,
  .balance > .dropdown-trigger > img.avatar.lg{
    transition:none!important;
  }
}


/* Focused task/ad presentation inside the task sheet.
   Buttons and sheet controls intentionally untouched. */
#task-popup .dialog-content > p.text-center.mb-2{
  margin-bottom:7px!important;
  color:#8f99bd;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.16em;
}

#task-popup .task-mission{
  max-width:440px!important;
  margin:0 auto 16px!important;
  padding:0 12px;
  color:#f3f4ff!important;
  font-size:14px;
  font-weight:550;
  line-height:1.48;
  letter-spacing:-.08px;
  text-align:center;
  word-wrap:normal!important;
}

#task-popup .task-content{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
}

/* The cloned task becomes a focused, fully readable promoted-post card. */
#task-popup .task-content > .task-card.social-post{
  --modal-card-accent:148,132,255;
  position:relative;
  isolation:isolate;
  display:block;
  width:100%;
  margin:0;
  padding:16px 16px 14px;
  overflow:hidden;
  border:1px solid rgba(190,198,255,.14);
  border-radius:18px;
  color:#eef0ff;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(var(--modal-card-accent),.12) 0%,rgba(var(--modal-card-accent),0) 56%),
    linear-gradient(145deg,rgb(40,49,101),rgb(25,31,73) 62%,rgb(20,26,63));
  box-shadow:
    0 16px 36px rgba(2,5,26,.28),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(8,11,38,.28);
  animation:none!important;
  transform:none!important;
}


#task-popup[data-task-category="telegram"] .task-content > .task-card.social-post{
  --modal-card-accent:70,161,235;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(70,161,235,.13) 0%,rgba(70,161,235,0) 56%),
    linear-gradient(145deg,rgb(39,57,113),rgb(24,37,82) 62%,rgb(20,29,67));
}
#task-popup[data-task-category="twitter"] .task-content > .task-card.social-post{
  --modal-card-accent:126,136,230;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(126,136,230,.11) 0%,rgba(126,136,230,0) 55%),
    linear-gradient(145deg,rgb(37,46,93),rgb(23,29,69) 62%,rgb(18,23,58));
}
#task-popup[data-task-category="instagram"] .task-content > .task-card.social-post{
  --modal-card-accent:225,72,140;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(225,72,140,.12) 0%,rgba(225,72,140,0) 56%),
    linear-gradient(145deg,rgb(58,45,103),rgb(31,31,76) 62%,rgb(23,26,64));
}
#task-popup[data-task-category="youtube"] .task-content > .task-card.social-post{
  --modal-card-accent:255,82,82;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(255,82,82,.12) 0%,rgba(255,82,82,0) 56%),
    linear-gradient(145deg,rgb(58,43,85),rgb(32,30,70) 62%,rgb(23,25,61));
}
#task-popup[data-task-category="tiktok"] .task-content > .task-card.social-post{
  --modal-card-accent:160,132,222;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(160,132,222,.12) 0%,rgba(160,132,222,0) 56%),
    linear-gradient(145deg,rgb(49,46,101),rgb(30,32,76) 62%,rgb(23,26,64));
}
#task-popup[data-task-category="discord"] .task-content > .task-card.social-post{
  --modal-card-accent:114,126,255;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(114,126,255,.12) 0%,rgba(114,126,255,0) 56%),
    linear-gradient(145deg,rgb(49,53,112),rgb(31,34,82) 62%,rgb(23,27,66));
}
#task-popup[data-task-category="facebook"] .task-content > .task-card.social-post{
  --modal-card-accent:88,138,225;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(88,138,225,.12) 0%,rgba(88,138,225,0) 56%),
    linear-gradient(145deg,rgb(42,50,99),rgb(28,33,77) 62%,rgb(22,27,65));
}
#task-popup[data-task-category="web"] .task-content > .task-card.social-post{
  --modal-card-accent:167,117,239;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(167,117,239,.12) 0%,rgba(167,117,239,0) 56%),
    linear-gradient(145deg,rgb(52,49,106),rgb(30,33,77) 62%,rgb(23,27,65));
}
#task-popup[data-task-category="apps"] .task-content > .task-card.social-post{
  --modal-card-accent:124,92,255;
  background:
    radial-gradient(95% 120% at 100% 0%,rgba(124,92,255,.12) 0%,rgba(124,92,255,0) 56%),
    linear-gradient(145deg,rgb(37,35,95),rgb(27,34,81) 62%,rgb(20,26,63));
}

#task-popup .task-content > .task-card.social-post:before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:11%;
  width:78%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  pointer-events:none;
}

#task-popup .task-content > .task-card.social-post:after{
  content:"";
  position:absolute;
  z-index:0;
  top:-38px;
  right:-48px;
  width:128px;
  height:128px;
  border-radius:50%;
  background:rgba(var(--modal-card-accent),.075);
  filter:blur(28px);
  pointer-events:none;
}

#task-popup .task-content > .task-card.social-post > *{
  position:relative;
  z-index:1;
}

/* Old hidden advertiser/profile row remains hidden exactly like the task list. */
#task-popup .social-post-head,
#task-popup .social-avatar,
#task-popup .social-author{
  display:none!important;
}

#task-popup .social-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:24px;
}

#task-popup .promoted-label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:#9ca5c7;
  font-size:10px;
  font-weight:650;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#task-popup .promoted-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:rgb(var(--modal-card-accent));
  box-shadow:0 0 11px rgba(var(--modal-card-accent),.65);
}

#task-popup .social-platform{
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:#d2d6ec;
  background:rgba(7,10,30,.20);
  font-size:10px;
  line-height:1;
}

#task-popup .platform-mark{
  color:#fff;
  font-weight:700;
}

#task-popup .task-title{
  display:block;
  margin:11px 0 0;
  overflow:visible;
  color:#fff;
  font-size:18px;
  font-weight:680;
  line-height:1.28;
  letter-spacing:-.22px;
  -webkit-line-clamp:unset;
}

#task-popup .task-description{
  display:block;
  min-height:0;
  margin:8px 0 0;
  overflow:visible;
  color:#cbd0e6;
  font-size:13.5px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.05px;
  -webkit-line-clamp:unset;
}

#task-popup .social-post-footer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid rgba(197,205,255,.12);
}

#task-popup .task-action{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:#c1c7df;
  font-size:11.5px;
  font-weight:550;
}

#task-popup .action-icon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:7px;
  color:#fff;
  background:rgba(255,255,255,.075);
  font-size:9px;
  font-weight:700;
}

#task-popup .reward{
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  padding:5px 9px 5px 6px;
  border:1px solid rgba(255,202,93,.17);
  border-radius:999px;
  color:#fff3cf;
  background:rgba(221,157,45,.09);
  font-size:11px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
}

#task-popup .reward b{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  margin:0;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#f2b83b,#d78920);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:10px;
}

@media(max-width:390px){
  #task-popup .task-mission{
    margin-bottom:14px!important;
    padding:0 8px;
    font-size:13.5px;
  }

  #task-popup .task-content > .task-card.social-post{
    padding:14px 14px 13px;
    border-radius:17px;
  }

  #task-popup .task-title{
    margin-top:9px;
    font-size:16.5px;
  }

  #task-popup .task-description{
    margin-top:7px;
    font-size:12.75px;
    line-height:1.5;
  }

  #task-popup .social-post-footer{
    gap:8px;
    margin-top:13px;
    padding-top:11px;
  }

  #task-popup .task-action{
    font-size:10.75px;
  }

  #task-popup .reward{
    padding-right:7px;
    font-size:10.5px;
  }
}


/* Modal task card cleanup:
   no Promoted/platform row; stronger in-card action/reward footer only. */
#task-popup .task-content > .task-card.social-post .social-meta-row{
  display:none!important;
}

/* With the top meta row gone, let the ad headline start cleanly. */
#task-popup .task-content > .task-card.social-post .task-title{
  margin-top:0!important;
}

/* Premium in-card footer: action on the left, reward on the right. */
#task-popup .task-content > .task-card.social-post .social-post-footer{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  margin-top:17px!important;
  padding:7px!important;
  border:1px solid rgba(190,198,255,.10)!important;
  border-radius:14px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.018))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 18px rgba(4,7,28,.10)!important;
}

/* "X  Comment to earn" / equivalent platform action. */
#task-popup .task-content > .task-card.social-post .task-action{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 11px!important;
  border:1px solid rgba(var(--modal-card-accent),.16)!important;
  border-radius:10px!important;
  color:#f4f5ff!important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--modal-card-accent),.115),
      rgba(var(--modal-card-accent),.055)
    )!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055)!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1!important;
  letter-spacing:-.04px!important;
  white-space:nowrap!important;
}

/* Platform mark stays compact and visually separated from the action text. */
#task-popup .task-content > .task-card.social-post .action-icon{
  display:grid!important;
  place-items:center!important;
  width:26px!important;
  height:26px!important;
  flex:0 0 26px!important;
  margin:0!important;
  border:1px solid rgba(var(--modal-card-accent),.24)!important;
  border-radius:8px!important;
  color:#fff!important;
  background:
    linear-gradient(
      145deg,
      rgba(var(--modal-card-accent),.24),
      rgba(var(--modal-card-accent),.10)
    )!important;
  box-shadow:
    0 4px 10px rgba(3,6,24,.14),
    inset 0 1px 0 rgba(255,255,255,.075)!important;
  font-size:10px!important;
  font-weight:750!important;
  line-height:1!important;
}

/* Reward becomes a clear, dedicated amount block. */
#task-popup .task-content > .task-card.social-post .reward{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 11px 0 7px!important;
  border:1px solid rgba(255,202,93,.16)!important;
  border-radius:10px!important;
  color:#fff0c7!important;
  background:
    linear-gradient(
      180deg,
      rgba(224,163,51,.105),
      rgba(224,163,51,.05)
    )!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}

#task-popup .task-content > .task-card.social-post .reward b{
  display:grid!important;
  place-items:center!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  margin:0!important;
  border:1px solid rgba(255,235,179,.18)!important;
  border-radius:50%!important;
  color:#fff!important;
  background:linear-gradient(145deg,#efb33a,#cb7d1d)!important;
  box-shadow:
    0 3px 8px rgba(91,51,8,.20),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
  font-size:11px!important;
  font-weight:750!important;
}

/* Keep the footer compact and readable on narrow phones. */
@media(max-width:390px){
  #task-popup .task-content > .task-card.social-post .social-post-footer{
    gap:6px!important;
    padding:6px!important;
  }

  #task-popup .task-content > .task-card.social-post .task-action{
    gap:6px!important;
    min-height:36px!important;
    padding:0 8px!important;
    font-size:11px!important;
  }

  #task-popup .task-content > .task-card.social-post .action-icon{
    width:24px!important;
    height:24px!important;
    flex-basis:24px!important;
  }

  #task-popup .task-content > .task-card.social-post .reward{
    min-height:36px!important;
    padding:0 8px 0 6px!important;
    gap:5px!important;
    font-size:10.25px!important;
  }

  #task-popup .task-content > .task-card.social-post .reward b{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
    font-size:10px!important;
  }
}


/* FINAL modal ad presentation — spacious, focused, no boxed action/reward UI.
   Sheet controls/buttons remain untouched. */

/* Keep MISSION quiet so the ad itself owns the visual space. */
#task-popup .dialog-content > p.text-center.mb-2{
  margin-bottom:6px!important;
  color:#8892b7!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.16em!important;
}

#task-popup .task-mission{
  max-width:470px!important;
  margin:0 auto 14px!important;
  padding:0 10px!important;
  color:#e8eaff!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:1.42!important;
  letter-spacing:-.05px!important;
  text-align:center!important;
}

/* Give the ad as much horizontal room as the sheet safely allows. */
#task-popup .task-content{
  width:calc(100% + 16px)!important;
  margin-left:-8px!important;
  margin-right:-8px!important;
  padding:0!important;
}

/* Rebuild the cloned task as one large ad surface rather than nested mini-cards. */
#task-popup .task-content > .task-card.social-post{
  --modal-card-accent:148,132,255;
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-height:250px!important;
  margin:0!important;
  padding:23px 22px 17px!important;
  overflow:hidden!important;
  border:1px solid rgba(190,198,255,.11)!important;
  border-radius:19px!important;
  color:#eef0ff!important;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(var(--modal-card-accent),.125) 0%,rgba(var(--modal-card-accent),0) 57%),
    linear-gradient(145deg,rgb(38,46,96),rgb(24,30,70) 62%,rgb(19,25,60))!important;
  box-shadow:
    0 18px 38px rgba(2,5,25,.22),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(7,10,34,.24)!important;
  animation:none!important;
  transform:none!important;
}

/* Preserve the platform tint, but keep the treatment calm. */
#task-popup[data-task-category="telegram"] .task-content > .task-card.social-post{
  --modal-card-accent:70,161,235;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(70,161,235,.13) 0%,rgba(70,161,235,0) 57%),
    linear-gradient(145deg,rgb(39,57,113),rgb(24,37,82) 62%,rgb(20,29,67))!important;
}
#task-popup[data-task-category="twitter"] .task-content > .task-card.social-post{
  --modal-card-accent:126,136,230;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(126,136,230,.12) 0%,rgba(126,136,230,0) 57%),
    linear-gradient(145deg,rgb(37,46,93),rgb(23,29,69) 62%,rgb(18,23,58))!important;
}
#task-popup[data-task-category="instagram"] .task-content > .task-card.social-post{
  --modal-card-accent:225,72,140;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(225,72,140,.12) 0%,rgba(225,72,140,0) 57%),
    linear-gradient(145deg,rgb(58,45,103),rgb(31,31,76) 62%,rgb(23,26,64))!important;
}
#task-popup[data-task-category="youtube"] .task-content > .task-card.social-post{
  --modal-card-accent:255,82,82;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(255,82,82,.12) 0%,rgba(255,82,82,0) 57%),
    linear-gradient(145deg,rgb(58,43,85),rgb(32,30,70) 62%,rgb(23,25,61))!important;
}
#task-popup[data-task-category="tiktok"] .task-content > .task-card.social-post{
  --modal-card-accent:160,132,222;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(160,132,222,.12) 0%,rgba(160,132,222,0) 57%),
    linear-gradient(145deg,rgb(49,46,101),rgb(30,32,76) 62%,rgb(23,26,64))!important;
}
#task-popup[data-task-category="discord"] .task-content > .task-card.social-post{
  --modal-card-accent:114,126,255;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(114,126,255,.12) 0%,rgba(114,126,255,0) 57%),
    linear-gradient(145deg,rgb(49,53,112),rgb(31,34,82) 62%,rgb(23,27,66))!important;
}
#task-popup[data-task-category="facebook"] .task-content > .task-card.social-post{
  --modal-card-accent:88,138,225;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(88,138,225,.12) 0%,rgba(88,138,225,0) 57%),
    linear-gradient(145deg,rgb(42,50,99),rgb(28,33,77) 62%,rgb(22,27,65))!important;
}
#task-popup[data-task-category="web"] .task-content > .task-card.social-post{
  --modal-card-accent:167,117,239;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(167,117,239,.12) 0%,rgba(167,117,239,0) 57%),
    linear-gradient(145deg,rgb(52,49,106),rgb(30,33,77) 62%,rgb(23,27,65))!important;
}
#task-popup[data-task-category="apps"] .task-content > .task-card.social-post{
  --modal-card-accent:124,92,255;
  background:
    radial-gradient(115% 120% at 100% 0%,rgba(124,92,255,.12) 0%,rgba(124,92,255,0) 57%),
    linear-gradient(145deg,rgb(37,35,95),rgb(27,34,81) 62%,rgb(20,26,63))!important;
}

/* Remove the top metadata completely. */
#task-popup .task-content > .task-card.social-post .social-meta-row,
#task-popup .task-content > .task-card.social-post .social-post-head,
#task-popup .task-content > .task-card.social-post .social-avatar,
#task-popup .task-content > .task-card.social-post .social-author{
  display:none!important;
}

/* A single restrained highlight line, not another UI box. */
#task-popup .task-content > .task-card.social-post:before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  left:12%!important;
  width:76%!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)!important;
  pointer-events:none!important;
}

#task-popup .task-content > .task-card.social-post:after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:-56px!important;
  right:-54px!important;
  width:160px!important;
  height:160px!important;
  border-radius:50%!important;
  background:rgba(var(--modal-card-accent),.07)!important;
  filter:blur(34px)!important;
  pointer-events:none!important;
}

#task-popup .task-content > .task-card.social-post > *{
  position:relative!important;
  z-index:1!important;
}

/* The actual ad copy gets the visual priority. */
#task-popup .task-content > .task-card.social-post .task-title{
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  color:#fff!important;
  font-size:20px!important;
  font-weight:690!important;
  line-height:1.27!important;
  letter-spacing:-.28px!important;
  -webkit-line-clamp:unset!important;
}

#task-popup .task-content > .task-card.social-post .task-description{
  display:block!important;
  min-height:0!important;
  margin:12px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  color:#cfd4e9!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.62!important;
  letter-spacing:-.04px!important;
  -webkit-line-clamp:unset!important;
}

/* Push the footer to the bottom when the copy is short. */
#task-popup .task-content > .task-card.social-post .social-post-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  width:100%!important;
  margin-top:auto!important;
  padding:18px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(197,205,255,.12)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* Plain inline action — no pill/card/background. */
#task-popup .task-content > .task-card.social-post .task-action{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#d9dcef!important;
  background:none!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:-.04px!important;
  white-space:nowrap!important;
}

/* Platform mark is just a mark, not a button/card. */
#task-popup .task-content > .task-card.social-post .action-icon{
  display:inline!important;
  width:auto!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:rgb(var(--modal-card-accent))!important;
  background:none!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
}

/* Plain inline reward — no pill/card/background. */
#task-popup .task-content > .task-card.social-post .reward{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  flex:0 0 auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#fff0c4!important;
  background:none!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}

#task-popup .task-content > .task-card.social-post .reward b{
  display:inline!important;
  width:auto!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#eeb546!important;
  background:none!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
}

/* Narrow phones: still spacious, but avoid wasting vertical room. */
@media(max-width:390px){
  #task-popup .task-mission{
    margin-bottom:12px!important;
    font-size:12.5px!important;
  }

  #task-popup .task-content{
    width:calc(100% + 12px)!important;
    margin-left:-6px!important;
    margin-right:-6px!important;
  }

  #task-popup .task-content > .task-card.social-post{
    min-height:232px!important;
    padding:20px 18px 15px!important;
    border-radius:18px!important;
  }

  #task-popup .task-content > .task-card.social-post .task-title{
    font-size:18px!important;
  }

  #task-popup .task-content > .task-card.social-post .task-description{
    margin-top:10px!important;
    font-size:13.25px!important;
    line-height:1.56!important;
  }

  #task-popup .task-content > .task-card.social-post .social-post-footer{
    gap:10px!important;
    padding-top:15px!important;
  }

  #task-popup .task-content > .task-card.social-post .task-action,
  #task-popup .task-content > .task-card.social-post .reward{
    font-size:11px!important;
  }
}


/* FINAL task sheet composition — one premium task card.
   Mission + ad + clean inline reward/action + existing Go-to button.
   Skip/DONE and all button styling remain unchanged. */

/* One coherent panel instead of nested visual cards. */
#task-popup .task-focus-panel{
  --task-focus-accent:148,132,255;
  position:relative;
  isolation:isolate;
  width:100%;
  margin:0;
  padding:20px 20px 18px;
  overflow:hidden;
  border:1px solid rgba(190,198,255,.12);
  border-radius:20px;
  background:
    radial-gradient(120% 92% at 100% 0%,rgba(var(--task-focus-accent),.13) 0%,rgba(var(--task-focus-accent),0) 58%),
    linear-gradient(150deg,rgba(38,46,96,.96),rgba(22,28,67,.98) 63%,rgba(18,23,57,.99));
  box-shadow:
    0 20px 44px rgba(2,5,24,.27),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(5,8,28,.25);
}

#task-popup .task-focus-panel:before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:12%;
  width:76%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  pointer-events:none;
}

#task-popup .task-focus-panel:after{
  content:"";
  position:absolute;
  z-index:0;
  top:-70px;
  right:-58px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:rgba(var(--task-focus-accent),.075);
  filter:blur(38px);
  pointer-events:none;
}

#task-popup .task-focus-panel > *{
  position:relative;
  z-index:1;
}

/* Platform character lives on the single outer panel. */
#task-popup[data-task-category="telegram"] .task-focus-panel{--task-focus-accent:70,161,235;}
#task-popup[data-task-category="twitter"] .task-focus-panel{--task-focus-accent:126,136,230;}
#task-popup[data-task-category="instagram"] .task-focus-panel{--task-focus-accent:225,72,140;}
#task-popup[data-task-category="youtube"] .task-focus-panel{--task-focus-accent:255,82,82;}
#task-popup[data-task-category="tiktok"] .task-focus-panel{--task-focus-accent:160,132,222;}
#task-popup[data-task-category="discord"] .task-focus-panel{--task-focus-accent:114,126,255;}
#task-popup[data-task-category="facebook"] .task-focus-panel{--task-focus-accent:88,138,225;}
#task-popup[data-task-category="web"] .task-focus-panel{--task-focus-accent:167,117,239;}
#task-popup[data-task-category="apps"] .task-focus-panel{--task-focus-accent:124,92,255;}

/* Mission is context, not the visual hero. */
#task-popup .task-focus-panel > p.text-center.mb-2{
  margin:0 0 6px!important;
  color:#8f99bd!important;
  font-size:9px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:.17em!important;
  text-align:left!important;
}

#task-popup .task-focus-panel > .task-mission{
  max-width:none!important;
  margin:0 0 20px!important;
  padding:0 0 17px!important;
  border-bottom:1px solid rgba(197,205,255,.12);
  color:#f3f4ff!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.45!important;
  letter-spacing:-.08px!important;
  text-align:left!important;
  word-wrap:normal!important;
}

/* The cloned listing card becomes pure ad CONTENT.
   The outer focus panel is the only card surface. */
#task-popup .task-focus-panel .task-content{
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

#task-popup .task-focus-panel .task-content > .task-card.social-post{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-height:230px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  color:inherit!important;
  background:none!important;
  box-shadow:none!important;
  animation:none!important;
  transform:none!important;
}

#task-popup .task-focus-panel .task-content > .task-card.social-post:before,
#task-popup .task-focus-panel .task-content > .task-card.social-post:after{
  content:none!important;
  display:none!important;
}

/* No Promoted / platform row in the focused sheet. */
#task-popup .task-focus-panel .social-meta-row,
#task-popup .task-focus-panel .social-post-head,
#task-popup .task-focus-panel .social-avatar,
#task-popup .task-focus-panel .social-author{
  display:none!important;
}

/* Ad gets the main visual priority. */
#task-popup .task-focus-panel .task-title{
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  color:#fff!important;
  font-size:21px!important;
  font-weight:700!important;
  line-height:1.28!important;
  letter-spacing:-.32px!important;
  -webkit-line-clamp:unset!important;
}

#task-popup .task-focus-panel .task-description{
  display:block!important;
  min-height:0!important;
  margin:12px 0 0!important;
  padding:0!important;
  overflow:visible!important;
  color:#cdd2e7!important;
  font-size:14px!important;
  font-weight:400!important;
  line-height:1.65!important;
  letter-spacing:-.04px!important;
  -webkit-line-clamp:unset!important;
}

/* Simple information line at the bottom of the ad — no cards/pills. */
#task-popup .task-focus-panel .social-post-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  width:100%!important;
  margin-top:auto!important;
  padding:18px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(197,205,255,.12)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}

#task-popup .task-focus-panel .task-action{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#d9ddef!important;
  background:none!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

#task-popup .task-focus-panel .action-icon{
  display:inline-block!important;
  width:auto!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:rgb(var(--task-focus-accent))!important;
  background:none!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;
}

#task-popup .task-focus-panel .reward{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  flex:0 0 auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#fff0c7!important;
  background:none!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

#task-popup .task-focus-panel .reward b{
  display:inline!important;
  width:auto!important;
  height:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#efb746!important;
  background:none!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1!important;
}

/* Keep the EXISTING Go-to button styling exactly;
   only give it clean breathing room inside the card. */
#task-popup .task-focus-panel > .gradient-button{
  margin-top:20px!important;
}

/* Skip/DONE stay outside the focus card and are not restyled. */

@media(max-width:390px){
  #task-popup .task-focus-panel{
    padding:18px 17px 16px;
    border-radius:18px;
  }

  #task-popup .task-focus-panel > .task-mission{
    margin-bottom:17px!important;
    padding-bottom:15px!important;
    font-size:13px!important;
  }

  #task-popup .task-focus-panel .task-content > .task-card.social-post{
    min-height:215px!important;
  }

  #task-popup .task-focus-panel .task-title{
    font-size:18.5px!important;
    line-height:1.3!important;
  }

  #task-popup .task-focus-panel .task-description{
    margin-top:10px!important;
    font-size:13.25px!important;
    line-height:1.57!important;
  }

  #task-popup .task-focus-panel .social-post-footer{
    gap:10px!important;
    padding-top:15px!important;
  }

  #task-popup .task-focus-panel .task-action,
  #task-popup .task-focus-panel .reward{
    font-size:11px!important;
  }

  #task-popup .task-focus-panel > .gradient-button{
    margin-top:17px!important;
  }
}




/* Reserve the top-right close control its own space instead of letting it overlap the card. */
#task-popup .task-focus-panel{
  margin-top:20px!important;
}

/* Make MISSION immediately readable without turning it into another card. */
#task-popup .task-focus-panel > p.text-center.mb-2{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0 0 8px!important;
  color:#d9ddff!important;
  font-size:10.5px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-align:left!important;
}

#task-popup .task-focus-panel > p.text-center.mb-2:before{
  content:""!important;
  display:block!important;
  width:6px!important;
  height:6px!important;
  flex:0 0 6px!important;
  border-radius:50%!important;
  background:rgb(var(--task-focus-accent))!important;
  box-shadow:0 0 9px rgba(var(--task-focus-accent),.45)!important;
}

/* Mission instruction gets a clearer hierarchy and accent guide. */
#task-popup .task-focus-panel > .task-mission{
  max-width:none!important;
  margin:0 0 20px!important;
  padding:0 0 17px 12px!important;
  border-left:2px solid rgba(var(--task-focus-accent),.55)!important;
  border-bottom:1px solid rgba(197,205,255,.12)!important;
  color:#ffffff!important;
  font-size:14.5px!important;
  font-weight:650!important;
  line-height:1.46!important;
  letter-spacing:-.08px!important;
  text-align:left!important;
}

/* Mobile drawer already has extra top padding, so a slightly smaller reserve is enough. */
@media(max-width:768px){
  #task-popup .task-focus-panel{
    margin-top:12px!important;
  }
}

@media(max-width:390px){
  #task-popup .task-focus-panel > p.text-center.mb-2{
    margin-bottom:7px!important;
    font-size:10px!important;
  }

  #task-popup .task-focus-panel > .task-mission{
    margin-bottom:17px!important;
    padding:0 0 15px 10px!important;
    font-size:13.5px!important;
  }
}


/* Task sheet height responsiveness.
   Normal-height view is untouched.
   Compact <=350px, ultra-compact <=200px, micro action strip <=80px. */

/* COMPACT VIEW: keep every action reachable on short mobile viewports. */
@media (max-width:768px) and (max-height:350px){
  #task-popup{
    max-height:calc(100svh - 2px)!important;
  }

  #task-popup .dialog-content{
    display:flex!important;
    flex-direction:column!important;
    max-height:calc(100svh - 2px)!important;
    padding:18px 10px 7px!important;
    overflow:hidden!important;
    scroll-snap-type:none!important;
  }

  #task-popup:before{
    top:6px!important;
    width:38px!important;
    height:3px!important;
  }

  #task-popup .btn-popup-close{
    top:5px!important;
    right:7px!important;
    width:20px!important;
    height:20px!important;
  }

  #task-popup .btn-popup-close .icon{
    width:10px!important;
    height:10px!important;
  }

  #task-popup .task-focus-panel{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-height:0!important;
    margin-top:0!important;
    padding:10px 12px 9px!important;
    border-radius:14px!important;
  }

  #task-popup .task-focus-panel > p.text-center.mb-2{
    gap:5px!important;
    margin:0 0 4px!important;
    font-size:8px!important;
    letter-spacing:.13em!important;
  }

  #task-popup .task-focus-panel > p.text-center.mb-2:before{
    width:4px!important;
    height:4px!important;
    flex-basis:4px!important;
  }

  #task-popup .task-focus-panel > .task-mission{
    margin:0 0 7px!important;
    padding:0 0 7px 8px!important;
    font-size:11px!important;
    line-height:1.28!important;
  }

  /* Let the ad itself scroll instead of pushing the actions off-screen. */
  #task-popup .task-focus-panel .task-content{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-width:none!important;
  }

  #task-popup .task-focus-panel .task-content::-webkit-scrollbar{
    display:none!important;
  }

  #task-popup .task-focus-panel .task-content > .task-card.social-post{
    min-height:0!important;
  }

  #task-popup .task-focus-panel .task-title{
    font-size:14px!important;
    line-height:1.24!important;
  }

  #task-popup .task-focus-panel .task-description{
    margin-top:6px!important;
    font-size:10.5px!important;
    line-height:1.36!important;
  }

  #task-popup .task-focus-panel .social-post-footer{
    gap:8px!important;
    margin-top:8px!important;
    padding-top:7px!important;
  }

  #task-popup .task-focus-panel .task-action,
  #task-popup .task-focus-panel .reward{
    font-size:9.5px!important;
  }

  #task-popup .task-focus-panel > .gradient-button{
    flex:0 0 auto!important;
    height:30px!important;
    min-height:30px!important;
    margin-top:7px!important;
    padding:0 12px!important;
    border-radius:9px!important;
    font-size:11px!important;
    line-height:30px!important;
  }

  #task-popup .dialog-content > .d-flex.g-2.mt-2{
    flex:0 0 auto!important;
    gap:5px!important;
    margin-top:5px!important;
  }

  #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{
    height:30px!important;
    min-height:30px!important;
    padding:0 10px!important;
    border-radius:9px!important;
    font-size:11px!important;
    line-height:30px!important;
  }
}

/* ULTRA-COMPACT VIEW: redesigned composition for 200px and below. */
@media (max-width:768px) and (max-height:200px){
  #task-popup{
    max-height:100svh!important;
    border-top-left-radius:18px!important;
    border-top-right-radius:18px!important;
  }

  #task-popup .dialog-content{
    max-height:100svh!important;
    padding:8px 6px 4px!important;
  }

  #task-popup:before{
    top:3px!important;
    width:28px!important;
    height:2px!important;
  }

  #task-popup .btn-popup-close{
    top:2px!important;
    right:4px!important;
    width:17px!important;
    height:17px!important;
  }

  #task-popup .btn-popup-close .icon{
    width:8px!important;
    height:8px!important;
  }

  #task-popup .task-focus-panel{
    padding:5px 7px 5px!important;
    border-radius:10px!important;
  }

  /* The instruction stays visible, but the label itself is unnecessary here. */
  #task-popup .task-focus-panel > p.text-center.mb-2{
    display:none!important;
  }

  #task-popup .task-focus-panel > .task-mission{
    display:block!important;
    overflow:hidden!important;
    margin:0 20px 4px 0!important;
    padding:0 0 4px 6px!important;
    border-left-width:1px!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  #task-popup .task-focus-panel .task-title{
    font-size:11px!important;
    line-height:1.16!important;
  }

  #task-popup .task-focus-panel .task-description{
    margin-top:3px!important;
    font-size:8.5px!important;
    line-height:1.22!important;
  }

  #task-popup .task-focus-panel .social-post-footer{
    gap:5px!important;
    margin-top:4px!important;
    padding-top:4px!important;
  }

  #task-popup .task-focus-panel .task-action,
  #task-popup .task-focus-panel .reward{
    font-size:7.8px!important;
  }

  #task-popup .task-focus-panel .action-icon,
  #task-popup .task-focus-panel .reward b{
    font-size:8px!important;
  }

  #task-popup .task-focus-panel > .gradient-button{
    height:22px!important;
    min-height:22px!important;
    margin-top:4px!important;
    padding:0 7px!important;
    border-radius:7px!important;
    font-size:8.5px!important;
    line-height:22px!important;
  }

  #task-popup .dialog-content > .d-flex.g-2.mt-2{
    gap:3px!important;
    margin-top:3px!important;
  }

  #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{
    height:22px!important;
    min-height:22px!important;
    padding:0 6px!important;
    border-radius:7px!important;
    font-size:8.5px!important;
    line-height:22px!important;
  }
}

/* MICRO VIEW: usable action strip for extremely short windows, including ~50px high.
   Content cannot meaningfully fit at this height, so keep all three task actions reachable. */
@media (max-width:768px) and (max-height:80px){
  #task-popup{
    width:100%!important;
    max-height:100svh!important;
    border-radius:0!important;
  }

  #task-popup:before{
    display:none!important;
  }

  #task-popup .dialog-content{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:3px!important;
    width:100%!important;
    max-height:100svh!important;
    padding:2px 21px 2px 3px!important;
    overflow:hidden!important;
  }

  #task-popup .btn-popup-close{
    top:50%!important;
    right:2px!important;
    width:16px!important;
    height:16px!important;
    transform:translateY(-50%)!important;
  }

  #task-popup .task-focus-panel{
    display:contents!important;
  }

  #task-popup .task-focus-panel > p.text-center.mb-2,
  #task-popup .task-focus-panel > .task-mission,
  #task-popup .task-focus-panel > .task-content{
    display:none!important;
  }

  #task-popup .task-focus-panel > .gradient-button{
    display:flex!important;
    flex:1 1 36%!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:clamp(18px,calc(100svh - 8px),28px)!important;
    min-height:0!important;
    margin:0!important;
    padding:0 5px!important;
    overflow:hidden!important;
    border-radius:6px!important;
    font-size:7.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  #task-popup .dialog-content > .d-flex.g-2.mt-2{
    display:flex!important;
    flex:1.8 1 64%!important;
    align-items:center!important;
    gap:2px!important;
    min-width:0!important;
    margin:0!important;
  }

  #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{
    flex:1 1 0!important;
    min-width:0!important;
    height:clamp(18px,calc(100svh - 8px),28px)!important;
    min-height:0!important;
    margin:0!important;
    padding:0 4px!important;
    overflow:hidden!important;
    border-radius:6px!important;
    font-size:7.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
}

/* 50px-safe tuning. */
@media (max-width:768px) and (max-height:50px){
  #task-popup .dialog-content{
    gap:2px!important;
    padding:1px 18px 1px 2px!important;
  }

  #task-popup .btn-popup-close{
    width:14px!important;
    height:14px!important;
  }

  #task-popup .task-focus-panel > .gradient-button,
  #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{
    height:clamp(14px,calc(100svh - 4px),22px)!important;
    padding:0 3px!important;
    border-radius:5px!important;
    font-size:6.5px!important;
  }
}


/* FINAL short-height sheet fix:
   no inner scrolling; progressively condense content so actions stay visible. */
@media (max-width:768px) and (max-height:350px){
  #task-popup,
  #task-popup .dialog-content{
    overflow:hidden!important;
  }

  #task-popup .dialog-content{
    height:100svh!important;
    max-height:100svh!important;
  }

  #task-popup .task-focus-panel{
    flex:1 1 auto!important;
    min-height:0!important;
  }

  #task-popup .task-focus-panel .task-content{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  #task-popup .task-focus-panel .task-content > .task-card.social-post{
    min-height:0!important;
    height:100%!important;
  }

  #task-popup .task-focus-panel .task-description{
    display:-webkit-box!important;
    overflow:hidden!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
  }
}

/* Tighter fit below 300px: fewer copy lines, smaller vertical rhythm. */
@media (max-width:768px) and (max-height:300px){
  #task-popup .dialog-content{
    padding-top:14px!important;
    padding-bottom:5px!important;
  }

  #task-popup .task-focus-panel{
    padding-top:8px!important;
    padding-bottom:7px!important;
  }

  #task-popup .task-focus-panel > .task-mission{
    margin-bottom:6px!important;
    padding-bottom:6px!important;
    font-size:10px!important;
    line-height:1.2!important;
  }

  #task-popup .task-focus-panel .task-title{
    font-size:12.5px!important;
  }

  #task-popup .task-focus-panel .task-description{
    margin-top:4px!important;
    font-size:9.5px!important;
    line-height:1.28!important;
    -webkit-line-clamp:2!important;
  }

  #task-popup .task-focus-panel .social-post-footer{
    margin-top:6px!important;
    padding-top:6px!important;
  }

  #task-popup .task-focus-panel > .gradient-button,
  #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{
    height:27px!important;
    min-height:27px!important;
    line-height:27px!important;
  }
}

/* 250px and below: preserve the task identity and actions, trim ad body further. */
@media (max-width:768px) and (max-height:250px){
  #task-popup .dialog-content{
    padding-top:10px!important;
    padding-bottom:4px!important;
  }

  #task-popup .task-focus-panel{
    padding:6px 8px!important;
  }

  #task-popup .task-focus-panel > .task-mission{
    margin-bottom:4px!important;
    padding-bottom:4px!important;
    font-size:9px!important;
    line-height:1.14!important;
  }

  #task-popup .task-focus-panel .task-title{
    font-size:11px!important;
    line-height:1.15!important;
  }

  #task-popup .task-focus-panel .task-description{
    margin-top:3px!important;
    font-size:8.5px!important;
    line-height:1.18!important;
    -webkit-line-clamp:1!important;
  }

  #task-popup .task-focus-panel .social-post-footer{
    margin-top:4px!important;
    padding-top:4px!important;
  }

  #task-popup .task-focus-panel > .gradient-button,
  #task-popup .dialog-content > .d-flex.g-2.mt-2 > .btn{
    height:23px!important;
    min-height:23px!important;
    line-height:23px!important;
    font-size:8.5px!important;
  }
}

/* 200px and below: a true compact no-scroll view. */
@media (max-width:768px) and (max-height:200px){
  #task-popup .task-focus-panel .task-description{
    display:none!important;
  }

  #task-popup .task-focus-panel .task-content > .task-card.social-post{
    height:auto!important;
  }

  #task-popup .task-focus-panel .social-post-footer{
    margin-top:3px!important;
    padding-top:3px!important;
  }
}

/* 130px and below: mission + task title + action/reward + buttons only. */
@media (max-width:768px) and (max-height:130px){
  #task-popup .task-focus-panel > .task-mission{
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  #task-popup .task-focus-panel .task-title{
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
}

/* Keep the existing micro action-strip view scroll-free. */
@media (max-width:768px) and (max-height:80px){
  #task-popup,
  #task-popup .dialog-content{
    overflow:hidden!important;
  }
}


/* All Tasks filter rail — one shared premium selector that glides between tabs.
   Existing sizing, drag, wheel, overflow and filtering remain untouched. */
.tasks>.task-tabs-shell>.tabs{
  position:relative!important;
  isolation:isolate!important;
}

/* Real moving selected surface, inserted by JS. */
.tasks>.task-tabs-shell>.tabs>.cb-task-selector{
  box-sizing:border-box!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  left:0!important;
  display:block!important;
  width:0;
  height:40px!important;
  min-height:40px!important;
  border:1px solid rgba(198,205,255,.16)!important;
  border-radius:17px!important;
  background:
    radial-gradient(
      120% 130% at 100% 0%,
      rgba(166,140,255,.18) 0%,
      rgba(166,140,255,0) 56%
    ),
    linear-gradient(
      180deg,
      rgba(120,126,191,.98),
      rgba(85,93,153,.98)
    )!important;
  box-shadow:
    0 8px 18px rgba(17,21,56,.18),
    0 4px 12px rgba(109,118,205,.16),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
  opacity:0;
  pointer-events:none!important;
  transform:translate3d(0,0,0);
  transition:
    transform .46s cubic-bezier(.16,1,.3,1),
    width .46s cubic-bezier(.16,1,.3,1),
    opacity .12s ease!important;
  will-change:transform,width;
}

/* Top highlight from the original active tab. */
.tasks>.task-tabs-shell>.tabs>.cb-task-selector:before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  width:76%;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.32),
      transparent
    );
  opacity:.95;
  pointer-events:none;
}

.tasks>.task-tabs-shell>.tabs.cb-task-glide-ready>.cb-task-selector{
  opacity:1;
}

/* Keep all tab labels above the moving selector. */
.tasks>.task-tabs-shell>.tabs.cb-task-glide-ready>li{
  position:relative!important;
  z-index:1!important;
}

/* The shared selector replaces only the old active background.
   Text colour remains exactly the active state. */
.tasks>.task-tabs-shell>.tabs.cb-task-glide-ready>li>a.active{
  color:#fff!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}

.tasks>.task-tabs-shell>.tabs.cb-task-glide-ready>li>a.active:before,
.tasks>.task-tabs-shell>.tabs.cb-task-glide-ready>li>a.active:after{
  display:none!important;
}

/* Keep active hover subtle: the moving surface is already providing the depth. */
@media (hover:hover) and (pointer:fine){
  .tasks>.task-tabs-shell>.tabs.cb-task-glide-ready>li>a.active:hover{
    transform:translateY(-1px);
    box-shadow:none!important;
  }
}

.tasks>.task-tabs-shell>.tabs.cb-task-selector-instant>.cb-task-selector{
  transition:none!important;
}

@media (max-width:479.98px){
  .tasks>.task-tabs-shell>.tabs>.cb-task-selector{
    height:40px!important;
    border-radius:16px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .tasks>.task-tabs-shell>.tabs>.cb-task-selector{
    transition:none!important;
  }
}


/* 69 — SINGLE YOUTUBE MASTER TASK-CARD SYSTEM
   This is now the ONLY .tasks card CSS.
   Every platform uses the exact same YouTube card recipe.
   Platform identity is colour variables only. */

/* Card wrapper */
.tasks>.btn-popup[data-category]{
  width:100%;
  margin-top:12px!important;
  gap:0!important;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.tasks>.task-tabs-shell+.btn-popup[data-category],
.tasks>.tabs+.btn-popup[data-category]{
  margin-top:14px!important;
}

/* Platform variables ONLY */
.tasks>.btn-popup[data-category="telegram"]{
  --card-accent:70,161,235;
  --yt-tone-1:39,57,113;
  --yt-tone-2:24,37,82;
  --yt-tone-3:20,29,67;
}
.tasks>.btn-popup[data-category="twitter"]{
  --card-accent:126,136,230;
  --yt-tone-1:37,46,93;
  --yt-tone-2:23,29,69;
  --yt-tone-3:18,23,58;
}
.tasks>.btn-popup[data-category="instagram"]{
  --card-accent:225,72,140;
  --yt-tone-1:58,45,103;
  --yt-tone-2:31,31,76;
  --yt-tone-3:23,26,64;
}
.tasks>.btn-popup[data-category="youtube"]{
  --card-accent:255,82,82;
  --yt-tone-1:58,43,85;
  --yt-tone-2:32,30,70;
  --yt-tone-3:23,25,61;
}
.tasks>.btn-popup[data-category="tiktok"]{
  --card-accent:160,132,222;
  --yt-tone-1:49,46,101;
  --yt-tone-2:30,32,76;
  --yt-tone-3:23,26,64;
}
.tasks>.btn-popup[data-category="discord"]{
  --card-accent:114,126,255;
  --yt-tone-1:49,53,112;
  --yt-tone-2:31,34,82;
  --yt-tone-3:23,27,66;
}
.tasks>.btn-popup[data-category="facebook"]{
  --card-accent:88,138,225;
  --yt-tone-1:42,50,99;
  --yt-tone-2:28,33,77;
  --yt-tone-3:22,27,65;
}
.tasks>.btn-popup[data-category="web"]{
  --card-accent:167,117,239;
  --yt-tone-1:52,49,106;
  --yt-tone-2:30,33,77;
  --yt-tone-3:23,27,65;
}
.tasks>.btn-popup[data-category="apps"]{
  --card-accent:124,92,255;
  --yt-tone-1:37,35,95;
  --yt-tone-2:27,34,81;
  --yt-tone-3:20,26,63;
}

/* Exact YouTube card shell */
.tasks>.btn-popup[data-category]>.task-card.social-post{
  position:relative!important;
  isolation:isolate!important;
  display:block!important;
  width:100%!important;
  padding:13px 14px 12px!important;
  overflow:hidden!important;

  border:1px solid rgba(190,198,255,.10)!important;
  border-radius:17px!important;
  color:#eef0ff!important;

  background:
    radial-gradient(
      94% 116% at 100% 0%,
      rgba(var(--card-accent),.18) 0%,
      rgba(var(--card-accent),.07) 31%,
      rgba(var(--card-accent),0) 58%
    ),
    linear-gradient(
      145deg,
      rgb(var(--yt-tone-1)),
      rgb(var(--yt-tone-2)) 62%,
      rgb(var(--yt-tone-3))
    )!important;

  box-shadow:
    0 14px 30px rgba(2,5,26,.24),
    0 4px 14px rgba(var(--card-accent),.045),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(6,9,32,.30)!important;

  transform:translate3d(0,0,0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;

  transition:
    transform .30s cubic-bezier(.2,.78,.2,1),
    box-shadow .30s cubic-bezier(.2,.78,.2,1),
    border-color .24s ease,
    filter .24s ease!important;
}

/* Exact YouTube top sheen */
.tasks>.btn-popup[data-category]>.task-card.social-post:before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  top:0!important;
  left:9%!important;
  width:82%!important;
  height:1px!important;
  opacity:.86!important;
  border:0!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10) 22%,
      rgba(var(--card-accent),.24) 50%,
      rgba(255,255,255,.10) 78%,
      transparent
    )!important;

  box-shadow:none!important;
  pointer-events:none!important;

  transition:
    opacity .28s ease,
    left .34s cubic-bezier(.2,.78,.2,1),
    width .34s cubic-bezier(.2,.78,.2,1)!important;
}

/* Exact YouTube side glow */
.tasks>.btn-popup[data-category]>.task-card.social-post:after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  top:18px!important;
  bottom:18px!important;
  left:0!important;
  width:1px!important;
  height:auto!important;
  opacity:.78!important;
  border:0!important;
  border-radius:0 99px 99px 0!important;

  background:
    linear-gradient(
      180deg,
      rgba(var(--card-accent),0),
      rgba(var(--card-accent),.80),
      rgba(var(--card-accent),0)
    )!important;

  box-shadow:
    0 0 10px rgba(var(--card-accent),.22),
    0 0 18px rgba(var(--card-accent),.08)!important;

  transform:scaleY(.82)!important;
  transform-origin:center!important;
  pointer-events:none!important;

  transition:
    opacity .28s ease,
    transform .34s cubic-bezier(.2,.78,.2,1),
    box-shadow .30s ease!important;
}

/* No advertiser/profile row */
.tasks .social-post-head,
.tasks .social-avatar,
.tasks .social-author{
  display:none!important;
}

/* Exact YouTube meta row */
.tasks .social-meta-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-height:23px!important;
}

.tasks .social-meta-row .promoted-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;

  margin:0!important;
  padding:4px 8px 4px 6px!important;

  border:1px solid rgba(var(--card-accent),.14)!important;
  border-radius:999px!important;

  color:#b9bfd8!important;
  background:
    linear-gradient(
      135deg,
      rgba(var(--card-accent),.085),
      rgba(var(--card-accent),.025)
    )!important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;

  font-size:9.5px!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.22px!important;
  text-transform:uppercase!important;
}

.tasks .promoted-dot{
  width:5px!important;
  height:5px!important;
  flex:0 0 5px!important;
  border-radius:50%!important;

  background:rgb(var(--card-accent))!important;
  box-shadow:
    0 0 8px rgba(var(--card-accent),.58),
    0 0 15px rgba(var(--card-accent),.20)!important;
}

.tasks .social-meta-row .social-platform{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex:0 0 auto!important;

  min-height:23px!important;
  padding:4px 8px!important;

  border:1px solid rgba(var(--card-accent),.16)!important;
  border-radius:999px!important;

  color:#d7dbed!important;
  background:
    linear-gradient(
      135deg,
      rgba(var(--card-accent),.105),
      rgba(var(--card-accent),.035)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 2px 8px rgba(2,5,26,.08)!important;

  font-size:9.5px!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.05px!important;
}

.tasks .platform-mark{
  color:rgb(var(--card-accent))!important;
  font-weight:700!important;
  text-shadow:
    0 0 8px rgba(var(--card-accent),.46),
    0 0 15px rgba(var(--card-accent),.18)!important;
}

/* Exact YouTube copy */
.tasks .social-post .task-title{
  display:-webkit-box!important;
  margin:9px 0 0!important;
  overflow:hidden!important;

  color:#f8f9ff!important;
  font-size:15.5px!important;
  font-weight:680!important;
  line-height:1.27!important;
  letter-spacing:-.22px!important;

  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}

.tasks .social-post .task-description{
  display:-webkit-box!important;
  min-height:calc(1.46em * 4)!important;
  margin:6px 0 0!important;
  overflow:hidden!important;

  color:#cbd0e7!important;
  font-size:12.6px!important;
  font-weight:400!important;
  line-height:1.46!important;
  letter-spacing:-.06px!important;

  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:5!important;
}

/* Exact YouTube footer */
.tasks .social-post-footer{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;

  margin-top:11px!important;
  padding-top:10px!important;

  border-top:1px solid rgba(199,205,255,.065)!important;
}

.tasks .task-action{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;

  padding:5px 8px 5px 6px!important;

  border:1px solid rgba(var(--card-accent),.15)!important;
  border-radius:10px!important;

  color:#c6cbe2!important;
  background:
    linear-gradient(
      135deg,
      rgba(var(--card-accent),.10),
      rgba(var(--card-accent),.04)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 2px 8px rgba(2,5,26,.07)!important;

  font-size:10.5px!important;
  font-weight:600!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.tasks .action-icon{
  display:grid!important;
  place-items:center!important;

  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;

  border:1px solid rgba(220,224,255,.18)!important;
  border-radius:7px!important;

  color:#fff!important;
  background:
    linear-gradient(
      145deg,
      rgba(var(--card-accent),.70),
      rgba(var(--card-accent),.28)
    )!important;

  box-shadow:
    0 4px 11px rgba(var(--card-accent),.16),
    0 0 14px rgba(var(--card-accent),.07),
    inset 0 1px 0 rgba(255,255,255,.18)!important;

  font-size:8px!important;
  font-weight:800!important;
}

.tasks .social-post .reward{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;

  min-height:31px!important;
  margin-left:auto!important;
  padding:5px 9px 5px 5px!important;

  border:1px solid rgba(255,201,87,.13)!important;
  border-radius:11px!important;

  color:#fff2ca!important;
  background:
    linear-gradient(
      145deg,
      rgba(226,162,44,.13),
      rgba(134,92,24,.08)
    )!important;

  box-shadow:
    0 4px 12px rgba(92,61,16,.07),
    inset 0 1px 0 rgba(255,255,255,.045)!important;

  font-size:10.8px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.02px!important;
  white-space:nowrap!important;
}

.tasks .social-post .reward b{
  display:grid!important;
  place-items:center!important;

  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;

  margin:0!important;

  border:1px solid rgba(255,226,154,.15)!important;
  border-radius:50%!important;

  color:#fff!important;
  background:linear-gradient(145deg,#f4c653,#dc9224)!important;

  box-shadow:
    0 3px 9px rgba(221,148,36,.20),
    inset 0 1px 0 rgba(255,255,255,.28)!important;

  font-size:10px!important;
  line-height:1!important;
}

/* Exact YouTube hover */
@media (hover:hover) and (pointer:fine){
  .tasks>.btn-popup[data-category]>.task-card.social-post:hover{
    transform:translate3d(0,-3px,0) scale(1.004)!important;
    border-color:rgba(var(--card-accent),.18)!important;
    filter:saturate(1.035) brightness(1.012)!important;

    box-shadow:
      0 19px 40px rgba(2,5,26,.30),
      0 7px 18px rgba(var(--card-accent),.075),
      inset 0 1px 0 rgba(255,255,255,.065),
      inset 0 -1px 0 rgba(6,9,32,.24)!important;
  }

  .tasks>.btn-popup[data-category]>.task-card.social-post:hover:before{
    left:6%!important;
    width:88%!important;
    opacity:1!important;
  }

  .tasks>.btn-popup[data-category]>.task-card.social-post:hover:after{
    opacity:1!important;
    transform:scaleY(1.08)!important;
    box-shadow:
      0 0 13px rgba(var(--card-accent),.30),
      0 0 22px rgba(var(--card-accent),.11)!important;
  }

  .tasks>.btn-popup[data-category]>.task-card.social-post:hover .promoted-label,
  .tasks>.btn-popup[data-category]>.task-card.social-post:hover .social-platform{
    filter:brightness(1.035)!important;
  }

  .tasks>.btn-popup[data-category]>.task-card.social-post:hover .action-icon{
    transform:translateY(-1px) scale(1.035)!important;
  }

  .tasks>.btn-popup[data-category]>.task-card.social-post:hover .reward b{
    transform:translateY(-1px) scale(1.055)!important;
    filter:brightness(1.055)!important;
  }
}

/* Exact YouTube press */
.tasks>.btn-popup[data-category]:active>.task-card.social-post{
  transform:translate3d(0,0,0) scale(.986)!important;
  filter:brightness(.985)!important;
  border-color:rgba(var(--card-accent),.15)!important;

  box-shadow:
    0 6px 16px rgba(2,5,26,.18),
    inset 0 1px 0 rgba(255,255,255,.03)!important;
}

/* Exact compact YouTube sizing */
@media (max-width:390px){
  .tasks>.btn-popup[data-category]>.task-card.social-post{
    padding:12px 12px 11px!important;
    border-radius:16px!important;
  }

  .tasks .social-meta-row{
    min-height:22px!important;
  }

  .tasks .social-meta-row .promoted-label,
  .tasks .social-meta-row .social-platform{
    font-size:9px!important;
  }

  .tasks .social-post .task-title{
    font-size:14.7px!important;
    line-height:1.27!important;
  }

  .tasks .social-post .task-description{
    min-height:calc(1.44em * 4)!important;
    font-size:12.1px!important;
    line-height:1.44!important;
    -webkit-line-clamp:5!important;
  }

  .tasks .social-post-footer{
    gap:7px!important;
    margin-top:10px!important;
    padding-top:9px!important;
  }

  .tasks .task-action{
    padding-right:7px!important;
    font-size:10px!important;
  }

  .tasks .social-post .reward{
    padding-right:7px!important;
    font-size:10.2px!important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .tasks>.btn-popup[data-category]>.task-card.social-post,
  .tasks>.btn-popup[data-category]>.task-card.social-post:before,
  .tasks>.btn-popup[data-category]>.task-card.social-post:after,
  .tasks .social-meta-row .promoted-label,
  .tasks .social-meta-row .social-platform,
  .tasks .task-action,
  .tasks .action-icon,
  .tasks .social-post .reward,
  .tasks .social-post .reward b{
    transition:none!important;
    animation:none!important;
  }
}


/* 71 — desktop sidebar app-navigation glide.
   Preserve the existing 51.zip menu look; replace only the static active surface
   with one shared rounded selector that moves vertically. */
@media(min-width:769px){
  aside nav .menu{
    position:relative!important;
    isolation:isolate!important;
  }

  aside nav .menu > .cb-desktop-selector{
    position:absolute!important;
    z-index:1!important;
    top:0!important;
    left:0!important;
    display:block!important;
    width:0;
    height:0;

    /* Exact original desktop active-button shell. */
    overflow:hidden!important;
    border:0!important;
    border-radius:20px!important;

    background-color:rgba(255,255,255,.2)!important;
    background-image:
      radial-gradient(rgba(255,255,255,.4) 0%,transparent 64%)!important;
    background-size:40px 40px!important;
    background-repeat:no-repeat!important;
    background-position:-15px -5px!important;

    /* Exact existing desktop active depth. */
    box-shadow:
      0 8px 20px rgba(8,12,38,.18),
      inset 0 1px 0 rgba(255,255,255,.045)!important;

    opacity:0;
    pointer-events:none!important;

    transform:translate3d(0,0,0);
    transition:
      transform .46s cubic-bezier(.16,1,.3,1),
      width .46s cubic-bezier(.16,1,.3,1),
      height .46s cubic-bezier(.16,1,.3,1),
      opacity .14s ease!important;

    will-change:transform,width,height;
  }

  /* Existing gradient outline from the old active button. */
  aside nav .menu > .cb-desktop-selector:after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border:1px solid transparent!important;
    border-radius:20px!important;
    background:
      linear-gradient(
        45deg,
        rgba(255,255,255,.4),
        rgba(241,241,241,.1)
      ) border-box!important;

    -webkit-mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0)!important;
    mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0)!important;
    -webkit-mask-composite:xor!important;
    mask-composite:exclude!important;

    pointer-events:none!important;
  }

  /* Existing purple/blue bottom glow from the old active button. */
  aside nav .menu > .cb-desktop-selector:before{
    content:""!important;
    position:absolute!important;
    display:block!important;
    width:64px!important;
    height:35px!important;
    border-radius:100vw!important;

    filter:blur(16px)!important;
    background-image:
      linear-gradient(130deg,#313AFC,#C622FF)!important;

    bottom:-16px!important;
    left:50%!important;
    transform:translateX(-50%)!important;

    opacity:.96!important;
    pointer-events:none!important;
  }

  aside nav .menu.cb-desktop-glide-ready > .cb-desktop-selector{
    opacity:1!important;
  }

  aside nav .menu > li{
    position:relative!important;
    z-index:2!important;
  }

  /* Shared selector replaces only the old ACTIVE background.
     Inactive hover styling from 51.zip remains untouched. */
  aside nav .menu.cb-desktop-glide-ready > li > a.active{
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
  }

  aside nav .menu.cb-desktop-glide-ready > li > a.active:before,
  aside nav .menu.cb-desktop-glide-ready > li > a.active:after{
    display:none!important;
  }

  aside nav .menu.cb-desktop-selector-instant > .cb-desktop-selector{
    transition:none!important;
  }
}

@media(min-width:769px) and (prefers-reduced-motion:reduce){
  aside nav .menu > .cb-desktop-selector{
    transition:none!important;
  }
}


/* 74 — task popup / sheet motion polish.
   Desktop popup grows from the clicked task position.
   Mobile task sheet uses a native bottom-sheet entrance/exit.
   Visual styling/layout remains unchanged. */

#task-popup.cb-task-prep{
  opacity:0!important;
}

#task-popup.cb-task-prep::backdrop{
  opacity:0!important;
}

@media(min-width:769px){
  #task-popup{
    --cb-task-from-x:0px;
    --cb-task-from-y:0px;
    --cb-task-from-scale:.82;
    transform-origin:center center;
  }

  #task-popup.cb-task-enter{
    animation:cb-task-popup-enter .32s cubic-bezier(.18,.82,.22,1) both;
  }

  #task-popup.cb-task-exit{
    animation:cb-task-popup-exit .22s cubic-bezier(.42,0,.72,.28) both;
  }

  #task-popup.cb-task-enter::backdrop{
    animation:cb-task-backdrop-enter .24s ease-out both;
  }

  #task-popup.cb-task-exit::backdrop{
    animation:cb-task-backdrop-exit .18s ease-in both;
  }

  @keyframes cb-task-popup-enter{
    0%{
      opacity:.18;
      transform:
        translate3d(
          var(--cb-task-from-x),
          var(--cb-task-from-y),
          0
        )
        scale(var(--cb-task-from-scale));
      filter:brightness(.96);
    }
    72%{
      opacity:1;
      transform:translate3d(0,0,0) scale(1.008);
      filter:brightness(1.01);
    }
    100%{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
      filter:none;
    }
  }

  @keyframes cb-task-popup-exit{
    0%{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
      filter:none;
    }
    100%{
      opacity:0;
      transform:
        translate3d(
          var(--cb-task-from-x),
          var(--cb-task-from-y),
          0
        )
        scale(var(--cb-task-from-scale));
      filter:brightness(.96);
    }
  }
}

/* Mobile is intentionally different: it behaves like a real bottom sheet,
   not like a centered popup forced onto a small screen. */
@media(max-width:768px){
  #task-popup.cb-task-enter{
    animation:cb-task-sheet-enter .30s cubic-bezier(.16,1,.3,1) both;
  }

  #task-popup.cb-task-exit{
    animation:cb-task-sheet-exit .22s cubic-bezier(.4,0,.7,.2) both;
  }

  #task-popup.cb-task-sheet-drag-exit{
    animation:cb-task-sheet-drag-exit .20s cubic-bezier(.4,0,.7,.2) both;
  }

  #task-popup.cb-task-enter::backdrop{
    animation:cb-task-backdrop-enter .24s ease-out both;
  }

  #task-popup.cb-task-exit::backdrop,
  #task-popup.cb-task-sheet-drag-exit::backdrop{
    animation:cb-task-backdrop-exit .18s ease-in both;
  }

  @keyframes cb-task-sheet-enter{
    0%{
      opacity:.90;
      transform:translate3d(0,100%,0);
    }
    100%{
      opacity:1;
      transform:translate3d(0,0,0);
    }
  }

  @keyframes cb-task-sheet-exit{
    0%{
      opacity:1;
      transform:translate3d(0,0,0);
    }
    100%{
      opacity:.72;
      transform:translate3d(0,100%,0);
    }
  }

  @keyframes cb-task-sheet-drag-exit{
    0%{
      opacity:1;
      transform:translate3d(0,var(--cb-sheet-drag-y,0px),0);
    }
    100%{
      opacity:.72;
      transform:translate3d(0,100%,0);
    }
  }
}

@keyframes cb-task-backdrop-enter{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes cb-task-backdrop-exit{
  from{opacity:1;}
  to{opacity:0;}
}

@media(prefers-reduced-motion:reduce){
  #task-popup.cb-task-enter,
  #task-popup.cb-task-exit,
  #task-popup.cb-task-sheet-drag-exit,
  #task-popup.cb-task-enter::backdrop,
  #task-popup.cb-task-exit::backdrop,
  #task-popup.cb-task-sheet-drag-exit::backdrop{
    animation:none!important;
  }
}

/* ClickBee 192: live wallet chooser is anchored to the balance control. */
main .balance.cb-page-live{position:relative;overflow:visible;z-index:20}
main .balance.cb-page-live > .dropdown,
main .balance.cb-page-live > .relative > .dropdown{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(360px,calc(100vw - 32px))!important;
  max-height:min(360px,55vh);
  overflow-y:auto;
  z-index:10050!important;
  margin-top:0!important;
  box-shadow:0 16px 42px rgba(0,0,0,.42);
}
main .balance.cb-page-live > .relative{position:relative;overflow:visible;width:100%}
main .balance.cb-page-live .dropdown-trigger{position:relative;z-index:1}

/* ClickBee 194: anchor the live main-wallet chooser to the balance control. */
main .balance.cb-page-live{position:relative!important;overflow:visible!important;z-index:20}
main .balance.cb-page-live > .dropdown,
main .balance.cb-page-live > .relative > .dropdown{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:min(360px,calc(100vw - 32px))!important;
  max-height:min(360px,55vh)!important;
  overflow-y:auto!important;
  z-index:10050!important;
  margin-top:0!important;
  box-shadow:0 16px 42px rgba(0,0,0,.42);
}
main .balance.cb-page-live > .relative{position:relative!important;overflow:visible!important;width:100%}
main .balance.cb-page-live .dropdown-trigger{position:relative;z-index:1}


/* 229 — compact free-scrolling task filter rail.
   Smaller controls, and no scroll snapping so the rail can rest at any partial-tab position. */
.tasks>.task-tabs-shell{
  height:44px!important;
  min-height:44px!important;
  padding:4px 0!important;
  border-radius:18px!important;
}
.tasks>.task-tabs-shell>.tabs{
  height:36px!important;
  min-height:36px!important;
  scroll-snap-type:none!important;
  scroll-padding-inline:0!important;
}
.tasks>.task-tabs-shell>.tabs>li,
.tasks>.task-tabs-shell>.tabs:not(.has-overflow)>li,
.tasks>.task-tabs-shell>.tabs.has-overflow>li,
.tasks>.task-tabs-shell>.tabs.rail-ready:not(.has-overflow)>li{
  min-width:66px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}
.tasks>.task-tabs-shell>.tabs>li>a,
.tasks>.task-tabs-shell>.tabs>li:first-child>a,
.tasks>.task-tabs-shell>.tabs>li>a[data-filter],
.tasks>.task-tabs-shell>.tabs.has-overflow>li>a,
.tasks>.task-tabs-shell>.tabs.has-overflow>li>a[data-filter]{
  min-width:66px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0 10px!important;
  border-radius:15px!important;
  font-size:10.5px!important;
}
.tasks>.task-tabs-shell>.tabs>.cb-task-selector{
  height:36px!important;
  min-height:36px!important;
  border-radius:15px!important;
}
@media(max-width:479.98px){
  .tasks>.task-tabs-shell{
    height:44px!important;
    min-height:44px!important;
  }
  .tasks>.task-tabs-shell>.tabs,
  .tasks>.task-tabs-shell>.tabs>li,
  .tasks>.task-tabs-shell>.tabs>li>a,
  .tasks>.task-tabs-shell>.tabs>.cb-task-selector{
    height:36px!important;
    min-height:36px!important;
  }
  .tasks>.task-tabs-shell>.tabs>li,
  .tasks>.task-tabs-shell>.tabs.has-overflow>li{
    flex:0 0 auto!important;
    min-width:66px!important;
  }
  .tasks>.task-tabs-shell>.tabs>li>a,
  .tasks>.task-tabs-shell>.tabs>li>a[data-filter]{
    min-width:66px!important;
    padding:0 9px!important;
    font-size:10.25px!important;
    border-radius:15px!important;
  }
}


/* 232 — long ad copy stays inside fixed-size task surfaces. */
#task-popup .task-focus-panel .task-title{
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
}
.cb-campaign-row-copy strong{
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
/* The whole wallet amount/logo/arrow area is one obvious currency control. */
main .balance .cb-wallet-balance-trigger{
  cursor:pointer!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:manipulation;
}
main .balance .cb-wallet-balance-trigger *{cursor:pointer!important;}
main .balance .cb-wallet-balance-trigger:focus-visible{
  outline:2px solid rgba(196,156,255,.72);
  outline-offset:5px;
  border-radius:12px;
}

/* 291 — restore the premium desktop menu-name typography only.
   Mobile navigation is intentionally untouched. */
@font-face{
  font-family:"ClickBee Desktop Nav";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../webfonts/SF-Pro-Display-Medium.OTF") format("opentype");
}
@font-face{
  font-family:"ClickBee Desktop Nav";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../webfonts/SF-Pro-Display-Bold.OTF") format("opentype");
}
@media(min-width:769px){
  aside nav .menu li a,
  aside nav .menu li a span{
    font-family:"ClickBee Desktop Nav","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  }
  aside nav .menu li a{
    font-weight:500!important;
    letter-spacing:-.3px!important;
  }
  aside nav .menu li a.active,
  aside nav .menu li a:hover{font-weight:700!important;}
}

/* 234 — desktop navigation typography + utility icons. */
@media(min-width:769px){
  aside nav .menu li a,
  aside nav .menu li a span{font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
  aside > .d-flex-column.p-2.mt-auto.g-3 > a[data-target="#howItWorks"],
  aside > .d-flex-column.p-2.mt-auto.g-3 > .settings-dropdown > .dropdown-trigger{gap:9px!important;font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
  aside > .d-flex-column.p-2.mt-auto.g-3 > a[data-target="#howItWorks"] > i,
  aside > .d-flex-column.p-2.mt-auto.g-3 > .settings-dropdown > .dropdown-trigger > i{display:none!important}
  aside > .d-flex-column.p-2.mt-auto.g-3 > a[data-target="#howItWorks"]:before,
  aside > .d-flex-column.p-2.mt-auto.g-3 > .settings-dropdown > .dropdown-trigger:before{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border:1px solid rgba(204,187,255,.18);border-radius:9px;color:#f6f2ff;background:linear-gradient(145deg,rgba(119,91,217,.24),rgba(76,64,155,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;font-weight:800;line-height:1}
  aside > .d-flex-column.p-2.mt-auto.g-3 > a[data-target="#howItWorks"]:before{content:"?"}
  aside > .d-flex-column.p-2.mt-auto.g-3 > .settings-dropdown > .dropdown-trigger:before{content:"⚙";font-size:15px}
}

@media(min-width:769px){aside nav .menu > .cb-desktop-selector{view-transition-name:cb-desktop-nav-selector}}
::view-transition-group(cb-desktop-nav-selector){animation-duration:.34s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(cb-desktop-nav-selector),::view-transition-new(cb-desktop-nav-selector){animation:none;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){::view-transition-group(cb-desktop-nav-selector){animation-duration:1ms!important}}