:root{
    --tcolor : #363636;
    --pcolor : #14688e;
    --scolor: #FF4E45;
    --lcolor: #0551B4;
    --rcolor: #C00000;
    --ycolor: #FFA500;
    --sbcolor: #F2F8FF;
}
.f500{
  font-weight: 500;
}
.f200{
  font-weight: 200;
}
.f300{
  font-weight: 300;
}
.f14{
  font-size: 14px;
}
.f16{
  font-size: 16px!important;
}
.f13{
  font-size: 13px;
}
.f12{
  font-size: 12px;
}
.ml6{
  margin-left: 6px;
}
.dline{
  text-decoration: line-through;
}
.lcr{
  color: var(--lcolor);
}
.mt12{
  margin-top: 12px;
}
@font-face {
    font-family: 'icomoon';
    src:  url('/static/fonts/icomoon.ttf?v=4') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-delete:before {
    content: "\e933";
  }
  .icon-percent:before {
    content: "\e92d";
  }
  .icon-cross:before {
    content: "\e92e";
  }
  .icon-caret-up:before {
    content: "\e92f";
  }
  .icon-caret-left:before {
    content: "\e92b";
  }
  .icon-close:before {
    content: "\e92a";
  }
  .icon-starf:before {
    content: "\e929";
  }
  .icon-email:before {
    content: "\e936";
  }
  .icon-password:before {
    content: "\e937";
  }
  .icon-warning:before {
    content: "\e920";
  }
  .icon-location:before {
    content: "\e921";
  }
  .icon-bookmark:before {
    content: "\e922";
  }
  .icon-star-half:before {
    content: "\e923";
  }
  .icon-star:before {
    content: "\e924";
  }
  .icon-age:before {
    content: "\e934";
  }
  .icon-languageb:before {
    content: "\e935";
  }
  .icon-offer:before {
    content: "\e930";
  }
  .icon-price-tag:before {
    content: "\e931";
  }
  .icon-category:before {
    content: "\e932";
  }
  .icon-filter:before {
    content: "\e92c";
  }
  .icon-calendar:before {
    content: "\e925";
  }
  .icon-bar:before {
    content: "\e926";
  }
  .icon-publisher:before {
    content: "\e927";
  }
  .icon-book:before {
    content: "\e928";
  }
  .icon-view-book:before {
    content: "\e91f";
  }
  .icon-award:before {
    content: "\e91e";
  }
  .icon-shayri:before {
    content: "\e90c";
  }
  .icon-crime:before {
    content: "\e90d";
  }
  .icon-murder-mystry:before {
    content: "\e90e";
  }
  .icon-history:before {
    content: "\e90f";
  }
  .icon-quotes:before {
    content: "\e910";
  }
  .icon-translation:before {
    content: "\e911";
  }
  .icon-motivational:before {
    content: "\e912";
  }
  .icon-travelogue:before {
    content: "\e913";
  }
  .icon-prose:before {
    content: "\e914";
  }
  .icon-gazal:before {
    content: "\e915";
  }
  .icon-non-fiction:before {
    content: "\e916";
  }
  .icon-fiction:before {
    content: "\e917";
  }
  .icon-auto-biography:before {
    content: "\e918";
  }
  .icon-biography:before {
    content: "\e919";
  }
  .icon-novel:before {
    content: "\e91a";
  }
  .icon-poetry:before {
    content: "\e91b";
  }
  .icon-personality-development:before {
    content: "\e91c";
  }
  .icon-sikhism:before {
    content: "\e91d";
  }
  .icon-search:before {
    content: "\e908";
  }
  .icon-left:before {
    content: "\e909";
  }
  .icon-right:before {
    content: "\e90a";
  }
  .icon-record:before {
    content: "\e90b";
  }
  .icon-share:before {
    content: "\e901";
  }
  .icon-add_cart:before {
    content: "\e902";
  }
  .icon-heart:before {
    content: "\e907";
  }
  .icon-love:before {
    content: "\e900";
  }
  .icon-cart:before {
    content: "\e903";
  }
  .icon-user:before {
    content: "\e904";
  }
  .icon-fav:before {
    content: "\e905";
  }
  .icon-logo:before {
    content: "\e906";
  }
  
  
button{
  font-family: "Roboto";
  cursor: pointer;
}
body{
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:"wdth" 100;
    color: #363636;
    margin: 0;
    overflow-x: hidden;
}
nav{
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav .logod span{
    font-size: 21px;
    font-weight: 500;
}
nav .logod{
    display: flex;
    opacity: 0.9;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--tcolor);
}
nav .links a{
    text-decoration: none;
    color: var(--tcolor);
    margin: 12px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;

}
nav .usersec > span{
    font-size: 20px;
    cursor: pointer;
}
nav .usersec{
    display: flex;
    align-items: center;
    gap: 27px;
    margin-right: 6px;
}
nav .searchbar{
    display: flex;
    align-items: center;
}
nav .searchbar input {
    padding: 5px;
    padding-left: 25px;
    outline: none;
    border-radius: 40px;
    border: 1px solid #878787;
}
nav .searchbar .icon-search{
    position: relative;
    left: 22px;
}
.f300{
    font-weight: 300;
}
.f600{
    font-weight: 600;
}
footer > div:nth-child(1){
  border-right: 1px solid var(--tcolor);
}
.rwptxt,.emptt{
  margin: 0;
}
footer > div{
  width: 50%;
}
footer{
  display: flex;
}
footer .rwptxt span:not(:last-child){
  border-right: 1px solid var(--tcolor);
}
footer .rwptxt span:first-child{
  padding-left: 0!important;
}
footer .rwptxt span{
  opacity: .8;
  font-weight: 300;
  font-size: 18px;
  padding: 0 13px;
}
footer .emptt{
  font-size: 40px;
  margin-bottom: 10px;
  font-weight: 600;
}
footer,footer > div{
  padding: 10px 20px;
}
footer .fupdt span {
  padding: 4px 10px;
  border-radius: 2px;
  background: var(--lcolor);
  font-size: 11px;
  cursor: pointer;
  left: 2px;
  color: #fff;
  position: relative;
  top: 7px;
}
footer .fupdt input::placeholder {
  color: var(--lcolor);
  opacity: 0.7;
}
footer .fupdt input{
  border: none;
  outline: none;
  border-bottom: 1px solid var(--lcolor);
  background: transparent;
  color: var(--lcolor);
  padding: 8px 0px;
  width: 212px;
}
footer .fupdt p{
  font-size: 13px;
  letter-spacing: 1px;
  margin-top: 36px;
  
}
.lbck{
  background: #f7f7f7;
}
#slider_cart {
  position: fixed;
  width: 400px;
  height: calc(100vh - 55px);
  top: 53px;
  z-index: 9;
  right: -400px;
  border-left: 1px solid #f1f1f1;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background: white;
}
#clscart:hover{
  color: black;
}
#clscart{
  position: absolute;
  top: 5px;
  left: 11px;
  cursor: pointer;
  opacity: .8;
  font-size: 44px;
  transform: rotate(180deg);
}
.slide-in  {
  animation: slide-in 0.5s forwards;
}
.slide-out {
  animation: slide-out 0.5s forwards;
} 
@keyframes slide-in {
  100% { right: 0px;}
} 
@keyframes slide-out {
  0% { right: 0px; }
  100% { right: -400px; }
}
.crthd{
  text-align: center;
  border-bottom: 1px solid #f1f1f1;
  margin: 0;
  padding: 15px 0;
  font-weight: 500;
  font-size: 17px;
}
#slider_cart .tpxcrt > div{
  overflow-y: auto;
  height: 90%;
}
#slider_cart .tpxcrt{
  height: 85%;
}
#slider_cart .crtttl span:nth-child(2){
  display: inline-block;
  text-align: right;
}
#slider_cart .ftrdv{
  position: absolute;
  width: 100%;
  bottom: 15px;
  background: white;
}
#slider_cart .crtttl{
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #c5c5c5;
  border-bottom: 1px solid #c5c5c5;
  padding: 8px 0;
}
.hide{
  display: none;
}
.btncrtbm{
  padding: 8px;
  display: flex;
  gap: 8px;
}
.btncrtbm button:nth-child(1){
  background: var(--rcolor);
}
.btncrtbm button:nth-child(2){
  background: var(--ycolor);
}
.btncrtbm button{
  color: white;
  width: 50%;
}
.xbtn,.btncrtbm button{
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 2px;
  font-weight: 500;
}
.disct{
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--rcolor);
  font-size: 11px;
  font-weight: 900;
  position: relative;
  top: -2px;
}
.crttitl{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 10px;
}
.sdcrpr span{margin: 3px;}
.xsmip{
  width: 30px;
  outline: none;
  border: none;
  text-align: center;
}
.xsmip::-webkit-inner-spin-button, 
.xsmip::-webkit-outer-spin-button {  
 opacity: 1;
}
.xcrtbkcnt{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-bottom: 1px solid #dddddd;
  padding: 10px 0;
}
.remcrt{
  cursor: pointer;
  color: var(--scolor);
}
.bokcnt img{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  margin-bottom:8px;
  border-radius: 4px;
}
.leftaln{
  text-align: left;
}
.btmBtns span{
  margin: 1px 0;
  display: inline-block;
}
.bokbtns button [class^="icon-"]{
  font-size: 12px;
}
.bokbtns button{
  background: white;
  border-radius: 4px;
  border: 1px solid;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 3px;
}
.bokbtns{
  margin-top: 4px;
}
.bokcnt > div:nth-child(1){
  position: relative;
  display: flex;
  justify-content: center;
}
.bokcnt .prdViw{
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #ffffffa3;
  padding: 18px 0;
  cursor: pointer;
  gap: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  visibility: hidden
}
.bokcnt .prdViw span[class^="icon-"]{
  font-size: 25px;
}
.bokcnt > div:nth-child(1):hover .prdViw{
  animation-name: viewbook;
  animation-duration: .4s;
  visibility: visible;
}
@keyframes viewbook {
  from {padding: 0px 0px;}
  to {padding: 18px 0px;}
}

.bokbtns #addcart{
  color: var(--pcolor);
}
.bokbtns #addfav{
  color: var(--scolor);
}
footer .ftlflnk{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
footer .ftlflnk > div a{
  text-decoration: none;
  color: var(--tcolor);
  font-size: 12px;
}
footer .ftlflnk > div{
  display: flex;
  margin-bottom: 28px;
  width: 32%;
  flex-direction: column;
}
footer .ftlflnk > div b{
  color: var(--lcolor);
  font-weight: 400;
  margin-bottom: 9px;
}
.ftrlog{
  margin-top: 40px;
  opacity: .8;
}