website-v2/static/css/custom.css - streampipes-website - Git at Google

 /*
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
  * this work for additional information regarding copyright ownership.
  * The ASF licenses this file to You under the Apache License, Version 2.0
  * (the "License"); you may not use this file except in compliance with
  * the License.  You may obtain a copy of the License at
  *
  *    http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
  */

 /* your custom css */

 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
 }

 @media only screen and (min-width: 1024px) {
     .separateOnPageNav .wrapper, .separateOnPageNav .headerWrapper.wrapper {
         max-width: 1400px;
     }
 }

 @media only screen and (max-width: 1023px) {
 }

 @media only screen and (min-width: 1400px) {
 }

 @media only screen and (min-width: 1500px) {
 }

 .main-panel-green {
     background:green;
 }

 .main-panel-text {
     color:white;
 }

 .slick-next {
     right: -45px;
 }

 .slick-next:before, .slick-prev:before {
 }

 .slick-next, .slick-prev {
     z-index: 100;
     width: 40px;
     height: 40px;
 }

 .slick-prev {
     left: -45px;
 }

 .slick-next:before, .slick-prev:before {
     font-size: 40px;
 }

 .slick-dots li {
     width: 30px;
 }

 .slick-dots li button {
     width: 30px;
     height: 30px;
 }

 .slick-dots {
     bottom: -25px;
 }

 .slick-dots li button:before {
     font-size: 20px;
     color:rgb(57, 181, 74);
     border-radius: 50%;
     border: 3px solid white;
     line-height: 22px;
     opacity: 0.55;
     background: white;

 }

 .slick-dots li.slick-active button:before {
     color: rgb(57, 181, 74);
     opacity: 0.9;
 }

 .sp-color-green {
     color: rgb(57, 181, 74);
 }

 li.installation-step {
     list-style: none;
     margin-top: 15px;
     margin-bottom: 15px;
 }

 .wrapper-container {
     display: inline-grid;
 }

 .wrapper-full {
     grid-column: span 12;
 }

 .wrapper-step {
     grid-column: span 2;
     margin-right: 10px;
 }

 .wrapper-instruction {
     grid-column: spn 10;
 }

 body {
     font-family: 'Roboto', sans-serif !important;
 }

 hr {
     background-color: #e1e4e8;
     border: 0;
     height: .25em;
     margin: 24px 0;
     padding: 0;
 }

 .pe-image-documentation {
     box-shadow: 0 0 3px #555;
     padding: 5px;
 }

 .pe-grid-container {
     display: grid;
     /*grid-template-rows:200px 1fr 100px;*/
     grid-template-columns: 50% 50%;
 }

 .pe-container-item {
     height: 180px;
     border-radius: 4px;
     background-color: #ffffff;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
     border: solid 1px #dedede;
     padding: 8px 0px 2px;
     color: #262626;
     display: inline-block;
     margin: 15px 7px 0 7px;
     vertical-align: top;
     text-align: left;
     position: relative;
 }

 .pe-container-item-sink {
     border-top: 4px solid #3F51B5;
 }

 .pe-container-item-processor {
     border-top: 4px solid #009688;
 }

 .pe-container-item-header {
     display: flex;
     flex-direction: row;
     margin-bottom: 5px;
     padding-top: 5px;
     padding-left: 16px;
     padding-right: 16px;
 }

 .pe-container-item-icon {
     box-shadow: 0 0 2px #555;
     width: 75px;
     height: 75px;
     display: inline;
     float: left;
     padding: 10px;
     margin-right: 20px;
     margin-top: 10px;
 }

 .pe-container-item-header-pe {
     display: flex;
     flex-direction: column;
     flex: 1;
 }

 .pe-container-item-label {
     color: white;
     float: right;
     padding: 2px 4px;
     font-size: 9pt;
     align-self: flex-end;
 }

 .pe-container-item-label-name {
     float: left;
     margin-top: auto;
     font-weight: bold;
     font-size: 14pt;
 }

 .pe-container-item-label-processor {
     background: #009688;
 }

 .pe-container-item-label-sink {
     background: #3F51B5
 }

 .pe-container-item-body {
     padding-left: 16px;
     padding-right: 16px;
     margin-top: 10px;
     font-size: 11pt;
 }

 .pe-icon {
     display: inline-block;
     margin-left: auto;
     margin-right: auto;
     max-height: 100%;
     width: 100%;
 }

 .pe-icon-sink {
     border: 2px solid #3F51B5;
 }

 .pe-icon-processor {
     border: 2px solid #009688;
 }

 .pe-container-item-footer {
     display: grid;
     grid-template-columns: 33% 33% 33%;
     position: absolute;
     bottom: 2px;
     font-size: 9pt;
     color: gray;
     width: 100%;
     align-items: center;
     justify-items: center;
 }


 .container .wrapper h2 {
     font-weight: bolder;
     font-family: 'Roboto', sans-serif;
 }

 .container .wrapper h3 {
     font-weight: bolder;
     font-family: 'Roboto', sans-serif;
 }

 .blog-image {
     max-width: 60%;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

 .container .wrapper h4 {
     font-weight: bolder;
     font-family: 'Roboto', sans-serif;
 }

 h1, h2, h3, h4, h5 {
     font-weight: bolder;
     font-family: 'Roboto', sans-serif;
 }

 p {
     text-align: justify;
 }

 .community {
     margin-bottom: 40px;
 }

 .smaller {
     margin-top: 25pt;
     font-size: 18pt;
 }

 .screenshot {
     margin-top: 25pt;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
 }

 .sp-background {
     background-color: rgba(255, 255, 255, 0.6);
     background-image: linear-gradient(90deg, rgba(216, 216, 216, 0.3) 10%, transparent 0%), linear-gradient(rgba(216, 216, 216, .3) 10%, transparent 0%);
     background-size: 15px 15px;
 }

 .sp-button {
     background: rgb(27, 20, 100);
     border-radius: 3px;
     border: none;
     color: rgba(255, 255, 255, 0.75);
     display: inline-block;
     font-size: 14px;
     font-weight: 400;
     line-height: 1.2em;
     padding: 10px;
     text-decoration: none !important;
     text-transform: uppercase;
     transition: background 0.3s, color 0.3s;
 }

 .slick-prev:before, .slick-next:before {
     color: #39b54a;
 }

 .blockElement {
     border: 3px solid rgb(27, 20, 100);
     border-radius: 5px;
     padding: 20px;
     background-color: rgba(255, 255, 255, 0.6);
 }

 .imageAlignTop .blockImage {
     max-width: 110px;
 }

 .fixedHeaderContainer {
     background: white;
     box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.15);
 }

 .fixedHeaderContainer a {
     color: rgb(27, 20, 100);
 }

 .fixedHeaderContainer a h3 {
     color: rgb(27, 20, 100);
 }


 .navigationSlider .slidingNav ul li a {
     color: rgb(27, 20, 100);
 }

 .navigationSlider .slidingNav ul li a:hover, .navigationSlider .slidingNav ul li.siteNavItemActive a, .navigationSlider .slidingNav ul li.siteNavGroupActive a {
     background: white;
     color: #39b54a;
     font-weight: bold;
 }

 .padding-50 {
     padding-left: 50px;
     padding-right: 50px;
 }

 .margin-top-100 {
     margin-top:100px;
 }

 .sp-blue {
     color: #1b1464;
 }

 .sp-green {
     color: rgb(57,181,74);
 }

 .alert-info {
     color: #0c5460;
     background-color: #d1ecf1;
     border-color: #bee5eb;
 }

 .alert {
     position: relative;
     padding: .75rem 1.25rem;
     margin-bottom: 1rem;
     border: 1px solid transparent;
     border-radius: .25rem;
 }

 .docs-image {
     max-width: 80%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     /*border: 2px solid rgb(57,181,74);*/
     display: block;
     margin: 20px auto;
 }

 .docs-image-no-shadow {
     box-shadow: none;
 }

 .docs-image-small {
     max-width: 70%;
     margin-top: 20px;
     margin-bottom: 20px;
 }

 .docs-carousel {
     max-width: 85%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 40px;
 }

 .slick-dotted.slick-slider {
     margin-bottom: 40px;
 }

 .grid {
     display: grid;
     grid-auto-flow: column;
 }
 .grid .toc-box {
     height: 100%;
 }
 .grid.col-3 {
     grid-gap: 1rem;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: unset;
 }
 .grid.col-3 .toc-box {
     margin: 0;
 }


 @media screen and (max-width: 600px) {
     .col-3 {
         width: 100%;
     }
 }

 .toc-section-header {
     margin-bottom: 10px;
 }

 .toc-header {
     background: rgb(219, 219, 219);
     color: #2d2d2d;
     font-weight: bold;
     padding: 10px;
     font-size: 14pt;
 }

 .toc-content {
     padding: 10px;
 }

 .toc-box {
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     margin: 10px;
 }

 .thick-border-left {
     text-decoration: underline;
     padding-left: 10px;
     text-decoration-style: solid;
     text-underline-offset: 15px;
 }

 .slide-thumb-active {
     border: 2px solid var(--color-primary);
 }

 .header-link:hover {
     opacity: 0.6;
 }

 .header-link:before {
     content: "";
     display: flex;
     height: 24px;
     width: 24px;
 }

 .h-github:before {
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
 }

 .h-twitter:before {
     background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgNC41NTdjLS44ODMuMzkyLTEuODMyLjY1Ni0yLjgyOC43NzUgMS4wMTctLjYwOSAxLjc5OC0xLjU3NCAyLjE2NS0yLjcyNC0uOTUxLjU2NC0yLjAwNS45NzQtMy4xMjcgMS4xOTUtLjg5Ny0uOTU3LTIuMTc4LTEuNTU1LTMuNTk0LTEuNTU1LTMuMTc5IDAtNS41MTUgMi45NjYtNC43OTcgNi4wNDUtNC4wOTEtLjIwNS03LjcxOS0yLjE2NS0xMC4xNDgtNS4xNDQtMS4yOSAyLjIxMy0uNjY5IDUuMTA4IDEuNTIzIDYuNTc0LS44MDYtLjAyNi0xLjU2Ni0uMjQ3LTIuMjI5LS42MTYtLjA1NCAyLjI4MSAxLjU4MSA0LjQxNSAzLjk0OSA0Ljg5LS42OTMuMTg4LTEuNDUyLjIzMi0yLjIyNC4wODQuNjI2IDEuOTU2IDIuNDQ0IDMuMzc5IDQuNiAzLjQxOS0yLjA3IDEuNjIzLTQuNjc4IDIuMzQ4LTcuMjkgMi4wNCAyLjE3OSAxLjM5NyA0Ljc2OCAyLjIxMiA3LjU0OCAyLjIxMiA5LjE0MiAwIDE0LjMwNy03LjcyMSAxMy45OTUtMTQuNjQ2Ljk2Mi0uNjk1IDEuNzk3LTEuNTYyIDIuNDU3LTIuNTQ5eiIvPjwvc3ZnPg==") no-repeat;
 }

 .h-linkedin:before {
     background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMGgtMTRjLTIuNzYxIDAtNSAyLjIzOS01IDV2MTRjMCAyLjc2MSAyLjIzOSA1IDUgNWgxNGMyLjc2MiAwIDUtMi4yMzkgNS01di0xNGMwLTIuNzYxLTIuMjM4LTUtNS01em0tMTEgMTloLTN2LTExaDN2MTF6bS0xLjUtMTIuMjY4Yy0uOTY2IDAtMS43NS0uNzktMS43NS0xLjc2NHMuNzg0LTEuNzY0IDEuNzUtMS43NjQgMS43NS43OSAxLjc1IDEuNzY0LS43ODMgMS43NjQtMS43NSAxLjc2NHptMTMuNSAxMi4yNjhoLTN2LTUuNjA0YzAtMy4zNjgtNC0zLjExMy00IDB2NS42MDRoLTN2LTExaDN2MS43NjVjMS4zOTYtMi41ODYgNy0yLjc3NyA3IDIuNDc2djYuNzU5eiIvPjwvc3ZnPg==") no-repeat;
 }
	/*
	* Licensed to the Apache Software Foundation (ASF) under one or more
	* contributor license agreements. See the NOTICE file distributed with
	* this work for additional information regarding copyright ownership.
	* The ASF licenses this file to You under the Apache License, Version 2.0
	* (the "License"); you may not use this file except in compliance with
	* the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*
	*/

	/* your custom css */

	@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
	}

	@media only screen and (min-width: 1024px) {
	.separateOnPageNav .wrapper, .separateOnPageNav .headerWrapper.wrapper {
	max-width: 1400px;
	}
	}

	@media only screen and (max-width: 1023px) {
	}

	@media only screen and (min-width: 1400px) {
	}

	@media only screen and (min-width: 1500px) {
	}

	.main-panel-green {
	background:green;
	}

	.main-panel-text {
	color:white;
	}

	.slick-next {
	right: -45px;
	}

	.slick-next:before, .slick-prev:before {
	}

	.slick-next, .slick-prev {
	z-index: 100;
	width: 40px;
	height: 40px;
	}

	.slick-prev {
	left: -45px;
	}

	.slick-next:before, .slick-prev:before {
	font-size: 40px;
	}

	.slick-dots li {
	width: 30px;
	}

	.slick-dots li button {
	width: 30px;
	height: 30px;
	}

	.slick-dots {
	bottom: -25px;
	}

	.slick-dots li button:before {
	font-size: 20px;
	color:rgb(57, 181, 74);
	border-radius: 50%;
	border: 3px solid white;
	line-height: 22px;
	opacity: 0.55;
	background: white;

	}

	.slick-dots li.slick-active button:before {
	color: rgb(57, 181, 74);
	opacity: 0.9;
	}

	.sp-color-green {
	color: rgb(57, 181, 74);
	}

	li.installation-step {
	list-style: none;
	margin-top: 15px;
	margin-bottom: 15px;
	}

	.wrapper-container {
	display: inline-grid;
	}

	.wrapper-full {
	grid-column: span 12;
	}

	.wrapper-step {
	grid-column: span 2;
	margin-right: 10px;
	}

	.wrapper-instruction {
	grid-column: spn 10;
	}

	body {
	font-family: 'Roboto', sans-serif !important;
	}

	hr {
	background-color: #e1e4e8;
	border: 0;
	height: .25em;
	margin: 24px 0;
	padding: 0;
	}

	.pe-image-documentation {
	box-shadow: 0 0 3px #555;
	padding: 5px;
	}

	.pe-grid-container {
	display: grid;
	/grid-template-rows:200px 1fr 100px;/
	grid-template-columns: 50% 50%;
	}

	.pe-container-item {
	height: 180px;
	border-radius: 4px;
	background-color: #ffffff;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
	border: solid 1px #dedede;
	padding: 8px 0px 2px;
	color: #262626;
	display: inline-block;
	margin: 15px 7px 0 7px;
	vertical-align: top;
	text-align: left;
	position: relative;
	}

	.pe-container-item-sink {
	border-top: 4px solid #3F51B5;
	}

	.pe-container-item-processor {
	border-top: 4px solid #009688;
	}

	.pe-container-item-header {
	display: flex;
	flex-direction: row;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-left: 16px;
	padding-right: 16px;
	}

	.pe-container-item-icon {
	box-shadow: 0 0 2px #555;
	width: 75px;
	height: 75px;
	display: inline;
	float: left;
	padding: 10px;
	margin-right: 20px;
	margin-top: 10px;
	}

	.pe-container-item-header-pe {
	display: flex;
	flex-direction: column;
	flex: 1;
	}

	.pe-container-item-label {
	color: white;
	float: right;
	padding: 2px 4px;
	font-size: 9pt;
	align-self: flex-end;
	}

	.pe-container-item-label-name {
	float: left;
	margin-top: auto;
	font-weight: bold;
	font-size: 14pt;
	}

	.pe-container-item-label-processor {
	background: #009688;
	}

	.pe-container-item-label-sink {
	background: #3F51B5
	}

	.pe-container-item-body {
	padding-left: 16px;
	padding-right: 16px;
	margin-top: 10px;
	font-size: 11pt;
	}

	.pe-icon {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	max-height: 100%;
	width: 100%;
	}

	.pe-icon-sink {
	border: 2px solid #3F51B5;
	}

	.pe-icon-processor {
	border: 2px solid #009688;
	}

	.pe-container-item-footer {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	position: absolute;
	bottom: 2px;
	font-size: 9pt;
	color: gray;
	width: 100%;
	align-items: center;
	justify-items: center;
	}


	.container .wrapper h2 {
	font-weight: bolder;
	font-family: 'Roboto', sans-serif;
	}

	.container .wrapper h3 {
	font-weight: bolder;
	font-family: 'Roboto', sans-serif;
	}

	.blog-image {
	max-width: 60%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

	.container .wrapper h4 {
	font-weight: bolder;
	font-family: 'Roboto', sans-serif;
	}

	h1, h2, h3, h4, h5 {
	font-weight: bolder;
	font-family: 'Roboto', sans-serif;
	}

	p {
	text-align: justify;
	}

	.community {
	margin-bottom: 40px;
	}

	.smaller {
	margin-top: 25pt;
	font-size: 18pt;
	}

	.screenshot {
	margin-top: 25pt;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	}

	.sp-background {
	background-color: rgba(255, 255, 255, 0.6);
	background-image: linear-gradient(90deg, rgba(216, 216, 216, 0.3) 10%, transparent 0%), linear-gradient(rgba(216, 216, 216, .3) 10%, transparent 0%);
	background-size: 15px 15px;
	}

	.sp-button {
	background: rgb(27, 20, 100);
	border-radius: 3px;
	border: none;
	color: rgba(255, 255, 255, 0.75);
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2em;
	padding: 10px;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background 0.3s, color 0.3s;
	}

	.slick-prev:before, .slick-next:before {
	color: #39b54a;
	}

	.blockElement {
	border: 3px solid rgb(27, 20, 100);
	border-radius: 5px;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.6);
	}

	.imageAlignTop .blockImage {
	max-width: 110px;
	}

	.fixedHeaderContainer {
	background: white;
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.15);
	}

	.fixedHeaderContainer a {
	color: rgb(27, 20, 100);
	}

	.fixedHeaderContainer a h3 {
	color: rgb(27, 20, 100);
	}


	.navigationSlider .slidingNav ul li a {
	color: rgb(27, 20, 100);
	}

	.navigationSlider .slidingNav ul li a:hover, .navigationSlider .slidingNav ul li.siteNavItemActive a, .navigationSlider .slidingNav ul li.siteNavGroupActive a {
	background: white;
	color: #39b54a;
	font-weight: bold;
	}

	.padding-50 {
	padding-left: 50px;
	padding-right: 50px;
	}

	.margin-top-100 {
	margin-top:100px;
	}

	.sp-blue {
	color: #1b1464;
	}

	.sp-green {
	color: rgb(57,181,74);
	}

	.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
	}

	.alert {
	position: relative;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;
	}

	.docs-image {
	max-width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	/border: 2px solid rgb(57,181,74);/
	display: block;
	margin: 20px auto;
	}

	.docs-image-no-shadow {
	box-shadow: none;
	}

	.docs-image-small {
	max-width: 70%;
	margin-top: 20px;
	margin-bottom: 20px;
	}

	.docs-carousel {
	max-width: 85%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	}

	.slick-dotted.slick-slider {
	margin-bottom: 40px;
	}

	.grid {
	display: grid;
	grid-auto-flow: column;
	}
	.grid .toc-box {
	height: 100%;
	}
	.grid.col-3 {
	grid-gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: unset;
	}
	.grid.col-3 .toc-box {
	margin: 0;
	}


	@media screen and (max-width: 600px) {
	.col-3 {
	width: 100%;
	}
	}

	.toc-section-header {
	margin-bottom: 10px;
	}

	.toc-header {
	background: rgb(219, 219, 219);
	color: #2d2d2d;
	font-weight: bold;
	padding: 10px;
	font-size: 14pt;
	}

	.toc-content {
	padding: 10px;
	}

	.toc-box {
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin: 10px;
	}

	.thick-border-left {
	text-decoration: underline;
	padding-left: 10px;
	text-decoration-style: solid;
	text-underline-offset: 15px;
	}

	.slide-thumb-active {
	border: 2px solid var(--color-primary);
	}

	.header-link:hover {
	opacity: 0.6;
	}

	.header-link:before {
	content: "";
	display: flex;
	height: 24px;
	width: 24px;
	}

	.h-github:before {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
	}

	.h-twitter:before {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgNC41NTdjLS44ODMuMzkyLTEuODMyLjY1Ni0yLjgyOC43NzUgMS4wMTctLjYwOSAxLjc5OC0xLjU3NCAyLjE2NS0yLjcyNC0uOTUxLjU2NC0yLjAwNS45NzQtMy4xMjcgMS4xOTUtLjg5Ny0uOTU3LTIuMTc4LTEuNTU1LTMuNTk0LTEuNTU1LTMuMTc5IDAtNS41MTUgMi45NjYtNC43OTcgNi4wNDUtNC4wOTEtLjIwNS03LjcxOS0yLjE2NS0xMC4xNDgtNS4xNDQtMS4yOSAyLjIxMy0uNjY5IDUuMTA4IDEuNTIzIDYuNTc0LS44MDYtLjAyNi0xLjU2Ni0uMjQ3LTIuMjI5LS42MTYtLjA1NCAyLjI4MSAxLjU4MSA0LjQxNSAzLjk0OSA0Ljg5LS42OTMuMTg4LTEuNDUyLjIzMi0yLjIyNC4wODQuNjI2IDEuOTU2IDIuNDQ0IDMuMzc5IDQuNiAzLjQxOS0yLjA3IDEuNjIzLTQuNjc4IDIuMzQ4LTcuMjkgMi4wNCAyLjE3OSAxLjM5NyA0Ljc2OCAyLjIxMiA3LjU0OCAyLjIxMiA5LjE0MiAwIDE0LjMwNy03LjcyMSAxMy45OTUtMTQuNjQ2Ljk2Mi0uNjk1IDEuNzk3LTEuNTYyIDIuNDU3LTIuNTQ5eiIvPjwvc3ZnPg==") no-repeat;
	}

	.h-linkedin:before {
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgMGgtMTRjLTIuNzYxIDAtNSAyLjIzOS01IDV2MTRjMCAyLjc2MSAyLjIzOSA1IDUgNWgxNGMyLjc2MiAwIDUtMi4yMzkgNS01di0xNGMwLTIuNzYxLTIuMjM4LTUtNS01em0tMTEgMTloLTN2LTExaDN2MTF6bS0xLjUtMTIuMjY4Yy0uOTY2IDAtMS43NS0uNzktMS43NS0xLjc2NHMuNzg0LTEuNzY0IDEuNzUtMS43NjQgMS43NS43OSAxLjc1IDEuNzY0LS43ODMgMS43NjQtMS43NSAxLjc2NHptMTMuNSAxMi4yNjhoLTN2LTUuNjA0YzAtMy4zNjgtNC0zLjExMy00IDB2NS42MDRoLTN2LTExaDN2MS43NjVjMS4zOTYtMi41ODYgNy0yLjc3NyA3IDIuNDc2djYuNzU5eiIvPjwvc3ZnPg==") no-repeat;
	}