@media (max-width: 850px) {
  .contactPage {
    padding-left: 0px;
    height: calc(100vh - 80px);
    padding-top: 80px;
  }

  .detailsSection {
    * {
      font-size: 20px !important;
    }
  }

  .addContactFab {
    bottom: 104px;
    right: 24px;
  }

  .contactActionsFab {
    bottom: 104px;
    right: 24px;
  }
}

@media (max-width: 590px) {
  .contactList {
    * {
      font-size: 16px !important;
    }
  }
}

@media (max-width: 490px) {
  .overlay-left {
    width: 100%;
    height: 367px;
    display: flex;
    justify-content: center;
  }

  .overlay-body {
    width: 100% !important;
  }

  #addContactMobileOverlay,
  #editContactImgMobile {
    width: 90%;
    max-width: 395px;
    height: 367px;
    object-fit: contain;
    object-position: center;
  }

  .overlay-body {
    .detailsAvatar {
      top: 325px;
    }
  }
}

@media (max-width: 425px) {
  #editContactImgMobile {
    background-color: #2a3647;
  }

  .add-contact-overlay-right {
    transform: translateX(0px);
  }

  .add-contact-overlay-form {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    align-items: center;
  }

  .add-contact-overlay-form input {
    font-size: 16px;
    width: 100%;
    max-width: 320px;
  }

  .overlay-left {
    width: 100%;
  }

  .overlay-panel {
    height: 700px;
  }

  .avatar {
    top: 360px;
    width: 100px;
    height: 100px;
  }

  .avatar img {
    width: 100px;
    height: 100px;
  }

  #submitAdd {
    transform: translateX(0px);
  }

  .overlay-body {
    padding-top: 72px;
    overflow-y: hidden;
  }
}

@media (max-width: 405px) {
  .overlay {
    padding: 20px;
  }
}

@media (max-width: 388px) {
  .contactDetailsHeader .header-small {
    width: 190px;
  }

  #submitAdd {
    transform: translateX(0px);
  }

  .detailsTop {
    gap: 18px;
  }

  .detailsName {
    font-size: 30px;
  }

  .detailsSection {
    * {
      font-size: 16px !important;
    }
  }

  .overlay-body {
    padding-left: 0px;
    padding-right: 0px;
    width: 100% !important;
  }

  .add-contact-overlay-form input {
    align-self: center;
    width: 100%;
    max-width: 280px;
  }

  .add-contact-overlay-form {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 370px) {
  .contactItem {
    gap: 12px;
  }

  .contactList {
    padding-left: 0;
  }

  .add-contact-overlay-right {
    margin: 0;
  }

  .add-contact-overlay-form input {
    width: 250px;
  }

  #addContactImgMobile,
  #editContactImgMobile {
    width: 80%;
  }
}

@media (max-width: 345px) {
  .overlay-left img {
    height: auto;
  }
}

@media (min-width: 925px) {
  #editAvatar {
    transform: translateY(-20px);
  }
}

/* Max Height queries */

@media (max-height: 790px) and (max-width: 925px) {
  #addContactMobileOverlay {
    height: 300px;
  }

  .overlay-body {
    height: 350px;
    overflow-y: hidden;
  }

  #editContactImgMobile {
    height: 300px;
  }

  #editContactForm {
    height: 350px;
  }

  .avatar {
    top: 340px;
  }

  .overlay-panel {
    height: 96vh;
    max-height: unset;
  }
}

@media (max-height: 739px) {
  .contactPage {
    padding-top: 80px;
  }

  .contactDetails {
    padding-top: 12px;
  }
}

@media (max-height: 730px) and (max-width: 925px) {
  .overlay-close {
    top: 48px;
  }
}

@media (max-height: 720px) and (max-width: 925px) {
  .overlay-left {
    height: 250px;
  }

  #editContactImgMobile {
    height: 250px;
  }

  #addContactMobileOverlay {
    height: 250px;
  }

  .avatar {
    top: 240px;
  }

  .add-contact-overlay-form {
    gap: 16;
  }

  .overlay-body {
    .detailsAvatar {
      top: 210px;
    }
  }
}

@media (max-height: 690px) and (max-width: 925px) {
  .add-contact-overlay-form {
    gap: 16px;
  }
}

@media (max-height: 660px) and (max-width: 925px) {
  .overlay-close {
    top: 62px;
  }
}

@media (max-height: 630px) and (max-width: 925px) {
  .overlay-close {
    top: 80px;
  }

  .overlay-body {
    height: 370px;
  }
}

@media (max-height: 590px) and (max-width: 925px) {
  .overlay-close {
    top: 96px;
  }
}

@media (min-width: 490px) and (max-width: 925px) and (min-height: 720px) and (max-height: 790px) {
  .overlay {
    .detailsAvatar {
      top: 260px;
    }
  }
}