.timeline {
  position: relative;
  padding-bottom: 3rem;
}

.timeline:before {
  content: "";
  width: 2px;
  margin: 15px 0 15px 10px;
  height: calc(100% - 30px);
  margin-top: 15px;
  background-color: #e9ebf3;
  position: absolute;
  top: 0;
}

.timeline__group {
  position: relative;
}

.timeline__group:first-child {
  padding-top: 0;
}

.timeline__group:not(:first-of-type) {
  margin-top: 0rem;
}

.timeline__year {
  padding: 0.5rem 1.5rem;
  color: #fff;
  background-color: #2196f3;
  position: absolute;
  left: 0;
  top: 0;
}

.timeline__box {
  position: relative;
}

.timeline__box:first-of-type {
  padding-top: 0;
}

.timeline__box:not(:last-of-type) {
  margin-bottom: 30px;
}

.timeline__box:before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #2196f3;
  position: absolute;
  left: 0;
  z-index: -1;
}
.timeline__box a {
  text-decoration: underline;
  color: #2096f3;
}

.timeline__date {
  min-width: 65px;
  position: absolute;
  left: -2px;
  box-sizing: border-box;
  padding: 0.5rem 0px;
  width: 50px;
  text-align: center;
  border-radius: 4px;
  background-color: #0d6efd;
  color: #fff;
}

.timeline__day {
  font-size: 2rem;
  font-weight: 700;
  display: block;
}

.timeline__month {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.timeline__post {
  padding: 1.5rem 2rem;
  border-radius: 4px;
  border-left: 3px solid #0d6efd;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.09);
  background-color: #fff;
}

@media screen and (min-width: 641px) {
  .timeline:before {
    left: 30px;
  }

  .timeline__group {
    padding-top: 40px;
  }

  .timeline__box {
    padding-left: 80px;
  }

  .timeline__box:before {
    top: 50%;
    transform: translateY(-50%);
  }

  .timeline__date {
    top: 50%;
    margin-top: -13px;
  }
}

@media screen and (max-width: 640px) {
  .timeline:before {
    left: 0;
  }

  .timeline__group {
    padding-top: 40px;
  }

  .timeline__box {
    padding-left: 20px;
    padding-top: 70px;
  }

  .timeline__box:before {
    top: 90px;
  }

  .timeline__date {
    top: 0;
  }
}

.timeline {
  --timelineMainColor: #4557bb;
}

.timeline h5 {
  font-size: 1.2em;
  font-weight: 600;
}

.timelineMilestone .page {
  margin-top: 100px;
}

.page {
  justify-content: space-around;
}

.page__demo {
  flex-grow: 1;
}

.main-container {
  max-width: 960px;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.page__container {
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 800px;
}

@media screen and (min-width: 361px) {
  .footer__container {
    display: flex;
    justify-content: space-between;
  }
}

/*  Compact view below  */

.flex-parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  width: 100%;
  height: 100%;
  padding: 0 16px;
}

.compact .input-flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 308px;
  height: 55px;
  max-width: 1000px;
  position: relative;
  z-index: 0;
  margin-left: 10px;
}

.compact .input {
  width: 20px;
  height: 20px;
  background-color: #2196f3;
  position: relative;
  border-radius: 50%;
}

.compact .input:hover {
  cursor: pointer;
}

.compact .input::before,
.compact .input::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  background-color: #2196f3;
  width: 4vw;
  height: 5px;
  max-width: 50px;
}

.compact .input::before {
  left: calc(-4vw + 10px);
}

.compact .input::after {
  right: calc(-4vw + 10px);
}

.compact .input.active {
  background-color: #2196f3;
}

.compact .input.active::before {
  background-color: #2196f3;
}

.compact .input.active::after {
  background-color: #e6e6e6;
}

.compact .input.active span {
  font-weight: 700;
}

.compact .input.active span::before {
  font-size: 13px;
}

.compact .input.active span::after {
  font-size: 15px;
}

.compact .input.active ~ .input,
.compact .input.active ~ .input::before,
.compact .input.active ~ .input::after {
  background-color: #e6e6e6;
}

.compact .input span {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.compact .input span::before,
.compact .input span::after {
  visibility: visible;
  position: absolute;
  left: 50%;
}

.compact .input span::after {
  content: attr(data-year);
  top: 25px;
  transform: translateX(-50%);
  font-size: 14px;
}

.compact .input span::before {
  content: attr(data-info);
  top: -65px;
  width: 70px;
  transform: translateX(-5px) rotateZ(-45deg);
  font-size: 12px;
  text-indent: -10px;
}

@media (min-width: 1250px) {
  .compact .input::before {
    left: -40px;
  }

  .compact .input::after {
    right: -40px;
  }
}

@media (max-width: 850px) {
  .compact .input {
    width: 17px;
    height: 17px;
  }

  .compact .input::before,
  .input::after {
    height: 3px;
  }

  .compact .input::before {
    left: calc(-4vw + 8.5px);
  }

  .compact .input::after {
    right: calc(-4vw + 8.5px);
  }
}

@media (max-width: 600px) {
  .flex-parent {
    justify-content: initial;
  }

  .input-flex-container {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-top: 15vh;
  }

  .compact .input {
    width: 60px;
    height: 60px;
    margin: 0 10px 50px;
    background-color: #aeb6bf;
  }

  .compact .input::before,
  .compact .input::after {
    content: none;
  }

  .compact .input span {
    width: 100%;
    height: 100%;
    display: block;
  }

  .compact .input span::before {
    top: calc(100% + 5px);
    transform: translateX(-50%);
    text-indent: 0;
    text-align: center;
  }

  .compact .input span::after {
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ecf0f1;
  }
}

/*  Editor below  */

.previewMilestones {
  height: 100px;
  border: 3px dotted #e8e8e8;
  margin-bottom: 20px;
}

.milestones label {
  font-size: 14px;
}

.milestones .actionBtn {
  margin-top: 2px;
}

.milestones .descriptionArea {
  display: block;
  width: 100%;
  border: 1px solid #dcddde;
  border-radius: 2px;
  background: #fff;
  height: 80px;
  max-width: 100%;
  resize: none;
  padding: 6px 10px;
}

.milestones .removeMilestone {
  color: #f3564a;
  font-size: 20px;
  cursor: pointer;
}

.milestones .titleArea {
  width: 240px;
  background: transparent;
  outline: none;
  border: none;
  padding: 3px;
  border-bottom: 1px solid #dcddde;
}
.milestone-inner-status,
.milestones .status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

.complete .milestone-inner-status,
.milestones .status.complete {
  background: #0050a0;
}

.planned .milestone-inner-status,
.milestones .status.planned {
  background: #d4d4d4;
  color: #333;
}
.pending .milestone-inner-status,
.live .milestone-inner-status,
.milestones .status.pending,
.milestones .status.live {
  background: #2196f3;
}

.milestones .milestoneIdentifier {
  display: inline-block;
  font-size: 16px;
  /* float: right; */
  vertical-align: middle;
  margin: 0 18px;
  color: #5d5d5d;
}

.iconIdentifierCont > span {
  vertical-align: middle;
}

.changeStatus {
  padding: 4px 12px;
  cursor: pointer;
}

.timeline__date.pending,
.timeline__box.pending:before {
  background-color: #2196f3;
}

.timeline__date.planned,
.timeline__box.planned:before {
  background-color: #d4d4d4;
  color: #333;
}

.timeline__date.complete,
.timeline__box.complete:before {
  background-color: #007b33;
}

.timeline__post.pending {
  border-left: 3px solid #2196f3;
}

.timeline__post.planned {
  border-left: 3px solid #d4d4d4;
}

.timeline__post.complete {
  border-left: 3px solid #007b33;
}

.page__container .timeline:before {
  background-color: #d4d4d4;
}

#projectSidebar .timeline__date,
#projectSidebarArrangementList .timeline__date {
  display: none;
}

#projectSidebar .milestone-inner-status,
#projectSidebarArrangementList .milestone-inner-status {
  display: inline-block !important;
}

#projectSidebarArrangementList .page__container .timeline:before {
}

#projectSidebar .timeline__box,
#projectSidebarArrangementList .timeline__box {
  padding-left: 0;
}

#projectSidebar .timeline__group:not(:first-child),
#projectSidebarArrangementList .timeline__group {
  padding-top: 20px;
}

#projectSidebar .page__container,
#projectSidebarArrangementList .page__container {
  padding: 0;
}

#projectSidebar .timeline__post,
#projectSidebarArrangementList .timeline__post {
  padding: 0.75em 1em 0.5em;
}

.milestones .status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

/* ==========================================================================
   Milestone editor cards (project timeline modal)
   --------------------------------------------------------------------------
   Self-contained card look so the editor (_MilestonePartialUI.cshtml) renders
   correctly on EVERY consumer: the BS5 modal (MilestoneModalBS5.cshtml on
   ProjectBS5.cshtml) AND the legacy BS3 modals (MilestoneModal.cshtml on
   Project.cshtml / ProjectMeetingSeriesAdmin.cshtml). The legacy pages do not
   have Bootstrap's .card classes and ProjectMeetingSeriesAdmin.cshtml never
   loads project-admin-bs5.css, so relying on .card / the #milestone-modal
   taming block leaves the editor unstyled there. Milestone.css is loaded by the
   partial itself on all consumers, so defining the look here fixes all of them.

   Values mirror the BS5 render (Metronic --bs-card-* + the #milestone-modal
   block in project-admin-bs5.css) so the BS5 look is unchanged:
     card border 1px #E4E6EF, radius 0.625rem, body/spacer 1rem, cap 0.75rem 1rem.
   Scoped to .milestones .milestoneItem so nothing can leak to the public
   timeline partial (_MilestonePartialItem.cshtml uses only .timeline* classes).
   ========================================================================== */
.milestones .milestoneItem {
  position: relative;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #e4e6ef;
  border-radius: 0.625rem;
}

.milestones .milestoneItem .card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border-bottom: 1px solid #e4e6ef;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
}

.milestones .milestoneItem .card-body {
  padding: 1rem;
}

/* Title input grows to fill the header row (overrides the legacy fixed-width,
   borderless .milestones .titleArea rule above, which BS3 pages would apply). */
.milestones .milestoneItem .titleArea {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #e4e6ef;
  border-radius: 0.475rem;
  padding: 0.5rem 0.75rem;
}

.milestones .milestoneItem .titleArea:focus {
  outline: none;
  border-color: #0395ff;
  box-shadow: 0 0 0 0.2rem rgba(3, 149, 255, 0.15);
}

.milestones .milestoneItem .grabber {
  cursor: grab;
  padding: 0 0.25rem;
  font-size: 1rem;
  flex-shrink: 0;
}

.milestones .milestoneItem .grabber:active {
  cursor: grabbing;
}

/* Status trigger is now a <button>; strip native button chrome so the .status
   pill styling (the colored state pill above) still reads correctly. */
.milestones .milestoneItem .status {
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  line-height: 1.2;
}

/* Status menu items are now <button>s; on legacy BS3 pages .dropdown-item is not
   styled, so reset them to full-width, left-aligned, chrome-free menu rows. */
.milestones .milestoneItem .dropdown-menu .changeStatus {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
}

/* Trash control is now a <button class="btn btn-link">; keep it looking like the
   original red icon (the .milestones .removeMilestone color/size rule applies). */
.milestones .milestoneItem .removeMilestone {
  flex-shrink: 0;
  line-height: 1;
  text-decoration: none;
}