.rows {
    display: flex;
    margin: 0; /* No margin between rows */
  }

  .segment {
    width: 10px; /* Width of segments */
    height: 30px; /* Height of segments */
    background-color: #ccc; /* Default grey color */
    margin: 1px; /* Space between segments */
    transition: background-color 0.3s ease; /* Smooth transition */
  }

  .transparent {
    background-color: transparent; /* For empty segments */
  }

  .highlight {
    background-color: #ffcd00; /* Highlighted color */
  }

  /*chart styles*/

  #chartContainer {
    width: auto;
    /* Set to 100% width */
    height: 350px;
    /* Set height to 20% */
    position: relative;
    /* Allow positioning of the canvas */
    overflow: hidden;
    /* Hide any overflow */
}

canvas {
    width: 85vw !important;
    /* Make canvas responsive */
    /* height: 50vh !important; */
    /* Make canvas responsive */
    background-color: white;
    border: 1px solid #ccc;
}

@media (max-width:500px) {
    canvas {
    width: 85vw !important;
    height: auto !important;
    background-color: white;
    border: 1px solid #ccc;
}
}



#timeInput {
    margin: 20px;
    padding: 10px;
    width: 150px;
}

#updateButton {
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100px; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/*display question blocks utils*/
.question-blocks-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to next line */
    gap: 20px; /* Optional: space between blocks */
}

.question-blocks-wrapper.two-blocks {
    justify-content: space-between; /* Adjust alignment for two blocks */
}

.question-contentbox {
    flex: 0 0 calc(50% - 20px); /* Each block takes up 50% of the row minus gap */
    box-sizing: border-box; /* Ensure padding and border are included in total width */
}