/* ===================================
1. General
==================================== */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2'), url('../fonts/Poppins-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* body {
  font-size: 1.3rem !important;
  font-weight: 300;
  line-height: 1.6em;
  color: #909294;
 background: #f8f8f8;
  scrollbar-face-color: #000000;
  scrollbar-shadow-color: #2D2C4D;
  scrollbar-highlight-color: #7D7E94;
  scrollbar-3dlight-color: #7D7E94;
  scrollbar-darkshadow-color: #2D2C4D;
  scrollbar-track-color: #7D7E94;
  scrollbar-arrow-color: #C1C1D1;
      font-family: 'Poppins',Arial, sans-serif;
  } */
  :root{
    --navbg-color:#EDEDED;
    --navbg-shadow-color:#cfcfcf;
    --link-color-active:#882929;
    --link-color:#555;
    --link-color-title:#444;
    --link-color-paragraph:#999;
    --link-color-rate:#DEA000;
    --footer-description:#848484;
    --action-media:#888;
    --search-btn-border:rgba(213, 213, 213, 0.01);
    --search-background:#FFFFFF;
    --search-color:#9D9D9D;
    --slider-color:#fff;
    --sections-description-color:#535353;
    --sections-title-color:#000;
    --input-color:#B1B1B1;
    --input-border:#B7B7B7;
    --takween-description:#222;
}

a,a:active,a:hover, a:focus {
outline:none;
  text-decoration: none
  }

/* a,*:hover,a:focus,*:hover * ,a:active {
  -webkit-transition: all .1s ease-in-out;
  -moz-transition:none!important;
  -ms-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
} */
html>/**/body a,html>/**/body *:hover,html>/**/body a:focus
,html>/**/body *:hover * ,html>/**/body a:active,
x:-moz-any-link , x:default{
  -moz-transition:none!important;
  transition:none!important;
}
@document url("https://example.com") {
  a,*:hover,a:focus,*:hover * ,a:active {
      -moz-transition:none!important;
      transition:none!important;
  } }
.clear,.evnt-item {
  clear:both;
  width: 100%;
}
.center{
  text-align: center
}
ul, ol {
  padding: 0;margin: 0;list-style:none
}
.alert-danger,.red {
  color: #dc3545!important;
}
.spinner {
  width: 100px!important;
  height: 100px!important;
  position: fixed!important;
  margin: 0 auto!important;
  right: 0;
  left: 0;
  z-index: 3;
}
img {
max-width: 100%;
}

.btn > i.fa {
color: #fff
}
i:active,i:hover, i:focus{
background:#393d46;
      color:white}
.orang-bg,
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary
{background-color: #ee2804;
border-color: #ee2804;}
.circle{
  border-radius: 50%;
}
.upper{
  text-transform: uppercase;
  padding: 0 10px;
}
.bold,.bold2{
  font-weight: bold
}
button ,.click{
  cursor: pointer
}
.mat-drawer-container {
  color: rgba(99, 97, 97, 0.87)!important
}
.mat-drawer-container .mat-drawer {
  position: fixed;
}
/* .nav .nav-item > a:hover, .nav .nav-item > a.active > a, .nav .nav-item > a:active > a:hover, .nav .nav-item > a:focus, .nav-item.show .nav-link, .nav-link.active {
  border-top: 3px solid #7b2817!important;
  color: #7b2817 !important;
  background-color: #f8f8f8;
}
.nav-link {
  color: #5c626d;
  line-height: 48px
} */
.caption li svg {
  font-size: 27px;
  margin: 5px;
}
.caption hr{
  border-top: 1px solid #fff}
.caption svg,.caption [class^="fa"]{
      stroke: #1f1e1e;
  stroke-width: 10;}
@-ms-viewport{
width: device-width;
}
.en * {
text-align: left;
}
header .logo {
  border-bottom: 1px solid #e5e3e2;
}
.short-menu .language-nav a {
color: #393E46;
font-weight: bold;
}
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e5e3e2;
}
/* @media screen and (max-width:768px) {
.main-nav {
  justify-content: center;
}
} */
.main-nav .side-menu-nav span {
margin: 10px;
}

.logo-img img{
width: 221px;
/* //width: 235px; */
height: auto !important;
}

.text-muted {
  color: #bbbaba !important;
}
/* header .dropdown, .logo .float-right .nav-link {
  border-left: 1px solid #e5e3e2;
  border-right: 1px solid #e5e3e2;} */
ul.nav.navbar-bar.float-left li:first-child {
border-right: 1px solid #e5e3e2;
padding-left: 18px;
padding-right: 40px;
margin-right: 9px;
}
li.nav-item.right-nav {
margin-left: 26px;
margin-right: -24px;
}
.serif{    
  /* font-family: serif; */
color:#383d45;
font-weight: bold}
.disc {
 list-style: disc;
}
.dott {
  padding: 0 5px;
  font-weight: bold;
  color: #E7E7E7;
  font-size: 22px !important;
  position: relative;
  top: 4px;
  display: none;
}
input:placeholder {
  color: #bdc0c4;
  opacity: 1; /* Firefox */  }
::placeholder {
  color: #bdc0c4;
  opacity: 1; /* Firefox */  }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #bdc0c4  }
::-moz-placeholder { /* Firefox 19+ */
  color: #bdc0c4  }
:-ms-input-placeholder { /* IE 10+ */
  color: #bdc0c4  }
  ::-ms-input-placeholder { /* MS edge */
      color: #bdc0c4  }
  :-moz-placeholder { /* Firefox 18- */
  color: #bdc0c4
}
label.required:after {
  content:"*";
  color:red;
  margin-left: 5px
}
.btn,.mat-mdc-button {
  font-size: 1.2rem !important;
  background: #7b2817!important;
  border-radius: 0;
  color: #fff!important;
  line-height: 2.1;
  border: 0 none;
  cursor: pointer !important;
}
a, a *{
  cursor: pointer;
}
.auto,.auto.lects{
  margin: 0 auto;
}
.input-group-prepend .btn, .input-group-append .btn {
  z-index: 1;
}
select{
cursor: pointer;
}
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected {
  background-color: none !important;
  background-image: none !important;
  color: rgb(0, 0, 0) !important;
}
.btn:focus, .btn, .btn:active, .btn:hover, .btn:visited, .btn:focus-within,input,select
,input:focus, select:focus,input:active,select:active,input:focus-within, select:focus-within,input:hover,select:hover {
  outline: none!important;
  outline-style: none!important;
  outline-color: transparent!important;
  outline-width: 0!important;
}
.table-hover tbody tr:nth-of-type(odd):hover,.table-hover tbody tr:nth-of-type(even):hover,
.table-hover tbody tr:nth-of-type(odd):active,.table-hover tbody tr:nth-of-type(even):active,
.table-hover tbody tr:nth-of-type(odd):focus,.table-hover tbody tr:nth-of-type(even):focus,
.table-hover tbody tr:nth-of-type(odd):visited,.table-hover tbody tr:nth-of-type(even):visited {
  background-color: #F8F8F8 !important;
}
tr:hover a {
  color: red!important;
}
.select-style {
  padding: 0;
  margin: 0;
  width: 120px;
  overflow: hidden;
  background: #eee url("../img/select.png") no-repeat 90% 50%;
  background-size: 10px;
}

.select-style select {
  padding: 5px 8px;
  width: 130%;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.select-style select:focus {
  outline: none;
}
.toast {
  opacity: 1!important
 }
 .caption {
  position: relative;
}

.topleft {
  position: absolute;
  top: 16px;
  left: 16px;
}
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
}
.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
.center-c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center
}
.makers h5:after,.black-txt:after,.aboutus h1:after{
  content:"";
  height: 1px;
  background-color:#7b2817;
  margin-bottom: 15px;
  position: absolute;
  margin-top: 33px;
  left: 15px;}
  .overlap h1 {
      color: #fff;
  }
  .table th, .table td {
      border-top: 0 none;
  }
.over .table-responsive table tbody{
      max-height: 100%;}
      .mat-mdc-dialog-container .fa-window-close {
          cursor: pointer;
          margin: 0 3px;
      }
/*****************header************************/
header .row {
}

header .top-header{
margin: 0;
border-bottom: 1px solid #e5e3e2;
display: flex;
justify-content: space-between;
}
.register-nav li a span{
font-size: 14px;
color: #393E46;
}
.social .nav-link {
  padding: .5rem 14px .5rem 3px;
}
header p {
  margin-bottom: 0;
}
.logo .dropdown-toggle {
  margin-right: 41px;
}
header .badge {
  font-size: 10px;
  position: absolute;
  line-height: 12px;
}
.profile {
  /* margin: 12px; */
  margin: 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.profile img:not(.AddCartBtn img) {
  border: 1px solid #9e9c9c;
}
.logo .float-right .nav-link {
  padding: 8px 24px;
}

/* header .nav-link {
  border-top: 3px solid #fafafa
} */
.log-reg {
  line-height: 3.5 !important;
  height: 100%;
  border-radius: 0 !important;
  cursor: pointer;
}

.mat-mdc-menu-content .fa-sign-out-alt {
  margin: 15px;
}
header.user-loggedIn .register-nav img{
width: 40px;
height: 40px;
object-fit: cover;
}

  /*************menu*******************/
  .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
      display: table;
      content: " ";
  }

  :before, :after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  /* .overlay,.navbar{
      display: none
  } */
  .overlay {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.4);
      z-index: 2;
  }
  .footer {
      padding-left: 38px;
      padding-right: 60px;
  }
  .footer>a {
      margin-top: 15px;
      float: left;
  }
  #sidebar-wrapper {
      z-index: 1000;
      left: 220px;
      width: 0;
      height: 100%;
      margin-left: -260px;
      overflow-y: auto;
      overflow-x: hidden;
      background: #f8f8f8;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      padding: 0
  }

  #sidebar-wrapper::-webkit-scrollbar {
    display: none;
  }

  #wrapper.toggled #sidebar-wrapper {
      width: 294px;
      left: 0;
      top: 0;
      position: absolute;
      margin-left: 0;
      min-height: 1024px;
  }

  #page-content-wrapper {
      width: 100%;
      padding-top: 70px;
  }

  #wrapper.toggled #page-content-wrapper,#wrapper.toggled header,#wrapper.toggled footer,#wrapper.toggled section {
      position: absolute;
      margin-right: -220px;
  }
  /*-------------------------------*/
  /*     Sidebar nav styles        */
  /*-------------------------------*/
  .sidebar-brand input[type="button"] {
      line-height: 4.5;
      background: none;
      border: 0 none;
      text-transform: uppercase;
  }
  .sidebar-nav {
      top: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      background: #f8f8f8;
  }

  .sidebar-nav li {
      position: relative;
      line-height: 63px;
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid #f0f0f0;
      padding-left: 36px;
  }
  .sidebar-nav svg ,.sidebar-nav .fa {
      margin-right: 15px;
  }
  .sidebar-nav .badge {
      font-size: 10px;
      position: inherit;
      line-height: 13px;
      margin-top: 26px;
      margin-right: 15px;
  }
  .sidebar-nav li a {
      color: #5d5f65;
      font-size: 17px
  }
  .sidebar-nav li:hover,.sidebar-nav li:active,.sidebar-nav li:focus{
      background: #fff
  }
  .sidebar-nav li a:hover,.sidebar-nav li a:active,.sidebar-nav li a:focus,
  .sidebar-nav li a:hover>svg,.sidebar-nav li a:active>svg,.sidebar-nav li a:focus>svg,
  .sidebar-nav li a:hover>.fa,.sidebar-nav li a:active>.fa,.sidebar-nav li a:focus>.fa{
      color:#7B2817
  }
  .sidebar-nav li:last-child {
      border-bottom: 0 none;
  }
  .sidebar-nav li:hover ul {
      display: block;
  }
  .sidebar-nav li ul {
      margin-left: -36px;
      display:none;
      background: #eee;
      cursor: pointer
  }
  .sidebar-nav li li {
      padding-left: 60px;
  }
.sidebar-nav li:hover .fa-chevron-right{
      transform: rotate(90deg);
  }
  .sidebar-nav .fa-chevron-right {
      float: right;
      margin-top: 26px;
  }
  /**************footer**************/
  footer {
      background: #fff;
  }
.dark {
  background: #393d46;
  color: #fff;
  padding: 60px 0;
}
  .dark h5 {
      padding: 16px 0 5px 0;
      font-size: 22px;
  }
  .dark .btn-dark {
      color: #c2c3c3;
      border-color: #343a40;
      font-size: 13px;
      text-align: left;
  }
  .btn-dark .fa, .dark .btn-dark {
          line-height: 3.5
      }
      .btn-dark svg {
          margin-top: 15px;
      }
.dark a {
  text-align: center;
  color: #fff !important;
  text-decoration: underline;
  line-height: 5.5;
}
.fair {
  background: #fff;
  padding-top: 50px;
}
.scrollup {
  border: 1px solid #e7e9ed;
  padding: 8px 9px 5px 9px;
  font-size: 10px;
  color: #4d5057;
}

.fair .col-lg-8, .fair .col-lg-4, .fair .col-lg-2 {
  float: left;
}
.fair p {
  margin-top: 19px;
  margin-bottom: 27px;
  word-spacing: 2px;
}

.borderd{
  margin-top: 23px;
  border-top: 1px solid #dcdada;
      padding-top: 35px;
}
.logo-footer {
  height: 64px;
  background-position: top left;
  background-size: contain;
  padding: 0 !important;
}
.fair h7 {
  font-weight: bold;
  text-transform: uppercase;
  line-height: 3.8
}
.fair .small li {
  line-height: 2.6;
}
  .fair .small li.nav-item ,.footer .social .nav-item{
      border: 1px solid #f0f0f0;
      height: 30px;
      line-height: 30px;
      margin-left: 5px;
  }
.fair .social,.footer .social {
  margin-top: 6px;
}
  .fair .social .nav-link,.footer .social .nav-link {
      padding: .5rem 10px .5rem 10px;
      line-height: 1
  }
.fair .nav a:hover, .fair .nav a.active > a, .fair .nav a:active > a:hover, .fair .nav a:focus, .fair .nav-item.show .nav-link, .fair .nav-link.active
,.footer .nav a:hover, .footer .nav a.active > a, .footer .nav a:active > a:hover, .footer .nav a:focus, .footer .nav-item.show .nav-link, .footer .nav-link.active
{
  border-top: 0 none;
  color: #ffffff;
  background-color: #393d46;
  border-color: #393d46;
  padding-top: 8px !important;
}
.cards {
  margin-left: -15px;
  margin-top: 14px
}
.latest {
  /* margin-top: 58px; */
}
  .latest li {
      display: inline;
      line-height: 3;
  }
  .latest small{
      line-height: 8;
  }
  .latest-ul{
      margin-top: -34px;
  }
  .latest .col-lg-6{
      float:left
  }
  .latest a {
      color: #909294;
      margin-right: 10px;
          margin-top: 32px;
  }
  .latest button {
      background: #7b2817;
      color: #fff;
      border-radius: 0;
  }
  .fair .latest p {
      margin: 7px 0;
  }
  footer {
      padding-bottom: 50px;
  }
  .latest-ul{
      margin-top: -34px;
  }
  /*********social links************/
  .visa {
      background-position: 0 0;
  }
.exp {
  background-position: -71px 0;
}
.payoneer {
  background-position: -141px 0;
}
.credit {
  background-position: -212px 0;
}
.bit {
  background-position: -283px 0;
}
.cards li a {
  display: inline;
  background-image: url(../img/cards.png);
  background-repeat: no-repeat;
  height: 36px;
  width: 50px;
  float: left;
  margin-right: 10px;
  margin-top: 0
}

.tooltip-inner {line-height: 10px;background:#771315}
.tooltip.top .tooltip-arrow {
  border-top-color:#771315;
}
/******************blog********************/
.blog {
  padding-bottom: 35px;
}
label.btn {
  line-height: 13px;
  margin-top: 15px;
  cursor: default!important;
}
.cover select{
display: none;
width: 87%;
height: 40px;
font-size: 16px;
padding: 0 10px
}
.cover input[type="text"]{
  width: 87%;
}

.cover input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(57, 62, 70, 0.40);
}
.cover input[type="text"]::-moz-placeholder { /* Firefox 19+ */
color: rgba(57, 62, 70, 0.40);
}
.cover input[type="text"]:-ms-input-placeholder { /* IE 10+ */
color: rgba(57, 62, 70, 0.40);
}
.cover input[type="text"]:-moz-placeholder { /* Firefox 18- */
color: rgba(57, 62, 70, 0.40);
}

.cover.advance input[type="text"]{
border: 1px solid rgb(169, 169, 169);
border-radius: 0;
margin-bottom: 11px;
}
.cover.advance select{
  display: block
  }
  .sympols {
      cursor: pointer;
      width: 24px;
      height: 17px;
      margin: 10px 5px;    }
.blog a.ng-star-inserted svg {
  margin-top: 17px;
}
.blog .card small svg, .blog .card small span {
  margin: 0 1px!important;
}
.cover{
  background-image: url(../img/blog-cvr.png);
color: #fff;
  text-align: center;
  padding-top: 75px;
}
.cover h4{
  text-transform: uppercase;
  margin-bottom: 3px
}
.cover .input-group{
  margin: 0 auto;
  background: #fff;
  padding: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  justify-content: space-between;
}
.cover p.text-muted {
  margin-bottom: 29px;
}
.cover input[type=text]{
  background: none;
  border: 0 none;
}
.input-group * {
  color: #666c75;
  line-height: 1
}

.blog .breadcrumb-item.active {
  color: #b2b5b7;
}
.blog .breadcrumb a{
  color: #fff;}
  .blog .container h5 {
      text-align: center;
      line-height: 6.1;
      color: #5a5e64;
      margin-bottom: 19px;
  }
  .blog .container .card .col-lg-12 {
      background: #fff;
      margin-bottom: 15px;
      padding: 0 0 15px 0;
  }
  .blog .container .col-lg-12 h5 {
      text-align: left;
      line-height: 5.1;
      color: #5a5e64;
      margin-bottom: 8px;
      font-weight: bold;
  }
  .blog .container h6 {
      color: #5a5e64;
      font-weight: bold;
      line-height: 2;
      text-transform: capitalize;
      cursor: pointer
  }
  .blog .container h6:active, .blog .container h6:visited, .blog .container h6:focus, .blog .container h6:focus-within {
      outline: none;
  }
  .blog .card .col-lg-12 *:not(img) {
      margin-right: 15px;
      margin-left: 15px;
  }
  .blog .wrapped {
      margin-bottom: 15px;
  }
  .blog .container a.bg-light {
      color: #828487;
      padding: 5px 0;
      width: 30px;
      text-align: center;
  }
  .blog .card .float-right * {
      margin: 0 5px!important;
  }
  .card-columns {
      margin-bottom: 15px;
  }
  .article-img-item img{
    width: 100%;
    max-height: 300px;
    height: auto;
  }
  .margin-top-10{margin-top: 10px}
  .edit {
      background: none;
      border: 1px solid #c7c8c9;
  }
.wrapped strong{
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  height: 67px;
  word-break: break-word;
  white-space: nowrap;
  float: left;
  color: #96989a!important;
}
  .wrapped strong:after{
      content:"...";
      background: #fff;
      right: 18px;
      height: 25px;
      width: 18px;
      position: absolute;
      padding-left: 5px;
      margin-top: 0;    }
   .blog .container .col-4 {
          display: flex}
          .card {
              margin-bottom: 0.75rem;
              border: 0 none;
              border-radius: 0}

/****************************************************************************************************
  article section
*****************************************************************************************************/
.article-section {
  padding: 50px 0 20px;
  position: relative;
  line-height: 1.8;
}
.article-section::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  display: block;
  width: 30%;
  height: 350px;
  background: #F3F3F3;
  z-index: -1;
}
.article-section:nth-of-type(odd)::after {
  left: auto;
  right: 0;
}
.article-section .article-cover {
  height: 280px;
  position: relative;
}
.article-section .article-content a.btn {
  padding: 12px 35px;
}
.article-section .article-content .article-title {
  color: #000;
  font-size: 23px;
  font-weight: bold;
  margin-bottom: 12px;
}

.article-text{
text-align: justify;
color: #000;
}
.article-section .article-content .article-author:not(:first-of-type)::before {
  content: "-";
  margin: 0 5px;
}
.article-section .article-content .article-time {
  margin: 0 20px;
  font-size: 19px;
}
/* article section */

/****************************************************************************************************
  article details
*****************************************************************************************************/
/* new update */
.related-article-sec button.rightRs, .related-article-sec button.leftRs {
  bottom: auto;
  top: 50%;
}
.related-article-sec .slide{
  position: relative;
  cursor: pointer;
}
.related-article-sec .slide:hover .data-bottom {
  transform: translateY(0);
}
.related-article-sec img {
  min-height: 200px;
  max-height: 200px;
  width: 100%;
  object-fit: cover;
}
.related-article-sec .data-bottom {
  background: rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  transition: all .3s;
  padding: 5px;
}
.related-article-sec .data-bottom .text-muted {
  color: #fff !important;
}
.related-article-sec .data-bottom i {
  margin: 0 5px;
  color: inherit;
}
.related-article-sec .data-bottom p{
  white-space: nowrap;
  padding: 0 2px;
  overflow: hidden;
  text-align: inherit;
}

.related-article-sec .related-article-data {
  overflow: hidden;
  padding: 0 2px;
}

.related-article-sec h6 {
  position: relative;
}

/* new update */
.related-article-sec h6, .forum h6, .comment-title h6 {
font-size: 20px;
color: #000000;
}
.leftRs:not(.categories .leftRs),
.rightRs:not(.categories .rightRs){
  background: none
}
.leftRs i,.rightRs i,.leftRs svg,.rightRs svg{
  color: #d2cdcd;
  font-size: 25px;}
.details {
  margin: 0 auto;
  padding-bottom: 100px
}
.paragraph{
  text-align: justify;
  padding-right: 0;
}
.details tak-prev-next-article {
  width: 100%;
}
.details .container button {
  padding: 7px 10px !important;
}
.details h1 {
  text-align: center;
  color: #393d46;
  /* font-family: serif; */
  font-weight: bold;
  line-height: .9;
  margin: 22px 0
}
.details .circle{
  width: 30px;
}

.bookProductImg
{
background-color: #7b2817 !important;
}

.reaction{
  text-align: center;
  margin-bottom: 30px;
  font-size: 16px;
}
.reaction a,.reaction .fa-clock {
  color: #bbbaba;
}
.forum button[type=submit]{
  margin-right: 15px;
  padding: 8px 25px;
  font-size: 17px;
}

.details .btn{
  background: #7b2817;
  color: #fff;
  border-radius: 0;
  font-size: 13px;
}
.overlap{    margin-top: 29px;
  margin-left: 49px;
  position: absolute;
  z-index: 1;
}
.reaction span {
  padding: 0 6px;
  transition: all .5s;
}
.reaction span.fa-heart.click {
color: red;
transform: scale(1.3);
}
.reaction span.fa-thumbs-up.click {
color: #2196F3;
transform: scale(1.3);
}
.reaction strong {
  color: #74767c;
  font-weight: bold;
}
.lheight-style{
line-height: 2.4;
}
.article-details-info{
display: flex;
justify-content: center;
align-items: center;
}
.article-details-info li {/*new update*/
padding: 0 9px;
}
.ql-editor li:not(.ql-direction-rtl)::before {/*new update*/
margin-left: 0 !important;
}
.div-image-caption {
max-width: 100%;
}
.div-image-caption .image-caption {
background: #EEEEEE;
font-size: 17px;
color: #696565;
padding: 8px 0 10px;
border: 1px solid rgba(105, 101, 101, 0.1);
}
.details figure {
background: #EEEEEE;
text-align: center;
padding: 10px;
border: 1px solid rgba(105, 101, 101, 0.1);
}
.details figure img {
margin: 0 !important;
padding: 0 !important;
}
.details figure figcaption {
text-align: center;
padding-top: 10px;
font-size: 17px;
color: #696565;
}
.details figure figcaption:empty {
padding: 0;
}
/* new update */
.ql-editor .ql-direction-rtl {
text-align: left;
}
.article-details-info li path{
fill:#767474;
}
.article-details-by {
position: relative;
top: -2px;
display: flex;
}
.article-details-by span:not(.dott) {
font-weight: bold;
font-size: 16px;
color: #74767c !important;
}
.article-details-by strong {
color:#C0C0C0 !important;
}

.article-details-by strong:not(:first-of-type)::before {
content: "-";
margin: 0 5px;
}

.article-details-info a {
    padding: 10px 0;
  display: inline-block;
}

.article-details-time .date{
color: #C0C0C0 !important;
padding-right: 0;
}
.article-details-time path{
fill:#C0C0C0 !important;
}
.article-details-info svg{
margin: 0 4px;
}

.overlap-img{
  margin-bottom: 37px;
  max-width: 100%;
  width: auto;
  height: auto;
}
.social-details li {
  font-weight: bold;
}
.social-details a * {
  font-size: 20px;
  color: #b0b4b8;
  margin: 0 auto;
  padding: 0 10px;
}
.social-details .nav-link {
  line-height: 1.5;
  padding: 0;
  margin: 5px 0;
}
.social-details .nav-link i {
vertical-align: middle;
}
.social-details .nav-link:hover{
border-top: initial !important;
}
.social-details .nav-link:hover *{
color: #7b2817;
}
.details .bold a,.details .bold2 a {
  text-decoration: underline;
  color: #909294;
}
.details .bold{    margin-bottom: 41px;
}
.details .disc {
  font-size: 15px;
  margin-top: 19px;
}
.details .disc li {
  line-height: 2.5;
}
.details .container .col-sm-11 {
  margin-bottom: 15px;
}
.related svg {
  font-size: 30px;
  height: 100%
}
.details .slid-cap.overlap {
  color: #fff;
  margin-top: 0;
  margin-left: 15px;
  background: rgba(23, 18, 18, 0.04);
  width: 100%;
  margin: 0 !important;
  text-align: inherit;
  padding: 0 23px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 0;
  top: 0;
}
.details .slid-cap.overlap label {
  margin-bottom: 40px;
  background: transparent !important;
  margin: 0 !important;
  text-align: inherit;
}
.details .slid-cap.overlap *{
  text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, 0px 0px 1px #000
}
.details .slid-cap.overlap label span {/*new updates*/
margin: 3px !important;
background: #7b2817;
padding: 7px 10px;
display: inline-block;
font-size: 10px;
}
body .ui-carousel .ui-carousel-viewport .ui-carousel-items .ui-carousel-item {
  border: 0 none!important}
  .ui-carousel-item .ui-grid {
      margin: 0 15px;
  }
  body .ui-carousel .ui-carousel-viewport {
      border: 0 none!important;
      background-color: transparent!important;
      color: inherit;}
      body .ui-carousel .ui-carousel-header {
          background-color: transparent!important;
          border: 0 none!important}
          body .ui-carousel .ui-carousel-button.pi {
              font-size: 30px;
          }
          body .ui-carousel .ui-carousel-page-links {
              display: none;
          }
          body .ui-carousel .ui-carousel-dropdown {
              display: none;
          }

.p2{
  line-height: 1.45;
  margin-top: 39px;
  color: #606368;
  margin-bottom: 49px;}
.quote .mark-q {
  font-size: 64px;
  font-weight: bold;
  color: #f24d2e;
  line-height: 1;
}
.quote strong {
  font-size: 20px;
  /* font-family: serif; */
  font-style: italic;
  color: #70757d;
  font-weight: bold;
  float: right;
  width: 91%;
}
.mark-q:before {
  position: absolute;
  height: 2px;
  background: #7b2817;
  width: 26px;
  margin-top: 58px;
  content: "";
}
.quote small {
  padding-left: 60px;
  float: left;
  margin-top: -17px;
}
.quote {
  margin-bottom: 45px;
  padding-top: 10px
}
.paging li {
  display: inline;
  line-height: 3.5;
  color: #818488;
  font-size: 1.3rem;
  padding: 0 10px;
}
.paging span {
  padding: 0 15px;
}
.paging {
  border: 1px solid gainsboro;
  text-align: center;
  height: 55px;
  margin: 30px 2px 30px 0;
  margin-bottom: 0;
}
  .paging li:last-child{
      float:right;
  }
  .paging li:first-child {
      float: left;
  }
h6.images  {
      margin-bottom: 36px;
      color: #4b4f57;
      font-weight: bold;
  }
  .images li {
      background: #fff;
      display: inline;
      padding: 15px 11px 5px 11px;
      float: left;
      margin: 0 2%;
      width: 21%;
  }
  .images img {
      width: 100%;
      border-bottom: 7px solid #fff;
  }
  .images p {
      margin: 0;
      color: #393d44;
  }
  .ui-carousel-item div {
      cursor: pointer;
  }
  .forum h6{
      margin-top: 40px;
      margin-bottom: 25px;
      font-weight: bold;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
  .mat-tab-label .mat-tab-label-content
  {
    font-weight: bold;
  }
  .forum textarea {
      height: 100px;
      margin-bottom: 11px;
      /* new update */
      padding: 15px;
  }
  .comment-title select {
      border: 0 none;
      color: #6e6f76;
  }

  .comment-title{
      margin: 37px 0;
      padding-right: 15px;
      padding-left: 15px;
    }

  .reply h6 {
       display: none;    }
  .thumbnail img {
      border-radius: 50%;
      width: 37px;
  }
  .thumbnail .fa,.thumbnail svg {
      font-size: 12px;
      margin-top: 25px;
      margin-left: -10px;
      position: absolute;
      color: #9e9e9e
  }
  .details .panel-body {
      font-size: 16px;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
  .details .mat-tab-body-content {
    overflow: visible;
  }
  .details .panel-heading strong {
      font-size: 17px;
      font-weight: bold;
  }
  .reacte {
      font-size: 17px;
      margin: 5px 0;
  }
  .bookTitle , .authorName
  {
    width: 150px !important;
    padding: 8px 5px !important;
  }
  .details .forum {
    padding: 0;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
  .details .mat-tab-label {
    font-size: 21px;
    opacity: 1;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
  .details .mat-tab-label-active {
    color: #7b2817;
  }
  .details .mat-ink-bar {
    background: #7b2817 !important;
  }
  .details .panel-default a {
      color: #7a7e83;
      margin: 0 !important;
  }
  .details .panel-default a::after {
    content: "-";
    margin: 0 5px;
  }
  .details .panel-default a:last-of-type::after {
    content: "";
  }
  /* quotaions */
  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
  .details .mat-tab-body-wrapper {
    overflow: visible !important;
  }
  .details .mat-mdc-tab-body {
    overflow-y: hidden !important;
  }
  .details .quote {
    margin: 20px 0 !important;
    padding: 0 30px 20px;
    border-left: 3px solid #7b2817;
    position: relative;
    width: 98%;
    margin-left: 2% !important;
  }
  .details .quote::after{
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: #fafafa;
    border: 2px solid #7b2817;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -11px;
    box-shadow: 0 0 4px #7b2817;
  }
  .details .quote::before{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #7b2817;
    border-radius: 50%;
    position: absolute;
    left: -5px;
    top: 6px;
    z-index: 2;
  }
  .details .quoteOwnerName h4 {
    font-weight: bold;
    font-size: 18px;
  }
  .details .quoteOwnerName + div {
    display: flex;
    justify-content: space-between;
  }
  .details .quoteDate {
    opacity: .6;
    font-size: 17px;
   }
   .details .qoutes-social-icons button {
    font-size: 17px;
    width: 28px;
    text-align: center;
    padding: 0 !important;
    height: 28px;
   }
   .details .quoteAddComment {
     overflow: hidden;
   }
   .details .quoteAddComment button{
    padding: 7px 10px !important;
   }
   .details .bd-callout-danger-ar, .details .bd-callout-danger {
    background: #fff;
    border-left: 0;
    padding: 20px;
    font-size: 15px;
   }
   .details .bd-callout-danger {
    border-right: 0 !important;
    border-left-color: #7b2817 !important
   }
   .details .bd-callout-danger-ar {
    border-left: 0 !important;
    border-right-color: #7b2817 !important;
   }
   .details .quoteReacte {
    margin: 10px 0;
   }
   .details .quoteReacte a.quoteReacteItem:not(:last-of-type)::after {
    content: "-";
    margin: 0 5px;
    }
    .details .quoteReacte i.fa.fa-thumbs-up {
      margin-left: 10px;
    }

  .hide-reply {
      font-size: 11px;
      line-height: 3;
  }
  .next {
      color: #6d7076;
      border: 1px solid #ededed;
      padding: 5px 15px;
      border-radius: 15px;
  }
  .thumbnail:after {
      content: "";
      height: 100%;
      width: 1px;
      background: #D1D1D1;
      position: absolute;
      margin-left: -30%;
      margin-left: -23%;
      z-index: -1
  }

  .container tak-user-comment-detail:last-child .thumbnail:after {
      display: none
  }
  .details h5 {
      line-height: 3;
      margin-top: 25px;
      color: #4b615b
  }
  .controls svg {
      color: #b5b1b1
  }
  .controls button:disabled svg {
      color: #d8d5d5
  }
  .related div{
      height:100%!important
  }
/****************************************************************************************************
  add article
*****************************************************************************************************/
.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100%;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  font-size: 20px;
  opacity: 0;
  filter: alpha(opacity=0);
  margin-top: 0px;
  width: 55px;
  margin-right: 57px;
  cursor: pointer;
  z-index: 1;
  margin: 0 !important;
  width: 100%;
  height: 100%;
}

.facebook .btn {
  margin-top: 15px;
}
.img-upload{
  border: 1px solid #e8e8e8;
  height: 195px;
  text-align: center;
  margin: 0 !important;
  position: relative;
}
.image-upload > input
{
  display: none;
}
.add-article .fileUpload label {
text-align: center;
line-height: 1.8;
font-size: 20px;
height: 100%;
margin: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.fileUpload svg, .fileUpload svg * {
  fill: #cecbcb;
}
p.help-block {
  text-transform: uppercase;
}
.fileUpload svg,.image-upload .fa
{width: 50px!important;
  font-size: 80px;
  cursor: pointer;
}
.uploaded {
width: 100%;
height: 100%;
text-align: center !important;
position: absolute;
top: 0;
left: 0;
background: #Fff;
z-index: 2;
}

.uploaded  img {
  max-width: 100%;
  max-height: 100%;
}
.uploaded .badge {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: -8px;
  margin-right: -8px;
  line-height: 1.5;
  opacity: 0.5;
  width:19px;
  height: 19px;
  cursor: pointer;
}
.ql-toolbar.ql-snow {
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.ql-toolbar.ql-snow .ql-formats {
margin: 0 !important;
}
.publish-btn {
padding: 15px 0 !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
.add-article{
      margin: 0 auto;
      padding-top: 36px;
      padding-bottom: 6%
  }
  .add-article label {
      font-weight: bold;
      color: #5f6369;
      line-height: 3;
  }
  .add-article .form-control,.prof form .btn {
      line-height: 40px;
      height: 40px !important;
  }
  .add-article textarea,.add-article select,.add-article input[type=text]
  {border-color: #e8e8e8;
      background-color: transparent;
      border-radius: 0;
      line-height: 30px
}
.add-article textarea.form-control {
  height: auto !important;
}
#editor[_ngcontent-c4],
.angular-editor[_ngcontent-c5] .angular-editor-wrapper[_ngcontent-c5] .angular-editor-textarea[_ngcontent-c5],
.ck-editor__editable,.ngx-editor[_ngcontent-c1] .ngx-wrapper[_ngcontent-c1] .ngx-editor-textarea[_ngcontent-c1] {
  min-height: 7rem!important;}

/* new update */
.select-all, .dropdown-list ul li {
text-align: inherit !important;
}
.selected-list .c-btn {
min-height: 40px;
}
.list-filter input {
padding-right: 35px !important;
}
.list-filter .c-search, .list-filter .c-clear {
top: 7px !important;
}
.ql-snow .ql-tooltip {
left: auto !important;
right: 0;
top: 0 !important;
max-width: 100%;
margin: 0 !important;
}
/********************************login************************************/

.cdk-overlay-pane {
  overflow-y: auto;
  max-height: 85% !important;
  border-radius: 5px;
}
.cdk-overlay-pane.previewArticle {
  /* new updates */
  min-width: 95% !important;
  min-height: auto !important;
  max-height: 90% !important;
}
.cdk-overlay-pane.previewArticle .btn {/* new updates */
padding: 15px 0 !important;
}
.mat-mdc-dialog-container {
  padding: 0!important}

  .modal-dialog{
      padding: 0!important;
      margin: 0!important;
      }
  .login-bx a {
      color: #bbb8b8;
  }
  .login-bx .btn{
      line-height: 3;
      margin-top: 10px;
      border: none !important;
  }
  .login-bx .modal-body {
      padding-top: 25px;
      padding-left: 30px;
  }
  .login-bx .modal-body p {
    font-size: 15px;
    margin: 13px 0px;
  }
  .login-bx .text-danger {
    display: inline-block;
  }
   .login-bx  .modal-body  h5, .login-bx  .modal-body h6 {
      color: #393d45;
      margin: 0
  }
  .bx-title {
      line-height: 3.45;
      padding-top: 15px;
  }
  .login-bx .modal-body h6.bx-title {
    line-height: inherit !important;
    font-size: 16px;
    padding: 0;
    font-weight: 600;
  }
  .login-bx .md-form label {
      font-size: 14px;
      margin: 0;
      line-height: 2.1;
      color: #5c636b;
  }
  .login-bx .md-form{
          margin-bottom: 0 !important;
          padding: 0 5px;
          border:1px solid #eee;
          background: white;
          border-radius: 3px;
          box-shadow: 1px 1px 1px 0 #c8c8c8 inset;
          margin-top: -5px;
  }
  .login-bx .md-form:hover, .login-bx .md-form:active, .login-bx .md-form:focus, .login-bx .md-form:visited {
      background: #fff;
      border-left: 2px solid red;
      box-shadow: 0 0 2px 0 #8a8a8a inset;
  }
  .login-bx .md-form input,.login-bx .md-form select{
  background:none;
  font-size: 14px;
  box-shadow: none;
  border: 1px solid transparent;
  min-height: 35px;
  }
  .login-bx .md-form input:focus,.login-bx .md-form select:focus {
    border-color: #80bdff;
  }
  .valid {
      height: 20px;
  }
  .valid .red {
       display: none;
  }
  .costum {
    display: block;
    position: relative;
    padding-left: 35px;
    /* margin-bottom: 12px; */
    cursor: pointer;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
    font-size: 11px;
  }
  /* Hide the browser's default checkbox */
  .costum input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 3px;
    left: 0;
  height: 17px;
      width: 17px;
      background-color: #f7f7f7;
      border: 1px solid #dfdfdf;
      }

  /* On mouse-over, add a grey background color */
  .costum:hover input ~ .checkmark {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .costum input:checked ~ .checkmark {
    background-color: #7b2817;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .costum input:checked ~ .checkmark:after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .costum .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .lined  span{
  background:#f8f8f8;
  padding: 7px;
      color: #696868;
  }
  .lined:after {
      content: "";
      position: absolute;
      width: 85%;
      height: 1px;
      background: #e5e5e5;
      margin-top: 10px;
  }
  .social-bx a{
  color:white !important;
  }
  .social-bx a:hover {
    color: white;
  }
  .social-bx {
      line-height: 2;
      margin-top: 12px;
      margin-bottom: 12px;
      float: left;
      width: 100%}
      .social-bx li:hover {
      box-shadow: 0px 3px 8px 0px #c7c6c699;
  }
      .social-bx li {
      display: inline;
    width: 32%;
    float: left;
    padding: 9px;
    margin-bottom: 5px;
    text-align: center;
    border-radius: 3px;
    margin-right: 3px;
  }
     .social-bx .G {
      background: #de4b39; 
  }
     .G:hover {
      background: #99331e;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 45%), 0 3px 7px 0 rgb(0 0 0 / 38%); 
      transition: .1s cubic-bezier(0.4,0,1,1); 
  }
     .social-bx .T {
      background: #5bc0de;
      
  }
     .T:hover {
      background: #56b1cc; 
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 45%), 0 3px 7px 0 rgb(0 0 0 / 38%);
      transition: .1s cubic-bezier(0.4,0,1,1);  
  }
     .social-bx .fb {
      background: #3c5899;
  }
     .social-bx .fb:hover {
      background: #254182;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 45%), 0 3px 7px 0 rgb(0 0 0 / 38%);
      transition: .1s cubic-bezier(0.4,0,1,1); 
  }
     .social-bx .fab  {
     font-size: 18px;
  }

  .btn-info:hover
  {
    border-color: #a73722 !important;
    transition: .1s cubic-bezier(0.4,0,1,1);
    background: #a73722 !important;
  }
  .login-bx .modal-body.regi {
      padding-top: 25px;
      padding-left: 76px;
  }
  .login-bx .costum {
      padding-left: 20px;
      font-size:14px;
  }
  .regi .lined {
      line-height: 2.5    }
  .regi .lined:after {
          margin-top: 17px;
      }
  h6.margin-23{    margin-bottom: 15px!important}
  .login-bx ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #424344;
  }
  .login-bx ::-moz-placeholder { /* Firefox 19+ */
    color: #424344;
  }
  .login-bx :-ms-input-placeholder { /* IE 10+ */
    color: #424344;
  }
  .login-bx :-moz-placeholder { /* Firefox 18- */
    color: #424344;
  }
  .login-bx .fileUpload {
      position: relative;
      float:left;
      margin-left: 25%
  }
  .login-bx .fileUpload input.upload {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0;
      font-size: 20px;
      opacity: 0;
      filter: alpha(opacity=0);
  line-height: 2.5;
      cursor: pointer;
      z-index: 1;
  }
  .login-bx .fileUpload label {
      line-height: 4.5;
  }
  .login-bx .fileUpload svg,.login-bx .fileUpload svg * {
      fill: #cecbcb;
  }

  .login-bx .fileUpload svg,.login-bx .image-upload .fa
  {width: 20px!important;
      font-size: 15px;
      margin-top: -23px;
      float: left;
      cursor: pointer;
      margin-top: -13px  }

  .login-bx .image-upload input
  {
      display: none;
  }
  .login-bx .help-block {
      line-height: 3;}
      .login-bx .img-upload {
      text-align: left;
      margin-bottom: 0;
      border: 0 none;
  height: 55px;
  }
  .black, .black a{
        color: #495057;
      font-size: 11px}
  .login-bx .fileUpload input.upload {
      margin-top: -11px;
      width: 135px;}

/****************************************************************************************************
  stepper
*****************************************************************************************************/
  .steps-content {
    position: relative;
    color: #393E46;
  }
  .steps-content:not(.admin-fix-categories) {
    max-width: 600px !important;
  }
  .steps-content .step-info{
    position: absolute;
    right: 0;
    top: 20px;
    width: 100%;
    padding: 0 35px;
  }
  .steps-content .step-info.next-button{
    top: unset !important;
    bottom: -18px !important;
  }
  .steps-content .step-info .back-btn {
    background: none;
    border: 0;
    font-size: 15px;
  }
  .steps-content .step-info .back-btn i {
    margin: 0 3px;
  }
  .steps-content .step-container {
    margin-top: 20px;
  }
  .steps-content .step-container .red-color,
  .steps-content  .red-color {
    color: #F14D2E !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  .steps-content .genres input[type=checkbox] {
    display: none;
  }
  .steps-content .genres input[type=checkbox]:checked + .item {
    outline-color: #7B2817;
    border-color: transparent;
  }
  .steps-content .genres .item {
    text-align: center;
    border: 1px solid #E4E4E4;
    padding: 20px;
    transition: all .5s;
    margin-bottom: 30px;
    cursor: pointer;
    outline: 3px solid transparent;
    position: relative;
  }
  .steps-content .genres .item label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
  }
  .steps-content .genres .item i {
    font-size: 30px;
    color: #5C636E;
  }

  .steps-content .genres .item .category-name {
    text-align: center;
    margin: 10px 0 0;
    font-weight: 500;
  }
  .steps-content .favorite-books input[type=checkbox] {
    display: none;
  }
  .steps-content .favorite-books input[type=checkbox]:checked + .book-container {
    background: #7b2817;
    color: #fff;
  }
  .steps-content .favorite-books .book-container {
    padding: 5px;
    background: #ebebeb;
    width: 100px;
    margin: 0 5px 20px;
    position: relative;
    transition: all .5s;
    height: 200px;
  }
  .steps-content.steper .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{
    display: inline-flex !important;
    float: left !important;
  }
  .steps-content.steper .mat-mdc-paginator-container .mat-mdc-paginator-page-size{
    display: none !important;
  }
  .steps-content.steper .favorite-books .book-container {
    height: 260px !important;
    width: 135px !important;
  }
  .steps-content .favorite-books .book-container label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
  }
  .steps-content .favorite-books.favorite-authors .author-name {
    font-size: 13px;
}
  .steps-content .favorite-books .book-container .book-cover {
    height: 120px;
  }
  .steps-content.steper .favorite-books .book-container .book-cover {
    height: 180px !important;
    width: 122.5px !important;
  }
  .steps-content .step4 input[type=checkbox], .steps-content .step4 input[type=radio] {
    display: none;
  }
  .steps-content .step4 input[type=checkbox]:checked + .custom-check-box i, .steps-content .step4 input[type=radio]:checked + .custom-check-box i {
    opacity: 1;
  }
  .steps-content .step4 input[type=checkbox]:checked + .custom-check-box .icon, .steps-content .step4 input[type=radio]:checked + .custom-check-box .icon {
    background: #7B2817;
  }
  .steps-content .step4 .custom-check-box {
    position: relative;
  }
  .steps-content .step4 .custom-check-box .icon {
    border: 1px solid gray;
    height: 17px;
    min-width: 17px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
    margin: 0;
    transition: all .3s;
    border-radius: 50%;
    margin-top: 2px;
   }
   .steps-content .step4 .custom-check-box .icon.b-r-0 {
     border-radius: 0;
   }
   .steps-content .step4 .custom-check-box .icon i {
     font-size: 11px;
     opacity: 0;
     transition: all .3s;
     color: #fff;
   }
   .steps-content .step4 .custom-check-box span:last-of-type {
    margin: 0 7px;
    /* font-weight: 600; */
  }
  .steps-content .step4 .custom-check-box label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    margin: 0;
    z-index: 1;
  }
  .steps-content .step-container .heading-title {
    font-weight: bold;
    font-size: 21px;
    margin-bottom: 30px;
  }
  .steps-content .step-container form .form-control {
    height: 50px;
    margin-bottom: 20px;
    border: 1px solid #DFDFDF;
    border-radius: 0;
  }
  .steps-content .step-container form button {
    height: 55px;
    border-radius: 0;
    width: 100%;
    font-family: inherit;
  }
  .steps-content .step-container form button[disabled] {
    cursor: not-allowed !important;
  }
.steps-content .mat-stepper-horizontal, .mat-stepper-vertical {
    padding: 50px 10px 20px;
    font-family: inherit;
}
.steps-content .mat-horizontal-stepper-header-container {
  padding: 0 15px;
}
.steps-content .mat-horizontal-stepper-header {
    width: 30px !important;
    height: 30px !important;
    padding: 0px !important;
}
.steps-content .mat-step-icon .mat-icon {
  height: 30px !important;
  width: 30px !important;
  overflow: hidden;
  line-height: 30px;
  text-align: center;
}
.steps-content .mat-step-icon .mat-icon i {
  color: #fff;
  font-size: 12px;
}
.steps-content .mat-horizontal-stepper-header .mat-step-icon {
  margin: 3px !important;
}
.steps-content .mat-step-header .mat-step-icon {
  background: #EBEBEB;
  color: transparent;
}
.steps-content .mat-step-header .mat-step-icon-selected, .steps-content .mat-step-header .mat-step-icon-state-done, .steps-content .mat-step-header .mat-step-icon-state-edit {
  color: #fff;
  background: #7B2817;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.steps-content .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*********************profile menu************************/
.prof .nav{
  border: 2px solid #efeeed;
  line-height: 4;}
  .prof .nav li{
  border-top:2px solid #efeeed;
  padding: 0 15px;
  width:100%}
  .prof .nav li:first-child{
  border-top:0 none}
  .prof .nav svg {
      margin-top: 19px;
  }
  .selected,.prof form,.prof-set form{
      background: #fff
  }
  .prof form{
      /* margin: 0 15px 30px 15px; */
      padding: 15px 0 0 0
  }
  .prof h5 {
      line-height: 4;
  }
  .prof .form-control {
      border-radius: 0;
      margin-bottom: 15px;
  }
/*********************profile settings************************/

/*************************event list***************************/
.evnt-item p.col-lg-12.clear {
  margin-bottom: 28px;
}
.spot.active {
  background-color: #7b2817;
  color: transparent;
  box-shadow: 0px 1px 10px 0px #8c8a8a;
  border: 5px solid #f9ddd8
}

.spot {
  border-radius: 50%;
  height: 15px;
  width: 15px;
  float: left;
  margin-top: 4px;
  margin-right: 5px}
.evnt-item {
      background: #fff;
      margin-top: 40px;
      padding: 15px 30px;
  }
.btn.inactive{
  color: #484747!important;
  background: #c3bfbf!important;
}
.btn-group .btn {
  min-width: 80px;
}
.evnt-list.auto {
  margin-top: 50px;
  margin-bottom: 50px
}
.evnt-list h4{
font-size: 50px;
font-weight: bolder;
}
.sponsor .ui-carousel .ui-carousel-header {
  float: right;
  margin-top: -45px;
}
.sponsor .ui-grid img {
  transform: translateY(-50%);
  margin-top: 74px;
  max-height: 100px;
}
.sponsor .ui-carousel-item .ui-grid {
  margin: 0 100px 0 0;
}
.more {
  color: #424141;
  text-decoration: underline;
}
.evnt-item .wrapped strong {
  height: auto;
width:100%
}
.evt-ul li {
  display: inline;
  margin-right: 14px;
  padding: 15px;
  font-size: 15px;
}
.evt-ul li a {
  color: #848181;
}
.evt-ul .borderd{
  border: 1px solid #dcdada;
}
.black-txt:after {
  margin-top: 30px!important;
}
.bg-grey {
  background: #eee;
}
.bordered{
  border: 1px solid #8a8686
}
.orange {
  color: #7b2817;
}
.pagination {
  margin: 40px 0;
}
.page-item:first-child .page-link,.page-item:last-child .page-link {
  border-radius: 0;
}
.page-item {
  margin-right: 10px;
}
.page-item.active .page-link {
  background-color: #7b2817 !important;
  border-color: #7b2817 !important;
  color: #fff !important;
}
.page-item.disabled .page-link {
  color: #bababb;
  background-color: transparent !important
}
.page-link {
  color: #9a9b9c !important;
  background-color: #eee !important;
}
.page-item:last-child .page-link {
  background: transparen !important;
}
.page-link:hover {
  color: #7b2817 !important;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
  .btn.btn-warning {
      background-color: #ffc107!important;}
      .cdk-overlay-container .makers,.cdk-overlay-container .makers .row {
          background: #fff;
          overflow-x: hidden;
      }
/************event details*************/
.article-evt {
  /* margin: 50px 0; */
}
.article-evt p{
text-align: justify;
}

.btn.bordered {
  background: none!important;
  color: #7a7878!important;
  margin-left: 15px!important;
}
.mat-mdc-dialog-container .makers .row {
  width: 101%;
}
.makers .row {
  padding: 25px;
  background: linear-gradient(to bottom, #eee 0%,#eee 75%,#fafafa 75%,#fafafa 100%);
}
.guest-info-wraper p {
text-align: justify;
}

.makers h5 {
  border-bottom: 1px solid #f1ecec;
  padding-bottom: 10px;
  margin-bottom: 15px;}
  .makers h5:after{width: 7%;}
  .black-txt:after{width: 15px;}
  .makers p {
      margin-top: 24px;
      text-align: justify;
  }
.black-txt{

  color: #000
}
.makers img.col-lg-2 {
  height: 100%;
  border: 7px solid #fff;
  padding: 0;
  box-shadow: 0px 3px 3px 0 #eee;
}
/******************/
.guests h6 {
  line-height: 3;
}
.guests h5 {
position: relative;
top: -15px;
}

.guests .ui-carousel-button {
  line-height: .5;
}
body .guests .ui-carousel .ui-carousel-header {
  float: right;
  margin-top: -56px;
}
.guests .overlap {
  margin-top: 122px;
  padding-left: 24px;
  min-width: 110px;
}
  .guests .ui-grid-col-12 {
      text-align: center;
  }
.guests .slid-cap button{
visibility: hidden;
transition: all 0.3s ease-in-out;
background:none;

}
.guests .ui-grid .slid-cap:hover button,.lects button{
  visibility:visible;
  background:none;
  }
  .guests .slid-cap *,.caption,.caption .serif {
      color: #fff;
      text-shadow:-1px -1px 1px #000, 1px 1px 1px #000, 0px 0px 1px #000
  }

  .guests .ui-grid img {
      width: 100%;
      max-height: 320px;
    padding: 15px;    }
  .guests {
      margin: 30px 0;
  }


  .lects {
      margin: 0 0 30px 0;
  }
  .lects .caption li {
      display: inline-block;
      margin-right: 35px
  }
  .lects .caption button {
      color: #fff;
      margin-bottom: 18px;
      border-style: solid
  }
  .lects .caption li div {
      float: right;
  }
  .lects .caption li div p{
      margin-bottom: 0;
  }
  .lects .caption li div svg, .lects .caption li div [class^="fa"]{
font-size: 30px
  }
  .lects .caption label {
      background: #7b2817;
      padding: 10px 15px 10px 10px;
      border-radius: 0 37px 37px 0;
      font-size: 18px;
      border: 1px dashed;
      margin-left: -16px;}
      .lects .col-sm-12 {
      }
  /**************conf-lect-list***************/
 /***/     .break td {
          text-align: center;
          color: #28c75d;
          width: 100%!important;
      }
      .fixed_headers button {
          background: transparent;
          border: 0 none;
          color: inherit;
      }

    .caption-lst .bottomleft {
      left: 13%;
      }
  .lect-list .ng-star-inserted .ng-star-inserted.float-right {
      margin-top: -40px;
  }
      .lect-list .table-striped tbody tr:nth-of-type(odd).break, .lect-list .table-striped tbody tr:nth-of-type(even).break {
          background: #e6fded;
          border: 2px solid #28c75d;
      }
      .lect-list .ng-star-inserted {
          clear: both;
      }
      .green-row table,
      .red-row table {
          width: 100%;
      }
  /***/
  .green-row,.red-row{
      clear: both;
      margin-bottom: 30px;
  }
  .green-row{
      border: 1px solid #7b2817;
  }
  .red-row,.evening {
          border: 1px solid #88a5f8;     }
.lect-list .table-striped tbody tr:nth-of-type(odd).evening, .lect-list .table-striped tbody tr:nth-of-type(even).evening,
.red-row tr {
              background: #cedde0;
          }
          .green-row tr {
              background: #f9e7b6;
          }
          .green-row label{
              background: #f2892f;
          }
          .red-row label{
              background: #6b85c1;
          }
 /***/     .red-row label,.green-row label{
          color:#fff;
          margin: 10px 15px;
          padding: 8px;
      }
 /***/     .red-row p,.green-row p{
          margin-bottom: 0;
          line-height: 2.5;
      }
      .green-row p{
          color: #d02506;
      }
      .red-row p,.evening .orange{
          color: #5071bd;
      }
      .green-row td:first-child,.red-row td:first-child {
          width: 110px;
      }
          .lect-list {
          margin-bottom: 30px;
      }
     .lect-list h1 {
          margin-left: 0;
          margin-top: 0
      }
      .col-lg-9.lect-list h5 {
          margin-top: 15px;
      }
      .lect-list h5 {
        font-size: 20px;
        font-weight: bold;
        color: #393E46;
      }
      .caption-lst button{
          margin: 0 15px;
          border-style: solid;
          padding: 5px 10px
      }
      .caption-lst button:disabled{
        border-color: #fff;
        color: #fff;
        cursor: not-allowed;
        opacity: 0.7;
        background: rgba(0,0,0,0.4);
      }
      .caption-lst .bordered{
        background: rgba(0,0,0,0.7);
        border-color: #fff;
        color: #fff
      }
      .caption-lst .btn-group {
          margin-top: 40px;
      }
          .lect-list .circle {
              width: 30px;
              height: 30px;
              border: 2px solid #fff;
              box-shadow: 0 1px 4px 0px #adabab;
          }
.lect-list .table-striped tbody tr:nth-of-type(even) {
              background-color: rgba(0, 0, 0, 0.05);
          }
          .lect-list .table-striped tbody tr:nth-of-type(odd) {
              background-color: #fff;
          }
          .lect-list .table-responsive{
              /* background: linear-gradient(to bottom, #e9ecef 0%,#e9ecef 50px,#fff 25px,#fff 25px,#fff 100%); */
              margin: 15px 0;
              padding: 0 15px;
          }
          .table .thead-light th {
              border-color: transparent;
              line-height: 1.75
/***/          }

.lect-list-head .bottomright{
position: absolute !important;

}


/************/
.table-responsive table {
  table-layout: fixed;
  border-collapse: collapse;
}
.table-responsive .fixed_headers td {
  line-height: 2;
}
.table-responsive table thead {
  background-color: #e9ecef;
}
.table-responsive table thead tr {
  display: block;
  position: relative;
}
.table-responsive table tbody {
  display: block;
  overflow: auto;
  width: 100%;
  max-height: 275px;
}
.table-responsive table tbody tr:nth-child(even) {
  /* background-color: #DDD; */
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

/*****************work shop**************/
.wrkshp-side .red.col-lg-4 {
  padding: 0;
}
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
.wrkshp-side .mat-button-focus-overlay{
  opacity: 0!important;
}
.wrk-shp h5 {
  line-height: 3;
}
.wrkshp-side .cards {
  float: left;
  margin-bottom: 25px;
}
.wrkshp-side .mat-mdc-raised-button {
  box-shadow: 0 0 0 0!important;
}

.wrkshp-side .instrctor-name {
display: block;
width: 100%;
}
.wrkshp-side .payment-amout p{
float: right;
}

.wrkshp-side input {
  width: 100%;
  line-height: 3;
  margin-bottom: 25px;
  padding: 0 15px;
}
.wrkshp-side .btn {
  width: 100%;
  line-height: 3;
  padding: 0;
}
.wrk-shp .btn-dark {
  line-height: 2.5;
  padding: 0 15px;
      border-color: transparent;
}
.lects.lect-list .overlap {
  /* margin: 270px 100px 0 100px; */
}
a.orange {
  text-decoration: underline;
}
.wrkshp-side {
  max-width: 370px;
  padding: 30px;
}
/* Breadcrups CSS */
.arrow-steps {
  margin-bottom: 25px
}
.arrow-steps .step {
font-size: 14px;
text-align: center;
color: #666;
cursor: default;
padding: 10px 10px 0 30px;
min-width: 145px;
float: left;
position: relative;
background-color: #fafafa;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: background-color 0.2s ease;
border: 1px solid #efefef;
width: 25%;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
content: " ";
position: absolute;
top: 30%;
right: -17px;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #fafafa;
z-index: 2;
transition: border-color 0.2s ease;
}
.arrow-steps .step:last-child:after{
display:none
}
.arrow-steps .step:before {
right: auto;
left: 0;
border-left: 17px solid #efefef;
z-index: 0;
}

.arrow-steps .step:first-child:before {
border: none;
}

.arrow-steps .step span {
position: relative;
}

.arrow-steps .step span:before {
opacity: 0;
content: "✔";
position: absolute;
top: -2px;
left: -20px;
}

.arrow-steps .step.done span:before {
opacity: 1;
-webkit-transition: opacity 0.3s ease 0.5s;
-moz-transition: opacity 0.3s ease 0.5s;
-ms-transition: opacity 0.3s ease 0.5s;
transition: opacity 0.3s ease 0.5s;
}

.arrow-steps .step.current {
background-color: #f5f5f5;
}

.arrow-steps .step.current:after {
border-left: 17px solid #f5f5f5;
}
/****sidemenu****/
.mat-drawer.mat-drawer-end {
  /* min-width: 31%;
  padding: 45px 30px; mf*/
}
/***************ticket*****************/
.ticket {
  width: 350px;
  margin: 0 auto;
  margin-top: -8px
}
.mat-mdc-dialog-container {
  overflow-x: hidden;
}
.orang-bg{
  padding-bottom: 10px;
  -webkit-clip-path:
  polygon(0 0%, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 87%, 99% 90%,98% 92%,98% 93%, 97% 100%, 95% 100%, 3% 100%,2% 87%, 3% 91%, 0 88%);
  clip-path:
  polygon(0 0%, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 87%, 99% 90%,98% 92%,98% 93%, 97% 100%, 95% 100%, 3% 100%,2% 87%, 3% 91%, 0 88%);
}
.orang-bg *{
  color:#fff
}
.white-bg{
  padding: 15px 30px 30px;
  background:#fff;
  border-bottom: 20px solid #8b8e93;

-webkit-clip-path:
polygon(0% 4%, 7% 1%, 2% 4%, 3% 0%, 97% 0%, 98% 7%, 96% 3%,98% 4%, 97% 3%, 100% 5%, 100% 93%, 95% 93%, 95% 100%, 5% 100%, 5% 93%, 0% 93%);
  clip-path:
  polygon(0% 4%, 7% 1%, 2% 4%, 3% 0%, 97% 0%, 98% 7%, 96% 3%,98% 4%, 97% 3%, 100% 5%, 100% 93%, 95% 93%, 95% 100%, 5% 100%, 5% 93%, 0% 93%)
}
.white-bg:after{
  content: "";
  position: absolute;
  bottom: -10px;
  width: 100%;
  height: 10px;
  background: #eee;
  margin-left: -12px;
}
.ticket button {
  background: transparent;
  border: 1px solid #c3c1c1;
  padding: 10px;
  margin: 0 auto;
}
.ticket qrcode {
  margin: 0 auto;
  margin-bottom: 20px;
}
/****************************************************************************************************
  contact us
*****************************************************************************************************/
.contact input, .contact textarea {
  width: 100%;
  line-height: 3;
  margin-bottom: 17px;
  padding: 0 15px;
  border: 1px solid #e0dddd;
}
.contact .btn {
  padding: 6px 15px;
}
.contact form {
  margin-bottom: 30px;
}
.contact h5,.contact h6 {
  color: #000;
  line-height: 1.5;
  margin-top: 20px;
  font-size: 18px;
}
.contact p.text-muted {
  margin-bottom: 0;
}
/****************************************************************************************************
  about us
*****************************************************************************************************/
.aboutus {
  margin: 50px 0
}
.contact {
margin: 50px auto !important;
}
/* .aboutus img.col-md-5 {
  height: 100%;
}
.aboutus h1 {
font-size: 50px;
font-weight: bold;
color: #393E46;
margin-bottom: 40px !important;
}
@media screen and (max-width:768px) {
.aboutus h1 {
  margin-top: 30px;
}
} */
.intro-heading
{
  color: white;
}
.aboutUs-p{
line-height: 40px;
font-size: 16px;
font-family: 'Cairo',Tahoma, sans-serif !important;
}
/* new updates */
.about-us {
padding: 50px 0;
}
.about-us .about-us-cover {
height: 350px;
}
.about-us .head-underline {
font-size: 36px;
font-weight: bold;
color: #393E46;
margin: 30px 0;
color: #000;
}
.ar .about-us .serif.head-underline{
  font-family: 'Cairo',Tahoma, sans-serif !important;
/* font-family: 'Markazi Text', serif !important; */

}
.about-us .head-underline::after {
left: 0;
right: auto;
}
/******************homepage****************/
.auto.lects{
  padding-top: 15px
}
.home .caption p {
  margin: 0;}
.relate-hom .bottomleft {
  bottom: 43px;
  color: #fff;
}
.relate-hom .topleft {
  margin: 0 20px;
}
/*************video*****************/

.scan {
padding: 30px 0;
}
.scan-checkBox {
margin-top: 20px;
}
/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
.scan-checkBox .mat-radio-label-content {
white-space: pre-wrap;
}

/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
.scan-checkBox .mat-radio-container{
margin: 4px;

}
.test-class video {
  border: 15px solid #b5b4b3;
  border-radius: 10px 10px 0 0;
  box-shadow: 0px 16px 0 0px #dad9d7;
  margin: 30px 0;
}
.test-class video:before{
  content: '';
  position: absolute;
  top: 2.5px;
  left: 50%;
  margin-left: -2.5px;
  width: 5px;
  height: 5px;
  background: #ccc;
  border-radius: 100%;}
  .test-class video:after {
      content: '';
      position: absolute;
      bottom: 2.5px;
      left: 50%;
      margin-left: -1em;
      width: 1.5em;
      height: 1.5em;
      background: #000;
      border-radius: 100%;
  }
  .scan .fa-exclamation-triangle{
      color: yellow
  }
  .white{
      padding: 15px;
      background:#fff;
  }
  .scan .select-style {
      width: 100%;
      overflow: hidden;
      background: #fff url(../img/select.png) no-repeat 98% 50%;
      border-radius: 0;
      overflow: hidden;
  line-height: 58px;
  height: 58px;
  border-color: #e8e8e8;
  background-size: 15px;
}
.scan .select-style select {
  width: 100%;
  overflow: hidden;
      padding: 0 15px;
}
.scan .row p{line-height: 3}

.email-subscribe{
background-color: #2F343B;
height: 61px;
}


.comment-photo {
display: flex;
justify-content: flex-end;
}
.comment-photo img{
background: #fafafa;
padding: 3px 0 7px 0;
width: 31px;
position: relative;
  top: -6px;
  right: 6px;
}

.comment-details strong{
font-size:12 ;
color:#393E46 ;
font-weight: 500;
}
.comment-details small {
color: rgba(57, 62, 70, 0.90);
font-weight: 400;
font-size: 11px;
}

.comment-details .panel-body{
color: rgba(57, 62, 70, 0.83);
font-weight: 400;
}


.related-title{
margin: 0 20px 7px 16px;
}
.lecture-details-modal {
border: 4px solid #fff;
}
.lecture-details-modal .close-btn svg{
margin: 0 -11px;
}
.lecture-details-modal div label:last-child{
color:#909294;
font-weight: 500;
}
.lecture-details-modal div label:first-child{
color: #7b2817;
margin-right: 4px;
}
.event-details-p label , .event-details-p{
color:#909294 !important;
text-align: justify;
}
.event-details-p {
margin: 20px;
margin-left: 0;
}
.lecture-list-table td:nth-child(4) {
/* width: 43%; */
}

.workshop-table button {
background-color: transparent;
border: 0;
}
.signup-modal .modal-body{
padding: 20px 15px 10px !important;
}
.signup-modal h6 small a{
margin: 7px;
}

.workshop-head{
position: relative;
}

.workshop-head .overlap {
position: absolute;
width: max-content;
bottom: 10%;
}

.workshop-head h1{
font-size: 50px;
}
.slider-homepage .slider-item{
margin-bottom: 33px;
}
.slider-homepage .lec-number{
background: #7b2817;
border-radius: 50%;
color: #fff;
width: 30px;
display: inline-block;
height: 30px;
line-height: 1.6;
text-align: center;
margin: 0 10px;
}

.slider-homepage .slick-slide{
position: relative;
}
.slider-homepage .slick-prev {
z-index: 5;
left: 10%;
}
.slider-homepage .slick-next {
z-index: 5;
right: 10%;
}

.slider-homepage .slick-prev:before, .slick-next:before {
font-size: 30px !important;
}



.slider-homepage .ui-carousel .ui-carousel-button {
color: #7b2817;
}

.slider-homepage .ui-carousel .ui-carousel-button:not(.ui-state-disabled):hover {
color:#fafafa ;
}


.slider-homepage .ui-carousel .ui-carousel-button.pi {
font-size: 37px;
}

.slider-homepage label {
position: absolute;
left: 16px !important;
right: unset;
bottom: 79px;
border: 0;
background-color: #7b2818;
color: #fff;
border-radius: 6px;
padding: 10px;
}
.slider-homepage .slick-slide img {
max-height: 380px;
}
.title-buttons{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.title-buttons button {
margin: 0 10px;
width: 80px;
}
.title-buttons:last-child{
margin: 0;
}

.title-buttons p {
font-size: 18px;
font-weight: bold;
margin-bottom: 9px;
}

.day-lec-title {
padding: 0 5px;
border-left: 1px solid #7b2817;
border-right: 0;
}

.lecture-wrapper h5 {

}
/* Home Second Slider  */
.home-second-slider{
height: 418px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 30px;
}
.home-second-slider .second-slider-content{
display: flex;
justify-content: space-between;
flex-flow: row-reverse;
align-items: flex-start;
position: relative;
bottom: calc(-100% + 86px);
padding: 0 20px;
color: #fff;
}
.home-second-slider h1{
color: #fff;
}
.home-second-slider .day-details > p {
margin-bottom: 11px;
}
.home-second-slider .day-details > p svg{
margin: 0 5px;
}



.home-second-slider .day-details li span {
font-size: 12px;
font-weight: 400;
}
.home-second-slider .day-details li p{
font-size: 15px;
font-weight: bolder;
}
.home-second-slider .day-details li {
display: inline-block;
margin: 0 20px;
}
.home-second-slider .day-details li:first-child{
margin-right: 0;
}

.home-second-slider .details-btn {
margin-bottom: 20px;
margin-top: auto !important;
color: #fff;
border: 1px solid #fff;
height: 38px;
min-width: 107px;
}
/* First slider */
/* the img banner insted of the slider */
/* the slider */

.home-first-slider {
/* new update */
/* margin-bottom: 60px; */
}
.home-first-slider .slider-img{
/* min-height: 400px; new update */
min-height: 100px;
max-height: 400px;
width: 100%;
}
.home-first-slider .slick-prev {
z-index: 5;
left: 10%;
}
.home-first-slider .slick-next {
z-index: 5;
right: 10%;
}
.home-first-slider .slick-prev:before, .slick-next:before {
font-size: 30px !important;
}

.home-first-slider .slick-dots {
bottom: 10px;
}
.home-first-slider  .slick-dots li button:before {
font-size: 11px;
}

.home-first-slider .slick-slide {
position: relative;
}


.first-slider-content {
position: relative;
}
.first-slider-content::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-color: rgba(0, 0, 0, 0.04);
}
.first-slider-data {
position: absolute;
left: 20%;
bottom: 10%;
z-index: 1;
padding: 0 20px;
}
.first-slider-data h1{
font-size: 50px;
font-weight: bold;
color: #fff;
}
.first-slider-data p.first-p{
font-size: 18px;
font-weight: bolder;
color: #fff;
}
.first-slider-data p:last-child{
font-size: 18px;
color: rgba(255, 255, 255,0.85);
}
/* new updates */
/* realted article */

.home-related-article .bottomleft{
padding: 10px;
}
.home-related-article img{
max-height: 293px;
min-height: 293px;
width: 100%;
cursor: pointer;
}
.related-article-img{
min-height: 255px;
max-height: 255px;
width: 100%;
}

/* .related-article-data{
text-align: left !important;
} */

/* Footer */

.footer-social-icon .nav-link ,.footer-social-icon svg{
-webkit-transition: all .1s ease-in-out;
-moz-transition: none !important;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}


.head-underline{
position: relative;
color: #7b2817 !important;
}
.head-underline:after{
position: absolute;
bottom: -10px;
right: 0;
height: 3px;
background-color:#7b2817 ;
content: '';
width: 40px;
margin: 0;
}
.details-play-btn{
display: flex;
align-items: center;
justify-content: space-evenly;
}
.details-play-btn button{
margin: 0 20px;
}
.details-play-btn svg {
margin: -3px 10px;
}

.lec-group-btn{
display: flex;
align-items: center;
justify-content: space-evenly;
}
.lec-group-btn .join-btn {
background: transparent !important;
border: 1px solid #393E46;
color: #393E46 !important;
}
.lec-group-btn svg {
margin: -3px 10px;
}
.lec-group-btn button:disabled {
background: #838381 !important;
opacity: 0.4;
cursor: not-allowed;
}

.lec-group-btn div{
display: flex;
flex-flow: column;
}
.lec-group-btn div button{
margin-bottom: 10px;
}
/* Table Class */




.event-date {
color: #F14D2E;
font-size: 15px;
font-weight: bolder;
}
.table-general td:first-child{
min-width: 20px;
}
.table-general td:nth-child(2) {
/* color:#F14D2E; */
white-space: nowrap;
}

.table-general td ,.table-general td a{
color: #5C636E;
font-size: 15px;
font-weight: bolder;
}
.table-general td button{
color: #A9ABAF;
font-size: 13px;
font-weight: 400;
}

.table-event--5 td:nth-child(2) , .table-event--5 thead th:nth-child(2){
min-width: 73px;
}

.table-event--5 td:nth-child(3)  {
white-space: nowrap;
}
.table-event--5 .break  {
width: 100%;
}
/* end mobile table*/

/* End table */

.register-modal-mail {
text-align: center;
padding:20px;
direction: rtl;

}
.register-modal-mail i {
font-size: 20px;
/* color: ; */
}
.register-modal-mail h1{
color: #F14D2E;
font-size: 20px;
font-weight: bold;
}

.register-modal-mail p{
color: #5C636E;
font-size: 17px;
}
.mail-div-order{
  margin: 20px 0;
}
.mail-div-order strong{
  font-size: 20px;
  font-weight: bold;
}
.payment-progress{
  font-size: 20px;
  margin: 20px 0;
}
.payment-progress strong{
  margin: 20px 0;
}

.svg-red, .svg-red path{
fill: #7b2817 !important;
}

.svg-blue, .svg-blue path{
fill: #007bff !important;
}


.event-single-bottom .caption img{
min-height: 500px;
max-height: 500px;
width: 100%;
}

.head-underLine{
position: relative;
}
.head-underLine:after{
content: "";
height: 1px;
background-color: #7b2817;
margin-bottom: 15px;
position: absolute;
left: 0;
right: unset;
top: 29px;
z-index: 4;
width: 7%;
}

.p-s {
position: static !important;
}
/* Guest section */

.guest-wrapper{
position: relative;
}

.guest-wrapper .img-guest {
}
.guest-wrapper .img-guest {
width: 100%;
max-height: 320px;
}

.guest-item-info {
position: absolute;
top: 62%;
right: 0%;
left: 0;
margin: auto;
transition: all 0.3s ease-in-out;
text-align: center !important;
}
.guest-item-info p{
font-weight: bold;
font-size: 14px;
color: #fff;
font-family: 'Cairo',Tahoma, sans-serif !important;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, 0px 0px 1px #000;
text-align: center !important;
}
.guest-item-info small{
font-size: 12px;
font-weight: bolder;
color: #fff;
font-family: 'Cairo',Tahoma, sans-serif !important;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, 0px 0px 1px #000;
}
.guest-item-info button{
visibility: hidden;
width: 127px;
height: 42px;
color: #fff;
text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, 0px 0px 1px #000;
margin-top: 9px;
transition: all 0.3s ease-in-out;
background: transparent !important;
}

/* change-password-form */
/* .change-password-form {
padding: 20px !important;
} */

/* .change-password-form h5 {
line-height: 1;
} */

.change-password-form .alert {
width: max-content;
}
.change-password-form button {
width: 40%;
line-height: 1 !important;
}


/* Profile page setting */

.setting-profile-form {
padding: 0 50px;
}
.setting-profile-form .alert{
margin-right: 10px;
margin-left: 10px;
min-height: 40px;
/* line-height: 1; */
}


/* .setting-profile-form .form-group input , .setting-profile-form .form-group select{
width: 80%;
max-width: 500px;
} */

.full-name-group{
display: flex;
flex-flow: row;
width: 100%;
}
.setting-profile-form .form-group {
display: flex;
position: relative;
}
.full-name-group input{
min-width: 178px;
}

.full-name-group .alert{
position: absolute;
bottom: -52px;
left: 11px;
width: 178px;
text-align: center;
z-index: 1;
}
.full-name-group .alert div{
text-align: center;
}
.setting-profile-form label {
margin: 0 20px;
min-width: 100px;
}
.setting-profile-form input {
display: inline-block;
}

.setting-profile-form button {
/* width: 40%;
line-height: 1 !important;
margin: 20px; */
}

/****************************************** shipping info form ******************************************/
.shipping-info-form {
margin: 0 !important;
}
.shipping-info-form .content {
padding: 20px;
}
.shipping-info-form .content h5 {
font-weight: bold;
text-align: center;
}
.shipping-info-form .content label {
padding: 0;
line-height: normal;
}
.shipping-info-form .content .form-control {
height: 45px !important;
}
.shipping-info-form .content .form-control, .shipping-info-form .content label {
margin: 0;
margin-bottom: 5px;
}
.shipping-info-form .btn[type=button], .shipping-info-form .btn[type=submit] {
line-height: normal !important;
height: 60px !important;
width: 100%;
border-radius: 0;
}
/****************************************** my orders ******************************************/
.my-orders .order{
padding: 10px;
background: #fff;
margin-bottom: 20px;
border: 1px solid #e8e8e8;
}
.my-orders .order .order-details {
border-bottom: 1px solid #e8e8e8;
padding: 5px 0;
}
.my-orders .order .order-details p {
margin-bottom: 5px;
}
.my-orders select {
padding: 8px;
}
.my-orders select:nth-last-of-type(2) {
margin: 0 5px;
}
.my-orders .heading-text-dark {
margin: 0;
}
.my-orders .order .order-status h4{
font-size: 16px;
margin: 10px 0 22px;
}
.my-orders .order .order-status .shipping-status {
border-radius: 5px;
position: relative;
}
.my-orders .order .order-status .shipping-status::after {
content: "";
display: block;
width: 100%;
height: 15px;
background: #e8e8e8;
position: absolute;
top: 3px;
border-radius: 5px;
}
.my-orders .order .order-status .shipping-status p {
margin: 5px 0 10px;
font-weight: 500;
color: #9E9E9E;
text-align: center;
}
.my-orders .order .order-status .shipping-status .shipping-step {
width: 35px;
height: 35px;
background: #e8e8e8;
font-weight: bold;
font-size: 18px;
line-height: 35px;
border-radius: 50%;
margin: auto;
color: #9E9E9E;
box-shadow: 0 0 5px #9E9E9E;
margin-top: -7px;
text-align: center;
position: relative;
z-index: 1;
}
.my-orders .order .order-status .shipping-status .shipping-step.active {
background: #20c997;
color: #fff;
box-shadow: 0 0 5px #fff;
}
.my-orders .order .order-status .shipping-status .shipping-step.active + p {
color: #000;
font-weight: bold;
}
.my-orders .order .order-content .book-container {
background: #fff;
padding: 5px;
}
.my-orders .order .order-content .book-container .book-cover {
width: 55px;
height: 75px;
position: relative;
}
.my-orders .order .order-content .book-container .book-cover a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.my-orders .order .order-content .book-info {
margin: 5px;
}
.my-orders .order .order-content .book-info p {
margin: 0;
}
.my-orders .order .order-content .book-info .book-name  {
font-weight: bold;
}
.my-orders .order .order-content .book-info .author-name {
font-size: 12px;
opacity: 0.7;
}
.my-orders .order .order-content .cart-item {
margin: 15px 0;
}
.my-orders .order .order-content .rating {
margin-top: 10px;
}
.my-orders .order .order-content .rating .rating {
margin: 0;
}
.my-orders .order .order-content .rating p {
margin: 0;
font-size: 15px;
padding-top: 12px;
}
.my-orders .order .order-content .rating .stars {
margin: 0 8px;
}
.my-orders .order .order-content .rating .stars i {
font-size: 15px;
}
/****************************************************************************************************
new ui updates
*****************************************************************************************************/

/****************************************** global style ******************************************/
html {
  font-size: 14px;
}
* {
  box-sizing: border-box !important;
}
.heading-text {
margin-bottom: 35px;
text-align: center !important;
font-size: 21px;
font-weight: bold;
color: #7b2817;
}
/* fix bootstrap issue */
.row:before, .row:after {display: none !important;}
.heading-text-dark {
  color: #000;
  font-size: 1.8rem;
  font-weight: bold;
}
.table thead th
{
  font-size: 19px;
  color: black;
  font-weight: 400;
  line-height: 1;
}
.mat-mdc-card-header 
{
  font-size: 24px !important;
  line-height: 1;
}
.mat-mdc-card-content>:first-child,.dashboadrd-section .text-center .btn.btn-primary
{
  font-size: 18px !important;
  line-height: 1;
  color: #000 !important;
}
.dashboadrd-section .btn.btn-primary
{
  font-size: 16px !important;
  line-height: 1.2 !important;
}
.table-container table [nbbutton]
{
  font-size: 16px !important;
  line-height: 1.1 !important;
}
.heading-text-dark a, .heading-text-dark a:hover {
color: inherit;
}
.m-b-30 {
margin-bottom: 30px;
}
.m-0-auto {
margin: 0 auto;
}
.m-l-auto {
margin-left: auto;
}
.bg-overlay {
position: relative;
}

.bg-overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(57, 62, 70, .35);
}
a:hover {
text-decoration: none !important;
}

i:hover {
color: inherit;
background: transparent;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

input[type=number] {
-moz-appearance: textfield;
}

.custom-input-number {
border: 1px solid #EAE7E7;
}

.custom-input-number i {
cursor: pointer;
padding: 8px 12px;
font-size: 12px;
}

.custom-input-number input {
padding: 11px 7px;
width: 45px;
text-align: center;
border: none;
background: transparent;
}
/* pagination */
.mat-mdc-paginator {
  margin: auto;
}
.mat-mdc-paginator-container {
  justify-content: center !important;
}
.table-lg {
min-width: 900px;
overflow: auto;
}
.table-md {
min-width: 700px;
overflow: auto;
}
.table-sm {
min-width: 500px;
overflow: auto;
}
.table-xs {
min-width: 420px;
overflow: auto;
}
.overflow-x-hidden {
overflow-x: hidden !important;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.mat-mdc-tab-group, .mat-tab-label {
  font-family: 'Cairo',Tahoma, sans-serif !important;
}
.mat-mdc-table
{
  font-family: 'Cairo',Tahoma, sans-serif !important;
}
.mat-mdc-cell
{
  font-size: 16px !important;
    color: #696969 !important;
}
.custom-scroll::-webkit-scrollbar {
  width: 7px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #e6e6e6; 
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(4, 4, 4, 0.2); 
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(4, 4, 4, 0.4); 
}

/* main search box */
.main-search-box {
  padding: 0;
  margin-top: 15px;
}
.main-search-box .search {
  background: #fff;
}
.main-search-box .search.more-options {
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s, transform .3s;
  transform: translateY(5px);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  z-index: 4;
}
.main-search-box .search.more-options.show {
  max-height: 1000px;
  box-shadow: 0 0 5px rgba(118, 116, 116, 0.5);
  background: #fafafa;
  transform: translate(0);
  overflow: visible;
}
.main-search-box .search.more-options.show:before {
  content: "";
  display: block;
  border-width: 10px;
  border-color: transparent transparent #5C636E transparent;
  position: absolute;
  right: 109px;
  z-index: 99;
  border-style: solid;
  top: -19px;
}
.main-search-box input[type=search] {
  height: 45px;
  border-width: 0;
  margin: 0;
  font-size: 16px !important;
}
.main-search-box select, .main-search-box input {
  border-radius: 0;
  height: 40px;
  margin: 10px auto;
  width: calc(100% - 20px);
  border: 1px solid #ced4da;
  display: block;
  font-size: 12px;
}
.main-search-box input {
  outline: 0 !important;
  box-shadow: none !important;
}
.main-search-box select:focus {
  box-shadow: none;
}
.main-search-box select.custom-select {
  width: auto;
  border-width: 0 1px;
  margin: 0;
}

.main-search-box i {
  font-size: 17px;
  color: #5C636E;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0 10px;
}
.main-search-box button.btn {
  padding: 7px 25px;
  margin: 4px;
  height: auto;
  border-radius: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}
/****************************************** end global style ******************************************/

/****************************************** header ******************************************/
header .dropdown .dropdown-menu {
  margin: 0;
  padding: 0;
  background: #fafafa;
  height: 0;
  overflow: hidden;
  opacity: 0;
  display: block !important;
  transition: opacity .2s, transform .2s;
  transform: translateY(5px);
  left: auto;
}
header .dropdown .dropdown-menu:not(.menu-box) {
  border: 0;
}
header .dropdown .dropdown-menu.menu-box {
  right: 0;
}

header .dropdown .dropdown-menu.menu-box:not(.open) {
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
}
header .dropdown:hover .dropdown-menu:not(.menu-box), .dropdown-menu.open {
  height: auto !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
header .dropdown .dropdown-menu:empty, header .dropdown a::after {
  display: none !important;
}
header .dropdown .dropdown-menu .dropdown-item {
  padding: 0;
  background: transparent !important;
}
header .dropdown .dropdown-menu .dropdown-item a {
  width: 100%;
  display: block;
  padding: 13px 10px;
  border: none !important;
  border-bottom: 1px solid #e5e3e2 !important;
  min-width: 168px;
  color:  #393939;
  line-height: 1.1;
  font-size: 18px;
}
header .dropdown .dropdown-menu .dropdown-item:hover a, header .dropdown .dropdown-menu .dropdown-item:hover a i, header .dropdown .dropdown-menu .dropdown-item a:active {
  background: rgba(0,0,0,.04);
}
li.nav-item.side-menu-nav, li.nav-item.language-nav.ng-star-inserted {
width: 130px;
border-left: 1px solid #e5e3e2;
border-right: 1px solid #e5e3e2;
}
li.nav-item.language-nav.ng-star-inserted a.nav-link {
text-align: center;
}

.top-header .nav .currency-select {
  height: 100%;
  width: 60px;
  padding: 9px;
  padding-right: 20px;
  box-shadow: none;
  background-color: #fafafa;
  border-color: #e5e3e2 !important;
  border-left-width: 0;
  border-bottom: 0;
}

.home-first-slider .slick-dots li button {
background-color: #bdb6b6;
width: 22px;
padding: 0;
height: 4px;
}
.home-first-slider .slick-dots li.slick-active button {
background-color: #fff;
}
.home-first-slider .slick-dots li button:before {
content: "";
display: none;
}
/* new update */
header a.logo-img {
  padding: 0 12px;
}

.mat-mdc-menu-content:not(:empty){
padding: 0 !important;
overflow: hidden;
border: 1px solid #e5e3e2;
background: #fafafa;
}
.mat-mdc-menu-panel {
border-radius: 0;
}
/* TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version. */
.mat-radio-label {
  white-space: normal !important;
  align-items: start !important;
  line-height: inherit !important;
  margin: 0 5px;
}
ul.nav.navbar-bar.register-nav .nav-item a {
border-left: 1px solid #e5e3e2;
border-right: 1px solid #e5e3e2;
position: relative;
line-height: 3;
}
ul.nav.navbar-bar.register-nav .nav-item a span.items-number {
position: absolute;
top: 0;
right: 2px;
display: block;
background: #F14D2E;
min-width: 20px;
min-height: 20px;
font-size: 12px !important;
color: #fff !important;
text-align: center;
line-height: 20px;
border-radius: 50%;
padding: 0 5px;
}
ul.nav.navbar-bar.register-nav .nav-item.no-border a {
border-left: 0;
border-right: 0;
}
/****************************************** footer ******************************************/
.main-footer footer{
padding-bottom: 20px;
overflow: hidden;
}
footer h6 {
font-weight: bold;
color: black;
font-size: 20px;
position: relative;
padding-bottom: 10px;
}
footer h6::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 20px;
height: 2px;
background: #7B2817;
display: block;
}
footer input.email-subscribe {
background: #2F343B;
height: 55px;
border: none;
outline: none !important;
color: #fff;
font-size: 18px;
}
footer input.email-subscribe:focus {
background: #2F343B;
  color: #fff;
  box-shadow: none;
}

.main-footer .fair .small li a {
  color: inherit;
  font-size: 16px;
}
.main-footer .footer-botttom a, .main-footer .fair .small li a:hover {
color: #7b2817 !important;
}
.main-footer .fair .social .footer-social-icon li a:hover {
  color: #fff !important;
}
.main-footer .footer-botttom {
  padding: 10px;
  color: #000000;
}
.main-footer .footer-botttom img {
width: 20px;
}
/****************************************************************************************************
edit article add page
*****************************************************************************************************/
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {/*new update*/
position: static !important;
margin: 0 !important;
}
.ql-snow .ql-picker.ql-size, .ql-snow .ql-picker.ql-header, .ql-snow .ql-picker.ql-font {
width: auto !important;
}
.mat-mdc-card {
overflow: hidden;
padding: 20px !important;
font-family: 'Cairo',Tahoma, sans-serif !important;
}
.mat-mdc-card.ar {
text-align: right !important;
}
.mat-mdc-card-header {
font-size: 20px;
justify-content: center;
font-weight: bold;
padding: 10px 0;
position: relative;
margin-bottom: 20px;
}
.mat-mdc-card-header::after {
position: absolute;
content: "";
display: block;
width: 20%;
height: 2px;
background: #bababa;
bottom: 0;
}
/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
.mat-card-header-text {
margin: 0 !important;
}
.mat-mdc-dialog-actions button {
padding: 6px 30px;
border: none;
font-weight: 300;
font-size: 16px;
}

/****************************************************************************************************
edit article details page
*****************************************************************************************************/
/* new updates */
label.btn.overlap.ng-star-inserted {
background: transparent !important;
margin: 0 10px;
/* new update */
padding: 0 !important;
right: 12px;
top: 8px;
}
label.btn.overlap.ng-star-inserted span {
margin: 3px !important;
background: #7b2817;
padding: 7px 10px;
display: inline-block;
}
/* blog */
.blog .blog-content .card .card-text {
text-align: justify;
}
.single-blog-paragraph.paragraph {
text-align: justify !important;
line-height: 1.6 !important;
color: #000;
/* new update */
white-space: normal;
}

/*fix slider*/
.slide.ng-tns-c9-23 {
position: relative;
}
.home-first-slider .carousel {
padding: 0 !important;
}
button.rightRs:not(.bestseller .rightRs , .categories .rightRs), button.leftRs:not(.bestseller .leftRs, .categories .leftRs) {
border: none;
opacity: 1;
width: 40px !important;
height: 40px !important;
outline: 0px ;
background: #7b2817;
z-index: 10;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
outline: none !important;
}
button.rightRs i, button.leftRs i {
color: #fff !important;
font-size: 20px !important;
}
button.rightRs:not(.categories .rightRs) {
right: 12px;
}
button.leftRs:not(.categories .leftRs) {
left: 12px;
}
/* add article */
.article-style {
margin-top: 25px;
}
.article-style input[type="radio"] {
display: none;
}
.article-style .article-style-image img {
cursor: pointer;
transition: all .5s;
padding: 2px;
box-shadow: 0 0 4px transparent;
}
.article-style input[type="radio"]:checked + .article-style-image img{
padding: 2px;
box-shadow: 0 0 4px #ccc1bf;
}
/* tags of article details */
.tags {
margin-bottom: 10px;
}
.tags i {
font-size: 16px;
}
.tags .tag {
margin: 12px 0;
}
.tags .tag a {
margin: 0 5px;
padding: 6px 20px;
background: #d3d3d33d;
color: #000000;
}
.tags .tag a:hover {
 color: #000000;
}
.share-article .sb-wrapper .sb-text, .social-icons .sb-wrapper .sb-text {
 /* display: none; */
}
.share-article .sb-button, .social-icons .sb-button {
margin: 5px;
margin-top: 0;
margin-bottom: 0;
}
/* .share-article .sb-show-text .sb-icon, .social-icons .sb-show-text .sb-icon {
border: 1px solid #E7E7E7;
width: 32px;
height: 32px;
line-height: 30px;
text-align: center;
font-size: 12px;
transition: all .5s;
} */
.share-article {
 margin-top: 15px;
}
.share-article .share-title{
font-size: 18px;
font-weight: bold;
}
.share-article button.sb-wrapper, .social-icons button.sb-wrapper {
 padding: 0 !important;
 min-width: auto;
}
.share-article div.sb-button.sb-modern-light, .social-icons div.sb-button.sb-modern-light {
 display: none;
}
.social-icons {
margin-top: 10px;
}
.social-icons button.sb-wrapper {
 /* border: 1px solid #e7e7e7; */
 font-size: 16px !important;
}
.social-icons .copy-btn {
background: none;
border: 1px solid #e7e7e7;
margin: 0 5px;
}
/****************************************************************************************************
user profile page
*****************************************************************************************************/
.profile .profile-content .latest-books .book-content {
  padding: 10px;
  background: #fff;
  margin-bottom: 30px;
}

.profile .profile-content .latest-books .book-content .book-cover {
  height: 230px;
  position: relative;
  overflow: hidden;
}
.profile .profile-content .latest-books .book-content .book-cover a img {
  width: 100%;
  margin: 0;
  border: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.profile .profile-content .latest-books .book-content .book-name {
  font-size: 12px;
  margin: 5px 0;
}

.profile .profile-content .latest-books .book-content .book-price {
  margin: 0;
  font-weight: 500;
  font: 11px;
}
.followers-table tr:hover a{
  color: inherit !important;
}
/****************************************************************************************************
book details page
*****************************************************************************************************/
.book-details .book-info .star-container .star {
cursor: pointer;
width: 18px !important;
}

.book-details .book-info .options button:not(.btn.btn-success) {
background: #7B2817 !important;
padding: 8px 20px;
border-radius: 0;
margin: 0 10px;
font-size: 17px;
}
.book-details .book-info .options .btn.btn-success {
  background-color: #28a745 !important;
  padding: 8px 20px;
  border-radius: 0;
  margin: 0 10px;
  }

.book-details .book-info .options button i {
color: inherit;
margin: 0 4px;
}
/* start book details modal style */
.book-modal {
  padding: 10px 25px;
  position: relative;
}
.book-modal .book-name {
   font-size: 20px;
   width: 90%;
 }
 .book-modal .book-number {
   opacity: .65;
   width: 90%;
 }
 .book-modal .book-number span {
   margin: 0 8px;
 }
 .book-modal h4 {
  font-size: 18px;
  margin-top: 30px;
}
.book-modal h4::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: #7b2817;
  margin-top: 15px;
}
.book-modal button.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: #393E46;
  padding: 20px;
  border: none;
 }
 .book-modal button.close-btn i {
   color:#fff;
 }

 .book-modal .info-list li {
  padding: 13px;
}
.book-modal .info-list li:nth-of-type(odd) {
  background: #fff;
  box-shadow: 0 3px 23px rgba(102, 102, 105, 0.1);
}
.book-modal .info-list li span.name {
  font-weight: 500;
  padding: 5px;
}
/* end  book details modal style */

/* reviews section */
.reviews-section .comments {
color: #393E46;
margin-top: 30px;
}

.reviews-section .comments .reviews-link {
background: #EEEEEE;
margin-top: -9px;
border: none;
padding: 10px 15px;
}

.reviews-section .comments .reviews-link:hover {
background: #7b2817;
}

.reviews-section .comments .comment .user-info .image {
position: relative;
}
.reviews-section .comments .comment .user-info .image img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.reviews-section .comments .comment .user-info .image i {
position: absolute;
right: -2px;
bottom: -1px;
color: #7b2817;
display: none;
}
.reviews-section .comments .comment .user-info .image i.active {
display: block;
}
.reviews-section .comments .comment .user-info .user-name {
margin: 0 10px;
font-size: 1.5rem;
font-weight: 600;
line-height: normal;
}
.reviews-section .comments .comment .user-info .user-name a {
  color: inherit;
}
/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
.mat-mdc-paginator, .mat-mdc-paginator-page-size .mat-select-trigger {
  font-family: 'Cairo',Tahoma, sans-serif !important;
  font-size: 18px !important;
}
.reviews-section .comments .comment .date {
opacity: 0.8;
font-size: 15px;
}

.reviews-section .comments .comment .comment-content {
margin: 5px 23px;
padding-left: 38px;
padding-bottom: 20px;
margin-right: 0;
/* border-left: 1px solid #D1D1D1; */
}
.reviews-section .comments .ng-star-inserted:not(:last-of-type) .comment .comment-content {
  border-left: 1px solid #D1D1D1;
}
.reviews-section .comments .comment .comment-content .comment-content {
  border: none !important;
}
.reviews-section .comments .comment .comment-content .comment-text {
font-size: 1.3rem;
}
.comment-text,.Quotations-text
{
  display: contents;
}
.readMore
{
  font-weight: bold;
    text-decoration: underline;
    color: #c03913;
    cursor: pointer;
}
.reviews-section .comments .comment .comment-content .comment-actions a,
.reviews-section .comments .comment .comment-content .comment-actions a:hover {
color: inherit;
}

.reviews-section .comments .comment .comment-content .comment-actions a::after {
content: "-";
margin: 0 5px;
}

.reviews-section .comments .comment .comment-content .comment-actions .like {
cursor: pointer;
color: #C5C8CC;
}

.reviews-section .comments .comment .comment-content .comment-actions .like .like-number {
margin: 0 5px;
}

.reviews-section .comments .comment .comment-content .comment-actions .like i {
cursor: pointer;
color: #C5C8CC;
}

.reviews-section .comments .comment .comment-content .comment-actions .like.active,
.reviews-section .comments .comment .comment-content .comment-actions .like.active i,
.reviews-section .comments .comment .comment-content .comment-actions a.active {
color: #7b2817;
font-weight: bold;
}

.reviews-section .comments .comment .comment-content .hide-link {
color: inherit;
opacity: .8;
display: inline-block;
margin: 10px 0;
}

.reviews-section .comments .end-comments {
margin-top: 30px
}

.reviews-section .comments .end-comments p {
margin: 0;
font-size: 12px;
}

.reviews-section .comments .end-comments .next-link {
border: 1px solid #E4E4E4;
padding: 7px 25px;
border-radius: 20px;
transition: all .5s;
color: inherit;
}

.reviews-section .comments .end-comments .next-link i {
transition: all .5s;
font-size: 11px;
}

.reviews-section .comments .end-comments .next-link:hover {
background: #7b2817;
}

.reviews-section .comments .end-comments .next-link:hover,
.reviews-section .comments .end-comments .next-link:hover i {
color: #fff;
}
.rate-value {
margin: 0 10px;
font-size: 12px;
}
/* end reviews section */
/****************************************** related books ******************************************/
/* start pagination */
.pagination {
margin: 0;
}
nav .pagination i {
margin: 0 8px;
}
nav .pagination i.fa-ellipsis-h {
margin: 10px !important;
}
nav .pagination>ul .page-item:last-of-type {
background: #eee;
}
/* end pagination */

/* end large book card */
.book-cards-lg {
  margin-top: 15px;
}
.book-cards-lg .heading-text-dark {
  margin: 0;
}
.book-cards-lg a.reviews-link {
  font-size: 12px;
  padding: 10px 15px;
  margin: 0;
}
.book-cards-lg a.reviews-link span {
  opacity: .65;
}
.book-cards-lg .book {
  margin-bottom: 30px;
}
.book-cards-lg .book-container .book-cover {
  height: 260px;
  overflow: hidden;
  max-width: 230px;
  margin-bottom: 8px;
  position: relative;
  background: #fff;
  padding: 10px;
}

.book-cards-lg .book-container .book-cover img {
  border: none;
  width: 100%;
  margin: 0;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.book-cards-lg .book-info {
  color: #393E46;
}
.book-cards-lg .book-info .rating .stars i {
  cursor: unset;
}
.book-cards-lg .book-info .book-price .new,
.book-cards-lg .book-name {
  font-size: 24px;
  font-weight: bold;
}
.book-cards-lg .book-info .book-price .old {
  text-decoration: line-through;
  margin: 0 10px;
  opacity: .64;
}
.book-cards-lg .book-info .book-intro {
  color: #6F7175;
}
.book-cards-lg .book-info .rate-value {
  margin: 0 10px;
  font-size: 15px;
  padding-top: 12px;
}
.book-cards-lg .book-info .rate-value .value {
  font-size: 15px;
  font-weight: bold;
  padding: 0 5px;
}
.book-cards-lg .book-info a {
  padding: 8px 20px !important;
  margin: 0 !important;
}
.book-cards-lg .book-info a i {
  font-size: 10px;
  margin: 0 2px;
}
/* end large book card */

/* best seller books */
.related-books .best-seller-books .ngucarousel {
position: static !important;
}
.best-seller-books {
  padding-top: 15px;
}
.best-seller-books .heading {
margin: 0 10px 30px;
}

.best-seller-books .heading .heading-link {
color: #393E46;
border: 1px solid #E4E4E4;
padding: 7px 15px;
border-radius: 20px;
transition: all .5s;
display: inline-block;
}

.best-seller-books .heading .heading-link:hover {
background-color: #7b2817;
color: #fff;
}

.best-seller-books .slide-content {
min-height: 440px;
}

.best-seller-books .book-cards .book-card {
  background: #fff;
  padding: 10px;
  margin: 0 10px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  max-width: 260px;
}
.tap-payments-header-close-icon{
  display: none !important
}
.best-seller-books .book-cards .book-card .rating {
  margin: 0;
}
.best-seller-books .book-cards .book-card .book-cover {
  height: 260px;
  position: relative;
  overflow: hidden;
}

.best-seller-books .book-cards .book-card .book-cover a img {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  bottom: 0;
  top: 0;
  margin: auto !important;
  object-fit: contain;
  /* min-height: 100%;
  object-fit: cover;
  object-position: top; */
}
.best-seller-books .book-cards .book-card .book-cover .book-interest-status {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #7b2817;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
}
.profile .best-seller-books .book-cards .book-card .book-cover .book-interest-status {
  display: block !important;
}
.best-seller-books .book-cards .book-card .book-title {
  font-size: 20px;
  color: #0d0d0d;
  font-weight: 500;
  margin: 8px 0;
  min-height: 42px;
}

.best-seller-books .book-cards .book-card .book-price {
  margin: 0;
  color: #393E46;
}
.best-seller-books .book-cards .book-card .book-price span {
  font-size: 17px;
  display: inline-block;
  color: #565656;
}
.best-seller-books .book-cards .book-card .more-info {
  margin-top: 10px;
  transition: transform .7s, max-height .3s;
  max-height: 0;
  overflow: hidden;
  transform: translateY(100px);
}

.best-seller-books .book-cards .book-card:hover .more-info {
  max-height: 200px;
  transform: translateY(0);
}

.best-seller-books .book-cards .book-card .more-info .icon {
  margin: 0 10px;
  cursor: pointer;
}

.best-seller-books .book-cards .book-card .more-info .btn:not(.btn.btn-success) {
  background: #7B2817 !important;
  border-radius: 0;
  font-size: 15px;
  padding: 7px 10px;
  margin: 2px 0;
}
.best-seller-books .book-cards .book-card .more-info .btn.btn-success {
  background-color: #28a745 !important;
  border-radius: 0;
  font-size: 12px;
  padding: 7px 10px;
  margin: 2px 0;
}
.best-seller-books .book-cards .book-card .more-info .btn i {
  color: #fff;
  padding: 0 5px;
  display: none;
}
.related-books .best-seller-books button.rightRs,
.related-books .best-seller-books button.leftRs {
  background: transparent;
  top: -47px;
  bottom: auto;
  width: 35px !important;
  height: 35px !important;
  background: #fff;
  box-shadow: 0 0 5px rgba(9, 8, 8, 0.21);
  border: none;
}
.related-books .best-seller-books button.rightRs:active , .related-books .best-seller-books button.leftRs:active {
  box-shadow: 0 0 2px rgba(9, 8, 8, 0.21);
}
.related-books .best-seller-books button.rightRs.disabled , .related-books .best-seller-books button.leftRs.disabled {
  cursor: not-allowed;
  box-shadow: 0 0 5px rgba(9, 8, 8, 0.21);
  background: #fafafa;
}
.related-books .best-seller-books button.leftRs {
  left: auto;
  right: 60px;
}

.best-seller-books button.rightRs i,
.best-seller-books button.leftRs i {
  color: #393E46 !important;
  font-size: 14px !important;
}
.best-seller-books .book-cards .book-card .cart-options .custom-input-number {
margin: 2px 5px;
}
.best-seller-books .book-cards .book-card .cart-options .custom-input-number input {
width: 30px;
padding: 10px 0;
}
.best-seller-books .book-cards .book-card .cart-options .custom-input-number i {
padding: 5px;
}

.books {
  padding: 50px 0;
  max-width: 1366px;
  margin: auto;
}
.books .books-search-input {
  padding: 11px;
}
.books .search-actions .request-book-link {
  padding: 10px 18px !important;
  font-size: 16px;
  line-height: .6;
}
.books .search-actions .request-book-link i {
  color: inherit;
  font-size: inherit;
}
.request-book-form .form-control {
  height: 40px !important;
 }
.books .book-card {
margin-bottom: 30px !important;
}

/* .books .filter {
background: #393E46;
color: #fff;
margin-bottom: 40px;
}
.books .filter .mat-slider-thumb-label-text {
color: #393e46 !important;
}
.books .filter .mat-accent .mat-slider-thumb, .books .filter .mat-accent .mat-slider-thumb-label, .books .filter .mat-accent .mat-slider-track-fill {
background: #fff;
}
@media (max-width: 575.98px) {
.books .filter {
  margin-bottom: 15px;
  transition: all .5s ease-in-out !important;
  max-width: 10000px !important;
}

.books .filter .filter-content.closed {
  max-height: 0;
  padding: 0;
}
}

.books .filter .title {
background: #333840;
padding: 15px 0;
cursor: pointer;
font-size: 16px;
}

.books .filter,
.books .filter .title .text,
.books .filter .filter-content {
transition: all .3s;
}

.books .filter .title .text.closed {
display: none
}

.books .filter.closed {
max-width: 90px;
}

.books .filter .filter-content.closed {
opacity: 0;
}

.books .filter .title i {
color: inherit;
margin: 0 10px;
}

.books .filter .filter-content {
padding: 15px 10px 0;
overflow: hidden;
}

.books .filter .filter-content h5 {
font-size: 16px;
margin: 25px 0 20px;
position: relative;
}

.books .filter .filter-content h5::after {
content: "";
display: inline-block;
width: 25%;
background: #53575E;
height: 1px;
position: absolute;
top: 60%;
right: -8px;
}

.books .filter .filter-content .form-control {
padding: 0 5px;
border-radius: 0;
box-shadow: none;
border: 1px solid #53575E;
background: #393e46;
color: #fff;
height: 45px;
}

.books .filter .filter-content .custom-select-box {
position: relative;
}

.books .filter .filter-content .custom-select-box .form-control {
padding-left: 27px;
}

.books .filter .filter-content .custom-select-box i {
position: absolute;
color: #6D747E;
left: 8px;
top: 15.5px;
width: 0;
}

.books .filter .filter-content .custom-check label input {
display: none;
}

.books .filter .filter-content .custom-check label div {
padding: 8px;
cursor: pointer;
}

.books .filter .filter-content .custom-check label div i {
opacity: 0;
transition: all .5s;
font-size: 11px;
}

.books .filter .filter-content .custom-check label div .icon {
border: 1px solid #53575E;
display: inline-block;
width: 18px;
height: 18px;
text-align: center;
line-height: 1.2;
margin-right: 10px;
background: transparent;
}

.books .filter .filter-content .custom-check label input:checked+div.content {
background: #353941;
}

.books .filter .filter-content button {
width: 100%;
padding: 10px 0;
color: #7b2817 !important;
border-radius: 0;
background: #fff !important;
margin: 15px 0;
border: 2px solid #53575E;
}

.books .filter .filter-content button:hover {
color: #fff !important;
background: transparent !important;
}

.books .filter .filter-content .custom-check label input:checked+div i {
color: #fff;
opacity: 1;
} */

.books .filter {
  align-self: flex-start;
  border: 1px solid #dee2e6;
}
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
.books .filter .mat-slider-thumb-label-text {
  color: #fff !important;
}
/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
.books .filter .mat-accent .mat-slider-thumb, .books .filter .mat-accent .mat-slider-thumb-label, .books .filter .mat-accent .mat-slider-track-fill {
  background: #333840;
}

.books .filter .title {
  font-size: 18px;
  font-weight: bold;
  background: #333840;
  color: #fff;
  padding: 12px 0;
  border-bottom: 2px solid #dee2e6;
  line-height: 1;
}

.books .filter .title i {
  color: inherit;
  margin: 0 10px;
}

.books .filter .filter-content .mat-expansion-panel .mat-expansion-panel-header {
  background: #fff !important;
  max-height: 45px !important;
  border: 1px solid #dee2e6;
  margin: 10px 2px 0;
  padding: 10px;
  border-radius: 0;
}
.books .filter .filter-content .mat-expansion-panel {
  background: transparent;
  box-shadow: none;
}
.books .filter .filter-content .mat-expansion-panel .mat-expansion-panel-body {
  padding: 10px 5px;
  background: rgba(0, 0, 0, .01);
  margin: 0 2px;
  border: 1px solid #dee2e6;
  border-top: 0;
  margin-bottom: 10px;
  overflow: hidden;
}
.books .filter .filter-content .mat-expansion-panel.select-list .mat-expansion-panel-body {
  max-height: 270px;
}
.books .filter .filter-content .mat-expansion-panel.select-list .mat-expansion-panel-body:hover {
  overflow-y: auto;
}
.books .filter .filter-content h5 {
  font-size: 18px;
  position: relative;
  margin: 0;
}
.books .filter .filter-content .form-control {
  padding: 0 5px;
  border-radius: 0;
  box-shadow: none;
  height: 38px;
  margin-bottom: 5px;
  font-size: 15px;
  min-height: 30px;
}
.books .filter .filter-content .custom-check label input {
display: none;
}
.books .filter .filter-content .custom-check label .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
}

.books .filter .filter-content .custom-check label > span {
  padding: 2px 0;
  max-width: 100%;
  font-size: 13px;
}

.books .filter .filter-content .custom-check label > span i {
  opacity: 0;
  font-size: 11px;
}

.books .filter .filter-content .custom-check label > span .icon {
  border: 1px solid #53575E;
  display: inline-block;
  min-width: 18px;
  height: 18px;
  text-align: center;
  line-height: 1.2;
  background: transparent;
  cursor: pointer;
}
.books .filter .filter-content .custom-check.availability label > span .icon {
  border-radius: 50%;
}
.books .filter .filter-content button {
  padding: 5px 18px;
  color: #7b2817 !important;
  border-radius: 0;
  background: #fff !important;
  margin: 0 6px;
  border: 1px solid #53575E;
}
.books .filter .filter-content button.filter-btn {
  width: 96%;
  margin: 20px auto 5px;
  display: block;
  height: 42px;
  font-size: 18px;
}

.books .filter .filter-content button:hover {
  color: #fff !important;
  background: #7b2817 !important;
}

.books .filter .filter-content .custom-check label input:checked+span i {
  opacity: 1;
}
/* end best seller books */

/****************************************** end related books ******************************************/

/****************************************** reviews and rating ******************************************/
a.reviews-link {
color: #5C636E;
border: 1px solid #DCDCDC;
display: inline-block;
margin-top: 15px;
padding: 10px 30px;
font-weight: 500;
transition: all .5s;
}

a.reviews-link:hover {
background: #7b2817;
color: #fff !important;
}

a.reviews-link i {
transition: all .5s;
}

a.reviews-link:hover i {
color: #fff;
}
.rating {
justify-content: start !important;
outline: none;
margin-bottom: 0 !important;
}

.rating .stars i:first-of-type {
margin-left: 0;
}
.rating.medium .star {
margin: 0 1px;
}
.rating.medium .star {
width: 15px !important;
}
.star-container {
margin: 0 !important;
}
/****************************************** end reviews and rating ******************************************/


/****************************************** books-categories-section ******************************************/
.books-categories-section .category-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 5px;
}
.books-categories-section .mat-expansion-panel-header {
  padding: 0 10px !important;
  min-height: 70px !important;
  height: auto !important;
}
.books-categories-section .mat-accordion .mat-expansion-panel:not(.mat-expanded), .books-categories-section .mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
  margin-bottom: 15px;
}
.books-categories-section .mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: none;
  border: 1px solid rgba(0,0,0,.1);
}
.books-categories-section .mat-expansion-panel-spacing .mat-expansion-panel-header {
  background: rgba(0,0,0,.04) !important;
  border-bottom: 2px solid rgba(0,0,0,.1);
}
.books-categories-section .mat-expansion-panel-spacing .mat-expansion-panel-content {
  background: rgba(250, 250, 250, 0.6);
}
.books-categories-section .mat-expansion-panel-spacing .mat-expansion-panel-content .mat-expansion-panel-body {
  padding: 30px 10px 15px;
}

/****************************************** books-categories-section ******************************************/
/*rating*/
/****************************************************************
*
* CSS Percentage Circle
* Author: Andre Firchow
*
*****************************************************************/
.rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
clip: rect(auto, auto, auto, auto);
}

.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
position: absolute;
border: 0.08em solid #F8B500;
width: 1em;
height: 1em;
clip: rect(0em, 0.5em, 1em, 0em);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

.pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
float: left;
background-color: #F1F1F1;
}
.c200{
  background-color: white;
}
.c100 *, .c100 *:before, .c100 *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.c100.center {
float: none;
margin: 0 auto;
}
.c100.big {
font-size: 240px;
}
.c100.small {
font-size: 35px;
}
.c100 > span {
position: absolute;
width: 100%;
z-index: 1;
left: 0;
top: 0;
width: 2.8em;
line-height: 2.7em;
font-size: 13px;
color: #393E46;
display: block;
text-align: center;
white-space: nowrap;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.c100:after {
position: absolute;
top: 0.08em;
left: 0.08em;
display: block;
content: " ";
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
width: 0.84em;
height: 0.84em;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.c100 .slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar {
-webkit-transform: rotate(3.6deg);
-moz-transform: rotate(3.6deg);
-ms-transform: rotate(3.6deg);
-o-transform: rotate(3.6deg);
transform: rotate(3.6deg);
}
.c100.p2 .bar {
-webkit-transform: rotate(7.2deg);
-moz-transform: rotate(7.2deg);
-ms-transform: rotate(7.2deg);
-o-transform: rotate(7.2deg);
transform: rotate(7.2deg);
}
.c100.p3 .bar {
-webkit-transform: rotate(10.8deg);
-moz-transform: rotate(10.8deg);
-ms-transform: rotate(10.8deg);
-o-transform: rotate(10.8deg);
transform: rotate(10.8deg);
}
.c100.p4 .bar {
-webkit-transform: rotate(14.4deg);
-moz-transform: rotate(14.4deg);
-ms-transform: rotate(14.4deg);
-o-transform: rotate(14.4deg);
transform: rotate(14.4deg);
}
.c100.p5 .bar {
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
.c100.p6 .bar {
-webkit-transform: rotate(21.6deg);
-moz-transform: rotate(21.6deg);
-ms-transform: rotate(21.6deg);
-o-transform: rotate(21.6deg);
transform: rotate(21.6deg);
}
.c100.p7 .bar {
-webkit-transform: rotate(25.2deg);
-moz-transform: rotate(25.2deg);
-ms-transform: rotate(25.2deg);
-o-transform: rotate(25.2deg);
transform: rotate(25.2deg);
}
.c100.p8 .bar {
-webkit-transform: rotate(28.8deg);
-moz-transform: rotate(28.8deg);
-ms-transform: rotate(28.8deg);
-o-transform: rotate(28.8deg);
transform: rotate(28.8deg);
}
.c100.p9 .bar {
-webkit-transform: rotate(32.4deg);
-moz-transform: rotate(32.4deg);
-ms-transform: rotate(32.4deg);
-o-transform: rotate(32.4deg);
transform: rotate(32.4deg);
}
.c100.p10 .bar {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
.c100.p11 .bar {
-webkit-transform: rotate(39.6deg);
-moz-transform: rotate(39.6deg);
-ms-transform: rotate(39.6deg);
-o-transform: rotate(39.6deg);
transform: rotate(39.6deg);
}
.c100.p12 .bar {
-webkit-transform: rotate(43.2deg);
-moz-transform: rotate(43.2deg);
-ms-transform: rotate(43.2deg);
-o-transform: rotate(43.2deg);
transform: rotate(43.2deg);
}
.c100.p13 .bar {
-webkit-transform: rotate(46.8deg);
-moz-transform: rotate(46.8deg);
-ms-transform: rotate(46.8deg);
-o-transform: rotate(46.8deg);
transform: rotate(46.8deg);
}
.c100.p14 .bar {
-webkit-transform: rotate(50.4deg);
-moz-transform: rotate(50.4deg);
-ms-transform: rotate(50.4deg);
-o-transform: rotate(50.4deg);
transform: rotate(50.4deg);
}
.c100.p15 .bar {
-webkit-transform: rotate(54deg);
-moz-transform: rotate(54deg);
-ms-transform: rotate(54deg);
-o-transform: rotate(54deg);
transform: rotate(54deg);
}
.c100.p16 .bar {
-webkit-transform: rotate(57.6deg);
-moz-transform: rotate(57.6deg);
-ms-transform: rotate(57.6deg);
-o-transform: rotate(57.6deg);
transform: rotate(57.6deg);
}
.c100.p17 .bar {
-webkit-transform: rotate(61.2deg);
-moz-transform: rotate(61.2deg);
-ms-transform: rotate(61.2deg);
-o-transform: rotate(61.2deg);
transform: rotate(61.2deg);
}
.c100.p18 .bar {
-webkit-transform: rotate(64.8deg);
-moz-transform: rotate(64.8deg);
-ms-transform: rotate(64.8deg);
-o-transform: rotate(64.8deg);
transform: rotate(64.8deg);
}
.c100.p19 .bar {
-webkit-transform: rotate(68.4deg);
-moz-transform: rotate(68.4deg);
-ms-transform: rotate(68.4deg);
-o-transform: rotate(68.4deg);
transform: rotate(68.4deg);
}
.c100.p20 .bar {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
.c100.p21 .bar {
-webkit-transform: rotate(75.6deg);
-moz-transform: rotate(75.6deg);
-ms-transform: rotate(75.6deg);
-o-transform: rotate(75.6deg);
transform: rotate(75.6deg);
}
.c100.p22 .bar {
-webkit-transform: rotate(79.2deg);
-moz-transform: rotate(79.2deg);
-ms-transform: rotate(79.2deg);
-o-transform: rotate(79.2deg);
transform: rotate(79.2deg);
}
.c100.p23 .bar {
-webkit-transform: rotate(82.8deg);
-moz-transform: rotate(82.8deg);
-ms-transform: rotate(82.8deg);
-o-transform: rotate(82.8deg);
transform: rotate(82.8deg);
}
.c100.p24 .bar {
-webkit-transform: rotate(86.4deg);
-moz-transform: rotate(86.4deg);
-ms-transform: rotate(86.4deg);
-o-transform: rotate(86.4deg);
transform: rotate(86.4deg);
}
.c100.p25 .bar {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.c100.p26 .bar {
-webkit-transform: rotate(93.6deg);
-moz-transform: rotate(93.6deg);
-ms-transform: rotate(93.6deg);
-o-transform: rotate(93.6deg);
transform: rotate(93.6deg);
}
.c100.p27 .bar {
-webkit-transform: rotate(97.2deg);
-moz-transform: rotate(97.2deg);
-ms-transform: rotate(97.2deg);
-o-transform: rotate(97.2deg);
transform: rotate(97.2deg);
}
.c100.p28 .bar {
-webkit-transform: rotate(100.8deg);
-moz-transform: rotate(100.8deg);
-ms-transform: rotate(100.8deg);
-o-transform: rotate(100.8deg);
transform: rotate(100.8deg);
}
.c100.p29 .bar {
-webkit-transform: rotate(104.4deg);
-moz-transform: rotate(104.4deg);
-ms-transform: rotate(104.4deg);
-o-transform: rotate(104.4deg);
transform: rotate(104.4deg);
}
.c100.p30 .bar {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
}
.c100.p31 .bar {
-webkit-transform: rotate(111.6deg);
-moz-transform: rotate(111.6deg);
-ms-transform: rotate(111.6deg);
-o-transform: rotate(111.6deg);
transform: rotate(111.6deg);
}
.c100.p32 .bar {
-webkit-transform: rotate(115.2deg);
-moz-transform: rotate(115.2deg);
-ms-transform: rotate(115.2deg);
-o-transform: rotate(115.2deg);
transform: rotate(115.2deg);
}
.c100.p33 .bar {
-webkit-transform: rotate(118.8deg);
-moz-transform: rotate(118.8deg);
-ms-transform: rotate(118.8deg);
-o-transform: rotate(118.8deg);
transform: rotate(118.8deg);
}
.c100.p34 .bar {
-webkit-transform: rotate(122.4deg);
-moz-transform: rotate(122.4deg);
-ms-transform: rotate(122.4deg);
-o-transform: rotate(122.4deg);
transform: rotate(122.4deg);
}
.c100.p35 .bar {
-webkit-transform: rotate(126deg);
-moz-transform: rotate(126deg);
-ms-transform: rotate(126deg);
-o-transform: rotate(126deg);
transform: rotate(126deg);
}
.c100.p36 .bar {
-webkit-transform: rotate(129.6deg);
-moz-transform: rotate(129.6deg);
-ms-transform: rotate(129.6deg);
-o-transform: rotate(129.6deg);
transform: rotate(129.6deg);
}
.c100.p37 .bar {
-webkit-transform: rotate(133.2deg);
-moz-transform: rotate(133.2deg);
-ms-transform: rotate(133.2deg);
-o-transform: rotate(133.2deg);
transform: rotate(133.2deg);
}
.c100.p38 .bar {
-webkit-transform: rotate(136.8deg);
-moz-transform: rotate(136.8deg);
-ms-transform: rotate(136.8deg);
-o-transform: rotate(136.8deg);
transform: rotate(136.8deg);
}
.c100.p39 .bar {
-webkit-transform: rotate(140.4deg);
-moz-transform: rotate(140.4deg);
-ms-transform: rotate(140.4deg);
-o-transform: rotate(140.4deg);
transform: rotate(140.4deg);
}
.c100.p40 .bar {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
}
.c100.p41 .bar {
-webkit-transform: rotate(147.6deg);
-moz-transform: rotate(147.6deg);
-ms-transform: rotate(147.6deg);
-o-transform: rotate(147.6deg);
transform: rotate(147.6deg);
}
.c100.p42 .bar {
-webkit-transform: rotate(151.2deg);
-moz-transform: rotate(151.2deg);
-ms-transform: rotate(151.2deg);
-o-transform: rotate(151.2deg);
transform: rotate(151.2deg);
}
.c100.p43 .bar {
-webkit-transform: rotate(154.8deg);
-moz-transform: rotate(154.8deg);
-ms-transform: rotate(154.8deg);
-o-transform: rotate(154.8deg);
transform: rotate(154.8deg);
}
.c100.p44 .bar {
-webkit-transform: rotate(158.4deg);
-moz-transform: rotate(158.4deg);
-ms-transform: rotate(158.4deg);
-o-transform: rotate(158.4deg);
transform: rotate(158.4deg);
}
.c100.p45 .bar {
-webkit-transform: rotate(162deg);
-moz-transform: rotate(162deg);
-ms-transform: rotate(162deg);
-o-transform: rotate(162deg);
transform: rotate(162deg);
}
.c100.p46 .bar {
-webkit-transform: rotate(165.6deg);
-moz-transform: rotate(165.6deg);
-ms-transform: rotate(165.6deg);
-o-transform: rotate(165.6deg);
transform: rotate(165.6deg);
}
.c100.p47 .bar {
-webkit-transform: rotate(169.2deg);
-moz-transform: rotate(169.2deg);
-ms-transform: rotate(169.2deg);
-o-transform: rotate(169.2deg);
transform: rotate(169.2deg);
}
.c100.p48 .bar {
-webkit-transform: rotate(172.8deg);
-moz-transform: rotate(172.8deg);
-ms-transform: rotate(172.8deg);
-o-transform: rotate(172.8deg);
transform: rotate(172.8deg);
}
.c100.p49 .bar {
-webkit-transform: rotate(176.4deg);
-moz-transform: rotate(176.4deg);
-ms-transform: rotate(176.4deg);
-o-transform: rotate(176.4deg);
transform: rotate(176.4deg);
}
.c100.p50 .bar {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.c100.p51 .bar {
-webkit-transform: rotate(183.6deg);
-moz-transform: rotate(183.6deg);
-ms-transform: rotate(183.6deg);
-o-transform: rotate(183.6deg);
transform: rotate(183.6deg);
}
.c100.p52 .bar {
-webkit-transform: rotate(187.2deg);
-moz-transform: rotate(187.2deg);
-ms-transform: rotate(187.2deg);
-o-transform: rotate(187.2deg);
transform: rotate(187.2deg);
}
.c100.p53 .bar {
-webkit-transform: rotate(190.8deg);
-moz-transform: rotate(190.8deg);
-ms-transform: rotate(190.8deg);
-o-transform: rotate(190.8deg);
transform: rotate(190.8deg);
}
.c100.p54 .bar {
-webkit-transform: rotate(194.4deg);
-moz-transform: rotate(194.4deg);
-ms-transform: rotate(194.4deg);
-o-transform: rotate(194.4deg);
transform: rotate(194.4deg);
}
.c100.p55 .bar {
-webkit-transform: rotate(198deg);
-moz-transform: rotate(198deg);
-ms-transform: rotate(198deg);
-o-transform: rotate(198deg);
transform: rotate(198deg);
}
.c100.p56 .bar {
-webkit-transform: rotate(201.6deg);
-moz-transform: rotate(201.6deg);
-ms-transform: rotate(201.6deg);
-o-transform: rotate(201.6deg);
transform: rotate(201.6deg);
}
.c100.p57 .bar {
-webkit-transform: rotate(205.2deg);
-moz-transform: rotate(205.2deg);
-ms-transform: rotate(205.2deg);
-o-transform: rotate(205.2deg);
transform: rotate(205.2deg);
}
.c100.p58 .bar {
-webkit-transform: rotate(208.8deg);
-moz-transform: rotate(208.8deg);
-ms-transform: rotate(208.8deg);
-o-transform: rotate(208.8deg);
transform: rotate(208.8deg);
}
.c100.p59 .bar {
-webkit-transform: rotate(212.4deg);
-moz-transform: rotate(212.4deg);
-ms-transform: rotate(212.4deg);
-o-transform: rotate(212.4deg);
transform: rotate(212.4deg);
}
.c100.p60 .bar {
-webkit-transform: rotate(216deg);
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-o-transform: rotate(216deg);
transform: rotate(216deg);
}
.c100.p61 .bar {
-webkit-transform: rotate(219.6deg);
-moz-transform: rotate(219.6deg);
-ms-transform: rotate(219.6deg);
-o-transform: rotate(219.6deg);
transform: rotate(219.6deg);
}
.c100.p62 .bar {
-webkit-transform: rotate(223.2deg);
-moz-transform: rotate(223.2deg);
-ms-transform: rotate(223.2deg);
-o-transform: rotate(223.2deg);
transform: rotate(223.2deg);
}
.c100.p63 .bar {
-webkit-transform: rotate(226.8deg);
-moz-transform: rotate(226.8deg);
-ms-transform: rotate(226.8deg);
-o-transform: rotate(226.8deg);
transform: rotate(226.8deg);
}
.c100.p64 .bar {
-webkit-transform: rotate(230.4deg);
-moz-transform: rotate(230.4deg);
-ms-transform: rotate(230.4deg);
-o-transform: rotate(230.4deg);
transform: rotate(230.4deg);
}
.c100.p65 .bar {
-webkit-transform: rotate(234deg);
-moz-transform: rotate(234deg);
-ms-transform: rotate(234deg);
-o-transform: rotate(234deg);
transform: rotate(234deg);
}
.c100.p66 .bar {
-webkit-transform: rotate(237.6deg);
-moz-transform: rotate(237.6deg);
-ms-transform: rotate(237.6deg);
-o-transform: rotate(237.6deg);
transform: rotate(237.6deg);
}
.c100.p67 .bar {
-webkit-transform: rotate(241.2deg);
-moz-transform: rotate(241.2deg);
-ms-transform: rotate(241.2deg);
-o-transform: rotate(241.2deg);
transform: rotate(241.2deg);
}
.c100.p68 .bar {
-webkit-transform: rotate(244.8deg);
-moz-transform: rotate(244.8deg);
-ms-transform: rotate(244.8deg);
-o-transform: rotate(244.8deg);
transform: rotate(244.8deg);
}
.c100.p69 .bar {
-webkit-transform: rotate(248.4deg);
-moz-transform: rotate(248.4deg);
-ms-transform: rotate(248.4deg);
-o-transform: rotate(248.4deg);
transform: rotate(248.4deg);
}
.c100.p70 .bar {
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-o-transform: rotate(252deg);
transform: rotate(252deg);
}
.c100.p71 .bar {
-webkit-transform: rotate(255.6deg);
-moz-transform: rotate(255.6deg);
-ms-transform: rotate(255.6deg);
-o-transform: rotate(255.6deg);
transform: rotate(255.6deg);
}
.c100.p72 .bar {
-webkit-transform: rotate(259.2deg);
-moz-transform: rotate(259.2deg);
-ms-transform: rotate(259.2deg);
-o-transform: rotate(259.2deg);
transform: rotate(259.2deg);
}
.c100.p73 .bar {
-webkit-transform: rotate(262.8deg);
-moz-transform: rotate(262.8deg);
-ms-transform: rotate(262.8deg);
-o-transform: rotate(262.8deg);
transform: rotate(262.8deg);
}
.c100.p74 .bar {
-webkit-transform: rotate(266.4deg);
-moz-transform: rotate(266.4deg);
-ms-transform: rotate(266.4deg);
-o-transform: rotate(266.4deg);
transform: rotate(266.4deg);
}
.c100.p75 .bar {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.c100.p76 .bar {
-webkit-transform: rotate(273.6deg);
-moz-transform: rotate(273.6deg);
-ms-transform: rotate(273.6deg);
-o-transform: rotate(273.6deg);
transform: rotate(273.6deg);
}
.c100.p77 .bar {
-webkit-transform: rotate(277.2deg);
-moz-transform: rotate(277.2deg);
-ms-transform: rotate(277.2deg);
-o-transform: rotate(277.2deg);
transform: rotate(277.2deg);
}
.c100.p78 .bar {
-webkit-transform: rotate(280.8deg);
-moz-transform: rotate(280.8deg);
-ms-transform: rotate(280.8deg);
-o-transform: rotate(280.8deg);
transform: rotate(280.8deg);
}
.c100.p79 .bar {
-webkit-transform: rotate(284.4deg);
-moz-transform: rotate(284.4deg);
-ms-transform: rotate(284.4deg);
-o-transform: rotate(284.4deg);
transform: rotate(284.4deg);
}
.c100.p80 .bar {
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
}
.c100.p81 .bar {
-webkit-transform: rotate(291.6deg);
-moz-transform: rotate(291.6deg);
-ms-transform: rotate(291.6deg);
-o-transform: rotate(291.6deg);
transform: rotate(291.6deg);
}
.c100.p82 .bar {
-webkit-transform: rotate(295.2deg);
-moz-transform: rotate(295.2deg);
-ms-transform: rotate(295.2deg);
-o-transform: rotate(295.2deg);
transform: rotate(295.2deg);
}
.c100.p83 .bar {
-webkit-transform: rotate(298.8deg);
-moz-transform: rotate(298.8deg);
-ms-transform: rotate(298.8deg);
-o-transform: rotate(298.8deg);
transform: rotate(298.8deg);
}
.c100.p84 .bar {
-webkit-transform: rotate(302.4deg);
-moz-transform: rotate(302.4deg);
-ms-transform: rotate(302.4deg);
-o-transform: rotate(302.4deg);
transform: rotate(302.4deg);
}
.c100.p85 .bar {
-webkit-transform: rotate(306deg);
-moz-transform: rotate(306deg);
-ms-transform: rotate(306deg);
-o-transform: rotate(306deg);
transform: rotate(306deg);
}
.c100.p86 .bar {
-webkit-transform: rotate(309.6deg);
-moz-transform: rotate(309.6deg);
-ms-transform: rotate(309.6deg);
-o-transform: rotate(309.6deg);
transform: rotate(309.6deg);
}
.c100.p87 .bar {
-webkit-transform: rotate(313.2deg);
-moz-transform: rotate(313.2deg);
-ms-transform: rotate(313.2deg);
-o-transform: rotate(313.2deg);
transform: rotate(313.2deg);
}
.c100.p88 .bar {
-webkit-transform: rotate(316.8deg);
-moz-transform: rotate(316.8deg);
-ms-transform: rotate(316.8deg);
-o-transform: rotate(316.8deg);
transform: rotate(316.8deg);
}
.c100.p89 .bar {
-webkit-transform: rotate(320.4deg);
-moz-transform: rotate(320.4deg);
-ms-transform: rotate(320.4deg);
-o-transform: rotate(320.4deg);
transform: rotate(320.4deg);
}
.c100.p90 .bar {
-webkit-transform: rotate(324deg);
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-o-transform: rotate(324deg);
transform: rotate(324deg);
}
.c100.p91 .bar {
-webkit-transform: rotate(327.6deg);
-moz-transform: rotate(327.6deg);
-ms-transform: rotate(327.6deg);
-o-transform: rotate(327.6deg);
transform: rotate(327.6deg);
}
.c100.p92 .bar {
-webkit-transform: rotate(331.2deg);
-moz-transform: rotate(331.2deg);
-ms-transform: rotate(331.2deg);
-o-transform: rotate(331.2deg);
transform: rotate(331.2deg);
}
.c100.p93 .bar {
-webkit-transform: rotate(334.8deg);
-moz-transform: rotate(334.8deg);
-ms-transform: rotate(334.8deg);
-o-transform: rotate(334.8deg);
transform: rotate(334.8deg);
}
.c100.p94 .bar {
-webkit-transform: rotate(338.4deg);
-moz-transform: rotate(338.4deg);
-ms-transform: rotate(338.4deg);
-o-transform: rotate(338.4deg);
transform: rotate(338.4deg);
}
.c100.p95 .bar {
-webkit-transform: rotate(342deg);
-moz-transform: rotate(342deg);
-ms-transform: rotate(342deg);
-o-transform: rotate(342deg);
transform: rotate(342deg);
}
.c100.p96 .bar {
-webkit-transform: rotate(345.6deg);
-moz-transform: rotate(345.6deg);
-ms-transform: rotate(345.6deg);
-o-transform: rotate(345.6deg);
transform: rotate(345.6deg);
}
.c100.p97 .bar {
-webkit-transform: rotate(349.2deg);
-moz-transform: rotate(349.2deg);
-ms-transform: rotate(349.2deg);
-o-transform: rotate(349.2deg);
transform: rotate(349.2deg);
}
.c100.p98 .bar {
-webkit-transform: rotate(352.8deg);
-moz-transform: rotate(352.8deg);
-ms-transform: rotate(352.8deg);
-o-transform: rotate(352.8deg);
transform: rotate(352.8deg);
}
.c100.p99 .bar {
-webkit-transform: rotate(356.4deg);
-moz-transform: rotate(356.4deg);
-ms-transform: rotate(356.4deg);
-o-transform: rotate(356.4deg);
transform: rotate(356.4deg);
}
.c100.p100 .bar {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.c100:hover {
cursor: default;
}
.ql-container > .ql-editor {
min-height: 300px
}

/* add book page */
.form-date .mat-mdc-form-field {
width: 100%;
}
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
.mat-checkbox-layout .mat-checkbox-label {
white-space: normal;
}
/* admin global style */
.admin-dropdown-list .dropdown-list {
  position: relative;
}
.nb-theme-default nb-layout .layout nb-layout-header nav {
  height: auto !important;
  padding: 5px 10px !important;
}
.nb-theme-default [_nghost-c1] nb-sidebar.menu-sidebar[_ngcontent-c1] {
  margin-top: 10px !important;
}
.nb-theme-default nb-layout .layout .layout-container .content .columns nb-layout-column {
  padding: 10px !important;
}
/* .nb-theme-default [nbButton] {
margin-bottom: 2px;
margin-top: 2px;
cursor: pointer !important;
} */
.nb-theme-default nb-card {
margin-bottom: 0 !important;
}
td.mat-mdc-cell:last-of-type, td.mat-mdc-footer-cell:last-of-type, th.mat-mdc-header-cell:last-of-type {
padding: 0 !important;
}
/* dropdown scroll bar */
.dropdown-list ::-webkit-scrollbar-thumb, .table-container::-webkit-scrollbar-thumb {
  background: #c2c7cc !important;
}
.dropdown-list ::-webkit-scrollbar {
  width: 9px !important;
}
/* dashboadrd updates */
/* buutons */
.dashboadrd-section .btn.btn-primary, [nbbutton], .dual-list .btn {
  background-color: #5450c0;
  padding: 10px 10px;
  border: none;
  color: #fff;
  border-radius: 4px;
}
.dashboadrd-section .btn.btn-primary.small-btn, [nbbutton].small-btn {
  padding: 8px 12px;
  font-size: 13px;
}
.dashboadrd-section .btn.btn-primary:hover, [nbbutton]:hover {
  background-color: #4a47a3;
}
.bg-image
{
  background-color: #7c7c7c !important;
}
.bg-image:hover
{
  background-color: #495057 !important;
}
/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.mat-tab-label
{
  font-size: 16px !important;
}
.table-container table .bg-success, .table-container table .bg-danger,.table-container table .bg-info, .table-container table [nbbutton] {
  border: none;
  color: #fff;
  font-size: 13px;
  padding: 4px 8px !important;
}
.btn.btn-danger {
  background-color: #dc3545 !important;
}
.btn.btn-danger:hover {
  background-color: #bd2130 !important;
}
.btn.btn-success {
  background-color: #28a745 !important;
}
.btn.btn-success:hover {
  background-color: #1e7e34 !important;
}
.large-btn {
  padding: 10px 25px !important;
}
.dashboadrd-section .page-item.active .page-link {
  background-color: #5450c0 !important;
  border-color: #5450c0 !important;
}
.form-control {
  height: auto !important;
  font-size: 1.1rem !important;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-appearance-legacy .mat-form-field-infix
{
  font-size: 1.1rem !important;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-infix {
  padding: 10px 0 !important;
}
.mat-mdc-dialog-actions {
  padding-bottom: 0 !important;
}
.mat-mdc-dialog-container button {
  font-size: 13px !important;
  padding: 8px 25px !important;
}
/* end dashboadrd updates */
form.filter::after {
display: none;
}
form.filter {
margin-bottom: 10px !important;
}
.list-group {
overflow-x: auto !important;
}
.uploade-img-label {
cursor: pointer;
text-align: center !important;
}
.uploade-img-label input {
display: none;
}
.add-genre button {
cursor: pointer;
}
.add-genre button.add-more {
padding: 12px 15px;
margin: 0;
}
.add-genre button.add-more i {
color: #fff;
}
.mat-mdc-card:not([class*=mat-elevation-z]) {
box-shadow: none !important;
}
/* fix selected tag issue */
.selected-list .c-list .c-token {
float: none !important;
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.selected-list .c-list .c-token .c-label {
float: none !important;
display: inline !important;
}
/* change category to sub category */
.fixd-categories-list .book-category-list {
  overflow: auto;
  max-height: 540px;
}
.fixd-categories-list .book-category-list .book-item:hover {
  background: whitesmoke;
}
/* admin order list style */
.nb-theme-default .form-control {
height: calc(2rem + 20px);
}
.mat-mdc-fab:not([class*=mat-elevation-z]), .mat-mdc-mini-fab:not([class*=mat-elevation-z]) {
/* width: auto; */
padding: 0px 10px !important;
}

.mat-mdc-select-panel:not([class*=mat-elevation-z]) {
min-width: auto !important;
}
.mat-calendar-arrow {
  border-top-color: #fff !important;
  margin-left: 10px !important;
}
/* goutes group */
.dual-list .listbox {
  margin: 0 5px !important;
}
.dual-list .button-bar {
  text-align: center;
  margin-top: 8px;
}
.dual-list .button-bar button {
  width: 40% !important;
  padding: 6px;
  margin: 0 5px;
}
/* invoice */
.invoice {
min-width: 950px;
overflow: auto;
padding: 10px 0;
}
.invoice * {
  font-family: monospace,'Cairo',Tahoma, Open Sans,sans-serif, Arial !important;
}
.invoice h2, .invoice h3 {
  font-family: 'Cairo',Tahoma, sans-serif !important;
}
.invoice .heading {
/* font-size: 24px; */
}
.invoice .highlight-text {
  color: #fff;
  background: #303641;
  padding: 10px;
  font-size: 16px;
  margin: 10px 0 0 0;
}
.invoice .shipping-details strong {
  min-width: 130px;
}
.invoice .bg-gray {
background: #f1f1f1;
padding: 10px;
}
.invoice .bg-gray select {
width: 200px;
height: 30px !important;
padding: 0 !important;
}
.invoice .contact-info {
margin: 12px 0;
}
.invoice p {
margin: 3px 0;
}
.invoice .bold-text, .invoice h5 {
 font-weight: bold !important;
}
.invoice h5 {
font-size: 16px;
margin-bottom: 15px;
}
.invoice .order-items {
  /* border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 8px 12px;
  margin: 3px 0; */
}
.invoice table {
  margin: 0;
}
.invoice table td {
  padding: 5px;
}
/* admin book list */
.table-container {
margin-top: 35px;
padding: 20px 15px;
border: 2px solid rgba(128, 128, 128, 0.2);
overflow: auto;
}
.table-container::-webkit-scrollbar {
  height: 8px !important;
}
.table-container .pagination {
justify-content: center;
margin: 10px 0;
}
.table-container .btn-xsmall {
margin: 2px 0;
}
.table-container .nb-theme-default [nbButton] {
  padding-left: 10px !important;
  padding-right: 10px !important;
  min-height: 30px;
}
/* datepicker */
.mat-datepicker-content .mat-calendar {
border: 1px solid #dadfe6;
overflow: hidden;
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
.mat-form-field-appearance-legacy .mat-form-field-label {
line-height: 1;
font-weight: normal;
}
/* start coupon section */
.coupon {
padding: 50px 0 20px;
color: #393E46;
position: relative;
font-size: 16px;
margin: 20px 10px;
box-shadow: 0 0 5px rgba(211, 211, 211, 0.55);
}

.coupon .overlay-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.65);
}

.coupon * {
text-align: center !important;
}

.coupon .discount {
border-left: 2px solid #7b2817;
}
.coupon .coupon-text h5 {
margin-bottom: 15px;
}

.coupon .coupon-text span {
font-weight: bold;
}

.coupon .coupon-text .coupon-input {
position: relative;
}

.coupon .coupon-text .coupon-input input {
width: 75%;
text-align: initial;
padding: 12px 5px;
margin-bottom: 15px;
border: 1px dashed;
}

.coupon .coupon-text .coupon-input i {
position: absolute;
top: 12px;
font-size: 18px;
right: 15%;
cursor: pointer;
}

.coupon .coupon-text .valid-date {
font-size: 14px;
}

.coupon .coupon-text .valid-date span {
font-weight: bold;
}

.coupon .coupon-info .logo {
width: 75%;
margin: auto;
padding: 0;
}

.coupon .coupon-info .discount-value {
width: 110px;
margin: 20px auto;
height: 110px;
background: #7b2817;
color: #fff;
font-size: 35px;
line-height: 110px;
border-radius: 50%;
font-weight: bold;
}

.coupon .coupon-info h3 {
color: #7b2817;
font-weight: bold;
font-size: 32px;
}

.coupon .more-info p {
margin-bottom: 8px;
}

.coupon .more-info p a {
color: #7b2817;
font-weight: 500;
}
/* start coupon section */

/* ecommerce home page */
.best-offers .offers-slider .offer .offer-content .options button {
background: #7B2817 !important;
padding: 8px 20px;
border-radius: 0;
}
.best-offers .offers-slider .offer .offer-content .options button i {
 color: #fff;
 margin: 0 4px;
}
.best-offers .offers-slider .offer .offer-content .options .custom-input-number {
 margin: 0 10px;
}

/* fix modal issue */
.main-modal {
min-width: 450px;
}
.main-modal-md {
min-width: 600px;
}
.main-modal .modal-body {
overflow: hidden;
}
/****************************************************************************************************
read-mara-register
*****************************************************************************************************/
.read-mara-register textarea.form-control {
height: auto !important;
}
.read-mara-register .intro-text {
margin: 25px auto !important;
font-size: 16px;
line-height: 1.8;
}
.read-mara-register .student-form {
margin-bottom: 15px;
}
.read-mara-register .student-btn {
padding: 10px;
font-size: 12px;
}
.read-mara-register label {
line-height: 2;
}

/****************************************************************************************************
view-reading-marathon
*****************************************************************************************************/
.view-reading-marathon .shadow-card {
box-shadow: 0 0 10px rgba(211, 211, 211, 0.5) !important;
}
.view-reading-marathon .intro-text {
font-size: 17px;
line-height: 1.8;
padding: 10px 0;
}
.view-reading-marathon .mat-mdc-card-header, .read-marathon-reg-form .mat-card-header {
font-weight: bold;
font-size: 23px;
text-align: center;
}
.view-reading-marathon .mat-mdc-card-header::after, .read-marathon-reg-form .mat-card-header::after {
display: none;
}
.view-reading-marathon .banner-image {
position: relative !important;
overflow: hidden;
}
.view-reading-marathon .banner-image:after {
content: "";
display: block;
padding-top: 60%;
}
.view-reading-marathon .banner-image .image-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.view-reading-marathon .banner-image .image-holder img {
width: 100%;
min-height: 100%;
}
.view-reading-marathon .embed-responsive {
overflow: visible;
}
.view-reading-marathon .shadow-card .register-btn {
padding: 11px 30px;
}
.view-reading-marathon .shadow-card.statistics table th, .view-reading-marathon .shadow-card.statistics table td {
padding: 10px 1px !important;
border: 1px solid #dee2e6;
}
.view-reading-marathon .shadow-card.statistics table th {
background: #fafafa;
}

.view-reading-marathon .marathon-banner {
padding: 30px 0 0;
min-height: 500px;
}
.view-reading-marathon .marathon-banner .sponser-logo .logo-img {
width: 180px;
}
.view-reading-marathon .marathon-banner .statistics {
padding: 15px 20px 150px;
}
.view-reading-marathon .marathon-banner .statistics .stat p {
color: #fff;
font-size: 22px;
text-align: center;
text-shadow: 1px 2px #000;
}
.view-reading-marathon .marathon-banner .statistics .stat div {
background: #fff;
border-radius: 5px;
border: 2px solid #000;
padding: 18px 5px;
text-align: center;
font-size: 18px;
}
/* add overlay background to payment modal */
.cdk-global-overlay-wrapper {
  background: rgba(0,0,0,.32);
}

button:disabled  {
 opacity: 0.6;
}
ngb-rating {
  color: #FFC107;
  font-size: 30px;
}
.inlineflex{
  display: inline-flex  !important;
}
.linkTrackAttachment{
  color:#7b2817 !important;
}
.guests .p-carousel-item.p-carousel-item-active{
  margin: 0px !important;
}
.guests .p-carousel-indicators.p-reset{
  display: none;
}
.list-message {
padding: 0 !important;
}
.popupImage
{
  object-fit: contain;
  max-height: 410px !important;
  /* height: fit-content;
  max-height: 390px !important;
  object-fit: fill;
  object-position: center; */
}
.mat-mdc-card-image:first-child{
  margin-top: unset !important;
}
.user-rating{
  margin: 0 10px;
  font-size: 25px !important;
 }
 .main-section-background{
  background: url("../img/BannerMobile.webp") center/cover;
  max-height: 100vh;
  max-width: 100%;
  min-height: 225px;
}
.dokan-section-background{
  background: url("../img/DkkanPage_Banner_new.jpg") center/cover;
  max-height: 100vh;
  max-width: 100%;
  min-height: 225px;
  background-repeat: no-repeat;
  background-color: #ededed;
}
.aboutus-section-background{
  background: url("../img/Aboutus_Top_Banner.jpg") center/cover;
  max-height: 100vh;
  max-width: 100%;
  height: 35vh;
}
.takween-junior-section-background{
  background: url("../img/Banner_Takween_Junior.jpg") center/cover;
  padding-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  .main-section-background{
    background: url("../img/BannerMobile.webp") center/cover;
    max-height: 100vh;
    max-width: 100%;
    min-height:190px;
  }
  .aboutus-section-background{
    background: url("../img/Aboutus_Top_Banner.jpg") center/cover;
    max-height: 100vh;
    max-width: 100%;
    min-height:190px;
  }
  .dokan-section-background{
    background: url("../img/DkkanPage_MOBILE3.jpg") center/cover;
    max-height: 100vh;
    max-width: 100%;
    /* min-height:190px; */
  }
}
.pointer{
  cursor: pointer;
  color: #7b2817  !important;
  font-weight: bold;
}
p {
  margin-top: 0;
  margin-bottom: 1rem !important;
  text-align: justify;
}
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: #7b2817 !important;
}