@media (max-width: 767px) {
  .sidemenu {
    display: none !important;
  }

  .mob-mt-75 {
    margin-top: 75px;
  }

  app-notifications .push-notify-content {
    border-radius: 20px !important;
    height: 90vh !important;
    overflow-y: scroll;
    background: white;
    width: 95% !important;
    display: block;
    margin: auto !important;
    z-index: 1111;
    margin-top: 45px !important;
  }

  app-notifications .close-position {
    position: absolute;
    z-index: 11111;
    top: 27px;
    right: 4px;
    display: block !important;
  }

  .cancel-radio {
    margin-top: 90px !important;
  }

  app-available-services .settings-height {
    height: calc(100vh - 150px);
    overflow-y: scroll;
  }

  .position-fixed-card {
    position: relative !important;
    margin-top: 15px;
  }

  app-out-of-office .settings-height {
    height: calc(100vh - 140px);
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .save-popup {
    height: fit-content !important;
    width: 96% !important;
    left: 0px !important;
    margin-left: auto !important;
    z-index: 9999;
    margin-top: 110px !important;
  }

  .save-popup-img {
    width: 30px !important;
    margin-right: -22px !important;
    margin-top: -70px !important;
  }

  app-select-business .card {
    margin-top: 0px !important;
  }

  app-account-setup .overflow-scroll {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
  }

  .customise-contact {
    width: 100% !important;
    gap: 15px !important;
    display: flex;
    flex-direction: column !important;
    padding: 35px 10px !important;
  }

  .mobile-slider {
    display: flex !important;
  }

  .category-position {
    padding: 0px 20px 10px 20px !important;
    height: fit-content !important;
  }

  app-pricing-plan .h-30 {
    height: 60px !important;
  }

  .category-list {
    width: auto !important;
    padding-top: 30px !important;
    border: none !important;
    box-shadow: unset !important;
  }

  .plan-list {
    border: none !important;
    box-shadow: unset !important;
    width: auto !important;
    padding-top: 30px !important;
    background: none !important;
  }

  .mobile-slide-sec {
    display: block !important;
  }

  .display-web {
    display: none !important;
  }

  .billing-radio-btn ul li label {
    padding: 20px 10px 10px !important;
  }

  .pad-mob-10 {
    padding: 10px !important;
  }

  app-account-summary .account-card {
    width: 100% !important;
  }

  app-choose-payment .mat-checkbox-layout .mat-checkbox-label {
    text-wrap: wrap;
  }

  app-choose-payment .billings-height {
    height: 70vh !important;
  }

  app-office-dashboard .date-picker-show .mat-datepicker-toggle button {
    background-image: url(../icons/dashboard/Drop\ arrow.svg) !important;
    background-size: 17px !important;
  }

  app-service-provider-dashboard .date-picker-show .mat-datepicker-toggle button {
    background-image: url(../icons/dashboard/Drop\ arrow.svg) !important;
    background-size: 17px !important;
  }

  .date-picker-show .form-control {
    font-weight: 500 !important;
    color: #252525;
  }

  app-office-dashboard .mobile .mat-form-field-suffix {
    top: 14px !important;
    left: 0px !important;
  }

  app-service-provider-dashboard .mobile .mat-form-field-suffix {
    top: 14px !important;
    left: -11px !important;
  }

  app-office-dashboard .mat-form-field {
    width: 100% !important;
  }

  .busy-set {
    display: block !important;
  }

  .date-picker-show.mat-form-field {
    width: 55% !important;
  }

  .welcome-center {
    height: 100% !important;
  }

  .width-m-400 {
    max-width: 100% !important;
    padding: 0px !important;
  }

  .add-card-provider {
    margin-bottom: 40px !important;
  }

  .no-img {
    margin-top: 10px !important;
  }

  app-office-dashboard .date-picker-show .mat-form-field-wrapper {
    text-align: center;
  }

  .date-sp-div[_ngcontent-gep-c287] {
    background-color: #fff;
    justify-content: center;
    border: 1px solid #c9c7cb;
    margin: 15px 0px;
    border-radius: 10px;
  }

  .header-card-service {
    height: 100%;
    width: 100%;
    row-gap: 25px;
  }

  .tab-content {
    margin-top: 20px !important;
  }

  .stepper-width {
    width: 100% !important;
    margin: inherit !important;
  }

  .text-mt-70 {
    margin-top: 30px !important;
  }

  .signup-width-100 {
    width: 100% !important;
  }

  .signup-page .mat-horizontal-stepper-header {
    padding: 0px 0px !important;
  }

  .mob-p-10 {
    padding: 0px 20px !important;
  }

  .close-pos {
    display: block !important;
  }

  .grid-column {
    width: 98% !important;
  }

  app-service-provider-profile .share-popup {
    padding: 10px !important;
    border-radius: 20px 20px 0px 0px !important;
  }

  /* app-service-provider-profile {

    .email-display {
      display: inline-block;
      max-width: 160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }

    .mobile-only {
      display: inline-block;
      vertical-align: middle;
    }
  } */

  .grid-section {
    height: 100vh !important;
  }

  .grid-status {
    height: fit-content !important;
  }

  .grid-prov-sec {
    margin-left: 0px !important;
  }

  .mob-label {
    display: flex !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mt-time-65 {
    margin-top: 0px !important;
  }

  .mt-time-85 {
    padding-top: 0px !important;
    height: 60vh !important;
    overflow: scroll;
  }

  app-my-customer .today-radio {
    margin-top: 10px;
    width: 100%;
  }

  .small-search-bg {
    border-radius: 60px !important;
  }

  .mob-mt-10 {
    margin-top: 10px;
  }

  .mob-mt-70 {
    margin-top: 70px;
  }

  .pc-tab {
    margin-top: 10px;
  }

  .label-box {
    width: 100% !important;
  }

  .sp-board {
    padding: 0px !important;
    overflow-x: hidden;
  }

  .cust-label-box {
    width: 100% !important;
  }

  app-my-customer-details .card {
    box-shadow: none !important;
  }

  .pad-mob-30 {
    padding: 30px;
  }

  .pad-0 {
    padding: 0px !important;
  }

  .mob-search-view {
    order: 0;
    padding: 0px;
    background: #402268;
    padding-top: 30px;
    border-radius: 0px 0px 20px 20px;
  }

  .mob-order-1 {
    order: 1;
  }

  .input-icon {
    width: 80% !important;
    padding-left: 20px;
    font-size: 12px;
    margin-left: 10px;

    input {
      padding-left: 0px;
    }

    img {
      margin-right: 15px;
    }
  }

  .action-list ul {
    gap: 50px;
  }

  .view-switch {
    height: 45px !important;
  }

  #appointdetails .modal-body {
    padding: 5px;
    border-radius: 0px !important;
  }

  .mob-ui-stat {
    margin-bottom: 10px !important;
    display: flex;
    align-items: end;
    justify-content: end;
  }

  .popup-stat {
    position: relative !important;
  }

  .modal-dialog {
    padding: 0px !important;
  }

  .width-pay {
    width: fit-content !important;
  }

  .plus-float {
    display: block !important;
  }

  .top-bar-section {
    width: 100% !important;
  }

  .no-card-added {
    margin-top: 0px !important;
  }

  .summary-card {
    margin-top: 10px;
    border: none !important;
  }

  .product-contain {
    height: 100vh;
    margin-top: 40px;
  }

  .total-amount-border {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .lg-header {
    display: none !important;
  }

  .mobile-header {
    display: flex !important;
    justify-content: space-between;
    padding: 0px 10px;
  }

  .sidemenu-mob {
    display: block !important;
  }

  app-appointment-cancel .search-title-main {
    display: none !important;
  }

  header {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 999999;
  }

  .sidemenu ul li {
    padding: 0px !important;
  }

  .mb-select {
    left: 1% !important;
    transform: none !important;
  }

  .logout-position {
    position: absolute;
    width: 50.5% !important;
  }

  .sp-lg-display {
    display: none !important;
  }

  .sidemenu-sp {
    width: 100% !important;
  }

  .mob-font {
    font-size: 14px !important;
  }

  .location-field {
    display: grid !important;
  }

  .mob-head {
    background: #402268;
    padding: 20px 10px 15px 10px;
    border-radius: 0px 0px 20px 20px;
  }

  .office-search {
    background-color: white;
  }

  .sp-list ul {
    padding-left: 0px;
    margin-bottom: 0px !important;
    display: flex;
    gap: 10px;
  }

  .sp-list {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 8px !important;
    flex-wrap: nowrap;
    margin-bottom: 0px;
  }

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

  .hours-height {
    height: calc(100vh - 80px);
    overflow-y: scroll;
    margin-top: 30px;
  }

  .sp-list {
    width: 100% !important;
    margin-top: 60px;
  }

  #details .modal-body {
    border-radius: 15px 0px 0px 0px !important;
  }

  app-import-customer .container-fluid {
    padding: 0px !important;
  }

  .drag-bg {
    margin-top: 40px;
  }

  .violet-drag-bg {
    margin-top: 40px;
  }

  .mb-lg-none {
    display: block !important;
  }

  .mt-mob-0 {
    margin-top: 0px !important;
  }

  .time-display-slots {
    width: 100% !important;
    padding: 15px !important;
    overflow-x: hidden !important;
    height: calc(100vh - 150px) !important;
  }

  app-out-of-office {
    .time {
      margin-left: 10px !important;
    }

    .tooltip-container {
      right: 0% !important;
      top: -35px !important;
    }

    .sp-name {
      padding: 5px 5px !important;
    }

    .width-80per {
      width: 80px !important;
    }
  }

  .toggle-check {
    display: flex;
  }

  .mob-padding {
    padding: 0px 20px;
  }

  .search-input {
    background: inherit !important;
  }

  .pad-mb-0 {
    padding: 0px !important;
  }

  .mob-font-12 {
    font-size: 12px;
  }

  .mob-text-end {
    text-align: end;
  }

  .pad-mob-0 {
    padding: 0px !important;
  }

  app-office-service-providers .card {
    background: inherit !important;
    box-shadow: none !important;
  }

  app-office-service-providers .btn-add-icon {
    display: none;
  }

  app-office-service-providers .mob-gap {
    padding: 42px 10px 10px 10px !important;
  }

  app-office-service-providers .filter-container {
    display: none !important;
  }

  .mob-btn-staff {
    display: flex !important;
    margin-top: 10px;
  }

  #notemodal.modal-dialog {
    max-width: 445px !important;
    padding: 0px;
  }

  app-reports label {
    width: 100% !important;
    margin: 0px !important;
  }

  app-feedback-report .report-select-date.mat-form-field {
    width: 100% !important;
  }

  app-feedback-report .filter-search-form {
    width: 95% !important;
  }

  app-customer-lookup .mat-form-field {
    width: 95% !important;
  }

  .mat-datepicker-content-touch .mat-datepicker-content-container {
    width: auto !important;
    height: auto !important;
  }

  app-office-service-providers .container {
    padding: 0px !important;
  }

  app-switch-account .radio-btn {
    margin: auto;
  }

  .mob-m-auto {
    margin: auto;
  }

  .mt-top-40 {
    margin-top: 0px !important;
  }

  .customers-card {
    box-shadow: none !important;
  }

  app-select-service .search-box {
    width: 100% !important;
  }

  app-select-service .tooltip-container .tooltip-text {
    bottom: 3rem !important;
  }

  app-select-service-provider .card {
    height: calc(100vh - 30px) !important;
    overflow-y: scroll;
    margin-top: 0px !important;
  }

  app-select-service-provider .search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    padding: 20px;
    width: 100%;
    z-index: 111;
  }

  .slot-available {
    margin-bottom: 0px !important;
  }

  .btn-mob-w-150 {
    width: 150px !important;
  }

  .mt-mob-50 {
    margin-top: 50px;
  }

  .mt-mob-15 {
    margin-top: 15px;
  }

  .mt-mob-80 {
    margin-top: 80px !important;
  }

  .add-white {
    background: #76b900 !important;
    border-radius: 31px;
    gap: 5px;
  }

  app-select-service-provider .search-box {
    width: 100% !important;
  }

  app-choose-family .search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    padding: 3px 10px 10px 10px;
    position: fixed;
    width: 100%;
    gap: 10px;
    z-index: 1111;
  }

  .office-board-main {
    height: 100vh !important;
  }

  .line-loading-modal {
    width: 90% !important;
  }

  app-office-dashboard .appoint-content {
    margin-bottom: 0px !important;
  }

  app-service-provider-dashboard .appoint-content {
    margin-bottom: 0px !important;
  }

  app-select-service-provider .w-70 {
    width: auto !important;
  }

  .add-family-popup {
    border-radius: 20px 20px 0px 0px !important;
  }

  app-choose-family .search-box {
    width: 100% !important;
  }

  .calendar-wrapper {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  app-appointment .radio-btn ul li label {
    margin-left: 7px;
  }

  app-select-service .search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    margin-top: 30px !important;
  }

  app-customer-lookup .search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    margin-top: 40px !important;
    display: flex !important;
    padding: 20px;
    gap: 20px;
  }

  .search-clients-mob {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    margin-top: 30px !important;
    display: flex !important;
    padding: 20px;
    gap: 20px;
    width: 100%;
  }

  .search-customer {
    width: 100% !important;
  }

  app-clients .search-customer {
    width: 80% !important;
  }

  app-customer-lookup .search-customer {
    width: 100%;
    border-radius: 30px !important;
  }

  .qr-social-icons {
    margin-top: 12px !important;
    height: 55px;
    align-items: center;
    display: flex;
  }

  .mob-service-align {
    padding: 0px !important;
  }

  .mb-search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    margin-top: 40px !important;
    padding: 20px !important;
  }

  .d-none {
    display: none;
  }

  app-select-service .search-container {
    border-bottom: none !important;
  }

  .cust-pop {
    width: 100% !important;
    border-radius: 10px 10px 0px 0px !important;
  }

  app-front-office-customer-profile .choose-family {
    width: fit-content !important;
  }

  .mob-no {
    display: none;
  }

  .mob-gap-30 {
    gap: 30px;
  }

  .gap-mob-10px {
    gap: 10px;
  }

  .pad-mob-none {
    padding: 0px !important;
  }

  .mob-none {
    display: none;
  }

  .web-view-search {
    display: none !important;
  }

  .btn-mob-w-160 {
    width: 160px !important;
  }

  .mob-card {
    box-shadow: none !important;
    margin-top: 50px;
  }

  .pad-mob-20 {
    padding: 20px;
  }

  app-office-dashboard #appointdetails .status {
    right: auto !important;
  }

  app-office-dashboard #appointdetails .modal-dialog {
    width: 100% !important;
  }

  app-service-provider-dashboard .appoint-busy {
    margin-top: 20px;
  }

  app-service-provider-profile .side-menus {
    display: none;
  }

  .menu-details-view {
    width: 100% !important;
    box-shadow: none !important;
    margin: 30px 0px !important;
    padding: 20px 0px !important;
    background-color: inherit !important;
    height: calc(100vh - 50px) !important;
    padding-bottom: 150px !important;
  }

  .mob-pad-sp-5 {
    padding: 20px;
  }

  .mt-mob-20px {
    margin-top: 20px;
  }

  .mr-mob-20px {
    margin-right: 20px !important;
  }

  .download-png-btn {
    display: flex;
    margin: auto;
    margin-top: 20px !important;
  }

  .ml-mb-0 {
    margin-left: 0px !important;
  }

  .qr-border {
    margin: auto;
  }

  .d-mb-flex {
    display: flex;
  }

  .mb-btn-view {
    justify-content: center;
    margin-top: 10px;
  }

  .mob-mb-10 {
    margin-bottom: 10px;
  }

  .share-popup.modal-content {
    border-radius: 20px 20px 0px 0px !important;
  }

  share-popup.modal-dialog {
    position: absolute;
    left: 0px !important;
    margin: auto;
    bottom: 0px !important;
    transform: none !important;
  }

  app-office-dashboard .action-list ul li {
    padding: 0px !important;
  }

  app-available-services td {
    display: flex;
  }

  app-holiday-list td {
    display: flex;
  }

  .mat-input-element {
    box-sizing: border-box !important;
  }

  add-customer h4,
  .h4 {
    font-size: 18px;
  }

  app-branch-locations .btn-modify {
    margin: 3px !important;
  }

  app-billings-plan .btn-new {
    width: max-content !important;
    font-size: 13px !important;
  }

  .btn-modify {
    width: 80px !important;
  }

  .btn-delete {
    width: 80px !important;
  }

  .mob-d-flex {
    display: flex;
  }

  app-front-office-profile .card-body {
    padding: 5px 0px !important;
  }

  app-front-office-profile .alert {
    font-size: 16px !important;
  }

  app-client-visits-report .report-select-date.mat-form-field {
    width: 100% !important;
  }

  app-source-report .report-select-date.mat-form-field {
    width: 100% !important;
  }

  app-customer-details .customer-img {
    width: 118px !important;
    margin: auto;
  }

  app-customer-details.sp-sname {
    margin: 10px 6px !important;
  }

  app-switch-account .radio-btn ul {
    display: block;
  }

  .family-member-space {
    width: 100% !important;
    height: fit-content !important;
  }

  .mob-fam-scroll {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: 0px 0px 0px -10px;
    padding: 10px 10px 10px 0px !important;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .profile-view-space {
    width: 100% !important;
    padding: 40px 20px !important;
    height: 85vh !important;
  }

  app-activity-report .report-select-date.mat-form-field,
  app-walk-in-report .report-select-date.mat-form-field {
    width: 100% !important;
  }

  .modal {
    z-index: 99999999 !important;
  }

  .staffs-list {
    width: 100% !important;
    margin-top: 50px;

    ul {
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
      margin: 0px 0px 0px -10px;
      padding: 10px 10px 10px 0px !important;
      flex-wrap: nowrap;
    }
  }

  .service-border {
    margin-bottom: 15px;
  }

  .manage-none {
    display: none !important;
  }

  app-available-services .search-box {
    margin-right: 0px !important;
  }

  .float-icon {
    display: flex !important;
    position: fixed;
    bottom: 0px;
    right: -20px;
  }

  .delete-popup {
    border-radius: 20px 20px 0px 0px !important;
  }

  app-holiday-list .search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    margin-top: 25px !important;
    display: flex !important;
    padding: 20px 20px 14px 20px;
    gap: 20px;
  }

  .holiday-search {
    display: flex;
    background: white;
  }

  app-available-services .search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    margin-top: 40px !important;
    display: flex !important;
    padding: 20px 20px 14px 20px;
    gap: 20px;
  }

  app-manage-available-service .search-container {
    background: #402268 !important;
    border-radius: 0px 0px 20px 20px !important;
    margin-top: 20px !important;
    display: flex !important;
    padding: 20px 20px 14px 20px;
    gap: 20px;
  }

  app-holiday-list #deleteModals .modal-dialog {
    padding: 0px !important;
  }

  app-holiday-list #deleteModals .modal-body {
    border-radius: 20px 20px 0px 0px !important;
  }

  .mark-main {
    border-radius: 20px 20px 0px 0px !important;
  }

  .add-popup {
    width: 100% !important;
    border-radius: 25px 25px 0px 0px !important;
  }

  .holiday-popup {
    border-radius: 20px 20px 0px 0px !important;
  }

  .padding-lr-mob-10 {
    padding: 0px 10px;
  }

  .holiday-popup {
    width: 100% !important;
  }

  .add-services {
    border-radius: 20px 20px 0px 0px !important;
  }

  .modal-content {
    vertical-align: bottom !important;
  }

  app-manage-available-service .search-box {
    width: 100% !important;
    margin-right: 0px !important;
  }

  app-manage-available-service .mob-box {
    display: none !important;
  }

  .mob-title {
    display: flex !important;
  }

  .manage-card {
    border: none !important;
  }

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

  app-staff-availability .mob-form {
    width: 47% !important;
  }

  .feedback-height {
    margin-top: 50px;
  }

  app-feedback .button-fixed {
    position: relative !important;
  }

  .available-days {
    width: 100% !important;
    padding: 20px 20px !important;
    height: calc(100vh - 155px) !important;
  }

  .mob-pad-0 {
    padding: 0px !important;
  }

  app-qr-code .title-back {
    display: none !important;
  }

  app-communicate .border-left-line {
    border-left: none !important;
    margin-top: 10px;
  }

  .serv-prov-section {
    overflow-x: hidden !important;
  }

  app-office-dashboard .status {
    top: 4px;
    text-align: center;
  }

  /* .header-mobile {
    margin-top: 100px;
  } */

  .switch-mobile-hide {
    display: none !important;
  }

  .switch-mobile-show {
    display: block !important;
  }

  app-office-dashboard .time-column {
    padding-top: 0px !important;
    font-size: 14px;
  }

  app-office-service-providers .btn-edit {
    width: 80px !important;
    margin-top: 10px !important;
  }

  .fo-content {
    text-align: left !important;
  }

  app-office-service-providers .tab {
    font-size: 13px !important;
  }

  app-office-service-providers .card {
    height: fit-content !important;
  }

  app-office-service-providers .border-modal {
    width: 100% !important;
  }

  app-office-service-providers .tabs {
    transform: inherit !important;
    margin-top: 10px;
    width: 280px;
  }

  app-office-service-providers .clear-btn {
    display: none !important;
  }

  .top-bg-head {
    background: #5c3a8f;
    border-radius: 20px 0px 20px 20px;
    padding-bottom: 20px;
  }

  .close-i {
    position: absolute;
    right: 22px;
  }

  .mobile-filter-container {
    border-bottom: 3px solid #ddddff !important;
    width: 90%;
    display: flex !important;
    align-items: center;
    margin: 10px 20px 0px 0px;
    padding: 0;
    background: none !important;
    border-radius: 0px !important;
    height: auto !important;

    input {
      border: none;
      background-color: inherit;
      color: white;
    }

    input:focus-visible {
      outline: none !important;
    }

    ::placeholder {
      color: #fff !important;
    }
  }

  app-office-dashboard .time-column td {
    padding: 10px 5px !important;
    line-height: 14px;
  }

  app-office-dashboard .serv-prov-section {
    padding-top: 0px !important;
    border: 0px !important;
  }

  app-office-dashboard .drag-scroll-content {
    width: 100% !important;
  }

  app-office-dashboard .servicep-column {
    width: 100% !important;
  }

  app-office-dashboard .mat-form-field {
    width: 100%;
  }

  app-service-provider-dashboard .time-column {
    padding-top: 0px !important;
    font-size: 14px;
  }

  app-service-provider-dashboard .time-column td {
    padding: 10px 5px !important;
    line-height: 14px;
  }

  app-service-provider-dashboard .serv-prov-section {
    padding-top: 0px !important;
    border: 0px !important;
  }

  app-service-provider-dashboard .drag-scroll-content {
    width: 100% !important;
  }

  app-service-provider-dashboard .servicep-column {
    width: 100% !important;
  }

  app-service-provider-dashboard .mat-form-field {
    width: 100%;
  }

  .top-nav-icon-mobile {
    display: block !important;
  }

  app-notifications .notify-msg {
    height: auto !important;
  }


  .mb-lg-none {
    display: flex !important;
  }

  .top-nav-icon ul li {
    margin: 0px 6px !important;
  }

  .role-check ul {
    display: table !important;
    margin-left: auto;
    margin-right: auto;
  }

  .gender-select {
    width: 100% !important;
  }

  .visit-type {
    width: 100% !important;
  }

  .slot-min {
    width: 100% !important;
  }

  .gender-select {
    width: 100% !important;
  }

  .mb-flex ul {
    display: flex !important;
  }

  .mb-td-flex {
    display: flex !important;
  }

  app-customer-lookup .close-btn {
    right: 4px !important;
  }

  .mobile-logo {
    display: block !important;
  }

  .signup-page .nav-tabs {
    margin-left: 0px !important;
  }

  .login-form {
    padding-top: 20px !important;
  }

  .signup-page .clear-otp {
    text-align: center !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .signup-page .right-side {
    width: 100% !important;
    padding: 0px;
  }

  .signup-page .tab-content {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    padding-top: 0.5rem !important;
  }

  app-signup .mat-stepper-horizontal {
    position: relative !important;
  }

  .signup-page .mat-horizontal-content-container {
    padding: 0px !important;
  }

  .signup-page .verify-check label {
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  .signup-page .verify-check {
    margin: 40px 0px 0px 0px !important;
  }

  .top-nav-icon {
    display: none !important;
  }

  .page-search-btn button {
    width: 75px !important;
  }

  .page-search-form {
    width: 90% !important;
    margin-top: 1em;
  }

  .servicep-column {
    width: 220px !important;
  }

  app-settings .alert-close {
    top: -10px !important;
    right: 0px !important;
  }


  app-settings .text-content {
    left: 0px !important;
  }

  app-settings .toggle-align {
    left: 0px !important;
  }

  app-settings .top-border {
    width: 100% !important;
    margin-left: auto !important;
  }

  app-settings .bottom-border {
    width: 100% !important;
    margin-left: auto !important;
  }

  app-settings .ml-80 {
    margin-left: auto !important;
  }

  app-settings .slide-toogle {
    margin-left: auto;
    margin-right: auto !important;
  }

  app-settings .btn-width {
    width: 130px !important;
  }

  .route-link {
    margin-left: 10px !important;
  }

  .toogleon {
    width: 100% !important;
  }

  .save-success {
    width: fit-content;
  }

  .save-fail {
    width: 300px !important;
  }

  .title-back {
    margin-bottom: 10px;
  }

  .customer-lookup {
    padding: 0px !important;
  }

  .common-title-main {
    margin-top: 50px !important;
    display: none !important;
  }

  app-import-customer .btn-primary {
    margin-top: 20px !important;
  }

  app-import-customer .mat-toolbar-row,
  app-import-customer .mat-toolbar-single-row {
    height: auto !important;
  }

  app-import-customer .mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 0px !important;
  }

  app-company-information .btn-width {
    width: 180px !important;
  }

  app-customer-lookup .cust-phone {
    margin-top: 5px !important;
  }

  app-customer-lookup .cust-mail {
    padding-left: 0px !important;
  }

  app-customer-lookup .cust-time {
    font-size: 13px;
    margin-top: 5px !important;
    padding-left: 0px !important;
  }

  app-customer-lookup .view-profile {
    margin-bottom: 10px;
    margin-top: 0px !important;
  }

  app-front-office-profile .profile-content,
  app-front-office-profile .profile-details {
    padding-left: 0px !important;
  }

  app-front-office-profile .profile-details-l,
  app-front-office-profile .profile-details-r {
    display: flex;
  }

  app-front-office-profile .profile-heading {
    margin-right: 20px;
  }

  app-front-office-profile .form-control,
  app-front-office-profile .dropdown-select {
    width: 100% !important;
  }

  app-front-office-profile {
    .card-mob {
      max-width: 100% !important;
      overflow-x: hidden;
    }

    .tooltip-container .tooltip-text {
      padding: 5px !important;
      left: -7.5rem !important;
    }
  }

  app-front-office-customer-profile {
    .tooltip-container .tooltip-text {
      left: -7rem !important;
      bottom: 1.5rem !important;
    }
  }

  .large-screen {
    display: none !important;
  }

  .title-back div {
    text-align: end;
  }

  app-front-office-customer-profile .profile-details {
    padding: 15px 0px !important;
  }

  app-front-office-customer-profile .title-back {
    margin-bottom: 10px;
  }

  app-front-office-customer-profile .family-select label {
    width: 100% !important;
  }

  app-front-office-customer-profile .fam-date label {
    display: none !important;
  }

  app-front-office-customer-profile .add-family .form-control {
    width: 100% !important;
  }

  /* app-front-office-customer-profile .mobile-only {
    display: inline-block !important;
    vertical-align: middle !important;
  }


  app-front-office-customer-profile .email-display {
    display: inline-block !important;
    max-width: 230px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
  } */

  .filter-search-form {
    width: 90% !important;
  }

  .border-r {
    border: none !important;
  }

  .border-all {
    border: none !important;
  }

  .table-border {
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #9a64d4 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  app-customer-lookup .btn-purple {
    margin-top: 10px !important;
  }

  app-customer-lookup .app-title {
    padding-left: 15px !important;
    margin-top: 5px;
  }

  app-customer-lookup .action-lists {
    margin: -3px;
  }

  app-customer-lookup .common-title-main {
    margin-top: 40px !important;
  }

  app-customer-lookup .action-lists {
    margin: -2px !important;
  }

  .customer-list {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  .customer-detail {
    display: block !important;
  }

  app-customer-lookup .customer-info {
    display: block !important;
  }

  app-customer-details .customer-info {
    display: block !important;
  }

  app-customer-details .padlr-50 {
    padding: 0px 20px !important;
  }

  .customer-details {
    height: auto !important;
    margin-left: 0px !important;
    margin-top: 10px;
  }

  .customer-phone {
    margin-top: 5px !important;
  }

  .customer-mail {
    margin-top: 5px !important;
  }

  .customer-location {
    margin-top: 5px !important;
  }

  .top-nav-icon {
    display: none !important;
  }

  header {
    height: 83px;
    background: #8b52c5 !important;
    border-bottom: 1px solid #d6b9f3;
  }

  .burger-menu {
    background-color: #8b52c5 !important;
  }

  .burger-menu .mat-button-wrapper span {
    background: #fff !important;
    border-radius: 10px;
  }

  .navbar-brand {
    display: none !important;
  }

  app-signup .mobile-logo {
    margin-top: 20px !important;
  }

  .mobile-logo img {
    width: 200px;
  }

  app-signup header {
    display: none !important;
  }

  .logout-icon-mobile {
    padding: 15px;
  }

  .action-icon-mobile {
    padding: 15px;
  }

  .popup-icon-mobile {
    padding: 15px;
  }

  .logout-content {
    border-radius: 0px 0px 15px 15px !important;
  }

  .checkin-content {
    border-radius: 0px 0px 15px 15px !important;
  }

  .reschedule-content {
    border-radius: 0px 0px 15px 15px !important;
    display: block !important;
  }

  .tab-content {
    padding: 0px 15px !important;
  }

  .cancel-content {
    border-radius: 0px 0px 15px 15px !important;
  }

  app-select-speciality .common-title-main {
    display: none;
  }

  .search-service {
    margin-top: 10px !important;
    width: 100% !important;
  }

  .services-tile {
    text-align: center !important;
    display: grid !important;
  }

  .services-tile img {
    display: grid;
    margin-left: auto;
    margin-right: auto !important;
  }

  .services-tile span {
    margin-top: 10px;
  }

  app-client-visit-report .common-title-main {
    display: none !important;
  }

  app-client-visits-report .drop-select .mat-select-arrow-wrapper {
    left: 10px !important;
  }

  app-select-business .common-title-main {
    display: none;
  }

  app-select-business .btn-primary {
    margin-top: 10px !important;
  }

  app-appointment-cancel .title-back {
    right: 8px !important;
    top: 2px;
  }

  app-appointment-cancel .mobile-content {
    margin-top: 20px !important;
  }

  app-appointment-cancel .mobile-content {
    display: none !important;
  }

  app-appointment-cancel .green-align {
    position: relative !important;
    float: none !important;
    margin-top: 20px !important;
    width: 140px !important;
  }

  app-appointment-cancel .setup-align {
    margin-top: 20px !important;
    width: 140px !important;
  }

  app-customer-history .search-title-main {
    display: none !important;
  }

  app-choose-family .family-select label {
    width: 100% !important;
  }

  app-choose-family .search-title-main {
    display: none !important;
  }

  app-choose-family .family-select label .tick {
    right: 12px !important;
    bottom: 5px !important;
  }

  app-family-members .mobile-btn {
    margin-top: 20px !important;
  }

  app-choose-family .mobile-btn {
    margin-top: 20px !important;
    width: auto !important;
    padding: 10px 20px !important;
  }

  app-choose-family .bottom-line {
    width: 40% !important;
  }

  .provider-search {
    margin-left: auto !important;
  }

  .preference {
    left: 0px !important;
  }

  .preference-list label {
    left: 0px !important;
  }

  .preference-list {
    display: flex !important;
  }

  .serv-provider label {
    width: 100% !important;
    padding-left: 0px !important;
  }

  .title-search {
    margin-left: 0px !important;
  }

  .family-img img {
    width: 80px !important;
    height: 80px !important;
  }

  .fam-date {
    width: 50px !important;
  }

  .date-pick-app {
    background: none !important;
    border: none !important;
    margin-left: -13px !important;
  }

  .accordion-align {
    border: 1px solid #ccc8c8 !important;
    border-radius: 20px !important;
    margin-top: 20px !important;
    background: #efefef;
  }

  .nav-tabs li a.active:after {
    display: none;
  }

  .search-title-main {
    margin-bottom: 10px !important;
  }

  .slot-group label {
    display: block !important;
    margin: 15px;
  }

  .accordion .card {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .accordion .btn-time {
    width: 30% !important;
    width: 29% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 15px !important;
    margin: 5px !important;
  }

  #accordionExample .accordion {
    margin-top: -10px !important;
  }

  .btn-time img {
    margin-top: 18px !important;
  }

  add-customer h3 {
    margin-top: 10px;
    font-size: 22px !important;
  }

  app-appointment .radio-group {
    margin-top: 10px !important;
    margin-left: -12px;
  }

  app-appointment .radio-group label {
    font-size: 16px !important;
  }

  app-appointment .slot-min .tab-content label {
    padding: 0px !important;
  }

  app-appointment .slot-min ul li label {
    padding: 17px 23px !important;
    font-size: 14px !important;
  }

  app-appointment .visit-type ul li label {
    padding: 17px 0px 25px 36px !important;
  }

  app-appointment .slot-min ul li .check {
    border: 3px solid #aaaaaa !important;
    height: 20px !important;
    width: 20px !important;
  }

  app-appointment .radio-group label {
    display: block !important;
    margin: 15px !important;
  }

  app-appointment .slot-min ul li .check::before {
    height: 10px !important;
    width: 10px !important;
    top: 2px !important;
    left: 2px !important;
  }

  app-appointment .slot-min ul li .check {
    top: 17px !important;
  }

  app-appointment .slot-min ul {
    display: flex !important;
  }

  app-appointment .slot-min input[type="radio"]:checked~.check {
    border: 3px solid #9a64d4 !important;
  }

  app-appointment .common-title-main {
    color: #000;
    font-weight: 500;
    margin-bottom: 5px;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
  }

  app-appointment .bottom-line {
    width: 50% !important;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    display: block !important;
  }

  app-select-products .product-pad {
    padding: 0px 10px !important;
  }

  .nav-tabs li a.active:after {
    font-size: 30px !important;
    margin-top: 50px !important;
    width: 7px !important;
    left: 83px !important;
    transform: rotate(90deg) !important;
  }

  .accordion>.card>.card-header {
    background: #ffffff !important;
  }

  .acc-btn {
    color: #8b52c5 !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    padding: 7px !important;
  }

  .accordion .tab-align {
    padding-top: 0px !important;
  }

  app-appointment-confirmation .search-title-main-book {
    background-color: #ffffff !important;
    border-bottom: 2px solid hsl(0, 11%, 91%);
    margin-top: -15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  app-appointment-confirmation .search-title-book {
    color: #2f2c2c !important;
  }

  app-appointment-confirmation .search-title-main-book img {
    width: 40px;
    height: 65px;
  }

  app-appointment-confirmation .search-title-book span {
    color: #9a64d4 !important;
    font-size: 20px !important;
    font-weight: 500 !important;
  }

  app-appointment-confirmation .search-title-book h4 {
    font-size: 16px !important;
  }

  app-appointment-confirmation .confirm-code {
    border-bottom: 2px solid #eae5e5 !important;
    padding-bottom: 30px !important;
    display: block !important;
  }

  app-appointment-confirmation .patient-main {
    margin-top: 20px !important;
  }

  app-appointment-confirmation .detail-align {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  app-appointment-confirmation .border-line {
    margin: 40px 2px 2px 2px !important;
    border-bottom: 2px solid #eae5e5 !important;
    padding-bottom: 40px !important;
  }

  app-appointment-confirmation .btn-main-align {
    position: relative !important;
    left: 5px;
    font-size: 15px !important;
    float: none !important;
  }

  app-appointment-confirmation .btn-green {
    position: relative !important;
    left: 5px;
    font-size: 15px !important;
    float: none !important;
  }

  app-appointment .reschedule-content .bg-purple {
    background-color: #844ebe;
    margin: -10px !important;
    border-radius: 10px 10px 0px 0px !important;
    padding: 10px 20px;
    color: #fff;
    margin-right: -10px !important;
    margin-bottom: 10px !important;
  }

  app-appointment .details {
    border-right: 0px solid #ccc !important;
    padding: 0px !important;
    margin-right: 0px !important;
  }

  app-front-office-customer .btn-primary {
    margin-top: 10px;
  }

  .margin-top-10 {
    margin-top: 10px;
  }

  app-select-address .btn-width {
    width: 130px !important;
  }

  app-select-address .provider-search {
    width: 100% !important;
  }

  app-account-summary .btn-width {
    width: 130px !important;
  }

  app-add-service-provider .sp-name {
    width: 100% !important;
  }

  app-add-service-provider .btn-width {
    width: 130px !important;
  }

  app-add-customer .btn-green {
    margin-top: 20px !important;
  }

  app-add-customer .btn-main {
    margin-top: 20px !important;
  }

  app-add-customer .tip .tooltip-text::before {
    left: 9rem !important;
  }

  app-add-customer .mailid-tool .tooltip-text {
    width: 235px !important;
  }

  app-add-customer .mob-mail {
    align-items: center !important;
    justify-content: center !important;
  }

  app-service-provider-dashboard .date-title {
    margin-top: 10px !important;
  }

  #dashboard-details tr {
    display: grid;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border: 1px solid #dee2e6;
  }

  #dashboard-details thead {
    display: none;
  }

  #dashboard-details td {
    border: none;
    width: 100% !important;
    border-radius: 0px !important;
  }

  #past-appointment td {
    width: 100% !important;
    border-radius: 0px !important;
  }

  #dashboard-details .doc-image-table img {
    display: none;
  }

  .td-width-200 {
    width: 200px;
  }

  .td-type {
    display: none;
  }

  .td-action {
    margin-top: -77px;
    text-align: end !important;
  }

  .td-button {
    display: flex !important;
    text-align: end !important;
    float: right;
  }

  .td-button span {
    margin: 1px 5px;
  }

  .actions {
    padding: 6px 15px !important;
    border-radius: 20px !important;
    width: 90px !important;
  }

  .date-align {
    display: contents !important;
    margin-top: 10px;
  }

  .actions {
    text-align: left !important;
  }

  .give-feedback {
    display: none !important;
  }

  .modal-feedback {
    width: 90% !important;
    border: none;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .feedback-content {
    left: 0px !important;
  }

  .feedback-text {
    position: unset !important;
  }

  .star-rating {
    position: unset !important;
  }

  .comments {
    position: relative !important;
    left: 0px !important;
    width: 100% !important;
  }

  app-service-provider-dashboard .btn-block {
    width: 150% !important;
  }

  app-service-provider-dashboard .attend-status {
    background-color: inherit !important;
  }

  .done-modal {
    width: 100% !important;
  }

  .mobile-title {
    display: block !important;
    color: #fff;
    padding: 25px 10px;
    font-size: 17px;
    margin: auto;
    font-weight: 500;
  }

  app-my-customer .customers label {
    width: 100% !important;
    margin-left: 0px !important;
  }

  app-my-customer-details .mobile-label {
    height: 120px !important;
    display: block !important;
    background: #9a64d4;
    margin: -15px;
    margin-bottom: 30px;
    padding: 13px;
    text-align: center;
    color: #fff;
    border-radius: 10px 10px 0px 0px;
    display: flex;
  }

  app-my-customer-details .title-back {
    display: none !important;
  }

  app-my-customer-details .customer-name {
    display: none !important;
  }

  app-my-customer-details .content {
    font-size: 25px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  app-my-customer-details .customer-info {
    margin-top: 30px;
  }

  #customer-details thead {
    display: none;
  }

  #customer-details td {
    width: 100% !important;
    border-radius: 0px !important;
    padding: 15px 25px;
  }

  #customer-details tr {
    display: grid;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .td-none {
    display: none;
  }

  .appoint-status {
    display: flex;
    border-bottom: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
  }

  .done-modal {
    width: 100% !important;
  }

  .comment-title {
    margin-left: 20px !important;
  }

  .btn-mobile {
    display: none;
  }

  #payment-history thead {
    display: none;
  }

  #payment-history td {
    width: 100% !important;
    border-radius: 0px !important;
    padding: 15px 25px;
    display: flex;
  }

  #payment-history tr {
    display: grid;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .detail-align {
    text-align: left !important;
  }

  .welcome-box {
    height: auto !important;
  }

  app-billings-plan .btn-new {
    float: none !important;
    margin-top: 15px;
    line-height: 20px !important;
    white-space: normal;
  }

  .mobile-back {
    text-align: right;
    color: #ab81dd;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 500;
    display: block !important;
    margin-bottom: 10px;
  }

  app-service-provider-profile .profile-details {
    padding: 15px 0px !important;
  }

  app-service-provider-profile .mat-checkbox-disabled .mat-checkbox-label {
    color: rgba(0, 0, 0, 0.54);
    white-space: break-spaces;
  }

  app-service-provider-profile {
    .right-content {
      margin-top: 20px;
    }

    .width-350 {
      width: 350px !important;
    }

    .border-purple {
      height: 360px !important;
    }

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

    .ml-15 {
      margin-left: 0px !important;
    }

    .pad-7 {
      padding: 7px !important;
    }

    .w-100per {
      width: 100% !important;
    }

    .link-text {
      flex-wrap: wrap;
      justify-content: center;
    }

    .link-box {
      margin-right: 0px !important;
    }

    .mtop-10 {
      margin-top: 10px;
    }

    .bio-textarea {
      margin-left: 0px !important;
    }

    .conflict-modal {
      border-radius: 20px 20px 0px 0px !important;
      width: 91% !important;
    }
  }

  app-booking-integration {
    .copied-text {
      right: 20px !important;
      top: 65px !important;
    }

    .font-sm-13 {
      font-size: 13px !important;
    }

    .pad-7 {
      padding: 7px !important;
    }

    .d-contents {
      display: contents;
    }

    .purple-bottom {
      width: 260px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .url-link {
      width: 220px !important;
    }

    .w-100per {
      width: 100% !important;
    }
  }

  .sp-detail {
    margin-left: 70px;
  }

  #mobile-view thead {
    display: none;
  }

  #mobile-view td {
    width: 100% !important;
    border-radius: 0px !important;
    padding: 15px;
  }

  #mobile-view tr {
    display: grid;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .mobile-td-label {
    display: block !important;
    color: #757575;
    font-weight: 400;
    font-size: 16px;
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
  }

  .send-all {
    display: block !important;
  }

  .b-clients {
    margin-right: 10px !important;
    margin-left: 0px !important;
    margin-top: 10px;
  }

  .p-clients {
    margin-top: 10px;
  }

  .b-clients .mat-checkbox-layout,
  .p-clients .mat-checkbox-layout {
    white-space: normal;
  }

  .text-align {
    text-align: left !important;
  }

  .mobile-product-pad {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
  }

  app-select-products .mat-checkbox-layout {
    white-space: normal;
  }

  app-payment-method .address-btn ul {
    margin-left: 0px !important;
  }

  app-service-provider-dashboard .time-column {
    width: 128px !important;
  }

  app-service-provider-dashboard .event-list {
    margin-left: -15px;
    margin-right: -15px;
  }

  app-service-provider-dashboard .modal-dialog {
    top: 80% !important;
    width: 100% !important;
  }

  app-service-provider-dashboard .modal-dialog .status {
    position: relative;
    right: 10px;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 20px;
    text-align: center;
  }

  app-service-provider-dashboard .appoint-title {
    padding: 0px !important;
  }

  .signup-page .controls .container-checkbox {
    width: 100% !important;
  }

  .signup-page .controls {
    margin-top: 20px;
  }

  .downgrade-popup {
    width: 100% !important;
  }

  app-source-report .btn-global {
    margin-bottom: 30px;
  }

  app-signup .role-check ul {
    display: inline-grid !important;
  }

  app-signup .role-check ul li {
    width: 70% !important;
    height: 50px !important;
  }

  app-import-customer .mat-toolbar {
    display: grid;
  }

  app-import-customer .download-format {
    margin-right: auto !important;
    float: none !important;
  }

  app-import-customer .mat-flat-button.mat-primary,
  app-import-customer .mat-raised-button.mat-primary,
  app-import-customer .mat-fab.mat-primary,
  app-import-customer .mat-mini-fab.mat-primary {
    width: 50% !important;
    margin-left: auto;
    margin-right: auto;
    right: 0px !important;
    margin-top: 10px;
  }

  .td-mt-0 {
    margin-top: 0px !important;
  }

  app-import-customer .mat-toolbar .mat-input-element {
    width: 100% !important;
  }

  app-import-customer .close-btn {
    right: 0px !important;
  }

  app-import-customer .import-fail {
    width: 300px !important;
  }

  app-import-customer .cust-info {
    margin-top: 15px !important;
    text-align: center;
  }

  app-activity-report .mat-form-field-appearance-legacy .mat-form-field-wrapper,
  app-walk-in-report .mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 5px !important;
  }

  app-activity-report .mat-form-field,
  app-walk-in-report .mat-form-field {
    width: 100% !important;
  }

  app-activity-report .status-badge,
  app-walk-in-report .status-badge {
    text-align: left !important;
  }

  app-activity-report .total,
  app-activity-report .complete,
  app-activity-report .rechedule,
  app-activity-report .cancel,
  app-activity-report .drop,
  app-walk-in-report .total,
  app-walk-in-report .complete,
  app-walk-in-report .rechedule,
  app-walk-in-report .cancel,
  app-walk-in-report .drop {
    display: inline-flex;
    text-align: center;
  }

  .td-lg-center {
    text-align: left !important;
  }

  app-choose-payment label .tick {
    right: 25px !important;
  }

  app-choose-payment label.active {
    transform: inherit !important;
    margin-bottom: 10px !important;
  }

  .welcome-space {
    padding: 0px 10px;
  }

  app-office-dashboard .header-service-provider {
    max-width: 60% !important;
    width: 60% !important;
    margin-top: 85px !important;
    margin-left: 90px !important;
  }

  app-business-hours .office-type {
    text-align: center;
  }

  .res-border {
    border-bottom: 1px dashed #cfc8c8;
    margin-bottom: 15px;
  }

  .modal-dialog {
    width: 100% !important;
  }

  .border-modal {
    border-radius: 15px 15px 0px 0px !important;
  }

  .office-sp-modal {
    vertical-align: bottom !important;
    position: relative;
  }

  .view-switch {
    background: white !important;
    border: 1px solid #f4eded !important;
    border-radius: 50px !important;
    margin-top: 55px;
    width: 100% !important;
  }

  .modal-content {
    vertical-align: bottom !important;
  }

  .history-popup {
    padding: 0px !important;
  }

  app-office-dashboard .modal-body {
    border-radius: 15px 15px 0px 0px !important;
  }

  .sp-scroll-mb {
    border: 1px solid #ddddff;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 5px;
    color: #252525;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .today-box {
    width: 80px !important;
    height: 36px !important;
    border-radius: 50px !important;
    background: #5c3a8f !important;
    color: white;
    font-size: 14px;
  }

  .board-head {
    background: #402268;
    padding: 10px;
    border-radius: 0px 0px 20px 20px;
    display: block !important;
  }

  .view-select {
    border-radius: 50px !important;
    background: #76b900 !important;
    color: white !important;
    margin-bottom: 0px !important;
    line-height: 26px;
  }

  .mobile-pop-dis {
    display: block !important;
    margin-bottom: 20px;
  }

  .view-list {
    display: none !important;
  }

  .dot-border-status {
    display: none !important;
  }

  .mb-status {
    right: 5px !important;
    top: 0px;
    display: block !important;
    border-radius: 20px;
    padding: 5px 10px !important;
    font-size: 10px !important;
    font-weight: 500;
  }

  #notemodal .modal-content {
    vertical-align: bottom !important;
  }

  #notemodal .modal-body {
    border-radius: 15px 15px 0px 0px !important;
  }

  .mb-mob-15 {
    margin-bottom: 15px;
  }

  app-office-dashboard .close-btn {
    display: none;
    width: 90% !important;
  }

  app-cancel-subscription .radio-btn ul li label {
    padding: 17px 0px 50px 40px !important;
  }

  .minutes-schedule ul li label {
    display: block;
    position: relative;
    font-weight: 500;
    font-size: 13px !important;
    padding: 11px 0px 15px 30px !important;
  }

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

  .go-dashboard {
    margin: 0px 0px 20px 0px !important;
  }

  .question-label {
    margin-bottom: 15px;
  }

  .answer-label {
    margin-bottom: 15px;
  }

  .head-auto {
    margin: auto;
  }

  .mb-center {
    text-align: center;
  }

  .trash {
    right: 40px !important;
  }

  .rating-preview {
    width: 100% !important;
    height: 120px !important;
  }

  app-staff-availability .days {
    margin-left: 15px !important;
  }

  app-staff-availability .drop-select.sp .mat-form-field-infix {
    margin-left: 15px !important;
  }

  app-staff-availability .drop-select .mat-form-field-infix {
    margin-left: 0px !important;
  }

  app-staff-availability .effective-from {
    padding-left: 15px !important;
  }

  app-staff-availability .effective-date-field {
    right: auto !important;
  }

  app-staff-availability .effective-to {
    text-align: start !important;
  }

  app-manage-available-service .btn-new {
    width: 100px !important;
  }

  app-appointment-reasons .days {
    margin-top: 30px !important;
  }

  app-walk-in .patient-details {
    white-space: normal !important;
    word-break: break-all;
  }

  .mb-min {
    margin-top: 20px;
  }

  .mb-add-sp {
    text-align: center !important;
    margin-top: 20px;
  }

  .button-plan {
    width: 100% !important;
  }

  .success-modal {
    width: 100% !important;
  }

  .fail-modal {
    width: 100% !important;
  }

  .appoint-enable img {
    margin-left: 0px !important;
  }

  .appoint-busy img {
    margin-left: 0px !important;
  }

  .appoint-available img {
    margin-left: 0px !important;
  }

  .book-border {
    margin: auto;
  }

  .busy-border {
    margin: auto;
  }

  .avail-border {
    margin: auto;
  }

  .mobile-mt-15 {
    margin-top: 15px;
  }

  .mb-status {
    margin-bottom: 15px;
    text-align: center;
    margin-top: 10px;
  }

  .popup-icon-mobile {
    padding: 15px;
  }

  .logout-content {
    border-radius: 0px 0px 15px 15px !important;
  }

  .checkin-content {
    border-radius: 0px 0px 15px 15px !important;
  }

  .reschedule-content {
    border-radius: 0px 0px 15px 15px !important;
    display: block !important;
  }

  .cancel-content {
    border-radius: 0px 0px 15px 15px !important;
  }

  app-welcome-page .navbar-brand {
    display: block !important;
    margin: auto;
  }

  app-select-business .navbar-brand {
    display: block !important;
    margin: auto;
  }

  app-choose-payment .navbar-brand {
    display: block !important;
    margin: auto;
  }

  app-select-address .navbar-brand {
    display: block !important;
    margin: auto;
  }

  app-business-hours .navbar-brand {
    display: block !important;
    margin: auto;
  }

  app-account-summary .navbar-brand {
    display: block !important;
    margin: auto;
  }

  app-account-summary .org-title {
    font-size: 14px !important;
    margin: 25px -35px !important;
  }

  app-account-summary .org-name {
    font-size: 18px !important;
  }

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

  .cp-pad {
    padding: 0px !important;
  }

  .resp-table tr {
    display: grid;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-top: 3px solid #9a64d4;
  }

  .resp-table thead th {
    display: none !important;
  }

  .resp-table td {
    border: none !important;
  }

  .resp-table {
    margin-top: 10px;
  }

  .mob-margin {
    margin-top: -20px;
  }

  .mobile-client {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 10px;
  }

  app-office-booked-appointments .appt-font {
    font-size: 18px !important;
  }

  app-office-booked-appointments .bottom-line {
    width: 78% !important;
  }

  app-office-booked-appointments .card {
    margin-top: -30px !important;
    margin: -15px;
    border: none !important;
    box-shadow: none !important;
  }

  app-office-booked-appointments .bottom-line {
    display: none;
  }

  app-account-setup .card {
    padding: 15px !important;
    height: auto;
  }

  app-account-setup .image-upload {
    justify-content: center;
  }

  app-account-setup .remove-margin {
    margin-top: 10px;
    margin-left: 7px;
  }

  .mobile-setup {
    display: contents !important;
  }

  .mobile-margin {
    margin-left: auto;
    margin-right: auto;
  }

  .days {
    font-size: 14px;
  }

  .all-days-position {
    position: absolute;
    left: 50% !important;
    margin-top: -15%;
  }

  .mobile-account-bg {
    background-color: #fff;
    padding-bottom: 60px;
    height: 95vh !important;
  }

  .font-sm-18 {
    font-size: 18px !important;
  }

  .font-sm-14 {
    font-size: 14px !important;
  }

  app-select-business {
    .business-grid {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr) !important;
      overflow-x: scroll;
      row-gap: 98px;
    }

    .left-card .card {
      width: 430px !important;
      height: fit-content !important;
      margin-bottom: 0px !important;
    }

    app-account-summary .account-card {
      width: 100% !important;
    }

    app-choose-payment .mat-checkbox-layout {
      white-space: break-spaces !important;
    }

    .card .search-icon {
      /* position: relative; */
      top: 40px !important;
      left: 8% !important;
    }

    .services-tile {
      width: 120px !important;
      height: 100px;
      position: relative !important;
    }

    .services-tile img {
      position: absolute;
      left: 15px;
      top: 15px;
    }

    .mob-mb-20 {
      margin-bottom: 20px !important;
    }

    .services-tile span {
      position: absolute !important;
      top: 60px !important;
      left: 20px !important;
    }

    .padb-20 {
      padding-bottom: 60px !important;
    }

    .services-tile span {
      font-size: 11px !important;
    }

    .mob-business {
      width: 420px;
    }

    .form-group {
      width: 320px !important;
    }

    .clear-btn {
      top: -40px !important;
      right: 5% !important;
    }
  }

  app-account-setup {
    .tooltip-text {
      visibility: hidden;
      width: 120px;
      margin-left: -20px !important;
      font-size: 12px;
      justify-content: start;
      display: flex;
    }

    .card {
      box-shadow: none !important;
    }

    .w-80per {
      width: inherit !important;
    }

    .form-control {
      font-size: 14px !important;
    }

    ::-webkit-scrollbar {
      display: none;
    }

    .avail-days label {
      width: 65px;
      height: 35px;
    }

    .width-400 {
      width: 400px;
    }

    .copy-fix {
      width: 12% !important;
    }

    #scroll-style {
      padding: 15px;
    }

    .res-border {
      border-bottom: none !important;
    }

    .vh-80 {
      height: auto !important;
      overflow-x: hidden !important;
    }

    .slot-text {
      width: 240px !important;
      font-size: 12px !important;
    }

    .upload-color {
      margin-top: 10px !important;
    }
  }

  app-signup .otp input.mat-input-element {
    padding-left: 20px;
  }

  .page-search-btn {
    margin-top: 15px;
  }

  .card {
    box-shadow: none !important;
    height: 100dvh;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    overflow-y: auto !important;
  }

  .social-image {
    width: 30px;
    height: 30px;
  }

  .proceed-popup {
    width: 100% !important;
    border-radius: 20px 20px 0px 0px !important;
  }

  app-office-service-providers .staff-input {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .tab-width {
    width: 100% !important;
  }

  app-office-service-providers .filter-icon {
    display: none;
  }

  app-office-service-providers .card {
    padding-top: 20px !important;
  }

  app-office-service-providers .no-data-height {
    height: calc(100vh - 271px) !important;
    overflow-y: hidden;
  }

  app-billings-plan .billing-card {
    margin-top: 80px !important;
  }

  app-booking-integration .share-margin {
    margin-right: 10px !important;
  }

  app-booking-integration .social-icons {
    border-radius: 20px 20px 0px 0px !important;
    padding: 10px !important;
  }

  app-holiday-list .holiday-0 {
    margin: 0px !important;
  }

  app-office-dashboard #appointdetails .modal-body {
    border-radius: 20px !important;
    margin-top: 25px;
  }

  app-office-dashboard .left-dialog {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  app-office-dashboard,
  app-service-provider-dashboard .appt-detail-border {
    max-width: none !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .fo-scroll {
    height: 60vh !important;
  }

  .communicate-height {
    padding-top: 50px;
    height: 100dvh;
    overflow-y: scroll;
  }

  app-business-hours .avail-days label {
    width: 65px !important;
  }

  .business-margin {
    margin-top: 50px;
  }

  app-settings .line-modal .modal-dialog {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    height: auto !important;
  }

  app-service-provider-dashboard #appointdetails .modal-body {
    border-radius: 20px !important;
    margin-top: 25px;
  }

  app-service-provider-dashboard .action-list ul li {
    padding: 0px !important;
  }

  app-service-provider-dashboard .mob-sp-width {
    width: 180px;
  }

  .gender-popup {
    border-radius: 25px 25px 0px 0px !important;
  }

  app-service-provider-dashboard .mob-sp-width {
    width: 180px;
  }

  .addclick-card {
    padding-top: 0px !important;
    height: 90dvh !important;
  }

  .overflow-card {
    overflow-x: hidden !important;
  }

  .client-padding-mob {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }

  .dashed-line-mob {
    width: 90% !important;
    height: 1px !important;
  }

  .sp-shname-mob {
    width: 50px !important;
    height: 50px !important;
    font-size: 14px !important;
  }

  .sp-smargin {
    margin-top: 0px !important;
    margin-left: 0px !important;
  }

  .header-card-service-height {
    height: inherit !important;
  }

  .summary-center {
    width: auto !important;
  }

  app-out-of-office .res-border {
    border-bottom: none !important;
  }

  .countdown {
    gap: 30px !important;
  }

  .dots {
    position: relative;
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  .dot {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    margin: 0px;
  }

  .dot.active {
    width: 30px;
    height: 10px;
    border-radius: 10px;
    background-color: #76b900;
  }

  .active-slide {
    transform: scale(1.23);
    transition: transform 0.3s ease;
  }

  .mySlides {
    display: block !important;
  }

  .lg-view {
    display: none !important;
  }

  .mb-view {
    display: block !important;
  }

  .mb-slide-plan {
    padding-left: 80px !important;
    padding-right: 85px;
  }

  .sticky-section {
    position: sticky;
    top: 0px;
    z-index: 1000;
    padding-bottom: 20px;
    background-color: #fff;
  }

  .price-table {
    margin-top: 30px !important;
  }

  .price-table tr {
    width: 100% !important;
    padding: 0px 15px;
  }

  .h-40 {
    height: 50px !important;
    padding: 0px !important;
  }

  .panel-group .panel-heading a.collapsed:after {
    top: 25px !important;
  }

  .panel-group .panel-heading a {
    font-size: 14px !important;
    height: 60px !important;
  }

  .panel-body {
    font-size: 13px !important;
    line-height: 22px !important;
  }

  app-faq .mat-expansion-panel-header-title {
    font-size: 14px !important;
  }

  .multi-account-menu {
    border: 1px solid #DDDFFF;
    border-radius: 15px 15px 0px 0px !important;
    padding: 10px 0px;
    background-color: #ffff;
    box-shadow: 0px 5px 15px #0000001A;
    width: 100% !important;
    position: absolute;
    bottom: 0;
    margin: 0 !important;
  }

  .multi-account-modal {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }

  .billing-position {
    position: sticky !important;
    bottom: 10px;
    display: block !important;
    padding: 20px 0px !important;
  }

  .mob-pad-0 {
    padding: 0px !important;
  }

  .d-no-show {
    display: none;
  }

  .mob-pad-20 {
    padding: 20px;
  }

  .billing-summary-mob {
    display: block !important;
    padding: 0px !important;
  }

  .appt-schedule-info {
    left: 0% !important;
    transform: translateX(-80%) !important;
  }

  .appt-schedule-info .tooltip-arrow {
    left: 90% !important;
    transform: translateX(-80%) !important;
  }

  .billing-sec {
    padding: 20px 10px !important;
  }

  .special-feature-sec {
    width: 90% !important;
    margin: 10px auto !important;
  }

  .staff-align {
    padding: 0px 20px !important;
  }

  .pricing-summary-container {
    width: 89% !important;
  }

  .web-mb-80 {
    margin-bottom: 0px !important;
  }

  .fs-mob-16 {
    font-size: 16px !important;
  }

  .fs-mob-15 {
    font-size: 15px !important;
  }

  .fs-mob-13 {
    font-size: 13px !important;
  }

  .fs-mob-20 {
    font-size: 20px !important;
  }

  .fs-mob-14 {
    font-size: 14px !important;
  }

  .fs-mob-18 {
    font-size: 18px !important;
  }

  .reassign-sp {
    flex: 100% !important;
    max-width: 100% !important;
    margin-top: 60px !important;
  }

  .reassign-list {
    display: flex;
    overflow-x: scroll;
  }

  #transform-line-loading {
    transform: translate(0%, -45%) !important;
    -webkit-transform: translate(0%, -45%) !important;
  }

  .contact-label {
    padding: 30px 0 30px 10px !important;
  }

  .already-schedule-container {
    margin: 10px 15px !important;
  }

  .font-mob-sm {
    font-size: 16px !important;
  }

  app-notifications {
    .image-center-50 {
      margin-top: 100% !important;
    }
  }

}

@media (min-width: 768px) and (max-width: 998px) {
  .mobile-logo {
    display: none !important;
  }

  .signup-page .left-side {
    display: none !important;
  }

  .signup-page .right-side {
    width: 100% !important;
    padding: 20px;
  }

  app-signup .mat-stepper-horizontal {
    position: relative !important;
  }

  .signup-page .mat-horizontal-content-container {
    padding: 0px;
  }

  .company-logo {
    display: none !important;
  }

  app-my-customer-details .customers label {
    width: 70% !important;
  }

  app-my-customer-details .customer-details {
    height: auto !important;
    margin-left: 60px !important;
  }

  app-my-customer-details .customer-img {
    margin-top: 20px !important;
  }

  .comment-title {
    margin-left: 0px !important;
  }

  .comments {
    left: 0px !important;
    width: 100% !important;
  }

  #mobile-view thead {
    display: none;
  }

  #mobile-view td {
    width: 100% !important;
    border-radius: 0px !important;
    padding: 15px 25px;
  }

  #mobile-view tr {
    display: grid;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .d-contents {
    display: contents;
  }

  .bg-lgrey {
    background-color: #f9f9f9;
    height: 100vh;
  }

  .bg-lwhite {
    background-color: #fcfcfc;
    height: 100vh;
  }

  .sp-margin {
    margin: 20px 0px;
  }

  app-select-service-provider,
  app-select-service,
  app-choose-family {
    .card {
      height: calc(100vh - 160px);
    }

    .plr-40 {
      padding: 0px 40px !important;
    }
  }

  app-front-office-profile,
  app-booking-integration,
  app-import-customer,
  app-branch-locations {
    .card {
      padding: 40px 60px !important;
    }
  }

  .card {
    border-radius: 20px !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    height: calc(100vh - 160px);
  }

  app-more-settings,
  app-settings,
  app-branch-location {
    .card {
      box-shadow: none !important;
      height: calc(100vh - 160px);
    }
  }

  app-communicate,
  app-company-information,
  app-business-hours,
  app-select-products {
    .communicate-height {
      height: calc(100vh - 90px);
      overflow-y: auto;
    }
  }

  app-available-services,
  app-out-of-office,
  app-holiday-list {
    .settings-height {
      height: calc(100vh - 200px);
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

  app-appointment-confirmation .confirm-height {
    height: calc(100vh - 90px);
    overflow-y: scroll;
    padding-bottom: 40px;
  }

  app-business-hours .res-border {
    width: 100%;
    margin-top: 10px;
  }

  .menu-details-view::-webkit-scrollbar {
    width: 4px;
    height: 10px;
  }

  .menu-details-view::-webkit-scrollbar-track {
    background-color: #cccccc;
    border-radius: 3px;
  }

  .menu-details-view::-webkit-scrollbar-thumb {
    background-color: #76b900;
    border-radius: 3px;
    width: 4px;
  }

  .bio-textarea {
    width: 95% !important;
  }

  .business-top {
    margin-top: 30px;
  }

  .plan-value {
    width: 100% !important;
    height: 195px !important;
  }

  .testimonial-name {
    margin: 20px auto !important;
    width: 100% !important;
  }

  .plan-width {
    width: 90%;
  }

  .history-width {
    width: 27% !important;
  }

  .mb-lg-30 {
    margin-bottom: 30px;
  }

  .p-lg-0 {
    padding: 0px;
  }

  .fs-web-40 {
    font-size: 40px;
  }

  .email-width-200 {
    width: 200px;
  }

  .width-85-web {
    width: 85%;
  }

  .mt-lg-40 {
    margin-top: 40px;
  }
}

app-notifications {
  .border-box {
    border-radius: 25px 25px 0 0;
    background: white;
    position: relative;
    top: 5px;
    height: 100%;
  }

  .border-curve {
    background: #402268;
    height: 30pt;
  }

  .notify-heading {
    display: flex !important;
    justify-content: space-between;
    padding: 15px;
  }

  .line-bg {
    width: 100%;
    height: 3px;
    background: #DEDCFF 0% 0% no-repeat padding-box;
  }


}

@media (max-height: 670px) {
  app-office-dashboard {
    .appt-detail {
      overflow-y: auto !important;
    }
  }
}