body {
    background-color: #ddd; 
    margin: 3rem;
}
#wrapper{
  padding-left: 120px;
}
.mainBoxes {
    float: left;
    width: auto;
    min-width: 350px;
    min-height: 60px;
    background: white;
    border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
    box-shadow: 10px 10px rgba(0,0,0,.15);
    margin: 20px;
    padding: 10px;
    
  }
.FloatLeft{
  float: left;
}


a:hover {
    cursor: pointer;
    background-color: yellow;
 }
 
 #BooksInfo dl {
    display: flex;
    width: 250px;
    flex-flow: row wrap;
    border: solid #333;
    border-width: 1px 1px 0 0;
  }
  #BooksInfo dt {
    flex-basis: 50%;
    padding: 16px 4px;
    background: #333;
    text-align: left;
    color: #fff;
  }
  #BooksInfo dd {
    display: table-cell;
    flex-basis: 40%;
    flex-grow: 1;
    margin: 0;
    padding: 6px 4px;
    font-size: 30px;
    text-align: center;
    vertical-align: bottom;
    border-bottom: 1px solid #333;
  }
  #BookBox dl {
    display: flex;
    /*width: 250px;*/
    flex-flow: row wrap;
    border: solid #333;
    border-width: 1px 1px 0 0;
  }
  #BookBox dt {
    flex-basis: 20%;
    padding: 16px 4px;
    background: #333;
    text-align: left;
    color: #fff;
  }
  #BookBox dd {
    display: table-cell;
    flex-basis: 70%;
    flex-grow: 1;
    margin: 0;
    padding: 6px 4px;
    /*font-size: 30px;*/
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid #333;
  }
  /* Fancy table styling for readers*/
  #ReaderBooks {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  #ReaderBooks td, #ReaderBooks th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #ReaderBooks tr:nth-child(even){background-color: #f2f2f2;}
  
  #ReaderBooks tr:hover {background-color: #ddd;}
  
  #ReaderBooks th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #553c9a;
    color: white;
  }
  /* End */

  /*Book details and buttons*/
  .container {
    display: grid; 
    grid-template-columns: 2.8fr 0.7fr; 
    grid-template-rows: 9fr 1.3fr; 
    gap: 0px 0px; 
    grid-template-areas: 
      "Details Image ."
      "Buttons Image ."
      ". . ."; 
  }
  .Details { grid-area: Details; }
  .Image { grid-area: Image; }
  .Buttons { grid-area: Buttons; }

  /* End */

  .ReaderDiv { display:none;}

  #hidden {
    display:none;
  }

  .hidden {
    display:none;
  }

  .cBooktable td {
    padding: 10px;
    font-size: 12px;
  }
  /* Cat table layout */
  .CBookTable {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 800px;

  }
  #cBooksTable {
    display: block;
    width: 800px;
    height: 500px;
    overflow-y: scroll;
  }
  .CBookTable td, .CBookTable th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  .CBookTable tr:nth-child(even){background-color: #f2f2f2;}
  
  .CBookTable tr:hover {
    background-color: #ddd;
  }
  
  .CBookTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #553c9a;
    color: white;
    position: sticky;
    top: 0;
  }
  /* END */

  /* Side options bar*/
    .left-options{
      position: fixed;
      top: 50%;
      transform: translate(0px, -50%);
      left: 0;
      max-width: 125px;
    }
    .optionButton{
      align-items: center;
      appearance: none;
      background-color: #3EB2FD;
      background-image: linear-gradient(1deg, #8170b1, #553c9a 99%);
      background-size: calc(100% + 20px) calc(100% + 20px);
      border-radius: 100px;
      border-width: 0;
      box-shadow: none;
      box-sizing: border-box;
      color: #FFFFFF;
      cursor: pointer;
      display: inline-flex;
      font-family: CircularStd,sans-serif;
      font-size: 1rem;
      height: auto;
      justify-content: center;
      line-height: 1.5;
      padding: 6px 20px;
      position: relative;
      text-align: center;
      text-decoration: none;
      transition: background-color .2s,background-position .2s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      vertical-align: top;
      white-space: nowrap;
      width: 100px;
      margin-bottom: 20px;
    }
  /* END */