html{
	font-family: Arial, Courier, Verdana, arial;
	font-size:20px;
}

@media screen and (min-width: 600px){
	html{font-size:22px;}
}

@font-face {	/*textarea*/
	font-family: 'Atma';
	src: url('fonts/Atma.woff2') format('woff2'),
		url('fonts/Atma.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face{	/*full body*/
	font-family: 'Bangla';
	src: url('fonts/Bangla.woff2') format('woff2'),
		url('fonts/Bangla.woff') format('woff');
	font-style: normal;
	font-display: swap;
}

@font-face {	/*overhead title*/
	font-family: 'Hoimanti';
	src: url('fonts/Hoimanti.woff2') format('woff2'),
		url('fonts/Hoimanti.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face { /*link title*/
    font-family: 'Shokuntola';
    src: url('fonts/Shokuntola.woff2') format('woff2'),
        url('fonts/Shokuntola.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*{	box-sizing:border-box;}

body{
	font-family: 'Bangla', Arial, sans-serif !important;
	margin:auto;
	background-color:#6c6;
	padding:0px;
	position: relative;
}

a{	text-decoration:none;	font-weight:bold;}
a:link, a:active{color:#363;}
a:visited{color:#3a3;}
a:hover {color:#c33;}

p{text-indent:40px; text-align:justify;}

#header{
	font-family: 'Shokuntola', Arial, sans-serif !important;
	background-color: #6e6;
	padding: 15px;
	font-size:2.8em;
	color:#fff;
	text-align:center;
	text-shadow:8px 4px 15px #000;
}

#header,.ilabel{
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

a.logo{	text-decoration:none; color:#efe;}

.subt{ font-size:.6em; font-style:italic;}

/* nav bar*/
#topbar{
	background-color:#373;
	box-shadow:4px 4px 10px #696;
	margin-bottom:10px;
	text-align:center;
	padding:5px;
}

.topmenu a{
	color:#afa;
	padding:2px 5px 2px;
	margin:1px;
}

.topmenu a:hover {
	background-color: #afa;
	color:#373;
	border-radius:5px;
}

a.slogo,.mtxt{ display:none;}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	z-index:1;
}

.sticky a.slogo {
	display: inline-block;
}

.sticky + .content{	padding-top: 50px;}

.content{	padding: 10px 5px 5px 5px;float:left;}

.alert {
	position:relative;
	top: -10px;
	right: 0px;
	padding: 0px 6px;
	border-radius: 50%;
	background: #f00;
	color: white;
	font-size:.8em;
}

.color0{
	background: #888;
	color: #eee;
}

@media screen and (min-width: 800px) {
	.mtxt{display:inline;}
}

/* message box*/
.msgs{
	padding:10px 15px ;
	background:#afa;
	color:#373;
	border:1px solid #373;
	border-radius:10px;
	box-shadow: 5px 5px 10px #373;
	margin:0px 5px 20px 5px;
}

.emsg{
	background:#fdd;
	color:#c22;
	border:1px solid #922;
}

.ftop{
	border-radius:0px 0px 10px 10px;
	margin:0px 0px 20px;
}

.imsg{
	background:#ffc;
	color:#663;
	border:1px solid #cf0;
}

.nomsg{	margin:1px;box-shadow: 0px 0px 0px #373;}

/* main divs */
.mainarea,.sidearea{
	padding:5px;
	float: left;
	width:100%;
	margin:auto;
}

@media screen and (min-width: 800px) {
	.mainarea{max-width:70%;}
	.sidearea{width:30%;}
}

.tophead{
	font-family: 'Shokuntola', Arial, sans-serif !important;
	margin-bottom:0px;
	padding:10px;
	background:#373;
	color:#0f0;
	font-size:1.1em;
}

.tophead a{	color:#7f7;	font-weight:bold;}

.bighead{
	font-family: 'Hoimanti', Arial, sans-serif !important;
	padding:15px;
	padding-left:10px;
	background:#373;
	color:#afa;
	font-size:1.2em;
	text-shadow:4px 5px 25px #ccc;
}

.bigt,.midt{
	font-size:3em;
	color:#dfd;
	text-align:center;
}

.midt{font-size:2em;}

.topr{
	margin-top:5px;
	margin-bottom:0px;
	border-radius:10px 10px 0px 0px;
}

.botr{
	margin-top:0px;
	margin-bottom:20px;
	border-radius:0px 0px 10px 10px;
}

.cbox{
	border:2px solid #373;
	background:#373;
}

.mainrow{
	border:2px solid #373;
	padding:2px;
	padding-left:5px;
	background:#afa;
	border-radius:5px 5px 10px 10px;
}

.subhead, .collep{
	margin:-2px -2px 5px -5px;
	padding:5px 10px;
	background:#dfd;
	border-bottom:1px solid #373;
	border-radius:5px 5px 0px 0px;
	font-weight:bold;
	font-size:1.2em;
	cursor:pointer;
}

.active, .collep:hover {
	background-color: #bfb;
}

.glow{
	font-family: 'Atma', Arial, sans-serif !important;
	margin:20px;
	font-size: 1.2em;
	color: #fff;
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	-moz-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
	from {
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 
	0 0 15px #00e673, 0 0 20px #00e673, 0 0 25px #00e673, 
	0 0 30px #00e673, 0 0 35px #00e673;
	}
	to {
	text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 
	0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 
	0 0 35px #ff4da6, 0 0 40px #ff4da6;
	}
}

.eplist{
	padding: 0 18px;
	background-color: efe;
	display: none;
	overflow: hidden;
	font-size:1.1em;
}

.topicdata{
	padding: 0 5px;
	display: none;
	overflow: hidden;
	font-size:1.1em;
}

a.comuser{	display:inline;	color:#f0c;}

.lcols,.rcols{
	padding:5px;
	width:100%;
	text-align:center;
}

.rcols{text-align:left;margin-top:15px;}

@media screen and (min-width: 800px){
	.lcols,.rcols{width:47%;float:left;}
	.rcols{float:right;}
}

@media screen and (min-width: 750px){
	.bimp{
		display: inline-block;
		visibility:visible;
	}
}

.postrow{
	padding:5px;
	background:#8d8;
	border:1px solid #373;
}

.editinfo{
	color: #555; 
	background-color: #aea;
	font-size: .8em;
	margin-top:2px;
	margin-bottom:2px;
	border-top:2px solid #686;
	border-bottom:2px solid #686;
}

.readon{
	margin:5px 2px 0px 2px;
	padding:5px 15px;
	background:#dfd;
	border-radius:10px 10px 5px 5px;
	font-weight:bold;
	font-size:1.2em;
	text-align:center;
}

.usrbox{
	padding:2px;
	text-align:left;
	width:100%;
	display:block;
}

.combox{
	padding:2px;
	text-align:left;
	width:100%;
	display:block;
}

@media screen and (min-width: 600px){
.usrbox{
	width:25%;
	float:left;
	text-align:center;
	border-right:2px solid #373;
	}
	
.combox{
	width:73%;
	float:left;
	margin-left:-2px;
	border-left:2px solid #373;
	}
}

.trans{
	opacity: 0.3;
	position: absolute;
	cursor: default;
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	right: 40%;
	top: 40%;
}

a.flinkpr, a.flinknx{
	display:block; 
	position:fixed; 
	top:50%;
	opacity:.3;
	background:#373;
	padding:5px 5px;
	margin:15px 15px 15px 0px;
	border-radius:0px 50% 50% 0px;
	font-size:2em;
	font-weight:bold;
	color:#fff;
}

a.flinkpr{
	left: 5px;
}

a.flinknx{
	right: -6px;
	border-radius:50% 0px 0px 50%;
}

a.flinkpr:hover, a.flinknx:hover{
	opacity:1;
}

.down{
	color:#cfc;
	background:#696;
	padding:10px;
	border-radius:10px;
	margin:15px;
}

/*bread*/
.bredbox{
	margin-top:25px;
	margin-bottom:0px;
	padding-left:10px;
	background:#373;
	color:#afa;
}

.bread{
	margin:5px;
	position:relative;
	top:-10px;
	border:2px solid #373;
	background:#cfc;
	color:#373;
	padding:5px 10px;
	border-radius:15px 0px;
}

.righty{
	position:relative;
	top: -25px;
	right:10px;
	float:right;
	border-radius:20px;
}

.addnew{display:none;}

.uimp{display:none;}

@media screen and (min-width: 550px){
	.uimp,.addnew{	display: inline-block;}
	.righty{border-radius:10px 0px;	}
}

/*chats*/
.icobox{
	float:left;
	height:auto;
	padding:8px;
	width:80px;
	color:#3c3;
}

.databox{
	float:left;
	width:75%;
	margin:2px;
}

.chathide{
	background:#cff; 
	border-radius:10px; 
	padding:2px;
}

.messbox{
	display:block;
	margin:10px 0px;
}

.uinfo,.umess{
	display:block;
	margin:0px;
	padding:10px;
}

.umess{
	background: #9fc;
	border-radius: 0px 0px 15px 15px;
	border:1px solid #3c6;
}

.uinfo{
	background: #3c6;
	border-radius: 15px 15px 0px 0px;
}

.hide{	display:block;}

.mtime{
	font-size:.8em;
	font-weight:normal;
}

.deep{
	background: #cff;
	border-radius: 0px 0px 15px 15px;
}

@media screen and (min-width: 700px) {
	.messbox{display:flex; margin:10px;}
	.uinfo,.umess{float: left;width:90%;}
	.uinfo{width:200px;border-radius: 15px 0px 0px 15px;}
	.umess{border-radius: 0px 15px 15px 0px;margin-left:0px;}
	.hide{display:none;}
	.deep{background: #cff;margin-left:200px;border-radius:15px}
}

hr.norm{
	border: 1px solid #bbb; width:90%; 
}

.mbox{
	padding:5px;
	text-align:left;
	max-width:100%;
	display:block;
}

/*paginate*/
.pages{
	border:2px solid #373;
	border-radius:10px;
	background:#cfc;
	padding:5px;
	position:relative;
	top: 12px;
	left: calc(50% - 100px);
	z-index:1;
	color:#373;
}

.page{
	border:1px solid #373;
	border-radius:10px;
	background:#efe;
	display:none;
}

.page:hover{
	background:#bfb;
}

a.impp{
	display: inline-block;
}

@media screen and (min-width: 500px){
	.pages{left: calc(50% - 200px);}
	
	a.simpp{display: inline-block;}
}

@media screen and (min-width: 800px){
	a.mimpp{display: inline-block;}
}

@media screen and (min-width: 1200px){
	a.limpp{display: inline-block;}
}

/*form field*/
input[type=text],input[type=password],input[type=file],
select,textarea{
	width: 100%;
	padding: 5px;
	margin: 8px 0px;
	display: inline-block;
	border: 2px solid #3d3;
	box-sizing: border-box;
	background:#dfd;
	font-size:1.1em;
}

input:focus {	border: 2px solid #dd5;}

button{
	background-color: #4A5;
	color:#fff;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	border-radius:10px;
	font-size:1.1em;
}

button:hover {opacity:0.8;}

/* episode */
.epblock{
	display: inline-block;
	position: relative;
}

.epcover{
	margin:10px;
	padding-left:5px;
	background:#494;
	width:190px;
	height:250px;
	border-radius:10px 0px 5px 5px;
	box-shadow:10px 10px 10px #7a7;
	border-top:2px solid #373;
	border-right:2px solid #373;
	border-left:15px solid #373;
	border-bottom:5px solid #373;
}

.label{
	position: absolute; 
	left:-6;
	top: 25%; 
	background: #f44;
	color: #fdd;
	transition: .5s ease;
	opacity:1;
	font-size: .6em;
	padding: 5px;
	border-radius:10px 0px;
}

.eplabel{
	position: absolute; 
	transition: .5s ease;
	opacity:0;
	font-size: 1em;
	font-weight:bold;
	padding: 5px;
	color: #373; 
	width: 80%;margin:auto;
	text-align: center;
	border-radius:10px;
	border:1px solid #373;
}

.etitle{
	background: #cfc;
	top: 0px;
	right:15px;
}

.elabel{
	bottom: 5px;
	right:15px;
	background: #cfc;
}

.estat{
	bottom: 5px;
	right:15px;
	opacity:1;
	font-size:.7em;
	font-weight:bold;
	background:#efe;
	white-space:nowrap;
}

.epblock:hover .etitle{	opacity :1;}
.epblock:hover .elabel{	opacity :1;}
.epblock:hover .estat{	opacity :0;}

/*action form*/
.editsub,.editfield,.editbut,.editimg{
	width:100%;
	text-align:left;
	padding:2px;
}

.editsub{
	padding-top:15px;
	margin-top:5px;
}

.editbut{	text-align:center;}

@media screen and (min-width: 580px){
.editsub,.editfield,.editbut{	float:left;	}
	
	.editsub,.editfield{	text-align:right;}
	
	.editsub{	width:25%;	}
	
	.editfield{	width:70%;	}
	
	.multi{
	width:40%;
	display:inline-block;
	}
	
	.editimg{	max-width:48%;	float:left;	}
}

/*UCP*/
.ucphead{
	padding:10px;
	background:#373;
	color:#0f0;
}

.ucphead a{
	color:#7f7;
	font-weight:bold;
}

.current{
	background:#dfd;
	padding:7px 5px 12px;
	color:#373;
	border-radius:15px 15px 0px 0px;
}

a.current{
	color:#373;
}

.ucpbox{
	border-top:0px;
	background:#373;
}

.panel{
	margin:0px;
	padding:5px;
	padding-left:10px;
	background:#dfd;
	color:#373;
	border:3px solid #373;
	border-top:0px;
	border-radius:10px;
}

table{
	border-spacing:0;
	width:100%;
	border:2px solid #373;
	font-size:1em;
	padding: 5px;
}

tr:nth-child(even) {background-color: #bfb;}

.paytab {
	overflow: hidden;
	padding: 0px;
}

.paytab button {
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	transition: 0.3s;
	background:#afa;
	color:#040;
	font-size:1.1em;
	font-weight:bold;
	margin:0;
	width:32%;
	border: 1px solid #373;
	border-radius:10px 10px 0px 0px;
	z-index:1;
}

.paytab button:hover {
	background-color: #3f3;
}

.paytab button.active {
	background-color: #dfd;
	border-bottom:1px solid #dfd;
	color:#373;
}

.tabcontent {
	display: none;
	padding: 6px 12px;
	background:#dfd;
	border:1px solid #373;
	margin-top:-1px;
}

.ipgs{
	display: inline-block;
	position: relative;
	padding:0px 0px 0px 5px;
	border:2px solid #373;
	margin:5px;
}

.ilabel{
	border:2px solid #373;
	border-radius:10px;
	position: absolute; 
	bottom: 5px;
	right:10px;
	width: 90%;
	background: #cfc;
	margin:auto;
	text-align: center;
	transition: .5s ease;
	opacity:0;
}

.ipgs:hover .ilabel{opacity:1;}

/*footer*/
.footarea{
	margin-top:20px;
	width: 100%;
}

#footbar{
	background-color:#373;
	margin-top:10px;
	text-align:center;
	padding:5px;
	clear:both;
	position: sticky;
	bottom: 0;
}

.foot{
	background-color: #6e6;
	padding:5px;
	font-size:.9em;
	text-align: center;
}