.img-box>input {
  display: none
}

.template-border {
  border: 3px solid #0b9ef7 !important;
  border-radius: 10px !important
}

.btn-check:focus+.btn,
.btn:focus {
  box-shadow: unset !important;
  outline: unset !important
}

.screen.image {
  border-radius: 5px;
  cursor: pointer;
  display: block;
  height: auto;
  margin: auto;
  padding: 5px;
  position: relative;
  width: 100%
}

.screen.image img {
  height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  transform-origin: 50% 50%;
  transition-duration: .5s;
  transition: all 5s ease;
  width: 100%
}

.screen.image:hover img {
  -o-object-position: left;
  object-position: left
}

.screen.vcard_11 {
  border-radius: 5px;
  cursor: pointer;
  display: block;
  height: auto;
  margin: auto;
  padding: 5px;
  position: relative;
  width: 100%
}

.screen.vcard_11 img {
  height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left;
  object-position: left;
  transform-origin: 50% 50%;
  transition-duration: .5s;
  transition: all 5s ease;
  width: 100%
}

.screen.vcard_11:hover img {
  -o-object-position: right;
  object-position: right
}

.img-radio .screen.vcard_11 {
  border-radius: 5px;
  cursor: pointer;
  display: block;
  height: auto;
  margin: auto;
  padding: 5px;
  position: relative;
  width: 100%
}

.img-radio .screen.vcard_11 img {
  height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left;
  object-position: left;
  transform-origin: 50% 50%;
  transition-duration: .5s;
  transition: all 5s ease;
  width: 100%
}

.img-radio .screen.vcard_11:hover img {
  -o-object-position: right;
  object-position: right
}

.img-radio {
  border-radius: 5px;
  cursor: pointer;
  display: block;
  height: auto;
  margin: auto;
  padding: 5px;
  position: relative;
  position: relative !important;
  width: 100%
}

.img-radio img {
  height: 400px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  transform-origin: 50% 50%;
  transition-duration: .2s;
  transition: all 5s ease;
  width: 100%
}

.img-radio:after {
  background-color: #eff3f6a6;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.img-radio:hover:after {
  opacity: 1
}

.img-radio:hover img {
  -o-object-position: left;
  object-position: left
}

.img-radio.img-border {
  border: 3px solid #0b9ef7 !important;
  border-radius: 10px !important;
  position: relative
}

.img-radio.img-border:before {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 25px !important;
  font-weight: 500;
  height: 100%;
  justify-content: center;
  opacity: 1;
  position: absolute;
  width: 100%;
  z-index: 999
}

.img-radio.img-border:after {
  opacity: 1
}

.templatecard {
  width: 20% !important
}

@media (max-width:1700px) {
  .templatecard {
      width: 25% !important
  }
}

@media (max-width:1400px) {
  .templatecard {
      width: 33.33% !important
  }
}

@media (max-width:768px) {
  .templatecard {
      width: 50% !important
  }
}

@media (max-width:501px) {
  .templatecard {
      width: 100% !important
  }
}

.ribbon-wrapper {
  height: 88px;
  left: 5px !important;
  overflow: hidden;
  position: absolute;
  top: 4px !important;
  width: 85px
}

.ribbon-wrapper .ribbon {
  background-color: #3498db;
  color: #333;
  color: #fff;
  font-size: 10px !important;
  left: -30px;
  padding: 7px 0;
  position: relative;
  text-align: center;
  top: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  width: 120px
}

#dashboardWeeklyUserBarChartContainer #dashboardWeeklyUserBarChart,
#incomeChartCanvas #dashboardIncomeChart {
  max-height: 320px !important
}

.ql-editor {
  font-family: Poppins, Helvetica, sans-serif !important;
  font-size: 14px !important
}

.ql-editor.ql-blank:before {
  font-style: unset !important
}

.btn-group-toggle input[type=radio] {
  opacity: 0;
  position: fixed;
  width: 0
}

.btn-group-toggle input[type=radio]:checked+label {
  color: #fff
}

.btn-group-toggle input[type=radio]:checked+label,
.btn-group-toggle input[type=radio]:focus+label {
  background-color: #019aff;
  border: 1px solid #019aff !important;
  border-radius: .3rem
}

.btn-group-toggle label {
  border: 1px solid #dee2e6 !important;
  border-radius: .475rem;
  display: inline-block;
  font-family: sans-serif, Arial;
  font-size: 12px;
  padding: 8.15px 17.225px
}

@media (min-width:501px) {
  .swal-modal {
      width: 381px !important
  }
}

.product_url {
  word-break: break-word
}

.withdraw-approval-dropdown {
  min-width: 186px !important;
  transition: unset !important
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

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

.flatpickr-disabled {
  color: #ced4da !important
}

.flip-box-vertical {
  background-color: transparent
}

.flip-box-vertical .flip-box-inner {
  height: 500px;
  margin: auto;
  width: 300px
}

.flip-box-vertical:nth-child(2n) .flip-box-inner {
  transform: rotateY(180deg) !important
}

.flip-box-vertical:nth-child(2n) .flip-box-inner:hover {
  transform: rotateY(0deg) !important
}

.flip-box-vertical img {
  height: 500px;
  width: 100%
}

.flip-box-vertical img:hover {
  cursor: pointer
}

.flip-box-vertical:hover .flip-box-inner {
  transform: rotateY(180deg)
}

.flip-box-h {
  background-color: transparent;
  height: 300px;
  width: 500px
}

.flip-box-h:nth-child(2n) .flip-box-inner {
  transform: rotateY(180deg)
}

.flip-box-h:nth-child(2n) .flip-box-inner:hover {
  transform: rotateY(0deg)
}

.flip-box-h img {
  height: 300px;
  width: 500px
}

.flip-box-h img:hover {
  cursor: pointer
}

.flip-box-h:hover .flip-box-inner {
  transform: rotateY(180deg)
}

.flip-box-inner {
  height: 100%;
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform .8s;
  width: 100%
}

.flip-box-back,
.flip-box-front {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%
}

.flip-box-front {
  background-color: transparent;
  color: #000
}

.flip-box-back {
  background-color: transparent;
  color: #fff;
  transform: rotateY(180deg)
}

.nav-tabs-1 .nav-item-1 .nav-link-1.active,
.nav-tabs-1 .nav-item-1 .nav-link-1:hover {
  background: #e0e3ff;
  border-left-color: #6571ff;
  color: #212529
}

.nav-tabs-1 .nav-item-1 .nav-link-1 {
  border-left: 5px solid transparent;
  border-radius: 0;
  color: #6c757d !important;
  padding-left: 1.25rem !important;
  padding-right: 1.563rem !important
}

.form-check-input {
  min-width: 1.563em
}

.action-btn .dropdown-menu li {
  display: flex
}

.table-responsive {
  overflow-x: unset !important
}

table .dropdown .dropdown-menu {
  /* inset: 0 20px auto auto !important; */
  will-change: transform !important
}

table .dropdown .dropdown-menu.show {
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  min-height: 155px;
  min-width: 180px !important;
  padding: 10px !important;
  transform: translate(5px, 25px) !important
}

.setting-tab .nav-item .nav-link {
  border-left: 5px solid transparent;
  border-radius: 0 !important;
  padding: 10px !important
}

.setting-tab .nav-item .nav-link.active {
  background: #e0e3ff !important;
  border-left-color: #6571ff !important
}

.setting-tab .nav-item .nav-link:hover {
  background: #e0e3ff;
  border-left-color: #6571ff;
  color: #212529
}

.setting-tab .nav-item .nav-link:after {
  display: none
}

.sidebar {
  background-color: #fff;
  height: 100vh;
  left: 0;
  min-height: 100%;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  transition: .5s;
  width: 0;
  z-index: 1;
  z-index: 9
}

@media (min-width:991px) {
  .sidebar {
      position: relative;
      top: 0;
      width: 250px;
      z-index: 1
  }
}

.sidebar .closebtn {
  font-size: 36px;
  position: relative;
  right: 5px;
  text-align: end;
  text-decoration: none;
  top: 0
}

.openbtn,
.sidebar .closebtn {
  color: #6c757d;
  margin-bottom: 10px
}

.openbtn {
  border: none;
  cursor: pointer
}

.openbtn:hover {
  background-color: #444
}

#main {
  padding: 16px;
  transition: margin-left .5s
}

@media screen and (max-height:450px) {
  .sidebar {
      padding-top: 15px
  }

  .sidebar a {
      font-size: 18px
  }
}

.confirmation-text {
  font-size: 45px !important
}

.warning-message {
  font-size: 30px !important
}

.confirmation-container {
  margin-top: 100px !important
}

.btn-confirm {
  font-size: 18px;
  height: 46px;
  text-align: center;
  transition: all .3s ease;
  width: 510px !important
}

@media (max-width:580px) {
  .btn-confirm {
      width: 310px !important
  }
}

.btn-cancel {
  font-size: 17px;
  height: 43px;
  text-align: center;
  transition: all .3s ease;
  width: 310px !important
}

#userDeleteModal {
  top: 25%
}

.register-btn {
  background-color: #7638f9 !important;
  color: #fff !important
}

.register-section {
  margin-top: -105px !important
}

@media (min-width:580px) {
  .register-section .element {
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 540px !important
  }
}

.register-section .top-vector {
  position: absolute;
  right: 0;
  text-align: end;
  top: 0
}

@media (max-width:767px) {
  .register-section .top-vector {
      top: 600px
  }
}

.register-section .top-vector img {
  width: 100%
}

@media (max-width:767px) {
  .register-section .top-vector img {
      width: 70%
  }
}

.register-section .bottom-vector {
  bottom: 0;
  position: absolute;
  right: 0;
  text-align: end
}

.register-section .bottom-vector img {
  width: 100%
}

@media (max-width:767px) {
  .register-section .bottom-vector img {
      width: 70%
  }
}

.register-section .register-form {
  background-size: cover;
  padding-top: 90px;
  position: relative
}

@media (max-width:767px) {
  .register-section .register-form {
      padding-top: 40px
  }
}

.register-img {
  height: 100vh !important;
  min-height: 100% !important;
  overflow: hidden;
  width: 100%
}

@media (max-width:767px) {
  .register-img {
      max-height: 600px;
      min-height: unset
  }
}

.register-img img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.z-index-9 {
  z-index: 9
}

.login-section {
  margin-top: -105px !important
}

@media (min-width:580px) {
  .login-section .element {
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 540px !important
  }
}

.login-section .top-vector {
  position: absolute;
  right: 0;
  text-align: end;
  top: 0
}

@media (max-width:767px) {
  .login-section .top-vector {
      top: 600px
  }
}

.login-section .top-vector img {
  width: 100%
}

@media (max-width:767px) {
  .login-section .top-vector img {
      width: 70%
  }
}

.login-section .bottom-vector {
  bottom: 0;
  position: absolute;
  right: 0;
  text-align: end
}

.login-section .bottom-vector img {
  width: 100%
}

@media (max-width:767px) {
  .login-section .bottom-vector img {
      width: 70%
  }
}

.login-section .copy-right {
  left: 26% !important
}

@media (max-width:767px) {
  .login-section .copy-right {
      left: 0 !important;
      position: static !important
  }
}

.login-section .login-form {
  background-size: cover;
  padding-top: 90px;
  position: relative;
  z-index: 1
}

@media (max-width:767px) {
  .login-section .login-form {
      padding-top: 40px
  }
}

.login-img {
  height: 100vh !important;
  min-height: 100% !important;
  overflow: hidden;
  width: 100%
}

@media (max-width:767px) {
  .login-img {
      max-height: 600px;
      min-height: unset
  }
}

.login-img img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.register-form {
  background-size: cover;
  position: relative;
  z-index: 1
}

.login-btn {
  background-color: #7638f9 !important;
  color: #fff !important
}

.forget-password-section {
  margin-top: -105px !important
}

@media (min-width:580px) {
  .forget-password-section .element {
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 540px !important
  }
}

.forget-password-section .top-vector {
  position: absolute;
  right: 0;
  text-align: end;
  top: 0
}

@media (max-width:767px) {
  .forget-password-section .top-vector {
      top: 600px
  }
}

.forget-password-section .top-vector img {
  width: 100%
}

@media (max-width:767px) {
  .forget-password-section .top-vector img {
      width: 70%
  }
}

.forget-password-section .bottom-vector {
  bottom: 0;
  position: absolute;
  right: 0;
  text-align: end
}

.forget-password-section .bottom-vector img {
  width: 100%
}

@media (max-width:767px) {
  .forget-password-section .bottom-vector img {
      width: 70%
  }
}

.reset-link {
  background-color: #7638f9 !important
}

.forget-password-img {
  height: 100vh !important;
  min-height: 100%;
  overflow: hidden;
  width: 100%
}

@media (max-width:767px) {
  .forget-password-img {
      max-height: 600px;
      min-height: unset
  }
}

.forget-password-img img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.forget-password-form {
  padding-top: 90px;
  position: relative
}

@media (max-width:767px) {
  .forget-password-form {
      padding-top: 40px
  }
}

.reset-password-section {
  margin-top: -105px !important
}

@media (min-width:580px) {
  .reset-password-section .element {
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 540px !important
  }
}

.reset-password-section .top-vector {
  position: absolute;
  right: 0;
  text-align: end;
  top: 0
}

@media (max-width:767px) {
  .reset-password-section .top-vector {
      top: 600px
  }
}

.reset-password-section .top-vector img {
  width: 100%
}

@media (max-width:767px) {
  .reset-password-section .top-vector img {
      width: 70%
  }
}

.reset-password-section .bottom-vector {
  bottom: 0;
  position: absolute;
  right: 0;
  text-align: end
}

.reset-password-section .bottom-vector img {
  width: 100%
}

@media (max-width:767px) {
  .reset-password-section .bottom-vector img {
      width: 70%
  }
}

.reset-password-img {
  height: 100vh !important;
  overflow: hidden;
  width: 100%
}

@media (max-width:767px) {
  .reset-password-img {
      max-height: 600px;
      min-height: unset
  }
}

.reset-password-img img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.reset-password-form {
  margin-top: 15% !important;
  z-index: 1 !important
}

.dynamic-vcard {
  background: #000;
  border-radius: 40px;
  box-shadow: 0 0 0 11px #1f1f1f, 0 0 0 13px #191919, 0 0 0 20px #111;
  height: 700px !important;
  margin: 0 auto;
  max-width: 360px;
  overflow-y: scroll !important;
  scrollbar-width: none;
  width: 100%
}

.dynamic-sensor {
  background: #000;
  border-radius: 50px;
  height: 25px;
  left: 0;
  margin: -25px auto 0;
  position: sticky;
  right: 0;
  top: 10px;
  transition: all .5s;
  width: 100px;
  z-index: 99999
}

.button-label {
  display: inline-block;
  position: relative
}

.button-label input[type=radio] {
  opacity: 0;
  position: absolute
}

.button-label .sticky-btn-title {
  background-color: #adb5bd !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  color: #000 !important;
  display: inline-block;
  padding: .5rem 3.2rem
}

.button-label input[type=radio]:checked+.sticky-btn-title {
  box-shadow: 0 0 0 3px #000, 0 0 0 0 transparent;
  color: #000 !important
}

#nfcProductImage {
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  -o-object-fit: cover !important;
  object-fit: cover !important;
  width: 100%
}

.nfc-img {
  flex: 0 0 auto;
  height: 450px;
  width: 50%
}

.nfc-details {
  background-clip: padding-box;
  background-color: #fff;
  border: 0 solid rgba(6, 9, 23, .2);
  border-radius: .625rem;
  display: flex;
  flex-direction: column;
  outline: 0;
  pointer-events: auto;
  position: relative;
  width: 100%
}

.nfc-details .modal-body {
  border-radius: 12px;
  overflow: hidden
}

.nfc-details #description {
  max-height: 150px;
  overflow: auto
}

.nfc-details #nfcProductImg {
  height: 420px
}

@media (max-width:991px) {
  .nfc-details #nfcProductImg {
      height: 315px
  }
}

.nfc-form {
  background-clip: padding-box;
  background-color: #fff;
  border: 0 solid rgba(6, 9, 23, .2);
  border-radius: .625rem;
  display: flex;
  flex-direction: column;
  outline: 0;
  pointer-events: auto;
  position: relative;
  width: 100%
}

.buy-now {
  bottom: 30px !important;
  margin-right: 14px;
  position: absolute;
  right: 5px !important;
  width: 45% !important
}

.buy-now,
.order-btn {
  background-color: #6571ff;
  border-color: #6571ff;
  color: #fff
}

.order-btn {
  width: 210px
}

@media (max-width:989px) {
  .order-btn {
      width: auto !important
  }
}

.discard-btn {
  width: 210px
}

@media (max-width:989px) {
  .discard-btn {
      width: auto !important
  }
}

.counter {
  align-items: center;
  border: 1px solid #000;
  border-radius: 5px;
  display: flex;
  height: 45px;
  width: 125px
}

.counter input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  color: #000 !important;
  font-size: 20px;
  line-height: 30px;
  outline: 0;
  text-align: center;
  width: 50px
}

.counter span {
  color: #000 !important;
  cursor: pointer;
  display: block;
  font-size: 25px;
  padding: 0 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

@media (max-width:990px) {
  .image-btn-close {
      background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ADB5BD'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") 50%/1em auto no-repeat;
      border: none;
      display: block !important;
      padding: 25px !important;
      position: absolute !important;
      right: 10px !important
  }

  .btn-close {
      display: none !important
  }
}

.button-style-one {
  border-radius: 4px !important;
  border-radius: 0;
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  display: inline-block;
  height: 40px;
  padding: .5rem 3.2rem
}

.button-style-one:hover {
  background-color: transparent !important
}

.button-style-two {
  border-radius: 0 !important;
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  display: inline-block;
  height: 40px;
  padding: .5rem 3.2rem
}

.button-style-two:hover {
  background-color: transparent !important
}

.button-style-three {
  border-radius: 20px;
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  display: inline-block;
  height: 40px;
  padding: .5rem 3.2rem
}

.button-style-three:hover {
  background-color: #adb5bd !important
}

.button-style-four {
  border: 4px solid #adb5bd !important;
  display: inline-block;
  height: 40px;
  padding: .5rem 3.2rem
}

.button-style-four:hover {
  box-shadow: 0 0 12px 4px rgba(0, 0, 0, .74) !important
}

.button-style-five {
  border: thick double #000 !important;
  border-radius: 20px !important;
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  display: inline-block;
  height: 45px;
  padding: .5rem 3.2rem
}

.button-style-six {
  border: 4px dotted #000 !important
}

.button-style-seven,
.button-style-six {
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  display: inline-block;
  height: 40px;
  padding: .5rem 3.2rem
}

.button-style-seven {
  border: thick double #000 !important
}

.button-style-eight {
  background-color: #adb5bd !important;
  border: 4px solid #adb5bd !important;
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  display: inline-block;
  height: 40px;
  padding: .5rem 3.2rem;
  transition: transform .5s ease !important
}

.button-style-eight:hover {
  transform: translateY(-5px) !important
}

.button-style-nine {
  background-color: #adb5bd !important;
  border: 4px solid #adb5bd !important;
  border-radius: 30px 0 30px 0 !important;
  box-shadow: 0 0 0 3px transparent, 0 6px 20px hsla(0, 0%, 7%, .1);
  height: 40px;
  transition: transform .5s ease !important
}

.button-style-nine,
.button-style-ten {
  display: inline-block;
  padding: .5rem 3.2rem
}

.button-style-ten {
  border: 2px solid #adb5bd;
  box-shadow: inset 0 0 0 0 #adb5bd;
  height: 40px !important;
  transition: .5s ease-out
}

.button-style-ten:hover {
  box-shadow: inset 400px 0 0 0 #adb5bd
}

.button-style input[type=radio]:checked+span {
  border: 4px solid #000 !important
}

.shepherd {
  inset: 0 auto auto 0;
  margin: 11px 0 !important;
  position: absolute;
  transform: translate3d(558px, 898.5px, 0)
}

.shepherd-target,
.shepherd-target .border-remove {
  border-radius: 1px !important
}

.iti {
  display: block !important;
  width: 100%
}

.swal-modal .swal-text {
  text-align: center
}

.logo-fix-size {
  max-height: 60px !important;
  max-width: 120px !important;
  width: 100% !important
}

.logo-fix-size,
.object-fit-cover {
  -o-object-fit: cover !important;
  object-fit: cover !important
}

.bg-dark-white {
  background: #fff !important;
  color: #000 !important
}

.sidebar-app-logo {
  max-height: 50px;
  max-width: 120px
}

body {
  overflow-x: hidden
}

#toast-container>div {
  min-width: 400px !important
}

@media (max-width:575px) {
  #toast-container>div {
      min-width: 300px !important
  }
}

.nfccard {
  width: 20% !important
}

@media (max-width:1700px) {
  .nfccard {
      width: 25% !important
  }
}

@media (max-width:1400px) {
  .nfccard {
      width: 33.33% !important
  }
}

@media (max-width:768px) {
  .nfccard {
      width: 50% !important
  }
}

@media (max-width:501px) {
  .nfccard {
      width: 100% !important
  }
}

.nfc-img-radio {
  border: 1px solid #000 !important;
  box-shadow: 8px 8px 10px rgba(0, 0, 0, .35) !important;
  cursor: pointer;
  display: block;
  height: 200px;
  margin: auto;
  max-height: 200px;
  max-width: 22rem;
  overflow: hidden;
  position: relative;
  position: relative !important
}

.nfc-img-radio img {
  height: 100%;
  max-height: 13rem;
  -o-object-position: top;
  object-position: top;
  transform-origin: 50% 50%;
  transition-duration: .2s;
  transition: all 5s ease;
  width: 100%
}

.nfc-img-radio:after {
  background-color: #eff3f6a6;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.nfc-img-radio:hover:after {
  opacity: 1
}

.nfc-img-radio.img-border {
  border: 3px solid #0b9ef7 !important;
  border-radius: 18px !important;
  min-width: 100%;
  position: relative
}

.nfc-img-radio.img-border:before {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 25px !important;
  font-weight: 500;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 999
}

.nfc-img-radio.img-border:after,
.nfc-img-radio.img-border:before {
  border-radius: 18px !important;
  opacity: 1
}

.images-picker {
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: .475rem;
  display: inline-block;
  position: relative
}

.images-picker .previewImage {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: .313rem;
  height: 100px;
  width: 100px
}

.images-picker .picker-edit,
.images-picker .previewImage {
  border: .063rem solid #e9ecef;
  box-shadow: 0 5px 20px rgba(173, 181, 189, .2)
}

.images-picker .picker-edit {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 25px;
  justify-content: center;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
  width: 25px
}

.images-picker .picker-edit label {
  cursor: pointer
}


/* ---------------------------------------------------------------------------
   Application Branding (user-settings/_branding.blade.php)

   Colours come from the Bootstrap custom properties rather than literals: the
   admin ships a light and a dark stylesheet chosen server-side, with no theme
   attribute on the page to hook a media query or selector onto, and both define
   the same --bs-* tokens. Reading them is the only way one rule can serve both.
   --------------------------------------------------------------------------- */

/* --- file field ---------------------------------------------------------- */

.branding-file {
    align-items: center;
    border: 1px dashed var(--bs-gray-300);
    border-radius: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.75rem;
    position: relative;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.branding-file.is-dragging {
    background-color: rgba(101, 113, 255, 0.06);
    border-color: var(--bs-primary);
}

/* Not display:none -- the input has to stay focusable so the field can be
   reached and opened from the keyboard. The ring is drawn on the label. */
.branding-file__input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.branding-file__button {
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    color: var(--bs-gray-900);
    cursor: pointer;
    flex: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    padding: 0.4rem 0.9rem;
    transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.branding-file__button:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.branding-file__input:focus-visible + .branding-file__button {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.branding-file__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.branding-file__name {
    color: var(--bs-gray-900);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branding-file__drop {
    color: var(--bs-gray-600);
    font-size: 0.75rem;
}

/* --- name field ---------------------------------------------------------- */

.branding-name-foot {
    align-items: baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 0.5rem;
}

/* Tabular figures so the count does not jiggle the layout as it changes. */
.branding-counter {
    color: var(--bs-gray-600);
    flex: none;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* --- sidebar mirror ------------------------------------------------------ */

.branding-preview__title {
    color: var(--bs-gray-600);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* 265px and the 70px bar below are the real sidebar's dimensions
   (style.css .aside-menu-container / .aside-menu-container__aside-logo). The
   chequerboard shows transparency, which is what the logo hint asks for and the
   one thing a plain white swatch cannot reveal. */
.branding-preview {
    background-color: var(--bs-body-bg);
    background-image:
        linear-gradient(45deg, rgba(128, 128, 128, 0.14) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(128, 128, 128, 0.14) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.14) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.14) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    max-width: 265px;
    overflow: hidden;
}

.branding-preview__bar {
    align-items: center;
    background-color: var(--bs-body-bg);
    border-bottom: 0.063rem solid var(--bs-gray-200);
    display: flex;
    gap: 0.75rem;
    height: 70px;
    padding: 0 1.563rem;
}

.branding-preview__logo {
    flex: none;
    max-height: 50px;
    max-width: 120px;
    object-fit: contain;
}

.branding-preview__name {
    color: var(--bs-gray-900);
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.branding-preview__note {
    color: var(--bs-gray-600);
    font-size: 0.75rem;
    margin: 0.5rem 0 0;
    max-width: 265px;
}

.branding-preview__note.is-truncated {
    color: var(--bs-gray-900);
}

/* --- actions ------------------------------------------------------------- */

.branding-actions {
    align-items: center;
    border-top: 1px solid var(--bs-gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
}

/* Destructive, and wanted far less often than Save: reachable, but not dressed
   up to compete with the primary action. */
.branding-remove {
    color: var(--bs-gray-600);
    font-size: 0.875rem;
    padding: 0;
    text-decoration: none;
}

.branding-remove:hover,
.branding-remove:focus-visible {
    color: var(--bs-danger);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .branding-file,
    .branding-file__button {
        transition: none;
    }
}


/* ---------------------------------------------------------------------------
   Reports (enquiries / appointments / product orders)

   Colours read the Bootstrap custom properties so one rule set serves the light
   and dark admin stylesheets, which are chosen server-side with no theme
   attribute on the page to hook onto. Chart series colours are the exception --
   canvas cannot read custom properties, so those are handed to Chart.js from
   reportChartTheme() in app/helpers.php.
   --------------------------------------------------------------------------- */

/* --- filter toolbar -------------------------------------------------------- */

/* A card header reading "Filters" above a row of labelled selects says nothing
   the controls do not. The frame stays; the heading goes. */
.report-toolbar {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.625rem;
    padding: 1.25rem;
}

/* --- KPI rail -------------------------------------------------------------- */

/* 1px grid gaps over a hairline-coloured backdrop, so the dividers stay exact
   however many cells wrap onto a second row. */
.report-kpis {
    background-color: var(--bs-gray-200);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.625rem;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    overflow: hidden;
}

.report-kpi {
    background-color: var(--bs-body-bg);
    padding: 1.25rem 1.5rem;
}

.report-kpi__label {
    color: var(--bs-gray-600);
    font-size: 0.8125rem;
    margin-bottom: 0.35rem;
}

.report-kpi__value {
    color: var(--bs-gray-900);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.report-kpi__value--lead {
    font-size: 2rem;
    font-weight: 700;
}

/* --- proportion bar -------------------------------------------------------- */

.report-proportion__title {
    color: var(--bs-gray-900);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* The 2px gaps are surface showing through between fills, not borders: adjacent
   segments must not read as one mark. */
.report-proportion__track {
    background-color: var(--bs-gray-200);
    border-radius: 7px;
    display: flex;
    gap: 2px;
    height: 14px;
    overflow: hidden;
}

.report-proportion__segment {
    flex-basis: 0;
    min-width: 3px;
}

.report-proportion__legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
}

.report-proportion__item {
    align-items: baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.report-proportion__key {
    align-items: baseline;
    color: var(--bs-gray-600);
    display: flex;
    font-weight: 400;
    gap: 0.5rem;
    min-width: 0;
}

.report-proportion__dot {
    border-radius: 50%;
    flex: none;
    height: 8px;
    transform: translateY(-1px);
    width: 8px;
}

/* Figures align down the column, so these are the tabular case. */
.report-proportion__figure {
    color: var(--bs-gray-900);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

.report-proportion__share {
    color: var(--bs-gray-600);
    font-weight: 400;
    margin-left: 0.35rem;
}

.report-proportion__footnote {
    color: var(--bs-gray-600);
    font-size: 0.8125rem;
    margin: 1.25rem 0 0;
}

/* --- fact grid ------------------------------------------------------------- */

/* The icons were primary-coloured, which read as six links. They are labels for
   the eye, not actions. */
.report-facts .report-fact__icon {
    color: var(--bs-gray-600);
}

/* --- tables ---------------------------------------------------------------- */

.report-table {
    font-variant-numeric: tabular-nums;
}

/* Only font-size and letter-spacing are set here on purpose. The theme paints
   these headers itself -- style.css sets the uppercase and the weight, and an
   inline block in layouts/app.blade.php paints every admin table header with a
   navy gradient and white text at a specificity this cannot reach. Declaring
   colour or weight here would be dead code. */
.report-table > thead > tr > th {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    /* Headers are nowrap app-wide, which is what makes a heading like
       "Store (Ref VCard)" set its column's minimum width. Let them wrap. */
    white-space: normal;
}

/* style.css gives every striped cell 30px of left padding with !important. Over
   the eight columns these reports carry that is ~270px of padding alone, enough
   to push the table past its card and clip the last column. Even it out.
   Matched at the same specificity as that rule and declared later, so this wins
   on source order; scoped to .report-table so no other admin table shifts. */
.report-table.table-striped > thead > tr > th,
.report-table.table-striped > :not(caption) > * > * {
    padding: 0.625rem 0.75rem !important;
}