main {
  max-width: 1400px;
  margin: auto;
}
.main {
  margin: 3.44rem 10rem 0px 10rem;
}
.tabs {
  border-bottom: 1px solid;
}
.tabs .tab-li {
  padding: 11px 15px 23px 15px;
}
.cards {
  padding: 2rem;
}
.user-info {
  margin-top: 1.25rem;
  padding: 0.5rem 1rem;
  border-right: 1px solid;
}
.profile-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.modal-actions {
  width: 15%;
}

.swim-steps{
  width: 85%;
}
.stage-1 {
  width: 62%;
}

.learn-swim-actions {
  min-width: 3.25rem;
}
.date-color {
  color: var(--date-color) !important;
}
.progress-section {
  width: 38%;
}

.stage-1-heading {
  border-bottom: 1px solid;
}

.my-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 600px) {
  .profile-info {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-top: 1.25rem;
  }
  .user-info {
    border-right: none !important;
    border-bottom: 1px solid !important;
    margin-top: 0rem;
  }
  .stage-1-heading {
    flex-direction: column;
  }
  .coach-profile {
    flex-direction: column;
    gap: 0.75rem;
    border: none !important;
  }
  .coach-profile div {
    padding: 0px !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid;
    padding-bottom: 0.75rem !important;
  }
  .stage-1-progress {
    padding-top: 1.5rem !important;
  }
  .progress-section {
    padding-top: 0rem !important;
  }
}

@media only screen and (max-width: 1050px) {
  .main {
    margin: 0rem;
    margin-top: 1rem;
    padding: 0.5rem;
  }
  .activities,
  .progress-section,
  .stage-1 {
    width: 100% !important;
  }
  .coach-info {
    width: 100% !important;
  }
  .activity-coach-container,
  .stage-1-progress {
    flex-direction: column;
  }
  .progress-section {
    border: none !important;
  }
}
.activity-coach-container {
  display: flex;
}

@media screen and (max-width: 1050px) and (min-width: 600px) {
  .main {
    margin: 2rem 3rem 0px 3rem;
  }
  .profile-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-info .user-info:nth-child(even) {
    border: none;
  }
}
@media screen and (max-width: 1200px) and (min-width: 950px) {
  .main {
    margin: 2rem 4rem 0px 4rem;
  }
}