main .main-content {
  width: 100%;
  margin: 1rem;
}

main .page-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-container {
  width: 80%;
  margin: 0.5rem auto;
}

.progress-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

.progress-line {
  width: 15%;
  height: 2px;
  background-color: #dadada;
  top: 50%;
  transform: translateY(-50%);
}

.progress-step {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  position: relative;
  color: #9c9c9c;
}

.progress-step i {
  color: #e0e0e0;
  font-size: 2rem;
  margin: 0 auto 10px;
}

.progress-bar .progress-line.done {
  width: 15%;
  height: 2px;
  background-color: #fec322;
  top: 50%;
  transform: translateY(-50%);
}

.progress-step.done i {
  color: #fec322;
  font-size: 2rem;
  margin: 0 auto 10px;
}

.main-content .sub-title {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  font-size: 0.8rem;
}

.sub-title .blue-text {
  color: blue;
  font-weight: bold;
}
.sub-title i {
  color: #ff0000;
}

.main-content .section {
  padding-top: 2rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.section .left {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}

.section .tips {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: #fff;
  border: solid 0.5px;
  border-color: #d9d7d8;
  border-radius: 1rem;
  width: 100%;
}

.tips .label {
  font-weight: bold;
  font-size: 1rem;
  padding-bottom: 1rem;
}

.tips .text {
  font-size: 0.8rem;
}

.tips .links {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.tips .link-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin-top: 2rem;
}

.tips .link-card .icon {
  background-color: #f5f5f5;
  border: transparent;
  border-radius: 100%;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
}

.tips .link-card .icon i {
  font-size: 1.2rem;
  color: #ff0000;
}

.tips .link-card .icon img {
  width: 1.2rem;
}

.tips .link-card .link-desc {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: 1rem;
}

.tips .link-card .link-title {
  font-weight: bold;
  font-size: 0.8rem;
}

.tips .link-card .link-text {
  font-size: 0.7rem;
  border-bottom: solid;
  border-color: #ececec;
}

.left .btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
}




.left .continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-top: 3rem;
  width: 75%;
  background-color: rgba(255, 76, 0, 0.26);
  color: #fff;
  border-radius:5px;
}




.left .continue-btn a {
  text-decoration: none;
  color: #fff;
}

.left .continue-btn.ready {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-top: 3rem;
  width: 75%;
  background-color: rgba(255, 76, 0, 1);
  color: #fff;
}

.section .upload {
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding: 1rem;
  background-color: #fff;
  border: solid 0.5px;
  border-color: #d9d7d8;
  border-radius: 1rem;
  width: 70%;
  gap: 2rem;
}

.section .xray-upload {
  display: flex;
  flex-direction: column;
  width: 25%;
}

.xray-upload .label {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.xray-upload .label i {
  font-size: 10px;
  color: #ff0000;
}

.section .smiley-upload {
  display: flex;
  flex-direction: column;
  width: 75%;
}

.smiley-upload .label {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.smiley-upload .label i {
  font-size: 10px;
  color: #ff0000;
}

.upload .label {
  margin-bottom: 10px;
}

.smiley-upload .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}
.xray-upload .cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.3rem;
}

.xray-card,
.upload-mobile,
.smiley-card,
.additional-photos {
    
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 margin-bottom:10px;    
  width: 100%;
  min-height: 12rem;
  background-color: #fff;
  border-radius: 1rem;
  border: solid 0.5px;
  border-color: #c0c0c0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

.cards div.blue {
  background-color: #f3f6ff;
  border: solid 0.5px;
  border-color: #748ffc;
}
.cards div.green {
  background-color: #faffee;
  border: solid 0.5px;
  border-color: #a9e34b;
}
.cards div.yellow {
  background-color: #fff8f0;
  border: solid 0.5px;
  border-color: #ffd8a8;
}

.cards .smiley-card {
  background-color: #f0feff;
  border: solid 0.5px;
  border-color: #bbf2f6;
}

.cards .photo {
  align-items: center;
  justify-content: center;
  display: flex;
}
.cards img {
  width: 100%;
  border-radius: 1rem;
  padding: 0.5rem;
  max-height: 136px;
}

.cards .text {
  font-size: 0.88rem;
  padding: 1rem;
}

.cards .upload-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cards .additional-photos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-mobile .mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background: transparent;
}

.additional-photos .file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background: transparent;
}

.upload-mobile .mobile-icon {
  padding: 0.5rem;
  height: 3rem;
  width: 3rem;
  border-radius: 1rem;
  background-color: #007cd2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-mobile .mobile-icon i {
  font-size: 1.3rem;
  color: #fff;
}

.upload-mobile .label-mobile {
  font-size: 0.88rem;
}

.additional-photos .label-file {
  font-size: 0.88rem;
}

.upload-mobile .text {
  font-size: 0.65rem;
  text-wrap: pretty;
  width: 80%;
  padding: 0;
  margin: 0;
}

.cards .additional-photos .file-btn {
  background: transparent;
  width: 80%;
  border: dashed;
  border-radius: 1rem;
  padding: 0.5rem;
}

.additional-photos .file-icon {
  padding: 0.5rem;
  height: 3rem;
  width: 3rem;
  border-radius: 1rem;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.additional-photos .file-icon i {
  font-size: 1.3rem;
  color: #000;
}

.additional-photos .file-btn .text-file {
  font-size: 0.5rem;
  text-wrap: pretty;
  width: 100%;
  padding: 0;
  margin: 0;
}

.stored-data {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}


tbody {
  display: block; /* Enable block formatting context */
  overflow-y: auto; /* Enable vertical scrolling */
  max-height: 300px; /* Set maximum height */
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.main-content .stored-data {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 4rem;
  background-color: #fff;
  border-radius: 1rem;
  border: transparent;
  font-size: 0.8rem;
}

.stored-data table th {
  background-color: #eaeeff;
  font-weight: normal;
}

.stored-data table th:first-child {
  border-top-left-radius: 1rem;
}

.stored-data table th:last-child {
  border-top-right-radius: 1rem;
}

.stored-data table .download-btn {
  background-color: transparent;
}

/* MEDIA QUERY */
@media screen and (max-width: 768px) {
  main .main-content {
    width: 100%;
    margin: 0rem;
    padding: 1rem;
  }

  main .page-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .progress-container {
    width: 80%;
    margin: 2.4rem auto;
  }

  .progress-container .progress-bar {
    font-size: 0.7rem;
    text-wrap: pretty;
  }

  .progress-step i {
    color: #e0e0e0;
    font-size: 1rem;
    margin: 0 auto 10px;
  }

  .progress-step.done i {
    color: #fec322;
    font-size: 1rem;
    margin: 0 auto 10px;
  }

  .progress-line {
    display: none;
  }

  .main-content .sub-title {
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  .main-content .section {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .section .left {
    width: 100%;
  }

  .section .upload {
    flex-direction: column;
    width: 100%;
  }

  .section .xray-upload {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .section .smiley-upload {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .smiley-upload .cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
}