/* Foregrounds */
/* Primary Color */
/* Secondary Color */
/* Background Secondary */
/* Error */
/* Success */
/* Warning */
/* Accent */
/* Preview color palette */
/* System color */
/* Cuemill Gradient */
/* Color Library */
/* Car profile Library */
/* Devices Color Library */
.dark-100 {
  background-color: #252525;
}

.newly-setup-dark-100 {
  border: 1px solid #252525;
}

.midnight-300 {
  background-color: #1C192F;
}

.newly-setup-midnight-300 {
  border: 1px solid #1C192F;
}

.midnight-200 {
  background-color: #47445B;
}

.newly-setup-midnight-200 {
  border: 1px solid #47445B;
}

.dark-300 {
  background-color: #838383;
}

.newly-setup-dark-300 {
  border: 1px solid #838383;
}

.dark-400 {
  background-color: #B4B4B4;
}

.newly-setup-dark-400 {
  border: 1px solid #B4B4B4;
}

.dark-500 {
  background-color: #F0F0F0;
}

.newly-setup-dark-500 {
  border: 1px solid #F0F0F0;
}

.sky-300 {
  background-color: #2191FB;
}

.newly-setup-sky-300 {
  border: 1px solid #2191FB;
}

.sky-200 {
  background-color: #61B2FE;
}

.newly-setup-sky-200 {
  border: 1px solid #61B2FE;
}

.sky-100 {
  background-color: #A7D1F9;
}

.newly-setup-sky-100 {
  border: 1px solid #A7D1F9;
}

.focus-300 {
  background-color: #05C0DC;
}

.newly-setup-focus-300 {
  border: 1px solid #05C0DC;
}

.focus-200 {
  background-color: #2DE1FC;
}

.newly-setup-focus-200 {
  border: 1px solid #2DE1FC;
}

.focus-100 {
  background-color: #9FF1FD;
}

.newly-setup-focus-100 {
  border: 1px solid #9FF1FD;
}

.purple-300 {
  background-color: #362D99;
}

.newly-setup-purple-300 {
  border: 1px solid #362D99;
}

.purple-200 {
  background-color: #6558F0;
}

.newly-setup-purple-200 {
  border: 1px solid #6558F0;
}

.purple-100 {
  background-color: #B3ACF8;
}

.newly-setup-purple-100 {
  border: 1px solid #B3ACF8;
}

.hot-300 {
  background-color: #F3207B;
}

.newly-setup-hot-300 {
  border: 1px solid #F3207B;
}

.hot-200 {
  background-color: #FF579F;
}

.newly-setup-hot-200 {
  border: 1px solid #FF579F;
}

.hot-100 {
  background-color: #FFAED1;
}

.newly-setup-hot-100 {
  border: 1px solid #FFAED1;
}

.orange-300 {
  background-color: #C95D20;
}

.newly-setup-orange-300 {
  border: 1px solid #C95D20;
}

.orange-200 {
  background-color: #EC7836;
}

.newly-setup-orange-200 {
  border: 1px solid #EC7836;
}

.orange-100 {
  background-color: #E8AE8E;
}

.newly-setup-orange-100 {
  border: 1px solid #E8AE8E;
}

.coral-300 {
  background-color: #EE6565;
}

.newly-setup-coral-300 {
  border: 1px solid #EE6565;
}

.coral-200 {
  background-color: #FF9797;
}

.newly-setup-coral-200 {
  border: 1px solid #FF9797;
}

.coral-100 {
  background-color: #FDCFCF;
}

.newly-setup-coral-100 {
  border: 1px solid #FDCFCF;
}

.skin-900 {
  background-color: #341508;
}

.newly-setup-skin-900 {
  border: 1px solid #341508;
}

.skin-700 {
  background-color: #813414;
}

.newly-setup-skin-700 {
  border: 1px solid #813414;
}

.skin-300 {
  background-color: #FBC5AE;
}

.newly-setup-skin-300 {
  border: 1px solid #FBC5AE;
}

.sunny-300 {
  background-color: #FFD000;
}

.newly-setup-sunny-300 {
  border: 1px solid #FFD000;
}

.sunny-200 {
  background-color: #FFEA24;
}

.newly-setup-sunny-200 {
  border: 1px solid #FFEA24;
}

.sunny-100 {
  background-color: #FEF8C2;
}

.newly-setup-sunny-100 {
  border: 1px solid #FEF8C2;
}

.olive-300 {
  background-color: #59872A;
}

.newly-setup-olive-300 {
  border: 1px solid #59872A;
}

.olive-200 {
  background-color: #98B672;
}

.newly-setup-olive-200 {
  border: 1px solid #98B672;
}

.olive-100 {
  background-color: #CCDAB6;
}

.newly-setup-olive-100 {
  border: 1px solid #CCDAB6;
}

.pista-300 {
  background-color: #7FC791;
}

.newly-setup-pista-300 {
  border: 1px solid #7FC791;
}

.pista-200 {
  background-color: #C1EDCC;
}

.newly-setup-pista-200 {
  border: 1px solid #C1EDCC;
}

.pista-100 {
  background-color: #EAFBEE;
}

.newly-setup-pista-100 {
  border: 1px solid #EAFBEE;
}

.pistachio {
  background-color: #C1EDCC;
}

.newly-setup-pistachio {
  border: 1px solid #C1EDCC;
}

.citrus-yellow {
  background-color: #FFF275;
}

.newly-setup-citrus-yellow {
  border: 1px solid #FFF275;
}

.focus-blue {
  background-color: #2DE1FC;
}

.newly-setup-focus-blue {
  border: 1px solid #2DE1FC;
}

.brand-blue-1 {
  background-color: #6558F0;
}

.newly-setup-brand-blue-1 {
  border: 1px solid #6558F0;
}

.brand-blue-2 {
  background-color: #493FB3;
}

.newly-setup-brand-blue-2 {
  border: 1px solid #493FB3;
}

.lilac {
  background-color: #E7BBE3;
}

.newly-setup-lilac {
  border: 1px solid #E7BBE3;
}

.success-green {
  background-color: #0E8136;
}

.newly-setup-success-green {
  border: 1px solid #0E8136;
}

.violet {
  background-color: #B837B1;
}

.newly-setup-violet {
  border: 1px solid #B837B1;
}

.hot-pink {
  background-color: #FF579F;
}

.newly-setup-hot-pink {
  border: 1px solid #FF579F;
}

.dark-brown {
  background-color: #562B21;
}

.newly-setup-dark-brown {
  border: 1px solid #562B21;
}

.brand-orange {
  background-color: #EC7836;
}

.newly-setup-brand-orange {
  border: 1px solid #EC7836;
}

.tangerine {
  background-color: #F19C79;
}

.newly-setup-tangerine {
  border: 1px solid #F19C79;
}

.gold {
  background-color: #FFD000;
}

.newly-setup-gold {
  border: 1px solid #FFD000;
}

.pearl-white {
  background: #F5F5F5;
}

.solid-black {
  background: #1C1B1B;
}

.estoril-blue {
  background: #3A6EA5;
}

.melbourne-red {
  background: #B40B28;
}

.blu-tour-de-france {
  background: #3A527A;
}

.verde-ithaca {
  background: #A8C539;
}

.arancio-borealis {
  background: #FF5A00;
}

.chalk {
  background: #D7D1C7;
}

.gradient-one {
  background: linear-gradient(to top, #e89bb2, #274171) !important;
}

.gradient-two {
  background: linear-gradient(to bottom right, #ff5f6d, #ffc371) !important;
}

.gradient-three {
  background: linear-gradient(to bottom right, #343A40, #A8C539) !important;
}

.gradient-four {
  background: linear-gradient(to top, #5B5D9E, #274171) !important;
}

.hyb-onboarding-section {
  height: 100% !important;
  padding-bottom: 20px !important;
}

.onboarding-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 10px 0px 10px;
  width: 100%;
  height: 100vh;
  position: relative;
  /* Hide scrollbar for other browsers like Firefox */
}
.onboarding-section .onboarding-scrollable-card {
  display: flex;
  flex-grow: 1;
  overflow-x: scroll;
  scroll-snap-type: x mandatory; /* Enable scroll snapping */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Allow smooth scrolling on touch devices */
  padding-bottom: 20px;
  width: 100%;
}
.onboarding-section .onboarding-scrollable-card .slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 100%;
  scroll-snap-align: start;
}
.onboarding-section .onboarding-scrollable-card img {
  width: auto;
  height: auto;
  max-width: 368px;
  max-height: 368px;
}
.onboarding-section .onboarding-scrollable-card h1, .onboarding-section .onboarding-scrollable-card span {
  text-align: center;
  max-width: 1000px;
}
.onboarding-section .onboarding-scrollable-card::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}
.onboarding-section .onboarding-scrollable-card {
  scrollbar-width: none; /* For Firefox */
}
.onboarding-section .bottom-navigation-tab {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onboarding-section .navigation-button-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding-bottom: 16px;
}

.page-control-component {
  display: flex;
  margin: 0 auto;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border-radius: 50px;
  background: rgba(191, 191, 191, 0.44);
  backdrop-filter: blur(20px);
}
.page-control-component .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.3;
  background: #000;
}
.page-control-component .active-dot {
  opacity: 1;
}

.onboarding-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.account-settings-preferences-container {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
}
.account-settings-preferences-container #selected-preference-header {
  margin-top: 20px;
}
.account-settings-preferences-container .selected-preferences .selected-preference-card {
  margin-bottom: 0px;
}
.account-settings-preferences-container .search-input-container {
  padding-right: 15%;
  display: flex;
  gap: 8px;
  align-items: center;
  background-color: white;
  border-radius: 40px;
  border: 1px solid #F0F0F0;
  padding: 8px 16px;
  margin-right: 15%;
}
.account-settings-preferences-container .search-input-container .searchbar {
  padding: initial;
  border-radius: initial;
  border: transparent;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

/* Onboarding Flow */
.onboarding-main-container {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.web-onboarding-main-container {
  height: 100svh !important;
}

.web-featured-posts-main-body {
  height: calc(100svh - 154px);
}

.hyb-featured-posts-main-body {
  height: calc(100% - 148px);
}

.web-full-height {
  height: 100svh !important;
}

.hyb-full-height {
  height: 100% !important;
}

.web-featured-posts-main-body, .hyb-featured-posts-main-body {
  padding-bottom: 20px;
  overflow-y: auto;
}
.web-featured-posts-main-body .post-container .post-container-body .header .red-text, .hyb-featured-posts-main-body .post-container .post-container-body .header .red-text {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}
.web-featured-posts-main-body .post-container .post-container-body .post-stats, .hyb-featured-posts-main-body .post-container .post-container-body .post-stats {
  padding-top: 16px;
  padding-bottom: 16px;
}

.sign-up-container {
  position: sticky;
  bottom: 0px;
  width: 100%;
  height: 80px;
  left: 0;
  z-index: 150;
  padding: 16px 10%;
  background: #FFFFFF;
  box-shadow: 0px -7px 8px rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 0px 0px;
}
.sign-up-container a:active, .sign-up-container a:focus {
  text-decoration: none;
  outline: none;
  color: white;
}

.extra-bottom-padding {
  padding-bottom: 36px !important;
}

.scrollable-content {
  height: calc(100svh - 200px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 20px;
  z-index: 50;
}

#demo-community-section .scrollable-content {
  overflow-x: hidden;
}

#demo-devices-container .section-divider {
  margin-top: 20px !important;
  margin-bottom: 0px !important;
}

.demo-main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100%;
}
.demo-main-container .section-divider {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.demo-main-container .navbar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  margin-left: 5%;
  margin-right: 5%;
  border-bottom: 1px solid #F2F2F2;
}
.demo-main-container .description {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.demo-main-container #loopy-eating {
  margin: auto;
  width: 100%;
  max-width: 500px;
  max-height: 500px;
}
.demo-main-container .demo-main-section {
  flex: 1;
  margin-top: 20px;
}
.demo-main-container .header-section {
  padding-top: 20px;
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #F2F2F2;
  position: sticky;
  left: 0;
  top: 0;
  background-color: white;
}
.demo-main-container .header-section .horizontal-nav {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 15px;
  padding-right: 5%;
}
.demo-main-container .header-section .horizontal-nav .nav-element {
  width: fit-content;
  height: 40px;
  border-radius: 40px;
  padding: 9px 20px;
}
.demo-main-container .header-section .horizontal-nav .nav-element .title {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.demo-main-container .header-section .horizontal-nav .active {
  background-color: #5973F8;
  color: white;
}
.demo-main-container .header-section .horizontal-nav .inactive {
  background-color: white;
  color: #252525;
  border: 1px solid #F2F2F2;
}
.demo-main-container .dashboard-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
}
.demo-main-container .dashboard-section h1 {
  padding-left: 5%;
}
.demo-main-container .dashboard-section .dashboard-nav {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 20px;
}
.demo-main-container .dashboard-section .dashboard-card {
  width: fit-content;
  height: fit-content;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
}
.demo-main-container .dashboard-section .dashboard-card .card-header {
  padding: 15px 20px;
  display: flex;
  background-color: white;
  gap: 8px;
  border-radius: 4px 4px 0px 0px;
}
.demo-main-container .dashboard-section .dashboard-card .card-header .title-container {
  display: flex;
  flex-direction: column;
  width: 108px;
  height: 38px;
}
.demo-main-container .dashboard-section .dashboard-card .card-header .title-container h2 {
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
}
.demo-main-container .dashboard-section .dashboard-card .card-header .title-container h3 {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.demo-main-container .dashboard-section .dashboard-card .card-cta {
  padding: 18px 20px;
}
.demo-main-container .dashboard-section .dashboard-card .card-cta .cta-button {
  min-width: 140px;
  width: fit-content;
  height: 40px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 48px;
  border: 1px solid #F2F2F2;
}
.demo-main-container .dashboard-section .dashboard-card .card-cta .cta-button span {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #595959;
}
.demo-main-container .post-section {
  padding-left: 5%;
  padding-right: 5%;
  background: #FFFFFF;
  /* Drop shadows/Primary */
  margin: 0 auto;
}
.demo-main-container .post-section .post-card {
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  max-width: 500px;
  margin: 0 auto;
}
.demo-main-container .post-section .post-card .post-header {
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #F2F2F2;
}
.demo-main-container .post-section .post-card .post-header img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.demo-main-container .post-section .post-card .post-header .post-title-container h2 {
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
}
.demo-main-container .post-section .post-card .post-header .post-title-container h3 {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 4px;
}
.demo-main-container .post-section .post-card .post-header .post-title-container .group-type {
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-main-container .post-section .post-card .post-header .post-title-container .group-type span {
  color: #838383;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.demo-main-container .post-section .post-card .post-body {
  display: inline-block;
  padding: 18px 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}
.demo-main-container .post-section .post-card .post-body section {
  padding-bottom: 10px;
}
.demo-main-container .post-section .post-comment-card {
  display: grid;
  grid-template-columns: auto auto;
  padding: 18px 20px;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  max-width: 500px;
}
.demo-main-container .post-section .post-comment-card .main-profile {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}
.demo-main-container .post-section .post-comment-card .comment-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-main-container .post-section .post-comment-card .comment-body .title-section {
  padding-bottom: 16px;
  border-bottom: 1px solid #F2F2F2;
}
.demo-main-container .post-section .post-comment-card .comment-body .title-section h2 {
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
}
.demo-main-container .post-section .post-comment-card .comment-body .title-section h3 {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}
.demo-main-container .post-section .post-comment-card .comment-body .main-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F2F2F2;
}
.demo-main-container .post-section .post-comment-card .comment-body .first-level-comment {
  display: grid;
  grid-template-columns: 24px auto;
  gap: 12px;
  align-items: center;
}
.demo-main-container .post-section .post-comment-card .comment-body .first-level-comment img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-bottom: auto;
}
.demo-main-container .post-section .post-comment-card .comment-body .first-level-comment .comment-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-main-container .post-section .post-comment-card .comment-body .first-level-comment .comment-section .comment-body {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.demo-main-container .post-section .post-comment-card .comment-body .first-level-comment .comment-section .comment-body h2 {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
.demo-main-container .post-section .post-comment-card .comment-body .first-level-comment .comment-section .comment-body section {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  border-bottom: 1px solid #F2F2F2;
}
.demo-main-container .post-section .post-comment-card .comment-body .second-level-comment {
  display: grid;
  grid-template-columns: 20px auto;
  gap: 12px;
  align-items: center;
}
.demo-main-container .post-section .post-comment-card .comment-body .second-level-comment img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-bottom: auto;
}
.demo-main-container .post-section .post-comment-card .comment-body .second-level-comment .comment-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo-main-container .post-section .post-comment-card .comment-body .second-level-comment .comment-section h2 {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
.demo-main-container .post-section .post-comment-card .comment-body .second-level-comment .comment-section section {
  padding-bottom: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.demo-main-container .post-section .post-comment-card .comment-body #no-border-bottom {
  border-bottom: 0px;
}
.demo-main-container .post-section .post-comment-card .comment-body #border-bottom {
  border-bottom: 1px solid #F2F2F2;
}
.demo-main-container .chats-section {
  padding-top: 20px;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  gap: 30px;
}
.demo-main-container .chats-section img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1215686275);
}
.demo-main-container .chats-section .demo-chat-description h1 {
  font-weight: 700;
  font-size: 21px;
  line-height: 32px;
}
.demo-main-container .chats-section .demo-chat-description span {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #838383;
}
.demo-main-container .chats-call-bubble {
  margin-top: 20px;
  padding: 8px 20px;
  display: flex;
  gap: 10px;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: #F2F2F2;
}
.demo-main-container .chats-call-bubble span {
  font-size: 12px;
  font-weight: 400px;
  line-height: 20px;
  color: #838383;
  text-align: center;
}
.demo-main-container .community-section {
  margin: 0 auto;
}
.demo-main-container .community-section img {
  width: 100%;
  max-width: 500px;
}
.demo-main-container .demo-recommendation {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.demo-main-container .demo-recommendation span {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}
.demo-main-container .demo-recommendation .recommendation-element {
  display: flex;
  gap: 16px;
  background-color: #FBFBFA;
  padding: 12px;
  border-radius: 4px;
}
.demo-main-container .demo-recommendation .recommendation-element img {
  width: 100px;
  height: 100px;
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body h1 {
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body h3 {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  margin: 0;
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body span {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body .sub-type {
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body .location {
  display: flex;
  align-items: center;
  gap: 6;
  padding-top: 3px;
  transform: translateX(-5px);
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body .location span {
  color: #5973F8;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  flex: 1;
  white-space: nowrap;
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body .rating {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  transform: translateX(-5px);
}
.demo-main-container .demo-recommendation .recommendation-element .recommendation-body .rating span {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}

#map-section .next-button {
  padding-top: 0px;
}

.next-button {
  display: flex;
  margin: 0 auto;
  padding-top: 20px;
}

.onboarding-header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.onboarding-header-section a {
  color: #595959;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}
.onboarding-header-section a:focus {
  outline: none;
  text-decoration: none;
}
.onboarding-header-section a:active, .onboarding-header-section a:focus, .onboarding-header-section a:hover {
  text-decoration: none;
  outline: none;
}

.onboarding-main-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
}
.onboarding-main-section .onboarding-body {
  max-width: 450px;
  height: auto;
  margin-bottom: auto;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.onboarding-main-section .onboarding-body img {
  width: 100%;
  height: auto;
  max-width: 250px;
}
.onboarding-main-section .onboarding-body h1 {
  padding-left: 10px;
  font-weight: 700;
  font-size: 28px;
  line-height: 40px;
}
.onboarding-main-section .onboarding-body span {
  padding-left: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.onboarding-main-section .onboarding-button {
  margin: 0 auto;
  max-width: 450px;
  margin-top: 40px;
  position: absolute;
  bottom: 0;
}

/* Preference Specific */
.preference-container {
  padding-left: 5%;
  overflow-x: hidden;
}

.header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 25px;
  padding-right: 15%;
}

.header-paragraph {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}

#selected-preference-header {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.web-preference-setup {
  height: 100svh !important;
}

.preference-setup-main-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.preference-setup-main-body .header-container {
  padding-left: 5%;
  padding-right: 5%;
}
.preference-setup-main-body .header-container .header-text {
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}
.preference-setup-main-body #selected-preference-header {
  padding-left: 5%;
  padding-right: 5%;
}
.preference-setup-main-body .preference-container {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.preference-setup-main-body .preference-container .account-settings-preferences-container .search-input-container {
  margin-left: 5%;
  margin-right: 5%;
}
.preference-setup-main-body .preference-container .account-settings-preferences-container #selected-preference-header {
  padding-left: 5%;
  padding-right: 5%;
}
.preference-setup-main-body .preference-content {
  overflow-y: auto;
  height: 100%;
}
.preference-setup-main-body .preference-content .onboarding-header {
  position: relative;
}
.preference-setup-main-body .preference-content-full {
  height: 100%;
  overflow-y: auto;
}
.preference-setup-main-body .preference-content-full .onboarding-header {
  position: relative;
}
.preference-setup-main-body .continue-preference-button {
  position: sticky;
  position: -webkit-sticky;
  background: #FFF;
  width: 100%;
  bottom: 0;
  padding: 16px 21px 20px 20px;
  border-radius: 8px 8px 0px 0px;
  box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.12);
  display: flex;
  justify-content: center;
}
.preference-setup-main-body .continue-preference-button #save-preference {
  margin-bottom: 0;
  margin-right: 0;
}

.selected-preferences {
  display: flex;
  column-gap: 20px;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.selected-preferences .selected-preference-card {
  border: 1px solid #F2F2F2;
  border-radius: 40px;
  height: 40px;
  display: inline-flex;
  padding: 9px 20px;
  margin-bottom: 20px;
  gap: 10px;
}
.selected-preferences .selected-preference-card .button-close {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: none;
  position: relative;
}
.selected-preferences .selected-preference-card .button-close img {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
}

.selected-preferences > .selected-preference-card:first-of-type {
  margin-left: 5%;
}

.selected-preferences > .selected-preference-card:last-of-type {
  margin-right: 5%;
}

.selected-preferences::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#skip-onboarding-button {
  color: #595959;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.preference-body {
  padding-top: 20px;
}
.preference-body h1 {
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 20px;
  padding-left: 5%;
}
.preference-body .preference-row {
  display: none;
}
.preference-body .preference-row-1 {
  display: flex;
  column-gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.preference-body .first-visible {
  margin-left: 5%;
}
.preference-body .last-visible {
  margin-right: 5%;
}
.preference-body .preference-row-1 > :first-child {
  margin-left: 5%;
}
.preference-body .preference-row-1 > :last-child {
  margin-right: 5%;
}
.preference-body .preference-row-2 {
  display: flex;
  column-gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 8px;
  border-bottom: 1px solid #F2F2F2;
  -webkit-overflow-scrolling: touch;
}
.preference-body .preference-row-2 > :first-child {
  margin-left: 5%;
}
.preference-body .preference-row-2 > :last-child {
  margin-right: 5%;
}
.preference-body .preference-row-1::-webkit-scrollbar, .preference-body .preference-row-2::-webkit-scrollbar {
  width: 0; /* Set width of the scrollbar */
  height: 0;
}
.preference-body .preference-card {
  border: 1px solid #F2F2F2;
  border-radius: 40px;
  height: 40px;
  display: inline;
  padding: 9px 20px;
  cursor: pointer;
  margin-bottom: 12px;
}

#save-preference {
  margin-right: 15%;
  margin-bottom: 20px;
}

#first-preference-body {
  border-top: 1px solid #F2F2F2;
}

.qr-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.cuemill.com/images/assets/chat-bubbles-1.png") !important;
  opacity: 0.5;
  z-index: -1;
}

.qr-section {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
  padding-right: 5%;
  width: 100%;
  height: 100%;
  padding-top: 4em;
  padding-bottom: 2em;
  gap: 20px;
  z-index: 1;
  min-height: 100svh;
}
.qr-section .status-bar-container {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  /* Default padding for web */
  padding-top: 26px;
  padding-bottom: 15px;
  /* Safe area adjustments only in Capacitor apps */
  box-shadow: 0 4px 10px rgba(33, 63, 52, 0.1);
  z-index: 100;
}
[data-capacitor=true] .qr-section .status-bar-container {
  padding-top: max(0px, 26px - env(safe-area-inset-top, 0px));
}
.qr-section .status-bar-container .left-cta-container {
  cursor: pointer;
}
.qr-section .checkbox-container {
  display: flex;
  gap: 8px;
}
.qr-section .checkbox-container .header {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  font-feature-settings: "liga" off;
  color: #a1a1a1;
}
.qr-section legend {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  font-feature-settings: "liga" off;
  color: #a1a1a1;
}
.qr-section .disabled-mask {
  background-color: #f0f0f0; /* light grey background */
  border: 1px solid #ccc; /* grey border */
  opacity: 0.6; /* Make it look faded */
  pointer-events: none; /* Prevent any interaction */
}
.qr-section .main-header {
  width: 100%;
  text-align: left;
}
.qr-section .form-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0px;
}
.qr-section .form-body .header {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  font-feature-settings: "liga" off;
  color: #a1a1a1;
}
.qr-section .form-body .error-input {
  border: 1px solid #CE2D4F !important;
}
.qr-section .form-body .error-input:focus {
  border: 1px solid #CE2D4F !important;
}
.qr-section .form-body .error-message {
  color: #CE2D4F;
  font-size: 13px;
}
.qr-section .show-progress-container {
  display: flex;
  width: 100%;
}
.qr-section .show-progress-container .progress-card {
  position: relative;
  align-items: center;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 10px hsla(74, 5%, 54%, 0.11);
  border-radius: 50px;
  background-color: white;
}
.qr-section .show-progress-container .progress-card span {
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
}
.qr-section .show-progress-container hr {
  width: 50px;
  margin: auto 0;
  border-top: 3px solid #252525;
}
.qr-section .show-progress-container .active-progress-card {
  border: 1px solid #EC7836 !important;
}
.qr-section .show-progress-container .active-progress-card span {
  color: #EC7836;
}
.qr-section .progress-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.qr-section #step-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.qr-section .design-section {
  position: relative;
  padding: 20px 0px;
  border: 1px solid #ebeced;
  border-radius: 10px;
  width: 100%;
  background-color: white;
}
.qr-section .design-section .variant-header {
  display: flex;
  gap: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px solid #F2F2F2;
}
.qr-section .design-section .variant-header .variant {
  font-size: 18px;
  font-weight: 400;
  color: #595959;
  padding: 0px 10px 10px;
}
.qr-section .design-section .variant-header .active-variant {
  color: #252525 !important;
  border-bottom: 3px solid #FEE440;
}
.qr-section .design-section .available-options {
  padding-top: 10px;
}
.qr-section .design-section .available-options .options-container-full, .qr-section .design-section .available-options .options-container-half {
  display: inline-grid;
  gap: 10px;
  justify-items: center;
  align-items: center;
  padding: 10px 20px 10px 0px;
  width: 100%;
}
.qr-section .design-section .available-options .options-container-full .option-card-full, .qr-section .design-section .available-options .options-container-half .option-card-full {
  width: 94px;
  height: 94px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qr-section .design-section .available-options .options-container-full .option-card-full img, .qr-section .design-section .available-options .options-container-half .option-card-full img {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  object-fit: contain;
}
.qr-section .design-section .available-options .options-container-full .option-card-half, .qr-section .design-section .available-options .options-container-half .option-card-half {
  height: 64px;
  width: 64px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.qr-section .design-section .available-options .options-container-full .active-option, .qr-section .design-section .available-options .options-container-half .active-option {
  border: 2px solid #5973F8;
}
.qr-section .design-section .available-options .options-container-full {
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
}
.qr-section .design-section .available-options .options-container-half {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.qr-section .design-section .available-options .options-container-with-sections {
  padding: 10px 20px;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.qr-section .design-section .available-options .options-container-with-sections .options-container {
  padding-left: 0px;
  padding-top: 0px;
}
.qr-section .preview-section {
  position: relative;
  padding: 20px;
  border: 1px solid #ebeced;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: white;
}
.qr-section .preview-section .center-align {
  text-align: center;
}
.qr-section .preview-section .extension-options {
  display: flex;
  justify-content: space-around;
  margin-top: -3px;
}
.qr-section .preview-section .extension-options .extension-card {
  border-radius: 5px;
  border: 1px solid #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #a1a1a1;
  cursor: pointer;
  position: relative;
  padding: 8px 10px;
}
.qr-section .preview-section .extension-options .active-extension-card {
  border: 2px solid #5973F8;
  color: #5973F8;
}
.qr-section .helper-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  font-feature-settings: "liga" off;
  color: #a1a1a1;
}
.qr-section .dimension-options {
  display: flex;
  gap: 10px;
}
.qr-section #qrcode {
  margin: 0 auto;
}
.qr-section .dashboard-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 40px;
}
.qr-section .dashboard-header h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0;
  color: #252525;
}
.qr-section .dashboard-header #create-qr-code {
  margin-left: auto;
  width: fit-content;
  border-radius: 5px;
}
.qr-section .qr-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 20px;
}
.qr-section .qr-list .primary-button {
  border-radius: 5px;
}
.qr-section .qr-list #load-my-qr-codes {
  margin: auto;
}
.qr-section .qr-list .qr-card {
  display: flex;
  border: 1px solid #ebeced;
  width: 100%;
  border-radius: 10px;
  background-color: white;
}
.qr-section .qr-list .qr-card .qr-image-container {
  padding: 10px;
  border-right: 1px solid #ebeced;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qr-section .qr-list .qr-card .qr-image-container .extension-options {
  display: flex;
  justify-content: space-around;
  margin-top: -15px;
}
.qr-section .qr-list .qr-card .qr-image-container .extension-options .extension-card {
  border-radius: 5px;
  border: 1px solid #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #a1a1a1;
  cursor: pointer;
  position: relative;
  padding: 8px 10px;
}
.qr-section .qr-list .qr-card .qr-image-container .extension-options .active-extension-card {
  border: 2px solid #5973F8;
  color: #5973F8;
}
.qr-section .qr-list .qr-card .qr-image-container .dimension-options {
  justify-content: space-around;
}
.qr-section .qr-list .qr-card .qr-image-container .dimension-options .form-body {
  width: fit-content;
}
.qr-section .qr-list .qr-card .qr-image-container .dimension-options input {
  width: 100px;
}
.qr-section .qr-list .qr-card .stats-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #ebeced;
}
.qr-section .qr-list .qr-card .stats-section .stats-container {
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
}
.qr-section .qr-list .qr-card .stats-section .stats-container h2 {
  color: #a1a1a1;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  text-transform: capitalize;
  text-align: center;
}
.qr-section .qr-list .qr-card .stats-section .stats-container span {
  color: #252525;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: capitalize;
}
.qr-section .qr-list .qr-card .stats-section hr {
  width: 100%;
}
.qr-section .qr-list .qr-card .info-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  margin: auto 0;
}
.qr-section .qr-list .qr-card .info-section h2 {
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
}
.qr-section .qr-list .qr-card .info-section .card-section-flex {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qr-section .qr-list .qr-card .info-section .card-section-flex span, .qr-section .qr-list .qr-card .info-section .card-section-flex a {
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  color: #a1a1a1;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.qr-section .qr-list .qr-card .info-section .card-section-flex a {
  width: 250px;
}
.qr-section .qr-list .qr-card .cta-section {
  margin: auto 20px auto auto;
}

.show-progress-container {
  display: flex;
}

@media screen and (max-width: 375px) {
  .onboarding-main-container {
    height: 100%;
  }
  .onboarding-main-container .onboarding-main-section .onboarding-body img {
    width: 50%;
  }
}
@media screen and (min-width: 600px) {
  .header-section h1 {
    text-align: center;
  }
  .header-section .horizontal-nav {
    justify-content: center;
  }
  .demo-main-container .dashboard-section {
    padding-left: initial;
    text-align: center;
  }
  .demo-main-container .dashboard-section .dashboard-nav {
    justify-content: center;
  }
}
#tutorial-6 .tutorial-page-overlay .tutorial-text {
  padding-left: 10%;
}

.tutorial-section {
  position: relative;
}
.tutorial-section .navigation-footer-v2 {
  pointer-events: none;
}
.tutorial-section #no-navbar-select .disabled-anchor, .tutorial-section #no-navbar-select .selected-navigation-item {
  background-color: transparent;
  z-index: 10000;
  width: auto;
  border-radius: 8px;
}
.tutorial-section #no-navbar-select .selected-navigation-item {
  pointer-events: none;
  width: 96px !important;
}
.tutorial-section .tutorial-page-overlay, .tutorial-section .hyb-tutorial-page-overlay {
  z-index: 10000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  color: #FFF;
}
.tutorial-section .tutorial-page-overlay .status-bar-container, .tutorial-section .hyb-tutorial-page-overlay .status-bar-container {
  /* Default padding for web */
  padding-top: 26px;
  /* Safe area adjustments only in Capacitor apps */
}
[data-capacitor=true] .tutorial-section .tutorial-page-overlay .status-bar-container, [data-capacitor=true] .tutorial-section .hyb-tutorial-page-overlay .status-bar-container {
  padding-top: max(0px, 26px - env(safe-area-inset-top, 0px));
}
.tutorial-section .tutorial-page-overlay .status-bar-container .right-cta-container, .tutorial-section .hyb-tutorial-page-overlay .status-bar-container .right-cta-container {
  gap: 16px;
}
.tutorial-section .tutorial-page-overlay .tutorial-text, .tutorial-section .hyb-tutorial-page-overlay .tutorial-text {
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 20px;
  width: 100%;
  position: absolute;
}
.tutorial-section .tutorial-page-overlay .tutorial-text span, .tutorial-section .hyb-tutorial-page-overlay .tutorial-text span {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
.tutorial-section .tutorial-page-overlay .tutorial-text-bottom, .tutorial-section .hyb-tutorial-page-overlay .tutorial-text-bottom {
  bottom: 0px;
}
.tutorial-section .tutorial-page-overlay .tutorial-text-top, .tutorial-section .hyb-tutorial-page-overlay .tutorial-text-top {
  padding-top: 10px;
}
.tutorial-section .tutorial-page-overlay .navigation-footer::before, .tutorial-section .hyb-tutorial-page-overlay .navigation-footer::before {
  content: ""; /* Create an empty pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Transparent black overlay */
  z-index: 9999; /* Ensure the overlay is above other content */
}
.tutorial-section .tutorial-page-overlay .navigation-footer, .tutorial-section .hyb-tutorial-page-overlay .navigation-footer {
  border-radius: 0px;
}
.tutorial-section .tutorial-page-overlay .navigation-footer .disabled-anchor, .tutorial-section .tutorial-page-overlay .navigation-footer .selected-navigation-item, .tutorial-section .hyb-tutorial-page-overlay .navigation-footer .disabled-anchor, .tutorial-section .hyb-tutorial-page-overlay .navigation-footer .selected-navigation-item {
  background-color: white;
  z-index: 10000;
  width: 76px;
  border-radius: 8px;
}
.tutorial-section .tutorial-page-overlay .navigation-footer .selected-navigation-item, .tutorial-section .hyb-tutorial-page-overlay .navigation-footer .selected-navigation-item {
  pointer-events: none;
  width: 96px !important;
}
.tutorial-section .tutorial-page-overlay .loop-heading, .tutorial-section .hyb-tutorial-page-overlay .loop-heading {
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  margin-left: 5%;
  margin-right: 5%;
  border-bottom: 1px solid #F2F2F2;
  background-color: white;
  border-radius: 8px;
  color: #252525;
  padding: 8px;
}
.tutorial-section .tutorial-page-overlay .loop-heading .loop-heading-button-container, .tutorial-section .hyb-tutorial-page-overlay .loop-heading .loop-heading-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tutorial-section .tutorial-page-overlay .device-container, .tutorial-section .hyb-tutorial-page-overlay .device-container {
  padding-left: 10%;
  padding-right: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 80px;
}
.tutorial-section .tutorial-page-overlay .device-container .device-card, .tutorial-section .hyb-tutorial-page-overlay .device-container .device-card {
  padding-left: 5%;
  padding-right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: white;
  border-radius: 8px;
  padding: 8px;
  color: black;
}
.tutorial-section .tutorial-page-overlay .device-container .device-card .device-card-label, .tutorial-section .hyb-tutorial-page-overlay .device-container .device-card .device-card-label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tutorial-section .tutorial-page-overlay .device-container .device-card .device-card-label img, .tutorial-section .tutorial-page-overlay .device-container .device-card .device-card-label .skeleton-loader, .tutorial-section .hyb-tutorial-page-overlay .device-container .device-card .device-card-label img, .tutorial-section .hyb-tutorial-page-overlay .device-container .device-card .device-card-label .skeleton-loader {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.tutorial-section .tutorial-page-overlay .device-container .device-card .device-card-label .truncate-span, .tutorial-section .hyb-tutorial-page-overlay .device-container .device-card .device-card-label .truncate-span {
  flex: 1;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}
.tutorial-section .hyb-tutorial-page-overlay {
  height: 100% !important;
}
.tutorial-section .hyb-tutorial-page-overlay .tutorial-text-bottom {
  bottom: 80px !important;
}
.tutorial-section .chats-container, .tutorial-section .devices-home-container {
  visibility: initial;
}
.tutorial-section .devices-home-container {
  height: 100%;
  padding-top: 40px;
}
.tutorial-section .tutorial-container {
  pointer-events: none;
  width: 100%;
}
.tutorial-section .tutorial-container .home-content-container {
  overflow-y: hidden;
}
.tutorial-section .tutorial-container::before {
  content: ""; /* Create an empty pseudo-element */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8); /* Transparent black overlay */
  z-index: 9999; /* Ensure the overlay is above other content */
}

@media screen and (min-width: 1000px) {
  .tutorial-section .tutorial-page-overlay .loop-heading {
    margin-left: 15%;
    margin-right: 15%;
  }
  .tutorial-section .tutorial-page-overlay .device-container {
    padding-left: 15%;
    padding-right: 15%;
  }
  #tutorial-5 .tutorial-page-overlay .tutorial-text, #tutorial-6 .tutorial-page-overlay .tutorial-text {
    padding-left: 15%;
    padding-right: 15%;
  }
  #tutorial-1 .tutorial-page-overlay .tutorial-text, #tutorial-3 .tutorial-page-overlay .tutorial-text {
    text-align: center;
  }
  #tutorial-1 .tutorial-page-overlay .tutorial-text {
    text-align: left;
  }
  #tutorial-2 .tutorial-page-overlay .tutorial-text {
    text-align: left;
    padding-left: 15%;
  }
  #tutorial-4 .tutorial-page-overlay .tutorial-text {
    text-align: right;
    right: 5%;
  }
  #tutorial-7 .tutorial-page-overlay .tutorial-text {
    text-align: right;
    padding-right: 2%;
  }
  .selected-preferences {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
    overflow-x: unset;
    width: 100%;
    padding-right: 15%;
    padding-left: 15%;
  }
  .qr-section {
    padding-left: 10%;
    padding-right: 10%;
  }
  .selected-preferences > .selected-preference-card:first-of-type {
    margin-left: 0%;
  }
  .selected-preferences > .selected-preference-card:last-of-type {
    margin-right: 0%;
  }
  .preference-body {
    padding-right: 15%;
    padding-left: 15%;
  }
  .preference-body h1 {
    padding-left: 0%;
  }
  .preference-body .preference-row-1 {
    display: none;
  }
  .preference-body .preference-row-2 {
    flex-wrap: wrap;
    display: none;
  }
  .preference-body .preference-row {
    flex-wrap: wrap;
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F2F2;
  }
  .preference-body .preference-row-1 > :first-child {
    margin-left: 0%;
  }
  .preference-body .preference-row-1 > :last-child {
    margin-right: 0%;
  }
  .preference-body .preference-row-2 > :first-child {
    margin-left: 0%;
  }
  .preference-body .preference-row-2 > :last-child {
    margin-right: 0%;
  }
  .preference-setup-main-body .preference-container {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .preference-setup-main-body .preference-container .account-settings-preferences-container .search-input-container {
    margin-left: 15%;
    margin-right: 15%;
  }
  .preference-setup-main-body .preference-container .account-settings-preferences-container #selected-preference-header {
    padding-left: 15%;
    padding-right: 15%;
  }
  .preference-setup-main-body .preference-container .header-container {
    padding-left: 15%;
    padding-right: 15%;
  }
  #save-preference {
    max-width: 50%;
  }
  .horizontal-nav {
    justify-content: center;
    align-items: center;
  }
  .dashboard-nav {
    padding-left: 15%;
    justify-content: center;
    align-items: center;
  }
  .demo-main-container .navbar-header, .demo-main-container .description {
    margin-left: 15%;
    margin-right: 15%;
  }
}

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