/* Style Sidebox */
.sidebox {
    background: var(--sm-section-bg-colour);
    border-color: var(--border-colour);
    border-style: solid;
    float: right;
    max-width: 25%;
    width: 25%;
    min-width: 150px;
    font-size: 0.72em;
    margin-left: 2%;
    position: relative;
    top: 1em;
    padding: 1em;
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--section-shadow);
    text-align: justify;
}

.sidebox :is(h1,h2,h3,h4,h5,h6) {
    text-align: center;
    align-items: center;
    font-size: 1.8em;
    line-height: normal;
}

.sidebox .img {
  display: block;
  margin: auto;
  max-width: 100%;
}

/* Style Main Page */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    margin: auto;
}

section.mainsc  {
    min-width: 100%;
}

table.maintab {
    max-width: 90%;
    min-width: 100%;
}

main.page {
  padding: 20px 20px;
}

.spacing {
    padding-bottom: 1em;
}

.title {
    text-align: center;
    align-items: center;
    margin-top: -0.5em;
    margin-bottom: 0em;
    font-size: 3.5em;
}

.catList {
    columns: 2;
    column-gap: 5vw;
}
.catList.catSing {
    columns: 1;
}

.catAlpha {
    break-inside: avoid;
}

.p-parent {
    margin-top: -0em;
    margin-bottom: 0em;
}

.c-parent {
    margin-top: 0em;
    margin-bottom: 0em;
}

.linker {
    columns: 3;
    column-gap: 5vw;
}

section :is(h2) {
  border-bottom: 0.1em solid var(--header-colour);
  padding-bottom: 0.1em;
  margin-bottom: 0em;
  font-size: 1.7em;
  scroll-margin-top: 1em;
  line-height: 1em;
}

section :is(h3, h4, h5, h6) {
  margin-bottom: 0em;
  scroll-margin-top: 1em;
}

section h3 {
  font-size: 1.5em;
}

section h4 {
  font-size: 1.3em;
}

section h5 {
  font-size: 1.1em;
}

section h6 {
  font-size: 1em;
}

section p {
  margin-top: 0.2em;
  margin-bottom: 0.7em;
}

section :is(ul, ol) {
  margin-top: 0em;
  margin-bottom: 0.7em;
}

/* Style Tables */
.reg-table {
    margin-top: 1em;
    margin-bottom: 1em;
    border-style: none;
    border-collapse: collapse;
    line-height: 1.2em;
}
.regt-head {
    font-weight: 500;
    text-align: left;
    font-size: 0.9em;
}
.reg-table  th, .reg-table  td {
    padding-right: 2em;
}
.regt-cap {
    font-weight: bold;
    text-align: left;
}
.regt-body {
    font-size: 0.9em;
}

/* Style Accordion */

.accordion:hover {
    cursor: pointer;
}

.harrow {
    margin-left: 0;
    filter: var(--symbol-colour);
}

.panel {
    max-height: 0;
    display: flow-root;
    overflow: hidden;
    transition: max-height 0.2s ease;
}
.panel.active {
    max-height: auto;
}

.accordion.active .arrow {
  transform: rotate(180deg);
}

/* Style Imgs */
.img {
  margin-right: 0.25em;
  border-radius: 0.5em;
  border: 0.2em solid var(--border-colour);
}

.img-div {
  display: flex;
}

.click-img {
  cursor: pointer;
}

/* Style TOC */
.toc {
    background: var(--sm-section-bg-colour);
    border-color: var(--border-colour);
    border-style: solid;
    max-width: 500px;
    width: 25%;
    min-width: 300px;
    position: relative;
    top: 1em;
    padding: 1em;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 2em;
    border-radius: 1em;
    box-shadow: 0 10px 25px var(--section-shadow);
    text-align: justify;
}

.toc-head {
    background: var(--toc-header-bg-colour);
    border-color: var(--border-colour);
    border-style: solid;
    margin: -1.25em;
    padding: 1em;
    border-radius: 1em;
    display: flex;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.toc-cont {
    padding-top: 0.5em;
    margin-left: -1em;
    margin-top: 0.6em;
    position: relative;
    z-index: 9;
    text-align: left;
}

.toc-head h2 {
    font-size: 1.2em;
    border-bottom: 0;
    flex: 2;
    color: var(--text-colour);
    margin-bottom: 0.1em;
    margin-top: 0.1em;
}

.toc-img {
    height: 0.7em;
    position: relative;
    padding-right: 0.5em;
}
.toc-arrow {
    right: 0.5em;
    height: 1em;
    flex: 0;
    margin-top: 0.3em;
    filter: var(--toc-symbol-colour);
}

.toc-ul {
    counter-reset: section;
    list-style: none;
    padding-left: 1.2em;
    margin-bottom: 0;
}

.toc li {
    counter-increment: section;
    color: var(--text-colour);
}

.toc-ul ul {
    counter-reset: section;
}

.toc-num::before {
    content: counters(section, ".") ". ";
    font-weight: 600;
    color: var(--toc-num-colour);
    padding-left: 0.3em;
}

.toc-cont a {
    color: var(--text-colour);
    display: block;
}

.toc-cont a:hover {
    color: var(--toc-hover-colour);
    background-color: var(--toc-hover-bg-colour);
    border-radius: 0.2em;
}

.toc-cont a:hover > .toc-num::before {
    color: var(--toc-hover-colour);
}