@charset "UTF-8";
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
ul,
p,
a,
h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}

body {
  font-family: "WorkSans", sans-serif;
  font-weight: 400;
  margin-top: 80px;
}

h1,
h2,
h3 {
  font-family: "LuckiestGuy", sans-serif;
  font-weight: 400;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.btn {
  border: none;
  outline: none;
  background: transparent;
  transition: all 0.25s ease-in-out;
}

.bg-clr-white {
  background-color: #fff;
}

.bg-clr-neutral-900 {
  background-color: #242424;
}

.bg-clr-magenta-300 {
  background-color: #F48FA6;
}

.bg-clr-magenta-500 {
  background-color: #E5087F;
}

.bg-clr-magenta-600 {
  background-color: #FC2761;
}

.bg-clr-blue-500 {
  background-color: #00B4A5;
}

.bg-clr-lightpurple-500 {
  background-color: #A73EEF;
}

.bg-clr-purple-100 {
  background-color: #CCA8CF;
}

.bg-clr-purple-150 {
  background-color: #CDAED6;
}

.bg-clr-purple-300 {
  background-color: #9D7FB9;
}

.bg-clr-purple-500 {
  background-color: #5D3090;
}

.bg-clr-purple-550 {
  background-color: #682A8B;
}

.bg-clr-orange-500 {
  background-color: #ffad5a;
}

.bg-clr-orange-600 {
  background-color: #F66A2D;
}

.bg-clr-purple-100 {
  background-color: #CCA8CF;
}

.bg-clr-yellow-500 {
  background-color: #F2950C;
}

.clr-yellow-500 {
  color: #F2950C;
}

.clr-white {
  color: #fff;
}

.clr-black {
  color: #000;
}

.clr-purple-500 {
  color: #5D3090;
}

.clr-purple-550 {
  color: #682A8B;
}

.clr-magenta-500 {
  color: #E5087F;
}

.clr-blue-500 {
  color: #00B4A5;
}

.border-clr-white {
  border-color: #fff;
}

.border-clr-black {
  border-color: #000;
}

.border-clr-purple-500 {
  border-color: #5D3090;
}

.border-clr-purple-550 {
  border-color: #682A8B;
}

.border-clr-magenta-500 {
  border-color: #E5087F;
}

.hover-bg-clr-magenta-300:hover {
  color: #000;
  background-color: #F48FA6;
}

.hover-bg-clr-magenta-500:hover {
  background-color: #E5087F;
}

.hover-bg-clr-blue-500:hover {
  background-color: #00B4A5;
}

.hover-bg-clr-purple-100:hover {
  background-color: #CCA8CF;
}

.hover-bg-clr-purple-300:hover {
  background-color: #9D7FB9;
}

.hover-bg-clr-purple-500:hover {
  background-color: #5D3090;
}

.hover-bg-clr-purple-550:hover {
  background-color: #682A8B;
}

.hover-bg-clr-orange-500:hover {
  background-color: #ffad5a;
}

.hover-bg-clr-purple-100:hover {
  background-color: #CCA8CF;
}

.font-italic {
  font-style: italic;
}

.campaign-past {
  background-color: #F48FA6;
}
.campaign-past .card-header-title {
  color: #000;
}

.campaign-present {
  background-color: #00B4A5;
}
.campaign-present .card-header-title {
  color: #fff;
  font-weight: 700;
}

.campaign-future {
  background-color: #ffad5a;
}
.campaign-future .card-header-title {
  color: #000;
}

.flip {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.center {
  margin-inline: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.form-check-input:focus,
.form-control:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

section {
  padding: 40px 0;
  scroll-margin-top: 80px;
}
@media (min-width: 768px) {
  section {
    padding: 50px 0 64px;
  }
}
section .section-headline,
section .section-description {
  width: 100%;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}
section .section-headline {
  font-family: "LuckiestGuy", sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  section .section-headline {
    font-size: 2rem;
  }
}
section .section-description {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  section .section-description {
    margin-bottom: 40px;
  }
}
section .section-cta {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
section .section-disclaimer {
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  section .section-disclaimer {
    max-width: 800px;
    margin: 0 auto;
  }
}
section .section-disclaimer a {
  color: inherit;
  text-decoration: underline;
  transition: all 0.25s ease-in-out;
}
section .section-disclaimer a:hover {
  text-decoration: none;
}

header {
  width: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
header .header-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  font-family: "LuckiestGuy", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  position: relative;
  gap: 20px;
}
header .header-inner .logo {
  width: 120px;
  height: 26px;
  object-fit: contain;
}
header .header-inner nav {
  display: none;
  width: 100%;
  height: calc(100svh - 80px);
  position: fixed;
  top: 80px;
  left: 0;
  background-color: #000;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 2.5svh 0 32px;
  overflow-y: auto;
  gap: 20px;
}
@media (min-width: 768px) {
  header .header-inner nav {
    width: unset;
    height: unset;
    min-height: unset;
    position: unset;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    overflow-y: unset;
  }
}
header .header-inner nav .nav-menu {
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: center;
  gap: 3svh;
  text-align: center;
  flex: 1;
  order: 1;
}
@media (min-width: 768px) {
  header .header-inner nav .nav-menu {
    flex-direction: row;
  }
}
@media (min-width: 990px) {
  header .header-inner nav .nav-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 50px;
  }
}
header .header-inner nav .nav-menu li a {
  color: #fff;
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.2;
  transition: all 0.25s ease-in-out;
}
@media (min-width: 768px) {
  header .header-inner nav .nav-menu li a {
    font-size: 0.875rem;
  }
}
header .header-inner nav .nav-menu li a:hover {
  color: #E5087F;
}
header .header-inner nav .menu-card {
  order: 2;
  width: 100%;
  border-radius: 0;
  border: none;
  min-height: 180px;
  margin: 0;
}
@media (min-width: 768px) {
  header .header-inner nav .menu-card {
    margin: 20px 0;
  }
}
header .header-inner nav .menu-card .card-header {
  display: none;
  border-radius: 0;
}
header .header-inner nav .menu-card .card-header .card-header-title-wrapper .card-header-left-icon {
  display: none;
}
header .header-inner nav .menu-card .card-header .card-header-title-wrapper .card-header-title {
  color: #fff;
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  header .header-inner nav .menu-card .card-header {
    display: block;
  }
}
header .header-inner nav .menu-card .card-body ul li {
  width: fit-content;
  margin-inline: auto;
}
header .header-inner nav .menu-card .card-body ul li .menu-link {
  color: #fff;
  transition: all 0.25s ease-in-out;
  font-family: "LuckiestGuy", sans-serif;
  text-transform: uppercase;
  font-size: 1.25rem;
}
header .header-inner nav .menu-card .card-body ul li .menu-link:hover, header .header-inner nav .menu-card .card-body ul li .menu-link.active {
  color: #000;
}
header .header-inner nav .menu-card .card-body ul li .menu-link.active {
  padding-right: 32px;
  position: relative;
}
header .header-inner nav .menu-card .card-body ul li .menu-link.active::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -12px;
  width: 32px;
  height: 20px;
  background-image: url("../assets/menu-link-arrow-icon.png");
  background-repeat: no-repeat;
  background-size: contain;
}
header .header-inner nav .menu-card .card-footer {
  font-family: "WorkSans", sans-serif;
  text-align: center;
  border-radius: 0;
}
header .header-inner nav .menu-card .card-footer div {
  margin-inline: auto;
}
header .header-inner nav .menu-card .card-footer div a {
  color: #000;
  text-decoration: underline;
  transition: all 0.25s ease-in-out;
}
header .header-inner nav .menu-card .card-footer div a:hover {
  text-decoration: none;
}
header .header-inner nav .nav-auth-social-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7.5svh;
  order: 3;
}
header .header-inner nav .nav-auth-social-container .auth-container ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
header .header-inner nav .nav-auth-social-container .auth-container ul li .login-button {
  color: #fff;
  transition: all 0.25s ease-in-out;
}
header .header-inner nav .nav-auth-social-container .auth-container ul li .login-button:hover {
  color: #E5087F;
}
header .header-inner nav .nav-auth-social-container .auth-container ul li .signup-button {
  min-width: 150px;
}
header .header-inner nav .nav-auth-social-container .header-social {
  display: block;
}
header .header-inner nav .nav-auth-social-container .header-social ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
header .header-inner nav .nav-auth-social-container .header-social ul li a img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
@media (min-width: 768px) {
  header .header-inner nav .nav-auth-social-container .header-social {
    display: none;
  }
}
header .header-inner nav.show {
  display: flex;
}
header .header-inner .hamburger-button {
  display: block;
  width: 46px;
  height: 20px;
  position: relative;
  cursor: pointer;
}
@media (min-width: 768px) {
  header .header-inner .hamburger-button {
    display: none;
  }
}
header .header-inner .hamburger-button.open .hamburger-bar-top,
header .header-inner .hamburger-button.open .hamburger-bar-bottom {
  top: 50%;
  translate: 0 -50%;
  transition: all 0.25s ease-in-out;
}
header .header-inner .hamburger-button.open .hamburger-bar-top {
  rotate: 45deg;
}
header .header-inner .hamburger-button.open .hamburger-bar-bottom {
  rotate: -45deg;
}
header .header-inner .hamburger-button .hamburger-bar {
  width: 46px;
  height: 6px;
  background-color: #9D7FB9;
  box-shadow: 0 1px 0 #682A8B;
  display: block;
  border-radius: 99px;
  position: absolute;
  left: 0;
}
header .header-inner .hamburger-button .hamburger-bar-top,
header .header-inner .hamburger-button .hamburger-bar-bottom {
  transition: all 0.25s ease-in-out;
}
header .header-inner .hamburger-button .hamburger-bar-top {
  top: 0;
}
header .header-inner .hamburger-button .hamburger-bar-bottom {
  bottom: 0;
}

.cards-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-inline: auto;
}

.card {
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  z-index: 2;
}
.card .card-header {
  display: flex;
  flex-direction: column;
}
.card .card-header .card-header-title-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.card .card-header .card-header-title-wrapper .dots-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  float: left;
}
.card .card-header .card-header-title-wrapper .dots-container .dot {
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  display: block;
}
.card .card-header .card-header-title-wrapper .dots-container.small-dots {
  gap: 2px;
}
.card .card-header .card-header-title-wrapper .dots-container.small-dots .dot {
  width: 4px;
  height: 4px;
}
.card .card-header .card-header-title-wrapper .dots-container.large-dots {
  gap: 4px;
}
.card .card-header .card-header-title-wrapper .dots-container.large-dots .dot {
  width: 12px;
  height: 12px;
}
.card .card-header .card-header-title-wrapper .card-header-left-icon,
.card .card-header .card-header-title-wrapper .card-header-right-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.card .card-header .card-header-title-wrapper .card-header-left-icon img,
.card .card-header .card-header-title-wrapper .card-header-right-icon img {
  width: 16px;
  height: 24px;
  object-fit: contain;
}
.card .card-header .card-header-title-wrapper .card-header-left-icon {
  left: 0;
}
.card .card-header .card-header-title-wrapper .card-header-right-icon {
  right: 0;
}
.card .card-header .card-header-title-wrapper .card-header-title {
  max-width: fit-content;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-inline: auto;
  text-align: center;
}
.card .card-header .card-header-description {
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  width: 100%;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .card .card-header .card-header-description {
    max-width: 744px;
    margin-inline: auto;
  }
}
.card .card-header,
.card .card-footer {
  padding: 6px 14px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}
.card .card-header {
  border-bottom: 1px solid #000;
}
.card .card-footer {
  border-top: 1px solid #000;
}
.card .card-body {
  padding: 12px 12px 20px;
}
.card .card-body .card-image {
  width: 50%;
  height: auto;
  display: block;
  margin-inline: auto;
}
.card .card-body .card-content {
  padding: 20px 20px 12px;
}
.card .card-body .card-content .card-headline {
  font-family: "LuckiestGuy", sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 8px;
}
.card .card-body .card-content .card-description {
  font-size: 1rem;
  line-height: 1.4;
}

.stack-card-wrapper {
  --offset-stack-card: 4px;
  flex: 0 0 auto;
  width: 95%;
}
.stack-card-wrapper .card-container {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 20px;
}
.stack-card-wrapper .card-container .card .card-header,
.stack-card-wrapper .card-container .card .card-footer {
  height: 32px;
}
.stack-card-wrapper .card-container .stack-card {
  width: 100%;
  height: 100%;
  position: absolute;
  top: calc(var(--index) * var(--offset-stack-card));
  left: calc(var(--index) * var(--offset-stack-card));
  z-index: calc(-1 * var(--index));
  transition: all 0.25s ease-in-out;
}
.stack-card-wrapper .card-container .stack-card .card-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.stack-card-wrapper .card-container:hover .stack-card {
  top: 0;
  left: 0;
}
.stack-card-wrapper .card-cta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.button {
  --btn-border-radius: 8px;
  width: 100%;
  max-width: 176px;
  height: 36px;
  display: flex;
  justify-content: center;
  border-radius: var(--btn-border-radius);
  font-size: 1rem;
  border-width: 1px;
  border-style: solid;
  font-family: "LuckiestGuy", sans-serif;
}
.button:hover {
  color: #fff;
  box-shadow: none;
  position: relative;
  top: 4px;
  left: 4px;
}
.button:disabled {
  background-color: gray !important;
  color: #000;
}

.button-shadow-black {
  box-shadow: 4px 4px 0 #000;
}

.button-shadow-white {
  box-shadow: 4px 4px 0 #fff;
}

.accordion {
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  background: transparent;
  margin-top: 40px;
}
.accordion .accordion-item {
  background: transparent;
  border: none;
  outline: none;
}
.accordion .accordion-item .accordion-header {
  border: none;
}
.accordion .accordion-item .accordion-header .accordion-button {
  --bs-accordion-btn-icon-width: 1rem;
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  box-shadow: none;
  font-family: "LuckiestGuy", sans-serif;
  font-size: 1.375rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1642 12.0858L11.75 13.5L0.436292 2.18629L1.85051 0.772078L13.1642 12.0858Z' fill='%23F48FA6'/%3E%3Cpath d='M13.1642 12.0858L11.75 13.5L0.436292 2.18629L1.85051 0.772078L13.1642 12.0858Z' fill='%23F48FA6'/%3E%3Cpath d='M0.335786 12.0858L1.75 13.5L13.0637 2.18629L11.6495 0.772078L0.335786 12.0858Z' fill='%23F48FA6'/%3E%3Cpath d='M0.335786 12.0858L1.75 13.5L13.0637 2.18629L11.6495 0.772078L0.335786 12.0858Z' fill='%23F48FA6'/%3E%3C/svg%3E%0A");
}
.accordion .accordion-item .accordion-header .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0352 16.1719L8.03516 16.1719L8.03516 0.171875L10.0352 0.171875L10.0352 16.1719Z' fill='%23F48FA6'/%3E%3Cpath d='M10.0352 16.1719L8.03516 16.1719L8.03516 0.171875L10.0352 0.171875L10.0352 16.1719Z' fill='%23F48FA6'/%3E%3Cpath d='M0.964844 7.10059L0.964844 9.10059L16.9648 9.10059L16.9648 7.10059L0.964844 7.10059Z' fill='%23F48FA6'/%3E%3Cpath d='M0.964844 7.10059L0.964844 9.10059L16.9648 9.10059L16.9648 7.10059L0.964844 7.10059Z' fill='%23F48FA6'/%3E%3C/svg%3E%0A");
}
.accordion .accordion-item .accordion-collapse .accordion-body {
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
}
.accordion .accordion-item .accordion-collapse .accordion-body a {
  color: #fff;
  text-decoration: underline;
}
.accordion .accordion-item .accordion-collapse .accordion-body a:hover {
  text-decoration: none;
}

footer {
  padding: 40px 0;
}
@media (min-width: 768px) {
  footer {
    padding: 48px 0;
  }
}
footer .footer-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
footer .footer-inner .footer-social ul {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  gap: 16px;
}
footer .footer-inner .footer-social ul li a img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
footer .footer-inner .footer-social ul li a .footer-logo {
  width: 76px;
  height: 60px;
  object-fit: contain;
}
footer .footer-inner .footer-links {
  --gap: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}
@media (min-width: 768px) {
  footer .footer-inner .footer-links {
    --gap: 80px;
    flex-direction: row;
  }
}
footer .footer-inner .footer-links .title {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
footer .footer-inner .footer-links ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
@media (min-width: 768px) {
  footer .footer-inner .footer-links ul {
    flex-direction: row;
    justify-content: center;
  }
}
footer .footer-inner .footer-links ul li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
footer .footer-inner .footer-links ul li a span {
  color: #9D7FB9;
  text-decoration: underline;
  transition: all 0.25s ease-in-out;
}
footer .footer-inner .footer-links ul li a .icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
footer .footer-inner .footer-links ul li a:hover span {
  color: #fff;
}
footer .footer-inner .footer-copyright {
  color: #fff;
  text-align: center;
}
footer .footer-inner .footer-copyright a {
  color: #fff;
  text-decoration: underline;
  text-transform: uppercase;
}

.auth-section {
  padding: 0;
  background-image: url("../assets/black-frame.png");
  background-repeat: repeat;
  background-position: bottom center;
}
.auth-section .auth-section-inner {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
@media (min-width: 768px) {
  .auth-section .auth-section-inner {
    background-position: center center;
    background-size: cover;
  }
}

.auth-section-blue .auth-section-inner,
.auth-section-light-magenta .auth-section-inner,
.auth-section-orange .auth-section-inner {
  background-image: url("../assets/auth-section-mobile-bg-icons-purple.png");
}

.auth-section-blue {
  background-color: #00B4A5;
}

.auth-section-light-magenta {
  background-color: #F48FA6;
}

@media (min-width: 768px) {
  .auth-section-blue .auth-section-inner,
  .auth-section-light-magenta .auth-section-inner {
    background-image: url("../assets/auth-section-desktop-bg-icons-purple.png");
  }
}

.auth-section-orange {
  background-color: #ffad5a;
}
@media (min-width: 768px) {
  .auth-section-orange .auth-section-inner {
    background-image: url("../assets/auth-section-desktop-bg-icons-blue.png");
  }
}

.auth-section .auth-section-inner {
  padding: 48px 20px 56px;
}
@media (min-width: 768px) {
  .auth-section .auth-section-inner {
    padding: 90px 20px 112px;
  }
}
.auth-section .auth-section-inner .auth-card {
  width: 100%;
  max-width: 787px;
  margin-inline: auto;
  border-radius: 10px;
  overflow: hidden;
}
.auth-section .auth-section-inner .auth-card .auth-card-header {
  width: 100%;
  padding: 20px;
}
@media (min-width: 768px) {
  .auth-section .auth-section-inner .auth-card .auth-card-header {
    padding: 12px 24px;
  }
}
.auth-section .auth-section-inner .auth-card .auth-card-header .auth-card-title {
  font-family: "LuckiestGuy", sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  flex: 1;
}
.auth-section .auth-section-inner .auth-card .auth-card-body {
  padding: 20px 16px;
}
.auth-section .auth-section-inner .auth-card .auth-card-body .auth-card-body-inner {
  width: 100%;
  margin-inline: auto;
}
.auth-section .auth-section-inner .auth-card .auth-card-body .auth-card-body-inner.width-sm {
  max-width: 335px;
}
.auth-section .auth-section-inner .auth-card .auth-card-body .auth-card-body-inner.width-lg {
  max-width: 618px;
}
.auth-section .auth-section-inner .auth-card .auth-card-body .auth-card-body-inner .auth-card-description {
  font-size: 1rem;
  text-align: center;
}
.auth-section .auth-section-inner .auth-card .auth-card-body .auth-card-body-inner .auth-card-form {
  margin-top: 30px;
}
.auth-section .auth-section-inner .auth-card .auth-card-footer {
  padding: 20px 16px;
}
@media (min-width: 768px) {
  .auth-section .auth-section-inner .auth-card .auth-card-footer {
    padding: 16px;
  }
}
.auth-section .auth-section-inner .auth-card .auth-card-footer .auth-card-footer-inner {
  color: #000;
  font-size: 0.875rem;
  display: block;
  text-align: center;
  margin-inline: auto;
}
.auth-section .auth-section-inner .auth-card .auth-card-footer .auth-card-footer-inner a {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
  transition: all 0.25s ease-in-out;
}
.auth-section .auth-section-inner .auth-card .auth-card-footer .auth-card-footer-inner a:hover {
  text-decoration: none;
}

.swiper {
  width: 100%;
  height: 100%;
}
.swiper .swiper-wrapper {
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .swiper .swiper-wrapper {
    padding-bottom: 0;
  }
}
.swiper .swiper-wrapper .swiper-slide .slider-image {
  width: 100%;
  height: auto;
}
.swiper .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper .swiper-pagination .swiper-pagination-bullet-active,
.swiper .swiper-pagination .swiper-pagination-bullet {
  width: 58px;
  border-radius: 12px;
  border: 1px solid #000;
  opacity: 1;
}
.swiper .swiper-pagination .swiper-pagination-bullet {
  height: 12px;
  background-color: #9D7FB9;
}
.swiper .swiper-pagination .swiper-pagination-bullet-active {
  height: 20px;
  background-color: #E5087F;
}

.form .form-text {
  color: inherit;
}
.form .form-label {
  font-size: 0.875rem;
  font-weight: 600;
  padding-left: 14px;
  margin-bottom: 4px;
}
.form .form-control {
  border-radius: 99px;
  border: 1px solid #000;
}
.form .form-control:disabled {
  --bs-secondary-bg: grey !important;
}
.form .form-extra a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  transition: all 0.25s ease-in-out;
}
.form .form-extra a:hover {
  text-decoration: none;
}
.form .form-check {
  font-size: 0.875rem;
  padding-left: 2.2rem;
}
.form .form-check a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  transition: all 0.25s ease-in-out;
}
.form .form-check a:hover {
  text-decoration: none;
}
.form .form-check .custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #000;
  border-radius: 0.25em;
  background: transparent;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  position: relative;
  cursor: pointer;
}
.form .form-check .custom-checkbox:checked {
  background-color: #F48FA6;
  border-color: #F48FA6;
}
.form .form-check .custom-checkbox:checked::before {
  content: "✓";
  display: block;
  color: white;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  line-height: 1.25em;
  font-size: 0.875em;
  font-weight: 700;
}
.form .form-check label {
  padding: 0.2rem 0 0 0.5rem;
}
.form .form-disclaimer {
  font-size: 12px;
  max-width: 630px;
  padding: 5px;
}
.form .form-disclaimer a {
  color: #000;
  text-decoration: underline;
}
.form .form-disclaimer a:hover {
  text-decoration: none;
}
.form .form-submit {
  margin-top: 30px;
}
.form .form-submit button {
  margin-inline: auto;
}

.ranking-wrapper {
  width: 100%;
  border: 1px solid #000;
  border-radius: 9px;
  overflow: hidden;
}
.ranking-wrapper .ranking-header {
  padding: 20px 12px;
  color: inherit;
}
.ranking-wrapper .ranking-header .week-selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.ranking-wrapper .ranking-header .week-selector .week-title {
  font-family: "LuckiestGuy", sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.2;
  color: inherit;
}
.ranking-wrapper .ranking-header .week-selector .week-selector-button {
  border: none;
  outline: none;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #000;
  padding: 4px 10px;
}
.ranking-wrapper .ranking-header .week-selector .week-selector-button img {
  width: 32px;
  height: 22px;
  object-fit: contain;
}
.ranking-wrapper .ranking-header .week-selector .week-selector-button:disabled {
  background-color: grey;
}
.ranking-wrapper .ranking-header .week-interval {
  text-align: center;
  margin-top: 12px;
}
.ranking-wrapper .ranking-body {
  padding-bottom: 0;
}
.ranking-wrapper .ranking-body .ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: auto;
  max-height: 320px;
  overflow: auto;
  padding-bottom: 20px;
}
.ranking-wrapper .ranking-body .ranking-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.ranking-wrapper .ranking-body .ranking-list li .user-details {
  flex: 1;
  padding: 4px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  border: 1px solid #000;
}
.ranking-wrapper .ranking-body .ranking-list li .user-details .user-profile,
.ranking-wrapper .ranking-body .ranking-list li .user-details .user-points {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ranking-wrapper .ranking-body .ranking-list .ranking-list-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  position: sticky;
}
.ranking-wrapper .ranking-body .ranking-list .ranking-list-head > * {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.ranking-wrapper .ranking-body .ranking-list .ranking-list-head > * > * {
  width: 33.33%;
}
.ranking-wrapper .ranking-body .ranking-list .ranking-list-head > * > *:last-child {
  width: 10%;
}
.ranking-wrapper .ranking-body .ranking-list .ranking-list-head > *:first-child {
  flex: unset;
  width: 32px;
  height: 32px;
}
.ranking-wrapper .ranking-body .user-place {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "LuckiestGuy", sans-serif;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #000;
}
.ranking-wrapper .ranking-body .user-avatar {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 50%;
}
.ranking-wrapper .ranking-body .user-prize {
  color: #fff;
}
.ranking-wrapper .ranking-body .user-points {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ranking-wrapper .ranking-body .user-points .coin {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.ranking-wrapper .ranking-body .user-points span {
  font-family: "LuckiestGuy", sans-serif;
  font-size: 1.125rem;
}
.ranking-wrapper .ranking-footer {
  padding: 12px;
}

.validation-alert {
  color: #000;
  margin: 4px 0 0 14px;
  font-size: 0.75rem;
  font-style: italic;
}

.message-info {
  display: block;
  max-width: 500px;
  padding: 10px;
  color: #000;
  font-weight: bold;
  text-align: center;
  border: 1px solid #000;
  margin: 0 auto 20px;
}

.alert {
  display: none;
}

#daily_streaks_modal .modal-dialog {
  max-width: 712px;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-header .modal-title {
  font-family: "WorkSans", sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-header,
#daily_streaks_modal .modal-dialog .modal-content .modal-footer {
  border: none;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body {
  padding: 0 0 20px;
  overflow: hidden;
}
@media (min-width: 768px) {
  #daily_streaks_modal .modal-dialog .modal-content .modal-body {
    padding: 0 0 40px;
  }
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-image-wrapper {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 16px;
  padding-inline: 1rem;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-image-wrapper .daily-streaks-image {
  width: 116px;
  height: auto;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-image-wrapper .daily-streaks-number-wrapper {
  color: #fff;
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-image-wrapper .daily-streaks-number-wrapper .daily-streaks-number {
  font-family: "LuckiestGuy", sans-serif;
  font-size: 1.5rem;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-image-wrapper .daily-streaks-number-wrapper .daily-streaks-label {
  font-size: 0.65rem;
  text-transform: uppercase;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .modal-description {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 16px;
  padding-inline: 1rem;
}
@media (min-width: 768px) {
  #daily_streaks_modal .modal-dialog .modal-content .modal-body .modal-description {
    max-width: 440px;
  }
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .modal-description .currency-icon {
  width: 14px;
  height: auto;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel {
  width: 100%;
  height: 100%;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
  margin-inline: auto;
}
@media (min-width: 768px) {
  #daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel::before, #daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel::after {
    content: "";
    position: absolute;
    width: 64px;
    height: 100%;
    top: 0;
    z-index: 5;
  }
  #daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel::before {
    left: 0;
    background: linear-gradient(to right, #9D7FB9, rgba(0, 0, 0, 0));
  }
  #daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel::after {
    right: 0;
    background: linear-gradient(to left, #9D7FB9, rgba(0, 0, 0, 0));
  }
}
@media (min-width: 768px) {
  #daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel {
    margin-bottom: 44px;
  }
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 40px;
  padding-inline: 20px;
  padding-bottom: 20px;
  overflow-x: auto;
}
@media (min-width: 768px) {
  #daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper {
    padding-inline: 72px;
    padding-bottom: 32px;
  }
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item {
  width: fit-content;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .current-day {
  background-color: #242424;
  padding: 4px 16px;
  color: #fff;
  font-size: 0.5rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .day-label {
  text-align: center;
  text-transform: uppercase;
  font-size: 0.625rem;
  margin-bottom: 8px;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .daily-streak-icon {
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #6abe36;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .daily-streak-icon img {
  width: 24px;
  height: auto;
  object-fit: contain;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .streak-checked {
  background-color: #6abe36;
  position: relative;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .streak-unchecked {
  background-color: #db2625;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .daily-streak-date {
  font-family: "LuckiestGuy", sans-serif;
  font-size: 2rem;
  color: #000;
  line-height: 1.4;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .linking-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 8px;
  background-color: #6abe36;
  z-index: 5;
  border-color: #000;
  border-style: solid;
  border-width: 1px 0 1px 0;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .linking-bar-left {
  left: -35px;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .daily-streaks-carousel .daily-streaks-carousel-wrapper .daily-streaks-carousel-item .linking-bar-right {
  right: -35px;
}
#daily_streaks_modal .modal-dialog .modal-content .modal-body .modal-close-button {
  margin-inline: auto;
}

#change_avatar_modal .modal-dialog .modal-content .modal-header .modal-title {
  text-align: center;
}
#change_avatar_modal .modal-dialog .modal-content .modal-header,
#change_avatar_modal .modal-dialog .modal-content .modal-footer {
  border: none;
}
#change_avatar_modal .modal-dialog .modal-content .modal-body .modal-avatar {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: 50%;
  border: 2px solid #000;
}

.password-input-wrapper {
  position: relative;
}
.password-input-wrapper input {
  padding-right: 16px !important;
}
.password-input-wrapper .toggle-password-button {
  background: transparent;
  position: absolute;
  border: none;
  outline: none;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  bottom: 8px;
  width: 28px;
  height: 20px;
}
.password-input-wrapper .toggle-password-button .icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  display: block;
}
.password-input-wrapper .toggle-password-button .icon-eye {
  background-image: url("../assets/eye.svg");
}
.password-input-wrapper .toggle-password-button .icon-eye-slash {
  background-image: url("../assets/eye-slash.svg");
}

#slider_joaca,
#hero_game {
  background-image: url("../assets/active-campaign/active-campaign-hero-bg-mobile.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  padding: 0;
}
@media (min-width: 768px) {
  #slider_joaca,
  #hero_game {
    background-size: cover;
    background-position: center center;
    background-image: url("../assets/active-campaign/active-campaign-hero-bg-desktop.png");
  }
}
#slider_joaca .hero-inner,
#hero_game .hero-inner {
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) and (max-width: 990px) {
  #slider_joaca .hero-inner .container,
  #hero_game .hero-inner .container {
    max-width: unset;
  }
  #slider_joaca .hero-inner .container .hero-content,
  #hero_game .hero-inner .container .hero-content {
    max-width: 332px;
  }
}
#slider_joaca .hero-inner .hero-content,
#hero_game .hero-inner .hero-content {
  color: #fff;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 64px 0 480px 0;
}
@media (min-width: 768px) {
  #slider_joaca .hero-inner .hero-content,
  #hero_game .hero-inner .hero-content {
    margin: 0 auto 0 0;
    padding: 140px 0;
  }
}
@media (min-width: 990px) {
  #slider_joaca .hero-inner .hero-content,
  #hero_game .hero-inner .hero-content {
    max-width: 440px;
  }
}
@media (min-width: 1440px) {
  #slider_joaca .hero-inner .hero-content,
  #hero_game .hero-inner .hero-content {
    max-width: 560px;
  }
}
#slider_joaca .hero-inner .hero-content .hero-headline,
#slider_joaca .hero-inner .hero-content .hero-description,
#hero_game .hero-inner .hero-content .hero-headline,
#hero_game .hero-inner .hero-content .hero-description {
  text-align: center;
}
@media (min-width: 768px) {
  #slider_joaca .hero-inner .hero-content .hero-headline,
  #slider_joaca .hero-inner .hero-content .hero-description,
  #hero_game .hero-inner .hero-content .hero-headline,
  #hero_game .hero-inner .hero-content .hero-description {
    text-align: left;
  }
}
#slider_joaca .hero-inner .hero-content .hero-headline,
#hero_game .hero-inner .hero-content .hero-headline {
  font-size: clamp(1svh, 2.5rem, 3svh);
  line-height: 1.2;
  font-family: "LuckiestGuy", sans-serif;
  text-transform: uppercase;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  #slider_joaca .hero-inner .hero-content .hero-headline,
  #hero_game .hero-inner .hero-content .hero-headline {
    font-size: clamp(1svh, 2.5rem, 4svh);
  }
}
#slider_joaca .hero-inner .hero-content .hero-description,
#hero_game .hero-inner .hero-content .hero-description {
  margin-bottom: 40px;
}
#slider_joaca .hero-inner .hero-content .hero-cta,
#hero_game .hero-inner .hero-content .hero-cta {
  gap: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  #slider_joaca .hero-inner .hero-content .hero-cta > *:nth-child(1), #slider_joaca .hero-inner .hero-content .hero-cta > *:nth-child(2),
  #hero_game .hero-inner .hero-content .hero-cta > *:nth-child(1),
  #hero_game .hero-inner .hero-content .hero-cta > *:nth-child(2) {
    flex: 1;
    max-width: unset;
  }
  #slider_joaca .hero-inner .hero-content .hero-cta > *:nth-child(3),
  #hero_game .hero-inner .hero-content .hero-cta > *:nth-child(3) {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  #slider_joaca .hero-inner .hero-content .hero-cta,
  #hero_game .hero-inner .hero-content .hero-cta {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}
#slider_joaca .hero-inner .hero-image-container,
#hero_game .hero-inner .hero-image-container {
  width: 100%;
  min-width: 450px;
  max-width: 460px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
}
@media (min-width: 768px) {
  #slider_joaca .hero-inner .hero-image-container,
  #hero_game .hero-inner .hero-image-container {
    left: auto;
    right: -5%;
    margin-inline: 0;
  }
}
@media (min-width: 990px) {
  #slider_joaca .hero-inner .hero-image-container,
  #hero_game .hero-inner .hero-image-container {
    right: 2.5%;
  }
}
@media (min-width: 1440px) {
  #slider_joaca .hero-inner .hero-image-container,
  #hero_game .hero-inner .hero-image-container {
    right: 17.5%;
  }
}
#slider_joaca .hero-inner .hero-image-container .active-campaign-card,
#hero_game .hero-inner .hero-image-container .active-campaign-card {
  width: 190px;
  height: auto;
  position: absolute;
  top: 12px;
  left: 8px;
  border: 1px solid #000;
  border-radius: 8px;
  overflow: hidden;
}
#slider_joaca .hero-inner .hero-image-container .active-campaign-card .card-header .active-campaign-card-header-title,
#hero_game .hero-inner .hero-image-container .active-campaign-card .card-header .active-campaign-card-header-title {
  font-size: 0.625rem;
  text-transform: uppercase;
}
#slider_joaca .hero-inner .hero-image-container .active-campaign-card .card-body,
#hero_game .hero-inner .hero-image-container .active-campaign-card .card-body {
  padding: 8px 2px 4px;
}
#slider_joaca .hero-inner .hero-image-container .active-campaign-card .card-body .card-image,
#hero_game .hero-inner .hero-image-container .active-campaign-card .card-body .card-image {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  margin-inline: auto;
  margin-bottom: 8px;
}
#slider_joaca .hero-inner .hero-image-container .active-campaign-card .card-body .campaign-date,
#hero_game .hero-inner .hero-image-container .active-campaign-card .card-body .campaign-date {
  font-size: 0.7rem;
  text-align: center;
  text-transform: uppercase;
}
#slider_joaca .hero-inner .hero-image-container .hero-image,
#hero_game .hero-inner .hero-image-container .hero-image {
  width: 100%;
  height: auto;
}

#slider_joaca {
  background-color: #00B4A5;
}
@media (max-width: 768px) {
  #slider_joaca .hero-inner .hero-content .hero-cta {
    padding-inline: 40px;
  }
}

#slider_inscriere {
  background-color: #5D3090;
}
#slider_inscriere .hero-inner .hero-cta-wrapper {
  width: fit-content;
}
#slider_inscriere .hero-inner .hero-cta-wrapper .hero-cta-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}
#slider_inscriere .hero-inner .hero-cta-wrapper .hero-cta-secondary:hover {
  border: 1px solid #E5087F;
}

#qr_code_modal .modal-dialog .modal-content .modal-header,
#qr_code_modal .modal-dialog .modal-content .modal-footer {
  border-style: solid;
  border-color: #000;
}
#qr_code_modal .modal-dialog .modal-content .modal-header {
  border-width: 0 0 1px 0;
}
#qr_code_modal .modal-dialog .modal-content .modal-body .qr-code-image {
  width: 174px;
  height: 174px;
  background-color: #CDAED6;
  border-radius: 24px;
  border: 1px solid #000;
  padding: 12px;
  display: block;
  margin: 20px auto 0;
}
#qr_code_modal .modal-dialog .modal-content .modal-body .modal-headline {
  max-width: 364px;
  font-family: "LuckiestGuy", sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  margin: 24px auto 0;
  line-height: 1.2;
}
#qr_code_modal .modal-dialog .modal-content .modal-body .modal-description {
  max-width: 250px;
  margin: 8px auto 0;
  font-size: 0.875rem;
  line-height: 1.4;
}
#qr_code_modal .modal-dialog .modal-content .modal-body .modal-headline,
#qr_code_modal .modal-dialog .modal-content .modal-body .modal-description {
  width: 100%;
  color: #000;
  text-align: center;
}
#qr_code_modal .modal-dialog .modal-content .modal-body .modal-close-button {
  margin: 40px auto 12px;
}
#qr_code_modal .modal-dialog .modal-content .modal-footer {
  border-width: 1px 0 0 0;
}

#disclaimer {
  background-image: url("../assets/black-frame.png");
  background-repeat: repeat;
  background-position: bottom center;
}

.profile-picture {
  aspect-ratio: 1;
  background-color: #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-picture span {
  color: #f7921e;
  text-transform: uppercase;
  font-family: "LuckiestGuy", sans-serif;
}
.profile-picture.small {
  width: 32px;
}
.profile-picture.small span {
  font-size: 0.75rem;
  font-weight: 500;
}
.profile-picture.large {
  width: 100%;
  max-width: 100px;
}
.profile-picture.large span {
  font-size: 2rem;
  font-weight: 700;
}

#use_clopotei_btn img {
  width: 32px;
  height: auto;
  object-fit: contain;
}

.convert-bells-modal-content {
  background-color: #00B4A5;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 20px 32px;
  margin: 32px 0;
}
.convert-bells-modal-content .available-bells {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid #000;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: -40px auto 24px;
}
.convert-bells-modal-content .available-bells span {
  font-size: 20px;
  font-family: "LuckiestGuy", sans-serif;
}
.convert-bells-modal-content .available-bells img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.convert-bells-modal-content .bells-conversion-rate {
  width: fit-content;
  margin: 0 auto 24px;
  font-size: 16px;
  color: #000;
  display: flex;
  align-items: center;
  gap: 4px;
}
.convert-bells-modal-content .bells-conversion-rate span {
  font-family: "LuckiestGuy", sans-serif;
  font-size: 24px;
  color: #fff;
}
.convert-bells-modal-content .bells-conversion-rate img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.convert-bells-modal-content .convert-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
@media (min-width: 768px) {
  .convert-bells-modal-content .convert-wrapper {
    flex-direction: row;
    gap: 12px;
  }
}
.convert-bells-modal-content .convert-wrapper .arrow-icon {
  width: auto;
  height: 24px;
  transform: rotate(90deg);
}
@media (min-width: 768px) {
  .convert-bells-modal-content .convert-wrapper .arrow-icon {
    width: 32px;
    height: auto;
    transform: rotate(0);
  }
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .convert-input-group {
  border: 1px solid #000;
  border-radius: 6px;
  padding: 2px 16px;
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .convert-input-group input {
  width: 72px;
  font-size: 24px;
  font-weight: 500;
  color: #000;
  text-align: center;
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .convert-input-group input,
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .convert-input-group button {
  background: transparent;
  border: none;
  outline: none;
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .input-group-bells {
  background-color: #f48fa6;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .input-group-bells input::-webkit-outer-spin-button,
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .input-group-bells input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .input-group-bells input[type=number] {
  -moz-appearance: textfield;
}
.convert-bells-modal-content .convert-wrapper .convert-input-wrapper .input-group-score {
  background-color: #9D7FB9;
}

#feature_bells_modal .modal-content {
  width: 100%;
  max-width: 640px;
  border-radius: 32px;
}
#feature_bells_modal .modal-content .modal-header {
  border-bottom: 1px solid #000;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
}
#feature_bells_modal .modal-content .modal-body {
  color: #000;
  text-align: center;
}
#feature_bells_modal .modal-content .modal-body .modal-headline {
  font-size: 24px;
  font-family: "LuckiestGuy", sans-serif;
}
#feature_bells_modal .modal-content .modal-body .modal-description {
  font-size: 14px;
  margin: 8px 0 20px;
}
#feature_bells_modal .modal-content .modal-body img {
  width: 100%;
  height: auto;
  margin-bottom: 32px;
}
#feature_bells_modal .modal-content .modal-footer {
  border-top: 1px solid #000;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}
#feature_bells_modal .modal-content .modal-header,
#feature_bells_modal .modal-content .modal-footer {
  height: 32px;
}

/*# sourceMappingURL=style.css.map */