.folder-label {
    text-align: center;
    font-size: 2.2em;
    color: #ffffff;
    width: 50%;
    min-width: fit-content;
    margin: 0 auto;
    position: relative;
    top: 11px;
}

.listing {
    top: 8%;
    left: 25%;
    width: 50%;
    position: absolute;
}

.listing.no-access {
    text-align: center;
    color: #ffffff;
}

.listing-page-link-wrap .page-link:hover {
	z-index: 2;
    color: #fff;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.listing-page-link-wrap .green:hover { background-color: var(--green-color-hover); }
.listing-page-link-wrap .blue:hover { background-color: var(--blue-color-hover); }
.listing-page-link-wrap .purple:hover { background-color: var(--purple-color-hover); }
.listing-page-link-wrap .pink:hover { background-color: var(--pink-color-hover); }
.listing-page-link-wrap .violet:hover { background-color: var(--violet-color-hover); }

.listing-icon-wrap {
    width: 27px;
    height: 27px;
    float: right;
    position: relative;
    left: -53px;
    top: -37px;
    z-index: 9;
}

.listing-icon-wrap img {
	width: 100%;
	height: 100%;
}

.contents { width: 100%; }

.no-link {
    color: #999999;
    margin-bottom: 5px;
}

a {
	text-decoration: none;
	color: #FFFFFF;
}

a:hover {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: #FFFFFF;
}

.page-number {
	/*float: right; */
    position: absolute;
    right: 22px;
}

.listing-page-link-wrap {
    margin-bottom: 5px;
}

.page-link {
    position: relative;
    display: block;
    line-height: 1;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #989898;
    border: none;
    border-radius: 6px;
    padding: 0.4em 1em;
    /* margin: 0.15em 0.5em; */
    font-size: 1.6em;
    width: 100%;
}

.page-link:hover,
.xr-links:hover,
.xr-links:hover a {
	color: #0081A9;
	text-decoration: underline;
}

.no-link:hover {
    color: #FFFFFF;
    background-color: #989898 !important;
	text-decoration: none !important;
}

.xr-link {
    position: relative;
    display: block;
    line-height: 1;
    font-weight: bold;
    border: 5px solid;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    padding: 0.4em 0.5em;
    font-size: 1.25em;
    width: 40%;
    left: 2.6%;
    text-align: center;
    margin: 0 auto;
    background-color: #fff!important;
    top: -10px;
}

.xr-link.green {
    border-color: var(--green-color);
    color: var(--green-color);
}
.green       { background-color: var(--green-color); }
.green:hover { background-color: var(--green-color-hover); }

.xr-link.blue {
    border-color: var(--blue-color);
    color: var(--blue-color);
}
.blue       { background-color: var(--blue-color); }
.blue:hover { background-color: var(--blue-color-hover); }

.xr-link.purple {
    border-color: var(--purple-color);
    color: var(--purple-color);
}
.purple      { background-color: var(--purple-color); }
purple:hover { background-color: var(--purple-color-hover); }

.xr-link.pink {
    border-color: var(--pink-color);
    color: var(--pink-color);
}
.pink       { background-color: var(--pink-color); }
.pink:hover { background-color: var(--pink-color-hover); }

.xr-link.violet {
    border-color: var(--violet-color);
    color: var(--violet-color);
}
.violet       { background-color: var(--violet-color); }
.violet:hover { background-color: var(--violet-color-hover); }

.toc-alert {
	width: 1.175em;
	position: absolute;
	top: 0.4em;
	left: -0.4em;
}

.toc-alert.gray {
	filter: grayscale(100%);
}

.toc {
    width: 51%;
    margin: 0 auto;
}

.prev-sect-arrow,
.next-sect-arrow {
	position: absolute;
	top: -2%;
}

.prev-sect-arrow {
    font-size: 111px;
    color: #fff;
    z-index: 9;
    cursor: pointer;
}

.listing.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.prev-sect-arrow.disabled,
.next-sect-arrow.disabled {
    pointer-events: none;
    opacity: 0.3;
}

.next-sect-arrow {
    left: 72%;
    font-size: 111px;
    color: #fff;
    z-index: 9;
    cursor: pointer;
}

.solid-light-purple-box {
	top: 11%;
	left: 11%;
	position: fixed;
	width: 76%;
}

.btn_back:hover {
	color: #fff;
}

.btn:focus,.btn:active {
	outline: none !important;
	box-shadow: none;
 }