/*
  Placeholder for theme css customizations (defaults to the blue theme)
  See https://learn.netlify.com/en/basics/style-customization/#yours-variant for details 
*/

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Roboto:wght@300;500&display=swap");

:root {
	--MAIN-TEXT-color: #191b1c; /* Color of text by default */
	--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
	--MAIN-LINK-color: #2d52bd; /* Color of links */
	--MAIN-LINK-HOVER-color: #2d52bd; /* Color of hovered links */
	--MAIN-ANCHOR-color: #2d52bd; /* Color of anchors on titles */
	--MAIN-BG-color: #daeaff; /* color of code snippet backgrounds */

	--CODE-SNIPPET-BG: #191b1c;

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

	--MENU-SEARCH-BG-color: #ffffff; /* Search field background color (by default borders + icons) */
	--MENU-SEARCH-BOX-color: #ffffff; /* Override search field border color */
	--MENU-SEARCH-BOX-ICONS-color: #ffffff; /* Override search field icons color */

	--MENU-SECTIONS-ACTIVE-BG-color: #2c353a; /* Background color of the active section and its childs */
	--MENU-SECTIONS-BG-color: #252c31; /* Background color of other sections */
	--MENU-SECTIONS-LINK-color: #cccccc; /* Color of links in menu */
	--MENU-SECTIONS-LINK-HOVER-color: #e6e6e6; /* Color of links in menu, when hovered*/
	--MENU-SECTION-ACTIVE-CATEGORY-color: #2c353a; /* Color of active category text */
	--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */

	--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
	--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */

	--MENU-INPAGE-BACKGROUND: #f6f6f6;
}

body {
	color: var(--MAIN-TEXT-color) !important;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	line-height: 1.6;
	font-size: 16px !important;
}

textarea:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
select[multiple="multiple"]:focus {
	border-color: none;
	box-shadow: none;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: "Roboto", sans-serif;
	text-rendering: optimizeLegibility;
	color: var(--MAIN-TEXT-color);
	font-weight: 300;
	letter-spacing: 0;
	text-align: left !important;
	text-transform: none;
	line-height: 1.2;
}

h1 {
	margin-top: 1rem;
}

h2 {
	margin-top: 3rem;
}

h3 {
	margin-top: 4rem;
	font-weight: 500;
	font-size: 1.4rem;
}

h4,
h5 {
	font-weight: bold;
	font-size: 1.05rem;
	color: black;
	font-family: "Open Sans", sans-serif;
	margin-top: 3rem !important;
}

h5 {
	margin: 0 0 0.2rem 0;
}

#shortcuts > h3 {
	color: #ffffff !important;
}

#body .tags a.tag-link {
	background: var(--MAIN-TITLES-TEXT-color) !important;
	color: #fff !important;
}

#body .tags a.tag-link:before {
	border-color: transparent var(--MAIN-TITLES-TEXT-color) transparent transparent;
}
p {
	font-size: 1rem !important;
	margin-top: 0 !important;
	margin-bottom: 1.5rem;
}

b,
a,
label,
th {
	font-weight: 500;
}

h4 + ul {
	margin-top: 1rem;
}

ul {
	margin: 0 0 1.5rem 0;
	padding-left: 1.5rem;
}

.progress ul {
	padding: 10px 15px 10px 30px;
}

#TableOfContents {
	font-size: 13px !important;
	max-height: 85vh;
	overflow: auto;
	padding: 0 !important;
}

#TableOfContents li {
	list-style-type: disc;
	padding: 4px 0;
}

#TableOfContents > ul > li > a {
	font-weight: bold;
	margin: 0;
	padding: 0;
}

#header-wrapper {
	border-top: 8px solid;
	border-bottom: 0 !important;
	padding: 1rem;
	text-align: left;
}

#header-wrapper svg {
	max-width: 100%;
	height: auto;
}

#leaving-organizations {
	padding-top: 0 !important;
}

#related-information {
	padding-top: 0 !important;
}

#homelinks {
	background-color: transparent;
	border: none;
}

#sidebar #shortcuts h3 {
	font-family: "Roboto", sans-serif;
	color: #ffffff;
	margin-top: 1rem;
	padding-left: 1rem;
}

.searchbox {
	border: 0;
	border-bottom: 1px solid;
	border-radius: 0 !important;

	background: white !important;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px !important;
}

.searchbox .fas {
	color: black !important;
	position: relative;
	top: 10px;
}

.searchbox input {
	background: var(--MENU-HEADER-BG-color);
	border: 0 !important;
	border-radius: 5px !important;
	color: black !important;
	background: transparent !important;
	box-shadow: none;
}

.searchbox input::placeholder {
	color: black !important;
}

#body #breadcrumbs a {
	color: var(--MENU-HEADER-BORDER-color);
	text-decoration-color: var(--MENU-HEADER-BORDER-color);
}

#body #breadcrumbs a:hover {
	color: var(--MENU-HEADER-BORDER-color);
	text-decoration: underline;
	text-decoration-color: var(--MENU-HEADER-BORDER-color) !important;
}

#top-github-link a {
	color: var(--MENU-HEADER-BORDER-color);
}

#header {
	padding-top: 10px;
}

mark {
	background: #8aa3e9 !important;
	color: #333333;
}

.nav {
	color: var(--MENU-HEADER-BORDER-color);
}

.nav:hover {
	color: var(--MENU-HEADER-BORDER-color);
}

.children-li li {
	padding: 5px 0 !important;
}

.children li a {
	padding-bottom: 0 !important;
}

.children-li p {
	font-size: small;
	font-style: normal !important;
	margin-top: 0px !important;
	padding-bottom: 15px !important;
}

.children-li p:empty {
	display: none;
}

li {
	padding: 0 0 1.25rem 0;
}

#body-inner li {
	padding: 0.25rem 0;
}

#body-inner li h4 {
	margin: 0 0 0.2rem 0 !important;
	padding: 0;
}

ol {
	padding-top: 0;
	margin-top: 0;
}

ol ul {
	margin-top: 1rem;
}

.hljs {
	display: block;
	overflow-x: auto;
	padding: 0.5em;
	line-height: 1.4em;
	font-size: 0.95rem !important;
	word-break: break-all;
	background: var(--MAIN-BG-color);
	background: var(--CODE-SNIPPET-BG);
	border-radius: 5px;
}

.hljs-attr,
.hljs-string {
	/* color: #2d52bd; */
}

#sidebar a {
	font-weight: normal !important;
}

div.notices.note p {
	border-top: 30px solid #2d52bd;
	color: #2d52bd;
	background: var(--MAIN-BG-color);
}

pre {
	padding: 1.25rem;
	border-radius: 8px;
	background: var(--CODE-SNIPPET-BG) !important;
	border: 0;
	border-radius: 6px;
	line-height: 1.5;
	font-size: 1.2rem !important;
	margin: 0 0 2.5rem 0 !important;
}

p + .highlight pre {
	margin-top: -0.5rem !important;
}

pre code {
	color: #2d52bd;
	line-height: 1.6;
	font-size: 1.2rem;
}

code,
kbd,
pre,
samp {
	font-family: "Roboto Mono", monospace, sans-serif;
	font-size: 92%;
}

code {
	background: var(--MAIN-BG-color);
	color: #2d52bd;
	border: 1px solid var(--MAIN-BG-color);
	padding-bottom: 1px;
	vertical-align: baseline;
	font-size: 13px !important;
}

pre .copy-to-clipboard {
	position: absolute;
	right: 4px;
	top: 4px;
	background-color: var(--MAIN-BG-color);
	color: var(--MAIN-BG-color) !important;
	border-radius: 2px;
}

pre .copy-to-clipboard:hover {
	background-color: #accbf3;
	color: #ffffff !important;
}

.copy-to-clipboard {
	background-color: #e8ecfe;
}

.copy-to-clipboard:hover {
	background-color: rgb(191, 195, 212);
}

a {
	color: var(--MAIN-LINK-color);
}

.anchor {
	color: var(--MAIN-ANCHOR-color);
}

.autocomplete-suggestion.selected {
	background: var(--MENU-HEADER-BG-color);
	color: #fff;
}

.autocomplete-suggestion:hover {
	background: var(--MENU-HEADER-BG-color);
	color: #fff;
}

a:hover {
	color: var(--MAIN-LINK-HOVER-color);
}

#sidebar ul li.visited > a .read-icon {
	color: var(--MENU-VISITED-color);
}

#body a.highlight:hover,
#body a.highlight {
	text-decoration: underline;
}

#body a.highlight:after {
	display: none;
	content: "";
	height: 1px;
	width: 0;
	transition: none;
	background-color: var(--MAIN-LINK-HOVER-color);
}

#sidebar {
	background-color: var(--MENU-SECTIONS-BG-color);
}

#sidebar #header-wrapper {
	background: var(--MENU-HEADER-BG-color);
	color: var(--MENU-SEARCH-BOX-color);
	border-color: var(--MENU-HEADER-BORDER-color);
}

#sidebar .searchbox {
	border-color: var(--MENU-SEARCH-BOX-color);
	background: var(--MENU-SEARCH-BG-color);
}

#sidebar ul.topics > li.parent,
#sidebar ul.topics > li.active {
	background: var(--MENU-SECTIONS-ACTIVE-BG-color);
}

#sidebar .searchbox * {
	color: var(--MENU-SEARCH-BOX-ICONS-color);
}

#sidebar a {
	color: var(--MENU-SECTIONS-LINK-color);
}

#sidebar a:hover {
	color: var(--MENU-SECTIONS-LINK-HOVER-color);
	font-weight: bold !important;
}

#sidebar ul li.active > a {
	background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
	color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
	font-weight: bold !important;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

#sidebar hr {
	border-color: var(--MENU-SECTION-HR-color);
}

.monospace {
	background: var(--MENU-INPAGE-BACKGROUND);
	font-family: monospace;
	white-space: pre;
	padding: 0 1rem;
}

.monospace a {
	text-decoration: underline !important;
	font-weight: bold;
	cursor: pointer;
}

.monospace a:hover:before {
	display: inline-block;
	width: 1.2rem;
	margin-left: -1.2rem;
	content: "\f0c1";
	font-family: "Font Awesome 5 Free";
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code {
	text-transform: none !important;
}

h1 code {
	font-size: 3rem !important;
}

h2 code {
	font-size: 2.5rem !important;
}

h3 code {
	font-size: 2rem !important;
}

h4 code {
	font-size: 1.5rem !important;
}

h5 code {
	font-size: 1rem !important;
}

a code {
	text-decoration: underline;
}

.tab-nav-button {
	font-size: 1rem !important;
	padding: 10px 15px !important;
}

.tab-panel {
	margin-bottom: 3rem !important;
}

.tab-content {
	padding: 20px !important;
}

.tab-content p {
	margin: 0 0 1rem 0;
}

.tab-item pre:last-child {
	margin: 0 !important;
}

hr {
	margin: 4rem 0 !important;
}

h2 a {
	display: block;
}

.cards {
	display: flex;
	gap: 30px;
	margin: 4rem 0;
}

.card {
	display: block;
	padding: 30px;
	box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.card .title {
	margin-top: 2rem;
}

.columns {
	display: flex;
	gap: 30px;
}

.columns .column {
	flex: 1;
}

svg {
	stroke: black;
	stroke-width: 0.4;
	height: 80px;
}

svg path {
	stroke-width: 0.4;
}

.ce-languages li a {
	margin-right: 9px;
}

@media only screen and (max-width: 1000px) {
	.cards {
		display: block;
	}

	.card {
		margin-bottom: 40px;
	}

	.columns {
		display: block;
	}
}

.link-divider {
	padding: 0 6px;
	color: rgba(0, 0, 0, 0.3);
}