html,body {
   background: rgb(212, 196, 248);
   height: 100%;
   margin:0px;
}


body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Tahoma, sans-serif;          
}

div#menubar {
    height: 47px;
    flex: none;
}

div#mainArea {
    flex-grow: 1;
    display: flex;
    position: fixed;
    top: 48px;
    height: calc(100% - 91px);
}

.leftColumn {
    width: 300px;
    background-color: #eee;
    margin-left: 4px;
    padding: 3px 5px 3px 5px;
}

div#TopicList {
    height: 100%;
}

.actionButton{
    float: right;
}

div#statusBar {
    height: 40px;
    flex: none;
    background: #fff;
    position: fixed;
    width: 100%;
    top: calc(100% - 40px);
}


.column{
   height: 100%;
}

.statusbar {
  overflow: hidden;
  background-color: #f8f8f8;
  width: 100%;
}

.slidecontainer{
   margin-left: 10px; 
}

.tableContainer{
  overflow-y: auto;
}


.show{
  display:inline;
}

.hide{
  display: none;
}


.line-container {
  display: flex;
  align-items: center; /* Vertically centers the items */
  width: 100%; /* Adjust as needed */
}
.line-column {
  margin: 0px 4px 2px 4px; /* Adds some space above and below */
  float: left;
  padding: 0px 2px;
}

.line-column-left,  .line-column-right{
  width: calc((100% - var(--textWidth))/2);
}

.line-column-middle{
  width: var(var(--textWidth));
}

.line {
  flex-grow: 1; /* Makes the lines take up available space */
  height: 1px; /* Thickness of the line */
  background-color: #000; /* Color of the line */
  margin: 5px 0px;
}

.text-middle {
  padding: 0 2px; /* Adds space between text and lines */
  white-space: nowrap; /* Prevents text from wrapping */
  font-size: 18px; /* Adjust font size as needed */
  color: #555; /* Color of the text */
  margin-top: 0px;
  margin-bottom: 0px;
}

.line-container:after {
  content: "";
  display: table;
  clear: both;
}

.past-paper-Image{
  object-fit: contain;
  width: 400px;
  height: 400px;
}