/* Breadcrumb */
.brdCmb {
	margin-bottom:5px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.brdCmb a {
	color:var(--bodyC)
}
.brdCmb >*:not(:last-child)::after {
	content:'/';
	margin:0 4px;
	font-size:90%;
	opacity:.6
}
.brdCmb >* {
	display:inline
}
.brdCmb .tl::before {
	content:attr(data-text)
}
.brdCmb .hm a {
	font-size:90%;
	opacity:.7
}
/* Article Style */
.post-body {
	--post-accent:var(--linkC)
}
.drK .post-body {
	--post-accent:var(--darkU)
}
.pS h1, .pS h2, .pS h3, .pS h4, .pS h5, .pS h6 {
	margin:1.5em 0 18px;
	font-family:var(--fontBa);
	font-weight:500;
	line-height:1.5em
}
/* Anchor clearance without changing heading dimensions or article flow. */
.pS h1, .pS h2, .pS h3, .pS h4, .pS h5, .pS h6 {
	scroll-margin-top:calc(var(--headerH, 60px) + 12px)
}
.post-body h2, .post-body h3, .post-body h4, .post-body h5 {
	font-size:23px;
	background-color:var(--transB);
	border-left:6px solid var(--post-accent);
	border-right:6px solid var(--post-accent);
	border-radius:5px;
	display: block;
	margin: 5px 0px 10px;
	padding: 10px 20px;

}
.post-body h3, .post-body h4, .post-body h5 {
	font-size:18px
}
/* Article Number */
.post-body ol:not(.steps) li {
	padding:8px 30px;
	margin-right:15px;
	margin-bottom:15px;
	list-style:none;
	-webkit-box-shadow:0 1px 3px #ddd;
	box-shadow:0 1px 3px #ddd;
	font-size:17px;
	position:relative
}
.post-body ol:not(.steps) li:before {
	content:counter(li);
	counter-increment:ol li;
	background-color:var(--post-accent);
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	margin-left:15px;
	color:#FFF;
	border-radius:3px;
	font-size:17px;
	position:absolute;
	right:-15px
}
.post-body ol:not(.steps) {
	counter-reset:li;
	padding-right:0;
	text-align:justify
}
.post-body ol:not(.steps) li:after {
	content:'';
	width:7px;
	height:100%;
	border-radius:3px 0px 0px 3px;
	background-color:var(--post-accent);
	position:absolute;
	top:0;
	left:0
}
.post-body ul li, .post-body ol:not(.steps) li {
	line-height:2.2;
	text-align:justify
}
/* Paragraph */
.pS p {
	line-height:2.2;
	text-align:justify
}
.pIndent {
	text-indent:2.5rem
}
.onItm:not(.Rtl) .dropCap {
	float:left;
	margin:4px 8px 0 0;
	font-size:55px;
	line-height:45px;
	opacity:.8
}
.pS hr {
	margin:3em 0;
	border:0
}
.pS hr::before {
	content:'\2027 \2027 \2027';
	display:block;
	text-align:center;
	font-size:24px;
	letter-spacing:0.6em;
	text-indent:0.6em;
	opacity:.8;
	clear:both
}
.pRef {
	display:block;
	font-size:14px;
	line-height:1.5em;
	opacity:.7;
	word-break:break-word
}
/* Img and Ad */
.pS img {
	display:inline-block;
	border-radius:5px;
	height:auto !important
}
.pS img.full {
	display:block !important;
	margin-bottom:10px;
	position:relative;
	width:100%;
	max-width:none
}
.pS .widget, .ps .pAd >* {
	margin:40px 0
}
/* Note */
.note {
	position:relative;
	padding-block:16px;
	padding-inline:50px 20px;
	background:var(--notifU);
	color:#3c4043;
	font-size:.85rem;
	font-family:var(--fontB);
	line-height:2.2;
	border-radius:10px;
	overflow:hidden
}
.note::before {
	content:'';
	width:60px;
	height:60px;
	background:rgba(0,0,0,.4);
	display:block;
	border-radius:50%;
	position:absolute;
	top:-12px;
	inset-inline-start:-12px;
	opacity:.1
}
.note::after {
	content:'\002A';
	position:absolute;
	inset-inline-start:18px;
	top:16px;
	font-size:20px;
	line-height:1.04;
	min-width:15px;
	text-align:center
}
.note.wr {
	background:#ffdfdf;
	color:#48525c
}
.note.wr::after {
	content:'\0021'
}
.drK .note {
	background:var(--darkBs);
	color:rgba(255,255,255,.9)
}
/* Ext link */
.extL {
	display:inline-flex;
	align-items:center
}
.extL::after {
	content:'';
	width:14px;
	height:14px;
	display:inline-block;
	margin:0 5px;
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>") center / 14px no-repeat
}
.extL.alt::after {
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3'/><line x1='8' y1='12' x2='16' y2='12'/></svg>")
}
/* Scroll img */
.psImg {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:center;
	margin:2em 0;
	position:relative;
	left:-7px;
	right:-7px;
	width:calc(100% + 14px)
}
.psImg >* {
	width:calc(50% - 14px);
	margin:0 7px 14px;
	position:relative
}
.psImg img {
	display:block
}
.scImg >* {
	width:calc(33.3% - 14px);
	margin:0 7px
}
.btImg label {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border-radius:5px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.6);
	transition:var(--trans-1);
	-webkit-backdrop-filter:saturate(180%) blur(10px);
	backdrop-filter:saturate(180%) blur(10px);
	color:var(--darkT);
	font-size:13px;
	font-family:var(--fontB)
}
.hdImg .shImg {
	width:100%;
	margin:0;
	left:0;
	right:0;
	transition:var(--trans-1);
	max-height:0;
	opacity:0;
	visibility:hidden
}
.inImg:checked ~ .hdImg .shImg {
	max-height:1000vh;
	opacity:1;
	visibility:visible
}
.inImg:checked ~ .hdImg .btImg label {
	opacity:0;
	visibility:hidden
}
/* Post related */
.pRelate {
	margin:40px 0;
	padding:20px 0;
	border:1px solid #989b9f;
	border-left:0;
	border-right:0;
	font-size:14px;
	line-height:1.8em
}
.pRelate a, .drK .pRelate a {
	color:inherit
}
.pRelate a:hover {
	text-decoration:underline
}
.pRelate b {
	font-weight:400;
	margin:0;
	opacity:.8
}
.pRelate ul, .pRelate ol {
	margin:8px 0 0;
	padding:0 20px
}
/* Blockquote */
blockquote, .cmC i[rel=quote] {
	position:relative;
	font-size:.97rem;
	opacity:.8;
	line-height:1.6em;
	margin-left:0;
	margin-right:0;
	padding:5px 20px;
	border-left:2px solid var(--contentL)
}
blockquote.s-1, details.sp {
	font-size:.93rem;
	padding:25px 25px 25px 45px;
	border:1px solid #989b9f;
	border-left:0;
	border-right:0;
	line-height:1.7em
}
blockquote.s-1::before {
	content:'\201D';
	position:absolute;
	top:10px;
	left:0;
	font-size:60px;
	line-height:normal;
	opacity:.5
}
/* Table */
.ps table {
	margin:0 auto;
	margin-top:10px;
	margin-bottom:15px;
	font-size:14px;
	font-family:var(--fontB)
}
.ps table:not(.tr-caption-container) {
	min-width:90%;
	border:1px solid var(--contentL);
	border-radius:3px;
	overflow:hidden
}
.ps table:not(.tr-caption-container) td {
	padding:16px
}
.ps table:not(.tr-caption-container) tr:not(:last-child) td {
	border-bottom:1px solid var(--contentL)
}
.ps table:not(.tr-caption-container) tr:nth-child(2n+1) td {
	background:rgba(0,0,0,.01)
}
.ps table th {
	padding:16px;
	text-align:inherit;
	border-bottom:1px solid var(--contentL)
}
.ps .table {
	display:block;
	overflow-y:hidden;
	overflow-x:auto;
	scroll-behavior:smooth
}
/* List mobile info*/
.aps {
	height:50px;
	margin-bottom:10px;
	position:relative;
	box-shadow:0 0 0 1px rgb(8,9,10,0.1);
	background:#f0f2f5
}
.aps svg {
	position:absolute;
	width:55px;
	height:50px;
	padding:10px 15px;
	background:#ffffff;
	font-size:20px;
	text-align:center
}
.aps .info {
	position:absolute;
	margin-top:11px;
	margin-right:68px;
	font-size:14px
}
.drK .aps svg {
	background:#2d325a
}
.drK .aps {
	background:#202442
}
/* Table mobile info*/
.table-mobile {
	background:#482dff
}
.table-mobile-title {
	color:#ffffff;
	font-size:22px
}
.table-mobile-icon i {
	float:left;
	color:#ffffff;
	font-size:22px
}
/* Img caption */
figure {
	margin-left:0;
	margin-right:0
}
.ps .tr-caption, .psCaption, figcaption {
	display:block;
	font-size:14px;
	line-height:1.6em;
	font-family:var(--fontB);
	opacity:.7
}
/* Syntax */
.pre {
	background:var(--synxBg);
	color:var(--synxC);
	direction: ltr
}
.pre:not(.tb) {
	position:relative;
	border-radius:3px;
	overflow:hidden;
	margin:1.7em auto;
	font-family:var(--fontC)
}
.pre pre {
	margin:0;
	color:inherit;
	background:inherit
}
.pre:not(.tb)::before, .cmC i[rel=pre]::before {
	content:'</>';
	display:flex;
	justify-content:flex-end;
	position:absolute;
	right:0;
	top:0;
	width:100%;
	background:inherit;
	color:var(--synxGray);
	font-size:10px;
	padding:0 10px;
	z-index:2;
	line-height:30px
}
.pre:not(.tb).html::before {
	content:'.html'
}
.pre:not(.tb).css::before {
	content:'.css'
}
.pre:not(.tb).js::before {
	content:'.js'
}
.pre:not(.tb):hover::before {
	content:'Double click to copy | </>'
}
.pre:not(.tb).html:hover::before {
	content:'Double click to copy | .html'
}
.pre:not(.tb).css:hover::before {
	content:'Double click to copy | .css'
}
.pre:not(.tb).js:hover::before {
	content:'Double click to copy | .js'
}
.pre[data-text]:not([data-text='']):not(.tb)::before {
	content:attr(data-text)
}
.pre[data-text]:not([data-text='']):not(.tb):hover::before {
	content:'Double Click to Copy | ' attr(data-text)
}
pre, .cmC i[rel=pre] {
	display:block;
	position:relative;
	font-family:var(--fontC);
	font-size:13px;
	line-height:1.6em;
	border-radius:3px;
	background:var(--synxBg);
	color:var(--synxC);
	padding:30px 20px 20px;
	margin:1.7em auto;
	-moz-tab-size:2;
	tab-size:2;
	-webkit-hyphens:none;
	-moz-hyphens:none;
	-ms-hyphens:none;
	hyphens:none;
	overflow:auto;
	direction:ltr;
	white-space:pre
}
pre i {
	font-style:normal
}
pre i.block {
	color:#fff;
	background:var(--synxBlue)
}
pre i.green {
	color:var(--synxGreen)
}
pre i.gray {
	color:var(--synxGray)
}
pre i.red {
	color:var(--synxOrange)
}
pre i.blue {
	color:var(--synxBlue)
}
code {
	display:inline;
	padding:5px;
	font-size:14px;
	border-radius:3px;
	line-height:inherit;
	color:var(--synxC);
	background:#f2f3f5;
	font-family:var(--fontC)
}
/* Multi syntax */
.pre.tb {
	border-radius:5px
}
.pre.tb pre {
	margin:0;
	background:inherit
}
.pre.tb .preH {
	font-size:13px;
	border-color:rgba(0,0,0,.05);
	margin:0
}
.pre.tb .preH >* {
	padding:13px 20px
}
.pre.tb .preH::after {
	content:'</>';
	font-size:10px;
	font-family:var(--fontC);
	color:var(--synxGray);
	padding:15px;
	margin-left:auto
}
.pre.tb >:not(.preH) {
	display:none
}
.pS input[id*="1"]:checked ~ div[class*="C-1"], .pS input[id*="2"]:checked ~ div[class*="C-2"], .pS input[id*="3"]:checked ~ div[class*="C-3"], .pS input[id*="4"]:checked ~ div[class*="C-4"] {
	display:block
}
/* ToC */
.pS details summary {
	list-style:none;
	outline:none
}
.pS details summary::-webkit-details-marker {
	display:none
}
details.sp {
	margin-top:15px;
	padding:16px 20px;
	background:var(--contentB);
	box-shadow:0 5px 35px rgba(0,0,0,.07);
	border:0;
	border-radius:10px;

}
details.sp summary {
	display:flex;
	justify-content:space-between;
	align-items:baseline
}
details.sp summary::after {
	content:attr(data-show);
	padding:4px 10px;
	background:var(--linkB);
	color:#fffdfc;
	font-size:12px;
	border-radius:var(--buttonR);
	cursor:pointer
}
details.sp[open] summary::after {
	content:attr(data-hide)
}
details.toc a:hover {
	text-decoration:underline
}
details.toc a {
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
	color:inherit
}
details.toc ol, details.toc ul {
	padding:0 20px;
	list-style-type:decimal
}
details.toc li ol, details.toc li ul {
	margin:5px 0 10px;
	list-style-type:lower-alpha
}
/* Accordion */
.showH {
	margin:1.7em 0;
	font-size:.93rem;
	font-family:var(--fontB);
	line-height:1.7em
}
details.ac {
	padding:18px 15px;
	background:var(--contentB);
	box-shadow:0 5px 35px rgba(0,0,0,.07);
	margin:20px 0;
	border-radius:10px
}
details.ac summary {
	font-weight:500;
	cursor:default;
	display:flex;
	align-items:baseline;
	transition:var(--trans-1);
	cursor:pointer
}
details.ac summary::before {
	content:'\203A';
	flex:0 0 25px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	padding:0 5px;
	font-weight:400;
	font-size:1.33rem;
	color:inherit
}
details.ac[open] summary {
	color:var(--linkC)
}
details.ac:not(.alt)[open] summary::before {
	transform:rotate(90deg);
	padding:0 0 0 5px;
	justify-content:center
}
details.ac.alt summary::before {
	content:'\002B';
	padding:0 2px
}
details.ac.alt[open] summary::before {
	content:'\2212'
}
details.ac .aC {
	padding:0 15px;
	opacity:.9
}
.drK details.sp, .drK details.ac {
	background:var(--darkBs)
}
.drK details.sp summary::after {
	background:var(--darkU)
}
/* Related Posts */
.acdn {
	position:relative;
	list-style:none;
	margin:30px 0;
	padding:0;
	font-size:15px;
	line-height:1.7em;
	font-family:inherit
}
.acdn .ac {
	width:100%;
	padding:20px 0 20px 15px;
	margin:10px 0;
	background:#f0f0ff;
	border-radius:10px;
	border-left:4px solid #8a8aff;
	box-shadow:0 5px 10px rgba(51,51,51,.1)
}
.acdn .ac:nth-child(4n + 1) {
	background:#f0f0ff;
	border-left-color:#8a8aff
}
.acdn .ac:nth-child(4n + 2) {
	background:#fff0f3;
	border-left-color:#ff8aa1
}
.acdn .ac:nth-child(4n + 3) {
	background:#f0faff;
	border-left-color:#8ad8ff
}
.acdn .ac:nth-child(4n + 4) {
	background:#fff7f0;
	border-left-color:#ffc08a
}
.acdn .cont {
	margin:0;
	padding-left:27px;
	padding-right:27px;
	position:relative;
	overflow:hidden;
	max-height:0;
	transition:all .3s ease;
	color:#08102b
}
.acdn .cont ul,.acdn .cont ol {
	padding-left:13px
}
.acdn .cont li {
	padding:0
}
.acdn .cont a {
	text-decoration:none;
	color:#08102b
}
.acdn .cont a:hover {
	text-decoration:underline
}
.acdn p:first-child {
	margin-top:0
}
.acdn p:last-child {
	margin-bottom:0
}
.acTtl {
	display:flex;
	align-items:center;
	font-weight:500;
	color:#08102b
}
.acTtl span {
	display:flex;
	flex-grow:1
}
.acTtl span:before {
	content:'';
	padding-left:15px
}
.acIcn {
	flex-shrink:0;
	display:flex;
	align-items:center;
	width:12px;
	height:12px;
	position:relative
}
.acIcn:before,.acIcn:after {
	content:'';
	display:block;
	width:100%;
	height:2px;
	border-radius:2px;
	background:#08102b
}
.acIcn:after {
	position:absolute;
	transform:rotate(90deg)
}
.acMn {
	display:none
}
.acMn:checked ~ .acTtl .acIcn:after {
	visibility:hidden;
	opacity:0
}
.acMn:checked ~ .cont {
	max-height:100vh;
	padding-top:15px;
	padding-bottom:8px
}
.darkMode .acdn .ac {
	background:#252526;
	border-left-color:#4c4c4e
}
.darkMode .acdn .cont,.darkMode .acdn .cont a,.darkMode .acTtl,.darkMode .acMn:checked ~ .acTtl {
	color:#fefefe
}
.darkMode .acTtl .acIcn:before,.darkMode .acTtl .acIcn:after,.darkMode .acMn:checked ~ .acTtl .acIcn:before,.darkMode .acMn:checked ~ .acTtl .acIcn:after {
	background:#fefefe
}
/* Tabs */
.tbHd {
	display:flex;
	border-bottom:1px solid var(--contentL);
	margin-bottom:30px;
	font-size:14px;
	font-family:var(--fontB);
	line-height:1.6em;
	overflow-x:scroll;
	overflow-y:hidden;
	scroll-behavior:smooth;
	scroll-snap-type:x mandatory;
	-ms-overflow-style:none;
	-webkit-overflow-scrolling:touch
}
.tbHd >* {
	padding:12px 15px;
	border-bottom:1px solid transparent;
	transition:var(--trans-1);
	opacity:.6;
	white-space:nowrap;
	scroll-snap-align:start
}
.tbHd >*::before {
	content:attr(data-text)
}
.tbCn >* {
	display:none;
	width:100%
}
.tbCn >* p:first-child {
	margin-top:0
}
.pS input[id*="1"]:checked ~ .tbHd label[for*="1"], .pS input[id*="2"]:checked ~ .tbHd label[for*="2"], .pS input[id*="3"]:checked ~ .tbHd label[for*="3"], .pS input[id*="4"]:checked ~ .tbHd label[for*="4"] {
	border-color:var(--linkB);
	opacity:1
}
.pS input[id*="1"]:checked ~ .tbCn div[class*="Text-1"], .pS input[id*="2"]:checked ~ .tbCn div[class*="Text-2"], .pS input[id*="3"]:checked ~ .tbCn div[class*="Text-3"], .pS input[id*="4"]:checked ~ .tbCn div[class*="Text-4"] {
	display:block
}
.tbHd.stick {
	position:-webkit-sticky;
	position:sticky;
	top:var(--headerH);
	background:var(--bodyB)
}
/* Split */
.ps .blogPg {
	font-size:13px;
	justify-content:center;
	position:relative;
	width:calc(100% + 8px);
	left:-4px;
	right:-4px
}
.ps .blogPg >* {
	padding:8px 15px;
	margin:0 4px 8px
}
.btnF {
	display:flex;
	justify-content:center;
	margin:10px 0;
	width:calc(100% + 12px);
	left:-6px;
	right:-6px;
	position:relative
}
.btnF >* {
	margin:0 6px
}
/* Download btn */
.dlBox {
	max-width:500px;
	background:#f1f1f0;
	border-radius:10px;
	padding:12px;
	margin:1.7em 0;
	display:flex;
	align-items:center;
	font-size:14px
}
.dlBox .fT {
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:45px;
	height:45px;
	padding:10px;
	background:rgba(0,0,0,.1);
	border-radius:var(--buttonR)
}
.dlBox .fT::before {
	content:attr(data-text);
	opacity:.7
}
.dlBox .fT.lazy {
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat
}
.dlBox .fT.lazy::before {
	display:none
}
.dlBox a {
	flex-shrink:0;
	margin:0;
	padding:10px 12px;
	border-radius:var(--buttonR);
	font-size:13px
}
.dlBox .safeL { flex-shrink:0; margin:0; }
.dlBox .safeL .button { margin:0; padding:10px 12px; font-size:13px; }
.dlBox a::after {
	content:attr(aria-label)
}
.dlBox .fN {
	flex-grow:1;
	width:calc(100% - 200px);
	padding:0 15px
}
.dlBox .fN >* {
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}
.dlBox .fS {
	line-height:16px;
	font-size:12px;
	opacity:.8
}
.dldCo {
	display:flex;
	align-items:center;
	justify-content:center;
	max-width:480px;
	background:rgba(0,0,0,.03);
	border-radius:10px;
	margin:30px 0;
	transition:margin .6s ease;
	-webkit-transition:margin .6s ease
}
.dldCo::before {
	content:'جاري إنشاء رابط التنزيل...';
	position:absolute;
	z-index:1;
	font-size:13px;
	font-family:var(--fontB);
	opacity:.8
}
.dldBx {
	visibility:hidden;
	opacity:0;
	transition:opacity .3s ease;
	-webkit-transition:opacity .3s ease
}
.dldSl {
	visibility:hidden;
	opacity:0;
	transition:opacity .3s ease,bottom .6s ease;
	-webkit-transition:opacity .3s ease,bottom .6s ease
}
.drK .dldCo {
	background:var(--darkBa)
}
/* Icon btn */
.icon {
	flex-shrink:0;
	display:inline-flex
}
.icon::before {
	content:'';
	width:18px;
	height:18px;
	background-size:18px;
	background-repeat:no-repeat;
	background-position:center
}
.icon::after {
	content:'';
	padding:0 6px
}
.icon.dl::before, .drK .button.ln .icon.dl::before {
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")
}
.icon.demo::before {
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/><circle cx='12' cy='12' r='2.75'/></svg>")
}
.button.ln .icon.dl::before {
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308102b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")
}
/* Article Style Responsive */
@media screen and (max-width: 640px) {
	.pS img.full {
		width:calc(100% + 40px);
		left:-20px;
		right:-20px;
		border-radius:0
	}
	.note {
		font-size:13px
	}
	.scImg {
		flex-wrap:nowrap;
		justify-content:flex-start;
		position:relative;
		width:calc(100% + 40px);
		left:-20px;
		right:-20px;
		padding:0 13px;
		overflow-y:hidden;
		overflow-x:scroll;
		scroll-behavior:smooth;
		scroll-snap-type:x mandatory;
		-ms-overflow-style:none;
		-webkit-overflow-scrolling:touch
	}
	.scImg >* {
		flex:0 0 80%;
		scroll-snap-align:center
	}
	.ps .table {
		position:relative;
		width:calc(100% + 40px);
		left:-20px;
		right:-20px;
		padding:0 20px;
		display:flex
	}

}
@media screen and (max-width:500px) {
	.hdImg {
		width:100%;
		left:0;
		right:0
	}
	.hdImg >*, .shImg >* {
		width:100%;
		margin:0 0 16px
	}
	.ps .tr-caption, .psCaption, figcaption {
		font-size:13px
	}
	.btnF >* {
		flex-grow:1;
		justify-content:center
	}
	.btnF >*:first-child {
		flex:0 0 auto
	}

}

/* Youtube fullpage */
.videoYt {
	position:relative;
	padding-bottom:56.25%;
	overflow:hidden;
	border-radius:5px
}
.videoYt iframe {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	right:0
}
/* Lazy Youtube */
.lazyYt {
	background:var(--synxBg);
	position:relative;
	overflow:hidden;
	padding-top:56.25%;
	border-radius:5px
}
.lazyYt img {
	width:100%;
	top:-16.84%;
	left:0;
	opacity:.95
}
.lazyYt img, .lazyYt iframe, .lazyYt .play {
	position:absolute
}
.lazyYt iframe {
	width:100%;
	height:100%;
	bottom:0;
	right:0
}
.lazyYt .play {
	border:0;
	background:transparent;
	padding:0;
	top:50%;
	left:50%;
	transform:translate3d(-50%,-50%,0);
	transition:all .5s ease;
	display:block;
	width:70px;
	height:70px;
	z-index:1;
	cursor:pointer
}
.lazyYt .play svg {
	width:inherit;
	height:inherit;
	fill:none;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-miterlimit:10;
	stroke-width:8
}
.lazyYt .play .c {
	stroke:rgba(255,255,255,.85);
	stroke-dasharray:650;
	stroke-dashoffset:650;
	transition:all .4s ease-in-out;
	opacity:.3
}
.lazyYt .play .t {
	stroke:rgba(255,255,255,.75);
	stroke-dasharray:240;
	stroke-dashoffset:480;
	transition:all .6s ease-in-out;
	transform:translateY(0)
}
.lazyYt .play:hover .t {
	animation:nudge .6s ease-in-out;
	-webkit-animation:nudge .6s ease-in-out
}
.lazyYt .play:hover .t, .lazyYt .play:hover .c {
	stroke-dashoffset:0;
	opacity:.7;
	stroke:#FF0000
}
.nAmp .lazyYt {
	display:none
}

/* Lightbox image */
.zmImg:not(.s) {
	position:relative
}
.zmImg:not(.s)::before {
	content:'';
	position:absolute;
	top:10px;
	right:5px;
	width:30px;
	height:30px;
	display:flex;
	margin:0 5px;
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23363637' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/></svg>") center / 14px no-repeat;
	background-color:rgba(0,0,0,.2);
	border-radius:50%;
	z-index:2;
	opacity:0;
	transition:var(--trans-2);
	-webkit-transition:var(--trans-2);
	cursor:pointer
}
.zmImg:not(.s):hover::before {
	opacity:1
}
.zmImg.s {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	margin:0;
	background:rgba(0,0,0,.75);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:999;
	-webkit-backdrop-filter:saturate(180%) blur(15px);
	backdrop-filter:saturate(180%) blur(15px)
}
.zmImg.s a, .zmImg.s a:hover {
	opacity:1
}
.zmImg.s img {
	display:block;
	max-width:92%;
	max-height:92%;
	width:auto;
	margin:auto;
	border-radius:10px;
	box-shadow:0 5px 30px 0 rgba(0,0,0,.05)
}
.zmImg.s img.full {
	left:auto;
	right:auto;
	border-radius:10px;
	width:auto
}
.zmImg > .zmClose {
	color:#fffdfc;
	background:var(--linkB);
	position:fixed;
	bottom:-20px;
	right:-20px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:45px;
	height:45px;
	border-radius:50%;
	transition:var(--trans-1);
	opacity:0;
	visibility:hidden;
	pointer-events:none
}
.zmImg > .zmClose .echrahnet-close-icon {
	width:16px;
	height:16px;
	flex:0 0 16px
}
.zmImg.s > .zmClose {
	bottom:20px;
	right:20px;
	opacity:1;
	visibility:visible
}
/* Highlight */
.pre .pre-subst {
	color:var(--synxC)
}
.pre .pre-comment {
	color:#656e77
}
.pre .pre-attr, .pre .pre-doctag, .pre .pre-meta, .pre .pre-meta-keyword, .pre .pre-section, .pre .pre-selector-class {
	color:#015692
}
.pre .pre-selector-pseudo, .pre .pre-keyword {
	color:#0a8356
}
.pre .pre-selector-tag {
	color:#167406
}
.pre .pre-attribute {
	color:#803378
}
.pre .pre-built_in, .pre .pre-literal, .pre .pre-name, .pre .pre-number, .drK .pre .pre-number, .pre .pre-quote, .pre .pre-selector-id, .pre .pre-template-tag, .pre .pre-title, .pre .pre-type {
	color:#b75501
}
.pre .pre-link, .pre .pre-meta-string, .pre .pre-regexp, .pre .pre-selector-attr, .pre .pre-string, .pre .pre-symbol, .pre .pre-template-variable, .pre .pre-variable {
	color:#54790d
}
.pre .pre-bullet, .pre .pre-code {
	color:#535a60
}
.pre .pre-deletion {
	color:#c02d2e
}
.pre .pre-addition {
	color:#2f6f44
}
.pre .pre-emphasis {
	font-style:italic
}
.pre .pre-strong {
	font-weight:500
}
.drK .pre {
	color:var(--darkT)
}
.drK .pre .pre-subst, .drK .pre .pre-property, .drK .pre .pre-function {
	color:#fefefe
}
.drK .pre .pre-strong {
	font-weight:bold
}
.drK .pre .pre-code, .drK .pre .pre-emphasis {
	font-style:italic
}
.drK .pre .pre-tag {
	color:#62c8f3
}
.drK .pre .pre-name {
	color:#ff7086
}
.drK .pre .pre-attr {
	color:#ffb244
}
.drK .pre .pre-variable, .drK .pre .pre-template-variable, .drK .pre .pre-selector-id, .drK .pre .pre-selector-class {
	color:#ade5fc
}
.drK .pre .pre-string, .drK .pre .pre-bullet {
	color:#a2fca2
}
.drK .pre .pre-type, .drK .pre .pre-title, .pre .pre-section, .drK .pre .pre-attribute, .drK .pre .pre-quote, .drK .pre .pre-built_in, .drK .pre .pre-builtin-name {
	color:#ffa
}
.pre .pre-number, .drK .pre .pre-symbol, .drK .pre .pre-bullet {
	color:#d36363
}
.drK .pre .pre-keyword, .drK .pre .pre-literal {
	color:#fcc28c
}
.drK .pre .pre-selector-pseudo {
	color:#fbc796
}
.drK .pre .pre-selector-tag {
	color:#fbb46e
}
.drK .pre .pre-comment, .drK .pre .pre-deletion, .drK .pre .pre-code {
	color:#888
}
.pre .pre-regexp, .drK .pre .pre-regexp, .drK .pre .pre-link {
	color:#c6b4f0
}
.drK .pre .pre-meta {
	color:#fc9b9b
}
.drK .pre .pre-deletion {
	background-color:#fc9b9b;
	color:#333
}
.drK .pre .pre-addition {
	background-color:#a2fca2;
	color:#333
}
/* Post Title Theme */
.boxdescription {
	position:relative;
	margin:40px 2px;
	padding:40px 10px 2px;
	border:1px solid #3F51B5;
	border-radius:5px;
	text-align:justify
}
.boxdescription h2 {
	background:#3F51B5;
	color:#ffff;
	border-radius:3px;
	border:1px solid #3F51B5;
	padding:5px 15px!important;
	position:absolute;
	margin:0!important;
	font-size:17px!important;
	top:-20px;
	font-weight:300;
	right:20px;
	text-transform:uppercase
}




.post-body a.b-tooltip-container {
	position: relative;
	display: inline-block;

}
.post-body a.b-tooltip-container .b-tooltip {
	display: block !important;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-20%, 1px);
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	transition: opacity 0.2s ease-in-out;

}
.post-body a.b-tooltip-container .b-tooltip iframe {
	width: 200px;
	height: 198px;
	max-width: none;
	border: none;
	border-radius: 20px;
	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);

}
@media (hover: hover) {
	.post-body a.b-tooltip-container:hover .b-tooltip {
		visibility: visible;
		opacity: 1;

	}

}


/* Shared singular entry container */
.pEnt {
	margin-top:40px;
	font-size:var(--postF);
	font-family:var(--fontBa);
	line-height:1.8em
}