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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pistachio {
  background-color: #C1EDCC;
}

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

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

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

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

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

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

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

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

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

.lilac {
  background-color: #E7BBE3;
}

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

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

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

.violet {
  background-color: #B837B1;
}

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

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

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

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

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

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

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

.tangerine {
  background-color: #F19C79;
}

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

.gold {
  background-color: #FFD000;
}

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

.pearl-white {
  background: #F5F5F5;
}

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

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

.melbourne-red {
  background: #B40B28;
}

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

.verde-ithaca {
  background: #A8C539;
}

.arancio-borealis {
  background: #FF5A00;
}

.chalk {
  background: #D7D1C7;
}

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

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

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

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

/* Error styling for form validation */
.error-input {
  border: 1px solid #CE2D4F !important;
}

.error-input:focus {
  border: 1px solid #CE2D4F !important;
}

.error-text {
  color: #CE2D4F;
  font-size: 12px;
  margin-top: 4px;
}

/* Device setup button on home screen */
.set-up-container {
  position: absolute;
  bottom: 90px;
  width: 100%;
  height: 80px;
  left: 0;
  z-index: 150;
  display: none !important;
  padding: 16px 5%;
  background: #FFFFFF;
  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 8px 8px 0px 0px;
  border-bottom: 1px solid #F2F2F2;
}
.set-up-container a:active, .set-up-container a:focus {
  text-decoration: none;
  outline: none;
  color: white;
}

#word-hunt-banner .more-options-dropdown span {
  color: #838383;
}
#word-hunt-banner .inner-content .content .wordhunt-check-answer-container {
  width: auto;
  display: inline-block;
  position: relative;
  align-self: flex-end;
}
#word-hunt-banner .inner-content .content .wordhunt-check-answer-container #wordhunt-check-answer {
  border-radius: 6px;
}
#word-hunt-banner .inner-content .content .wordhunt-check-answer-container .wordhunt-tries-badge {
  position: absolute;
  right: 0;
  top: -8px;
  background: #1C192F;
  color: #FFF;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}

.loop-config, .hyb-config {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.loop-config form, .hyb-config form {
  width: 100%;
  max-width: 100%;
}

#tenant-profile-section {
  padding-bottom: 0px;
}

.invitation-requests-view {
  width: 99% !important;
  margin: 0 auto 20px auto;
}
.invitation-requests-view .shortened-info-section {
  padding-left: 35%;
}

#invitation-section #select-organization-profile {
  height: calc(100% - 120px);
}
#invitation-section .scrollable-container {
  flex: 1;
}
#invitation-section #organization-search-results {
  padding-bottom: 20px;
}
#invitation-section .shortened-info-section {
  justify-content: center;
  padding-left: 0px;
}
#invitation-section .shortened-info-section .first-svg {
  margin-left: initial;
}
#invitation-section .shortened-info-section .button-title {
  margin-right: initial;
}

#wordhunt-save-container {
  padding-bottom: 20px;
}

.list-component[data-type=enable-intercom-line] {
  opacity: 0.7;
  transition: all 0.3s ease;
}

.list-component[data-type=enable-intercom-line] .tenant-info h1 {
  color: #838383;
}

.list-component[data-type=enable-intercom-line]:hover {
  opacity: 0.9;
}

#unit-edit-section {
  flex: 1;
}
#unit-edit-section #floormap-toggle-container {
  margin-top: 0px;
  padding-top: 0px;
}

#member-edit-section {
  height: 100%;
}
#member-edit-section .form-button {
  flex-direction: row;
}
#member-edit-section .contact-detail-card {
  margin-top: 0px;
}

#unit-config-section #tenant-label, #member-edit-section #tenant-label {
  color: #252525;
  margin-bottom: 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
#unit-config-section .image-container, #member-edit-section .image-container {
  position: relative;
  width: fit-content;
}
#unit-config-section .image-container[data-type], #member-edit-section .image-container[data-type] {
  cursor: pointer;
}
#unit-config-section .image-container img, #member-edit-section .image-container img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
#unit-config-section .image-overlay, #member-edit-section .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}
#unit-config-section .image-container[data-type]:hover .image-overlay, #member-edit-section .image-container[data-type]:hover .image-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}
#unit-config-section .cta-button-section, #member-edit-section .cta-button-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 0px;
  margin-top: 16px;
}
#unit-config-section .cta-button-section .form-button, #member-edit-section .cta-button-section .form-button {
  margin-top: 0px;
}
#unit-config-section .pending-invite-info-body, #member-edit-section .pending-invite-info-body {
  cursor: default;
}

.device-mode-expanded-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

.tenant-details-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  background: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  color: #252525;
}

.add-member-search-results {
  overflow-y: auto;
  height: calc(100% - 110px);
}

#loop-user-search-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: calc(100% - 140px);
}
#loop-user-search-results .search-result-container {
  height: 100%;
}

#loopConfiguration {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#loop-config-section .permission-header {
  margin-top: 0px;
}

#contacts-container {
  height: calc(100svh - 100px);
}

#co-owner-list-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#devices-config {
  overflow-y: auto;
}
#devices-config #add-profile-container {
  margin-bottom: 0px;
}
#devices-config #change-profile-container {
  padding: 20px 0px 0px 0px;
}

.active-ring-button {
  background-color: #B3ACF8;
}

.inactive-ring-button {
  background-color: #B3ACF8;
  opacity: 0.2;
}

.active-chat-button {
  background-color: #E8D399;
}

.inactive-chat-button {
  background-color: #E8D399;
  opacity: 0.2;
}

.active-chat-span-button {
  background-color: #E8D399;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}

.inactive-chat-span-button {
  background-color: #E8D399;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  opacity: 0.2;
}

.active-voice-button {
  background-color: #9FD39D;
}

.inactive-voice-button {
  background-color: #9FD39D;
  opacity: 0.2;
}

.active-voice-span-button {
  background-color: #9FD39D;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}

.inactive-voice-span-button {
  background-color: #9FD39D;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  opacity: 0.2;
}

.active-video-button {
  background-color: #C9D1FD;
}

.inactive-video-button {
  background-color: #C9D1FD;
  opacity: 0.2;
}

.active-loop-gift-button {
  background: linear-gradient(90deg, #FF975C 0%, #6558F0 100%);
}
.active-loop-gift-button svg {
  margin-bottom: 3px;
}

.inactive-loop-gift-button {
  background: linear-gradient(90deg, #FF975C 0%, #6558F0 100%);
  opacity: 0.2;
}
.inactive-loop-gift-button svg {
  margin-bottom: 3px;
}

.activation-button-section {
  display: flex;
  padding: 8px 21px;
  justify-content: space-around;
  gap: 12px;
  border-radius: 20px;
  background-color: #F6F6F6;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
}
.activation-button-section .contact-button-cta {
  gap: 4px;
}
.activation-button-section span {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: #838383;
  text-align: center;
}
.activation-button-section .inactive-text {
  opacity: 0.2;
}

.activation-button-full .contact-button-cta {
  width: 100%;
}
.activation-button-full .contact-button-cta .activation-button {
  width: 100%;
}

.activation-button-section-fill {
  display: flex;
  padding: 8px 21px;
  justify-content: space-around;
  gap: 12px;
  border-radius: 20px;
  background-color: #F6F6F6;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
}
.activation-button-section-fill .contact-button-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.activation-button-section-fill .contact-button-cta span {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  color: #838383;
  text-align: center;
}
.activation-button-section-fill .contact-button-cta .activation-button-full {
  width: 100%;
  border-radius: 40px;
  min-height: 40px;
}
.activation-button-section-fill .contact-button-cta .active-call-button {
  background-color: #FAE5F8;
}
.activation-button-section-fill .contact-button-cta .active-message-button {
  background-color: #DEE3FE;
}

#loop-actions {
  padding-left: 20px;
  padding-right: 20px;
  position: fixed;
  left: 0px;
  bottom: 10px;
  width: 100%;
  flex: 0 0 auto;
}

#loop-actions.frontline-service-loop-actions {
  position: relative;
  left: auto;
  bottom: auto;
  margin-top: auto;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  z-index: 4;
}

.activation-screen-preview-height {
  height: 100% !important;
}

#tapped-container #loop-actions {
  padding-bottom: 30px;
}
#tapped-container #video-call-interface {
  padding-bottom: 0px !important;
}

#loop-actions-lost-mode-settings {
  position: initial;
  margin-top: auto;
  margin-bottom: 20px;
}

#persona-creation-container .form-body input {
  margin-top: 0px;
}

#car-details-container label {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

#gateway-setup {
  padding-bottom: 60px;
}

/* Devices Home Page */
.devices-home-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100svh - 82px);
  overflow-y: auto;
  padding-bottom: 40px;
  visibility: hidden;
}
.devices-home-container .section-divider {
  margin-top: 20px;
  padding-top: 8px;
  margin-bottom: 0px;
}
.devices-home-container .more-cta-options-container {
  padding: 20px 5% 0px 5%;
}

#tap-content, #gateway-permissions {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 5%;
  padding-right: 5%;
}

.empty-loop-container {
  margin-left: 5%;
  margin-right: 5%;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.empty-loop-container .empty-loop-heading {
  width: 100%;
  padding: 0 5% 16px 5%;
  border-bottom: 1px solid #F2F2F2;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
}
.empty-loop-container .empty-loop-image {
  display: flex;
  justify-content: center;
  width: 100%;
}
.empty-loop-container .empty-loop-image img {
  max-width: 500px;
  max-height: 500px;
  width: inherit;
}
.empty-loop-container .empty-loop-image .skeleton-loader {
  width: inherit;
  height: 500px;
}

.inactive-radio-label {
  color: #CCCCCC;
  display: hidden;
}

.add-new-loop-input-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}
.add-new-loop-input-container input {
  flex: 1;
  padding: 8px 20px;
  border-radius: 4px;
  border: 1px solid #838383;
}
.add-new-loop-input-container input:focus {
  outline: none;
}
.add-new-loop-input-container button {
  background-color: #F2F2F2;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loop-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  height: 32px;
  width: 73px;
  background-color: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 40px;
  margin-right: 5%;
}
.loop-chip span {
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #838383;
}

#back-nav {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}

#tap-content-count {
  font-size: 14px;
}

#edit-password-section {
  padding: 0 16px;
}

.loop-container {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}
.loop-container .loop-heading {
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  margin-left: 5%;
  margin-right: 5%;
  padding-top: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F2F2F2;
}
.loop-container .loop-heading .loop-heading-button-container {
  display: flex;
  padding-right: 30px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.loop-container .loop-heading .loop-heading-button-container #history-button {
  width: 24px !important;
}
.loop-container .loop-heading h1 {
  padding-left: 5%;
  padding-right: 5%;
  line-height: 28px;
}
.loop-container .device-container {
  display: flex;
  margin-left: 10%;
  margin-right: 5%;
  padding-top: 11px;
  margin-top: 20px;
  padding-bottom: 11px;
  border-bottom: 1px solid #F2F2F2;
  cursor: pointer;
}
.loop-container .device-container .device-card {
  padding-left: 5%;
  padding-right: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.loop-container .device-container .device-card #history-button {
  margin-right: 5px;
}
.loop-container .device-container .device-card .device-card-label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.loop-container .device-container .device-card .device-card-label img, .loop-container .device-container .device-card .device-card-label .skeleton-loader {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.loop-container .device-container .device-card .device-card-label span {
  flex: 1;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.organization-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
  width: 100%;
  padding: 16px;
  gap: 8px;
  background-color: #F3F3F3;
  position: relative;
}
.organization-card .organization-name {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 0;
  text-align: left !important;
  width: 85%;
}
.organization-card span {
  text-align: left;
}
.organization-card .location {
  width: 85%;
}
.organization-card input[type=checkbox] {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
}

.intro-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  height: 100%;
}

.intro-icon-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.intro-icon-badge svg {
  width: 40px;
  height: 40px;
  color: #6558F0;
}

.intro-title-section {
  text-align: center;
  margin-bottom: 32px;
}

.intro-title {
  font-size: 24px;
  font-weight: 600;
  color: #252525;
  margin-bottom: 12px;
}

.intro-subtitle {
  font-size: 14px;
  color: #595959;
  line-height: 1.5;
  max-width: 280px;
}

.intro-cards-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intro-selection-card {
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.intro-selection-card:hover {
  background: #F6F6F6;
  border-color: #6558F0;
}
.intro-selection-card:active {
  background: #F6F6F6;
  border-color: #6558F0;
}

.intro-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.intro-card-icon svg {
  width: 20px;
  height: 20px;
  color: #6558F0;
}

.intro-card-content {
  flex: 1;
}

.intro-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #252525;
  margin-bottom: 4px;
}

.intro-card-description {
  font-size: 14px;
  color: #595959;
  line-height: 1.4;
}

.intro-card-chevron {
  color: #838383;
  flex-shrink: 0;
  align-self: center;
}

.preview-container {
  pointer-events: none !important;
  opacity: 0.6 !important;
}
.preview-container .separator-container {
  margin-bottom: 0px !important;
}

.position-top {
  justify-content: flex-start !important;
}

.additional-padding-bottom {
  padding-bottom: 16px !important;
}

.devices-section-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 20px !important;
}
.devices-section-container .info-paragraph {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 0px;
}
.devices-section-container .empty-loopy-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
  align-items: center;
}
.devices-section-container .empty-loopy-container span {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.devices-section-container .empty-loopy-container .primary-button,
.devices-section-container .empty-loopy-container .secondary-button {
  align-self: center;
}
.devices-section-container .empty-loopy-container .empty-loop-message {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #595959;
  margin: 0;
}
.devices-section-container .empty-loopy-container .empty-loop-image {
  display: flex;
  width: 100%;
  justify-content: center;
}
.devices-section-container .empty-loopy-container .empty-loop-image img {
  width: 100%;
  height: 350px;
  max-width: 350px;
  margin: 0 auto;
}

.wordhunt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.wordhunt-empty-state .empty-loopy-container {
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.wordhunt-empty-state .empty-loop-heading {
  font-size: 18px;
  font-weight: 600;
}
.wordhunt-empty-state .empty-loop-message {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #595959;
  max-width: 320px;
  margin: 0;
}
.wordhunt-empty-state .empty-loop-image {
  justify-content: center;
}
.wordhunt-empty-state .empty-loop-image img {
  width: 220px;
  height: auto;
  margin: 0 auto;
}

.unit-empty-state-card {
  border: 2px dashed #F2F2F2;
  border-radius: 12px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.unit-empty-state-card:hover {
  border-color: #5973F8;
}
.unit-empty-state-card .empty-state-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(89, 115, 248, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.unit-empty-state-card .empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: #5973F8;
  margin: 0;
}
.unit-empty-state-card .empty-state-hint {
  font-size: 13px;
  color: #838383;
  margin: 0;
}

.add-unit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #F6F6F6;
  border-radius: 8px;
}
.add-unit-form .add-unit-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-unit-form .add-unit-form-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #252525;
  margin: 0;
}
.add-unit-form .add-unit-form-header .close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.add-unit-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.add-unit-form .form-field label {
  font-size: 13px;
  font-weight: 500;
  color: #595959;
}
.add-unit-form .form-field .input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #F2F2F2;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.add-unit-form .form-field .input-field:focus {
  border-color: #838383;
}
.add-unit-form .form-field .input-field::placeholder {
  color: #838383;
}
.add-unit-form .form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.add-unit-form .form-actions .secondary-button,
.add-unit-form .form-actions .primary-button {
  flex: 1;
  border-radius: 12px;
}

.intercom-line-status {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.intercom-line-status svg {
  width: 16px;
  height: 16px;
}

.no-search-results {
  text-align: center;
  padding: 16px;
  margin-bottom: 0px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background-color: #F5D5DC;
  color: #A60F2E;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  word-break: break-word;
}

#map-preview {
  width: 100%;
  height: 500px;
}
#map-preview .map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F6F6F6;
  border: 2px dashed #F2F2F2;
  border-radius: 8px;
  color: #595959;
  font-size: 16px;
  font-weight: 500;
}

.leaflet-marker-icon.pin-marker {
  position: relative;
  width: 20px;
  height: 20px;
  background: linear-gradient(90deg, #FF975C 0%, #6558F0 100%);
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.leaflet-bottom {
  display: none;
}

.pulsing-dot {
  position: relative;
  width: 16px;
  height: 16px;
  background: #007bff; /* solid center dot */
  border: 3px solid white;
  border-radius: 50%;
  z-index: 2; /* stay on top of the pulse */
}

.pulsing-dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(0, 123, 255, 0.5);
  border-radius: 50%;
  animation: pulse-ring 1.5s infinite;
  z-index: 1; /* behind the center dot */
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
#member-contact-screen .organization-name {
  font-weight: 500;
}

.leaflet-popup-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.leaflet-popup-container .leaflet-header {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}
.leaflet-popup-container .leaflet-header h3 {
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 0px;
}
.leaflet-popup-container .leaflet-header img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  flex-shrink: 0;
  margin: auto 0;
  border-radius: 50%;
}
.leaflet-popup-container .leaflet-button-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.leaflet-popup-container .leaflet-button-container button {
  border-radius: 50%;
  padding: 8px;
  background-color: #F2F2F2;
}

.floor-map-device-location span {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #6558F0;
}

.loop-container-v2 {
  display: flex;
  width: 100%;
  height: auto;
  padding: 8px;
  gap: 8px;
  flex-direction: column;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
}
.loop-container-v2 .heading-border-bottom {
  border-bottom: 1px solid #F0F0F0;
}
.loop-container-v2 .list-component {
  display: flex;
  padding: 8px 4px;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}
.loop-container-v2 .list-component .left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: auto 0.86;
  width: 0;
}
.loop-container-v2 .list-component .left h1 {
  color: #252525;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.loop-container-v2 .list-component .left .tenant-name {
  font-weight: 500 !important;
}
.loop-container-v2 .list-component .left .tenant-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.loop-container-v2 .list-component .left .tenant-info img, .loop-container-v2 .list-component .left .tenant-info svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.loop-container-v2 .list-component .left .tenant-info img {
  border-radius: 50%;
  object-fit: cover;
}
.loop-container-v2 .list-component .right {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  flex: 0;
  margin-left: auto;
  padding-left: 0;
}
.loop-container-v2 .list-component .right .inactive-text {
  color: #CB2648;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding: 0px 4px;
}
.loop-container-v2 .list-component .right svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.loop-container-v2 .list-component .right .call-button {
  padding: 6px;
  border-radius: 50%;
  background-color: #F2F2F2;
}
.loop-container-v2 .list-component .gap-12 {
  gap: 12px;
}
.loop-container-v2 .device-background {
  background-color: #F6F6F6;
  border-radius: 8px;
}

.frontlineservice-avatar-fallback {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F6F6F6;
  color: #1c192f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.frontlineservice-avatar-fallback svg {
  width: 12px;
  height: 12px;
}

.frontline-service-card .frontline-service-avatar,
.frontline-service-card .frontlineservice-avatar-fallback {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.frontline-service-card .frontline-service-avatar {
  border-radius: 50%;
  object-fit: cover;
}
.frontline-service-card .frontline-service-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.frontline-service-card .frontline-service-copy h1 {
  min-width: 0;
  flex: 1 1 auto;
}
.frontline-service-card .frontline-service-status {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  color: #252525 !important;
}

#profile-edit-actions .list-component {
  align-items: flex-start;
}
#profile-edit-actions .list-component .left {
  align-items: flex-start;
}
#profile-edit-actions .list-component .left h1 {
  line-height: 20px;
}
#profile-edit-actions .list-component .left .flex-v {
  gap: 4px;
}
#profile-edit-actions .list-component .right {
  align-self: flex-start;
}

.chip-label-20 {
  min-width: 20px;
  min-height: 20px;
  padding: 0px 4px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.chip-lost {
  background-color: #FBBFCC;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: #A60F2E;
}

.chip-inactive {
  background-color: #F6F6F6;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: #252525;
  width: fit-content;
}

.chip-active {
  background-color: #C9D1FD;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: #415FF5;
}

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

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

.inactive-background {
  background-color: #F8F8F8;
  color: #CCCCCC !important;
}

.disabled-checkbox {
  background-color: #9EAAF6 !important;
}

.inactive-loop-block {
  padding-top: 20px;
}

/* Inactive Settings */
.inactive-loop-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 5%;
  margin-right: 5%;
  padding-bottom: 16px;
  padding-top: 16px;
  border-bottom: 1px solid #F2F2F2;
}
.inactive-loop-heading h1 {
  padding-left: 5%;
  padding-right: 5%;
  line-height: 28px;
}
.inactive-loop-heading svg {
  margin-right: 25px;
}

.withdraw-btn {
  color: #CE2D4F;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  padding: 0;
}

.remove-btn {
  color: #CE2D4F;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

#inactive-loop-container .loop-heading {
  margin-left: 10%;
}
#inactive-loop-container .loop-heading-button-container:has(> #history-button) #history-button {
  margin-right: 25px;
}
#inactive-loop-container .loop-heading-button-container:has(> svg) #history-button {
  margin-right: 0px !important;
}

.deactivated-setting {
  pointer-events: none;
}
.deactivated-setting #loopy-friend-label {
  color: #838383 !important;
}
.deactivated-setting div span {
  color: #838383 !important;
}
.deactivated-setting span {
  color: #CCCCCC !important;
}
.deactivated-setting input, .deactivated-setting textarea {
  background: #F8F8F8 !important;
  color: #CCCCCC;
  border: 1px solid #F8F8F8 !important;
}
.deactivated-setting input::placeholder {
  color: #CCCCCC !important;
}
.deactivated-setting input:disabled {
  opacity: 1;
}
.deactivated-setting button {
  background: #F8F8F8 !important;
  border: 1px solid #F8F8F8 !important;
}
.deactivated-setting button span {
  color: #CCCCCC !important;
}
.deactivated-setting a {
  background: #F8F8F8 !important;
}
.deactivated-setting a span {
  color: #CCCCCC !important;
}
.deactivated-setting .text-area-container {
  background: #F8F8F8 !important;
  border: 1px solid #F8F8F8 !important;
}
.deactivated-setting textarea {
  background: #F8F8F8 !important;
  color: #CCCCCC !important;
}
.deactivated-setting textarea::placeholder {
  color: #CCCCCC !important;
}
.deactivated-setting textarea::-webkit-input-placeholder {
  color: #CCCCCC !important;
}
.deactivated-setting textarea::-moz-placeholder {
  opacity: 1;
  color: #CCCCCC !important;
}
.deactivated-setting textarea:-ms-input-placeholder {
  color: #CCCCCC !important;
}
.deactivated-setting textarea:-moz-placeholder {
  opacity: 1;
  color: #CCCCCC !important;
}

.deactivated-setting-container div span {
  color: #CCCCCC !important;
}

#deactivated-color-label {
  color: #9EAAF6 !important;
}

.deactivated-color-picker {
  pointer-events: none;
}

#message-length {
  color: #838383 !important;
}

.deactivated-setting-background {
  background: #F8F8F8 !important;
  border: 1px solid #F8F8F8 !important;
}
.deactivated-setting-background input {
  background: #F8F8F8 !important;
  color: #CCCCCC !important;
}
.deactivated-setting-background .switch {
  pointer-events: none;
}
.deactivated-setting-background textarea {
  background: #F8F8F8 !important;
  color: #CCCCCC !important;
}
.deactivated-setting-background button {
  background: #F8F8F8 !important;
}
.deactivated-setting-background button span {
  color: #9EAAF6 !important;
}
.deactivated-setting-background .permission-label span {
  color: #CCCCCC !important;
}
.deactivated-setting-background div span {
  color: #CCCCCC !important;
}
.deactivated-setting-background h1 {
  color: #CCCCCC !important;
}

.deactivated-setting-background::placeholder {
  color: #CCCCCC;
}

.button-blue-text {
  cursor: pointer;
}

.inactive-containers > .inactive-loops:last-child {
  margin-bottom: 32px;
}

.inactive-device-container {
  background: #F8F8F8 !important;
  border-bottom: none !important;
  margin-left: 10% !important;
  padding-left: 20px;
}
.inactive-device-container .inactive-device-card {
  display: block !important;
}
.inactive-device-container span {
  color: #CCCCCC !important;
}
.inactive-device-container #history-button {
  margin-right: 0px !important;
}
.inactive-device-container .device-card-label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inactive-device-container .device-card-label img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.expand-inactive-loop-heading svg {
  margin-right: 25px;
}
.expand-inactive-loop-heading h1 {
  color: #CCCCCC !important;
}
.expand-inactive-loop-heading .loop-heading-button-container {
  padding-right: 0 !important;
}

/* Device Setup Specific */
.device-setup-header {
  padding-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
  border-bottom: 1px solid #F2F2F2;
}
.device-setup-header nav {
  padding-left: 5%;
  padding-right: 5%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.device-setup-header nav span {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
}

.preference-container {
  padding-left: 5%;
  padding-right: 5%;
  overflow-x: hidden;
}

#device-onboarding-container {
  height: calc(100% - 70px);
}

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

.device-setup-success-hybrid {
  height: 100% !important;
}

.gap-0 {
  gap: 0px !important;
}

.gap-20 {
  gap: 20px;
}

.wordhunt-stats-module {
  margin: 0;
  margin-left: 5%;
}

.wordhunt-stats-title {
  padding: 0 5%;
}

.wordhunt-stats-scroll {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding-left: 5%;
  padding-right: 0;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  flex: 0 0 auto;
  flex-shrink: 0;
}
.wordhunt-stats-scroll::-webkit-scrollbar {
  display: none;
}

.wordhunt-stat-card {
  flex: 0 0 auto;
  min-width: 160px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 250, 246, 0.95);
  border: 1px solid rgba(255, 226, 211, 0.7);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: start;
  text-align: left;
}

.wordhunt-stats-scroll > .wordhunt-stat-card:last-child {
  margin-right: 20px;
}

.wordhunt-stat-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(65, 95, 245, 0.12);
}

.wordhunt-stat-icon svg {
  width: 18px;
  height: 18px;
}

.wordhunt-stat-icon-attempts {
  background: rgba(203, 38, 72, 0.12);
}

.wordhunt-stat-icon-complete {
  background: rgba(15, 157, 88, 0.12);
}

.wordhunt-stat-label {
  font-size: 13px;
  line-height: 16px;
  color: #595959;
  font-weight: 500;
}

.wordhunt-stat-value {
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
  color: #252525;
}

.wordhunt-stat-card:nth-child(odd) {
  background: rgba(255, 247, 242, 0.95);
}

.wordhunt-stats-module .wordhunt-stats-empty {
  font-size: 12px;
  line-height: 16px;
  color: #7A7A7A;
  text-align: left;
  padding: 0 1%;
  margin: 6px 0 0;
}

@media (max-width: 640px) {
  .wordhunt-stats-title {
    padding: 0 16px;
  }
  .wordhunt-stats-scroll {
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .wordhunt-stat-card {
    min-width: 140px;
    padding: 12px 14px;
  }
  .wordhunt-stat-value {
    font-size: 20px;
    line-height: 28px;
  }
}
.permissions-summary-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 0 5%;
  margin: 0;
}
.permissions-summary-container .permissions-summary-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 250, 246, 0.95);
  border: 1px solid rgba(255, 226, 211, 0.7);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.permissions-summary-container .permissions-summary-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(65, 95, 245, 0.12);
}
.permissions-summary-container .permissions-summary-icon svg {
  width: 20px;
  height: 20px;
}
.permissions-summary-container .permissions-summary-icon.permissions-summary-icon-active {
  background: rgba(65, 95, 245, 0.18);
}
.permissions-summary-container .permissions-summary-label {
  font-size: 13px;
  line-height: 16px;
  color: #595959;
  font-weight: 500;
}
.permissions-summary-container .permissions-summary-value {
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
  color: #252525;
}

@media (max-width: 640px) {
  .permissions-summary-container {
    padding: 0 16px;
    gap: 12px;
  }
  .permissions-summary-container .permissions-summary-card {
    width: 100%;
    padding: 12px 14px;
  }
  .permissions-summary-container .permissions-summary-value {
    font-size: 20px;
    line-height: 28px;
  }
}
.small-relative-loading-icon .position-spinner {
  left: initial !important;
}
.small-relative-loading-icon .spinner {
  width: 25px !important;
  height: 25px !important;
}

#device-config-section {
  gap: 0px;
}
#device-config-section .cta-button-section {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#device-config-section .cta-button-section .form-button {
  width: 100%;
  display: flex;
  flex-direction: row;
}
#device-config-section .cta-button-section .form-button button {
  padding: 4px 12px;
  height: auto !important;
  min-height: 48px;
}
#device-config-section .cta-button-section .form-button button span {
  width: 100%;
  padding-top: 0px;
  font-weight: 500 !important;
  line-height: 22px !important;
}

#loop-config-section ~ .popup-modal-v2 .congrats-body {
  padding-bottom: 0px;
}

#device-config-container.cardevice-config .preview-height, #device-config-container.doorbelldevice-config .preview-height, #device-config-container.ownersdevice-config .preview-height, #device-config-container.groupdevice-config .preview-height {
  height: 100% !important;
}
#device-config-container.cardevice-config #loop-actions, #device-config-container.doorbelldevice-config #loop-actions, #device-config-container.ownersdevice-config #loop-actions, #device-config-container.groupdevice-config #loop-actions {
  padding-bottom: 20px;
}
#device-config-container .vertical-divider {
  height: auto;
}

/* Bottom sheet UI for profile decoration */
.bottom-sheet-body#bottom-sheet-profile-decoration {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .bottom-sheet-header h1 {
  font-size: 18px;
  font-weight: 600;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .bottom-sheet-header #close-icon {
  background: transparent;
  border: 0;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-sheet-preview {
  display: flex;
  justify-content: center;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-sheet-avatar {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-sheet-avatar-base {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-sheet-avatar-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  object-fit: contain;
  transform-origin: center center;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-sheet-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  overflow-y: auto;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #E1E1E1;
  border-radius: 12px;
  padding: 16px 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card.selected {
  border-color: #5973F8;
  box-shadow: 0 0 0 2px rgba(65, 95, 245, 0.15);
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card .decoration-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card .decoration-thumb.none {
  background: #F5F5F5;
  color: #B8B8B8; /* drives SVG currentColor stroke */
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card .decoration-thumb.none svg {
  width: 36px;
  height: 36px;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card .decoration-thumb img, .bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card .decoration-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.bottom-sheet-body#bottom-sheet-profile-decoration .decoration-card span {
  font-size: 12px;
  color: #252525;
}
.bottom-sheet-body#bottom-sheet-profile-decoration #decoration-sheet-cta {
  margin-top: 4px;
}
.bottom-sheet-body#bottom-sheet-profile-decoration #decoration-sheet-cta .primary-button {
  width: 100%;
}

.bottom-sheet-body#bottom-sheet-profile-effect {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}
.bottom-sheet-body#bottom-sheet-profile-effect .bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom-sheet-body#bottom-sheet-profile-effect .bottom-sheet-header h1 {
  font-size: 18px;
  font-weight: 600;
}
.bottom-sheet-body#bottom-sheet-profile-effect .bottom-sheet-header #close-icon {
  background: transparent;
  border: 0;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-sheet-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: #F5F5F5;
  width: 100%;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-sheet-preview .effect-preview-media {
  width: 100%;
  max-width: 280px;
  max-height: 220px;
  border-radius: 12px;
  background: #000;
  object-fit: contain;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-sheet-preview video.effect-preview-media {
  pointer-events: none;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-sheet-preview #profile-effect-preview-placeholder {
  font-size: 12px;
  color: #666666;
  text-align: center;
  width: 100%;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-sheet-preview .effect-preview-name {
  font-size: 12px;
  font-weight: 600;
  color: #252525;
  text-align: center;
  width: 100%;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-sheet-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  overflow-y: auto;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card {
  flex: 1 1 calc(50% - 12px);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid #E1E1E1;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card.selected {
  border-color: #5973F8;
  box-shadow: 0 0 0 2px rgba(65, 95, 245, 0.15);
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card .effect-thumb {
  width: 100%;
  height: 140px;
  border-radius: 12px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card .effect-thumb.none {
  color: #B8B8B8;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card .effect-thumb.none svg {
  width: 36px;
  height: 36px;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card .effect-thumb img,
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card .effect-thumb video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card .effect-thumb video {
  pointer-events: none;
}
.bottom-sheet-body#bottom-sheet-profile-effect .effect-card span {
  font-size: 12px;
  color: #252525;
  text-align: center;
}
.bottom-sheet-body#bottom-sheet-profile-effect #effect-sheet-cta {
  margin-top: 4px;
}
.bottom-sheet-body#bottom-sheet-profile-effect #effect-sheet-cta .primary-button {
  width: 100%;
}

/* Profile decoration overlay over avatar */
.profile-decoration-overlay {
  --overlay-scale: 1;
  --overlay-tx-base: 0%;
  --overlay-tx-adjust-multiplier: 0;
  --overlay-ty: 0;
  transform-origin: center center;
  transform: scale(var(--overlay-scale)) translate(calc(var(--overlay-tx-base) + var(--overlay-ty) * var(--overlay-tx-adjust-multiplier) * 1%), calc(var(--overlay-ty) * 1%));
}

.edit-profile-container .profile-decoration-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  display: block;
  object-fit: contain;
}

/* Decoration overlay in preview header avatar */
.preview-interface .preview-image-container {
  position: relative;
}
.preview-interface .preview-image-container .profile-decoration-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  display: block;
  object-fit: contain;
}

.loop-interface .preview-image-container {
  position: relative;
}
.loop-interface .preview-image-container .profile-decoration-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.loop-interface .preview-image-container .profile-decoration-overlay video,
.loop-interface .preview-image-container .profile-decoration-overlay img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: contain;
}
.loop-interface #main-preview-container,
.loop-interface .main-preview-container {
  position: relative;
  overflow: hidden;
}
.loop-interface .profile-effect-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
.loop-interface .profile-effect-overlay.profile-effect-show {
  opacity: 1;
}
.loop-interface .profile-effect-overlay.profile-effect-fadeout {
  opacity: 0;
}

.frontline-service-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.frontline-service-preview .frontline-service-status-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #F6F6F6;
  color: #252525;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.frontline-service-preview .frontline-service-preview-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  box-sizing: border-box;
  padding-top: 8px;
}
.frontline-service-preview .preview-tap-message {
  min-width: 0;
  text-align: center;
}
.frontline-service-preview .frontline-service-hours-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  color: #595959;
}
.frontline-service-preview .frontline-service-hours-summary .frontline-service-hours-value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.frontline-service-preview .frontline-service-hours-summary .frontline-service-hours-value-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.frontline-service-preview .frontline-service-hours-summary .frontline-service-hours-day-label {
  font-weight: 500;
}
.frontline-service-preview .frontline-service-hours-summary .frontline-service-hours-line {
  display: block;
}
.frontline-service-preview .frontline-service-next-open-summary {
  color: #595959;
}
.frontline-service-preview .frontline-service-next-open-summary-unavailable {
  color: #252525;
  font-weight: 500;
}
.frontline-service-preview .frontline-service-schedule-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  color: #415FF5;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.frontline-service-preview .frontline-service-schedule-chevron {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}
.frontline-service-preview .frontline-service-schedule-chevron-expanded {
  transform: rotate(180deg);
}
.frontline-service-preview .preview-image-container {
  width: 80px;
  height: 80px;
}
.frontline-service-preview .frontline-service-preview-image,
.frontline-service-preview .frontlineservice-avatar-fallback {
  width: 80px;
  height: 80px;
}
.frontline-service-preview .frontlineservice-avatar-fallback svg {
  width: 44px;
  height: 44px;
}
.frontline-service-preview .frontline-service-status {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.loop-interface.frontline-service-loop-interface {
  height: 100%;
  min-height: 0;
}

.loop-interface.frontline-service-loop-interface .directory-section.frontline-service-map-section {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;
}
.loop-interface.frontline-service-loop-interface .directory-section.frontline-service-map-section .frontline-service-preview {
  width: 100%;
  max-height: calc(100% - 122px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.frontline-service-preview-unavailable .preview-tap-message,
.frontline-service-preview-unavailable .frontline-service-status-chip,
.frontline-service-preview-unavailable .frontline-service-hours-summary,
.frontline-service-preview-unavailable .frontline-service-hours-value,
.frontline-service-preview-unavailable .frontline-service-next-open-summary {
  color: #252525 !important;
}
.frontline-service-preview-unavailable .frontlineservice-avatar-fallback {
  color: #595959;
}

.frontline-service-hours-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: #F6F6F6;
  box-sizing: border-box;
}
.frontline-service-hours-panel.frontline-service-hours-panel-inline {
  width: 100%;
  padding: 12px 0 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid #F2F2F2;
  max-height: 208px;
  overflow-y: auto;
}
.frontline-service-hours-panel.frontline-service-hours-panel-inline .frontline-service-hours-list {
  width: 100%;
}
.frontline-service-hours-panel.frontline-service-hours-panel-inline .frontline-service-hours-row {
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr);
}
.frontline-service-hours-panel.frontline-service-hours-panel-inline .frontline-service-hours-day {
  text-align: right;
}
.frontline-service-hours-panel.frontline-service-hours-panel-inline .frontline-service-hours-value {
  align-items: center;
  text-align: center;
}
.frontline-service-hours-panel .frontline-service-hours-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.frontline-service-hours-panel .frontline-service-hours-today-row,
.frontline-service-hours-panel .frontline-service-hours-row {
  display: grid;
  grid-template-columns: minmax(32px, auto) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}
.frontline-service-hours-panel .frontline-service-hours-summary,
.frontline-service-hours-panel .frontline-service-hours-day,
.frontline-service-hours-panel .frontline-service-hours-value {
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}
.frontline-service-hours-panel .frontline-service-hours-day {
  font-weight: 500;
  color: #252525;
}
.frontline-service-hours-panel .frontline-service-hours-value {
  font-weight: 400;
  color: #595959;
  text-align: left;
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.frontline-service-hours-panel .frontline-service-hours-interval {
  display: block;
}
.frontline-service-hours-panel .frontline-service-hours-interval-closed {
  color: #595959;
}
.frontline-service-hours-panel .frontlineservice-hours-current-day {
  font-weight: 600;
}
.frontline-service-hours-panel .frontline-service-hours-day.frontlineservice-hours-current-day,
.frontline-service-hours-panel .frontline-service-hours-value.frontlineservice-hours-current-day {
  color: #252525;
  font-weight: 600;
}
.frontline-service-hours-panel .frontline-service-hours-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.frontline-service-contact-unavailable {
  justify-content: center;
}
.frontline-service-contact-unavailable .frontline-service-contact-option-disabled {
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.frontline-service-contact-unavailable .frontline-service-contact-option-disabled .activation-button {
  cursor: default;
}

.preview-actions-container {
  margin-top: -20px;
}

/* Full-screen first-load profile effect overlay */
.main-preview-container {
  position: relative;
  overflow: hidden;
}

#device-preview-section {
  position: relative;
}

.profile-effect-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  opacity: 0; /* revealed via class */
  transition: opacity 300ms ease-in-out;
}

.profile-effect-overlay.profile-effect-show {
  opacity: 1;
}

.profile-effect-overlay.profile-effect-fadeout {
  opacity: 0; /* trigger fade-out, then JS hides */
}

/* Decoration overlay fitting presets (per decoration id) */
/* Note: tuned once per asset; avoids inline styles and CSP issues */
.overlay-fit--profile-basketball {
  --overlay-scale: 1.4;
  --overlay-ty: -1;
  --overlay-tx-base: -30%;
  --overlay-tx-adjust-multiplier: 3;
}

.overlay-fit--profile-hot-soup {
  --overlay-scale: 1.4;
  --overlay-ty: 4;
  --overlay-tx-base: -55%;
  --overlay-tx-adjust-multiplier: 3;
}

.overlay-fit--profile-joystick {
  --overlay-scale: 1.4;
  --overlay-ty: -1;
  --overlay-tx-base: -35%;
  --overlay-tx-adjust-multiplier: 3;
}

.overlay-fit--profile-cat-or-dog {
  --overlay-scale: 1.2;
  --overlay-ty: -1;
  --overlay-tx-base: -38%;
  --overlay-tx-adjust-multiplier: 3;
}

.overlay-fit--pixie-dust {
  --overlay-scale: 1.6;
  --overlay-ty: -0.2;
  --overlay-tx-base: -30%;
  --overlay-tx-adjust-multiplier: 3;
}

.overlay-fit--profile-cat-ears {
  --overlay-scale: 1.45;
  --overlay-ty: -0.8;
  --overlay-tx-base: -33%;
  --overlay-tx-adjust-multiplier: 2;
}

.overlay-fit--profile-lightning {
  --overlay-scale: 1.56;
  --overlay-ty: -1;
  --overlay-tx-base: -30%;
  --overlay-tx-adjust-multiplier: 3;
}

.overlay-fit--profile-balloon,
.overlay-fit--profile-doodle,
.overlay-fit--profile-doodle-no-pencil,
.overlay-fit--profile-heart,
.overlay-fit--profile-soul {
  /* enlarge slightly to hug the avatar edge; adjust if asset changes */
  --overlay-scale: 1.6;
  --overlay-ty: -1;
  --overlay-tx-base: -30%;
  --overlay-tx-adjust-multiplier: 3;
}

.devices-configuration {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.devices-configuration .setting-element-toggle .read-only-button {
  background-color: transparent !important;
  border: 0 !important;
}
.devices-configuration .svg-container-center .read-only-button {
  background: #F8F8F8 !important;
  color: #CCCCCC !important;
  border: 1px solid #F8F8F8 !important;
}
.devices-configuration .svg-container-center .read-only-button .placeholder-container span {
  color: #CCCCCC !important;
}
.devices-configuration .label-with-input .read-only-button {
  background-color: transparent !important;
  border: 0 !important;
}
.devices-configuration .form-body button {
  border-radius: 8px;
}
.devices-configuration .form-body .add-new-texture {
  border-radius: 50%;
}
.devices-configuration .form-body .chip {
  border-radius: 4px;
}
.devices-configuration .form-body .label-big {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.devices-configuration .edit-profile-container {
  position: relative;
  margin-top: 0px;
  width: 160px;
  margin-left: auto;
  margin-right: auto;
}
.devices-configuration .edit-profile-container .profile-selected {
  width: 160px;
  height: 160px;
}
.devices-configuration .edit-profile-container #edit-button {
  background-color: white;
  border-radius: 20px;
  bottom: 15px;
  right: 10px;
}
.devices-configuration .edit-profile-container #profile-label {
  height: 0px;
  position: relative;
  width: 100%;
  margin-top: 0;
  display: flex;
}
.devices-configuration .placeholder-container .blue-text {
  color: #5973F8;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.devices-configuration .dropdown-button {
  display: flex;
  position: relative;
  border: 0px;
  border-radius: 4px;
  padding: 13px 20px;
}
.devices-configuration .detail-info-section span {
  line-height: 22px;
}
.devices-configuration .detail-section .detail-container input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #E1E1E1;
  margin-top: 0px;
  padding: 9px 8px !important;
  min-height: 40px;
  height: 42px;
}
.devices-configuration .detail-section .detail-container textarea {
  width: 100%;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  outline: none;
  padding: 9px 8px !important;
  resize: none;
  box-sizing: border-box;
  min-height: 42px;
  height: 42px;
}
.devices-configuration #owners-detail-info-section .setting-element {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0px;
}
.devices-configuration #owners-detail-info-section .setting-element .setting-header {
  padding-bottom: 0px;
}
.devices-configuration #owners-detail-info-section .setting-element .setting-header span {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.devices-configuration #owners-detail-info-section .setting-element label {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}
.devices-configuration #owners-detail-info-section .setting-element .setting-header-text {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #838383;
}
.devices-configuration #owners-detail-info-section .setting-element .optional-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.devices-configuration #owners-detail-info-section .setting-element .select-dropdown-button {
  padding: 0px 8px !important;
  border-bottom: 1.5px solid #F0F0F0;
}
.devices-configuration #owners-detail-info-section .setting-element .select-dropdown-button:focus, .devices-configuration #owners-detail-info-section .setting-element .select-dropdown-button:active {
  border-bottom: 1.5px solid #252525;
}
.devices-configuration #owners-detail-info-section .setting-element input {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  padding: 0px !important;
  border: 0px;
  border-bottom: 1.5px solid #F0F0F0;
}
.devices-configuration #owners-detail-info-section .setting-element input:focus {
  border-bottom: 1.5px solid #252525;
}
.devices-configuration .setting-element-toggle {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0px !important;
}
.devices-configuration .setting-element-toggle .setting-header {
  display: flex;
  gap: 8px;
  align-items: center;
}
.devices-configuration .setting-element-toggle .setting-header span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #252525;
}
.devices-configuration .setting-element-toggle .chip-label-20 {
  line-height: 22px !important;
}
.devices-configuration .display-toggle-divider {
  border-bottom: 1px solid #F0F0F0;
  padding-bottom: 12px !important;
  margin-bottom: -10px;
}

#frontlineservice-config-section #unit-edit-section {
  box-sizing: border-box;
  padding-left: 5%;
  padding-right: 5%;
}
#frontlineservice-config-section.has-sticky-footer {
  --frontlineservice-footer-clearance: calc(20px + env(safe-area-inset-bottom, 0px));
}
[data-capacitor=true] #frontlineservice-config-section.has-sticky-footer {
  --frontlineservice-footer-clearance: 20px;
}
#frontlineservice-config-section.has-sticky-footer #unit-edit-section {
  padding-bottom: var(--frontlineservice-footer-clearance);
  scroll-padding-bottom: var(--frontlineservice-footer-clearance);
}
#frontlineservice-config-section.has-sticky-footer .sticky-footer {
  flex-shrink: 0;
  padding-bottom: var(--frontlineservice-footer-clearance);
}
#frontlineservice-config-section #frontlineservice-contact-options-container {
  gap: 0;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .heading-border-bottom {
  padding: 8px 4px 12px;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .frontlineservice-section-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .history-subheading {
  display: block;
  margin-top: 0;
  white-space: normal;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .setting-element-toggle.frontline-contact-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  padding: 12px 4px;
  border-bottom: 1px solid #F0F0F0;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .setting-element-toggle.frontline-contact-option:last-child {
  border-bottom: 0;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .setting-element-toggle.frontline-contact-option .setting-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .setting-element-toggle.frontline-contact-option .setting-header span {
  white-space: nowrap;
}
#frontlineservice-config-section #frontlineservice-contact-options-container .setting-element-toggle.frontline-contact-option > .switch {
  margin-left: auto;
  flex-shrink: 0;
}
#frontlineservice-config-section #frontlineservice-hours-container .frontline-hours-summary-trigger {
  background: #FFFFFF;
  border: 0;
  border-radius: 12px;
  text-align: left;
  width: 100%;
}
#frontlineservice-config-section #frontlineservice-hours-container .frontline-hours-summary-trigger .right svg {
  flex-shrink: 0;
}
#frontlineservice-config-section #frontlineservice-hours-container .list-component > .left {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}
#frontlineservice-config-section #frontlineservice-hours-container .list-component > .left > h1 {
  white-space: normal;
}
#frontlineservice-config-section #frontlineservice-hours-container .history-subheading {
  color: #777777;
  font-size: 12px;
  line-height: 16px;
  margin-top: 0;
}
#frontlineservice-config-section #frontlineservice-hours-container .frontline-hours-summary-text {
  color: #595959;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-top: 4px;
}
#frontlineservice-config-section .frontlineservice-assigned-member-row,
#frontlineservice-config-section .frontlineservice-add-members-trigger {
  background: #FFFFFF;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
#frontlineservice-config-section .frontlineservice-assigned-member-row > .left {
  min-width: 0;
}
#frontlineservice-config-section .frontlineservice-assigned-member-row .tenant-info {
  min-width: 0;
}
#frontlineservice-config-section .frontlineservice-assigned-member-row .tenant-info h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frontlineservice-config-section .frontlineservice-add-members-trigger {
  color: #5973F8;
  font-weight: 600;
  padding: 4px 0 16px;
}
#frontlineservice-config-section .frontlineservice-add-members-trigger > .left {
  width: 100%;
}
#frontlineservice-config-section .frontlineservice-add-members-button {
  align-items: center;
  background: #F8F8F8;
  border: 1px solid #F2F2F2;
  border-radius: 8px;
  box-sizing: border-box;
  color: #5973F8;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  min-height: 40px;
  line-height: 18px;
  padding: 6px 0;
  width: 100%;
}
#frontlineservice-config-section .frontlineservice-add-members-button svg {
  color: currentColor;
  height: 16px;
  width: 16px;
}
#frontlineservice-config-section .frontlineservice-empty-members span {
  color: #777777;
  font-size: 13px;
  line-height: 18px;
}
#frontlineservice-config-section .frontlineservice-member-option-row {
  cursor: pointer;
}
#frontlineservice-config-section .frontlineservice-members-picker-card {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 760px;
  padding: 0 24px 24px;
  width: calc(100% - 32px);
}
#frontlineservice-config-section .frontlineservice-members-heading > .left {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
#frontlineservice-config-section .frontlineservice-members-heading .history-subheading {
  color: #777777;
  font-size: 12px;
  line-height: 16px;
  margin-top: 0;
  white-space: normal;
}
#frontlineservice-config-section .frontlineservice-member-assignment-chevron {
  flex-shrink: 0;
}
#frontlineservice-config-section .frontline-hours-list {
  display: flex;
  flex-direction: column;
}
#frontlineservice-config-section .frontline-hours-editor-helper {
  color: #595959;
  font-size: 13px;
  line-height: 18px;
  margin: 0 16px;
}
#frontlineservice-config-section .frontline-hours-editor-helper strong {
  color: #252525;
  font-weight: 600;
}
#frontlineservice-config-section .frontline-hours-row {
  border-bottom: 1px solid #F0F0F0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
}
#frontlineservice-config-section .frontline-hours-row:last-child {
  border-bottom: 0;
}
#frontlineservice-config-section .frontline-hours-row-header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}
#frontlineservice-config-section .frontline-hours-row-header h2 {
  color: #252525;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin: 0;
  min-width: 36px;
}
#frontlineservice-config-section .frontline-hours-day-actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
}
#frontlineservice-config-section .frontline-hours-interval-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
#frontlineservice-config-section .frontline-hours-interval {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
  width: 100%;
}
#frontlineservice-config-section .frontline-hours-interval-main {
  align-items: center;
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  grid-template-columns: minmax(98px, 1fr) auto minmax(98px, 1fr);
  min-width: 0;
}
#frontlineservice-config-section .frontline-time-trigger {
  align-items: center;
  background: #F8F8F8;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  color: #252525;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  height: 36px;
  justify-content: space-between;
  line-height: 20px;
  width: 100%;
  padding: 0 10px;
}
#frontlineservice-config-section .frontline-time-trigger span {
  white-space: nowrap;
}
#frontlineservice-config-section .frontline-time-trigger-icon {
  color: #595959;
  display: inline-flex;
  flex-shrink: 0;
  height: 14px;
  width: 14px;
}
#frontlineservice-config-section .frontline-time-trigger-icon svg {
  height: 14px;
  width: 14px;
}
#frontlineservice-config-section .frontline-hours-interval-actions {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
}
#frontlineservice-config-section .frontline-hours-separator {
  color: #777777;
  font-size: 14px;
  line-height: 20px;
}
#frontlineservice-config-section .frontline-assignment-row {
  gap: 8px;
}
#frontlineservice-config-section .frontline-assignment-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#frontlineservice-config-section .frontline-assignment-slot {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  color: #252525;
  cursor: pointer;
  display: flex;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}
#frontlineservice-config-section .frontline-assignment-slot.selected {
  background: #F3FBF5;
  border-color: #2E7D32;
}
#frontlineservice-config-section .frontline-assignment-slot-indicator {
  align-items: center;
  border: 1px solid #C9C9C9;
  border-radius: 6px;
  color: #FFFFFF;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  width: 20px;
}
#frontlineservice-config-section .frontline-assignment-slot-indicator svg {
  height: 12px;
  width: 12px;
}
#frontlineservice-config-section .frontline-assignment-slot.selected .frontline-assignment-slot-indicator {
  background: #2E7D32;
  border-color: #2E7D32;
}
#frontlineservice-config-section .frontline-assignment-slot-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
#frontlineservice-config-section .frontline-hours-unavailable-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
#frontlineservice-config-section .frontline-hours-unavailable {
  color: #9A9A9A;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
#frontlineservice-config-section .frontline-hours-action {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 999px;
  color: #252525;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  height: 28px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 28px;
}
#frontlineservice-config-section .frontline-hours-action svg {
  display: block;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}
#frontlineservice-config-section .frontline-hours-action:disabled {
  color: #CCCCCC;
  cursor: not-allowed;
  opacity: 0.7;
}
#frontlineservice-config-section .frontline-hours-unavailable-add {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 999px;
  color: #252525;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  line-height: 16px;
  padding: 0 10px;
}
#frontlineservice-config-section .frontline-hours-copy-btn {
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 999px;
  color: #252525;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  line-height: 16px;
  padding: 0 10px;
}
#frontlineservice-config-section .frontline-hours-timezone-row {
  align-items: center;
  border-top: 1px solid #F0F0F0;
  color: #777777;
  display: flex;
  font-size: 12px;
  gap: 6px;
  justify-content: flex-end;
  line-height: 16px;
  padding: 10px 16px 14px;
}

#frontline-hours-editor-overlay,
#frontline-members-picker-overlay {
  background: #FFFFFF;
  inset: 0;
  position: fixed;
  z-index: 1500;
}
[data-capacitor=true] #frontline-hours-editor-overlay,
[data-capacitor=true] #frontline-members-picker-overlay {
  inset: env(safe-area-inset-top, var(--capacitor-safe-top, 0px)) 0 0 0;
  height: auto;
}
#frontline-hours-editor-overlay .frontline-hours-editor-surface,
#frontline-members-picker-overlay .frontline-hours-editor-surface {
  background: #FFFFFF;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
  max-width: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 100%;
}
#frontline-hours-editor-overlay .frontlineservice-members-picker-card,
#frontline-members-picker-overlay .frontlineservice-members-picker-card {
  box-sizing: border-box;
  gap: 0;
  width: 100%;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row,
#frontline-members-picker-overlay .frontlineservice-member-option-row {
  align-items: center;
  border-bottom: 1px solid #F0F0F0;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  min-height: 56px;
  padding: 14px 0;
  width: 100%;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row:last-child,
#frontline-members-picker-overlay .frontlineservice-member-option-row:last-child {
  border-bottom: 0;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row .frontlineservice-member-option-left,
#frontline-members-picker-overlay .frontlineservice-member-option-row .frontlineservice-member-option-left {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row .frontlineservice-member-option-person,
#frontline-members-picker-overlay .frontlineservice-member-option-row .frontlineservice-member-option-person {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row .frontlineservice-member-option-person img,
#frontline-hours-editor-overlay .frontlineservice-member-option-row .frontlineservice-member-option-person svg,
#frontline-members-picker-overlay .frontlineservice-member-option-row .frontlineservice-member-option-person img,
#frontline-members-picker-overlay .frontlineservice-member-option-row .frontlineservice-member-option-person svg {
  border-radius: 50%;
  flex-shrink: 0;
  height: 24px;
  width: 24px;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row .frontlineservice-member-option-name,
#frontline-members-picker-overlay .frontlineservice-member-option-row .frontlineservice-member-option-name {
  color: #252525;
  display: block;
  flex: 1 1 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row .frontlineservice-member-option-right,
#frontline-members-picker-overlay .frontlineservice-member-option-row .frontlineservice-member-option-right {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  margin-left: 16px;
}
#frontline-hours-editor-overlay .frontlineservice-member-option-row input[type=checkbox],
#frontline-members-picker-overlay .frontlineservice-member-option-row input[type=checkbox] {
  accent-color: #5973F8;
  height: 18px;
  margin: 0;
  width: 18px;
}
#frontline-hours-editor-overlay .frontline-hours-editor-header,
#frontline-members-picker-overlay .frontline-hours-editor-header {
  background: #FFFFFF;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 2;
}
#frontline-hours-editor-overlay .frontline-hours-editor-header .status-bar-container,
#frontline-members-picker-overlay .frontline-hours-editor-header .status-bar-container {
  column-gap: 8px;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) minmax(0, 2fr) minmax(44px, 1fr);
  margin-bottom: 0;
}
#frontline-hours-editor-overlay .frontline-hours-editor-header .status-bar-container .left-cta-container,
#frontline-hours-editor-overlay .frontline-hours-editor-header .status-bar-container .right-cta-container,
#frontline-members-picker-overlay .frontline-hours-editor-header .status-bar-container .left-cta-container,
#frontline-members-picker-overlay .frontline-hours-editor-header .status-bar-container .right-cta-container {
  min-width: 0;
  width: auto;
}
#frontline-hours-editor-overlay .frontline-hours-editor-header .status-bar-container .left-cta-container,
#frontline-members-picker-overlay .frontline-hours-editor-header .status-bar-container .left-cta-container {
  margin-right: 0;
}
#frontline-hours-editor-overlay .frontline-hours-editor-header .status-bar-container .right-cta-container,
#frontline-members-picker-overlay .frontline-hours-editor-header .status-bar-container .right-cta-container {
  justify-content: flex-end;
}
#frontline-hours-editor-overlay .frontline-hours-editor-header .status-bar-container h1,
#frontline-members-picker-overlay .frontline-hours-editor-header .status-bar-container h1 {
  justify-self: center;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#frontline-hours-editor-overlay .frontline-hours-editor-card,
#frontline-members-picker-overlay .frontline-hours-editor-card {
  background: #FFFFFF;
  border-top: 0;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 760px;
  width: calc(100% - 32px);
  padding-top: 0px;
}
#frontline-hours-editor-overlay .frontline-hours-row,
#frontline-members-picker-overlay .frontline-hours-row {
  gap: 8px;
  padding: 12px 16px;
}
#frontline-hours-editor-overlay .frontline-hours-interval-main,
#frontline-members-picker-overlay .frontline-hours-interval-main {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-width: 0;
}
#frontline-hours-editor-overlay .frontline-time-trigger,
#frontline-members-picker-overlay .frontline-time-trigger {
  min-width: 0;
}
#frontline-hours-editor-overlay .frontline-time-trigger span,
#frontline-members-picker-overlay .frontline-time-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  #frontline-hours-editor-overlay .frontline-hours-editor-surface,
  #frontline-members-picker-overlay .frontline-hours-editor-surface {
    padding: 0 0 20px;
  }
  #frontline-hours-editor-overlay .frontline-hours-editor-header,
  #frontline-members-picker-overlay .frontline-hours-editor-header {
    border-bottom: 0;
  }
}
@media screen and (min-width: 1000px) {
  #frontlineservice-config-section #unit-edit-section {
    padding-left: 15%;
    padding-right: 15%;
  }
}
@media (max-width: 430px) {
  #frontlineservice-config-section .frontline-hours-row {
    gap: 8px;
    padding: 10px 12px;
  }
  #frontlineservice-config-section .frontline-hours-copy-btn {
    min-width: 56px;
    padding: 0 8px;
  }
  #frontlineservice-config-section .frontline-hours-interval {
    gap: 6px;
    flex-direction: column;
    align-items: stretch;
  }
  #frontlineservice-config-section .frontline-hours-interval-main {
    grid-template-columns: minmax(86px, 1fr) auto minmax(86px, 1fr);
    gap: 6px;
  }
  #frontlineservice-config-section .frontline-hours-interval-actions {
    justify-content: flex-end;
    width: 100%;
  }
  #frontlineservice-config-section .frontline-hours-unavailable-row {
    align-items: flex-start;
    flex-direction: column;
  }
  #frontline-hours-editor-overlay,
  #frontline-members-picker-overlay {
    background: #FFFFFF;
  }
  #frontline-hours-editor-overlay .frontline-hours-editor-surface,
  #frontline-members-picker-overlay .frontline-hours-editor-surface {
    max-width: none;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #frontline-hours-editor-overlay .frontline-hours-editor-card,
  #frontline-members-picker-overlay .frontline-hours-editor-card {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-width: none;
    width: 100%;
    padding-top: 0px;
  }
  #frontline-hours-editor-overlay .frontlineservice-members-picker-card,
  #frontline-members-picker-overlay .frontlineservice-members-picker-card {
    margin: 0;
    max-width: none;
    width: 100%;
  }
  #frontline-hours-editor-overlay .frontline-hours-row,
  #frontline-members-picker-overlay .frontline-hours-row {
    padding: 12px 16px;
  }
  #frontline-hours-editor-overlay .frontline-hours-interval-main,
  #frontline-members-picker-overlay .frontline-hours-interval-main {
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  #frontline-hours-editor-overlay .frontline-time-trigger,
  #frontline-members-picker-overlay .frontline-time-trigger {
    font-size: 13px;
    padding: 0 8px;
  }
  #frontline-hours-editor-overlay .frontline-hours-separator,
  #frontline-members-picker-overlay .frontline-hours-separator {
    font-size: 12px;
  }
}
#frontline-copy-menu {
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
  padding: 12px;
  position: fixed;
  z-index: 1600;
}
#frontline-copy-menu .frontline-copy-label {
  color: #252525;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
#frontline-copy-menu .frontline-copy-target-picker {
  position: relative;
}
#frontline-copy-menu .frontline-copy-target-options {
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 192px;
  overflow-y: auto;
  width: 100%;
}
#frontline-copy-menu .frontline-copy-target-option {
  background: #FFFFFF;
  border: 0;
  border-bottom: 1px solid #F2F2F2;
  color: #252525;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  min-height: 38px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}
#frontline-copy-menu .frontline-copy-target-option.selected {
  background: #EEF1FF;
  color: #252525;
  font-weight: 600;
}
#frontline-copy-menu .frontline-copy-target-option:last-child {
  border-bottom: 0;
}
#frontline-copy-menu #frontline-copy-apply {
  background: #415FF5;
  border: 0;
  border-radius: 8px;
  color: #FFFFFF;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  height: 36px;
  line-height: 20px;
}

#frontline-time-menu {
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  max-height: 232px;
  min-width: 144px;
  overflow: hidden;
  position: absolute;
  z-index: 1700;
}
#frontline-time-menu .frontline-time-options {
  display: flex;
  flex-direction: column;
  max-height: 232px;
  overflow-y: auto;
}
#frontline-time-menu .frontline-time-option {
  background: #FFFFFF;
  border: 0;
  border-bottom: 1px solid #F2F2F2;
  color: #595959;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 10px 12px;
  text-align: left;
}
#frontline-time-menu .frontline-time-option.selected {
  background: #EEF1FF;
  color: #252525;
}
#frontline-time-menu .frontline-time-option:hover {
  background: #F8F8F8;
}
#frontline-time-menu .frontline-time-option:last-child {
  border-bottom: 0;
}

.device-location-container-config {
  margin-top: 0px !important;
}

.setting-element-toggle .read-only-button {
  background-color: transparent;
}

#join-personas-container {
  align-items: flex-start;
  gap: 12px;
  justify-content: flex-start;
}
#join-personas-container .join-personas-header {
  flex: 1 0 0;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
}
#join-personas-container .join-personas-header svg {
  flex-shrink: 0;
}
#join-personas-container .join-personas-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: fit-content;
}
#join-personas-container .join-personas-label .join-personas-label-text {
  display: inline;
  white-space: normal;
  word-break: break-word;
}
#join-personas-container .join-personas-label .info-container {
  flex-shrink: 0;
  margin-top: 0;
}
#join-personas-container .chip-label-20 {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
  margin-left: auto;
  margin-top: 2px;
}
#join-personas-container > .switch {
  margin-left: auto;
}

#join-as-dropdown-chat, #join-as-dropdown-community {
  border: 1px solid #E1E1E1;
}

.search-bar-component {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background-color: #F6F6F6;
}
.search-bar-component input {
  border: 0px;
  width: 100%;
  background-color: #F6F6F6;
}
.search-bar-component #clear-search {
  margin-left: auto;
}

.branded-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.branded-input-container .label-container {
  display: flex;
}
.branded-input-container .label-container label, .branded-input-container .label-container span {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #252525;
}
.branded-input-container .label-container span {
  margin-left: auto;
}
.branded-input-container .input-container-v1-0 {
  position: relative;
  width: 100%;
}
.branded-input-container .input-container-v1-0 input {
  border: 0px;
  width: 100%;
  border-bottom: 1.5px solid #F0F0F0;
}
.branded-input-container .input-container-v1-0 svg {
  position: absolute;
  right: 0;
  transform: translateY(25%);
}
.branded-input-container .input-container-v1-1 {
  position: relative;
  width: 100%;
}
.branded-input-container .input-container-v1-1 input {
  border-radius: 8px;
  border: 1px solid #F3F3F3;
  padding: 9px 8px;
  width: 100%;
}
.branded-input-container .input-container-v1-1 input:focus, .branded-input-container .input-container-v1-1 input:active {
  border: 1px solid #252525;
}
.branded-input-container .input-container-v1-1 svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}

.device-filter-container {
  display: flex;
  padding: 12px 0px;
  align-items: center;
  border-radius: 12px;
  background-color: #F6F6F6;
  justify-content: space-between;
  cursor: pointer;
}
.device-filter-container .device-filter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #595959;
  margin: 0 auto;
  gap: 4px;
}
.device-filter-container .device-filter-card svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  box-sizing: content-box;
}
.device-filter-container .device-filter-card.stat-success svg {
  background: rgba(20, 182, 77, 0.08);
}
.device-filter-container .device-filter-card.stat-danger svg {
  background: rgba(206, 45, 79, 0.08);
}
.device-filter-container .device-filter-card.stat-neutral svg {
  background: rgba(0, 0, 0, 0.04);
}
.device-filter-container .device-filter-card span {
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: #838383;
}
.device-filter-container .device-filter-card h2 {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  color: #252525;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.device-filter-container .vertical-divider {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  height: 56px;
  width: 1px;
}

#devices-section,
#intercom-exchanges-section,
#organization-section,
#administration-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#devices-section > .flex-v,
#intercom-exchanges-section > .flex-v,
#organization-section > .flex-v,
#administration-section > .flex-v {
  flex: 1;
}
#devices-section .popup-modal-v2 .congrats-body,
#intercom-exchanges-section .popup-modal-v2 .congrats-body,
#organization-section .popup-modal-v2 .congrats-body,
#administration-section .popup-modal-v2 .congrats-body {
  padding-bottom: 0px;
}

#lost-devices-section,
#inactive-loops-section,
#inactive-devices-section {
  flex: 1;
}

#administration-section #add-new-section {
  padding-top: 0px;
}
#administration-section #add-new-section .scrollable-container {
  margin-top: initial;
}

.header-with-input-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.header-with-input-container .label-with-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wordhunt-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #F0F0F0;
}
.wordhunt-header-row .loop-header {
  border-bottom: 0px;
}

.wordhunt-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wordhunt-header-actions .chip-container-36 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wordhunt-hunt-trigger {
  position: relative;
  display: flex;
  align-items: center;
}

.wordhunt-header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.wordhunt-header-button svg {
  width: 20px;
  height: 20px;
}
.wordhunt-header-button:focus-visible {
  outline: none;
  box-shadow: none;
}

.letters-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.letters-preview input {
  width: auto;
  min-width: 30px;
  flex: 1 1 30px;
  border-radius: 8px;
  border: 1px solid #E1E1E1;
  margin-top: 0px;
  padding: 9px 8px;
  min-height: 40px;
  height: 42px;
  text-align: center;
}
.letters-preview input.active {
  border: 1.5px solid #415FF5;
}
.letters-preview input.hint-pending {
  border: 1.5px dashed #595959 !important;
  background-color: rgba(246, 246, 246, 0.3);
}
.letters-preview input.active.hint-pending {
  border: 1.5px solid #415FF5 !important;
  background-color: transparent;
}
.letters-preview .hint-space {
  flex: 0 0 25px;
  width: 16px;
  height: 42px;
}

#hint-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
#hint-letters .hint-word-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
#hint-letters .hint-word-wrapper input {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
}
#hint-letters .hint-space {
  display: inline-flex;
  align-items: center;
  flex: 0 0 16px;
  width: 16px;
}
#hint-letters .hint-hyphen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #595959;
  font-size: 20px;
  font-weight: 600;
  padding: 0 4px;
  margin-left: -4px;
  user-select: none;
  pointer-events: none;
}
#hint-letters > input {
  flex: 1 1 auto;
  min-width: 42px;
  max-width: 100%;
}
#hint-letters.single-line .hint-word-wrapper {
  flex: 1 1 auto;
  flex-wrap: nowrap;
}
#hint-letters.single-line .hint-word-wrapper input {
  flex: 1 1 auto;
  max-width: 100%;
}
#hint-letters.single-line .hint-word-wrapper.word-overflow {
  flex-wrap: wrap;
  max-width: 100%;
}
#hint-letters.single-line .hint-word-wrapper.word-overflow input {
  flex: 0 0 42px;
  width: 42px;
  max-width: 42px;
}
#hint-letters.single-line > input {
  flex: 1 1 auto;
  max-width: 100%;
}
#hint-letters.multi-line .hint-word-wrapper {
  flex-wrap: wrap;
}
#hint-letters.multi-line .hint-word-wrapper input {
  flex: 0 0 42px;
  width: 42px;
  max-width: 42px;
}
#hint-letters.multi-line > input {
  flex: 0 0 42px;
  width: 42px;
  max-width: 42px;
}

.device-mode-container-v2 {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  background: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  color: #252525;
}
.device-mode-container-v2 #device-mode-expanded-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}
.device-mode-container-v2 .device-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
}
.device-mode-container-v2 .device-mode-header h1 {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.device-mode-container-v2 .mode-element-toggle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 0px !important;
}
.device-mode-container-v2 .mode-element-toggle .setting-header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.device-mode-container-v2 .mode-element-toggle .setting-header span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #252525;
}
.device-mode-container-v2 .inner-mode-element-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-left: 20px;
  padding: 12px 0px 12px 20px;
}
.device-mode-container-v2 .inner-mode-element-toggle .setting-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.device-mode-container-v2 .inner-mode-element-toggle .setting-header span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #252525;
}
.device-mode-container-v2 .password-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.device-mode-container-v2 .password-container .password-element {
  padding: 0px 0px 0px 40px;
}

.gradient-circle {
  border-radius: 50%; /* Makes it a circle */
  background-image: linear-gradient(95deg, #FF975C, #5672FD);
  padding: 2px;
}
.gradient-circle .inner-circle {
  background: white;
}

.profile-container-dropdown {
  width: 100%;
  position: relative;
}
.profile-container-dropdown #display-profiles {
  position: absolute;
  right: 7px;
  top: 10px;
}
.profile-container-dropdown textarea.unit-description {
  width: 100%;
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  outline: none;
  padding: 9px 8px;
  resize: none;
  box-sizing: border-box;
  min-height: 42px;
  height: auto;
}

.chip-container-36 {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 10px 5% 8px 5%;
}
.chip-container-36 .chip {
  padding: 8px 16px;
  min-height: 36px;
  border-radius: 8px;
  background: #F6F6F6;
  color: #252525;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  width: 100%;
}
.chip-container-36 .chip.chip-inactive {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: default;
}
.chip-container-36 .selected-chip {
  background: #C9D1FD !important;
  color: #415FF5 !important;
}

.inactive-toggle-container svg path {
  fill: #B4B4B4;
}
.inactive-toggle-container .setting-header span {
  color: #B4B4B4 !important;
}
.inactive-toggle-container .switch {
  pointer-events: none;
}
.inactive-toggle-container .switch input:checked + .slider {
  background-color: #9FD39D;
}
.inactive-toggle-container .switch input + .slider {
  background-color: #F3F3F3;
}

.space-between-x {
  justify-content: space-between;
}

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

.scrollable-container {
  overflow-y: auto;
}

.device-setup-success-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100svh;
  padding-left: 40px;
  padding-right: 40px;
}
.device-setup-success-body h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: -5px;
}
.device-setup-success-body #device-setup-success-btn {
  max-width: 500px;
}

.device-setup-success-body > * {
  margin: auto 0;
}

.header-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 25px;
}
.header-container span {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.header-container h1 {
  padding-top: 10px;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
}

.accordion-section {
  margin-left: 5%;
  margin-right: 5%;
}
.accordion-section .accordion-element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
  cursor: pointer;
}
.accordion-section .accordion-element .accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 72%;
}
.accordion-section .accordion-element .accordion-header img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  align-self: flex-start;
  margin-top: 5px;
}
.accordion-section .accordion-element .accordion-header h1 {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.accordion-section .accordion-element .accordion-header h2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.accordion-section .accordion-expanded-no-margin {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid #F2F2F2;
  cursor: pointer;
  color: #252525;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container svg {
  min-width: 24px;
  min-height: 24px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container #info-icon {
  min-width: 16px;
  min-height: 16px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container span {
  color: #252525;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container-secondary {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container-secondary svg {
  min-width: 24px;
  min-height: 24px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container-secondary #info-icon {
  min-width: 16px;
  min-height: 16px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container-secondary span {
  color: #838383;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element-inner {
  margin-left: 30px;
}
.accordion-section .accordion-expanded-no-margin .expanded-element-column {
  flex-direction: column;
}
.accordion-section .accordion-expanded-no-margin .no-padding {
  padding: 0px;
  border-bottom: 0px !important;
}
.accordion-section .accordion-expanded-no-margin .expanded-element-cta {
  justify-content: space-between;
}
.accordion-section .accordion-expanded-no-margin .device-location-container {
  margin-top: 0px;
}
.accordion-section .accordion-expanded-no-margin .device-location-container input {
  border: 1px solid #F2F2F2;
}
.hide-padding {
  padding: 0px !important;
}

#gateway-setup .accordion-section .accordion-expanded-no-margin .expanded-element .element-left-container svg {
  min-width: 12px;
  min-height: 12px;
}

#device-config-container.groupdevice-config #device-name-container {
  margin-top: 20px !important;
}
#device-config-container.groupdevice-config #device-color {
  padding-top: 0px;
}

.all-active-tap-contents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.all-active-tap-contents .half-dropdown-button .read-only-button {
  background-color: transparent !important;
}

#community-mode-section #expanded-community-section > .expanded-element:first-of-type {
  margin-top: 20px;
}

.fixed-width-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opacity-50 {
  opacity: 0.5;
}

.tap-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px auto 30px auto;
  width: 242px;
  height: 242px;
  background-image: url("/images/assets/gradient-wheel.png");
  background-size: contain;
  background-repeat: none;
}
.tap-container span {
  display: flex;
  align-items: flex-end;
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
}
.tap-container span img {
  width: 32px;
  height: 32px;
}

.newly-setup-device {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 242px;
  height: 242px;
  border-radius: 50%;
  margin: 0 auto;
}
.newly-setup-device .name-container {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  align-items: center;
  color: #252525;
}
.newly-setup-device .name-container h2 {
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 0;
}
.newly-setup-device .name-container span {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}

.black-text {
  color: #252525;
}

.white-text {
  color: white !important;
}

.need-help {
  display: flex;
  justify-content: center;
}
.need-help .need-help-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #5973F8;
  text-decoration: none;
}

.prompt-section {
  width: 100%;
  padding: 16px 5% 16px 5%;
}
.prompt-section .prompt-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.prompt-section .prompt-heading span {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #252525;
}

.border-bottom-textarea {
  width: 100%;
  border: 0px;
  resize: none;
  border-bottom: 1.5px solid #F0F0F0;
}

.border-bottom-textarea:focus {
  outline: none;
}

/* Device Settings Page */
.optional-flag {
  font-size: 12px !important;
  line-height: 20px !important;
}

.settings-with-section-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 20px;
}
.settings-with-section-container span, .settings-with-section-container label {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #838383;
}
.settings-with-section-container .section-container {
  padding-left: 5%;
  padding-right: 5%;
}
.settings-with-section-container .section-container .setting-element {
  display: flex;
  flex-direction: column;
}
.settings-with-section-container .section-container .setting-element .setting-header {
  display: flex;
  flex: 0.8;
  align-items: center;
  padding-bottom: 8px;
  gap: 8px;
}
.settings-with-section-container .section-container .setting-element .setting-header-optional {
  display: flex;
  justify-content: space-between;
}
.settings-with-section-container .section-container .setting-element .read-only-element {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 20px;
  gap: 10px;
  border: 2px solid #F8F8F8;
  background-color: #F8F8F8;
}
.settings-with-section-container .section-container .setting-element .read-only-element span {
  color: #838383;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.settings-with-section-container .section-container .setting-element .read-only-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 20px;
  border: 2px solid #F8F8F8;
  background-color: #F8F8F8;
}
.settings-with-section-container .section-container .setting-element .read-only-dropdown span {
  color: #838383;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.settings-with-section-container .section-container .setting-element .text-area-container {
  border: none;
  padding: 0 !important;
}
.settings-with-section-container .section-container .setting-element textarea {
  width: 100%;
  height: 48px;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
  outline: none;
  padding: 14px 20px;
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
  line-height: 22px !important;
}
.settings-with-section-container .section-container .setting-element #message-length {
  align-self: flex-end;
  font-size: 12px;
}
.settings-with-section-container .section-container .setting-actionable-header {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
}
.settings-with-section-container .section-container .setting-actionable-header .title-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-with-section-container .section-container .setting-actionable-header .title-container #tap-content, .settings-with-section-container .section-container .setting-actionable-header .title-container #visible-to, .settings-with-section-container .section-container .setting-actionable-header .title-container #content-type-label {
  color: #252525;
}
.settings-with-section-container .section-container .remove-padding {
  padding: 0px !important;
}
.settings-with-section-container .section-container .setting-container {
  display: flex;
  flex-direction: column;
  color: #838383;
}
.settings-with-section-container .section-container .setting-container .optional-header {
  display: flex;
  justify-content: space-between;
}
.settings-with-section-container .section-container .setting-container .optional-header h4 {
  margin-bottom: 0px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.settings-with-section-container .section-container .setting-container h3 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.settings-with-section-container .section-container .setting-container input {
  width: 100%;
  padding: 13px 20px;
  border-radius: 4px;
  border: 1px solid #F2F2F2;
}
.settings-with-section-container .section-container .setting-container .text-counter {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.settings-with-section-container .section-container .setting-container .text-area-container {
  border: none;
  padding: 0 !important;
}
.settings-with-section-container .section-container .setting-container textarea {
  width: 100%;
  height: 48px;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
  outline: none;
  padding: 14px 20px;
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
  line-height: 22px !important;
}
.settings-with-section-container .section-container .edit-profile-container img {
  width: 75px;
  height: 75px;
}
.settings-with-section-container .section-container .edit-profile-container #edit-button {
  right: 15px;
}
.settings-with-section-container .section-container .setting-input-container {
  padding: 13px 20px;
  border-radius: 4px;
  border: 1px solid #F2F2F2;
  width: 100%;
}
.settings-with-section-container .section-container .expanded-setting-margin {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.settings-with-section-container .section-container .expanded-setting-margin > .setting-container:first-of-type {
  margin-top: 20px;
}
.settings-with-section-container .section-container .tap-content-edit-container {
  display: flex;
  margin-left: 30px;
  align-items: center;
  gap: 8px;
}
.settings-with-section-container .section-container .tap-content-edit-container img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.settings-with-section-container .section-container .tap-content-edit-container span {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #252525;
}
.settings-with-section-container .section-container .selected-tap-content-element {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
  align-items: center;
}
.settings-with-section-container .section-container .all-active-tap-contents {
  display: flex;
  flex-direction: column;
}

.read-only-header {
  background-color: #F8F8F8 !important;
  border: 1px solid #F8F8F8 !important;
}
.read-only-header div span {
  color: #838383 !important;
}
.read-only-header textarea {
  color: #838383 !important;
  background-color: #F8F8F8 !important;
}
.read-only-header .half-dropdown-button {
  background-color: #F8F8F8 !important;
}
.read-only-header .half-dropdown-button .blue-text {
  color: #9EAAF6 !important;
}

.button-blue-text {
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #415FF5;
}

.dropdown-button .black-text {
  color: #252525 !important;
}

.read-only-button {
  background-color: #F8F8F8;
}
.read-only-button .placeholder-container .blue-text {
  color: #9EAAF6;
}

.read-only-blue-text {
  color: #9EAAF6 !important;
}

#gateway-config {
  padding-bottom: 40px;
}

#tap-content-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#tap-content-container > .setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#tap-content-container > .setting-header > .setting-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

#tap-content-info-section {
  display: flex;
  align-items: center;
  gap: 8px;
}
#tap-content-info-section span {
  display: inline-flex;
  align-items: center;
  line-height: 22px;
}

.tap-content-item-card, #tap-content-detail-section, .setting-card {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
}
.tap-content-item-card .setting-actionable-header, #tap-content-detail-section .setting-actionable-header, .setting-card .setting-actionable-header {
  display: flex;
  justify-content: space-between;
  padding: 0px 4px 0px 4px;
}
.tap-content-item-card .setting-actionable-header .half-dropdown-button, #tap-content-detail-section .setting-actionable-header .half-dropdown-button, .setting-card .setting-actionable-header .half-dropdown-button {
  background: transparent;
}

.setting-card .svg-container-center button {
  border: 1px solid #E1E1E1;
  border-radius: 8px;
  width: 100%;
}

.setting-actionable-row.two-col {
  display: flex;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid #F2F2F2;
}

.setting-actionable-row.two-col > .setting-actionable-header {
  flex: 1 1 0;
  padding: 16px 0;
  border-bottom: none;
}

.setting-actionable-row.two-col .half-dropdown-button {
  justify-content: flex-end;
}

#tap-content-detail-section .half-dropdown-button {
  background: transparent;
}

#verifier-device-container .dropdown-button,
#hint-associated-devices .dropdown-button {
  min-height: 42px;
}

#partnerdevice-setup #change-profile-container {
  padding-bottom: 0px;
}
#partnerdevice-setup .setting-element input {
  padding: 14px 20px 14px 20px;
}

#loop-name .info-modal {
  transform: translateX(-20%);
}

#owners-device-setup-puck .setting-element input, .owners-device-config-puck .setting-element input, #devices-config .setting-element input {
  padding: 14px 20px 14px 20px;
}
#owners-device-setup-puck #user-profile, .owners-device-config-puck #user-profile, #devices-config #user-profile {
  padding-bottom: 20px;
}
#owners-device-setup-puck #add-profile-container, .owners-device-config-puck #add-profile-container, #devices-config #add-profile-container {
  margin-bottom: 0px;
}
#owners-device-setup-puck #profile-details-section .setting-header-optional, .owners-device-config-puck #profile-details-section .setting-header-optional, #devices-config #profile-details-section .setting-header-optional {
  padding-bottom: 8px;
}
#owners-device-setup-puck #profile-details-section .setting-header-optional .setting-header, .owners-device-config-puck #profile-details-section .setting-header-optional .setting-header, #devices-config #profile-details-section .setting-header-optional .setting-header {
  padding-bottom: initial;
}
#owners-device-setup-puck #profile-details-section #home-address, .owners-device-config-puck #profile-details-section #home-address, #devices-config #profile-details-section #home-address {
  padding-top: 0px;
}
#owners-device-setup-puck #profile-details-section .setting-element input, .owners-device-config-puck #profile-details-section .setting-element input, #devices-config #profile-details-section .setting-element input {
  padding: 14px 20px 14px 20px;
}
#owners-device-setup-puck #profile-details-section .info-modal, .owners-device-config-puck #profile-details-section .info-modal, #devices-config #profile-details-section .info-modal {
  transform: translateX(-30%);
}
#owners-device-setup-puck .deactivated-setting input::placeholder, .owners-device-config-puck .deactivated-setting input::placeholder, #devices-config .deactivated-setting input::placeholder {
  color: #CCCCCC !important;
}
#owners-device-setup-puck .deactivated-setting-background, .owners-device-config-puck .deactivated-setting-background, #devices-config .deactivated-setting-background {
  padding: 12px 20px 11px 20px !important;
}
#owners-device-setup-puck .deactivated-dropdown-button span, .owners-device-config-puck .deactivated-dropdown-button span, #devices-config .deactivated-dropdown-button span {
  color: #CCCCCC !important;
}
#owners-device-setup-puck .change-profile-container .profile-container, .owners-device-config-puck .change-profile-container .profile-container, #devices-config .change-profile-container .profile-container {
  display: flex;
  gap: 8px;
  align-items: center;
  background-color: transparent;
}
#owners-device-setup-puck .change-profile-container .profile-container span, .owners-device-config-puck .change-profile-container .profile-container span, #devices-config .change-profile-container .profile-container span {
  color: #5973F8;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}
#owners-device-setup-puck .change-profile-container .profile-container #select-another-button, .owners-device-config-puck .change-profile-container .profile-container #select-another-button, #devices-config .change-profile-container .profile-container #select-another-button {
  padding: 0;
}
#owners-device-setup-puck #device-for, .owners-device-config-puck #device-for, #devices-config #device-for {
  padding: 0px 20px 12px 20px;
  align-items: flex-start;
}
#owners-device-setup-puck #device-for .device-for-label, .owners-device-config-puck #device-for .device-for-label, #devices-config #device-for .device-for-label {
  color: #838383;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  padding-bottom: 8px;
}
#owners-device-setup-puck #device-for .dropdown-button, .owners-device-config-puck #device-for .dropdown-button, #devices-config #device-for .dropdown-button {
  padding: 12px 20px 12px 20px;
}
#owners-device-setup-puck .profile-details-header, .owners-device-config-puck .profile-details-header, #devices-config .profile-details-header {
  padding-top: 20px;
}
#owners-device-setup-puck #require-location, #owners-device-setup-puck #loop-gift, .owners-device-config-puck #require-location, .owners-device-config-puck #loop-gift, #devices-config #require-location, #devices-config #loop-gift {
  padding: 0px 0px 11px 0px;
}
#owners-device-setup-puck .change-profile-container, .owners-device-config-puck .change-profile-container, #devices-config .change-profile-container {
  padding: 20px 0px 0px 0px;
}

#ownersdevices-setup .setting-element input, #doorbelldevices-setup .setting-element input, #cardevices-setup .setting-element input {
  padding: 14px 20px 14px 20px;
}
#ownersdevices-setup .change-profile-container, #doorbelldevices-setup .change-profile-container, #cardevices-setup .change-profile-container {
  padding: 20px 0px 0px 0px;
}
#ownersdevices-setup .change-profile-container .profile-container, #doorbelldevices-setup .change-profile-container .profile-container, #cardevices-setup .change-profile-container .profile-container {
  display: flex;
  gap: 8px;
}
#ownersdevices-setup .change-profile-container .profile-container button, #doorbelldevices-setup .change-profile-container .profile-container button, #cardevices-setup .change-profile-container .profile-container button {
  padding: 0px;
}

.settings-container {
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 20px;
  /* Individual settings */
  /* Setting Element with Toggle */
}
.settings-container span, .settings-container label {
  margin-bottom: 0px;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #838383;
}
.settings-container .section-divider {
  margin-top: 20px;
  padding-top: 8px;
  width: 100vw;
  overflow: hidden;
  margin-left: -6%;
}
.settings-container .setting-element {
  display: flex;
  flex-direction: column;
}
.settings-container .setting-element .setting-header-optional {
  display: flex;
  justify-content: space-between;
}
.settings-container .setting-element .persona-container {
  display: flex;
  padding: 12px 20px;
  gap: 8px;
  align-items: center;
  background-color: #F8F8F8;
  border-radius: 4px;
}
.settings-container .setting-element .persona-container img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.settings-container .setting-element .persona-container span {
  color: #838383;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.settings-container .setting-element .setting-header {
  display: flex;
  flex: 0.8;
  align-items: center;
  padding-bottom: 8px;
  gap: 8px;
}
.settings-container .setting-element .loop-name-wrapper {
  position: relative;
  width: 100%;
}
.settings-container .setting-element .loop-name-wrapper svg {
  position: absolute;
  left: 20px;
  top: 5px;
  transform: translateY(50%);
}
.settings-container .setting-element input, .settings-container .setting-element button {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
  outline: none;
}
.settings-container .setting-element button {
  padding: 14px 20px 14px 20px;
}
.settings-container .setting-element input {
  padding: 14px 20px 14px 50px;
}
.settings-container .setting-element .text-area-container {
  border: none;
  padding: 0 !important;
}
.settings-container .setting-element textarea {
  width: 100%;
  height: 48px;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
  outline: none;
  padding: 14px 20px;
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
  line-height: 22px !important;
}
.settings-container .setting-element #message-length {
  align-self: flex-end;
  font-size: 12px;
}
.settings-container .setting-element .read-only-element {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 20px;
  gap: 10px;
  border: 2px solid #F8F8F8;
  background-color: #F8F8F8;
}
.settings-container .setting-element .read-only-element span {
  color: #838383;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.settings-container #device-name input {
  padding: 14px 20px 14px 20px;
}
.settings-container .setting-element-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 12px 20px 11px 20px;
  border-bottom: 1px solid #F2F2F2;
}
.settings-container .setting-element-toggle .setting-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-container .setting-element-toggle .setting-header span {
  color: #252525;
}

#group-location:focus {
  outline: transparent !important;
  border: 1px solid #838383 !important;
}

.device-location-container {
  display: flex;
  width: 100%;
  position: relative;
  margin-top: 20px;
}
.device-location-container input {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
}
.device-location-container input:focus {
  outline: transparent !important;
  border: 1px solid #838383 !important;
}
.device-location-container svg {
  position: absolute;
  right: 20px;
  top: 14px;
}

#add-co-owner span {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #595959;
}

#answer-as {
  margin-bottom: 20px;
}

#share-ownership .info-modal {
  left: -150%;
}

.disabled-a-tag {
  pointer-events: none;
  color: #CCCCCC;
}

.settings-expand-wrapper .info-modal, .connection-request-expand-heading .info-modal, #set-device-location .info-modal, #set-password .info-modal, #transfer-request .info-modal {
  left: -350% !important;
}

.finish-setup {
  padding-top: 5px;
}

.toggle-deactivate {
  padding-top: 2px;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

#deactivate-device {
  gap: 6px;
}

.toggle-device-activation {
  padding-top: 2px;
  color: white !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

/* Permissions */
.permission-header, .permission-element {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
  padding-top: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
  justify-content: space-between;
}
.permission-header .permission-label, .permission-element .permission-label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.permission-header .permission-label span, .permission-element .permission-label span {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #252525;
}
.permission-header h1, .permission-element h1 {
  line-height: 28px;
}
.permission-header .permission-header-wrapper, .permission-element .permission-header-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.permission-header .permission-header-wrapper h1, .permission-element .permission-header-wrapper h1 {
  line-height: 28px;
}
.permission-header .active-passport-counter, .permission-element .active-passport-counter {
  display: flex;
  align-items: center;
}

#add-new-mode span {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #595959;
}

.settings-expand {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  padding-right: 10px;
}
.settings-expand .settings-expand-entry {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-bottom: 1px solid #F2F2F2;
}
.settings-expand .settings-expand-entry .settings-expand-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-expand .settings-expand-entry .settings-expand-wrapper span {
  color: #252525;
}

.edit-mode-container {
  display: flex;
  justify-content: space-around;
  position: relative;
  align-items: center;
  background-color: #FFFFFF;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
}
.edit-mode-container input {
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
  flex: 1;
  color: #252525;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
}
.edit-mode-container input:focus {
  outline: none;
  text-decoration: none;
}
.edit-mode-container button {
  border: none;
  background-color: transparent;
  margin-right: 20px;
}

.connection-request-expand {
  padding-top: 20px;
  display: none;
}
.connection-request-expand .connection-request-expand-heading {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
}
.connection-request-expand input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 4px;
  outline: none;
  padding: 14px 20px 14px 20px;
}

.display-expanded-container {
  display: block;
}

/* Reusable Components - Device Specific */
#confirm-convert-to-group span {
  font-size: 13px !important;
}

.associated-device-entry {
  display: flex;
  align-items: center;
  gap: 8px;
}
.associated-device-entry .forward-check {
  margin-right: 0px;
}

.form-button {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Device Mode */
.device-mode-container {
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 10px;
}
.device-mode-container .device-mode-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 10px 20px;
  border-bottom: 1px solid #F2F2F2;
}
.device-mode-container .mode-element-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 12px 20px 12px 20px;
  border-bottom: 1px solid #F2F2F2;
}
.device-mode-container .mode-element-toggle .setting-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.device-mode-container .mode-element-toggle .setting-header span {
  color: #252525;
}
.device-mode-container .inner-mode-element-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-left: 20px;
  padding: 12px 20px 12px 20px;
  border-bottom: 1px solid #F2F2F2;
}
.device-mode-container .inner-mode-element-toggle .setting-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.device-mode-container .inner-mode-element-toggle .setting-header span {
  color: #252525;
}
.device-mode-container .prefilled-input {
  color: #838383;
  background-color: #F8F8F8;
}

.cta-button-section {
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 10%;
  cursor: pointer;
}

.activation-round-image {
  margin-bottom: 0px !important;
}

#up-arrow, #down-arrow {
  cursor: pointer;
}

.prefill-entry {
  position: relative;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Trigger this class on click of the delete icon */
.prefill-entry.disintegrate {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(3px);
}

/* Add dust layers with pseudo-elements */
.prefill-entry::before,
.prefill-entry::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-size: cover;
  opacity: 0;
}

/* First dust layer: moves in one direction */
.prefill-entry.disintegrate::before {
  animation: dustMove1 1s ease-out forwards;
}

/* Second dust layer: moves in another direction */
.prefill-entry.disintegrate::after {
  animation: dustMove2 1s ease-out forwards;
}

/* Keyframes for dust layers */
@keyframes dustMove1 {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-20px, -20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50px, -50px) scale(1.5);
  }
}
@keyframes dustMove2 {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(20px, 20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(50px, 50px) scale(1.5);
  }
}
.activation-rescan-container {
  padding-top: 32px;
  display: flex;
  flex-direction: column;
}
.activation-rescan-container h1 {
  padding-left: 15%;
  padding-right: 15%;
  padding-bottom: 20px;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  border-bottom: 1px solid #F2F2F2;
  text-align: left;
}
.activation-rescan-container .tap-container {
  margin: clamp(56px, 16vh, 104px) auto clamp(24px, 8vh, 32px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 5vw, 28px);
  border: 2px solid transparent;
  background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(135deg, #ff7f3f 0%, #6c63ff 100%) border-box;
}
.activation-rescan-container .halo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  text-align: center;
  padding: clamp(12px, 4vw, 20px);
}
.activation-rescan-container .tap-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 80%;
  text-align: center;
  flex-wrap: wrap;
}
.activation-rescan-container .tap-cta.stack {
  flex-direction: column;
  gap: 6px;
}
.activation-rescan-container .tap-cta.stack .tap-icon {
  margin-bottom: 0;
}
.activation-rescan-container .tap-icon {
  width: clamp(30px, 5vw, 24px);
  height: clamp(30px, 5vw, 24px);
}
.activation-rescan-container .tap-label {
  font-weight: 600;
  line-height: 1.25;
  font-size: clamp(16px, 2vw, 20px);
  text-wrap: balance;
  margin: 0;
  word-break: keep-all;
}
.activation-rescan-container .cta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: clamp(24px, 8vh, 32px) auto 0;
  gap: 8px;
}
.activation-rescan-container .cta-container span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #838383;
}
.activation-rescan-container .cta-container button {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  padding: 3px 4px;
}
.activation-rescan-container .cta-container .cta-flex {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

#device-setup-container {
  overflow-x: clip;
}
#device-setup-container .form-button, #device-setup-container #submit-button {
  margin-top: 0px;
}
#device-setup-container .add-profile-container {
  margin-bottom: 0px;
}
#device-setup-container #dropdown-container {
  overflow-y: auto;
}

#device-metadata-edit-section .status-bar-container {
  padding: 26px 5% 8px 5%;
}
[data-ios=true] #device-metadata-edit-section .status-bar-container {
  padding: 0px 5% 8px 5% !important;
}
#device-metadata-edit-section .form-section {
  padding-left: 5%;
  padding-right: 5%;
}

.loop-header {
  padding: 12px 4px;
  border-bottom: 1px solid #F0F0F0;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.contain-image {
  object-fit: contain;
}

.loop-interface .status-bar-container {
  margin-bottom: 0px;
}
.loop-interface .directory-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 5%;
}
.loop-interface .directory-member-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.loop-interface .directory-member-copy h1 {
  margin: 0;
  line-height: 1.2;
}
.loop-interface .directory-member-organization {
  color: #6B6B6B;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loop-interface .right {
  gap: 14px !important;
}
.loop-interface #map-preview {
  height: 400px;
}

[data-ios=true] .video-awaiting-room {
  background-color: black;
}
[data-ios=true] .video-awaiting-room #localVideo {
  position: absolute !important;
  top: 2% !important;
  width: 95% !important;
  height: 65lvh !important;
  object-fit: cover !important;
  background-color: transparent !important;
  z-index: 100 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 12px !important;
}

#video-call-overlay [data-ios=true] .video-awaiting-room #localVideo {
  top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
}

#status-container [data-ios=true] .video-awaiting-room #localVideo {
  top: 60px !important;
}

#video-awaiting-room-ios {
  padding: 0px;
  z-index: 1;
}
#video-awaiting-room-ios .loop-interface {
  padding-bottom: 0;
  width: 100%;
}
#video-awaiting-room-ios .video-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
}
#video-awaiting-room-ios .video-container #localVideo {
  position: absolute;
  left: 0;
  top: 0;
  width: 95%;
  height: 100lvh;
  object-fit: cover;
  background-color: transparent;
  z-index: 100;
}
#video-awaiting-room-ios .video-container .video-call-interface {
  z-index: 1000;
}

[data-capacitor=true] #call-container .safe-area-container,
[data-capacitor=true] .safe-area-container:has(#call-container) {
  padding-top: 0 !important;
}

#call-container {
  padding: 0px;
  z-index: 1;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}
#call-container .loop-interface {
  padding-bottom: 0;
  width: 100%;
  overflow: hidden;
}
#call-container .video-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
}
#call-container .video-container #localVideo {
  position: absolute;
  left: 8px;
  top: 5px;
  width: 108px;
  height: 158px;
  z-index: -1;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0px 8px 8px 4px rgba(0, 0, 0, 0.24);
}
#call-container .video-container #remoteVideo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100lvh;
  object-fit: cover;
  background-color: transparent;
  z-index: -2;
}
#call-container .video-call-interface {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}
#call-container #video-call-interface {
  position: absolute;
  border-radius: 0px;
}
#call-container #voice-call-interface .call-section-header {
  color: black;
  text-shadow: none;
}
#call-container #voice-call-interface .call-cta {
  color: black;
  text-shadow: none;
}
#call-container .connecting-text {
  color: #14B64D;
  text-shadow: none;
}
#call-container .audio-source-list {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 100%;
  transform: translateY(-10px);
  left: 0;
  cursor: pointer;
  width: max-content;
  height: auto;
  z-index: 20;
  background: white;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  text-shadow: none;
  color: black;
}
#call-container .audio-source-list .audio-source-element {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid #F2F2F2;
}
#call-container .audio-source-list .audio-source-element .audio-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
#call-container .audio-source-list .audio-source-element .audio-label .truncate-label {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 150px;
  white-space: nowrap;
}

#speaker-text {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
  width: auto;
  white-space: nowrap;
}

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

/*Co-owner section*/
.co-owner-row {
  padding-left: 52px;
  padding-right: 20px;
  margin-top: 20px;
  padding-top: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.co-owner-row .row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 80px);
}
.co-owner-row .row-label span {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #252525;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.co-owner-row .row-label svg {
  flex-shrink: 0;
}
.co-owner-row .row-label img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  flex-shrink: 0;
}
.co-owner-row #history-button {
  color: #CE2D4F;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px; /* 157.143% */
}

#co-owner-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#co-owner-section .add-requests-row .row-label {
  opacity: 0.5;
}

.deactivated-section {
  opacity: 0.4;
  pointer-events: none;
}

.co-owner-row-v2 {
  display: flex;
  align-items: center;
  padding: 4px;
}
.co-owner-row-v2 .row-label {
  display: flex;
  gap: 8px;
}
.co-owner-row-v2 .row-label img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.co-owner-row-v2 .row-label span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.co-owner-row-v2 .withdraw-btn, .co-owner-row-v2 .remove-btn {
  margin-left: auto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
.co-owner-row-v2 .add-btn {
  margin-left: auto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  color: #415FF5;
}

#contacts-container {
  display: flex;
  flex-direction: column;
  padding: 0px 5%;
}

#profile-contacts-section {
  height: calc(100% - 160px);
}
#profile-contacts-section #co-owner-form {
  height: 100%;
}

.my-profile-section {
  height: 100%;
  overflow-y: clip;
}
.my-profile-section .profile-element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
  cursor: pointer;
}
.my-profile-section .profile-element .profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 72%;
}
.my-profile-section .profile-element .profile-header img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  align-self: flex-start;
  margin-top: 5px;
}
.my-profile-section .profile-element span {
  color: #838383;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.my-profile-section .profile-element .contact-header-subtitle {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.my-profile-section .profile-element .contact-header-subtitle h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.my-profile-section .profile-friends .form-container {
  margin-left: 30px;
}
.my-profile-section .profile-friends .result-element {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F2F2F2;
}
.my-profile-section .profile-friends .result-element .friend-row-container {
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  color: #252525;
}
.my-profile-section .profile-friends .result-element .friend-row-container img {
  width: 24px;
  height: 24px;
  border-radius: 24px;
}
.my-profile-section .profile-friends .result-element .friend-row-container span {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.my-profile-section .profile-friends .result-element .forward-check {
  margin-right: 0px;
}

#submitBtn {
  margin-top: 20px;
}

/* Loop Settings - Fix list component alignment */
#loop-settings-section .list-component {
  display: flex;
  padding: 12px 5%;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
#loop-settings-section .list-component svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
#loop-settings-section .list-component span {
  flex: 1;
  font-size: 16px;
  line-height: 22px;
  color: #252525;
}
#loop-settings-section .list-component .dropdown-container {
  flex-shrink: 0;
  min-width: 120px;
}
#loop-settings-section .list-component .placeholder-container .blue-text {
  font-weight: 500;
}
#loop-settings-section .list-component .switch-container {
  flex-shrink: 0;
}

/* History Screen - Fixed structure */
#history-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Ensure status bar stays at top */
}
#history-list-container .status-bar-container {
  flex-shrink: 0; /* Prevent shrinking */
}

.history-list-container {
  display: flex;
  flex-direction: column;
  padding: 0px 5%;
  flex: 1;
  min-height: 0; /* Important for flexbox child scrolling */
  /* Removed overflow-y: auto - only history-container should scroll */
}
.history-list-container .eof-message {
  margin-top: 0px;
  padding-top: 0px;
}

.history-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
  padding-top: 0px;
  gap: 20px;
  /* Removed fixed height calculation - using flex instead */
}
.history-container .deactivated-setting-background {
  cursor: default !important;
}
.history-container .deactivated-setting-background #history-button {
  cursor: default !important;
}
.history-container #spinner-container {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.history-container .history-card-container {
  display: flex;
  cursor: pointer;
  width: 100%;
}
.history-container .history-card-container button {
  padding: 0;
}
.history-container .history-card-container .device-border-left {
  height: 100%;
  border-radius: 4px 0px 0px 4px;
}
.history-container .history-card-container .left-profile-border {
  border-left: 4px solid transparent;
  border-image-slice: 30;
  border-image-repeat: stretch;
}
.history-container .history-card-container .border-left-pistachio {
  border-left: 4px solid #C1EDCC;
}
.history-container .history-card-container .border-left-gold {
  border-left: 4px solid #FFF275;
}
.history-container .history-card-container .border-left-focus-blue {
  border-left: 4px solid #2DE1FC;
}
.history-container .history-card-container .border-left-brand-blue-1 {
  border-left: 4px solid #6558F0;
}
.history-container .history-card-container .border-left-brand-blue-2 {
  border-left: 4px solid #493FB3;
}
.history-container .history-card-container .border-left-lilac {
  border-left: 4px solid #E7BBE3;
}
.history-container .history-card-container .border-left-success-green {
  border-left: 4px solid #0E8136;
}
.history-container .history-card-container .border-left-violet {
  border-left: 4px solid #B837B1;
}
.history-container .history-card-container .border-left-hot-pink {
  border-left: 4px solid #FF579F;
}
.history-container .history-card-container .border-left-dark-brown {
  border-left: 4px solid #562B21;
}
.history-container .history-card-container .border-left-brand-orange {
  border-left: 4px solid #EC7836;
}
.history-container .history-card-container .border-left-tangerine {
  border-left: 4px solid #F19C79;
}
.history-container .history-card-container .truncate-device-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-left: -2px;
}
.history-container .history-card-container .card-label-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 8px;
}
.history-container .history-card-container .profile-avatar {
  width: 40px;
  height: 40px;
  padding: 2px;
}
.history-container .history-card-container img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.history-container .history-card-container .history-card-label {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}
.history-container .history-card-container .history-card-label .history-title-important {
  color: #CE2D4F !important;
}
.history-container .history-card-container .history-card-label #history-title {
  flex: 1;
  min-width: 100%;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  color: #252525;
  min-height: 20px;
}
.history-container .history-card-container .history-card-label .history-details-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}
.history-container .history-card-container .history-card-label .history-details-row .-ml-4 {
  margin-left: -4px;
}
.history-container .history-card-container .history-card-label .history-details-row span, .history-container .history-card-container .history-card-label .history-details-row small {
  font-size: 10px !important;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
  color: #252525;
  min-height: 20px;
  padding: 3px 0px 1px 0px;
}
.history-container .history-card-container .history-card-label .history-details-row .duration-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.history-container .history-card-container .history-card-label .history-details-row .call-duration-missed {
  color: #CE2D4F !important;
}
.history-container .history-card-container .history-card-label .history-details-row svg, .history-container .history-card-container .history-card-label .history-details-row img {
  width: 16px;
  height: 16px;
}
.history-container .history-card-container svg {
  flex-shrink: 0;
}

.eof-message {
  margin: 0 auto;
  color: #838383;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin-top: 20px;
}

.none-container {
  display: flex;
  align-self: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

#loop-gift-expanded-container {
  padding-left: 20px;
}
#loop-gift-expanded-container .setting-header-optional {
  padding-bottom: 8px;
}
#loop-gift-expanded-container .setting-header-optional span {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.highlight-border {
  border: 1.5px solid #5973F8;
  border-radius: 5px;
  border-bottom: 1.5px solid #5973F8 !important;
}

.title-medium {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  color: #252525;
}

.list-container {
  padding: 4px;
  display: flex;
  align-items: left;
}

.list-title {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}

.list-component, .list-component-with-sub {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.list-component .left, .list-component-with-sub .left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.list-component .left > h1, .list-component-with-sub .left > h1 {
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.list-component .left img, .list-component .left svg, .list-component-with-sub .left img, .list-component-with-sub .left svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.list-component .left img, .list-component-with-sub .left img {
  border-radius: 50%;
}
.list-component .left h2, .list-component-with-sub .left h2 {
  font-size: 16px;
}
.list-component .left .tenant-info, .list-component-with-sub .left .tenant-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.list-component .left .tenant-info h1, .list-component-with-sub .left .tenant-info h1 {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #252525;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.list-component .left .tenant-info .tenant-name-group, .list-component-with-sub .left .tenant-info .tenant-name-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.list-component .left .tenant-info .tenant-org, .list-component-with-sub .left .tenant-info .tenant-org {
  font-size: 12px;
  color: #595959;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-component .right, .list-component-with-sub .right {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 12px;
  flex-shrink: 0;
}
.list-component .right .chip-label-20, .list-component-with-sub .right .chip-label-20 {
  flex-shrink: 0;
  padding: 1px 4px;
}
.list-component .right svg, .list-component-with-sub .right svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

#add-member-section .hyb-height {
  padding-top: 0px !important;
}
#add-member-section .scrollable-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#add-member-section #invite-existing-loop-user-section {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#add-member-section #loop-user-search-results {
  height: auto;
  flex: 1;
  min-height: 0;
}
#add-member-section #loop-user-search-results .search-result-container {
  height: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#add-member-section .add-member-search-results {
  flex: 1;
  min-height: 0;
  height: auto;
}

.invite-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 24px;
}
.invite-hero .icon-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: #6558F0;
}
.invite-hero .icon-badge svg {
  width: 40px;
  height: 40px;
}
.invite-hero .invite-title {
  font-size: 24px;
  font-weight: 600;
  color: #252525;
  margin-bottom: 12px;
}
.invite-hero .invite-subtitle {
  font-size: 14px;
  color: #595959;
  line-height: 1.5;
  max-width: 280px;
}

#add-member-section #select-invite-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#add-member-section #select-invite-view .info-secondary-button {
  flex-direction: row;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #F2F2F2;
  background: #FFF;
  gap: 12px;
}
#add-member-section #select-invite-view .info-secondary-button .shortened-info-section {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: center;
  padding-left: 0;
}
#add-member-section #select-invite-view .info-secondary-button .shortened-info-section .icon-container {
  grid-row: 1/3;
  width: 48px;
  height: 48px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
  background: #F2F2F2;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
#add-member-section #select-invite-view .info-secondary-button .shortened-info-section .icon-container .first-svg {
  width: 100%;
  height: 100%;
  display: block;
  margin-left: 0 !important;
}
#add-member-section #select-invite-view .info-secondary-button .shortened-info-section .button-title {
  grid-row: 1;
  grid-column: 2;
  font-size: 16px;
  font-weight: 600;
  color: #252525;
  margin: 0;
  text-align: left;
  line-height: 1.3;
}
#add-member-section #select-invite-view .info-secondary-button .shortened-info-section .button-subtitle {
  grid-row: 2;
  grid-column: 2;
  font-size: 14px;
  color: #595959;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
#add-member-section #select-invite-view .info-secondary-button .card-chevron {
  flex-shrink: 0;
  color: #595959;
  align-self: center;
}

.list-component-with-sub {
  flex-direction: column;
  padding: 0;
}
.list-component-with-sub section {
  display: flex;
  gap: 8px;
  padding: 4px;
}
.list-component-with-sub sub {
  padding: 0px 8px;
  width: 100%;
}

.main-section-container .radio-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.flex-v {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#intercom-exchange-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

@media screen and (min-width: 1000px) {
  .margin-5 {
    margin: 0px 15% !important;
  }
  #tap-content {
    padding-left: 15%;
    padding-right: 15%;
  }
  .wordhunt-stats-scroll {
    padding-left: 10% !important;
  }
  .permissions-summary-container {
    padding-left: 10%;
    padding-right: 10%;
  }
  .max-padding-15 {
    padding-left: 15%;
    padding-right: 15%;
  }
  .settings-with-section-container .section-container {
    padding-left: 15%;
    padding-right: 15%;
  }
  #device-config-container.groupdevice-config #button-section {
    padding-left: 5%;
    padding-right: 5%;
  }
  .cta-button-section .flex-h {
    margin-left: 5%;
  }
  #lost-device-header {
    margin-left: 0;
    margin-right: 0;
  }
  .section-container, #contacts-container, .history-list-container {
    padding-left: 15%;
    padding-right: 15%;
  }
  .inactive-loop-heading {
    margin-left: 15%;
    margin-right: 15%;
  }
  #call-container #localVideo {
    width: 200px;
    height: 200px;
  }
  #call-container #remoteVideo {
    object-fit: contain;
  }
  .set-up-container {
    display: none;
    padding: 16px 5%;
  }
  .devices-home-container {
    height: calc(100svh - 82px);
  }
  .devices-home-container .more-cta-options-container {
    padding: 20px 15% 0px 15%;
  }
  .loop-container {
    padding-left: 15%;
    padding-right: 15%;
  }
  .loop-container .loop-heading {
    margin-left: 0;
    margin-right: 0;
  }
  .loop-container .device-container {
    margin-right: 0%;
    margin-left: 10%;
  }
  .inactive-device-container {
    margin-left: 18.5% !important;
    margin-right: 15% !important;
  }
  #inactive-device-container {
    padding-left: 0;
    padding-right: 0;
  }
  .settings-container {
    padding-left: 15%;
    padding-right: 15%;
  }
  .device-mode-container, .preference-container {
    padding-left: 15%;
    padding-right: 15%;
  }
}
.preview-interface-section .preview-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preview-interface-section .preview-section .placeholder-text {
  text-align: center;
  font-size: 18px;
  padding-bottom: 10px;
}

.margin-bottom-auto {
  margin-bottom: auto;
}

.preview-interface {
  display: flex;
  width: 100%;
  height: auto;
  position: relative;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #FBFBFA;
  margin-bottom: auto;
  box-shadow: 5px 8px 8px 0px rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}
.preview-interface .preview-image-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preview-interface .preview-image-container img, .preview-interface .preview-image-container .skeleton-loader {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  border-radius: 50%;
  margin: 0 auto;
}
.preview-interface .preview-image-container .name-container {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.preview-interface .preview-image-container .name-container h2 {
  font-size: 14px;
}
.preview-interface .badge-container {
  display: flex;
  padding: 4px 52px;
  width: 100%;
}
.preview-interface .badge-container .badge-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.preview-interface .badge-container .vertical-divider {
  border-left: 1.5px solid #595959;
  height: 100%;
  left: 50%;
}
.preview-interface .badge-container h2 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  color: #595959;
}
.preview-interface .preview-tap-message {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
}
.preview-interface .preview-icon {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  min-height: 32px;
}
.preview-interface .scrollable-device-profile {
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
.preview-interface .scrollable-device-profile .tag-device-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.preview-interface .tag-device-container {
  position: relative;
  height: auto;
  width: 100%;
}
.preview-interface .tag-device-container .preview-chip-category {
  padding: 5%;
  border-radius: 8px; /* Adjust for smooth rounded edges */
  padding: 5px; /* Space inside the chip container */
  box-shadow: 0px 0px 5px 2px #9dacf4 inset;
  background-color: #274171;
  display: inline-flex; /* Align children horizontally if needed */
}
.preview-interface .tag-device-container .preview-chip-category .selected-chip {
  background-color: white;
  border-radius: 4px;
  color: #274171 !important;
}
.preview-interface .tag-device-container .preview-chip-category .chip-container {
  display: flex;
  padding: 5px 10px;
  min-width: 50%;
  justify-content: center;
  color: white;
}
.preview-interface .tag-device-container .preview-chip-category span {
  font-size: 14px;
}
.preview-interface .tag-device-container .highlighted-info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  background-color: #E1E1E1;
  border-radius: 8px;
  padding: 8px;
}
.preview-interface .tag-device-container .highlighted-info-container span {
  text-align: center;
}
.preview-interface .tag-device-container .highlighted-info-container .info-card {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.preview-interface .tag-device-container .highlighted-info-container .info-card .card-description h1 {
  text-align: left;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
.preview-interface .tag-device-container .highlighted-info-container .info-card .card-description h2 {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.preview-interface .tag-device-container .highlighted-info-container-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  background-color: #E1E1E1;
  border-radius: 8px;
  padding: 8px;
}
.preview-interface .tag-device-container .highlighted-info-container-flex span {
  text-align: center;
}
.preview-interface .tag-device-container .highlighted-info-container-flex .info-card {
  display: flex;
  justify-content: center;
  gap: 5px;
  align-items: center;
}
.preview-interface .tag-device-container .highlighted-info-container-flex .info-card svg {
  flex-shrink: 0;
}
.preview-interface .tag-device-container .highlighted-info-container-flex .info-card .card-description h1 {
  text-align: left;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
.preview-interface .tag-device-container .highlighted-info-container-flex .info-card .card-description h2 {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.preview-interface .tag-device-container .info-container, .preview-interface .tag-device-container .info-container-v {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.preview-interface .tag-device-container .info-container h4, .preview-interface .tag-device-container .info-container-v h4 {
  min-width: 130px;
}
.preview-interface .tag-device-container .info-container span, .preview-interface .tag-device-container .info-container-v span {
  flex: 1;
  text-align: left;
}
.preview-interface .tag-device-container .info-container .card-description h1, .preview-interface .tag-device-container .info-container-v .card-description h1 {
  text-align: left;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
.preview-interface .tag-device-container .info-container .card-description h2, .preview-interface .tag-device-container .info-container-v .card-description h2 {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.preview-interface .tag-device-container .info-container .label, .preview-interface .tag-device-container .info-container-v .label {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.preview-interface .tag-device-container .info-container .label svg, .preview-interface .tag-device-container .info-container-v .label svg {
  flex-shrink: 0;
}
.preview-interface .tag-device-container .info-container .label h1, .preview-interface .tag-device-container .info-container-v .label h1 {
  font-weight: 400;
  font-size: 14px;
}
.preview-interface .tag-device-container .info-container h2, .preview-interface .tag-device-container .info-container-v h2 {
  font-weight: 600;
  font-size: 16px;
  width: fit-content;
  white-space: nowrap;
}
.preview-interface .tag-device-container .info-container-v {
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.preview-interface .tag-device-container .info-container-v h1 {
  font-weight: 600;
  font-size: 14px;
}
.preview-interface .tag-device-container .info-container-v p {
  font-weight: 500;
  font-size: 18px;
}
.preview-interface .tag-device-container h4 {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  margin-bottom: 0;
}
.preview-interface .tag-device-container span {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024) {
  .set-up-container {
    display: none;
  }
  .devices-home-container {
    height: calc(100svh - 82px);
  }
}
@media screen and (max-device-width: 500px) {
  .truncate-title {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
  }
  .preference-container {
    padding-top: 0px;
  }
}
#word-hunt-config .section-container {
  padding-bottom: 20px;
}
#word-hunt-config #wordhunt-hunt-chips {
  margin-top: -10px;
  margin-bottom: -10px;
}
#word-hunt-config #wordhunt-hunt-chips .chip {
  display: inline-flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 8px;
}
#word-hunt-config #wordhunt-hunt-chips .chip .chip-label {
  flex: 1 1 auto;
  text-align: center;
}
#word-hunt-config #wordhunt-hunt-chips .chip .chip-delete-btn,
#word-hunt-config #wordhunt-hunt-chips .chip .chip-delete-button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
#word-hunt-config .description-input-wrapper {
  position: relative;
  width: 100%;
}
#word-hunt-config .description-input-wrapper textarea {
  width: 100%;
  min-height: 88px;
  max-height: 130px;
  overflow-y: auto !important;
  resize: none;
}
#word-hunt-config #rules-preview-card {
  margin-top: 16px;
}
#word-hunt-config .rules-preview-toggle {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  color: #5973F8;
  cursor: pointer;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
}
#word-hunt-config .rules-preview-toggle:hover, #word-hunt-config .rules-preview-toggle:active, #word-hunt-config .rules-preview-toggle:focus {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}
#word-hunt-config .rules-preview-toggle[aria-expanded=true] {
  color: #5973F8;
}

#word-hunt-config-container .letters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#word-hunt-config-container .letters-row .letters-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

#word-hunt-config-container .letters-row .letters-reset-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #415FF5;
  cursor: pointer;
  transition: color 0.2s ease;
}
#word-hunt-config-container .letters-row .letters-reset-btn:hover, #word-hunt-config-container .letters-row .letters-reset-btn:focus {
  color: #1f3de6;
  outline: none;
}
#word-hunt-config-container .letters-row .letters-reset-btn:disabled {
  color: #bdbdbd;
  cursor: not-allowed;
}

#word-hunt-config-container .letters-row .letters-dropdown {
  margin-left: auto;
}

#word-hunt-config-container .hint-subtitle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: -10px;
  gap: 16px;
}
#word-hunt-config-container .hint-subtitle-container sub {
  text-align: left;
  flex: 1;
  bottom: 0px;
}
#word-hunt-config-container .hint-subtitle-container .hint-preview-toggle-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #415FF5;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 16px;
}
#word-hunt-config-container .hint-subtitle-container .hint-preview-toggle-btn:hover, #word-hunt-config-container .hint-subtitle-container .hint-preview-toggle-btn:focus {
  color: #1f3de6;
  outline: none;
}
#word-hunt-config-container .hint-subtitle-container .hint-preview-toggle-btn[aria-expanded=true] {
  color: #5973F8;
}
#word-hunt-config-container .hint-subtitle-container .hint-preview-toggle-btn[hidden] {
  display: none;
}

#hint-editor .optional-text #letter-hint-length {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgb(89, 89, 89) !important;
  line-height: 16px !important;
}
#hint-editor textarea {
  font-size: 14px !important;
  padding: 9px 8px !important;
  border-radius: 8px !important;
  border: 1px solid #E1E1E1 !important;
  width: 100% !important;
  resize: none !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  max-height: 130px;
}
#hint-editor #letter-hint {
  overflow-y: auto !important;
}
#hint-editor #associated-devices-container .setting-header {
  margin-top: 12px;
  margin-bottom: 8px;
}
#hint-editor #associated-devices-container .setting-header span {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  color: rgb(33, 37, 41) !important;
}
#hint-editor #associated-devices-container .setting-header button {
  padding: 2px 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
#hint-editor sub {
  font-size: 12px !important;
  color: rgb(89, 89, 89) !important;
  line-height: 16px !important;
  margin-top: 4px !important;
  display: block;
}

.empty-state-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 400px;
  gap: 20px;
}

.empty-state-image {
  width: 200px;
  height: auto;
  margin-bottom: 10px;
}

.empty-state-image-subtle {
  opacity: 0.6;
}

.empty-state-title {
  font-size: 24px;
  font-weight: 600;
  color: #252525;
  margin: 0;
}

.empty-state-description {
  font-size: 16px;
  line-height: 1.5;
  color: #595959;
  margin: 0;
}

.hint-preview-empty-message {
  color: #595959;
  text-align: center;
  padding: 20px;
  margin: 0;
}

.wordhunt-preview-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  padding: 18px 20px;
  background: rgba(37, 37, 37, 0.96);
  margin: 12px 0;
  color: white;
  overflow: hidden;
}

.wordhunt-preview-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #FF8C4B 0%, #5973F8 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.wordhunt-preview-banner > * {
  position: relative;
  z-index: 1;
}

.wordhunt-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 18px;
}

.wordhunt-preview-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wordhunt-preview-menu {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 2px;
  opacity: 0.8;
}

.wordhunt-preview-title {
  font-weight: 600;
}

.wordhunt-preview-timer {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  font-weight: 500;
}

.wordhunt-preview-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.wordhunt-preview-letters .hint-word-wrapper {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.wordhunt-preview-letter {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.wordhunt-preview-letter--prefilled {
  background: transparent;
  border: none;
  color: white;
  width: auto;
  min-width: 24px;
  padding: 0 6px;
}

.wordhunt-preview-letter--blank {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: transparent;
  color: transparent;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
}

.wordhunt-preview-letter--hint {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: white;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  padding: 0;
}

.wordhunt-preview-letter--hint:hover {
  border-color: rgba(101, 88, 240, 0.65);
}

.wordhunt-preview-letter--active {
  border-color: #6578F0;
  box-shadow: 0 0 0 2px rgba(101, 88, 240, 0.25);
}

.wordhunt-preview-space {
  width: 16px;
  height: 42px;
  flex: 0 0 16px;
  display: inline-flex;
}

.wordhunt-preview-riddle {
  font-size: 14px;
  line-height: 18px;
  color: white;
  opacity: 0.9;
}

.location-accurate {
  color: #14B64D;
  font-size: 0.85em;
  margin-left: 4px;
}
.location-accurate i {
  margin-right: 2px;
}

.location-approximate {
  color: #7F5D03;
  font-size: 0.85em;
  margin-left: 4px;
}
.location-approximate i {
  font-size: 0.5em;
  margin-right: 2px;
  vertical-align: middle;
}

.location-inaccurate {
  color: #CE2D4F;
  font-size: 0.85em;
  margin-left: 4px;
}
.location-inaccurate i {
  margin-right: 2px;
}

.location-link-accurate,
.location-link-approximate,
.location-link-estimated {
  color: #5973F8;
  text-decoration: none;
}
.location-link-accurate:hover,
.location-link-approximate:hover,
.location-link-estimated:hover {
  color: #4A67F7;
  text-decoration: underline;
}

.location-link-estimated {
  font-style: italic;
}

.location-tilde {
  color: #838383;
  font-size: 0.9em;
}

.location-text-accurate,
.location-text-approximate,
.location-text-estimated {
  color: #252525;
}

.location-text-estimated {
  font-style: italic;
}

#space-section .scrollable-container {
  flex: 1;
  min-height: 0;
}

.space-education-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid #F2F2F2;
}

.space-education-header {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.space-education-header.expanded {
  margin-bottom: 12px;
}
.space-education-header.expanded .space-education-chevron {
  transform: rotate(180deg);
}

.space-education-icon {
  width: 40px;
  height: 40px;
  background: rgba(89, 115, 248, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5973F8;
  flex-shrink: 0;
}

.space-education-title {
  font-size: 16px;
  font-weight: 600;
  color: #252525;
  flex: 1;
}

.space-education-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #838383;
  transition: transform 0.25s ease;
}

.space-education-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.space-education-content.expanded {
  grid-template-rows: 1fr;
}

.space-education-inner {
  overflow: hidden;
}

.space-education-body {
  color: #595959;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.space-education-body strong {
  color: #252525;
}

.space-hierarchy-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: #F6F6F6;
  border-radius: 12px;
  margin-bottom: 16px;
}
.space-hierarchy-visual .hierarchy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.space-hierarchy-visual .hierarchy-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.space-hierarchy-visual .hierarchy-icon.org {
  background: rgba(89, 115, 248, 0.15);
  color: #5973F8;
}
.space-hierarchy-visual .hierarchy-icon.space {
  background: rgba(89, 115, 248, 0.25);
  color: #5973F8;
}
.space-hierarchy-visual .hierarchy-icon.device {
  background: rgba(255, 140, 75, 0.2);
  color: #FF8C4B;
}
.space-hierarchy-visual .hierarchy-label {
  font-size: 11px;
  color: #838383;
  font-weight: 500;
}
.space-hierarchy-visual .hierarchy-arrow {
  color: #838383;
  font-size: 18px;
  align-self: flex-start;
  margin-top: 9px;
}

.space-info-rows {
  margin-bottom: 16px;
}

.space-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.space-info-row:not(:last-child) {
  border-bottom: 1px solid #F2F2F2;
}

.space-info-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #5973F8;
}

.space-info-text {
  font-size: 14px;
  color: #595959;
  line-height: 1.5;
}
.space-info-text strong {
  color: #252525;
}

.space-examples {
  margin-top: 16px;
}

.space-examples-label {
  font-size: 12px;
  font-weight: 500;
  color: #838383;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.space-example-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.space-example-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #F6F6F6;
  border-radius: 999px;
  font-size: 13px;
  color: #595959;
}
.space-example-chip svg {
  width: 16px;
  height: 16px;
  color: #838383;
}

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