body{
  font-family: Arial, Helvetica, sans-serif;
}

#page {
  counter-reset: heading;
  max-width: 900px;
  margin: 0 auto;
}
#menu, #searchField{
  max-width: 900px;
  margin: 0 auto;
}

#menu .toc{
  max-width:400px;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
}

#menu .toc li{
  max-width:400px;
}

.TabList {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 300px;
    border: 1px solid #ccc;
    position:relative;
  }
  
  .TabList li {
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    background-color: #f9f9f9;
    position: relative;
  }

  .TabList .selected {
    font-weight: bold;
  }
  
  ul.TabList {
    list-style: none; /* Remove bullets for ul */
    border: 0px;
  }
  
  ol.TabList {
    list-style: decimal inside; /* Keep numbers inside for ol */
    border: 0px;
  }

  .StepByStepExplaination, .ScreenshotExplaination{
    display: table;
    width:90%;
    max-width: 900px;
    margin-left: 5%;
    margin-top:15px;
    margin-bottom:15px;
  }
  
  .StepByStepExplaination .Image, .ScreenshotExplaination .Image{
    display: table-cell;
    vertical-align: top;
    border: 1px solid #000000;
    position:relative;
  }
  .StepByStepExplaination .Image img, .ScreenshotExplaination .Image img{
    visibility: hidden;
    width:100%;
  }
  .StepByStepExplaination .TabList, .ScreenshotExplaination .TabList{
    display: table-cell;
    vertical-align: top;
  }

  .StepByStepExplaination .Image canvas, .ScreenshotExplaination .Image canvas{
    position: absolute;
    left:0px;
    right:0px;
    z-index: 100;
  }


  .StepByStepExplaination .TabList {
    counter-reset: num-counter; /* Initialize numeric counter */
    counter-reset: letter-counter; /* Initialize letter counter */
    list-style-type: none;
  }

  /* Styling for items that need numbers */
  .StepByStepExplaination .TabList .mainSteps {
    counter-increment: num-counter; /* Increment numeric counter */
  }

  .StepByStepExplaination .TabList .mainSteps::before {
    content: counter(num-counter); /* Display the numeric counter */
    display:inline-block;
    width: 25px; /* Circle size */
    height: 25px; /* Circle size */
    background-color: #FFFFFF99; /* Circle background */
    border: 0px; /* Circle border */
    border-radius: 50%; /* Make it a circle */
    text-align: center; /* Center text inside circle */
    line-height: 25px; /* Align text vertically */
    margin-right:10px;
  }

  /* Styling for items that need letters */
  .StepByStepExplaination .TabList .areaOptions {
    counter-increment: letter-counter; /* Increment letter counter */
    list-style-type: none; /* Remove the default list style */
    margin-left: 20px; /* Indent lettered items */
    /*border-left: 2px solid black !important;*/
  }

  .StepByStepExplaination .TabList .areaOptions::before {
    content: counter(letter-counter, upper-alpha); /* Display letter counter */
    display:inline-block;
    width: 25px; /* Circle size */
    height: 25px; /* Circle size */
    background-color: #FFFFFF99; /* Circle background */
    border: 0px; /* Circle border */
    border-radius: 50%; /* Make it a circle */
    text-align: center; /* Center text inside circle */
    line-height: 25px; /* Align text vertically */
    margin-right:10px;
  }

  .StepByStepExplaination .TabList .selectedBorderThick{
    color: black; /* Optional: change the text color when selected */
    border: 4px black solid;
    border-right: 1px solid black;
    margin-bottom:2px;
    margin-top:2px;
  }

  .StepByStepExplaination .TabList .selected::before{
    border: 2px solid black; /* Circle border */
  }

  /* Reset letter counter before each new set of lettered items */
  .StepByStepExplaination .TabList .mainSteps {
    counter-reset: letter-counter; /* Reset the letter counter before first areaOptions */
  }



 /* Styling for items that need letters */
 .ScreenshotExplaination .TabList .mainSteps {
  counter-reset: letter-counter; /* Reset the letter counter before first areaOptions */
} 
 .ScreenshotExplaination .TabList .areaOptions {
      counter-increment: letter-counter; /* Increment letter counter */
      margin-left: 20px;
      border-left: 2px solid black !important;
  } 

  .ScreenshotExplaination .TabList .selectedBorderThick{
    color: black; /* Optional: change the text color when selected */
    border: 4px black solid;
    border-left: 0px solid black;
    margin-bottom:2px;
    margin-top:2px;
  }

  .ScreenshotExplaination .TabList .selectedBorderThin{
    color: black; /* Optional: change the text color when selected */
    border: 2px black solid;
    border-left: 0px solid black;
    margin-bottom:2px;
    margin-top:2px;
  }


  .TabList .selected{
    padding-bottom: 0px;
  }

  .TabList .description{
    display: none;
    background-color: #FFFFFF77;
    width: calc(100%); /* Add the parent's padding value */
    margin-left: -10px; /* Offset to fill the padding area */
    padding: 5px;
  }
  .TabList .selected .description{
    font-weight: normal;
    margin-top: 10px;
    display: inline-block;    
  }


  /*h1:before {
    content: counter(heading);
    counter-increment: heading;
    display:inline-block;
    width: 35px; 
    height: 30px;
    background-color: #FFFFFF99; 
    color: #2B3654;
    border: 0px; 
    border-radius: 20%; 
    text-align: center; 
    line-height: 30px; 
    font-weight: bold; 
    margin-right:20px;
  }
  h1 {
    counter-reset: subheading;
  }
  h2:before {
    content: counter(heading)"." counter(subheading);
    counter-increment: subheading;
    display:inline-block;
    width: 45px; 
    height: 30px; 
    background-color: #2B3654;
    color: #2B3654;
    border: 0px;
    border-radius: 20%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    margin-right:20px;
  }*/

  h1, h2, h3{
    background-color: #2B3654;
    color: white;
    padding:3px;
    padding-left:10px;
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 25px;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
  }

  h1{
    font-size: 32px;
  }

  h2{
    font-size: 20px;
  }

  h3{
    font-size: 18px;
    background-color: #2B365477;
    color:#2B3654;
  }

  h4{
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
  }

  .SectionText{
    padding-left: 10px;
  }

  .Image{
    position: relative;
  }


  .Image img{
    position:absolute;
    top:0px;
    left:0px;
  }

  #menu .toc{
    list-style-type: none; /* Removes bullet points */
  }

  #menu .toc ul{
    margin: 5px;
    list-style-type: none; /* Removes bullet points */
  }

  #menu .toc a{
    text-decoration: none;
    line-height: 20px;
  }

  #menu .toc .toggleIcon{
    color: #2B3654;
  }

  #menu .toc .toggleIcon{
    width:20px;
    height:20px;
    font-size:20px;
    display: inline-block;
    cursor: pointer;
  }

  #searchField{
    height:25px;
    padding: 5px;
    background-color: #2B3654;
    border-radius: 10px;
    margin-bottom:15px;
    max-width:900px;
    display: flex;
    justify-content: center; /* Centers items horizontally */
    align-items: center;    /* Centers items vertically */
    gap: 2px;              /* Adds spacing between elements */
  }

  #searchField button, #searchField input{
    height: 25px;
  }

  #menu .searchTOC{
    background-color: #2B3654;
    padding-left:10px;
    padding-bottom:15px;
    border-radius: 10px;
  }
  #menu .searchTOC a{
    color: white;
  }

  #menu .searchTOC .toggleIcon{
    color: white;
  }