@everymatrix/casino-challenges-overlay-drawer-details 0.0.1

package/dist/collection/components/casino-challenges-overlay-drawer-details/casino-challenges-overlay-drawer-details.css

@@ -0,0 +1,870 @@
+.Mobile.challenge-details.tabView, .Mobile.challenge-details.swipped.hasAction.tabView {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.Mobile.challenge-details.tabView::-webkit-scrollbar, .Mobile.challenge-details.swipped.hasAction.tabView::-webkit-scrollbar {
+  display: none;
+}
+.Mobile.challenge-details {
+  overflow-x: hidden;
+  border-radius: 0;
+  padding: 0;
+}
+.Mobile.challenge-details .content,
+.Mobile.challenge-details .sub-page-wrapper {
+  padding: 0 12px;
+}
+.Mobile.challenge-details.tabView {
+  border-radius: 20px 20px 0 0;
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+}
+.Mobile.challenge-details .breadcrumbs {
+  margin: 16px 0 8px 0;
+  height: 26px;
+}
+.Mobile.challenge-details .breadcrumbs .challenge-name,
+.Mobile.challenge-details .breadcrumbs .tab-name,
+.Mobile.challenge-details .breadcrumbs .total-number {
+  font-size: var(--emw--font-size-small, 14px);
+}
+.Mobile.challenge-details .breadcrumbs .action {
+  right: 16px;
+  width: 26px;
+  height: 26px;
+}
+.Mobile.challenge-details .breadcrumbs .action img {
+  width: 14px;
+}
+.Mobile.challenge-details .progress-block h3 {
+  font-size: var(--emw--font-size-small, 14px);
+}
+.Mobile.challenge-details .action-description,
+.Mobile.challenge-details .terms-title,
+.Mobile.challenge-details .terms-description {
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-semibold, 600);
+}
+.Mobile.challenge-details.swipped .head .row .challenge-title {
+  margin: 12px 0 24px 0;
+}
+.Mobile.challenge-details.swipped .head .action-description {
+  display: none;
+}
+.Mobile.challenge-details .footer .action-description {
+  margin: 0;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  max-height: 28px;
+  min-height: 14px;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.Mobile.challenge-details .footer {
+  border-top: 2px solid var(--emw--gradient-blue, #003e5c);
+  background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));
+  backdrop-filter: blur(16px);
+  padding: 12px 16px;
+  border-radius: 0;
+}
+.Mobile.challenge-details .banner {
+  position: relative;
+  justify-self: center;
+}
+.Mobile.challenge-details .banner.grayed {
+  opacity: 0.5;
+}
+.Mobile.challenge-details .banner__badge {
+  height: 27px;
+  box-sizing: border-box;
+  align-content: center;
+  color: var(--emw--badge-font-color, #f4eff4);
+  font-size: var(--emw--font-size-xs-small, 13px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  padding: 3px 4px;
+  border: 1px solid var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  backdrop-filter: blur(4.5px);
+  border-radius: 15px;
+}
+.Mobile.challenge-details .banner__badge .status {
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 15px;
+  border: 1px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  padding: 0 8px 0 6px;
+}
+.Mobile.challenge-details .banner__badge .status::before {
+  content: "";
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+.Mobile.challenge-details .banner__badge .timer {
+  font-weight: var(--emw--font-weight-bold, 700);
+  padding-right: 4px;
+}
+.Mobile.challenge-details .banner__badge.unavailable .status::before, .Mobile.challenge-details .banner__badge.expired .status::before {
+  background: var(--emw--status-badge-gray-bg, rgba(255, 255, 255, 0.5019607843));
+}
+.Mobile.challenge-details .banner__badge.completed .status::before {
+  background: var(--emw--background-green-color, #00b541);
+}
+.Mobile.challenge-details .banner__badge.forfeited .status::before {
+  background: var(--emw--status-badge-red-bg, #d63d1e);
+}
+.Mobile.challenge-details .banner__badge.paused .status::before {
+  background: var(--emw--status-badge-yellow-bg, #ffb801);
+}
+.Mobile.challenge-details .banner__badge:has(.timer) {
+  padding-left: 6px;
+}
+.Mobile.challenge-details .banner__image-wrapper {
+  position: relative;
+  width: 343px;
+  height: 180px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+.Mobile.challenge-details .banner__image-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
+.Mobile.challenge-details .banner * {
+  pointer-events: none;
+}
+.Mobile.challenge-details .challenge-title {
+  margin: 12px 0 8px 0;
+  font-size: var(--emw--font-size-large, 18px);
+  line-height: 22px;
+}
+.Mobile.challenge-details .challenge-rules {
+  margin-bottom: 0;
+}
+.Mobile.challenge-details .challenge-rules .challenge-rule {
+  font-size: var(--emw--font-size-x-small, 12px);
+}
+.Mobile.challenge-details .mobile-banner {
+  display: flex;
+  width: 343px;
+  height: 180px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 20px;
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  margin-bottom: 16px;
+}
+.Mobile.challenge-details .challenge-terms {
+  margin-top: 0;
+}
+.Mobile.challenge-details .label {
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: 12px;
+  margin: 0;
+}
+.Mobile.challenge-details .description {
+  font-size: var(--emw--font-size-xs-small, 13px);
+  line-height: 12px;
+}
+.Mobile.challenge-details .date-description,
+.Mobile.challenge-details .total-level-description {
+  line-height: 20px;
+}
+.Mobile.challenge-details .challenge-levels,
+.Mobile.challenge-details .challenge-games,
+.Mobile.challenge-details .challenge-rules {
+  padding: 14px;
+}
+.Mobile.challenge-details .chevron-button {
+  width: 26px;
+  height: 26px;
+}
+.Mobile.challenge-details .chevron-button img {
+  width: 14px;
+  height: 14px;
+}
+.Mobile.challenge-details .challenge-level {
+  padding: 10px;
+}
+.Mobile.challenge-details .challenge-block-header .total-levels h3,
+.Mobile.challenge-details .challenge-block-header .total-levels span,
+.Mobile.challenge-details .challenge-block-header .total-games h3,
+.Mobile.challenge-details .challenge-block-header .total-games span {
+  font-size: var(--emw--font-size-small, 14px);
+}
+.Mobile.challenge-details .challenge-block-header p {
+  font-size: var(--emw--font-size-x-small, 12px);
+}
+.Mobile.challenge-details .challenge-level {
+  box-sizing: border-box;
+}
+.Mobile.challenge-details .challenge-level .level__title {
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: 14px;
+}
+.Mobile.challenge-details .challenge-level .level__status {
+  font-size: var(--emw--font-size-x-small, 12px);
+  line-height: 14px;
+}
+.Mobile.challenge-details .challenge-level .level__bonus {
+  margin-bottom: 3px;
+}
+.Mobile.challenge-details .challenge-level .label {
+  font-size: var(--emw--font-size-x-small, 12px);
+  margin-bottom: 8px;
+}
+.Mobile.challenge-details .challenge-level .description {
+  font-size: var(--emw--font-size-2x-small, 11px);
+  line-height: 12px;
+  max-width: 110px;
+}
+.Mobile.challenge-details .challenge-game {
+  min-width: 85px;
+  height: 60px;
+}
+.Mobile.challenge-details .action-button {
+  font-size: var(--emw--font-size-small, 14px);
+  height: 34px;
+}
+.Mobile.challenge-details .notification {
+  padding: 14px 12px;
+}
+.Mobile.challenge-details .notification__message, .Mobile.challenge-details .notification__title {
+  font-size: 14px;
+}
+.Mobile.challenge-details .notification__icon {
+  margin-top: 2px;
+  width: 14px;
+  height: 14px;
+}
+
+.challenge-details {
+  font-family: var(--emw--font-family-primary, "Teachers"), sans-serif;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  box-sizing: border-box;
+  border-radius: 0 0 30px 30px;
+  padding: 0;
+  height: 100%;
+}
+.challenge-details .sub-page-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+}
+.challenge-details .sub-page-wrapper .sub-page {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-bottom: 24px;
+}
+.challenge-details .content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 24px 24px;
+}
+.challenge-details .breadcrumbs {
+  display: flex;
+  align-items: center;
+  margin: 4px 0 16px 0;
+  height: 36px;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.challenge-details .breadcrumbs div {
+  display: flex;
+  align-items: center;
+}
+.challenge-details .breadcrumbs .challenge-name {
+  color: var(--emw--color-gray-250, rgba(255, 255, 255, 0.15));
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-semibold, 600);
+  line-height: normal;
+  margin: 0 3px 0 10px;
+  max-width: 150px;
+}
+.challenge-details .breadcrumbs .action {
+  outline: none;
+  background: transparent;
+  border-radius: 20px;
+  border: 1.5px solid var(--emw--color-container-border, rgba(255, 255, 255, 0.0705882353));
+  background: var(--emw--color-container-background, rgba(9, 9, 9, 0.5019607843));
+  backdrop-filter: blur(6.882352829px);
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.challenge-details .breadcrumbs .action img {
+  width: 20px;
+  height: 20px;
+}
+.challenge-details .breadcrumbs .tab-name,
+.challenge-details .breadcrumbs .divider {
+  color: var(--emw--color-gray-450, #edeff2);
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-semibold, 600);
+  line-height: normal;
+  margin-left: 3px;
+}
+.challenge-details .breadcrumbs .total-number {
+  color: var(--emw--color-gray-500, rgba(255, 255, 255, 0.5));
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: normal;
+  margin-left: 3px;
+}
+.challenge-details .challenge-title {
+  color: #fff;
+  font-size: var(--emw--font-size-large-plus, 26px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-semibold, 600);
+  line-height: normal;
+  margin: 16px 0 8px 0;
+}
+.challenge-details .challenge-block {
+  border-radius: 20px;
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--block-background, rgba(9, 9, 9, 0.5));
+  backdrop-filter: blur(11.47px);
+  display: flex;
+  padding: 20px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  margin: 16px 0;
+  align-self: stretch;
+}
+.challenge-details .progress-block h3 {
+  color: var(--emw--color-white, #fff);
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-bold, 700);
+  line-height: normal;
+  margin: 0 0 10px 0;
+}
+.challenge-details .chevron-button {
+  box-sizing: border-box;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  padding: 4px 5px;
+  justify-content: center;
+  align-items: center;
+  gap: 6.923px;
+  aspect-ratio: 1/1;
+  border-radius: 27.692px;
+  border: 2px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--block-background, rgba(9, 9, 9, 0.5));
+  backdrop-filter: blur(9.52px);
+  margin-left: 4px;
+  padding: 4px 5px;
+  cursor: pointer;
+}
+.challenge-details .challenge-block-header {
+  display: flex;
+  padding-left: 4px;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  justify-content: space-between;
+}
+.challenge-details .challenge-block-header .total-levels,
+.challenge-details .challenge-block-header .total-games {
+  display: flex;
+  align-items: center;
+}
+.challenge-details .challenge-block-header .total-levels span,
+.challenge-details .challenge-block-header .total-games span {
+  color: var(--emw--dot-button-active-bg, rgba(255, 255, 255, 0.2));
+  display: inline-block;
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: normal;
+  margin-left: 4px;
+}
+.challenge-details .challenge-block-header h3 {
+  color: var(--emw--color-white, #fff);
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-bold, 700);
+  line-height: normal;
+  margin: 0;
+}
+.challenge-details .challenge-block-header p {
+  color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));
+  font-size: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: normal;
+  margin: 0;
+}
+.challenge-details .column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.challenge-details .row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  background: transparent;
+  border: none;
+}
+.challenge-details .button {
+  cursor: pointer;
+}
+.challenge-details .general-info-col {
+  width: 33%;
+}
+.challenge-details .general-info-icon {
+  margin-left: 4px;
+}
+.challenge-details .label {
+  text-transform: capitalize;
+  color: var(--emw--color-gray-400, #c9cacb);
+  font-size: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: normal;
+  margin: 0 0 3px 0;
+  line-height: 17px;
+}
+.challenge-details .description {
+  display: flex;
+  align-items: center;
+  color: var(--emw--color-white, #fff);
+  font-size: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-semibold, 600);
+  line-height: normal;
+  margin: 0;
+  line-height: 17px;
+}
+.challenge-details .description span {
+  display: inline-block;
+}
+.challenge-details .challenge-terms {
+  margin: 16px 12px 0 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.challenge-details .terms-title {
+  display: flex;
+  align-items: center;
+  color: var(--emw--background-green-color, #00b541);
+  line-height: 17px;
+  font-size: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-bold, 700);
+  border-bottom: 1px solid var(--emw--background-green-color, #00b541);
+  cursor: pointer;
+  text-underline-offset: 3px;
+  margin: 0;
+}
+.challenge-details .terms-title img {
+  margin-left: 4px;
+}
+.challenge-details .terms-description {
+  color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));
+  text-align: center;
+  font-size: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: normal;
+  margin: 6px 0;
+  line-height: 14px;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  max-height: 28px;
+  min-height: 14px;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.challenge-details .challenge-general-info {
+  padding: 20px 12px;
+  box-sizing: border-box;
+}
+.challenge-details .challenge-levels,
+.challenge-details .challenge-games,
+.challenge-details .challenge-rules {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.challenge-details .levels-row {
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  justify-content: flex-start;
+}
+.challenge-details .challenge-games {
+  margin: 0;
+}
+.challenge-details .challenge-level {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: 14px;
+  background: var(--emw--level-color-background, rgba(114, 118, 114, 0.2));
+  min-width: 153px;
+}
+.challenge-details .challenge-level .label {
+  margin-bottom: 8px;
+}
+.challenge-details .challenge-level .description {
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: 14px;
+  max-width: 130px;
+}
+.challenge-details .challenge-level img {
+  margin-right: 6px;
+}
+.challenge-details .challenge-games .games-row {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  width: 100%;
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.challenge-details .challenge-game {
+  display: flex;
+  min-width: 120px;
+  height: 84px;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 7.978px;
+  border-radius: 10.53px;
+  cursor: pointer;
+}
+.challenge-details .challenge-game img {
+  width: 100%;
+  height: auto;
+}
+.challenge-details .challenge-rules {
+  padding: 14px;
+}
+.challenge-details .challenge-rule,
+.challenge-details .challenge-event {
+  color: var(--emw--color-empty-state, rgba(255, 255, 255, 0.7));
+  font-size: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-normal, 400);
+  line-height: normal;
+}
+.challenge-details .ellipsed {
+  display: inline-block;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.challenge-details .footer {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  padding: 20px 24px 24px 24px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid var(--emw--gradient-blue, #003e5c);
+  background: var(--emw--backdrop-background, rgba(9, 9, 9, 0.8));
+  backdrop-filter: blur(16.05px);
+  border-radius: 0 0 30px 30px;
+  flex-shrink: 0;
+}
+.challenge-details .action-description {
+  font-size: var(--emw--font-size-small, 14px);
+  line-height: var(--emw--font-size-small, 14px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-semibold, 600);
+  color: var(--emw--color-white, #fff);
+}
+.challenge-details .promo-action-description {
+  background: var(--emw--action-description-background, linear-gradient(310deg, #d6ffdc 12.98%, #74b580 92.6%, #509142 131.58%));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.challenge-details .action-button {
+  border-radius: 99px;
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--color-green, #00fa5a);
+  display: flex;
+  height: 40px;
+  padding: 14px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  color: var(--emw--color-black-100, #090909);
+  font-size: var(--emw--font-size-medium, 16px);
+  font-style: normal;
+  font-weight: var(--emw--font-weight-bold, 700);
+  line-height: normal;
+}
+.challenge-details .action-button:hover {
+  border-color: var(--emw--color-gray-300, #083b17);
+  cursor: pointer;
+}
+.challenge-details .action-button.filled {
+  color: var(--emw--color-green, #00fa5a);
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--button-background-primary-color, linear-gradient(35deg, rgba(255, 255, 255, 0) 33.61%, rgba(255, 255, 255, 0.15) 89.19%)), var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background-blend-mode: overlay;
+}
+.challenge-details .action-button.filled:hover {
+  border-color: transparent;
+  box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);
+}
+.challenge-details .action-button.grayed {
+  color: var(--emw--color-gray-50, #e2e2e2);
+  background: var(--emw--color-black, #000000);
+  border-color: var(--emw--button-disabled-border-color, rgba(255, 255, 255, 0.5));
+  box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);
+}
+.challenge-details .action-button.grayed:hover {
+  color: var(--emw--color-white, #fff);
+}
+.challenge-details .action-button:disabled, .challenge-details .action-button:disabled:hover {
+  color: var(--emw--color-gray-50, #e2e2e2);
+  cursor: not-allowed;
+  border: 2px solid var(--emw--button-disabled-border-color, rgba(255, 255, 255, 0.5));
+  opacity: 0.7;
+}
+.challenge-details .expand-button {
+  outline: none;
+  border: none;
+  width: 39px;
+  height: 16px;
+  background: transparent;
+  margin: 0 auto;
+  cursor: pointer;
+}
+.challenge-details .levels-row .level {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 14px;
+  background: var(--emw--level-color-background, rgba(114, 118, 114, 0.2));
+  border: none;
+}
+.challenge-details .levels-row .level.active, .challenge-details .levels-row .level.completed {
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--level-completed-gradient, linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%));
+}
+.challenge-details .levels-row .level.active .level__title span, .challenge-details .levels-row .level.completed .level__title span {
+  color: var(--emw--color-white, #fff);
+}
+.challenge-details .levels-row .level.suspended {
+  border: 1px solid var(--emw--color-gray-300, rgba(255, 255, 255, 0.07));
+  background: var(--emw--color-level-suspended rgba(9, 9, 9, 0.4));
+}
+.challenge-details .levels-row .level.suspended .level__status .suspended {
+  color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));
+  font-weight: 400;
+}
+.challenge-details .levels-row .level.suspended .level__title span {
+  color: var(--emw--color-white, #fff);
+}
+.challenge-details .levels-row .level.forfeited {
+  background: var(--emw--color-level-color-background, rgba(114, 118, 114, 0.2));
+  border: none;
+  color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));
+}
+.challenge-details .levels-row .level.forfeited .level__title span {
+  color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));
+}
+.challenge-details .levels-row .level.forfeited .level__target,
+.challenge-details .levels-row .level.forfeited .level__value {
+  color: var(--emw--color-level-status-suspended, rgba(255, 255, 255, 0.5));
+}
+.challenge-details .levels-row .level__status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-semibold, 600);
+}
+.challenge-details .levels-row .level__title {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--emw--color-white, #fff);
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weight-semibold, 600);
+  line-height: 17px;
+  margin-bottom: 8px;
+}
+.challenge-details .levels-row .level__title span {
+  color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));
+}
+.challenge-details .levels-row .level__title .completed {
+  background: var(--emw--action-description-background, linear-gradient(310deg, #d6ffdc 12.98%, #74b580 92.6%, #509142 131.58%));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.challenge-details .levels-row .level__title .completed, .challenge-details .levels-row .level__title .in-progress {
+  color: var(--emw--border-success-color, #00b74f);
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-medium, 500);
+  text-align: right;
+  line-height: 17px;
+}
+.challenge-details .levels-row .level__progress {
+  width: 100%;
+  margin-bottom: 10px;
+}
+.challenge-details .levels-row .level__icon {
+  display: flex;
+  opacity: 1;
+}
+.challenge-details .levels-row .level__icon img {
+  display: block;
+  width: 12px;
+  height: 12px;
+  margin: 4px 6px 0 0;
+}
+.challenge-details .levels-row .level__icon img.grayed {
+  opacity: 0.5;
+}
+.challenge-details .levels-row .level__bonus, .challenge-details .levels-row .level__target {
+  display: flex;
+  align-items: flex-start;
+  color: var(--emw--color-white, #fff);
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-medium, 500);
+  line-height: 22px;
+}
+.challenge-details .levels-row .level__bonus {
+  margin-bottom: 6px;
+}
+.challenge-details .levels-row .level__value {
+  color: var(--emw--color-white, #fff);
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-medium, 500);
+  line-height: 22px;
+  width: 100%;
+}
+.challenge-details .notification {
+  display: flex;
+  align-items: flex-start;
+  border-radius: var(--emw--border-radius-small, 12px);
+  background: rgba(188, 252, 177, 0.1);
+  display: flex;
+  padding: 20px 16px;
+  align-items: flex-start;
+  gap: 10px;
+  margin: 16px 0;
+}
+.challenge-details .notification__icon {
+  width: 18px;
+  height: 18px;
+}
+.challenge-details .notification__message, .challenge-details .notification__title {
+  color: var(--emw--color-white-150, rgba(255, 255, 255, 0.7));
+  font-size: var(--emw--font-size-medium, 16px);
+  font-weight: var(--emw--font-weight-normal, 400);
+}
+.challenge-details .notification__title {
+  background: var(--emw--color-notification-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.challenge-details .notification__column {
+  display: flex;
+  flex-direction: column;
+}
+
+@container challenges-drawer (width <=500px) {
+  .challenge-details .content,
+  .challenge-details .sub-page-wrapper {
+    padding: 0 20px;
+  }
+}
+@container challenges-drawer (width <=475px) {
+  .challenge-details .challenge-title {
+    margin: 0 0 4px;
+  }
+  .challenge-details .challenge-block {
+    margin: 12px 0;
+  }
+  .challenge-details .challenge-levels,
+  .challenge-details .challenge-games,
+  .challenge-details .challenge-rules {
+    padding: 12px;
+  }
+}
+@container challenges-drawer (width <=400px) {
+  .challenge-details .content,
+  .challenge-details .sub-page-wrapper {
+    padding: 0 15px;
+  }
+}
+@container challenges-drawer (width <= 480px) {
+  .footer .action-description {
+    font-size: var(--emw--font-size-xs-small, 13px);
+  }
+  .challenge-details .footer {
+    padding: 20px 15px 24px;
+  }
+}
+@container challenges-drawer (width <= 440px) {
+  .challenge-details .footer {
+    padding: 15px;
+  }
+}
+@container challenges-game-page (height <= 850px) {}