:root {
  --primary-font-family: 'mulish';
  --primary-bg-color: linear-gradient(345deg, #230860 0%, #00b6ff 100%);
  --primary-color: white;
}

.add-section {
  position: absolute !important;
  width: 40%;
  top: 0;
  left: 0 !important;
  height: 100vh;
  background-color: transparent !important;
  box-shadow: none !important;
  animation: slideInLeft 0.5s ease-in-out forwards;
}

.dropdown-menu {
  .dropdown-item {
    border-bottom: unset !important;
    font-family: var(--website-font-family) !important;
  }

  .dropdown-item:active {
    background-color: transparent !important;
  }
}

.add-section.closing {
  animation: slideOutLeft 0.5 s ease-in-out forwards;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-100%);
    /* Close to the left side */
    opacity: 0;
  }
}


@media screen and (min-width: 1280px) {
  .content-side {
    h1 {
      font-size: 72px !important;
      line-height: 40px !important;
    }

    h2 {
      font-size: 48px !important;
      line-height: 40px !important;
    }

    h3 {
      font-size: 32px !important;
      line-height: 30px !important;
    }

    h4 {
      font-size: 24px !important;
      line-height: 26px !important;
    }

    h5 {
      font-size: 18px !important;
      line-height: 20px !important;
    }
  }

}

@media screen and (min-width: 768px) {
  .content-side {
    h1 {
      font-size: 46px;
      line-height: 54px;
    }

    h2 {
      font-size: 35px;
      line-height: 42px;
    }

    h3 {
      font-size: 28px;
      line-height: 36px;
    }

    h4 {
      font-size: 18px;
      line-height: 26px;
    }

    h5 {
      font-size: 16px;
      line-height: 24px;
    }
  }

}

.content-side {
  h1 {
    font-size: 36px;
    line-height: 42px;
  }

  h2 {
    font-size: 30px;
    line-height: 36px;
  }

  h3 {
    font-size: 24px;
    line-height: 32px;
  }

  h4 {
    font-size: 18px;
    line-height: 26px;
  }

  h5 {
    font-size: 16px;
    line-height: 24px;
  }
}

.link-editor {
  height: 100vh;
  width: 28vw;
  position: absolute !important;
  top: 0;
  left: 0 !important;
  animation: slideInLeft 0.5s ease-in-out forwards;
}

@media screen and (max-width : 475px) {
  .link-editor {
    width: 100% !important;
  }

  .link-editor {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sidepanel-class {
    max-width: 100vw !important;
  }

  .address-class {
    width: 100vw;
  }

  .media-selector {
    width: 100% !important;
    max-width: 100% !important;
  }

  .add-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .address-class {
    width: 100vw;
  }

}

.mat-mdc-form-field-subscript-wrapper {
  display: none;
}

.media-selector {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 45%;
  height: 100vh;
  animation: slideInLeft 0.5s ease-in-out forwards;
}

/* .appointment-form {
  @media only screen and (max-width: 500px) {
    margin: auto !important;
    height: 65vh !important;
    width: 95vw !important;
  }
} */

/* .hover-effect:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
} */

.sidepanel-class {
  position: absolute !important;
  right: 0px;
  top: 0px;
  height: 100vh;
}

.video-call-dialog {
  width: 55% !important;
  height: 85vh !important;
  border-radius: 18px !important;

  .mat-mdc-dialog-surface {
    border-radius: 22px !important;
  }
}

@media screen and (max-width:475px) {
  .video-call-dialog {
    width: 100% !important;
    height: 100% !important;

    .mat-mdc-dialog-surface {
      border-radius: 0px !important;
    }
  }
}

.swal2-popup {
  position: relative;
}

.swal2-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 15px !important;
}

.scroll-container-store {
  .cdk-virtual-scroll-content-wrapper {
    position: unset !important;
  }
}

.p-rating-icon {
  color: gold;
}

.appointment-form {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  position: static;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  border-radius: 18px;

  .mat-mdc-dialog-surface {
    border-radius: 18px !important;
  }
}

.trim-text {
  text-align: left !important;
  display: -webkit-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis !important;
  /* word-break: break-all; */
}