/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . */
/* . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . */

/* special containers for code formatting, markup processing etc */

.markup-content { display: flex; flex-direction: column !important; align-items: flex-start; align-content: flex-start; padding-bottom: 100px  }
.markup-content > * { width: calc(100%);  font-size: 15px; line-height: 26px; }
/*.markup-content *:first-child { margin-top: 0 !important }*/
.markup-content > pre { margin: 2px 0 8px 0; padding: 15px; border-radius:3px; /*background: rgb(248, 245, 239)*/ background: rgb(35, 35, 35) }
.markup-content pre code { background: none !important; padding:0px !important; }
.markup-content > *:first-child { margin-top: 0px }
.markup-content a { color:var(--highlight); text-decoration: none }
.markup-content a:hover span{ text-decoration: underline }
.markup-content mark { background-color: rgb(254, 231, 96); padding: 0 4px; border-radius: 1px }
.markup-content p { height: auto; margin: 16px 0 0 0; }

.markup-content h2 { font-size: 24px; line-height: 32px; font-weight:500; margin:80px 0 0 0; color: #000 }
.markup-content h3 { font-size: 18px; line-height: 24px; font-weight:500; margin:35px 0 0 0; color: #000 }
.markup-content h4 { font-size: 16px; line-height: 20px; font-weight:400; margin:25px 0 0 0; color: #000  }

.markup-content p, .markup-content ul > li { line-height: 150% }
.markup-content blockquote { margin: 0; padding: 5px 0 5px 16px; border-left:6px solid var(--coll3) }
.markup-content ul { margin: 16px 0 0 16px; padding: 0 0 0 16px } 
.markup-content ul > li:not(last-child) { padding-bottom: 5px }
.markup-content hr { border-color: rgb(0, 137, 255); margin-top: 20px }
.markup-content p > code:not(.code), .markup-content ul > li > code:not(.code)  { 
	border-radius: 3px; 
	display: inline-block; 
	padding: 0 4px;
	background: rgba(212, 212, 212, 0.5);
	border:1px solid rgb(218, 218, 218);
	cursor: pointer
}
.markup-content p > code:not(.code):hover, .markup-content ul > li > code:not(.code):hover {
	background: rgb(0, 137, 255); color:#fff;
	border-color: rgb(0, 137, 255)
}
.markup-content code.code {
	background: none;
	font-weight: bold;
	font-size: inherit
}

.markup-content i.mic { font-size:16px; border:1px dotted silver; border-radius: 3px; padding: 0 4px; margin: 0 3px }

/*.markup-content img { max-width: 100%; border-top: 10px solid #fff }*/

.markup-content img { max-width: 100%; border: 1px dashed silver; border-radius:5px; padding: 5px; margin-top: 10px !important}


.markup-content p.backgrounded {
	color:#000;
	background: whitesmoke;
	border-radius: 3px;
	padding: 10px 15px;
}

.markup-content p.shape {
	color:#000;
	border-radius: 3px;
	padding: 5px 0px 5px 25px;
	position: relative;
}
.markup-content p.shape:before {
	font-family: "Material Symbols Outlined"; content:"\e5c8";
	position: absolute;
	display: inline-block;
	color:rgb(0, 168, 255);	
	font-size: 18px; 	
	margin-left: -25px;
}

.markup-content p.warning { 
	border-left:3px solid rgb(229, 103, 103);
	background-image: linear-gradient(180deg,#fff,rgba(229, 103, 103,0.05));
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(68, 68, 68, 0.15),0 1px 3px 0 rgba(68, 68, 68, 0.15);
	padding: 10px 20px 20px;
}
.markup-content p.warning:before {
	display: block;
	content: "WARNING";  color:rgb(229, 103, 103);
	font-size: 11px; 
	letter-spacing: 1.5px;
	padding-bottom: 5px
}

.markup-content p.info { 
	 border-left:3px solid rgb(0, 137, 255);
	 background-image: linear-gradient(180deg,#fff,rgba(103, 157, 229,0.05));
	 border-radius: 3px;
	 box-shadow: 0 5px 10px 0 rgba(68, 68, 68, 0.15),0 1px 3px 0 rgba(68, 68, 68, 0.15);
	 padding: 15px;
}
.markup-content p.tip { 
	 border-left:3px solid rgb(111, 229, 103);
	 background-image: linear-gradient(180deg,#fff,rgba(111, 229, 103,0.05));
	 border-radius: 3px;
	 box-shadow: 0 5px 10px 0 rgba(68, 68, 68, 0.15),0 1px 3px 0 rgba(68, 68, 68, 0.15);
	 padding: 20px 35px 20px 15px;
	 display: flex; flex-direction: row
}
.markup-content p.tip:before { 
	font-family: "Material Symbols Outlined"; content:"\e8dc";
	display: inline-block;
	color:rgb(118, 192, 113);
	font-size: 25px; 
	padding: -10px 0 0 0;
	margin-right: 8px
}

.markup-content code:not(.hljs) { white-space: nowrap }

.markup-content table { margin-top:16px}

.markup-content table td { padding: 8px 12px }

.markup-content table td code { white-space: nowrap }

/* pp extra types */
/*
.markup-content .math { font-family: monospace; font-size: 14px; }
.markup-content .math-result { font-family: monospace; font-size:20px; display: block; border-top:2px solid var(--coll3); margin-top:8px; padding-top: 8px  }
.markup-content .math-result:before { content: '='; padding-right: 10px; color:var(--coll3) }
.berry a.no-wrap { display:inline-block; vertical-align:top; max-width:99%;}
.berry a.no-wrap span { display:inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:100%;}

.markup-content div { width: 100%; display: flex; flex-direction: column }
.markup-content link-icon { width: 200px; min-width:200px; margin-left: 10px; display: flex; flex-direction: column; overflow: hidden }
.markup-content link-icon figure { margin:0; padding: 0; border-radius:3px; position: relative; display: flex; width:100%; min-height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover}
.markup-content div h1 { font-size:var(--px10); font-weight: 400; line-height: 20px; margin: 0; padding: 0; margin-bottom: 15px }
.markup-content div p { font-size: 14px; margin: 0; padding: 0; margin-bottom: 15px }
.markup-content div span { font-size: 12px; text-transform: uppercase; color: var(--coll5); font-size: 10px }

.markup-content { display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative }
.markup-content > figure, .markup-content > figure img {max-width:100%; margin: 0; padding: 0 }
.markup-content .img-info{ opacity:0; transition: opacity .3s ease; position: absolute; top:10px; right:10px; max-width:90%; font-size:11px; line-height: 13px; border-radius: 5px; padding: 10px; background: var(--cold3); color: var(--coll)  }
.markup-content:hover .img-info{ opacity:1 }
*/

/*
.berry map-widget { width: 100% } 
.berry map-widget .description { height: 30px; background: var(--cold5); padding:5px var(--padv); white-space: nowrap; max-width: 100%; text-overflow: ellipsis; overflow: hidden; }
.berry map-widget .map { width: 100%; height: 400px; background: #000 }
.berry map-widget nav { background: var(--cold5); display: flex; flex-direction: row; align-items: center; padding:5px var(--padv); }
.berry map-widget nav a { color: var(--highlight); padding: 0 15px; text-decoration: none }

.berry map-widget.fullscreen { position:fixed;left:0;top:0;bottom:0;right:0; height: 100vh }
.berry map-widget.fullscreen .description, .berry map-widget.fullscreen nav { background: var(--cold) }
.berry map-widget.fullscreen .map { height:100%; height:calc( 100vh - 70px) }
.berry map-widget.fullscreen nav { height: 40px }
*/