/*Main Page*/
body{
	width:100%;
	height:100%;
	color:#FFF;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent; /* for removing the highlight */
}

.headbg{
	background: #515469;
}
/* Loading */
.int-load{
	overflow:hidden;
}

.xref-a{
	position:absolute;
	max-height:1px;
	overflow:hidden;
	line-height:1px;
}


#pageloader{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
	z-index:1000;
	background:#222;
	height:100vh;
	width:100vw;
}

#pageloader h1, #pageloader .load-txt{
  color: #FFFFFF;
  text-align: center;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  position: relative;
}

#pageloader h1:after, #pageloader .load-txt:after{
  position: absolute;
  content: "";
  -webkit-animation: Dots 2s cubic-bezier(0, .39, 1, .68) infinite;
  animation: Dots 2s cubic-bezier(0, .39, 1, .68) infinite;
}

#pageloader .preloader {
  margin: 5% auto 30px;
}

#pageloader .bookloading {
  border: 4px solid #FFFFFF;
  width: 60px;
  height: 45px;
  position: relative;
  perspective: 150px;
}

#pageloader .pageoutline {
  display: block;
  width: 30px;
  height: 45px;
  border: 4px solid #FFFFFF;
  border-left: 1px solid #ddd;
  margin: 0;
  position: absolute;
  right: -4px;
  top: -4px;
  overflow: hidden;
  background: #aaa;
  transform-style: preserve-3d;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.bookloading .pageoutline:nth-child(1) {
  -webkit-animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.6s infinite;
  animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.6s infinite;
}

.bookloading .pageoutline:nth-child(2) {
  -webkit-animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.45s infinite;
  animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.45s infinite;
}

.bookloading .pageoutline:nth-child(3) {
  -webkit-animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.2s infinite;
  animation: pageTurn 1.2s cubic-bezier(0, .39, 1, .68) 1.2s infinite;
}

/* Page turn */

@-webkit-keyframes pageTurn {
  0% {
    -webkit-transform: rotateY( 0deg);
    transform: rotateY( 0deg);
  }
  20% {
    background: #333;
  }
  40% {
    background: #555;
    -webkit-transform: rotateY( -180deg);
    transform: rotateY( -180deg);
  }
  100% {
    background:  #aaa;
    -webkit-transform: rotateY( -180deg);
    transform: rotateY( -180deg);
  }
}

@keyframes pageTurn {
  0% {
    transform: rotateY( 0deg);
  }
  20% {
    background: #333;
  }
  40% {
    background: #555;
    transform: rotateY( -180deg);
  }
  100% {
    background: #aaa;
    transform: rotateY( -180deg);
  }
}


/* Dots */

@-webkit-keyframes Dots {
  0% {
    content: "";
  }
  33% {
    content: ".";
  }
  66% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

@keyframes Dots {
  0% {
    content: "";
  }
  33% {
    content: ".";
  }
  66% {
    content: "..";
  }
  100% {
    content: "...";
  }
}
/* Loading */


 
/*Top Menu Swiper*/
.top-menu-std .swiper-slide, 
.swiper-direct .swiper-slide, 
.swiper-directM .swiper-slide,
.swiper-directA .swiper-slide,
.swiper-directE .swiper-slide,
.swiper-directP .swiper-slide,
.swiper-directU .swiper-slide,
.swiper-directV .swiper-slide,
.swiper-recent .swiper-slide,
.swiper-nav .swiper-slide,
.search-option .swiper-slide,
.search-optionM .swiper-slide,
.search-optionA .swiper-slide,
.search-optionE .swiper-slide,
.search-optionP .swiper-slide,
.search-optionU .swiper-slide,
.search-optionV .swiper-slide,
.favor-col,
.flex-center{
      text-align: center;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}


.flex-l-center, .flex-r-center,.flex-v-center{
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
       align-items: center;

}
.flex-l-center{
	text-align: left;
    -ms-flex-pack: left;
    -webkit-justify-content: left;
    justify-content: left;
}
.flex-r-center{
	text-align: right;
    -ms-flex-pack: right;
    -webkit-justify-content: right;
    justify-content: right;
}
.swiper-direct .swiper-slide,
.swiper-directM .swiper-slide,
.swiper-directA .swiper-slide,
.swiper-directE .swiper-slide,
.swiper-directP .swiper-slide,
.swiper-directU .swiper-slide,
.swiper-directV .swiper-slide,
.swiper-recent .swiper-slide{
	
	min-height:380px; 
	z-index:120;
	height:auto;
}
 
 
 	.swiper-container .basic-op{ padding-left:8px; padding-right:8px;  min-width:120px;  overflow-x:hidden; border-right: solid 2px #333; }
	.swiper-container .basic-op:last-child{border-right:none;}
	.swiper-container .basic-op .material-icons{padding-right:4px;}
	.swiper-container .basic-op span{text-decoration: underline;}
	.swiper-container .basic-op {cursor:pointer; width:auto !important; max-width:300px !important;}
	.swiper-container.metal-linear{
		background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
		-webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
		-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
			linear-gradient(180deg, hsl(0,0%,78%)  0%, 
			hsl(0,0%,90%) 47%, 
			hsl(0,0%,78%) 53%,
			hsl(0,0%,70%)100%);
		border: solid 1px #333;
		color:#333;
	}
	
/*For Member Form*/
.swiper-container-h .swiper-slide{
	min-height:800px;
}

.swiper-container swiper-main .swiper-slide{
        height:auto;
 }

/*For Member Form - Toggle tailwinds*/

/*Toggle Switch*/
.toggle__dot, .toggle__dot_v{
	left: -.25rem;
    transition: all 0.3s ease-in-out;
}
.toggle__dot {
    top: -.25rem;
}

input:checked ~ .toggle__dot {
    transform: translateX(100%);
    background-color: #48bb78;
}

input~ .toggle__line.tg-status::after {
	position:absolute;
	top:-24px;
    left:-2px;
	font-size:10px;
	color:#999;
	content:"HIDE";
	display:block;
	 transition: all 0.3s ease-in-out;
}

input:checked ~ .toggle__line.tg-status::after {
	content:"SHOW";
	color:#111;
    top:-24px;
    left:10px;

}


/*------Forms-----------*/

.dark-input,  .dark-input2{
	background: rgba(0,0,0,0.4);
	border: solid 1px #43dfdf;
}
.dark-input{
	border-radius:8px;	
}

 .dark-input2, .light-input2{
	border-radius:8px 0 0 8px;
	margin-top:4px;
}

.dark-input,  .dark-input2, .light-input2{

	padding: 12px;
	width:100%;
}	

.light-input2{
	background: #FFF;
	border: solid 1px #333;
	color:#333;
	 
}


 
/*Direct PDF Input Form*/

.modal{
	transition: opacity 0.25s ease;
}

.section_hid  {
    opacity: 0;
    display: none;
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    
}
.section_hid.active{
   	display: block;
    top:0;
 
}

.is-visible{
  	opacity:1;
}
 

body.modal-active {
	overflow-x: hidden;
	overflow-y: visible !important;
}

/* Sidebar */
.sidebar-int{
}

.sidebar-act{
	width:11rem;
}

/*Multi Select - Old Style Start*/
.multi-select, .multi-select-options{
  	width: 100%;
}
.multi-select {
	display: block;
	position: relative;
	line-height: 2em;;
	height:3em;
	border-radius: 0.5em;
	border: 1px solid #6b7280;
	margin: 0 0 50px;
	padding-top: 8px;
}
 
.multi-select:hover{
  box-shadow: 0 0 0 3px rgba(66,153,225,.5);
}

.multi-select input[type=checkbox],
.multi-select input[type=radio] {
  	display: none;
}
.multi-select label {
  	margin: 0;
  	padding: 0;
}
.multi-select .toggle-open {
	display: block;
	font-size: 1em;
	font-weight: bold;
	padding: 0 10px;
	height: 35px;
	width: auto;
	cursor: pointer;
	color:rgba(75, 85, 99,1);
}
.multi-select .toggle-open:after {
	font-family: "Font Awesome 5 Free";
	content: "\f107";
	font-size:20px;
	display: block;
	position: absolute;
	top: 8px;
	right: 10px;
	color:rgba(0,0,0,0.7);
}
.multi-select .toggle-open:hover:after {
	color:rgb(37, 99, 235);
}
.multi-select-options {
	position: absolute;
	top: 48px;
	left: 0;
	list-style: none;
	margin: 0;
	padding:0;
	overflow: auto;
	border-bottom: 1px solid #ddd;
	z-index:110;
}
#subcatset.multi-select-options {
  z-index:100;
}
.multi-select-options > li:first-child span {
  border-top: 1px solid #ddd;
}
.multi-select-options > li span {
	display: none;
	height: 45px;
	width: auto;
	padding-left:8px;
	padding-top:6px;
	/*background: #f3f3f3;*/
	background:rgb(239, 246, 255);
	border: 1px solid #ddd;
	border-top: 0;
	cursor: pointer;
	border-radius:0.5em;
}
.multi-select-options > li span:after {
	content: "\002B";
	display: inline-block;
	font-size: 1.5em;
	font-weight: bold;
	position: absolute;
	right: 10px;
	z-index: 99;
}
.multi-select-options > li span:hover {
	background: rgba(219, 234, 254);
	border: 1px solid #6b7280;
	box-shadow: 0 0 0 1px rgba(66,153,225,.5);
}
.multi-select-options > li input[type=checkbox]:checked + span {
	background: rgb(147, 197, 253);
	font-weight: bold;
	border-radius:0.5em;
}
.multi-select-options > li input[type=checkbox]:checked + span:after {
	content: "\2212";
	font-size: 1.3em;
}
#toggle-open-m:checked ~ .multi-select-options, 
#toggle-open-s:checked ~ .multi-select-options {
  	height: 200px;
}
#toggle-open-m:checked ~ .multi-select-options label,
#toggle-open-m:checked ~ .multi-select-options span,
#toggle-open-s:checked ~ .multi-select-options label,
#toggle-open-s:checked ~ .multi-select-options span
{
  	display: block;
}
#toggle-open-m:not(:checked) ~ .multi-select-options,
#toggle-open-s:not(:checked) ~ .multi-select-options{
  display: block;
  background: none;
  border: none;
  padding: 5px 0;
}
#toggle-open-m:not(:checked) ~ .multi-select-options input[type=checkbox]:checked + span,
#toggle-open-s:not(:checked) ~ .multi-select-options input[type=checkbox]:checked + span
{
	display: inline-block;
	float: left;
	margin: 0 10px 1px 0;
	padding: 6px 10px;
	width: auto;
	position: inherit;
	top: 0;
	border: 1px solid #6b7280;
}
#toggle-open-m:not(:checked) ~ .multi-select-options input[type=checkbox]:checked + span:before,
#toggle-open-s:not(:checked) ~ .multi-select-options input[type=checkbox]:checked + span:before
{
	content: '\2A09';
	padding: 0 5px 0 0;
}
#toggle-open-m:not(:checked) ~ .multi-select-options input[type=checkbox]:checked + span:after,
#toggle-open-s:not(:checked) ~ .multi-select-options input[type=checkbox]:checked + span:after
{
	content: '';
	position: inherit;
}
.multi-select-options .mcatlist, .multi-select-options .scatlist{
	white-space: nowrap;
}
.maincat_bullet > label > span{
	color:rgba(243, 244, 246,1);
	background-color:rgb(156, 163, 175);
	cursor:none;
}
.maincat_bullet > label > span:hover{
	background-color:rgb(156, 163, 175);
}
li.maincat_bullet > label > span:after {
  	content: "";
}
/*Multiselect styles end*/

 
/*Book Card*/
.card-container{
	max-width:204px;;
	display: flex;
	flex-direction: column;
	align-items: flex-start; 
	z-index:0;
 	/* background:gray;*/
    position:relative;
    transition: transform 0.5s; 
}
.card-wrapper{
	position:relative;
	width:204px;
	height:332px;
	display: inline-block;
	z-index:1;
/*	background:#f5f5f5;*/
}

.card-holder{
	width:196px;
	height:300px;
	position:absolute;
	top:28px;
	left:4px;
	background:#fff;
	border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	border-bottom-left-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
	z-index:3;
}

.card-wrapper .card-holder{
	box-shadow: 0 0 0 4px rgb(147, 197, 253);
	transition: box-shadow 300ms; 
}

.card-wrapper:hover .card-holder{ 
	box-shadow: 0 0 0 4px rgb(96, 165, 250);
}

.book-cover,  .book-cover img{
	width:176px;
	height:236px;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
    box-shadow : 0 1px 2px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.46) ;
}
.book-cover{
	margin-top:10px;
	margin-left:10px;
	z-index:5;
}
.card-wrapper .icon-read{
	opacity:0;
	position:absolute;
	font-size:20px;
	line-height:20px;
	top:160px;
	left:54px;
	background:rgba(29, 78, 216, 0.7);
	padding:10px 24px 10px 24px;
	color:#fff;
	border:2px solid white;
	border-radius:8px;
	box-shadow: 0 0 0 1px rgb(29, 78, 21);
	text-shadow: 1px 1px 1px rgb(0, 0, 0);
	cursor:pointer;
	transition: opacity 0.8s ease; 
	z-index:5;
}
.card-wrapper:hover .icon-read{
	visibility:visible;
	opacity:1;
}
.icons-block-group{
	width:176px;
	height:44px;
	display:flex;
	margin-left:14px;
	justify-content: space-between;
	/*  background:red; */
}
.icons-block-subgroup{
   display:flex;
   flex-direction: row;
   cursor:pointer;
 
}
.icons-block-set{
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
    /*color:rgba(75, 85, 99, 1);*/
	color:rgba(255, 255, 250, 1);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.icons-block-set:hover{
  color:rgba(96, 165, 250, 1);
}
.icons-block-item{
	 width:32px;
	 height:30px;
	 /*background:yellow;*/
	 z-index:1;
}
.icons-block-item .material-icons{
	  padding-top:2px;
	  font-size:28px;
	  line-height:30px;
}
.icons-block-item .favoricon {
	padding-left:2px;
}
.icons-block-item .favoricon:hover {
	color:#F87171;
}
.icons-block-text{
	font-size:14px;
	height:14px;
	line-height:14px;
    color:rgba(255, 255, 250, 1);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.book-title-text{
	position:absolute;
	width:176px;
	height:44px;
	top:284px;
	left:14px;
	color:#4B5563;
	padding:0px;
	border-top: 1px solid rgba(156, 163, 175, 0.5);
	padding-top:6px;
	font-size:14px;
	line-height:18px;
	font-weight:600;
	/*background:green;*/
	z-index:5;
	overflow-y:hidden;
 }
 .card-wrapper:hover .book-title-text{
	text-shadow:0px 0px 1px  rgb(96, 165, 250);
}
.side-icons-wrap{
	/*background:green;*/
    background:transparent;
    opacity:1;
	position:absolute;
	width:32px;
	height:236px;
	top:38px;
	left:152px;
	display:flex;
	flex-direction:column;
	/*color:#8795a1;*/
	z-index:5;
}
.side-icons-wrap .side-icons-group i, .sub-icon-top{  
	float:left;
	width:32px;
	height:32px;
	font-size:28px;
	padding:2px;
	cursor:pointer;
	/*background:yellow;*/
	margin-bottom:8px;
	z-index:3;
}
.side-icons-group{
    margin-top:10px;
}
.side-icons-group .material-icons{
	 color:#FFF;
}
.side-icons-wrap .sub-icon-top{ 
    height:26px;
    width:26px;
    font-size:24px;
    padding:1px;
    margin:1px;
    line-height:25px;
	color: #fff;
	margin-top:6px;
    z-index:6;
    background:rgba(37, 99, 235,0.5);
    border-radius:13px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255,0.7);
}
.side-icons-wrap .report:hover{ 
	color: rgb(239, 68, 68);
	font-size:30px;
	padding:1px;
}
.side-icons-main{
	position:relative;
}
.side-icons-nav{
	position:absolute;
	top:6px;;
	left:0;
}
.side-icons-nav input{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.side-icons-nav input ~ label{
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  position: relative;
  /*background:rgba(96, 165, 250,0.7);*/
  border:solid 2px rgba(255, 255, 255, 0.7);
}
.swiper-slide-active .side-icons-nav input ~ label{
	background:rgba(96, 165, 250, 1);
}
.side-icons-nav input:checked ~ label{
	background:  rgba(59, 130, 246, 0.9);
	border:solid 2px #fff;
}
.side-icons-nav input ~ label .material-icons{
	color:rgba(255, 255, 255, 0.7);
	position:absolute;
	font-size:28px;
	top:0px;
	left:0px;
}
.side-icons-nav input:checked ~ label .material-icons{
 	color:rgba(255, 255, 255, 1);
}
.side-icons-nav input ~ .side-icons-group{
  display: block;
  width: 32px;
  height: 0px;
  overflow:hidden;
  border-radius: 4px;
  position: relative;
  background:rgba(59, 130, 246, 0.7);
  box-shadow: 0 0 0 2px rgba(255, 255, 255,0);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.side-icons-nav input:checked ~ .side-icons-group{
   height: 180px;
   box-shadow: 0 0 0 2px rgba(255, 255, 255,0.7);
   padding-top:5px;
}
.side-icons-nav input:checked ~ .side-icons-group i{
   color:#fff;
   font-size:28px;
   padding-right:2px;
}
.side-icons-nav input ~ .side-icons-group i:hover{
	background:rgba(0, 0, 0, 0.5);
}
.side-icons-nav input ~ .side-icons-group i:last-child:hover{
 color:rgba(248, 113, 113,1)
}
/*  Book Card End */



 

.btn-blue-400{
	background:transparent;
    border:solid 0px transparent;
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
}
.btn-blue-400:hover{
	background:rgba(96, 165, 250,1);
}

.tsa-z8e{
  	-webkit-transition: all 0.8s ease;
   	-moz-transition: all 0.8s ease;
   	-ms-transition: all 0.8s ease;
  		transition: all 0.8s ease;
}

/* Swiper Top-Menu-Standard */

.top-menu-std .swiper-slide, .top-menu-std {
   height:48px;
   background:#111827;
   border-right:solid 1px rgba(107, 114, 128, 1);
 
}

.top-menu-std .swiper-slide{
  cursor:pointer;
 
}

.top-menu-std .swiper-slide span {
  padding-left: 8px;
 
}

.top-menu-std  .swiper-slide .main-page-active{
	border:solid 1px rgba(255,255,255,0.9)
	
}

.top-menu-std .page-active{
  background:linear-gradient(#00C4F9, #0076F0);
}


/* Swiper Nav*/
.side-nav div{
  	display:flex;
  	align-items: center;
  	height: 40px;
  	padding-left:8px;
  	margin-left:3px;
  	margin-right:4px;
  	border-radius:8px;
}

.side-nav div:hover{
	background:rgba(243, 244, 246, 0.25);
	-webkit-transition: background-color 200ms ease-in-out;
    -ms-transition: background-color 200ms ease-in-out;
    	transition: background-color 200ms ease-in-out;
}

.side-nav .nav-icon{
 	font-size:20px;
 	padding-right:8px;
 	padding-top:2px;
 }
 
 
#bullet-a, .search-result{
	color:#fff;
	text-shadow:0px 0px 2px  rgb(33, 33, 33);
	background: linear-gradient(-45deg, rgba(153, 27, 27,1), #5B21B6, #9D174D, #5B21B6);
	background-size: 400% 400%;
    background-repeat: no-repeat;

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


#search-sectionx{
 
 background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url('https://www.bookdd.com/img_general/section-bg-a3.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  background-size: 100%  100% !important;
  background-position: center top !important;
 

}

.fixed-bg, .upload-bg, .member-bg, .about-bg,.about-bg-2,.about-bg-3,.about-bg-4,.user-bg,.shop-bg,
#search-block,.custom-icon-amazon {
	background-repeat: no-repeat;
	background-position: center center;
}

#search-block{
	background: linear-gradient(rgba(229, 231, 235, 0), rgba(229, 231, 235, 0.7)),url('https://www.bookdd.com/img_general/serch-bg_1024_104_9x.jpg');
	background-attachment: local; 
	background-size: cover;
}

.fixed-bg {
	background-size: cover;
}
 
.upload-bg {
	background-size: 400px 300px;
	background-image: url(/img_general/upload.svg);
}

.member-bg {
	background-size: 300px 300px;
	background-image: url(/img_general/member-bg.svg);
}

.user-bg {
	background-size: 488px 488px;
	background-image: url(/img_general/user.svg);
}


.about-bg  {
	background-size: 300px 300px;
	background-image: url(/img_general/about-bg.svg);
}
.about-bg-2  {
	background-size: 300px 300px;
	background-image: url(/img_general/about-bg-2.svg);
}

.about-bg-3  {
	background-size: 900px 900px;
	background-image: url(/img_general/about-bg-3.svg);
}

.about-bg-4  {
	background-size: 450px 450px;
	background-image: url(/img_general/about-bg-4.svg);
}

.shop-bg  {
	background-size: 600px 600px;
	background-image: url(/img_general/shop-bg.svg);
}

.custom-icon-amazon{
	background-size: 40px 40px;
	background-image: url(/img_general/amazon.svg);
}

.bg-id03{
	background:url('https://www.bookdd.com/img_general/bdd_bg_03.jpg');
	background-attachment: local; 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


.bg-animate-1{
      
	background: #161d3c; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #161d3c 0%, #9CA3AF 40%, #FFFBEB 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#161d3c), color-stop(40%,#333), color-stop(100%,#FFFBEB)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #161d3c 0%,#9CA3AF 40%,#FFFBEB 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  #161d3c 0%,#9CA3AF 40%,#FFFBEB 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  #161d3c 0%,#9CA3AF 40%,#FFFBEB 100%); /* IE10+ */
	background: linear-gradient(135deg,  #161d3c 0%,#9CA3AF 40%,#FFFBEB 100%); /* W3C */
	background-size: 400% 400%;
	animation: gradient-a1 15s ease infinite;
}

@keyframes gradient-a1 {
	0% {
	background-position: 0% 50%;
	}
	50% {
	background-position: 100% 50%;
	}
	100% {
	background-position: 0% 50%;
	}
}


#first-slide-wrap, .bg-pdfebook-slide{
	/*background: linear-gradient(rgba(229, 231, 235, 0.7), rgba(255, 255, 255, 0)),url('https://www.bookdd.com/img_general/bdd_bg_01_1280_430.jpg');*/
	 background-image: url(https://www.bookdd.com/img_general/bg_a_r0_1024-400-8x.jpg);
}
 

#second-slide-wrap{
 /*background-image: url(https://www.bookdd.com/img_general/bdd_bg_02_1280_690_6x.jpg);
 background-image: url(https://www.bookdd.com/img_general/bdd_bg_01_1280_430.jpg); */
 background-image: url(https://www.bookdd.com/img_general/bg_b_r0_1024-614-6x.jpg);
}

.publish-bg{
	background-image: url(/img_general/bg-publish.jpg);
}

#bullet-b{
 background-image: linear-gradient(#8b9da9, #fff6e4);
 box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
 }
 
#bullet-b{
background-image: linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%), linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%);

}

/* SWIPER Part*/
.sw-recent-btn.swiper-button-prev:after,
.swiper-container-rtl .sw-recent-btn.swiper-button-next:after {
 content:'prev';
}


.sw-recent-btn.swiper-button-next:after,
.swiper-container-rtl .sw-recent-btn.swiper-button-prev:after {
 content:'next'
}


.sw-recent-btn.swiper-button-prev,
.swiper-container-rtl .sw-recent-btn.swiper-button-next {
 left:10px;
 right:auto
}

.sw-recent-btn.swiper-button-next,
.swiper-container-rtl .sw-recent-btn.swiper-button-prev {

 right:10px;
 left:auto;
 
}

.sw-recent-btn.swiper-button-next, .sw-recent-btn.swiper-button-prev {
	 position:absolute;
	 top:50%;
	 height:var(--swiper-navigation-size);
	 margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);
	 z-index:10;
	 cursor:pointer;
	 display:flex;
	 align-items:center;
	 justify-content:center;
	 
	/*Custom*/
	width:5px;
	color:#FFF;
	text-shadow:0px 3px 2px  rgb(33, 33, 33);
	padding: 0px;
	outline: none;
	
}

.sw-recent-btn.swiper-button-prev::after {
    content: 'prev';
}
.sw-recent-btn.swiper-button-next::after {
    content: 'next';
}

.sw-recent-btn.swiper-button-next::after, .sw-recent-btn.swiper-button-prev::after{

	 font-family:swiper-icons;
	 text-transform:none!important;
	 letter-spacing:0;
	 text-transform:none;
	/* font-variant:initial;
	 line-height:1
	 Custom*/
	 font-size: 24px !important;
}
 
.swiper-pagination-bullet { /* Standard css*/
	 width:8px;
	 height:8px;
	 display:inline-block;
	 border-radius:100%;
	 background:#000;
	 opacity:.2
}

.swiper-pagination-direct .swiper-pagination-bullet {
	 background:rgba(0,0,0,0);
}
.swiper-pagination-direct .swiper-pagination-bullet-active {
	 background:rgba(0,0,0,0);
}

.swiper-pagination-direct .sw-direct-bullet{
	z-index:100;
	color:#fff;
	padding:0;
	opacity:1;
	font-size:14px;
	line-height:16px;
	height:14px;
}


.swiper-pagination-direct{
	padding: 10px 16px 10px 16px;
	min-width:338px;
	background:#60A5FA;
	height:16px;
	border-radius:16px;
	box-shadow: 0 0 0 1px rgba(59, 130, 246, 1);
	
	 
}

.swiper-pagination-direct .sw-direct-bullet{
	z-index:100;
	color:rgba(255,255,255,0.6);
	opacity:1;
	min-width:33px;
	width:auto;
	
	line-height:14px;
	font-size:13px;
}

.swiper-pagination-direct .swiper-pagination-bullet-active.sw-direct-bullet{
	 
	color:rgba(255,255,255,1);
	text-shadow: 1px 1px 3px  rgb(33, 33, 33);
	opacity:1;
  
}

.zero-height{
     display:block;
	height:0px;
	visibility:hidden;
}


.icon-filter{
position:relative;
/*background:red;*/
height:48px;
width:48px;
padding-top:0px;
padding-left:0px;
margin-right:4px;
cursor:pointer;
 
}

.icon-filter:after{
position:absolute;
display:block;
top:31px;
left:0px;
font-size:12px;
content:"FILTER";
color:#fff

}

.icon-filter svg * {
  transition: .15s cubic-bezier(0.35, 0.35, 0, 1.0);
 
}
.icon-filter circle {
  will-change: transform;
  /*fill:rgba(217, 119, 6,1);*/
  fill:rgba(96, 165, 250, 1);
   
}
.icon-filter rect {
  transform-origin: 50% 50%;
}
.icon-filter:hover .fltr-crcl1 {
  transform: translatey(-8px)
}
.icon-filter:hover .fltr-crcl2 {
  transform: translatey(8px)
}
.icon-filter {
  opacity: 1;
  padding-left:16px;
  
}

/*MODAL and TAB*/

/* TAB */

.tab-wrap{
	width: 100%;
	overflow: hidden;
}

.tab-box {
	line-height: 48px;
	border-radius: 0.5em;
	/*border: 1px solid #260A98;*/
	border:solid 1px #43dfdf;
	overflow: hidden;
	margin:4px;
	background:rgba(0,0,0,0.4);
}

.tab-box:hover{
	box-shadow: 0 0 0 4px rgba(59, 130, 246,0.7);
} 

.tab-box.box-right{
	border-radius: 0px 8px 8px 0px;
	border-left: none;
}

.tab-box.box-none{
	border:none;
	
}

.tab-box.box-left{
	border-radius: 8px 0px 0px 8px;
	border-right: none;
}

.tab-label{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	cursor: pointer;
	margin-left:16px;
	
}
	 
.tab-label::after {
	content: "❯";
	width: 2em;
	line-height: 48px;
	height:48px;
	text-align: center;
	transition: all 0.35s;
	outline:none;
	border:none;
}
	  
.label-selected.tab-label::after {
	 transform: rotate(90deg);
}
	 
.tab-content {
	padding: 0 1em;
	color: #2c3e50;
	background: white;
	transition: all 0.35s;
	max-height: 0;
}


.hide-tab{
} 
	   
.show-tab{
	max-height: 100vh;
}  
	   
.tab-content.show-tab{
	visibility:visible;
	background: rgba(255, 255, 255, .5);
	transition: all 0.35s;
	border-radius: 0 0 8px 8px;
}
		
.tab-content.hide-tab{
	visibility:hidden;
	background: rgba(255, 255, 255, .5);
}
		
.tab-content ul{
	max-height:188px;
	overflow-y:scroll;
	padding:0;
	margin:0;
	background: rgba(255, 255, 255, 0);
}

.tab-content li{
	height:40px;
	line-height:40px;
	padding-left:24px;
	padding-right:4px;
	margin-top:1px;
	border-radius:4px;
	white-space:pre;
	background: rgba(255, 255, 255, 0.25);
	border: solid 1px #fff;
	color:#333;
	cursor:pointer;
}
		 
 
		 
.tab-content .selected-list-item{
	background:rgba(96, 165, 250, 0.8);
	padding-left:8px;
	border-radius:8px;
	margin-top:2px;
	margin-bottom:2px;
	font-weight:700;
	text-shadow: 1px 1px 1px rgb(0, 0, 0);
	color:#FFF
}

.tab-content .selected-list-item::before {
 	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-size:16px;
	line-height: 16px;
	height:16px;
	display:inline-block;
	margin-right:4px;
	color:rgba(167, 243, 208, 1);
}
	  

/*additional style for modal*/

.general-modal{
	 
	border:solid 1px #FFF;
	z-index:50;
	overflow-x:hidden;
	overflow-y:auto;
	border-radius: 8px;
	padding:12px;
	height:auto;
	min-height:300px;
	max-height:80vh;
}

.modal-title{
 	width:100%;	
}

#modal-title-text,#modal-share-title-text{
	border-radius: 8px 0px 0px 8px;
	padding:4px 8px 4px 8px;
	text-shadow: 0px 0px 1px #333;
	height:32px;
	font-weight:700;
	border:solid 1px rgba(255,255,255,0.5); 
}
#modal-share-title-text{
	line-height:20px;
}

.modal-top-close{
	 
	background:rgba(220, 38, 38,0.8);
	border-radius: 0px 8px 8px 0px;
	cursor:pointer;
	padding:4px;
	height:32px;
	border:solid 1px rgba(255,255,255,0.5);
	border-left:none;
}		
 
.tab-wrap{
	color:#FFF;
	padding:0;
	
	/*background:red;
	height:100%;*/ 
}

.tab-wrap .tab-header{
	padding-left:12px;
	padding-bottom:4px;
	line-height:24px;
	font-weight:700;

	
	

}

.tab-acc-close{

height:24px;
padding:3px;

margin: 2px 0px 0px 0px;
/*background:rgba(0,0,0,0.5);
border-radius:3px;*/
width:100%;

}

.tab-acc-close span{
color:#FFF;
font-size:12px;
cursor:pointer;
line-height:18px;
border-radius:3px;
/*border:solid 1px #fff;*/
padding:0px 4px 0px 4px;
background:rgba(0,0,0,0.5);
 

}

.tab-wrap3 .tab-box{ /* For Flag lang*/
    background:transparent;
    margin:0;
    border:none;
    width:60px;
   	line-height:44px;
   	position:relative;
   	z-index:100;
}

.tab-wrap3 .tab-box .flag-th, .tab-wrap3 .tab-box .flag-gb{
	color:transparent;
}

.tab-wrap3 span{
	font-weight:normal;
}
.tab-wrap3 .tab-content{
	background:none;
	padding:0;
    position:relative;
    z-index:10;
}
     
     
.tab-wrap3 .tab-label::after{
	line-height:40px;
	height:40px;
}
     
.tab-wrap3 ul li{
    width:60px;
    border:none;
    background:rgba(255,255,255,0.9);
    font-weight:normal;
}

.tab-wrap3 ul{
    overflow-y:hidden;
    overflow-x:hidden;  z-index:100;
}

.tab-wrap3 ul li span {
    color:transparent;
    text-shadow:none;
}
	

.tab-wrap4 .tab-box{ /* for Input with option*/
  margin:4px 0 0 0;
  border-radius:0px 8px 8px 0px;
  
  
  font-weight:400;
  background: #374151;
  border: solid 1px #fff;
 
}

.tab-wrap4 .tab-content{ /* for Input with option*/
  background: rgba(0,0,0,0.5);
  
}

.tab-wrap4 .tab-content li{
	color:#FFF;
}

#tab-list-searchlangA, #tab-list-searchlangB, #tab-list-searchlangM,
#tab-list-searchlangE, #tab-list-searchlangU, #tab-list-searchlangV{
	font-family: 'Sarabun', sans-serif;
}

.btn-tab-close{
 	color:#fff;
	padding: 8px 16px 8px 16px;
	background:rgba(0,0,0,0.5);
	border:solid 1px #fff;
	border-radius:8px;
	outline:none;
}

.signin-icon-group i, .signin-icon-group .material-icons{
	margin:8px;
	cursor:pointer;
	color:white;
}

.signin-icon-group .fab{

	border:solid 4px #fff;
	 
}
.signin-icon-group .fab{
	 
	border-radius:40px;
}

.signin-icon-group i{
	height:80px;
	width:80px;
	line-height:72px;
	font-size:48px;
}
.signin-icon-group .material-icons{
height:60px;
width:60px;
line-height:52px;
font-size:36px;
border:solid 4px #fff;
border-radius:8px;
background: rgb(241,53,53);
background: linear-gradient(90deg, rgba(241,53,53,1) 0%, rgba(251,111,57,1) 38%, rgba(255,148,0,1) 100%);
}

.signin-icon-group .fa-google {
  background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  position:relative;
}

.signin-icon-group .fa-google::after {
	position:absolute;
	content:"";
	height:74px;
	width:74px;
	background:rgba(255,255,255,0.5);
	left:0px;
	top:0px;
	border-radius:40px;
	z-index:-1;
}	
.share-icon-group{
	width:90px;
	height:90px;
	min-width:90px;
	min-height:90px;
	padding-top:6px;
	border-radius:8px;
	border:2px solid #f5f5f5;
	margin:0px;
}

.share-icon-group .share-btn{
	height:45px;
	border-radius:4px;
	width:45px;
	margin:0px auto; 
	padding-top:0px
}
.share-icon-group .share-btn.round{
	
	border-radius:50%;
	
}
.share-icon-group.line-btn{
	margin:0px 24px; 
	background: rgb(224 246 225);
	background: linear-gradient(90deg, rgb(26 29 28) 0%, rgb(224 246 225) 50%, rgba(26 29 28) 100%);
}

.share-icon-group.social-btn.reddit{
	background: linear-gradient(90deg, rgb(106, 2, 2) 0%, rgba(228, 236, 244, 0) 50%, rgb(106, 2, 2) 100%);
}

.share-icon-group.social-btn.fbs{
	background: linear-gradient(90deg, rgb(45, 119, 163) 0%, rgb(152, 203, 255) 50%, rgb(45, 119, 163) 100%);
}
.share-icon-group.social-btn.tws){
	background: linear-gradient(90deg, rgb(14, 41, 57) 0%, rgb(152, 203, 255) 50%, rgb(14, 41, 57) 100%);
}
.share-icon-group .fab{
	padding-top:10px
}

.share-icon-group .share-msg{
	height:24px;
	width:45px;
	border:1px solid #ccc;
	border-radius:4px;
	margin:8px auto 0px auto;
	position:relative;
}

.share-item-url{
	margin:16px 0px 8px 0px;
	font-size:16px;
	min-width:330;
	background:rgba(0,0,0,0.9);
	border: solid 1px #43dfdf;
	border-radius: 8px;
	padding: 12px;
}

.elementToFadeInAndOut {
	-webkit-animation: fadeinout 1s linear forwards;
		animation: fadeinout 1s linear forwards;
		opacity: 0;
}
	@-webkit-keyframes fadeinout {
		0% { opacity: 1; }
	}
	@-webkit-keyframes fadeinout {
		50% { opacity: 0; }
	}
	@keyframes fadeinout {
		100% { opacity: 1; }
	}
/*Main Page Swiper*/
.sw-nav-unit {
	width:100%;
	/*background:green;*/
	padding-left:36px;
	padding-right:36px;
}

.sw-nav-unit .nav-prev, .sw-nav-unit .nav-next {
	padding-left:4px;
	padding-right:4px;
	padding-top:1px;
	padding-bottom:1px;
	color:#fff;
	border-radius: 4px 4px 4px 4px;
	background:rgba(99, 102, 241,0.7);
	cursor:pointer;
	box-shadow: 0 0 4px #999;
	outline: none;
}
.swiper-nav{
	height:24px;
	line-height:20px;
	font-size:15px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:10px;
	padding-right:10px;
	background:rgba(96, 165, 250, 0.8);
	border-radius: 8px;
	margin-left: 32px;
	margin-right: 32px;
}
.swiper-nav .swiper-slide > span{
	padding-left:2px;
	padding-right:2px;
	border:solid 0px transparent;
	border-radius: 4px;
	width:50px;
	padding-bottom:1px;
	cursor:pointer;
	color:#F3F4F6;
}
			  
.swiper-nav .swiper-slide.swiper-slide-thumb-active > span{
	color:#fff;
	text-shadow: 1px 1px 3px  rgb(33, 33, 33);
	background:#3B82F6;
	padding-left:2px;
	padding-right:2px;font-size:16px;
}
					
.ripple {
	background-position: center;
	transition: background 0.8s;
}
.ripple:hover {
	background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
	background-color: rgba(79, 70, 229,0.8);
	background-size: 100%;
	transition: background 0s;
}
										  
@media screen and (max-width: 479px) {
	.sw-nav-unit {
		padding-left:80px;
		padding-right:80px;
		flex-direction:column;
	}
	.sw-nav-unit .nav-prev, .sw-nav-unit .nav-next {
		margin-top:8px;
		margin-bottom:8px;
    }
}
					
.slide-data-misc{
	position:absolute;
	top:  3px;
	left:12px;
	color:#fff;
	/*color:rgba(107, 114, 128, 1);*/
	font-size:14px;
	font-weight:300;
	text-shadow: 1px 1px 3px  #333;
}
					
.swiper-direct .swiper-slide-active .slide-data-misc,
.swiper-directM .swiper-slide-active .slide-data-misc,
.swiper-directA .swiper-slide-active .slide-data-misc,
.swiper-directE .swiper-slide-active .slide-data-misc,
.swiper-directU .swiper-slide-active .slide-data-misc,
.swiper-directV .swiper-slide-active .slide-data-misc{
	color:rgba(59, 130, 246, 1);
	text-shadow: 1px 1px 3px  #fff;
	font-size:16px;
	font-weight:400;
	top:0;
}
                
.bg-dark-metallic {
  background: linear-gradient(to bottom, #333, #666, #333);
}
.bg-gold-metallic {
  background: linear-gradient(to bottom, #5b4628 , #deb761, #5b4628);
}

.bg-y-800-80 {
  background: rgba(217, 119, 6, 0.9);
 }
 
 .bg-g-800-80 {
  background: rgba(31, 41, 55, 0.8);
 }

 .shadow-outset {
  box-shadow: 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff;
}
  .shadow-outset:hover{
 box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), inset -0.2rem -0.2rem 0.5rem #fff;
 } 
 
 .prev-next-frame{
 	 /*width:432px; */
     position:relative;
 }
 
 
 /*.section-ident{
 background:rgba(203,213,224,0.5);
 border-radius: 8px 8px 0px 0px;
 }*/
 
 .bg-g400-50{
	background:rgba(203,213,224,0.5);
 }
 
  .bg-b-40{
	background:rgba(0,0,0,0.4);
 }
 
 .br-0888{
	border-radius: 0px 8px 8px 8px; 
 }
 .br-8800{
	border-radius: 8px 8px 0px 0px; 
 }
 .br-8{
	border-radius: 8px; 
 }
 
 .mt-56p{
	margin-top: 56px;
 }
 
 .mt-72p{
	margin-top: 72px;
 }
 
 
 .round-bl-corner{

  position: relative;
  overflow: hidden;
 width:8px;
 height:8px;
 }
 
.round-bl-corner::after{
  height: 100%;
  width: 100%;
  display:block;
  content:"";
  bottom:0;
  right:0px;
  border-radius:  0 0 0 100%;
  box-shadow: 0px 0px 0px 8px rgba(203,213,224,0.5);
 }
 
 .prev-next-frame {
 position:relative;
 }
.prev-next-frame .pn-box-lb,
.prev-next-frame .pn-box-lt,
.prev-next-frame .pn-box-rt,
.prev-next-frame .pn-box-rb
{
    position: absolute;
}

.prev-next-frame .pn-box-lb{ 
	left:0; bottom:0;
}
.prev-next-frame .pn-box-lt{ 
	left:0; top:0;
}
.prev-next-frame .pn-box-rt{ 
  	right:0;  top:0;
}
.prev-next-frame .pn-box-rb{
  	right:0;  bottom:0;
}

.pn-lb_corner, .pn-lt_corner, .pn-rb_corner, .pn-rt_corner {
  	position: relative;
  	overflow: hidden;
  	width:8px;
  	height:8px;
}


.pn-box-lt.pn-lt_corner::after{
	border-radius:  100% 0 0 0;
}
.pn-box-lb.pn-lb_corner::after{
   border-radius:  0 0 0 100%;
 }
 .pn-box-rt.pn-rt_corner::after{
   border-radius:  0 100% 0 0;
 }
.pn-box-rb.pn-rb_corner::after{
   border-radius:  0 0 100% 0;
 }

 
.pn-lb_corner::after, .pn-lt_corner::after, .pn-rt_corner::after, .pn-rb_corner::after{
  height: 100%;
  width: 100%;
  display:block;
  content:"";
   box-shadow: 0px 0px 0px 8px rgba(203,213,224,0.5);
  }
 
 .upload-svg{
	 width:420px;
	 height:420px;
 }
 
 @media screen and (min-width: 520px) {
	.prev-next-frame{
 		max-width:420px; 
  	}
   	#pn-btn-group{
   		width:348px;
  	}

} 
 
@media screen and (max-width: 432px) {
	.prev-next-frame{
		max-width:300px; 
	}

}

@media screen and (max-width: 520px) {
	.upload-svg{
	 width:380px;
	 height:380px;
	}
}	
 /*ICON PAD*/

 
						 /*--Icons Pad-*/
						 .sl-menu-container{
							padding:16px
						}

						.sl-menu-wrapper,.sl-member-wrapper{
							width:100%;
							padding:32px;
						}  

						.ic-container{
							width:100px;
							height:100px;
							/*border: solid 1px green;*/
							border-radius:50px;
							position:relative;
							/*cursor:pointer;*/
							padding:0;
							z-index:0;
							outline:none;
						}
						.sl-menu-wrapper .ic-container:first-child,
						.sl-member-wrapper.ic-container:first-child{
							margin-left:auto;
						}

						.sl-menu-wrapper .ic-container:last-child,
						.sl-member-wrapper .ic-container:last-child{
						margin-right:auto;
						
						}

						.sl-block, .sl-block-upload{
							padding:16px 16px 24px 16px;
							border-radius:20px;
							outline:none;
							margin:auto;
							
						}
						.sl-block {
							background: rgba(0, 0, 0, 0.25);
						}
						
						.sl-block-upload {
							background: rgba(0, 0, 0, 0);
						}
						.sl-icon {
							display:inline-block;
							position:relative;
							height:60px;
							width:60px;
							-webkit-border-radius:10px;
							border-radius: 10px;
							margin-top:20px;
                            z-index:0;
                            cursor:pointer;
						 }
	
						.sl-icon:before,.misc-icon:before  {  
							content:attr(alt);
							white-space: nowrap;
							display:block;
							width:100px;
							position:absolute;
							bottom:-22px;
							left:-22px;
							color:#fff;
							font-size:14px;
							text-align:center;
							text-shadow: 0px 1px 1px rgb(0, 0, 0);
							z-index:1;
							outline:none;
						}
						.misc-icon:before  { 
							content:attr(data-alt);
							bottom:4px;							
						}
						
						.sl-icon:after, .misc-icon:after {  
							content:"";
							display:block;
							width:40px;
							height:40px;
							border-radius:20px;
							position:absolute;
							top:10px;
							left:10px;
					 		z-index:-1;
                            background:transparent;
                            outline:none;
						}
						.misc-icon:after {
							top: -4px;
							left: 4px;
						}
						.misc-icon{
						 display:inline-block;
							position:relative;
							height:48px;
							width:48px;
                            z-index:0;
                            cursor:pointer;	
						}
						.misc-icon .material-icons{
							text-shadow: 0px 1px 1px rgb(0, 0, 0);
						}
						
                        .sl-icon:hover::after, .sl-icon:focus::after, 
						.misc-icon:hover::after, .misc-icon:focus::after, 
						.btn-tab-close:hover, .modal-top-close:hover, .btn-pn:hover,
						.signin-icon-group i:hover,.share-icon-group:hover{
                          -webkit-animation: pulse 1s;
                                  animation: pulse 1s;
                          box-shadow: 0 0 0 60px rgba(255, 255, 255, 0);
			
                        }

                        @-webkit-keyframes pulse {
                          0% {
                            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
                          }
                        }

                        @keyframes pulse {
                          0% {
                            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
                          }
                        }
 
 
						.sl-icon.mail,.bg-mail, .top-menu-std .swiper-slide-thumb-active.thumb-ebook,
						.top-menu-std .page-active:nth-child(2){
							background: #4383fe; /* Old browsers */
							background: -moz-linear-gradient(top,  #4383fe 0%, #60dbfb 100%); /* FF3.6+ */
							background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4383fe), color-stop(100%,#60dbfb)); /* Chrome,Safari4+ */
							background: -webkit-linear-gradient(top,  #4383fe 0%,#60dbfb 100%); /* Chrome10+,Safari5.1+ */
							background: -o-linear-gradient(top,  #4383fe 0%,#60dbfb 100%); /* Opera 11.10+ */
							background: -ms-linear-gradient(top,  #4383fe 0%,#60dbfb 100%); /* IE10+ */
							background: linear-gradient(to bottom,  #4383fe 0%,#60dbfb 100%); /* W3C */
						}
						
						.sl-icon i {
						font-size:48px;
						line-height:48px;
						color:#fff;
						margin-top:8px;
						}

						
						.bg-podcast,
						.top-menu-std .page-active:first-child
						{
						 background: linear-gradient(#D46DFB, #842CC2);
						}
						
						.bg-paypal,.top-menu-std .page-active:nth-child(11)	 {
						  background: linear-gradient( to top right,#0098DA, #002A6E);
						}
						
						.bg-paypal-light{
						  background: linear-gradient( to top right, #C9E3EF, #709CDE);
						}
						.bg-shops-light{
						  background: linear-gradient(to top right, #ebd09b,#f6e7cb);
						}
						.bg-shops-dark{
						  background: linear-gradient(to top right, #dd9916,#634305);
						}
						.bg-faq{
							background-image: linear-gradient(-180deg, hsl(273, 75%, 66%),hsl(240, 73%, 65%));
						}
						/*.bg-pdf
						{
						  background: linear-gradient(-45deg, #0098DA, #002A6E);
						}*/
												
						.bg-instagram,.top-menu-std .page-active:nth-child(7),
						.swiper-slide-thumb-active.thumb-audio{
						  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(circle farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(circle farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
						}
						
						.bg-sweet{
						   background:linear-gradient(to bottom right, #eb01a5, #d13531);
						}
						.bg-app-store,
						.top-menu-std .page-active:nth-child(6),
						.swiper-slide-thumb-active.thumb-epub{
						 background: linear-gradient(#00C4F9, #0076F0);
						}
						
						.bg-pdf,
						.top-menu-std .page-active:nth-child(5),
						.swiper-slide-thumb-active.thumb-manual{
						 background: #f40f02;
						}
						
						.bg-youtube,
						.top-menu-std .page-active:nth-child(8),
						.swiper-slide-thumb-active.thumb-vdo{
						 background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(229, 45, 39), rgb(179, 18, 23)) repeat scroll 0% 0%;
						}
						
						.bg-search,
						.top-menu-std .page-active:nth-child(4),
						.top-menu-std .swiper-slide-thumb-active.thumb-education{
						 background: linear-gradient(#3a6073, #3a7bd5);
						}
						
						.bg-privacy	{ 
						background: linear-gradient(to top right, #ffd89b,#19547b);
						}
						
						.bg-shops,.top-menu-std .page-active:nth-child(10){ 
						background: linear-gradient(to top right,  #e68352,#f75d14);
						}
						
						.bg-toffy,.top-menu-std .swiper-slide-thumb-active.thumb-article,
						.top-menu-std .page-active:nth-child(3){
						background: rgba(0, 0, 0, 0) linear-gradient(to top right, rgb(254, 172, 94), rgb(199, 121, 208), rgb(75, 192, 200)) repeat scroll 0% 0%;
						}
						
						.bg-member,.top-menu-std .page-active:nth-child(9)	{
						background: linear-gradient(to top right, #f8cdda, #1d2b64);
						
						}
						
						.bg-valentine{
							background: #f4c4f3; 
							background: -webkit-linear-gradient(to right, #fc67fa, #f4c4f3);  
							background: linear-gradient(to right, #fc67fa, #f4c4f3); 
						}
						
						.bg-expresso,bg-expresso-b{
							background: #3498db; 
						}
						.bg-expresso{
							background: -webkit-linear-gradient(to right, #3498db, #2c3e50);  
							background: linear-gradient(to right, #3498db, #2c3e50);
						}
						.bg-expresso-b{
							background: -webkit-linear-gradient(to bottom, #3498db, #5e7e9d);  
							background: linear-gradient(to bottom, #3498db, #5e7e9d);
							border: solid 1px #010909;
						}
						
						.bg-mango, .bg-mango-l,.bg-mango-r{
							background: #f09819;
						}
						.bg-mango{
							background: -webkit-linear-gradient(to bottom, #f09819, #edde5d);
							background: linear-gradient(to bottom, #f09819, #edde5d);
						}
						.bg-mango-l{
							background: -webkit-linear-gradient(to left #f09819, #edde5d);
							background: linear-gradient(to left, #f09819, #edde5d);
						}
						.bg-mango-r{
							background: -webkit-linear-gradient(to right #f09819, #edde5d);
							background: linear-gradient(to right, #f09819, #edde5d);
						}
						
						.bg-banana,.bg-banana-l,.bg-banana-r{
							background: #f1f2b5; 
						}
						.bg-banana{
							background: -webkit-linear-gradient(to bottom, #f1f2b5, #135058); 
							background: linear-gradient(to bottom, #f1f2b5, #135058);
						}
						.bg-banana-l{
							background: -webkit-linear-gradient(to left, #f1f2b5, #135058); 
							background: linear-gradient(to left, #f1f2b5, #135058);
						}
						.bg-banana-r{
							background: -webkit-linear-gradient(to right, #f1f2b5, #135058); 
							background: linear-gradient(to right, #f1f2b5, #135058);
						}
						
	
						.bg-rea,
						.top-menu-std .page-active:nth-child(12)	
						{background: rgba(0, 0, 0, 0) linear-gradient( to top right, rgb(255, 224, 0), rgb(121, 159, 12)) repeat scroll 0% 0%;}
						
						@media screen and (min-width: 400px) {
					 		.sl-menu-wrapper, .sl-member-wrapper {
								-webkit-transform: scale(1.2,1.2); /* Safari & Chrome */
								-moz-transform: scale(1.2,1.2); /* Firefox */
								-ms-transform: scale(1.2,1.2); /* Internet Explorer */
								-o-transform: scale(1.2,1.2);
								transform: scale(1.2,1.2);
				 			 } 
				  			 
						}
						
						@media screen and (min-width: 768px) {
					 		.sl-menu-wrapper,.sl-member-wrapper {
								-webkit-transform: scale(1.33,1.33); /* Safari & Chrome */
								-moz-transform: scale(1.33,1.33); /* Firefox */
								-ms-transform: scale(1.33,1.33); /* Internet Explorer */
								-o-transform: scale(1.33,1.33);
								transform: scale(1.33,1.33);
								padding:48px;
				 			 } 
							 
						 
							
							 
				  			 
						}
						
			 

.block.hide{
  animation: hideblock 1s linear 0s 1 forwards;
  -webkit-animation: hideblock 1s linear 0s 1 forwards;
}

	@-webkit-keyframes hideblock{
	  0% {opacity: 1;
		  max-height: 1000px;}
	  99.9% {opacity: 0;
			 max-height: 0px;
			 padding: 0px 0px 0px 0px;}
	  100% {opacity: 0;
			max-height: 0;
			padding: 0px 0px 0px 0px ;
			animation: poof 0.1s linear 0s 1;
	  -webkit-animation: poof 0.1s linear 0s 1;}
	}

	@keyframes hideblock{
	  0% {opacity: 1;
		  max-height: 1000px;}
	  99.9% {opacity: 0;
			 max-height: 0px;
			  padding: 0px 0px 0px 0px;}
	  100% {opacity: 0;
			max-height: 0;
			padding: 0px 0px 0px 0px;
			animation: poof 0.1s linear 0s 1;
	  -webkit-animation: poof 0.1s linear 0s 1;}
	}

	@-webkit-keyframes poof{
	  from {display: block;}
	  to {display: none;}
	}

	@keyframes poof{
	  from {display: block;}
	  to {display: none;}
	}


.block.show{
	animation: showblock 1s linear 0s 1 forwards;
	-webkit-animation: showblock 1s linear 0s 1 forwards;
}

	@-webkit-keyframes showblock{
	  0% {opacity: 0;
		  max-height: 0;}
	  99.9% {opacity: 1;
			 max-height: 1000px;}
	  100% {opacity: 1;
			max-height: 1000px;
			animation: poof 0.1s linear 0s 1;
	  -webkit-animation: poof 0.1s linear 0s 1;}
	}

	@keyframes showblock{
	  0% {opacity:0;
		  max-height: 0;}
	  99.9% {opacity: 1;
			 max-height: 1000px;}
	  100% {opacity: 1;
			max-height: 1000px;
			animation: poof 0.1s linear 0s 1;
	  -webkit-animation: poof 0.1s linear 0s 1;}
	}

	@-webkit-keyframes poof{
	  from {display: flex;}
	  to {display: none;}
	}

	@keyframes poof{
	  from {display: flex;}
	  to {display: none;}
	}
	
 .ident {
	min-width:180px;
}



/* FLAGS*/

.flag-th{
background-size: 440px 330px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='flag-icon-css-th' viewBox='0 0 1280 960'%3E%3Cg fill-rule='evenodd'%3E%3Cpath fill='%23f4f5f8' d='M0 0h64v48H0z'/%3E%3Cpath fill='%232d2a4a' d='M0 16.5h64v16H0z'/%3E%3Cpath fill='%23a51931' d='M0 0h64v8.5H0zm0 40h64v8H0z'/%3E%3C/g%3E%3C/svg%3E");
}

.flag-gb{
background-size: 40px 30px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='flag-icon-css-gb' viewBox='0 0 1240 930'%3E%3Cpath fill='%23012169' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23FFF' d='M75 0l244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z'/%3E%3Cpath fill='%23C8102E' d='M424 281l216 159v40L369 281h55zm-184 20l6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z'/%3E%3Cpath fill='%23FFF' d='M241 0v480h160V0H241zM0 160v160h640V160H0z'/%3E%3Cpath fill='%23C8102E' d='M0 193v96h640v-96H0zM273 0v480h96V0h-96z'/%3E%3C/svg%3E");
}

button span, .nowrap-txt{
	white-space: nowrap;	
}

/*text*/

.text-green-glow{
	text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa
}

.abs-center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

	
.bg-manual-slide, .bg-education-slide, .bg-epub-slide, .bg-article-slide,
.bg-audio-slide, .bg-vdo-slide, .bg-upload-slide, .publish-bg{
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.bg-manual-slide{
	background-image: url("img_general/bg-manual-5.jpg");
}
.bg-education-slide{
	background-image: url("img_general/bg-education.jpg");
}


.bg-article-slide{
	 background-image: url("img_general/bg-article.jpg");
}

.bg-epub-slide{
	 background-image: url("img_general/bg-epub.jpg");
}

.bg-audio-slide{
	 background-image: url("img_general/bg-audio.jpg");
}

.bg-vdo-slide{
	/*background-image: url("https://worldandeverything.org/wp-content/uploads/2019/03/Screen-Shot-2019-03-14-at-8.47.26-AM.png");*/
	background-image: url("img_general/bg-vdo.jpg");
	
}

.bg-upload-slide{
	background-image: url("img_general/bg-upload.jpg");
}

/*Upoader Card*/
.uploader-card{
   background: linear-gradient(250.48deg, #161616 22.86%, #303030 99.18%);
   border-radius: 40px;
}
 

.uploader-card  section {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  align-items: center;
}

.up-card {
  position: relative;
  width: 300px;
  height: 450px;
  background: url(http://bookdd.com/img_general/auto_img/auto_img_01) no-repeat center center fixed;
  border-radius: 40px;
  border: 1px solid #97f2f2;
  transform-origin: right;
  transform-style: preserve-3d;
  display: none;
  transform: perspective(300px) rotateY(-30deg);
  
}

.uploader-card .up-card_name{
  position: absolute;
  top:56px;
  left: 130px;
  font-size:22px;
  line-height:28px;
  max-width:150px;
  max-height:90px;
  color:#fff;
}

.uploader-card .up-card_name span{
 word-break: break-all;
}

.uploader-card .up-card_inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10%;
}
.uploader-card .up-card_inner .up-card_photo {
  position: absolute;
  left: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin-bottom: 20px;
  background-position: center;
  list-style-type: none;
  border: rgba(224, 224, 224, 0.3) 3px solid;
  transition: 0.5s;
  animation-timing-function: ease-out;
  box-shadow: 17px 17px 17px -2px rgba(0, 0, 0, 0.25);
}
.up-card_photo {
 background-size: contain;
}
 

.uploader-card .up-card_inner {
  width: 300px;
  text-align: left;
}

 .uploader-card .up-card_about {
  position: absolute;
  top:200px; left:0px;
  width: 300px;
  height: 230px;
  font-size: 16px;
  text-align: justify;
  color: rgba(229, 229, 229, 0.5);
  font-weight: 400;
  letter-spacing: 0.15em;
}
 .uploader-card .up-card_body{
 	position:relative;
    height:100%;
    width:300px;
    padding:8px;
    color:#f5f5f5;
    
 }

.show-up-card {
  display: table;
  animation: up-card_change 2s both;
}

.show-up-card .up-card_photo {
  animation: up-card_photo_change 2s both;
}

@keyframes up-card_photo_change {
  0% {
    box-shadow: 94px 17px 32px 0 rgba(0, 0, 0, 0.25);
    left: -65%;
    transform: scale(1.2);
  }
  50% {
    box-shadow: 37px 17px 27px -2px rgba(0, 0, 0, 0.25);
    left: -10%;
    transform: scale(1);
  }
  100% {
    box-shadow: 17px 17px 17px -2px rgba(0, 0, 0, 0.25);
  }
}
@keyframes up-card_change {
  50% {
    transform: perspective(300px) rotateY(-30deg);
  }
  100% {
    transform: perspective(300px) rotateY(0deg);
  }
}
.hide-up-card{
  animation: up-card_back 1s both;
}

.hide-up-card .up-card_photo {
  animation: up-card_photo_back 1s both;
}

@keyframes up-card_back {
  0% {
    transform: perspective(300px) rotateY(0deg);
  }
  50% {
    transform: perspective(300px) rotateY(-30deg);
  }
}
@keyframes up-card_photo_back {
  50% {
    box-shadow: 17px 17px 17px -2px rgba(0, 0, 0, 0.25);
  }
  60% {
    opacity: 1;
    left: -10%;
  }
  100% {
    box-shadow: 37px 17px 27px -2px rgba(0, 0, 0, 0.25);
    opacity: 0;
    left: -40%;
  }
}
.up-social-ica, .up-social-icb {
  position:absolute;
  top:140px;
  width:32px;
  height:32px;
  border-radius:4px;
  background:#f5f5f5;
  transition: 0.25s ease;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 3px 8px 0 rgb(255 255 255 / 40%);
  cursor: pointer;
}
.uploader-card .up-hr{
 	position:absolute;
 	top:190px;
    left:8px;
  	width:284px;
  	height:2px;
    border-radius:1px;
    background:#f5f5f5;
}
.uploader-card .up-social-ica{
	 right:50px;
}
.uploader-card .up-social-icb{
	 right:10px;
}
.uploader-card .i-fab{
    padding:0px 0px 0px 8px;
    color:#4267B2;
}
.uploader-card .i-twt{
    padding:0px 0px 0px 5px;
    color:#1DA1F2;
}
.up-lastseen{
	position:absolute;
	top:170px;
	left:4px;
}
.uploader-card .up-hr{
	top:210px;
}
.up-social-ica, .up-social-icb {
	top:168px;
}
.uploader-card .up-card_about {
	top:220px;
}
.up-card_wrap {
	min-height:100px;
}
.up-info-btn{
	position: relative;
	display:inline-block;
	border-radius:4px;
	padding:4px;
	margin-bottom:8px;
	margin-top:8px;
	z-index:1;
	outline-color:#FFF;  
}
#up-info-set1 .up-info-btn,#up-info-btn1.up-info-btn{
	background:rgb(59, 130, 246); 
}
#up-info-set2 .up-info-btn,#up-info-btn2.up-info-btn{
	background:rgb(236, 72, 153);
}
#up-info-set1 .up-info-btn:hover, #up-info-btn1.up-info-btn:hover{
	background:rgb(37, 99, 235);
}
#up-info-set2 .up-info-btn:hover, #up-info-btn2.up-info-btn:hover{
	background:rgb(219, 39, 119);
}
#up-info-btn1,#up-info-btn2{
	min-width:150px;
}
#up-info-set1, #up-info-set2{
	margin-top:12px;
}
#up-info-set1 .up-info-btn.in-active, #up-info-set2 .up-info-btn.in-active{
	background:#aaa;
	cursor:none;
}
.up-info-btn::before{
	position: absolute;
	top: -20px;
	text-align:right;
	right: 0%;
	content: attr(data-count);
	display: block;
	width: 60px;
	height: 40px;
	z-index: 1;
	background: transparent;
	outline: none;
}
.bookinfo-body{
	margin-top:8px;
	background:rgba(31,41,55,0.8);
	padding:8px;
	border-radius:8px;
	border: 1px solid #fff;
	
	
}
.bookinfo-h, .bookinfo-j{
	padding:2px 8px 2px 8px;
	border-radius:4px;
	height:36px;
	width:max-content;
}
.bookinfo-h{
	border:1px solid #73d98d;
}
.bookinfo-j{
	background:linear-gradient(to bottom, rgba(191, 209, 213, 0.8),rgba(230, 227, 227, 0.2));
}
.bookinfo-d{
	padding:2px 8px 2px 8px;
	margin: 8px 8px 8px 4px
}
.bookinfo-c{
	height:36px;
	padding: 4px 0px 0px 16px;
 }
.bookinfo-m.active{
 	padding:4px 8px 4px 8px;
    margin:8px auto;
   	border:2px solid #85b9e7;
	border-radius:4px;
    background:#063a71;
}
.bookinfo-m.inactive{
	display:none;  
}