<div class="placeholderdiv" role="region" aria-label="Timeline container">
<div class="timeline" role="list">
	
	<div class="activity-main circle-base" role="listitem" aria-label="Main timeline event">
		
		<div class="date-time">
			
			<span class="date" aria-label="Date">02/02/2018</span>
			<span class="time" aria-label="Time">04:25pm</span>
			
		</div>
		
		<div class="circle-big" aria-hidden="true"></div>
		
		<div class="info" role="group" aria-label="Event information">
			
			<div class="status" role="heading" aria-level="2">
				En route to Pick Up
			</div>
	
			<div class="address" role="contentinfo">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status" aria-label="Status comment">
				This a simple comment about how this specific status
			</div>
			
			<div class="reportedby" aria-label="Reporter information">
				Reported by Luis Vargas  at 2:23pm <span aria-label="Source information">(source: Someone Else)</span>
			</div>
			
		</div><!-- end of info -->
		
	</div> <!-- end of activity-main -->
	
	
	<div class="activity-secondary circle-base" role="listitem" aria-label="Secondary timeline event">
		
		<div class="date-time">
			
			<span class="date" aria-label="Date">02/02/2018</span>
			<span class="time" aria-label="Time">04:25 pm</span>
			
		</div>
		
		<div class="circle-small" aria-hidden="true"></div>
		
		<div class="info" role="group" aria-label="Event information">
			
			<div class="address" role="contentinfo">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status" aria-label="Status comment">
				This a simple comment about how this specific status
			</div>
			
		</div><!-- end of info -->
		
	</div> <!-- end of activity-main -->
	
	<div class="activity-main circle-base" role="listitem" aria-label="Main timeline event">
		
		<div class="date-time">
			
			<span class="date" aria-label="Date">02/02/2018</span>
			<span class="time" aria-label="Time">04:25pm</span>
			
		</div>
		
		<div class="circle-big" aria-hidden="true"></div>
		
		<div class="info" role="group" aria-label="Event information">
			
			<div class="status" role="heading" aria-level="2">
				En route to Pick Up
			</div>
	
			<div class="address" role="contentinfo">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status" aria-label="Status comment">
				This a simple comment about how this specific status
			</div>
			
			<div class="reportedby" aria-label="Reporter information">
				Reported by Luis Vargas  at 2:23pm <span aria-label="Source information">(source: Someone Else)</span>
			</div>
			
		</div><!-- end of info -->
		
	</div> <!-- end of activity-main -->
	
	
	<div class="activity-secondary circle-base" role="listitem" aria-label="Secondary timeline event">
		
		<div class="date-time">
			
			<span class="date" aria-label="Date">02/02/2018</span>
			<span class="time" aria-label="Time">04:25 pm</span>
			
		</div>
		
		<div class="circle-small" aria-hidden="true"></div>
		
		<div class="info" role="group" aria-label="Event information">
			
			<div class="address" role="contentinfo">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div>
				
			<div class="comment-status" aria-label="Status comment">
				This a simple comment about how this specific status
			</div>
						<div class="reportedby" aria-label="Reporter information">
				Reported by Luis Vargas  at 2:23pm <span aria-label="Source information">(source: Someone Else)</span>
			</div>
			
		</div><!-- end of info -->
		
</div>
	<div class="activity-secondary circle-base" role="listitem" aria-label="Secondary timeline event">
		
		<div class="date-time">
			
			<span class="date" aria-label="Date">02/02/2018</span>
			<span class="time" aria-label="Time">04:25 pm</span>
			
		</div>
		
		<div class="circle-small" aria-hidden="true"></div>
		
		<div class="info" role="group" aria-label="Event information">
			
<!-- 			<div class="address">
				42 Snowbird Haven Mobile Home Park, Hallandale Beach, FL
			</div> -->
				
			<div class="comment-status" aria-label="Status comment">
				This a simple comment about how this specific status
			</div>
			
		</div><!-- end of info -->
		
	</div> <!-- end of activity-secondary -->
	
	</div>
	
	
		
</div><!-- end of timeline -->
	
</div> <!-- end of placehholder div -->

// Variables
$border-color: #cacaca;
$hover-color: #ddf8ff;
$text-primary: #333;
$text-secondary: #6b6b6b;
$spacing-base: 1rem;
$transition-duration: 0.3s;

// Mixins for reusable styles
@mixin hardware-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@mixin circle-base {
  border-radius: 50%;
  position: absolute;
  background-color: white;
  will-change: background-color;
  transition: background-color $transition-duration ease;
  @include hardware-accelerate;
}

@mixin datetime-base {
  position: absolute;
  left: -210px;
  opacity: 0.4;
  will-change: opacity;
  transition: opacity $transition-duration ease;
  @include hardware-accelerate;
}

@mixin focus-visible {
  &:focus-visible {
    outline: 2px solid $text-primary;
    outline-offset: 2px;
  }
}

// Base styles
.placeholderdiv {
  margin: 0 auto;
  width: 516px;
  margin-top: $spacing-base;
  margin-left: 42%;
  
  @media screen and (max-width: 768px) {
    width: 90%;
    margin-left: $spacing-base;
  }
}

.timeline {
  border-left: 3px solid $border-color;
  margin: 0 $spacing-base;
  padding: 0 $spacing-base;
  position: relative;
  height: auto;
  
  // Improved focus management for keyboard navigation
  &:focus {
    @include focus-visible;
  }
}

// Circle base styles
.circle-base {
  &:hover {
    .circle-big, .circle-small {
      background: $hover-color;
    }
    
    .date-time {
      opacity: 0.8;
    }
  }
  
  // Improved keyboard focus styles
  &:focus-within {
    .circle-big, .circle-small {
      background: $hover-color;
    }
    
    .date-time {
      opacity: 0.8;
    }
  }
}

// Activity main styles
.activity-main {
  margin-left: 25px;
  margin-bottom: 30px;
  margin-top: 50px;
  position: relative;
  
  .date-time {
    @include datetime-base;
    
    .date {
      display: block;
      font-size: 1.6rem;
    }
    
    .time {
      display: block;
      font-size: 2rem;
      margin: 0 auto;
      font-weight: bold;
    }
  }
  
  .circle-big {
    @include circle-base;
    border: 4px solid $border-color;
    width: 50px;
    height: 50px;
    left: -71px;
  }
}

// Activity secondary styles
.activity-secondary {
  margin-left: 25px;
  margin-bottom: 30px;
  position: relative;
  
  .date-time {
    @include datetime-base;
    left: -160px;
    
    .date {
      display: block;
      font-size: 1.05rem;
    }
    
    .time {
      display: block;
      font-size: 1.2rem;
      margin: 0 auto;
      font-weight: bold;
	
    }
  }
  
  .circle-small {
    @include circle-base;
    border: 1px solid $border-color;
    width: 30px;
    height: 30px;
    left: -58px;
  }
}

// Info styles
.info {
  .status {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  .address {
    color: $text-primary;
  }
  
  .comment-status {
    color: $text-secondary;
    font-style: italic;
    margin-top: 5px;
  }
  
  .reportedby {
    color: $text-secondary;
    font-weight: 100;
    font-size: 0.8rem;
    margin-top: 5px;
    margin-left: 0px;
  }
}

// Accessibility: Reduced motion
@media (prefers-reduced-motion: reduce) {
  .circle-base,
  .circle-big,
  .circle-small,
  .date-time {
    transition: none;
    animation: none;
  }
}

// High contrast mode support
@media (forced-colors: active) {
  .timeline {
    border-left-color: CanvasText;
  }
  
  .circle-big,
  .circle-small {
    border-color: CanvasText;
    background-color: Canvas;
  }
}

// Print styles
@media print {
  .timeline {
    border-left: 2px solid #000;
  }
  
  .circle-base {
    &:hover {
      .circle-big,
      .circle-small {
        background: none;
      }
    }
  }
  
  .date-time {
    opacity: 1 !important;
  }
}

// Responsive styles
@media screen and (max-width: 768px) {
  .date-time {
    position: relative !important;
    left: 0 !important;
    margin-bottom: $spacing-base;
  }
  
  .activity-main,
  .activity-secondary {
    margin-left: $spacing-base;
  }
}

// Better touch targets for mobile
@media (hover: none) and (pointer: coarse) {
  .circle-big,
  .circle-small {
    min-width: 44px;
    min-height: 44px;
  }
}


// .placeholderdiv
//     margin 0 auto
//     width 516px
//     margin-top 15px
//     margin-left: 42%

// .timeline
//     border-left 3px solid #cacaca
//     margin 0 10px
//     padding 0 10px
//     position relative
//     height auto
//     margin 0 auto

//     .activity-main
//         // background red
//         margin-left 25px
//         margin-bottom 30px
//         margin-top 50px

//         &.circle-base
//             &:hover
//                 .circle-big    
//                     background: #ddf8ff
//                     transition: background ease 0.3s

//                 .date-time
//                     opacity: 0.8
//                     transition: opacity ease 0.3s

//         .date-time
//             position absolute
//             left -170px
//             opacity: 0.4
//             transition: opacity ease 0.3s

//             .date
//                 display block
//                 font-size 1.6rem

//             .time
//                 display block
//                 font-size 2rem
//                 margin 0 auto
//                 font-weight bold

//         .circle-big        
//             border 4px solid #cacaca
//             border-radius 50%
//             width 50px
//             height 50px
//             position absolute
//             left -31px
//             background-color white

//         .info
//             .status
//                 font-size 1.5rem
//                 font-weight bold

//             .address
//                 color #333

//             .comment-status
//                 color #6b6b6b
//                 font-style italic
//                 margin-top 5px

//     .reportedby
//         color #464646
//         font-style light
//         font-weight 100
//         font-size 0.8rem
//         margin-top 5px
//         margin-left 0px
//     .activity-secondary            
//         margin-left 25px
//         margin-bottom 30px
//         position relative
//         &.circle-base
//             &:hover
//                 .circle-small
//                     background: #ddf8ff
//                     transition: background ease 0.3s

//                 .date-time
//                     opacity: 0.8
//                     transition: opacity ease 0.3s

//         .date-time
//             position absolute
//             left -160px
//             opacity: 0.4
//             transition: opacity ease 0.3s

//             .date
//                 display block
//                 font-size 1.05rem
//             .time
//                 display block
//                 font-size 1.2rem
//                 margin 0 auto
//                 font-weight bold

//         .circle-small        
//             border 1px solid #cacaca
//             border-radius 50%
//             width 30px
//             height 30px
//             position absolute
//             left -53px
//             background-color white