@charset "UTF-8";
@import "./owl.carousel.min.css";
@import "./owl.theme.default.min.css";
body {
  font-family: "Figtree", sans-serif;
  background-color: rgba(33, 75, 68, 1);
}

main {
  min-height: 100vh;
}

a {
  text-decoration: none;
  cursor: pointer;
}

p {
  margin-bottom: 0;
  color: #2C2A71;
}

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

h1 {
  font-weight: 800;
  font-size: 2.25rem;
  color: #FFFFFF;
}

h2 {
  font-weight: 600;
  font-size: 1.625rem;
  color: #ffffff;
}

h3 {
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffffff;
}

h4 {
  font-weight: 800;
  font-size: 1.125rem;
  color: #ffffff;
}

.subscription-title {
  font-weight: 800;
  font-size: 1.125rem;
  color: #ffffff;
}

.title {
  font-weight: 500;
  font-size: 0.875rem;
  color: #FF6680;
}

.subtitle {
  font-weight: 500;
  font-size: 0.75rem;
}

.description {
  font-weight: 500;
  font-size: 0.875rem;
  color: #2C2A71;
}

.text-secondary {
  color: #f1f1f1 !important;
}

.text-muted {
  color: #9E9E9E !important;
}

.text-pink {
  color: #FF6680;
}

.text-primary {
  color: #2C2A71 !important;
}

.text-danger {
  color: #FF0000 !important;
}

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

.bg-pink {
  background: #F84281 !important;
}

.bg-gradient {
  background: transparent !important;
}

.bg-gradient-pink {
  background: linear-gradient(180deg, #F2F2FF 0%, #F2F2FF 100%) !important;
}

.bg-gradient-transparent {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(242, 242, 255, 0.9) 100%) !important;
}

@media (min-width: 576px) {
  .subtitle {
    font-weight: 500;
    font-size: 1.25rem;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 3.563rem;
  }
  h2 {
    font-size: 2.75rem;
  }
  h3 {
    font-size: 2.5rem;
  }
  h4 {
    font-size: 1.75rem;
  }
  .title {
    font-size: 1rem;
  }
  .description {
    font-size: 1rem;
  }
  .pt-22px {
    padding-top: 90px !important;
  }
  .row-cols-5 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}
.btn {
  font-weight: 500;
  border-radius: 27px;
}
.btn:focus {
  box-shadow: none;
}

.btn-primary {
  font-size: 16px;
  color: #FFFFFF;
  background: #FF975C;
  border: none;
  background: linear-gradient(270deg, rgba(255, 151, 92, 1) 0%, rgba(253, 112, 33, 1) 100%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 20px rgba(0, 0, 0, 0.14);
  padding: 8px 30px;
}
.btn-primary.col-to-action {
  font-size: 20px;
  padding: 13px 60px;
}
@media (max-width: 414px) {
  .btn-primary.col-to-action {
    padding: 13px 40px;
  }
}
@media (min-width: 1200px) {
  .btn-primary {
    font-size: 20px;
    padding: 17px 46px;
    border-radius: 42px;
  }
}

.btn-info {
  font-size: 20px;
  color: #302D6C;
  background: linear-gradient(90deg, #F6F5FF 0%, #D7E0FF 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), inset 0px 4px 20px rgba(0, 0, 0, 0.14);
  border-radius: 27px;
  padding: 13px 30px;
}
.btn-info:hover, .btn-info:focus {
  color: #FFFFFF;
  background: #7965F5;
  border: 3px solid #FFFFFF;
}
@media (min-width: 1200px) {
  .btn-info {
    padding: 18px 30px;
    border-radius: 42px;
  }
}

.btn-secondary {
  font-size: 16px;
  color: #FFFFFF;
  background: linear-gradient(90deg, #898989 0%, #A9A9A9 100%);
  border: 2.42958px solid #9C9C9C;
  box-shadow: 0px 3.23944px 3.23944px rgba(0, 0, 0, 0.25), inset 0px 3.23944px 16.1972px rgba(0, 0, 0, 0.14);
  padding: 8px 30px;
}
@media (min-width: 1200px) {
  .btn-secondary {
    font-size: 20px;
    padding: 18px 30px;
    border-radius: 42px;
  }
}

.modal .btn {
  font-size: 16px;
}
@media (min-width: 1200px) {
  .modal .btn {
    font-size: 22px;
  }
}
.modal .btn-primary {
  padding: 9px 30px;
}
.modal .btn-secondary {
  padding: 9px 30px;
}

.btn-link {
  font-weight: 500;
  font-size: 16px;
  color: #FF6680;
}

.btn-light {
  font-weight: 300;
  font-size: 14px;
  color: #2C2A71;
  background: #F7F8F9;
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.5);
  border-radius: 16px;
  padding: 16px 26px;
}

.navbar-toggler .icon-close {
  display: none;
}
.navbar-toggler .icon-menu {
  display: inline;
}
.navbar-toggler[aria-expanded=true] .icon-close {
  display: inline;
}
.navbar-toggler[aria-expanded=true] .icon-menu {
  display: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}

.top-mobile-menu.show, .top-mobile-menu.collapsing {
  position: absolute;
  top: 56px;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 5px 0px;
  z-index: 4;
}
.top-mobile-menu .navbar-nav .nav-link {
  color: #2C2A71;
  padding: 10px 24px;
}
.top-mobile-menu .navbar-nav .nav-link:active, .top-mobile-menu .navbar-nav .nav-link.active {
  color: #FFFFFF;
  background: #2D2D75;
}

.hamburger-menu {
  background: none;
  border: none;
  width: 24px;
  height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 3px;
  background-color: rgba(238, 129, 67, 1);
  border-radius: 1px;
}
.hamburger-line:nth-child(3) {
  display: none;
}

.solingo-brand {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 24.05px;
  line-height: 26px;
  letter-spacing: 0;
  color: white !important;
  text-decoration: none;
  margin: 0 !important;
}

.solingo-brand img {
  width: 80px;
  margin-left: 15px;
}

.solingo-brand:hover {
  color: white !important;
  text-decoration: none;
}

.flag-icon {
  width: 24px;
  height: 18px;
  border-radius: 2px;
}

.flag-icon-small {
  width: 20px;
  height: 15px;
  border-radius: 2px;
}

.dropdown-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.dropdown-toggle:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.dropdown-toggle:hover {
  background: transparent !important;
}
.dropdown-toggle::after {
  color: white !important;
  margin-left: 8px;
}
.dropdown-toggle.show::after {
  color: white !important;
}

.dropdown-menu[aria-labelledby=dropdownMenuButton1] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px !important;
  min-width: 200px !important;
}
.dropdown-menu[aria-labelledby=dropdownMenuButton1] li {
  margin: 4px 0 !important;
}
.dropdown-menu[aria-labelledby=dropdownMenuButton1] li:first-child {
  margin-top: 0 !important;
}
.dropdown-menu[aria-labelledby=dropdownMenuButton1] li:last-child {
  margin-bottom: 0 !important;
}
.dropdown-menu[aria-labelledby=dropdownMenuButton1] .dropdown-item {
  background: white !important;
  border: 1px solid #E0E0E0 !important;
  border-radius: 12px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  color: #333 !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  height: 47.7804870605px !important;
  box-sizing: border-box !important;
}
.dropdown-menu[aria-labelledby=dropdownMenuButton1] .dropdown-item:hover {
  background: #F8F8F8 !important;
  color: #333 !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.dropdown-menu[aria-labelledby=dropdownMenuButton1] .dropdown-item:active, .dropdown-menu[aria-labelledby=dropdownMenuButton1] .dropdown-item.active {
  background: #F0F0F0 !important;
  color: #333 !important;
}
.dropdown-menu[aria-labelledby=dropdownMenuButton1] .dropdown-item img {
  margin-right: 12px !important;
  width: 24px !important;
  height: 18px !important;
  border-radius: 3px !important;
}

.sidebar-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 280px;
  height: 100vh;
  background: rgba(33, 75, 68, 1);
  color: #fff;
  z-index: 1050;
  transition: left 0.3s ease;
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar-menu * {
  color: #fff !important;
}

.sidebar-menu.show {
  left: 0;
}
.sidebar-menu .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
}
.sidebar-menu .menu-header {
  margin-top: 50px;
  margin-bottom: 30px;
}
.sidebar-menu .menu-header .logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
}
.sidebar-menu .menu-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.sidebar-menu .menu-header h3.language-dropdown-toggle {
  font-family: Figtree;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 18px;
  line-height: 42.61px;
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-menu .menu-header h3.language-dropdown-toggle:hover {
  opacity: 0.8;
}
.sidebar-menu .dropdown-arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
}
.sidebar-menu .menu-section {
  margin-bottom: 30px;
}
.sidebar-menu .menu-section .section-title {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sidebar-menu .menu-section .menu-item {
  display: block;
  padding: 12px 0;
  color: #242452;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #E5E5E5;
  transition: color 0.2s ease;
}
.sidebar-menu .menu-section .menu-item:hover {
  color: #6366F1;
  text-decoration: none;
}
.sidebar-menu .menu-section .menu-item:last-child {
  border-bottom: none;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
}

.footer-navbar {
  background: #FFFFFF;
  box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.1);
  padding: 7px 0 11px 0;
}
.footer-navbar .nav-link {
  min-width: 40px;
  font-family: "Figtree", sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #2E3A59;
  padding: 0;
  position: relative;
}
@media (max-width: 320px) {
  .footer-navbar .nav-link span {
    font-size: 22px;
  }
}
.footer-navbar .nav-link.active {
  font-weight: 800;
}
.footer-navbar .nav-link.active span {
  transform: translateY(-9px) scale(1.1);
  color: white;
  background: linear-gradient(180deg, #FA3F81 0%, #EE5B88 100%);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -50px;
  margin-left: -25px;
  left: 50%;
}
@media (max-width: 320px) {
  .footer-navbar .nav-link.active span {
    transform: translateY(-9px) scale(1.05);
    width: 40px;
    height: 40px;
    top: -40px;
    margin-left: -20px;
  }
}
.footer-navbar .nav-link.active::after {
  content: "";
  display: block;
  height: 9px;
  width: 64px;
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -32px;
  background: #F84281;
  border-radius: 10px;
  top: 17px;
}

.accordion-button {
  background-color: transparent !important;
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px !important;
  line-height: 100%;
  letter-spacing: 0%;
  color: #242452;
  padding: 24px;
  border-radius: 16px;
}
.accordion-button span {
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px !important;
  line-height: 100%;
  letter-spacing: 0%;
  color: #242452;
  padding-top: 6px;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-button::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("../images/arrow-collapsed.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s;
  font-family: none;
  font-size: 0;
}

.accordion-button:not(.collapsed) {
  color: #242452;
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  margin-top: -7px;
}

.accordion-item {
  background: #F7F8F9;
  border: none;
  border-radius: 16px;
  min-height: 60px;
}
.accordion-item:first-of-type {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
}
.accordion-item.accordion-collapse.collapse.show {
  background: #F4F3FF;
}

.accordion-body {
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #242452;
  padding: 0 24px 15px 24px;
}

.object-fit-cover {
  object-fit: cover;
}

.rounded-1 {
  border-radius: 0.313rem !important;
}

.rounded-2 {
  border-radius: 0.375rem !important;
}

.rounded-3 {
  border-radius: 1rem !important;
}

.rounded-4 {
  border-radius: 0.5rem !important;
}

.rounded-5 {
  border-radius: 0.625rem !important;
}

.rounded, .choose-level-control .level-img, .choose-level-control {
  border-radius: 1.25rem !important;
}

.rounded-start {
  border-bottom-left-radius: 0.625rem !important;
  border-top-left-radius: 0.625rem !important;
}

.rounded-end {
  border-bottom-right-radius: 0.625rem !important;
  border-top-right-radius: 0.625rem !important;
}

.shadow-lg, .choose-level-control {
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.5) !important;
}

.shadow-sm {
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25) !important;
}

.shadow, .simple-popover {
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.25) !important;
}

.font-size-8px {
  font-size: 8px;
}

.font-size-10px {
  font-size: 10px !important;
}

.font-size-11px {
  font-size: 11px;
}

.font-size-12px {
  font-size: 12px;
}

.font-size-13px {
  font-size: 13px;
}

.font-size-14px {
  font-size: 14px;
}

.font-size-16px {
  font-size: 16px;
}

.font-size-24px {
  font-size: 24px;
}

.font-size-30px {
  font-size: 30px;
}

.font-size-36px {
  font-size: 36px;
}

.font-size-44px {
  font-size: 44px;
}

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

.pt-2rem {
  padding-top: 2rem;
}

.language-flag-card {
  background-color: rgba(70, 119, 112, 1);
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease;
  border-radius: 30px;
  padding: 15px;
}
.language-flag-card:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}

.flag-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 113px;
  height: 60px;
  margin: 0 auto;
}

.flag-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

.language-name {
  font-weight: 700;
  font-size: 24px;
  color: rgba(11, 27, 25, 1);
  margin-bottom: 10px;
}

@media (min-width: 1200px) {
  .language-name {
    font-size: 24px;
  }
}

.language-title {
  font-weight: 400;
  font-size: 16px;
  height: 32px !important;
  line-height: 48.43px;
  text-align: center;
  color: rgba(19, 35, 32, 1);
}

.course-button {
  background-color: rgba(220, 235, 233, 1);
  border: 1px solid rgba(33, 75, 68, 1);
  border-radius: 25px;
  font-size: 18px;
  color: rgba(11, 27, 25, 1);
  font-weight: 500;
  display: block;
  padding: 10px;
}

.course-button:hover {
  background-color: rgb(206, 210, 209);
}

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

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

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

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

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

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

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

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

.mt-100px {
  margin-top: -100px;
}

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

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

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

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

.min-vh-60 {
  min-height: 60vh;
}

.z-index-1 {
  z-index: 1;
}

.cursor-pointer {
  cursor: pointer;
}

@media (min-width: 992px) {
  .mb-lg-300px {
    margin-bottom: 300px;
  }
}
@media (min-width: 1200px) {
  .font-size-10px {
    font-size: 14px;
  }
  .font-size-11px {
    font-size: 17px;
  }
  .font-size-13px {
    font-size: 24px;
  }
  .font-size-xl-30px {
    font-size: 30px;
  }
  .mb-47px {
    margin-bottom: 100px;
  }
}
@media (max-width: 414px) {
  .mb-56px {
    margin-bottom: 40px;
  }
}
.modal-tutorial .close-btn-container {
  position: absolute;
  right: 0;
  z-index: 1;
}
.modal-tutorial .modal-dialog {
  height: 100%;
  padding-top: 50px;
}
@media (min-width: 992px) {
  .modal-tutorial .modal-dialog {
    padding-top: 55px;
  }
}
.modal-tutorial .modal-dialog.media-dialog-body {
  max-width: initial;
}
.modal-tutorial .modal-dialog.media-dialog-body .modal-content {
  max-width: 500px;
  margin: auto;
}
.modal-tutorial .tutorial-header {
  font-size: 26px;
  color: #FFFFFF;
}
.modal-tutorial .tutorial-text {
  color: #FFFFFF;
  font-size: 18px;
}
@media (min-width: 1200px) {
  .modal-tutorial .tutorial-text {
    font-size: 28px;
  }
}
.modal-tutorial .modal-content {
  background: transparent;
  border: none;
}
.modal-tutorial.tutorial-img {
  background-color: #F7F4F1;
}
.modal-tutorial .tutorial-hand-pointer {
  position: relative;
}
.modal-tutorial .tutorial-hand-pointer::after {
  content: "";
  position: absolute;
  display: block;
  width: 73px;
  height: 73px;
  background-image: url("../images/tutorial-hand.svg");
  background-size: cover;
}
.modal-tutorial .tutorial-background {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  z-index: -1;
}
.modal-tutorial .tutorial-background .slide-header {
  background: linear-gradient(3.59deg, #1E1B3B 32.08%, #2D2E83 143.69%) !important;
  min-height: 56px;
}
.modal-tutorial .tutorial-background .footer-navbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.modal-tutorial .tutorial-background .slide-overlay {
  background: linear-gradient(3.59deg, rgba(30, 27, 59, 0.94) 32.08%, rgba(45, 46, 131, 0.94) 143.69%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.modal-tutorial .tutorial-background .slide-content {
  margin-bottom: auto;
  display: none;
  padding-top: 20px;
  max-height: calc(100vh - 63px - 56px);
  overflow-y: hidden;
}
.modal-tutorial .tutorial-background .slide-content.active {
  display: block;
  opacity: 1;
}
.modal-tutorial .tutorial-background .chose-from-language-bg {
  background-color: #F7F4F1;
  height: 100%;
}
.modal-tutorial .tutorial-background .choose-language-bg {
  padding-top: 80px;
  background-color: #F7F4F1;
}
.modal-tutorial .tutorial-background .choose-language-bg .tutorial-hand-pointer::after {
  top: 30px;
  right: -66px;
}
.modal-tutorial .tutorial-background .choose-level-bg .tutorial-hand-pointer::after {
  bottom: -60px;
  left: 50%;
}
.modal-tutorial .tutorial-background .practice-listening {
  background-color: #F7F4F1;
  height: 100%;
}
.modal-tutorial .tutorial-background .practice-writing {
  background-color: #F7F4F1;
  height: 100%;
}
.modal-tutorial .tutorial-background .choose-lesson-bg .tutorial-hand-pointer::after {
  top: 30px;
  right: -66px;
}
.modal-tutorial .carousel-indicators {
  bottom: -50px;
}
.modal-tutorial .carousel-inner {
  min-height: 488px;
}
@media (max-width: 320px) {
  .modal-tutorial .carousel-inner {
    min-height: 460px;
  }
}
@media (min-width: 1200px) {
  .modal-tutorial .carousel-inner {
    min-height: 570px;
  }
}
.modal-tutorial .carousel-inner .carousel-item {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.modal-tutorial .carousel-inner .carousel-item.chose-global-language-slide .tutorial-hand-pointer::after {
  top: 25%;
  right: -73px;
}
@media (min-width: 768px) {
  .modal-tutorial .carousel-inner .carousel-item .language-picker {
    transform: scale(2) translateY(46px);
  }
}
.modal-tutorial .carousel-inner .carousel-item.listening-exercise-slide .card.disabled {
  opacity: 0.15;
}
.modal-tutorial .carousel-inner .carousel-item.listening-exercise-slide .moving-card {
  top: 38px;
  left: 10%;
}
.modal-tutorial .carousel-inner .carousel-item.listening-exercise-slide .tutorial-hand-pointer::after {
  top: 25%;
  right: -73px;
}
@media (max-width: 340px) {
  .modal-tutorial .carousel-inner .carousel-item.listening-exercise-slide .tutorial-hand-pointer::after {
    right: -68px;
  }
}
.modal-tutorial .carousel-inner .carousel-item.writing-exercise-slide .tutorial-hand-pointer::after {
  top: 20%;
  right: -80px;
}
.modal-tutorial .carousel-inner .carousel-item.writing-exercise-slide .form-control.unstyled-input {
  border-bottom: none;
  padding: 8px 0 8px 0;
}
@media (max-width: 320px) {
  .modal-tutorial .carousel-inner .carousel-item.writing-exercise-slide .mb-47px {
    margin-bottom: 30px;
  }
  .modal-tutorial .carousel-inner .carousel-item.writing-exercise-slide .form-control.unstyled-input {
    border-bottom: none;
    padding: 4px 0 4px 0;
  }
}

.modal-content {
  border-radius: 20px;
}

.modal-backdrop {
  background: linear-gradient(270deg,rgba(33, 75, 68, 0.9) 0%, rgba(44, 79, 68, 0.9) 100%);
}
.modal-backdrop.show {
  opacity: initial;
}

.modal-dialog.congrats-modal-bg {
  background-color: #F7F4F1;
  z-index: 1;
}

.carousel-indicators {
  bottom: 0;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .carousel-indicators {
    bottom: -50px;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .carousel-indicators {
    bottom: 80px;
  }
}

.carousel-indicators [data-bs-target] {
  width: 13px;
  height: 13px;
  border-radius: 100%;
  background-color: #C4C4C4;
  margin: 0 25px;
  opacity: 1;
}
.carousel-indicators [data-bs-target].active {
  background-color: #F84281;
}
@media (max-width: 575px) {
  .carousel-indicators [data-bs-target].active {
    font-size: 24px;
  }
}

.carousel-indicators [data-bs-target] {
  width: 13px;
  height: 13px;
  margin: 0 10px;
}

.form-label {
  font-weight: 800;
  font-size: 18px;
  color: #2C2A71;
  margin-bottom: 9px;
}

.form-control {
  font-weight: 300;
  font-size: 14px;
  background: #F7F8F9;
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.5);
  border-radius: 16px;
  padding: 18px 19px;
  border: none;
}
.form-control::placeholder {
  color: #9E9E9E;
}
.form-control.unstyled-input {
  box-shadow: none;
  color: #F84281;
  border-radius: 0;
  padding: 23px 0 0 0;
  border-bottom: 2px solid #F84281;
}
.form-control.unstyled-input:focus {
  box-shadow: none;
  background-color: transparent;
}

.form-control:disabled,
.form-control[readonly] {
  background: transparent;
}
.form-control:disabled::placeholder,
.form-control[readonly]::placeholder {
  color: #F84281;
}

.input-group.search {
  border: 0;
  background: #F8F8F8;
  border-radius: 10px;
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.5);
}
.input-group.search .input-group-text {
  background: #F8F8F8;
  border: 0;
  border-radius: 10px;
}
.input-group.search .input-group-text::before {
  font-family: "icomoon";
  display: inline-block;
  content: "\e90b";
  font-size: 14px;
  color: #2C2A71;
}
.input-group.search .form-control {
  padding: 12px;
  border-left: 0;
  border: none;
  box-shadow: none;
}
.input-group.search .form-control:focus {
  background-color: transparent;
}

.dropdown-menu {
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  min-width: 0;
}

.dropdown-toggle {
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 2px 6px;
}
.dropdown-toggle::after {
  vertical-align: middle;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #F84281;
}

.card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2FF 100%);
  box-shadow: 0px 10px 10px rgba(49, 45, 100, 0.2);
  border-radius: 0.25rem;
  border: none;
  padding: 1.25rem 1.563rem;
  position: relative;
}
.card .card-text {
  font-weight: 500;
  font-size: 12px;
  color: #464482;
}
.card.article card-title {
  font-size: 13px;
}
.card.article .card-text {
  font-size: 10px;
}

.articles .card {
  background: none;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 3px rgba(97, 72, 72, 0.25);
  border-radius: 0.8rem;
  border: none;
  padding: 0;
  position: relative;
}
.articles .card .card-img,
.articles .card .card-img-top {
  border-top-left-radius: 0.7rem;
  border-top-right-radius: 0.7rem;
  max-height: 5.6rem;
  object-fit: cover;
  object-position: center;
  min-height: 14vh;
}
.articles .card .card-body {
  padding: 0.5rem;
}
.articles .card .card-body .card-title {
  font-weight: 500;
  font-size: 0.8rem;
  color: #2C2A71;
}

@media (min-width: 992px) {
  .articles .card .card-img,
  .articles .card .card-img-top {
    object-fit: cover;
    object-position: center;
    min-height: 20vh;
  }
}
@media (min-width: 1200px) {
  .card .card-text {
    font-size: 19px;
  }
  .card.article .card-title {
    font-size: 26px;
  }
  .card.article .card-text {
    font-size: 22px !important;
  }
}
.choose-level-control {
  display: block;
  position: relative;
  width: 100%;
  height: 90px;
}
@media (min-width: 1200px) {
  .choose-level-control {
    height: 120px;
  }
}
.choose-level-control .level-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.choose-level-control .level-label {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  min-width: 135px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding-left: 25px;
  padding-right: 25px;
  background-image: url("data:image/svg+xml,%3Csvg width='133' height='90' viewBox='0 0 133 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:lighten'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M132.554 0H0V90H101.368L132.554 0Z' fill='%23EEF7FE' fill-opacity='0.9'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
@media (min-width: 1200px) {
  .choose-level-control .level-label {
    min-width: 180px;
  }
}
.choose-level-control .language-flag {
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.choose-level-control.disabled::after {
  font-family: "icomoon";
  content: "\e905";
  font-size: 24px;
  color: #C2C2C7;
  position: absolute;
  background-color: rgba(81, 83, 85, 0.8);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
.choose-level-control.disabled:focus::after {
  background-color: rgba(81, 83, 85, 0.95);
}

.choose-lesson-control {
  max-width: 113px;
  display: inline-block;
  width: 100%;
}
.choose-lesson-control.royalblue-border,
.choose-lesson-control .royalblue-border {
  --border-color: #2568B7;
}
.choose-lesson-control.royalblue-color,
.choose-lesson-control .royalblue-color {
  --color: #2568B7;
}
.choose-lesson-control.greenyellow-border,
.choose-lesson-control .greenyellow-border {
  --border-color: #C9F648;
}
.choose-lesson-control.greenyellow-color,
.choose-lesson-control .greenyellow-color {
  --color: #C9F648;
}
.choose-lesson-control.pink-border,
.choose-lesson-control .pink-border {
  --border-color: #F84281;
}
.choose-lesson-control.pink-color,
.choose-lesson-control .pink-color {
  --color: #F84281;
}
.choose-lesson-control.mediumorchid-border,
.choose-lesson-control .mediumorchid-border {
  --border-color: #C948F6;
}
.choose-lesson-control.mediumorchid-color,
.choose-lesson-control .mediumorchid-color {
  --color: #C948F6;
}
.choose-lesson-control.orange-border,
.choose-lesson-control .orange-border {
  --border-color: #F66748;
}
.choose-lesson-control.orange-color,
.choose-lesson-control .orange-color {
  --color: #F66748;
}
.choose-lesson-control.red-border,
.choose-lesson-control .red-border {
  --border-color: #FF0000;
}
.choose-lesson-control.red-color,
.choose-lesson-control .red-color {
  --color: #FF0000;
}
.choose-lesson-control.fuchsia-border,
.choose-lesson-control .fuchsia-border {
  --border-color: #EC1D68;
}
.choose-lesson-control.fuchsia-color,
.choose-lesson-control .fuchsia-color {
  --color: #EC1D68;
}
.choose-lesson-control.darkgoldenrod-border,
.choose-lesson-control .darkgoldenrod-border {
  --border-color: #B77C25;
}
.choose-lesson-control.darkgoldenrod-color,
.choose-lesson-control .darkgoldenrod-color {
  --color: #B77C25;
}
.choose-lesson-control.deepskyblue-border,
.choose-lesson-control .deepskyblue-border {
  --border-color: #48CCF6;
}
.choose-lesson-control.deepskyblue-color,
.choose-lesson-control .deepskyblue-color {
  --color: #48CCF6;
}
.choose-lesson-control.lightgreen-border,
.choose-lesson-control .lightgreen-border {
  --border-color: #48F66E;
}
.choose-lesson-control.lightgreen-color,
.choose-lesson-control .lightgreen-color {
  --color: #48F66E;
}
.choose-lesson-control.tomato-border,
.choose-lesson-control .tomato-border {
  --border-color: #F64848;
}
.choose-lesson-control.tomato-color,
.choose-lesson-control .tomato-color {
  --color: #F64848;
}
.choose-lesson-control.steelblue-border,
.choose-lesson-control .steelblue-border {
  --border-color: #4864F6;
}
.choose-lesson-control.steelblue-color,
.choose-lesson-control .steelblue-color {
  --color: #4864F6;
}
.choose-lesson-control.mediumaquamarine-border,
.choose-lesson-control .mediumaquamarine-border {
  --border-color: #7EBBA9;
}
.choose-lesson-control.mediumaquamarine-color,
.choose-lesson-control .mediumaquamarine-color {
  --color: #7EBBA9;
}
.choose-lesson-control.mediumpurple-border,
.choose-lesson-control .mediumpurple-border {
  --border-color: #B469FF;
}
.choose-lesson-control.mediumpurple-color,
.choose-lesson-control .mediumpurple-color {
  --color: #B469FF;
}
.choose-lesson-control.gold-border,
.choose-lesson-control .gold-border {
  --border-color: #F6DA48;
}
.choose-lesson-control.gold-color,
.choose-lesson-control .gold-color {
  --color: #F6DA48;
}
.choose-lesson-control.mediumturquoise-border,
.choose-lesson-control .mediumturquoise-border {
  --border-color: #48D1C1;
}
.choose-lesson-control.mediumturquoise-color,
.choose-lesson-control .mediumturquoise-color {
  --color: #48D1C1;
}
.choose-lesson-control.green-border,
.choose-lesson-control .green-border {
  --border-color: #25B73C;
}
.choose-lesson-control.green-color,
.choose-lesson-control .green-color {
  --color: #25B73C;
}
.choose-lesson-control.magenta-border,
.choose-lesson-control .magenta-border {
  --border-color: #F648D0;
}
.choose-lesson-control.magenta-color,
.choose-lesson-control .magenta-color {
  --color: #F648D0;
}
.choose-lesson-control.sandybrown-border,
.choose-lesson-control .sandybrown-border {
  --border-color: #F6B048;
}
.choose-lesson-control.sandybrown-color,
.choose-lesson-control .sandybrown-color {
  --color: #F6B048;
}
.choose-lesson-control.lawngreen-border,
.choose-lesson-control .lawngreen-border {
  --border-color: #91EC1D;
}
.choose-lesson-control.lawngreen-color,
.choose-lesson-control .lawngreen-color {
  --color: #91EC1D;
}
.choose-lesson-control.moccasin-border,
.choose-lesson-control .moccasin-border {
  --border-color: #FFF966;
}
.choose-lesson-control.moccasin-color,
.choose-lesson-control .moccasin-color {
  --color: #FFF966;
}
.choose-lesson-control.mediumspringgreen-border,
.choose-lesson-control .mediumspringgreen-border {
  --border-color: #1DEC95;
}
.choose-lesson-control.mediumspringgreen-color,
.choose-lesson-control .mediumspringgreen-color {
  --color: #1DEC95;
}
.choose-lesson-control.lightseagreen-border,
.choose-lesson-control .lightseagreen-border {
  --border-color: #25B7A5;
}
.choose-lesson-control.lightseagreen-color,
.choose-lesson-control .lightseagreen-color {
  --color: #25B7A5;
}
.choose-lesson-control.yellowgreen-border,
.choose-lesson-control .yellowgreen-border {
  --border-color: #B6EC1D;
}
.choose-lesson-control.yellowgreen-color,
.choose-lesson-control .yellowgreen-color {
  --color: #B6EC1D;
}
.choose-lesson-control.slateblue-border,
.choose-lesson-control .slateblue-border {
  --border-color: #5946A3;
}
.choose-lesson-control.slateblue-color,
.choose-lesson-control .slateblue-color {
  --color: #5946A3;
}
.choose-lesson-control.transparent-border,
.choose-lesson-control .transparent-border {
  --border-color: rgba(0, 0, 0, 0);
}
.choose-lesson-control.transparent-color,
.choose-lesson-control .transparent-color {
  --color: rgba(0, 0, 0, 0);
}
.choose-lesson-control .choose-lesson-control-container {
  display: block;
  position: relative;
  border: 3px solid var(--border-color, #2C2A71);
  border-radius: 50%;
  width: 100%;
}
.choose-lesson-control .choose-lesson-control-container::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background-color: #2C2A71;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:screen' opacity='0.2'%3E%3Cmask id='mask0_221_46389' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='99' height='99'%3E%3Cpath d='M49.5 99C76.8381 99 99 76.8381 99 49.5C99 22.1619 76.8381 0 49.5 0C22.1619 0 0 22.1619 0 49.5C0 76.8381 22.1619 99 49.5 99Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_221_46389)'%3E%3Cpath d='M45.892 20.9213C45.892 20.9213 60.6299 17.4805 64.8161 18.2365C68.9972 18.9872 58.9356 35.3933 55.3541 38.2189C51.7778 41.0393 45.892 20.9213 45.892 20.9213Z' fill='%23A8A8A8'/%3E%3Cpath d='M44.7817 33.131C44.7817 33.131 59.5197 29.6902 63.7059 30.4462C67.8869 31.1969 57.8253 47.603 54.2438 50.4286C50.6623 53.249 44.7817 33.131 44.7817 33.131Z' fill='%23A8A8A8'/%3E%3Cpath d='M137.51 94.6265L59.7645 38.073C59.3214 37.755 58.8053 34.1057 58.2735 31.3635C58.2527 31.2384 58.2266 31.1133 58.2005 30.9933C57.893 29.4659 57.2517 27.6621 56.9494 27.6673C55.5105 24.6279 53.2271 22.9076 50.0157 21.7919C49.2911 21.4635 48.3735 21.2445 47.2266 21.1611C47.2005 21.1559 47.1745 21.1559 47.1484 21.1507C47.1328 21.1507 47.1223 21.1455 47.1067 21.1455C47.0494 21.1403 46.9972 21.1403 46.9399 21.1403C46.5958 21.1142 46.2517 21.0881 45.9024 21.0881C45.7148 21.0881 45.5323 21.109 45.3446 21.1142C35.7105 21.3384 30.2887 28.3033 30.2887 28.3033C30.2887 28.3033 31.7276 30.4616 33.3489 32.8858C33.3332 33.1516 33.3072 33.4175 33.3072 33.6834C33.3072 36.4621 34.2195 39.0218 35.7418 41.1071C30.2991 116.96 104.229 89.0744 105.266 89.0744C105.85 89.0744 121.213 94.7308 134.783 99.7668C137.99 100.961 140.294 96.6232 137.51 94.6265Z' fill='url(%23paint0_linear_221_46389)'/%3E%3Cpath d='M41.5858 31.2594C42.916 31.2594 43.9943 30.1811 43.9943 28.8509C43.9943 27.5207 42.916 26.4424 41.5858 26.4424C40.2556 26.4424 39.1772 27.5207 39.1772 28.8509C39.1772 30.1811 40.2556 31.2594 41.5858 31.2594Z' fill='white'/%3E%3Cpath d='M35.6375 29.049C35.6375 29.049 23.6522 25.0243 23.475 35.6959V40.1584C25.5968 40.1584 27.7394 38.9125 29.8612 38.9125C31.7954 38.9125 33.7034 40.1584 35.6375 40.1584V29.049Z' fill='url(%23paint1_linear_221_46389)'/%3E%3Cpath d='M59.6289 38.0156C59.6289 38.0156 46.7626 52.0393 58.9669 72.9028C71.1711 93.7663 107.304 72.6995 107.304 72.6995L59.6289 38.0156Z' fill='url(%23paint2_linear_221_46389)'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_221_46389' x1='36.8425' y1='43.4468' x2='122.652' y2='109.809' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D5D5D5'/%3E%3Cstop offset='0.4218' stop-color='%23B8B8B8'/%3E%3Cstop offset='0.8525' stop-color='%23C7C7C7'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_221_46389' x1='29.0378' y1='28.051' x2='29.9961' y2='40.1742' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E7E7E7'/%3E%3Cstop offset='0.6685' stop-color='%23DADADA'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_221_46389' x1='53.7097' y1='60.0686' x2='107.308' y2='60.0686' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C4C4C4'/%3E%3Cstop offset='0.4218' stop-color='%23CDCDCD'/%3E%3Cstop offset='0.8525' stop-color='%23F7F7F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: 100% 0%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_221_46600' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='99' height='99'%3E%3Cpath d='M49.5 99C76.8381 99 99 76.8381 99 49.5C99 22.1619 76.8381 0 49.5 0C22.1619 0 0 22.1619 0 49.5C0 76.8381 22.1619 99 49.5 99Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_221_46600)'%3E%3Cpath d='M45.8921 20.9213C45.8921 20.9213 60.63 17.4805 64.8163 18.2365C68.9973 18.9872 58.9357 35.3933 55.3542 38.2189C51.7779 41.0393 45.8921 20.9213 45.8921 20.9213Z' fill='%237D2F65'/%3E%3Cpath d='M44.7819 33.131C44.7819 33.131 59.5198 29.6902 63.706 30.4462C67.8871 31.1969 57.8255 47.603 54.2439 50.4286C50.6624 53.249 44.7819 33.131 44.7819 33.131Z' fill='%237D2F65'/%3E%3Cpath d='M137.51 94.6265L59.7646 38.073C59.3215 37.755 58.8054 34.1057 58.2736 31.3635C58.2528 31.2384 58.2267 31.1133 58.2007 30.9933C57.8931 29.4659 57.2519 27.6621 56.9495 27.6673C55.5106 24.6279 53.2272 22.9076 50.0158 21.7919C49.2912 21.4635 48.3737 21.2445 47.2267 21.1611C47.2007 21.1559 47.1746 21.1559 47.1485 21.1507C47.1329 21.1507 47.1225 21.1455 47.1068 21.1455C47.0495 21.1403 46.9973 21.1403 46.94 21.1403C46.5959 21.1142 46.2519 21.0881 45.9026 21.0881C45.7149 21.0881 45.5324 21.109 45.3447 21.1142C35.7106 21.3384 30.2888 28.3033 30.2888 28.3033C30.2888 28.3033 31.7277 30.4616 33.349 32.8858C33.3334 33.1516 33.3073 33.4175 33.3073 33.6834C33.3073 36.4621 34.2196 39.0218 35.7419 41.1071C30.2992 116.96 104.229 89.0744 105.266 89.0744C105.85 89.0744 121.213 94.7308 134.784 99.7668C137.99 100.961 140.294 96.6232 137.51 94.6265Z' fill='url(%23paint0_linear_221_46600)'/%3E%3Cpath d='M41.586 31.2594C42.9162 31.2594 43.9946 30.1811 43.9946 28.8509C43.9946 27.5207 42.9162 26.4424 41.586 26.4424C40.2558 26.4424 39.1775 27.5207 39.1775 28.8509C39.1775 30.1811 40.2558 31.2594 41.586 31.2594Z' fill='white'/%3E%3Cpath d='M35.6377 29.049C35.6377 29.049 23.6523 25.0243 23.4751 35.6959V40.1584C25.5969 40.1584 27.7396 38.9125 29.8614 38.9125C31.7955 38.9125 33.7035 40.1584 35.6377 40.1584V29.049Z' fill='url(%23paint1_linear_221_46600)'/%3E%3Cpath d='M59.6291 38.0156C59.6291 38.0156 46.7627 52.0393 58.967 72.9028C71.1712 93.7663 107.304 72.6995 107.304 72.6995L59.6291 38.0156Z' fill='url(%23paint2_linear_221_46600)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_221_46600' x1='36.8426' y1='43.4468' x2='122.653' y2='109.809' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E9457E'/%3E%3Cstop offset='0.4218' stop-color='%23E71D73'/%3E%3Cstop offset='0.8525' stop-color='%237D2F65'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_221_46600' x1='29.0379' y1='28.051' x2='29.9962' y2='40.1742' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FDC800'/%3E%3Cstop offset='0.6685' stop-color='%23F18F34'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_221_46600' x1='53.7099' y1='60.0686' x2='107.308' y2='60.0686' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EC608A'/%3E%3Cstop offset='0.4218' stop-color='%23EC638B'/%3E%3Cstop offset='0.8525' stop-color='%23E8407B'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="0"] {
  background-size: 100% 18%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="1"] {
  background-size: 100% 18.82%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="2"] {
  background-size: 100% 19.64%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="3"] {
  background-size: 100% 20.46%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="4"] {
  background-size: 100% 21.28%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="5"] {
  background-size: 100% 22.1%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="6"] {
  background-size: 100% 22.92%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="7"] {
  background-size: 100% 23.74%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="8"] {
  background-size: 100% 24.56%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="9"] {
  background-size: 100% 25.38%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="10"] {
  background-size: 100% 26.2%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="11"] {
  background-size: 100% 27.02%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="12"] {
  background-size: 100% 27.84%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="13"] {
  background-size: 100% 28.66%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="14"] {
  background-size: 100% 29.48%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="15"] {
  background-size: 100% 30.3%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="16"] {
  background-size: 100% 31.12%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="17"] {
  background-size: 100% 31.94%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="18"] {
  background-size: 100% 32.76%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="19"] {
  background-size: 100% 33.58%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="20"] {
  background-size: 100% 34.4%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="21"] {
  background-size: 100% 35.22%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="22"] {
  background-size: 100% 36.04%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="23"] {
  background-size: 100% 36.86%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="24"] {
  background-size: 100% 37.68%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="25"] {
  background-size: 100% 38.5%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="26"] {
  background-size: 100% 39.32%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="27"] {
  background-size: 100% 40.14%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="28"] {
  background-size: 100% 40.96%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="29"] {
  background-size: 100% 41.78%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="30"] {
  background-size: 100% 42.6%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="31"] {
  background-size: 100% 43.42%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="32"] {
  background-size: 100% 44.24%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="33"] {
  background-size: 100% 45.06%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="34"] {
  background-size: 100% 45.88%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="35"] {
  background-size: 100% 46.7%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="36"] {
  background-size: 100% 47.52%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="37"] {
  background-size: 100% 48.34%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="38"] {
  background-size: 100% 49.16%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="39"] {
  background-size: 100% 49.98%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="40"] {
  background-size: 100% 50.8%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="41"] {
  background-size: 100% 51.62%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="42"] {
  background-size: 100% 52.44%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="43"] {
  background-size: 100% 53.26%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="44"] {
  background-size: 100% 54.08%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="45"] {
  background-size: 100% 54.9%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="46"] {
  background-size: 100% 55.72%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="47"] {
  background-size: 100% 56.54%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="48"] {
  background-size: 100% 57.36%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="49"] {
  background-size: 100% 58.18%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="50"] {
  background-size: 100% 59%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="51"] {
  background-size: 100% 59.82%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="52"] {
  background-size: 100% 60.64%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="53"] {
  background-size: 100% 61.46%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="54"] {
  background-size: 100% 62.28%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="55"] {
  background-size: 100% 63.1%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="56"] {
  background-size: 100% 63.92%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="57"] {
  background-size: 100% 64.74%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="58"] {
  background-size: 100% 65.56%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="59"] {
  background-size: 100% 66.38%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="60"] {
  background-size: 100% 67.2%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="61"] {
  background-size: 100% 68.02%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="62"] {
  background-size: 100% 68.84%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="63"] {
  background-size: 100% 69.66%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="64"] {
  background-size: 100% 70.48%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="65"] {
  background-size: 100% 71.3%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="66"] {
  background-size: 100% 72.12%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="67"] {
  background-size: 100% 72.94%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="68"] {
  background-size: 100% 73.76%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="69"] {
  background-size: 100% 74.58%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="70"] {
  background-size: 100% 75.4%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="71"] {
  background-size: 100% 76.22%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="72"] {
  background-size: 100% 77.04%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="73"] {
  background-size: 100% 77.86%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="74"] {
  background-size: 100% 78.68%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="75"] {
  background-size: 100% 79.5%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="76"] {
  background-size: 100% 80.32%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="77"] {
  background-size: 100% 81.14%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="78"] {
  background-size: 100% 81.96%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="79"] {
  background-size: 100% 82.78%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="80"] {
  background-size: 100% 83.6%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="81"] {
  background-size: 100% 84.42%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="82"] {
  background-size: 100% 85.24%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="83"] {
  background-size: 100% 86.06%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="84"] {
  background-size: 100% 86.88%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="85"] {
  background-size: 100% 87.7%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="86"] {
  background-size: 100% 88.52%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="87"] {
  background-size: 100% 89.34%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="88"] {
  background-size: 100% 90.16%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="89"] {
  background-size: 100% 90.98%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="90"] {
  background-size: 100% 91.8%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="91"] {
  background-size: 100% 92.62%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="92"] {
  background-size: 100% 93.44%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="93"] {
  background-size: 100% 94.26%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="94"] {
  background-size: 100% 95.08%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="95"] {
  background-size: 100% 95.9%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="96"] {
  background-size: 100% 96.72%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="97"] {
  background-size: 100% 97.54%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="98"] {
  background-size: 100% 98.36%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="99"] {
  background-size: 100% 99.18%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-value[data-value="100"] {
  background-size: 100% 100%;
}
.choose-lesson-control .choose-lesson-control-container .choose-lesson-body .progress-label {
  position: absolute;
  top: 6px;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 800;
}
.choose-lesson-control.disabled .choose-lesson-body::after {
  font-family: "icomoon";
  content: "\e905";
  font-size: 24px;
  color: #C2C2C7;
  position: absolute;
  background-color: rgba(81, 83, 85, 0.8);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.choose-lesson-control.disabled:focus .choose-lesson-control-container {
  border-width: 5px;
}

.french-lessons-layout {
  min-height: 100vh;
  background: linear-gradient(180deg, #F7F5E8 0%, #E8E6D3 100%);
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.french-lessons-layout .french-lessons-header {
  position: relative;
  padding: 20px;
  text-align: center;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.french-lessons-layout .french-lessons-header h2 {
  margin: 0;
  color: #242452;
  font-family: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
}
.french-lessons-layout .french-lessons-header .return-button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.french-lessons-layout .lessons-path {
  position: relative;
  z-index: 10;
  padding: 20px 0 100px;
  max-width: 100%;
  margin: 0 auto;
}
.french-lessons-layout .lessons-path .lesson-node {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(1) {
  margin-left: -12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(2) {
  margin-left: 0rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(3) {
  margin-left: 12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(4) {
  margin-left: 0 !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(5) {
  margin-left: -12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(6) {
  margin-left: 0 !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(7) {
  margin-left: 12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(8) {
  margin-left: 0rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(9) {
  margin-left: -12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(10) {
  margin-left: 0rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(11) {
  margin-left: 12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(12) {
  margin-left: 0 !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(13) {
  margin-left: -12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(14) {
  margin-left: 0 !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(15) {
  margin-left: 12rem !important;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(n+16):nth-child(4n+1) {
  margin-left: -40px;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(n+16):nth-child(4n+2) {
  margin-left: 0;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(n+16):nth-child(4n+3) {
  margin-left: 40px;
}
.french-lessons-layout .lessons-path .lesson-node:nth-child(n+16):nth-child(4n) {
  margin-left: 0;
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle {
  width: 66px;
  height: 66px;
  border-radius: 24px;
  background: var(--lesson-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
  color: white;
  font-size: 20px;
  position: relative;
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle:not(.disabled) {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 0 0 12px rgba(255, 255, 255, 0.7), 0 0 0 24px rgba(255, 255, 255, 0.4);
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle:hover:not(.disabled) {
  transform: scale(1.05);
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle.first-lesson {
  background: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle.first-lesson .lesson-star {
  font-size: 24px;
  animation: starGlow 2s ease-in-out infinite;
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle.completed {
  background: linear-gradient(135deg, #7B5CF0 0%, #5A45D1 100%);
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle.completed .lesson-star {
  font-size: 24px;
  animation: starGlow 2s ease-in-out infinite;
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle.current {
  background: linear-gradient(135deg, #FF6B9D 0%, #FF4081 100%);
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle.disabled {
  background: #C4C4C4 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 0 0 12px rgba(255, 255, 255, 0.7), 0 0 0 24px rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle.disabled .lesson-lock {
  font-size: 18px;
  opacity: 0.7;
}
.french-lessons-layout .lessons-path .lesson-node .lesson-circle .lesson-icon {
  font-size: 18px;
  color: white;
}
.french-lessons-layout .language-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.french-lessons-layout .language-decorations .decoration {
  position: absolute;
  font-size: 40px;
  opacity: 1;
  filter: none;
}
.french-lessons-layout .language-decorations .decoration img {
  width: 140px;
  height: 200px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
.french-lessons-layout .language-decorations .decoration.icon-1 img {
  width: 168px;
  height: 245px;
}
.french-lessons-layout .language-decorations .decoration.icon-2 img {
  width: 140px;
  height: 200px;
}
.french-lessons-layout .language-decorations .decoration.icon-3 img {
  width: 140px;
  height: 200px;
}
.french-lessons-layout .language-decorations .decoration.icon-4 img, .french-lessons-layout .language-decorations .decoration.icon-5 img, .french-lessons-layout .language-decorations .decoration.icon-6 img {
  width: 140px;
  height: 200px;
}
.french-lessons-layout .language-decorations .decoration.eiffel-tower {
  font-size: 60px;
  opacity: 0.6;
}
.french-lessons-layout .language-decorations .decoration.building {
  font-size: 35px;
}
.french-lessons-layout .language-decorations .decoration.building-2 {
  font-size: 45px;
}
.french-lessons-layout .language-decorations .decoration.tree-1, .french-lessons-layout .language-decorations .decoration.tree-2, .french-lessons-layout .language-decorations .decoration.tree-3 {
  font-size: 35px;
}

@keyframes starGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}
@media (max-width: 768px) {
  .french-lessons-layout .lessons-path {
    padding: 15px 20px 80px;
  }
  .french-lessons-layout .lessons-path .lesson-node {
    margin-bottom: 35px;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(1) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(2) {
    margin-left: 0rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(3) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(4) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(5) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(6) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(7) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(8) {
    margin-left: 0rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(9) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(10) {
    margin-left: 0rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(11) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(12) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(13) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(14) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(15) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node .lesson-circle {
    width: 60px;
    height: 60px;
    font-size: 18px;
    border-radius: 20px;
  }
  .french-lessons-layout .lessons-path .lesson-node .lesson-circle:not(.disabled) {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(255, 255, 255, 0.7), 0 0 0 18px rgba(255, 255, 255, 0.4);
  }
  .french-lessons-layout .lessons-path .lesson-node .lesson-circle.disabled {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(255, 255, 255, 0.7), 0 0 0 18px rgba(255, 255, 255, 0.4);
  }
  .french-lessons-layout .language-decorations .decoration {
    font-size: 30px;
  }
  .french-lessons-layout .language-decorations .decoration img {
    width: 80px;
    height: 116px;
  }
  .french-lessons-layout .language-decorations .decoration.icon-1 img {
    width: 80px;
    height: 116px;
  }
  .french-lessons-layout .language-decorations .decoration.eiffel-tower {
    font-size: 45px;
  }
}
@media (max-width: 480px) {
  .french-lessons-layout .lessons-path {
    padding: 10px 15px 60px;
  }
  .french-lessons-layout .lessons-path .lesson-node {
    margin-bottom: 30px;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(1) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(2) {
    margin-left: 0rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(3) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(4) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(5) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(6) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(7) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(8) {
    margin-left: 0rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(9) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(10) {
    margin-left: 0rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(11) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(12) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(13) {
    margin-left: -12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(14) {
    margin-left: 0 !important;
  }
  .french-lessons-layout .lessons-path .lesson-node:nth-child(15) {
    margin-left: 12rem !important;
  }
  .french-lessons-layout .lessons-path .lesson-node .lesson-circle {
    width: 55px;
    height: 55px;
    font-size: 16px;
    border-radius: 18px;
  }
  .french-lessons-layout .lessons-path .lesson-node .lesson-circle:not(.disabled) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 8px rgba(255, 255, 255, 0.7), 0 0 0 14px rgba(255, 255, 255, 0.4);
  }
  .french-lessons-layout .lessons-path .lesson-node .lesson-circle.disabled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 8px rgba(255, 255, 255, 0.7), 0 0 0 14px rgba(255, 255, 255, 0.4);
  }
  .french-lessons-layout .language-decorations .decoration {
    font-size: 25px;
  }
  .french-lessons-layout .language-decorations .decoration img {
    width: 56px;
    height: 82px;
  }
  .french-lessons-layout .language-decorations .decoration.icon-1 img {
    width: 56px;
    height: 82px;
  }
  .french-lessons-layout .language-decorations .decoration.eiffel-tower {
    font-size: 35px;
  }
}
.circle-progress, .badge-control {
  max-width: 113px;
  display: inline-block;
  width: 100%;
}
.circle-progress.royalblue-border, .royalblue-border.badge-control,
.circle-progress .royalblue-border,
.badge-control .royalblue-border {
  --border-color: #2568B7;
}
.circle-progress.royalblue-color, .royalblue-color.badge-control,
.circle-progress .royalblue-color,
.badge-control .royalblue-color {
  --color: #2568B7;
}
.circle-progress.greenyellow-border, .greenyellow-border.badge-control,
.circle-progress .greenyellow-border,
.badge-control .greenyellow-border {
  --border-color: #C9F648;
}
.circle-progress.greenyellow-color, .greenyellow-color.badge-control,
.circle-progress .greenyellow-color,
.badge-control .greenyellow-color {
  --color: #C9F648;
}
.circle-progress.pink-border, .pink-border.badge-control,
.circle-progress .pink-border,
.badge-control .pink-border {
  --border-color: #F84281;
}
.circle-progress.pink-color, .pink-color.badge-control,
.circle-progress .pink-color,
.badge-control .pink-color {
  --color: #F84281;
}
.circle-progress.mediumorchid-border, .mediumorchid-border.badge-control,
.circle-progress .mediumorchid-border,
.badge-control .mediumorchid-border {
  --border-color: #C948F6;
}
.circle-progress.mediumorchid-color, .mediumorchid-color.badge-control,
.circle-progress .mediumorchid-color,
.badge-control .mediumorchid-color {
  --color: #C948F6;
}
.circle-progress.orange-border, .orange-border.badge-control,
.circle-progress .orange-border,
.badge-control .orange-border {
  --border-color: #F66748;
}
.circle-progress.orange-color, .orange-color.badge-control,
.circle-progress .orange-color,
.badge-control .orange-color {
  --color: #F66748;
}
.circle-progress.red-border, .red-border.badge-control,
.circle-progress .red-border,
.badge-control .red-border {
  --border-color: #FF0000;
}
.circle-progress.red-color, .red-color.badge-control,
.circle-progress .red-color,
.badge-control .red-color {
  --color: #FF0000;
}
.circle-progress.fuchsia-border, .fuchsia-border.badge-control,
.circle-progress .fuchsia-border,
.badge-control .fuchsia-border {
  --border-color: #EC1D68;
}
.circle-progress.fuchsia-color, .fuchsia-color.badge-control,
.circle-progress .fuchsia-color,
.badge-control .fuchsia-color {
  --color: #EC1D68;
}
.circle-progress.darkgoldenrod-border, .darkgoldenrod-border.badge-control,
.circle-progress .darkgoldenrod-border,
.badge-control .darkgoldenrod-border {
  --border-color: #B77C25;
}
.circle-progress.darkgoldenrod-color, .darkgoldenrod-color.badge-control,
.circle-progress .darkgoldenrod-color,
.badge-control .darkgoldenrod-color {
  --color: #B77C25;
}
.circle-progress.deepskyblue-border, .deepskyblue-border.badge-control,
.circle-progress .deepskyblue-border,
.badge-control .deepskyblue-border {
  --border-color: #48CCF6;
}
.circle-progress.deepskyblue-color, .deepskyblue-color.badge-control,
.circle-progress .deepskyblue-color,
.badge-control .deepskyblue-color {
  --color: #48CCF6;
}
.circle-progress.lightgreen-border, .lightgreen-border.badge-control,
.circle-progress .lightgreen-border,
.badge-control .lightgreen-border {
  --border-color: #48F66E;
}
.circle-progress.lightgreen-color, .lightgreen-color.badge-control,
.circle-progress .lightgreen-color,
.badge-control .lightgreen-color {
  --color: #48F66E;
}
.circle-progress.tomato-border, .tomato-border.badge-control,
.circle-progress .tomato-border,
.badge-control .tomato-border {
  --border-color: #F64848;
}
.circle-progress.tomato-color, .tomato-color.badge-control,
.circle-progress .tomato-color,
.badge-control .tomato-color {
  --color: #F64848;
}
.circle-progress.steelblue-border, .steelblue-border.badge-control,
.circle-progress .steelblue-border,
.badge-control .steelblue-border {
  --border-color: #4864F6;
}
.circle-progress.steelblue-color, .steelblue-color.badge-control,
.circle-progress .steelblue-color,
.badge-control .steelblue-color {
  --color: #4864F6;
}
.circle-progress.mediumaquamarine-border, .mediumaquamarine-border.badge-control,
.circle-progress .mediumaquamarine-border,
.badge-control .mediumaquamarine-border {
  --border-color: #7EBBA9;
}
.circle-progress.mediumaquamarine-color, .mediumaquamarine-color.badge-control,
.circle-progress .mediumaquamarine-color,
.badge-control .mediumaquamarine-color {
  --color: #7EBBA9;
}
.circle-progress.mediumpurple-border, .mediumpurple-border.badge-control,
.circle-progress .mediumpurple-border,
.badge-control .mediumpurple-border {
  --border-color: #B469FF;
}
.circle-progress.mediumpurple-color, .mediumpurple-color.badge-control,
.circle-progress .mediumpurple-color,
.badge-control .mediumpurple-color {
  --color: #B469FF;
}
.circle-progress.gold-border, .gold-border.badge-control,
.circle-progress .gold-border,
.badge-control .gold-border {
  --border-color: #F6DA48;
}
.circle-progress.gold-color, .gold-color.badge-control,
.circle-progress .gold-color,
.badge-control .gold-color {
  --color: #F6DA48;
}
.circle-progress.mediumturquoise-border, .mediumturquoise-border.badge-control,
.circle-progress .mediumturquoise-border,
.badge-control .mediumturquoise-border {
  --border-color: #48D1C1;
}
.circle-progress.mediumturquoise-color, .mediumturquoise-color.badge-control,
.circle-progress .mediumturquoise-color,
.badge-control .mediumturquoise-color {
  --color: #48D1C1;
}
.circle-progress.green-border, .green-border.badge-control,
.circle-progress .green-border,
.badge-control .green-border {
  --border-color: #25B73C;
}
.circle-progress.green-color, .green-color.badge-control,
.circle-progress .green-color,
.badge-control .green-color {
  --color: #25B73C;
}
.circle-progress.magenta-border, .magenta-border.badge-control,
.circle-progress .magenta-border,
.badge-control .magenta-border {
  --border-color: #F648D0;
}
.circle-progress.magenta-color, .magenta-color.badge-control,
.circle-progress .magenta-color,
.badge-control .magenta-color {
  --color: #F648D0;
}
.circle-progress.sandybrown-border, .sandybrown-border.badge-control,
.circle-progress .sandybrown-border,
.badge-control .sandybrown-border {
  --border-color: #F6B048;
}
.circle-progress.sandybrown-color, .sandybrown-color.badge-control,
.circle-progress .sandybrown-color,
.badge-control .sandybrown-color {
  --color: #F6B048;
}
.circle-progress.lawngreen-border, .lawngreen-border.badge-control,
.circle-progress .lawngreen-border,
.badge-control .lawngreen-border {
  --border-color: #91EC1D;
}
.circle-progress.lawngreen-color, .lawngreen-color.badge-control,
.circle-progress .lawngreen-color,
.badge-control .lawngreen-color {
  --color: #91EC1D;
}
.circle-progress.moccasin-border, .moccasin-border.badge-control,
.circle-progress .moccasin-border,
.badge-control .moccasin-border {
  --border-color: #FFF966;
}
.circle-progress.moccasin-color, .moccasin-color.badge-control,
.circle-progress .moccasin-color,
.badge-control .moccasin-color {
  --color: #FFF966;
}
.circle-progress.mediumspringgreen-border, .mediumspringgreen-border.badge-control,
.circle-progress .mediumspringgreen-border,
.badge-control .mediumspringgreen-border {
  --border-color: #1DEC95;
}
.circle-progress.mediumspringgreen-color, .mediumspringgreen-color.badge-control,
.circle-progress .mediumspringgreen-color,
.badge-control .mediumspringgreen-color {
  --color: #1DEC95;
}
.circle-progress.lightseagreen-border, .lightseagreen-border.badge-control,
.circle-progress .lightseagreen-border,
.badge-control .lightseagreen-border {
  --border-color: #25B7A5;
}
.circle-progress.lightseagreen-color, .lightseagreen-color.badge-control,
.circle-progress .lightseagreen-color,
.badge-control .lightseagreen-color {
  --color: #25B7A5;
}
.circle-progress.yellowgreen-border, .yellowgreen-border.badge-control,
.circle-progress .yellowgreen-border,
.badge-control .yellowgreen-border {
  --border-color: #B6EC1D;
}
.circle-progress.yellowgreen-color, .yellowgreen-color.badge-control,
.circle-progress .yellowgreen-color,
.badge-control .yellowgreen-color {
  --color: #B6EC1D;
}
.circle-progress.slateblue-border, .slateblue-border.badge-control,
.circle-progress .slateblue-border,
.badge-control .slateblue-border {
  --border-color: #5946A3;
}
.circle-progress.slateblue-color, .slateblue-color.badge-control,
.circle-progress .slateblue-color,
.badge-control .slateblue-color {
  --color: #5946A3;
}
.circle-progress.transparent-border, .transparent-border.badge-control,
.circle-progress .transparent-border,
.badge-control .transparent-border {
  --border-color: rgba(0, 0, 0, 0);
}
.circle-progress.transparent-color, .transparent-color.badge-control,
.circle-progress .transparent-color,
.badge-control .transparent-color {
  --color: rgba(0, 0, 0, 0);
}
.circle-progress .circle-progress-container, .badge-control .circle-progress-container {
  display: block;
  position: relative;
  border: 3px solid var(--border-color, #2C2A71);
  border-radius: 50%;
  width: 100%;
}
.circle-progress .circle-progress-container::before, .badge-control .circle-progress-container::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.circle-progress .circle-progress-container .circle-progress-body, .badge-control .circle-progress-container .circle-progress-body {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
}
.circle-progress .circle-progress-container .circle-progress-body .progress-background-image, .badge-control .circle-progress-container .circle-progress-body .progress-background-image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value, .badge-control .circle-progress-container .circle-progress-body .progress-value {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="0"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="0"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 100%, var(--color, rgb(46, 46, 120)) 100%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="1"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="1"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 99%, var(--color, rgb(46, 46, 120)) 99%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="2"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="2"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 98%, var(--color, rgb(46, 46, 120)) 98%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="3"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="3"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 97%, var(--color, rgb(46, 46, 120)) 97%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="4"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="4"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 96%, var(--color, rgb(46, 46, 120)) 96%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="5"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="5"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 95%, var(--color, rgb(46, 46, 120)) 95%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="6"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="6"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 94%, var(--color, rgb(46, 46, 120)) 94%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="7"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="7"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 93%, var(--color, rgb(46, 46, 120)) 93%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="8"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="8"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 92%, var(--color, rgb(46, 46, 120)) 92%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="9"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="9"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 91%, var(--color, rgb(46, 46, 120)) 91%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="10"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="10"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 90%, var(--color, rgb(46, 46, 120)) 90%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="11"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="11"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 89%, var(--color, rgb(46, 46, 120)) 89%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="12"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="12"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 88%, var(--color, rgb(46, 46, 120)) 88%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="13"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="13"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 87%, var(--color, rgb(46, 46, 120)) 87%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="14"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="14"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 86%, var(--color, rgb(46, 46, 120)) 86%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="15"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="15"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 85%, var(--color, rgb(46, 46, 120)) 85%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="16"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="16"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 84%, var(--color, rgb(46, 46, 120)) 84%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="17"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="17"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 83%, var(--color, rgb(46, 46, 120)) 83%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="18"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="18"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 82%, var(--color, rgb(46, 46, 120)) 82%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="19"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="19"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 81%, var(--color, rgb(46, 46, 120)) 81%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="20"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="20"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 80%, var(--color, rgb(46, 46, 120)) 80%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="21"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="21"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 79%, var(--color, rgb(46, 46, 120)) 79%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="22"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="22"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 78%, var(--color, rgb(46, 46, 120)) 78%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="23"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="23"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 77%, var(--color, rgb(46, 46, 120)) 77%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="24"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="24"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 76%, var(--color, rgb(46, 46, 120)) 76%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="25"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="25"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 75%, var(--color, rgb(46, 46, 120)) 75%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="26"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="26"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 74%, var(--color, rgb(46, 46, 120)) 74%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="27"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="27"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 73%, var(--color, rgb(46, 46, 120)) 73%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="28"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="28"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 72%, var(--color, rgb(46, 46, 120)) 72%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="29"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="29"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 71%, var(--color, rgb(46, 46, 120)) 71%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="30"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="30"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 70%, var(--color, rgb(46, 46, 120)) 70%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="31"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="31"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 69%, var(--color, rgb(46, 46, 120)) 69%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="32"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="32"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 68%, var(--color, rgb(46, 46, 120)) 68%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="33"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="33"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 67%, var(--color, rgb(46, 46, 120)) 67%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="34"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="34"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 66%, var(--color, rgb(46, 46, 120)) 66%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="35"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="35"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 65%, var(--color, rgb(46, 46, 120)) 65%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="36"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="36"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 64%, var(--color, rgb(46, 46, 120)) 64%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="37"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="37"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 63%, var(--color, rgb(46, 46, 120)) 63%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="38"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="38"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 62%, var(--color, rgb(46, 46, 120)) 62%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="39"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="39"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 61%, var(--color, rgb(46, 46, 120)) 61%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="40"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="40"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 60%, var(--color, rgb(46, 46, 120)) 60%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="41"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="41"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 59%, var(--color, rgb(46, 46, 120)) 59%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="42"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="42"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 58%, var(--color, rgb(46, 46, 120)) 58%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="43"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="43"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 57%, var(--color, rgb(46, 46, 120)) 57%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="44"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="44"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 56%, var(--color, rgb(46, 46, 120)) 56%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="45"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="45"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 55%, var(--color, rgb(46, 46, 120)) 55%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="46"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="46"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 54%, var(--color, rgb(46, 46, 120)) 54%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="47"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="47"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 53%, var(--color, rgb(46, 46, 120)) 53%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="48"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="48"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 52%, var(--color, rgb(46, 46, 120)) 52%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="49"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="49"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 51%, var(--color, rgb(46, 46, 120)) 51%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="50"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="50"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 50%, var(--color, rgb(46, 46, 120)) 50%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="51"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="51"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 49%, var(--color, rgb(46, 46, 120)) 49%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="52"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="52"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 48%, var(--color, rgb(46, 46, 120)) 48%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="53"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="53"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 47%, var(--color, rgb(46, 46, 120)) 47%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="54"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="54"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 46%, var(--color, rgb(46, 46, 120)) 46%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="55"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="55"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 45%, var(--color, rgb(46, 46, 120)) 45%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="56"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="56"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 44%, var(--color, rgb(46, 46, 120)) 44%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="57"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="57"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 43%, var(--color, rgb(46, 46, 120)) 43%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="58"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="58"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 42%, var(--color, rgb(46, 46, 120)) 42%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="59"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="59"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 41%, var(--color, rgb(46, 46, 120)) 41%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="60"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="60"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 40%, var(--color, rgb(46, 46, 120)) 40%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="61"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="61"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 39%, var(--color, rgb(46, 46, 120)) 39%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="62"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="62"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 38%, var(--color, rgb(46, 46, 120)) 38%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="63"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="63"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 37%, var(--color, rgb(46, 46, 120)) 37%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="64"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="64"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 36%, var(--color, rgb(46, 46, 120)) 36%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="65"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="65"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 35%, var(--color, rgb(46, 46, 120)) 35%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="66"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="66"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 34%, var(--color, rgb(46, 46, 120)) 34%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="67"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="67"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 33%, var(--color, rgb(46, 46, 120)) 33%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="68"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="68"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 32%, var(--color, rgb(46, 46, 120)) 32%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="69"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="69"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 31%, var(--color, rgb(46, 46, 120)) 31%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="70"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="70"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 30%, var(--color, rgb(46, 46, 120)) 30%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="71"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="71"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 29%, var(--color, rgb(46, 46, 120)) 29%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="72"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="72"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 28%, var(--color, rgb(46, 46, 120)) 28%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="73"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="73"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 27%, var(--color, rgb(46, 46, 120)) 27%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="74"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="74"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 26%, var(--color, rgb(46, 46, 120)) 26%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="75"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="75"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 25%, var(--color, rgb(46, 46, 120)) 25%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="76"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="76"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 24%, var(--color, rgb(46, 46, 120)) 24%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="77"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="77"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 23%, var(--color, rgb(46, 46, 120)) 23%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="78"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="78"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 22%, var(--color, rgb(46, 46, 120)) 22%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="79"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="79"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 21%, var(--color, rgb(46, 46, 120)) 21%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="80"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="80"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 20%, var(--color, rgb(46, 46, 120)) 20%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="81"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="81"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 19%, var(--color, rgb(46, 46, 120)) 19%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="82"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="82"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 18%, var(--color, rgb(46, 46, 120)) 18%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="83"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="83"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 17%, var(--color, rgb(46, 46, 120)) 17%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="84"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="84"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 16%, var(--color, rgb(46, 46, 120)) 16%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="85"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="85"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 15%, var(--color, rgb(46, 46, 120)) 15%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="86"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="86"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 14%, var(--color, rgb(46, 46, 120)) 14%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="87"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="87"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 13%, var(--color, rgb(46, 46, 120)) 13%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="88"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="88"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 12%, var(--color, rgb(46, 46, 120)) 12%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="89"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="89"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 11%, var(--color, rgb(46, 46, 120)) 11%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="90"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="90"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 10%, var(--color, rgb(46, 46, 120)) 10%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="91"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="91"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 9%, var(--color, rgb(46, 46, 120)) 9%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="92"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="92"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 8%, var(--color, rgb(46, 46, 120)) 8%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="93"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="93"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 7%, var(--color, rgb(46, 46, 120)) 7%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="94"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="94"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 6%, var(--color, rgb(46, 46, 120)) 6%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="95"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="95"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 5%, var(--color, rgb(46, 46, 120)) 5%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="96"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="96"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 4%, var(--color, rgb(46, 46, 120)) 4%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="97"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="97"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 3%, var(--color, rgb(46, 46, 120)) 3%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="98"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="98"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 2%, var(--color, rgb(46, 46, 120)) 2%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="99"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="99"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 1%, var(--color, rgb(46, 46, 120)) 1%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value[data-value="100"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value[data-value="100"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  opacity: 0.8;
  background: linear-gradient(180deg, rgb(92, 92, 98) 0%, var(--color, rgb(46, 46, 120)) 0%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="0"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="0"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 100%, var(--color, rgba(46, 46, 120, 0.8)) 100%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="1"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="1"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 99%, var(--color, rgba(46, 46, 120, 0.8)) 99%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="2"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="2"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 98%, var(--color, rgba(46, 46, 120, 0.8)) 98%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="3"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="3"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 97%, var(--color, rgba(46, 46, 120, 0.8)) 97%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="4"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="4"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 96%, var(--color, rgba(46, 46, 120, 0.8)) 96%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="5"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="5"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 95%, var(--color, rgba(46, 46, 120, 0.8)) 95%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="6"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="6"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 94%, var(--color, rgba(46, 46, 120, 0.8)) 94%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="7"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="7"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 93%, var(--color, rgba(46, 46, 120, 0.8)) 93%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="8"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="8"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 92%, var(--color, rgba(46, 46, 120, 0.8)) 92%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="9"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="9"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 91%, var(--color, rgba(46, 46, 120, 0.8)) 91%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="10"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="10"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 90%, var(--color, rgba(46, 46, 120, 0.8)) 90%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="11"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="11"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 89%, var(--color, rgba(46, 46, 120, 0.8)) 89%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="12"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="12"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 88%, var(--color, rgba(46, 46, 120, 0.8)) 88%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="13"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="13"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 87%, var(--color, rgba(46, 46, 120, 0.8)) 87%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="14"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="14"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 86%, var(--color, rgba(46, 46, 120, 0.8)) 86%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="15"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="15"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 85%, var(--color, rgba(46, 46, 120, 0.8)) 85%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="16"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="16"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 84%, var(--color, rgba(46, 46, 120, 0.8)) 84%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="17"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="17"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 83%, var(--color, rgba(46, 46, 120, 0.8)) 83%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="18"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="18"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 82%, var(--color, rgba(46, 46, 120, 0.8)) 82%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="19"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="19"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 81%, var(--color, rgba(46, 46, 120, 0.8)) 81%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="20"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="20"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 80%, var(--color, rgba(46, 46, 120, 0.8)) 80%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="21"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="21"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 79%, var(--color, rgba(46, 46, 120, 0.8)) 79%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="22"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="22"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 78%, var(--color, rgba(46, 46, 120, 0.8)) 78%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="23"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="23"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 77%, var(--color, rgba(46, 46, 120, 0.8)) 77%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="24"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="24"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 76%, var(--color, rgba(46, 46, 120, 0.8)) 76%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="25"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="25"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 75%, var(--color, rgba(46, 46, 120, 0.8)) 75%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="26"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="26"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 74%, var(--color, rgba(46, 46, 120, 0.8)) 74%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="27"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="27"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 73%, var(--color, rgba(46, 46, 120, 0.8)) 73%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="28"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="28"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 72%, var(--color, rgba(46, 46, 120, 0.8)) 72%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="29"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="29"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 71%, var(--color, rgba(46, 46, 120, 0.8)) 71%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="30"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="30"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 70%, var(--color, rgba(46, 46, 120, 0.8)) 70%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="31"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="31"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 69%, var(--color, rgba(46, 46, 120, 0.8)) 69%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="32"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="32"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 68%, var(--color, rgba(46, 46, 120, 0.8)) 68%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="33"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="33"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 67%, var(--color, rgba(46, 46, 120, 0.8)) 67%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="34"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="34"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 66%, var(--color, rgba(46, 46, 120, 0.8)) 66%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="35"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="35"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 65%, var(--color, rgba(46, 46, 120, 0.8)) 65%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="36"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="36"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 64%, var(--color, rgba(46, 46, 120, 0.8)) 64%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="37"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="37"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 63%, var(--color, rgba(46, 46, 120, 0.8)) 63%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="38"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="38"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 62%, var(--color, rgba(46, 46, 120, 0.8)) 62%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="39"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="39"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 61%, var(--color, rgba(46, 46, 120, 0.8)) 61%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="40"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="40"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 60%, var(--color, rgba(46, 46, 120, 0.8)) 60%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="41"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="41"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 59%, var(--color, rgba(46, 46, 120, 0.8)) 59%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="42"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="42"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 58%, var(--color, rgba(46, 46, 120, 0.8)) 58%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="43"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="43"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 57%, var(--color, rgba(46, 46, 120, 0.8)) 57%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="44"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="44"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 56%, var(--color, rgba(46, 46, 120, 0.8)) 56%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="45"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="45"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 55%, var(--color, rgba(46, 46, 120, 0.8)) 55%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="46"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="46"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 54%, var(--color, rgba(46, 46, 120, 0.8)) 54%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="47"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="47"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 53%, var(--color, rgba(46, 46, 120, 0.8)) 53%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="48"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="48"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 52%, var(--color, rgba(46, 46, 120, 0.8)) 52%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="49"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="49"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 51%, var(--color, rgba(46, 46, 120, 0.8)) 51%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="50"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="50"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 50%, var(--color, rgba(46, 46, 120, 0.8)) 50%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="51"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="51"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 49%, var(--color, rgba(46, 46, 120, 0.8)) 49%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="52"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="52"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 48%, var(--color, rgba(46, 46, 120, 0.8)) 48%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="53"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="53"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 47%, var(--color, rgba(46, 46, 120, 0.8)) 47%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="54"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="54"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 46%, var(--color, rgba(46, 46, 120, 0.8)) 46%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="55"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="55"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 45%, var(--color, rgba(46, 46, 120, 0.8)) 45%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="56"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="56"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 44%, var(--color, rgba(46, 46, 120, 0.8)) 44%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="57"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="57"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 43%, var(--color, rgba(46, 46, 120, 0.8)) 43%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="58"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="58"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 42%, var(--color, rgba(46, 46, 120, 0.8)) 42%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="59"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="59"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 41%, var(--color, rgba(46, 46, 120, 0.8)) 41%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="60"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="60"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 40%, var(--color, rgba(46, 46, 120, 0.8)) 40%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="61"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="61"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 39%, var(--color, rgba(46, 46, 120, 0.8)) 39%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="62"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="62"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 38%, var(--color, rgba(46, 46, 120, 0.8)) 38%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="63"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="63"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 37%, var(--color, rgba(46, 46, 120, 0.8)) 37%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="64"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="64"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 36%, var(--color, rgba(46, 46, 120, 0.8)) 36%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="65"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="65"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 35%, var(--color, rgba(46, 46, 120, 0.8)) 35%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="66"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="66"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 34%, var(--color, rgba(46, 46, 120, 0.8)) 34%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="67"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="67"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 33%, var(--color, rgba(46, 46, 120, 0.8)) 33%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="68"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="68"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 32%, var(--color, rgba(46, 46, 120, 0.8)) 32%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="69"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="69"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 31%, var(--color, rgba(46, 46, 120, 0.8)) 31%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="70"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="70"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 30%, var(--color, rgba(46, 46, 120, 0.8)) 30%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="71"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="71"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 29%, var(--color, rgba(46, 46, 120, 0.8)) 29%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="72"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="72"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 28%, var(--color, rgba(46, 46, 120, 0.8)) 28%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="73"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="73"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 27%, var(--color, rgba(46, 46, 120, 0.8)) 27%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="74"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="74"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 26%, var(--color, rgba(46, 46, 120, 0.8)) 26%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="75"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="75"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 25%, var(--color, rgba(46, 46, 120, 0.8)) 25%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="76"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="76"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 24%, var(--color, rgba(46, 46, 120, 0.8)) 24%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="77"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="77"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 23%, var(--color, rgba(46, 46, 120, 0.8)) 23%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="78"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="78"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 22%, var(--color, rgba(46, 46, 120, 0.8)) 22%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="79"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="79"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 21%, var(--color, rgba(46, 46, 120, 0.8)) 21%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="80"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="80"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 20%, var(--color, rgba(46, 46, 120, 0.8)) 20%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="81"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="81"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 19%, var(--color, rgba(46, 46, 120, 0.8)) 19%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="82"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="82"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 18%, var(--color, rgba(46, 46, 120, 0.8)) 18%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="83"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="83"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 17%, var(--color, rgba(46, 46, 120, 0.8)) 17%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="84"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="84"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 16%, var(--color, rgba(46, 46, 120, 0.8)) 16%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="85"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="85"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 15%, var(--color, rgba(46, 46, 120, 0.8)) 15%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="86"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="86"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 14%, var(--color, rgba(46, 46, 120, 0.8)) 14%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="87"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="87"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 13%, var(--color, rgba(46, 46, 120, 0.8)) 13%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="88"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="88"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 12%, var(--color, rgba(46, 46, 120, 0.8)) 12%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="89"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="89"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 11%, var(--color, rgba(46, 46, 120, 0.8)) 11%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="90"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="90"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 10%, var(--color, rgba(46, 46, 120, 0.8)) 10%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="91"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="91"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 9%, var(--color, rgba(46, 46, 120, 0.8)) 9%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="92"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="92"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 8%, var(--color, rgba(46, 46, 120, 0.8)) 8%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="93"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="93"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 7%, var(--color, rgba(46, 46, 120, 0.8)) 7%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="94"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="94"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 6%, var(--color, rgba(46, 46, 120, 0.8)) 6%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="95"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="95"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 5%, var(--color, rgba(46, 46, 120, 0.8)) 5%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="96"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="96"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 4%, var(--color, rgba(46, 46, 120, 0.8)) 4%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="97"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="97"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 3%, var(--color, rgba(46, 46, 120, 0.8)) 3%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="98"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="98"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 2%, var(--color, rgba(46, 46, 120, 0.8)) 2%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="99"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="99"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 1%, var(--color, rgba(46, 46, 120, 0.8)) 1%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="100"]::after, .badge-control .circle-progress-container .circle-progress-body .progress-value.horizontal[data-value="100"]::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  border-radius: 50%;
  background: linear-gradient(270deg, rgba(92, 92, 98, 0.8) 0%, var(--color, rgba(46, 46, 120, 0.8)) 0%);
}
.circle-progress .circle-progress-container .circle-progress-body .progress-label, .badge-control .circle-progress-container .circle-progress-body .progress-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
}
.circle-progress.disabled .circle-progress-body::after, .disabled.badge-control .circle-progress-body::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  font-family: "icomoon";
  content: "\e905";
  font-size: 24px;
  color: #C2C2C7;
  background-color: rgba(81, 83, 85, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.badge-control .circle-progress-container {
  border: 5px solid transparent;
}
.badge-control .circle-progress-container .circle-progress-body {
  border: none;
}
.badge-control:focus .circle-progress-container {
  border: 5px solid #2C2A71;
}

.simple-popover {
  border-radius: 12px;
  opacity: 0.9;
  background-color: #2E2E78;
  color: #FFFFFF;
  font-size: 12px;
}
.simple-popover .popover-body {
  color: #FFFFFF;
  padding: 0 12px 12px 12px;
}
.simple-popover .icon-close {
  margin-top: 0.375rem;
  margin-right: 0.375rem;
  font-size: 16px;
}

.simple-popover-content {
  display: none;
}

.article-thumbnail .unlock-instruction {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 80%;
  background-color: rgba(46, 46, 120, 0.9);
  z-index: 4;
  border-radius: 0.8rem;
  border: 3px solid #2E2E78;
}
.article-thumbnail .unlock-instruction .icon-close {
  color: #FFFFFF;
  position: absolute;
  right: 0;
  margin-top: 0.375rem;
  margin-right: 0.375rem;
  font-size: 16px;
}
.article-thumbnail .unlock-instruction .unlock-message {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
}
.article-thumbnail.disabled {
  cursor: pointer;
}
.article-thumbnail.disabled::after {
  background: rgba(98, 96, 96, 0.4);
  font-family: "icomoon";
  content: "\e905";
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 0.7rem;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 3;
}
.article-thumbnail.disabled .unlock-instruction.show {
  display: block;
}

.dimoco-styled .text-black p, .dimoco-styled h4 {
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dimoco-styled input {
  padding: 10px;
  margin: 0;
  outline: none;
  border: 2px solid #f60;
  border-radius: 10px;
  color: black;
  font-size: 14px;
  box-shadow: none;
}
.dimoco-styled input :focus {
  background-color: transparent;
  border-color: #f60;
  box-shadow: none;
}
.dimoco-styled button {
  outline: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #f60;
  font-size: 14px;
  border-radius: 10px;
  font-weight: bold;
  padding: 13px 26px;
}

.landing {
  background-color: #F7F4F1;
}
.landing main {
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
}
@media (max-width: 575px) {
  .landing main .wifi-registration {
    margin-top: -120px;
  }
}
@media (min-width: 992px) {
  .landing main .wifi-registration {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}
.landing main footer {
  margin-top: auto;
}
@media (max-width: 575px) {
  .landing .hero {
    padding-top: 70vw;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .landing .hero {
    padding-top: 230px;
  }
  .landing .hero h3 {
    font-size: 49px;
  }
}
@media (min-width: 992px) {
  .landing .hero {
    padding-top: 140px;
  }
  .landing .hero h3 {
    font-size: 49px;
  }
}

.read-more-link {
  font-size: 1.125rem;
  font-weight: 500;
  color: #FF4F86;
}
.read-more-link:hover {
  color: #FF4F86;
}
.read-more-link::before, .read-more-link::after {
  font-family: "icomoon";
  content: "\e910";
  color: #FF4F86;
  font-size: 0.6rem;
}
.read-more-link.collapsed::after, .read-more-link.collapsed::before {
  content: "\e90f";
}
.read-more-link .show-expanded {
  display: none;
}
.read-more-link .show-collapsed {
  display: inline-block;
}
.read-more-link.collapsed .show-expanded {
  display: inline-block;
}
.read-more-link.collapsed .show-collapsed {
  display: none;
}

.read-more-list {
  list-style-type: none;
}
.read-more-list li {
  position: relative;
  font-size: 0.75rem;
  font-weight: 500;
  color: #2C2A71;
  text-align: start;
  margin-bottom: 0.5rem;
}
.read-more-list li::before {
  position: absolute;
  font-family: "icomoon";
  content: "\e909";
  color: #FF4F86;
  font-size: 4px;
  vertical-align: middle;
  top: 6px;
  left: -16px;
}
.read-more-list li span,
.read-more-list li a {
  color: #FF4F86;
}

.input-label {
  font-size: 11px;
}
@media (max-width: 414px) {
  .input-label {
    font-size: 9px;
  }
}

.article-circle {
  width: 65px;
  height: 65px;
  background: #FFFBFB;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
}
.article-circle .icon-style {
  font-size: 24px;
}

@media (max-width: 375px) {
  .word-card .card-body {
    padding: 10px 10px;
  }
}
@media (min-width: 1200px) {
  .article-circle {
    width: 94px;
    height: 94px;
  }
  .article-circle .icon-style {
    font-size: 36px;
  }
}
.hero-heading {
  position: relative;
}
.hero-heading:after {
  content: "";
  display: block;
  height: 0.375rem;
  width: 3.125rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  background: #F84281;
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
  border-radius: 0.625rem;
}

.main {
  background-color: transparent;
}

.main-blue, .modal-tutorial .tutorial-background {
  background-color: transparent;
}

.main-lesson {
  background-color: #F7F4F1;
}

.main-circle-style {
  width: 113px;
  height: 113px;
  position: relative;
}
.main-circle-style::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(130, 130, 130, 0.8);
  height: 100%;
  z-index: 1;
  border: 3px solid #FFFFFF;
  outline: 3px solid #2C2A71;
  border-radius: 50%;
}
.main-circle-style::before.blue {
  background: rgba(18, 15, 110, 0.8);
}
.main-circle-style .img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(97, 97, 97, 0.6);
  height: 100%;
  z-index: 1;
  border: 3px solid #FFFFFF;
  outline: 3px solid #2C2A71;
}
.main-circle-style .img-overlay.blue {
  background: rgba(18, 15, 110, 0.8);
}
.main-circle-style .title-block {
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
}
.main-circle-style .icon-style {
  position: absolute;
  bottom: 8px;
  right: 0;
}
.main-circle-style.disabled .img-overlay {
  background: rgba(85, 85, 100, 0.9);
  outline: 3px solid #68665F;
}
.main-circle-style.disabled::after {
  font-family: "icomoon";
  content: "\e905";
  font-size: 24px;
  color: #C2C2C7;
  position: relative;
  z-index: 3;
  top: calc(50% - 20px);
}
.main-circle-style.disabled .title-block {
  color: rgb(128, 128, 128);
}
.main-circle-style[data-type=progress][data-value="0"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 100%, rgba(46, 46, 120, 0.8) 100%);
}
.main-circle-style[data-type=progress][data-value="1"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 99%, rgba(46, 46, 120, 0.8) 99%);
}
.main-circle-style[data-type=progress][data-value="2"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 98%, rgba(46, 46, 120, 0.8) 98%);
}
.main-circle-style[data-type=progress][data-value="3"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 97%, rgba(46, 46, 120, 0.8) 97%);
}
.main-circle-style[data-type=progress][data-value="4"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 96%, rgba(46, 46, 120, 0.8) 96%);
}
.main-circle-style[data-type=progress][data-value="5"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 95%, rgba(46, 46, 120, 0.8) 95%);
}
.main-circle-style[data-type=progress][data-value="6"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 94%, rgba(46, 46, 120, 0.8) 94%);
}
.main-circle-style[data-type=progress][data-value="7"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 93%, rgba(46, 46, 120, 0.8) 93%);
}
.main-circle-style[data-type=progress][data-value="8"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 92%, rgba(46, 46, 120, 0.8) 92%);
}
.main-circle-style[data-type=progress][data-value="9"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 91%, rgba(46, 46, 120, 0.8) 91%);
}
.main-circle-style[data-type=progress][data-value="10"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 90%, rgba(46, 46, 120, 0.8) 90%);
}
.main-circle-style[data-type=progress][data-value="11"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 89%, rgba(46, 46, 120, 0.8) 89%);
}
.main-circle-style[data-type=progress][data-value="12"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 88%, rgba(46, 46, 120, 0.8) 88%);
}
.main-circle-style[data-type=progress][data-value="13"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 87%, rgba(46, 46, 120, 0.8) 87%);
}
.main-circle-style[data-type=progress][data-value="14"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 86%, rgba(46, 46, 120, 0.8) 86%);
}
.main-circle-style[data-type=progress][data-value="15"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 85%, rgba(46, 46, 120, 0.8) 85%);
}
.main-circle-style[data-type=progress][data-value="16"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 84%, rgba(46, 46, 120, 0.8) 84%);
}
.main-circle-style[data-type=progress][data-value="17"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 83%, rgba(46, 46, 120, 0.8) 83%);
}
.main-circle-style[data-type=progress][data-value="18"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 82%, rgba(46, 46, 120, 0.8) 82%);
}
.main-circle-style[data-type=progress][data-value="19"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 81%, rgba(46, 46, 120, 0.8) 81%);
}
.main-circle-style[data-type=progress][data-value="20"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 80%, rgba(46, 46, 120, 0.8) 80%);
}
.main-circle-style[data-type=progress][data-value="21"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 79%, rgba(46, 46, 120, 0.8) 79%);
}
.main-circle-style[data-type=progress][data-value="22"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 78%, rgba(46, 46, 120, 0.8) 78%);
}
.main-circle-style[data-type=progress][data-value="23"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 77%, rgba(46, 46, 120, 0.8) 77%);
}
.main-circle-style[data-type=progress][data-value="24"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 76%, rgba(46, 46, 120, 0.8) 76%);
}
.main-circle-style[data-type=progress][data-value="25"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 75%, rgba(46, 46, 120, 0.8) 75%);
}
.main-circle-style[data-type=progress][data-value="26"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 74%, rgba(46, 46, 120, 0.8) 74%);
}
.main-circle-style[data-type=progress][data-value="27"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 73%, rgba(46, 46, 120, 0.8) 73%);
}
.main-circle-style[data-type=progress][data-value="28"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 72%, rgba(46, 46, 120, 0.8) 72%);
}
.main-circle-style[data-type=progress][data-value="29"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 71%, rgba(46, 46, 120, 0.8) 71%);
}
.main-circle-style[data-type=progress][data-value="30"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 70%, rgba(46, 46, 120, 0.8) 70%);
}
.main-circle-style[data-type=progress][data-value="31"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 69%, rgba(46, 46, 120, 0.8) 69%);
}
.main-circle-style[data-type=progress][data-value="32"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 68%, rgba(46, 46, 120, 0.8) 68%);
}
.main-circle-style[data-type=progress][data-value="33"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 67%, rgba(46, 46, 120, 0.8) 67%);
}
.main-circle-style[data-type=progress][data-value="34"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 66%, rgba(46, 46, 120, 0.8) 66%);
}
.main-circle-style[data-type=progress][data-value="35"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 65%, rgba(46, 46, 120, 0.8) 65%);
}
.main-circle-style[data-type=progress][data-value="36"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 64%, rgba(46, 46, 120, 0.8) 64%);
}
.main-circle-style[data-type=progress][data-value="37"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 63%, rgba(46, 46, 120, 0.8) 63%);
}
.main-circle-style[data-type=progress][data-value="38"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 62%, rgba(46, 46, 120, 0.8) 62%);
}
.main-circle-style[data-type=progress][data-value="39"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 61%, rgba(46, 46, 120, 0.8) 61%);
}
.main-circle-style[data-type=progress][data-value="40"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 60%, rgba(46, 46, 120, 0.8) 60%);
}
.main-circle-style[data-type=progress][data-value="41"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 59%, rgba(46, 46, 120, 0.8) 59%);
}
.main-circle-style[data-type=progress][data-value="42"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 58%, rgba(46, 46, 120, 0.8) 58%);
}
.main-circle-style[data-type=progress][data-value="43"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 57%, rgba(46, 46, 120, 0.8) 57%);
}
.main-circle-style[data-type=progress][data-value="44"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 56%, rgba(46, 46, 120, 0.8) 56%);
}
.main-circle-style[data-type=progress][data-value="45"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 55%, rgba(46, 46, 120, 0.8) 55%);
}
.main-circle-style[data-type=progress][data-value="46"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 54%, rgba(46, 46, 120, 0.8) 54%);
}
.main-circle-style[data-type=progress][data-value="47"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 53%, rgba(46, 46, 120, 0.8) 53%);
}
.main-circle-style[data-type=progress][data-value="48"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 52%, rgba(46, 46, 120, 0.8) 52%);
}
.main-circle-style[data-type=progress][data-value="49"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 51%, rgba(46, 46, 120, 0.8) 51%);
}
.main-circle-style[data-type=progress][data-value="50"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 50%, rgba(46, 46, 120, 0.8) 50%);
}
.main-circle-style[data-type=progress][data-value="51"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 49%, rgba(46, 46, 120, 0.8) 49%);
}
.main-circle-style[data-type=progress][data-value="52"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 48%, rgba(46, 46, 120, 0.8) 48%);
}
.main-circle-style[data-type=progress][data-value="53"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 47%, rgba(46, 46, 120, 0.8) 47%);
}
.main-circle-style[data-type=progress][data-value="54"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 46%, rgba(46, 46, 120, 0.8) 46%);
}
.main-circle-style[data-type=progress][data-value="55"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 45%, rgba(46, 46, 120, 0.8) 45%);
}
.main-circle-style[data-type=progress][data-value="56"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 44%, rgba(46, 46, 120, 0.8) 44%);
}
.main-circle-style[data-type=progress][data-value="57"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 43%, rgba(46, 46, 120, 0.8) 43%);
}
.main-circle-style[data-type=progress][data-value="58"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 42%, rgba(46, 46, 120, 0.8) 42%);
}
.main-circle-style[data-type=progress][data-value="59"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 41%, rgba(46, 46, 120, 0.8) 41%);
}
.main-circle-style[data-type=progress][data-value="60"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 40%, rgba(46, 46, 120, 0.8) 40%);
}
.main-circle-style[data-type=progress][data-value="61"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 39%, rgba(46, 46, 120, 0.8) 39%);
}
.main-circle-style[data-type=progress][data-value="62"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 38%, rgba(46, 46, 120, 0.8) 38%);
}
.main-circle-style[data-type=progress][data-value="63"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 37%, rgba(46, 46, 120, 0.8) 37%);
}
.main-circle-style[data-type=progress][data-value="64"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 36%, rgba(46, 46, 120, 0.8) 36%);
}
.main-circle-style[data-type=progress][data-value="65"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 35%, rgba(46, 46, 120, 0.8) 35%);
}
.main-circle-style[data-type=progress][data-value="66"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 34%, rgba(46, 46, 120, 0.8) 34%);
}
.main-circle-style[data-type=progress][data-value="67"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 33%, rgba(46, 46, 120, 0.8) 33%);
}
.main-circle-style[data-type=progress][data-value="68"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 32%, rgba(46, 46, 120, 0.8) 32%);
}
.main-circle-style[data-type=progress][data-value="69"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 31%, rgba(46, 46, 120, 0.8) 31%);
}
.main-circle-style[data-type=progress][data-value="70"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 30%, rgba(46, 46, 120, 0.8) 30%);
}
.main-circle-style[data-type=progress][data-value="71"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 29%, rgba(46, 46, 120, 0.8) 29%);
}
.main-circle-style[data-type=progress][data-value="72"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 28%, rgba(46, 46, 120, 0.8) 28%);
}
.main-circle-style[data-type=progress][data-value="73"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 27%, rgba(46, 46, 120, 0.8) 27%);
}
.main-circle-style[data-type=progress][data-value="74"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 26%, rgba(46, 46, 120, 0.8) 26%);
}
.main-circle-style[data-type=progress][data-value="75"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 25%, rgba(46, 46, 120, 0.8) 25%);
}
.main-circle-style[data-type=progress][data-value="76"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 24%, rgba(46, 46, 120, 0.8) 24%);
}
.main-circle-style[data-type=progress][data-value="77"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 23%, rgba(46, 46, 120, 0.8) 23%);
}
.main-circle-style[data-type=progress][data-value="78"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 22%, rgba(46, 46, 120, 0.8) 22%);
}
.main-circle-style[data-type=progress][data-value="79"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 21%, rgba(46, 46, 120, 0.8) 21%);
}
.main-circle-style[data-type=progress][data-value="80"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 20%, rgba(46, 46, 120, 0.8) 20%);
}
.main-circle-style[data-type=progress][data-value="81"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 19%, rgba(46, 46, 120, 0.8) 19%);
}
.main-circle-style[data-type=progress][data-value="82"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 18%, rgba(46, 46, 120, 0.8) 18%);
}
.main-circle-style[data-type=progress][data-value="83"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 17%, rgba(46, 46, 120, 0.8) 17%);
}
.main-circle-style[data-type=progress][data-value="84"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 16%, rgba(46, 46, 120, 0.8) 16%);
}
.main-circle-style[data-type=progress][data-value="85"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 15%, rgba(46, 46, 120, 0.8) 15%);
}
.main-circle-style[data-type=progress][data-value="86"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 14%, rgba(46, 46, 120, 0.8) 14%);
}
.main-circle-style[data-type=progress][data-value="87"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 13%, rgba(46, 46, 120, 0.8) 13%);
}
.main-circle-style[data-type=progress][data-value="88"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 12%, rgba(46, 46, 120, 0.8) 12%);
}
.main-circle-style[data-type=progress][data-value="89"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 11%, rgba(46, 46, 120, 0.8) 11%);
}
.main-circle-style[data-type=progress][data-value="90"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 10%, rgba(46, 46, 120, 0.8) 10%);
}
.main-circle-style[data-type=progress][data-value="91"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 9%, rgba(46, 46, 120, 0.8) 9%);
}
.main-circle-style[data-type=progress][data-value="92"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 8%, rgba(46, 46, 120, 0.8) 8%);
}
.main-circle-style[data-type=progress][data-value="93"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 7%, rgba(46, 46, 120, 0.8) 7%);
}
.main-circle-style[data-type=progress][data-value="94"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 6%, rgba(46, 46, 120, 0.8) 6%);
}
.main-circle-style[data-type=progress][data-value="95"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 5%, rgba(46, 46, 120, 0.8) 5%);
}
.main-circle-style[data-type=progress][data-value="96"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 4%, rgba(46, 46, 120, 0.8) 4%);
}
.main-circle-style[data-type=progress][data-value="97"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 3%, rgba(46, 46, 120, 0.8) 3%);
}
.main-circle-style[data-type=progress][data-value="98"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 2%, rgba(46, 46, 120, 0.8) 2%);
}
.main-circle-style[data-type=progress][data-value="99"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 1%, rgba(46, 46, 120, 0.8) 1%);
}
.main-circle-style[data-type=progress][data-value="100"]::before {
  background: linear-gradient(180deg, rgba(92, 92, 98, 0.8) 0%, rgba(46, 46, 120, 0.8) 0%);
}

.badge-border {
  border: 9px solid rgba(130, 130, 130, 0.8);
}

.badge-circle-style {
  position: relative;
}
.badge-circle-style.big {
  width: 5.688rem;
  height: 5.688rem;
}
.badge-circle-style.small {
  width: 3.5rem;
  height: 3.5rem;
}
.badge-circle-style::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(130, 130, 130, 0.8);
  height: 100%;
  z-index: 1;
  border: 9px solid rgba(130, 130, 130, 0.8);
  border-radius: 50%;
}
.badge-circle-style::before.blue {
  background: rgba(18, 15, 110, 0.8);
}
.badge-circle-style::before.pink {
  background: #F84281;
}
.badge-circle-style .title-block {
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
}
.badge-circle-style .title-block.big img {
  width: 46px;
}
.badge-circle-style .title-block.small img {
  width: 20px;
}
.badge-circle-style[data-type=progress][data-value="0"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 100%, rgba(37, 104, 183, 0.8) 100%);
}
.badge-circle-style[data-type=progress][data-value="1"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 99%, rgba(37, 104, 183, 0.8) 99%);
}
.badge-circle-style[data-type=progress][data-value="2"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 98%, rgba(37, 104, 183, 0.8) 98%);
}
.badge-circle-style[data-type=progress][data-value="3"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 97%, rgba(37, 104, 183, 0.8) 97%);
}
.badge-circle-style[data-type=progress][data-value="4"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 96%, rgba(37, 104, 183, 0.8) 96%);
}
.badge-circle-style[data-type=progress][data-value="5"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 95%, rgba(37, 104, 183, 0.8) 95%);
}
.badge-circle-style[data-type=progress][data-value="6"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 94%, rgba(37, 104, 183, 0.8) 94%);
}
.badge-circle-style[data-type=progress][data-value="7"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 93%, rgba(37, 104, 183, 0.8) 93%);
}
.badge-circle-style[data-type=progress][data-value="8"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 92%, rgba(37, 104, 183, 0.8) 92%);
}
.badge-circle-style[data-type=progress][data-value="9"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 91%, rgba(37, 104, 183, 0.8) 91%);
}
.badge-circle-style[data-type=progress][data-value="10"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 90%, rgba(37, 104, 183, 0.8) 90%);
}
.badge-circle-style[data-type=progress][data-value="11"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 89%, rgba(37, 104, 183, 0.8) 89%);
}
.badge-circle-style[data-type=progress][data-value="12"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 88%, rgba(37, 104, 183, 0.8) 88%);
}
.badge-circle-style[data-type=progress][data-value="13"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 87%, rgba(37, 104, 183, 0.8) 87%);
}
.badge-circle-style[data-type=progress][data-value="14"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 86%, rgba(37, 104, 183, 0.8) 86%);
}
.badge-circle-style[data-type=progress][data-value="15"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 85%, rgba(37, 104, 183, 0.8) 85%);
}
.badge-circle-style[data-type=progress][data-value="16"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 84%, rgba(37, 104, 183, 0.8) 84%);
}
.badge-circle-style[data-type=progress][data-value="17"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 83%, rgba(37, 104, 183, 0.8) 83%);
}
.badge-circle-style[data-type=progress][data-value="18"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 82%, rgba(37, 104, 183, 0.8) 82%);
}
.badge-circle-style[data-type=progress][data-value="19"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 81%, rgba(37, 104, 183, 0.8) 81%);
}
.badge-circle-style[data-type=progress][data-value="20"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 80%, rgba(37, 104, 183, 0.8) 80%);
}
.badge-circle-style[data-type=progress][data-value="21"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 79%, rgba(37, 104, 183, 0.8) 79%);
}
.badge-circle-style[data-type=progress][data-value="22"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 78%, rgba(37, 104, 183, 0.8) 78%);
}
.badge-circle-style[data-type=progress][data-value="23"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 77%, rgba(37, 104, 183, 0.8) 77%);
}
.badge-circle-style[data-type=progress][data-value="24"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 76%, rgba(37, 104, 183, 0.8) 76%);
}
.badge-circle-style[data-type=progress][data-value="25"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 75%, rgba(37, 104, 183, 0.8) 75%);
}
.badge-circle-style[data-type=progress][data-value="26"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 74%, rgba(37, 104, 183, 0.8) 74%);
}
.badge-circle-style[data-type=progress][data-value="27"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 73%, rgba(37, 104, 183, 0.8) 73%);
}
.badge-circle-style[data-type=progress][data-value="28"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 72%, rgba(37, 104, 183, 0.8) 72%);
}
.badge-circle-style[data-type=progress][data-value="29"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 71%, rgba(37, 104, 183, 0.8) 71%);
}
.badge-circle-style[data-type=progress][data-value="30"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 70%, rgba(37, 104, 183, 0.8) 70%);
}
.badge-circle-style[data-type=progress][data-value="31"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 69%, rgba(37, 104, 183, 0.8) 69%);
}
.badge-circle-style[data-type=progress][data-value="32"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 68%, rgba(37, 104, 183, 0.8) 68%);
}
.badge-circle-style[data-type=progress][data-value="33"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 67%, rgba(37, 104, 183, 0.8) 67%);
}
.badge-circle-style[data-type=progress][data-value="34"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 66%, rgba(37, 104, 183, 0.8) 66%);
}
.badge-circle-style[data-type=progress][data-value="35"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 65%, rgba(37, 104, 183, 0.8) 65%);
}
.badge-circle-style[data-type=progress][data-value="36"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 64%, rgba(37, 104, 183, 0.8) 64%);
}
.badge-circle-style[data-type=progress][data-value="37"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 63%, rgba(37, 104, 183, 0.8) 63%);
}
.badge-circle-style[data-type=progress][data-value="38"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 62%, rgba(37, 104, 183, 0.8) 62%);
}
.badge-circle-style[data-type=progress][data-value="39"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 61%, rgba(37, 104, 183, 0.8) 61%);
}
.badge-circle-style[data-type=progress][data-value="40"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 60%, rgba(37, 104, 183, 0.8) 60%);
}
.badge-circle-style[data-type=progress][data-value="41"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 59%, rgba(37, 104, 183, 0.8) 59%);
}
.badge-circle-style[data-type=progress][data-value="42"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 58%, rgba(37, 104, 183, 0.8) 58%);
}
.badge-circle-style[data-type=progress][data-value="43"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 57%, rgba(37, 104, 183, 0.8) 57%);
}
.badge-circle-style[data-type=progress][data-value="44"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 56%, rgba(37, 104, 183, 0.8) 56%);
}
.badge-circle-style[data-type=progress][data-value="45"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 55%, rgba(37, 104, 183, 0.8) 55%);
}
.badge-circle-style[data-type=progress][data-value="46"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 54%, rgba(37, 104, 183, 0.8) 54%);
}
.badge-circle-style[data-type=progress][data-value="47"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 53%, rgba(37, 104, 183, 0.8) 53%);
}
.badge-circle-style[data-type=progress][data-value="48"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 52%, rgba(37, 104, 183, 0.8) 52%);
}
.badge-circle-style[data-type=progress][data-value="49"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 51%, rgba(37, 104, 183, 0.8) 51%);
}
.badge-circle-style[data-type=progress][data-value="50"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 50%, rgba(37, 104, 183, 0.8) 50%);
}
.badge-circle-style[data-type=progress][data-value="51"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 49%, rgba(37, 104, 183, 0.8) 49%);
}
.badge-circle-style[data-type=progress][data-value="52"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 48%, rgba(37, 104, 183, 0.8) 48%);
}
.badge-circle-style[data-type=progress][data-value="53"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 47%, rgba(37, 104, 183, 0.8) 47%);
}
.badge-circle-style[data-type=progress][data-value="54"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 46%, rgba(37, 104, 183, 0.8) 46%);
}
.badge-circle-style[data-type=progress][data-value="55"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 45%, rgba(37, 104, 183, 0.8) 45%);
}
.badge-circle-style[data-type=progress][data-value="56"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 44%, rgba(37, 104, 183, 0.8) 44%);
}
.badge-circle-style[data-type=progress][data-value="57"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 43%, rgba(37, 104, 183, 0.8) 43%);
}
.badge-circle-style[data-type=progress][data-value="58"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 42%, rgba(37, 104, 183, 0.8) 42%);
}
.badge-circle-style[data-type=progress][data-value="59"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 41%, rgba(37, 104, 183, 0.8) 41%);
}
.badge-circle-style[data-type=progress][data-value="60"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 40%, rgba(37, 104, 183, 0.8) 40%);
}
.badge-circle-style[data-type=progress][data-value="61"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 39%, rgba(37, 104, 183, 0.8) 39%);
}
.badge-circle-style[data-type=progress][data-value="62"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 38%, rgba(37, 104, 183, 0.8) 38%);
}
.badge-circle-style[data-type=progress][data-value="63"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 37%, rgba(37, 104, 183, 0.8) 37%);
}
.badge-circle-style[data-type=progress][data-value="64"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 36%, rgba(37, 104, 183, 0.8) 36%);
}
.badge-circle-style[data-type=progress][data-value="65"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 35%, rgba(37, 104, 183, 0.8) 35%);
}
.badge-circle-style[data-type=progress][data-value="66"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 34%, rgba(37, 104, 183, 0.8) 34%);
}
.badge-circle-style[data-type=progress][data-value="67"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 33%, rgba(37, 104, 183, 0.8) 33%);
}
.badge-circle-style[data-type=progress][data-value="68"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 32%, rgba(37, 104, 183, 0.8) 32%);
}
.badge-circle-style[data-type=progress][data-value="69"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 31%, rgba(37, 104, 183, 0.8) 31%);
}
.badge-circle-style[data-type=progress][data-value="70"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 30%, rgba(37, 104, 183, 0.8) 30%);
}
.badge-circle-style[data-type=progress][data-value="71"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 29%, rgba(37, 104, 183, 0.8) 29%);
}
.badge-circle-style[data-type=progress][data-value="72"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 28%, rgba(37, 104, 183, 0.8) 28%);
}
.badge-circle-style[data-type=progress][data-value="73"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 27%, rgba(37, 104, 183, 0.8) 27%);
}
.badge-circle-style[data-type=progress][data-value="74"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 26%, rgba(37, 104, 183, 0.8) 26%);
}
.badge-circle-style[data-type=progress][data-value="75"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 25%, rgba(37, 104, 183, 0.8) 25%);
}
.badge-circle-style[data-type=progress][data-value="76"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 24%, rgba(37, 104, 183, 0.8) 24%);
}
.badge-circle-style[data-type=progress][data-value="77"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 23%, rgba(37, 104, 183, 0.8) 23%);
}
.badge-circle-style[data-type=progress][data-value="78"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 22%, rgba(37, 104, 183, 0.8) 22%);
}
.badge-circle-style[data-type=progress][data-value="79"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 21%, rgba(37, 104, 183, 0.8) 21%);
}
.badge-circle-style[data-type=progress][data-value="80"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 20%, rgba(37, 104, 183, 0.8) 20%);
}
.badge-circle-style[data-type=progress][data-value="81"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 19%, rgba(37, 104, 183, 0.8) 19%);
}
.badge-circle-style[data-type=progress][data-value="82"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 18%, rgba(37, 104, 183, 0.8) 18%);
}
.badge-circle-style[data-type=progress][data-value="83"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 17%, rgba(37, 104, 183, 0.8) 17%);
}
.badge-circle-style[data-type=progress][data-value="84"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 16%, rgba(37, 104, 183, 0.8) 16%);
}
.badge-circle-style[data-type=progress][data-value="85"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 15%, rgba(37, 104, 183, 0.8) 15%);
}
.badge-circle-style[data-type=progress][data-value="86"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 14%, rgba(37, 104, 183, 0.8) 14%);
}
.badge-circle-style[data-type=progress][data-value="87"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 13%, rgba(37, 104, 183, 0.8) 13%);
}
.badge-circle-style[data-type=progress][data-value="88"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 12%, rgba(37, 104, 183, 0.8) 12%);
}
.badge-circle-style[data-type=progress][data-value="89"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 11%, rgba(37, 104, 183, 0.8) 11%);
}
.badge-circle-style[data-type=progress][data-value="90"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 10%, rgba(37, 104, 183, 0.8) 10%);
}
.badge-circle-style[data-type=progress][data-value="91"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 9%, rgba(37, 104, 183, 0.8) 9%);
}
.badge-circle-style[data-type=progress][data-value="92"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 8%, rgba(37, 104, 183, 0.8) 8%);
}
.badge-circle-style[data-type=progress][data-value="93"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 7%, rgba(37, 104, 183, 0.8) 7%);
}
.badge-circle-style[data-type=progress][data-value="94"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 6%, rgba(37, 104, 183, 0.8) 6%);
}
.badge-circle-style[data-type=progress][data-value="95"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 5%, rgba(37, 104, 183, 0.8) 5%);
}
.badge-circle-style[data-type=progress][data-value="96"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 4%, rgba(37, 104, 183, 0.8) 4%);
}
.badge-circle-style[data-type=progress][data-value="97"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 3%, rgba(37, 104, 183, 0.8) 3%);
}
.badge-circle-style[data-type=progress][data-value="98"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 2%, rgba(37, 104, 183, 0.8) 2%);
}
.badge-circle-style[data-type=progress][data-value="99"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 1%, rgba(37, 104, 183, 0.8) 1%);
}
.badge-circle-style[data-type=progress][data-value="100"]::before {
  background: linear-gradient(90deg, rgba(92, 92, 98, 0.8) 0%, rgba(37, 104, 183, 0.8) 0%);
}

.edit-circle-btn {
  position: relative;
  width: 33px;
  height: 33px;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.3);
  background: #FFFFFF;
  border-radius: 50%;
}
.edit-circle-btn .circle-btn-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border: 2px solid #F84281;
  border-radius: 50%;
}
.edit-circle-btn .circle-btn-container span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listen-circle-btn {
  position: relative;
  width: 90px;
  height: 90px;
  border: 4px solid rgba(255, 166, 33, 0.3);
  border-radius: 50%;
}
.listen-circle-btn .circle-btn-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
}
.listen-circle-btn .circle-btn-container .circle-btn-body {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  border: 2px solid #FF975C;
}
.listen-circle-btn .circle-btn-container .circle-btn-body span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #FD7021;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listen-circle-btn .circle-btn-container .circle-btn-body span.icon-listen:before {
  content: none;
}
.listen-circle-btn .circle-btn-container .circle-btn-body span.icon-listen {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="47" height="36" viewBox="0 0 47 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.0175781 14.5145C0.149626 14.168 0.242736 13.8005 0.422186 13.482C0.908053 12.6157 1.65632 12.0312 2.6179 12.0154C4.26342 11.9892 5.91232 12.103 7.55783 12.1607C7.64756 12.1642 7.7576 12.1712 7.82024 12.2237C8.29764 12.628 8.70563 12.3357 9.07977 12.0627C10.8929 10.7309 12.6958 9.38337 14.4954 8.03233C15.6347 7.17655 16.7555 6.29627 17.8965 5.44399C18.1741 5.23574 18.4822 5.04673 18.8039 4.92948C19.4709 4.68447 20.0211 4.96798 20.2361 5.66275C20.3309 5.96901 20.3732 6.30677 20.3732 6.63053C20.38 14.6003 20.38 22.5683 20.3766 30.538C20.3766 31.1768 20.3275 31.8383 19.7062 32.1743C19.0629 32.5226 18.5009 32.1743 17.9896 31.7858C14.9965 29.5213 12.0068 27.2532 9.02221 24.9764C8.55327 24.6193 8.0928 24.4898 7.48165 24.5283C5.95633 24.6228 4.42424 24.6106 2.89554 24.5913C1.5175 24.5738 0.494981 23.7146 0.108996 22.3355C0.0869878 22.2603 0.0480506 22.1938 0.0175781 22.1238C0.0175781 19.5879 0.0175781 17.0504 0.0175781 14.5145Z" fill="white"/><path d="M37.5186 2.95401C38.1805 2.21373 38.8272 1.49271 39.4722 0.773438C48.8272 9.97698 48.961 25.815 39.484 35.2005C38.8441 34.4777 38.2025 33.755 37.5389 33.0059C41.4664 28.9126 43.6334 23.9022 43.6334 17.994C43.6317 12.0858 41.4664 7.07538 37.5186 2.95401Z" fill="white"/><path d="M31.2728 9.25807C31.9229 8.54405 32.5746 7.82828 33.2247 7.11426C39.4174 12.9682 39.2786 23.2043 33.2027 28.8832C32.5543 28.1674 31.9042 27.4481 31.2559 26.7324C36.1501 21.9477 36.1568 13.9867 31.2728 9.25807Z" fill="white"/><path d="M26.8558 13.3398C29.6847 15.6097 29.8895 20.1143 27.0217 22.5311C26.3734 21.8014 25.7233 21.0681 25.0597 20.3226C25.686 19.815 26.1956 19.031 26.1888 17.981C26.1821 16.9502 25.6911 16.1732 24.9141 15.5519C24.9682 15.4819 25.0004 15.4329 25.0393 15.3892C25.6437 14.7066 26.2481 14.0259 26.8558 13.3398Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 21px;
}

.number-circle {
  min-width: 26px;
  height: 26px;
  background: #F0F3FF;
  color: #F84281;
  font-weight: 800;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0px 2px 2px rgba(44, 42, 113, 0.15);
}

.congrats {
  background-color: #F7F4F1;
}
.congrats p {
  font-size: 18px;
}

@media (min-width: 1200px) {
  .congrats {
    background-color: #F7F4F1;
  }
  .congrats p {
    font-size: 28px;
  }
}
.close {
  border: none !important;
  background-color: transparent !important;
  opacity: 1;
}

.return-link {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}
@media (min-width: 1200px) {
  .return-link {
    top: 8px;
  }
}
.return-link + h2, .return-link + div h2 {
  padding: 0 40px;
}

.return-circle {
  background-color: transparent;
  border: 1px solid #DBDEE3;
  width: 44.38px;
  height: 44.38px;
}
@media (max-width: 320px) {
  .return-circle {
    width: 44.38px;
    height: 44.38px;
  }
}

.close-btn {
  position: absolute;
  top: 0;
  right: 1.25rem;
}
@media (min-width: 1200px) {
  .close-btn {
    top: 10px;
    right: 0;
  }
}

/* Custom select */
.custom-select {
  position: relative;
}
.custom-select select {
  display: none;
}
.custom-select .select-selected {
  background: #F7F8F9;
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.5);
  border-radius: 10px;
  text-align: start;
  border: none;
}
.custom-select .select-selected::after {
  font-family: Arial, sans-serif !important;
  content: "▼" !important;
  color: #2C2A71 !important;
  position: absolute !important;
  font-size: 10px !important;
  display: inline-block !important;
  right: 10px !important;
  top: 24px !important;
}
.custom-select .select-selected::before {
  font-family: Arial, sans-serif !important;
  content: "🌐" !important;
  color: #999 !important;
  position: absolute !important;
  font-size: 14px !important;
  display: inline-block !important;
  left: 10px !important;
  top: 18px !important;
}
.custom-select .select-selected.select-arrow-active {
  border: none !important;
}
.custom-select .select-arrow-active:after {
  content: "▲" !important;
  top: 18px !important;
}
.custom-select .select-items {
  position: absolute;
  background: #F8F8F8;
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.5);
  border-radius: 10px;
  text-align: start;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 12px 0;
  margin-top: 12px;
}
.custom-select .select-items .same-as-selected {
  background-color: #2C2A71;
  color: #FFFFFF;
  border-radius: 0;
}
.custom-select .select-items div,
.custom-select .select-selected {
  font-weight: 400;
  font-size: 14px;
  color: #9E9E9E;
  padding: 18px 50px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.custom-select .select-items div {
  font-weight: 500;
  font-size: 18px;
  color: #2C2A71;
}
@media (max-width: 414px) {
  .custom-select .select-items div {
    font-size: 14px;
    padding: 10px 20px 10px 20px;
  }
}
.custom-select .select-hide {
  display: none;
}

.profile-select.custom-select .select-selected {
  background: #F7F8F9;
  box-shadow: 0px 4px 4px rgba(43, 42, 110, 0.5);
  border: none;
}
.profile-select.custom-select .select-selected::after {
  font-family: Arial, sans-serif !important;
  content: "▼" !important;
  color: #2C2A71 !important;
  position: absolute !important;
  font-size: 10px !important;
  display: inline-block !important;
  right: 10px !important;
  top: 24px !important;
}
.profile-select.custom-select .select-selected::before {
  font-family: Arial, sans-serif !important;
  content: "🌐" !important;
  color: #999 !important;
  position: absolute !important;
  font-size: 14px !important;
  display: inline-block !important;
  left: 10px !important;
  top: 18px !important;
}
.profile-select.custom-select .select-selected.select-arrow-active {
  border: none !important;
}
.profile-select.custom-select .select-selected.select-arrow-active::after {
  content: "▲" !important;
  top: 18px !important;
}

.list-group {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2FF 100%);
  box-shadow: 0px 4px 4px rgba(49, 45, 100, 0.2);
  border-radius: 5px;
}
.list-group .list-group-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #A9A8C6;
}

.flag-style {
  width: 24px;
  height: 24px;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.progress {
  border-radius: 0.125rem;
  height: 0.563rem;
  background-color: #C4C4C4;
}

.modal .wow-backdrop {
  position: relative;
}
.modal .wow-backdrop::before {
  content: "";
  position: absolute;
  height: calc(100% + 104px + 64px);
  width: 100vw;
  z-index: -1;
  top: -104px;
  right: 0;
  left: calc((100% - 100vw) / 2);
  background-repeat: no-repeat;
  background-position: center;
  background-color: #F7F4F1;
}
.modal .wow-backdrop::after {
  content: "";
  position: absolute;
  background-color: transparent;
  height: calc(100% + 104px + 64px);
  width: 100vw;
  background-repeat: no-repeat;
  background-position: 50% 30%;
  z-index: 1;
  top: -104px;
  right: 0;
  left: calc((100% - 100vw) / 2);
  pointer-events: none;
}
.modal .top-icon-block {
  position: absolute;
  top: -50px;
  right: 0;
  left: 0;
}
.modal .top-icon-block > * {
  max-width: 90px;
}
@media (orientation: landscape) and (max-height: 412px) {
  .modal .pt-140px {
    padding-top: 64px;
  }
}

.footer .list-items .list-item {
  padding: 0 16px;
}
.footer .list-items .list-item .list-link {
  font-size: 14px;
}
.footer .copyright {
  font-size: 12px;
}

.continue-training {
  bottom: 84px;
}
@media (min-width: 321px) {
  .continue-training {
    bottom: 110px;
  }
  .continue-training .btn {
    padding: 13px 32px;
  }
}

.card-img {
  object-fit: cover;
  object-position: top;
  height: 40vh;
}

.card-terms {
  padding: 79px 68px;
}
@media (max-width: 992px) {
  .card-terms {
    padding: 20px 26px;
  }
}

@media (min-width: 992px) {
  .card-img {
    object-fit: cover;
    object-position: top;
    height: 65vh;
  }
}
@media (min-width: 1200px) {
  .card .read-more-list li {
    font-size: 1.5rem;
  }
  .card .read-more-list li::before {
    font-size: 6px;
    top: 12px;
    left: -22px;
  }
  .footer .list-items .list-item {
    padding: 0 30px;
  }
  .footer .list-items .list-item .list-link {
    font-size: 25px;
  }
  .footer .copyright {
    font-size: 22px;
  }
}
/* Hide all footers completely */
footer,
.footer,
footer.d-lg-block,
footer.d-none,
.footer-navbar:not(.navbar),
[class*=footer]:not(.navbar):not(.navbar-light) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Force hide footer navbar - stronger rule */
.navbar.footer-navbar,
nav.footer-navbar,
.footer-navbar {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
}

/* Homepage layout with student in corner - no position absolute */
.homepage-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.homepage-content {
  flex: 1;
}

.student-corner {
  align-self: flex-end;
}
.student-corner .student-image {
  object-fit: cover;
  opacity: 1;
  transform: rotate(0.29deg);
  transition: transform 0.3s ease;
}
.student-corner .student-image:hover {
  transform: rotate(0.29deg) scale(1.02);
}
@media (max-width: 320px) {
  .student-corner .student-image {
    width: 45vw;
  }
}
@media (min-width: 321px) and (max-width: 360px) {
  .student-corner .student-image {
    width: 45vw;
  }
}
@media (min-width: 361px) and (max-width: 389px) {
  .student-corner .student-image {
    width: 45vw;
  }
}
@media (min-width: 390px) and (max-width: 413px) {
  .student-corner .student-image {
    width: 60vw;
  }
}
@media (min-width: 414px) and (max-width: 767px) {
  .student-corner .student-image {
    width: 60vw;
  }
}
@media (min-width: 768px) {
  .student-corner .student-image {
    width: 35vw;
  }
}
@media (min-width: 1200px) {
  .student-corner .student-image {
    width: 35vw;
  }
}

/* FAQ Page Styles */
.faq-page .faq-header h1 {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 22.23px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #242452;
}
.faq-page .faq-subtitle h2 {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #242452;
}
.faq-page .faq-list .faq-item {
  background: white;
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.faq-page .faq-list .faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.faq-page .faq-list .faq-item .faq-question {
  cursor: pointer;
}
.faq-page .faq-list .faq-item .faq-question span {
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #242452;
}
.faq-page .faq-list .faq-item .faq-question .faq-arrow {
  color: #FF975C;
  font-size: 20px;
  transition: transform 0.3s;
}
.faq-page .faq-list .faq-item .faq-answer {
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #242452;
}

/* Contact Us Page Styles */
.contact-page .contact-header h1 {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 22.23px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #242452;
}
.contact-page .contact-subtitle h2 {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #242452;
}
.contact-page .contact-form input, .contact-page .contact-form select, .contact-page .contact-form textarea {
  background: white;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  color: #666;
  box-shadow: none !important;
}
.contact-page .contact-form input:focus, .contact-page .contact-form select:focus, .contact-page .contact-form textarea:focus {
  outline: none !important;
  border-color: #E5E5E5 !important;
  box-shadow: none !important;
}
.contact-page .contact-form input:active, .contact-page .contact-form select:active, .contact-page .contact-form textarea:active {
  outline: none !important;
  border-color: #E5E5E5 !important;
  box-shadow: none !important;
}
.contact-page .contact-form .contact-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%236B46C1' d='M8 12L2 6h12z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.contact-page .contact-form .contact-select:focus + .select-placeholder {
  opacity: 0;
}
.contact-page .contact-form .contact-select:valid + .select-placeholder {
  opacity: 0;
}
.contact-page .contact-form .contact-textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-page .contact-form .contact-submit-btn {
  background: #6B46C1;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
}
.contact-page .contact-form .contact-submit-btn:hover {
  background: #553C9A !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}
.contact-page .contact-form .chose-attachment-file-btn {
  background: #6B46C1;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
}
.contact-page .contact-form .chose-attachment-file-btn:hover {
  background: #553C9A !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}
.contact-page .contact-form .attachment-area {
  background: white;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 16px;
}
.contact-page .contact-form .attachment-label {
  color: #2C2A71;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 12px;
  display: block;
}
.contact-page .contact-form .attachment-file-name {
  font-size: 14px;
}
.contact-page .contact-form .select-placeholder {
  position: absolute;
  left: 16px;
  top: 16px;
  color: #666;
  font-size: 14px;
  pointer-events: none;
}
.contact-page .user-info-input .form-label {
  color: #2C2A71;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}
.contact-page .user-info-input input {
  text-align: center;
  color: #666;
}
.contact-page .user-info-input input.wifi-not-detected {
  color: #6B46C1;
  font-style: italic;
}
.contact-page .user-info-input input[readonly] {
  background-color: white;
  cursor: default;
}

/* Terms and Conditions Page Styles */
.tnc-page .tnc-header h1 {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 22.23px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #242452;
}
.tnc-page .tnc-content {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.tnc-page .tnc-content .title {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #242452;
}
.tnc-page .tnc-content .description {
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #242452;
}
.tnc-page .tnc-content .description a {
  color: #FF1B5C;
}
.tnc-page .tnc-content .description a:hover {
  color: #FF1B5C;
}
.tnc-page .tnc-content .description a:visited {
  color: #FF1B5C;
}

/*!* Hide badge-related elements but keep lesson completion modals *!*/
/*.badge-control,*/
/*.icon-badges,*/
/*a[href*=badges]:not(.modal a),*/
/*[class*=badge-]:not(.modal [class*=badge-]),*/
/*.nav-link[href*=badges] {*/
/*  display: none !important;*/
/*  visibility: hidden !important;*/
/*  opacity: 0 !important;*/
/*  height: 0 !important;*/
/*  width: 0 !important;*/
/*  overflow: hidden !important;*/
/*  position: absolute !important;*/
/*  left: -9999px !important;*/
/*}*/

/*!* Hide badge content in lesson completion modals but keep the modal structure *!*/
/*#newBadge .top-icon-block,*/
/*#newBadge #badgeName,*/
/*#newBadge .text-primary:not(.btn) {*/
/*  display: none !important;*/
/*}*/

.learn-from {
  font-size: 14px;
  font-weight: 200;
  color: #fff;
  margin-left: 10px;
  margin-right: 10px;
}

.nav-links  a {
  color: #fff;
  font-size: 20px;
  font-weight: 200;
  margin-right: 30px;
}

.top-nav-visible {
  display: flex;
}

.top-nav-visible .menu-item {
  color: #000;
  padding-left: 15px;
}

.top-nav-visible .dropdown-toggle::after {
  margin-left: -25px;
  margin-right: 20px;
}

@media (max-width: 999px) {
  .top-nav-visible {
    display: none;
  }
}
@media (min-width: 1000px) {
  .inversive-top-nav-visible {
    display: none;
  }
}

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


.main-underbanner {
  display: flex;
  flex-direction: column;
  position: relative;
  top: -85px;
}

.main-underbanner h4 {
  color: #fff;
  font-size: 36px;
  font-weight: 200;
}
.main-underbanner h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.main-underbanner:after {
  content: " ";
  height: 10px;
  width: 150px;
  background: #EE8143;
  background-color: #EE8143;
  margin-left: 15px;
}

@media (min-width: 1000px) {
  .main-banner-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
  }

  .main-underbanner {
    top: -150px;
  }

  .main-underbanner h4 {
    font-size: 51px;
  }

  .main-underbanner h3 {
    font-size: 29px;
  }
}


.courses-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  overflow: hidden;
}

.courses-header p {
  line-height: 1.1;
  font-size: 36px;
  color: #fff;
  font-weight: 200;
}

.courses-header p:first-child {
  font-size: 14px;
  font-weight: 500;
}

.courses-header img {
  position: relative;
  height: 70px;
  width: 90px;
  right: 25px;
}

@media (min-width: 999px) {
  .courses-header img{
    right: 100px !important;
  }
}

@media (min-width: 999px) {
  .home-bottom{
    display: none !important;
  }
}

.lang-preview-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.lang-preview-container img {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.lang-preview-p p{
    font-size: 15px;
    line-height: 1.1;
    color: #fff;
    font-weight: 200;
}

.lang-preview-p p:last-child {
    font-size: 26px;
    font-weight: 700;
}

.card-body h4 {
  color: #000 !important;
}

.course-card {
  max-width: 220px !important;
}

.white-container * {
  color: #fff !important;
}

.langnest-brand img{
  width: 75px;
  margin-left: 15px;
}

.home-bottom p , .home-bottom a {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

.f-links {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}

.f-links a {
  width: fit-content;
}