@media (min-width: 992px) {
  .overflow-lg-hidden {
    overflow-x: hidden !important;
  }
}

@media (max-width: 767px) {
  :root {
    /* --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px; */

    --spacing-xxs: 0.25rem;
    /* --spacing-xs: 0.5rem; */
    --spacing-sm: .5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
  }



  /* dashboard  */

  .stats {
    margin: 1rem 1rem !important;
  }

  .stat-container {
    margin: 1rem !important;
  }

  .coming-soon-module {
    margin-bottom: var(--spacing-lg);
  }

  .navbar-toggler {
    padding: 4px 6px;
  }

  .navbar-toggler-icon {
    width: 1.05em;
    height: 1.05em;

  }

  .top-div {
    margin: 1rem !important;
  }

  .greeting {
    margin-bottom: var(--spacing-lg) !important;
  }

  .breadcrumb {
    /* margin-left: 13px; */
  }

  /* all projects  */
  .header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .details-card__item {
    /* flex-direction: column; */
    margin-bottom: 8px;
  }

  .project-card__details {
    padding: 15px;
  }

  .progress {
    width: 70px !important;
    height: max-content;
  }

  /*  */
  .timesheet__notes .form-control {
    margin-left: 0 !important;
    width: 100%;
  }

  /* update password */
  .updatePass-form {
    margin: 1rem !important;
  }

  /*  */
  .task_list-wrap {
    margin-top: 1rem;
  }

  /*  */
  .card-section .stats-card {
    margin-bottom: 15px;
  }

  .card-section .col-lg-3:last-child .stats-card {
    margin-bottom: 0 !important;
  }

  .navbar-collapse {
    box-shadow: var(--shadow-sm);
    width: 100%;
    background: #fff;
  }

  .header-right {
    align-items: baseline;
  }

  .table-container {
    margin-inline: 0;
  }

  .page-breadcrumb {
    margin: 0px;
  }

  .navbar-header {
    padding: 0;
    margin: 3rem 1rem 0rem;
  }

  .table-container .table-header {
    padding-inline: 1rem;
  }

  .status-in-discussion {
    text-wrap: nowrap;
  }

  /* popup  */
  .popup-footer {
    padding-bottom: 20px;
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
    justify-content: space-between;
  }

  .mdc-dialog__container {

    height: 90vh !important;

  }

  .popup-footer {}

  .tfoot-primary {
    overflow-x: auto !important;
  }

  /* project timesheet  */
  .date-separator {
    transform: rotate(90deg);
  }

  .ts-header {
    flex-direction: column;
    align-items: start !important;
    gap: 10px;

  }

  .ts-total {

    width: 100%;
    color: #64748b;
  }

  .ngx-pagination {

    padding: 16px 0px;

  }

  .toolbar-left {
    flex-direction: column;
    gap: 5px !important;
  }


  /* adminsite view activity  */
  .time-week-ending {
    margin-left: 12px;
  }

  .ts-toolbar {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
  }

  .date-field {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    width: 100%;
    color: #64748b;
  }

  .timesheet-shell {
    padding: 0;
    background: nonw;
  }

  .week-header {

    flex-direction: column;
    align-items: start !important;
    gap: 12px;
  }

  .nt-head,
  .nt-row {
    gap: 8px !important;
    width: 100vw;
    grid-template-columns: 2fr 2fr 3fr 3fr 0fr !important;
  }


  .notion-table {
    overflow: auto !important;
  }

  .timesheet-shell {
    background: #fff !important;
    padding: 0 !important;
    border-radius: 12px;
  }

  /* responsive global css   */
  .add-padd {
    padding: 20px !important;
  }

  .breadcrumb {
    margin-left: 12px;
    ;
  }

  .add-margin {
    margin: 3rem 0;
  }

  .add-margin-md {
    margin: 0 !important;
  }

  .margin-x {
    margin: 0 !important;
  }

  .h-md {
    max-height: 180px;
    overflow-y: auto;
  }
}