/*!
 * Checkmk (https://checkmk.com)
 * @link https://checkmk.com
 * @copyright Copyright (c) 2022 Tribe29 GmbH. (https://www.tribe29.com)
 *
 * Addons for nagscreen and overlay for main page. Merge to primary CSS when sufficiently tested.
 */

/* define a scroll margin */

main {
	scroll-margin-top: 5.5rem;
}

#nagolddocsouter {
	position: fixed;
	right: 20px;
	top: 90px;
	z-index: 100;
	width: 280px;
}

#nagolddocsinner {
	position: relative;
	padding: 1rem;
	padding-bottom: 0rem;
	font-family: helvetica, tahoma;
	border: 2px solid red;	
	margin:0 auto;
	/* -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px; */
	background: white;
	box-shadow: 5px 5px 10px 6px rgba(0,0,0,0.30);
}

#nagolddocsinner:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 68px;
	top: -17px;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-bottom: 17px solid red;
}

#nagolddocsinner:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 71px;
	top: -14px;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 14px solid white;
}

#nagolddocsinner p.right {
	text-align: right;
}

#glossary_overlay {
	display: none;
	position: fixed;
	top: 10px;
	left: 10px;
	border: 1px solid lightgray;
	z-index: 1100;
	background-color: white;
	width: 40%;
	padding: 4px;
	box-shadow: 0 3px 6px rgba(29,29,27,.2);
}

#toctitle {
	text-transform: none;
}

/* Find external links and glossary links: */

main div.sectionbody a[href^="http"] {
	background: transparent url(../../assets/images/external_links.svg) center right no-repeat;
	background-size: 14px;
    padding-right: 16px;
}

main div.sectionbody a[href*="glossar.html"] {
	background: transparent url(../../assets/images/info.svg) center right no-repeat;
	background-size: 14px;
    padding-right: 16px;
}

/* remove upper case for h3 */

.main-nav h3 {
	text-transform: none;
}

/* Admonitions can be used to highlight important text blocks */

div.admonitionblock {
	margin-bottom: 1rem;
}

div.admonitionblock table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    border-style: solid;
    border-width: .15rem;
    border-color: lightgray;
    border-radius: .35rem;
}

div.admonitionblock table tr td {
    margin: 0px;
}

div.admonitionblock table tr td.icon {
    padding: 4px;
    width: 40px;
    vertical-align: top;
}

div.admonitionblock table tr td.content {
    padding: 6px;
}

/* Colors for tips */

div.admonitionblock.tip table {
    border-color: lightgray;
}

div.admonitionblock.tip table tr td.icon {
    background-color: lightgray;
}

/* Colors for important hints */

div.admonitionblock.important table {
    border-color: #ffef11;
}

div.admonitionblock.important table tr td.icon {
    background-color: #ffef11;
}

/* TUI screenshots taken with VTE to HTML export */

div.tuiscreen {
    width:100%;
}

div.tuiscreen div.tuicenter, div.tcolscreen div.tcolcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.tuiscreen div.tuicenter pre {
    background-color:#12488B;
    padding:1em;
    padding-left:0.5em;
}

div.tcolscreen div.tcolcenter pre {
    padding:1em;
    padding-left:0.5em;
}

/* Three column layout and overlay for new landing page */

.morelink { text-align: right; }
.outercols {
	/* clear: both; */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 30px;
}
.outercols .col {
	/* float: left;
	width: 33%;
	margin-left: 0px;
	margin-right: 0px; */
	flex: 33.3%;
	padding-left: 0px;
	padding-right: 40px;
}
/* .outercols:after {
	content: "";
	display: table;
	clear: both;
} */
.innercols {
	display: flex;
}
.innercols .col  {
	flex: 50%; 
}

.lbox img {
	float: right;
}
.lbox {
	clear: both;
}
img.ytpreview { width: 100%; }

/* Consistent hover */

div.main-nav__content h3:hover {
	color: #15d1a0;
}

div.main-nav__content h3 div.ulist  ul {
	transition-property: display;
	transition-duration: 1s;
}

#topicopaque {
	position: absolute; top: 0px; left: 0px; 
	height: 100%;
	width: 100%;
	background-color:rgba(255,255,255,0.90); 
	z-index: 129;
	display: none;
}

#topicshadow {
	position: relative;
	margin: 50px;
	margin-top: 30px;
	background-color: whitesmoke;
	box-shadow: 5px 5px 10px 6px rgba(0,0,0,0.15);
	padding: 20px;
}

div.ytpreview {
	padding: 0px;
	position: relative;
	float: right;
}

div.ytwrapper {
	max-width: 480px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

div.ytvideo {
	position: relative;
	padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */
	/* padding-bottom: 62.5%; - 16:10 aspect ratio */
	/* padding-bottom: 75%; - 4:3 aspect ratio */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

div.ytvideo iframe,
div.ytvideo object,
div.ytvideo embed {
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Modifications for featured topic on start page */

#ytbox {
	position: relative;
	cursor: pointer;
}

.ytbanderole {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color:rgba(0,0,0,0.50); 
	padding: 4px;
	color: white;
}

#morebutton {
	border-radius: 4px;
	background-color: #15d1a0;
	color: white;
	padding: 4px;
}

#morebutton:hover, #morebutton:visited, #morebutton:active, 
div.closeonly a:hover, div.closeonly a:visited, div.closeonly a:active, div.closeonly a:link
{
	border-radius: 4px;
	background-color: #15d1a0;
	color: white;
	padding: 4px;
}

p.buttonright {
	text-align: right;
}

/* Small fixes for syntax highlighting */

span.hll span.tok-go,
span.hll span.tok-n,
span.hll span.tok-p,
span.hll span.tok-s2,
span.hll span.tok-nb {
	color: black;
}

/* When navigating in the search, highlight unified */

div.search-modal__results.modal-body {
	padding: 0rem;
}

div.search-modal__results.modal-body div.search-modal__results__result {
	padding: 1rem;
	margin-bottom: 0rem;
	margin: 0rem;
}

/* Search got a breadcrumb */

div.header-top__search__results__breadcrumb {
	font-size: 80%;
	font-style: italic;
}

/* Treat the hint on all results and search help as the elements above */

a.header-top__search__results__more {
	border-bottom: 1px solid #d1d7e2;
}

a.header-top__botbox__first {
	display: block;
	text-align: center;
	font-weight: 700;
	margin: 1.75rem;
	margin-bottom: 1.25rem;
}

a.header-top__botbox__button {
	display: block;
	text-align: center;
	/* font-weight: 700; */
	margin: 1.75rem;
	margin-bottom: 2.5rem;
	margin-top: 1.25rem;
}

a.header-top__botbox__button span {
	color: white;
	background: linear-gradient(270deg, #6966E5 0%, #8380FF 100%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	/* background-image: url(/assets/images/ask_checkmk_ai.svg);
	background-repeat: no-repeat; */
	padding: 0.75rem 1.5rem;
}

a.header-top__botbox__button span img {
	display: inline-block;
	vertical-align: top;
	height: 1.25rem;
	width: 1.25rem;
	margin-right: 0.6rem;
}

span.tui-back-black {
	background-color: #1d1d1b;
}

span.tui-back-grey {
	background-color: #6c757d;
}

span.tui-back-blue {
	background-color: #0086ff;
}

span span.tui-foreground-black {
	color: #1d1d1b;
}

span span.tui-foreground-grey {
	color: #6c757d;
}

span span.tui-foreground-white {
	color: #ffffff;
}

span span.tui-foreground-orange {
	color: #ffa042;
}

span span.tui-foreground-red {
	color: #ff3232;
}

span span.tui-foreground-blue {
	color: #0086ff;
}

span span.tui-foreground-teal {
	color: #2aa1b3;
}

/* Media specific stuff goes here */

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

@media only screen and (max-width: 1200px) {
	/* fine adjustments for the new landing page */
	#topicshadow {
		margin: 15px;
		margin-top: 15px;
		padding: 8px;
	}
	img.ytpreview { 
		width: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	h3, h4 {
		margin-top: 15px;
	}
}

@media only screen and (max-width: 992px) {
	#nagolddocsinner:before {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;
		left: 148px;
		top: -17px;
	}
	#nagolddocsinner:after {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;
		left: 151px;
		top: -14px;
	}
	/* fine adjustments for the new landing page */
	#nagolddocsinner:before {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;
		left: 148px;
		top: -17px;
	}
	#nagolddocsinner:after {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;
		left: 151px;
		top: -14px;
	}
	/*  columns for featured topics are stacked */
	.outercols {
		flex-wrap: nowrap;
		flex-direction: column;
	}
	.outercols .col {
		width: 100%;
	}
	.innercols {
		flex-wrap: nowrap;
		flex-direction: column;
	}
	.innercols .col  {
		width: 100%; 
	}
	#topicshadow {
		margin: 3px;
		margin-top: 0px;
		padding: 4px;
	}
	img.ytpreview { 
		width: 80%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	h3, h4 {
		margin-top: 15px;
	}
}

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

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

/* min-width is only used for centering on landing page */
@media only screen and (min-width: 1650px) and (min-height: 980px) {
	#topicopaque {
		position: absolute; top: 0px; left: 0px; 
	}
	#topicshadow {
		margin: 50px;
		margin-top: 0px;
		position: absolute; top: 50%;
		transform: translate(0%, -50%);
	}
}

/* enhance printing */

@media print {
	div.header-top {
		display: none;
	}
}

/* only conference banner */

div.footer_banner {
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 9999;
	width: 100%;
	background-color: rgb(30, 38, 46);
	padding: 12px 80px;
	min-height: 56px;
}

div.footer_banner_content {
	flex-direction: row;
	align-items: center;
	display: flex;
	justify-content: center;
	/* max-width: 1320px; */
}

div.footer_banner_content div.footer_banner_content_center {
	padding: 0 9%;
}

div.footer_banner_content div.footer_banner_content_center p {
	color: #fff;
	font-weight: 300;
	text-align: center;
	font-size: 1.25rem;
}

div.footer_banner_content div.footer_banner_content_left {
	margin-bottom: 0;
	width: 240px;
	min-width: 240px;
}

div.footer_banner_content div.footer_banner_content_left img {
	width: 100%;
	height: auto;
	vertical-align: middle;
	box-sizing: border-box;
}

div.footer_banner_content div.footer_banner_content_right a:link,
div.footer_banner_content div.footer_banner_content_right a:active,
div.footer_banner_content div.footer_banner_content_right a:hover,
div.footer_banner_content div.footer_banner_content_right a:visited {
	font-size: 1.25rem;
	font-weight: 500;
	padding: 0.375rem 0.75rem ;
	line-height: 1.5;
	display: inline-block;
	white-space: nowrap;
	background-color: #15d1a0;
	color: white;
	border-radius: 3px;
	
}

div.footer_banner_content div.footer_banner_content_right a:hover {
	background-color: #38d8ae;
}

div.footer_banner_content div.footer_banner_content_right a:active {
	color: black;
}

div.footer_banner_close {
	position: absolute;
	top: 8px;
	right: 8px;
}
div.footer_banner_close button {
	background-color: transparent;
	background-image: url(/assets/images/banner_close.svg);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	border: none;
	box-shadow: none;
	height: 32px;
	outline: none;
	width: 32px;
}

div.editioninfobox a.changeuserguide:link, div.editioninfobox a.changeuserguide:hover, div.editioninfobox a.changeuserguide:visited {
	text-decoration: underline;
	text-decoration-color: #15d1a0;
	text-decoration-thickness: .125rem;
	text-underline-offset: .25rem;
}