.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.athlete-dew {
  .athlete {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    @media (max-width: 668px) {
      flex-direction: column;
    }
    .img {
      width: 300px;
      padding: 10px;
      border: solid 2px #eeeeee5f;
      img {
        width: 100%;
        box-shadow: 1px 1px 10px 1px #011f1f78;
        border-radius: 10px;
      }
    }
    .athlete-details {
      margin-left: 50px;
      padding: 20px;
      @media (max-width: 768px) {
        margin: 0;
      }
      span {
        display: flex;
        align-items: flex-start;
        h2 {
          width: 200px;
          text-transform: capitalize;
          font-size: 16px;
          font-weight: bold;
          @media (max-width: 768px) {
            width: 150px;
          }
          @media (max-width: 368px) {
            width: 100px;
            font-size: 13px;
          }
        }
        h3 {
          width: 200px;
          text-transform: uppercase;
          font-size: 16px;
          font-weight: bold;
          margin-left: 10px;
          @media (max-width: 768px) {
            width: 150px;
          }
          @media (max-width: 368px) {
            width: 100px;
            font-size: 13px;
          }
        }
      }
      hr {
        margin: 5px;
      }
    }
  }
}

// ----------------------------
// update athletes
// ----------------------------
.school {
  .modalbody {
    .form-ctrl {
      width: 100%;
      .grid2 {
        display: flex;
        align-items: flex-start;
        @media (max-width: 600px) {
          flex-direction: column;
        }
        .left {
          width: 50%;

          @media (max-width: 600px) {
            width: 100%;
          }
        }
      }
    }
  }
}