/* --------- summary table --------- */
.summaryclass {
    width: 100vw;
}
.summaryclass table {
    margin: 0 auto;
    border-collapse: separate;
}
.summaryclass h2 {
    text-align: center;
    font-variant: small-caps;
}

.summaryclass p {
    text-align: center;
    margin-bottom: 48px;
}

.summaryclass table h3 {
    margin: 0 auto;
    font-style: bold;
    font-size: 18px;
    font-variant: small-caps;
}

.summaryclass table td:first-child {
    padding-right: 64px;
}
.summaryclass table td {
    height: 80px;
    /* border-width: 1px;
    border-style: solid;
    border-color: black; */
}
.summaryclass tables img {
    height: 60px;
    margin-right: 32px;
    vertical-align: middle;
}

/* --------- banner --------- */
#main {
    margin-top: var(--sidemenu-strip-height);
}

.bannerclass {
    width: 100vw;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin-bottom: 32px;
}

.bannerclass img {
    margin-top: -480px;
}

.bannerclass p {
    color: white;
    text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000;
}

.bannerclass .title {
    text-align: center;
    position: absolute;
    font-size: var(--banner-font-size);
    font-family: var(--brand-font-family);
    font-weight: 200;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bannerclass .caption {
    position: absolute;
    font-size: var(--footer-font-size);
    color: var(--light-text-color);
    bottom: 8px;
    right: 32px;
}

/* --------- includes defaults --------- */

.includeclass table td:first-child {
    width: auto;
}

.includeclass table td {
    padding-right: 16px;
}

/* --------- filter table --------- */

.tableclass {
    color: var(--light-text-color);
    background: var(--dirt-color);
    table-layout: fixed;
    width:100%;
}

.tableclass a {
    color: var(--link-text-color);
}

.tableclass p {
    margin:0;
}
 
.tableclass tr:first-child {
    font-weight: bold;
    
}

.tableclass tr td:first-child {
    /* left column width for tier descriptions */
    width: 50%;
}

.tableclass tr:first-child td {
    /* for title row for each tier */
    background-color: var(--title-background);
    font-variant: small-caps;
    font-size: var(--table-filter-font-size);
}
.tableclass tr:first-child div {
    display: flex;
}

.tableclass tr:first-child td img {
    /* for title icon */
    vertical-align:middle;
    width:96px;
}

.tableclass tr:first-child td div div {
    /* for title icon placeholder */
    width:96px; 
}
.tableclass tr:first-child td span {
    /* title text font for each tier */
    color: var(--main-text-color);
    vertical-align:middle;
    margin: 32px;
}
.tableclass tr:not(:first-child) td:first-child {
    text-align: right;
    padding-right: 16px;
}
.tableclass tr:not(:first-child) td:first-child img {
    height: 22px;
}

.tableclass tr:first-child td a {
    display:block;
    width:100%;
}

.tablecontainerclass {
    width:100%;
}
.tablecontainerclass a {
    color: var(--link-text-color);
    display:block;
}
.tablecontainerclass>tbody>tr:nth-child(even) {
    /* separator */
    height:32px;
}

.tablecontainerclass .inAddition {
    text-align: left;
    padding-left: 25%;
}

/* --------------------------- main --------------------------- */

.mainclass { /* contains title & regular */
    position: relative;
    width: var(--column-width);
    left: 50%;
    transform: translate(-50%);
}

/* ****TITLE*********************** */

.titleclass {
    font-variant: small-caps;
    font-size: var(--title-font-size);
    font-family: var(--title-font-family);
    color: var(--main-text-color);
    background: var(--title-background);
    height: auto;
    padding: 28px;
}

.titleclass p {
    color: var(--main-text-color);
    text-align: justify;
}

.titleclass li {
    color: var(--main-text-color);
}

.titleclass h4 {
    color: var(--highlight-text-color);
    margin-top: 0px;
    margin-bottom: 0px;
}

.titleclass .subtitleclass {
    font-variant: small-caps;
    font-size: var(--subtitle-font-size);
    font-family: var(--title-font-family);
    color: var(--highlight-text-color);
    background: var(--info-background);
    height: auto;
    /* width: 80%; */
    padding-left: 28px;
    padding-right: 28px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.titleclass .subtitleclass p {
    color: var(--main-text-color);
    font-weight: bold;
    text-align: justify;
}

.titleclass .subsubtitleclass p {
    color: var(--main-text-color);
    font-weight: normal;
    font-size: var(--subsubtitle-font-size);
}

.titleclass .warningclass {
    font-size: var(--main-font-size);
    line-height: 24px;
    font-variant: small-caps;
    font-weight: bold;
    color: var(--highlight-text-color);
    background: var(--warning-background);
}

.titleclass .importantclass {
    font-size: var(--main-font-size);
    line-height: 24px;
    font-variant: small-caps;
    font-weight: bold;
    color: var(--highlight-text-color);
    background: var(--important-background);
}

.titleclass .warningclass p {
    color: var(--highlight-text-color);
}

/* ******************************** */

.infoclass {
    color: var(--highlight-text-color);
    background: var(--info-background);
}


.infoclass div.withborder {
    margin: 12px;
    padding-left: 16px;
    padding-right: 16px;
    border-width: 1px;
    border-color: var(--note-background);
    border-style: solid;
    text-align: justify;
    font-weight: bold;
}

.infoclass p.centernotice {
    padding: 8px;
    margin: 4px;
    color: var(--highlight-text-color);
    text-align: center;
    font-weight: bold;
    font-variant: small-caps;
    border-width: 1px;
    border-color: var(--note-background);
    border-style: solid;
}

.infoclass p {
    color: var(--main-text-color);
    text-align: justify;
} 

.noteclass {
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--highlight-text-color);
    background: var(--note-background);
}

.packlistclass .noteclass img {
    display: flex;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 8px;
    /* margin-left: auto;
    margin-right: auto; */
    width: 50%;
    border-radius: 0;
    border-style: none;
    box-shadow: black 0px 0px 16px 0px;
}

.packgroupclass {
    display: flex;
    align-items: center;
    justify-items: center;
    height: 96px;
    padding: 0px 16px 0px 16px;
    margin-bottom: 16px;
    margin-top: 32px;
    background-color: var(--group-background);
}
.packgroupclass p {
    margin: 0px;
    font-weight: normal;
    font-variant: small-caps;
    font-size: var(--large-font-size);
    vertical-align: middle;
    color: var(--highlight-text-color);
}

.regularclass {
    color: var(--light-text-color);
}

.thinclass {
    color: var(--light-text-color);
}

.largeclass{
    color: var(--light-text-color);
}

.strongclass {
    color: var(--main-text-color);
}

.infolistclass {
    padding-bottom: 24px;
    padding-top: 24px;
}

.infolistclass li {
    list-style-position: outside;
    padding-left: 0px;
    padding-top: 4px;
    margin-top: 0px;
    margin-left: -20px;
}

#toSort li {
    list-style-position: inside;
    padding-left: 0;
    padding-right: 10%;
    padding-top: 24px;
    text-align: justify;
}

.expandLabel {
    position:absolute;
    bottom:-4px;
    right:24px;
    font-size:12px;
    color:var(--light-text-color);
    cursor: pointer;
}

.confcollapsible {
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    margin-top: -16px;
    overflow: hidden;
    padding-left: 32px;
    padding-right: 32px;
}
    
/* --------- patreon pack list ------------ */
.packlistclass {
    margin-left: 64px;
}
.packlistclass img {
    border-radius: 64px;
    width: 600px;
}

.packlistclass a {
    color:var(--link-text-color);
    font-size: var(--packlist-font-size);
}

.packlistclass td { 
    font-size: var(--packlist-font-size);
}

#packbanner {
    border-radius: 16px;
    width: 100%;
}

/* ---------------- COLLAPSIBLE -------------- */

.collapsible {
    cursor: pointer;
}

.collapsiblecontent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    padding: 0px 16px;
}

.collapsiblecontent .pad {
    margin: 0 16px 0 16px;
    padding: 0 16px 0 16px;
}

.collapsiblecontent .pad div:first-child {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* ------------------------- misc ------------------------- */

.disabled {
    pointer-events: none;
    opacity: 0.5;
}