/* ============================================================================
   HELP HUB MASTER CSS - CLEANED AND VALIDATED
============================================================================ */

/* ============================================================================
   GOOGLE FONTS IMPORT
============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Epilogue:ital,wght@0,100..900;1,100..900&family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Teachers:ital,wght@0,400..800;1,400..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* ============================================================================
   LAYOUT & SPACING
============================================================================ */
.theme1.page-toc main article {
    padding-left: 80px;
}

.page-toc main article {
    padding-right: 120px;
}

.nav-site-sidebar {
    margin: 15px 0 20px 4px;
}

/* ============================================================================
   HUB HOME HEADER & SEARCH BAR
============================================================================ */
.portal-header h1 {
    color: #fff;
    font-size: 30px;
    font-family: 'Comfortaa', sans-serif;
}

.portal-header .search-field {
    background-color: #ffffff;
    color: #000000;
}

.portal-header .portal-search button,
.publication-contents h4 span {
    background-color: #c6007e;
    color: #ffffff;
}

.portal-header:hover .portal-search button:hover,
.publication-contents h4 span:hover {
    background-color: #64A70B;
}

/* ============================================================================
   FEATURED CONTENT SECTION
============================================================================ */
h5.featured-content-label {
    font-family: 'Comfortaa', sans-serif;
    font-size: 19px;
    background-color: #ffffff;
    color: #11508e;
    border: none;
    font-variant-caps: petite-caps;
    margin: 10px 0 20px 0;
    padding: 0;
}

h4.featured-title {
    font-family: 'Comfortaa', sans-serif;
    font-variant: small-caps;
    font-size: 18px;
    font-weight: 500;
    background-color: #ffffff;
    color: #11508e;
    border: none;
    margin-left: 0;
}

.portal-single-publication h3 {
    font-size: 18px;
    font-family: 'Comfortaa', sans-serif;
    font-variant-caps: petite-caps;
}

.portal-publications .inner .portal-single-publication a,
.portal-single-publication h3,
.portal-single-publication h3 a,
.publication-contents h4 a,
ul.featured-subtopics a {
    text-decoration: none;
}

.publication-contents h4 span {
    visibility: hidden;
}

.panel-heading,
.panel-default {
    border: none;
}

.publication-icon {
    background-color: #5987ba;
}

.cat-panel-1::before {
    content: "\f128";
}

.cat-panel-2::before {
    content: "\f1ea";
}

.cat-panel-3::before {
    content: "\f277";
}

.cat-panel-4::before {
    content: "\f086";
}

/* ============================================================================
   COOKIE CONSENT STYLES
============================================================================ */
.cc-window.cc-banner.cc-type-info.cc-theme-block.cc-bottom {
    background-color: #113d70 !important;
    color: #ffffff !important;
}

.cc-animate.cc-revoke.cc-bottom {
    background-color: #113d70 !important;
}

.cc-btn {
    background-color: #c6007e !important;
    color: #ffffff !important;
}

.cc-btn:hover {
    background-color: #64A70B !important;
}

/* ============================================================================
   TABLE OF CONTENTS (ToC) - HIERARCHICAL INDENTING
============================================================================ */

.page-toc main article {
    float: left;
    margin-top: 20px;
    padding-right: 50px;
    width: 80%;
}

.nav-site-sidebar li a {
    padding: 13px 5px 0px 5px;
    line-height:17px;
    font-size: 15px;
    text-decoration: none;
}

.nav-site-sidebar ul a {
    padding: 8px 0 1px 10px;
    line-height:17px;
    font-size:14px;
    text-decoration: none;
}

.nav-site-sidebar ul ul a {
    padding: 7px 0 1px 15px;
    line-height:17px;
    font-size: 13px;
}

.nav-site-sidebar ul ul ul a {
    padding: 5px 0 1px 20px;
    line-height:17px;
}

.nav-site-sidebar ul ul ul ul a {
    padding: 4px 0 1px 25px;
    line-height:17px;
}

.nav-site-sidebar ul ul ul ul ul a {
    padding: 4px 0 0 30px;
    line-height:17px;
}

.nav-site-sidebar ul ul ul ul ul ul a {
    padding: 3px 0 0 35px;
    line-height:17px;
}

/* ============================================================================
   TYPOGRAPHY - PARAGRAPHS & GENERAL TEXT
============================================================================ */
p,
pre,
body {
    font-family: 'Epilogue', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #000000;
    margin: 5px 0 10px 0;
}

.blockquote {
    font-family: sans-serif;
    font-size: 15px;
    color: #555;
}

.handwriting {
    font-family: 'Caveat';
    font-size: 29px;
}

.noborder img {
    border: none;
}

/* ============================================================================
   HEADINGS (H1-H8) - BASE STYLES
============================================================================ */
h1, h2, h3, h4, h5, h6, h7, h8 {
    color: #11508e;
    font-family: 'Comfortaa', sans-serif;
    margin:10px 0 5px 0;
}

.noArch h2.title,
.noArch h3.title,
.noArch h4.title,
.noArch h5.title,
.noArch h6.title,
.noArch h7.title,
.noArch h8.title {
    color: #A9A9A9;
    text-indent: 0px;
    margin: 8px 0;
}

h1 {
    font-size: 29px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 0 13px 0;
}

h2 {
    font-size: 27px;
    font-weight: 900;
    text-transform: uppercase;
    padding: 20px 0 0 0;
}

h3 {
    font-size: 24px;
    font-weight: 700;
    font-variant-caps: petite-caps;
    /*padding: 20px 0 0 0;*/
}

h4 {
    font-size: 21px;
    font-weight: 600;
    font-variant: small-caps;
    font-style: italic;
   /* padding: 16px 0 0 0;*/
}

h5 {
    font-size: 17px;
    font-variant-caps: petite-caps;
    font-weight: 700;
    /*padding: 16px 0 0 0;*/
}

h6 {
    font-size: 17px;
    font-weight: 700;
    font-variant-caps: petite-caps;
    font-style: italic;
   /* padding: 16px 0 0 0; */
}

h7 {
    font-size: 17px;
    font-weight: 600;
    font-variant-caps: petite-caps;
   /* padding: 17px 0 0 0;*/
}

h8 {
    font-size: 15px;
    font-variant-caps: petite-caps;
    font-weight: 700;
    font-style: italic;
    /*padding: 17px 0 0 0;*/
}

/* ============================================================================
   SECTION INDENTATION - SIMPLIFIED APPROACH
   - Accordion icon width: ~25px
   - Regular sections indent to align text with accordion text (not icon)
   - Each level adds 14px indent
============================================================================ */

/* H1 SECTIONS - No indent (base level) */
#topic-content > section > .titlepage .title {
    margin: 0;
}

.section:has(> .titlepage h1) {
    margin-left: 0;
}

/* H2 SECTIONS */
.section.accordion:has(> .panel > .panel-heading h2) {
    margin-left: 0;  /* Accordion at margin */
}

.section:not(.accordion):has(> .titlepage h2) {
    margin-left: 17px;  /* Regular section aligns with accordion text */
}

/* H3 SECTIONS */
.section.accordion:has(> .panel > .panel-heading h3) {
    margin-left: 17px;  /* Indents from H2 accordion */
}

.section:not(.accordion):has(> .titlepage h3) {
    margin-left: 32px;  /* 17px (H2 offset) + 15px */
}

/* H4 SECTIONS */
.section.accordion:has(> .panel > .panel-heading h4) {
    margin-left: 17px;  /* Indents from H3 */
}

.section:not(.accordion):has(> .titlepage h4) {
    margin-left: 32px;  /* 39px + 10px */
}

/* H5 SECTIONS */
.section.accordion:has(> .panel > .panel-heading h5) {
    margin-left: 17px; /* Indents from H4 */
}

.section:not(.accordion):has(> .titlepage h5) {
    margin-left: 32px;
}

/* H6 SECTIONS */
.section.accordion:has(> .panel > .panel-heading h6) {
    margin-left: 17px; /* Indents from H5 */
}

.section:not(.accordion):has(> .titlepage h6) {
    margin-left: 32px;
}

/* H7 SECTIONS */
.section.accordion:has(> .panel > .panel-heading h7) {
    margin-left: 17px; /* Indents from H6 */
}

.section:not(.accordion):has(> .titlepage h7) {
    margin-left: 33px;
}

/* H8 SECTIONS */
.section.accordion:has(> .panel > .panel-heading h8) {
    margin-left: 17px; /* Indents from H7 */
}

.section:not(.accordion):has(> .titlepage h8) {
    margin-left: 32px;
}

/* ============================================================================
   ADMONITIONS
============================================================================ */
.warning,
.warning.danger,
.notice,
.note,
.important,
.caution,
.tip {
    display: block;
    background-color: #ffffff;
    border-width: 1px 1px 1px 8px;
    border-style: solid;
    margin: 15px 0 15px 0;
}

.warning > p,
.warning.danger > p,
.notice > p,
.note > p,
.important > p,
.caution > p,
.tip > p {
    padding: 7px 0 0 0;
}

.note h3.title,
.tip h3.title,
.warning h3.title,
.warning.danger h3.title {
    text-decoration: none;
    background-color: #ffffff;
    font-size: 21px;
    font-weight: 500;
}

.note {
    border-color: #1976d2;
}

.note::before {
    content: "\f249";
    color: #1976d2;
    left: 30px;
    top: 23px;
    font-family: FontAwesome;
    font-size: 27px;
    background-color: #ffffff;
}

.note h3.title {
    color: #1976d2;
}

.tip {
    border-color: #3c763d;
}

.tip::before {
    content: "\f0eb";
    color: #3c763d;
    left: 33px;
    top: 21px;
    font-family: FontAwesome;
    font-size: 32px;
}

.tip h3.title {
    color: #3c763d;
}

.caution {
    border-color: #e4a41a;
}

.caution::before {
    content: "\f071";
    color: #e4a41a;
    left: 28px;
    top: 20px;
    font-family: FontAwesome;
    font-size: 27px;
}

.caution h3.title {
    visibility: hidden;
}

.caution h3.title::before {
    visibility: visible;
    content: "Warning";
    color: #e4a41a;
    font-size: 21px;
    background-color: #ffffff;
}

.warning {
    border-color: #e4a41a;
}

.warning::before {
    content: "\f071";
    color: #e4a41a;
    left: 28px;
    top: 20px;
    font-family: FontAwesome;
    font-size: 27px;
}

.warning h3.title {
    color: #e4a41a;
}

.warning.danger {
    border-color: #af1e1c;
}

.warning.danger p {
    font-weight: bold;
}

.warning.danger::before {
    content: "\f1e2";
    color: #af1e1c;
    left: 28px;
    top: 20px;
    font-family: FontAwesome;
    font-size: 29px;
}

.warning.danger h3.title {
    color: #af1e1c;
}

.notice {
    border-color: #11508e;
}

.notice::before {
    content: "\f0c6";
    color: #11508e;
    left: 30px;
    top: 20px;
    font-family: FontAwesome;
    font-size: 29px;
}

.notice h3.title {
    visibility: hidden;
}

.notice h3.title::before {
    visibility: visible;
    content: "Example";
    color: #11508e;
    background-color: #ffffff;
    font-size: 21px;
    font-family: 'Comfortaa', sans-serif;
}

.important {
    border-color: #808080;
}

.important p {
    font-style: italic;
}

.important::before {
    content: "\f084";
    color: #000000;
    left: 29px;
    top: 20px;
    font-family: FontAwesome;
    font-size: 27px;
}

.important h3.title {
    visibility: hidden;
}

.important h3.title::before {
    visibility: visible;
    content: "Permissions";
    font-size: 21px;
    color: #000000;
}

/* ============================================================================
   ACCORDIONS
============================================================================ */
.panel-heading {
    margin:0px;
    padding:0px 0 0 15px ;

}
.panel {
    margin: 0;
    padding: 0;
}

.panel-body {
    margin: 0px 0 0 17px;
    padding: 0;
}

.panel-inner {
    margin: 0;
    padding: 0;
}

.accordion .panel-heading :not(div).title::before {
    margin-left: -25px;  /* Icon width to position in front of heading */
}

.panel-heading :not(div).title::before,
.panel-heading .sidebar-title::before {
    content: "\f067";
    color: #11508e;
    font-family: FontAwesome;
    font-size: 15px;
    margin-right: 10px;
    position: relative;
}

.panel-heading.active :not(div).title::before,
.panel-heading.active .sidebar-title::before {
    content: "\f068";
}

/* ============================================================================
   TABLES
============================================================================ */
table,
td,
tbody {
    vertical-align: top;
}

.table,
.informaltable {
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
    padding-bottom: 9px;
    padding-top: 19px;
    border: 1px solid #b7b7b7;
}

th > p {
    background-color: #11508e !important;
    color: #ffffff !important;
    padding: 12px 0;
}

th {
    background-color: #11508e;
    color: #ffffff !important;
    padding: 12px 0;
}

tr:nth-child(even) {
    background: #c7c7c7;
}

tr:nth-child(odd) {
    background: #fff;
}

.tabstyle1 th > p {
    background-color: #11508e !important;
    color: #ffffff !important;
    padding: 12px 0;
}

.tabstyle1 th {
    background-color: #11508e;
    color: #ffffff !important;
    padding: 12px 0;
}

.tabstyle1 tr:nth-child(even) {
    background: #c7c7c7;
}

.tabstyle1 tr:nth-child(odd) {
    background: #fff;
}

.blank tr,
.blank thead,
.blank th {
    background-color: transparent;
    color: #000000;
    font-style: normal;
}

.blank {
    border: none;
    background-color: transparent;
    color: black;
}

.splash {
    border: none;
}

.splash tbody tr:nth-child(even),
.splash tbody tr:nth-child(odd) {
    background-color: transparent;
}

.splash td:hover {
    background-color: #dddddd;
}

.box {
    border: 1px solid #b7b7b7;
    border-collapse: collapse;
}

.allborders th,
.allborders td {
    border: 1px solid #b7b7b7;
}

.hirow {
    background-color: #ffffff;
}

.hirow tr:hover {
    background-color: #b2cbf0;
}

.hicell td:hover {
    background-color: #b2cbf0;
}

.hiactive {
    border-collapse: collapse;
}

.hiactive th,
.hiactive td {
    margin-left: auto;
    margin-right: auto;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
}

.hiactive thead th {
    background-color: #11508e;
    color: white;
    font-weight: bold;
    vertical-align: top;
}

.hiactive tbody td:first-child,
.hiactive tbody td:first-child > p {
    background-color: #11508e;
    color: white;
    font-weight: bold;
    vertical-align: top;
}

.hiactive tbody tr:nth-child(even),
.hiactive tbody tr:nth-child(odd) {
    background-color: transparent;
}

.hiactive tbody td:not(:first-child) {
    background-color: white;
}

.hiactive .highlight-row,
.hiactive .highlight-column {
    background-color: #b2cbf0 !important;
}

/* ============================================================================
   LINKS & IMAGES
============================================================================ */
a:link,
a:visited {
    text-decoration: underline;
}

.inlinemediaobject {
    display: inline-block;
    height: 20px;
    vertical-align: 4px;
}

.material-placeholder {
    margin: 15px 0;
    border: 1px solid #273e71;
    padding: 7px;
}

/* ==================== THE END ========================== */