@font-face {
  font-family: Museo Sans;
  src: url('../fonts/Museo-Sans-Rounded-500.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Museo Sans;
  src: url('../fonts/Museo-Sans-Rounded-300.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Museo Sans;
  src: url('../fonts/Museo-Sans-Rounded-100.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: white;
  --black: black;
  --42b5d7: var(--black);
}

body {
  color: #fff;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
}

.main {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.container {
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-height: 100svh;
  max-height: 100svh;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  position: relative;
}

.body {
  background-color: #1a1a1a;
}

.iphone-screen {
  z-index: 200;
  border-radius: 32px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.bg-image {
  z-index: 10;
  object-fit: cover;
  height: 100%;
  position: absolute;
}

.apps-wrapper {
  z-index: 200;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  position: relative;
}

.apps-bar-container {
  background-color: #ffffff40;
  border-radius: 40px;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
  padding: 20px;
  display: flex;
  position: relative;
}

.apps-bar-container.normal-apps {
  background-color: #0000;
  padding-top: 16px;
  padding-bottom: 16px;
}

.apps-container {
  width: 100%;
  margin-top: 48px;
  position: relative;
}

.app {
  aspect-ratio: auto;
  cursor: pointer;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  transition: background-color .2s;
  display: flex;
  position: relative;
}

.app-label {
  text-align: center;
  margin-bottom: -20px;
  font-size: 12px;
  line-height: 12px;
  position: absolute;
  inset: auto auto 0%;
}

.heading-container {
  z-index: 100;
  width: 100%;
  padding-left: 32px;
  position: relative;
}

.inside-app-heading {
  color: #000;
}

.inside-app-heading.white {
  color: var(--white);
}

.inside-app-heading.white.blue {
  color: #42b5d7;
}

.inside-app-heading.blue {
  color: #42b5d7;
  margin-top: 8px;
  font-size: 44px;
  font-weight: 400;
}

.inside-app-heading.small {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 18px;
}

.inside-app-heading.small.blue.sub {
  margin-top: 16px;
  font-weight: 700;
}

.list-container {
  z-index: 100;
  padding-left: 32px;
  position: relative;
  overflow: hidden;
}

.list-container.bank {
  padding-left: 0;
}

.list-text {
  color: #000;
  font-size: 16px;
  font-weight: 700;
}

.list-text.category {
  color: #8d8d8d;
  font-weight: 400;
}

.list-text.red {
  color: red;
}

.list-text.white {
  color: #fff;
}

.list-item {
  border-top: 1px solid #cecece;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}

.list-item.bank {
  border-top-style: none;
  border-top-color: #4e4e4e;
  border-bottom: 1px solid #4e4e4e;
}

.list-text-container {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding-right: 32px;
  display: flex;
}

.phone-app-container {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  padding-bottom: 72px;
  position: relative;
  overflow: scroll;
}

.app-image {
  border-radius: 16px;
}

.status-bar {
  z-index: 150;
  pointer-events: none;
  width: 100%;
  padding: 16px 36px;
  position: absolute;
  inset: 0% 0% auto;
}

.clock {
  opacity: .75;
  margin-bottom: 0;
  font-size: 16px;
}

.apps {
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.phone-app {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-height: 100%;
  display: none;
}

.bg {
  z-index: 10;
  object-fit: cover;
  background-color: #fefefe;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bg.bank {
  background-color: #191919;
}

.photos-app {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: none;
}

.photo-grid {
  z-index: 100;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex: none;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-content: center;
  place-items: center;
  width: 100%;
  display: grid;
  position: relative;
}

.photo-container {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

.photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.clock-container {
  opacity: .75;
}

.fullscreen-photo-wrapper {
  z-index: 150;
  background-color: #fefefe;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  inset: 0%;
}

.nav-field {
  z-index: 300;
  background-color: var(--white);
  border-bottom: 1px #b2b2b2;
  justify-content: space-between;
  align-items: center;
  height: 96px;
  padding: 24px 16px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.nav-field.bank {
  background-color: #292929;
}

.back-button {
  z-index: 400;
  cursor: pointer;
  padding: 16px;
  position: relative;
}

.back-button-icon {
  width: 24px;
  height: 24px;
}

.messages-app {
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
}

.messages-app.hanna, .messages-app.unknown, .messages-app.hasse, .messages-app.midsommar, .messages-app.emanuel, .messages-app.hilda, .messages-app.lukas, .messages-app.cr, .messages-app.lelle, .messages-app.marie, .messages-app.sonja, .messages-app.postnord, .messages-app.qopla, .messages-app.wilhelm, .messages-app.bengt-jobb, .messages-app.gitarrspecialisten, .messages-app.kivra {
  display: none;
}

.messages-container {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 96px 24px 72px;
  display: flex;
  overflow: scroll;
}

.bubble {
  background-color: #007aff;
  border-radius: 16px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: 75%;
  height: auto;
  min-height: 32px;
  padding: 7px 12px;
  display: flex;
  position: relative;
}

.bubble.grey {
  background-color: #e9e9eb;
}

.bubble.green {
  background-color: #37cd5c;
}

.message {
  margin-bottom: 0;
}

.message.grey {
  color: #000;
}

.blubble-img {
  height: 32px;
  margin-right: -8px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.blubble-img.grey {
  margin-left: -8px;
  margin-right: 0;
  inset: auto auto 0% 0%;
}

.bubble-container {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  display: flex;
}

.bubble-container.grey {
  justify-content: flex-start;
  align-items: center;
}

.bubble-container.margin-lower {
  margin-top: 2px;
}

.date-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
}

.date-container.right-align {
  justify-content: flex-end;
  align-items: center;
}

.date-container.right-align.margin-lower {
  margin-top: 6px;
}

.date {
  color: #8c8c8c;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}

.contact-icon-container {
  z-index: 200;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.contact-icon {
  height: 48px;
}

.contact-name {
  color: #000;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}

.contact-name-container {
  margin-top: 8px;
}

.input-text-field {
  z-index: 300;
  background-color: #fffffff2;
  flex-flow: row;
  align-items: center;
  height: 72px;
  padding: 24px 32px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.input-text {
  border: 1px solid #c5c5c6;
  border-radius: 32px;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
  padding: 10px 12px;
  display: flex;
}

.input-field-text {
  color: #c5c5c6;
  line-height: 14px;
}

.mic-icon {
  height: 22px;
}

.camera-icon {
  height: 28px;
}

.messages-list-app {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-height: 100%;
  display: none;
}

.messagess-list-app-container {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  position: relative;
  overflow: auto;
}

.list-item-messages {
  cursor: pointer;
  border-top: 1px solid #cecece;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}

.messages-contact-icon {
  height: 48px;
  margin-right: 12px;
}

.error-messages {
  color: red;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}

.list-text-messages-container {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 75%;
  height: 100%;
  padding-right: 32px;
  display: flex;
}

.date-photos-container {
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.date-photo {
  color: #000;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 12px;
}

.photos-scroll {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  padding-bottom: 72px;
  display: flex;
  overflow: scroll;
}

.voice-memos-app {
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-height: 100%;
  display: none;
}

.voice-memos-app-container {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  padding-bottom: 72px;
  position: relative;
  overflow: scroll;
}

.bank-app {
  flex-flow: row;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-height: 100%;
  display: none;
}

.bank-app-container {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-top: 96px;
  padding-bottom: 72px;
  position: relative;
  overflow: scroll;
}

.list-wrapper {
  background-color: #292929;
  border-radius: 16px;
  margin-top: 32px;
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
}

.list-item-voice-memos {
  border-top: 1px solid #cecece;
  flex-flow: column;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}

.list-item-voice-memos.bank {
  border-top-style: none;
  border-top-color: #4e4e4e;
  border-bottom: 1px solid #4e4e4e;
}

.list-text-wrapper {
  flex: 1;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.controller-container {
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-top: 16px;
  padding-right: 16px;
  display: none;
}

.code-embed {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.name-container {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 2px;
  padding-left: 16px;
  display: flex;
}

.name-container.right-align {
  justify-content: flex-end;
  align-items: center;
}

.name-container.right-align.margin-lower {
  margin-top: 6px;
}

.name-container.margin-lower {
  margin-top: 0;
}

.group-contact-icon {
  height: 24px;
}

.group-contact-icon.bottom {
  margin-top: 16px;
}

@media screen and (max-width: 991px) {
  .container {
    padding: 0;
  }

  .iphone-screen {
    border-radius: 0;
    width: 100%;
    min-width: auto;
    max-width: none;
  }

  .bg-image, .bg {
    width: 100%;
    max-width: 100%;
  }
}

#w-node-e3571791-56cd-7c48-bfb0-ad943aecf88a-b0b88a33, #p-1.w-node-d2ad71bf-44de-3d1c-ef55-ac088da89e1a-b0b88a33, #p-2.w-node-da2c3965-5b01-3153-aaf4-a60c53e33f3e-b0b88a33, #p-3.w-node-_6d8571be-ec28-2c6e-5b9f-48812a97c15b-b0b88a33, #p-4.w-node-a67baeb8-639a-fc61-fb56-3a58e0ad8743-b0b88a33, #p-4.w-node-e23ffcea-63ba-d1a3-f4a4-fbe1fe32f11a-b0b88a33, #p-4.w-node-f5d0eb40-9679-8519-153a-a66e7fa150e0-b0b88a33, #p-4.w-node-e7b07222-a006-a996-1c12-3be23f5f4af9-b0b88a33, #p-4.w-node-_5680ae10-c2d7-9ba8-c1de-c3f5fb2c588d-b0b88a33, #p-4.w-node-cd2317dc-d333-1e89-1532-aeb3e77183c6-b0b88a33 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/Museo-Sans-Rounded-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/Museo-Sans-Rounded-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Museo Sans';
  src: url('../fonts/Museo-Sans-Rounded-100.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}