/* here in this showcase we use our own modified chroma syntax highlightning style;
   if you want to use a predefined style instead:
   - remove `markup.highlight.noClasses` from your config.toml
   - set `markup.highlight.style` to a predefined style name in your config.toml
   - remove the following `@import` of the self-defined chroma stylesheet */
@import "chroma-learn.css";

:root {
   --PRIMARY-color: #000000; /* brand primary color */
    --SECONDARY-color: #2b2b2b; /* brand secondary color */

    --MAIN-TEXT-color: #000000; /* text color of content and h1 titles */
    --MAIN-LINK-HOVER-color: #de6000; /* hoverd link color of content */
    --MAIN-BG-color: #ffffff; /* background color of content */
    --MAIN-TITLES-TEXT-color: #5e5e5e; /* text color of h2-h6 titles and transparent box titles */

    /* adjusted to relearn-light chroma style */
    --CODE-BLOCK-color: #000000; /* fallback text color of block code; should be adjusted to your selected chroma style */
    --CODE-BLOCK-BG-color: #ffffff; /* fallback background color of block code; should be adjusted to your selected chroma style */
    --CODE-BLOCK-BORDER-color: #ffffff; /* border color of block code */

    --CODE-INLINE-color: #5e5e5e; /* text color of inline code */
    --CODE-INLINE-BG-color: #fffae9; /* background color of inline code */
    --CODE-INLINE-BORDER-color: #f8f8f8f; /* border color of inline code */

    --MENU-HOME-LINK-color: #ffffff; /* home button color if configured */
    --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* hoverd home button color if configured */

    --MENU-HEADER-BG-color: #ffffff; /* Background color of menu header */
    --MENU-HEADER-BORDER-color: #ffffff; /*Color of menu header border */

    --MENU-SEARCH-color: #ffffff; /* text and icon color of search box */
    --MENU-SEARCH-BG-color: #484848; /* background color of search box */
    --MENU-SEARCH-BORDER-color: #ffffff; /* border color of search box */

    --MENU-SECTIONS-BG-color: #ffffff; /* background of the menu; this is NOT just a color value but can be a complete CSS background definition including gradients, etc. */
    --MENU-SECTIONS-ACTIVE-BG-color: rgb(208, 208, 208); /* background color of the active menu section */
    --MENU-SECTIONS-LINK-color: rgb(65, 65, 65); /* link color of menu topics */
    --MENU-SECTIONS-LINK-HOVER-color: #808080; /* hoverd link color of menu topics */
    --MENU-SECTION-ACTIVE-CATEGORY-color: #595959; /* text color of the displayed menu topic */
    --MENU-SECTION-HR-color: #ffffff; /* separator color of menu footer */

    --MENU-VISITED-color: #00b515; /* Color of 'page visited' icons in menu */

    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* text color of colored box titles */
    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* background color of colored boxes */
    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* text color of colored box content */
}

/* BITS specific overrites for layout changes */
body {
    font-size: 18px !important;
    hyphens: auto;
}

#chapter #body-inner.body-404 {
	padding-bottom: 0rem;
}

#body-inner.body-404 {
	margin-bottom: 0rem;
}

.body-404 p {
	text-align: center !important;
}

.select-style select {
	background-image: url("data:image/svg+xml;utf8,<svg fill='silver' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: -8px;
	background-position-y: 0px;
	padding-left: 10px;
}

#site-icon-pre,
#site-icon-post {
	float: left;
	min-height: 1px;
	width: 10%;
}

#site-icon-h1 {
	float: left;
	width: 80%;
}

#site-icon-wrap::after {
	content: '';
	display: block;
	clear: both;
}

.site-icon-list {
	font-size: 5rem;
	text-align: right;
	color: var(--MAIN-TITLES-TEXT-color);
	margin-top: -1rem;
}

.site-icon-page {
	font-size: 4rem;
	text-align: right;
	color: #DCDCDC;
}

.site-icon-wrap-chapter {
	margin-bottom: 1rem;
	border-bottom: 4px solid rgba( 134, 134, 134, .125 );
}

.site-icon-wrap-chapter h1 {
	margin-bottom: 0;
	border-bottom: none !important;	
}

@media only all and (min-width: 48em) and (max-width: 59.938em) {
	.site-icon-list {
		font-size: 4rem;
	}

}

@media only all and (max-width: 47.938em) {
	.site-icon-list {
		font-size: 3rem;
	}

}