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

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

.markup-content { display: flex; flex-direction: column !important; align-items: flex-start; align-content: flex-start; }
.markup-content > * { width: 100%; }
.markup-content > pre { border-radius: 8px; background: rgb(17, 24, 39); }
.markup-content pre code { background: none !important; padding: 0px !important; }
.markup-content code.hash, .markup-content code.hash:hover { background: rgb(243, 244, 246); color: #d63384; border: 0 none transparent; border-radius: 4px; }
.markup-content .backgrounded code.hash { background: rgb(17, 24, 39); color: #fff; }
.markup-content > *:first-child { margin-top: 0px; }
.markup-content a { text-decoration: none; }
.markup-content a:hover span { text-decoration: underline; }
.markup-content mark { background-color: rgb(254, 231, 96); padding: 2px 6px; border-radius: 4px; }
.markup-content p { height: auto; }

.markup-content blockquote { padding: 8px 0px 8px 24px; border-left: 4px solid rgb(168 85 247); }
.markup-content hr { border-color: rgb(0, 137, 255); }
.markup-content p > code:not(.code), .markup-content ul > li > code:not(.code)  { 
	border-radius: 4px; 
	display: inline-block; 
	background: rgb(243, 244, 246);
	border: 0 none transparent;
	cursor: pointer;
	color: #d63384;
}
.markup-content p > code:not(.code):hover, .markup-content ul > li > code:not(.code):hover {
	background: rgb(37, 99, 235);
	color: #fff;
}
.markup-content code.code {
	background: none;
	font-weight: bold;
	font-size: inherit;
	color: #d63384;
	position: relative;
	overflow: auto;
	display: block;
}

.markup-content i.mic { font-family: "Material Symbols Outlined"; font-size: 16px; line-height: 1; font-style: normal; border: 1px dotted rgb(191, 219, 254); border-radius: 4px; padding: 2px 4px; margin: 0 2px }

.markup-content img { max-width: 100%; }

@media screen and (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 192dpi) {
	.markup-content i.mic, .markup-content img { border-width: 1pt; }
}


.markup-content p.backgrounded {
	color: rgb(55, 65, 81);
	background: rgb(243, 244, 246);
	border-radius: 8px;
	padding: 10px 15px;
}

.markup-content p.shape {
	color:#000;
	margin-top:2px;
	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.yes {
	color:#000;
	margin:0;
	border-radius: 3px;
	padding: 3px 0px 3px 25px;
	position: relative;
}
.markup-content p.yes:before {
	font-family: "Material Symbols Outlined"; content:"\e5ca";
	position: absolute;
	display: inline-block;
	color:rgb(0, 163, 1);	
	font-size: 18px; 	
	margin-left: -25px;
}

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

.markup-content p.warning { 
	border-left: 4px solid rgb(229, 103, 103);
	background: rgba(229, 103, 103, 0.15);
	padding: 8px 8px 8px 24px;
	border-radius: 0 8px 8px 0;
}
.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: 4px solid rgb(37, 99, 235);
	 border-radius: 0 8px 8px 0;
	 background: rgb(239, 246, 255);
	 padding: 8px 8px 8px 24px;
}

.markup-content p.tip { 
	 border: 1px solid rgb(191, 219, 254);
	 background: rgb(239, 246, 255);
	 border-radius: 8px;
	 padding: 24px;
	 display: flex; 
	 flex-direction: row;
}
.markup-content p.tip:before { 
	font-family: "Material Symbols Outlined"; content:"\ea24";
	/*content: '💡';*/
	display: inline-block;
	color: rgb(37, 99, 235);
	font-size: 25px; 
	padding: 0;
	margin-right: 8px
}


.markup-content ul {
  list-style: none;            /* remove default bullets */
  padding-left: 1.25rem;       /* space for custom bullet */
  margin: 0;
}

.markup-content ul > li {
  position: relative;
  margin: 0.25rem 0;
}

.markup-content ul > li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.8em;                  /* aligns with text */
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: rgb(37, 99, 235);
  transform: translateY(-50%);
}


.markup-content code:not(.hljs) { white-space: nowrap }
.markup-content table td code { white-space: nowrap }
.markup-content span.inline-code { font-family: monospace; font-size: 12px; line-height: 16px; font-weight: 100; display: inline-block; background: rgba(212, 227, 255, 0.366); padding: 4px 6px; border-radius: 4px  }