@charset "UTF-8";

/* reset kinde of */

* {
	box-sizing: border-box;
	outline: none !important;
}

/* global */

p {
	margin: 0.25em 0;
}

a {
	text-decoration: none;
}

img, table,audio {
	max-width: 100%;
}

video {
	width: 100% !important;
	height: auto !important;
}

.imgFeat {
	width: 100%;
	height: auto;
}

.hr {
	border: 0;
	height: 15px;
	background: transparent !important;
}

/* html */

html {
	scroll-behavior: smooth;
}

/* margin and padding and width */

.fit-CON {
	width: fit-content;
}

.Hfit-CON {
	height: fit-content;
}

.mrg0, .ul, .padOmrg0 {
	margin: 0;
}

.mrgb {
	margin-bottom: 1rem;
}

.pad10 {
	padding: 10px;
}

.pad15 {
	padding: 15px;
}

.padOmrg0 {
	padding: 0;
}

.mrg-B10 {
	margin-bottom: 10px;
}

.mrg-B15 {
	margin-bottom: 15px;
}

.mrg-T10 {
	margin-top: 10px;
}

.mrg-T15 {
	margin-top: 15px;
}

.mrg-R10 {
	margin-right: 10px;
}

.mrg-R15 {
	margin-right: 15px;
}

.mrg-L10 {
	margin-left: 10px;
}

.mrg-L15 {
	margin-left: 15px;
}


/* lists */

.ul {
	list-style-type: none;
	padding: 0;
}

.li:last-child,.lib:last-child {
	margin-bottom: 0;
}

.lib:last-child {
	border-bottom: 0;
}

/* flex */

.fl,.flW,.flRe,.flWRe,.plmc {
	display: flex;
}

.flW,.flWRe {
	flex-wrap: wrap;
}

.flRe,.flWRe {
	flex-direction: row-reverse;
}

.aliI-CE,.plmc {
	align-items: center;
}

.jusCo-SP {
	justify-content: space-between;
}

.jusCo-CE,.plmc {
	justify-content: center;
}

.fl-im {
	display: flex !important;
}

.aliI-flS {
	align-items: flex-start;
}

.aliI-flE {
	align-items: flex-end;
}

.fl1 {
	flex-grow: 1;
	flex-shrink: 1;
}

/* border-radius */

.borOK {
	border-radius: 50%;
}

.borNOK {
	border-radius: 10rem;
}

.bor-INH {
	border-radius: inherit;
}

/* buttons and input[type="submit"] */

.but, input[type="submit"] {
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}



/* positioning */

.por{
	position: relative;
}

.pos,.farhana  {
	position: absolute;
}

.farhana {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
}

.zin0 {
	z-index: 0;
}

.zin1 {
	z-index: 1;
}

.zin2 {
	z-index: 2;
}

.zin3 {
	z-index: 3;
}

.zin4 {
	z-index: 4;
}

.zin5 {
	z-index: 5;
}

.zin6 {
	z-index: 6;
}

.zin7 {
	z-index: 7;
}

.zin8 {
	z-index: 8;
}

.zin9 {
	z-index: 9;
}

.zin10 {
	z-index: 10;
}

/* aligns */

.txt-R {
	text-align: right;
}

.txt-C,.plmc {
	text-align: center;
}

.txt-L {
	text-align: left;
}

.dir-L {
	direction: ltr;
}

.dir-R {
	direction: rtl;
}

/* summary */

summary,
[onclick] {
	cursor: pointer;
}

.non-mark {
	list-style-type: none;
}

.non-mark::marker,
.coltra {
	color: transparent !important;
}

/* details topics... */

.non {
	display: block;
}

details .clBut .clos, details[open] .clBut .ope, .disp-N,[name="dis-N"] {
	display: none;
}

details[open] .clBut .clos {
	display: initial;
}

/* displays */

.disp-B {
	display: block;
}

/* float */

.floR {
	float: right;
}

.floL {
	float: left;
}

.clear {
	clear: both;
}

/* overflow */

.ovf-H {
	overflow: hidden;
}

.ovf-YS {
	overflow-y: scroll;
}

.ovf-YAU {
	overflow-y: auto;
}

/* background and backG settings */

.backGSize {
	background-size: cover !important;
}

/* fonts settings */

.FSt-NOR {
	font-style: normal;
}

.FWe-NOR {
	font-weight: normal;
}

/* @key frames */

@keyframes fade-farhan {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes rot-farhan {
	0% {
		transform: rotate(0deg);
	}
	
	100% {
		transform: rotate(360deg);
	}
}

/* animations */

.fade-ME,
.stickyAs {
	animation: fade-farhan 0.6s linear 0s 1;
}

/* Fonts */

/* English Font */

@font-face {
	font-family: 'Poppins-Regular';
	src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot');
	src: url('https://bayanbox.ir/download/3597202278100401580/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
	url('https://bayanbox.ir/download/1068366696921114214/Poppins-Regular.svg#Poppins-Regular') format('svg'),
	url('https://bayanbox.ir/download/5947179238070229354/Poppins-Regular.ttf') format('truetype'),
	url('https://bayanbox.ir/download/4861806138071738912/Poppins-Regular.woff') format('woff'),
	url('https://bayanbox.ir/download/7211620908606122750/Poppins-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}


/* Persian Font */

@font-face {
	font-family: 'Vazir-Regular';
	src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot');
	src: url('//bayanbox.ir/download/4827310715344697348/Vazir.eot?#iefix') format('embedded-opentype'),
	url('//bayanbox.ir/download/9079346587792044865/Vazir.woff2') format('woff2'),
	url('//bayanbox.ir/download/8618153108850776974/Vazir.woff') format('woff'),
	url('//bayanbox.ir/download/8657326714357973781/Vazir.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

textarea, input,
select, body,
button,
h1, h2, h3, h4, h5, h6,
.followBx, .followThis,
.cke_reset_all .cke_rtl * {
	font-family: 'Poppins-Regular','sahel';
}


/* body */

body {
	background: #202124 url("#");
	font-size: 16px;
}

/* header */

header#headSite {
	background: #303136 url("//bayanbox.ir/download/4509215333392490980/header.png") no-repeat;
	background-size: cover;
	height: 300px;
	background-position-y: 100%;
}

/* nav */

nav {
	padding: 0 25px;
	background: rgb(32, 33, 36, 0.6);
	border-bottom: 1px solid #585b63;
}

/* blog name in nav bar */

.blgN a {
	font-size: 18.72px;
	color: #fff;
}

/* menu toggle in nav bar */

.tog-But {
	width: 30px;
	height: 30px;
	background: #313236;
	flex-direction: column;
	display: none;
	
}

.tog-But span {
	border-bottom: 2px solid #fff;
	width: 60%;
}

.tog-But span.x.disp-B {
	margin-top: 3px;
}

.toggle-menu-container,
.toggle-room-list {
	position: fixed;
	height: 100vh;
	background: #202124;
	width: 300px;
	padding: 15px;
	box-shadow: 2px 0 12px rgb(0 0 0 / 40%);
	opacity: 0;
	visibility: hidden;
}

.toggle-room-list {
	right: -350px;
}

.toggle-room-list.shMe {
	right: 0;
}

.toggle-menu-container {
	left: -350px;
}

.toggle-menu-container.shMe {
	left: 0;
}

.close-But {
	flex-direction: column;
	width: 30px;
	height: 30px;
	background: #313236;
	
}

.close-But span {
	width: 71%;
	border-bottom: 2px solid #ffffff;
}

.close-But span:first-child {
	transform: rotate(327deg);
}

.close-But span:last-child {
	transform: rotate(35deg);
}

.menu-I2 {
	padding: 10px;
	background: #1b1b1b;
	border-radius: 12px;
	color: #d3d2d1;
}

.menu-I2:hover {
	background: #313236;
}

.NeedTopMargin {
	margin-top: 25px;
}

/* social links in toggle menu */

.toggle-menu-container .socia a {
	width: 30px;
	height: 30px;
	border: 1px solid #2e2e2e;
	color: #7e7e7e;
}

/* telegram */

.toggle-menu-container .socia a.t:hover {
	border-color: #2196f3;
	color: #2196f3;
}

/* pinterest */

.toggle-menu-container .socia a.p:hover {
	color: #d72525;
	border-color: #d72525;
}

/* email */

.toggle-menu-container .socia a.e:hover {
	color: #efefef;
	border-color: #efefef;
}

/* instagram */

.toggle-menu-container .socia a.i:hover {
	border-color: gold;
	color: gold;
}

/* tooltips */

[data-tooltip] {
	position: relative;
}

.toggle-menu-container .socia a:after {
	content: attr(data-tooltip);
	position: absolute;
	max-width: 260px;
	top: 0;
	white-space: nowrap;
	padding: 6px;
	background: #1b1b1b;
	border-radius: 5px;
	font-size: 13.5px;
	opacity: 0;
	visibility: hidden;
	z-index: 5;
	pointer-events: none;
}

.toggle-menu-container .socia a:hover:after {
	top: -45px;
}

.shMe,
.toggle-menu-container .socia a:hover:after,
.mainTxt h2[id]:hover:after,
.mainTxt h3[id]:hover:after,
.mainTxt h4[id]:hover:after,
.mainTxt h5[id]:hover:after,
.mainTxt h6[id]:hover:after {
	opacity: 1 !important;
	visibility: visible !important;
}

/* copy right in toggle menu */

.toggle-menu-container .copyright {
	font-size: 9.5px;
	color: #7a7a7a;
	border: 1px solid #2e2e2e;
}

/* menu */

.menu-i1 a {
	font-size: 16px;
	color: #d3d2d1;
	padding: 27px 36px;
}

.menu-i1 a:hover {
	background: #313236;
}

.menu-i1 a.current,
.menu-I2.current {
	color: #fff;
}

/* top header buttons */

nav ul[name="block-top-buttons"] li a {
	background: #313236;
	color: #fff;
	width: 30px;
	height: 30px;
	
}

nav ul[name="block-top-buttons"] li a[onclick*="Search"] i {
	top: 2.8px;
	left: -0.75px;
}

nav ul[name="block-top-buttons"] li a[onclick*="Room"] i {
	top: 2.25px;
}

nav ul[name="block-top-buttons"] li a[href$="blog.ir"] i {
	top:2px;
} 

nav ul[name="block-top-buttons"] li a:after {
	content: "";
	position: absolute;
	background: gold;
	width: 30px;
	height: 30px;
	transform: translate(20px, -22px) rotate(45deg);
	-webkit-transform: translate(20px, -22px) rotate(45deg);
	-moz-transform: translate(20px, -22px) rotate(45deg);
	-o-transform: translate(20px, -22px) rotate(45deg);
	-ms-transform: translate(20px, -22px) rotate(45deg);
	z-index: 1;
}

nav ul[name="block-top-buttons"] li a:hover:after {
	transform: translate(0, 0);
}

nav ul[name="block-top-buttons"] li a:hover {
	color: #000;
}

/* search form */

.serchCons {
	opacity: 0;
	visibility: hidden;
	top: -200px;
}

.serchCons.shMe {
	top: 0;
}

#srchBx {
	background: none !important;
	border: 0 !important;
	margin: 0 !important;
	height: 100% !important;
	line-height: normal !important;
	border-radius: 0 !important;
}

#srchBx form {
	display: flex;
	justify-content: center;
}

#srchBx form,
.search-wrapper {
	height: 100%;
	position: relative;
}

.search-wrapper {
	width: 100%;
	margin: 0 !important;
}

.search-wrapper input.text[name="q"] {
	height: 100%;
	width: 100%;
	border: 0;
	padding: 0 25px 0 80px;
	font-size: 20px;
	color: #fff;
	background: #000;
}

#srchBx form input[type="submit"],
#srchBx form .search-wrapper:after {
	width:78px;
	height:78px;
}

#srchBx form input[type="submit"] {
	position: absolute;
	left: 0;
	border-right: 2px dashed #1c1c1c;
	background: none;
	border-radius: 0;
	float: none;
}

#srchBx form .search-wrapper:after {
	content: '\f002';
	position: absolute;
	left: 0;
	background: transparent;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	top: 0;
	font-family: 'FontAwesome';
}

.close-But.s {
	left: 50%;
	bottom: -15px;
	transform: translateX(-50%);
}

/* toggle room list */

.toggle-room-list .name-part section.fl.aliI-CE span.disp-B.borNOK {
	background: #d3d2d1;
	height: 7px;
}

.toggle-room-list .name-part section.fl.aliI-CE span[name="i1"] {
	width: 7px;
}

.toggle-room-list .name-part section.fl.aliI-CE span[name="i2"] {
	width: 16px;
}

.toggle-room-list .name-part section.fl.aliI-CE span[name="i3"] {
	width: 61px;
}

.toggle-room-list .name-part span.xn.disp-B.mrg-R10 {
	color: #fff;
	font-size: 16px;
}

/* room list items */

.room-I {
	background: #1b1b1b;
	border-radius: 10px;
	font-size:16px;
	color: #d3d2d1;
}

.room-I span {
	padding-left: 6px;
}

.room-I i {
	display: contents;
}

.room-I:hover {
	background: #313236;
	color: #fff;
}


/* toggle room list */

.toggle-room-list::-webkit-scrollbar,
.tab-body::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background: #808080;
}

.toggle-room-list::-webkit-scrollbar-thumb,
.tab-body::-webkit-scrollbar-thumb {
	background: #313236;
}

/* usefull links */

.room-I.por span {
	padding: 0;
}

.room-I.por {
	padding-left: 30px;
}

.room-I.por  i {
	position: absolute;
	display: block;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	height: 16px;
}


/* main section */

main {
	width: 1000px;
	margin: 35px auto 0;
	
}

aside,
#article-block {
	height: fit-content;
}

/* article block */

#article-block {
	width: 625px;
}

/* post item in first page */

.post-I.first-page-index {
	border: 1px solid #333;
	border-radius: 10px;
	padding: 15px;
	background: #111;
}

.post-I.first-page-index > a.disp-B > .imgFeat,
.post-I.first-page-index > .classarticlemain > a.disp-B > .imgFeat {
	border-radius: 10px;
}

.name-ifIndex1 {
	padding: 6px 0;
}

.name-ifIndex1 a,
footer#footer-site p > strong > a {
	font-size: 23px;
	color: #d3d2d7;
	background-image: linear-gradient(0deg, #ffc107, #ffc107);
	background-repeat: no-repeat;
	background-size: 0;
	background-position: 0px 30px;
}

.name-ifIndex1 a:hover,
footer#footer-site p > strong > a:hover {
	background-size: 100%;
}

.mainTxt {
	font-size: 15px;
	color: #7e7e7e;
}

.footer-posIndex1 {
	padding-top: 15px;
}

.footer-posIndex1 .bl1 section.fl.aliI-CE img.borOK.mrg-R10 {
	padding: 5px;
	box-shadow: 1px 2px 2px #000,2px 2px 5px inset #000;
	background: #222;
	border: 1px solid #333;
}

.footer-posIndex1 .bl1 section.fl.aliI-CE span.disp-B {
	color:#555;
	font-size:15px;
}

.footer-posIndex1 .bl1 section.fl.aliI-CE span {
	font-size: 12px;
	color:#444;
}

.posInd1details a {
	padding: 1.5px 10px;
	background: #1b1b1b;
	border-radius: 5px;
	width: fit-content;
	font-size: 15px;
}

.posInd1details a b {
	border-radius: inherit;
	background: #333;
	text-align: center;
	text-overflow: ellipsis;
	padding: 2.5px 10px;
	max-width: 100px;
	min-width: 80px;
	font-size: 12.5px;
	color: #fff;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.posInd1details a b:after {
	content: '';
	position: absolute;
	border-width: 8px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
	top: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%);
}

.posInd1details a[name="lik"] {
	margin-top: 3px;
	color: #d3d2d7;
}

.posInd1details a[name="cm"]{
	color:#aaa;
}

.posInd1details a i {
	display: contents;
}

.posInd1details a span {
	padding-left: 6px;
}

span.rate-counter {
	padding-left:0 !important;
}

.posInd1details a:hover b{
	opacity: 1;
	top: -40px;
	visibility: visible;
}

.tag-IND1-I a {
	padding: 2.5px 4px;
	display: block;
	color: #777;
	font-size: 13.5px;
	background: linear-gradient(0deg, #ffeb3b, #ffeb3b) no-repeat;
	background-size: 0%;
	background-position: 0px 22px;
}

.tag-IND1-I a:before {
	content: '#';
	color: #999;
	position: relative;
}

.tag-IND1-I a:hover, .tag-IND1-I a:hover:before {
	color: #dfdfdf;
	background-size: 100%;
}

/*pagination box*/

.paginationBox {
	background: #1a1a1a;
	padding: 10px 10px 6px;
	border: 1px solid #333;
	border-radius: 6px;
}

.paginationBox a {
	padding: 0 11px;
	background: #111;
	border-radius: 3px;
	border-bottom: 3px solid #000;
	box-shadow: 0px 3px 2px 0px #00000069;
	color: #d3d2d1;
	font-size: 14px;
	margin:0 0 4px 5px;
}

.paginationBox a:active, .paginationBox a.current {
	background: #222323;
	color: #d3d2d1;
	box-shadow: none;
	border-bottom-color: #000000;
}

/* Rooms Settings */

main[data-howstruct*="Room"] {
	display:block !important;
}

main[data-howstruct*="Room"] > section#article-block {
	width:100% !important;
}

main[data-howstruct*="Room"] > aside#indexFirstSide {
	display: none !important;
}

/* templates room settings */

main[data-howstruct*="Templates Room"] > section#article-block,
main[data-howstruct*="Creativity Room"] > section#article-block,
main[data-howstruct*="Learning Room"] > section#article-block,
main[data-howstruct*="React Room"] > section#article-block{
	display: flex;
	flex-wrap: wrap;
}

main[data-howstruct*="Templates Room"] > section#article-block > article.post-I > section.classarticlemain,
main[data-howstruct*="Creativity Room"] > section#article-block > article.post-I > section.classarticlemain,
main[data-howstruct*="Learning Room"] > section#article-block > article.post-I > section.classarticlemain,
main[data-howstruct*="React Room"] > section#article-block > article.post-I > section.classarticlemain,
main[data-howstruct*="Pod Cast Room"] > section#article-block > article.post-I > section.classarticlemain,
main[data-howstruct*="Templates Room"] > section#article-block > article.post-I > section.classarticleTemplate > section.dataPinRoom a.x21r{
	display:none;
}

main[data-howstruct*="Templates Room"] > section#article-block > article.post-I > section.classarticleTemplate,
main[data-howstruct*="Creativity Room"] > section#article-block > article.post-I > section.classarticleTemplate,
main[data-howstruct*="Learning Room"] > section#article-block > article.post-I > section.classarticleTemplate,
main[data-howstruct*="React Room"] > section#article-block > article.post-I > section.classarticleTemplate,
main[data-howstruct*="Pod Cast Room"] > section#article-block > article.post-I > section.classarticlecast{
	display:block;
}

main[data-howstruct*="Templates Room"] > section#article-block > article.post-I,
main[data-howstruct*="Creativity Room"] > section#article-block > article.post-I,
main[data-howstruct*="Learning Room"] > section#article-block > article.post-I,
main[data-howstruct*="React Room"] > section#article-block > article.post-I{
	width: 30.6%;
	margin-left: 4px;
	margin-bottom: 25px;
	flex-grow: 0.2;
}

.classarticleTemplate a > .imgforFeature {
	width: 100%;
	height: 222px;
	border-radius: 5px;
	top: 0;
	background-position: center !important;
}

main[data-howstruct*="Templates Room"] >
section#article-block > article.post-I >
section.classarticleTemplate >
section.dataPinRoom a.juTA {
	display: flex;
}

main[data-howstruct*="Templates Room"] >
section#article-block > article.post-I >
section.classarticleTemplate >
section.dataPinRoom h3,
main[data-howstruct*="Creativity Room"] >
section#article-block > article.post-I >
section.classarticleTemplate >
section.dataPinRoom h3,
main[data-howstruct*="Learning Room"] >
section#article-block > article.post-I >
section.classarticleTemplate >
section.dataPinRoom h3,
main[data-howstruct*="React Room"] >
section#article-block > article.post-I >
section.classarticleTemplate >
section.dataPinRoom h3{
	width:calc(100% - 52px);
}

.dataPinRoom h3 a {
	display: inline;
	color: grey;
	font-size: 19px;
	font-weight: normal;
	background: linear-gradient(45deg, firebrick, firebrick) no-repeat;
	background-size: 0;
	background-position: 100% 16px;
}

main[data-howstruct*="Templates Room"] > section#article-block > article.post-I:hover,
main[data-howstruct*="Creativity Room"] > section#article-block > article.post-I:hover,
main[data-howstruct*="Learning Room"] > section#article-block > article.post-I:hover,
main[data-howstruct*="React Room"] > section#article-block > article.post-I:hover{
	background: #000;
	border-color: #000;
	box-shadow: 0px 5px 5px 0px #111;
}

main[data-howstruct*="Templates Room"] > section#article-block > article.post-I:hover .roomxname,
main[data-howstruct*="Creativity Room"] > section#article-block > article.post-I:hover .roomxname,
main[data-howstruct*="Learning Room"] > section#article-block > article.post-I:hover .roomxname,
main[data-howstruct*="React Room"] > section#article-block > article.post-I:hover .roomxname{
	background-size: 100%;
	color:#fff;
}

.juTA,
.roomReadmore.x21r{
	height: 25px;
	width: 52px;
	border: 1px solid #333;
	background: #222;
	box-shadow: inset 1px -5px 20px 0px #000000, 0px 3px 20px 4px #000;
}

.juTA:after,
.roomReadmore.x21r:after{
	position: absolute;
	content: '<\/>';
	color: #d3d2d7;
	top: 1px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
}

.roomReadmore.x21r:after {
	content:'⇱';
}

.juTA:active,
.roomReadmore.x21r:active{
	background: red;
	color:#fff;
}

.paginationBox[data-whichpag*=" Room"] {
	width:100%;
}

/*cast room setting*/

main[data-howstruct*="Pod Cast Room"] > section#article-block {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

main[data-howstruct*="Pod Cast Room"] > section#article-block > article.post-I {
	width: 300px;
	border-radius:0;
	padding: 0;
	border: 0;
}

.classarticlecast {
	padding:10px;
	border-radius: 5px;
	overflow:hidden;
}

.classarticlecast:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
}

.muEX {
	width: calc(100% - 80px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.muEX h3 a {
	font-size: 16px;
	color: #fff;
	text-shadow: 0px 2px 0px #818181;
	background: linear-gradient(0deg, #ffc107, #ff5722) no-repeat;
	padding: 1.6px 6px 5px;
	background-position: 100% -50px;
}

.classarticlecast:hover a.transIt1 {
	color: #fff;
	background-position: 100% 15px;
	text-shadow:none;
}


.classarticlecast:hover {
	background:#000 !important;
}



.muEX a.plmc {
	width: 35px;
	height: 35px;
	background: #1b1b1b;
	text-align: center;
	font-size: 20px;
}

.muEX a.plmc i {
	color: #fff;
	position: relative;
	top: 4px;
	right: -1px;
}


.classarticlecast ._-_musiV0_03-Wh {
	width: 75px;
	height: 75px;
	background-position: center !important;
	box-shadow: -6px 5px 6px black;
}

.classarticlecast section b.FWe-NOR {
	width: calc(100% - 80px);
}

/*post view*/

main[data-get-url*="post/"] aside .nop {
	display:none !important;
}

/*post rooms*/

.name-side.FlA:before {
	bottom: 9px;
	transform: rotateZ(45deg);
}

.name-side.FlA:after, .name-side.FlA:before {
	background: #ffc10799;
	border-radius: 100% 1100% 179px;
	left: 16px;
}

.share {
	text-align: center;
	display: flex;
	justify-content: center;
	padding: 10px 10px 5px;
	flex-wrap: wrap;
	border: 1px solid #333;
	border-radius: 8px;
	background: #111;
	font-size:10px;
}

.share a {
	padding: 5px !important;
	background: black;
	border-radius:4px;
	display: block;
	margin:0 0 5px 4px;
	color:#d3d2d1;
}

.comCoUU {
	background: #111;
	border: 1px solid #333;
	border-radius: 8px;
	font-size: 13.5px;
	color: #d3d2d7;
}

.comCoUU a {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 15px;
	background: #202124;
	border-radius: 100px;
	color: cadetblue;
}

.comCoUU + ul.ul.mrg-T15 a[id^="comment-"] {
    position: relative;
    top: -25px;
}

/*post and page comments*/

li[class*="comII"] > img.borOK {padding: 2px;}

.comIIFirst > img.borOK {
	background: linear-gradient(45deg, #673ab7, #03a9f4);
}

.comment-extra {
	width: calc(100% - 60px);
	border-radius: 3px 0 3px 3px;
}

.top-co {
	padding: 10px 10px 10px 45px;
	border-radius: 3px 0 0 0;
}

.comIIFirst > .comment-extra .top-co {
	background: #111;
	color: #d3d2d1;
	font-size: 14px;
}

.comIIFirst > .comment-extra {
	box-shadow: 0 0 0 1px #111;
}

.top-co:after {
	content: '';
	border-style: solid;
	border-width: 8px;
	position: absolute;
	right: -9px;
	top: -0.7px;
	pointer-events: none;
}

.comIIFirst > .comment-extra .top-co:after {
	border-color: #111 transparent transparent transparent;
}

.top-co a.pos,
.top-co details.pos {
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color:#d3d1d7;
}

.comTxtCo {
	padding: 5px;
	border: 1px solid;
	border-radius: 5px;
	font-size: 13.5px;
	overflow:hidden;
	word-break: break-word;
}

.comIIFirst > .comment-extra .comTxtCo {
	border-color:#333;
	background:#1b1b1b;
	color: #7e7e7e;
}

.comIIFirst.comIISecond {
	padding-right:40px;
}

.socXX {
	left: 25px;
	top: 42%;
	transform: translateY(-50%);
	font-size:14px;
}

.socXX a {
	display: flex;
	margin-right: 8px;
}

.socXX a[name="-t"] {
	color: royalblue;
}

.socXX a[name="-i"] {
	color: #e12d76;
}

.socXX a[name="-e"] {
	color: gold;
}

.top-co details.pos summary.sum {
	color:transparent !important;
}

.top-co details.pos summary.sum i {
	color:#d3d1d7;
}


/*comment add form*/ 

#comBox {
	background: #111;
	border-radius: 10px;
	border: 1px solid #333;
}

/*#combox[data-nocom*="■-■"]> form  * {
	display:none !important;
}

#combox[data-nocom*="■-■"]> form:

#combox[data-nocom*="■-■"] > section.nocom_pls {
	display:block;
}*/

.nocom_pls {
    padding: 5px 15px;
    color: #fff;
    background: #202124;
    margin: 10px 0;
}

.anon-hide.commentAvatar {
	display: none !important;
}

#comBox form label {
	display: none;
	cursor: pointer;
	font-size: 15px;
	color: #d3d2d7;
}

label[for] {
	display: inline-block !important;
}

#comBox form .smalltip {
	display: none !important;
}

.formField2 .fldcontent {
	padding-left: 0 !important;
	margin-right: 0 !important;
}

.fldcontent [name="fullname"], #comBox form select,
.formField2 input.text{
	padding: 5px 10px;
	width: 100%;
	border-radius: 5px;
	background: #1b1b1b;
	color: #d3d2d1;
	border: 1px solid #333;
}


img[id^="cap_img"] {
  border-radius: 5px;
}


.formField2 input.text {
	text-align: right;
}

.bComForm .hasComment {
	margin-left: 0;
}

textarea[name="comment"] {
	width: 100%;
	border-radius: 10px;
	resize: none;
	height: 85px;
	color: #7e7e7e;
	background: #1B1B1F;
	border: 1px solid #333;
}

.sendbutton.hasCheckbox, #bComSub {
	margin: 0;
	padding: 5px 45px;
	background: #4caf50;
	border-radius: 100px;
	color: #000;
	font-weight: 600;
}

.bComForm .hasComment .in {
	display: flex;
	flex-wrap: wrap;
	gap: 0 5px
}

.bComForm .hasComment .in .formField2 {
	flex-grow:1;
}

div.inputFix {padding:0;}

/* sticker container */

.sticker-container {
    overflow-x: scroll;
    flex-shrink: 0;
}

.sticker-container img {
    width: 45px;
    height: 45px;
    padding: 5px;
    margin-left: 15px;
    cursor: pointer;
}

.tipSticker {
    bottom: 90px;
    padding: 5px;
    background: #20ae20;
    color: #fff;
    font-size: 12px;
    border-radius: 100px;
    display: none;
}

.sticker-container img:last-child {margin-left:0;}

.sticker-container img:hover {
    background: #292932;
    border-radius: 4px;
}

.comTxtCo.co2 a[title^="sticker"] {
	width: 75px;
	height: 75px;
	display: inline-block;
	color: transparent;
	background-size: cover !important;
	background-position: center !important;
	pointer-events:none !important;
	text-indent: -10000000px;
}

.comTxtCo.co2 a[title="sticker1"] {
    background: url(https://bayanbox.ir/download/3091859839794979437/emojibest-com-khande.gif);
}

.comTxtCo.co2 a[title="sticker2"] {
    background: url('https://bayanbox.ir/download/854159113046570175/emojibest-com-aghlkol.gif');
}

.comTxtCo.co2 a[title="sticker3"] {
    background: url('https://bayanbox.ir/download/8381332563002088817/emojibest-com-gomshoBiron.gif');
}

.comTxtCo.co2 a[title="sticker4"] {
    background: url('https://bayanbox.ir/download/2922797253919899333/emojibest-com-han.gif');
}

.comTxtCo.co2 a[title="sticker5"] {
    background: url('https://bayanbox.ir/download/1634630009616327768/emojibest-com-like.gif');
}

.comTxtCo.co2 a[title="sticker6"] {
    background: url('https://bayanbox.ir/download/6260369161150626569/emojibest-com-tars.gif');
}

.comTxtCo.co2 a[title="sticker7"] {
    background: url('https://bayanbox.ir/download/71167057394704052/evakhoda.webp');
}

.comTxtCo.co2 a[title="sticker8"] {
    background: url('https://bayanbox.ir/download/1597059979835401069/fanatamke.webp');
}

.comTxtCo.co2 a[title="sticker9"] {
    background: url('https://bayanbox.ir/download/5198253169110393675/gorbe1.webp');
}

.comTxtCo.co2 a[title="sticker10"] {
    background: url('https://bayanbox.ir/download/8919995957104528617/onomad.webp');
}

.comTxtCo.co2 a[title="sticker11"] {
    background: url('https://bayanbox.ir/download/8375858429848873992/salamokoft.webp');
}

.comTxtCo.co2 a[title="sticker12"] {
    background: url('https://bayanbox.ir/download/2528756242596139874/tavalodeshe.webp');
}

.comTxtCo span[style*="font-size: 11px;"] {
	font-size:13.5px !important;
	background-color:#1b1b1b !important;
}

/* page settings */

main[data-get-url*="page"] aside {
	display: none;
}

main[data-get-url*="page"] #article-block {
	width: 100%;
}

/*typography*/

.mainTxt a,
.comTxtCo a{
	padding: 2px;
	color: #9da2ff;
	text-decoration: underline;
}

.mainTxt a:hover,
.comTxtCo a:hover{
	background: #222224;
}

.mainTxt .INFO a {
    color: #66a4f7;
}

.mainTxt .INFO a:hover {
    background: #272e51;
}

a.PREVIEW {
    padding: 3px 15px;
    margin: 10px auto;
    display: inline-block;
    border-radius: 15px;
    box-shadow: 0px 7px 5px #000;
    color: #929292;
    text-decoration: none;
    background: #1c1b1b;
}

code {
	padding: 0.125em 0.25em;
	background: #333;
	border: 1px solid #555;
	color:#e8e8e8;
	font-size: 13.5px;
	hyphens: none;
	tab-size: 2;
	text-align: left;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.mainTxt section h6 {
    border: 0;
}

.mainTxt section h6:after, .mainTxt section h6:before {
    display: none;
}

pre {
	background: #333;
	border-color: #555 !important;
	border-width:2px !important;
	border-radius: 10px;
	padding: 10px !important;
}

pre .str, code .str { color: #fec243; } /* string  - eggyolk gold */
pre .kwd, code .kwd { color: #8470FF; } /* keyword - light slate blue */
pre .com, code .com { color: #32cd32; font-style: italic; } /* comment - green */
pre .typ, code .typ { color: #6ecbcc; } /* type - turq green */
pre .lit, code .lit { color: #d06; } /* literal - cherry red */
pre .pun, code .pun { color: #8B8970;  } /* punctuation - lemon chiffon4  */
pre .pln, code .pln { color: #f0f0f0; } /* plaintext - white */
pre .tag, code .tag { color: #9c9cff; } /* html/xml tag  (bluey)  */
pre .htm, code .htm { color: #dda0dd; } /* html tag  light purply*/
pre .xsl, code .xsl { color: #d0a0d0; } /* xslt tag  light purply*/
pre .atn, code .atn { color: #46eeee; font-weight: normal;} /* html/xml attribute name  - lt turquoise */
pre .atv, code .atv { color: #EEB4B4; } /* html/xml attribute value - rosy brown2 */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre::-webkit-scrollbar,
.sticker-container::-webkit-scrollbar{
	background:transparent;
}



pre::-webkit-scrollbar-thumb,
.sticker-container::-webkit-scrollbar-thumb{
	width:6px;
	height:6px;
	background: #7a7979;
	border-radius:100px;
	border: 4px solid #333;
}

.sticker-container::-webkit-scrollbar-thumb {
border-color:#111;
}

.mainTxt ul li::marker,
.comTxtCo ul li::marker{
	color: #987c3c;
}

.mainTxt ol,
.comTxtCo ol{
	counter-reset: farhan-ol-list;
	list-style: none;
}

.mainTxt ol li,
.comTxtCo ol li{
	position: relative;
	margin-top: 6px;
	counter-increment: farhan-ol-list;
}

.mainTxt ol li:after,
.comTxtCo ol li:after{
	content: counter(farhan-ol-list);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	top:0;
	right:-37px;
	left:0;
	bottom:0;
	inset: 0 -37px 0 0;
	border-radius: 50%;
	font-size: .9em;
	background: #2a2727;
	color: #d5d5d5;
	font-weight: 500;
}

abbr, acronym {
	position: relative;
	text-decoration: none;
	padding: 0px 6px;
	border: 1px solid #333;
	display: inline-block;
	cursor: help;
}

abbr:after, acronym:after {
	content: '?';
	font-size: 7px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 100px;
	background: #085e0c;
	position: absolute;
	width: 10px;
	color: #fff;
	top: -5px;
	left: -5px;
}

.ONTHP {
	border-width: 1px 0 1px 0;
	border-style: solid;
	border-color: #333;
	margin: 1em 0;
}

.ONTHISPAGE {
	padding: 15px 10px 15px 50px;
	cursor: pointer;
	font-size: 17px;
	color: #9b9be8;
}

.ONTHISPAGE:after {
	content: '‹';
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 21px;
	height: 22px;
	font-size: 24px;
	border: 1px solid;
	border-radius: 100px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.ONTHISPAGE:hover:after {background: #333;}

.ONTHISPAGE p {
	font-weight: 600;
}

.ONTHISPAGE:hover > p {text-decoration: underline;}

.ONTHP ul.ON {
	padding-bottom: 10px;
	display: none;
}

.ONTHP.open_ ul.ON {
	display: block;
}

.ONTHP.open_ .ONTHISPAGE:after {
	content:'›';
}

.ONTHP ul.ON li a {
	padding-right: 10px;
	border-right: 1px solid #333;
	margin-bottom: 3px;
	display: inline-block;
	text-decoration: none;
	color: #888;
}

.ONTHP ul.ON li a:hover {
	color: #fff;
	text-decoration: underline;
}

.ONTHP ul.ON li p {
	margin: 10px 0;
	font-size: 16px;
	color: #fff;
}

.mainTxt blockquote {
	padding: 10px;
	border-radius: 10px;
	margin: 1em;
	background: #202124;
	border-color: #666;
	border-width:5px;
	font-style:normal;
}

.mainTxt h6 {
	margin: 8px 0;
	border: 1px solid #333;
	border-bottom: 0;
}

.mainTxt h6.no {
	border:0;
}

.mainTxt h6:after, .mainTxt h6:before {
	content: '⁕';
	padding: 0 5px;
}

.mainTxt h2[id]:after,
.mainTxt h3[id]:after,
.mainTxt h4[id]:after,
.mainTxt h5[id]:after,
.mainTxt h6[id]:after {
    content:'#';
    padding-right:5px;
    text-decoration: 2px solid underline;
    color: #9b9beb;
    opacity: 0;
    visibility: hidden;
}

.mainTxt h2[id]:target:after,
.mainTxt h3[id]:target:after,
.mainTxt h4[id]:target:after,
.mainTxt h5[id]:target:after,
.mainTxt h6[id]:target:after {
    opacity:1;
    visibility:visible;
}

.mainTxt *:target {
    animation:targetFarhanAnime 3s ease 0s 2;
}

@keyframes targetFarhanAnime {
    0%  {
        background:none;
    }

    50% {
        background:#2f2f2f;
    }

    100% {
        background:none;
    }
}

.mainTxt img {
	border-radius:10px;
}

.mainTxt iframe {
	border: 0;
	border-radius: 10px;
	margin: 15px 0 !important;
	width: 100% !important;
	height: 500px;
}

.mainTxt iframe[src*="castbox.fm"] {
    height: fit-content;
}
::selection {
	color: #202124;
	background: #fff;
}

.mainTxt audio {
	width: 100%;
	box-shadow: 0 0 12px 2px #fffdfd;
	border-radius: 100px;
	filter: invert(0.977);
	height: 43px;
}

/* un section */

.mainTxt .INFO {
	margin: 1em;
	border-radius: 10px;
	padding: 10px;
	background: #1c2035;
	color: #d5d5d5;
}

.mainTxt .CAREFULL {
	padding: 30px 10px 10px;
	border-radius: 10px;
	background: #3d1b1b;
	margin: 1em;
	position: relative;
	color: #d5d5d5;
}

.mainTxt .CAREFULL:after {
	content: '!';
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 100px;
	position: absolute;
	top: 6px;
	background: #692626;
	width: 20px;
	height: 20px;
	color: #fff;
}

.mainTxt .CAREFULL:before {
	color: #f00;
	content: 'مواظب باشید';
	position: absolute;
	top: 2px;
	right: 37px;
}

.mainTxt hr {
	margin: 1em -14px;
	border: 0;
	border-bottom: 2px dashed #202124;
}

.mainTxt .TRYIT {
	padding: 30px 10px 10px;
	border-radius: 10px;
	background: #1c291d;
	margin: 1em;
	position: relative;
	color: #d5d5d5;
}

.mainTxt .TRYIT:after {
	content: '<\/>';
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 100px;
	position: absolute;
	top: 6px;
	color: #04ff16;;
}

.catInf {
    margin: 25px 15px;
    padding: 10px;
    background: #222;
    display: flex;
    border-radius: 10px;
    justify-content: space-between;
}

.catInf > img[width="64"] {
    border-radius: 100px;
    margin-left: 10px;
}

.catInf > div {
    width: calc(100% - 75px);
}

.catInf > div > b {
    font-size: 20px;
    background: -webkit-linear-gradient(45deg, #fe0000, #ff7500, #ffff00, #008000, #0000ff,#800080, #800080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.catInf > div > p {padding: 0 5px;}

.catInf > div > a {
    text-decoration: none;
    padding: 1.6px 15px;
    display: inline-block;
    border: 2px solid;
    border-radius: 100px;
    font-size: 10px;
}

.mainTxt ul.feature li {
    list-style: none;
    position: relative;
}

.mainTxt ul.feature li:after {
    content: "\53";
    font-family: "dripicons-v2" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position:absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #7e7e7e;
    color: #9b9b9b;
    border-radius: 100px;
    box-shadow: 10px 3px 5px #283467 inset;
}

/* chat post*/

blockquote.one,blockquote.two {
    border: 0;
    background: #202020;
    color: #ddd;
    width: 83.5%;
    margin-left: auto;
}

blockquote.two {
	margin-right: auto;
	margin-left: 0;
	background: #414141;
	color: #fff;
}



/* side bar */

aside {
	width: 350px;
}

.item-aside {
	border: 1px solid #333333;
	border-radius: 10px;
}

/* info */

.image-blog {
	width: 115px;
	height: 115px;
	margin: 0 auto 15px;
	box-shadow: -3px 5px 4px rgb(0 0 0 / 25%);
}

.roleH1head {
	font-size: 25px;
	color: #d3d2d1;
}

.roleH1head span {
	color: #707070;
}

.shortIntro {
	font-size: 12.3px;
}

.shortIntro a[id] {
	color: #626262;
	text-decoration: underline;
}

.shortIntro a[id]:hover {
	color: #d3d2d1;
}

.shortIntro a[href^="https://goo.gl/"] {
	display: inline-block;
	font-size: 13.5px;
	color: #989898;
}

.shortIntro a[href^="https://goo.gl/"]:hover {
	color: #d3d2d1;
}

.shortIntro p {
	font-size: 13.5px;
	color: #7e7e7e;
	margin:5px 0;
}

.shortIntro section.mrg-T15 a.plmc {
	padding: 8px;
	font-size: 18px;
	border-radius: 10px;
	border: 1px solid;
}

.shortIntro section.mrg-T15 a.plmc span {
	margin-left:10px;
}

.shortIntro section.mrg-T15 a.plmc i,
.s-post-I .extra i.plmc i {
	display:contents;
}

.shortIntro section.mrg-T15 a.plmc.flWAs {
	color: #a7a6a6;
	border-color: #303132;
}

.shortIntro section.mrg-T15 a.plmc.flWAs:hover {
	background: #1b1b1b;
	border-color: #1b1b1b;
	color: #d3d2d1;
}

/* last comments */

.name-side {
	font-size: 17px;
	color: #dfdfdf;
	padding: 10px 10px 10px 60px;
	background: #1b1b1b;
	border-radius: 10px;
}

.name-side.LcM:after,
.name-side.LcM:before,
.name-side.CaT:after,
.name-side.CaT:before,
.name-side.TaG:after,
.name-side.TaG:before,
.name-side.FlA:after,
.name-side.FlA:before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
}

.name-side.LcM:after,
.name-side.LcM:before {
	background: #435eae78;
	border-radius: 100px;
	left: 6px;
	top: 6px;
}

.name-side.LcM:before {
	left: 16px;
	top: 6px;
}

.last-comments-I {
	background: #343434;
	border-radius: 6px;
}

.last-comments-I .extra {
	width: calc(100% - 60px);
}

.last-comments-I .extra .n {
	color: #fff;
	text-transform: capitalize;
	font-size: 16px;
}

.last-comments-I .extra .txt-last-com {
	color: #9e9e9e;
	font-size: 12.5px;
}

/* tab container */

.Tabheader {
	background: #1b1b1b;
	border-radius: 10px;
	overflow: hidden;
}

.Tabheader > section {
	text-align: center;
	width: calc(100% / 4);
	color: #d3d2d1;
	cursor: pointer;
}

.Tabheader > section:hover,
.Tabheader > section.active {
	color: #fff;
	background: #313236;
}

.tab-body.x1 {
	height: 250px;
}

.tab-body > section {
	position: absolute;
	inset: 0;
	bottom: 0;
	left: 0;
	right: 0;
	top: -280px;
	opacity: 0;
	visibility: hidden;
	padding: 0 10px;
}

.tab-body > section.active {
	top: 0;
	opacity: 1;
	visibility: visible;
}

.NAME-SIDE {
	font-size: 20px;
	color: #dfdfdf;
}

/* side bar posts item */

.s-post-I {
	background: #343434;
	border-radius: 10px;
}

.s-post-I b.backGSize {
	width: 60px;
	height: 60px;
	border-radius: 15px;
	box-shadow: -3px 5px 4px rgb(0 0 0 / 25%);
	background-position: center !important;
}

.s-post-I .extra {
	width: calc(100% - 70px);
	padding-left: 25px;
}

.s-post-I .extra h4 {
	color: #d3d2d1;
	font-size: 16px;
}

.s-post-I .extra span {
	color: #7e7e7e;
	font-size: 12.5px;
}

.s-post-I .extra i {
	font-size: 15px;
	color: #1a1a1a;
	top: 0;
	left: 0;
}

/* tag cloud */

.tag-CI {
	margin-left: 5px;
	margin-bottom: 5px;
}

.tag-CI a {
	font-size: 13.5px;
	padding: 3.6px 18px;
	border-radius: 3px;
	background: #333;
	color: #d3d2d1;
}

.name-side.TaG:after,
.name-side.TaG:before {
	border-radius: 4px;
	background: #1e544f7a;
	left: 10px;
	top: 10px;
}

.name-side.TaG:before {
	top:15px;
	left:20px;
	box-shadow:3px 3px #2222228f
}


/* categories */


.name-side.CaT:after,
.name-side.CaT:before {
	border-radius: 5px 100%;
	background: #e91e637a;
	left: 10px;
	top: 10px;
}

.name-side.CaT:before {
	left: 10px;
	top: 19px;
}

.cat-s-I {
	border: 1px solid #333;
	border-radius: 6px;
	color: #7e7e7e;
}

.cat-s-I:hover {
	background: #1b1b1b;
	border-color: #1b1b1b;
	color: #d3d2d1;
}

.cat-s-I span {
	word-break: break-word;
}

/* sub category */

ul.ul.CaT.mrg-T15 li ul li {
	padding-right: 40px;
	position: relative;
}

ul.ul.CaT.mrg-T15 li ul li:after {
	content: '↫';
	width:25px;
	height: 25px;
	text-align: center;
	transition: transform 0.6s ease, box-shadow 1.2s ease;
	-webkit-transition: transform 0.6s ease, box-shadow 1.2s ease;
	-o-transition: transform 0.6s ease, box-shadow 1.2s ease;
	-moz-transition: transform 0.6s ease, box-shadow 1.2s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #333;
	color: #d3d2d7;
	border: 2px dashed #202124;
	border-radius: 100px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

ul.ul.CaT.mrg-T15 li ul li:hover:after {
	transform: translateY(-50%) rotate(347deg);
	box-shadow: -3px 4px 2px 0px #18191a;
}

/* tab arch and daily links */

.Tabheader.x2 > section {
	width: 50%;
}
.tab-body.x2 > section {
	position: absolute;
	opacity: 0;
	visibility: hidden;
}

.tab-body.x2 > section.active {
	position: static;
	visibility: visible;
	opacity: 1;
}

.tab-body.x2 {
	max-height: 250px;
}


/* daily links */

.dL-I {
	border-radius: 6px;
	background: #1b1b1b;
	color: #d3d2d7;
	font-size: 14px;
}

.dL-I:hover {
	background: #313236;
	color: #fff;
}

/* archive */

.arch-I {
	margin-left: 7px;
	margin-bottom: 5px;
}

.arch-I a {
	font-size: 13.5px;
	color: #a7a7a7;
	padding: 4px;
}

.arch-I a:hover {
	background: #292b32;
	text-decoration: 2px solid underline;
	color: #d3d2d7;
}

/* footer */

footer#footer-site {
	background: #1b1b1b;
	margin-top: 35px;
}

footer#footer-site p > strong > a {
	color: #d3d2d1;
	font-size: 16px;
	background-image: linear-gradient(0deg, #d72525, #d72525);
	background-position: 0 20px;
}

footer#footer-site p.mrg0.txt-C {
	COLOR: #8f8f8f;
	font-size: 16px;
}

/* transition */

.transAll1 *,
.transIt1,
nav ul[name="block-top-buttons"] li a:after,
.toggle-menu-container .socia a:after,
.tag-IND1-I a:before,
main[data-howstruct*="Templates Room"] > section#article-block > article.post-I,
.mainTxt h2[id]:after,
.mainTxt h3[id]:after,
.mainTxt h4[id]:after,
.mainTxt h5[id]:after,
.mainTxt h6[id]:after{
	transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
}

.transAll2 *,
.transIt2,
.tab-body > section {
	transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	-webkit-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	-moz-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	-o-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* unic settings */

[onclick*="close"]:active {
	background: red;
}

/* responsive */

/* responsive 1030px VIE */

@media only screen and (max-width:1030px) {
	main[data-howstruct*="Templates Room"] > section#article-block,
	main[data-howstruct*="Creativity Room"] > section#article-block,
	main[data-howstruct*="Learning Room"] > section#article-block,
	main[data-howstruct*="React Room"] > section#article-block {
		justify-content:center;
	}
}

/* responsive 1020px VIE */

@media only screen and (max-width:1020px) {
	main {
		width:100%;
		padding: 0 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	aside {
		width:625px;
		margin-top:20px;
	}
}

/* responsive 915px VIE */

@media only screen and (max-width:915px) {
	main[data-howstruct*="Templates Room"] > section#article-block > article.post-I,
	main[data-howstruct*="Creativity Room"] > section#article-block > article.post-I,
	main[data-howstruct*="Learning Room"] > section#article-block > article.post-I,
	main[data-howstruct*="React Room"] > section#article-block > article.post-I
	{
		width: 48.6%;
	}
}

/* width 830px */

@media only screen and (max-width:830px) {
	
	.toggle-menu-container {
		display: block;
	}
	
	.tog-But {
		display: flex;
	}
	
	.mainMenu {
		display: none;
	}
	
	nav section.fl.aliI-CE > .blgN {
		padding: 27px 0;
	}
}


/* responsive 768px VIE */

@media only screen and (max-width:768px) {
	header#headSite {
		background-position:bottom right;
	}
}

/* responsive 640px VIE */

@media only screen and (max-width:640px) {
	#article-block,
	aside {
		width:100%;
	}
}

/* responsive 600px VIE */

@media only screen and (max-width:600px) {
	main[data-howstruct*="Templates Room"] > section#article-block > article.post-I,
	main[data-howstruct*="Creativity Room"] > section#article-block > article.post-I,
	main[data-howstruct*="Learning Room"] > section#article-block > article.post-I,
	main[data-howstruct*="React Room"] > section#article-block > article.post-I
	{
		width: 100%;
	}
}

/* responsive 500px VIE */

@media only screen and (max-width:500px) {
	.mainTxt iframe {
		height: 380px;
	}
	
	.tipSticker {font-size:9px;}
	
	.catInf > img[width="64"],
	.catInf > div {
		width:100%;
	}
	
	.catInf {flex-direction:column;}
	
	.catInf > img[width="64"] {
	height:auto;
	}
	
	.catInf > div {
		text-align:center;
	}
}


/* responsive 400px VIE */

@media only screen and (max-width:400px) {
	.mainTxt iframe {
		height: 300px;
	}
}


/* responsive 380px VIE */

@media only screen and (max-width:380px) {
	header#headSite {
		background-position:center;
	}
	
	.mainTxt iframe {
		height: 275px;
	}
	
	.tipSticker {font-size:7px;}
}

/* width 315px */

@media only screen and (max-width:315px) {	
	nav ul[name="block-top-buttons"] li[name="flWinH"] {
		display: none;
	}
	
	main[data-howstruct*="Pod Cast Room"] > section#article-block > article.post-I,
	.toggle-room-list,
	.toggle-menu-container {
		width:100%;
	}
	
}

/* for music code that i made */

.player:hover {width:110px !important;}
.con-f {background:#fff !important;}
@media only screen and (max-width:350px) {.con-f {width:100% !important}}
.player > audio {
    filter: none;
    max-width: unset;
    box-shadow: none;
}

@media only screen and (max-width:330px) {
    .far-music {width:98% !important;}
  }	

/* spoiler code */

.far-spoiling___v-0-1[open]{
 text-decoration:none !important;
}
.far-spoiling___v-0-1 {
 width: fit-content;
 transition: all 0.6s linear;
 margin: 10px 0;
}

.far-spoiling___v-0-1, .far-spoiling___v-0-1 summary {
	 cursor: alias;
}

#comBox .item_wrn .icon {
    filter: invert(1) sepia(1);
    border-radius: 50%;
}

#comBox .item_wrn {
    border-color: #333;
    background: #1b1b1b;
    color: #979797;
    font-size: 13px;
}

/*link for contents*/

.cont-for-link---- {
      border-radius: 10px;
      width: 98%;
      border: 1.6px solid #343434;
	padding: 10px;
	overflow:hidden;
    }

    .cont-for-link----:hover {
      background: #333333;
    }

    .cont-for-link---- > div.fl > div.fl > span:nth-child(1) {
    font-weight: 600;
    font-size: 16px;
    color: #b7b7b7;
}

.cont-for-link---- > div.fl > div.fl > span:nth-child(2) {
    font-size: 12px;
    color: #838383;
}

.cont-for-link---- > img {
    aspect-ratio: 2;
    object-fit: fill;
    object-position: center;
    border-radius: 10px !important;
}

.cont-for-link---- > div.txt---- {
  font-size: 14px;
  color: #b3b3b3;}

.cont-for-link---- > div.txt---- > h3 {
    color: cornflowerblue;
}

.por.cont-for-link---- > a:hover {
    background: none;
}


.comTxtCo audio {
    width: 100%;
    padding: 10px;
    filter: invert(1);
    background: #f1f3f4;
    border-radius: 10px;
    border: 1px solid #ddd;
}