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

:root {
	--black-light: #969B9B;
	--grey-light: #F1F4F4;
	--color-1: #02A598;
	--color-2: #F1B437;
	--color-3: #2E5C64;
	--color-3-dark: #183337;
	--color-4: #D5DEE0;
}

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

#header {
	background-color: var(--color-3);
	color: var(--color-4);
}
html.no-mobile #header {
	box-shadow: none;
}
.header-button {
	color: var(--color-4);
}
.header-button.selected,
html.multi-books .header-button.selected {
	background-color: var(--color-2);
	color: var(--color-3);
}
.header-button.disabled {
	color: var(--color-4);
	opacity: var(--opacity-disabled);
}
.content-links-element-icon > .content-links-element-icon-color {
	background-color: var(--color-4);
}

#navigation-contents-container,
#navigation-contents-wrapper {
	background-color: var(--grey-light) !important;
}
.navigation-contents-link:not(.selected) {
	color: var(--black) !important;
}
.navigation-contents-link.selected {
	background-color: var(--color-1) !important;
}
.navigation-contents-link.highlighted[data-index]::after {
	border-right-color: var(--color-1) !important;
}
#navigation-book-tabs {
	background-color: var(--black-light) !important;
	border-bottom: none !important;
}
.navigation-book-tab.selected {
    background-color: var(--grey-light) !important;
	color: var(--black) !important;
}

/* #header-content-links-toggle {
	color: inherit !important;
} */
html.mobile #header-breadcrumb {
	background-color: var(--color-3);
}
html.mobile .header-button {
	color: var(--color-3);
}
html.mobile .header-button.selected {
	background-color: var(--color-2);
	color: var(--color-3);
}
html.mobile #contents {
    padding-top: 0;
}
html.mobile #content-links {
	box-shadow: none;
}
html.mobile:not(.multi-books) #navigation-contents-wrapper {
	border-top: 2px solid var(--color-3);
}
.content-links-element.selected {
    background-color: var(--color-1);
}

.content-links-feedback {
	display: none !important;
}