.scaffold-input{
  margin-bottom:24px;

  input{
    width:500px;
  }
}


.admin-table{
  border-collapse:collapse;
  border:2px solid black;
  min-width:800px;
  width:100%;

  td{
    border:1px solid #ccc;
    padding:5px 10px;
  }
}

.admin-exit{
  position: fixed;
  right:40px;
  top:50px;
}



.voice-row{
  td{
    color:#555;
  }

  svg{
    width:16px;
    height:16px;
    margin-right:10px;
    vertical-align: middle;
    margin-top:-3px;
  }
}

.voice-row:hover{
  td{
    color:black;
    cursor: pointer;
  }
}

.audio-preview{
  svg{
    width:16px;
    height:16px;
    vertical-align: middle;
    margin-top:-3px;
  }
}

.admin-subcategory-image{
  img{
    width:100px;
    margin-top:20px;
  }
}

.admin-delete{
  display: inline-block;
  padding:4px 10px;
  border:1px solid red;
  text-decoration: none;
  color:#313131;
  margin-top:100px;
}

.admin-stat-container{
  width: 100%;
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #fcfeff;
  display: flex;
  gap: 40px;
  padding: 80px;
  max-width: 1200px;
  min-width: 1200px;
  margin:auto;
}

.admin-stat-top{
  display:flex;
  width:100%;
  justify-content:space-between;
}

.admin-stat-menu{
  border-radius: 10px;
  background:white;
  box-shadow: 0 16px 24px 4px #0000000d;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items:center;
  padding: 6px;
}

.admin-stat-refresh{
  border-radius: 22px;
  background:white;
  box-shadow: 0 8px 24px #0000001a;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items:center;
  height:44px;
  width:44px;
  color: rgb(49, 49, 49);
}

  .admin-stat-menu-img{
    width:32px;
    height:32px;
  }

  .admin-stat-refresh-img{
    width:24px;
    height:24px;
  }

.admin-stat-row{
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  height: min-content;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
}

.admin-stat-tile {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 16px 24px 4px #0000000d;
  gap: 12px;
  padding: 24px;
  width:100%;
}

.admin-stat-tile-header{
  font-size: 14px;
  font-weight: 500;
  color:rgb(107, 111, 118);
  white-space:nowrap;
}

.admin-stat-tile-metric{
  font-size: 32px;
  font-weight: 700;
  color:rgb(49, 49, 49);
  white-space:nowrap;
}

.admin-stat-tile-subhead{
  font-size:12px;
  font-weight:500;
  color:rgb(158, 163, 186);
  white-space:nowrap;
}

.admin-stat-divider{
  background-color: #f6f8fa;
  height: 1px;
  max-width: 1280px;
  width: 100%;
}

.admin-stat-sales-funnel{
  font-size:28px;
  font-weight:700;
  color:rgb(49, 49, 49);
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.admin-stat-sales-dates{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  align-items:center;
}

.admin-stat-sales-date{
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  font-weight:500;
  color:rgb(107, 111, 118);
  background:none;
  cursor:pointer;
}

  .admin-stat-sales-date-active, .admin-stat-sales-date:hover{
    background:#f6f8fa;
  }

.admin-stat-sales-metrics{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  box-shadow:0 16px 24px 4px #0000000d;
  border-radius:24px;
  background:white;
  gap:24px;
  padding:24px;
  width:100%;
  justify-content:center;
}

.admin-stat-sales-title{
  font-size:16px;
  color:rgb(49, 49, 49);
  font-weight:600;
}

.admin-stat-sales-counts{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
}

.admin-stat-sales-trials, .admin-stat-sales-annuals{
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:4px;
  font-size:14px;
  font-weight:600;
  align-items:center;
  justify-content:center;
}

  .admin-stat-sales-trials{
    color:rgb(107, 111, 118);
  }

  .admin-stat-sales-annuals{
    color:rgb(34, 170, 153);
  }

  .admin-stat-sales-trials-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgb(107, 111, 118);
    border-radius:100%;
    height:18px;
    width:18px;
    color: white;
  }

  .admin-stat-sales-annuals-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgb(34, 170, 153);
    border-radius:100%;
    height:18px;
    width:18px;
    color: white;
  }

  .admin-stat-sales-misc{
    display:flex;
    flex-wrap:nowrap;
    white-space:nowrap;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:14px;
    font-weight:600;
    color:rgb(107, 111, 118);
    position:relative;
    cursor:pointer;
  }

    .admin-stat-sales-misc-icon{
      color:rgb(107, 111, 118);
      width:18px;
      height:18px;
    }


  .admin-stat-sales-metrics-row{
    display:flex;
    flex-wrap:nowrap;
    gap:24px;
    width:100%;
    justify-content:space-between;
  }

  .admin-stat-sales-metric{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
  }

  .admin-stat-sales-metric-title{
    font-weight:500;
    font-size:14px;
    color:rgb(107, 111, 118);
  }

  .admin-stat-sales-metric-percent{
    font-weight:600;
    font-size:14px;
    color:rgb(45, 103, 246);
  }

  .admin-stat-sales-metric-value{
    font-weight:700;
    font-size:32px;
    color:rgb(49, 49, 49);
  }

  .admin-stat-sales-metric-divider{
    background-color:#cfcfcf;
    height: 67px;
    width: 1px;
  }

  .admin-stat-onboarding-flows{
    width:100%;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:24px;
    padding:24px;
    border-radius:24px;
    border:1px solid #f6f8fa;
  }

  .admin-stat-onboarding-flows-title{
    color:rgb(49, 49, 49);
    font-size:16px;
    font-weight:600;
  }


.admin-stat-onboarding-table{
  width:100%;
}

.admin-stat-onboarding-table-header{
  font-size:16px;
  font-weight:400;
  color:rgb(107, 111, 118);
  white-space:nowrap;
  padding:6px 0px;
}

.admin-stat-onboarding-flow-status-true{
  background:#d4edeb;
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:6px;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  color:rgb(34, 170, 153);
  font-size:12px;
  font-weight:500;
  width:min-content;
}

  .admin-stat-onboarding-flow-status-true-dot {
    background:#22aa99;
    border-radius:100%;
    height:5px;
    width:5px;
  }

.admin-stat-onboarding-flow-status-false{
  background:#f6f8fa;
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:6px;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  color:rgb(158, 163, 186);
  font-size:12px;
  font-weight:500;
  width:min-content;
}

  .admin-stat-onboarding-flow-status-false-dot {
    background:#9ea3ba;
    border-radius:100%;
    height:5px;
    width:5px;
  }

  .admin-stat-datepicker{
    border-radius: 8px;
    padding: 6px 8px;
    box-shadow:0 16px 24px 4px #0000000d;
    background:white;
    outline: none;
    border: none;
    cursor: pointer;
  }

  .admin-stat-sales-misc-list{
    position:absolute;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    width:250px;
    /* min-height:400px; */
    background:white;
    box-shadow:0 16px 24px 4px #0000000d;
    overflow-y:scroll;
    right:0;
    top:100%;
    z-index:6;
    border-radius:24px;
    padding:12px;
    display:none;
  }

  .admin-stats-modal-bg{
    width:100%;
    height:100%;
    position:sticky;
    background:rgba(0, 0, 0, 0.1);
    z-index:5;
    top:0;
    bottom:0;
    display:none;
  }

  .admin-stat-sales-misc-row{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    padding:12px;
    border-bottom:1px solid rgb(158, 163, 186);
  }

  .admin-stat-sales-misc-title{
    font-size:14px;
    font-weight:500;
    color:rgb(107, 111, 118);
  }

  .admin-stat-sales-misc-data{
    font-size:16px;
    font-weight:500;
    color:rgb(49, 49, 49);
  }

  .admin-stat-nav{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
  }

    .admin-stat-nav-link, .admin-stat-nav-link-active{
      display:flex;
      flex-wrap:nowrap;
      align-items:center;
      justify-content:center;
      padding:12px 16px;
      background:white;
      border-radius:12px;
      color:rgb(107, 111, 118);
      font-size:14px;
      font-weight:500;
      text-decoration:none;
      font-family: "Inter", "Inter Placeholder", sans-serif;
    }

      .admin-stat-nav-link-active, .admin-stat-nav-link:hover{
        background-color:#f6f8fa;
      }

  .admin-stat-filter-row {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content: flex-end;
    gap:12px;
  }


  .admin-user-table{
    width:100%;
    border-collapse:collapse;
    font-family: "Inter", "Inter Placeholder", sans-serif;
  }

  .admin-user-table-header{
    background:#f6f8fa;
    padding: 12px 28px;
  }

  .admin-user-table-header th{
    font-family: "Inter", "Inter Placeholder", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgb(158, 163, 186);
  }

  .admin-user-table tbody{
    background:white;
    border-radius:24px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
    padding:0px 28px;
    font-size:14px;
  }

  .admin-user-table thead th{
    padding:12px 0px;
  }

  .admin-user-table tbody td{
    padding:28px 12px;
  }

  .admin-user-table thead tr:first-child th:first-child {
    border-top-left-radius: 24px;
  }

  .admin-user-table thead tr:first-child th:last-child {
    border-top-right-radius: 24px;
  }

  .admin-user-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 24px;
  }

  .admin-user-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 24px;
  }

  .admin-user-table th, .admin-user-table td {
    padding: 10px;
    border-bottom: 1px solid #f6f8fa;
    text-align:left;
  }

  .admin-user-table tr:last-child td {
    border-bottom: none;
  }

  .admin-user-table tbody tr td:first-child, .admin-user-table thead tr th:first-child {
    padding-left:28px;
  }

  .admin-user-table tbody tr td:last-child, .admin-user-table thead tr th:last-child {
    padding-right:28px;
    text-align:right;
  }

  .admin-user-status {
    padding: 5px 10px;
    border-radius: 5px;
  }

  .admin-user-status.active {
    background-color: rgb(234, 246, 245);
    color: rgb(34, 170, 153);
    width:fit-content;
  }

  .admin-user-status.trialing {
    background-color: #f6f8fa;
    color: rgb(158, 163, 186);
    width:fit-content;
  }

  .admin-user-status.canceled {
    background-color: #ffdee1;
    color: #ff6475;
    width:fit-content;
  }

  .admin-user-pagination {
   display:flex;
   gap:6px;
   align-items:center;
   justify-content:center;
  }

    .admin-user-page{
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:14px;
      background:white;
      border-radius:6px;
      box-shadow:0 16px 24px 4px #0000000d;
      padding:6px 14px;
      cursor:pointer;
      color:rgb(107, 111, 118);
      text-decoration:none;
    }

    .admin-user-page:hover{
      background:#f6f8fa;
    }

  .admin-stat-filter-input{
    border-radius: 8px;
    padding: 6px 8px;
    box-shadow:0 16px 24px 4px #0000000d;
    background:white;
    outline: none;
    border: none;
    font-size:14px;
    color: rgb(49, 49, 49);
    background:white;
  }

  .admin-stat-filter-input::placeholder{
    border-radius: 8px;
    padding: 6px 8px;
    box-shadow:0 16px 24px 4px #0000000d;
    background:white;
    outline: none;
    border: none;
  }

  .admin-user-voice-badges{
    display:flex;
    flex-wrap:nowrap;
    gap:2px;
  }

  .admin-user-voice-badge{
    width:24px;
    height:24px;
    padding:4px;
    border-radius:100%;
    display:flex;
    align-items:center;
    justify-content:center;

    img{
      width:18px;
      height:18px;
    }
  }

.admin-support-container{
  width: 100%;
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #fcfeff;
  display: flex;
  gap: 40px;
  padding: 80px;
  margin:auto;
}
#animationCanvas {

  /*filter: blur(60px);*/
  width: calc(100vw + 300px); /* Extend width for blur */
  height: calc(100vh + 300px); /* Extend height for blur */
  overflow: hidden; /* This crops the canvas to the container size */
  position: fixed;
  top:-150px;
  left:-150px;
  z-index:-2;
}

.animation-blur{
  backdrop-filter: blur(60px); /* Apply blur effect */
  -webkit-backdrop-filter: blur(60px); /* For Safari */
  width: calc(100vw + 300px); /* Extend width for blur */
  height: calc(100vh + 300px); /* Extend height for blur */
  position: fixed;
  top:-150px;
  left:-150px;
  z-index:-1;
}

.album-bg-icon{
  width:200px;
  height:200px;
  position: fixed;
  top:calc(39vh - 100px);
  left:calc(50vw - 100px);
}

.album-bg-icon--svg{
  opacity: 0.04;
}

.session-progress-outer{
  height:7px;
  width:100%;
  border-radius:4px;
  background:rgba(255,255,255,0.2);
}

  .session-progress-inner{
    background:#fff;
    border-radius:4px;
    height:7px;
    width:0px;
    max-width: 100%;
  }

.track-display{
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.2em;
  color:#fff;
  position: absolute;
  top:calc(50% - 50px - 44px);
  height:100px;
	display: flex;
	flex-direction: row;
	align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing:border-box;
  width:80vw;
  left:10vw;

}

.play-button{
  position: absolute;
  bottom:50px;
  width:46px;
  height:46px;
  left:calc(50vw - 23px);
  text-align: center;
  border-radius: 100%;
  background:#fff;
  cursor:pointer;



}

.play-button--svg{
  width: 18px;
  height: 18px;
  margin-top: 14px;
  color:#313131;
  fill:#313131
}

.previous-button{
  position: absolute;
  bottom:50px;
  width:46px;
  height:46px;
  left:calc(50vw - 90px);
  text-align: center;
  border-radius: 100%;
  cursor:pointer;
}

.previous-button--svg{
  width: 28px;
  height: 28px;
  margin-top: 9px;
  color:#fff;
  opacity: 0.6;
}

.next-button{
  position: absolute;
  bottom:50px;
  width:46px;
  height:46px;
  left:calc(50vw + 44px);
  text-align: center;
  border-radius: 100%;
  cursor:pointer;
}

.next-button--svg{
  width: 28px;
  height: 28px;
  margin-top: 9px;
  color:#fff;
  opacity: 0.6;
}


.album-title-bottom-bar{
  left:5vw;
  width:90vw;
  border-radius: 23px;
  position: absolute;
  bottom:116px;
  text-align: center;
  height:46px;
  line-height: 46px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);

  .marquee-container{
    padding:0 14px 0 14px;
    font-size:18px;
    color:#fff;
    font-weight: 700;
    width:100%;
    text-wrap:nowrap;
    line-height: 46px;
    height:46px;
  }
}


.album-close-button--svg{
  margin-top:16px;
  height:36px;
  width:36px;
  padding:8px;
  color:#fff;
}

.album-complete{
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  background:#fff;
  position: fixed;
  z-index:3;
  padding:24px 24px 24px 24px;
  display: none;
}


.album-complete-upgrade{
  width:100vw;
  height:100vh;
  top:0;
  left:0;
  background:#070508;
  position: fixed;
  z-index:3;
  padding:24px 24px 24px 24px;
  display: none;
  color:#fff;
}


.complete-close-button{
  svg{
    margin-top:16px;
    height:36px;
    width:36px;
    padding:8px;
    color:#000;
    cursor:pointer;
  }
}

.complete-title{
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-top:40vh;
  color:#313131;
  line-height: 1.2em;
  letter-spacing: -.04em;
}

.complete-button{
  background:#F0A613;
  height:60px;
  border-radius:30px;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  font-weight: 700;
  color:#fff;
  position: absolute;
  bottom:24px;
  left:24px;
  letter-spacing: -.04em;
  width:calc(100% - 48px);
  text-decoration: none;
}

  .complete-button-upgrade{
    background:#fff;
    color:#313131;
  }

.album-complete-upgrade-top{
  margin-top:75px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1em;

  background: -webkit-linear-gradient(#FFFFFF, #FFAC38);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  svg{
    color: #F9E7C0;
    fill: #F9E7C0;
    height:16px;
    width:16px;
    margin-right:4px;
    vertical-align: middle;
    margin-top: -2px;
  }
}

.album-complete-upgrade-headline{
  text-align: center;
  position: absolute;
  top:450px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  color:white;
  width:calc(100% - 48px);
}
.today-alerts {
  margin-left: auto;
  width: 46px;
  height: 46px;
  border-radius: 100%;
  cursor: pointer;
  text-align: center;
  line-height: 46px;
  display: inline-block;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1); }
  .today-alerts svg {
    height: 22px;
    width: 22px;
    vertical-align: middle;
    stroke: black;
    stroke-width: 2px; }
  .today-alerts .red-dot {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    position: absolute;
    top: 1px;
    right: 1px;
    background: #EE4444; }

.alert-row {
  padding: 14px 0; }

.alert-profile-icon {
  margin-right: 10px;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  border-radius: 100%;
  border: 3px solid #313131;
  cursor: pointer;
  text-align: center;
  line-height: 46px;
  display: inline-block;
  margin-top: 2px;
  position: relative;
  margin-left: 10px;
  /* to make room for unread red dot */ }

.alert-profile-icon-img {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  border: 3px solid white;
  background-size: cover;
  background-position: center; }

.alert-profile-icon--svg {
  color: white;
  background: #313131;
  padding: 5px;
  fill: white;
  vertical-align: top;
  margin-top: 3px;
  height: 36px;
  width: 36px;
  border-radius: 100%; }

.alert-profile-icon-red-dot {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  position: absolute;
  top: 16px;
  left: -22px;
  background: #EE4444; }

.alert-text {
  width: calc(100% - 124px);
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  color: #313131;
  font-weight: 500;
  line-height: 1.2em; }

.alert-text-bold {
  font-weight: 700; }

.alert-time {
  color: #6B6F76;
  font-weight: 400;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  line-height: 1em;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap; }

.alert-badge-right {
  float: right; }

.alert-view-profile {
  background: #F6F8FA;
  height: 36px;
  padding: 0 12px;
  display: inline-block;
  border-radius: 18px;
  color: #313131;
  font-weight: 600;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  line-height: 36px;
  font-size: 12px;
  position: relative; }

.alert-view-insight {
  height: 54px;
  width: 41px;
  background-size: cover;
  border-radius: 4px;
  position: relative; }

.favorite-text {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  color: #313131;
  font-weight: 600;
  line-height: 1.4em; }

.favorite-text-bold {
  font-weight: 700; }

.favorite-time {
  color: #9EA3BA;
  font-weight: 400;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  line-height: 1em;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 12px; }
.onboarding-tag-top{
  width:50px;
  height:24px;
  background:#F6F8FA;
  line-height: 24px;
  border-radius:8px;
  font-size: 12px;
  font-family: "Inter", serif;
  font-weight: 600;
  letter-spacing: -0.04em;
  color:#9EA3BA;
  margin-left:calc(50% - 25px);
  text-align: center;
  margin-bottom:16px;
}

.onboarding-headline{
  font-size: 32px;
  font-weight: 700;
  color:#313131;
  letter-spacing: -0.04em;
  line-height: 1.1em;
  text-align: center;
  margin-bottom:16px;
}

.onboarding-subheadline{
  font-size: 16px;
  font-weight: 500;
  color:#9EA3BA;
  font-family: "Inter", serif;
  letter-spacing: -0.04em;
  line-height: 1.4em;
  text-align: center;
}


.upgrade-headline{
  font-size: 32px;
  font-weight: 700;
  color:#fff;
  letter-spacing: -0.04em;
  line-height: 1.1em;
  text-align: center;
  margin-bottom:16px;
}


.assessment-top-title{
  text-align: center;
  position: absolute;
  top: 66px;
  width:100vw;
  left:0;
  line-height: 1.2em;
  font-size: 12px;
  font-weight: 700;
}

.onboarding-question-example{
  position: fixed;
    max-height:300px;
    max-width:80%;
    margin:auto;
    top: 31vh;
}

.assessment-meter-outer{
  height:8px;
  width:100%;
  border-radius:4px;
  background: #F4F4F4;

  .assessment-meter-inner{
    background:#313131;
    width:0;
    height:8px;
    border-radius:4px;
  }
}

#avatar-placeholder--svg{
  color: rgb(49, 49, 49);
  fill: rgb(49, 49, 49);
  vertical-align: top;
  margin-top: 6px;
  height: 44px;
  width: 44px;
  background: white;
  padding: 5px;
  border-radius: 100%;
}

.question {
    position: fixed;
    padding-top:35px;
    padding-bottom:30px;
    top:150px;
    left:24px;
    right:24px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(rgb(30, 235, 143) 40%, rgb(0, 158, 253) 100%);
    border-radius:24px;

    .option {
        text-align: center;
        font-size: 24px;
        padding: 20px;
    }
}

#draggable-image {
    position: fixed;
    border-radius: 100%;
    cursor: pointer; /* Indicates you can drag the image */
}

.assessment-avatar-default{
  width:80px;
  height:80px;
  border:3px solid white;
  background: #313131;
  color:#fff;
  overflow:hidden;
  background-size: cover;
  background-position: center;

  svg{
    padding:4px;
    fill:#fff;
  }

  img{
    width:100%;
    height:100%;
  }
}

.assessment-arrows-up{
  color:white;
  position: absolute;
  width:30px;
  height:30px;
  left: calc(50% - 15px);
  top: calc(50% - 75px); /* Center the image vertically adjusted */

  svg{
    width:100%;
    height:100%;
  }

  animation: fadeInOutUp 2s infinite;
}

.assessment-arrows-down{
  color:white;
  position: absolute;
  width:30px;
  height:30px;
  left: calc(50% - 15px);
  top: calc(50% + 115px); /* Center the image vertically adjusted */

  svg{
    width:100%;
    height:100%;
  }

  animation: fadeInOutDown 2s infinite;
}


@keyframes fadeInOutUp {
    0%, 100% {
        opacity: 0;
        transform: translateY(0); /* Chevron starts and ends at the initial position */
    }
    50% {
        opacity: 1;
        transform: translateY(-10px); /* Chevron moves up 10px when fully visible */
    }
}

@keyframes fadeInOutDown {
    0%, 100% {
        opacity: 0;
        transform: translateY(0); /* Chevron starts and ends at the initial position */
    }
    50% {
        opacity: 1;
        transform: translateY(10px); /* Chevron moves down 10px when fully visible */
    }
}


.assessment-option-title{
  color:white;
  font-size: 24px;
  line-height: 1em;
  font-weight: 700;
  opacity:1;
}

.assessment-option-description{
  font-family: "Inter", sans-serif;
  margin-top:8px;
  font-size: 16px;
  line-height: 1.4em;
  width:230px;
  margin-left:calc(50% - 115px);
  color:white;
  opacity: 1;
}

.assessment-back{
  position: fixed;
  top:56px;
  left:24px;
  width:36px;
  height:36px;
  border-radius:100%;
  text-align: center;
  line-height: 36px;
  cursor:pointer;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
  display: none;
  z-index:1;

  svg{
    color:#313131;
    height:20px;
    width:20px;
    vertical-align: top;
    margin-top:8px;
    margin-left:-2px;
  }
}

.assessment-icon{
  width:60px;
  height:60px;
  border-radius: 100%;
  border:2px solid #313131;
  text-align: center;
  line-height: 42px;
  position: absolute;
  top:calc(55vh - 30px);
  left:calc(50vw - 30px);
  background-size: cover !important;
  background-position: center !important;

  img{
    width:56px;
    height:56px;
    border-radius: 100%;
    border:2px solid white;
  }

  svg{
    color:#313131;
    background:white;
    padding:5px;
    fill:#313131;
    vertical-align: top;
    margin-top:6px;
    height:44px;
    width:44px;
    border-radius:100%;
  }
}

.assessment-results-headline{
  font-size: 24px;
  color:#313131;
  line-height: 1.2em;
  font-weight: 700;
  &.results{
    display: flex;
    gap: 24px;
  }
}

.assessment-result{
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  overflow: visible;
  z-index: 2;
  align-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  transform-perspective: 1200;
  border-radius: 40px;
  margin-top: 24px;
  h1{
    width: auto;
    height: auto;
    white-space: pre;
    z-index: 2;
    font-weight: 700;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: var(--Dark, #313131);
    font-size: 20px;
    letter-spacing: 0em;
    line-height: 1.2;
    text-align: center;
  }
}
.assessment-result-left{
  display: flex;
  flex-direction: row;
  place-items: center;
  gap: 12px;
}
.assessment-result-icon{
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px;
  background-color: #f6f8fa;
  overflow: visible;
  align-content: center;
  flex-wrap: nowrap;
  gap: 10;
  border-radius: 100%;
}

.onboarding-1-bg{
  z-index:-1;

  .spinner{
    position: absolute;
    width:320px;
    left: calc(50% - 160px);
    z-index: -1;
    top:calc((100vh - 150px)/2);
    animation: spin 30s infinite linear;
  }
}

.onboarding-2-bg{
  z-index:-1;
  position: relative;

  .spinner{
    width:144px;
    margin-top:35px;
    margin-left: calc(50% - 72px);
    z-index: -1;
    animation: spin 30s infinite linear;
  }
}

.onboarding-3-bg{
  z-index:-1;
  position: relative;

  .spinner{
    width:400px;
    margin-top:100px;
    margin-left: calc(50% - 200px);
    z-index: -1;
    animation: spin 30s infinite linear;
  }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}


.onboarding-spinner-avatar-center{
  width:116px;
  height:116px;
  border-radius: 100%;
  border:5px solid #F0A613;
  text-align: center;
  position: absolute;
  /*top:calc(55vh - 58px);*/
  top:calc((100vh - 150px)/2 + 100px);
  left:calc(50vw - 58px);
  background: #FFF9ED;

  .spinner-img{
    width:106px;
    height:106px;
    border-radius: 100%;
    border:5px solid white;
  }

  .sub-icon{
    width:32px;
    height:32px;
    background:#F0A613;
    color:white;
    padding:6px;
    border-radius:100%;
    position: absolute;
    bottom:0;
    right:0;
    fill:white;
  }
}

.onboarding-spinner-avatar-center2{
  width:88px;
  height:88px;
  border-radius: 100%;
  border:4px solid #F0A613;
  text-align: center;
  background: #FFF9ED;
  top:62px;
  left: calc(50% - 44px);
  position: absolute;

}

.onboarding-spinner-avatar-center2--img{
  width:80px;
  height:80px;
  border-radius: 100%;
  border:4px solid white;
  background-position: center;
  background-size: cover;

}
.sub-icon2{
  width:32px;
  height:32px;
  background:#F0A613;
  color:white;
  padding:6px;
  border-radius:100%;
  position: absolute;
  bottom:-5px;
  right:-5px;
  fill:white;
}

.onboarding-spinner-avatar-center2--svg2{
  width:80px;
  height:80px;
  border-radius: 100%;
  border:4px solid white;
  fill: white;
  color: white;
  background: #313131;
  padding:6px;
}



.onboarding-spinner-avatar-corner{
  width:60px;
  height:60px;
  border-radius: 100%;
  text-align: center;
  position: absolute;


}

.onboarding-spinner-avatar-corner--img{
  width:54px;
  height:54px;
  border-radius: 100%;
  border:3px solid white;
}

.sub-icon{
  width:24px;
  height:24px;
  color:white;
  padding:6px;
  border-radius:100%;
  position: absolute;
  bottom:-4px;
  right:-4px;
  fill:white;
}

.ob-top-left{
  border:3px solid #DE5320;
  /*top:calc(55vh - 118px);*/
  top:calc((100vh - 150px)/2 + 40px);
  left:calc(50vw - 118px);
  background: #F5EBEE;


}
.ob-top-left--svg{
  background:#DE5320;
}

.ob-top-right{
  border:3px solid #54BB97;
  /*top:calc(55vh - 118px);*/
  top:calc((100vh - 150px)/2 + 40px);
  right:calc(50vw - 118px);
  background: #F2FCF8;
}

.ob-top-right--svg{
  background:#54BB97;
}

.ob-bottom-right{
  border:3px solid #00809D;
  /*bottom:calc(45vh - 118px);*/
  top:calc((100vh - 150px)/2 + 215px);
  right:calc(50vw - 118px);
  background: #E9EFF2;


}

.ob-bottom-right--svg{
  background:#00809D;
}

.ob-bottom-left{
  border:3px solid #623AA3;
  /*bottom:calc(45vh - 118px);*/
  top:calc((100vh - 150px)/2 + 215px);
  left:calc(50vw - 118px);
  background: #F5F2FC;

}

.ob-bottom-left--svg{
  background:#623AA3;
}

.quotes-system-container{
  margin-top:20px;
  position: relative;
}

.quotes-shadow{
  height:200px;
  background: linear-gradient(to bottom, #ffffff 0%, transparent 100%);
}

.quotes{
  z-index: -1;
  position: absolute;
  top:0;
  height:calc(100vh - 244px);
  overflow-y:scroll;
  left:0;
  right:0;
  bottom:0;
  padding:50px 24px 24px 24px;
}

  .quotes::-webkit-scrollbar {
    display: none;
  }

.onboarding-quote{
  padding:24px;
  border-radius:16px;
  margin-bottom:24px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;

  .quotation{
    font-size: 18px;
    color:#313131;
    line-height: 1.3em;
    font-family: "Inter", serif;
  }

  .quote-author{
    margin-top:24px;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4em;
    letter-spacing: -0.05em;
  }

  .quote-voice{
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2em;
  }
}




.onboarding-spinner-avatar-center3{
  width:88px;
  height:88px;
  border-radius: 100%;
  border:4px solid #F0A613;
  text-align: center;
  background: #FFF9ED;
  top:256px;
  left: calc(50% - 44px);
  position: absolute;


}
.sub-icon3{
  width:32px;
  height:32px;
  background:#F0A613;
  color:white;
  padding:6px;
  border-radius:100%;
  position: absolute;
  bottom:-5px;
  right:-5px;
  fill:white;
}

.onboarding-spinner-avatar-center3--img{
  width:80px;
  height:80px;
  border-radius: 100%;
  border:4px solid white;

}

.onboarding-2-bottom{
  width:100%;
  margin-top:30px;
  overflow:hidden;
  height:calc(100vh - 480px);
  img{
    width:100%;
  }
}

.onbaording-7-top{
  width:200px;
  margin-top:100px;
  margin-bottom:20px;
  margin-left:calc(50% - 100px);

  img{
    width:100%;
  }
}


.assessment-lottie{
  width:300px;
  height:300px;
  margin-top:calc(50vh - 300px);
  margin-left:calc(50vw - 170px);
}

.result-icon{
  margin-top: 64px;
  padding: 8px;
  background: #F6F8FA;
  border-radius: 100%;
  svg{
    vertical-align: top;
    padding-top: 1px;
    width: 24px;
    height: 24px;
    color: #313131;
  }
}

.result-headline{
  margin-top: 24px;
  font-size: 20px;
  color:#313131;
  line-height: 1.2em;
  font-weight: 700;
  display: block;
}

.results-container{
  margin-top: 16px;
  padding: 24px;
  border: 1px solid #F6F8FA;
  border-radius: 24px;
  display: block;
}

.results-container-heading{
  line-height: 1.5em;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 600; /* semibold */
  color: #9EA3BA;
}

.results-container-description{
  margin-top: 8px;
  line-height: 1.5em;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500; /* medium */
  color: #313131;
}

.assessment2-container{
  width: 412px;
  margin-left: calc(50% - 206px);
}

.assessment2-heading{
  text-align: center;
  color:#313131;
  font-size: 24px;
  line-height: 1.2em;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.assessment2-subheading{
  text-align: center;
  margin-top:16px;
  margin-bottom:40px;
}

.assessment2-option{
  border-radius:16px;
  padding:32px;
  border:1px solid #F6F8FA;
  text-align: center;
  margin-bottom:16px;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 16px 2px;
  cursor:pointer;
  overflow:hidden;
}

  .assessment2-option:hover{
    border:1px solid #0086FC;
  }

  .assessment2-option-title{
    font-size: 18px;
    font-weight: 700;
    color:#313131;
    letter-spacing: -0.04em;
    line-height: 1em;
    margin-bottom:16px;
  }

  .assessment2-option-subtitle{
    color:#6B6F76;
    font-family: "Inter", serif;
    font-size: 16px;
    line-height: 1.4em;
  }


.assessment2-results-heading{
  text-align: center;
  color:#313131;
  font-size: 34px;
  line-height: 1.2em;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.assessment2-results-subheading{
  text-align: center;
  color:#0086FC;
  font-size: 34px;
  line-height: 1.2em;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom:40px;
}

.assessment2-results-box{
  padding:24px;
  border-radius:16px;
  border:1px solid #F6F8FA;
  font-size: 18px;
  font-weight:700;
  line-height: 1em;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  color:#6B6F76;
  position: relative;

  svg{
    background: #0086FC;
    width:20px;
    height:20px;
    color:#fff;
    border-radius:100%;
    position: absolute;
    right:24px;
    display: none;
  }
}

  .assessment2-results-box-active{
    box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 16px 2px;
    color:#313131;
  }

  .assessment2-results-dots{
    width:30px;
    height:30px;
    position: absolute;
    right:18px;
    top:18px;
    display:none;
  }

  .assessment2-results-meter-outer{
    height:8px;
    border-radius:8px;
    background:#E5E5E5;
    width:100%;
    margin-top:24px;
  }

    .assessment2-results-meter-inner{
      background:#0086FC;
      height:8px;
      border-radius:8px;
      width:0%;
    }

  .assessment-2-results-continue{
    display: block;
    display: none;

    bottom: 70px;
    background-color: #0086fc;
    border-radius: 16px;
    position: fixed;
    left: 24px;
    width: calc(100% - 48px);
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    text-decoration: none;
    z-index: 11;
  }


.assessment2-results-confirm{
  padding:24px;
  border-radius: 32px;
  background:#fff;
  position: fixed;
  z-index: 1;
  top:calc(50% - 100px);
  width:374px;
  left: calc(50vw - 187px);
  display:none;
}

.assessment2-results-overlay{
  background-color:rgba(4, 4, 15, 0.4);
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1;
  display:none;
}

  .assessment2-results-confirm-top{
    text-align: center;
    color:#6B6F76;
    font-family: "Inter", serif;
    font-size: 16px;
    line-height: 1.4em;
  }

  .assessment2-results-confirm-question{
    text-align: center;
    color:#313131;
    font-size: 32px;
    line-height: 1.1em;
    margin-top:12px;
    letter-spacing: -0.04em;
    font-weight: 700;
  }

  .assessment2-results-button{
    font-size: 18px;
    font-weight: 700;
    color: #313131;
    letter-spacing: -0.04em;
    line-height: 1em;
    padding:20px;
    width:calc(49% - 6px);
    display:inline-block;
    margin-top:40px;
    text-align: center;
    border-radius: 40px;
    background: #F6F8FA;
    cursor: pointer;
  }

@media (max-width: 520px){
  .assessment2-container{
    width: 92%;
    margin-left: 4%;
  }
}
.badge-spinner-bg{
  position:absolute;
  image-rendering:pixelated;
  left: -50vw;
  overflow: visible;
  top: -115vw;
  width: 200vw;
  height: 200vw;
  z-index: -2;
}

.badge-spinner-bg-gradient{
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,  /* Fully transparent until 25% */
    rgba(255, 255, 255, 0.5) 25%, /* Mid transition at 50% */
    rgba(255, 255, 255, 1) 100%  /* Fully white at the bottom */
  );
}

.profile-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.badge-unlock-top {
  flex: 1 1 calc(33.33% - 16px); /* Ensures 3 badges per row */
  max-width: calc(33.33% - 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge-unlock-icon-wrapper {
  position: relative;
  width: 100%; /* Ensures the wrapper scales */
  max-width: 120px; /* Prevents excessive scaling */
}

.badge-unlock-icon {
  width: 100%;
  height: auto;
}

.badge-milestone-unlock-count{
  position:absolute;
  width:fit-content;
  height:fit-content;
  left: 50%;
  transform: translate(-50%, -50%);
  top:47%;
  color:white;
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size:min(8vw, 50px);
  font-weight:700;
  text-align:center;
}

.badge-streak-unlock-count{
  position:absolute;
  width:fit-content;
  height:fit-content;
  left: 50%;
  transform: translate(-50%, -50%);
  top:65%;
  color:white;
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size:min(7vw, 45px);
  font-weight:700;
  text-align:center;
}

  .badge-color{
    color:white;
  }

  .badge-gray{
    color:#E8E8F1;
  }

  .badge-name-gray{
    color:rgb(231, 232, 242);
  }

  .badge-name-color{
    color:rgb(49, 49, 49);
  }

.badge-unlock-icon-name{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:500;
  margin-top:0px;
  white-space:nowrap;
}

.badge-unlock-title{
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size:28px;
  font-weight:700;
  color:rgb(49, 49, 49);
  letter-spacing:-0.04em;
  width:100%;
  text-align:center;
  margin-top:24px;
}

.badge-unlock-data{
  margin-top:20px;
  background:white;
  border-radius:24px;
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-wrap:nowrap;
}

.badge-unlock-data-top{
  display:flex;
  width:100%;
  justify-content:space-between;
  flex-wrap:nowrap;
  align-items:center;

}

.badge-unlock-data-type{
  color:rgb(107, 111, 118);
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.5em;
  width:100%;
}

.badge-unlock-data-status, .badge-unlock-data-status2{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  align-items:center;
  justify-content:center;
  width:fit-content;
  padding:6px 10px 6px 6px;
  background:rgb(233, 241, 254);
  border-radius:8px;
  color:rgb(45, 103, 246);
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:11px;
  font-weight:500;
}

  .badge-unlock-data-status2{
    background:rgb(246, 248, 250);
    color:rgb(158, 163, 186);
  }

.badge-unlock-data-status-icon{
  width:14px;
  height:14px;
}

.badge-unlock-data-bottom{
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size:24px;
  font-weight:600;
  color:rgb(49, 49, 49);
  letter-spacing:-0.04em;
}

.badge-unlock-description{
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  text-align: center;
  color: rgb(107, 111, 118);
  margin-top:24px;
}


.badge-unlock-next{
  background:white;
  border-radius:50%;
  box-shadow:rgba(0, 0, 0, 0.15) 0px 16px 24px -4px;
  padding:24px;
}

.badge-unlock-next-icon{
  width:64px;
  height:64px;
  color:rgb(0, 134, 252);
}

.profile-badge-row{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  justify-content:space-between;
  align-items:center;
  margin-top:24px;
}

.milestone-title-dd{
  display:flex;
  width:100%;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
}

.milestone-title-dd-text{
  font-size: 24px;
  font-weight: 700;
  color: rgb(49, 49, 49);
  letter-spacing: -0.04em;
  line-height: 1.2em;
}

.milestone-title-dd-icon{
  width:18px;
  height:18px;
  stroke-width:2;
}
.chat-top{
  width: 100vw;
  margin-left: -24px;
  margin-top: -75px;
}

.chat-index-content{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  position: absolute;
  width: calc(100% - 48px);
  bottom: 34px;
}

.chat-widget-container{
  width:100vw;
  height:calc(100vh - 96px);
  position:relative;
}

.chat-spinner{
  height:96px;
  width:96px;
  position:relative;
}

  .chat-spinner-bg{
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><path d="M 80.05 55.727 C 80.017 55.782 79.962 55.81 79.953 55.848 C 79.761 56.688 79.354 57.417 78.747 58.017 C 78.077 58.677 77.274 59.107 76.332 59.251 C 75.373 59.397 74.437 59.311 73.565 58.879 C 72.752 58.476 72.111 57.878 71.639 57.083 C 71.11 56.192 70.963 55.231 71.061 54.236 C 71.148 53.355 71.509 52.568 72.087 51.879 C 72.476 51.415 72.938 51.052 73.463 50.776 C 73.979 50.505 74.535 50.326 75.124 50.302 C 75.797 50.276 76.466 50.286 77.106 50.548 C 77.6 50.751 78.065 50.993 78.476 51.345 C 79.252 52.009 79.752 52.83 79.964 53.829 C 79.968 53.849 79.998 53.863 80.033 53.865 C 80.05 54.468 80.05 55.085 80.05 55.727 Z M 0.05 24.373 C 0.083 24.318 0.138 24.29 0.147 24.252 C 0.334 23.409 0.747 22.683 1.354 22.083 C 2.022 21.423 2.826 20.993 3.768 20.85 C 4.965 20.667 6.088 20.862 7.094 21.553 C 8.143 22.272 8.793 23.264 8.999 24.526 C 9.212 25.834 8.939 27.04 8.126 28.087 C 7.422 28.995 6.486 29.564 5.34 29.749 C 4.383 29.903 3.446 29.813 2.573 29.383 C 1.759 28.981 1.099 28.394 0.645 27.588 C 0.411 27.172 0.223 26.742 0.136 26.271 C 0.133 26.251 0.102 26.237 0.067 26.235 C 0.05 25.632 0.05 25.015 0.05 24.373 Z M 80.05 26.227 C 80.017 26.282 79.962 26.31 79.953 26.348 C 79.761 27.188 79.355 27.917 78.747 28.517 C 78.077 29.177 77.274 29.607 76.332 29.751 C 75.373 29.897 74.437 29.811 73.566 29.379 C 72.753 28.976 72.112 28.378 71.639 27.583 C 71.11 26.692 70.963 25.732 71.061 24.736 C 71.148 23.855 71.509 23.069 72.087 22.379 C 72.475 21.915 72.938 21.552 73.463 21.276 C 73.978 21.005 74.534 20.826 75.124 20.802 C 75.796 20.776 76.466 20.786 77.105 21.048 C 77.615 21.257 78.088 21.514 78.512 21.878 C 79.165 22.437 79.596 23.127 79.863 23.932 C 79.912 24.082 79.965 24.231 80.033 24.365 C 80.05 24.968 80.05 25.585 80.05 26.227 Z M 0.05 53.873 C 0.083 53.818 0.138 53.79 0.147 53.752 C 0.332 52.917 0.738 52.197 1.336 51.601 C 2.014 50.926 2.83 50.487 3.793 50.348 C 4.974 50.177 6.074 50.367 7.074 51.043 C 8.139 51.765 8.788 52.759 8.998 54.027 C 9.215 55.335 8.938 56.541 8.126 57.588 C 7.422 58.496 6.484 59.063 5.339 59.248 C 4.374 59.403 3.431 59.31 2.55 58.87 C 1.729 58.459 1.05 57.872 0.629 57.042 C 0.428 56.646 0.306 56.21 0.147 55.793 C 0.136 55.765 0.105 55.744 0.067 55.735 C 0.05 55.132 0.05 54.515 0.05 53.873 Z M 52.854 0.6 C 54.045 0.155 55.208 0.174 56.365 0.651 C 56.911 0.877 57.394 1.208 57.797 1.633 C 58.436 2.307 58.861 3.101 59.002 4.035 C 59.2 5.345 58.939 6.55 58.12 7.595 C 57.412 8.499 56.478 9.07 55.329 9.249 C 54.364 9.4 53.424 9.306 52.543 8.865 C 51.72 8.452 51.079 7.845 50.611 7.041 C 50.096 6.155 49.958 5.195 50.063 4.21 C 50.157 3.332 50.52 2.545 51.106 1.86 C 51.586 1.298 52.17 0.901 52.854 0.6 Z M 50.334 73.639 C 50.565 73.028 50.909 72.505 51.363 72.075 C 52.221 71.261 53.233 70.805 54.444 70.791 C 55.176 70.783 55.875 70.898 56.523 71.216 C 57.338 71.617 57.991 72.208 58.456 73.006 C 58.757 73.523 58.976 74.075 59.032 74.655 C 59.111 75.47 59.075 76.287 58.722 77.061 C 58.475 77.605 58.173 78.111 57.744 78.522 C 57.066 79.172 56.268 79.608 55.327 79.75 C 54.36 79.896 53.423 79.805 52.541 79.363 C 51.717 78.951 51.078 78.341 50.61 77.538 C 50.094 76.653 49.982 75.695 50.06 74.706 C 50.088 74.351 50.23 74.004 50.334 73.639 Z M 22.612 71.863 C 23.215 71.319 23.914 70.989 24.687 70.859 C 25.5 70.722 26.319 70.743 27.105 71.05 C 27.61 71.247 28.075 71.506 28.494 71.861 C 29.284 72.531 29.786 73.374 29.978 74.375 C 30.158 75.31 30.096 76.242 29.692 77.132 C 29.455 77.654 29.155 78.136 28.739 78.525 C 27.877 79.333 26.868 79.795 25.658 79.809 C 24.925 79.818 24.229 79.698 23.577 79.385 C 22.934 79.076 22.387 78.631 21.949 78.058 C 21.47 77.43 21.154 76.72 21.067 75.947 C 20.978 75.149 21.026 74.344 21.351 73.583 C 21.572 73.065 21.88 72.603 22.248 72.182 C 22.349 72.066 22.481 71.978 22.612 71.863 Z M 30.05 4.8 C 30.143 7.171 28.045 9.526 25.162 9.309 C 23.142 9.156 20.833 7.36 21.045 4.4 C 21.189 2.39 22.985 0.076 25.963 0.296 C 28.04 0.45 30.105 2.275 30.05 4.8 Z" fill="rgba(49, 49, 49, 0.15)"></path></svg>');
    background-size:100% 100%;
    will-change:transform;
    height:80px;
    width:80px;
    position:absolute;
    overflow:visible;
    left:calc(50% - 40px);
    top:calc(50% - 40px);
    animation: chat-spin-left 20s linear infinite;
  }

  .chat-spinner-fg{
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"><path d="M 16.451 24.045 C 16.141 23.276 16.04 22.497 16.042 21.688 C 16.044 20.775 16.252 19.921 16.652 19.114 C 17.196 18.013 18.015 17.168 19.078 16.55 C 20.222 15.885 21.467 15.686 22.751 15.814 C 23.917 15.929 24.965 16.389 25.882 17.148 C 27.03 18.099 27.744 19.306 27.986 20.758 C 28.179 21.914 28.076 23.066 27.601 24.165 C 27.24 25.002 26.725 25.729 26.044 26.324 C 25.23 27.034 24.294 27.512 23.217 27.704 C 21.869 27.944 20.57 27.809 19.345 27.195 C 18.259 26.65 17.402 25.842 16.807 24.774 C 16.678 24.543 16.569 24.301 16.451 24.045 Z" fill="rgb(49, 49, 49)"></path><path d="M 58.05 27.8 C 56.293 27.826 54.845 27.171 53.663 25.931 C 52.427 24.634 51.923 23.062 52.054 21.288 C 52.168 19.733 52.823 18.423 53.963 17.368 C 55.263 16.165 56.821 15.671 58.574 15.804 C 60.128 15.922 61.438 16.579 62.491 17.722 C 63.691 19.024 64.169 20.584 64.05 22.337 C 63.861 25.116 61.416 27.86 58.05 27.8 Z" fill="rgb(49, 49, 49)"></path><path d="M 26.815 54.09 C 27.038 54.445 27.275 54.774 27.453 55.132 C 27.839 55.908 28.039 56.73 28.058 57.607 C 28.08 58.62 27.902 59.578 27.451 60.482 C 26.902 61.581 26.088 62.429 25.026 63.048 C 23.883 63.713 22.638 63.913 21.354 63.787 C 20.188 63.672 19.139 63.214 18.222 62.455 C 17.149 61.569 16.447 60.451 16.165 59.107 C 15.902 57.857 15.993 56.612 16.509 55.417 C 16.867 54.587 17.38 53.87 18.054 53.279 C 18.867 52.567 19.803 52.088 20.881 51.897 C 22.228 51.657 23.526 51.793 24.753 52.405 C 25.51 52.782 26.175 53.292 26.697 53.97 C 26.727 54.01 26.766 54.042 26.815 54.09 Z" fill="rgb(49, 49, 49)"></path><path d="M 61.76 53.035 C 62.313 53.483 62.778 53.986 63.147 54.574 C 63.592 55.283 63.907 56.048 63.993 56.884 C 64.046 57.401 64.095 57.932 64.033 58.443 C 63.965 59.004 63.808 59.564 63.617 60.098 C 63.3 60.978 62.742 61.714 62.042 62.325 C 61.228 63.035 60.292 63.512 59.214 63.704 C 57.866 63.945 56.567 63.808 55.343 63.194 C 54.257 62.649 53.413 61.833 52.8 60.774 C 52.138 59.63 51.936 58.385 52.063 57.101 C 52.178 55.935 52.638 54.886 53.397 53.969 C 54.348 52.821 55.555 52.106 57.008 51.864 C 58.164 51.671 59.326 51.752 60.411 52.258 C 60.875 52.474 61.303 52.765 61.76 53.035 Z" fill="rgb(49, 49, 49)"></path><path d="M 41.156 9.149 C 41.769 9.233 42.309 9.468 42.818 9.76 C 43.547 10.178 44.16 10.735 44.624 11.446 C 45.079 12.143 45.391 12.887 45.504 13.72 C 45.716 15.278 45.38 16.7 44.422 17.942 C 43.597 19.011 42.507 19.699 41.164 19.951 C 39.634 20.237 38.207 19.993 36.915 19.1 C 35.7 18.26 34.934 17.116 34.651 15.663 C 34.353 14.133 34.61 12.706 35.501 11.414 C 36.34 10.198 37.488 9.448 38.938 9.146 C 39.649 8.998 40.358 9.033 41.071 9.11 C 41.093 9.112 41.113 9.135 41.156 9.149 Z" fill="rgba(49, 49, 49, 0.5)"></path><path d="M 18.689 36.366 C 19.004 36.863 19.338 37.33 19.601 37.835 C 19.898 38.405 20.027 39.032 20.052 39.68 C 20.082 40.495 20.017 41.294 19.701 42.057 C 19.478 42.596 19.196 43.097 18.827 43.554 C 18.267 44.247 17.575 44.755 16.766 45.113 C 16.184 45.37 15.579 45.525 14.941 45.551 C 14.117 45.585 13.31 45.519 12.538 45.201 C 12.022 44.988 11.538 44.724 11.098 44.376 C 10.373 43.804 9.844 43.081 9.474 42.244 C 9.221 41.672 9.073 41.069 9.048 40.439 C 9.016 39.615 9.058 38.797 9.408 38.04 C 9.639 37.54 9.915 37.05 10.236 36.603 C 10.77 35.86 11.507 35.353 12.339 34.985 C 12.92 34.728 13.526 34.572 14.165 34.549 C 14.979 34.52 15.79 34.552 16.539 34.905 C 17.038 35.141 17.52 35.421 17.983 35.721 C 18.242 35.889 18.447 36.14 18.689 36.366 Z" fill="rgba(49, 49, 49, 0.5)"></path><path d="M 64.036 45.366 C 63.286 45.154 62.635 44.803 62.044 44.323 C 61.146 43.594 60.561 42.665 60.236 41.564 C 60.009 40.797 60.007 40.017 60.097 39.228 C 60.194 38.365 60.52 37.588 61.009 36.892 C 61.85 35.696 62.99 34.927 64.44 34.65 C 65.971 34.357 67.398 34.611 68.688 35.502 C 69.904 36.341 70.666 37.488 70.95 38.942 C 71.274 40.595 70.941 42.114 69.917 43.447 C 69.093 44.519 67.998 45.194 66.656 45.454 C 65.78 45.623 64.915 45.588 64.036 45.366 Z" fill="rgba(49, 49, 49, 0.5)"></path><path d="M 34.55 66.042 C 34.515 65.17 34.544 64.324 34.907 63.543 C 35.14 63.043 35.413 62.552 35.735 62.104 C 36.268 61.362 37.005 60.853 37.838 60.485 C 38.419 60.229 39.026 60.075 39.664 60.048 C 40.489 60.015 41.307 60.06 42.064 60.409 C 42.565 60.639 43.053 60.918 43.501 61.24 C 44.244 61.773 44.75 62.513 45.118 63.344 C 45.371 63.917 45.526 64.516 45.551 65.147 C 45.585 65.979 45.542 66.807 45.19 67.571 C 44.956 68.079 44.664 68.569 44.338 69.024 C 43.81 69.761 43.076 70.262 42.251 70.622 C 41.678 70.872 41.079 71.029 40.447 71.052 C 39.623 71.081 38.816 71.02 38.043 70.702 C 37.526 70.49 37.042 70.225 36.601 69.878 C 35.875 69.307 35.348 68.583 34.974 67.746 C 34.736 67.213 34.598 66.649 34.55 66.042 Z" fill="rgba(49, 49, 49, 0.5)"></path></svg>');
    background-size:100% 100%;
    will-change:transform;
    height:80px;
    width:80px;
    position:absolute;
    overflow:visible;
    left:calc(50% - 40px);
    top:calc(50% - 40px);
    animation: chat-spin-right 20s linear infinite;
  }

  @keyframes chat-spin-left {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
  }

  @keyframes chat-spin-right {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .chat-spinner-dot{
    height:24px;
    width:24px;
    background:rgb(49, 49, 49);
    border-radius:50%;
    position:absolute;
    left:calc(50% - 12px);
    top:calc(50% - 12px);
  }

.chat-heading{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:26px;
  font-weight:600;
  color:rgb(49, 49, 49);
  letter-spacing: -0.02em;
  text-align:center;
  width:100%;
  line-height:30px;
}

.chat-input-wrapper{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex-wrap:nowrap;
  align-items:center;
  width:100%;
  position:relative;
}

.chat-input {
  border: none;
  border-radius: 24px;
  box-sizing: border-box;
  /* line-height: 1.4em; */
  padding: 16px 54px 0px 20px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: rgb(49, 49, 49);
  font-size: 14px;
  font-weight: 400;
  background: white;
  width: 100%;
  outline: none;
  resize: none;
  overflow: hidden;
  height:54px;
  min-height: 40px;
  max-height: 150px;
}

.send-button {
  position: absolute;
  right: 10px;
  bottom: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  color: rgb(49, 49, 49);
  padding: 4px;
}

.send-icon{
  height:32px;
  width:32px;
  color:rgb(49, 49, 49);
  stroke-width:1;
}


  .chat-input::placeholder{
    /* border:1px solid rgb(246, 248, 250); */
    color:rgb(158, 163, 186);
  }

.chat-input-description{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  color:rgb(107, 111, 118);
  font-size:10px;
  line-height:1.5em;
}

.chat-suggestions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  width: 100vw;
  padding: 0 24px;
  overflow-x: scroll;
  margin-top: 100px;
  min-height:132px;
}

.chat-suggestions::-webkit-scrollbar {
  display: none;
}

.chat-suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  height: 110px;
  flex: 0 0 auto;
  width: 70vw;
  background: rgb(246, 248, 250);
  border-radius: 20px;
  overflow: hidden;
}


/* Title: truncate after one line */
.chat-suggestion-title {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5em;
  color: rgb(49, 49, 49);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description: truncate after two lines */
.chat-suggestion-text {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
  color: rgb(107, 111, 118);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.chat-menu-bg{
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(4, 4, 15, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.chat-menu-bg.open {
  opacity: 1;
  pointer-events: auto;
}

.chat-menu{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  right:min(10vw, 75px);
  bottom:0;
  overflow-y:scroll;
  background:white;
  padding:64px 16px 64px 16px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

  .chat-menu.open {
    transform: translateX(0);
  }

  .chat-menu::-webkit-scrollbar {
    display: none;
  }

.chat-menu-label{
  padding:12px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:1.5em;
  color:rgb(49, 49, 49);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.chat-menu-button{
  width:36px;
  height:36px;
  padding:8px;
  border-radius: 100%;
  color:rgb(49, 49, 49);
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
  background:white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-menu-date{
  padding:5px 12px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.5em;
  color:rgb(207, 207, 207);
}

.chat-menu-title{
  background:white;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.5em;
  color:rgb(49, 49, 49);
  padding:5px 12px;
}

.chat-menu-title-active{
  border-radius:12px;
  background:rgb(246, 248, 250);
}

.chat-menu-line{
  background:rgb(207, 207, 207);
  height:1px;
  width:100%;
  margin-top:16px;
  flex-shrink:0;
}

/* Pinned input at bottom after Enter */
.chat-input-wrapper.pinned-bottom {
  position: fixed;
  bottom: 32px;
  width:calc(100% - 72px);
}

.chat-messages {
  width:100%;
  margin-top:12px;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

#messages-container {
  position: fixed;
  top: 130px;
  bottom: 92px;
  width: calc(100% - 48px);
  padding-bottom: 24px;
  left:24px;
}

#messages-container::-webkit-scrollbar {
  display: none;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  font-family: "Inter", sans-serif;
}

.chat-message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dadada;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #333;
}

.chat-ai-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow:hidden;
  object-fit:cover;
}

.chat-message-ai-text {
  border-radius: 8px;
  line-height: 1.5;
  width: 100%;
}

  .chat-message-ai-text p{
    margin-bottom:16px;
  }

.chat-message-text {
  background: rgb(246, 248, 250);
  border-radius: 20px;
  padding: 12px 16px;
  line-height: 1.4em;
  max-width: 72%;
  color:rgb(49, 49, 49);
}

.chat-message-user {
  flex-direction: row-reverse;
}

/* Style the ordered list */
.chat-message-ai-text ol {
  margin: 1em 0;
  padding-inline-start: 18px;
  list-style: decimal;
}

/* .chat-message-ai-text ul ol {
  padding-inline-start: 0px;
  list-style: decimal;
} */

.chat-message-ai-text ul {
  padding-inline-start: 18px;
}

.chat-message-ai-text li {
  margin-bottom: 1em; /* spacing between items */
  padding-left: 6px;
}

.chat-message-ai-text li strong {
  display: block;
  font-size: 1em;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.3em;
}

.chat-message-ai-text li p {
  margin-bottom: 8px; /* reset default paragraph spacing here if needed */
  color: #555;
}

#scroll-indicator {
  position: fixed;
  bottom: 134px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(49, 49, 49);
  color: #fff;
  padding: 6px 12px;
  border-radius: 24px;
  cursor: pointer;
  z-index: 10;
  font-size: 14px;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
}

  .scroll-icon{
    height:24px;
    width:24px;
    color:white;
    stroke-width:3;
  }
.form-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%; }
  .form-container input {
    border-radius: 16px;
    padding: 18px;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    border: none;
    background-color: #F6F8FA;
    color: #313131; }
    .form-container input::placeholder {
      color: #CFCFCF;
      font-weight: 500; }

.field {
  display: flex;
  flex-direction: column;
  /*flex: 1 1 auto;*/
  gap: 11px; }
  .field p {
    width: 100%;
    height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    font-weight: 400;
    font-style: normal;
    font-family: "Inter", "Inter Placeholder", sans-serif;
    color: var(--Light_Text, #9ea3ba);
    font-size: 14px;
    letter-spacing: -0.04em;
    line-height: 1;
    text-align: left; }
  .field label {
    width: 100%;
    font-weight: 700;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: var(--Dark, #313131);
    font-size: 16px;
    letter-spacing: -0.04em;
    line-height: 1;
    text-align: left; }
  .field.legal {
    align-items: center;
    padding-top: 24px; }
  .field.legal > p {
    width: 342px;
    text-align: center;
    height: auto;
    font-weight: 400;
    font-style: normal;
    font-family: "Inter", "Inter Placeholder", sans-serif;
    color: var(--Light_Text, #9ea3ba);
    font-size: 14px;
    letter-spacing: 0em;
    line-height: 1.4;
    text-align: center; }
    .field.legal > p a {
      color: var(--Light_Text, #9ea3ba); }

.devise--btn {
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px 24px 20px 24px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  align-content: center;
  flex-wrap: nowrap;
  gap: 10;
  border-radius: 40px;
  cursor: pointer;
  font-weight: 700; }
  .devise--btn-container {
    display: flex;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 390px;
    flex-direction: column;
    gap: 16px; }
  .devise--btn.gray {
    color: white;
    background-color: rgba(255, 255, 255, 0.2); }
  .devise--btn.black {
    color: white;
    background-color: #313131; }
  .devise--btn.blank {
    color: white;
    background-color: none; }

.btn--remove-default-style {
  position: absolute;
  bottom: 24px;
  width: calc(100% - 48px);
  border: none;
  font-weight: 700 !important;
  font: inherit;
  cursor: pointer;
  margin-top: 30%;
  outline: inherit;
  border-radius: 40px !important; }

.devise-sso-line {
  height: 1px;
  width: 100%;
  background: #444; }

.devise-giant-sso {
  font-size: 12px;
  font-weight: 600;
  margin-top: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white !important;
  text-decoration: none;
  padding: 20px 24px 20px 24px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 30px; }

.devise-giant-sso-dark {
  font-size: 12px;
  font-weight: 600;
  margin-top: 20px;
  background-color: black;
  color: white !important;
  text-decoration: none;
  padding: 20px 24px 20px 24px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 30px;
  display: inline-block;
  text-align: center; }

.devise--welcome-container {
  display: flex;
  place-items: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px; }
  .devise--welcome-container--header img {
    width: 138px;
    height: 30px; }
  .devise--welcome-container--content {
    display: flex;
    place-items: center;
    flex-direction: column;
    gap: 32px;
    justify-self: flex-end; }
    .devise--welcome-container--content--header {
      display: flex;
      place-items: center;
      flex-direction: column;
      gap: 16px; }
      .devise--welcome-container--content--header h1 {
        font-weight: 700;
        font-style: normal;
        font-family: "Manrope", "Manrope Placeholder", sans-serif;
        color: white;
        font-size: 48px;
        line-height: 1;
        letter-spacing: -0.04em;
        text-align: center; }
      .devise--welcome-container--content--header div {
        display: flex;
        place-content: center; }
        .devise--welcome-container--content--header div svg {
          width: 24px;
          height: 24px;
          color: var(--Background_80_, rgba(255, 255, 255, 0.8));
          transform: scale(1, 1) scale(-1, 1);
          fill: var(--Background_80_, rgba(255, 255, 255, 0.8)); }
      .devise--welcome-container--content--header h2 {
        display: flex;
        width: auto;
        height: auto;
        white-space: pre;
        font-style: normal;
        font-weight: 400;
        font-family: "Manrope", "Manrope Placeholder", sans-serif;
        color: var(--Background_80_, rgba(255, 255, 255, 0.8));
        font-size: 24px;
        letter-spacing: -0.04em;
        line-height: 1; }
  .devise--welcome-container::-webkit-scrollbar {
    display: none; }

.devise--sign-in-container, .devise--sign-up-container, .modal-attr {
  display: none;
  place-items: center;
  width: 100%;
  height: calc(100% - 138px);
  min-width: 390px;
  flex-direction: column;
  padding: 24px;
  padding-bottom: auto;
  overflow: scroll;
  position: absolute;
  background-color: white;
  top: 100%;
  left: 0;
  z-index: 10;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  gap: 32px; }
  .devise--sign-in-container h2, .devise--sign-up-container h2, .modal-attr h2 {
    padding-top: 48px;
    width: 342px;
    height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    font-weight: 700;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: #313131;
    font-size: 32px;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-align: center; }
  .devise--sign-in-container::-webkit-scrollbar, .devise--sign-up-container::-webkit-scrollbar, .modal-attr::-webkit-scrollbar {
    display: none; }

.devise--policy-container, .devise--terms-container {
  display: none;
  place-items: center;
  width: 100%;
  height: calc(100% - 138px);
  min-width: 390px;
  flex-direction: column;
  padding: 24px;
  padding-bottom: auto;
  overflow: scroll;
  position: absolute;
  background-color: white;
  top: 138px;
  left: 100%;
  z-index: 10;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  gap: 32px; }
  .devise--policy-container .devise--terms-container-top, .devise--policy-container .devise--policy-container-top, .devise--terms-container .devise--terms-container-top, .devise--terms-container .devise--policy-container-top {
    display: flex;
    justify-content: space-between;
    align-content: center;
    width: 100%; }
    .devise--policy-container .devise--terms-container-top h2, .devise--policy-container .devise--policy-container-top h2, .devise--terms-container .devise--terms-container-top h2, .devise--terms-container .devise--policy-container-top h2 {
      width: 342px;
      height: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-word;
      font-weight: 700;
      font-style: normal;
      font-family: "Manrope", "Manrope Placeholder", sans-serif;
      color: #313131;
      font-size: 32px;
      letter-spacing: -0.04em;
      line-height: 1.1; }
    .devise--policy-container .devise--terms-container-top div, .devise--policy-container .devise--policy-container-top div, .devise--terms-container .devise--terms-container-top div, .devise--terms-container .devise--policy-container-top div {
      display: flex;
      place-items: center; }
  .devise--policy-container::-webkit-scrollbar, .devise--terms-container::-webkit-scrollbar {
    display: none; }

.modal--bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3;
  display: none; }

.sign-in-error {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ee4444;
  border-radius: 24px;
  padding: 8px 10px 8px 8px;
  gap: 4px;
  color: white;
  font-size: 14px;
  font-weight: 400;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  width: fit-content;
  align-self: center; }

.sign-in-error-icon {
  fill: white;
  color: #ee4444;
  width: 20px;
  height: 20px; }

.sign-in-forgot-password-link, .sign-in-login-back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 8px 8px;
  gap: 4px;
  color: #313131;
  font-size: 14px;
  font-weight: 400;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  width: fit-content;
  align-self: center; }

.sign-in-header {
  padding-top: 48px;
  padding-bottom: 48px;
  height: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  font-weight: 700;
  font-style: normal;
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  color: #313131;
  font-size: 32px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-align: center !important;
  width: 100% !important; }

.forgot-password-button {
  border: none;
  font-weight: 700 !important;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  border-radius: 40px !important;
  color: white !important;
  background: #313131 !important;
  text-align: center !important; }

.sign-in-block, .forgot-password-block {
  width: 100%; }

.reset-password-block {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  place-items: center;
  width: 100%;
  min-width: 390px;
  flex-direction: column;
  padding: 24px;
  padding-bottom: auto;
  overflow: scroll;
  background-color: white;
  gap: 32px; }
.explore-row-title{
  font-size: 24px;
  font-weight: 700;
  color:#313131;
  letter-spacing: -.04em;
  margin-bottom:24px;
}

.explore-row{
  overflow-y: scroll;
  width:100vw;
  padding-left:24px;
  padding-right:24px;
  white-space: nowrap;
  margin-left:-24px;
  margin-bottom:48px;
  padding-bottom:16px;

  a{
    text-decoration: none;
  }
}

  .explore-row::-webkit-scrollbar {
    display: none;
  }

.album-tile{
  width:260px;
  height:280px;
  border-radius:24px;
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  padding:0 16px 16px 16px;
  background-color: #F3EFEA;
  margin-right:40px;
  white-space: initial;
  color:#313131;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  position: relative;

    .album-tile-image{
      text-align: center;
      img{
        margin-bottom:0px;
        height:170px;
      }
    }

    .album-title{
      font-size: 16px;
      line-height: 1.2em;
      font-weight: 700;
      letter-spacing: -.04em;
      margin-bottom:8px;
      height:40px;
      overflow: hidden;
    }

    .album-subtitle{
      font-size: 14px;
      line-height: 1.3em;
      font-family: "Inter", sans-serif;
      height:37px;
    }
}

  .album-tile-small{
    height:200px;
    background:white;
    padding-top:16px;

    .album-title{
      height:80px;
      font-size: 18px;
    }
  }

  .album-tile-bottom{
    position: absolute;
    bottom:24px;
    color: #22AA99;
    line-height: 1em;
    font-size: 14px;
    font-weight: 600;
    font-family: "Inter", serif;
    width:calc(100% - 32px);

    .album-time{
      float:right;
      color:#9EA3BA;
      font-size: 12px;
      font-weight: 500;
    }
  }

    .album-tile-bottom--svg{
      color: white;
      height:16px;
      width:16px;
      margin-right:4px;
      vertical-align: middle;
      margin-top:-2px;
      background:#22AA99;
      border-radius:100%;
      padding:2.5px;
    }

.category-top-bg{
  height:295px;
  width:100%;
  position: absolute;
  top:0;
  left:0;
  background-color:#F2F0E9;
  overflow: hidden;
  z-index:-1;

  img{
    width:76%;
    margin-top:98px;
    margin-left:12%;
  }
}


.category-album-count{
  margin-top:224px;
  margin-bottom:16px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #F6F8FA;
  display: inline-block;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
  font-size: 12px;
  font-family: "Inter", sans-serif;
  color:#313131;
  line-height: 1.2em;
  font-weight: 500;
}

  .category-album-count-icon{
    color:#313131;
    fill:#313131;
    width:14px;
    height:14px;
    margin-right: 6px;
    vertical-align: top;
  }

.explore-button-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:center;
  gap:12px;
  margin-bottom:50px;
}

  .explore-button{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    justify-content:center;
    gap:8px;
    background:rgb(246, 248, 250);
    border-radius:24px;
    padding:14px 24px;
    width:50%;
    font-family:"Manrope", "Manrope Placeholder", sans-serif;
    color:rgb(49, 49, 49);
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.04em;
  }

  .explore-button-icon{
    border:1px dashed rgb(207, 207, 207);
    border-radius:50%;
    width:20px;
    height:20px;
    padding:4px;
  }

.explore-journey-headline{
  color: #313131;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.04em;
  line-height: 1em;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:space-between;
}

.explore-count-tag{
  box-shadow:rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  background:white;
  border-radius:8px;
  border:1px solid rgb(246, 248, 250);
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:500;
  padding:6px 12px 6px 8px;
  color:rgb(49, 49, 49);
  letter-spacing: 0;
}

  .explore-count-tag-icon{
    width:14px;
    height:14px;
    color:rgb(49, 49, 49);
  }

.explore-learn{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

  .explore-learn-box{
    border-radius:24px;
    padding:16px;
    height:208px;
    width:calc(50% - 8px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    gap:4px;
    position:relative;
  }

    .explore-learn-box-title{
      font-family:"Manrope", "Manrope Placeholder", sans-serif;
      font-size:18px;
      font-weight:600;
      letter-spacing:-0.04em;
      color:rgb(49, 49, 49);
      line-height:1.1em;
      width:100%;
      text-align:left;
    }

    .explore-learn-box-img{
      width:100%;
      margin-top:-20px;
    }

    .explore-learn-your-voice-label{
      position: absolute;
      top: 16px;
      right:16px;
      background:#fff;
      border-radius:8px;
      padding:8px 10px;
      border:1px solid #F6F8FA;
      font-family:"Inter", "Inter Placeholder", sans-serif;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 1em;
      color:#313131;
      font-weight: 600;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
    }

.text-experience-category{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:500;
  color:rgb(158, 163, 186);
  margin-top:32px;
}

.text-experience-title{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.04em;
  color:rgb(49, 49, 49);
  margin-top:12px;
  line-height: 1.4em;
}

.text-experience-duration{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:300;
  color:rgb(158, 163, 186);
  margin-top:24px;
}


.text-experience-player{
  width:100%;
  background:white;
  padding:16px;
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  border-radius:16px;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:12px;
}

  .text-experience-player-button{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgb(0, 134, 252);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

    .text-experience-player-button-icon{
      width:20px;
      height:20px;
    }

  .text-experience-player-right{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex-wrap:nowrap;
    width:100%;
  }

    .text-experience-player-title{
      font-family:"Manrope", "Manrope Placeholder", sans-serif;
      font-size:16px;
      font-weight:600;
      letter-spacing:-0.04em;
      color:rgb(49, 49, 49);
    }

    .text-experience-player-bar-wrapper{
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
      height:8px;
    }

      .text-experience-player-bar{
        width:100%;
        background:rgb(246, 248, 250);
        border-radius:40px;
        height:8px;
        position:relative;
        overflow:hidden;
      }

        .text-experience-player-bar-inner{
          background:rgb(0, 134, 252);
          position:absolute;
          left:0;
          top:0;
          height:8px;
        }

        .text-experience-player-duration{
          font-family:"Inter", "Inter Placeholder", sans-serif;
          font-size:12px;
          font-weight:300;
          color:rgb(158, 163, 186);
        }

.text-experience-track{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:16px;
  font-weight:300;
  color:#6b6f76;
  margin-top:20px;
  line-height:1.5em;
}


.category-progress-box{
  padding:16px;
  background:#fff;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .05);
  border-radius:16px;
  margin-bottom: 24px;
}

  .category-progress-icon{
    width:48px;
    height:48px;
    padding:12px;
    color: #0086FC;
    background: #F6F8FA;
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  .category-progress-right{
    display: inline-block;
    width: calc(100% - 70px);
    margin-left:16px;
    vertical-align: middle;
  }

    .category-progress-title{
      font-size: 16px;
      font-weight: 700;
      color:#313131;
      letter-spacing: -0.04em;
      line-height: 1em;
    }

    .category-progress-subtitle{
      font-size: 12px;
      font-weight: 500;
      color:#9EA3BA;
      letter-spacing: 0em;
      line-height: 1em;
      margin-top:8px;
      font-family:"Inter", "Inter Placeholder", sans-serif;
    }

    .category-progress-meter-outer{
      background: #F6F8FA;
      height:14px;
      width: calc(100% - 50px);
      display: inline-block;
      border-radius:7px;
      margin-top:12px;
    }

      .category-progress-meter-inner{
        background: #F6F8FA;
        height:14px;
        width: 0px;
        border-radius:7px;
        background:#0086FC
      }

    .category-progress-percent{
      font-size: 12px;
      color:#9EA3BA;
      font-weight: 500;
      display: inline-block;
      font-family:"Inter", "Inter Placeholder", sans-serif;
      vertical-align: top;
      margin-top:7px;
      margin-left:8px;

    }
.flow-modal{
  box-sizing: border-box;
  padding:100px 24px 24px 24px;
  position: absolute;
  width:100vw;
  top:0;
  bottom:0;
  overflow: hidden;
}

  .flow-modal::-webkit-scrollbar {
    display: none;
  }


  .paywall-close{
    position: fixed;
    top:56px;
    right:24px;
    width:36px;
    height:36px;
    border-radius:100%;
    cursor:pointer;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
    background: white;
    z-index:5;

    svg{
      color:#313131;
      height:20px;
      width:20px;
      margin:8px;
    }
  }

.web-success-container{
  width:412px;
  margin:auto;
  padding:24px;
}

  .web-success-container-inner{
    width:90%;
    margin-left:5%;
    position: relative;
  }

    .web-success-heading{
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.2em;
      color:#313131;
      text-align: center;

      span{
        color:#0086FC;
        word-break: break-all;
        font-size: 22px;
        display: block;
        margin: 20px 0;
      }
    }

    .web-success-subheading{
      color:#6B6F76;
      font-size: 18px;
      margin-top:16px;
      line-height: 1.4em;
      text-align: center;
      font-family: 'Inter', sans-serif;
    }

    .web-success-download{
      display: block;
      background:black;
      padding:19px;
      font-size: 18px;
      color:#fff;
      letter-spacing: -0.04em;
      font-weight: 700;
      border-radius:16px;
      position: fixed;
      bottom: 24px;
      width:332px;
      margin-left:0px;
      text-decoration: none;
      text-align: center;
    }

/* remove IOS bounce effect on scroll */
html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
    font-family: "Manrope", sans-serif;
}

a{
  -webkit-tap-highlight-color: white; /* removes the default grey link background during press on mobile*/
  text-decoration:none;
}

svg {
  width: min(100cqw, 100%)
}

img {
  width: min(100cqw, 100%)
}

.alert, .notice{
  border: 1px solid #ccc;
  border-radius:8px;
  padding:8px 10px;
  line-height:1.4em;
  font-size:14px;
  color: #313131;
  position: fixed;
  top:24px;
  left:24px;
  right:24px;
  z-index:999;
  background:white;
}

  .alert{
    border: 1px solid red;
    color:red;
  }

.container{
  box-sizing: border-box;
  padding:24px 24px 24px 24px;
  font-size:16px;
  line-height:1.5em;
  position: absolute;
  width:100vw;
  top:0;
  bottom:88px;
  overflow-x: scroll;
  opacity:0.2;
  transition: opacity .8s ease; /* Fade animation */
  padding-top:75px;
}

  .container-full{
    bottom:0px;
  }

  .container::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

  }

  .container.loaded {
    opacity: 1; /* Fade in when loaded */
    /*height: 100%;*/
  }


  .devise-container{
    background-size: cover;
    background-position: top center;
    bottom:0;
  }

  .devise-container::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.hidden{
    display:none;
}

.modal{
  display: none;
  box-sizing: border-box;
  padding:128px 24px 24px 24px;
  position: absolute;
  width:100vw;
  top:0;
  bottom:0;
  overflow-x: scroll;
}

  .modal::-webkit-scrollbar {
    display: none;
  }

.modal-dark{
  display: none;
  box-sizing: border-box;
  padding:128px 24px 24px 24px;
  position: absolute;
  width:100vw;
  top:0;
  bottom:0;
  overflow-x: scroll;
  background: #070508;
}

  .modal-dark::-webkit-scrollbar {
    display: none;
  }

  .modal-continue, .modal-continue-link, .modal-upload{
    position: fixed;
    bottom:56px;
    left:24px;
    width:calc(100% - 48px);
    height:50px;
    border-radius:25px;
    background: #313131;
    color:#fff;
    text-align: center;
    line-height: 50px;
    cursor:pointer;
    text-decoration: none;
    z-index:11;
  }

    .modal-upload{
      background: #F6F8FA;
      color:#313131;
    }

  .modal-back{
    display: flex;
    place-items: center;
    justify-items: center;
    align-items: center;
    position: fixed;
    top:56px;
    left:24px;
    width:36px;
    height:36px;
    border-radius:100%;
    text-align: center;
    line-height: 36px;
    cursor:pointer;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
    background: white;
    z-index:5;

  }
.modal-back--svg{
    color:#313131;
    height:20px;
    width:20px;
    margin-top:1px;
    margin-left:7px;
}
  .modal-dark-continue{
    position: fixed;
    bottom:56px;
    width:50px;
    height:50px;
    left:calc(50% - 25px);
    border-radius:100%;
    background: white;
    color:#313131;
    text-align: center;
    line-height: 50px;
    cursor:pointer;
    text-decoration: none;
    z-index:3;
  }

  .modal-dark-continue--svg{
    vertical-align: middle;
    margin-top:-2px;
  }

  .modal-dark-continue-link{
    background: white;
    color:#313131;
    position: fixed;
    bottom:56px;
    width:calc(100% - 48px);
    height:50px;
    border-radius:25px;
    text-align: center;
    line-height: 50px;
    cursor:pointer;
    text-decoration: none;
  }

.today-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.topbar{
  height:44px;
  margin-bottom:16px;
  &.flex{
    display: flex;
    justify-content: space-between;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    a{
      position: unset;
    }
    .results-header{
      width: auto;
      height: auto;
      white-space: pre;
      z-index: 2;
      font-weight: 700;
      font-style: normal;
      font-family: "Manrope", "Manrope Placeholder", sans-serif;
      color: var(--Dark, #313131);
      font-size: 12px;
      letter-spacing: 0em;
      line-height: 1.2;
      text-align: center;
    }
  }
}

.topbar-icon-logo{
  width:48px;
  height:48px;
}

.page-title{
  color:#313131;
  letter-spacing: -0.04em;
  font-size: 32px;
  font-weight: 600;
  line-height: 1em;
  margin-bottom:38px;
}


.guardian-color{
  color:#DE5320 !important;
}

.creative-color{
  color:#F0A613 !important;
}

.connector-color{
  color:#00809D !important;
}

.pioneer-color{
  color:#54BB97 !important;
}

.nurturer-color{
  color:#623AA3 !important;
}



.guardian-bg{
  background:#DE5320 !important;
}

.creative-bg{
  background:#F0A613 !important;
}

.connector-bg{
  background:#00809D !important;
}

.pioneer-bg{
  background:#54BB97 !important;
}

.nurturer-bg{
  background:#623AA3 !important;
}



.guardian-svg-bg{
  svg{
    background:#DE5320 !important;
  }
}

.creative-svg-bg{
  svg{
    background:#F0A613 !important;
  }
}

.connector-svg-bg{
  svg{
    background:#00809D !important;
  }
}

.pioneer-svg-bg{
  svg{
    background:#54BB97 !important;
  }
}

.nurturer-svg-bg{
  svg{
    background:#623AA3 !important;
  }
}

.upgrade{
  position: absolute;
  z-index:12;
  right:30px;
  left:30px;
  bottom:30px;
  background:white;
  padding:30px;
  text-align: center;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:24px;
  font-weight:700;
  border-radius:30px;
  letter-spacing: -0.04em;
  box-shadow: 10px 10px 40px black;

  span{
    font-size: 18px;
    font-weight:400;
    line-height: 1.4em;
    letter-spacing: -0.02em;
    font-family:"Inter", "Inter Placeholder", sans-serif;
  }

  a{
    height:60px;
    width:100%;
    border-radius:60px;
    font-size:18px;
    color:white;
    background: #0086FC;
    text-decoration: none;
    letter-spacing: -0.04em;
    display: block;
    line-height: 60px;

  }
}

.upgrade-bg{
  position: absolute;
  z-index:12;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:black;
  opacity: 0.8;
}


.iti{
  display: block !important;
  width: fit-content;
  margin: auto;
  margin-top: 24px;
}
.today-insights-empty-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  width:100%;
  position: absolute;
  left:0;
  top:120px;
}

.today-insights-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  width:100%;
  overflow-x:scroll;
  position: absolute;
  left:0;
  top:120px;
}

.today-insights-row::-webkit-scrollbar {
  display: none;
}

.today-insights-avatar-wrapper{
  width:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  position:relative;
  flex-shrink:0;
  z-index:2;
  text-decoration:none;
  margin:32px 0px;
}

.today-insights-avatar{
  width: 92px;
  height:92px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  background: rgb(246, 248, 250);
  position: relative;
}

  .avatar-initials{
    font-size: 20px;
    text-align: center;
    line-height: 100%;
    font-weight: 700;
    color:#313131;
  }

.today-insights-avatar-name{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:500;
  color:rgb(107, 111, 118);
  white-space:nowrap;
  overflow-x:hidden;
}


.today-insights-invite-avatar-wrapper{
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  flex-shrink:0;
  z-index:2;
  text-decoration:none;
  margin:0px 32px 0px 0px;
}


.today-insights-invite-wrapper{
  display:flex;
  flex-wrap:nowrap;
  position:relative;
  height:92px;
  width:212px;
}

.today-insights-invite{
  border-radius:50%;
  width:25%;
  aspect-ratio: 1 / 1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  flex-shrink:0;
  z-index:2;
  text-decoration:none;
}

.today-insights-invite-avatar{
  border-radius:50%;
  border:2px solid white;
  width:92px;
  height:92px;
  position:absolute;
  top:0;
}


.today-insights-invite-plus{
  border-radius:50%;
  border:2px solid white;
  width:92px;
  height:92px;
  position:absolute;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:24px;
  background:rgb(246, 248, 250);
}


.today-insights-view-people{
  width:100%;
  height:100%;
  border:2px solid rgb(246, 248, 250);
  border-radius:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;

  svg{
    width:45%;
    height:45%;
    color:rgb(94, 103, 113);
  }
}

.insights-container{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  transition: background-color 0.5s ease;
}

.insights-container-bg-top{
  position:absolute;
  top:0;
  bottom:60vh;
  left:0;
  right:0;
  z-index:2;
  transition: background-color 0.5s ease;
}

.insights-container-bg-bottom{
  position:absolute;
  top:65vh;
  bottom:0px;
  left:0;
  right:0;
  z-index:2;
  transition: background-color 0.5s ease;
}

.insights-button-row{
  position:absolute;
  bottom:64px;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3;
  gap:16px;
}

.insights-share-button{
  box-shadow:rgba(0, 0, 0, 0) 0px 8px 16px 0px;
  background:white;
  border-radius:40px;
  padding:16px 24px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.04em;
  color:rgb(49, 49, 49);
  width:40vw;
  max-width:225px;
  text-align:center;
}

.insights-save-button{
  box-shadow:rgba(0, 0, 0, 0) 0px 8px 16px 0px;
  background:rgba(255, 255, 255, 0.2);
  border-radius:40px;
  padding:16px 24px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.04em;
  color:white;
  width:40vw;
  max-width:225px;
  text-align:center;
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  align-items:center;
  justify-content:center;

  svg{
    width:20px;
    height:20px;
  }
}

.insights-image{
  /* position:absolute;
  z-index:1;
  bottom:96px; */
  width:100%;
  max-width:550px;
  height:auto;
  margin:auto;
  /* left:50%;
  transform:translateX(-50%); */
}

.insights-content, .insights-content-share{
  position:absolute;
  top:25vh;
  width: calc(80vw + 48px);
  padding: 24px;
  max-width:600px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition: background-color 0.5s ease;
  z-index:2;
}

.insights-content-label{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.04em;
  color:rgba(255, 255, 255, 0.8);
}

.insights-content-label-icon{
  width:16px;
  height:16px;
}

.insights-content-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.04em;
  color:rgb(255, 255, 255);
  text-align:center;
  line-height: 1.2em;
}

.insights-content-description{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:-0.04em;
  color:rgba(255, 255, 255, 0.8);
  text-align:center;
  line-height: 1.4em;
}

.insights-back{
  background:white;
  border-radius:100%;
  box-shadow:rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
  height:44px;
  width:44px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgb(49, 49, 49);
  position:absolute;
  left:24px;
  top:87px;
  z-index:11;

  svg{
    height:24px;
    width:24px;
  }
}


.insights-avatar-row{
  position: absolute;
  top: 75px;
  /*
  width: 50%;
  left: 50%;
  margin-left: -30px;
  */

  width:100%;
  overflow-x: scroll;
  padding-left:calc(50% - 32px);
  padding-right:calc(50% - 32px);

  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  z-index: 10;
  transition: transform 0.5s ease-in-out;
}

  .insights-avatar-row::-webkit-scrollbar {
    display: none;
  }

.insights-avatar-wrapper{
  width:52px;
  opacity:70%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  position:relative;
  flex-shrink:0;
  z-index:2;
  text-decoration:none;
}

.insights-avatar{
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  background: rgb(246, 248, 250);
  position: relative;
  border:2px solid white;
}

.insights-avatar-name{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:500;
  color:white;
  white-space:nowrap;
  overflow-x:hidden;
  text-align:center;
}

.insights-nav-back{
  position:fixed;
  top:0;
  left:0;
  right:70vw;
  bottom:186px;
  background:transparent;
  z-index:7;
}

.insights-nav-forward{
  position:fixed;
  top:0;
  left:30vw;
  right:0;
  bottom:186px;
  background:transparent;
  z-index:7;
}

.insights-swiper{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:150px;
  z-index:7;
  opacity: 1;
}

.insights-reactions{
  width:100%;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
  padding:12px 0px 40px;
  position:fixed;
  bottom:0;
  z-index:9;
  /*backdrop-filter: blur(5px);*/
  background:linear-gradient(180deg, transparent 0%, transparent 100%);
  align-items: center;
}

.insights-reaction-row{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
  justify-content:space-between;
  padding:0px 24px;
}

.insights-reaction{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  /*backdrop-filter: blur(10px);*/
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  /*box-shadow: rgba(0, 0, 0, 0) 0px 8px 16px 0px;*/
  padding:8px;
  width:52px;
  height:40px;
  position: relative; /* Ensure proper stacking context */
  z-index: 10; /* Set a higher z-index if needed */
}

.insights-message-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:0px 24px;
  gap:12px;
}

.insights-message-input{
  border:1px solid rgb(229, 231, 237);
  font-family:"Inter", "Inter Placeholder", sans-serif;
  color:white;
  border-radius:24px;
  padding:14px 16px;
  background:transparent;
  font-size:14px;
  font-weight:400;
  width:100%;
  outline:none;
}

  .insights-message-input::placeholder{
    color:rgb(229, 231, 237);
  }

.insights-message-send{
  color:white;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:600;

}

.insights-message-success{
  background:rgb(246, 248, 250);
  padding:12px;
  height:min-content;
  width:fit-content;
  border-radius:40px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1em;
  display:none;
  flex-wrap:nowrap;
}

.insights-alert-reaction{
  position: absolute;
  bottom:8px;
  left:8px;
  right:8px;
  background:white;
  border-radius:48px;
  padding:28px;
  display: flex;
  z-index:5;
}

  .insights-alert-reaction-avatar{

  }

  .insights-alert-reaction-right{

  }

    .insights-alert-reaction-right-title{
      font-weight: 600;
      font-size: 13px;
      color:#313131;
      line-height: 1.4em;

      span{
        color:#6B6F76;
        font-weight: 400;
      }
    }

    .insights-alert-reaction-right-message{
      margin-top:8px;
      font-family:"Inter", "Inter Placeholder", sans-serif;
      color:#313131;
      font-size: 13px;
      line-height: 1.4em;
    }

    .insights-alert-reaction-right-emoji{
      background: #F6F8FA;
      display: inline-block;
      border:1px solid #F0F4F7;
      padding:0 12px;
      border-radius: 14px;
      line-height: 28px;
      height: 28px;
      margin-top:8px;
    }


.insights-relationship-modal{
  position:fixed;
  top: 168px;
  bottom:24px;
  width:calc(100% - 36px);
  max-width:500px;
  background:transparent;
  border-radius:40px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:16px;
  z-index:10;
  left:50%;
  transform: translateX(-50%);
  padding:0 16px;
  color:white;
  overflow-y:scroll;
}

  .insights-relationship-modal::-webkit-scrollbar {
    display: none;
  }


.insights-relationship-modal-description{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
}

  .insights-relationship-modal-description-text{
    font-family:"Manrope", "Manrope Placeholder", sans-serif;
    font-size:22px;
    text-align:center;
    font-weight:700;
  }

  .insights-relationship-modal-description-text-small{
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-size:16px;
    text-align:center;
    font-weight: 500;
    line-height: 1.4em;
    color: rgba(255, 255, 255, 0.8);
  }

.insights-relationship-modal-selection{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
  padding:16px;
}

  .insights-relationship-modal-option{
    text-align:center;
    border:1px solid rgb(246, 248, 250);
    border-radius:16px;
    box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 2px;
    padding:12px;
    font-family:"Manrope", "Manrope Placeholder", sans-serif;
    font-size:16px;
    font-weight:700;
    background:white;
    color:rgb(49, 49, 49);
  }

.insights-onboarding-tap{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(4, 4, 15, 0.4);
  z-index:11;
}

.insights-onboarding-tap-content{
  display:flex;
  flex-wrap:nowrap;
  flex-direction:column;
  align-items:center;
  gap:12px;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

.insights-onboarding-tap-image{
  width:75px;
  height:88px;
}

.insights-onboarding-tap-text{
  color:white;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:18px;
  font-weight:600;

}


/* Last Slide - Invite Modal */

.insights-content-share-heading{
  font-size:24px;
  color:#fff;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.04em;
  text-align: center;
}

.insights-content-share-subheading{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:16px;
  color:rgba(255, 255, 255, 0.8);
  line-height: 1.4em;
  margin-top:12px;
  text-align: center;
}

.insights-spinner-container{
  width:70%;
  margin-left:15%;
  height: same-as-width;
  position: relative;
  margin-top:20px;
}

  .insights-spinner{
    width:100%;
    animation: spin 30s infinite linear;
    opacity: 0.10;
    margin-top:12px;
  }

  .insights-spinner-avatar-center{
      width:116px;
      height:116px;
      border-radius: 100%;
      text-align: center;
      position: absolute;
      top:calc(50% - 56px);
      left:calc(50% - 58px);
      color:#fff;
      border:5px solid #fff;
      font-weight: 700;
      font-size: 32px;
      line-height: 96px;
  }

    .insights-spinner-avatar-center-border{
      width:106px;
      height:106px;
      border-radius: 100%;
      border:5px solid red;
    }

  .insights-spinner-avatar-corner{
      width:80px;
      height:80px;
      border-radius: 100%;
      text-align: center;
      position: absolute;
      border:3px solid white;

      svg{
        width:30px;
        height:30px;
        color:#fff;
        margin-top:18px;
      }
    }

      .ob-top-left2{
        top:calc(50% - 40px - 100px);
        left:calc(50% - 40px - 100px);
      }

      .ob-top-right2{
        top:calc(50% - 40px - 100px);
        left:calc(50% - 40px + 100px);
      }

      .ob-bottom-right2{
        top:calc(50% - 40px  + 100px);
        left:calc(50% - 40px  - 100px);
      }

      .ob-bottom-left2{
        top:calc(50% - 40px  + 100px);
        left:calc(50% - 40px  + 100px);
      }

      .insights-spinner-avatar-corner-inner{
        width:74px;
        height:74px;
        border-radius: 100%;
        border:3px solid red;
        background: rgba(255,255,255,0.15);
      }

      .insights-spinner-avatar-corner-text{
        position: absolute;
        bottom:-30px;
        width:100%;
        white-space:nowrap;
        font-family:"Inter", "Inter Placeholder", sans-serif;
        font-size:16px;
        font-weight: 500;
        color:#fff;
        margin-left:-3px;
      }
.navigation{
  bottom:0;
  left:0;
  right:0;
  position: fixed;
  z-index:2;
  height:88px;
  background-color: white;
  border-top:1px solid #eee;
}

  .navigation-inner{
    width:calc(100vw - 70px);
    margin-left:35px;
    font-size:0; /* removed the added margin to inline block elements*/
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
  }

  .navigation-tab, .navigation-tab-active{
    padding-top:13px;
    border-top:2px solid white;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    font-size: 12px;
    /* color:#9EA3BA; */
    width:44px;
    /*margin-right:calc((100% - 44px - 44px - 44px - 44px)/3);*/   /* for 4 tabs */
    /* margin-right:calc((100% - 44px - 44px - 44px)/2); for 3 tabs */
    height:88px;
    display: inline-block;
    line-height: 12px;
    text-decoration: none;
    position:relative;
    opacity:0.4;
    color:rgb(49, 49, 49);

  }

    .navigation-tab-svg{
      margin-bottom:2px;
      width:24px;
      height:24px;
    }

    .navigation-tab-active{
      border-top:2px solid #101720;
      color:#101720;
      opacity:1;
    }

.navigation-back{
  width:36px;
  height:36px;
  position: fixed;
  line-height: 36px;
  text-align: center;
  top:24px;
  left:24px;
  z-index:2;
  border-radius: 100%;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);

  svg{
    color:#313131;
    height:20px;
    width:20px;
    vertical-align: top;
    margin-top:8px;
    margin-left:-2px;

  }
}


.people-red-dot{
  width:12px;
  height:12px;
  border-radius:100%;
  position: absolute;
  top:8px;
  right:2px;
  background:#EE4444;
}
.edit_notification_schedule {
  color: #313131; }
  .edit_notification_schedule select {
    height: 28px;
    border-radius: 8px;
    font-size: 14px; }
  .edit_notification_schedule .notifications-options {
    display: flex;
    flex-direction: column;
    gap: 8px; }
    .edit_notification_schedule .notifications-options .notifications-option {
      display: flex;
      place-items: center;
      gap: 8px; }
    .edit_notification_schedule .notifications-options input[type=checkbox] {
      background-color: pink;
      height: 20px;
      width: 20px; }
.ppo-top{
  margin-bottom:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  font-size:18px;
  font-weight:700;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
}

.ppo-back{
  background:white;
  border-radius:100%;
  box-shadow:rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
  height:44px;
  width:44px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgb(49, 49, 49);

  svg{
    height:18px;
    width:18px;
  }
}

.ppo-logo{
  width:44px;
  height:44px;
}

.ppo-button{
  position: fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  bottom:48px;
  left:24px;
  width:calc(100% - 48px);
  height:50px;
  border-radius:25px;
  background: #313131;
  color:#fff;
  text-align: center;
  line-height: 50px;
  cursor:pointer;
  text-decoration: none;
  z-index:11;
}


.ppo-voice-top{
  position:relative;
  margin-top:16px;
  height:240px;

  .spinner{
    position: absolute;
    width:194px;
    left:calc(50% - 97px);
    z-index: -1;
    top:calc(50% - 110px);
    /* transform:translate(-50%, -50%); */
    animation: spin 30s infinite linear;
  }
}

.ppo-voice-icon{
  width:88px;
  height:88px;
  top:62px;
  left: calc(50% - 44px);
  position: absolute;
}

.ppo-voice-text{
  display:flex;
  gap:12px;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  margin-top:-42px;
}

.ppo-voice-heading{
  font-size:32px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  letter-spacing:-0.04em;
  color:rgb(49, 49, 49);
  text-align:center;
  line-height:36px;
}

.ppo-voice-description{
  font-size:16px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-weight:300;
  color:rgb(107, 111, 118);
  text-align:center;
  line-height:1.5em;
}

.ppo-voice-content{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:0px;
}

  .ppo-voice-content-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .ppo-voice-content-icon-wrapper{
    display:flex;
    gap:8px;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    font-size:14px;
    font-family:"Manrope", "Manrope Placeholder", sans-serif;
    font-weight:600;
    color:rgb(49, 49, 49);
    text-align:center;
    margin-top:24px;
    padding:12px;
  }

  .ppo-voice-content-icon{
    width:56px;
    height:56px;
    color:white;
    border-radius:50%;
    padding:12px;
  }

  .ppo-voice-content-vline{
    width:1px;
    background:rgb(246, 248, 250);
    height: 80px;
    align-self: flex-end;
  }

.ppo-voice-content-hline{
  height:1px;
  width:100%;
  background:rgb(246, 248, 250);
}

.ppo-voice-content-bar-wrapper{
  display:flex;
  gap:24px;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  font-size:14px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  color:rgb(49, 49, 49);
  text-align:center;
  padding:24px 48px;
  width:100%;
}

.ppo-voice-content-bar{
  width:100%;
  border-radius:24px;
  height:18px;
  overflow:visible;
  position:relative;
  background:rgb(246, 248, 250);
}

  .ppo-voice-content-bar-fill{
    position:absolute;
    left:0;
    top:0;
    height:18px;
    border-radius:24px;
  }

  .ppo-voice-content-bar-dot{
    height:32px;
    width:32px;
    position:absolute;
    margin-top:-8px;
    margin-left:8px;
    z-index:2;
    background:white;
    border:1px solid rgb(246, 248, 250);
    box-shadow:rgba(0, 0, 0, 0.15) 0px 4px 12px -4px;
    border-radius:50%;
  }


.ppo-list-content{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:16px;
  margin-top:24px;
}

.ppo-list-content-row{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
}

.ppo-list-content-text{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:4px;
}

.ppo-list-content-icon{
  border-radius:50%;
  width:24px;
  height:24px;
  padding:4px;
  color:white;
  background:rgb(34, 170, 153);
  flex-shrink:0;
}

.ppo-list-content-icon-red{
  width:24px;
  height:24px;
  flex-shrink:0;
  color:rgb(238, 68, 68);
}

.ppo-list-content-title{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.5em;
  color:rgb(49, 49, 49);
}

.ppo-list-content-description{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.5em;
  color:rgb(107, 111, 118);
}

.ppo-compare-text{
  display:flex;
  gap:12px;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  margin-top:32px;
}


.ppo-compare-heading{
  font-size:24px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  letter-spacing:-0.04em;
  color:rgb(49, 49, 49);
  text-align:center;
  line-height:1.2em;
}

.ppo-compare-description{
  font-size:14px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-weight:300;
  color:rgb(107, 111, 118);
  text-align:center;
  line-height:1.5em;
}


.ppo-compare-content{
  position:relative;
  margin-top:40px;
  height:320px;

  .spinner{
    position: absolute;
    width:320px;
    left:calc(50% - 160px);
    z-index: -1;
    top:calc(50% - 160px);
    animation: spin 30s infinite linear;
  }
}


.ppo-compare-icon{
  width:96px;
  height:96px;
  top:50%;
  left: 50%;
  transform:translate(-50%, -50%);
  position: absolute;
}

.ppo-compare-content-you{
  width:40px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translateX(-50%);
  margin-top:60px;
  font-size:16px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  letter-spacing:-0.04em;
  color:rgb(49, 49, 49);
  text-align:center;
}


.ppo-compare-avatar-wrapper{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  gap:2px;
  position:absolute;
  font-size:14px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-weight:400;
  color:rgb(107, 111, 118);
}

.ppo-compare-avatar{
  width:76px;
  height:76px;
  border-radius:50%;
  border-width:3px;
  overflow:hidden;
}

.ppo-compare-avatar-icon{
  background:rgb(246, 248, 250);
  padding:16px;
  width:100%;
  height:100%;
}
.ppo-compare-avatar-badge{
  position:absolute;
  right:0px;
  top:52px;
  width:20px;
  height:20px;
  padding:3px;
  border-radius:100%;
  color:white;
}

.ppo-phone-input{
  background:rgb(246, 248, 250);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 1px inset;
  font-size:16px;
  font-weight:300;
  color:rgb(49, 49, 49);
  border-radius:12px;
  padding:18px;
  border: none;
  width: 100%;
  margin-top: 24px;
  outline: none;
}

  .ppo-phone-input::placeholder{
    color:rgb(207, 207, 207);
  }

.ppo-phone-link{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:300;
  color:rgb(144, 146, 146);
  width:100%;
  text-align:center;
  position:absolute;
  bottom:112px;
  left:0;
  text-decoration:underline;

}

.ppo-contact-avatar-wrapper{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-weight:400;
  color:rgb(49, 49, 49);
  margin-top:50px;
}

.ppo-contact-avatar{
  border:3px solid rgb(207, 207, 207);
  border-radius:50%;
  background:white;
  padding:3px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.ppo-contact-avatar-img{
  width:100px;
  height:100px;
  border-radius:50%;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background:rgb(232, 235, 237);
}

.ppo-contact-avatar-add{
  border-radius:50%;
  background:white;
  padding:3px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  border:2px dashed rgb(232, 235, 237);
}

  .ppo-contact-avatar-add-inner{
    background:rgb(0, 134, 252);
    color:white;
    width:100px;
    height:100px;
    padding:35px;
    border-radius:50%;
    overflow:hidden;
  }

  .ppo-contact-avatar-add-text{
    width:calc(100% + 24px);
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
  }

  .ppo-contact-avatar-scroll{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:24px;
    animation: ppo-scroll linear infinite;
    /* Adjust speed here */
    animation-duration: 20s;
  }

  .ppo-contact-avatar-add-text-item{
    color:rgb(107, 111, 118);
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-weight:400;
    font-size:16px;
    white-space:nowrap;
  }

  @keyframes ppo-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .ppo-add-contacts-img-wrapper {
    width: 100%;
    position: relative;
  }

  .ppo-add-contacts-img {
    width: calc(80% + 300px);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  :root {
    --ppo-base-width: calc(80vw + 300px);
    --ppo-top-scale-factor: calc(var(--ppo-base-width) / 653);
  }

  .ppo-today-preview {
    position: absolute;
    top: calc(60px + (128px * var(--ppo-top-scale-factor)));
    left: 50%;
    width: calc(80% + 200px - 138px * 2); /* Image width minus margins */
    height: fit-content; /* Adjust height dynamically based on the phone screen */
    padding: 0;
    transform: translateX(-50%);
  }


  .ppo-contacts-bottom-fade{
    position:absolute;
    z-index:3;
    width:100%;
    left:0;
    bottom:0;
    height:500px;
    background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 66.80039414414415%)
  }

  .ppo-contacts-success{
    background:rgb(235, 246, 245);
    border-radius:40px;
    padding:10px 16px 10px 12px;
    position:absolute;
    bottom:110px;
    left:50%;
    transform:translateX(-50%);
    color:rgb(34, 170, 153);
    font-size:12px;
    font-weight:400;
    font-family:"Inter", "Inter Placeholder", sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    z-index:4;
  }

  .ppo-contacts-success-icon{
    border-radius:50%;
    width:14px;
    height:14px;
    padding:2px;
    color:white;
    background:rgb(34, 170, 153);
    flex-shrink:0;
  }


  .ppo-contacts-modal{
    position: fixed;
    top:100%;
    bottom:0;
    left:0;
    right:0;
    background:white;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    z-index:13;
    padding:56px 24px 24px 24px;
    overflow-y: scroll;
  
    a{
      text-decoration: none;
    }
  }
  
    .ppo-contacts-modal::-webkit-scrollbar {
      display: none;
    }
  
    .ppo-contacts-modal-bg{
      position: fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background: rgba(0, 0, 0, 0.5);
      z-index:12;
      display:none;
    }


    .ppo-access-denied-heading{
      font-family:"Manrope", "Manrope Placeholder", sans-serif;
      font-weight:600;
      font-size:36px;
      line-height:1.1em;
      margin-top:-12px;
      letter-spacing: -0.04em;
    }


    .ppo-contacts-header{
      display:flex;
      flex-wrap:nowrap;
      place-content: center space-between;
      align-items: center;
      padding:0px 16px 0px 16px;
      font-family:"Manrope", "Manrope Placeholder", sans-serif;
      font-weight:600;
      font-size:18px;
      width: 100%;
      border-top-left-radius:40px;
      border-top-right-radius:40px;
      backdrop-filter: blur(30px);
      background-color: rgba(255, 255, 255, 0.8);
    }


    .ppo-phone-error{
      color:red;
      font-size:14px;
      font-weight:400;
      font-family:"Inter", "Inter Placeholder", sans-serif;
      margin-top:12px;
      display:none;
    }


  .ppo-phone-list-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .ppo-phone-list-text{
    color:rgb(49, 49, 49);
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    padding:18px;
    font-size:16px;
    font-weight:300;
  }

  .ppo-phone-list-icon{
    width:24px;
    height:24px;
    color:rgb(49, 49, 49);
  }
.people-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  /* padding:72px 24px 12px; */
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:32px;
  font-weight:700;
  color:rgb(49, 49, 49);
}

.people-add{
  background:white;
  border-radius:100%;
  box-shadow:rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
  width:44px;
  height:44px;
  padding:8px;

  svg{
    width:100%;
    height:100%;
  }
}

.people-row{
  width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0px 16px;
  position:relative;
  margin-top:16px;
}

.no-favorites-bubble-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:0px 16px;
}

.no-favorites-bubble{
  width:76px;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.no-favorites-bubble-border{
  background:white;
  border-radius:100%;
  border:3px solid rgb(246, 248, 250);
  padding:2px;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.no-favorites-bubble-inner{
  background:rgb(246, 248, 250);
  border-radius:100%;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
}

.no-favorites-gradient{
  background:linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, white 100%);
  inset: 0px;
  position: absolute;
  z-index: 1;
  bottom:100px;
}

.no-favorites-description{
  position:absolute;
  width:100%;
  top:150px;
  bottom:0;
  left:0;
  background:white;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  z-index:2;
}

.no-favorites-star{
  box-shadow:rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
  border-radius:100%;
  background:white;
  width:44px;
  height:44px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;

  svg{
    width:24px;
    height:24px;
  }
}

.no-favorites-bold{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:14px;
  font-weight:700;
  color:rgb(49, 49, 49);
}

.no-favorites-text{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  color:rgb(107, 111, 118);
  font-size:14px;
  text-align:center;
}

.people-divider{
  height:1px;
  width:100%;
  background:rgb(246, 248, 250);
  margin-top:32px;
  margin-bottom:32px;
}


.contact {
  padding: 10px 0px;
  margin-bottom: 10px;
  border-radius: 4px;
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  align-items:center;
  gap:6px;
  position:relative;
}

.contact-avatar {
  width: 44px;
  height: 44px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:100%;
  overflow:hidden;
  flex-shrink:0;
  box-sizing:border-box;
  background:rgb(246, 248, 250);
  position:relative;
}

.contact-avatar-inner{
  width:100%;
  height:100%;
  border:2px solid rgb(246, 248, 250);
  border-radius:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;

  svg{
    width:24px;
    height:24px;
    color:rgb(94, 103, 113);
  }
}

.contact-avatar-img{
  width:100%;
  height:100%;
}

.contact-avatar-badge{
  position:absolute;
  left:30px;
  bottom:6px;
  width:18px;
  height:18px;
  padding:3px;
  border-radius:100%;
  color:white;
}

.contact-name{
  font-size:14px;
  font-weight:700;
  color:rgb(49,49,49);
  white-space:nowrap;
  justify-content: center;
  gap: 2px;
  line-height: 1.2em;
  margin-left:6px;
  width:calc(100vw - 165px);
  margin-right: auto;
  overflow-x: clip;

  span{
    display:block;
  }
}

  .contact-name-giant-icon{
    width: 18px;
    height: 18px;
    background: black;
    padding: 1px;
    border-radius: 100%;
    position: absolute;
    margin-top: -35px;
    margin-left: -5px;
  }

  .contact-name-favorite-icon{
    width: 18px;
    height: 18px;
    position: absolute;
    margin-top: -35px;
    margin-left: 30px;
    color: white;
    background: black;
    padding: 3px;
    border-radius: 100%;
  }

.contact-description{
  font-size:14px;
  color:rgb(107, 111, 118);
  font-weight:400;
  line-height: 1em;
  font-family:"Inter", "Inter Placeholder", sans-serif;
}

.contact-add{
  width:44px;
  height:44px;
  border-radius:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  /*background:rgb(246, 248, 250);*/
  flex-shrink:0;
  color:rgb(49, 49, 49);

  svg{
    width:24px;
    height:24px;
  }
}

.contact-view-all{
  background:rgb(246, 248, 250);
  border-radius:40px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:18px;
  color:rgb(49, 49, 49);
  font-weight:700;
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  justify-content:center;
  align-items:center;
  padding:20px 24px;
  text-decoration:none;
  margin-top:8px;
  width:100%;

  svg{
    width:24px;
    height:24px;
  }
}

.syncing-contacts-image {
  width: 24px;
  height: 24px;
  animation: spin-contacts-image 2s linear infinite; /* 2s for the duration, linear for constant speed, infinite to keep spinning */
}

@keyframes spin-contacts-image {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



.invite-top{
  margin-bottom:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  font-size:18px;
  font-weight:700;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
}

.invite-back{
  background:white;
  border-radius:100%;
  box-shadow:rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
  height:44px;
  width:44px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgb(49, 49, 49);

  svg{
    height:24px;
    width:24px;
  }
}

.invite-link-row{
  display:flex;
  justify-content:space-between;
  flex-wrap:nowrap;
  align-items:center;
}

.invite-link{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
}

.invite-link-icon{
  background:rgb(246, 248, 250);
  border-radius:100%;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgb(49, 49, 49);

  svg{
    width:32px;
    height:32px;
  }
}

.invite-link-text{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-weight:500;
  font-size:14px;
  color: rgb(49, 49, 49);
}

.connection-request{
  border-radius:28px;
  background:rgb(246, 248, 250);
  padding:24px 8px 8px;
}

.connection-request-title{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  padding:0px 16px;
  font-size:12px;
  font-weight:500;
  color:rgb(144, 146, 146);
}

.connection-request-row{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  position:relative;
}

.connection-request-box{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  border-radius:24px;
  background:white;
  padding:16px;
  gap:10px;
  position:relative;
  margin-top:12px;
}

.connection-request-buttons{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.connection-request-accept, .connection-request-decline {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:40px;
  padding: 8px 12px 8px 8px;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:600;
  width:50%;

  svg{
    width:18px;
    height:18px;
  }
}

.connection-request-accept{
  background:rgb(49, 49, 49);
  color:white;
}

.connection-request-decline{
  color:rgb(49, 49, 49);
  background:rgb(246, 248, 250);
}

.contact-time{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:500;
  color:rgb(144, 146, 146);
}

.view-profile-relationship-selector{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
}

.relationship-select{
  box-shadow:rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.063) 0px 10px 10px -3.75px;
  background:white;
  border-radius:40px;
  padding:12px;
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-wrap:nowrap;
  gap:4px;


  svg{
    width:18px;
    height:18px;
  }
}

.relationship-current{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  align-items:center;
  justify-content:center;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  color:rgb(49, 49, 49);
}

.people-modal-bg{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(4, 4, 15, 0.4);
  z-index:3;
}

.people-modal{
  position:fixed;
  bottom:24px;
  width:calc(100% - 36px);
  max-width:500px;
  background:white;
  border-radius:40px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:24px;
  z-index:4;
  left:50%;
  transform: translateX(-50%);
  padding:0 16px;
}

.people-modal-title{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  padding:24px 24px 12px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:18px;
  font-weight:700;

}

.people-modal-description{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
}

  .people-modal-description-text{
    font-family:"Manrope", "Manrope Placeholder", sans-serif;
    font-size:24px;
    text-align:center;
    font-weight:700;
  }

  .people-modal-description-text-small{
    color:rgb(107, 111, 118);
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-size:18px;
    text-align:center;
  }

.people-modal-selection{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:16px;
  padding:16px;
}

  .people-modal-option{
    text-align:center;
    border:1px solid rgb(246, 248, 250);
    border-radius:16px;
    box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 2px;
    padding:24px;
    font-family:"Manrope", "Manrope Placeholder", sans-serif;
    font-size:18px;
    font-weight:700;
  }

.favorite-avatar-wrapper-third{
  width:  calc((100% / 3) - (40px / 3));
  padding:8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
}

  .favorite-avatar-wrapper{
    width: 76px;   /*calc((100% / 3) - (40px / 3))*/
    height: 76px;
    padding:4%;
    /* aspect-ratio: 1 / 1; */
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    flex-shrink:0;
    z-index:2;
    text-decoration:none;
  }

    .favorite-avatar {
      width:100%;
      height:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      border-radius:100%;
      overflow:hidden;
      flex-shrink:0;
      box-sizing:border-box;
      background:rgb(246, 248, 250);
      position:relative;
    }

    .favorite-avatar-inner{
      width:100%;
      height:100%;
      border:3px solid rgb(246, 248, 250);
      border-radius:100%;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;

      svg{
        width:24px;
        height:24px;
        color:rgb(94, 103, 113);
      }
    }

    .favorite-avatar-img{
      width:100%;
      height:100%;
    }

    .favorite-avatar-badge{
      position:absolute;
      right: 2px;
      top: 51px;
      width: 24px;
      aspect-ratio: 1 / 1;
      padding: 3%;
      border-radius:100%;
      color:white;
    }

    .favorite-avatar-name{
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2em;
      color:#313131;
      margin-top:8px;
      text-align: center;
      font-family:"Inter", "Inter Placeholder", sans-serif;
      overflow: hidden;
      width:100%;
    }

    .favorite-avatar-voice{
      font-size: 12px;
      line-height: 1.2em;
      color:#9EA3BA;
      font-family:"Inter", "Inter Placeholder", sans-serif;
      margin-top:2px;
      text-align: center;
    }


.contact-profile-top{
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  position:relative;
  font-size:18px;
  font-weight:700;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  position:relative;
  box-sizing: border-box;
  padding:24px 24px 24px 24px;
  font-size:16px;
  line-height:1.5em;
  width:100vw;
  padding-top:75px;
  border-bottom-left-radius: 100% 20px; /* Elongate the bottom-left curve */
  border-bottom-right-radius: 100% 20px; /* Elongate the bottom-right curve */
}

.view-profile-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  width:100%;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:18px;
  font-weight:700;
}

.view-profile-images{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 0 50px 0;
  width:75%;
}

.view-profile-voice-spinner{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  -webkit-mask-image: url(/assets/spinner-flat-cfe6074a23943e4b4e73960c3850bfe964d59947fe178e30e7b876e4eb859687.png);
    mask-image: url(/assets/spinner-flat-cfe6074a23943e4b4e73960c3850bfe964d59947fe178e30e7b876e4eb859687.png);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

  opacity:20%;
}

.view-profile-description{
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  background:white;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:16px;
  padding:24px;
  margin:24px;
  z-index:2;
  margin-top:-40px;
  position:absolute;
  width:calc(100% - 48px);
}

  .view-profile-description-icon{
    width:48px;
    height:48px;
    padding:10px;
    color:white;
    border-radius:100%;
  }

  .view-profile-description-title{
    font-size:18px;
    font-weight:700;
    font-family:"Manrope", "Manrope Placeholder", sans-serif;

  }

  .view-profile-description-text{
    color:rgb(107, 111, 118);
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-size:14px;
    line-height:1.5em;
  }

  .view-profile-button{
    background:rgb(246, 248, 250);
    border-radius:40px;
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-size:14px;
    color:rgb(49, 49, 49);
    font-weight:600;
    display:flex;
    flex-wrap:nowrap;
    gap:4px;
    justify-content:center;
    align-items:center;
    padding:16px 20px 16px 16px;
    text-decoration:none;

    svg{
      width:16px;
      height:16px;
    }
  }

.view-profile-content{
  box-sizing: border-box;
  padding:24px 24px 24px 24px;
  font-size:16px;
  line-height:1.5em;
  width:100vw;
  padding-bottom:88px;
}

.view-profile-cards{
  position:relative;
  min-height:128px;
  /* box-shadow:rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
  border-radius:5.12821% / 15.5058%; */
  background:white;
  width:calc(100% - 24px);
  margin:12px;
  /* padding-bottom:24px; */

  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
}

.view-profile-card{
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  border-radius:16px;
  background:white;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
  padding:20px;
  width:calc(100% + 24px);
  margin-left:-12px;
  /* margin-top:-12px; */
}

  .view-profile-card-title{
    font-size:16px;
    font-weight:700;
    font-family:"Manrope", "Manrope Placeholder", sans-serif;
  }

  .view-profile-card-description{
    color:rgb(107, 111, 118);
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-size:14px;
    line-height:1.4em;
  }

.view-profile-cards-count{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:14px;
  font-weight:700;
  padding:8px;
  border-radius:100%;
  width:32px;
  height:32px;
  color:white;
  position:absolute;
  top:-12px;
  right:-24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.view-profile-experiences-title{
  font-size:24px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:700;
  margin-bottom:32px;
  margin-top:32px;
}

.view-profile-experiences{
  display:flex;
  gap:16px;
  flex-direction:column;
  flex-wrap:nowrap;
}

.view-profile-experience-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%; /* Ensure it does not exceed parent container */
  flex-wrap: nowrap; /* Wrapping here is unnecessary, text should wrap inside its children */
  display: inline-block !important;
  width:calc(100% - 60px);

}

.view-profile-experience{
  gap: 12px;
  margin-bottom:32px;
}

.view-profile-experience-icon{
  width:50px;
  height:50px;
  padding:13px;
  background:rgb(246, 248, 250);
  border-radius:100%;
  fill:rgb(49, 49, 49);
  display: inline-block;
  vertical-align: middle;
  color:#313131;
}


.view-profile-experience-info{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:8px;
  width:calc(100% - 70px);
  margin-left:12px;
  vertical-align: middle;
}

.view-profile-experience-title {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4em;
  color: rgb(49, 49, 49);
  display: block; /* Change from 'flex' to 'block' */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word; /* Break long words if necessary */
  overflow-wrap: break-word; /* Ensure wrapping in modern browsers */
  max-width: 100%; /* Constrain width within the parent container */
}


.view-profile-experience-time{
  color:rgb(107, 111, 118);
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1em;
}

.view-profile-experience-divider{
  background:rgb(246, 248, 250);
  height:1px;
  width:100%;
}

.dynamics-images{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-around;
  margin-top:32px;
}

.dynamics-similarity{
  box-shadow:rgba(0, 0, 0, 0.1) 0px 8px 16px 0px;
  border-radius:100%;
  background:white;
  width:30vw;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}

.dynamics-similarity-meter{
  --percentage: 75;
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(rgb(144, 146, 146) 0% calc(var(--percentage) * 1%), transparent calc(var(--percentage) * 1%) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.dynamics-similarity-text{
  font-size:18px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:700;
  background-color: white;
  border-radius:50%;
  width:calc(100% - 9px);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}


.dynamics-avatar-wrapper{
  width:25%;
  aspect-ratio: 1 / 1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  flex-shrink:0;
  z-index:2;
  text-decoration:none;
}

.dynamics-avatar {
  width:60%;
  aspect-ratio: 1 / 1;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:100%;
  overflow:hidden;
  flex-shrink:0;
  box-sizing:border-box;
  background:rgb(246, 248, 250);
  position:relative;
}

.dynamics-avatar-badge{
  position:absolute;
  right: 20%;
  top:calc(63% - 32px);
  width: 18%;
  aspect-ratio: 1 / 1;
  padding: 3%;
  border-radius:100%;
  color:white;
}


.dynamics-avatar-name{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  font-weight:700;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:rgb(49, 49, 49);
  text-decoration:none;
  margin-top: 10px;
  line-height: 16px;
}

.dynamics-avatar-dot{
  width:10px;
  height:10px;
  border-radius:100%;
}


.dynamics-avatar-voice{
  color:rgb(107, 111, 118);
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:12px;
  text-decoration:none;
}


.dynamics-learn{
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  background:white;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:16px;
  padding:24px;
  z-index:2;
  width:100%;
  margin-top:12px;
}

  .dynamics-learn-icon{
    width:48px;
    height:48px;
    padding:10px;
    color:white;
    border-radius:100%;
  }

  .dynamics-learn-title{
    font-size:18px;
    font-weight:700;
    font-family:"Manrope", "Manrope Placeholder", sans-serif;

  }

  .dynamics-learn-text{
    color:rgb(107, 111, 118);
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-size:14px;
    line-height:1.5em;
  }

  .dynamics-learn-link-row{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    width:100%;
    align-items:center;
    gap:6px;
  }

  .dynamics-learn-link-icon{
    width:18px;
    height:18px;
  }

  .dynamics-learn-link-text{
    font-family:"Inter", "Inter Placeholder", sans-serif;
    font-size:14px;
    font-weight:600;
  }

  .dynamics-link-spacer{
    flex-grow:1;
  }


.dynamics-relationship-selector{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:24px;
}

.dynamics-relationship-select{
  box-shadow:rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.063) 0px 10px 10px -3.75px;
  background:white;
  border-radius:40px;
  padding:12px;
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  width:fit-content;


  svg{
    width:18px;
    height:18px;
  }
}


.dynamics-compare{
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  background:white;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:16px;
  padding:24px;
  z-index:2;
  width:100%;
  margin-top:12px;
}

.dynamics-compare-top{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
}

.dynamics-compare-text{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:700;
  font-size:16px;
}

.dynamics-compare-bar{
  background:rgb(246, 248, 250);
  width:100%;
  position:relative;
  border-radius:12px;
  height:12px;
}

.dynamics-compare-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  position:absolute;
  top:0;
  left:0;
}

.contact-row-title{
  font-size: 24px;
  font-weight: 700;
  color:#313131;
  letter-spacing: -.04em;
  margin-bottom:24px;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  margin-top:32px;
}


.contact-search-top{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  width:100%;
  gap:16px;
}

.contact-search-input{
  border:1px solid rgb(229, 231, 237);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:rgb(49, 49, 49);
  caret-color:rgb(49, 49, 49);
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 1px inset;
  font-size:16px;
  font-weight:400;
  line-height:1.4em;
  width:100%;
  border-radius:12px;
  padding:14px 16px;
  background:rgb(246, 248, 250);
  outline:none;
}

  .contact-search-input::placeholder{
    color:rgb(207, 207, 207);
  }

.contact-search-cancel{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:14px;
  font-weight:700;
  color:rgb(49, 49, 49);
}

.dynamics-compare-modal-bg{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(4, 4, 15, 0.4);
  z-index:3;
}

.dynamics-compare-modal{
  position:fixed;
  bottom:0px;
  left:0;
  top:12%;
  width:100vw;
  background:white;
  border-top-left-radius:40px;
  border-top-right-radius:40px;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:32px;
  z-index:4;
  overflow-y:scroll;
  padding:0px 32px 128px;
}

.dynamics-compare-header{
  display:flex;
  flex-wrap:nowrap;
  place-content: center space-between;
  align-items: center;
  padding:24px 16px 12px;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  font-size:18px;
  position: fixed;
  width: 100%;
  left: 0px;
  z-index:5;
  border-top-left-radius:40px;
  border-top-right-radius:40px;
  backdrop-filter: blur(30px);
  background-color: rgba(255, 255, 255, 0.8);
}

.dynamics-compare-close{
  border-radius:50%;
  box-shadow:rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
  width:44px;
  height:44px;
  padding:8px;
  color:rgb(49, 49, 49);
  background:white;
}

.dynamics-compare-modal-bar{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  width:100%;
  gap:6px;
}

.dynamics-compare-section{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex-wrap:nowrap;
}

.dynamics-compare-title{
  color:rgb(49, 49, 49);
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-size:20px;
  font-weight:600;
  line-height:1.5em;
}

.dynamics-compare-description{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.5em;
  color:#6b6f76;
}



.contacts-allow{
  border-radius:24px;
  box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  background:white;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
}


.contacts-allow-images{
  display:flex;
  flex-wrap:nowrap;
}

.contacts-allow-image{
  border-radius:50%;
  border:3px solid white;
  width:56px;
  height:56px;
  margin-left:-15px;
}

.contacts-allow-title{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.04em;
  color:rgb(49, 49, 49);
  text-align:center;
  margin-top:11px;
}

.contacts-allow-description{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size:14px;
  line-height:1.5em;
  color:rgb(107, 111, 118);
  text-align:center;
}


.people-invite-section-heading{
  text-align:center;
  font-size:24px;
  font-weight:700;
  color:#313131;
  line-height: 1.1em;
  letter-spacing: -0.04em;
}

.people-invite-section-subheading{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  margin-top:12px;
  text-align:center;
  font-size:16px;
  color:#6B6F76;
  line-height: 1.3em;
  width: 360px;
  margin-left:calc((100vw - 360px) / 2 - 24px)
}

.people-invite-section-item{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  margin-top:12px;
  font-size:16px;
  color:#6B6F76;
  line-height: 1.3em;
  margin-left:12px;
  vertical-align: top;

  svg{
    width:32px;
    vertical-align: top;
    margin-top:-6px;
    padding-bottom:10px;
    display: inline-block;
    margin-right:12px;
    color:#313131;
  }

  div{
    display: inline-block;
    width:calc(100% - 50px);
  }
}

.people-invite-section-share-container{
  background: #F6F8FA;
  border-radius:32px;
  margin-top: 20px;
  padding:4px;
  position: relative;
}

  .people-invite-section-share-container-svg{
    position: absolute;
    right:12px;
    top:20px;
    width:28px;
  }


  .people-invite-section-code{
    font-size:16px;
    color:#313131;
    padding:20px;
    background: transparent;
    border:none;
    width:calc(100% - 60px);
    outline:none;
  }

  .people-invite-section-copy{
    text-align:center;
    font-size:18px;
    font-weight:700;
    color:white;
    letter-spacing: -0.04em;
    text-align: center;
    padding:20px;
    border-radius: 40px;
    background: #313131;
    cursor:pointer;
  }

.people-invite-section-gift{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  margin-top:12px;
  text-align:center;
  font-size:12px;
  color:#0086FC;

    svg{
      display: inline-block;
      width:24px;
      vertical-align: top;
      margin-top:-3px;
      margin-right:4px;
    }
}


.invite-logo {
  filter: invert(1) sepia(1) saturate(10000%) hue-rotate(0deg) brightness(0.4);
  width:138px;
  margin-left:calc(50vw - 69px);
  margin-top:72px;
}

.invite-avatar{
  width:116px;
  height:116px;
  border-radius:100%;
  border:3px solid black;
  margin-left:calc(50vw - 58px);
  margin-top:70px;
}

  .invite-avatar-inner{
    background: #F6F8FA;
    width:104px;
    height:104px;
    border-radius:100%;
    margin:3px;
    font-weight: 700;
    font-size:32px;
    text-align: center;
    line-height: 104px;
    position: relative;
    background-position: center;
    background-size: cover;
  }

    .invite-avatar-inner-img{
      width:40px;
      height:40px;
      position: absolute;
      bottom:-6px;
      right:-6px;
    }

  .invite-avatar-text{
    font-size: 18px;
    font-weight: 600;
    color:#313131;
    text-align: center;
    margin-top:12px;
  }

.invite-heading{
  text-align: center;
  font-size: 24px;
  color:#313131;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  font-weight: 700;
  margin-top:40px;
  padding: 0 24px;
}

.invite-subheading{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  text-align: center;
  font-size: 16px;
  color:#6B6F76;
  line-height: 1.4em;
  margin-top:12px;
  padding: 0 24px;
}

.invite-button{
  display: block;
  height:60px;
  background: #313131;
  border-radius: 30px;
  padding:10px;
  text-align: center;
  line-height: 40px;
  left:24px;
  right:24px;
  position: fixed;
  bottom:64px;
  color:#fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.04em;
}

  .invite-button-icon{
    border-radius:8px;
    width:auto;
    height:20px;
    vertical-align: middle;
    margin-top:-4px;
    margin-right:8px;
  }
.ppo-container{
  height:calc(100vh - 100px);
  overflow: hidden;
}
.profile-top{
  background:#FEFAF4;
  height:375px;
  width:100vw;
  margin-left:-24px;
  margin-top:-75px;
  p{
    align-self: center;
    margin: auto;
    margin-top: 20px;
    width: 100%;
    height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    z-index: 2;
    font-weight: 500;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: var(--Light_Text, #9ea3ba);
    font-size: 16px;
    letter-spacing: 0em;
    line-height: 1.5;
    text-align: center;
    width:80%;
  }
  .btn{
    box-sizing: border-box;
    margin: auto;
    width: min-content;
    height: min-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px 16px 24px;
    background-color: #f6f8fa;
    overflow: visible;
    z-index: 6;
    align-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    border-radius: 24px;
    font-weight: 600 !important;
    margin-top: 16px;
    svg{
      width: 17px;
    }
  }
}


.profile-cog{
  width:36px;
  height:36px;
  position: absolute;
  line-height: 36px;
  top:75px;
  left:24px;
  z-index:2;
  border-radius: 100%;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
  text-align: center;
  background:white;

  svg{
    color:#313131;
    height:20px;
    width:20px;
    vertical-align: top;
    margin-top:8px;
  }
}

.profile-top-name{
  font-size: 16px;
  font-weight: 700;
  color:#313131;
  line-height: 1.2em;
  text-align: center;
  padding-top:83px;
}

.profile-top-spinner{
  position: relative;
  margin-top:20px;

  .spinner{
    width:144px;
    margin-top:35px;
    margin-left: calc(50% - 72px);
    z-index: -1;
    animation: spin 30s infinite linear;
  }
}

.profile-top-avatar-icon{
  position: absolute;
  bottom:-5px;
  right:-5px;
  width:32px;
  height:32px;
  border-radius:100%;

  img{
    padding:4px;
    fill:none;
    height:32px;
    width:32px;
    border-radius:100%;
    border:2px solid #F6F8FA;
  }
}
.profile-voice-icon--svg{
  width:30px;
  height:30px;
  margin:10px;
  color:white;
}
.profile-voice{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  border-radius:24px;
  padding:24px;
  background:white;
}

  .profile-voice-icon{
    background: #F0A613;
    width:50px;
    height:50px;
    border-radius:50px;
    box-shadow:rgba(0, 0, 0, 0.15) 0px 16px 24px -4px;
  }

  .profile-voice-icon-sm{
    background: #9EA3BA;
    width:40px;
    height:40px;
    border-radius:50px;
  }

  .profile-voice-icon-img{
    width:50px;
    height:50px;
    padding:10px;
  }

  .profile-voice-icon-sm-img{
    width:40px;
    height:40px;
    padding:7px;
  }

  .profile-voice-headline{
    margin-top:16px;
    font-weight: 700;
    color:#313131;
    font-size: 18px;
    letter-spacing: -0.04em;
    line-height: 1.2em;
  }

  .profile-voice-subheadline{
    margin-top:16px;
    color:#6B6F76;
    font-size: 14px;
    line-height: 1.5em;
    margin-top:8px;
  }

  .profile-voice-link{
    color:#F0A613;
    margin-top:18px;
    font-weight: 600;
    font-family: "Inter", serif;
    line-height: 1em;
    text-decoration: none;
    display: block;
    font-size: 14px;
  }


.profile-heading{
  font-size: 24px;
  font-weight: 700;
  color:#313131;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  margin-top:40px;
}

.profile-activity-date{
  margin-top: 24px;
  color:#6B6F76;
  font-size: 14px;
  line-height: 1.5em;
  font-family: "Inter", serif;
  margin-bottom:12px;
}
.profile-voice-link--svg{
  height: 18px;
  width: 18px;
  vertical-align: middle;
  margin-right:6px;
}

.profile-activity-row-link{
  text-decoration: none !important;
}

.profile-activity-row{
  display:flex;
  margin-bottom:24px;
}

  .profile-activity-left{
    width:24px;
  }

    .profile-activity-check{
      svg{
        width:24px;
        height:24px;
        padding:6px;
        background:#F0A613;
        color:white;
        border-radius:100%;
      }
    }

    .profile-activity-line{
      width:2px;
      height: calc(100% - 22px);
      background: #ECEDF1;
      margin-left:11px;
      margin-top:4px;
    }

  .profile-activity-content{
    border-radius: 12px;
    padding:16px;
    margin-left:12px;
    width: calc(100% - 36px);
    box-shadow:rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  }

    .profile-activity-content-heading{
      font-size: 18px;
      font-weight: 700;
      color:#313131;
      letter-spacing: -0.04em;
      line-height: 1.4em;
    }

    .profile-activity-content-time{
      font-size: 12px;
      font-family: "Inter", serif;
      color:#6B6F76;
      line-height: 1em;
      margin-top:9px;

      svg{
        height:14px;
        width:14px;
        margin-right:6px;
        background:#6B6F76;
        vertical-align: middle;
        color:#fff;
        border-radius:100%;
        padding:2px;
      }
    }

    .profile-activity-content-status{
      font-size: 12px;
      font-family: "Inter", serif;
      color:#F0A613;
      line-height: 1em;
      margin-top:9px;

      svg{
        height:14px;
        width:14px;
        margin-right:6px;
        background:#F0A613;
        vertical-align: middle;
        color:#fff;
        border-radius:100%;
        padding:2px;
      }
    }

.profile-modal{
  position: fixed;
  top:100%;
  bottom:0;
  left:0;
  right:0;
  background:white;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  z-index:4;
  padding:56px 24px 24px 24px;
  overflow-y: scroll;

  a{
    text-decoration: none;
  }
}

  .profile-modal::-webkit-scrollbar {
    display: none;
  }

  .profile-modal-bg{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0, 0, 0, 0.5);
    z-index:3;
    display:none;
  }


    .profile-box-outer{
      border-radius: 28px;
      background: #F6F8FA;
      padding:8px;
      cursor:pointer;

      a{
        text-decoration: none;
      }
    }

      .profile-voice-title{
        margin-top:12px;
        line-height: 1em;
        font-size: 12px;
        color:#9EA3BA;
        font-weight: 500;
        margin-left: 12px;
        margin-bottom:12px;
        font-family: "Inter", serif;
      }

.app-settings-title{
  font-size: 12px;
  letter-spacing: -0.04em;
  color:#9EA3BA;
  font-weight: 600;
  font-family: "Inter", serif;
  margin-top:32px;
  line-height: 1.4em;
  margin-bottom:12px;
}

.app-settings-button{
  font-size:16px;
  height:56px;
  line-height: 56px;
  color:#313131;
  letter-spacing: -0.04em;
  font-weight: 700;


}

.app-settings-button--svg{
  width:24px;
  height: 24px;
  color:#9EA3BA;
  margin-right:12px;
  vertical-align: middle;
}

  .app-settings-button-line{
    background: #F6F8FA;
    height:1px;
    width:calc(100% - 45px);
    margin-left:45px;
  }

  .rotate-90{
    svg{
      transform: rotate(90deg);
    }
  }


.settings-title{
  font-size: 32px;
  font-weight: 700;
  color: #313131;
  letter-spacing: -0.04em;
  line-height: 1em;
  display: inline-block;
  margin-bottom:32px;
}

.settings-icon{
  width:60px;
  height:60px;
  border-radius: 100%;
  border:2px solid #313131;
  cursor:pointer;
  text-align: center;
  line-height: 42px;
  position: absolute;
  top:120px;
  right:24px;


  .settings-icon--img{
    width:56px;
    height:56px;
    border-radius: 100%;
    border:2px solid white;
    background-position: center;
    background-size: cover;
  }

  svg{
    color:white;
    background:#313131;
    padding:5px;
    fill:white;
    vertical-align: top;
    margin-top:6px;
    height:44px;
    width:44px;
    border-radius:100%;
  }
}


.edit-avatar-icon{
  position: absolute;
  bottom:-15px;
  right:-5px;

  svg{
    color:white;
    background:#2D67F6;
    padding:2px;
    fill:none;
    height:22px;
    width:22px;
    border-radius:100%;
    border:2px solid #F6F8FA;
  }
}

.results-stats{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex: 1 1 auto;
  margin-top: 48px;
  border-bottom: 2px solid #f6f8fa;


}

.results-stats-left,.results-stats-right{
  box-sizing: border-box;
  flex: 1;
  width: 1px;
  height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 0px 16px 0px;
  overflow: visible;
  z-index: 1;
  align-content: center;
  flex-wrap: nowrap;
  transform-perspective: 1200;
  border-radius: 0px 0px 0px 0px;
  gap: 8px;
  p{
    width: auto;
    height: auto;
    white-space: pre;
    z-index: 2;
    font-weight: 700;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: var(--Dark, #313131);
    font-size: 12px;
    letter-spacing: 0em;
    line-height: 1.2;
    text-align: center;
  }
}

.results-stats-left{
  border-right: 2px solid #f6f8fa;
}


.results-stats-icon{
  box-sizing: border-box;
  width: min-content;
  height: min-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background-color: #f0a613;
  overflow: visible;
  align-content: center;
  flex-wrap: nowrap;
  gap: 10;
  border-radius: 100%;
  
  svg{
    color: white;
    width: 32px;
    font-weight: 700;
  }
}

.results-stats-voice-rank{
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0px 0px 0px;
  overflow: visible;
  z-index: 1;
  align-content: center;
  flex-wrap: nowrap;
  gap: 24px;
  transform-perspective: 1200;
  border-radius: 0px 0px 0px 0px;
  border-color: #f6f8fa;
  border-style: solid;
  border-top-width: 2px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
}
.results-stats-bar{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  p{
    width: auto;
    height: auto;
    white-space: pre;
    z-index: 2;
    font-weight: 700;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: var(--Dark, #313131);
    font-size: 12px;
    letter-spacing: 0em;
    line-height: 1.2;
    text-align: center;
  }
}
.results-stats-bar input{
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  width: 100%;
  height: 18px;
  padding: 0px;
  gap: 12;
  border-radius: 24px;
  z-index: 1;
}

.results-stats-bar input[type="range"]::-moz-range-track {  
  background-color: pink;
}
.results-stats-bar input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  padding: 16px;
  box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.15) !important;
  background-color: #ffffff;
  overflow: visible;
  z-index: 1;
  border-radius: 100%;
  border: 1px solid #f6f8fa;  
}

.results-stats-bar input::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;

  width: 23px;
  height: 24px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 16px;
  box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.15) !important;
  background-color: #ffffff;
  overflow: visible;
  z-index: 1;
  align-content: center;
  flex-wrap: nowrap;
  gap: 10;
  border-radius: 100%;
  border: 1px solid #f6f8fa;
}
.results-attributes{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.results-attribute{
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  overflow: visible;
  z-index: 1;
  align-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  transform-perspective: 1200;
  border-radius: 24px;
  h1{
    width: 100%;
    height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    z-index: 2;
    font-weight: 600;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: var(--Light_Text, #9ea3ba);
    font-size: 16px;
    letter-spacing: 0em;
    line-height: 1.5;
    text-align: left;
  }
  p{
    width: 100%;
    height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    z-index: 2;
    font-weight: 500;
    font-style: normal;
    font-family: "Manrope", "Manrope Placeholder", sans-serif;
    color: var(--Dark, #313131);
    font-size: 16px;
    letter-spacing: 0em;
    line-height: 1.5;
    text-align: left;
  }
}
.modal-attr .results-attribute:first-of-type{
  margin-top: 24px;
  background-color: #F0A613;
  p, h1{
    color: white;

  }
}

.profile-voice-icon-row{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  align-items:center;
}

.change-voice-wrapper{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:12px;
  position:relative;
  margin-top:24px;
}

.change-voice-row{
  display:flex;
  flex-wrap:nowrap;
  place-content:center flex-start;
  align-items:center;
  gap:12px;
  border-radius:16px;
  background:rgb(246, 248, 250);
  padding:24px;
}

.change-voice-icon{
  width:28px;
  height:28px;
  filter: brightness(0) saturate(100%) invert(71%) sepia(2%) saturate(2286%) hue-rotate(192deg) brightness(93%) contrast(88%);
}

.change-voice-title{
  width:100%;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing: -0.04em;
  color:rgb(49, 49, 49);
}

.change-voice-arrow{
  width: 24px;
  height:24px;
  color:rgb(158, 163, 186);
}

.change-voice-retake-button{
  background:rgb(49, 49, 49);
  color:white;
  width:100%;
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing: -0.04em;
  border-radius:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px 24px;
  margin-top:24px;
}

.voice-breakdown-section{
  display:flex;
  flex-direction:column;
  gap:24px;
  position:relative;
}

.voice-breakdown-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  box-shadow:rgba(0, 0, 0, 0.15) 0px 16px 24px -4px;
  border-radius:50%;
}

.voice-breakdown-titles{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:4px;
}

.voice-breakdown-title{
  font-family:"Manrope", "Manrope Placeholder", sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing: -0.04em;
  color:rgb(49, 49, 49);
}

.voice-breakdown-subtitle{
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.voice-breakdown-text{
  color:rgb(107, 111, 118);
  line-height:1.5em;
  font-family:"Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space:pre-wrap;
  margin-top:-8px;
}

.voice-breakdown-line{
  background:rgb(246, 248, 250);
  height:1px;
  width:100%;
  margin-top:24px;
  margin-bottom:24px;
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}


/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.stripe-subscription-summary{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  border-radius:12px;
  border:1px solid #313131;
  padding:12px;
  overflow:hidden;
  gap:6px;
  margin-top:24px;
}
.profile-icon {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  border: 2px solid #313131;
  cursor: pointer;
  text-align: center;
  line-height: 42px;
  display: inline-block; }

.profile-icon-img {
  width: 38px;
  height: 38px;
  border-radius: 100%;
  border: 2px solid white;
  background-size: cover;
  background-position: center; }

.daily-insight-tag-svg {
  color: #313131;
  fill: #313131 !important;
  vertical-align: top;
  height: 14px;
  width: 14px;
  border-radius: 100%;
  display: inline-block; }

.streak {
  display: flex;
  place-items: center;
  gap: 4px;
  height: 42px;
  border: 1px solid #F6F8FA;
  border-radius: 21px;
  line-height: 42px;
  padding: 0 16px 0 10px;
  color: #313131;
  font-size: 16px;
  letter-spacing: -0.04em;
  font-weight: 700;
  white-space: nowrap;
  /*position: absolute;
  left: 50%;
  transform: translateX(-50%);*/ }

.streak--svg {
  height: 18px;
  width: 18px;
  border: 1px solid #F6F8FA;
  border-radius: 21px;
  line-height: 42px;
  color: #DE5320;
  font-size: 16px;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-right: 8px; }

.streak-confetti {
  position: absolute;
  height: 106px;
  width: 120px;
  left: calc(50vw - 60px - 24px);
  pointer-events: none; }

.topbar-center-title {
  font-size: 18px;
  font-weight: 700;
  color: #313131;
  line-height: 42px;
  text-align: center; }

.today-modal-back {
  display: flex;
  place-items: center;
  justify-items: center;
  align-items: center;
  position: fixed;
  left: 24px;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.1);
  background: white;
  z-index: 5;
  color: #313131; }

.today-back--svg {
  color: #313131;
  height: 20px;
  width: 20px;
  margin-top: 1px;
  margin-left: 7px; }

.profile-icon--svg {
  color: white;
  background: #313131;
  padding: 5px;
  fill: white;
  vertical-align: top;
  margin-top: 3px;
  height: 32px;
  width: 32px;
  border-radius: 100%; }

.today-welcome {
  margin-top: 39px; }

.today-welcome-name {
  color: #313131;
  letter-spacing: -0.04em;
  font-size: 28px;
  font-weight: 600;
  line-height: 1em; }

.today-active {
  margin-top: 12px;
  font-size: 14px;
  color: #6B6F76;
  line-height: 1.4em;
  font-family: "Inter", serif; }

.daily-insight-outer {
  border-radius: 28px;
  background: #F6F8FA;
  padding: 8px;
  margin-top: 32px;
  cursor: pointer; }
  .daily-insight-outer a {
    text-decoration: none; }

.daily-insight-inner {
  border-radius: 24px;
  padding: 24px;
  background: #fff; }

.daily-insight-tag {
  color: #6B6F76;
  font-size: 12px;
  font-weight: 500;
  font-family: "Inter", serif;
  line-height: 1em; }
  .daily-insight-tag svg {
    margin-right: 4px;
    height: 14px;
    width: 14px;
    vertical-align: middle;
    fill: #6B6F76; }

.daily-insight-heading {
  margin-top: 16px;
  line-height: 1.2em;
  font-weight: 700;
  font-size: 18px;
  color: #313131;
  letter-spacing: -0.04em; }

.daily-insight-subheading {
  margin-top: 8px;
  color: #6B6F76;
  line-height: 1.5em;
  font-size: 14px; }

.daily-insight-start, .daily-insight-start-green {
  color: #F0A613;
  margin-top: 18px;
  line-height: 1em;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", serif;
  display: inline-block; }

.daily-insight-start--svg, .daily-insight-start-green--svg {
  height: 16px;
  width: 16px;
  margin-right: 4px;
  vertical-align: middle;
  margin-top: -2px;
  fill: #fff;
  background: #F0A613;
  border-radius: 100%;
  padding: 2.5px; }

.daily-insight-start-green {
  color: #22AA99; }
  .daily-insight-start-green svg {
    color: white;
    fill: none;
    background: #22AA99; }

.daily-insight-duration {
  display: inline-block;
  float: right;
  color: #9EA3BA;
  margin-top: 18px;
  line-height: 1em;
  font-size: 12px;
  font-family: "Inter", serif; }

.today-reminder {
  margin-top: 8px;
  color: #9EA3BA;
  font-size: 12px;
  font-weight: 500;
  font-family: "Inter", serif;
  text-align: center; }
  .today-reminder svg {
    height: 12px;
    width: 12px;
    margin-right: 8px;
    vertical-align: middle;
    margin-top: -3px;
    fill: #9EA3BA; }
  .today-reminder span {
    display: inline-block;
    margin-left: 8px;
    color: #F0A613; }

.today-line {
  height: 1px;
  background: #F6F8FA;
  margin: 32px 0; }

.today-headline {
  color: #313131;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 1em;
  display: inline-block; }

.today-headline-right {
  font-family: "Inter", serif;
  color: #9EA3BA;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: -0.04em;
  display: inline-block;
  float: right; }

.today-category-link {
  text-decoration: none; }

.today-category {
  margin-top: 12px; }

.today-category-image {
  width: 110px;
  height: 110px;
  border-radius: 12px;
  display: inline-block;
  margin-right: 12px;
  background-size: cover;
  background-position: center;
  background-color: #F2F0E9; }

.today-category-right {
  width: calc(100% - 110px - 48px);
  display: inline-block;
  vertical-align: top; }

.today-category-name {
  font-size: 18px;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  font-weight: 700;
  color: #313131;
  margin-top: 32px; }

.today-category-desc {
  color: #6B6F76;
  font-size: 14px;
  font-family: "Inter", serif;
  font-weight: 600;
  margin-top: 8px; }
  .today-category-desc svg {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
    margin-top: -3px; }

.daily-affirmation-alert {
  width: calc(100% - 48px);
  border-radius: 16px;
  position: fixed;
  bottom: 112px;
  padding: 16px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  z-index: 10;
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  text-decoration: none; }
  .daily-affirmation-alert svg {
    width: 24px;
    height: 24px;
    color: white;
    display: inline-block;
    margin-right: 12px;
    vertical-align: top;
    margin-top: 4px;
    fill: white; }

.daily-affirmation-alert-middle {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 3px; }

.daily-affirmation-alert-title {
  font-size: 14px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.04em;
  white-space: nowrap; }

.daily-affirmation-alert-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: white;
  line-height: 1em; }

.daily-affirmation-alert-button {
  font-size: 12px;
  font-weight: 600;
  color: #313131;
  font-family: "Inter", serif;
  background: white;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none; }

.affirmation-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end; }

.affirmation-close {
  background: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
  border-radius: 22px;
  height: 44px;
  width: 44px;
  color: #313131;
  font-weight: 400;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; }

.affirmation-fade {
  height: 100%;
  display: block;
  background-color: transparent;
  inset: 0px;
  opacity: 1;
  transform: translateX(0px) translateY(-30%) translateZ(0px) scale(1) scaleX(1) scaleY(1) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg) skewX(0deg) skewY(0deg);
  z-index: 0;
  transform-origin: 50% 50% 0px; }

.affirmation-fade-inner {
  width: 100%;
  background: white;
  bottom: 0;
  height: 184px;
  position: absolute; }

.affirmation-streak {
  margin: auto;
  width: fit-content;
  margin-top: 16px;
  font-size: 16px;
  color: #313131;
  font-weight: 700;
  line-height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #F6F8FA;
  border-radius: 40px;
  padding: 13px 16px 13px 10px; }

.affirmation-popper {
  width: 300px;
  height: 300px;
  margin: auto;
  margin-top: calc(50vh - 300px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }

.affirmation-dots {
  position: absolute;
  z-index: -2;
  width: 200px;
  height: 200px;
  margin: auto; }

.affirmation-confetti {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: auto; }

.affirmation-icon {
  width: 96px;
  height: 96px;
  padding: 16px;
  background: grey;
  color: white;
  fill: white;
  border-radius: 48px;
  margin: auto; }

.affirmation-streak-icon {
  width: 18px;
  height: 18px; }

.daily-affirmation-top {
  font-size: 18px;
  color: #313131;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: center;
  margin-top: calc(78px + 44px); }
  .daily-affirmation-top svg {
    width: 16px;
    height: 16px;
    color: #6B6F76;
    display: inline-block;
    margin-right: 8px;
    fill: #6B6F76;
    vertical-align: top;
    margin-top: 4px; }

.daily-affirmation-title {
  margin-top: 19px;
  font-size: 28px;
  color: #313131;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  text-align: center; }

.daily-affirmation-subtitle {
  margin-top: 16px;
  font-size: 16px;
  color: #6B6F76;
  font-weight: 500;
  line-height: 1.4em;
  text-align: center; }

.daily-affirmation-illustration {
  width: 100%;
  position: fixed;
  right: 0;
  z-index: -2;
  bottom: 60px; }

.affirmation-illustration-wrapper {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  height: 200px;
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 60px;
  z-index: -1; }

.daily-affirmation-complete-button {
  width: calc(100% - 48px);
  border-radius: 30px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: fixed;
  bottom: 56px;
  color: white;
  font-size: 18px;
  text-decoration: none; }

.daily-affirmation-modal {
  position: fixed;
  z-index: 11;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  display: none; }

.today-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 164px; }

.today-hr {
  width: 100%;
  z-index: 1;
  height: 1px;
  background: #F6F8FA; }

.today-item {
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  overflow: visible;
  align-content: center;
  flex-wrap: nowrap;
  gap: 24px;
  border-radius: 0px 0px 0px 0px; }

.today-voice-card {
  box-sizing: border-box;
  width: 100%;
  height: 308px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 24px;
  overflow: hidden;
  align-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  border-radius: 24px;
  position: relative;
  text-decoration: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 80px; }
  .today-voice-card .today-insight-card-link {
    position: absolute;
    bottom: 12px;
    right: 12px;
    text-decoration: none;
    background-color: white; }
    .today-voice-card .today-insight-card-link p {
      color: #313131; }
    .today-voice-card .today-insight-card-link .today-insight-card-link-icon {
      background-color: #313131;
      color: #313131; }
  .today-voice-card-image {
    width: 110%;
    height: 282px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    position: absolute;
    border-radius: 12px;
    top: 39%; }
  .today-voice-card-header {
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    overflow: visible;
    padding: 0px;
    align-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    border-radius: 0px 0px 0px 0px; }
    .today-voice-card-header-left {
      height: min-content;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      overflow: visible;
      padding: 0px;
      align-content: flex-start;
      flex-wrap: nowrap;
      gap: 8px;
      border-radius: 0px 0px 0px 0px; }
      .today-voice-card-header-left p {
        width: auto;
        height: auto;
        white-space: pre;
        font-weight: 500;
        font-style: normal;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        color: var(--Dark, #313131);
        font-size: 12px;
        letter-spacing: 0em;
        line-height: 1.2;
        text-align: left; }
      .today-voice-card-header-left h1 {
        width: 100%;
        height: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-word;
        font-weight: 700;
        font-style: normal;
        font-family: "Manrope", "Manrope Placeholder", sans-serif;
        color: var(--Dark, #313131);
        font-size: 28px;
        letter-spacing: -0.04em;
        line-height: 1.1;
        text-align: left; }
    .today-voice-card-header-right {
      color: #313131; }
      .today-voice-card-header-right svg {
        height: 28px;
        width: 28px; }

.today-voice-progress {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  overflow: visible;
  align-content: center;
  flex-wrap: nowrap;
  gap: 16px;
  border-radius: 16px; }
  .today-voice-progress-image {
    width: 40px;
    height: 40px;
    display: block;
    box-shadow: 0px 12px 24px 4px rgba(0, 0, 0, 0.05);
    overflow: visible;
    aspect-ratio: 1 / 1;
    background-image: url();
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100%; }
  .today-voice-progress-content {
    flex: 1;
    width: 1px;
    height: min-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
    padding: 0px;
    align-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    border-radius: 0px 0px 0px 0px; }
    .today-voice-progress-content h3 {
      width: 100%;
      height: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-word;
      font-weight: 700;
      font-style: normal;
      font-family: "Manrope", "Manrope Placeholder", sans-serif;
      color: var(--Dark, #313131);
      font-size: 16px;
      letter-spacing: -0.04em;
      line-height: 1;
      text-align: left; }
    .today-voice-progress-content p {
      width: 100%;
      height: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-word;
      font-weight: 500;
      font-style: normal;
      font-family: "Inter", "Inter Placeholder", sans-serif;
      color: var(--Light_Text, #9ea3ba);
      font-size: 12px;
      letter-spacing: 0em;
      line-height: 1;
      text-align: left; }
  .today-voice-progress-bar {
    margin-top: 4px;
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
    padding: 0px;
    align-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    border-radius: 0px 0px 0px 0px; }
    .today-voice-progress-bar-percentage {
      flex: 1;
      width: 1px;
      height: 14px;
      display: block;
      background-color: #f6f8fa;
      overflow: hidden;
      border-radius: 40px; }
    .today-voice-progress-bar-text p {
      width: 28px;
      height: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-word;
      font-weight: 500;
      font-style: normal;
      font-family: "Inter", "Inter Placeholder", sans-serif;
      color: var(--Light_Text, #9ea3ba);
      font-size: 12px;
      letter-spacing: 0em;
      line-height: 1;
      text-align: right; }

.today-daily-insight-container {
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  padding: 0px;
  align-content: center;
  flex-wrap: nowrap;
  gap: 18px;
  border-radius: 0px 0px 0px 0px; }

.today-daily-insight-header {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
  padding: 0px;
  align-content: center;
  flex-wrap: nowrap;
  border-radius: 0px 0px 0px 0px; }
  .today-daily-insight-header-left {
    display: flex;
    gap: 8px; }
    .today-daily-insight-header-left-icon {
      height: 18px;
      width: 18px; }
      .today-daily-insight-header-left-icon svg {
        color: #6B6F76;
        height: 18px;
        width: 18px;
        -moz-transform: scale(-1, -1);
        -o-transform: scale(-1, -1);
        -webkit-transform: scale(-1, -1);
        transform: scale(-1, -1); }
    .today-daily-insight-header-left h3 {
      flex: 1;
      height: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-word;
      font-weight: 700;
      font-style: normal;
      font-family: "Manrope", "Manrope Placeholder", sans-serif;
      color: var(--Dark, #313131);
      font-size: 20px;
      letter-spacing: -0.04em;
      line-height: 1;
      text-align: left; }
  .today-daily-insight-header-right {
    box-sizing: border-box;
    width: min-content;
    height: min-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 10px 6px 10px;
    background-color: #fdf6e9;
    overflow: visible;
    z-index: 1;
    align-content: center;
    flex-wrap: nowrap;
    border-radius: 8px; }
    .today-daily-insight-header-right p {
      width: auto;
      height: auto;
      white-space: pre;
      font-weight: 600;
      font-style: normal;
      font-family: "Inter", "Inter Placeholder", sans-serif;
      color: var(--Creative, #f0a613);
      font-size: 12px;
      letter-spacing: 0em;
      line-height: 1;
      text-align: left; }

.today-quote {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px;
  background-color: #f6f8fa;
  overflow: hidden;
  align-content: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  border-radius: 24px; }
  .today-quote p {
    width: 100%;
    height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    font-weight: 500;
    font-style: normal;
    font-family: "Inter", "Inter Placeholder", sans-serif;
    color: var(--Dark, #313131);
    font-size: 18px;
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-align: left; }
  .today-quote em {
    width: 100%;
    height: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    font-weight: 500;
    font-style: normal;
    font-family: "Inter", "Inter Placeholder", sans-serif;
    color: var(--Off_Dark, #6b6f76);
    font-size: 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: left; }

.today-insight-card-container {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 24px 24px 24px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05);
  align-content: center;
  flex-wrap: nowrap;
  background-color: #FEFAF4;
  gap: 24px;
  border-radius: 24px;
  position: relative;
  overflow: hidden; }

.today-insight-card-circle {
  width: 794px;
  height: 794px;
  display: block;
  background-color: #ffffff;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  z-index: 0;
  position: absolute;
  top: 60px; }

.today-insight-card-header {
  width: 100%;
  height: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible;
  padding: 0px;
  align-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  border-radius: 0px 0px 0px 0px;
  z-index: 1; }

.today-insight-card-container h2 {
  width: 100%;
  height: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  font-weight: 700;
  font-style: normal;
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  color: var(--Dark, #313131);
  font-size: 24px;
  letter-spacing: -0.04em;
  line-height: 1.2;
  text-align: center;
  z-index: 1; }

.today-insight-card-container a {
  z-index: 1;
  text-decoration: none; }

.today-insight-card-container p {
  height: auto;
  word-wrap: break-word;
  word-break: break-word;
  font-weight: 500;
  font-style: normal;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  color: var(--Off_Dark, #6b6f76);
  font-size: 14px;
  letter-spacing: 0em;
  line-height: 1.5em;
  text-align: center;
  align-self: center; }

.today-insight-card-container hr {
  width: 100%;
  border-top: 1px solid #f6f8fa;
  display: block;
  overflow: visible;
  border-radius: 0px 0px 0px 0px;
  z-index: 1; }

.today-insight-card-link {
  box-sizing: border-box;
  width: min-content;
  height: min-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 20px 16px 16px;
  overflow: visible;
  align-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  border-radius: 40px;
  z-index: 1; }
  .today-insight-card-link p {
    width: auto;
    height: auto;
    white-space: pre;
    font-weight: 600;
    font-style: normal;
    font-family: "Inter", "Inter Placeholder", sans-serif;
    color: var(--Background, #ffffff);
    font-size: 14px;
    letter-spacing: 0em;
    line-height: 1;
    text-align: left; }
  .today-insight-card-link .today-insight-card-link-icon {
    height: 18px;
    width: 18px;
    border-radius: 100%;
    display: flex;
    place-items: center;
    align-items: center;
    background-color: white;
    margin-right: 4px; }
    .today-insight-card-link .today-insight-card-link-icon svg {
      stroke: transparent;
      height: 18px;
      width: 18px;
      padding: 4px;
      margin-left: 1px; }
  .today-insight-card-link.complete {
    background-color: #F6F8FA; }
    .today-insight-card-link.complete p {
      color: #313131; }
    .today-insight-card-link.complete .today-insight-card-link-icon {
      height: 24px;
      width: 24px;
      display: flex;
      place-items: center;
      align-items: center;
      background-color: unset; }
      .today-insight-card-link.complete .today-insight-card-link-icon svg {
        stroke: #313131;
        height: 24px;
        width: 24px;
        padding: 4px;
        margin-left: 1px;
        stroke-width: 3px; }

.today-insight-card-countdown {
  display: flex;
  gap: 8px;
  flex-direction: row;
  z-index: 1; }
  .today-insight-card-countdown p {
    margin-left: 16px;
    text-align: left; }

.today-insight-card-countdown-icon {
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 24px 16px 24px;
  background: linear-gradient(180deg, #f6f8fa 0%, #ffeee8 100%);
  overflow: visible;
  align-content: center;
  flex-wrap: nowrap;
  border-radius: 24px;
  z-index: 1; }

.today-insight-card-countdown-icon img {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
  border-radius: 100%;
  z-index: 1; }

.today-insight-card-avatar-outer {
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: visible;
  align-content: center;
  flex-wrap: nowrap;
  gap: 10;
  border-radius: 100%;
  border: 4px solid white;
  z-index: 1; }

.today-insight-card-avatar-inner {
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border-radius: 100%; }

.today-insight-card-avatar-inner-img {
  border-radius: 100%;
  background-size: cover;
  background-position: center center;
  width: 42px;
  height: 42px;
  border: 2px solid white;
  box-sizing: border-box;
  position: relative; }
  .today-insight-card-avatar-inner-img img {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    position: absolute;
    padding: 3px;
    bottom: -4px;
    right: -4px; }

.streak-info-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 4, 15, 0.4);
  z-index: 13; }

.streak-info-modal {
  position: fixed;
  bottom: 8px;
  width: calc(100% - 16px);
  max-width: 500px;
  background: white;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  z-index: 14;
  padding: 0 24px 48px 24px; }

.streak-info-line-wrapper {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center; }

.streak-info-line {
  background: #cfcfcf;
  border-radius: 24px;
  height: 5px;
  width: 40px; }

.streak-info-fire {
  position: relative; }

.streak-info-svg {
  width: 44px;
  height: 44px;
  color: #DE5320; }

.streak-info-heading {
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1em;
  margin-top: -12px;
  letter-spacing: -0.04em; }

.streak-info-description {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4em;
  color: #6b6f76;
  margin-bottom: 12px; }

.streak-info-dismiss {
  background: #313131;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  padding: 18px 24px;
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 700; }

.streak-info-link {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4em;
  color: #6b6f76;
  margin-top: 12px;
  text-align: center;
  text-decoration: underline; }

.streak-info-confetti {
  position: absolute;
  height: 106px;
  width: 120px;
  top: -34px;
  left: -38px;
  pointer-events: none;
  z-index: 2; }

.nav-onboarding-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 4, 15, 0.4);
  z-index: 13; }

.nav-onboarding-modal {
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  padding: 32px 24px 88px 24px;
  display: flex;
  align-items: center;
  flex-flow: column;
  flex-wrap: nowrap; }

.nav-onboarding-icon-row {
  border-radius: 80px;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  gap: 35px;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  position: relative;
  overflow: visible; }

.nav-onboarding-icon-wrapper {
  display: flex;
  align-items: center;
  flex-flow: column;
  flex-wrap: nowrap;
  gap: 2px;
  color: #101720;
  padding: 8px; }

.nav-onboarding-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease; }

.nav-onboarding-icon-title {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4em;
  color: #101720;
  /* inactive: rgb(158, 163, 186) */
  letter-spacing: -0.02em; }

.nav-onboarding-icon-indicator {
  filter: blur(20px);
  border-radius: 100%;
  position: absolute;
  left: calc(50vw - 140px);
  top: 44px;
  height: 44px;
  width: 44px;
  z-index: -1;
  /*transition: all 0.3s ease;*/ }

.nav-onboarding-heading {
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #313131;
  margin-top: 24px; }

.nav-onboarding-description {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5em;
  letter-spacing: -0.02em;
  color: #6b6f76;
  margin-top: 8px; }

.nav-onboarding-progress-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px; }

.nav-onboarding-progress {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px; }

.nav-onboarding-progress-dot {
  height: 8px;
  width: 8px;
  border-radius: 24px;
  background: #e9f1fe;
  transition: all 0.3s ease; }

.nav-onboarding-next {
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size: 13px;
  font-weight: 600; }

.today-insights-onboarding {
  background: #0086fc;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 16px 0px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  position: relative; }

.today-insights-onboarding-text {
  display: flex;
  flex-wrap: nowrap;
  flex-flow: column;
  gap: 6px;
  width: 100%; }

.today-insights-onboarding-heading {
  font-family: "Manrope", "Manrope Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: white; }

.today-insights-onboarding-description {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1em;
  color: rgba(255, 255, 255, 0.5); }

.today-insights-onboarding-close {
  color: white;
  width: 40px;
  height: 40px;
  padding: 8px; }

.today-insights-onboarding-triangle {
  flex: 0 0 auto;
  height: 18px;
  left: 36px;
  overflow: visible;
  position: absolute;
  top: -14px;
  width: 22px;
  z-index: 1; }

.milestone-title {
  padding-top: 32px;
  margin-top: 22px;
  border-top: 1px solid #F6F8FA;
  font-size: 24px;
  font-weight: 700;
  color: #313131;
  letter-spacing: -0.04em;
  line-height: 1.2em; }

.milestone-container {
  display: flex;
  margin-top: 30px;
  align-items: stretch;
  position: relative; }

.milestone-left {
  position: absolute;
  top: 5px;
  bottom: 60px;
  left: 11px;
  /* Matches margin-left */
  width: 27px; }

.milestone-left-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: repeating-linear-gradient(to bottom, #CFCFCF 0, #CFCFCF 7px, transparent 7px, transparent 14px); }

.milestone-right {
  width: calc(100% - 46px);
  display: inline-block;
  vertical-align: top;
  margin-left: 39px; }

.milestone-step-row {
  margin-bottom: 28px;
  border: 1px solid #f6f8fa;
  position: relative;
  height: 92px;
  border-radius: 12px; }

.milestone-step-row-arrow {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 16px;
  top: 36px;
  color: #6B6F76; }

.milestone-step-row-image {
  padding: 4px;
  vertical-align: top;
  display: inline-block;
  width: 80px;
  height: 92px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px; }
  .milestone-step-row-image div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */ }

.milestone-step-row-text {
  padding: 16px;
  vertical-align: top;
  display: inline-block;
  width: calc(100% - 90px);
  height: 92px;
  position: relative; }

.milestone-step-row-text-pretitle {
  font-weight: 500;
  color: #6B6F76;
  font-size: 12px;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  letter-spacing: 0em;
  line-height: 1em;
  margin-bottom: 8px; }

.milestone-step-row-text-title {
  font-weight: 600;
  color: #313131;
  font-size: 16px;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  letter-spacing: -0.04em;
  line-height: 1.2em; }

.milestone-step-row-text-subtitle {
  font-weight: 500;
  color: #313131;
  font-size: 12px;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  line-height: 1em;
  margin-top: 9px; }
  .milestone-step-row-text-subtitle svg {
    height: 14px;
    width: 14px;
    color: #fff;
    fill: #313131;
    vertical-align: top;
    margin-top: -1px; }

.milestone-step-row-icon {
  background: #22AA99;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 32px;
  left: -42px;
  border: 2px solid white;
  box-sizing: content-box; }
  .milestone-step-row-icon svg {
    color: white;
    border-radius: 100%;
    height: 18px;
    width: 18px;
    margin: 3px; }

.step-top {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  height: 295px;
  width: 100%;
  text-align: center; }
  .step-top img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    margin-top: 50px; }

.step-container {
  padding: 64px 32px 32px 32px; }

.step-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  color: #313131;
  text-align: center; }

.step-length {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1em;
  color: #313131;
  margin-top: 13px;
  text-align: center; }
  .step-length svg {
    height: 12px;
    width: 12px;
    vertical-align: top;
    margin-right: 4px;
    margin-top: -1px; }

.step-description {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  color: #6B6F76;
  margin-top: 12px;
  text-align: center; }

.step-insights-container {
  margin-top: 40px;
  border-radius: 28px;
  background: #F6F8FA;
  padding: 24px 8px 8px 8px; }

.step-insights-heading {
  padding-left: 16px;
  font-weight: 500;
  color: #9EA3BA;
  font-size: 12px;
  font-family: "Inter", "Inter Placeholder", sans-serif; }

.step-insights-inner {
  border-radius: 24px;
  background: white;
  padding: 24px 16px 1px 16px;
  margin-top: 12px;
  color: #6B6F76;
  font-size: 16px;
  letter-spacing: 0em;
  line-height: 1.5em; }

.step-insights-row {
  margin-bottom: 16px; }

.step-insights-left {
  display: inline-block;
  width: 20px;
  vertical-align: top;
  height: 20px;
  border-radius: 100%;
  background: #22AA99;
  margin-top: 5px;
  margin-right: 10px; }
  .step-insights-left svg {
    width: 15px;
    height: 15px;
    color: #fff;
    margin-top: 3px;
    margin-left: 3px; }

.step-insights-right {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  display: inline-block;
  width: calc(100% - 44px);
  vertical-align: top;
  color: #6B6F76;
  font-size: 16px;
  line-height: 1.5em; }

.step-body-row-heading {
  color: #313131;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  margin-top: 40px; }

.step-body-row-text {
  font-family: "Inter", "Inter Placeholder", sans-serif;
  width: 100%;
  color: #6B6F76;
  font-size: 16px;
  line-height: 1.5em;
  margin-top: 16px; }

.step-takeaway {
  padding: 24px;
  border-radius: 28px;
  background: #E9F1FE;
  margin-top: 40px;
  color: #0086FC; }

.step-takeaway-heading {
  font-weight: 500;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 12px; }
  .step-takeaway-heading svg {
    margin-right: 4px;
    display: inline-block;
    width: 14px;
    height: 14px;
    fill: #0086FC;
    vertical-align: middle;
    margin-top: -2px; }
  .step-takeaway-heading div {
    display: inline-block;
    width: calc(100% - 40px); }

.step-takeaway-subheading {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3em;
  margin-top: 13px; }

.step-footer-button {
  background: #E9F1FE;
  height: 56px;
  border-radius: 56px;
  text-align: center;
  line-height: 56px;
  margin-top: 40px;
  color: #0086FC;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.04em;
  cursor: pointer; }

.step-footer-button-icon {
  display: inline-block;
  width: 20px;
  vertical-align: middle;
  height: 20px;
  border-radius: 100%;
  background: #0086FC;
  margin-top: -3px;
  margin-right: 10px;
  line-height: 20px; }
  .step-footer-button-icon svg {
    width: 15px;
    height: 15px;
    color: #fff;
    margin-top: 3px;
    margin-left: 2px; }

.step-footer-button-active {
  background: #0086FC;
  box-shadow: 0px 4px 12px -2px #0086fc;
  color: #fff; }
  .step-footer-button-active .step-footer-button-icon {
    background: #fff; }
    .step-footer-button-active .step-footer-button-icon svg {
      color: #0086FC; }

.step-footer-button-incomplete {
  text-align: center;
  margin-top: 15px;
  color: #6B6F76;
  font-size: 12px;
  font-weight: 500;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  text-decoration: underline;
  cursor: pointer; }

.journey-locked-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 4, 15, 0.4);
  z-index: 13; }

.journey-locked-modal {
  position: fixed;
  bottom: 8px;
  width: calc(100% - 16px);
  max-width: 500px;
  background: white;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  z-index: 14;
  padding: 0 24px 48px 24px; }
.upgrade-content {
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:center;
  z-index:3;
  position:relative;
  gap:12px;
}

  .upgrade-premium-header{
    display:flex;
    flex-wrap:nowrap;
    color:white;
    font-size:18px;
    align-items:center;
    gap:6px;

    img {
      width:24px;
      height:24px;
    }
  }

  .upgrade-img{
    width:100%;
    height:auto;
  }

  .upgrade-bg2{
    position:absolute;
    top:0;
    width:100%;
    height:390px;
    z-index:1;
    left:0;
    background-size: cover;
  }

  .upgrade-bg-cover{
    width:100%;
    height:390px;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background:linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(7, 5, 8) 100%);
  }

.upgrade-logo{
  width:100px;
  height:22px;
}

.upgrade-premium{
  background-image:linear-gradient(270deg, rgb(239, 188, 120) 0%, rgb(245, 228, 189) 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  font-size:18px;
  font-weight:700;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:6px;


  img {
    width:24px;
    height:24px;
  }
}

.upgrade-premium-text{
  color:white;
  font-size:28px;
  font-weight:600;
  text-align:center;
}

.upgrade-features{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  margin-top:12px;
}

  .upgrade-feature{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    color:white;
    gap:16px;

    svg {
      width:24px;
      height:24px;
      color:#F1BE79;
    }
  }

.upgrade-members{
  color:white;
  font-size:24px;
  font-weight:600;
  text-align:center;
  margin-top:12px;
  margin-bottom:12px;
}

.upgrade-checkout-bottom{
  position: absolute;
  bottom:0;
  width:100%;
}

.upgrade-trial-prompt{
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(23, 31, 84, 0) 0%, rgba(255, 255, 255, 0.1)  100%);
  background-color:rgba(255, 255, 255, 0.1);
  border-radius:24px;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 12px 16px;
  color:white;
  width:100%;
}

  .upgrade-trial-toggle{
    background-color:rgba(255, 255, 255, 0.2);
    padding:4px;
    display:flex;
    align-items:center;
    position:relative;
    border-radius:24px;
    width:54px;
    justify-content:left;
    transition:all 0.3s;
  }

  .upgrade-trial-toggle-dot{
    height:24px;
    width:24px;
    background-color:white;
    border-radius:100%;
  }

  .upgrade-trial-toggle-active{
    background-color:#F1BE79;
    justify-content:right;
    transition:all 0.3s;
  }

.upgrade-button{
  background:white;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgb(23, 31, 84);
  font-size:18px;
  font-weight:700;
  border-radius:24px;
  padding:16px 24px;
  width:100%;
  text-decoration:none;
}

.upgrade-plan-text{
  color:white;
  font-size:14px;
  font-weight:500;
  height: 24px;
}


/* Light version of upgrade on dynamic flows */

.flow-upgrade-bottom{
  position: absolute;
  width:calc(100% - 48px);
  bottom:32px;
}


  .flow-upgrade-trial-prompt{
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(23, 31, 84, 0) 0%, rgba(255, 255, 255, 0.1)  100%);
    background-color:rgba(0, 0, 0, 0.1);
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 16px 16px 20px;
    color:#313131;
    width:100%;
    margin-bottom:24px;
  }

    .flow-upgrade-trial-toggle{
      background:#9EA3BA;
      padding:4px;
      display:flex;
      align-items:center;
      position:relative;
      border-radius:24px;
      width:54px;
      justify-content:left;
      transition:all 0.3s;
    }

    .flow-upgrade-trial-toggle-dot{
      height:24px;
      width:24px;
      background-color:white;
      border-radius:100%;
    }

    .flow-upgrade-trial-toggle-active{
      background-color:#F1BE79;
      justify-content:right;
      transition:all 0.3s;
    }

  .flow-upgrade-button{
    background:#313131;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgb(23, 31, 84);
    font-size:18px;
    font-weight:700;
    border-radius:30px;
    padding:16px 24px;
    width:100%;
    color:white;
    text-decoration:none;
    margin-bottom:12px;
  }

    .flow-upgrade-button2{
      display: block;
      bottom: 190px;
      background-color: #0086fc;
      border-radius: 16px;
      position: fixed;
      left: 24px;
      width: calc(100% - 48px);
      height: 50px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      text-decoration: none;
      z-index: 11;
      font-weight:700;
      font-size:20px;
    }

  .flow-upgrade-plan-text{
    color:#313131;
    font-size:14px;
    font-weight:500;
    height: 24px;
    text-align: center;
  }



/* end of light version */


.flex-spacer {
  width:100%;
  flex-grow:1;
  max-height:124px;
}

.upgrade-carousel{
  position:relative;
  width:100%;
}

  .upgrade-carousel-image-light-bg{
    background: white;
    width:260px;
    height:280px;
    border-radius:24px;
    margin-right:40px;
  }

  .upgrade-carousel-images{
    width:100%;
    overflow:scroll;
    display:flex;
    flex-wrap:nowrap;
    gap:12px;
    transition: transform 2s ease-in-out;
  }

  .upgrade-carousel-bg{
    background:linear-gradient(rgba(7, 5, 8, 0) 0%, rgb(7, 5, 8) 100%);
    position:absolute;
    width:calc(100% + 48px);
    height:331px;
    bottom:0;
    left:-24px;
    z-index:2;
  }

  .upgrade-carousel-image{
    height:400px;
  }


@-webkit-keyframes upgrade-dot-spin {
  from {
      -webkit-transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(360deg);
  }
}

.upgrade-spinning-dots{
  width:100%;
  position:absolute;
  top:-155px;
  left:0;
  -webkit-animation-name: upgrade-dot-spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 30s;
}


.upgrade-voice-icons{
  width:152px;
  height:152px;
  position:absolute;
  top:230px;
  left:calc(50% - 72px);
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

.upgrade-voice-bg-icon{
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 100%;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 16px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:2;
  width:64px;
  height:64px;
}

  .upgrade-voice-bg-icon-img{
    width:32px;
    height:32px;
  }


.upgrade-voice-main-icon{
  backdrop-filter: blur(10px);
  background-color: rgba(236, 193, 131, 0.8);
  border-radius: 100%;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 16px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:calc(50% - 44px);
  z-index:3;
  left:calc(50% - 44px);
  padding:16px;
  width:88px;
  height:88px;
}

  .upgrade-voice-main-icon-img{
    width:56px;
    height:56px;
  }

.upgrade-voice-bg-dots {
  height: auto;
  width: 240px;
  top: -44px;
  left: -44px;
  z-index:1;
  position:absolute;
  -webkit-animation-name: upgrade-dot-spin;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 30s;
}

.upgrade-close{
  position:absolute;
  right:24px;
  top:0px;
  color:white;

  svg {
    width:24px;
    height:24px;
  }
}


.stripe-checkout-container{
  width:412px;
  margin:auto;
  margin-top:104px;
  padding-bottom: 100px;
}

  .stripe-checkout-container-inner{
    width:90%;
    margin-left:5%;
    input{
      width:100%;
    }
  }

  .InputContainer .InputElement{
    border:1px solid #ccc;
  }

  .stripe-payment-errors{
    display: none;
    padding:10px 12px;
    border: 1px solid red;
    color:red;
  }


.paywall-web-footer{
  position: fixed;
  bottom:0;
  border-top:1px solid #F6F8FA;
  background:white;
  z-index:3;
  padding:24px;
  width: 412px;
  left:calc(50vw - 206px);
}

  .paywall-web-footer-note{
    font-size: 12px;
    color: 6B6F76;
    font-family: "Inter", "Inter Placeholder", sans-serif;
    margin-bottom: 12px;
    text-align: center;
  }

  .payment-form-card-modal{
    position: fixed;
    height:80vh;
    top:10vh;
    max-height:600px;
    background:white;
    z-index:5;
    padding:24px;
    width: 392px;
    left:calc(50vw - 196px);
    border:1px solid #F6F8FA;
    border-radius: 20px;
    display: none;
    overflow-y: scroll;
  }

    .payment-form-card-modal::-webkit-scrollbar {
      display: none;
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }

    .payment-form-card-modal-overlay{
      background-color: rgba(4, 4, 15, 0.4);
      position: fixed;
      top:0;
      right:0;
      left:0;
      bottom:0;
      z-index:4;
      display: none;
    }

      .payment-modal-back{
        width:44px;
        height:44px;
        border-radius:100%;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px 0px;
        position: absolute;
        top:24px;
        left:24px;
        line-height: 44px;
        text-align:center;
        cursor: pointer;

        svg{
          padding:10px;
          stroke: #313131;
          stroke-width: 2px;
        }
      }

      .payment-modal-topbar{
        text-align: center;
        height:56px;
        font-size: 16px;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        color:#313131;
        padding-top:12px;
      }

      .payment-modal-headline{
        font-size: 24px;
        color:#313131;
        font-weight: 700;
        line-height: 1.2em;
        letter-spacing: -0.04em;
        text-align: center;
        margin-top: 24px;

        span{
          color:#0086FC;
        }
      }

      .pay-with-card{
        height:40px;
        background:#F6F8FA;
        border-radius:4px;
        cursor:pointer;
        margin-top:12px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.04em;
        color:#313131;
        text-align: center;
        line-height: 40px;
      }




      .payment-modal-total{
        padding:25px 0;
        border-top:1px solid #F6F8FA;
        border-bottom:1px solid #F6F8FA;
        margin-top:32px;
        margin-bottom:22px;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        font-size: 12px;
        color:#6B6F76;
        line-height: 1em;

        div{
          float:right;
          font-weight: 600;
          font-size: 15px;

          span{
            text-decoration:line-through;
            color:#9EA3BA;
            font-weight: 400;
          }
        }
      }

      .payment-modal-submit{
        background: #0086FC;
        font-size: 16px;
        font-weight: 700;
        padding: 14px 0;
        text-align: center;
        color:#fff;
        border:0;
        width:100%;
        margin-top:22px;
        border-radius: 16px;
        vertical-align: top;

        svg{
          width:16px;
          height:16px;
          margin-right:4px;
          margin-top:3px;
          stroke: white;;
          stroke-width: 3px;
          display: inline-block;
          vertical-align: top;
        }
      }

      .payment-modal-row{
        margin-top: 10px;
        margin-bottom: 10px;
        position: relative;
      }

      .payment-modal-secure{
        margin-top:32px;
        color:#22AA99;
        background: rgba(34, 170, 153, 0.1);
        width:180px;
        margin-left:calc(50% - 90px);
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        padding:4px;
        border-radius: 6px;

        svg{
          width:16px;
          height:16px;
          margin-right:4px;
          stroke: #22AA99;;
          stroke-width: 2px;
          display: inline-block;
          vertical-align: top;
        }
      }

      .payment-modal-footer{
        font-size: 12px;
        color:#9EA3BA;
        text-align: center;
        font-family: "Inter", "Inter Placeholder", sans-serif;
        margin-top:12px;

        a{
          color:#9EA3BA;
          text-decoration: underline;
        }
      }

      .payment-modal-text-field{
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 4px;
        font-size:14px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05);
        font-family: "Inter", "Inter Placeholder", sans-serif;
        color:#313131;
        height:36px;
        line-height: 36px;
        width:100%;
      }

        .payment-modal-label{
          font-size: 11px;
          font-weight: 500;
          color:#666;
          display: block;
        }

        #card-element {
          border: 1px solid #ccc;
          padding: 10px;
          border-radius: 4px;
          margin-top: 6px;
          margin-bottom: 6px;
          box-shadow: 0 2px 4px 0 rgba(0,0,0,0.07),0 1px 1.5px 0 rgba(0,0,0,0.05);
          font-family: "Inter", "Inter Placeholder", sans-serif;
          color:#313131;
        }
@media (max-width: 500px){

  .paywall-web-footer{
    width:100vw;
    left: 0;
  }

  .payment-form-card-modal{
    width:90vw;
    left:5%;
  }
}


@media (max-height: 700px){
  .ppo-top{
    display:none;
  }

  .ppo-voice-top{
    margin-top:0;
    height:180px;

    .ppo-voice-icon{
      top: 20px;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */