@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600&display=swap");

body {
  background-color: #e7e7e7;
  font-family: sans-serif;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  user-select: none;
}
body.loginLocked #wrapper {
  visibility: hidden;
}
.loginGate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1000;
  box-sizing: border-box;
  padding: 3vmin;
  background:
    linear-gradient(135deg, rgba(225, 232, 240, 0.92), rgba(255, 255, 255, 0.95) 50%, rgba(218, 228, 239, 0.9)),
    #eef2f6;
}
body.appReady .loginGate {
  display: none;
}
.loginCard {
  display: grid;
  gap: 1.25vmin;
  width: min(43vmin, 100%);
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #d8e0e8;
  border-radius: 1.6vmin;
  box-shadow: 0 1.5vmin 4vmin rgba(21, 35, 52, 0.18);
  padding: 3.2vmin;
}
.loginLogo {
  height: 12vmin;
  margin: -0.8vmin 0 0.4vmin;
  background-image: url("assets/callink-logo.png");
  background-position: center 58%;
  background-repeat: no-repeat;
  background-size: 112% auto;
}
.loginCard h1 {
  margin: 0;
  color: #102946;
  font-size: 2.6vmin;
}
.loginSubtitle {
  margin: -0.6vmin 0 0.6vmin;
  color: #68788a;
  font-size: 1.35vmin;
  line-height: 1.45;
}
.loginField {
  display: grid;
  gap: 0.55vmin;
  color: #34485e;
  font-size: 1.15vmin;
  font-weight: 600;
}
.loginField input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background-color: #f7f9fb;
  border: 1px solid #cfd9e4;
  border-radius: 0.8vmin;
  color: #17283a;
  font: inherit;
  font-size: 1.45vmin;
  font-weight: 400;
  outline: none;
  padding: 1vmin;
}
.loginField input:focus {
  border-color: #1674dd;
  box-shadow: 0 0 0 0.25vmin rgba(22, 116, 221, 0.14);
}
.loginPasswordWrap {
  position: relative;
}
.loginPasswordWrap input {
  padding-right: 4.5vmin;
}
.loginPasswordWrap button {
  position: absolute;
  top: 50%;
  right: 0.5vmin;
  display: grid;
  place-items: center;
  width: 3.4vmin;
  height: 3.4vmin;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  border-radius: 0.6vmin;
  color: #607286;
  cursor: pointer;
}
.loginPasswordWrap button:hover {
  color: #1674dd;
}
.loginPasswordWrap button span {
  margin: 0;
  font-size: 2vmin !important;
}
.loginStatus {
  min-height: 1.7vmin;
  color: #68788a;
  font-size: 1.1vmin;
  line-height: 1.35;
}
.loginStatus.isError {
  color: #c63c25;
}
.loginSubmit {
  min-height: 4.2vmin;
  background-color: #1674dd;
  border: none;
  border-radius: 0.8vmin;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 1.4vmin;
  font-weight: 600;
}
.loginSubmit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
#wrapper {
  position: absolute;
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.innerWrapper {
  --linkColor: dodgerblue;
  --bgColor: #ffffff;
  --txtColor: #333333;
  --lightColor: lightgray;
  --dullColor: gray;
  --missedColor: #dddddd;
  --indiColor: #ffffff;
  --footerIcon: #efefef;
  position: relative;
  isolation: isolate;
  border: 2vmin solid #222222;
  box-shadow: 0 0 0 0.4vmin #eeeeee, 0 0.6vmin 2vmin rgba(0, 0, 0, 0.4);
  border-radius: 7vmin;
  width: 45vmin;
  height: 90vmin;
  overflow: hidden;
  background-color: var(--bgColor);
  color: var(--txtColor);
}
#darkMode,
#desktopMode,
#professionalStyle,
#cornerShape {
  display: none;
}
#wrapper:has(#professionalStyle:checked) {
  background-color: #dfe3e8;
}
#wrapper:has(#professionalStyle:checked) .innerWrapper {
  --linkColor: #1f7ae0;
  --bgColor: #ffffff;
  --txtColor: #20252d;
  --lightColor: #d6dbe1;
  --dullColor: #68707c;
  --missedColor: #edf0f3;
  --indiColor: #ffffff;
  --footerIcon: #f0f2f5;
  border-width: 1.2vmin;
  border-color: #20242b;
  border-radius: 2.4vmin;
  box-shadow: 0 0 0 0.35vmin #f7f8fa, 0 0.9vmin 2.2vmin rgba(23, 28, 35, 0.28);
}
.innerWrapper.hasAppBackground::before,
.innerWrapper.hasCustomAppBackground::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.innerWrapper[data-app-background="mist"]::before {
  background: linear-gradient(135deg, #dce4eb 0%, #f8fafb 46%, #d8e1e9 100%);
}
.innerWrapper[data-app-background="linen"]::before {
  background:
    repeating-linear-gradient(135deg, rgba(130, 147, 163, 0.12) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, #f4f6f8 0%, #dce4ea 100%);
}
.innerWrapper[data-app-background="cloud"]::before {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.74) 0 35%, transparent 35% 58%, rgba(199, 211, 222, 0.6) 58% 100%),
    linear-gradient(35deg, #d9e2e9 0%, #fafbfc 100%);
}
.innerWrapper[data-app-background="slate"]::before {
  background: linear-gradient(135deg, #bfcbd6 0%, #edf2f5 52%, #aebdca 100%);
}
.innerWrapper[data-app-background="warm"]::before {
  background: linear-gradient(135deg, #e9e4dc 0%, #fffdf9 50%, #d5e0e6 100%);
}
.innerWrapper.hasCustomAppBackground::after {
  inset: 10%;
  background-image: var(--customAppBackgroundImage);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.12;
}
#darkMode:checked ~ .innerWrapper {
  --bgColor: #000000;
  --txtColor: #ffffff;
  --lightColor: #333333;
  --dullColor: #666666;
  --missedColor: #222222;
  --indiColor: #666666;
  --footerIcon: #141414;
}
#wrapper:has(#professionalStyle:checked):has(#darkMode:checked) .innerWrapper {
  --bgColor: #111418;
  --txtColor: #f4f7fb;
  --lightColor: #2a3038;
  --dullColor: #8a939f;
  --missedColor: #1a1f26;
  --indiColor: #202732;
  --footerIcon: #171c22;
}
#wrapper:has(#professionalStyle:checked) #screenWrapper,
#wrapper:has(#professionalStyle:checked) .screen,
#wrapper:has(#professionalStyle:checked) .screen > div,
#wrapper:has(#professionalStyle:checked) .roundMe,
#wrapper:has(#professionalStyle:checked) .roundLess {
  border-radius: 1.8vmin;
}
#wrapper:has(#professionalStyle:checked) input[type="radio"] + label {
  height: 8.2vmin;
  background-color: var(--footerIcon);
  border-top: 1px solid var(--lightColor);
  font-size: 1.25vmin;
}
#wrapper:has(#professionalStyle:checked) input[type="radio"] + label:nth-of-type(1),
#wrapper:has(#professionalStyle:checked) input[type="radio"] + label:nth-of-type(6) {
  border-radius: 0;
}
#wrapper:has(#professionalStyle:checked) .sticky,
#wrapper:has(#professionalStyle:checked) .contactsHeader,
#wrapper:has(#professionalStyle:checked) .messagesHeader {
  background-color: var(--bgColor);
  border-bottom: 1px solid var(--lightColor);
}
#wrapper:has(#professionalStyle:checked) .screenTitle {
  letter-spacing: 0;
}
#wrapper:has(#professionalStyle:checked) .contactSearchWrap,
#wrapper:has(#professionalStyle:checked) .contactSettingsPanel,
#wrapper:has(#professionalStyle:checked) .settingsPanel,
#wrapper:has(#professionalStyle:checked) .infoField,
#wrapper:has(#professionalStyle:checked) .desktopDetailField,
#wrapper:has(#professionalStyle:checked) .desktopResultCard,
#wrapper:has(#professionalStyle:checked) .messageThread,
#wrapper:has(#professionalStyle:checked) .chatBubble,
#wrapper:has(#professionalStyle:checked) .dialSuggestion,
#wrapper:has(#professionalStyle:checked) .editContactForm input,
#wrapper:has(#professionalStyle:checked) .editContactForm textarea,
#wrapper:has(#professionalStyle:checked) .editContactForm select,
#wrapper:has(#professionalStyle:checked) .addContactPhone,
#wrapper:has(#professionalStyle:checked) .contactAddForm input {
  border-radius: 0.65vmin;
  border-color: var(--lightColor);
  box-shadow: none;
}
#wrapper:has(#professionalStyle:checked) .contactRow {
  padding-block: 1.05vmin;
}
#wrapper:has(#professionalStyle:checked) .contactAvatar,
#wrapper:has(#professionalStyle:checked) .contactAvatarLarge,
#wrapper:has(#professionalStyle:checked) .contactAvatarHero {
  border-radius: 0.8vmin;
}
#wrapper:has(#professionalStyle:checked) .infoAction,
#wrapper:has(#professionalStyle:checked) .desktopResultAction,
#wrapper:has(#professionalStyle:checked) .contactFormActions button,
#wrapper:has(#professionalStyle:checked) .contactsIconButton,
#wrapper:has(#professionalStyle:checked) .contactsHeaderButton,
#wrapper:has(#professionalStyle:checked) .sipSettingsActions button {
  border-radius: 0.65vmin;
}
#wrapper:has(#professionalStyle:checked) .numBtn {
  border-radius: 1.2vmin;
}
#wrapper:has(#professionalStyle:checked) .iconBtn {
  border-radius: 1.4vmin;
}
#wrapper:has(#professionalStyle:checked):has(#desktopMode:checked) .innerWrapper {
  border-width: 0.75vmin;
  border-radius: 1.2vmin;
  box-shadow: 0 0 0 0.25vmin #f7f8fa, 0 0.7vmin 1.8vmin rgba(23, 28, 35, 0.24);
}
#wrapper:has(#professionalStyle:checked):has(#desktopMode:checked) #screenWrapper,
#wrapper:has(#professionalStyle:checked):has(#desktopMode:checked) .screen,
#wrapper:has(#professionalStyle:checked):has(#desktopMode:checked) .screen > div {
  border-radius: 0.9vmin;
}
#wrapper:has(#desktopMode:checked) .innerWrapper {
  border-width: 1vmin;
  border-radius: 2vmin;
  width: min(92vw, 110vmin);
  height: min(82vh, 72vmin);
}
#wrapper:has(#desktopMode:checked) #screenWrapper,
#wrapper:has(#desktopMode:checked) .screen,
#wrapper:has(#desktopMode:checked) .screen > div {
  border-radius: 2vmin;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(3),
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(4),
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(5),
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(6) {
  overflow: hidden;
}
#darkMode:checked ~ .innerWrapper {
  --bgColor: #000000;
  --txtColor: #ffffff;
  --lightColor: #333333;
  --dullColor: #666666;
  --missedColor: #222222;
  --indiColor: #666666;
  --footerIcon: #141414;
}
#darkMode:checked ~ .innerWrapper label:hover {
  filter: brightness(80%);
}
#screenWrapper {
  position: absolute;
  display: flex;
  width: 600%;
  height: 100%;
  border-radius: 7vmin;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 200ms ease-in-out;
}
.innerWrapper.hasAppBackground #screenWrapper,
.innerWrapper.hasAppBackground .screen,
.innerWrapper.hasCustomAppBackground #screenWrapper,
.innerWrapper.hasCustomAppBackground .screen {
  background-color: transparent;
}
.screen {
  position: relative;
  width: calc(100% - 6vmin);
  height: calc(100% - 6vmin);
  background-color: plum;
  background-color: var(--bgColor);
  border-radius: 7vmin;
  overflow: hidden;
  overflow-y: auto;
}
.screen > div {
  border-radius: 7vmin;
}
.roundMe {
  border-radius: 7vmin 7vmin 0 0;
  width: calc(100% + 6vmin);
  transform: translateX(-3vmin);
}
.roundLess {
  border-radius: 7vmin 7vmin 0 0;
}
.screen::-webkit-scrollbar {
  display: none;
}
.screen:nth-of-type(3)::-webkit-scrollbar {
  display: block;
  width: 0.9vmin;
}
.screen:nth-of-type(3)::-webkit-scrollbar-track {
  background-color: transparent;
}
.screen:nth-of-type(3)::-webkit-scrollbar-thumb {
  background-color: var(--dullColor);
  border-radius: 999px;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(3)::-webkit-scrollbar {
  display: none;
}
input + label {
  cursor: pointer;
}
input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  position: absolute;
  z-index: 9;
  left: 0;
  bottom: 0;
  width: 16.6667%;
  height: 9vmin;
  background-color: var(--footerIcon);
  color: #aaaaaa;
  border-top: 1px solid var(--lightColor);
  font-size: 1.5vmin;
  text-align: center;
}
label span {
  margin-top: 1vmin;
  font-size: 3.5vmin !important;
}
label:hover {
  filter: brightness(105%);
}
input[type="radio"] + label:nth-of-type(1) {
  border-radius: 0 0 0 5.5vmin;
}
input[type="radio"] + label:nth-of-type(2) {
  left: 16.6667%;
}
input[type="radio"] + label:nth-of-type(3) {
  left: 33.3334%;
}
input[type="radio"] + label:nth-of-type(4) {
  left: 50%;
}
input[type="radio"] + label:nth-of-type(5) {
  left: 66.6668%;
}
input[type="radio"] + label:nth-of-type(6) {
  left: 83.3335%;
  border-radius: 0 0 5.5vmin 0;
}
input[type="radio"]:checked + label {
  color: var(--linkColor);
}
input:checked ~ #screenWrapper {
  transform: translateX(0);
}
input:nth-of-type(2):checked ~ #screenWrapper {
  transform: translateX(-16.6667%);
}
input:nth-of-type(3):checked ~ #screenWrapper {
  transform: translateX(-33.3334%);
}
input:nth-of-type(4):checked ~ #screenWrapper {
  transform: translateX(-50%);
}
input:nth-of-type(5):checked ~ #screenWrapper {
  transform: translateX(-66.6668%);
}
input:nth-of-type(6):checked ~ #screenWrapper {
  transform: translateX(-83.3335%);
}
.hFlex,
.vFlex {
  display: flex;
  justify-content: space-between;
}
.vFlex {
  flex-direction: column;
}
.spacer {
  flex-grow: 1;
}
.contact {
  height: 8.6vmin;
  border-top: 1px solid var(--lightColor);
  font-size: 2vmin;
  align-items: center;
  overflow: hidden;
  font-weight: 600;
  transition: height 200ms ease-in-out 0s;
}
.missed {
  color: orangered;
}
.centerMe {
  align-items: center;
}
.time,
.contactType,
.incomingCallerNumber,
.incomingCalledLine {
  color: var(--dullColor);
  font-weight: 400;
}

.incomingCallerNumber,
.incomingCalledLine {
  font-size: 1.5vmin;
}
.callMeta {
  min-width: 7vmin;
  text-align: right;
}
.callDate {
  color: var(--dullColor);
  font-size: 1.2vmin;
  font-weight: 400;
  margin-top: 0.2vmin;
}
.contact span {
  color: var(--linkColor);
  font-size: 3vmin;
  padding-left: 2vmin;
  cursor: pointer;
}
.contactType::after {
  content: "mobile";
  font-weight: 400;
  font-size: 1.5vmin;
}
.screenTitle {
  font-size: 3.5vmin;
  font-weight: 600;
  padding-bottom: 1.5vmin;
}
.recentsHeader {
  position: sticky;
  top: 0;
  background-color: var(--bgColor);
  border-radius: 7vmin 7vmin 0 0 !important;
  padding: 2.2vmin 0 1.4vmin;
  z-index: 8;
}
.recentsHeader .screenTitle {
  color: var(--txtColor);
  padding: 0;
}
.recentsTopLine {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.4vmin;
}
.recentsMenuButton {
  display: grid;
  place-items: center;
  width: 5vmin;
  height: 5vmin;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  color: var(--linkColor);
  cursor: pointer;
}
.recentsMenuButton:hover {
  background-color: var(--footerIcon);
}
.recentsMenuButton span {
  font-size: 3vmin !important;
  margin: 0;
}
.recentsMenu {
  position: absolute;
  top: 5.5vmin;
  right: 0;
  display: none;
  min-width: 15vmin;
  background-color: var(--bgColor);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  box-shadow: 0 0.6vmin 1.8vmin rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 12;
}
.recentsHeader.menuOpen .recentsMenu {
  display: block;
}
.recentsMenu button {
  width: 100%;
  background-color: transparent;
  border: none;
  color: orangered;
  cursor: pointer;
  font: inherit;
  font-size: 1.5vmin;
  font-weight: 600;
  padding: 1.2vmin;
  text-align: left;
}
.recentsMenu button:hover {
  background-color: var(--footerIcon);
}
.innerTitle {
  font-size: 2vmin;
  font-weight: 600;
}
.buttonLabel {
  color: var(--linkColor);
  text-align: right;
  font-weight: 600;
  font-size: 2vmin;
}
.sticky .buttonLabel {
  color: transparent;
}
.showLabels .buttonLabel {
  color: var(--linkColor);
}
.showLabels .buttonLabel::after {
  content: "";
}
.buttonLabel::after {
  content: "Edit";
}
.editCheck:checked + label .buttonLabel::after {
  content: "Done";
}
.buttonLabel span {
  font-size: 3vmin;
}
#missedCalls + label {
  position: fixed;
  display: flex;
  background-color: var(--missedColor);
  border-radius: 0.8vmin;
  padding: 0.2vmin;
  gap: 0.5vmin;
  width: fit-content;
  justify-items: stretch;
  top: 2.5vmin;
  z-index: 2;
  transform: translateX(50%);
}
.editCheck {
  display: none;
}
.editCheck + label {
  position: fixed;
  top: 3vmin;
  margin-left: 32vmin;
  z-index: 3;
}
.screen:nth-of-type(2) .editCheck + label {
  display: none;
}
.editCheck:checked ~ .newContact {
  transform: translateX(6vmin);
}
.editCheck:checked ~ .recentsCallList .newContact {
  transform: translateX(6vmin);
}
.recentsCallList {
  min-height: 0;
}
.newContact {
  position: relative;
  transition: transform 200ms ease-in-out 0s;
}
.deleteCheck:checked + label + .contact,
.deleteCheck:checked + label {
  height: 0;
  border-top: none;
}
.deleteCheck {
  display: none;
}
.deleteCheck + label {
  position: absolute;
  top: 2vmin;
  margin-left: -7vmin;
  height: 4.5vmin;
  font-size: 2vmin;
  overflow: hidden;
  transition: height 200ms ease-in 0s;
}
.deleteCheck + label span {
  color: orangered;
}
#missedCalls:checked ~ .newContact .contact,
#missedCalls:checked ~ .newContact .deleteCheck:checked ~ .missed {
  height: 0;
  border-top: none;
}

#missedCalls:checked ~ .newContact .deleteCheck ~ .missed {
  height: 8vmin;
  border-top: 1px solid var(--lightColor);
}
#missedCalls {
  display: none;
}
#missedCalls + label div {
  width: 7vmin;
  padding: 0.6vmin 1vmin;
  font-size: 1.6vmin;
  text-align: center;
  border-radius: 0.6vmin;
  font-weight: 600;
}
#missedCalls + label .indicator {
  position: absolute;
  background-color: var(--indiColor);
  z-index: -1;
  color: transparent;
  transition: transform 150ms ease-in-out 0s;
}
.indicator::after {
  content: "Missed";
}
#missedCalls:checked + label .indicator {
  transform: translateX(9.5vmin);
}
.spacing {
  padding: 3vmin;
  padding-top: 0;
}
.sticky {
  position: sticky;
  top: 0;
  background-color: var(--bgColor);
  padding: 3vmin 0;
  z-index: 1;
}
.numWrapper {
  position: absolute;
  padding: 0 5vmin;
  width: calc(100% - 10vmin);
  height: 48vmin;
  bottom: 5vmin;
}
.numBtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.2vmin;
  height: 7.2vmin;
  padding: 0;
  font-size: 3vmin;
  text-align: center;
  background-color: var(--lightColor);
  color: transparent;
  border-radius: 50%;
  cursor: pointer;
}
.numBtn:hover {
  filter: brightness(80%);
}
.numWrapper[data-keypad-style="circle"] .numBtn {
  border-radius: 50% !important;
}
.numWrapper[data-keypad-style="square"] .numBtn {
  border-radius: 0 !important;
}
.numWrapper[data-keypad-style="pill"] .numBtn {
  width: 8.8vmin;
  border-radius: 999px !important;
}
.numWrapper[data-keypad-style="outline"] .numBtn:not(.iconBtn) {
  background-color: transparent;
  border: 0.25vmin solid var(--dullColor);
  border-radius: 50% !important;
}
.numWrapper[data-keypad-style="outline"] .iconBtn {
  border: 0.25vmin solid limegreen;
  border-radius: 50% !important;
}
.iconBtn {
  display: grid;
  place-items: center;
  background-color: limegreen;
}
.iconBtn span {
  display: block;
  font-size: 3.4vmin;
  line-height: 1;
  color: #ffffff;
  margin: 0;
  padding: 0;
}
.letterNum {
  font-size: 1.5vmin;
}
.numBtn::before,
.numBtn::after {
  position: absolute;
  text-align: center;
  color: var(--txtColor);
}
.numBtn::before {
  content: attr(numValue);
  top: 1.2vmin;
  left: 0;
  width: 100%;
  font-size: 3vmin;
  line-height: 1;
}
.numBtn::after {
  content: attr(letterValue);
  font-size: 1.2vmin;
  font-weight: 600;
  letter-spacing: 0.25vmin;
  text-indent: 0.25vmin;
  width: fit-content;
  transform: translateX(-50%);
  bottom: 1.2vmin;
  left: 50%;
}
.screen:nth-of-type(3) .sticky {
  padding: 3vmin;
}
.screen:nth-of-type(3) .screenTitle {
  padding: 0;
  padding-bottom: 1.5vmin;
}
.contactsHeader {
  background-color: var(--bgColor);
  z-index: 8;
}
.contactsList {
  min-height: 0;
}
.contactsTopLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 3vmin;
}
.contactsHeaderButton,
.contactsIconButton {
  background-color: transparent;
  border: none;
  color: var(--linkColor);
  cursor: pointer;
  font: inherit;
  font-size: 2vmin;
  font-weight: 600;
}
.contactsActions {
  display: flex;
  gap: 0.6vmin;
  position: relative;
}
.contactsIconButton {
  display: grid;
  place-items: center;
  width: 4.6vmin;
  height: 4.6vmin;
  border-radius: 50%;
}
.contactSettingsPanel {
  display: none;
  gap: 1vmin;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  margin-bottom: 1.3vmin;
  padding: 1vmin;
}
.contactSettingsPanel.isOpen {
  display: grid;
}
.contactSettingSelect {
  display: grid;
  gap: 0.5vmin;
  color: var(--dullColor);
  font-size: 1.25vmin;
  font-weight: 600;
}
.contactSettingSelect select {
  width: 100%;
  background-color: var(--bgColor);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.45vmin;
  padding: 0.85vmin;
}
.settingsScreen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 1.2vmin;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.settingsContent {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0.4vmin 13vmin 0;
  scrollbar-width: thin;
  scrollbar-color: var(--dullColor) transparent;
}
.settingsContent::-webkit-scrollbar {
  width: 0.8vmin;
}
.settingsContent::-webkit-scrollbar-thumb {
  background-color: var(--dullColor);
  border-radius: 999px;
}
.settingsContent > .settingsPanel + .settingsPanel {
  margin-top: 1.2vmin;
}
.settingsPanel {
  display: grid;
  gap: 0.9vmin;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  padding: 1.2vmin;
}
.settingsPanelTitle {
  color: var(--txtColor);
  font-size: 1.8vmin;
  font-weight: 600;
}
.appearanceSettingsPanel {
  gap: 1.5vmin;
  padding: 1.6vmin;
}
.appearanceSettingGroup {
  display: grid;
  gap: 0.75vmin;
}
.appearanceSettingLabel {
  color: var(--dullColor);
  font-size: 1.15vmin;
  font-weight: 600;
}
.appearanceChoiceGrid {
  display: grid;
  gap: 0.8vmin;
}
.appearanceChoiceGrid.twoChoices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.appearanceChoiceGrid.threeChoices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.appearanceChoiceGrid.fourChoices {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.appearanceChoice {
  display: grid;
  min-height: 6.4vmin;
  place-items: center;
  align-content: center;
  gap: 0.45vmin;
  padding: 0.9vmin 0.7vmin;
  background-color: var(--bgColor);
  border: 2px solid var(--lightColor);
  border-radius: 1.4vmin;
  color: var(--txtColor);
  cursor: pointer;
  font: inherit;
  font-size: 1.2vmin;
  font-weight: 600;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.appearanceChoice:hover {
  border-color: var(--linkColor);
  transform: translateY(-1px);
}
.appearanceChoice:focus-visible {
  outline: 0.3vmin solid var(--linkColor);
  outline-offset: 0.2vmin;
}
.appearanceChoice.isSelected {
  background-color: var(--linkColor);
  border-color: var(--linkColor);
  color: #ffffff;
  box-shadow: 0 0.35vmin 1vmin rgba(30, 144, 255, 0.22);
}
.appearanceChoice .material-icons-outlined {
  font-size: 2.3vmin;
}
.backgroundChoice {
  min-height: 7.1vmin;
}
.backgroundPreview {
  display: block;
  width: 3.3vmin;
  height: 2.35vmin;
  border: 0.2vmin solid currentColor;
}
.mistBackgroundPreview {
  background: linear-gradient(135deg, #dce4eb, #f8fafb 46%, #d8e1e9);
}
.linenBackgroundPreview {
  background:
    repeating-linear-gradient(135deg, rgba(78, 94, 110, 0.45) 0 1px, transparent 1px 5px),
    #e1e7ec;
}
.cloudBackgroundPreview {
  background: linear-gradient(160deg, #ffffff 0 35%, #d1dce5 35% 62%, #f8fafb 62%);
}
.slateBackgroundPreview {
  background: linear-gradient(135deg, #bfcbd6, #edf2f5 52%, #aebdca);
}
.warmBackgroundPreview {
  background: linear-gradient(135deg, #e9e4dc, #fffdf9 50%, #d5e0e6);
}
.customBackgroundControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.7vmin;
  align-items: center;
}
.uploadBackgroundButton,
.clearBackgroundImageBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45vmin;
  min-height: 3.7vmin;
  box-sizing: border-box;
  padding: 0.65vmin 0.75vmin;
  background-color: var(--bgColor);
  border: 1px solid var(--lightColor);
  border-radius: 0.8vmin;
  color: var(--txtColor);
  cursor: pointer;
  font: inherit;
  font-size: 1.05vmin;
  font-weight: 600;
  text-align: center;
}
.uploadBackgroundButton:hover,
.clearBackgroundImageBtn:hover:not(:disabled) {
  border-color: var(--linkColor);
  color: var(--linkColor);
}
.uploadBackgroundButton .material-icons-outlined {
  margin: 0;
  font-size: 1.7vmin !important;
}
.clearBackgroundImageBtn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.backgroundImageStatus {
  grid-column: 1 / -1;
  color: var(--dullColor);
  font-size: 1.05vmin;
  line-height: 1.35;
}
.shapePreview {
  display: block;
  width: 2.5vmin;
  height: 2.5vmin;
  border: 0.25vmin solid currentColor;
}
.roundedPreview {
  border-radius: 50%;
}
.softBoxPreview {
  border-radius: 0.65vmin;
}
.boxyPreview {
  border-radius: 0;
}
.keypadStyleChoice {
  min-height: 7.2vmin;
  font-size: 1.05vmin;
}
.keypadPreview {
  display: block;
  width: 2.8vmin;
  height: 2.8vmin;
  border: 0.28vmin solid currentColor;
}
.circleKeypadPreview {
  border-radius: 50%;
}
.squareKeypadPreview {
  border-radius: 0;
}
.pillKeypadPreview {
  width: 3.5vmin;
  height: 2.2vmin;
  border-radius: 999px;
}
.outlineKeypadPreview {
  border-radius: 50%;
  background-color: transparent;
  box-shadow: inset 0 0 0 0.35vmin var(--bgColor);
}
.sipSettingsForm {
  display: grid;
  gap: 0.75vmin;
}
.sipFieldLabel {
  color: var(--txtColor);
  font-size: 1.1vmin;
  font-weight: 600;
  margin-bottom: -0.45vmin;
}
.sipSettingsForm input,
.sipSettingsForm select {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bgColor);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.35vmin;
  padding: 0.8vmin;
}
.passwordField {
  position: relative;
}
.passwordField input {
  padding-right: 4.2vmin;
}
.passwordField button {
  position: absolute;
  top: 50%;
  right: 0.25vmin;
  display: grid;
  width: 3.4vmin;
  height: calc(100% - 0.5vmin);
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0.75vmin;
  background: transparent;
  color: var(--dullColor);
  cursor: pointer;
}
.passwordField button:hover {
  background-color: var(--footerIcon);
  color: var(--txtColor);
}
.passwordField button span {
  font-size: 1.8vmin;
}
.sipSettingsActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75vmin;
}
.sipSettingsActions button {
  border: none;
  border-radius: 1vmin;
  cursor: pointer;
  font: inherit;
  font-size: 1.25vmin;
  font-weight: 600;
  padding: 0.85vmin;
}
.sipSettingsActions button:first-child {
  background-color: var(--linkColor);
  color: #ffffff;
}
.sipSettingsActions button:last-child {
  background-color: var(--lightColor);
  color: var(--txtColor);
}
.sipStatus {
  border-radius: 1vmin;
  font-size: 1.15vmin;
  line-height: 1.25;
  padding: 0.8vmin;
}
.sipHint {
  color: var(--dullColor);
  font-size: 1.1vmin;
  line-height: 1.25;
  padding: 0 0.3vmin;
}
.notificationPermissionBtn {
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  background-color: var(--bgColor);
  color: var(--txtColor);
  cursor: pointer;
  font: inherit;
  font-size: 1.15vmin;
  font-weight: 600;
  padding: 0.8vmin;
}
.notificationPermissionBtn:disabled {
  cursor: default;
  opacity: 0.62;
}
.sipStatus.needsInfo {
  background-color: rgba(255, 69, 0, 0.12);
  color: orangered;
}
.sipStatus.isReady {
  background-color: rgba(50, 205, 50, 0.12);
  color: limegreen;
}
.sipCallPanel {
  position: absolute;
  top: 8vmin;
  left: 50%;
  display: none;
  width: calc(100% - 8vmin);
  transform: translateX(-50%);
  background-color: var(--bgColor);
  border: 1px solid var(--lightColor);
  border-radius: 2vmin;
  box-shadow: 0 1vmin 3vmin rgba(0, 0, 0, 0.24);
  padding: 1.6vmin;
  z-index: 30;
}
.sipCallPanel.isOpen {
  display: grid;
  gap: 0.6vmin;
}
.sipCallState {
  color: var(--linkColor);
  font-size: 1.35vmin;
  font-weight: 600;
}
.sipCallName {
  color: var(--txtColor);
  font-size: 2.1vmin;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sipCallNumber {
  color: var(--dullColor);
  font-size: 1.45vmin;
}
.sipCallFrom {
  display: none;
  color: var(--dullColor);
  font-size: 1.2vmin;
}
.sipCallFrom.hasValue {
  display: block;
}
.sipVideoStage {
  position: relative;
  display: none;
  height: 24vmin;
  overflow: hidden;
  background-color: #111111;
  border-radius: 1.5vmin;
}
.sipCallPanel.isVideo .sipVideoStage {
  display: block;
}
.sipRemoteVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sipLocalVideo {
  position: absolute;
  right: 1vmin;
  bottom: 1vmin;
  width: 11vmin;
  height: 8vmin;
  object-fit: cover;
  background-color: #222222;
  border: 0.25vmin solid rgba(255, 255, 255, 0.8);
  border-radius: 1vmin;
}
.enableCallAudioBtn {
  display: none;
  width: 100%;
  margin-top: 1vmin;
  padding: 1vmin 1.2vmin;
  border: 0;
  border-radius: 1vmin;
  background-color: var(--linkColor);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 1.35vmin;
  font-weight: 600;
}
.enableCallAudioBtn.isVisible {
  display: block;
}
.sipCallActions {
  display: flex;
  justify-content: center;
  gap: 1.4vmin;
  margin-top: 1vmin;
}
.sipDtmfDisplay {
  display: none;
  min-height: 2.3vmin;
  color: var(--txtColor);
  font-size: 1.7vmin;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  overflow-wrap: anywhere;
}
.sipDtmfKeypad {
  display: none;
  grid-template-columns: repeat(3, 5.2vmin);
  justify-content: center;
  gap: 0.7vmin;
  margin-top: 0.5vmin;
}
.sipCallPanel.isKeypadOpen .sipDtmfDisplay,
.sipCallPanel.isKeypadOpen .sipDtmfKeypad {
  display: grid;
}
.sipDtmfButton {
  display: grid;
  place-items: center;
  width: 5.2vmin;
  height: 4.6vmin;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  color: var(--txtColor);
  cursor: pointer;
  font: inherit;
  font-size: 1.8vmin;
  font-weight: 600;
}
.sipDtmfButton:hover {
  border-color: var(--linkColor);
  color: var(--linkColor);
}
.sipCallActions button {
  display: grid;
  place-items: center;
  width: 6vmin;
  height: 6vmin;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
}
.sipCallActions span {
  margin: 0;
  font-size: 3vmin !important;
}
.sipAnswerBtn {
  display: none !important;
  background-color: limegreen;
}
.sipMuteBtn {
  background-color: var(--dullColor);
}
.sipKeypadBtn {
  display: none !important;
  background-color: var(--dullColor);
}
.sipCallPanel.isConnected .sipKeypadBtn {
  display: grid !important;
}
.sipCallPanel.isKeypadOpen .sipKeypadBtn {
  background-color: var(--linkColor);
}
.sipMuteBtn.isMuted {
  background-color: var(--linkColor);
}
.sipMuteBtn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.sipHangupBtn {
  background-color: orangered;
}
.sipCallPanel.isIncoming .sipAnswerBtn {
  display: grid !important;
}
.incomingCallModal {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: clamp(16px, 4vmin, 40px);
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(0.6vmin);
}
.incomingCallModal.isOpen {
  display: grid;
}
.incomingCallCard {
  display: grid;
  width: min(100%, 52vmin);
  gap: 1.2vmin;
  box-sizing: border-box;
  padding: clamp(22px, 3.5vmin, 42px);
  border: 1px solid var(--lightColor);
  border-radius: 2.4vmin;
  background-color: var(--bgColor);
  box-shadow: 0 2vmin 6vmin rgba(0, 0, 0, 0.38);
  color: var(--txtColor);
  text-align: center;
}
.incomingCallEyebrow {
  color: var(--linkColor);
  font-size: clamp(15px, 1.5vmin, 20px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.incomingCallName {
  font-size: clamp(28px, 3.4vmin, 44px);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.incomingCallNumber,
.incomingCallLine {
  color: var(--dullColor);
  font-size: clamp(15px, 1.55vmin, 21px);
  overflow-wrap: anywhere;
}
.incomingCallActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2vmin;
  margin-top: 1.8vmin;
}
.incomingCallActions button {
  min-height: clamp(54px, 7vmin, 78px);
  border: 0;
  border-radius: 1.2vmin;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: clamp(16px, 1.6vmin, 22px);
  font-weight: 600;
}
.incomingAnswerBtn {
  background-color: limegreen;
}
.incomingDeclineBtn {
  background-color: orangered;
}
.contactSettingsActions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7vmin;
}
.contactSettingsActions .contactsIconButton {
  gap: 0.2vmin;
  width: auto;
  height: auto;
  min-height: 5.8vmin;
  border-radius: 1vmin;
  background-color: var(--bgColor);
  font-size: 1.15vmin;
  line-height: 1;
}
.contactsIconButton:hover,
.contactsHeaderButton:hover {
  background-color: var(--footerIcon);
}
.contactsIconButton span {
  font-size: 2.8vmin !important;
  margin: 0;
}
.contactAddForm {
  display: none;
  gap: 1vmin;
  padding-bottom: 1.5vmin;
}
.contactSearchWrap {
  display: flex;
  align-items: center;
  gap: 0.6vmin;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  margin-bottom: 1.4vmin;
  padding: 0.8vmin 1vmin;
}
.contactSearchWrap span {
  color: var(--dullColor);
  font-size: 2.1vmin !important;
  margin: 0;
}
.contactSearchWrap input {
  width: 100%;
  background-color: transparent;
  border: none;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.55vmin;
  outline: none;
}
.contactSearchWrap input::placeholder {
  color: var(--dullColor);
}
.contactAddForm.isOpen {
  display: grid;
}
.contactAddForm input {
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.6vmin;
  padding: 1vmin;
}
.contactAddForm input::placeholder {
  color: var(--dullColor);
}
.contactFormActions {
  display: flex;
  gap: 1vmin;
}
.contactFormActions button {
  flex: 1;
  border: none;
  border-radius: 1vmin;
  cursor: pointer;
  font: inherit;
  font-size: 1.5vmin;
  font-weight: 600;
  padding: 0.9vmin;
}
.contactFormActions button:first-child {
  background-color: var(--linkColor);
  color: #ffffff;
}
.contactFormActions button:last-child {
  background-color: var(--lightColor);
  color: var(--txtColor);
}
.contactRow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1vmin;
  padding: 1.35vmin 0;
  margin: 0 3vmin;
  font-size: 2vmin;
  font-weight: 600;
  line-height: 1.18;
  border-bottom: 1px solid var(--lightColor);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.contactRowText {
  display: grid;
  gap: 0.25vmin;
  min-width: 0;
  flex: 1;
}
.contactRowName {
  min-width: 0;
}
.contactRowPhone {
  color: var(--dullColor);
  font-size: 1.25vmin;
  font-weight: 400;
}
.contactAvatar,
.contactAvatarLarge,
.contactAvatarHero {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background-color: var(--footerIcon);
  color: var(--linkColor);
  font-weight: 600;
  overflow: hidden;
}
.contactAvatar {
  width: 3.8vmin;
  height: 3.8vmin;
  border-radius: 50%;
  font-size: 1.35vmin;
}
.contactAvatarLarge {
  width: 9vmin;
  height: 9vmin;
  border-radius: 50%;
  font-size: 3vmin;
  margin: 0 auto 1vmin;
}
.contactAvatarHero {
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  font-size: 2.8vmin;
}
.contactAvatar img,
.contactAvatarLarge img,
.contactAvatarHero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contactRow.isSelected::before {
  content: "check_circle";
  font-family: "Material Icons";
  position: absolute;
  right: 0;
  color: orangered;
}
.contactsDeleteMode .contactRow:not(.letterStick):not(.lastRow) {
  padding-right: 4vmin;
}
.contactsDeleteMode .contactRow:not(.letterStick):not(.lastRow)::after {
  content: "radio_button_unchecked";
  font-family: "Material Icons Outlined";
  position: absolute;
  right: 0;
  color: var(--dullColor);
}
.contactsDeleteMode .contactRow.isSelected::after {
  content: "check_circle";
  font-family: "Material Icons";
  color: orangered;
}
.contactsDeleteMode .contactRow.isSelected::before {
  content: "";
}
.contactRow:not(.letterStick):not(.lastRow):hover {
  color: var(--linkColor);
}
.almostLast {
  border: none;
}
.letterStick {
  display: block;
  border: none;
  background-color: var(--lightColor);
  position: sticky;
  top: 9vmin;
  margin: 0;
  padding: 0.75vmin 3vmin;
  font-size: 1.6vmin;
  line-height: 1;
}
.dialerTop {
  position: absolute;
  top: 7vmin;
  left: 4vmin;
  right: 4vmin;
  display: grid;
  gap: 1vmin;
  z-index: 3;
}
.callFromControl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8vmin;
  color: var(--dullColor);
  font-size: 1.15vmin;
  font-weight: 600;
}
.callFromControl select {
  min-width: 0;
  border: 1px solid var(--lightColor);
  border-radius: 0.8vmin;
  background-color: var(--footerIcon);
  color: var(--txtColor);
  cursor: pointer;
  font: inherit;
  padding: 0.65vmin 2.4vmin 0.65vmin 0.8vmin;
}
.dialedNumber {
  min-height: 5vmin;
  color: var(--txtColor);
  font-size: 3.2vmin;
  font-weight: 400;
  text-align: center;
}
.dialBackspace {
  display: none;
  justify-self: center;
  background-color: transparent;
  border: none;
  color: var(--dullColor);
  cursor: pointer;
}
.dialBackspace.isVisible {
  display: grid;
}
.dialBackspace span {
  font-size: 2.7vmin !important;
  margin: 0;
}
.dialSuggestions {
  display: grid;
  gap: 0.7vmin;
}
.dialSuggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  color: var(--txtColor);
  font-size: 1.45vmin;
  padding: 0.8vmin 1vmin;
}
.dialSuggestionName {
  font-weight: 600;
}
.dialSuggestionPhone {
  color: var(--dullColor);
}
.desktopSidePane {
  display: none;
}
.sidePaneEmpty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1vmin;
  height: 100%;
  color: var(--dullColor);
  font-size: 2vmin;
  text-align: center;
}
.sidePaneEmpty span {
  font-size: 6vmin !important;
  margin: 0;
}
.desktopDetailCard {
  display: grid;
  gap: 1.2vmin;
}
.desktopProfileHead {
  display: flex;
  align-items: center;
  gap: 1.3vmin;
  margin-bottom: 0.3vmin;
}
.desktopDetailName {
  color: var(--txtColor);
  font-size: 3.2vmin;
  font-weight: 600;
}
.desktopDetailField {
  display: grid;
  gap: 0.35vmin;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  padding: 1.2vmin;
}
.desktopDetailLabel {
  color: var(--dullColor);
  font-size: 1.25vmin;
  font-weight: 600;
  text-transform: uppercase;
}
.desktopDetailValue {
  color: var(--txtColor);
  font-size: 1.7vmin;
  overflow-wrap: anywhere;
}
.recentPersonHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vmin;
  margin-bottom: 0.6vmin;
}
.recentPersonIdentity {
  display: grid;
  gap: 0.35vmin;
}
.recentPersonNumber {
  color: var(--dullColor);
  font-size: 1.45vmin;
}
.recentSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8vmin;
}
.recentSummaryItem {
  display: grid;
  gap: 0.25vmin;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  padding: 1vmin;
}
.recentSummaryCount {
  color: var(--txtColor);
  font-size: 2vmin;
  font-weight: 600;
}
.recentSummaryLabel {
  color: var(--dullColor);
  font-size: 1.15vmin;
}
.recentTimelineTitle {
  color: var(--txtColor);
  font-size: 1.65vmin;
  font-weight: 600;
  margin-top: 0.7vmin;
}
.recentTimeline {
  display: grid;
  gap: 0.7vmin;
}
.recentTimelineItem {
  display: grid;
  grid-template-columns: 3.4vmin minmax(0, 1fr) auto;
  align-items: center;
  gap: 1vmin;
  border-bottom: 1px solid var(--lightColor);
  padding: 0.8vmin 0;
}
.recentTimelineIcon {
  display: grid;
  place-items: center;
  width: 3.2vmin;
  height: 3.2vmin;
  background-color: var(--footerIcon);
  border-radius: 50%;
}
.recentTimelineIcon span {
  font-size: 1.7vmin !important;
  margin: 0;
}
.recentTimelineType {
  color: var(--txtColor);
  font-size: 1.4vmin;
  font-weight: 600;
  text-transform: capitalize;
}
.recentTimelineWhen {
  color: var(--dullColor);
  font-size: 1.3vmin;
  text-align: right;
}
.recentTimelineItem.missed .recentTimelineIcon,
.recentTimelineItem.missed .recentTimelineType {
  color: orangered;
}
.recentTimelineItem.incoming .recentTimelineIcon {
  color: limegreen;
}
.recentTimelineItem.outgoing .recentTimelineIcon {
  color: var(--linkColor);
}
.desktopResultList {
  display: grid;
  gap: 1vmin;
}
.desktopResultHeader {
  color: var(--txtColor);
  font-size: 2.4vmin;
  font-weight: 600;
}
.desktopResultCard {
  display: grid;
  gap: 0.5vmin;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1.2vmin;
  padding: 1.2vmin;
}
.desktopResultName {
  color: var(--txtColor);
  font-size: 1.8vmin;
  font-weight: 600;
}
.desktopResultPhone,
.desktopResultMeta {
  color: var(--dullColor);
  font-size: 1.45vmin;
}
.desktopResultActions {
  display: flex;
  gap: 0.7vmin;
  margin-top: 0.5vmin;
}
.desktopResultAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35vmin;
  border: none;
  border-radius: 0.9vmin;
  background-color: var(--bgColor);
  color: var(--linkColor);
  cursor: pointer;
  font: inherit;
  font-size: 1.25vmin;
  font-weight: 600;
  padding: 0.7vmin 1vmin;
}
.desktopResultAction span {
  font-size: 1.8vmin !important;
  margin: 0;
}
.chatPanel,
.chatCard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1vmin;
  min-height: 100%;
}
.chatHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vmin;
}
.chatName {
  color: var(--txtColor);
  font-size: 2.2vmin;
  font-weight: 600;
}
.chatNumber {
  color: var(--dullColor);
  font-size: 1.35vmin;
  margin-top: 0.2vmin;
}
.chatClose,
.chatBackToContact {
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  width: 4vmin;
  height: 4vmin;
  background-color: var(--footerIcon);
  color: var(--txtColor);
  cursor: pointer;
}
.chatClose span,
.chatBackToContact span {
  font-size: 2.4vmin !important;
  margin: 0;
}
.chatMessages {
  display: flex;
  flex-direction: column;
  gap: 0.75vmin;
  min-height: 24vmin;
  overflow-y: auto;
  padding: 0.5vmin 0.2vmin;
}
.chatBubble {
  max-width: 76%;
  border-radius: 1.4vmin;
  padding: 0.9vmin 1vmin;
}
.incomingMessage {
  align-self: flex-start;
  background-color: var(--footerIcon);
  color: var(--txtColor);
}
.outgoingMessage {
  align-self: flex-end;
  background-color: var(--linkColor);
  color: #ffffff;
}
.chatBubbleText {
  font-size: 1.55vmin;
  overflow-wrap: anywhere;
}
.chatBubbleTime {
  font-size: 1.05vmin;
  opacity: 0.72;
  margin-top: 0.35vmin;
}
.chatComposer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 0.7vmin;
  align-items: center;
}
.chatComposer input {
  min-width: 0;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 999px;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.5vmin;
  outline: none;
  padding: 1vmin 1.2vmin;
}
.chatComposer button,
.chatImageButton {
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  width: 4.4vmin;
  height: 4.4vmin;
  background-color: var(--linkColor);
  color: #ffffff;
  cursor: pointer;
}
.chatImageButton input {
  display: none;
}
.chatMicButton.isListening {
  background-color: orangered;
}
.chatComposer button span,
.chatImageButton span {
  font-size: 2.3vmin !important;
  margin: 0;
}
.chatBubbleImage {
  display: block;
  width: min(28vmin, 100%);
  max-height: 24vmin;
  object-fit: cover;
  border-radius: 1vmin;
  margin-bottom: 0.6vmin;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(3) > .vFlex {
  display: grid;
  grid-template-columns: minmax(32vmin, 0.9fr) minmax(42vmin, 1.25fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  height: 100%;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(2) {
  overflow: hidden;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(2) > .vFlex {
  display: grid;
  grid-template-columns: minmax(32vmin, 0.9fr) minmax(46vmin, 1.25fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  padding: 0;
}
#wrapper:has(#desktopMode:checked) .recentsHeader {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid var(--lightColor);
  border-radius: 2vmin 0 0 0 !important;
  padding: 2.4vmin 2.2vmin 1.4vmin;
}
#wrapper:has(#desktopMode:checked) .recentsCallList {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  border-right: 1px solid var(--lightColor);
  padding: 0 2.2vmin 9vmin;
}
#wrapper:has(#desktopMode:checked) .recentsCallList::-webkit-scrollbar,
#wrapper:has(#desktopMode:checked) #desktopRecentPane::-webkit-scrollbar {
  width: 0.9vmin;
}
#wrapper:has(#desktopMode:checked) .recentsCallList::-webkit-scrollbar-thumb,
#wrapper:has(#desktopMode:checked) #desktopRecentPane::-webkit-scrollbar-thumb {
  background-color: var(--dullColor);
  border-radius: 999px;
}
#wrapper:has(#desktopMode:checked) #desktopRecentPane {
  display: block;
  grid-column: 2;
  grid-row: 1 / 3;
  overflow-y: auto;
  padding: 3vmin;
}
#wrapper:has(#desktopMode:checked) .recentsCallList .contact {
  height: 7.4vmin;
  font-size: 1.55vmin;
  cursor: pointer;
}
#wrapper:has(#desktopMode:checked) .recentsCallList .newContact.isActive .contact {
  background-color: var(--footerIcon);
  box-shadow: inset 0.35vmin 0 var(--linkColor);
}
#wrapper:has(#desktopMode:checked) .recentsCallList .contact:hover {
  background-color: var(--footerIcon);
}
#wrapper:has(#desktopMode:checked) .recentsCallList .callDate,
#wrapper:has(#desktopMode:checked) .recentsCallList .contactType::after {
  font-size: 1.1vmin;
}
#wrapper:has(#desktopMode:checked) .contactsHeader {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid var(--lightColor);
  border-radius: 2vmin 0 0 0;
}
#wrapper:has(#desktopMode:checked) .contactsList {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--lightColor);
}
#wrapper:has(#desktopMode:checked) .contactsList::-webkit-scrollbar {
  width: 0.9vmin;
}
#wrapper:has(#desktopMode:checked) .contactsList::-webkit-scrollbar-thumb {
  background-color: var(--dullColor);
  border-radius: 999px;
}
#wrapper:has(#desktopMode:checked) #desktopContactPane {
  display: block;
  grid-column: 2;
  grid-row: 1 / 3;
  overflow-y: auto;
  padding: 3vmin;
}
#wrapper:has(#desktopMode:checked) .contactRow {
  margin: 0 2vmin;
  padding: 1.05vmin 0;
  font-size: 1.55vmin;
  line-height: 1.22;
}
#wrapper:has(#desktopMode:checked) .contactAvatar {
  width: 3.1vmin;
  height: 3.1vmin;
  font-size: 1.1vmin;
}
#wrapper:has(#desktopMode:checked) .contactRow.isActive {
  color: var(--linkColor);
}
#wrapper:has(#desktopMode:checked) .letterStick {
  position: relative;
  top: auto;
  margin: 0;
  padding: 0.65vmin 2vmin;
  font-size: 1.25vmin;
  color: var(--dullColor);
  background-color: var(--footerIcon);
}
#wrapper:has(#desktopMode:checked) .contactsHeader {
  padding-bottom: 1.5vmin;
}
#wrapper:has(#desktopMode:checked) .contactsTopLine {
  padding-bottom: 1.5vmin;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(3) .screenTitle {
  padding-bottom: 1vmin;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(5) {
  display: grid;
  grid-template-columns: minmax(34vmin, 0.85fr) minmax(44vmin, 1.15fr);
  grid-template-rows: auto minmax(0, 1fr);
}
#wrapper:has(#desktopMode:checked) .settingsScreen {
  padding: 0;
}
#wrapper:has(#desktopMode:checked) .settingsScreen > .sticky {
  padding: 5vmin 7vmin 2vmin;
}
#wrapper:has(#desktopMode:checked) .settingsContent {
  padding: 0 7vmin 12vmin;
}
#wrapper:has(#desktopMode:checked) .settingsPanel {
  max-width: 55vmin;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(5) .dialerTop {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  grid-column: 1;
  grid-row: 1;
  padding: 5vmin 4vmin 1vmin;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(5) .numWrapper {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  box-sizing: border-box;
  width: auto;
  height: 48vmin;
  bottom: auto;
  padding: 0 6vmin 6vmin;
}
#wrapper:has(#desktopMode:checked) .dialSuggestions {
  display: none;
}
#wrapper:has(#desktopMode:checked) #desktopDialPane {
  display: block;
  grid-column: 2;
  grid-row: 1 / 3;
  overflow-y: auto;
  border-left: 1px solid var(--lightColor);
  padding: 5vmin 3vmin;
}
.messagesHeader {
  background-color: var(--bgColor);
  padding: 3vmin;
  z-index: 8;
}
.newMessageForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7vmin;
}
.newMessageForm input {
  min-width: 0;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.35vmin;
  padding: 0.8vmin 1vmin;
  outline: none;
}
.newMessageForm input:focus {
  border-color: var(--linkColor);
}
.newMessageForm button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35vmin;
  background-color: var(--linkColor);
  border: none;
  border-radius: 1vmin;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 1.15vmin;
  font-weight: 600;
  padding: 0.7vmin 1vmin;
}
.newMessageForm button span {
  margin: 0;
  font-size: 1.7vmin !important;
}
.messageSenderControl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7vmin;
  color: var(--dullColor);
  font-size: 1.15vmin;
  font-weight: 600;
}
.messageSenderControl select {
  min-width: 0;
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 0.8vmin;
  color: var(--txtColor);
  font: inherit;
  padding: 0.65vmin 0.8vmin;
}
.messagingConnectionStatus {
  background-color: rgba(255, 69, 0, 0.1);
  border: 1px solid rgba(255, 69, 0, 0.28);
  border-radius: 0.8vmin;
  color: orangered;
  font-size: 1.1vmin;
  font-weight: 600;
  padding: 0.65vmin 0.8vmin;
}
.messagingConnectionStatus.isConnected {
  background-color: rgba(50, 205, 50, 0.1);
  border-color: rgba(50, 205, 50, 0.28);
  color: limegreen;
}
.chatComposer button:disabled,
.chatImageButton.isDisabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.45;
}
.messageThreadList {
  display: grid;
  align-content: start;
  min-height: 0;
  padding-bottom: 10vmin;
}
.messageThread {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1vmin;
  margin: 0 3vmin;
  padding: 1.1vmin 0;
  border-bottom: 1px solid var(--lightColor);
  cursor: pointer;
}
.messageThread:hover,
.messageThread.isActive {
  color: var(--linkColor);
}
.messageThreadMeta {
  min-width: 0;
}
.messageThreadName {
  color: var(--txtColor);
  font-size: 1.8vmin;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messageThreadPreview {
  color: var(--dullColor);
  font-size: 1.35vmin;
  margin-top: 0.25vmin;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messageThreadTime {
  color: var(--dullColor);
  font-size: 1.2vmin;
}
#wrapper:has(#desktopMode:checked) .screen:nth-of-type(4) > .messagesScreenInner {
  display: grid;
  grid-template-columns: minmax(32vmin, 0.9fr) minmax(42vmin, 1.25fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  height: 100%;
}
#wrapper:has(#desktopMode:checked) .messagesHeader {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid var(--lightColor);
  border-radius: 2vmin 0 0 0;
  padding-bottom: 1.5vmin;
}
#wrapper:has(#desktopMode:checked) .messageThreadList {
  grid-column: 1;
  grid-row: 2;
  overflow-y: auto;
  border-right: 1px solid var(--lightColor);
  padding-bottom: 3vmin;
}
#wrapper:has(#desktopMode:checked) #desktopMessagePane {
  display: block;
  grid-column: 2;
  grid-row: 1 / 3;
  overflow-y: auto;
  padding: 5vmin 3vmin 11vmin;
}
#wrapper:has(#desktopMode:checked) .messageThread {
  margin: 0 2vmin;
}
.incoming .contactType::before,
.outgoing .contactType::before,
.missed .contactType::before {
  font-family: "Material Icons Outlined";
  font-size: 1.8vmin;
  vertical-align: middle;
  margin-right: 0.6vmin;
}

.incoming .contactType::before {
  content: "call_received";
  color: limegreen;
}

.outgoing .contactType::before {
  content: "call_made";
  color: var(--linkColor);
}

.missed .contactType::before {
  content: "call_missed";
  color: orangered;
}

.incoming .contactType::after {
  content: "incoming";
}

.outgoing .contactType::after {
  content: "outgoing";
}

.missed .contactType::after {
  content: "missed";
}

.callFilter {
  position: relative;
  display: flex;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(100% - 4vmin);
  background-color: var(--missedColor);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  padding: 0.25vmin;
  z-index: 5;
  gap: 0.1vmin;
  box-shadow: 0 0.2vmin 0.8vmin rgba(0, 0, 0, 0.08);
}

.callFilter input {
  display: none;
}

.innerWrapper .callFilter label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25vmin !important;
  position: static !important;
  width: 20% !important;
  height: auto !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--txtColor) !important;
  padding: 0.55vmin 0.15vmin !important;
  font-size: 0.82vmin !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  border-radius: 0.6vmin !important;
  text-align: center !important;
}

.innerWrapper .callFilter input:checked + label {
  background-color: var(--indiColor) !important;
  box-shadow: 0 0.1vmin 0.4vmin rgba(0, 0, 0, 0.12);
}
.filterIcon {
  font-size: 1.3vmin !important;
  margin: 0 !important;
}
.allIcon {
  color: var(--dullColor);
}
.missedIcon {
  color: orangered;
}
.outgoingIcon {
  color: var(--linkColor);
}
.incomingIcon {
  color: limegreen;
}
.pendingIcon {
  color: var(--dullColor);
}

.pendingDone {
  display: none;
  background-color: var(--linkColor);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 1.2vmin;
  font-weight: 600;
  margin-left: 1.2vmin;
  padding: 0.65vmin 1.2vmin;
}

.pendingDone:hover {
  filter: brightness(110%);
}

.showPending .pendingDone {
  display: block;
}

.pendingHandled {
  display: none !important;
}

.infoOverlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: end center;
  background-color: rgba(0, 0, 0, 0.28);
  z-index: 20;
}

.infoOverlay.isOpen {
  display: grid;
}

.infoCard {
  box-sizing: border-box;
  max-height: calc(100% - 5vmin);
  width: calc(100% - 7vmin);
  background-color: var(--bgColor);
  border: 1px solid var(--lightColor);
  border-radius: 3vmin 3vmin 0 0;
  box-shadow: 0 -0.8vmin 2.5vmin rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 3vmin;
}
.infoCard::-webkit-scrollbar {
  width: 0.7vmin;
}
.infoCard::-webkit-scrollbar-thumb {
  background-color: var(--dullColor);
  border-radius: 999px;
}
.infoCard:has(.editContactForm.isOpen) .infoFields {
  display: none;
}

.infoHandle {
  width: 7vmin;
  height: 0.5vmin;
  margin: 0 auto 2vmin;
  background-color: var(--lightColor);
  border-radius: 999px;
}

.infoName {
  font-size: 2.6vmin;
  font-weight: 600;
  margin-bottom: 0.8vmin;
}

.infoLine {
  color: var(--dullColor);
  font-size: 1.7vmin;
  margin-top: 0.6vmin;
}
.infoFields,
.editContactForm {
  display: grid;
  gap: 0.8vmin;
  margin-top: 1.5vmin;
}
.infoField {
  display: grid;
  gap: 0.2vmin;
  background-color: var(--footerIcon);
  border-radius: 1vmin;
  padding: 0.9vmin 1vmin;
}
.infoFieldLabel {
  color: var(--dullColor);
  font-size: 1.15vmin;
  font-weight: 600;
  text-transform: uppercase;
}
.infoFieldValue {
  color: var(--txtColor);
  font-size: 1.55vmin;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.editContactForm {
  display: none;
}
.editContactForm.isOpen {
  display: grid;
  padding-bottom: 2vmin;
}
.editContactForm input,
.editContactForm textarea {
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.45vmin;
  padding: 0.9vmin;
}
.editContactForm textarea {
  min-height: 7vmin;
  resize: vertical;
}
.editPhoneList {
  display: grid;
  gap: 0.7vmin;
}
.editPhoneRow {
  display: grid;
  grid-template-columns: minmax(8vmin, 0.42fr) 1fr 4.2vmin;
  gap: 0.7vmin;
  align-items: center;
}
.editContactForm select {
  background-color: var(--footerIcon);
  border: 1px solid var(--lightColor);
  border-radius: 1vmin;
  color: var(--txtColor);
  font: inherit;
  font-size: 1.35vmin;
  min-width: 0;
  padding: 0.9vmin;
}
.removeContactPhone,
.addContactPhone {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 1vmin;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.removeContactPhone {
  width: 4.2vmin;
  height: 4.2vmin;
  background-color: var(--lightColor);
  color: orangered;
}
.addContactPhone {
  gap: 0.4vmin;
  background-color: var(--footerIcon);
  color: var(--linkColor);
  font-size: 1.45vmin;
  padding: 0.85vmin 1vmin;
}
.addContactPhone span,
.removeContactPhone span {
  font-size: 2.1vmin !important;
  margin: 0;
}

#wrapper:has(#desktopMode:checked) .infoOverlay {
  place-items: center;
  padding: 3vmin;
}
#wrapper:has(#desktopMode:checked) .infoCard {
  width: min(86vmin, calc(100% - 8vmin));
  max-height: calc(100% - 8vmin);
  border-radius: 2.4vmin;
  box-shadow: 0 1.2vmin 3.2vmin rgba(0, 0, 0, 0.24);
  padding: 2.4vmin;
}
#wrapper:has(#desktopMode:checked) .infoCard:has(.editContactForm.isOpen) .contactInfoPhoto {
  margin-top: -0.8vmin;
}
#wrapper:has(#desktopMode:checked) .infoCard:has(.editContactForm.isOpen) .contactAvatarLarge {
  width: 6vmin;
  height: 6vmin;
  font-size: 2vmin;
  margin-bottom: 0.5vmin;
}
#wrapper:has(#desktopMode:checked) .infoCard:has(.editContactForm.isOpen) .infoName {
  font-size: 2.15vmin;
  margin-bottom: 0.3vmin;
}
#wrapper:has(#desktopMode:checked) .infoCard:has(.editContactForm.isOpen) .infoActions {
  display: none;
}
#wrapper:has(#desktopMode:checked) .editContactForm.isOpen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75vmin 1vmin;
  margin-top: 1vmin;
}
#wrapper:has(#desktopMode:checked) .editContactForm input,
#wrapper:has(#desktopMode:checked) .editContactForm textarea,
#wrapper:has(#desktopMode:checked) .editContactForm select {
  min-width: 0;
  border-radius: 0.8vmin;
  font-size: 1.12vmin;
  padding: 0.7vmin 0.85vmin;
}
#wrapper:has(#desktopMode:checked) .editContactName,
#wrapper:has(#desktopMode:checked) .editPhoneList,
#wrapper:has(#desktopMode:checked) .addContactPhone,
#wrapper:has(#desktopMode:checked) .editContactPhoto,
#wrapper:has(#desktopMode:checked) .editContactPhotoFile,
#wrapper:has(#desktopMode:checked) .editContactNote,
#wrapper:has(#desktopMode:checked) .contactFormActions {
  grid-column: 1 / -1;
}
#wrapper:has(#desktopMode:checked) .editPhoneRow {
  grid-template-columns: minmax(10vmin, 0.34fr) minmax(0, 1fr) 3.6vmin;
}
#wrapper:has(#desktopMode:checked) .removeContactPhone {
  width: 3.6vmin;
  height: 3.6vmin;
}
#wrapper:has(#desktopMode:checked) .addContactPhone {
  min-height: 3.8vmin;
  font-size: 1.15vmin;
  padding: 0.65vmin;
}
#wrapper:has(#desktopMode:checked) .editContactNote {
  min-height: 9vmin;
}
#wrapper:has(#desktopMode:checked) .contactFormActions {
  position: sticky;
  bottom: -2.4vmin;
  background-color: var(--bgColor);
  border-top: 1px solid var(--lightColor);
  margin: 0 -2.4vmin -2.4vmin;
  padding: 1.2vmin 2.4vmin 1.5vmin;
}

.infoSectionTitle {
  color: var(--txtColor);
  font-size: 1.5vmin;
  font-weight: 600;
  margin-top: 2.2vmin;
}

.infoHistory {
  display: grid;
  gap: 0.8vmin;
  margin-top: 1vmin;
}

.infoHistoryItem {
  display: flex;
  justify-content: space-between;
  background-color: var(--footerIcon);
  border-radius: 1vmin;
  color: var(--dullColor);
  font-size: 1.45vmin;
  padding: 0.8vmin 1vmin;
}

.infoActions {
  display: flex;
  flex-wrap: wrap;
  gap: 1vmin;
  margin-top: 2.5vmin;
}

.infoAction {
  flex: 1 1 8vmin;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 1.2vmin;
  cursor: pointer;
  font: inherit;
  font-size: 1.6vmin;
  font-weight: 600;
  padding: 1.1vmin;
}

.infoAction span {
  font-size: 2.7vmin !important;
  margin: 0;
}

.infoAction.primary {
  background-color: var(--lightColor);
  border-left: 0.45vmin solid limegreen;
  color: limegreen;
}

.infoAction.message {
  background-color: var(--lightColor);
  border-right: 0.45vmin solid var(--linkColor);
  color: var(--linkColor);
}

.infoAction.video {
  background-color: var(--lightColor);
  color: var(--dullColor);
}

.infoAction.danger {
  background-color: orangered;
  color: #ffffff;
}
.infoAction.edit {
  background-color: var(--lightColor);
  color: var(--txtColor);
}

.infoAction.secondary {
  background-color: var(--lightColor);
  color: var(--txtColor);
}

.importNotice {
  position: absolute;
  top: 8vmin;
  left: 50%;
  display: none;
  width: calc(100% - 9vmin);
  transform: translateX(-50%);
  background-color: var(--bgColor);
  border: 1px solid var(--lightColor);
  border-radius: 1.8vmin;
  box-shadow: 0 0.8vmin 2.4vmin rgba(0, 0, 0, 0.18);
  padding: 1.6vmin;
  z-index: 24;
}

.importNotice.isOpen {
  display: block;
}

.importNoticeTop {
  display: flex;
  justify-content: space-between;
  color: var(--txtColor);
  font-size: 1.55vmin;
  font-weight: 600;
}

.importBar {
  height: 0.9vmin;
  background-color: var(--footerIcon);
  border-radius: 999px;
  margin: 1.2vmin 0 0.8vmin;
  overflow: hidden;
}

.importBarFill {
  width: 0;
  height: 100%;
  background-color: var(--linkColor);
  border-radius: inherit;
  transition: width 160ms ease;
}

.importMeta {
  color: var(--dullColor);
  font-size: 1.35vmin;
}