html,body{
	margin: 0;
	padding:0;
	height: 100vh;
	-ms-touch-action: manipulation; /* IE 10  */
    touch-action: manipulation; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
	overflow: auto !important;
	overscroll-behavior-y: contain; /* prevent pull to refresh on chrome */ 
}

@media only screen and (min-device-width: 736px) {

	/* width */
	::-webkit-scrollbar {
	  width: 5px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #ececec; 
	  border-radius: 10px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #dddddd; 
	}

}

/* fix for IE */
img{
border:none;
}

/* all placeholder*/
::-webkit-input-placeholder, div ::-webkit-input-placeholder { color:grey; }
::-moz-placeholder { color:grey; } /* firefox 19+ */
:-ms-input-placeholder { color:grey; } /* ie */
input:-moz-placeholder { color:grey; }

.tagform [contenteditable=true]:empty:before {
    content: attr(placeholder);
    color: #c4c2c2;
    white-space: pre-wrap;
    display: inline-block;
    cursor: text;
    font-weight: 300;
}

[contenteditable], textarea{
	-webkit-user-select: text;
	user-select: text;
}

[contentEditable=true] p:empty:before, [contentEditable=true].withph:empty:before {
    content: attr(data-ph);
    color: grey;
}

textarea{
resize: vertical;
}

textarea:focus, input:focus{
    outline: 0;
}

input::-webkit-input-placeholder, [contentEditable=true]::before{
	transition: all 0.3s ease-in-out;
}

input.haseffect[type=text], input.haseffect[type=email]{
	-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(96%, rgba(255, 255, 255, 0)), color-stop(4%, #dcbd3c));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #dcbd3c 4%);
    background-position: -200px 0;
    background-size: 200px 100%;
    background-repeat: no-repeat;
}

input.haseffect[type=text]:focus, input.haseffect[type=email]:focus{
	background-position: 0 0;
}

input.haseffect:not(.noeffect):focus::-webkit-input-placeholder, .haseffect[contentEditable=true]:empty:focus::before{	
	  color: grey;
      font-size: 11px;
      transform: translateY(-20px);
      visibility: visible !important
}

a, div a{
color:black;
text-decoration:none;
}

a:active {
color: #7094A8;
}

.product_desc a{
	color: #0a6986;
}

div.toast a{
	color: #039be5;
}

.productpage .price_details {
    font-size: 22px;
    margin-top: 10px;
}

a.anchor {
    display: block;
    float: left;
    position: relative;
    width: 100%;
    top: -100px;
    visibility: hidden;
}

.pageanchor{
	display: block;
    float: left;
    position: relative;
    width: 100%;
    top: -40px;
    visibility: hidden;
}

a.whitelink{
	color:white;
	text-decoration:underline;
}

a.whitelink:hover{
	color:#ECECEC;
}

.penana-text.text-golden-1 {
    color: #c5992d !important;
}

div font {
    font-size: inherit;
	font-family: inherit;
}

.repaint{
	-webkit-transform: translateZ(0);
}

.displayblock{
display:block;
}

.displaynone{
display:none;
}

div.displaynone{
display:none;
}

.visibilityhidden{
visibility:hidden;
opacity:0;
}

.visibilityhidden.show{
visibility:visible;
opacity:1;
animation: delayshow 1s;
/*
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
 -o-transition: opacity 0.5s ease-in;
	transition: opacity 0.5s ease-in;
*/
}

.displaynoneabs{
position: absolute;
left:-9999px;
height:0px;
width:0px;
}

.inline{
display:inline;
}

.inlineblock {
display: inline-block;
*display : inline;
*zoom : 1;
}

.displayflex{
	display:flex;
}

.justifycenter {
    justify-content: center;
}

.gap10{
	gap:10px;
}

div .displayflexpure{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	  display: -ms-flexbox;      /* TWEENER - IE 10 */
	  display: -webkit-flex;     /* NEW - Chrome */
	  display: flex;  
}

.flexone{
	flex:1;	
}

.flexhalf{
flex:1;	
display: block;
min-width:30%;
}

.flexgrow{
	-webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex-grow: 1;
}

table.noborder tr {
    border: none;
}

.fixedtable{
display:table;
table-layout: fixed;
}

.tablecell{
 display: table-cell;
}

.floatright{
float:right;
}

.floatleft{
float:left;
}

.alignleft{
text-align:left;
}

.aligncenter{
text-align:center;
margin: 0 auto;
}

.alignright{
text-align:right;
}

.verticaltop{
vertical-align:top;
}

.verticalmiddle{
vertical-align:middle;
}

.verticaltextbottom{
    vertical-align: text-bottom;
}

.positionrelative{
position:relative;
}

.positionfixed{
position:fixed;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}

.positionabsolute{
	position:absolute;
}

.stickytop{
	position: sticky;
    top: 0;
    z-index: 3;
}

.absolutetop{
	position: absolute;
    top: 0px;
	left: 0;
	right:0;
}

.absolutebottom{
	position: absolute;
    bottom: 0px;
	left: 0;
}
.bgwhite{
	background-color:#ffffff;
}

.bold, div b, div strong{ /* fix for materializecss */
	font-weight:bold;
}

div button:focus{ /* fix for materializecss */
    filter: brightness(120%);
}

div .carousel .indicators .indicator-item{ /* fix for materializecss */
	margin: 3% 4px;
}


	.menuajaxbutton {
		margin: 5px 2.5px;
		border-radius: 3px;
		text-align:center;
		font-size: 14px;
	}
	
	.menuajaxbutton.genrestory{		
		text-align: left;
		white-space: nowrap;
	}
		
	.mainmenu{
		font-family:system,-apple-system,'Roboto';
	}
	
	.orderstory, .loadcontest{
		background-color:#efefef;
	}
	
	.filterstory, .genrebox, .shortcut{
		border:none;
		background-color:#f9f4d9;
	}
	
	.shortcut img {
		margin: 0 5px;
	}
			
	.mainmenu .notidate{
		background:none;
		margin-top: 7px;
		font-size: 1.1em;		
	}
	
	.mainmenu .notidate .titleaction{
		font-weight: normal;
		padding: 10px;
		margin: -10px -10px 0 0;
	}
	
	.mainmenu .tagswrap{
		background-color:#f6f6e8;
	}
	
	.mainmenu .story_tag{
		color:black;
	}
	
	.darktheme .mainmenu .story_tag {
		background-color: #c1c1c1;
	}
	
	.mainmenu .notidate.subtitle{
		color:grey;
		margin-top: 0;
		font-weight:lighter;
	}
	
	.showlist:not(.loaded), .carousel_container{		
		height: 190px !important;
	}

	.carousel_container.autoheight, .carousel_container.autoheight .carousel_story{
		height: auto !important;
		display:flex;
		min-width:220px;
	}
	
	.carousel_container{
		margin: 4px 0 0px 3px;
		position: relative;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space:nowrap;
	}		
	
	.carousel_btn{
		bottom: -35px;
		position: absolute;
	}			    
		
	.carousel_story{
		border-radius: 10px;
		overflow:hidden;
		background: #f9f9e5;
		width: 180px;
		height: 180px;
		margin-right:5px;
		display: inline-block;
		backface-visibility: hidden;
		white-space: normal;
	}
	
	.carousel_container.d6, .showlist:not(.loaded).b6{
		height: 250px !important;
	}
	
	.carousel_story.d6{
		width:220px;
		height:240px;
		overflow: hidden;
	}
	
	.carousel_container.d2, .showlist:not(.loaded).b2{
		height: 230px !important;
	}
	
	.carousel_container.d2 .carousel_story{
		height: 220px !important;
		width: 120px !important;
	}
	
	.d2 .carousel_story .cimg{
		padding-bottom: 143%;
	}
	
	.carousel_story .cimg .bgbookcover.bookpic{
		background-color:transparent;
		background-size: 173%;
	}
	
	.carousel_story .waves-effect img{
		z-index:1;
	}
	
	.d6 .carousel_story .clist{
		max-width:240px;
	}
	
	.d6 .carousel_story .cstorydetails{
		height:130px;
	}
	
	.carousel_story.carousel_user{
		border-radius:10px;
		width: 150px !important;
		height: 240px !important;
	}
	
	.carousel_story.carousel_user .collabhead{
		border: 3px solid #c29900;
		margin-top: 10px;
	}
	
	.carousel_story.carousel_user .usertitle{
		color: #4B82C7;
		font-size: 17px;
		font-weight: bold;
		margin-top: 10px;    
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.carousel_container.carousel_container_user{
		height: 250px !important;
	}
		
	.carousel_story.rectangular_box{
		width: 95%;
	}	
		
	.carousel_story.rectangular_box.d12{
		max-width: 500px;
	}
	
	.carousel_story .story_tag {
		font-size: 13px;
		padding: 2px 5px;
		border-radius: 8px;
	}
	
	.carousel_story.carousel_user .story_tag{
		width: 80px;
		height: 30px;
		line-height: 30px;
		padding: 0;
		border-radius: 20px;
	}
	
	.carousel_story.carousel_user .story_tag.actioned {
		background-color: transparent;
		border: 1px solid #b8b8b8;
		filter: opacity(0.9);
	}
	
	.magazinebox .cimg .chartgenre{
		display:none;
	}
	.magazinebox .carousel_story .cimg{
		padding-bottom: 100%;
	}
	.magazinebox .carousel_story .clist{
		max-width: none !important;
	}
	.magazinebox .carousel_story{
		flex: 1;
		box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
	}
	.magazinebox .carousel_story, .magazinebox .carousel_story .cstorytitle{
		height:auto !important;
		width: auto !important;
		min-width:200px;
	}
	.magazinebox .carousel_story .cstorytitle{
		margin-bottom:0;
		font-weight: bold;
	}
	.magothers .carousel_story, .magazinebox .carousel_story .cstorydetails{
		background-color:#fff;
	}
	.magothers{
		padding: 10px;
		margin: 10px -10px;
		background-color: #ececec;
	}
	.darktheme .magothers{
		background-color: #353535;
	}
	.newscolwrap{
		vertical-align: middle;
		height: 22px;
		overflow: hidden;
	}
	
	.newscol{
		overflow-y: hidden;
		-webkit-transition: max-height 0.5s ease-in-out;
		-moz-transition: max-height 0.5s ease-in-out;
		-o-transition: max-height 0.5s ease-in-out;
		transition: max-height 0.5s ease-in-out;
		display: block;
		height: 50px;
	}
	
	.newscol.slideup{
		max-height:0;
	}
	
	 @media only screen and (max-width: 400px){
		.carousel_container.d0, .showlist:not(.loaded).b0{
			height: 160px !important;
		}
		
		.carousel_container.autoheight, .carousel_container.autoheight .carousel_story {
			height: auto !important;
		}
		
		.carousel_story.d0{
			width: 150px;
			height: 150px;
		}		
		
		.carousel_story.d0 .clist{
			max-width: 150px;
		}
				
		div .carousel_story .cstorytitle, div .carousel_story .cstorytitle.english {
			height: 45px; 
			margin-bottom: 2px;
		}
			
		.carousel_story .storytags .story_tag {
			font-size: 12px;
			padding: 0px 5px;
			margin-bottom: 0;
		}		
		
		.d6 .carousel_story .storydesc{
			width: calc(98% - 150px);
		}
	 }
	
	 .cover_cut{
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		display: inline-block;
		padding: 20px 10px;
		width: 100%;
	 }
	
	.isonios .carousel_story{		
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
				
		.carousel_story .crank{
			display:none;
		}
		
		.carousel_story .clist{
			height: 100%;
			max-width:180px;
			border: none;
			min-width: initial;
			float: none;			
			transform: translateZ(0);
			-webkit-transform: translateZ(0);
		}
		
		.carousel_story .cimg {
			width: 100%;
			height: 0px;
			padding-bottom: 50%;
		}
			
		.carousel_story .cstorydetails{
			background:#f9f9e5;
			margin: 0;			
			padding: 3px 3px 3px 5px;
			height: 50%;			
		}
		
		.carousel_container.autoheight .carousel_story .cstorydetails{
			height:auto;
		}
		
		.carousel_story .cstorydetails .cintro{
			display: none;
		}
		
		.darktheme .carousel_story, .darktheme .carousel_story .cstorydetails{
			background:rgb(80,80,80);
		}
		
		.carousel_story .cstorytitle{
			white-space: normal;
			text-align: left;
			height: 50px;
			margin-bottom: 10px;
			margin-top:3px
			padding-bottom: 5px;
		}
		
		.d0.carousel_story .cstorytitle{
			column-width: 250px;
		}
		
		.carousel_story .cstorytitle.english{
			height: 48px;
			margin-bottom: 2px;
		}
		
		.d2 .carousel_story .cstorytitle, .d6 .carousel_story .cstorytitle{
			height: 20px;
			font-weight: bold;
			font-size: 13px;
			margin: -2px 0 0 0;
		}
		
		.d2 .cgenrewrap, .d2 .collabhead, .d6 .cgenrewrap, .d6 .collabhead{
			display:none;			
		}
		
		.d6 .cauthor{
			font-weight:bold;
			font-size:12px;
		}
		
		.d6 .description{
			font-size: 12px;
			line-height: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
			height:56px;
		}
		
		.d6 .storytags{
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
		
		.d6 .carousel_story .story_tag{
			font-size:12px;
		}
		
		.carousel_story .cacircle    {
			width: 20px;
		}
		
		.carousel_story a{
			color:black;
			width: 100%;
			height: 100%;
		}
		
		.carousel_story.list a{
			height:auto;
		}
		
		.bottomsearch{
			background: #f9f9f1;
			margin: 0;
			padding: 5px 10px;
		}
		
			
		@media only screen and (min-width: 798px){
			
		}	
		
		.square_equalwidth.carousel_container .carousel_story{
			opacity: 1 !important;
		}
		
		.rectangular_box.d11.carousel_container{
			height: 0px !important;
			padding-bottom: 30%;
		}
	
	
		.rectangular_box.d11.carousel_story .clist {
			max-width: none;
			width:60%;
		}
		
		.rectangular_box.d11.carousel_story,.rectangular_box.d11.carousel_story .cstorytitle{
			height:auto;
		}
		
		.rectangular_box.d11.carousel .carousel-item .cstorydetails{
			background: transparent;
			height: auto;
		}
		
		.rectangular_box.d11.carousel .cimg img{
			position: absolute;
			left: calc(50% - 45px);
			top: 10%;
		}
		
		.carousel_story .storydesc{
			width: 40%;
			max-width: 320px;
			font-size: 13px;
		}
		
		.carousel_story.d12 .storydesc{
			width: calc(98% - 180px);
		}
		
		.d12 .carousel_story .storydesc{
		width: calc(98% - 180px);
		}		
		
		.d12 .carousel_story .storydesc .story_tag{
		    margin: 1px 3px 2px 0;
		}		
		
		.storydesc .description{
			margin-left:10px;
			margin-top:1.5%;
			padding-right:3px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
		}
		
		@media only screen and (max-width: 520px){
			.storydesc .description{
				-webkit-line-clamp: 5;    
				margin-bottom: 5px;
			}
		}
		@media only screen and (max-width: 420px){
			.storydesc .description{
				-webkit-line-clamp: 4;    
			}
		}
		
		.d12 .storydesc .description{
			-webkit-line-clamp: 6;
		}
		
		.storydesc .storytags{
			padding-left: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			white-space: normal;
		}
				
		.rectangular_box.d11.carousel .cauthor{
			height:auto;line-height: normal;vertical-align: middle;
		}
		
	.flexcontainer:not(.count1)::after {
    content: "";
    flex-basis: 50%;
}

.boxdesc{
	font-size: 12px;
    position: relative;
    margin: 5px 0;
    height: 40px;
    column-width: 100em;
}

.boxdesc p{
	margin: 0;
    display: inline;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.rectbtn{
	cursor: pointer;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    padding: 10px 0;
    width: 80%;
    border: 1px solid #828282;
    border-radius: 5px;
    color: grey;
}

.optionchip {
    padding: 8px 15px;
    border-radius: 30px;
    cursor: pointer;
    margin-right: 5px;
}

.optionchip, .optionchip a {
    color: grey;
    font-weight: bold;
}	

.optionchip.active, .optionchip.active a {
    background-color: #776a69;
    color: #ffffff;
}
		
.mdwrap{
	width:100%;
    min-width: 200px;
    text-align: center;
}
.magazinedate{
    background-color: #776a69;
    color: #fff;
    font-size: 20px;
    margin-top: 10px;
    padding: 0 10px;
	display:inline-block;
}
.magazinedate .subdate{
font-size:18px;
}
.magazinedate .datetitle{
font-size:25px;
}
.magissuepic{
background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
}

@media (max-width: 600px) {
	.mdwrap{
	text-align:center;
	}
}

input[type=range]::-webkit-slider-thumb {  /* enlarge range button for materializecss */
    padding: 10px;
    margin-top: -10px;
}

[type=radio]:not(:checked)+div.radioborder, [type=radio]:checked+div.radioborder{
	width: 100%;
    height: 100%;
	min-height: 35px;
    font-size: 1rem;
	white-space: nowrap;
	border: 3px solid transparent;
}

[type=radio]:checked+div.radioborder{	
    border: 3px solid #26a69a;
	background-image: url(/img/check.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.underline{
	text-decoration:underline;
}

.minheight20{
	min-height: 20px;
}

.fontlight{
	font-weight: lighter;
}

.font0px{
	font-size: 0;
}

.font09em{
font-size:0.9em;
}

.font08em{
font-size:0.8em;
}

.font12px{
font-size:12px;
}
.font13px{
font-size:13px;
}
.font14px{
font-size:14px;
}

.font15px{
font-size:15px;
}

.colorgrey{
	color:grey;
}

.width100{
width:100%;
}

.widthauto, div input[type=datetime-local].widthauto, div input[type=number].widthauto {
    width: auto;
}
.width50px,.width50 {
    width: 50px !important;
}

.paddingtop10{
	padding-top:10px;
}

.nomargin, .progress.nomargin{
	margin: 0;
}

.margintop2{
	margin-top:2px;
}

.margintop5{
	margin-top:5px;
}
.marginbottom10{
	margin-bottom:10px;
}
.marginleft5px{
	margin-left: 5px;
}

.marginright5px{
	margin-right: 5px;
}

.marginright10px{
	margin-right: 10px;
}

.margin10px{
margin:10px;
}
.margin5px{
margin:5px;
}
.lrmargin10px{
margin:0 10px;
}

div .tdmargin10px{
margin: 10px 0;
}

.tdpadding10px{
padding:10px 0;
}

.padding10px{
padding:10px;
}
.padding15px{
padding:15px;
}
.padding3px0{
	padding:3px 0;
}

.onethirdwidth{
width:30%;
}

.height60px{	
	height:60px;
}

.vertalignbottom{
  vertical-align: bottom;
}

.overflowhidden{
	overflow: hidden;
}
.overflowauto{
	overflow: auto;
}

.ptsans{
	font-family: 'PT sans';
}

.lineslimit{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

div .oswald{
	font-family: 'Oswald','Oxygen';
}

.roboto {
	font-family: 'Roboto', 微軟正黑體, 'Microsoft JhengHei', msjh, "Malgun Gothic", sans-serif;
}

.bglightgrey{
background-color: rgb(248, 248, 248);
}

.btnnobg{
	border: 0;
    border: none;
    background: none;
    outline: none;
}

.btnnobg:focus, .btnnobg:active{
	 outline: none;
}

.no_select{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

fieldset.nostyle{
	border: none;
    margin: 0;
    padding: 0;
}

img.circular {
border-radius: 100%;
}

.cursorpointer{
	cursor:pointer;
}

.pointerauto{
	pointer-events: auto;
}

.nowrap{
	white-space: nowrap;
}

.headnotice {
    background: #14A6CA;
    color: white;
    padding: 2px 5px;
    z-index: 999;
	position: absolute;
    width: 100%;
}

.headnotice.withpopup {
}

.headnotice a {
    color: rgb(238, 220, 212);
    font-size: 13px;
    text-decoration: none;
	padding: 10px;
}

.buynotice{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px 20px;
    background: #14A6CA;
    color: white;
}


.iospopup {
	position: absolute;
	left: 10%;
    bottom: 1500px;
    width: 80%;
    padding: 0px 20px;
	background-color: #f6f9fa;
	-webkit-border-radius: 5px;
	z-index: 99999;
	}

  
.iospopup  p {
    color: black;
    font-size: 13px;
    font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
  }
  
 .iospopup::after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 43%;
    bottom: -20px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f6f9fa;
    z-index: 9999;
  }
  
.iospopup-close-icon {
	position: absolute;
	width: 0px;
	right: 20px;
	top: 0px;
	font-size: 24px;
  font-weight: bolder;
	color: black;
	text-shadow: 0px -1px 1px #00234C;
	cursor: pointer;
}

.hubformwrap{
margin: 5px;
font-family: roboto;
}

.hubtag{
text-transform: uppercase;
font-size: 15px;
color: white;
background: #ad9521;
display: inline-block;
padding: 2px 5px;
border-radius: 3px 3px 0 0;
}

.hubtag.walltag{
background: #638DE4;
}

.hubtabs{
	margin:4px;
}

.hubtabs .hubtab{
	text-align:center;
	border-bottom: 2px solid rgb(184,184,184);
    color: #ADADAD;
    font-size: 16px;
    padding: 5px;
	margin: 3px;
    cursor: pointer;
    vertical-align: 2px;
}

.hubtabs .hubtab.active{
    border-bottom: 2px solid #6d6d6d;
    color: #6d6d6d;
    font-weight: bold;
}

.materialized_tabs.tabs{
	padding-left:20px;
}

.materialized_tabs.tabs .indicator{
	background-color:#AC8E00;
}

.materialized_tabs.tabs .tab a {
    font-weight: bold;
    font-size: 16px;
    color: #848484;
    padding: 0 12px;
	pointer-events:none;
}

.materialized_tabs.tabs.initialized .tab a {
	pointer-events:auto;
}

.materialized_tabs.tabs .tab a.active {
	color: #AC8E00;
}

.materialized_tabs.tabs .tab a:focus, {
    background-color: rgba(184, 157, 36, 0.2);
}

.materialized_tabs.tabs .tab a.active{
	 background-color: inherit;
}

.tabwrap .tabs-content{
	min-height:400px !important;
	min-height: calc(100vh - 100px) !important;
}

.newstatus{
padding: 0px 10px 30px 0px;
border-radius: 3px;
}

.refresh_activate{
	margin-left: 5px;
    vertical-align: middle;
	cursor:pointer;
}

.smallfblogin.speciallink{
	font-family: 'oxygen', 'Heiti TC', 微軟正黑體, 'Microsoft JhengHei', msjh;
    font-size: 14px;
	text-align: left;
}

.storyendtxt{
	width:100%;
	margin-left:5px;
	font-weight:bold;
	font-size: 16px;
	font-family: 'oswald', 'Heiti TC', 微軟正黑體, 'Microsoft JhengHei', msjh;
}

.storyendbtn{
	padding: 10px;
    margin: 10px 5px 0 5px;
    text-align: center;
    background: #e4d483;
    border-radius: 5px;
	font-family: 'oswald', 'Heiti TC', 微軟正黑體, 'Microsoft JhengHei', msjh;
    font-size: 15px;
	cursor:pointer;
}

.storyendbtn a{
	color: #6E6641;
}

.storyendbtn:hover{
	background: #D9CE9E;
}

.storyendbtn.active{
	background-color: rgb(135, 111, 5);
	color: white;
}

.darktheme .storyendbtn.active{
	filter: brightness(80%);
}

div.sotitle{
border: 1px solid transparent;
font-family: 'Roboto';
font-weight: 300;
background-color: #ffffff;
padding: 2px 4px;
min-height: 60px;
margin-bottom: 5px;
overflow: hidden;
text-align: left;
}

.hubarea, .font12em{
font-size: 1.2em;
}

.font100{
	font-size:100%;
}

.streamlist, .margintopminus10{
margin-top: -10px;
}

.streamboxed img.circular {
width:30px;
height:30px;
}

.streamhead .lowbar, .marginbottom5px{
margin-bottom: 5px;
}

.streamboxed .addCommentForm{
border:none;
}

.streamboxed .bigcommentarea {
margin-top: 10px;
}

.streamboxed .commentblock {
padding: 10px 0 30px 5px;
}

.streamboxed .streamtext{
margin: 5px 0px 0px 30px;
text-align: left;
}

.streamboxed .hubgenreicon{
vertical-align: -2px;
}

.streamboxed .articlebox {
border-radius: 5px;
border: 1px solid #e7e7e7;
font-family: 'Oswald', 'Roboto';
font-size: 13px;
padding: 15px 15px;
position: relative;
margin: 0 auto;
margin-bottom: 10px;
background: #ececec;
background-size: 400px;
}

.streamboxed .articletitle {
font-size: 1.2em;
width: 100%;
max-height: 100px;
padding: 1px 3px;
border-radius: 2.5px;
z-index: 40;
cursor: pointer;
overflow: hidden;
}

.streamboxed .asource {
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.53);
padding: 1px 5px;
font-size: 1em;
color: rgba(19, 186, 19, 1);
max-width: 90%;
display: inline-block;
margin-top: -3px;
}

.streamboxed .recom {
font-size: 1.1em;
color: rgb(17, 111, 189);
padding-bottom: 3px;
padding-top: 3px;
margin-left: 2px;
}

.streamboxed .lighten {
position: absolute;
top: -10px;
right: -15px;
background-position: center;
background-repeat: no-repeat;
background-image: url("//www.penana.com/img/sharing/inspiration1.svg");
width: 35px;
height: 35px;
background-size: 50px;
}

.streamboxed .share_msg {
margin: 10px 15px 15px 0;
}

.share_msg.editmode{
	background:white;
	font-size: 16px;
}

.streamboxed .commentarea{
margin-left:15px;
margin-right: 25px;
font-family: 'Roboto', sans-serif;
}

.streamboxed  div.commentbox {
background-color: #ffffff;
min-height: 45px;
margin-bottom: 5px;
padding: 1px 2px;
font-family: 'Roboto';
font-size: 14px;
width: calc(100% - 0px);
border: 1px solid #D8DEE1;
}

.streamboxed input#addtop_btn, .newstatus input.comment_submit_btn{
position: absolute;
right: 25px;
display: block;
border-radius: 3px;
border: none;
color: #ffffff;
font-size: 15px;
padding: 3px 10px 3px 10px;
font-weight: bold;
background-color: #E9B820;
text-align: center;
cursor:pointer;
-webkit-appearance: none;
}
.newstatus input.comment_submit_btn{
	right: 10px;
}
.streamboxed .streamtitle a {
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
font-size: 14px;
font-weight: normal;
font-family: 'Oswald', 'Oxygen';
margin-left: 5px;
}

.streamboxed .wallrightarrow {
    color: grey;
    font-size: 0.6em;
    vertical-align: middle;
    margin-right: -8px;
}

.streamboxed .sharetitle {
background: rgb(247, 244, 244);
min-height: 80px;
display: block;
border-radius: 2.5px;
border: 1px solid #e7e7e7;
position:relative;    
margin: -10px 0 20px 0;    
width: 100%;
max-width: 500px;
}

.sharetitle:hover{
	filter: brightness(95%);
}


.streamboxed .shareboximg {
position: relative;
width: 100%;
max-width: 500px;
}

.streamboxed .pubtitle {
font-family: 'PT Sans', 'Arial';
width: 100%;
font-size: 18px;
font-weight: bold;    
margin: -15px 0 -10px 0;
}

.streamboxed .pubsubtitle {
height: 19px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 13px;
font-family: 'Roboto','Arial','san-serif';
color: #977F7F;
}

.streamboxed .bywho {
margin: 5px;
color: #3090c7;
float: left;
font-size: 13px;
font-weight: bold;
}

.streamboxed .lowbar {
margin: 6px 0 5px 0;
}



.streamaction{
border-radius: 3px;
padding: 0px 4px 0px 1px;
text-decoration: none;
background-color:rgb(253, 253, 253);
border: 1px solid #cccccc;
color: #847250;
cursor:pointer;
}

.streamaction.reverse{
background: #C5992D;
color: white;
}

.streamaction .likeicon{
width: 16px;
height: 17px;
background-image: url('//www.penana.com/img/story/likebrown.svg');
background-position: 0px 0px;
background-size: 18px;
background-repeat: no-repeat;
vertical-align: bottom;
}

.streamaction.reverse .likeicon{
background-image: url('//www.penana.com/img/story/likegrey.svg');
}

.shareaction{
	cursor:pointer;
	user-select: none;
}

.shareaction img{
	width:25px;
	height:auto;
	margin: 0 10px 0px 5px;
	border-radius: 25px;
	vertical-align: -4px;		
}

.shareaction.wt img{	
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.shareaction.ma img{	
  background-color: rgb(123, 121, 121);
}

.shareaction span {
  color: rgb(78, 97, 145);
}

.arrow_box {
	position: relative;
	background: rgb(253, 253, 253);
	border: 1px solid #cdcdcd;
	font-size:12px;
	padding:2px 3px;
	border-radius:3px;	
}
.arrow_box:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(176, 176, 176, 0);
	border-right-color: rgb(253, 253, 253);
	border-width: 5px;
	margin-top: -5px;
}
.arrow_box:before {
	border-color: rgba(245, 228, 145, 0);
	border-right-color: #cdcdcd;
	border-width: 6px;
	margin-top: -6px;
}

.booknavbar{
background: #e3e3e3;
border-top: 1px solid #DDDDDD;
}

.booknavbar.storyendbottom{
background: #F8F8F8;
}

.darktheme .booknavbar.storyendbottom{
background: grey;
}

.darktheme select.nobg{
    color: white;
}

.darktheme .menuselect::after{
    border-top: 5px solid #ffffff;
}

.writearea{
border:none;
outline:none;
resize:none;
}

.actionbar{
	height: 40px;
	background-color: #e4ce63;
	top: 0;
	left: 0;
	right: 0;
}

.righticon{
position: relative;
background-position: center center;
background-repeat: no-repeat;
width: 35px;
height: 35px;
float: right;
cursor: pointer;
}

.moreicon{
background-image: url("../img/more.png");
background-image: url("../img/more.svg"), none;
}

.searchicon{
background-image: url("../img/search.png");
background-image: url("../img/search.svg"), none;
}

.shareicon {
background-image: url("../img/share.png");
background-image: url("../img/share.svg"), none;
}

.bookmarkicon{
background-image: url("../img/bookmark.png");
background-image: url("../img/bookmark.svg"), none;
}

.bookmarkicon.active{
background-image: url("../img/bookmark-on.png");
background-image: url("../img/bookmark-on.svg"), none;
}

.headcommenticon {/*
background-image: url("../img/comment.png");
background-image: url("../img/comment.svg"), none; */
}

.selectbar{
margin-left:5px;
text-align: left;
font-size: 12px;
font-weight: bold;
}

.selecctexplain {
margin-left: 15px;
}

.mselectexplain{
font-size: 14px;
}

.homelistblock{
	margin: 10px 5px;
    border-radius: 5px;
}

.homelistblock .notidate{
	padding: 0.8em 1em;
}

div select, div select.browser-default{
border:none;
height:28px;
padding:0;
margin:5px;
font-size:16px;
border-radius:2px;
background:#eaeaea;
display: inline-block;
width: auto;
max-width: 100%;
}

div select.materializeselect{
	border:none;
	padding:0;
	margin: 0 0 8px;
	height: 3rem;
	line-height: 3rem;
	width: 100%;
	font-size: 16px;
	border-radius: 0;
	background: transparent;
	border-bottom: 1px solid #9e9e9e;
	display: inline-block;
}

select#rating{
width: 80px;
}

select#genre{
max-width: 100px;
}

select.mselect{
height:30px;
width:85px;
}

select.nobg, select.browser-default.nobg{
	cursor:pointer;
	border:none;
	outline:none;
	height:auto;
	margin:0px;
	background:transparent;
}

select.nobg:focus{
	outline:none;
}

select.noarrow{
	-webkit-appearance: none;
	-moz-appearance: none;
}

select.noarrow::-ms-expand {
    display: none;
}

select.maxwidth100{
	max-width: 100px
}

.mselectwrap{
    position: relative;
    text-align: center;
    font-family: 'Oswald';
    background-color: #fafafa;
}

.mselection{
	position: relative;
	display: inline-block;
	*display : inline;
	*zoom : 1;
	font-size: 1em;
	border-radius: 4px;
	border: 1px solid rgb(1, 110, 182);
	color: rgb(1, 110, 182);
	padding: 1px 3px;
	margin-bottom: 3px;
	background-color: #ffffff;
}

.showstorylistwrap{
	overflow:hidden;
transform: translateZ(0);
-webkit-transform: translateZ(0);    
min-height: 100%;
}

.yell{
	border: 1px solid #e4ce63;
	color: #e4ce63;
	padding: 2px 4px;
}

.yell:hover{
	cursor: pointer;
	background-color: #e4ce63;
	color: #ffffff;
}

.mselection:hover{
	cursor: pointer;
	background-color: rgb(1, 110, 182);
	color: #ffffff;
}

.listtop{
	min-height: 135px;
	background-color: #fafafa;
	text-align: center;
	font-family: 'Oswald', 'Oxygen';
	padding-top: 7.5px;
	font-size: 2em;
	font-weight: bold;
}

.fontresize{
	font-size: 13px;
}

.mwritecut{
	background-color: #ffffff;
	height: 1%;
}

.height30px{
  height: 30px;
  line-height: 30px;
}

.chartlist.listitem{
	font-family: 'roboto';
	padding: 15px;
}

.genrebox{
	width: 112px;
    padding: 15px 0px 15px 10px;
    
    font-size: 16px;
	flex: 1 1 auto;
	 /* Android 2.3 understands the first declaration and ignores the second */
    justify-content: space-between;
    /* Modern browsers overwrite the first declaration with the second */   
    justify-content: space-around;
}

#chartnav .genrebox{
	text-align: left;
    margin: 0;
	background-color: #FFFFF4;
	border: 1px solid #EFEFEF;	
}

.genreboxname{
	margin-left:3px;
}

.listitem{	
	font-family: 'Oswald',"Heiti TC", 微軟正黑體, "Microsoft JhengHei", msjh, 'Oxygen';
	background-color: #FAFAFA;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

.listitem.toclist{	
border-bottom: 1px solid #e4e4e4;
overflow: hidden;
}
a.toclist.scheduled  {
    filter: opacity(0.5);
}

.listitem.cmt .listitem.cmt{
	border: none;
}

.listitem.fullbottomaction.displayblock{
  background-color: transparent;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.1em;
  cursor:pointer;
  padding: 15px;
}

.listitem.tall{
padding: 12px 10px;
}

.listitem.tall.separate{
background-color: #fafafa;
margin:5px;
border-radius:3px;
}

/*
.listitem:not(.innernotrelative)>div{
	position:relative;
}
*/

@media (hover:hover) {    
	a.listitem:hover{
	background-color: #EAEAEA;
	}
}

a.listitem:active{
	background-color: #EAEAEA;
}

.listitem:nth-of-type(odd) {
    /*background-color: #F6F6E8;*/
}

.listitem.notalternate:nth-of-type(odd) {
    background: inherit;
}

.storyblock .listitem.notalternate{
   height: 100%; 
}

.storyblock .with_action_bar .listitem.notalternate{
   height: calc(100% - 33px); 
}

.listitem.min55px{
min-height:55px;
}

.listitem.min80px{
min-height:80px;
}

div .storyadblock{
	border: 1px solid #e6e6e6;
    background-color: rgb(234, 234, 234);
    padding-top: 0px;
}

.newstorybox{
}

.newstorybox:active{
  background: rgb(250, 250, 250);
}

/*
.newstorybox{
    background: #F6F6E8;
    box-sizing: border-box;
    border: 3px solid #FFFFFF;
    border-top-width: 5px;
    border-bottom: 2px solid rgb(229,229,209);
    border-radius: 5px;
}
	*/
	
.chapterpic{
	height: 90px;
	max-width: 200px;
    float: right;
    margin: -10px -10px -10px 10px;
}

.storyblock .listitem{  
  overflow: hidden;
}		

.action_bar_height{
	height:33px;
}

.action_bar{
	position: absolute !important;
    bottom: 0;
	left: 10px;
	right: 10px;
    border-top: 1px solid #ccc;
}

.action_bar .action_button{
	text-align: center;
	cursor: pointer;
	line-height: 33px;
}

.action_bar .action_button.active{
	background-color: rgb(135,111,5);
    color: white;
}

.material-button{
	border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 2rem;
	-webkit-transition: .3s ease-out;
    transition: .3s ease-out;
	-webkit-backface-visibility: hidden;
}

.material-button:active{
	background-color: rgba(0,0,0,0.1);
}

.isonios .listitem, .isonios .tocview, .isonios .pepperslide, .isonios .maincontent, .isonios .readpagewrap, .isonios .scroll_menu li.current, .isonios .showlist, .isonios a.suggestitem, .isonios a.storylist .cstorydetails{	
	-webkit-backface-visibility: hidden;
}

.isonios .modal.bottom-sheet{
	/* prevent unintented scrolling of the underlying div */
	bottom: auto; 
	height: 0;
}

.isonios.modal-open .modal.bottom-sheet.open{
	height: auto;
}

.isonios.modal-open .maincontent{
	overflow: hidden;
}

.isonios .showonios{
	display:inherit;
}


.scroll{
	-webkit-overflow-scrolling: touch;
}

@media only screen and (min-width: 768px){
	.storyblock{
	  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	  display: -ms-flexbox;      /* TWEENER - IE 10 */
	  display: -webkit-flex;     /* NEW - Chrome */
	  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	}
	
	.storyblock .listitem:not(.notalternate){
      background-color: #F6F6E8;
	}
		
	.widemindstat{
	  margin: 0 auto;
	  width: 90%;
	  float: none;
	  display: block;
	}	
	
	.selectlistwrap.layoutgrid{
		width: 49%;
		margin: 5px 2px;
		overflow: hidden;
	}
}

@media only screen and (max-width: 321px){
	.mstatswrap .commentbtn, .mstatswrap .bb{
		font-size:15px;
	}
}

body .listitem.lightyellow{
	background: #F6F6E8;
}

body  #pageWrapper .listitem.white{
    background: #ffffff;
}

.listitem.moreoption{
	font-size: 16px;
	text-align: center;
    background-color: #f2f1e9;
    width: 100%;
}

.readpagewrap{
min-height: 100%;
}

.readpagewrap, .listitem.readcontent, .lightthemedemo, .canhidetopbar .maincontent{
	color: #111;
	background-color: rgb(253, 247, 229);
}

.listitem.readcontent{	
	min-height: 100%;
	min-height: calc(100% - 52px);
}

.readcontent.mangamode .belowpara, .readcontent.mangamode .joinform{
	/* display:none; */
} 

.hide_chapter_image .chapter_image {
    display: none !important;
}

.readcontent.mangamode.listitem .mpara img:not(.noformat){
	margin: 0 auto;
	margin: 0 -15px;
    max-width: 100vw;
}

.popupwrap.layout_settings{				    
	color: #e1e1e1;
	font-size:15px;
	padding-bottom: 50px;
}

.layout_settings .close{
	position: fixed;
	right: 20px;
}

.layout_options{
	padding: 50px 15px 15px 15px;
}		

 .storyendcontent{	
	min-height: 100%;
    min-height: calc(100% - 52px);
}

.listitem.pintro .mcommentbox{
height:60px;
margin:0;
}

.scoretable .listitem, .scoretable .listitem:nth-of-type(odd){
	/*background-color: #fdf9ee;*/
	border-bottom: 1px solid #f0ebd6;
}

table.dataTable tbody tr{
	border-bottom: 1px solid rgba(0,0,0,0.12);
}

.embeddedContent, .cke_widget_embed{
text-align:center;
}

.listitem .embeddedContent img, .listitem .cke_widget_embed img, .listitem .mpara img:not(.noformat), .listitem #contentedit img:not(.noformat), .introtext img:not(.noformat){
max-width: 99%;
height: auto !important;
display:block;
margin: 20px auto 0 auto;
}

.blockimage .listitem .mpara img {
    display: none;
}

.listitem .mpara img.coin, img.coin.verticalmin5 {
    display: initial;
    margin: 0;
    vertical-align: -5px;
}

.streamarea{
background: #ececec;
float: left;
width: 100%;
min-height: 110%;
}

.commenticon{
background: url("//www.penana.com/img/p1.jpg") no-repeat 0 0;
background-size: 20px Auto;
height: 20px;
position: absolute;
top:0px;
right:0px;
padding-left: 25px;
font-size:12px;
color: #5C5C5C;
}

.readprogress{
position: absolute;
bottom: 10px;
right: 25px;
color: white;
background: grey;
border-radius: 3px;
padding: 0 3px;
z-index:999;
font-family: 'PT sans', sans-serif;
}

.joinform, .actionbtnwrap{
margin:10px 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.tocintro .joinform, .tocintro .actionbtnwrap{
	margin: 0 5px 10px 5px;
}

.joinbtn.listitem, .actionbtn.listitem{
text-align: center;
background-color: rgb(235, 212, 100);
border-radius: 5px;
cursor: pointer;
width: 100%;
border: 0;
box-sizing: border-box;
font-size: 17px;
margin-top: 20px;
}

.mintro a.joinbtn {
	color:black;
}

.spaceleft{
	color: #1f9b0f;
    text-align: center;
    margin-top: 5px;
}

.spaceleft .full{
	color: #e0285b;
}

.cancelreserv{
	font-size: 1em;
    margin-top: -3px;
}

.actionbtn.listitem.lastread{
	margin-top:0px;
	background-color: #ededed;
}

.storysmallbottombtn {
    font-size: 15px;
	display: inline-block;
	cursor:pointer;
}

.actionbtn.listitem{
  background-color: rgb(242,228,172);
  font-size: 16px;
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
  -webkit-backface-visibility: hidden;
}

.actiondelete{
	 font-family: monospace, Menlo;
    font-size: 20px;
    text-align: center;
    color: grey;
    line-height: 35px;
    vertical-align: middle; 
	position: absolute;
    width: 20px;
    top: 0px;
    right: 5px;
    padding: 5px 7px;
    z-index: 4;
    cursor: pointer;
}

.actiondelete.rounded{
	border-radius: 100%;
    font-family: arial;
    background-color: #e4e4e4;
    color: black;
    width: 25px;
    height: 25px;
    line-height: 25px;
    padding: 0;
    font-size: 13px;
}

.actionbtnwrap .actiondelete{	
right: 15px;
}

.bookmarkstories .actiondelete{
	color: white;
    top: -10px;
    right: 10px;
    padding: 5px 20px 0px 10px;
}

a.suggestitem:active, a.storylist:active .cstorydetails {
    background: #DDDDDD;
}

.suggestitem .actiondelete{
	top: 0px;
}

.actiondelete:hover{
	color:black;
}

.modal div.modal-footer{
	background-color: transparent;
}

.modal .switch{
	 height: 30px;
}

.modalbtndesc {
    height: 40px;
	font-size: 12px;
}

.r-rated{
color: #7f5217;
}

.bigcommentarea .listitem, .commentboxed .listitem{ /* fix for slideDown() jumpy */
  -webkit-transition: none;
  transition: none;	
}

.commentboxed .listitem{
  background: #ffffff;
}

.commentboxed .commentindent .listitem{
 background: #eeeeee;
padding-left: 25px;
}

.hideindent .commentindent{
	display:none;
}

.commentindent .indenthide{
	display:none;
}

.newissue{
color: white;
background: #B02334;
margin-right: 5px;
border-radius: 3px;
}

.newissue:not(:empty){
	padding: 0 3px;
}

.cstorydetails .newissue{
	margin:0;
	border-radius:0;
}

.mlisttitle{
	font-size: 1.5em;
	font-weight: bold;
	text-align: left;
	font-family: 'Oswald', sans-serif;
	margin-bottom: 1px;
}

.mlisttitle.usertitle{
font-family: 'Roboto', sans-serif;
text-transform:initial;
font-size: 1.2em;
min-height: 20px;
}

.storycover, .storydesc{
}

.storyboxcover{
  display: inline-block;
  position: relative;
  width: 90%;
    max-height: 320px;
    margin: 4px 0;
  text-align: center;  
}

@media only screen and (max-width: 400px){
	.storyblock .smallcoverbox .storycover{
		margin-right: -10px;
	}
	
	.storyblock .smallcoverbox .storyintro{
		-webkit-line-clamp: 2;
	}
}

.dummywidth {
  margin-top: 50%;
}

.bookcoverwrap{
	border-radius: 5px;
	overflow: hidden;
	width: 100%;
    height: 0;
    padding-bottom: 50%;
}

.bgbookcover{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ADAB49;
  border-radius: 5px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bgbookcover.bgdefault{
    background-color: #f1e19d;
	background:linear-gradient(141deg, #f1e5b0 3%, rgba(255, 235, 59, 0.2) 59%, rgb(228, 195, 95) 100%), url(//www.penanauat.com/img/index/stories.png) no-repeat;
	background-position: center;
}

.rwarning {
    height: 0;
    padding-bottom: 50%;
    color: #ffffff;
}

.rwarning i {
    font-size: 30px;
    padding-top: 10%;
}

.rwarning i, .rwarning div {
    position: relative;
    z-index: 5;
}

.rwarning .warningmask {
    opacity: 0.6;
    background-color: black;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.mreadtitle.writearea{
margin:5px;
}

.writeitemtitle{
	font-size:16px;
	color:#696969;
}

.edittitle{
	float: right;
    margin-top: 5px;
}

.ideaftitle.editmode{
	background: rgb(255, 255, 255);
    border: 1px solid #cccccc;
    display: block;
    outline: none;
    margin-bottom: 3px;
    padding: 2px 8px;
}

.editaction{
	font-size: 16px;
	margin-bottom: 10px;
}

.mchaptertitle{
font-size: 1.2em;
margin-bottom: 5px;
text-transform: uppercase;
}

.lang_zh .mchaptertitle{
	font-weight: bold;
}

.addchapterimage input {
    display: none;
}

.mlisttitle:hover{
	cursor: pointer;
	/* color: rgb(135, 111, 5); */
}

.missue{
	position: relative;
	display: inline-block;
	*display : inline;
	*zoom : 1;
	font-size:0.8em;
}

.mname{
	font-size: 0.8em;
	position: relative;
	text-transform: uppercase;
	display: inline;
}

.issuecount{
display: inline-block;
*display : inline;
*zoom : 1;
margin-right:5px;
}

.uploaded_file_area{
	padding: 10px;
    border-radius: 5px;
    background-color: #e3e3e3;
    display: inline-block;
    margin: 5px 5px 0 0;
	position:relative;
}

.delete-file {
    background: url(//www.penana.com/img/close_pop.png) 0px no-repeat;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;
    width: 15px;
    height: 15px;
    background-size: 15px;
    cursor: pointer;
}

.delete-button{
	width: 15px;
    height: 15px;
    margin-left: 5px;
    background: url(//www.penana.com/img/close_pop.png) 0px no-repeat;
    background-size: contain;
    display: inline-block;
}

.suggesteditexplain{
	padding: 5px 10px;
    background: #9DD79A;
    border-radius: 3px;
    color: #313131;
}

.pinnedstory{
vertical-align: -2px;
display: inline-block;
}

.mrating{
display: inline;
color: #7f5217;
margin: 0 0 0 5px;
}

.storypintag{	
	color: purple;
	background: white;
	border-radius: 20px 0px 0px 20px;
	bottom: 5px;
	display: inline-block;
}

.mgen{
	display: inline-block;
	*display : inline;
	*zoom : 1;
	background-color: #b2b2b2;
	color: #ffffff;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 0.9em;
}

.smallcoverbox .mgen{
	margin-right: 5px;
}

.smallcoverbox .storyintro{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
	overflow-wrap:anywhere;
	word-break: break-word;
}

.mgen.Action{
background-color: #55915A;
}

.mgen.Adventure{
background-color: #802e75;
}

.mgen.Article{
background-color: #E8979E;
}

.mgen.Blog{
background-color: #F7D02E;
}

.mgen.Children{
background-color: #F51337;
}

.mgen.Comedy{
background-color: #E9A006;
}

.mgen.Crime{
background-color: #4A3F2B;
}

.mgen.Drama{
background-color: #F15A22;
}

.mgen.Essay{
background-color: #A8D2DD;
}

.mgen.Fanfiction{
background-color: #145B71;
}

.mgen.Fantasy{
background-color: #0166D3;
}

.mgen.General{
background-color: #997353;
}

.mgen.Historical{
background-color: #9F7F4C;
}

.mgen.Horror{
background-color: #0387A8;
}

.mgen.Memoir{
background-color: #F6D5AE;
}

.mgen.Poetry{
background-color: #73A040;
}

.mgen.Project{
background-color: #d1aff4;
}

.mgen.Quote{
background-color: #C04B59;
}

.mgen.Romance{
background-color: #D335B3;
}

.mgen.Sci-Fiction{
background-color: #043072;
}

.mgen.Supernatural{
background-color: #285CAA;
}

.mgen.Suspense{
background-color: #3C515F;
}

.mgen.Urban{
background-color: #F68637;
}

.mgen.War{
background-color: #676767;
}

.mgen.Wuxia{
background-color: #BB3F60;
}

.mgen.Cool.Facts{
background-color: #1E8305;
}

.mgen.Inspiration{
background-color: #05C6CE;
}

.mgen.Other{
background-color: #000000;
}

.mgen.Offline{
background-color: #d5d50b;
}

.mgen.Screenplay{
background-color: #6F9ED4;
}

.mgen.Young.Adult{
background-color: #414042;
}

.mgen.Serial{
/*background-color: #000000;*/
background-color: #dc143c;
}

.mgen.Question{
background-color: #A9A9A9;
}

.mgen.Flash{
background-color: #D2691E;
}

.mgen.Sentence{
background-color: #20B2AA;
}

.mgen.Words{
background-color: #DC143C;
}

.mgen.Picture{
background-color: #4B00B2;
}

.mgen.Music{
background-color: #00CED1;
}

.subgen{
display: inline-block;
*display : inline;
*zoom : 1;
color: #ACACAC;
margin-left: 2px;
padding: 2px;
white-space: nowrap;
}

.mrevert{
	color: red;
	background-color: #ffffff;
	border: 1px solid rgb(232, 88, 113);
	cursor: pointer;
}

.mrevert:hover{
	color: #ffffff;
	background-color: rgb(232, 88, 113);
}

.mauth{
	position: relative;
	vertical-align: middle;
	display: inline-block;
	*display : inline;
	*zoom : 1;
}

.storyblock .mauth, .storyblock .missue{
	color: #5C5C5C;
}

.mstatswrap{
	position: relative;
	width: 100%;
	padding-bottom: 10px;
	padding-top: 4px;
	font-size: 1.1em;
	text-align: left;
	    user-select: none;
}

.mstats{
	position: relative;
	display:inline-block;
	*display : inline;
	*zoom : 1;
	margin-right: 9px;
	min-height: 17px;
}

.mstats.right{
	margin-right:0;
}

.mstats.saved{
color: rgb(245, 130, 130);
}

@media only screen and (max-width: 450px){
	.lang_en .mstats.narrownotshow{
		display:none;
	}
}	

div.abs{
position:absolute;
right:0;
top: 0;
margin: 0;
line-height: 10px;
}

.tocpopupbox div.abs{
	margin: 8px;
}

.rating{
	padding: 1px 5px;
    min-width: 35px;
    background-color: #ffffff;
    border-radius: 5px;
    text-align: center;
    border: 1px solid #a30101;
    color: #a30101;    
}

.toctop .rating{
	position: absolute;
    right: 5px;
    top: 5px;
}

.popuptoctitle{
	border-bottom: 2px solid silver;
	position: -webkit-sticky;
	position: sticky;
    top: 0;
    z-index: 99;
}

.wholeprogress{
	font-weight: normal;
    font-size: 12px;
    color: grey;
}

.ranking {
  top: 0;
}

.ranking.first{
color: #C69A2D;
}

.ranking.second{
color:#498DCB;
}

.ranking.third{
color:#15AD7A;
}

.backbtn{
margin: 15px 10px;
font-family: 'Oswald', 'Oxygen';
padding-bottom: 20px;
}

.bb{
	border: 1px solid rgb(135, 111, 5);
	border-radius: 5px;
	padding: 4px 6px;
	cursor: pointer;
	color: rgb(135, 111, 5);
    margin-top: 1px;
}

.bb.active{
	color: #ffffff;
	background-color: rgb(135, 111, 5);
}

.readbtn{
margin-right:3px;
}

.rq{
	border: 1px solid rgb(1, 110, 182);
	color: rgb(1, 110, 182);
}

.bred{
	color: #ac594d;
}

.rq.active{
	color: #ffffff;
	background-color: rgb(1, 110, 182);
}

.gg{
	color: rgb(4, 157, 4);
}

.mred{
	color: #ffffff;
	background-color: rgb(232, 88, 113);
}

.commentbtn, .mintro a.commentbtn{
background: #e4ce63;
border: 1px solid #e4ce63;
border-radius: 5px;
padding: 4px 6px;
color: rgb(135, 111, 5);
text-transform: uppercase;
position: relative
}

.commentbtn:active {
background: #EFD347;
}

.navibutton{
display:inline-block;
*display : inline;
*zoom : 1;
width: 100px;
text-align: center;
background: #38A5D8;
border-radius: 5px;
padding: 4px 5px;
color: white;
font-size: 0.9em;
cursor:pointer;
}

.navibutton.tocbutton{
width: 50px;
background: #E2E2E2;
color: rgb(60, 60, 60);
}

.navibutton.proceed{
background:#D8A738;
margin-right:10px;
}

.navibutton.cancel{
background: #E2E2E2;
color:black;
border: 1px solid rgb(217, 217, 217);
}

.borderbutton{
	border-radius: 3px;
    padding: 5px 20px;
    color: #039be5 !important;
    border: 1px solid #039be5;
    text-decoration: none;
}

.borderbutton:hover{
    background-color: #039be5;
    color: #ffffff;
    text-decoration: none;
}

.ratebtnwrap{
margin-top:30px;
}

.mcollabwrap{
  padding-top: 5px;
}

.collabhead{
  position: relative;
  display: inline-block;
  *display : inline;
	*zoom : 1;
  margin-right: 3px;
  border-radius: 100%;
  background-color: #e7e7e7;
  vertical-align: middle;
  overflow: hidden;
}

.collabhead:hover{
	cursor: pointer;
}

.collabhead:active{
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
}

.comhead{
	width: 30px;
    height: 30px;
    vertical-align: -7.5px;
}

.mcollabwrap a{
display:inline-block;
vertical-align: middle;
line-height:1em;
}

.smallbutton{
text-align: center;
background-color: #fafafa;
border-radius: 5px;
cursor: pointer;
padding: 4px 7px;
vertical-align: middle;
border: 1px solid rgb(135, 111, 5);
font-size: 12px;
text-transform: uppercase;
color: rgb(135, 111, 5);
}

.smallbutton:active{
background-color: #EAEAEA;
}

.kdate, .uppercase{
text-transform: uppercase;
}

.mintro{
	padding-left: 5px;
	padding-right: 5px;
	font-size: 1em;
	font-family: system,-apple-system,'Roboto', sans-serif;
	font-weight:300;
	margin: 5px 0;
}

.mintro a, .mbio a, a.bluelink{
text-decoration: none;
color: #0A6986;
}

.mintro img {
    max-width: 100%;
}

.storyblock .mintro {
    padding-left: 0px;
	margin:0;
    font-size: 14px;
}

.storyblock .smallcoverbox .mintro{
    font-size: 14px;
}

.smallcoverbox .storytitle{
	font-size: 16px;
	color: #8e7e4f;
}

.smallcoverbox .storycover, .smallcoverbox .storydesc{
  display: flex;
  flex: 1;
  flex-direction: column;
}

.smallcoverbox .storydesc{
	padding-left:20px;
}

.smallcoverbox .lowbar{
	margin-top: auto;
	padding-top:5px;
	color: #AC8E00;    
	font-size: 12px;
}
.smallcoverbox .storystat{
	max-width: calc(100% - 0px);
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}
.smallcoverbox .storystat img {
    width: 16px;
    margin: -2px -2px -2px 0;
}
.darktheme .smallcoverbox .storystat img {
	filter: brightness(0) invert(0.9);
}
.smallcoverbox .mrating{
	padding: 0 5px;
	border: 1px solid #972a46;
	color: #972a46;
	border-radius: 3px;
	margin-top: -1px;
}
.darktheme .smallcoverbox .mrating{
	border: 1px solid #f2b463;
}
.mpara{
	margin-bottom: 10px;
	word-break: break-word;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
	text-align:left;
}

.mpara label{    
	color: inherit; /* prevent materialcss form label becomems grey */
	-webkit-touch-callout: unset;
	  -webkit-user-select: unset;
}

.mpara hr, .mwrite hr, .introtext hr, hr.penanahr {
border: 0;
outline: none;
width: 80%;
height: 20px;
color: transparent;
background: transparent url(/img/story/line.svg) no-repeat scroll center;
}

.mpara article{
	max-width:100%;
	
	-moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.mpara article pre{ /* fix for display bug*/
	white-space: inherit;
}

.mpara article .private{
    color: grey;
    margin: 10px;
	text-align: center;
    font-weight: bold;
}

.mpara li {
    margin: 10px 0;
}

.top-bar .dropdown-content li{
	min-width: 150px;
}

.paddingbottom, .top-bar .dropdown-content li a.ddlink{
	padding-bottom: 10px;
}

.bottombartopdiv{
	padding-bottom:50px;
}

.bottombar.tocbottom{
	position:fixed;
	position: -webkit-sticky; /* for ios */
	line-height:50px;
}

.isonios .tocmenu {
    height: 100%;
}

.isonios .bottombar.tocbottom{
	top: 100%;
}

.isonios .tags_wrap_toc{
	padding-bottom:70px;
}

.tocbottom .otheroptions{
	background-color:#efefef;
}	

.scrollmode .abovepara, .scrollmode .paginationbar.storyread{ /*, .scrollmode .belowpara*/
    display: none;
}

.scrollmode.canhidetopbar .scrollmodeshow{
	display: block;
}

.scrollmode.canhidetopbar .scrollmodehide{
	display: none;
}

.scrollmode .scrollmodeshow.showasinlineblock{
	display: inline-block;
}

.cssslider,.canhidetopbar.scrollmode .top-bar, .canhidetopbar.scrollmode .bottombar, .canhidetopbar.scrollmode .menubar{
	-webkit-transition: opacity .15s,-webkit-transform .15s,visibility .15s;
    transition: opacity .15s,transform .15s,visibility .15s;
}

.cssslider,.canhidetopbar.scrollmode .top-bar{
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

.cssslider,.canhidetopbar.scrollmode .bottombar{
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

.canhidetopbar.scrollmode .menubar{
	opacity:0;
}
.canhidetopbar.scrollmode .menubar.open{
	opacity:1;
}

.cssslider.open, .canhidetopbar.scrollmode .top-bar.open, .canhidetopbar.scrollmode .bottombar.open, .canhidetopbar.scrollmode .menubar.open{	
	-webkit-transform: translateY(0);
	transform: translateY(0);
	overflow: visible; /* to show the dropdown on top-bar */
}

.menubar.fixed-action-btn {
    bottom: 60px;
	width:40px;
}

.menubar a,.menubar a:hover {
    margin-top: 8px;
	background:rgba(0,0,0,0.46);
}

.menubar a:active{
	background:rgba(0,0,0,0.60);
} 

.canhidetopbar.scrollmode .maincontent{
	margin-top: 0px;
}

.previewblock{
	margin: 30px;
    border-bottom: 1px solid #aaaaaa;
}

.fadeblock{
	position:relative;
	height: 150px;
    margin-top: -170px;
    background: linear-gradient(to top, rgb(253 247 229) 0%, rgba(255, 255, 255, 0) 100%);
}
.darktheme .fadeblock{
	background: linear-gradient(to top, rgb(45 45 45) 0%, rgba(255, 255, 255, 0) 100%);
}
.whitetheme .fadeblock{
	background: linear-gradient(to top, rgb(245 245 245) 0%, rgba(255, 255, 255, 0) 100%);
}
.browntheme .fadeblock{
	background: linear-gradient(to top, rgb(207 194 168) 0%, rgba(255, 255, 255, 0) 100%);
}

.paybtn{
	text-align: center;
	margin-bottom: 30px;
}

.feedbackbox textarea{}

textarea.recommend_comment{
	min-height: 60px;
}

.private {
    font-style: italic;
    color: grey;
}

.lowbar{
color: #5C5C5C;
margin-top:6px;
text-transform: uppercase;
font-size:13px;
position: relative;
text-align: left;
max-height: 20px;
}

.lowbar .addit{
text-transform: initial;
color: #7C7C7C;
}

.lowbar.comlowbar .addit{
font-family: roboto;
color: #9C9C9C;
}

.lowbar a {
text-decoration: none;
color: #0A6986;
cursor:pointer;
}

.lockedpost {
    margin-bottom: -3px;
}

.likeicon {
vertical-align: middle;
}

.replycmt, .cmtaction{
color: #ac594d;
text-transform: initial;
font-family: roboto;
cursor: pointer;
}

.op_comment .replycmt{
	display:none;
}

.mwrite{
	min-height:100px;	
	border:none;
	outline:0;
	resize:none;
	text-align: left;
	font-weight: 300;
	font-family: system,-apple-system,roboto;
}

.mwrite a{
   pointer-events: none;
   cursor: default;
   color: #0a6986;
}

.toctop .joinform{
	margin-bottom: 5px;
}

.tocintro{
	padding: 10px 5px 0 5px;
}

.tocbox{
	position: relative;
	display: inline-block;
	*display : inline;
	*zoom : 1;
	color: #ffffff;
	background-color: rgb(22, 57, 135);
	border-radius: 5px;
	padding: 2px 5px;
	margin-right: 5px;
	text-align:center;
	font-size: 0.8em;
}

.tocbox.red{
background-color: #7f5217;
}

.tocbox.pink{
background-color: rgb(245, 130, 130);
}

.tocuwriter {
text-transform: initial;
color: #0D6698;
font-weight: normal;
font-size: 16px;
}

.tocswitch {
    padding: 10px;
    background-color: #ffffff;
    margin-right: 5px;
    border-radius: 8px 8px 0 0;
	color: #9e9e9e;
}

.tocswitch.active{
	color: #ffffff;
    background-color: #8e7e4f;
}

.toccontentwrap{
	margin-top: -2px;
    z-index: 5;
    position: relative;
}

.tocbg{
	background: #ffffff;
}

.tocoptions {
    margin-top: 10px;
	z-index:20;
}

.seemore{
	font-family: monospace, Menlo;
    text-align: right;
    font-size: 25px;
    color: #b9b9b9;
    margin: -18px 0px 5px 0;
	width: 100%; 
    height: 20px;
	line-height: 20px;
    position: relative;
    text-align: right;
}

.seemore span{
	width: 50px; 
	height: 20px;
	display: inline-block;
	cursor: pointer;
    background: -webkit-linear-gradient(left,rgba(255,255,255,0),#fff 20px);
    background: linear-gradient(to right,rgba(255,255,255, 0),#fff 20px);
}

.cirmore{
background: rgb(252, 252, 252);
color: #3686c5;
text-align: center;
line-height: 25px;
width: 25px;
height: 25px;
z-index: 50;
box-shadow: 1px 2px 2px #999999;
border-radius: 100%;
behavior: url(css/pie/PIE.htc);
display: inline-block;
*display : inline;
*zoom : 1;
z-index: 50;
vertical-align: top;
}

.cirmore.cirmore20{
	width: 20px;
	height: 20px;
}

.toccut{
}

.mcomment{
padding: 5px 0;
text-align:left;
}

.mcommentbox{
	position: relative;
	width: 100%;
	min-height: 40px;
	border: none;
	background-color: transparent;
	padding: 1px 3px;
	font-family: system,-apple-system,'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.1em;
	margin: 10px 0;
	outline: none;
}

body #pageWrapper .listitem.greybg{
	background-color: rgb(249, 249, 249);
}

.listitem.loadmore{
cursor:pointer;
text-align:center;
line-height: 30px;
}

.studiocontent .listitem.cmt {
    border-bottom: 2px solid #ececec;
}
.darktheme .studiocontent .listitem.cmt{
	border-color: #626262;
}

.studiocontent .listitem.cmt:last-child{
	border-color:transparent;
}

.preload, .loading{
height: 80px;
}

.loading, .loader{
background-image: url('//www.penana.com/img/ajax-loader2.gif');
background-repeat: no-repeat;
background-position: center center;
}

.lineitem {
    display: flex;
    justify-content: space-between;
	min-height: 50px;
}

.editstory{
	margin:10px 0;
}

.editstory select{
	height: 35px;
    min-width: 100px;
    margin: 5px 0 10px 0;
}

.editstory input{
    margin-bottom: 10px;
}

.editabtn {
    background-color: #E9B820;
    padding: 2px 5px 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    line-height: 130%;
}

.editabtn.editsubmit {
    background-color: #E9B820;
}

.editabtn.editcancel {
    background-color: grey;
}

.mreadtitle.transinput{
	background: transparent;
    border: 0;
    margin-bottom: 10px;
}

.darktheme .readcontent input{
	color: #C2C2C2;
}

.darktheme .readcontent input:disabled{
	color: #7b7b7b;
}

/* pickwinner */

.rankingbox{
margin: 10px;
}
.rankingbox .bounty_awarded, .coinright{
	background-image: url(/img/penana_coin.png);
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: right;
}

.bountynote {
    font-size: 20px;
    font-weight: 700;
    margin: 20px 0;
    color: #868686;
}

.rankorder{
font-size: 14px;
display: inline-block;
}

/* message page */
.messagehead{
	position:absolute;
}

.messagedesc{
margin-left:60px;
}

.messageform, .addCommentForm{
margin:0;
border-bottom: 1px solid #DDDDDD;
}

.socforum .addCommentForm{
border-top: 1px solid #DDDDDD;
}

.messagelist img.collabhead, .notilist img.collabhead{
vertical-align: -7.5px;
}

.miniuser{
font-weight: bold;
font-size: 0.9em;
font-family: 'Roboto', sans-serif;
}

/*notification page */

.message2{
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 3px 0 0 3px;
}

.lang_zh .message2{
margin: 5px 0 0 3px;
}

.notidate{
padding: 5px 10px;
font-size: 1em; 
background-color: #F0EBD6;
font-weight:bold;
    user-select: none;
}

.notidate.thicknotidate{
    height: 50px;
}

.thicknotidate .notidate_title{
	vertical-align: -10px;
}

.notidate.dark{
	background-color: #E0D280;	
}

.notidate.lightdark{
	background-color: #e6dcc4;	
}

.notidate.storylist{
font-size: 1.1em;
}

.subsubmenu {
    margin-right: 10px;
    color: grey;
    text-transform: uppercase;
	font-weight: normal;
}

.subsubmenu.active {
    color: #4185af;
    font-weight: bold;
}

.notiunread{
position:absolute;
top:0px;
right:0px;
font-size: 13px;
font-family: 'Roboto', sans-serif;
z-index: 4;
}

.moselect .notiunread:not(:empty){
	position: relative;
    margin-left: 5px;
}

.listrightaction{
  color: white;
  background-color: rgb(218, 183, 68);
  border-radius: 100%;
  cursor:pointer;
}

.listrightaction.bookmarkstory{
background-color:rgb(142, 125, 48);
}

.bookmarkarea{
	padding: 20px;
    margin-top: -30px;
}

.listrightaction.roundaction{
  height: 24px;
  width: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 16px;
  margin-top: -2px;
}

.squareaction.listrightaction{
  border-radius: 3px;
}

.listrightaction.actioned{
  background-color: rgb(233, 217, 157);
}

.listrightaction.large{
  padding: 0px 5px;
  background-color: rgb(211, 172, 59);
}

.listrightaction.large.bookmarkall{
  background-color:rgb(135, 111, 5);
}

.listrightaction.large.bookmarkall.clicked{
  background-color:rgb(233,217,157);
}

/*profile page */

.profilewrap{
	background-color:#fdf3cc;
	font-family:'Roboto', 微軟正黑體, 'Microsoft JhengHei', msjh, "Malgun Gothic", sans-serif;
}

.switchbar{
	background-color:#fdf3cc;
	padding: 0 10px;
    overflow: hidden;
}

.darktheme .profilewrap, .darktheme .switchbar{
	background-color: #707070;
}

.profilepage{
padding: 10px 20px;
max-width: 600px;
margin: 0 auto;
border-top: 1px solid #ececec;
}

.profileinfo{
font-size: 16px;
font-family: 'Roboto', sans-serif;
margin: 5px;
}

.profile_name{
font-size: 22px;
color:#8e7e4f;
font-weight:bold;
text-align:left;
}

.roundicon{
	border: 1px solid #8e7e4f;
	color:#8e7e4f;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    line-height: 33px !important;
    text-align: center;
	background-color:#ffffff;
}
.darktheme .roundicon{
	border-color:#000000;
	color: #000000;
}
.roundicon.reverse{
	color: #ffffff;
    background-color: #8e7e4f;
}
.darktheme .roundicon.reverse{
	color: #ffffff;
    background-color: #000000;
}
.profile_personal{
	color:#AC8E00;
	font-size: 12px;
	margin-top:5px;
}

.darktheme .profile_personal, .darktheme .profile_name, .darktheme .portspan .numcount, .darktheme .storytitle{
	color:#ffffff;
}

.darktheme .subprofilebar, .darktheme .tocbg, .darktheme .tocswitch{
	background-color: rgb(25,25,25);
}

.darktheme .blk{
	background-color:#e5e5e5;
	color:#6f6f70;
}

.profilesubscribe {
    background-color: #f7f7f7;
    padding: 10px 0px;
}

.prosub_title {
    font-weight: bold;
    font-size: 16px;
    color: #AC8E00;
	margin-left:20px;
}

.darktheme .profilesubscribe{
	background-color:#8b8b8b;
}

.darktheme .prosub_title{
	color:#ffffff;
}

.mobchangeava .profilename{
font-weight:normal;
margin: 10px;
cursor:pointer;
background-color: #EBCE58;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
}

.upload-path{
font-size: 13px;
font-family: roboto;
color: rgb(35, 117, 182);
}

.mobchangeava .upload-path{
margin: -8px 0 0px 0;
}

.mobchangeava .upload-reminder{
font-size: 13px;
margin: 0px 0 5px 0;
color:blue;
font-family: roboto;
}

.profilebar{
background-color: #F1E39A;
height: 40px;
line-height: 40px;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}

.profilebar span{
width: 33%;
float: left;
cursor:pointer;
height: 40px;
overflow: hidden;
white-space: nowrap;
}

.profilebar span:active {
background-color: #DCC75A;
}

.profilebar span.current{
border-bottom: 5px solid #AC8E00;
z-index: 9;
position: relative;
}

.subprofilebar{
margin: 8px 0;
display: flex;
background-color: #fafafa;
padding: 10px 0;
border-radius: 10px;
border: 1px solid #ececec;
}

.subprofilebar a{
	flex:1;
	text-align: center;
}

.subprofilebar a:not(:first-of-type){
	border-left: 1px solid #ececec;
}

.subprofilebar .numcount {
    color: #6f6f70;
    font-weight: bold;
    font-size: 20px;
	padding: 0 5px;
}

.subprofilebar .probardesc span{
    color: #AC8E00;
    font-weight: bold;
	font-size:13px;
	display:inline-block;
}

.subprofilebar a:active{
background-color: #e9e9e9;
}

.probardesc img.readicon{
	margin-top: -2px;
    margin-bottom: 2px;
}
.probardesc img.sponsoricon{
    margin-bottom: 2px;
}

.willchange {
    will-change: transform;
}

.portstat{
text-align:left;
padding:0 1px 2px 3px;
}

.usernobgstat{
text-align:left;
padding:0 1px 2px 0px;
}

.mbio{
font-family: 'Roboto', sans-serif;
text-align:left;
font-weight: 300;
font-size: 1.1em;
}

.userlist .mbio{
font-size: 1em;
margin: 5px 0;
}

.userstream a{
	font-family: 'Roboto', sans-serif;
	padding: 5px 0;
}

.userlist .usertitle, .userlist .messagehead img, .sugglist .mlisttitle, .sugglist .collabhead{
 cursor: inherit;
}

.blk{
font-size: 0.9em;
background-color: #6f6f70;
color: #ffffff;
padding: 3px 5px;
margin-right: 3px;
border-radius: 5px;
}

.blk.portuserstat {
color: #4a7a9b;
}

.blkstar{
font-family: arial;
}

.profsection{
margin: 15px 5px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}

div.profsection select, select.nomarginleft{
	margin-left:0;
}

.profsection lavel{
	
}

.profsubtitle{
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  color: rgb(116, 116, 116);
  margin: 10px 0;
}

.bestdesccb, .bestdesccb label, .bestdesccb label input, label input{
-webkit-backface-visibility: hidden;
}

.bestdesccb label {
line-height: 22px;
}

.bestdesccb label input {
vertical-align: middle;
}

.submitbtn{
border: 0;
padding: 8px;
background-color: #EBCE58;
border-radius: 3px;
cursor: pointer;
margin-top:5px;
min-width: 50px;
}

.menupage{
margin:10px;
}

.menuoption{
margin: 5px 0;
}

.skip{
position:absolute;
top:5px;
right:5px;
color:black;
border-radius:5px;
border:1px solid black;
padding: 5px 8px;
font-size: 0.9em;
cursor: pointer;
width: 75px;
}

.skip:active{
background:#ececec;
}

.skip.skip2 {
top: 40px;
}

.skip.reverse{
color:white;
background:rgb(135, 111, 5);
border: 1px solid rgb(135, 111, 5);
}

.unsubscribe{
	font-family: 'Roboto', sans-serif;
}

.unsubtitle{
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  color: rgb(116, 116, 116);
  margin: 10px 0;
}

.unsubscribe ul {
    margin: 10px 0;
}

.badgesp{
position: relative;
display: inline-block;
width: 175px;
text-align: center;
background: #F6F4E4;
border-radius: 7px;
margin: 0 auto;
margin: 10px 5px 10px 5px;
padding: 15px 0 15px 0;
font-family: 'Roboto', sans-serif;
border: 1px solid #E4E1E1;
}

.badgecount {
position: absolute;
right: 30px;
bottom: 60px;
font-size: 18px;
color: #C29900;
font-weight: bold;
width: 35px;
text-align: center;
}

.speciallink a{
text-decoration: underline;
color: rgb(116, 125, 186);
}

.loginreminder{
padding: 50px 5px;
font-family: Roboto;
}

.loginreminder a{
text-decoration:underline;
}

.halfbutton{
  width: 50%;
  float: left;
}

.accbtn{ 
  cursor:pointer;
  text-align: center;
  margin: 7px;
  background-color: #e4ce63;
  color:white;
  padding: 5px;
  border-radius: 3px;
}

.accbtn.decline{
  background-color: #c9c7c7;
}

/* login page */
#bgpic {
background: #FAD53F;
min-height: 520px;
width: 100%; 
min-height: 100%;
background-size: cover;
position: relative;
background-position: bottom;
text-align: center;
}

.swiper-wrapper #bgpic{
background: #FFD100;
}

.invitationpage .logslogan, .invitationpage .invitetext{
color: black;
}

#logo {
z-index:90;
display:inline-block;
*display : inline;
*zoom : 1;
position: relative;
width: 100%;
}

.separationblock{
	height: 80px;
}

.regpagebot{
height: 10px;
display: inline-block;
width: 100%;
}

.authform{
font-family: 'PT-Sans', sans-serif;
}

.logregpopup .loginform{
margin: 10px 10px;
}

.logslogan{
	position: relative;
	display: inline-block;
	*display : inline;
	*zoom : 1;
	/* color: rgb(129, 112, 73); */
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 25px;
	text-align: center;
	width: 100%;
	margin: 5px 0px 0px 0px;
}

.logslogan2{
margin-top:5px;
/* color: rgb(129, 112, 73); */
font-family: 'Roboto', sans-serif;
font-size: 14px;
}

.logslogan3{
margin:5px 0 15px 0;
color:rgb(129, 112, 73);
font-family: 'Roboto', sans-serif;
font-size: 18px;
}

.logor{
	font-size:12px;
	font-family: 'Roboto', sans-serif;
	color: #635419;
}

.loginregwrap1{
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.loginregwrap2{
    margin-top: -20px;
    padding-top: 15px;
}

.loginregwrap{
	position: relative;
	display: inline-block;
	*display : inline;
	*zoom : 1;
/*
	border: 5px solid rgba(196, 204, 206, 0.43);
	background-color: rgb(250, 250, 250);
    background-color: rgba(250, 250, 250, 0.73);
    border-radius: 3px;
*/
}

.regsuccess{
font-weight: bold;
margin-top: 15px;
}

.regcontinue{
background: rgb(245, 255, 0);
padding: 10px 20px;
display: inline-block;
*display : inline;
*zoom : 1;
border-radius: 5px;
font-weight: bold;
margin-top: 15px;
}

.regcontinue:hover{
background: rgb(238, 238, 0);
}

.loginregbox {
text-align:center;
width: 250px;
margin:10px;
position:relative;
}

.loginregbox .registerform  .errormsg{
position: absolute;
left: -180px;
top: 70px;
width: 135px;
z-index: 999;
}

.inputtick label span{
	margin-left: .75em;
}

.inputtick [type="checkbox"]+span:not(.lever){
	padding-left: 31px;
}

.errormsg{
background: #E7647E;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 14px;
font-family: 'PT Sans',sans-serif;
}

.errormsg:empty {
    display: none;
}

.errormsg.unlistexplain, .errormsg.brownerr{    
background: #817049;
}

.errormsg.brownerr a{
	color: #87cdff;
}

.loginregbox h2{
margin:2px;
color:#816F4A;
}

.fgtpw {
text-decoration:none;
font-size: 12px;
color:black;
padding-left: 8px;
}

.fgtpw.borderleft{
border-left:2px solid #ececec;
}

.rmbme{
font-size:12px;
margin-left:5px;
}

.tou{
font-size:12px;
text-align:left;
margin-top: 3px;
margin-left: 25px;
width:200px;
}

.loginregbox a:hover{
text-decoration:underline;
}

.loginregbox input[type="email"]:focus,.loginregbox input[type="password"]:focus,.loginregbox input[type="text"]:focus{
}


.loginregbox input[type="submit"], .loginregbox .authbutton {
padding: 5px 2px 5px 2px;
background: #FBB61E;
color: #fff;
border: 0;
cursor: pointer;
font-family: 'PT Sans',sans-serif;
border-radius: 3px;
margin-top: 10px;
margin-bottom: 5px;
width: 100%;
min-height: 33px;
line-height: 1.4;
font-size: 16px;
-webkit-appearance: none;
}

.loginregbox input[type="submit"]:active, .loginregbox .authbutton:active {
background: rgb(216, 180, 64);
}

.loginregbox .tou a{
	text-decoration:underline;
}

.entersite{
	display: inline-block;
	*display : inline;
	*zoom : 1;
	background-color: rgba(228, 206, 99, 0.66);
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 17px;
	color: #ffffff;
	text-align: center;
	padding: 5px 10px;
	z-index: 100;
	margin: 10px 0;
}

.fblogin_big{
	background: #3B579D;
    color: white;
    display: inline-block;
    vertical-align: middle;
	cursor:pointer;
	margin-top:10px;
	margin-bottom: 5px;
	font-family: 'Roboto', sans-serif;
}

.fblogin img{
	display:inline;	
	vertical-align: middle;
	margin-bottom:5px;
}

a.fblogin_big:hover{	
	text-decoration:none;
}

.fblogintxt{
	margin:0 10px;
	vertical-align: middle;
	font-size: 15px;
}

a.fblogin{	
	color:white;
	text-decoration: none;	
	text-align: center;
	display: block;
}

.vertical-separator{
color:rgb(129, 112, 73);
margin:0;
}

.logintoplink{
display: block;
text-align: right;
padding: 5px 0;
float: right;
}

a.logintoplink span{
	display: inline-block;
}

.logintoplink .skiptolast span{
padding: 0 15px;
cursor:pointer;
}

@media only screen and (min-width: 768px){
	.logintoplink .skiptolast span{
		padding: 10px 15px;
	}
}

.logintoplink span{
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  height: 20px;
  color:rgb(129, 112, 73);
  padding: 10px 15px 10px 15px;
  display: block;
  text-transform: uppercase;
}

.input-field ::-moz-placeholder {  /* Firefox 19+ */
    color: black;
}

.mobbtn{
background: white;
font-family: 'Oswald', 'Oxygen';
font-size: 1.1em;
line-height: 1.5;
-webkit-appearance: none;
}

.mobbtn:active, .mobbtn:focus {
background: rgb(246, 246, 246);
}

.bb.dl{
background-color: rgb(245, 130, 130);
color:white;
border:none;
}

.cke_widget_element>div {
    max-width: none !important;
}

.embeddedContent iframe, .cke_widget_element iframe{
max-width:100%;
    width: 560px;
    height: 315px;
	border:0;
}

p iframe{
max-width:100%;
max-height:300px;
}

.faqtitle{
cursor:pointer;
}

/* landing page */
.landwrap{
	font-family: 'Roboto', sans-serif;
	font-weight: lighter;
}

.landlist .listitem{
padding:15px;
}

.landlist .mstats.abs{
display:none;
}

.moslogan{
	text-align: center;
	padding-bottom: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #9b9b9b;
}

.mologo{
	text-align: center;
	margin-top: 3px;
}

.moselectwrap{
	position: relative;	
	text-align: center;
}

.moselect{
	padding: 1px 4px 5px 4px;
	position: relative;
	display: inline-block;
	margin-top: 2px;
	margin-left: 5px;
	font-size: 14px;
	color: #9b9b9b;
	text-transform: uppercase;
	font-weight: bold; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.moselect.small{
font-size:12px;
margin: 0 3px;
text-transform: none;
display:block;
border-bottom: 3px solid transparent;
}

.current .moselect.small, .moselect.small.current, .active .moselect.small, .moselect.small.active{
border-bottom: 3px solid #7f5217;
}

.tabmenu {
    background: white;
    padding: 5px;
    margin: 0px 0px 0 5px;
    border-radius: 5px 5px 0 0;
}

.topmenu{
width:30%;
}

.topmenu.width40pc{
width:40%;
}

.topmenu:active {
background: #EAEAEA;
}

.topmenu.current{
	animation-name: glowdim;  
	animation-duration: 3s;  
    -webkit-transition: background-color 3.0s linear;
    -moz-transition: background-color 3.0s linear;
    transition: background-color 3.0s linear;
}

.topmenuicon{
margin: 5px 0px -3px 0;
}

.current .moselect, .moselect.current{
	color: black;
	border-bottom: 1px solid black;
}

.darktheme .current .moselect, .darktheme  .moselect.current{
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.moselect:hover{
	cursor: pointer;
	filter: brightness(0.5);
}

.paginationbar a{
color: #1d658d;
height: 50px;
line-height: 50px;
display: inline-block;
outline: none;
}

.paginationbar a:hover {
color: #7094A8;
background: #D4D4D4;
}

select.paginbtn{
margin:0;
height: 50px;
line-height: 50px;
color: #1d658d;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none;
background: transparent;
font-family: 'PT sans';
font-size: 15px;
padding-right: 20px;
}

.paginbtn.thinpaginbtn{
	height: 30px;
    line-height: 30px;
}

.gotoissuearrow.downarrow{
	 margin-left: -15px;
}

.gotoissuearrow.downarrow.neg20px{
	 margin-left: -20px;
}

.landex{
width: 80%;
margin: 0 auto;
padding: 7px;
color: #7D7D7D;
font-size: 13px;
font-family: roboto;
font-weight: 300;
text-align:center;
}

.letex{
    text-align: center;
    border-radius: 15px;
    border: 1px solid #C2A82A;
    position: relative;
    padding: 6px 15px;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #C2A82A;
}

.letex:hover{
	background: #C2A82A;
	cursor: pointer;
	color: #ffffff;
}

.explainwrap{
	text-align: center;
}

.explain1{
	padding-top: 15px;
	padding-bottom: 2px;
	position: relative;
	display: inline-block;
	text-align: left;
	width: 85%;
	font-size: 15px;
	border-top: 1px solid #ececec;
}

.ex2{
	border-top: none;
}

.ex3{
	text-align: center;
}

.landfoot{
font-size: 13px;
color: #ABAEB7;
margin: 10px 15px;
}

.landfoot a{
color: #ABAEB7;
}

/*chart*/
.picksdesc{
	padding: 5px;
}

.storypicks .picksdesc{
	padding: 15px 35px;
}

.storypicks .listitem{
    flex: 1;
    min-width: 200px;
}

.showlist .picksdesc {
    margin: -5px 0 10px 0;
}

.shareit{
	position: absolute;
    bottom: 5px;
    right: 5px;
    color: white;
	line-height: 20px;
	cursor:pointer;
}

.shareit img{
	margin-right:3px;
}

.shareit span{
}

.cname{
	position: relative;
    margin-bottom: 10px;
	color: #545454;
}

.cwrap{
	float:left;
	width: 660px;
	border-top: 1px solid #ADACAC;
}

.clist{
	position: relative;
	height: 75px;
	width: 100%;
	margin-left: 0px;
	border-bottom: 1px solid #ADACAC;
	cursor:pointer;
	color: black;	
	font-family:'oxygen', 'Heiti TC', 微軟正黑體, 'Microsoft JhengHei', msjh, "Malgun Gothic", sans-serif;
	min-width: 320px;    
}

.clist .cstorydetails{
}

.clist:hover{
}

.clistselect{
	top: 0px;
    right: 0px;
    padding: 10px;
    position: absolute;
    background-color: rgba(150, 150, 150, 0.1);
}

.listmore{
	text-align: center;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #BFBEBE;
	background: #ffffff;
}

.crank{
	background: #F5EDBD;
	position: relative;
	float: left;
	height: 100%;
	width: 30px;
	text-align: center;
	z-index: 2;
}

.crank.c1, .crank.c2, .crank.c3{
	background: #ebce58;
}

.darktheme .crank{
	background: rgb(80,80,80);
}

.darktheme .crank.c1, .darktheme .crank.c2, .darktheme .crank.c3{
	background: #404040;
}

.cranknone .crank{
	display:none;	
}

 .crank.bmbtn{
	background-image: url(../img/bookmark.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

 .crank.bmbtn.active{
	background-image: url(../img/bookmark-on.svg);
}


.cnum{
	position: relative;
	display: inline-block;
	font-size: 20px;
	margin-top: 23px;
	color: #000;
}

.cstorydetails{
	position: relative;
	float: none;
    overflow: hidden;
	padding: 3px 3px 3px 8px;
	vertical-align: 8px;
	height: 100%;
	background: white;
}

.cstorytitle{
	position: relative;
	width: 100%;
	height: 22px;
    line-height: 22px;
    font-size: 18px;
    margin: 2px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cstorytitle.english{
	font-size: 16px;
}

.cstorytitle.font09em{
	font-size: 0.9em;
}

.cauthor{
	position: relative;
	display: inline-block;
	color: #4B82C7;
	font-size: 13px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 30px);
    height: 20px;
    line-height: 20px;
}

.cauthor a{
	color: #4B82C7;
}

.cacircle{
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	margin-right: 8px;
	vertical-align: top;
}

.cacircle .collabhead{
	float:left;
}

.chartcover .bgbookcover{
	border-radius: 0;	
	opacity: 0.8;
}

.cintro{
	position: absolute;
	width:100%;
	bottom:2px;
	right:0px;
	font-size: 12px;
	font-family: 'oswald','Heiti TC', 微軟正黑體, 'Microsoft JhengHei', msjh;
}

.ctotalissue {
    margin-left: 8px;
}

.ctotalissue.clock{
	color:#938365;
}

.ctotalissue .timeimg {
    margin: 0 0 -4px 0px;
}

.ctotalissue .contimg {
    margin: 0 3px -1px 0px;
}

.cmins{
	position: relative;
    display: inline-block;
	color: green;
}

.cimg{
	position: relative;
	float: right;
    width: 150px;
    overflow: hidden;
    height: 100%;
}

.cimg img, .cimg .chartgenre, .cimg .subgen{
	position: relative;
	color: white;
    font-size: 12px;
    border-radius: 0;
	text-shadow: 1px 1px #707070;
}

.chartcover{
	text-align: center;
}

.cgenrewrap{
	position: absolute;
	display:flex;
    top: 0px;
    left: 0px;
    right: 0px;
    line-height: 18px;
}

.crate{
  position: relative;
  float: right;
  color: #9C5840;
  padding: 0px 3px;
  margin-right: 2px;
}

.cended{
  float: right;
  color: #D1D1D1;
}

.chartlastupdate{
    float: left;
    padding: 10px;
    z-index: 3;
    position: relative;
}

.gchart {
    margin: 25px 0;
    height: 40vw;
}

.planbox {
    padding: 0 20px 20px 20px;
    background-color: #f5f4f3!important;
    margin: 10px 0 20px;
    border-radius: 5px;
	color:#333333;
}

.plan_select{
	display: inline-block;
	border: 1px solid #dadada;
	border-radius: 4px;
	padding: 10px;
	cursor: pointer;
	min-width: 150px;
}

.plan_select.active{
	border: 2px solid #ac8e00;
	margin: -1px;
	min-width: 152px;
}

.plan_discount{
font-size: 12px;
float: right;
margin: -5px -5px -5px 10px;
padding: 0 3px;
background-color: #a68a26;
color: #ffffff;
border-radius: 5px;
}

.planexp {
    font-size: 12px;
    color: #888;
    padding-bottom: 10px;
}

.darktheme .gchart text {
    fill: #ffffff!important;
}

.pubsuccess{
background: rgb(252, 239, 152);
border-radius: 3px;
padding: 5px 10px;
position:relative;
margin: 5px 0;
}

.pubsuccess a{
color:#3090C7;
}

.pubsuccess .pubsuccesstext{
padding: 5px 0;
color: rgb(100, 100, 100);
font-size: 14px;
}

.successmsg {
    background: #12B13F;
    color: #fff;
    padding: 5px 10px;
}

.noticewrap{
	text-align: center;
    background: #fffae7;
	color:#333333;
    border: 1.5px solid #cfae44;
    padding: 8px;
    border-radius: 5px;
}

.noticeaction{
	background-color: #c68c00;
    color: #ffffff;
    padding: 3px 12px;
    margin: 0px 8px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}

.noticeaction:hover{
	background-color: #e4ce63;
}

.studioreport_wrap {
    height: 1475px;
    overflow: hidden;
}

.popupwrap{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
	background-color: rgba(124, 124, 124, 0.9);	
}

.popupwrap .mask{
	position: fixed;
    top: 0;
    left: 0;
	bottom: 0;
	z-index: 999;
	width: 100%;
    background-color: rgba(124, 124, 124, 0.9);
}

.popupwrap.popupitem{
	background-color: #f6f6e8;
}

.darktheme .popupwrap.popupitem{
	background-color: rgb(45,45,45);
}

.popupwrap .progress{
	margin: 0;
	position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.popupcontent{	
	overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 93%;
    height: calc(100% - 50px);
	-webkit-overflow-scrolling: touch;
}

.popupbox img{
	max-width:100%;
}

a.close, .imageclose{
	padding: 10px;
    font-size: 18px;
    font-family: arial;
	cursor:pointer;
	z-index: 1000;
}

a.close:hover, a.imageclose:hover{
	text-decoration:none;
	color:#e2e2e2;
}

.imageclose{
    float: right;
    color: #bbbbbb;
}

.enlargeimagewrap{
	background: black;
}

.enlargeimage{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    z-index: 1000;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.changecoverwrap{
	margin: 15px 0 30px 0;
}

.changecover{	
    cursor: pointer;
    background-color: #EBCE58;
	color: black;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 14px;
    display: inline-block;
}

.greybg{
	background: #f9f9f9;
}

.transparentbg, div .transparentbg{
	background: transparent;
}

.layoutgrid{
	background: white;
	margin-bottom:10px;
	transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.datagrid{
	border-radius: 10px;
    background: #f6f6f6;
    color: #333333;
    margin: 20px;
    padding: 10px;
}

.darktheme .datagrid{
	background: #505050;
    color: #ffffff;
}

.gridtitle{
	font-size:22px;
}

.gridnum {
    font-size: 32px;
    color: #877752;
    margin-top: 5px;
}

.griddesc {
    font-size: 14px;
    color: #797979;
}
.darktheme .griddesc {
	color: #949494;
}
.gridseparator {
    border-top: 1px solid #e0e0e0;
    margin: 15px 0;
}
.hideaction .lowbar a{
	display:none;
}
.darktheme .gridseparator{
	border-color:#444444;
}
.datagrid .listitem{
	background-color:transparent;
}
.gridsubtitle {
    font-size: 12px;
    color: #9a9a9a;
    margin-bottom: 3px;
}

.edit_options{
	font-size: 16px;
    margin-bottom: 50px;
	border-top: 1px solid #efeeee;
}

.text-btn{
	padding: 12px 10px;
}

/* story tags */

.greycolor{
	color:grey;
}

.greycolor a{
	color:grey;
}

.tags_wrap_toc {
    padding: 20px;
    text-align: center;
}

.tags_wrap{
	font-family: roboto;
}

.storyendtop .tags_wrap{
	padding-top:5px;
}

.story_tag {
    padding: 5px 15px;
    color: #616161;
    background: #e0d07f;
    border-radius: 20px;
    margin: 5px 5px 5px 0;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;	
}

.storyendtop .story_tag {
	font-size: 16px;
}

.addtag{
	display:block;
	text-align: center;
	padding-bottom:20px;
}

.newstorytag{
	padding: 6px;
    margin-bottom: 5px;
    font-size: 14px;
	width: 100%;
} 

.newstorytag.alignleft{
	padding-left:0px;
}

.newstorytag.marginbottom{
	margin-bottom: 15px;
}

.tagerror{
	font-size: 12px;
    margin: 5px;
}

.suggestbox {
    padding: 4px;
    border-bottom: solid 1px #dedede;
    font-size: 12px;
    height: 30px;
    position: relative;
	box-sizing: content-box; /* Fixed for materialcss distortion */
}

.suggestiontag:empty{
	display:none;
}

.suggestiontag{
	position: absolute;
    top: 100%;
    left: 0px;
    right: 0px;
    background: #ffffff;
    z-index: 99;
    text-align: left;
	border: solid 1px #dedede;
    border-bottom: none;
}

.suggestiontag .suggestbox{
    height: 20px;
    padding: 10px 10px 5px 10px;
	color: black;
    cursor: pointer;
}

.suggestiontag .suggestbox:hover, .suggestiontag .suggestbox.selected
{
background:#3b5998;
color:#FFFFFF;
}

.delete-tag {
    width: 20px;
    height: 16px;
    background: url("//www.penana.com/img/close_pop.png") 2px no-repeat;
    background-size: 18px;
    float: right;
    margin-left: 2px;
    margin-right: -8px;
    cursor: pointer;
}

.canceltag{
	background-color:#ececec;
	/* border: 1px solid #bcbcbc; */
    color: #909090;
}

.canceltag:hover{
	background-color: #dddddd;	
}

.tagactionwrap{
	margin: 0 0 50px 8px;
}

.tagactionbtn, .bluebtn{
    text-decoration: none;
    font-size: 13px;
    color: #fafafa;
    cursor: pointer;
    background-color: #0F88B8;
    width: 56px;
    border-radius: 2px;
    padding: 2px;
    margin-bottom: 10px;
    text-align: center;
	cursor:pointer;
}

.tagactionbtn.canceltag, .bluebtn.greybtn{
    background-color: #ececec;
    color: #909090;
}

.editnotag{
	color: grey;
    font-size: 12px;
    padding: 6px;
}

.topimage{
	width: 100%;
    padding-bottom: 34%;
    background-size: cover;
	position: relative;
}

@media only screen and (min-width: 768px){
	.topimage{
		display:none;
	}
}		

.ntag {
    border: 1px solid #dadada;
    background-color: #ececec;
    border-radius: 15px;
    padding: 2px 10px;
    white-space: nowrap;
}

.darktheme .ntag{
    background-color: #000000;
}

.featured_work {
    background-color: #ebce58;
    color: #805c49;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 5px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* compare drafts */
.mwrite ins{color:green;background:#dfd;text-decoration:none; font-weight:bold;}
del {color:red;background:#fdd;text-decoration:line-through;position:relative;}
del br {
display: none;
}
#params {margin:1em 0;font: 14px sans-serif}
.panecontainer > p {margin:0;border:1px solid #bcd;border-bottom:none;padding:1px 3px;background:#def;font:14px sans-serif}
.panecontainer > p + div {margin:0;padding:2px 0 2px 2px;border:1px solid #bcd;border-top:none}
.pane {margin:0;padding:0;border:0;width:100%;min-height:20em;overflow:auto;font:12px monospace}
#htmldiff {color:gray}
#htmldiff.onlyDeletions ins {display:none}
#htmldiff.onlyInsertions del {display:none}
/* end of compare drafts */

/*spinner */

#pageloading{
	height:100%;
	z-index:100;
}

.fullwhite{
position: absolute;
top: 0;
width: 100%;	
height: 100%;
background: white;
z-index: 99;
}    

.showstorylist .spinner{
	position: relative;
	top: 0;
	animation: delayshow 1s;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #EBCE58;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

@keyframes delayshow{
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* end of spinner */

@keyframes forceRedraw {
    from { box-shadow: inset rgba(0,0,0,0) 0 0 0; }
    to { box-shadow: inset rgba(0,0,0,0.0000001) 0 0 0 10px; }
}

.downarrow {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    margin: 0 5px;
    border-top: 4px solid #1d658d;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
	pointer-events: none;
}

.darktheme .booknavbar .downarrow{
	border-top: 4px solid white;
}


/* fake toast */
.pseudotoast {
    width:200px;
    height:20px;
    height:auto;
    position:fixed;
	z-index:99;
    left:50%;
    margin-left:-115px;
    bottom:10px;
    background-color: #383838;
    color: #F0F0F0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding:10px;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

.pseudotoast.toastontop{
	top: 80px;
    bottom: auto;
}

div .toast{
	word-break: break-word;
}

.refreshbar{
	text-align: center;
    background: beige;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
/*
.slick-slide img
{
    display: block;
}
*/
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-slide{
	position: relative;	
	overflow:auto; 
}

#noscriptwrapper, .slick-slider, .slick-list, .slick-track, .slick-slide{
	height: 100%;
    position: relative;
}

#bookslider, .pepperslide{
	height:100%;
	position:relative;
}

.contestresult{
	margin: 0px 0 15px 0;
	font-family: 'Roboto',sans-serif;
}

.contestresult .re{
	margin: 5px 0;
}

.contestresult a{
	color: black;	
	display: block;
}

.darktheme .contestresult a{
	color: #C2C2C2;
}

.contestresult a:active{
    text-decoration: none;
    background-color: #dbdbdb;
	-webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

.contestresult img, .contestresult span{
	vertical-align: middle;
}

.contestresult span{
	margin-left: 60px;
	min-height: 55px;
}

.contestresult .secondrowadjust{
	min-height: 35px;
}

/* search suggest */

.smallgrey {
	color:grey;
	font-weight:normal;
	cursor:pointer;
}

.darktheme .smallgrey{
	color:#d2d2d2;
}

.searchprompt{
	color:grey;
	padding: 15px 0 10px 0;
	font-size:17px;
}

.popupwrap.whitepopup{	
background: white;
}

.whitepopup .popupbar{
	position: relative;
    top: inherit;
}

.menuselect{
	display: inline-block;
}

.menuselect::after{
	content: "";
	border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
    position: absolute;
    top: 40%;
    right: 0px;
}   

.menuselect.style2{
	padding-right: 5px;
} 

.menuselect.style2::after{
	top:10px;
}

.searchsuggestion{	
	margin-top: 50px;
	margin-top: 95px;
	overflow: auto;
	overflow-x: hidden;
	-webkit-transition-property: top, bottom;
	transition-property: top, bottom;
	-webkit-transition-duration: .2s, .2s;
	transition-duration: .2s, .2s;
	-webkit-transition-timing-function: linear, linear;
	transition-timing-function: linear, linear;
	-webkit-overflow-scrolling: touch;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-family: 'PT sans';
	background: white;
	z-index: 1001;
	display:none;
}

.suggestitem{
	display:block;
	margin:5px 10px;
	/*border-bottom: 1px solid #ececec;*/
}

.suggesticon{
	width:45px;
	height:45px;				
	background-position: center center;
	background-repeat: no-repeat;    
	background-size: 30px;
	display: inline-block;
	vertical-align: middle;				
}

.suggesticon.storyicon{
	background-size: cover;
}

.fullcover .suggesticon{
	width:90px;
}

.fullcover.storyicon{
	max-width:800px;
	height: 50vw;
	max-height:400px;
}

.tocintro .fullcover .suggesticon{
	width: 140px;
    height: 70px;
}

.tocintro .lowbar{
	font-size: 15px;
}

.suggesticon.tagicon{
	background-image: url("../img/tag.svg"), none;
}

.suggesticon.usericon{
	background-size: cover;
	border-radius: 100%;
}

.suggestdetails{
	margin-left:10px;
	vertical-align: middle;    
	max-width: calc(100% - 55px);
	text-align: left;	
}

.fullcover .suggestdetails{
	max-width: calc(100% - 100px);
}

.suggestdesc {
	color: #a2a2a2;
	font-size: 12px;
}

.moresearch{
	font-weight:bold;
	color: #c5992d;
}
/* end of search suggest */
/* new home page */

.mainmenu .notidate img {
    margin-right: 3px;
}

.storybutton {
    padding: 15px 5px;
    text-align: center;
}

.darktheme .storybutton, .darktheme .filterstory, .darktheme .genrebox, .darktheme #chartnav .genrebox{
	background: rgb(80,80,80);
}

.darktheme #chartnav .genrebox{
	border: 1px solid #6d6b6b;
}

.darktheme .bottomsearch {
    background: #e1e1e1;
}

@media (hover:hover) {    
	.storybutton:hover, .filterstory:hover, .genrebox:hover{
		background-color: #EAEAEA;
		-webkit-transition: .3s ease-out;
		transition: .3s ease-out;
		-webkit-backface-visibility: hidden;
	}
}

.storybutton:active, .filterstory:active, .genrebox:active{
	/*background-color: #EAEAEA;*/
}

@media only screen and (min-width: 400px) and (max-width: 500px){
	.contestbutton .storybutton{
		width: 30%;
	}
}	

.filterstory{
	flex: 1;
	padding: 10px 5px;
    text-align: center; 
}

 @media only screen and (min-width: 300px) and (max-width: 800px){
	 .filterstory{
		 max-width: 24%;
	 }
 }

.filterexplain {
    font-size: 0.8em;
    color: #545454;
}

.popupbar{
	padding: 10px;
    position: relative;
    top: 0px;
	height: 50px;
	line-height: 32px;
	left: 0;
    right: 0;
    background: rgb(216, 216, 216);
	z-index: 1001;
	user-select: none;
	overflow: hidden;
}

.closemenu {
    padding: 15px;
    margin-left: -10px;
    cursor: pointer;
}

.closemenu:active {
    background: #cecece;
}

.popupoption{
	float:right;
}

.popupoption select {
    padding: 0 10px;
    margin: 0px 2px 0px 0;
	line-height:32px;
}

.popupoption select option{
    padding: 0px;
    margin: 0px;
}

.popupitem .showstorylist{
	margin-top: -2px;
    padding-top: 1px;
    z-index: 1001;
    position: relative;
	min-height: 50px;
}

.menuajaxbutton{
	cursor:pointer;
}

.pseudosearch{
	cursor:pointer;
}

.onethird{
	max-width: 31%;
}
/* end of new home page */


.waves-effect{
	-webkit-backface-visibility: hidden;
}

 .waves-effect.text-btn .waves-ripple {
	background-color: rgba(225, 225, 225, 0.65);
}

.popupstorycover{
	width: 100%;
    padding-bottom: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
	

/*paybook*/
  .stripe-button-el, div .stripe-button-el { display: none }
  .paybook, button.paybook{
		border:none;
		color: #fff;
		background: #039be5;
		cursor: pointer;
		margin: 3px 0;
		padding: 15px 15px;
		vertical-align: middle;
		font-size: 15px;
		border-radius: 5px;   
		-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.27);
		box-shadow: inset 0 -2px 0 rgba(0,0,0,0.27);    
		-webkit-transition: all .2s;
		transition: all .2s;
  }
  
  .darktheme .paybook, button.paybook{
	background-color: #494879;
  }
  
  .paybook:hover {
		background: #4fc3f7;
	}
  
  .paybook.paid, .paybook:disabled{
	  background: #8fcbe8;
  }
  
   .paybook.paid:hover{
	   
   }
   
   .storyendcontent .paybook{
	    float: left;
		margin: 3px;
   }
   
   .paybtn .paybook{
	   margin: 5px 20px;
   }
   
    .paybook.viewaspublic, .headnotice.viewaspublic{
	    background: #5d5d5d;
   }
   
   .paybook.viewaspublic:hover{
	   background: #333333;
   }
   
   .paybook.paypaper {
		background: #ededed;
		color: black;
		padding: 0 10px 0 0;
	}
	
	.paypaper img {
		max-height: 100px;
		width: auto;
		margin-right: 5px;
	}
	
	.payproduct_pseudo .paybook{
		background: transparent;
		color: inherit;
		padding: 0px;
	}
   
/* end of paybook*/

/* android using opacity is smoother */
.page_layer.bottomlayer{
	opacity: 0;
	backface-visibility: hidden;
}

/* android using display:none is smoother */
.isonios .page_layer.bottomlayer{
	opacity: 1;
	display: none;
}

.scoretable{
	width: 100%;
}

.scoretablebg{
	background-color: rgb(253,249,238);
}
.darktheme .scoretablebg {
    background-color: #2d2d2d;
}

.scoretable td, .scoretable th{
	padding: 10px 16px;
    background-color: rgb(253,249,238);
	border-bottom: 1px solid rgb(240, 235, 214);	
	border-radius: 0;
}

.scoretable a{
	color: #0A6986;
}

.datatable .nowrap{
	width:auto !important;
}

.dataTables_wrapper .dataTables_length{
	float:left !important;
	margin:0 10px;
}

.dataTables_length .select-wrapper{
	display: inline-block;
	width: 50px; 
}
.dataTables_length .select-wrapper .hide-select{
	display: none;
}

.dataTables_length label{
	font-size: 15px;
    color: black;
}

.dataTables_filter label{
	font-size:0;
	float: left;
    width: 100%;
}

.dataTables_filter label input{
	border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #eaeaea !important;
	padding: 0 10px !important;
}

.dataTables_filter input{
	margin: 0 !important;
    padding: 0 !important;
}

.dataTables_paginate .paginate_button.current{
	background: #e4ce63 !important;
    border: 0 !important;
}
.darktheme .dataTables_length label{
	color: #ffffff;
}

.logregpopup{
	width: 86%;
    height: auto;    
	max-height: 80%;
    position: fixed;
    z-index: 9999;
	top: 50px;
	left: 50%;
	margin-left: -43%;
	background: #fff;
	overflow: auto;
    overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
}

.logregpopup .loginregbox{
	width:auto;
}
    
.logregpopup .tabselect {
    text-align: center;
    margin: 10px 15px 15px 15px;
    padding: 0 0 5px 0;
    font-size: 20px;
	font-family: 'oswald', 'Heiti TC', 微軟正黑體, 'Microsoft JhengHei', msjh;
    color: #cccccc;
	border-bottom: 1px solid #cccccc;
	cursor:pointer;
}

.logregpopup .tabselect.current{
	color: #888888;
    font-weight: bold;
}

.logregpopup .close{
    left: 98%;
    top: 0;
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	font-weight:normal;
}

.logregpopup .close.newclose{
	font-size: 22px;
    line-height: 26px;
}

.logregpopup .alt_method{
	text-align:center;
	margin: 0px 20px 10px 20px;
}

.logregpopup.underbar{
	top: 70px;
	margin-bottom: 30px;
    position: relative;
}

.logregpopup.underbar .close{
    right: 15px;
	z-index: 2;
}

.narrowpopup .logregpopup{
	 max-width: 500px;
}

@media (min-width: 600px) {
	.narrowpopup .logregpopup{
		margin-left: -250px;
	}
}

.storyinfobox .close{
	color: #b1b1b1;
}

.popup_subtitle{
font-weight: bold;
padding: 10px 1px 5px 1px;
}

a.popuptab {
    color: rgb(160, 160, 160) !important;
    border-bottom: 2px solid rgb(160, 160, 160);
    margin-right: 10px;
    padding: 3px 0;
	font-size: 20px;
    text-decoration: none;
}

a.popuptab.current {
    border-bottom: 2px solid black;
    color: black;
}

.popup_message {
    font-size: 20px;
    margin-top: 30px;
}

.popup_message.popup_message2 {
    margin: 0 0 10px 0;
}

.popup_btn {
    background: #0271a7;
    color: #fff;
    border: 0;
    min-width: 100px;
    height: 35px;
    margin: 0 10px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.popup_btn.cancel {
    background: darkgrey;
}

.popup_btn:hover {
    filter: brightness(120%);
}

.paying_buttons button {
    vertical-align: top; 
}

.product_desc {
    vertical-align: top;
}

.productpage .discount{
	color: #B12704;
}


.productbox{
	min-width: 200px;
	padding: 10px;
}

a.productbox:hover{
	text-decoration:none;
}

.productbox.storyproduct{	
	padding:3px 10px 10px 10px;
}

.product_image{
	width: 100%; height:200px;
}

.storyproduct .product_image{
	 height:100px;
}

.pricetext img{
	-webkit-transform: translateZ(0);
}

.price_details {
	font-size:20px;
}

.original_price{
   text-decoration-color: #000000;
}

.discount {
    color: #B12704;
}

.price_cat{
	color:grey;
	font-size:12px;
}

.productbox .author_name{
	color:grey;
}

.productbox.adminbox {
    width: auto;
    height: auto;
    position: relative;
    float: left;
    background-color: #fafafa;
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    margin: 5px;
}

.singlelinebox{
width: 90%;
padding: 2px 7px;
border-radius: 3px;
border: 1px solid #ccc;
background: inherit;
font-family: 'PT Sans', "Heiti TC", "微軟正黑體","Microsoft JhengHei","msjh", sans-serif;
font-size: 15px;
margin-bottom: 3px;
margin-left: 0;
}

.buycoin .coinbalance{
    font-size: 25px;
    vertical-align: middle;
    font-family: pt sans,heiti tc,微軟正黑體,microsoft jhenghei,msjh,sans-serif;
    margin-left: 5px;
	font-weight:bold;
}

.buycoin .coinbalance img{
	vertical-align: bottom;
}

.buycoin .sponsor_coin {
     width: 45%;
}

.sponsor_coin_area {
    margin: 10px -5px 0 -5px;
}

.sponsor_coin {
    border: 1px solid #bababa;
    margin: 5px;
    padding: 20px;
    background: #fafafa;
    color: #8d5c1f;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.sponsor_coin .bonuscoin, .bonuscoin{
	color: #c51f1f;
}

.sponsor-coins input[type="radio"]:checked + .sponsor_coin {
    border: 1px solid #5f4b00;
    background: #efe7bf;
    color: #6e5600;
    background-image: url(../img/check.png);
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: right;
}

/* horizontal scroll bar */
.scroll_menu_wrapper {
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
}

.scroll_menu_wrapper.withfilter{
	width: calc(100% - 45px);
	display: inline-block;
	vertical-align: middle;
}

.scroll_menu_wrapper.sticky{	
	position: -webkit-sticky; /* Safari */
	position: sticky;
    top: -1px;
    z-index: 10;
}

.padding5px{
	padding: 5px;
}

.scroll_menu {
	height: 100%; 
	max-height: 50px;
	margin:0;
	box-sizing: border-box;			
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;			
}

.scroll_menu.nomaxheight{
	max-height: initial;
}

.scroll_menu::-webkit-scrollbar, .carousel_container::-webkit-scrollbar{ 
	display: none; 
}

.scroll_menu li:not(.indicator):not(.tab){
	display: inline-block;
	height: 100%;
	line-height:100%;
	padding: 1em;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 14px;
}

.scroll_menu.withicon li{
	padding: .5em .3em .2em .3em;
	height: 36px;
}

.scroll_menu li:active{
	
}

.scroll_menu li.current{	
	border-bottom: 3px solid #7f5217;
}

.scroll_menu.square_menu {
    max-height: none;
    margin: 5px;
}

.scroll_menu.square_menu li {
    height: auto;
    min-width: 80px;
    text-align: center;
    border: none;
    vertical-align: middle;
    border-radius: 5px;
	padding: 1em 0;
}

.scroll_menu.square_menu li.current {
}

.scroll_menu.square_menu li:not(.current){
	background-color: #bbbbbb40;
	color: #000000;
}

.scroll_menu.square_menu li img {
    display: block;
    margin: 7px auto;
}
.scroll_menu.text_menu{
	padding:0 10px;
	font-weight:bold;
	text-align:center;
}
.scroll_menu.text_menu a:not(.current){
	background-color: transparent;
	color: #000000;
}
.scroll_menu.text_menu a.current{
	color: #ffffff !important;
}
.darktheme .scroll_menu.text_menu a{
	color: #ffffff !important;
}

/* start of subscription plans */

.sub_button {
    padding: 5px 10px;
    background-color: #ffffff;
    border: 1px solid #AC8E00;
    border-radius: 10px;
	color: #6f6f70;
	cursor:pointer;
	margin:5px;
	user-select: none;
	white-space: initial;
	font-size: 15px;
	line-height: 1.5;
}

.showstorylist .sub_button{
	min-width: 200px;
}

.sub_button:hover{
	background-color: #ececec;
}

.scroll_menu .sub_button:first-child {
    margin-left: 20px;
}

.subleft{
	text-align:left;
}

.plan_name {
    font-weight: bold;
	text-align:center;
}

.plan_desc{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	font-size:12px;
}

.sub_button .subleft {	
    max-width: 106px;
    -webkit-box-orient: vertical;
}

.sub_button .subright{
	padding-left:5px;
	text-align: center;
}

.plan_price{
	font-size:0px;
}

.plan_slash{
	font-size:15px;
}

.plan_price_num{
	font-weight: bold;
	font-size:22px;
	line-height:22px;
}

.plan_interval{
	display:block;
	font-size:13px;
}

.lang_zh .plan_price_num{
	line-height: 1.4;
}

.lang_zh .plan_interval, .lang_zh .plan_slash{
	display:inline;
	vertical-align: 2px;
}

.free_trial_text{
	padding: 2px 5px;
    background-color: orange;
    color: #ffffff;
    margin-left: 10px;
    border-radius: 5px;
}

.free_trial_text:empty{
	display:none;
}

.plan_action{
    color: #AC8E00;
    font-weight: bold;
}
.subscribed .plan_action{
	color: white;
    background: #AC8E00;
    border-radius: 5px;
}
.subscription_form.subscribed .startpay{
	display:none;
}
.subscription_form.subscribed .subscribed_word{
	display:block;
}

.plan_pic img {
    border-radius: 100%;
    margin-bottom: 10px;
}
/* end of subscription plans */

.gc_text_icon{
	border-radius: 100%;
    background-color: #000000;
    color: #ffffff;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    margin: 7px auto;
}

.showlist{	
    transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
	transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
    will-change: transform;
	margin-bottom: 10px;
	/* box-shadow: 0 0px 5px rgba(101,119,134,.25); */
}
.showlist, .promocontainer{	
	margin-left:5px;
}

.selectlistwrap .showlist .listitem, .darktheme .selectlistwrap .showlist .listitem{
	background: transparent;
    padding: 10px;
}

.selectlistwrap .showlist .listitem:not(:last-child){
	border-bottom: 1px solid #f5f5f5;    
}

.beforeslide {
  height: 0;
  overflow: hidden;     
  visibility: hidden;  
}

.slide-down {
  animation: slide-down 1s linear both;
}

@keyframes slide-down {
  0% {
    visibility: hidden;
    height: 0;
  }

  95% {
    visibility: visible;
    height: $slide-content-height;
  }

  100% {
    visibility: visible;
    height: auto;
  }
}

@-webkit-keyframes glowdim {
    from {
        background-color:#eeeeee;
    }
	to {
        background-color:none;
    }
}

@-webkit-keyframes glowdim_yellow {
	from {
        background-color:#f2ecc8;
    }
	to {
        background-color:none;
    }
}


.glowdim, .glowdim_color{
	animation-duration: 4s;  
     -webkit-transition: background-color 5.0s linear;
       -moz-transition: background-color 5.0s linear;
            transition: background-color 5.0s linear;
}

.glowdim{
		animation-name: glowdim;  
}

.glowdim_color.yellowdim{
	animation-name: glowdim_yellow;  
}

.paddles {
}
.paddle, .paddle-pseudo{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: 10px 5px;
	width: 2em;
	height: 2em;
	background: rgba(107, 167, 203, 0.86);
	color: white;
	border-radius: 100%;
	border: none;
	outline:none;
	font-family: arial;
	font-size: 15px;
	line-height: 100%;
	cursor:pointer;
	padding: 0px;
	z-index:100;
}
.paddle:hover, .paddle:active{
	background: #6ba7cb;
}
.paddle.minipaddle{
    width: 1.5em;
    height: 1.5em;
    font-size: 13px;
	margin:5px;
}
.paddle.minipaddle.tallheight{
    margin: 10px 2px;
}
.left-paddle {
	left: 0;
}
.right-paddle {
	right: 0;
}

.right-paddle-shadow{
	/*background: -webkit-linear-gradient(right, #fff, #FFF 30%, rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(right, #fff, #FFF 30%, rgba(255, 255, 255, 0));
    background: linear-gradient(to left, #c1c1c1, #FFF 60%, rgba(255, 255, 255, 0));
	/*background: linear-gradient(to left, #fff, #FFF 30%, rgba(255, 255, 255, 0));*/
	background: linear-gradient(to left, #d4d4d4, rgba(200, 200, 200, 0));
    height: 100%;
    width: 30px;
    padding: 0;
    margin: 0;
	border-radius: 0;
}

.left-paddle-shadow{
	/*background: -webkit-linear-gradient(left, #fff, #FFF 30%, rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(left, #fff, #FFF 30%, rgba(255, 255, 255, 0));
    background: linear-gradient(to right, #fff, #FFF 30%, rgba(255, 255, 255, 0));*/
	background: linear-gradient(to right, #d4d4d4, rgba(200, 200, 200, 0));
    height: 100%;
    width: 30px;
    padding: 0;
    margin: 0;
	border-radius: 0;
}

.skeleton_loading {
	background-color:white;
	position:relative;
	z-index:10000;
    margin: auto;	
		height: 100%; /* change height to see repeat-y behavior */
    
		background-image:
			linear-gradient( 0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
			linear-gradient( #dcdcdc 10px, transparent 0 ),
			linear-gradient( #dcdcdc 10px, transparent 0 ),
			linear-gradient( #dcdcdc 10px, transparent 0 ),
			linear-gradient( #dcdcdc 10px, transparent 0 ),
			linear-gradient( #dcdcdc 10px, transparent 0 ),
			linear-gradient( #dcdcdc 10px, transparent 0 );

		background-repeat: repeat-y;

		background-size:
			5% 150px, /* highlight */
			50% 150px,
			80% 150px,
			80% 150px,
			80% 150px,
			70% 150px,
			60% 150px;

		background-position:
			40px 0px, /* highlight */
			40px 20px,
			40px 40px,
			40px 60px,
			40px 80px,
			40px 100px,			
			40px 120px;

		animation: shine 1s infinite;
	}

	@keyframes shine {
		to {
			background-position:
			90% 0px, /* move highlight to right */
			40px 20px,
			40px 40px,
			40px 60px,
			40px 80px,
			40px 100px,			
			40px 120px;
		}
	}

/* font */
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v14/DgBpgaYycijFA8v2hNt7MfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v14/peRd8sj511qE2lHtK-QfcPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v14/yg0glPPxXUISnKUejCX4qfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(https://fonts.gstatic.com/s/oswald/v14/pEobIV_lL25TKBpqVI_a2w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display:  fallback;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display:  fallback;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display:  fallback;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display:  fallback;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display:  fallback;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display:  fallback;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display:  fallback;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/77FXFjRbGzN4aCrSFhlh3hJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/isZ-wbCXNKAbnjo6_TwHThJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/UX6i4JxQDm3fVTc1CPuwqhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/jSN2CGVDbcVyCnfJfjSdfBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/PwZc-YbIL414wB9rB1IAPRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/97uahxiqZRoncBaCEI3aWxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/JX7MlXqjSJNjQvI4heMMGvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/vtwNVMP8y9C17vLvIBNZI_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/9kaD4V2pNPMMeUVBHayd7vY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display:  fallback;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/ATKpv8nLYAKUYexo8iqqrg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/kTYfCWJhlldPf5LnG4ZnHCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/g46X4VH_KHOWAAa-HpnGPiEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/hpORcvLZtemlH8gI-1S-7iEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display:  fallback;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v8/0XxGQsSc1g4rdRdjJKZrNPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


/* phone input */
/**
 * Variables declared here can be overridden by consuming applications, with
 * the help of the `!default` flag.
 *
 * @example
 *     // overriding $hoverColor
 *     $hoverColor: rgba(red, 0.05);
 *
 *     // overriding image path
 *     $flagsImagePath: "images/";
 *
 *     // import the scss file after the overrides
 *     @import "bower_component/intl-tel-input/src/css/intlTelInput";
 */
.intl-tel-input {
  position: relative;
  display: inline-block; }
  .intl-tel-input * {
    box-sizing: border-box;
    -moz-box-sizing: border-box; }
  .intl-tel-input .hide {
    display: none; }
  .intl-tel-input .v-hide {
    visibility: hidden; }
  .intl-tel-input input, .intl-tel-input input[type=text], .intl-tel-input input[type=tel] {
    position: relative;
    z-index: 4;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0; }
  .intl-tel-input .flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 1px; }
  .intl-tel-input .selected-flag {
    z-index: 4;
    position: relative;
    width: 36px;
    height: 100%;
    padding: 0 0 0 8px; }
    .intl-tel-input .selected-flag .iti-flag {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto; }
    .intl-tel-input .selected-flag .iti-arrow {
      position: absolute;
      top: 50%;
      margin-top: -2px;
      right: 6px;
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 4px solid #555; }
      .intl-tel-input .selected-flag .iti-arrow.up {
        border-top: none;
        border-bottom: 4px solid #555; }
  .intl-tel-input .country-list {
    position: absolute;
    z-index: 4;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    background-color: white;
    border: 1px solid #CCC;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll; }
    .intl-tel-input .country-list.dropup {
      bottom: 100%;
      margin-bottom: -1px; }
    .intl-tel-input .country-list .flag-box {
      display: inline-block;
      width: 20px; }
    @media (max-width: 500px) {
      .intl-tel-input .country-list {
        white-space: normal; } }
    .intl-tel-input .country-list .divider {
      padding-bottom: 5px;
      margin-bottom: 5px;
      border-bottom: 1px solid #CCC; }
    .intl-tel-input .country-list .country {
      padding: 5px 10px; }
      .intl-tel-input .country-list .country .dial-code {
        color: #999; }
    .intl-tel-input .country-list .country.highlight {
      background-color: rgba(0, 0, 0, 0.05); }
    .intl-tel-input .country-list .flag-box, .intl-tel-input .country-list .country-name, .intl-tel-input .country-list .dial-code {
      vertical-align: middle; }
    .intl-tel-input .country-list .flag-box, .intl-tel-input .country-list .country-name {
      margin-right: 6px; }
  .intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type=text], .intl-tel-input.allow-dropdown input[type=tel], .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input[type=text], .intl-tel-input.separate-dial-code input[type=tel] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0; }
  .intl-tel-input.allow-dropdown .flag-container, .intl-tel-input.separate-dial-code .flag-container {
    right: auto;
    left: 0;
	z-index: 999;	}
  .intl-tel-input.allow-dropdown .selected-flag, .intl-tel-input.separate-dial-code .selected-flag {
    width: 46px; }
  .intl-tel-input.allow-dropdown .flag-container:hover {
    cursor: pointer; }
    .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
      background-color: rgba(0, 0, 0, 0.05); }
  .intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover, .intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover {
    cursor: default; }
    .intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover .selected-flag, .intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover .selected-flag {
      background-color: transparent; }
  .intl-tel-input.separate-dial-code .selected-flag {
    background-color: rgba(0, 0, 0, 0.05);
    display: table; }
  .intl-tel-input.separate-dial-code .selected-dial-code {
    display: table-cell;
    vertical-align: middle;
    padding-left: 28px; }
  .intl-tel-input.separate-dial-code.iti-sdc-2 input, .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel] {
    padding-left: 66px; }
  .intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag {
    width: 60px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel] {
    padding-left: 76px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
    width: 70px; }
  .intl-tel-input.separate-dial-code.iti-sdc-3 input, .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel] {
    padding-left: 74px; }
  .intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag {
    width: 68px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] {
    padding-left: 84px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
    width: 78px; }
  .intl-tel-input.separate-dial-code.iti-sdc-4 input, .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel] {
    padding-left: 82px; }
  .intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag {
    width: 76px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] {
    padding-left: 92px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
    width: 86px; }
  .intl-tel-input.separate-dial-code.iti-sdc-5 input, .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text], .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel] {
    padding-left: 90px; }
  .intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag {
    width: 84px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input, .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text], .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel] {
    padding-left: 100px; }
  .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
    width: 94px; }
  .intl-tel-input.iti-container {
    position: absolute;
    top: -1000px;
    left: -1000px;
    z-index: 1060;
    padding: 1px; }
    .intl-tel-input.iti-container:hover {
      cursor: pointer; }

.iti-mobile .intl-tel-input.iti-container {
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
  position: fixed; }

.iti-mobile .intl-tel-input .country-list {
  max-height: 100%;
  width: 100%; }
  .iti-mobile .intl-tel-input .country-list .country {
    padding: 10px 10px;
    line-height: 1.5em; }

.iti-flag {
  width: 20px; }
  .iti-flag.be {
    width: 18px; }
  .iti-flag.ch {
    width: 15px; }
  .iti-flag.mc {
    width: 19px; }
  .iti-flag.ne {
    width: 18px; }
  .iti-flag.np {
    width: 13px; }
  .iti-flag.va {
    width: 15px; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .iti-flag {
      background-size: 5630px 15px; } }
  .iti-flag.ac {
    height: 10px;
    background-position: 0px 0px; }
  .iti-flag.ad {
    height: 14px;
    background-position: -22px 0px; }
  .iti-flag.ae {
    height: 10px;
    background-position: -44px 0px; }
  .iti-flag.af {
    height: 14px;
    background-position: -66px 0px; }
  .iti-flag.ag {
    height: 14px;
    background-position: -88px 0px; }
  .iti-flag.ai {
    height: 10px;
    background-position: -110px 0px; }
  .iti-flag.al {
    height: 15px;
    background-position: -132px 0px; }
  .iti-flag.am {
    height: 10px;
    background-position: -154px 0px; }
  .iti-flag.ao {
    height: 14px;
    background-position: -176px 0px; }
  .iti-flag.aq {
    height: 14px;
    background-position: -198px 0px; }
  .iti-flag.ar {
    height: 13px;
    background-position: -220px 0px; }
  .iti-flag.as {
    height: 10px;
    background-position: -242px 0px; }
  .iti-flag.at {
    height: 14px;
    background-position: -264px 0px; }
  .iti-flag.au {
    height: 10px;
    background-position: -286px 0px; }
  .iti-flag.aw {
    height: 14px;
    background-position: -308px 0px; }
  .iti-flag.ax {
    height: 13px;
    background-position: -330px 0px; }
  .iti-flag.az {
    height: 10px;
    background-position: -352px 0px; }
  .iti-flag.ba {
    height: 10px;
    background-position: -374px 0px; }
  .iti-flag.bb {
    height: 14px;
    background-position: -396px 0px; }
  .iti-flag.bd {
    height: 12px;
    background-position: -418px 0px; }
  .iti-flag.be {
    height: 15px;
    background-position: -440px 0px; }
  .iti-flag.bf {
    height: 14px;
    background-position: -460px 0px; }
  .iti-flag.bg {
    height: 12px;
    background-position: -482px 0px; }
  .iti-flag.bh {
    height: 12px;
    background-position: -504px 0px; }
  .iti-flag.bi {
    height: 12px;
    background-position: -526px 0px; }
  .iti-flag.bj {
    height: 14px;
    background-position: -548px 0px; }
  .iti-flag.bl {
    height: 14px;
    background-position: -570px 0px; }
  .iti-flag.bm {
    height: 10px;
    background-position: -592px 0px; }
  .iti-flag.bn {
    height: 10px;
    background-position: -614px 0px; }
  .iti-flag.bo {
    height: 14px;
    background-position: -636px 0px; }
  .iti-flag.bq {
    height: 14px;
    background-position: -658px 0px; }
  .iti-flag.br {
    height: 14px;
    background-position: -680px 0px; }
  .iti-flag.bs {
    height: 10px;
    background-position: -702px 0px; }
  .iti-flag.bt {
    height: 14px;
    background-position: -724px 0px; }
  .iti-flag.bv {
    height: 15px;
    background-position: -746px 0px; }
  .iti-flag.bw {
    height: 14px;
    background-position: -768px 0px; }
  .iti-flag.by {
    height: 10px;
    background-position: -790px 0px; }
  .iti-flag.bz {
    height: 14px;
    background-position: -812px 0px; }
  .iti-flag.ca {
    height: 10px;
    background-position: -834px 0px; }
  .iti-flag.cc {
    height: 10px;
    background-position: -856px 0px; }
  .iti-flag.cd {
    height: 15px;
    background-position: -878px 0px; }
  .iti-flag.cf {
    height: 14px;
    background-position: -900px 0px; }
  .iti-flag.cg {
    height: 14px;
    background-position: -922px 0px; }
  .iti-flag.ch {
    height: 15px;
    background-position: -944px 0px; }
  .iti-flag.ci {
    height: 14px;
    background-position: -961px 0px; }
  .iti-flag.ck {
    height: 10px;
    background-position: -983px 0px; }
  .iti-flag.cl {
    height: 14px;
    background-position: -1005px 0px; }
  .iti-flag.cm {
    height: 14px;
    background-position: -1027px 0px; }
  .iti-flag.cn {
    height: 14px;
    background-position: -1049px 0px; }
  .iti-flag.co {
    height: 14px;
    background-position: -1071px 0px; }
  .iti-flag.cp {
    height: 14px;
    background-position: -1093px 0px; }
  .iti-flag.cr {
    height: 12px;
    background-position: -1115px 0px; }
  .iti-flag.cu {
    height: 10px;
    background-position: -1137px 0px; }
  .iti-flag.cv {
    height: 12px;
    background-position: -1159px 0px; }
  .iti-flag.cw {
    height: 14px;
    background-position: -1181px 0px; }
  .iti-flag.cx {
    height: 10px;
    background-position: -1203px 0px; }
  .iti-flag.cy {
    height: 13px;
    background-position: -1225px 0px; }
  .iti-flag.cz {
    height: 14px;
    background-position: -1247px 0px; }
  .iti-flag.de {
    height: 12px;
    background-position: -1269px 0px; }
  .iti-flag.dg {
    height: 10px;
    background-position: -1291px 0px; }
  .iti-flag.dj {
    height: 14px;
    background-position: -1313px 0px; }
  .iti-flag.dk {
    height: 15px;
    background-position: -1335px 0px; }
  .iti-flag.dm {
    height: 10px;
    background-position: -1357px 0px; }
  .iti-flag.do {
    height: 13px;
    background-position: -1379px 0px; }
  .iti-flag.dz {
    height: 14px;
    background-position: -1401px 0px; }
  .iti-flag.ea {
    height: 14px;
    background-position: -1423px 0px; }
  .iti-flag.ec {
    height: 14px;
    background-position: -1445px 0px; }
  .iti-flag.ee {
    height: 13px;
    background-position: -1467px 0px; }
  .iti-flag.eg {
    height: 14px;
    background-position: -1489px 0px; }
  .iti-flag.eh {
    height: 10px;
    background-position: -1511px 0px; }
  .iti-flag.er {
    height: 10px;
    background-position: -1533px 0px; }
  .iti-flag.es {
    height: 14px;
    background-position: -1555px 0px; }
  .iti-flag.et {
    height: 10px;
    background-position: -1577px 0px; }
  .iti-flag.eu {
    height: 14px;
    background-position: -1599px 0px; }
  .iti-flag.fi {
    height: 12px;
    background-position: -1621px 0px; }
  .iti-flag.fj {
    height: 10px;
    background-position: -1643px 0px; }
  .iti-flag.fk {
    height: 10px;
    background-position: -1665px 0px; }
  .iti-flag.fm {
    height: 11px;
    background-position: -1687px 0px; }
  .iti-flag.fo {
    height: 15px;
    background-position: -1709px 0px; }
  .iti-flag.fr {
    height: 14px;
    background-position: -1731px 0px; }
  .iti-flag.ga {
    height: 15px;
    background-position: -1753px 0px; }
  .iti-flag.gb {
    height: 10px;
    background-position: -1775px 0px; }
  .iti-flag.gd {
    height: 12px;
    background-position: -1797px 0px; }
  .iti-flag.ge {
    height: 14px;
    background-position: -1819px 0px; }
  .iti-flag.gf {
    height: 14px;
    background-position: -1841px 0px; }
  .iti-flag.gg {
    height: 14px;
    background-position: -1863px 0px; }
  .iti-flag.gh {
    height: 14px;
    background-position: -1885px 0px; }
  .iti-flag.gi {
    height: 10px;
    background-position: -1907px 0px; }
  .iti-flag.gl {
    height: 14px;
    background-position: -1929px 0px; }
  .iti-flag.gm {
    height: 14px;
    background-position: -1951px 0px; }
  .iti-flag.gn {
    height: 14px;
    background-position: -1973px 0px; }
  .iti-flag.gp {
    height: 14px;
    background-position: -1995px 0px; }
  .iti-flag.gq {
    height: 14px;
    background-position: -2017px 0px; }
  .iti-flag.gr {
    height: 14px;
    background-position: -2039px 0px; }
  .iti-flag.gs {
    height: 10px;
    background-position: -2061px 0px; }
  .iti-flag.gt {
    height: 13px;
    background-position: -2083px 0px; }
  .iti-flag.gu {
    height: 11px;
    background-position: -2105px 0px; }
  .iti-flag.gw {
    height: 10px;
    background-position: -2127px 0px; }
  .iti-flag.gy {
    height: 12px;
    background-position: -2149px 0px; }
  .iti-flag.hk {
    height: 14px;
    background-position: -2171px 0px; }
  .iti-flag.hm {
    height: 10px;
    background-position: -2193px 0px; }
  .iti-flag.hn {
    height: 10px;
    background-position: -2215px 0px; }
  .iti-flag.hr {
    height: 10px;
    background-position: -2237px 0px; }
  .iti-flag.ht {
    height: 12px;
    background-position: -2259px 0px; }
  .iti-flag.hu {
    height: 10px;
    background-position: -2281px 0px; }
  .iti-flag.ic {
    height: 14px;
    background-position: -2303px 0px; }
  .iti-flag.id {
    height: 14px;
    background-position: -2325px 0px; }
  .iti-flag.ie {
    height: 10px;
    background-position: -2347px 0px; }
  .iti-flag.il {
    height: 15px;
    background-position: -2369px 0px; }
  .iti-flag.im {
    height: 10px;
    background-position: -2391px 0px; }
  .iti-flag.in {
    height: 14px;
    background-position: -2413px 0px; }
  .iti-flag.io {
    height: 10px;
    background-position: -2435px 0px; }
  .iti-flag.iq {
    height: 14px;
    background-position: -2457px 0px; }
  .iti-flag.ir {
    height: 12px;
    background-position: -2479px 0px; }
  .iti-flag.is {
    height: 15px;
    background-position: -2501px 0px; }
  .iti-flag.it {
    height: 14px;
    background-position: -2523px 0px; }
  .iti-flag.je {
    height: 12px;
    background-position: -2545px 0px; }
  .iti-flag.jm {
    height: 10px;
    background-position: -2567px 0px; }
  .iti-flag.jo {
    height: 10px;
    background-position: -2589px 0px; }
  .iti-flag.jp {
    height: 14px;
    background-position: -2611px 0px; }
  .iti-flag.ke {
    height: 14px;
    background-position: -2633px 0px; }
  .iti-flag.kg {
    height: 12px;
    background-position: -2655px 0px; }
  .iti-flag.kh {
    height: 13px;
    background-position: -2677px 0px; }
  .iti-flag.ki {
    height: 10px;
    background-position: -2699px 0px; }
  .iti-flag.km {
    height: 12px;
    background-position: -2721px 0px; }
  .iti-flag.kn {
    height: 14px;
    background-position: -2743px 0px; }
  .iti-flag.kp {
    height: 10px;
    background-position: -2765px 0px; }
  .iti-flag.kr {
    height: 14px;
    background-position: -2787px 0px; }
  .iti-flag.kw {
    height: 10px;
    background-position: -2809px 0px; }
  .iti-flag.ky {
    height: 10px;
    background-position: -2831px 0px; }
  .iti-flag.kz {
    height: 10px;
    background-position: -2853px 0px; }
  .iti-flag.la {
    height: 14px;
    background-position: -2875px 0px; }
  .iti-flag.lb {
    height: 14px;
    background-position: -2897px 0px; }
  .iti-flag.lc {
    height: 10px;
    background-position: -2919px 0px; }
  .iti-flag.li {
    height: 12px;
    background-position: -2941px 0px; }
  .iti-flag.lk {
    height: 10px;
    background-position: -2963px 0px; }
  .iti-flag.lr {
    height: 11px;
    background-position: -2985px 0px; }
  .iti-flag.ls {
    height: 14px;
    background-position: -3007px 0px; }
  .iti-flag.lt {
    height: 12px;
    background-position: -3029px 0px; }
  .iti-flag.lu {
    height: 12px;
    background-position: -3051px 0px; }
  .iti-flag.lv {
    height: 10px;
    background-position: -3073px 0px; }
  .iti-flag.ly {
    height: 10px;
    background-position: -3095px 0px; }
  .iti-flag.ma {
    height: 14px;
    background-position: -3117px 0px; }
  .iti-flag.mc {
    height: 15px;
    background-position: -3139px 0px; }
  .iti-flag.md {
    height: 10px;
    background-position: -3160px 0px; }
  .iti-flag.me {
    height: 10px;
    background-position: -3182px 0px; }
  .iti-flag.mf {
    height: 14px;
    background-position: -3204px 0px; }
  .iti-flag.mg {
    height: 14px;
    background-position: -3226px 0px; }
  .iti-flag.mh {
    height: 11px;
    background-position: -3248px 0px; }
  .iti-flag.mk {
    height: 10px;
    background-position: -3270px 0px; }
  .iti-flag.ml {
    height: 14px;
    background-position: -3292px 0px; }
  .iti-flag.mm {
    height: 14px;
    background-position: -3314px 0px; }
  .iti-flag.mn {
    height: 10px;
    background-position: -3336px 0px; }
  .iti-flag.mo {
    height: 14px;
    background-position: -3358px 0px; }
  .iti-flag.mp {
    height: 10px;
    background-position: -3380px 0px; }
  .iti-flag.mq {
    height: 14px;
    background-position: -3402px 0px; }
  .iti-flag.mr {
    height: 14px;
    background-position: -3424px 0px; }
  .iti-flag.ms {
    height: 10px;
    background-position: -3446px 0px; }
  .iti-flag.mt {
    height: 14px;
    background-position: -3468px 0px; }
  .iti-flag.mu {
    height: 14px;
    background-position: -3490px 0px; }
  .iti-flag.mv {
    height: 14px;
    background-position: -3512px 0px; }
  .iti-flag.mw {
    height: 14px;
    background-position: -3534px 0px; }
  .iti-flag.mx {
    height: 12px;
    background-position: -3556px 0px; }
  .iti-flag.my {
    height: 10px;
    background-position: -3578px 0px; }
  .iti-flag.mz {
    height: 14px;
    background-position: -3600px 0px; }
  .iti-flag.na {
    height: 14px;
    background-position: -3622px 0px; }
  .iti-flag.nc {
    height: 10px;
    background-position: -3644px 0px; }
  .iti-flag.ne {
    height: 15px;
    background-position: -3666px 0px; }
  .iti-flag.nf {
    height: 10px;
    background-position: -3686px 0px; }
  .iti-flag.ng {
    height: 10px;
    background-position: -3708px 0px; }
  .iti-flag.ni {
    height: 12px;
    background-position: -3730px 0px; }
  .iti-flag.nl {
    height: 14px;
    background-position: -3752px 0px; }
  .iti-flag.no {
    height: 15px;
    background-position: -3774px 0px; }
  .iti-flag.np {
    height: 15px;
    background-position: -3796px 0px; }
  .iti-flag.nr {
    height: 10px;
    background-position: -3811px 0px; }
  .iti-flag.nu {
    height: 10px;
    background-position: -3833px 0px; }
  .iti-flag.nz {
    height: 10px;
    background-position: -3855px 0px; }
  .iti-flag.om {
    height: 10px;
    background-position: -3877px 0px; }
  .iti-flag.pa {
    height: 14px;
    background-position: -3899px 0px; }
  .iti-flag.pe {
    height: 14px;
    background-position: -3921px 0px; }
  .iti-flag.pf {
    height: 14px;
    background-position: -3943px 0px; }
  .iti-flag.pg {
    height: 15px;
    background-position: -3965px 0px; }
  .iti-flag.ph {
    height: 10px;
    background-position: -3987px 0px; }
  .iti-flag.pk {
    height: 14px;
    background-position: -4009px 0px; }
  .iti-flag.pl {
    height: 13px;
    background-position: -4031px 0px; }
  .iti-flag.pm {
    height: 14px;
    background-position: -4053px 0px; }
  .iti-flag.pn {
    height: 10px;
    background-position: -4075px 0px; }
  .iti-flag.pr {
    height: 14px;
    background-position: -4097px 0px; }
  .iti-flag.ps {
    height: 10px;
    background-position: -4119px 0px; }
  .iti-flag.pt {
    height: 14px;
    background-position: -4141px 0px; }
  .iti-flag.pw {
    height: 13px;
    background-position: -4163px 0px; }
  .iti-flag.py {
    height: 11px;
    background-position: -4185px 0px; }
  .iti-flag.qa {
    height: 8px;
    background-position: -4207px 0px; }
  .iti-flag.re {
    height: 14px;
    background-position: -4229px 0px; }
  .iti-flag.ro {
    height: 14px;
    background-position: -4251px 0px; }
  .iti-flag.rs {
    height: 14px;
    background-position: -4273px 0px; }
  .iti-flag.ru {
    height: 14px;
    background-position: -4295px 0px; }
  .iti-flag.rw {
    height: 14px;
    background-position: -4317px 0px; }
  .iti-flag.sa {
    height: 14px;
    background-position: -4339px 0px; }
  .iti-flag.sb {
    height: 10px;
    background-position: -4361px 0px; }
  .iti-flag.sc {
    height: 10px;
    background-position: -4383px 0px; }
  .iti-flag.sd {
    height: 10px;
    background-position: -4405px 0px; }
  .iti-flag.se {
    height: 13px;
    background-position: -4427px 0px; }
  .iti-flag.sg {
    height: 14px;
    background-position: -4449px 0px; }
  .iti-flag.sh {
    height: 10px;
    background-position: -4471px 0px; }
  .iti-flag.si {
    height: 10px;
    background-position: -4493px 0px; }
  .iti-flag.sj {
    height: 15px;
    background-position: -4515px 0px; }
  .iti-flag.sk {
    height: 14px;
    background-position: -4537px 0px; }
  .iti-flag.sl {
    height: 14px;
    background-position: -4559px 0px; }
  .iti-flag.sm {
    height: 15px;
    background-position: -4581px 0px; }
  .iti-flag.sn {
    height: 14px;
    background-position: -4603px 0px; }
  .iti-flag.so {
    height: 14px;
    background-position: -4625px 0px; }
  .iti-flag.sr {
    height: 14px;
    background-position: -4647px 0px; }
  .iti-flag.ss {
    height: 10px;
    background-position: -4669px 0px; }
  .iti-flag.st {
    height: 10px;
    background-position: -4691px 0px; }
  .iti-flag.sv {
    height: 12px;
    background-position: -4713px 0px; }
  .iti-flag.sx {
    height: 14px;
    background-position: -4735px 0px; }
  .iti-flag.sy {
    height: 14px;
    background-position: -4757px 0px; }
  .iti-flag.sz {
    height: 14px;
    background-position: -4779px 0px; }
  .iti-flag.ta {
    height: 10px;
    background-position: -4801px 0px; }
  .iti-flag.tc {
    height: 10px;
    background-position: -4823px 0px; }
  .iti-flag.td {
    height: 14px;
    background-position: -4845px 0px; }
  .iti-flag.tf {
    height: 14px;
    background-position: -4867px 0px; }
  .iti-flag.tg {
    height: 13px;
    background-position: -4889px 0px; }
  .iti-flag.th {
    height: 14px;
    background-position: -4911px 0px; }
  .iti-flag.tj {
    height: 10px;
    background-position: -4933px 0px; }
  .iti-flag.tk {
    height: 10px;
    background-position: -4955px 0px; }
  .iti-flag.tl {
    height: 10px;
    background-position: -4977px 0px; }
  .iti-flag.tm {
    height: 14px;
    background-position: -4999px 0px; }
  .iti-flag.tn {
    height: 14px;
    background-position: -5021px 0px; }
  .iti-flag.to {
    height: 10px;
    background-position: -5043px 0px; }
  .iti-flag.tr {
    height: 14px;
    background-position: -5065px 0px; }
  .iti-flag.tt {
    height: 12px;
    background-position: -5087px 0px; }
  .iti-flag.tv {
    height: 10px;
    background-position: -5109px 0px; }
  .iti-flag.tw {
    height: 14px;
    background-position: -5131px 0px; }
  .iti-flag.tz {
    height: 14px;
    background-position: -5153px 0px; }
  .iti-flag.ua {
    height: 14px;
    background-position: -5175px 0px; }
  .iti-flag.ug {
    height: 14px;
    background-position: -5197px 0px; }
  .iti-flag.um {
    height: 11px;
    background-position: -5219px 0px; }
  .iti-flag.us {
    height: 11px;
    background-position: -5241px 0px; }
  .iti-flag.uy {
    height: 14px;
    background-position: -5263px 0px; }
  .iti-flag.uz {
    height: 10px;
    background-position: -5285px 0px; }
  .iti-flag.va {
    height: 15px;
    background-position: -5307px 0px; }
  .iti-flag.vc {
    height: 14px;
    background-position: -5324px 0px; }
  .iti-flag.ve {
    height: 14px;
    background-position: -5346px 0px; }
  .iti-flag.vg {
    height: 10px;
    background-position: -5368px 0px; }
  .iti-flag.vi {
    height: 14px;
    background-position: -5390px 0px; }
  .iti-flag.vn {
    height: 14px;
    background-position: -5412px 0px; }
  .iti-flag.vu {
    height: 12px;
    background-position: -5434px 0px; }
  .iti-flag.wf {
    height: 14px;
    background-position: -5456px 0px; }
  .iti-flag.ws {
    height: 10px;
    background-position: -5478px 0px; }
  .iti-flag.xk {
    height: 15px;
    background-position: -5500px 0px; }
  .iti-flag.ye {
    height: 14px;
    background-position: -5522px 0px; }
  .iti-flag.yt {
    height: 14px;
    background-position: -5544px 0px; }
  .iti-flag.za {
    height: 14px;
    background-position: -5566px 0px; }
  .iti-flag.zm {
    height: 14px;
    background-position: -5588px 0px; }
  .iti-flag.zw {
    height: 10px;
    background-position: -5610px 0px; }

.iti-flag {
  width: 20px;
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("../img/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .iti-flag {
      background-image: url("../img/flags@2x.png"); } }

.iti-flag.np {
  background-color: transparent; }

  /* hide .previous finally */
 .spinner_wrap{
  display:none;
 }
 
 .wf-active .material-icons, .wf-active .headtitle, .offline .material-icons, .offline .headtitle{
	 visibility:inherit;
 }
 /* already exist in header tags*/
 /*

.spinner_wrap{
z-index:99;
-webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
box-shadow: 5px 2px 5px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 5px 2px 5px 0px rgba(0, 0, 0, 0.4);
margin-top: 55px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
background: white;
z-index: 99;

}
*/