@import url(./main.css);

/* Training Plan */
#trainingPlan .subject {
  width: 200px;
  font-size: 40px;
  font-weight: 700;
  margin-right: 32px;
}

#trainingPlan .accordion {
  width: calc(100% - 232px);
}

#trainingPlan .accordion-item {
  border: 0;
}

#trainingPlan .accordion-button {
  height: 58px;
}

#trainingPlan .accordion-button.collapsed {
  border-bottom: 1px solid var(--G30);
}

#trainingPlan .accordion-button:not(.collapsed) {
  background-color: var(--G00);
  border-bottom: 1px dashed var(--G30);
  box-shadow: none;
}

#trainingPlan .accordion-header span {
  font-size: 16px;
  font-weight: 500;
  color: var(--G90);
}
#trainingPlan .accordion-header .month {
  font-size: 16px;
  font-weight: 700;
  color: var(--PrimaryBlue);
  width: 96px;
  margin-right: 12px;
}

#trainingPlan .accordion-body {
  padding: 32px 32px 32px 128px;
}

#trainingPlan .accordion-body .line {
  margin-bottom: 12px;
}

#trainingPlan .accordion-body .line:last-child {
  margin-bottom: 0;
}

#trainingPlan .accordion-body .line > p {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--PrimaryBlue);
  margin-bottom: 8px;
}

#trainingPlan .accordion-body .line > p svg {
  margin-right: 8px;
}

#trainingPlan .accordion-body .line > div {
  padding: 32px;
  background-color: var(--S70);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 1200px) {
  #trainingPlan.content {
    margin-bottom: 84px;
  }
  #trainingPlan .subject {
    width: 100%;
    font-size: 32px;
  }

  #trainingPlan .accordion {
    width: 100%;
  }

  #trainingPlan .accordion-button{
    height: 54px;
    padding: 16px 8px;
  }

  #trainingPlan .accordion-header span {
    font-size: 14px;
  }

  #trainingPlan .accordion-header .month {
    font-size: 14px;
    width: 76px;
    margin-right: 4px;
  }

  #trainingPlan .accordion-body {
    padding: 32px 0;
  }

  #trainingPlan .accordion-body .line > div {
    padding: 24px 32px;
  }
}

/* Training Outcome */
#trainingOutcome .inner > div {
  overflow-y: auto;
}
#trainingOutcome table {
  width: 1440px;
}
#trainingOutcome table tr th {
  background-color: var(--G20);
  font-size: 14px;
  font-weight: 500;
}

#trainingOutcome table tr th,
#trainingOutcome table tr td {
  text-align: center;
  height: 56px;
  vertical-align: middle;
  border-top: 1px solid var(--G30);
  border-bottom: 1px solid var(--G30);
}


#trainingOutcome table tr:nth-child(odd) {
	background-color: #F7F9FC;
}

#trainingOutcome table tr th:nth-child(1),
#trainingOutcome table tr th:nth-child(2),
#trainingOutcome table tr td:nth-child(1),
#trainingOutcome table tr td:nth-child(2) {
  color: var(--S20);
}

@media (max-width:1200px) {
  section.content {
    margin: 0 0 32px 0;
  }

  #trainingOutcome table tr th:nth-child(1),
  #trainingOutcome table tr td:nth-child(1) {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    box-shadow: inset -4px 0 4px -2px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset -4px 0 4px -2px rgba(0,0,0,0.1)
  }
}