#heading-hierarchy {
    position: fixed;
    top: 0;
    left: 0;
    width: 350px;
    padding: 10px;
    background: #222;
    font-size: 14px;
    z-index: 2000;
    max-height: 100vh;
    bottom: 0;
    color: #CCC;
    transition: 1s left
}
#heading-hierarchy p, #heading-hierarchy span, #heading-hierarchy strong, #heading-hierarchy b {
    color: #CCC;
}

#heading-hierarchy h1 {
    font-size: 1.5rem;
    color:white;
}

#heading-hierarchy h2 {
    font-size: 1.3rem;
    color:white;
}

#heading-hierarchy ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    word-break: break-all
}

#heading-hierarchy ul li {
    cursor: pointer;
    padding: 0 3px;
    border-radius: 3px
}

#heading-hierarchy ul li span {
    padding: 4px 0;
    display: flex;
    align-items: start;
    gap: 10px
}

#heading-hierarchy ul li span svg {
    flex-shrink: 0
}

#heading-hierarchy ul li span p {
    margin: 0
}

#heading-hierarchy ul li>ul li {
    padding: 0 10px
}

#heading-hierarchy ul li.notvisible {
    cursor: default
}

#heading-hierarchy ul li.notvisible span {
    font-style: italic
}

#heading-hierarchy ul li.isvisible {
    cursor: pointer
}

#heading-hierarchy>#hierarchy-outer {
    height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

#heading-hierarchy>#hierarchy-outer #highlights-headlines {
    margin-bottom: 10px
}

#heading-hierarchy>#hierarchy-outer::-webkit-scrollbar {
    display: none
}

#heading-hierarchy #heading-icon {
    position: absolute;
    right: -50px;
    top: 50%;
    background: #222;
    padding: 10px;
    cursor: pointer
}

#heading-hierarchy #heading-icon svg {
    width: 30px
}

#heading-hierarchy .hierarchy-container {
    margin-top: 20px;
    border-top: 2px solid #fff
}

#heading-hierarchy .hierarchy-container .hierarchy-subheader {
    color: #ccc;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center
}
#heading-hierarchy .hierarchy-container .hierarchy-subheader p, #heading-hierarchy .hierarchy-container .hierarchy-subheader span, #heading-hierarchy .hierarchy-container .hierarchy-subheader strong, #heading-hierarchy .hierarchy-container .hierarchy-subheader b {
    color: #CCC;
}

#heading-hierarchy .hierarchy-header {
    text-align: center;
    padding-bottom: 8px
}

#heading-hierarchy #meta-hierarchy ul li {
    margin-bottom: 10px
}

#heading-hierarchy #meta-hierarchy ul li span {
    padding: 0px 0px 0px 15px;
    gap: 5px
}

#heading-hierarchy #meta-hierarchy ul li span b {
    flex-shrink: 0
}

#heading-hierarchy #image-hierarchy>ul>li {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cccccc40
}

#heading-hierarchy #image-hierarchy>ul>li>ul {
    margin-top: 5px
}

#heading-hierarchy #image-hierarchy>ul>li>ul>li {
    display: flex;
    gap: 5px
}

#heading-hierarchy #image-hierarchy>ul>li>ul>li b {
    flex-shrink: 0
}

#heading-hierarchy #image-hierarchy>ul>li>ul>li p {
    margin: 0
}

#heading-hierarchy #image-hierarchy>ul>li:last-child {
    margin-bottom: 0
}

#heading-hierarchy #json-hierarchy ul li {
    margin-bottom: 20px
}

#heading-hierarchy #json-hierarchy ul li span {
    display: block;
    padding-left: 10px;
    margin-top: 5px
}

#heading-hierarchy .switch {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: 10px
}

#heading-hierarchy .switch input {
    opacity: 0;
    width: 0;
    height: 0
}

#heading-hierarchy .switch input:checked+.slider {
    background-color: #2196F3
}
#heading-hierarchy .switch input:checked+.slider p, #heading-hierarchy .switch input:checked+.slider span, #heading-hierarchy .switch input:checked+.slider strong, #heading-hierarchy .switch input:checked+.slider b {
    color: #CCC;
}

#heading-hierarchy .switch input:checked+.slider:before {
    -webkit-transform: translateX(8px);
    -ms-transform: translateX(8px);
    transform: translateX(8px)
}

#heading-hierarchy .switch input:focus+.slider {
    box-shadow: 0 0 1px #2196F3
}

#heading-hierarchy .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s
}
#heading-hierarchy .switch .slider p, #heading-hierarchy .switch .slider span, #heading-hierarchy .switch .slider strong, #heading-hierarchy .switch .slider b {
    color: #CCC;
}

#heading-hierarchy .switch .slider:before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s
}

#heading-hierarchy .switch .slider.round {
    border-radius: 34px
}

#heading-hierarchy .switch .slider.round:before {
    border-radius: 50%
}

html.close-hierarchy #heading-hierarchy {
    left: -350px
}

.accessibility-border {
    border: 2px solid #008000;
    position: relative
}

.accessibility-h1::after {
    content: "h1";
    background: green;
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    font-size: 16px;
    padding: 5px;
    line-height: 1
}
.accessibility-h1::after p, .accessibility-h1::after span, .accessibility-h1::after strong, .accessibility-h1::after b {
    color: #CCC;
}

.accessibility-h2::after {
    content: "h2";
    background: green;
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    font-size: 16px;
    padding: 5px;
    line-height: 1
}
.accessibility-h2::after p, .accessibility-h2::after span, .accessibility-h2::after strong, .accessibility-h2::after b {
    color: #CCC;
}

.accessibility-h3::after {
    content: "h3";
    background: green;
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    font-size: 16px;
    padding: 5px;
    line-height: 1
}
.accessibility-h3::after p, .accessibility-h3::after span, .accessibility-h3::after strong, .accessibility-h3::after b {
    color: #CCC;
}

.accessibility-h4::after {
    content: "h4";
    background: green;
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    font-size: 16px;
    padding: 5px;
    line-height: 1
}
.accessibility-h4::after p .accessibility-h4::after span, .accessibility-h4::after strong, .accessibility-h4::after b {
    color: #CCC;
}

.accessibility-h5::after {
    content: "h5";
    background: green;
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    font-size: 16px;
    padding: 5px;
    line-height: 1
}
.accessibility-h5::after p, .accessibility-h5::after span, .accessibility-h5::after strong, .accessibility-h5::after b {
    color: #CCC;
}

.accessibility-h6::after {
    content: "h6";
    background: green;
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    font-size: 16px;
    padding: 5px;
    line-height: 1
}
.accessibility-h6::after p, .accessibility-h6::after span, .accessibility-h6::after strong, .accessibility-h6::after b {
    color: #CCC;
}

html.accessibility-hierarchy body {
    margin-left: 350px
}

html.accessibility-hierarchy.close-hierarchy body {
    margin-left: 0px
}