


/* Widget Style */
.widget .imgThm:not(span) {
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	max-width:none;
	max-height:108%;
	font-size:12px;
	text-align:center;
	transform:translate(-50%, -50%)
}
.widget .title {
	margin:0 0 25px;
	font-size:var(--widgetT);
	font-weight:var(--widgetTw);
	position:relative
}
.widget .title.dt::before {
	position:absolute;
	top:0;
	right:0;
	content:'';
	width:20px;
	height:20px;
	display:inline-block;
	opacity:.3;
	background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 276.167 276.167' fill='%23989b9f'><path d='M33.144,2.471C15.336,2.471,0.85,16.958,0.85,34.765s14.48,32.293,32.294,32.293s32.294-14.486,32.294-32.293 S50.951,2.471,33.144,2.471z'/><path d='M137.663,2.471c-17.807,0-32.294,14.487-32.294,32.294s14.487,32.293,32.294,32.293c17.808,0,32.297-14.486,32.297-32.293 S155.477,2.471,137.663,2.471z'/><path d='M243.873,67.059c17.804,0,32.294-14.486,32.294-32.293S261.689,2.471,243.873,2.471s-32.294,14.487-32.294,32.294 S226.068,67.059,243.873,67.059z'/><path d='M243.038,170.539c17.811,0,32.294-14.483,32.294-32.293c0-17.811-14.483-32.297-32.294-32.297 s-32.306,14.486-32.306,32.297C210.732,156.056,225.222,170.539,243.038,170.539z'/><path d='M136.819,170.539c17.804,0,32.294-14.483,32.294-32.293c0-17.811-14.478-32.297-32.294-32.297 c-17.813,0-32.294,14.486-32.294,32.297C104.525,156.056,119.012,170.539,136.819,170.539z'/><path d='M243.771,209.108c-17.804,0-32.294,14.483-32.294,32.294c0,17.804,14.49,32.293,32.294,32.293 c17.811,0,32.294-14.482,32.294-32.293S261.575,209.108,243.771,209.108z'/></svg>") center / 20px no-repeat
}
.Rtl .widget .title::before {
	right:auto;
	left:0;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg)
}
.widget .title::after {
	content:'';
	vertical-align:middle;
	width:var(--widgetTa);
	border-bottom:4px dotted var(--widgetTac);
	opacity:.5;
	margin-inline-start:10px;
	display:inline-block
}
.widget:not(.contentWidget) input[type=text], .widget:not(.contentWidget) input[type=email], .widget:not(.contentWidget) textarea {
	display:block;
	width:100%;
	outline:0;
	border:0;
	border-bottom:1px solid rgba(0,0,0,.25);
	border-radius:4px 4px 0 0;
	background:#f3f3f4;
	padding:25px 16px 8px 16px;
	line-height:1.6em;
	transition:var(--trans-1)
}
.widget:not(.contentWidget) input[type=text]:hover, .widget:not(.contentWidget) input[type=email]:hover, .widget:not(.contentWidget) textarea:hover {
	border-color:rgba(0,0,0,.42);
	background:#ececec
}
.widget:not(.contentWidget) input[type=text]:focus, .widget:not(.contentWidget) input[type=email]:focus, .widget:not(.contentWidget) textarea:focus, .widget:not(.contentWidget) input[data-text=fl], .widget:not(.contentWidget) textarea[data-text=fl] {
	border-color:var(--linkB);
	background:#ececec
}
.widget:not(.contentWidget) input[type=button], .widget:not(.contentWidget) input[type=submit] {
	display:inline-flex;
	align-items:center;
	padding:12px 30px;
	outline:0;
	border:0;
	border-radius:4px;
	color:#fffdfc;
	background:var(--linkB);
	font-size:14px;
	white-space:nowrap;
	overflow:hidden;
	max-width:100%
}
.widget:not(.contentWidget) input[type=button]:hover, .widget:not(.contentWidget) input[type=submit]:hover {
	opacity:.7
}
/* Widget searchWidget */
.searchWidget {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:12
}
.searchWidget form {
	position:relative;
	min-width:320px
}
.searchWidget input {
	position:relative;
	display:block;
	background:var(--srchB);
	border:0;
	outline:0;
	margin-top:-100%;
	padding:10px 55px;
	width:100%;
	height:72px;
	transition:var(--trans-1);
	z-index:2;
	border-radius:0 0 var(--srchMr) var(--srchMr)
}
.searchWidget input:focus {
	margin-top:0;
	box-shadow:0 10px 40px rgba(0,0,0,.2)
}
.searchWidget input:focus ~ button.sb {
	opacity:.9
}
.searchWidget .sb {
	position:absolute;
	left:0;
	top:0;
	display:flex;
	align-items:center;
	padding:0 20px;
	z-index:3;
	opacity:.7;
	height:100%;
	background:transparent;
	border:0;
	outline:0
}
.searchWidget .sb svg {
	width:18px;
	height:18px;
	stroke:var(--srchI)
}
.searchWidget button.sb {
	left:auto;
	right:0;
	opacity:0;
	font-size:13px
}
.searchWidget button.sb .echrahnet-close-icon {
	width:16px;
	height:16px;
	flex:0 0 16px;
	stroke:var(--srchI)!important
}
@media screen and (min-width:897px) {
	header .searchWidget {
		position:static;
		z-index:1
	}
	header .searchWidget input {
		margin-top:0;
		padding:12px 42px;
		height:auto;
		font-size:13px;
		border-radius:var(--srchDr);
		background:rgba(0,0,0,.03);
		width:calc(100% + 26px);
		left:-13px;
		right:-13px;
		transition:var(--trans-2)
	}
	header .searchWidget input:hover {
		background:var(--transB)
	}
	header .searchWidget input:focus {
		box-shadow:none;
		margin-top:0;
		background:var(--transB)
	}
	header .searchWidget .sb {
		padding:0
	}
	header .searchWidget .fCls {
		display:none
	}

}
/* Widget Profile */
.prfI:checked ~ .mainWrp .wPrf {
	top:45px;
	opacity:1;
	visibility:visible;
	-webkit-transform:scale(1);
	transform:scale(1)
}
.prfI:checked ~ .mainWrp .wPrf ~ .fCls {
	z-index:3;
	opacity:1;
	visibility:visible
}
.wPrf {
	display:flex;
	position:absolute;
	top:45px;
	right:0;
	width:260px;
	max-height:400px;
	-webkit-transform:scale(.8);
	transform:scale(.8);
	-webkit-transform-origin:top right;
	transform-origin:top right;
	-webkit-transition:visibility .2s ease, opacity .2s ease, -webkit-transform .2s ease;
	transition:visibility .2s ease, opacity .2s ease, transform .2s ease;
	z-index:4;
	opacity:0;
	visibility:hidden;
	overflow:hidden
}
.wPrf .prfS {
	background:inherit
}
.wPrf.sl .im {
	width:60px;
	height:60px;
	border-radius:26px;
	margin:0 auto
}
.wPrf.sl .prfC {
	text-align:center
}
.prfH .c {
	display:none
}
.sInf {
	margin-bottom:0
}
.sInf .sDt .l {
	display:inline-flex;
	align-items:center
}
.sInf .sTxt {
	margin:5px auto 0;
	max-width:320px;
	font-size:93%;
	opacity:.9;
	line-height:1.5em
}
.sInf .sTxt a {
	text-decoration:underline
}
.sInf .lc {
	display:flex;
	justify-content:center;
	margin:10px 0 0;
	opacity:.8;
	font-size:90%
}
.sInf .lc svg {
	width:16px;
	height:16px
}
.sInf .lc::after {
	content:attr(data-text);
	margin:0 4px
}
/* Widget Scroll Menu */
.navS {
	background:var(--navB);
	overflow-y:hidden;
	overflow-x:scroll;
	scroll-behavior:smooth;
	scroll-snap-type:x mandatory;
	-ms-overflow-style:none;
	-webkit-overflow-scrolling:touch;
	display:flex;
	padding:0;
	border-radius:10px
}
.navS ul {
	display:flex;
	list-style:none;
	margin:0;
	padding:0;
	white-space:nowrap
}
.navS li {
	margin:0 15px;
	padding:10px 0;
	position:relative;
	scroll-snap-align:start
}
.navS li:first-child {
	margin-left:auto
}
.navS li:last-child {
	margin-right:auto
}
.navS .l {
	display:block;
	color:var(--bodyC);
	padding:8px 0
}
.navS .l::before {
	content:attr(data-text)
}
.navS .l::after {
	content:'';
	height:1px;
	border-radius:2px 2px 0 0;
	background:var(--linkC);
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	opacity:0
}
.navS span.l {
	opacity:.7
}
.navS a.l:hover, .navS .l.a {
	color:var(--linkC)
}
@media screen and (max-width:896px) {
	.navS .secIn {
		padding:0
	}
	.navS li {
		margin:0;
		padding:8px 0;
		display:flex
	}
	.navS li::before {
		content:'';
		padding:10px
	}
	.navS ul::after {
		content:'';
		display:block;
		padding:10px;
		scroll-snap-align:start
	}
	.navS .l {
		position:relative
	}
	.navS .l::after {
		bottom:-8px
	}
	.navS a.l:hover::after, .navS .l.a::after {
		opacity:1
	}

}
@media screen and (max-width:500px) {
	.navS {
		font-size:13px
	}
	.navS .l::before {
		margin: 12px
	}
	.navS .l {
		background: var(--transB)!important;
		border-radius: 25px!important
	}

}
.drK .navS {
	background:var(--darkBs)
}
.drK .navS .l {
	color:var(--darkC)
}
.drK .navS a.l:hover, .drK .navS .l.a {
	color:var(--darkU)
}
.drK .navS .l::after {
	background:var(--darkU)
}

/* featuredPost card layout shared by the widget on every view. */
.itemFt .itm {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	position:relative;
	width:calc(100% + 20px);
	left:-10px;
	right:-10px
}
.itemFt .itm >* {
	flex:0 0 calc(50% - 20px);
	width:calc(50% - 20px);
	margin-bottom:0;
	margin-left:10px;
	margin-right:10px
}

/* Widget featuredPost */
@media screen and (min-width:501px) {
	.featuredPost .itemFt {
		position:relative;
		overflow:hidden;
		padding:10px;
		background:var(--contentB);
		box-shadow:0 5px 35px rgba(0,0,0,.07);
		border-radius:10px
	}
	.drK .featuredPost .itemFt {
		background:var(--darkBa)
	}
	.featuredPost .itemFt::after {
		content:'';
		position: absolute;
		right:0;
		top:0;
		width:40px;
		height:15px;
		background:var(--linkB);
		border-radius:0 0 0 20px;
		opacity:.2
	}

}
.itemFt .itm >* {
	flex:0 0 310px;
	width:310px
}
.itemFt .itm >*:last-child {
	flex:1 0 calc(100% - 310px - 40px);
	width:calc(100% - 310px - 40px)
}
/* Widget popularPosts */
.popularPosts {
	padding:20px 20px 30px;
	background:var(--contentB);
	box-shadow:0 5px 35px rgba(0,0,0,.07);
	border-radius:10px
}
.itemPp {
	counter-reset:p-cnt
}
.itemPp .iCtnt {
	display:flex
}
.itemPp >*:not(:last-child) {
	margin-bottom:25px
}
.itemPp .iCtnt::before {
	flex-shrink:0;
	content:'0' counter(p-cnt);
	counter-increment:p-cnt;
	width:25px;
	opacity:.6;
	font-size:85%;
	line-height:1.8em
}
.iInr {
	flex:1 0;
	width:calc(100% - 25px)
}
.iTtl {
	font-size:.95rem;
	font-weight:500;
	line-height:1.5em
}
.iTtmp {
	display:inline-flex
}
.iTtmp::after {
	content:'\2014';
	margin:0 5px;
	color:var(--widgetTac);
	opacity:.7
}
.iInf {
	margin:0 25px 8px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}
.iInf .pLbls {
	display:inline;
	opacity:.8
}
/* Widget Label */
/* List Label */
.categoryWidget {
	padding:20px;
	background:var(--contentB);
	box-shadow:0 5px 35px rgba(0,0,0,.07);
	border-radius:10px
}
.wL ul {
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	width:calc(100% + 30px);
	left:-15px;
	right:-15px;
	font-size:13px
}
.wL li {
	width:calc(50% - 10px);
	margin:0 5px
}
.wL li >* {
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	color:var(--bodyC);
	width:100%;
	padding:8px 10px;
	border-radius:4px;
	line-height:20px
}
.wL li >* svg {
	width:18px;
	height:18px;
	opacity:.8
}
.wL li >*:hover svg, .wL li >div svg {
	/*fill:var(--linkC) !important;*/
	stroke:var(--linkC)
}
.wL li >*:hover .lbC, .wL li >div .lbC {
	color:var(--linkC)
}
.wL .lbR {
	display:inline-flex;
	align-items:center
}
.wL .lbR .lbC {
	margin:0 5px
}
.wL .lbAl {
	max-height:0;
	overflow:hidden;
	transition:var(--trans-4)
}
.wL .lbM {
	display:inline-block;
	margin-top:10px;
	line-height:20px;
	color:var(--linkC);
	cursor:pointer
}
.wL .lbM::before {
	content:attr(data-show)
}
.wL .lbM::after, .wL .lbC::after {
	content:attr(data-text)
}
.wL .lbM::after {
	margin:0 8px
}
.wL .lbT {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	opacity:.7
}
.wL .lbC, .wL .lbM::after {
	flex-shrink:0;
	font-size:12px;
	opacity:.7
}
.lbIn:checked ~ .lbAl {
	max-height:1000vh
}
.lbIn:checked ~ .lbM::before {
	content:attr(data-hide)
}
.lbIn:checked ~ .lbM::after {
	visibility:hidden
}
.wL.bg ul {
	width:calc(100% + 10px);
	left:-5px;
	right:-5px
}
.wL.bg li {
	margin-bottom:10px
}
.wL.bg li >* {
	background:#f6f6f6
}
/* Cloud Label */
.wL.cl {
	display:flex;
	flex-wrap:wrap
}
.wL.cl >*, .wL.cl .lbAl >* {
	display:block;
	max-width:100%
}
.wL.cl .lbAl {
	display:flex;
	flex-wrap:wrap
}
.wL.cl .lbC::before {
	content:'';
	margin:0 4px;
	flex:0 0
}
.wL.cl .lbN {
	display:flex;
	justify-content:space-between;
	margin:0 0 8px;
	padding:9px 13px;
	border:1px solid var(--contentL);
	border-radius:3px;
	color:inherit;
	line-height:20px
}
.wL.cl .lbN:hover .lbC, .wL.cl div.lbN .lbC {
	color:var(--linkB);
	opacity:1
}
.wL.cl .lbN:not(div):hover, .wL.cl div.lbN {
	border-color:var(--linkB)
}
.wL.cl .lbSz {
	display:flex
}
.wL.cl .lbSz::after {
	content:'';
	margin:0 4px;
	flex:0 0
}
/* Widget ContactForm */
.ContactForm {
	max-width:500px;
	font-family:var(--fontB);
	font-size:14px
}
.cArea:not(:last-child) {
	margin-bottom:25px
}
.cArea label {
	display:block;
	position:relative
}
.cArea label .n {
	display:block;
	position:absolute;
	left:0;
	right:0;
	top:0;
	color:rgba(8,16,43,.4);
	line-height:1.6em;
	padding:15px 16px 0;
	border-radius:4px 4px 0 0;
	transition:var(--trans-1)
}
.cArea label .n.req::after {
	content:'*';
	font-size:85%
}
.cArea textarea {
	height:100px
}
.cArea textarea:focus, .cArea textarea[data-text=fl] {
	height:200px
}
.cArea input:focus ~ .n, .cArea textarea:focus ~ .n, .cArea input[data-text=fl] ~ .n, .cArea textarea[data-text=fl] ~ .n {
	padding-top:5px;
	color:rgba(8,16,43,.7);
	font-size:90%;
	background:#ececec
}
.cArea .h {
	display:block;
	font-size:90%;
	padding:5px 16px 0;
	opacity:.7;
	line-height:normal
}
.nArea .contact-form-error-message-with-border {
	color:#d32f2f
}
.nArea .contact-form-success-message-with-border {
	color:#2e7b32
}
.tNtf img.contact-form-cross {
	display:none
}
/* Widget Music Player */
#musicPlayer {
	position:relative;
	direction:ltr;
	width:100%;
	min-height:200px;
	max-width:480px;
	margin:20px 0;
	background:rgba(0,0,0,.03);
	border-radius:20px;
	display:flex;
	align-items:center;
	justify-content:center
}
#musicPlayer::before {
	content:'جاري تحميل المسارات...';
	position:absolute;
	color:inherit;
	font-size:13px;
	font-family:var(--fontB);
	opacity:.8
}
.drK #musicPlayer {
	background:var(--darkBs)
}


@media screen and (min-width:897px) {
	.sidebarTelegram {
		display:none
	}
	.sidebar-widgets > .sidebarTelegram + .widget {
		margin-top:0
	}
}

.scW {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	padding:10px;
	background:var(--notifU);
	color:var(--notifC);
	border-radius:8px;
	overflow:hidden
}
.widget-content .scW:not(:first-child) {
	margin-top:25px
}
.scW::after {
	content:attr(data-text);
	position:absolute;
	left:0;
	bottom:0;
	background:var(--linkC);
	color:#fff;
	font-size:11px;
	padding:4px 18px 4px 12px;
	border-radius:0 30px 0 0
}
.scC {
	width:calc(100% - 50px);
	margin-right:10px
}
.scW.ig::after {
	background:#e1306c
}
.scW.yt::after {
	background:#ff0000
}
.scW.tg::after {
	background:#229ed9
}
.scC >* {
	display:block;
	font-size:13px;
	padding:1px 0
}
.scC >*:first-child {
	font-weight:600
}
.scI {
	width:50px;
	height:50px;
	background:var(--transB);
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center
}
.scI >svg {
	width:28px;
	height:28px
}
.scW.ig svg.svgC,
.scW.ig svg .svgC {
	fill:#e1306c
}
.scW.ig svg.line.svgC,
.scW.ig svg.line .svgC {
	stroke:#e1306c
}
.scW.yt svg.svgC,
.scW.yt svg .svgC {
	fill:#ff0000
}
.scW.yt svg.line.svgC,
.scW.yt svg.line .svgC {
	stroke:#ff0000
}
.scW.tg svg.svgC,
.scW.tg svg .svgC {
	fill:#229ed9
}
.scW.tg svg.line.svgC,
.scW.tg svg.line .svgC {
	stroke:#229ed9
}
.drK .scW {
	background:var(--darkBa);
	color:var(--darkT)
}
.drK .scI {
	background:var(--darkBs)
}
