:root{
  --black: #000;
  --white: #FFF;
  --blue-dark:#0578BC;
  --blue-medium:#0A7EBA;
  --blue-light:#D5F0FA;
  --grey-darker:#626262;
  --grey-dark:#808080;
  --grey-medium:#8B8B8B;
  --grey-light:#F0F0F0;
  --grey-lighter:#ECEBED;
  --grey-lightest:#D0C9D6;
  --blue-grey: #C5D8E2;
  --blue-grey-medium: #E1EDFD;
  --red: #F3393A;
  --yellow: #F3B304;
}

.form-control {
  border-radius: 10px;
  border-color: var(--grey-lighter);
}
.form-control::placeholder {
  color: var(--grey-lightest);
  font-size: 13px;
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--grey-lighter);
  opacity: 0.7;
}
.input-group-text {
  border-radius: 10px;
}
.btn {
  border-radius: 10px;
}
.btn--primary {
  color: var(--white);
  background-color: var(--red);
}
.btn--primary:hover {
  color: var(--white);
}
.btn--outline-primary {
  color: var(--red);
  border-color: var(--red);
}
.btn--outline-primary:hover {
  color: var(--red);
}
.btn--white {
  color: var(--black);
  background-color: var(--white);
}

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-red {
  color: var(--red);
}

/*.mobile-nav:after {
  content: "";
  position:absolute;
  width: 100%;
  height: 50px;
  background: var(--yellow);
  z-index: -1;
} */

.slider-area {
  padding: 40px 0;
}

.slider-area .item img {
  border-radius: 16px;
  /* height: 300px; */
  object-fit: cover;
}

.static-area-wrap {
  border: none;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(116, 116, 116, 0.102);
}

.badge--blue-light {
  color: var(--blue-medium);
  background-color: var(--blue-light);
  border-radius: 8px;
}

.badge--red-light {
  color: var(--red);
  background-color: rgba(243, 57, 58, 0.2);
  border-radius: 8px;
}

.badge--grey-light {
  color: var(--grey-medium);
  background-color: var(--grey-light);
  border-radius: 8px;
}

.category-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.category-icon__image {
  width: 50px;
  height: 50px;
  margin-bottom: .5rem;
}

.category-icon__text {
  font-size: 10px;
  margin-bottom: .75rem;
  color: var(--grey-dark);
  text-transform: capitalize;
  text-align: center;
  line-height: normal;
}

.entertaiment-list {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--grey-lighter);
  border-radius: 10px;
  padding: 0 16px;
  margin-bottom: 16px;
}

.entertaiment-list li {
  padding: 12px 4px;
  font-size: 15px;
  text-transform: capitalize;
}

.entertaiment-list li a{
  color: var(--grey-lightest);
}
.entertaiment-list li.active {
  border-bottom: 3px solid var(--blue-dark);
}
.entertaiment-list li.active a{
  color: var(--grey-darker);
}

.entertaiment-content label {
  color: var(--grey-darker);
  font-size: 13px;
}

.rate {
  float: left;
  height: 46px;
  padding: 0 10px;
}
.rate:not(:checked) > input {
  position:absolute;
  top:-9999px;
}
.rate:not(:checked) > label {
  float:right;
  width:1em;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:30px;
  color:#ccc;
}
.rate:not(:checked) > label:before {
  content: '★ ';
}
.rate > input:checked ~ label {
  color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
  color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
  color: #c59b08;
}

.breadcrumb {
  background-color: var(--white);
}
.breadcrumb .breadcrumb-item a {
  text-transform: capitalize;
}
.breadcrumb-item.active a {
  color: var(--black);
}
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--black);
  content: ">";
}

.pagination {
  display: flex;
  justify-content: center;
}
.pagination ul {
  box-shadow: none;
  padding: 0;
  text-align: center!important;
}
.pagination ul li {
  display: inline-block;
  padding: 4px 8px;
}
.pagination ul li.active {
  border-bottom: 3px solid var(--blue-dark);
}
.pagination a {
  color: unset;
}

.products-area .sidebar {
}
.sidebar section {
  padding: 12px 16px;
  border: 1px solid var(--grey-light);
}
.sidebar .sidebar__header {
  background-color: var(--grey-lighter);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.sidebar__header h6 {
  font-size: 15px;
  font-weight: 700;
}

.product-dec-slider-2 .slick-slide img {
  width: 64px;
  height: 64px;
}

.product-detail .product-title, .product-detail .product-price {
  font-weight: 700;
}
.product-detail .product-title {
  font-size: 25px;
}
.product-detail .product-price {
  font-size: 30px;
}
.product-review {
  color: var(--grey-darker);
}
.product-review span {
  color: var(--grey-medium);
}

.nav-tabs {
  border-top: 1px solid var(--grey-light);
  border-bottom: 1px solid var(--grey-light);
}
.nav-tabs .nav-link {
  border: none;
  color: var(--grey-medium);
  font-weight: 600;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border: none;
  color: #f3b304;
  border-bottom: 2px solid #f3b304;
}

.checkout {
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.checkout h6 {
  font-weight: 600;
}
.checkout .note {
  color: var(--blue-dark);
  font-weight: 700;
}
.checkout .subtotal {
  font-size: 22px;
}
.checkout .btn {
  display: block;
  width: 100%;
}

.seller {
  padding-top: 16px;
  padding-bottom: 24px;
  border-top: 1px solid var(--grey-light);
  border-bottom: 1px solid var(--grey-light);
}

.footer-area .fa-instagram, .footer-area .fa-facebook-square, .footer-area .fa-twitter {
  font-size: 20px;
}

/*product name*/

.product_details_name .title {
  font-style: normal;
  font-weight: bold;
  font-size: 25px;
  line-height: 29px;
}

.product_details_name a {
  margin-right: 10px;
  color: #626262;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 17px;
}

.product_details_name a.rates .ion-android-star {
  color: #FFCF5C;
  font-size: 17px;
}

.product_details_name a span {
  color: #A5A6A9;
}

h1.price{
  font-family: "Open Sans",sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 34px;
  color: #626262;
  margin-top: 15px;
  margin-bottom: 15px;
}

.nav-detail {
  border-top: 1px solid #A5A6A9;
  border-bottom: 1px solid #A5A6A9;
}

.nav-detail li{
  padding: 6px;
}

.nav-detail li.active{
  border-bottom: 1px solid #0073BD;
}

.nav-detail li a{
  font-weight: bold;
}

.nav-detail li a.active{
  color: #0073BD;
}

p.detail-des{
  text-align: justify;
  margin-top: 10px;
  margin-bottom: 10px;
}

p.read-mores{
  font-size: 15px;
  line-height: 17px;
  color: #0073BD;
}

/*detail order*/
.detail_order .title {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 23px;
}

.img-fluid.img-cover {
    max-width: 100%;
    /* height: 245px; */
    object-fit: cover;
}

a.add-note{
  font-weight: bold;
  font-size: 15px;
  line-height: 17px;
}

.stok{
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}

.subtotal{
  margin-top: -2px;
  margin-bottom: 12px;
  float: right;
  font-weight: bold;
  font-size: 18px;
  line-height: 29px;
  color: #626262;
}

.detail_order{
  padding-top: 10px;
  padding-bottom: 10px;
}

.cta{
  width: 100%;
}

.success-content {
  width: 100%;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mt-9{
  margin-top: 6rem !important;
}

.size-12{
  font-size: 12px !important;
}

.size-14{
  font-size: 14px !important;
}

.size-16{
  font-size: 16px !important;
}

.size-18{
  font-size: 18px !important;
}

/*news*/
.img-fluid.img-news {
  max-width: 100%;
  height: 166px; 
}

.img-fluid.img-news-detail {
  max-width: 100%;
  max-height: 300px; 
}

.news-detail{
  line-height: 1rem !important;
  color: #828282;
  margin-top: 15px;
}

.card-body.card-news{
  padding: 15px 20px;
  height: 172px;
}

small.tag-kategori{
  align-items: flex-start;
  padding: 5px 10px;
  background: #F2F2F2;
  border-radius: 6px;
  font-weight: 700;
}

/*user*/
a.nav-link.active{
  color:#F3B304 !important;
}

.avatar-mini img{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-medium img{
  width: 200px;
  height: 200px;
  border-radius: 10%;
  object-fit: cover;
}