.join_container {
  width: 100%;
  height: fit-content;
  display: flex;
  padding: 10px 20px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 13px;
}

.post_title {
  font-size: 18px;
  padding: 20px;
  padding-bottom: 5px;
}

.container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.editor_header {
  width: 100%;
  height: fit-content;
  min-height: 55px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}

.editor_status {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;

  >p {
    font-size: 13px;
    font-weight: 300;

    >span {
      font-weight: 600;
    }
  }
}

.button {
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 30px;
  background-color: #3d3d3d !important;
  border: 1.5px solid #2f2f2f !important;
  padding: 0 10px !important;
  transition: all .2s ease !important;

  &:hover {
    background-color: #eeeeee !important;
    color: #2f2f2f !important;
  }

  &:disabled {
    opacity: .5;
    pointer-events: not-allowed;
  }

  &.blue {
    background: #e5effd !important;
    color: #204b8c !important;
    border: 1px solid #204b8c48 !important;
    padding: 10px 25px !important;

    &:hover {
      background: linear-gradient(135deg, #a7c7e7, #dce9fb) !important;
      transform: scale(1.07) !important;
    }
  }

  &.red {
    background: #fde4eb !important;
    color: #8c2f47 !important;
    border: 1px solid #8c2f4748 !important;
    padding: 10px 25px !important;

    &:hover {
      background: linear-gradient(135deg, #f8c8dc, #fddce7) !important;
      transform: scale(1.07) !important;
    }
  }
}

.reverse {
  background-color: #eeeeee !important;
  color: #000a1e !important;

  &:hover {
    background-color: #000a1e !important;
    color: #eeeeee !important;
  }
}

.danger {
  background-color: #552d2d !important;
  border: 1.5px solid #2c0101 !important;

  &:hover {
    background-color: #e8d6d6 !important;
  }
}

.danger_reverse {
  border: 1.5px solid #2c0101 !important;
  background-color: #e8d6d6 !important;
  color: #000a1e !important;

  &:hover {
    background-color: #552d2d !important;
    color: #eeeeee !important;
  }
}

.action {
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.dots {
  width: 30px;
  height: 30px;
  border-radius: 50px;
}

.editor_content {
  width: 100%;
  height: fit-content;
  display: flex;
}

.editor_body {
  width: 100%;
  height: fit-content;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ddd;
}

.aside {
  width: 200px;
  min-width: 200px;
  height: 100%;
  padding: 15px;
  border-right: none;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 15px;
}

.editor_post {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
}

.input {
  background-color: #fff !important;
  border-bottom: none !important;
  border: 1px solid #ddd !important;
  border-radius: 5px;
  box-shadow: 0 2px 2px -1px #0000001a;

  &:has(input:focus, textarea:focus) {
    border: 1px solid #509ccf !important;
    box-shadow: 0 2px 12px -1px #509ccf4b;
  }

  &:has(input:disabled) {
    background-color: #f2f2f2 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    color: #7c7c7c !important;
  }
}

.label {
  font-size: 13px !important;
  font-weight: 500;
}

.editor_tab_container {
  height: fit-content;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.editor_tab {
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
  font-size: 14px;
  display: flex;
  gap: 15px;
  overflow: hidden;
}

.tab {
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
}

.underline {
  position: absolute;
  bottom: -11px;
  height: 4px;
  width: 100%;
  background-color: #5d5d5d;
}

.editor_menu_content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
}

.content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.content_header {
  font-size: 13px;
  font-weight: 500;
  margin: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  >span {
    font-weight: 600;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}

.form_jadwal_pelatihan {
  display: flex;
  background: #bebebe21;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #d2d2d2;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;

  >div {
    flex: 1 0 30%;
    /* tiap item lebar ±30% */
    box-sizing: border-box;
    text-align: center;
    padding: 5px;
  }

}

.jadwal_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0 auto;

  >div {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #d2d2d2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr auto;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    >div {
      align-items: center;
      display: inline-flex;
      gap: 5px;
    }

    >div:nth-child(1) {
      font-size: 14px;
      font-weight: 600;
      color: #1a365d;
    }

    >div:last-child {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
  }

  >div:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  }

  svg {
    font-size: 22px;
  }

}