body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0; /* Reset margin for better alignment with CSS1 */
}

h1 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.frame {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: left;
  width: 75%;
  height: 250px;
  margin: 40px 0 0; /* Add 40px top margin for spacing */
}

p {
    font-size: 1.2em;
    color: #ecf0f1;
}

.time-bar {
    position: relative;
    width: 90%;
    height: 30px;
    background: #34495e;
    margin: 20px auto;
    border: 1px solid #bdc3c7;
}

.time-bar + .time-bar {
    margin-top: 60px;
}

.highlight,
.highlight-next-day {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(46, 204, 113, 0.3);
}

.line {
    position: absolute;
    top: -10px;
    bottom: -50px;
    width: 2px;
}

.local-time {
    background: #FFD580;
    z-index: 10;
    position: relative;
}

.market-time {
    background: #2ecc71;
}

.label {
    position: absolute;
    top: 30px;
    font-size: 0.9em;
    color: #ecf0f1;
    white-space: nowrap;
}

.time-label {
    position: absolute;
    top: 50px;
    font-size: 0.9em;
    color: #ecf0f1;
    white-space: nowrap;
}

.next-day-indicator {
    color: #f1c40f;
    font-size: 0.8em;
    margin-left: 5px;
}

.market-closed-label,
.bist-closed-label {
    position: absolute !important;
    left: 10px !important;
    top: 7px !important;
    transform: none !important;
    color: #FFB347 !important;
}