html {
  height: 100%;
  box-sizing: border-box;
}

* {
  font-family: 'Anuphan','Montserrat', 'Kanit';
}
BODY {
	overflow-x: hidden;
	overflow-y: scroll;
	--scrollbar-width: calc(100vw - 100%);
}
.top_menu_nav_link {
  color: #fff;
  font-size: 14px!important;
  font-weight: bold;
}
.bookcardimgdiv {
	width: 100%;
	background-color: #f2f2f2;
	padding: 3px;
	    text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
.bookcardimg {
	/*width: calc( 170px - 70px );*/
  width: 100px;
  height: 150px;

	max-height: 160px;
	max-width: 110px;
}
.bookcardcard {
  cursor: pointer;
	display: inline-block;
	margin: 5px;
	flex-shrink: 0;
width: 154px;

box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
-webkit-box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
-moz-box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
}
.bookcardtitle {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
  min-height: 42px;
}
.topsearchinput {
  max-width: 47vw;
}
.topsearchsubmit {
  margin-right: 0.2em;
}
.bookcardauthor {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	line-height: 14px;
  padding-bottom: 3px;
  margin-bottom: 3px!important;
}
.bookcardnormalprice {
  text-decoration:  line-through;
  font-size: 14px;
  line-height: 13px;
  Xdisplay: block;
}
.view-all-link {
	font-size: 12px;
	color: #703602;
	text-decoration: none!important;
}
.view-all-link:after {
    content: " \1433";
   }
.indexcollection-text {
	font-size: 16px;
	font-weight: bold;
}


   .hscroller::-webkit-scrollbar{
    display: none;
  }
   .hscrollercate::-webkit-scrollbar{
    display: none;
  }


.cateiconhpcard {
	cursor: pointer;
	display: inline-block;
	margin: 5px;
	flex-shrink: 0;
	width: 170px;
  border: 0px;
}
.cateiconhpcard:hover .card-body .catecardtitle {
	color: #703602!important;
}
.cateiconhptitle {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}


.cateiconhpimgdiv {
	width: 100%;
	background-color: #fff;
	padding: 3px;
	    text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;

}

.cateiconhpimgdiv:hover {
	background-color: #f2f2f2;

box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
-webkit-box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
-moz-box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
}
.cateiconhpimg {
	XXwidth: calc( 170px - 70px );
	width: 96px;
	height: 96px;
}

@media only screen and (max-device-width: 480px) {

}

.arrow-hscroll-right {
  position:absolute; top: 150px; 
  left: calc(100vw - var(--scrollbar-width) - 33px );
  z-index: 9999; background-color: rgba(255,255,255,0.9); padding: 5px; color: #703602; border-color: #703602!important;
  border-left-color: #703602;
  border-top-color: #703602;
  border-right-color: #703602;
  border-bottom-color: #703602;
  padding-right: 3px!important;
  border-right-width: 0px!important;
}

.arrow-hscroll-left {
  position:absolute; top: 150px; left: -1px; z-index: 9999; background-color: rgba(255,255,255,0.9); padding: 5px; border-color: #703602!important;
  color: #703602;
  border-left-color: #703602;
  border-top-color: #703602;
  border-right-color: #703602;
  border-bottom-color: #703602;
}

.arrow-hscroll-right-cate {
  position:absolute; top: 70px; 
  left: calc(100vw - var(--scrollbar-width) - 33px );
  z-index: 9999; background-color: rgba(255,255,255,0.9); padding: 5px; color: #703602; border-color: #703602!important;
  border-left-color: #703602;
  border-top-color: #703602;
  border-right-color: #703602;
  border-bottom-color: #703602;
  padding-right: 3px!important;
  border-right-width: 0px!important;
}

.arrow-hscroll-left-cate {
  position:absolute; top: 70px; left: -1px; z-index: 9999; background-color: rgba(255,255,255,0.9); padding: 5px; border-color: #703602!important;
  color: #703602;
  border-left-color: #703602;
  border-top-color: #703602;
  border-right-color: #703602;
  border-bottom-color: #703602;
}
.bookcollectionrow {
	padding: 0px!important; padding-left: 1em!important; position: relative;
	border: 0px #f9f9f9 solid;
	border-bottom-width: 1em;
	margin-bottom: 1em;
	padding-bottom: 1em!important;
}
.bookcollection2row {
	padding: 0px!important; 
	padding-left: 0em!important; position: relative;
	margin-bottom: 0px;
	padding-top: 1.5em!important;
	padding-bottom: 2em!important;



}
.hscrollerfadeleft {
  --leftfademask: linear-gradient(to right, 
      rgba(0,0,0, 0) 0,   rgba(0,0,0, 1) 10%    
  ) 100% 50% / 100% 100% repeat-x;
  
  -webkit-mask: var(--leftfademask); 
  mask: var(--leftfademask);
}
   .bookcollection2row::-webkit-scrollbar{
    display: none!important;
  }
.indexcollection2-text {
	color: white;
	font-size: 28px;
	font-weight: bold;
}

.view-all-link2 {
	font-size: 16px;
	color: #fff;
	text-decoration: none!important;
	font-weight: bold;
	display: block;
	padding-right: 0.7em;
}
.view-all-link2:after {
    content: " ";
   }
.footersociallink {
	text-decoration: none!important;
}
.navbar-brand {
	padding: 0px!important;
}

.navbar-toggler {
	border-color: white!important;
	color: white!important;
}
.membericon {
      vertical-align: middle;
    font-size: 20px;
    color: white!important;
}
.menumemberwrapper {
    border: 0px;
    border-radius: 6px;
    display: inline-block;
    color: white!important;
}
/********************************************/
/*
<div class='effecthead'>
  <div class='light x1'></div>
  <div class='light x2'></div>
  <div class='light x3'></div>
  <div class='light x4'></div>
  <div class='light x5'></div>
  <div class='light x6'></div>
  <div class='light x7'></div>
  <div class='light x8'></div>
  <div class='light x9'></div>
</div>
*/ 
.header{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  Xfont-family: 'Roboto', sans-serif;
  font-weight: 200;
  color: white;
  font-size: 2em;
}

@-webkit-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-moz-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-o-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-webkit-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-moz-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-o-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-webkit-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@-moz-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@-o-keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

@keyframes finalFade{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 1;}
}

/***********************************************/

.catesubmenu {
  left: 0px!important;
  xdisplay: inline-block!important;
  position: relative!important;
  top: 5px!important;
  left: 5px!important;
  margin-bottom: 5px;
  margin-right: 0.7rem!important;
}


.borderandfontcol {
  color: #703602!important; 
  border-color: #703602!important;
  border-left-color: #703602;
  border-top-color: #703602;
  border-right-color: #703602;
  border-bottom-color: #703602;
    background-color: #fff!important;

}
.borderandfontcolfill {
  color: #fff!important; 
  background-color: #703602!important;
  border-color: #703602!important;
  border-left-color: #703602;
  border-top-color: #703602;
  border-right-color: #703602;
  border-bottom-color: #703602;
}
.borderandfontcolfill:hover {
  background-color: #b04343!important;;
}

.borderandfontcolhoverstyle {}
.borderandfontcolhoverstyle:hover {
  background-color: #703602!important;;
  color: white!important;
}

.sidebarheader {
  background-color: #703602;;
  display: block;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 13px;
  padding: 0.3em;
  text-align: center;
}

.sidebarheader2 {
  background-color: #d4d4d4;;
  display: block;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 13px;
  padding: 0.3em;
  text-align: center;
}
.generalsection {
  background-color: #d4d4d4;;
  display: block;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  padding: 0.3em;
  text-align: center;
}
.ribbon-2 {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 15px; /* the top offset */
  
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #b04343;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
  color: white;
}

.searchpage-pcateicon {
  width: 100%;
}
.searchpage-pcatecard {
  width: 100%; max-width: 500px;
}
.searchpage-pcatecard-textdiv {
  text-align: left!important;
}

/**************************************/
.bookpage-coverimg {
  width: auto;max-height: 50vh;
  /*max-height: 50vh;*/
}
.bookpage-covthumbs {
  display: block;
  float: left;
  border: #703602 solid 1px;
  height: 60px;
}
.bookpage-detaildiv {

}

.dropdown-menu-kindofright {
}
@media only screen and (max-width: 992px) {
  .dropdown-menu-kindofright {
    left: 0 !important;
    right: auto !important;
  }
}

@media only screen and (min-width: 992px) {
  .dropdown-menu-kindofright {
    right: 0 !important;
    left: auto !important;
  }
}


.border-mydim {
  border: 1px solid #DDD;
}

.rating>LI {
  display: inline-block;
}
.text-maincol {
  color: #703602!important;;
}
.bg-pink {
  background-color: #d90bd5!important;
  border-color: #a303a0!important;
}


.membermenuicon {
  cursor: pointer;
  display: inline-block;
  margin: 5px;
  flex-shrink: 0;
  width: 50px;
  border: 0px;
}

.membermenuimgdiv {
  width: 100%;
  background-color: #fff;
  padding: 3px;
      text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;

}

.membermenuimgdiv:hover {
  background-color: #f2f2f2;

box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
-webkit-box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
-moz-box-shadow: 5px 5px 6px -7px rgba(0,0,0,0.46);
}

.membermenuimg {
  XXwidth: calc( 170px - 70px );
  width: 50px;
  height: 50px;
}
.membermenutxt {
  font-size: 10px;
}
.bookcollection_head {

 --mask: linear-gradient(to bottom, 
      rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%, 
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 50% / 100% 100% repeat-x;
  
  -webkit-mask: var(--mask); 
  mask: var(--mask);

}



.footest_foot {
  /*position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;*/
}

.cartnormalprice {
  text-decoration:  line-through;
  font-size: 14px;
  line-height: 13px;
  Xdisplay: block;
}
.topcartbadge {
    vertical-align:middle;
  margin-left:-15px;
  margin-top: 12px;
  font-size:10px;
}
.cartsavedmsg {
  font-size: 13px;
  color: #91c994;
}



/* common */
.ribbon,.ribbonblack {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.ribbonblack::before,
.ribbonblack::after,
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #5e1919;
}
.ribbon span ,.ribbonblack span{
  position: absolute;
  display: block;
  width: 150px;
  padding: 5px 0;
  background-color: #9B2E2E;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 13px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}
.ribbonblack span {
    background-color: #000;
}
/* top left*/
.ribbon-top-left {
  top: -5px;
  left: -5px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0px;
  left: 63px;
}
.ribbon-top-left::after {
  top: 63px;
  left: 0;
}
.ribbon-top-left span {
  left: -45px;
  top: 15px;
  transform: rotate(-45deg);
}

/*********************************/
fieldset
{
  Xbackground-color:#fff;
  Xmax-width:500px;
  Xpadding:16px; 
  border-color: #703602!important;
  border: 1px solid #703602!important;
  border-left-color: #703602!important;
  border-top-color: #703602!important;
  border-right-color: #703602!important;
  border-bottom-color: #703602!important;

}
legend
{
  margin-bottom: -15px!important;
  Xmargin-left:16px;
}

.toast-container {
  z-index: 100000!important;
}
.breadcrumb-item a {
  text-decoration: none!important;

}
.breadcrumb-item {
  font-size: 12px;
}
.breadcrumb {
  margin-left: 0.5em;
}

.hpimages-container {
  display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: normal;
						align-items: normal;
						align-content: stretch;
}
.hpimages-items {
  margin: 5px; display: block;
						flex-grow: 1;
						flex-shrink: 1;
						flex-basis: auto;
						align-self: auto;
						order: 0;
}

@media only screen and (max-width: 575px) {
  .hpimages-container {
    flex-direction: column!important;
  }
}