/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.inputselect-group {
  position: relative;
}

.inputselect-group .select-container {
  position: absolute;
  right: 90px;
  z-index: 5;
}
.inputselect-group .select-container select {
  width: 200px;
  border-radius: 0;
  border-right: none;
  border-bottom: none;
}
.inputselect-group .filter-btn {
  position: absolute;
  right: 20px;
  top: 38px;
}
@media (max-width: 618px) {
  .inputselect-group .select-container select {
    width: 100px;
  }
}
@media (max-width: 767px) {
  .col-row-spacing [class*="col-"] {
    margin-bottom: 20px;
  }
  .col-row-spacing [class*="col-"]:last-child {
    margin-bottom: 0;
  }
}
.card.with-dropdown {
  position: relative;
}
.card-dropdown {
  position: absolute;
  right: 10px;
  top: 10px;
}
.card-dropdown button {
  padding: 0.715rem 0.736rem !important;
}
.not-found i {
  font-size: 50px;
  margin-bottom: 10px;
}
.user-list {
  padding: 30px 20px;
}
.user-img {
  object-fit: cover;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.table {
  border-collapse: collapse;
}
.page-link.disabled {
  color: #4e5154 !important;
}
.page-link.disabled:hover {
  background-color: #f0f0f0 !important;
  cursor: default;
}
.page-item.active .page-link.disabled {
  color: #fff !important;
}
.page-item.active .page-link.disabled:hover {
  background-color: #7367f0 !important;
  cursor: default;
}

.form-inline-edit .form-control {
  display: none;
}
.table-auto1 {
  width: 20%;
}
.table-auto2 {
  width: 100%;
}
.w-95 {
  width: 95% !important;
}
.pt-7 {
  padding-top: 7px !important;
}
.card-append {
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}
.card-append-table {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed rgb(223, 223, 223);
}
.img-100 {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  border-radius: 5px;
}
.img-200 {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover;
  border-radius: 5px;
}
.img-50 {
  width: 50px !important;
  height: 50px !important;
  object-fit: cover;
  border-radius: 5px;
}
.img-25 {
  width: 25px !important;
  height: 25px !important;
  object-fit: cover;
  border-radius: 5px;
}
.no-padding {
  padding: 0 !important;
}
.no-margin {
  margin: 0 !important;
}
hr.dashed {
  border-style: dashed;
}
.fs-20 {
  font-size: 20px !important;
}
.fs-30 {
  font-size: 30px !important;
}
.text-small-block {
  font-size: 10px;
  display: block;
}

.cart {
  margin-top: 20px;
}
.cart .media-body {
  margin-left: 10px;
}
.cart h6 {
  font-weight: 600 !important;
}
.fs-20 {
  font-size: 20px !important;
}
.radio-buttons {
  margin-top: 5px;
}
.radio-buttons input {
  display: none;
}

.radio-buttons label {
  position: relative;
  border: 1px solid #7367f0;
  background-color: transparent;
  color: #7367f0;
  text-align: center;
  display: block;
  cursor: pointer;
  padding: 0.9rem 2rem;
  font-size: 12px;
  line-height: 1;
  border-radius: 0.4285rem;
  margin-bottom:5px;
}

.radio-buttons input:checked + label {
  color: #ffffff;
  background-color: #7367f0;
  border-color: #7367f0;
}

.radio-buttons label i {
  display: block;
  font-size: 20px;
  margin-bottom: 5px;
}
.form-control-position span {
  margin-left: 10px;
}
.empty-card {
  text-align: center;
}
.empty-card h4 {
  margin-top: 10px;
  font-size: 14px;
}

.radio-buttons.sm label {
  display: inline-block;
  padding: 0.6rem 1rem;
}
.form-group.small {
  margin-bottom: 12px;
}
.shop-content-overlay.show {
  /* opacity: 1; */
  top: 8rem !important;
}

.ph-item {
  position: relative;
}
.ph-item:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 500%;
  margin-left: -250%;
  -webkit-animation: phAnimation 0.8s linear infinite;
  animation: phAnimation 0.8s linear infinite;
  background: linear-gradient(
      90deg,
      hsla(0, 0%, 100%, 0) 46%,
      hsla(0, 0%, 100%, 0.35) 50%,
      hsla(0, 0%, 100%, 0) 54%
    )
    50% 50%;
}
@-webkit-keyframes phAnimation {
  0% {
    transform: translate3d(-30%, 0, 0);
  }
  to {
    transform: translate3d(30%, 0, 0);
  }
}
@keyframes phAnimation {
  0% {
    transform: translate3d(-30%, 0, 0);
  }
  to {
    transform: translate3d(30%, 0, 0);
  }
}

.ph {
  background-color: #f1f0fe !important;
}
.ph.ph-image {
  height: 200px;
  width: 200px;
}
.ph.ph-badge {
  width: 100px;
  height: 20px;
  display: block;
}
.ph.ph-text {
  width: 100%;
  height: 20px;
}
.ph.ph-button {
  /* height:20px !important; */
}
.top-dashed {
  border-top: dashed 2px #ededed !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.px-05 {
  padding-right: 6px !important;
  padding-left: 6px !important;
}
.table-number td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 10px;
}
.brand-logo-img {
  width: 40px !important;
}
.login-image {
  width: 70%;
}

@media (max-width: 575px) {
  .pr-0 {
    padding-right: 6px !important;
    padding-left: 6px !important;
    margin-bottom: 10px;
  }
  .pl-0 {
    padding-right: 6px !important;
    padding-left: 6px !important;
    margin-top: 10px;
  }
}
.row-floating-right {
  position: relative;
}
.btn-float-right {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 2;
}
.sidebar-shop-cart {
  display: block;
}
.overlay-bg{
    display: none;
}
.btn-tutup {
  display: none;
}

@media (max-width: 991px) {
  .sidebar-shop-cart {
    display: none;
    position: absolute;
    /* overflow-y: auto; */
    z-index: 9999;
    right: -45px;
  }
  .btn-tutup {
    display: block;
    position: absolute;
    /* z-index:2; */
    left: -27px;
    top: 30px;
  }
}
@media (max-width: 991px) {
  .sidebar-shop-cart {
    right: -30px;
  }
}
.overlay-bg {
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  z-index: 1032;
}
.overlay-bg.show {
  opacity: 1;
  display: block;
}
.nd {
  line-height: 0.2rem;
}