@media (min-width: 300px) and (max-width: 350px) {
  app-appointment .title-main-book {
    padding: 10px !important;
  }
  .mob-account {
    position: relative;
    left: 20px;
    margin-left: 0px !important;
    white-space: wrap!important;
}

}

@media (min-width: 300px) and (max-width: 400px) {
  .signup-page .nav-tabs {
    margin-left: 25%;
  }

  .mobile-title {
    padding: 25px 7px !important;
  }

  .mobile-order {
    order: 2;
  }

  app-appointment .title-book::before {
    position: relative;
    top: 10px;
    margin-right: 0px !important;
  }
}

@media (min-width: 401px) and (max-width: 500px) {
  .signup-page .nav-tabs {
    margin-left: 30%;
  }

  .mobile-order {
    order: 2;
  }
}

@media (min-width: 501px) and (max-width: 600px) {
  .signup-page .nav-tabs {
    margin-left: 30%;
  }

  .mobile-order {
    order: 2;
  }
}

@media (min-width: 601px) and (max-width: 767px) {
  .signup-page .nav-tabs {
    margin-left: 36%;
  }

  .mobile-order {
    order: 2;
  }
}

@media (max-width: 767px) {
  app-switch-account .common-title-main {
    display: none !important;
  }
  app-switch-account .radio-btn {
    margin: auto;
  }
  app-switch-account .radio-btn ul {
    display: block !important;
  }
  app-notification-reminders .common-title-main {
    display: none !important;
  }
  app-notification-reminders .tip .tooltip-text {
    left: 18px !important;
    right: auto !important;
    text-align: justify !important;
    bottom: -100px !important;
  }
  app-notification-reminders .tip .tooltip-text::before {
    bottom: 108px !important;
    left: 213px !important;
    transform: rotate(88deg) !important;
  }
  app-customer-profile .sp-left-sname {
    padding: 27px 25px !important;
    font-size: 20px;
    width: auto !important;
    height: auto !important;
    margin: 0px !important;
    border: 0 !important;
  }
  app-dashboard .save-success {
    width: auto !important;
  }
  .mb-flex {
    display: flex;
    margin: 0px !important;
  }
  .lg-none {
    display: block !important;
  }
  .mb-none {
    display: none !important;
  }
  .mob-mt-50 {
    margin-top: 50px;
  }

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

  .share-add-border {
    width: 100% !important;
  }

  .history-text {
    text-align: right !important;
    margin-right: 15px;
  }

  app-appointment .appoint-content {
    margin-right: auto;
  }

  app-appointment .appoint-content img {
    margin-left: -5px;
  }

  .dashboard-bg {
    overflow-x: hidden;
  }

  .mb-flex {
    display: flex;
  }

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

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

  app-dashboard label {
    width: 100% !important;
    margin: 5px 14px !important;
  }

  app-dashboard .sp-detail {
    margin-left: -5px !important;
  }

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

  app-service-provider-profile .sp-book-btn {
    font-size: 15px !important;
    width: 200px !important;
  }

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

  .mobile {
    left: 0 !important;
    margin: auto;
  }

  .mb-call-img {
    width: 40px !important;
    height: 35px !important;
    margin: auto !important;
  }

  .mb-navigate {
    width: 40px !important;
    height: 40px !important;
  }

  .upcoming-row {
    margin-top: 120px;
  }

  .pc-tab {
    margin: 10px auto !important;
  }

  app-service-provider-profile .book-btn {
    padding: 8px !important;
    margin-bottom: 15px;
  }

  app-service-provider-profile .bottom-line {
    width: 70% !important;
    margin-top: 10px !important;
  }

  app-settings .img-border {
    margin-bottom: 20px !important;
  }

  app-settings .common-title-main {
    display: none !important;
  }

  app-settings .mt-50 {
    margin-top: 0 !important;
  }

  app-settings .title-back {
    position: relative !important;
    right: 5px;
    display: none !important;
  }

  app-select-preferred-office .success-message {
    width: 100% !important;
  }

  app-appointment-details .common-title-main {
    display: none;
  }

  .footer {
    display: block !important;
  }

  .fixed-filter {
    position: fixed !important;
    background-color: #fff;
    z-index: 999;
    margin-top: -26px;
  }

  .pc-tab ul li:not(:first-child) label {
    border-radius: 0px !important;
  }

  .pc-tab ul li:not(:last-child) label {
    border-radius: 0px !important;
  }

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

  .tile-border-view {
    border: none !important;
  }

  .appt-detail {
    margin-left: 0px !important;
  }

  .appt-info {
    width: 90% !important;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .action-ml-30 {
    margin: auto 0px !important;
  }

  .network-list {
    left: -40px !important;
    width: 260px !important;
  }

  .not-avail .popover {
    margin-left: -21px;
  }

  .share-content {
    width: 80% !important;
  }

  .close img {
    position: absolute;
    left: 75%;
    top: -65px !important;
  }

  .close img {
    right: 0;
  }

  .status-margin {
    margin-bottom: 10px !important;
  }

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

  app-dashboard .action-list {
    margin: auto;
  }

  app-appointment-details .action-list li {
    margin: 0px 10px !important;
  }

  app-appointment-details .status-badge {
    margin-bottom: 10px;
  }

  app-select-preferred-office .prefer-popup {
    top: -20% !important;
  }

  app-select-preferred-office .close-icon {
    margin-top: -47px !important;
    margin-right: -40px !important;
  }

  app-queue-status .title-back {
    display: block !important;
  }

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

  app-dashboard .auto-search {
    margin-top: 20px;
  }

  app-appointment-details .common-title-main {
    margin-top: 15px;
  }

  .mob-ml-15 {
    margin-left: 15px;
  }

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

  app-add-appointment .common-title-main {
    display: none !important;
  }

  .share-border {
    height: auto !important;
    border-radius: 20px !important;
    padding: 10px 6px 0px 10px !important;
  }

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

  .sp-border {
    width: 220px;
    margin-bottom: 20px;
  }

  .share-button {
    margin-top: 0px !important;
  }

  .commute-ml-5 {
    margin-left: 20px !important;
  }

  app-appointment .border-radio {
    margin-top: 25px !important;
  }

  app-dashboard .pc-tab ul li label {
    padding: 10px 25px !important;
  }

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

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

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

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

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

  .mob-clear-btn {
    display: block !important;
  }
  .button-wrapper {
    display: flex;
    flex-direction: column !important;
    align-items: center; 
    justify-content: center; 
  }

  .clear-btn {
    display: none !important;
  }

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

  .mobile-order {
    order: 2;
  }

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

  app-add-appointment .date-picker {
    margin-top: 30px;
  }

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

  .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;
  }

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

  .back-arrow {
    display: block !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;
    border-radius: 20px;
    height: auto !important;
    display: block!important;
    background-color: white;
    margin-top: 6rem;
    }

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

  app-signup .mat-stepper-horizontal {
    padding: 0px 0px !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;
  }

  .filter {
    margin-top: 30px !important;
    margin-bottom: 25px !important;
  }

  .dashboard-bg {
    background-color: #fff !important;
  }

  .static-header {
    position: absolute;
    width: 100%;
  }

  .static-header header {
    height: 83px;
    background: #8b52c5 !important;
    border-bottom: 1px solid #d6b9f3;
    position: fixed;
    width: 100%;
    z-index: 9999;
  }

  .global-body-content {
    margin-top: 90px;
    height: 100%;
  }

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

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

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

  .mobile-logo {
    display: block !important;
    padding: 20px !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    margin: -15px;
  }

  .mobile-logo img {
    height: 50px;
    padding-left: 7px;
    margin-top: -6px;
  }

  .back-arrow {
    display: block !important;
    cursor: pointer;
    padding: 20px !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    margin: -15px 0px -15px -10px;
  }

  .back-arrow i {
    color: #fff;
    height: 50px;
    padding-left: 7px;
    margin-top: -6px;
  }

  .dashboard-bg .top-line {
    display: none !important;
  }

  .dashboard-bg .common-title-main {
    padding-top: 0px !important;
  }

  .bottom-green-line {
    border-bottom: 3px solid #52b943 !important;
    width: 150px;
    margin-right: auto;
    margin-left: auto;
    display: block !important;
    margin-top: 20px;
  }

  .bottom-purple-line {
    border-bottom: 3px solid #9a64d4 !important;
    width: 150px;
    margin-right: auto;
    margin-left: auto;
    display: block !important;
    margin-top: 20px;
  }

  app-my-preferences label {
    width: 100% !important;
  }

  .bin {
    left: 13% !important;
  }

  .dashboard-bg .btn-green {
    float: none !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 15px;
    margin-top: 15px;
    width: 100%;
  }

  .dashboard-bg .btn-blue {
    width: 100%;
  }

  .dashboard-bg .card {
    padding: 0px !important;
  }

  .dashboard-bg .confirm-mobile {
    background: none !important;
    color: #51ba43 !important;
    font-weight: 500;
    margin-left: 0px !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
  }

  .dashboard-bg .complete-mobile {
    background: none !important;
    color: #51ba43 !important;
    font-weight: 500;
    margin-left: 0px !important;
    padding-left: 0px !important;
    text-align: left !important;
  }

  .dashboard-bg .complete-mobile::before {
    content: ".";
    font-size: 50px;
    line-height: 0px;
  }

  #dashboard-details thead {
    display: none;
  }

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

  #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);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  #past-appointment thead {
    display: none;
  }

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

  #past-appointment 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 #9a64d4 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .mobile-td-label {
    display: block !important;
    color: #656565;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .app-date,
  .app-status {
    font-size: 18px;
  }

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

  .commute {
    background-color: #f9f9f9 !important;
  }

  .top-purple-line {
    display: none;
  }

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

  .mobile-table-label {
    display: block !important;
    color: #656565;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 2px;
    margin-top: -13px;
  }

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

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

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

  app-family-members .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 {
    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 !important;
  }

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

  app-appointment-cancel .title-back a {
    color: #8b52c6 !important;
  }

  app-appointment-cancel .btn-width {
    width: 120px !important;
  }

  app-appointment-cancel .appoint-cancel {
    padding-top: 1px;
  }

  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-appointment-confirmation .network-list {
    top: 34px !important;
    left: 60px !important;
    margin-top: 20px !important;
  }

  app-appointment-confirmation .close img {
    left: 69%;
    top: 44px !important;
  }

  .confirm-code {
    float: inherit !important;
  }

  .margin-align {
    margin-top: 20px !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: 5px !important;
  }

  #customer-history thead {
    display: none;
  }

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

  #customer-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 4px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 10px;
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }

  app-customer-history .date-label {
    margin-top: 20px;
  }

  app-customer-history .appoint-detail {
    display: flex;
  }

  app-customer-history .time-color {
    margin-left: 9px !important;
  }

  .location-detail {
    font-weight: 500 !important;
    text-align: left;
  }

  app-customer-history .appointment-detail {
    background-color: #f9f9f9 !important;
  }

  .queue-status-bg {
    background-color: #efefef;
    padding-top: 1px;
  }

  #queue-status thead {
    display: none;
  }

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

  #queue-status 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 4px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    margin-top: 10px;
  }

  .serial-number {
    display: none !important;
  }

  .name-status {
    display: flex !important;
  }

  app-queue-status .appoint-status {
    display: block !important;
  }

  .queue-appoint {
    display: none;
  }

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

  app-queue-status .top-line {
    border-top: 1px solid #b9b3b3;
    margin-left: -31px;
    margin-right: -24px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  app-queue-status .complete-badge {
    line-height: 21px;
    width: 170px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .attending-badge {
    line-height: 21px;
    width: 170px !important;
    height: 50px;
    padding-top: 4px !important;
    font-size: 20px !important;
  }

  app-queue-status .cancel-badge {
    line-height: 21px;
    width: 170px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .checkin-badge {
    line-height: 21px;
    width: 170px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .yet-badge {
    line-height: 21px;
    width: 170px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .pad-50 {
    padding: 0px 10px 0px 10px !important;
  }

  app-queue-status .title-back {
    margin-top: -40px !important;
    float: right !important;
  }

  app-queue-status .search-title-main {
    display: block !important;
  }

  .name-label {
    text-align: left;
  }

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

  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;
  }

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

  .select-family {
    margin-top: 20px;
  }

  .modal-content {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .modal-logout {
    margin-top: -1px !important;
  }

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

  .modal-align {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .icon-align {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
  }

  .logout-heading {
    margin-top: 20px !important;
  }

  .logout-line {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  #logouttopModals .btn-secondary {
    padding: 7px !important;
  }

  #logouttopModals .btn-primary {
    padding: 7px !important;
  }

  app-appointment .tab-content {
    padding: 8px !important;
    margin-top: 10px;
  }

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

  .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;
  }

  app-appointment .appoint-bg {
    background: #fff !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;
  }

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

  .accordion .btn-time {
    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;
  }

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

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

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

  app-appointment .radio-group label {
    display: block !important;
    margin: 15px !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-appointment .details {
    border-right: 0px solid #ccc !important;
    padding: 0px !important;
    margin-right: 0px !important;
  }

  app-appointment .time-details {
    display: block !important;
    border-right: 1px solid #ccc !important;
    margin-right: 10px !important;
    width: 45% !important;
  }

  app-appointment .time-details .t-date {
    font-size: 20px !important;
    text-transform: lowercase !important;
    font-weight: 500 !important;
  }

  app-appointment .reason {
    margin-top: 10px;
  }

  .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 {
    border-radius: 15px !important;
    position: relative !important;
    width: 135px !important;
    height: 55px !important;
    padding-top: 5px !important;
    left: 5px;
    font-size: 15px !important;
    float: none !important;
  }

  app-appointment-confirmation .btn-green-align {
    width: 150px !important;
  }

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

  .preference {
    left: 0px !important;
  }

  .preference-list label {
    left: 0px !important;
    display: initial !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;
  }

  .family-profile {
    margin-top: 0px !important;
  }

  app-customer-profile .alert-danger {
    margin: 0px 0px 20px 0px !important;
  }

  app-customer-profile .profile-img {
    margin-top: 0px !important;
    margin-bottom: 35px !important;
  }

  app-customer-profile .profile-details {
    margin-top: 0px !important;
  }

  app-customer-profile .employment-details {
    padding-top: 30px !important;
  }

  app-customer-profile .family-select {
    text-align: center;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 86%;
  }

  app-customer-profile .family-select label {
    margin-bottom: 30px !important;
  }

  .dashboard-bg .top-line {
    display: none !important;
  }

  .dashboard-bg .common-title-main {
    padding-top: 0px !important;
  }

  .bottom-green-line {
    border-bottom: 3px solid #52b943 !important;
    width: 150px;
    margin-right: auto;
    margin-left: auto;
    display: block !important;
    margin-top: 20px;
  }

  .bottom-purple-line {
    border-bottom: 3px solid #9a64d4 !important;
    width: 150px;
    margin-right: auto;
    margin-left: auto;
    display: block !important;
    margin-top: 20px;
  }

  .dashboard-bg .btn-green {
    float: none !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 15px;
    margin-top: 15px;
    width: 100%;
  }

  .dashboard-bg .btn-blue {
    width: 100%;
    display: none !important;
  }

  .dashboard-bg .card {
    padding: 0px !important;
  }

  .dashboard-bg .confirm-mobile {
    background: none !important;
    color: #51ba43 !important;
    font-weight: 500;
    margin-left: 0px !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
    text-align: left !important;
  }

  .dashboard-bg .complete-mobile {
    background: none !important;
    color: #51ba43 !important;
    font-weight: 500;
    margin-left: 0px !important;
    padding-left: 0px !important;
    text-align: left !important;
  }

  .dashboard-bg .complete-mobile::before {
    content: ".";
    font-size: 50px;
    line-height: 0px;
  }

  #dashboard-details thead {
    display: none;
  }

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

  #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);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  #past-appointment thead {
    display: none;
  }

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

  #past-appointment 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 #9a64d4 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .mobile-td-label {
    display: block !important;
    color: #656565;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 10px;
  }

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

  .app-date,
  .app-status {
    font-size: 18px;
  }

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

  .commute {
    background-color: #f9f9f9 !important;
  }

  .top-purple-line {
    display: none;
  }

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

  .mobile-table-label {
    display: block !important;
    color: #656565;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 2px;
    margin-top: -13px;
  }

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

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

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

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

  app-family-members .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 {
    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 !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: 5px !important;
  }

  #customer-history thead {
    display: none;
  }

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

  #customer-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 4px 0px rgba(50, 50, 50, 0.45);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 10px;
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }

  app-customer-history .date-label {
    margin-top: 20px;
  }

  app-customer-history .appoint-detail {
    display: flex;
  }

  app-customer-history .time-color {
    margin-left: 9px !important;
  }

  .location-detail {
    font-weight: 500 !important;
    text-align: left;
  }

  app-customer-history .appointment-detail {
    background-color: #f9f9f9 !important;
  }

  .queue-status-bg {
    background-color: #efefef;
  }

  #queue-status thead {
    display: none;
  }

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

  .serial-number {
    display: none !important;
  }

  .name-status {
    display: flex !important;
  }

  app-queue-status .appoint-status {
    display: block !important;
  }

  .queue-appoint {
    display: none !important;
  }

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

  app-queue-status .top-line {
    border-top: 1px solid #b9b3b3;
    margin-left: -31px;
    margin-right: -24px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  app-queue-status .complete-badge {
    line-height: 21px;
    width: 180px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .attending-badge {
    line-height: 21px;
    width: 180px !important;
    height: 50px;
    padding-top: 12px !important;
    font-size: 20px !important;
  }

  app-queue-status .cancel-badge {
    line-height: 21px;
    width: 180px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .checkin-badge {
    line-height: 21px;
    width: 180px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .yet-badge {
    line-height: 21px;
    width: 180px !important;
    height: 50px;
    padding-top: 14px !important;
    font-size: 20px !important;
  }

  app-queue-status .pad-50 {
    padding: 0px 10px 0px 10px !important;
  }

  app-queue-status .search-title-main {
    height: 70px !important;
    display: none !important;
  }

  app-queue-status .appoint-detail {
    text-align: center;
    display: block !important;
  }

  .name-label {
    text-align: left;
  }

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

  .prefer-popup {
    padding: 20px !important;
    text-align: justify;
  }

  .list label {
    width: 85% !important;
  }

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

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

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

  app-my-account .search-title-main {
    display: none !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;
  }

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

  .select-family {
    margin-top: 20px;
  }

  .modal-content {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .modal-logout {
    margin-top: -1px !important;
  }

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

  .modal-align {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .icon-align {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
  }

  .logout-heading {
    margin-top: 20px !important;
  }

  .logout-line {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  #logouttopModals .btn-secondary {
    padding: 7px !important;
  }

  #logouttopModals .btn-primary {
    padding: 7px !important;
  }

  app-appointment .tab-content {
    padding: 8px !important;
    margin-top: 10px;
  }

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

  .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;
  }

  app-appointment .appoint-bg {
    background: #fff !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;
  }

  .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;
  }

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

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

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

  app-appointment .radio-group label {
    display: block !important;
    margin: 15px !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-appointment .details {
    border-right: 0px solid #ccc !important;
    padding: 0px !important;
    margin-right: 0px !important;
  }

  app-appointment .time-details {
    display: block !important;
    border-right: 1px solid #ccc !important;
    margin-right: 10px !important;
    width: 45% !important;
  }

  app-appointment .time-details .t-date {
    font-size: 20px !important;
    text-transform: lowercase !important;
    font-weight: 500 !important;
  }

  app-appointment .reason {
    margin-top: 10px;
  }

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

  .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 {
    border-radius: 15px !important;
    position: relative !important;
    width: 135px !important;
    height: 55px !important;
    padding-top: 5px !important;
    left: 5px;
    font-size: 15px !important;
    float: none !important;
  }

  app-appointment-confirmation .btn-green-align {
    width: 150px !important;
  }

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

  .preference {
    left: 0px !important;
  }

  .preference-list label {
    left: 0px !important;
    display: initial !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;
  }

  .family-profile {
    margin-top: 0px !important;
  }

  app-customer-profile .profile-details {
    margin-top: 0px !important;
  }

  app-customer-profile .employment-details {
    padding-top: 30px !important;
  }

  app-select-service-provider .add-customer .form-control {
    padding-left: 0px !important;
    width: 100% !important;
  }

  app-select-service-provider .mat-form-field {
    padding-left: 0px !important;
  }

  .btn-width-100-m {
    width: 100%;
  }

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

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

  app-family-members .family-select {
    margin-left: 0px !important;
  }

  .add-more {
    margin-left: auto;
    margin-right: auto;
  }

  app-customer-history .customer-detail {
    width: 100%;
  }

  app-customer-history .from-date {
    margin-top: 5px !important;
  }

  .signup-logo-mobile {
    display: block !important;
    background: #9a64d4;
    margin: 0px -15px;
    padding: 20px 10px;
  }

  .signup-logo-mobile img {
    height: 50px;
  }

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

  .tip .tooltip-text {
    left: auto !important;
    right: 0px !important;
  }

  app-customer-profile .profile-img .file {
    margin-left: 5px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    width: 46% !important;
  }

  #scroll-style::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
  }

  #scroll-style::-webkit-scrollbar {
    height: 7px;
    background-color: #f5f5f5;
  }

  #scroll-style::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-radius: 5px;
  }

  app-customer-profile .family-scroll {
  }

  app-customer-profile .family-select label .tick,
  app-customer-profile .family-select label .family-profile .fam-date,
  app-customer-profile .family-select label .family-profile .fam-rel {
    display: none;
  }

  app-customer-profile .family-select label {
    border-radius: 50% !important;
    width: 110px !important;
    height: 110px !important;
    background: none !important;
  }

  app-customer-profile .family-img {
    border-radius: 50% !important;
    margin-right: 0px !important;
    width: 100px !important;
    height: 100px !important;
  }

  app-customer-profile .family-img img {
    border-radius: 50% !important;
    width: 100% !important;
    height: 100% !important;
  }

  app-customer-profile .choose-family {
    display: block !important;
    text-align: center;
  }

  app-customer-profile .family-select label .family-profile .fam-name {
    text-align: center;
  }

  app-select-service-provider .add-customer .form-control {
    width: 100% !important;
  }

  app-select-service-provider .mat-form-field {
    padding-left: 0px !important;
  }

  .btn-width-100-m {
    width: 100%;
  }

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

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

  app-family-members .family-select {
    margin-left: 0px !important;
  }

  .add-more {
    margin-left: auto;
    margin-right: auto;
  }

  app-customer-history .customer-detail {
    width: 100%;
  }

  app-customer-history .from-date {
    margin-top: 5px !important;
  }

  .signup-logo-mobile {
    display: block !important;
    background: #9a64d4;
    margin: 0px -15px;
    padding: 20px 10px;
  }

  .signup-logo-mobile img {
    height: 50px;
  }

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

  .tip .tooltip-text {
    left: auto !important;
    right: -80px !important;
  }

  .add-appointment .tip .tooltip-text {
    left: auto !important;
    right: 0px !important;
  }

  .tile-bordered:hover {
    transform: none !important;
  }

  app-customer-profile .profile-img .file {
    margin-left: 5px !important;
    margin-right: 5px !important;
    display: inline-block !important;
    width: 46% !important;
  }

  .agm-map-container-inner {
    width: 100% !important;
    height: 200px !important;
    top: 30px;
    margin-bottom: 20px;
    position: relative !important;
  }

  .btn-book {
    display: none !important;
  }

  .icon-book {
    display: flex !important;
  }

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

  .role-check {
    width: 100% !important;
  }

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

  app-select-sp .form-group {
    margin-bottom: 0px !important;
  }

  .visit-type ul {
    display: block !important;
  }

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

  .border-line {
    border-top: 2px solid #eaeaea;
    margin: 10px -15px;
  }

  .time-content {
    margin-top: 5px !important;
  }

  app-contact-us .go-dashboard {
    margin-top: 0px !important;
    margin-bottom: 20px;
  }

  app-contact-us .mat-expansion-panel-header {
    height: 60px !important;
  }

  app-contact-us .email {
    font-size: 22px !important;
  }
  .mob-bg {
    background-image: url(../../assets/img/side-image-mob.png)!important;
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
   
  }
  .appt-font{
    font-size:20px!important;
    margin-bottom:0px!important;
  }
  .signup-btn{
    margin-top:15px;
    width:100%!important;
  }
  .login-form .mat-form-field {
    margin-top: 12px !important;
}

.mob-account{
position: relative;
left: 20px;
top: 0px;
margin-left:0px!important;
white-space: nowrap;
}
.agree-wrap{
  white-space: nowrap;

}
.gap-20{
  gap:35px!important;
}
.success-btn {
  width:100%!important;
}
.mob-align-center{
  height: calc(100vh - 130px);
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.mob-align-center-border{
  border:1px solid #402268;
  border-radius:25px;
  padding:30px;
}
.font-25{
  font-size:25px;
}
.btn-block{
  display: block;
}
.consumer-card {
  width: 100%!important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: #fff;
  border-radius: unset;
}
.consumer-screen{
  border-radius:0px!important;
  margin-top:0px!important;
}
.consumer-details-form {
  height:100dvh!important;
}
}

@media (min-width: 768px) and (max-width: 998px) {
  .login-form {
    padding-top: 50px !important;
  }

  app-customer-profile .profile-details {
    margin-top: 0px !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;
  }

  app-appointment .accordion .btn-time {
    width: 30% !important;
  }

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

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

  app-appointment .time-details {
    display: block !important;
    border-right: 1px solid #ccc !important;
    margin-right: 10px !important;
    width: 30%;
  }

  app-appointment .time-details .t-date {
    font-size: 20px !important;
    text-transform: lowercase !important;
    font-weight: 500 !important;
  }

  app-appointment .reason {
    margin-top: 10px;
  }

  app-appointment .appoint-bg {
    background: #fff !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;
  }

  .dashboard-bg .confirm-mobile {
    background: none !important;
    color: #51ba43 !important;
    font-weight: 500;
    margin-left: 0px !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
  }

  .dashboard-bg .complete-mobile {
    background: none !important;
    color: #51ba43 !important;
    font-weight: 500;
    margin-left: 0px !important;
    padding-left: 0px !important;
    text-align: left !important;
  }

  .dashboard-bg .complete-mobile::before {
    content: ".";
    font-size: 50px;
    line-height: 0px;
  }

  #dashboard-details thead {
    display: none;
  }

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

  #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);
    border-top: 5px solid #52b943 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  #past-appointment thead {
    display: none;
  }

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

  #past-appointment 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 #9a64d4 !important;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .mobile-td-label {
    display: block !important;
    color: #656565;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .app-date,
  .app-status {
    font-size: 18px;
  }

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

  .commute {
    background-color: #f9f9f9 !important;
  }

  .top-purple-line {
    display: none;
  }

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

  .mobile-table-label {
    display: block !important;
    color: #656565;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 2px;
    margin-top: -13px;
  }

  .filter {
    margin-top: 30px !important;
    margin-bottom: 25px !important;
  }

  .family-select label {
    width: 48% !important;
    margin-right: 10px;
  }

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

  app-select-service .tab-content {
    padding: 0 1em !important;
  }
}
@media (min-width:768px){
  .w-50per{
    width:63%;
  }

  
}