@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap);
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: 1em;
  right: 1em;
}
.Toastify__toast-container--top-center {
  top: 1em;
  right: 50%;
  transform: translateX(50%);
}
.Toastify__toast-container--top-right {
  top: 1em;
  left: 1em;
}
.Toastify__toast-container--bottom-left {
  bottom: 1em;
  right: 1em;
}
.Toastify__toast-container--bottom-center {
  bottom: 1em;
  right: 50%;
  transform: translateX(50%);
}
.Toastify__toast-container--bottom-right {
  bottom: 1em;
  left: 1em;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    right: 0;
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    left: 0;
    right: initial;
  }
}
.Toastify__toast {
  position: relative;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  overflow: hidden;
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: rtl;
  /* webkit only issue #791 */
  z-index: 0;
}
.Toastify__toast--rtl {
  direction: ltr;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1;
}
.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.7s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 5px;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: right;
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  left: 0;
  right: initial;
  transform-origin: left;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-left-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(-1, 0, 0, -90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(-1, 0, 0, 20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(-1, 0, 0, -10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(-1, 0, 0, 5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(-1, 0, 0, 20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(-1, 0, 0, -90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes modal-video {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-video-inner {
  from {
    transform: translate(0, 100px);
  }
  to {
    transform: translate(0, 0);
  }
}
.modal-video {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
  cursor: pointer;
  opacity: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video;
  transition: opacity 0.3s ease-out;
}

.modal-video-effect-exit {
  opacity: 0;
}
.modal-video-effect-exit .modal-video-movie-wrap {
  transform: translate(0, 100px);
}

.modal-video-body {
  max-width: 960px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.modal-video-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media (orientation: landscape) {
  .modal-video-inner {
    padding: 10px 60px;
    box-sizing: border-box;
  }
}

.modal-video-movie-wrap {
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
  background-color: #333;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video-inner;
  transform: translate(0, 0);
  transition: transform 0.3s ease-out;
}
.modal-video-movie-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.modal-video-close-btn {
  position: absolute;
  z-index: 2;
  top: -45px;
  left: 0px;
  display: inline-block;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border: none;
  background: transparent;
}
@media (orientation: landscape) {
  .modal-video-close-btn {
    top: 0;
    left: -45px;
  }
}
.modal-video-close-btn:before {
  transform: rotate(-45deg);
}
.modal-video-close-btn:after {
  transform: rotate(45deg);
}
.modal-video-close-btn:before, .modal-video-close-btn:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  right: 0;
  background: #fff;
  border-radius: 5px;
  margin-top: -6px;
}

/*
! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

.tpv-outline-0{
  outline: 0;
}

.tpv-dashboard-icon-bg{
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

.tpv-dashboard-tab-btn button{
  position: relative;
}

.tpv-dashboard-tab-btn button::after{
  position: absolute;
  content: '';
  left: 0;
  height: 0%;
  width: 3px;
  border-radius: 0 12px 12px 0;
  background-color: #3C42E0;
  top: auto;
  bottom: 0;
  transition: all .3s ease-in-out;
  display: none;
}

.tpv-dashboard-tab-btn button.active::after{
  top: 0;
  bottom: auto;
  height: 100%;
}

.tpv-dashboard-icon-bg svg{
  transform: translateY(-2px);
}

.tpv-btn-purple{
  display: inline-block;
  background: linear-gradient(-180deg, #547AFF 0%, #7176FF 0.01%, #3C42E0 100%);
  box-shadow: 0px 1px 0px rgba(7, 51, 205, 0.7), 0px 2px 4px rgba(9, 32, 151, 0.5);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  padding: 8px 28px;
  transition: all .2s ease-in-out;
}

.tpv-btn-purple:hover{
  transform: translateY(-4px);
}

/* toggle button css start */

/* toggle button css end */

/* select dropdown css start */

.tpv-settings-option-select .choices[data-type*="select-one"]::after {
  border: 0;
  background-color: transparent;
  transform: translateY(-50%);
  margin-top: 0;
  left: 16px;
  content: '\f107';
  font-family: "Font Awesome 6 Pro";
  transform-origin: center;
  color: #616266;
  font-weight: 500;
  height: auto;
  width: auto;
  transition: transform .2s ease-in-out;
}

.tpv-settings-option-select .choices.is-open[data-type*="select-one"]::after {
  transform: translateY(-50%) rotate(180deg);
}

.tpv-settings-option-select .choices__inner {
  min-width: 180px;
  height: 38px;
  background-color: #F6F8F8;
  border: 1.5px solid #F6F8F8;
  border-radius: 8px;
  padding: 0 !important;
  padding-left: 16px !important;
  transition: all .3s ease-in-out;
}

.tpv-settings-option-select .choices.is-focused .choices__inner {
  background-color: #fff;
  border-color: #EFEFEF;
}

.tpv-settings-option-select .choices__item.choices__item--selectable {
  color: #121420;
}

.tpv-settings-option-select .choices__list--single{
  padding: 0 16px;
  height: 38px;
  line-height: 43px;
}

.tpv-settings-option-select .choices__list--dropdown, 
      .tpv-settings-option-select .choices__list[aria-expanded]{
  transition: all .3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.tpv-settings-option-select .is-active.choices__list--dropdown, 
      .tpv-settings-option-select .is-active.choices__list[aria-expanded] {
  visibility: visible;
  opacity: 1;
}

.tpv-settings-option-select .is-flipped.is-open .choices__inner {
  border-radius: 8px;
}

.tpv-settings-option-select .choices__list--dropdown, 
    .is-flipped .choices__list[aria-expanded],
    .tpv-settings-option-select .choices__list[aria-expanded] {
  background-color: #fff;
  border: 1.5px solid #EFEFEF;
  border-radius: 8px;
  min-width: 200px;
}

.tpv-settings-option-select .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item{
  padding: 0;
  padding-right: 16px;
  padding-bottom: 3px;
  color: #76767C;
}

.tpv-settings-option-select .choices__list.choices__list--dropdown{
  padding: 8px 0;
}

.tpv-settings-option-select .choices[data-type*="select-one"] .choices__input{
  display: none;
}

.tpv-settings-option-select .choices__item.choices__item--choice.is-selected{
  color: #3C42E0;
}

.tpv-settings-option-select .choices__item.choices__item--choice:hover{
  color: #3C42E0;
}

/* select dropdown css end */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.relative{
  position: relative;
}

.col-span-12{
  grid-column: span 12 / span 12;
}

.ml-0{
  margin-right: 0px;
}

.mb-\[37px\]{
  margin-bottom: 37px;
}

.mb-0{
  margin-bottom: 0px;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-\[10px\]{
  margin-bottom: 10px;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-\[30px\]{
  margin-bottom: 30px;
}

.mb-\[5px\]{
  margin-bottom: 5px;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mr-2{
  margin-left: 0.5rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mr-3{
  margin-left: 0.75rem;
}

.ml-1{
  margin-right: 0.25rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mr-\[14px\]{
  margin-left: 14px;
}

.mr-1{
  margin-left: 0.25rem;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.flex{
  display: flex;
}

.grid{
  display: grid;
}

.h-7{
  height: 1.75rem;
}

.h-10{
  height: 2.5rem;
}

.h-\[48px\]{
  height: 48px;
}

.w-\[200px\]{
  width: 200px;
}

.w-full{
  width: 100%;
}

.w-\[48px\]{
  width: 48px;
}

.max-w-\[24px\]{
  max-width: 24px;
}

.translate-y-\[-2px\]{
  --tw-translate-y: -2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer{
  cursor: pointer;
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-start{
  align-items: flex-start;
}

.items-center{
  align-items: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-8{
  gap: 2rem;
}

.overflow-hidden{
  overflow: hidden;
}

.rounded-3xl{
  border-radius: 24px;
}

.rounded-2xl{
  border-radius: 20px;
}

.rounded-xl{
  border-radius: 16px;
}

.rounded{
  border-radius: 4px;
}

.rounded-md{
  border-radius: 8px;
}

.rounded-\[12px\]{
  border-radius: 12px;
}

.rounded-tl-none{
  border-top-right-radius: 0;
}

.border-2{
  border-width: 2px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-\[\#F4F5F9\]{
  --tw-border-opacity: 1;
  border-color: rgb(244 245 249 / var(--tw-border-opacity));
}

.border-\[\#EFEFEF\]{
  --tw-border-opacity: 1;
  border-color: rgb(239 239 239 / var(--tw-border-opacity));
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-teal-700{
  --tw-bg-opacity: 1;
  background-color: rgb(15 118 110 / var(--tw-bg-opacity));
}

.bg-gray{
  --tw-bg-opacity: 1;
  background-color: rgb(246 247 251 / var(--tw-bg-opacity));
}

.bg-\[\#F7F9FA\]{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 250 / var(--tw-bg-opacity));
}

.bg-pink{
  --tw-bg-opacity: 1;
  background-color: rgb(254 222 237 / var(--tw-bg-opacity));
}

.bg-white6{
  background-color: #FFFFFF99;
}

.p-3{
  padding: 0.75rem;
}

.p-\[4px\]{
  padding: 4px;
}

.px-\[1rem\]{
  padding-right: 1rem;
  padding-left: 1rem;
}

.py-11{
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.px-8{
  padding-right: 2rem;
  padding-left: 2rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-9{
  padding-right: 2.25rem;
  padding-left: 2.25rem;
}

.px-2{
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.px-4{
  padding-right: 1rem;
  padding-left: 1rem;
}

.pb-\[62px\]{
  padding-bottom: 62px;
}

.pl-4{
  padding-right: 1rem;
}

.pt-\[26px\]{
  padding-top: 26px;
}

.pb-\[23px\]{
  padding-bottom: 23px;
}

.pb-\[10px\]{
  padding-bottom: 10px;
}

.text-left{
  text-align: right;
}

.text-center{
  text-align: center;
}

.text-5xl{
  font-size: 36px;
}

.text-4xl{
  font-size: 24px;
}

.text-\[15px\]{
  font-size: 15px;
}

.text-lg{
  font-size: 16px;
}

.text-2xl{
  font-size: 20px;
}

.text-\[17px\]{
  font-size: 17px;
}

.font-medium{
  font-weight: 500;
}

.font-semibold{
  font-weight: 600;
}

.font-normal{
  font-weight: 400;
}

.leading-\[48px\]{
  line-height: 48px;
}

.leading-6{
  line-height: 1.5rem;
}

.text-text2{
  --tw-text-opacity: 1;
  color: rgb(97 98 102 / var(--tw-text-opacity));
}

.text-theme{
  --tw-text-opacity: 1;
  color: rgb(60 66 224 / var(--tw-text-opacity));
}

.text-text3{
  --tw-text-opacity: 1;
  color: rgb(166 168 182 / var(--tw-text-opacity));
}

.text-\[\#303136\]{
  --tw-text-opacity: 1;
  color: rgb(48 49 54 / var(--tw-text-opacity));
}

.text-text4{
  --tw-text-opacity: 1;
  color: rgb(138 139 146 / var(--tw-text-opacity));
}

.underline{
  text-decoration-line: underline;
}

.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.transition-all{
  transition-property: all;
  transition-duration: 150ms;
}

.duration-300{
  transition-duration: 300ms;
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:left-0::after{
  content: var(--tw-content);
  right: 0px;
}

.after\:top-\[14px\]::after{
  content: var(--tw-content);
  top: 14px;
}

.after\:bottom-0::after{
  content: var(--tw-content);
  bottom: 0px;
}

.after\:right-auto::after{
  content: var(--tw-content);
  left: auto;
}

.after\:left-auto::after{
  content: var(--tw-content);
  right: auto;
}

.after\:right-0::after{
  content: var(--tw-content);
  left: 0px;
}

.after\:h-1::after{
  content: var(--tw-content);
  height: 0.25rem;
}

.after\:h-\[2px\]::after{
  content: var(--tw-content);
  height: 2px;
}

.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}

.after\:w-full::after{
  content: var(--tw-content);
  width: 100%;
}

.after\:w-0::after{
  content: var(--tw-content);
  width: 0px;
}

.after\:translate-y-\[-50\%\]::after{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:rounded-br-md::after{
  content: var(--tw-content);
  border-bottom-left-radius: 8px;
}

.after\:rounded-bl-md::after{
  content: var(--tw-content);
  border-bottom-right-radius: 8px;
}

.after\:bg-text2::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(97 98 102 / var(--tw-bg-opacity));
}

.after\:bg-theme::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(60 66 224 / var(--tw-bg-opacity));
}

.after\:shadow-2xl::after{
  content: var(--tw-content);
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.after\:transition::after{
  content: var(--tw-content);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
}

.after\:duration-300::after{
  content: var(--tw-content);
  transition-duration: 300ms;
}

.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}

.last\:mb-0:last-child{
  margin-bottom: 0px;
}

.last\:border-0:last-child{
  border-width: 0px;
}

.hover\:bg-pink:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 222 237 / var(--tw-bg-opacity));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:text-theme:hover{
  --tw-text-opacity: 1;
  color: rgb(60 66 224 / var(--tw-text-opacity));
}

.focus\:border-theme:focus{
  --tw-border-opacity: 1;
  border-color: rgb(60 66 224 / var(--tw-border-opacity));
}

.group:hover .group-hover\:ml-2{
  margin-right: 0.5rem;
}

.group:hover .group-hover\:bg-white6{
  background-color: #FFFFFF99;
}

@media (min-width: 576px){
  .sm\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .sm\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .sm\:ml-\[18px\]{
    margin-right: 18px;
  }

  .sm\:mb-0{
    margin-bottom: 0px;
  }

  .sm\:ml-2{
    margin-right: 0.5rem;
  }

  .sm\:mr-0{
    margin-left: 0px;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:w-\[200px\]{
    width: 200px;
  }

  .sm\:justify-center{
    justify-content: center;
  }

  .sm\:px-\[1\.5rem\]{
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 768px){
  .md\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .md\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .md\:mb-0{
    margin-bottom: 0px;
  }

  .md\:ml-\[30px\]{
    margin-right: 30px;
  }

  .md\:flex{
    display: flex;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:justify-center{
    justify-content: center;
  }

  .md\:px-\[2\.725rem\]{
    padding-right: 2.725rem;
    padding-left: 2.725rem;
  }
}

@media (min-width: 992px){
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-9{
    grid-column: span 9 / span 9;
  }

  .lg\:ml-\[30px\]{
    margin-right: 30px;
  }

  .lg\:block{
    display: block;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:px-\[50px\]{
    padding-right: 50px;
    padding-left: 50px;
  }
}

@media (min-width: 1201px){
  .xl\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .xl\:col-span-9{
    grid-column: span 9 / span 9;
  }

  .xl\:ml-\[30px\]{
    margin-right: 30px;
  }

  .xl\:flex{
    display: flex;
  }

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:px-\[80px\]{
    padding-right: 80px;
    padding-left: 80px;
  }

  .xl\:px-\[50px\]{
    padding-right: 50px;
    padding-left: 50px;
  }

  .xl\:pr-16{
    padding-left: 4rem;
  }
}

@media (min-width: 1401px){
  .xxl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xxl\:px-\[80px\]{
    padding-right: 80px;
    padding-left: 80px;
  }

  .xxl\:px-\[50px\]{
    padding-right: 50px;
    padding-left: 50px;
  }
}

@media (min-width: 1601px){
  .xxxl\:px-\[80px\]{
    padding-right: 80px;
    padding-left: 80px;
  }
}
.Toastify__toast-container,
.Toastify__toast .Toastify__toast-theme--light .Toastify__toast--success{
    margin-top: 32px !important;
}


div.tpv-settings-option-switch{}
div.tpv-settings-option-switch .react-switch{}

div.tpv-settings-option-switch div.react-switch div.react-switch-bg{
    background: #C2CAE7 !important;
    height: 26px !important;
    width: 50px !important;
}

div.tpv-settings-option-switch div.react-switch.active div.react-switch-bg{
    background: #3C42E0 !important;
}


div.tpv-settings-option-switch .react-switch-handle{
    position: absolute;
    width: inherit !important;
    height: inherit !important;
    right: 3px;
    top: 3px !important;
    bottom: 3px;
    left: 54%;
    background: linear-gradient(-180deg, #FFFFFF 0%, #D6DCEF 100%) !important;
    border-radius: 100%;
    z-index: 1;
    transition:  0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
    transition-property: right, left;
    transition-delay: 0s, .08s !important;
    transform: inherit !important;
    box-shadow: -1px 2px 3px rgba(18, 20, 32, 0.3) !important;
}

div.tpv-settings-option-switch .react-switch-handle:focus,
div.tpv-settings-option-switch .react-switch-handle:focus-visible,
div.tpv-settings-option-switch .react-switch-handle:focus-within{
    outline: 0 !important;
    
}



div.react-switch.active .react-switch-handle{
    left: 3px;
    right: 54%;
    transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
    transition-delay: 0s !important;
    transition-property: right, left !important;
    transition-delay: .08s, 0s !important;
}


/* select field */

div.tp-tooltip-select select:focus{
    border-color: #EFEFEF;
    color: #121420;
    box-shadow: none !important;
    background: #fff;
}
div.tp-tooltip-select select:focus-visible{
    text-shadow: none;
}
div.tp-tooltip-select select{
    background: #F6F8F8;
    border: 0;
    border-radius: 8px;
    color: #121420;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    width: 100%;
    height: 38px;
    line-height: 38px;
}
div.tp-tooltip-select{
    width: 180px;
    position: relative;
    border: 1px solid #F6F8F8;
    border-radius: 8px;
}

div.tp-tooltip-select::after{
    position: absolute;
    content: '';
    left: 0;
    top: 43%;
    left: 16px;
    color: #616266;
    font-size: 14px;
    border-top: 2px solid #bfbfbf;
    border-right: 2px solid #bfbfbf;
    width: 9px;
    height: 9px;
    transform: translateY(-50%) rotate(140deg);

}

/* color style */

div.tp-tooltip-select.tp-toolltip-color{
    width: 50px;
    height: 30px;
    position: relative;
    border: 1px solid #EFEFEF;
    border-radius: 2px;
    background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #F1F1F1 100%);
}

div.tp-tooltip-select.tp-toolltip-color .tp-color-indicator p{
    position: absolute;
    top: 100%;
    left: 0;
}
div.tp-tooltip-select.tp-toolltip-color::after{
    display: none;
}

div.tp-tooltip-select.tp-toolltip-color .tp-indicator{
    width: 50px;
    height: 30px;
    background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #F1F1F1 100%);
    border-radius: 2px;
    border: 1px solid #EFEFEF;
}

div.tp-tooltip-select.tp-toolltip-color .tp-indicator .component-color-indicator{
    width: 38px;
    height: 18px;
    margin: auto;
    border-radius: 4px;
    box-shadow: 0px 0px 2px rgba(64, 9, 14, 0.2);
}
.tpv-settings-option-input input[type="number"]{
    outline: 0 !important;
    box-shadow: none !important;
}

.tpv-settings-option-input input[type="number"]:focus{
    border-color: #3C42E0;
}

.tpv-settings-option-input input[type="number"],
.tpv-settings-option-input input[type="text"]{
    height: 38px;
    background: #FFFFFF;
    border: 2px solid #EFEFEF;
    border-radius: 8px;
    padding: 0 16px;
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.tpv-dashboard-area{
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        line-height: 26px;
        color: #76767C;
    }
img,
    svg{
      display: inline-block;
    }
h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 15px;
        color: #121420;
    }
h1 {
        font-size: 40px;
    }
h2 {
        font-size: 36px;
    }
h3 {
        font-size: 24px;
    }
h4 {
        font-size: 17px;
    }
h5 {
        font-size: 16px;
    }
h6 {
        font-size: 14px;
    }
p{
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        line-height: 26px;
        color: #76767C;
        margin-bottom: 15px;
    }
a,
    .btn,
    p,
    button,
    input,
    select,
    textarea,
    li,
    img,
    .transition-3,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        transition: all .3s ease-out 0s;
    }

    .\!btn {
        transition: all .3s ease-out 0s !important;
    }
.tpv-outline-0{
      outline: 0;
    }
.tpv-dashboard-icon-bg{
      backdrop-filter: blur(10px);
      border-radius: 10px;
    }
.tpv-dashboard-tab-btn button{
      position: relative;
    }
.tpv-dashboard-tab-btn button::after{
      position: absolute;
      content: '';
      left: 0;
      height: 0%;
      width: 3px;
      border-radius: 0 12px 12px 0;
      background-color: #3C42E0;
      top: auto;
      bottom: 0;
      transition: all .3s ease-in-out;
      display: none;
    }
.tpv-dashboard-tab-btn button.active::after{
     top: 0;
     bottom: auto;
     height: 100%;
    }
.tpv-dashboard-icon-bg svg{
      transform: translateY(-2px);
    }
.tpv-btn-purple{
      display: inline-block;
      background: linear-gradient(-180deg, #547AFF 0%, #7176FF 0.01%, #3C42E0 100%);
      box-shadow: 0px 1px 0px rgba(7, 51, 205, 0.7), 0px 2px 4px rgba(9, 32, 151, 0.5);
      border-radius: 6px;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
      padding: 8px 28px;
      transition: all .2s ease-in-out;
    }
.tpv-btn-purple:hover{
      transform: translateY(-4px);
    }
/* toggle button css start */
/* toggle button css end */
/* select dropdown css start */
.tpv-settings-option-select .choices[data-type*="select-one"]::after {
        border: 0;
        background-color: transparent;
        transform: translateY(-50%);
        margin-top: 0;
        left: 16px;
        content: '\f107';
        font-family: "Font Awesome 6 Pro";
        transform-origin: center;
        color: #616266;
        font-weight: 500;
        height: auto;
        width: auto;
        transition: transform .2s ease-in-out;
    }
.tpv-settings-option-select .choices.is-open[data-type*="select-one"]::after {
        transform: translateY(-50%) rotate(180deg);
    }
.tpv-settings-option-select .choices__inner {
        min-width: 180px;
        height: 38px;
        background-color: #F6F8F8;
        border: 1.5px solid #F6F8F8;
        border-radius: 8px;
        padding: 0 !important;
        padding-left: 16px !important;
        transition: all .3s ease-in-out;
      }
.tpv-settings-option-select .choices.is-focused .choices__inner {
        background-color: #fff;
        border-color: #EFEFEF;
      }
.tpv-settings-option-select .choices__item.choices__item--selectable {
        color: #121420;
      }
.tpv-settings-option-select .choices__list--single{
        padding: 0 16px;
        height: 38px;
        line-height: 43px;
      }
.tpv-settings-option-select .choices__list--dropdown, 
      .tpv-settings-option-select .choices__list[aria-expanded]{
        transition: all .3s ease-in-out;
        visibility: hidden;
        opacity: 0;
      }
.tpv-settings-option-select .is-active.choices__list--dropdown, 
      .tpv-settings-option-select .is-active.choices__list[aria-expanded] {
        visibility: visible;
        opacity: 1;
    }
.tpv-settings-option-select .is-flipped.is-open .choices__inner {
        border-radius: 8px;
    }
.tpv-settings-option-select .choices__list--dropdown, 
    .is-flipped .choices__list[aria-expanded],
    .tpv-settings-option-select .choices__list[aria-expanded] {
        background-color: #fff;
        border: 1.5px solid #EFEFEF;
        border-radius: 8px;
        min-width: 200px;
    }
.tpv-settings-option-select .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item{
        padding: 0;
        padding-right: 16px;
        padding-bottom: 3px;
        color: #76767C;
    }
.tpv-settings-option-select .choices__list.choices__list--dropdown{
        padding: 8px 0;
        
    }
.tpv-settings-option-select .choices[data-type*="select-one"] .choices__input{
         display: none;
    }
.tpv-settings-option-select .choices__item.choices__item--choice.is-selected{
        color: #3C42E0;
    }
.tpv-settings-option-select .choices__item.choices__item--choice:hover{
        color: #3C42E0;
    }
/* select dropdown css end */
.\!container{
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 576px){
  .\!container{
    max-width: 576px !important;
  }
  .container{
    max-width: 576px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 992px){
  .\!container{
    max-width: 992px !important;
  }
  .container{
    max-width: 992px;
  }
}
@media (min-width: 1200px){
  .\!container{
    max-width: 1200px !important;
  }
  .container{
    max-width: 1200px;
  }
}
@media (min-width: 1400px){
  .\!container{
    max-width: 1400px !important;
  }
  .container{
    max-width: 1400px;
  }
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.inset-0{
  inset: 0px;
}
.z-50{
  z-index: 50;
}
.col-span-12{
  grid-column: span 12 / span 12;
}
.col-start-1{
  grid-column-start: 1;
}
.row-start-1{
  grid-row-start: 1;
}
.\!m-0{
  margin: 0px !important;
}
.mx-auto{
  margin-right: auto;
  margin-left: auto;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-\[30px\]{
  margin-bottom: 30px;
}
.mb-\[37px\]{
  margin-bottom: 37px;
}
.mb-\[5px\]{
  margin-bottom: 5px;
}
.ml-0{
  margin-right: 0px;
}
.ml-1{
  margin-right: 0.25rem;
}
.ml-2{
  margin-right: 0.5rem;
}
.ml-3{
  margin-right: 0.75rem;
}
.mr-1{
  margin-left: 0.25rem;
}
.mr-2{
  margin-left: 0.5rem;
}
.mr-3{
  margin-left: 0.75rem;
}
.mr-\[14px\]{
  margin-left: 14px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.h-10{
  height: 2.5rem;
}
.h-20{
  height: 5rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-56{
  height: 14rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-\[48px\]{
  height: 48px;
}
.h-\[600px\]{
  height: 600px;
}
.h-\[83vh\]{
  height: 83vh;
}
.h-\[85vh\]{
  height: 85vh;
}
.h-full{
  height: 100%;
}
.w-10{
  width: 2.5rem;
}
.w-20{
  width: 5rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-8{
  width: 2rem;
}
.w-\[200px\]{
  width: 200px;
}
.w-\[48px\]{
  width: 48px;
}
.w-full{
  width: 100%;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-\[24px\]{
  max-width: 24px;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.translate-y-\[-2px\]{
  --tw-translate-y: -2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-1{
  gap: 0.25rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray2 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(194 202 231 / var(--tw-divide-opacity, 1));
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.rounded{
  border-radius: 4px;
}
.rounded-2xl{
  border-radius: 20px;
}
.rounded-3xl{
  border-radius: 24px;
}
.rounded-\[12px\]{
  border-radius: 12px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 10px;
}
.rounded-md{
  border-radius: 8px;
}
.rounded-sm{
  border-radius: 2px;
}
.rounded-xl{
  border-radius: 16px;
}
.rounded-tl-none{
  border-top-right-radius: 0;
}
.border{
  border-width: 1px;
}
.border-2{
  border-width: 2px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-\[\#EFEFEF\]{
  --tw-border-opacity: 1;
  border-color: rgb(239 239 239 / var(--tw-border-opacity, 1));
}
.border-\[\#F4F5F9\]{
  --tw-border-opacity: 1;
  border-color: rgb(244 245 249 / var(--tw-border-opacity, 1));
}
.border-gray2{
  --tw-border-opacity: 1;
  border-color: rgb(194 202 231 / var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-theme{
  --tw-border-opacity: 1;
  border-color: rgb(60 66 224 / var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color: transparent;
}
.bg-\[\#F7F9FA\]{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 250 / var(--tw-bg-opacity, 1));
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-gray{
  --tw-bg-opacity: 1;
  background-color: rgb(246 247 251 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-pink{
  --tw-bg-opacity: 1;
  background-color: rgb(254 222 237 / var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-theme{
  --tw-bg-opacity: 1;
  background-color: rgb(60 66 224 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white6{
  background-color: #FFFFFF99;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0{
  padding: 0px;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.p-\[4px\]{
  padding: 4px;
}
.px-1{
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
.px-2{
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.px-3{
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
.px-4{
  padding-right: 1rem;
  padding-left: 1rem;
}
.px-8{
  padding-right: 2rem;
  padding-left: 2rem;
}
.px-9{
  padding-right: 2.25rem;
  padding-left: 2.25rem;
}
.px-\[1rem\]{
  padding-right: 1rem;
  padding-left: 1rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-11{
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-\[10px\]{
  padding-bottom: 10px;
}
.pb-\[23px\]{
  padding-bottom: 23px;
}
.pb-\[62px\]{
  padding-bottom: 62px;
}
.pl-4{
  padding-right: 1rem;
}
.pr-6{
  padding-left: 1.5rem;
}
.pt-\[26px\]{
  padding-top: 26px;
}
.text-left{
  text-align: right;
}
.text-center{
  text-align: center;
}
.\!text-base{
  font-size: 14px !important;
}
.text-2xl{
  font-size: 20px;
}
.text-3xl{
  font-size: 22px;
}
.text-5xl{
  font-size: 36px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[17px\]{
  font-size: 17px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-base{
  font-size: 14px;
}
.text-lg{
  font-size: 16px;
}
.text-sm{
  font-size: 10px;
}
.text-xl{
  font-size: 18px;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.\!leading-\[1\.4\]{
  line-height: 1.4 !important;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-\[2\]{
  line-height: 2;
}
.leading-\[48px\]{
  line-height: 48px;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.text-\[\#303136\]{
  --tw-text-opacity: 1;
  color: rgb(48 49 54 / var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-heading{
  --tw-text-opacity: 1;
  color: rgb(18 20 32 / var(--tw-text-opacity, 1));
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-text2{
  --tw-text-opacity: 1;
  color: rgb(97 98 102 / var(--tw-text-opacity, 1));
}
.text-text3{
  --tw-text-opacity: 1;
  color: rgb(166 168 182 / var(--tw-text-opacity, 1));
}
.text-text4{
  --tw-text-opacity: 1;
  color: rgb(138 139 146 / var(--tw-text-opacity, 1));
}
.text-theme{
  --tw-text-opacity: 1;
  color: rgb(60 66 224 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.opacity-40{
  opacity: 0.4;
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
  outline-style: solid;
}
.outline-0{
  outline-width: 0px;
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
}
.duration-300{
  transition-duration: 300ms;
}
.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}
.after\:bottom-0::after{
  content: var(--tw-content);
  bottom: 0px;
}
.after\:left-0::after{
  content: var(--tw-content);
  right: 0px;
}
.after\:left-auto::after{
  content: var(--tw-content);
  right: auto;
}
.after\:right-0::after{
  content: var(--tw-content);
  left: 0px;
}
.after\:right-auto::after{
  content: var(--tw-content);
  left: auto;
}
.after\:top-\[14px\]::after{
  content: var(--tw-content);
  top: 14px;
}
.after\:h-1::after{
  content: var(--tw-content);
  height: 0.25rem;
}
.after\:h-\[2px\]::after{
  content: var(--tw-content);
  height: 2px;
}
.after\:w-0::after{
  content: var(--tw-content);
  width: 0px;
}
.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:w-full::after{
  content: var(--tw-content);
  width: 100%;
}
.after\:translate-y-\[-50\%\]::after{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 9999px;
}
.after\:rounded-bl-md::after{
  content: var(--tw-content);
  border-bottom-right-radius: 8px;
}
.after\:rounded-br-md::after{
  content: var(--tw-content);
  border-bottom-left-radius: 8px;
}
.after\:bg-text2::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(97 98 102 / var(--tw-bg-opacity, 1));
}
.after\:bg-theme::after{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(60 66 224 / var(--tw-bg-opacity, 1));
}
.after\:shadow-2xl::after{
  content: var(--tw-content);
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.after\:transition::after{
  content: var(--tw-content);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 150ms;
}
.after\:duration-300::after{
  content: var(--tw-content);
  transition-duration: 300ms;
}
.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}
.last\:mb-0:last-child{
  margin-bottom: 0px;
}
.last\:border-0:last-child{
  border-width: 0px;
}
.odd\:bg-white:nth-child(odd){
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.checked\:border-theme:checked{
  --tw-border-opacity: 1;
  border-color: rgb(60 66 224 / var(--tw-border-opacity, 1));
}
.checked\:bg-theme:checked{
  --tw-bg-opacity: 1;
  background-color: rgb(60 66 224 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-pink:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 222 237 / var(--tw-bg-opacity, 1));
}
.hover\:bg-theme:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(60 66 224 / var(--tw-bg-opacity, 1));
}
.hover\:bg-theme200:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(44 50 176 / var(--tw-bg-opacity, 1));
}
.hover\:bg-theme600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(18 23 160 / var(--tw-bg-opacity, 1));
}
.hover\:text-indigo-900:hover{
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}
.hover\:text-red-900:hover{
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}
.hover\:text-theme:hover{
  --tw-text-opacity: 1;
  color: rgb(60 66 224 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.focus\:border-theme:focus{
  --tw-border-opacity: 1;
  border-color: rgb(60 66 224 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-indigo-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity, 1));
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group:hover .group-hover\:ml-2{
  margin-right: 0.5rem;
}
.group:hover .group-hover\:bg-white6{
  background-color: #FFFFFF99;
}
@media (min-width: 576px){
  .sm\:col-span-5{
    grid-column: span 5 / span 5;
  }
  .sm\:col-span-7{
    grid-column: span 7 / span 7;
  }
  .sm\:mb-0{
    margin-bottom: 0px;
  }
  .sm\:ml-2{
    margin-right: 0.5rem;
  }
  .sm\:ml-\[18px\]{
    margin-right: 18px;
  }
  .sm\:mr-0{
    margin-left: 0px;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:w-\[200px\]{
    width: 200px;
  }
  .sm\:justify-center{
    justify-content: center;
  }
  .sm\:px-\[1\.5rem\]{
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .sm\:text-sm{
    font-size: 10px;
  }
}
@media (min-width: 768px){
  .md\:col-span-4{
    grid-column: span 4 / span 4;
  }
  .md\:col-span-8{
    grid-column: span 8 / span 8;
  }
  .md\:mb-0{
    margin-bottom: 0px;
  }
  .md\:flex{
    display: flex;
  }
  .md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:justify-center{
    justify-content: center;
  }
  .md\:px-\[2\.725rem\]{
    padding-right: 2.725rem;
    padding-left: 2.725rem;
  }
}
@media (min-width: 992px){
  .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-9{
    grid-column: span 9 / span 9;
  }
  .lg\:block{
    display: block;
  }
  .lg\:w-1\/3{
    width: 33.333333%;
  }
  .lg\:w-2\/3{
    width: 66.666667%;
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:flex-row{
    flex-direction: row;
  }
  .lg\:px-\[50px\]{
    padding-right: 50px;
    padding-left: 50px;
  }
}
@media (min-width: 1201px){
  .xl\:col-span-3{
    grid-column: span 3 / span 3;
  }
  .xl\:col-span-9{
    grid-column: span 9 / span 9;
  }
  .xl\:ml-\[30px\]{
    margin-right: 30px;
  }
  .xl\:flex{
    display: flex;
  }
  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:px-\[80px\]{
    padding-right: 80px;
    padding-left: 80px;
  }
}
@media (min-width: 1401px){
  .xxl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xxl\:px-\[50px\]{
    padding-right: 50px;
    padding-left: 50px;
  }
}
@media (min-width: 1601px){
  .xxxl\:px-\[80px\]{
    padding-right: 80px;
    padding-left: 80px;
  }
}
.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *){
  text-align: left;
}

/* ===================================================================
   TPWVS UI Enhancement Layer — motion, elevation & interaction polish
   Additive only: does not alter existing layout/selectors above.
   =================================================================== */

@keyframes tpvFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page-level entrance transition (each is a freshly-mounted view) */
.tpv-welcome-page,
.tpv-attributes-page,
.tpv-settings-page,
.tpv-import-export-page,
.tpv-preview-page{
  animation: tpvFadeUp .4s cubic-bezier(.16,1,.3,1) both;
}

/* Sidebar logo — subtle hover response */
.tpv-dashboard-logo img{
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.tpv-dashboard-logo a:hover img{
  transform: scale(1.04) rotate(-1deg);
}

/* Sidebar nav items — smoother hover + revived active accent bar */
.tpv-dashboard-tab-btn button{
  transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.tpv-dashboard-tab-btn button:hover{
  transform: translateX(2px);
}
.tpv-dashboard-tab-btn button.active{
  box-shadow: inset 0 0 0 1px rgba(13,148,136,.1);
}
.tpv-dashboard-tab-btn button.active::after{
  display: block !important;
}

/* Primary buttons — lift + glow on hover, press feedback */
.tpv-btn-purple{
  box-shadow: 0px 1px 0px rgba(6, 95, 70, 0.7), 0px 2px 4px rgba(4, 47, 46, 0.5);
}
.tpv-btn-purple:hover{
  box-shadow: 0 10px 20px -8px rgba(13,148,136,.5);
}
.tpv-btn-purple:active{
  transform: translateY(-1px) scale(.98);
}
a.bg-theme, button.bg-theme,
a.bg-indigo-600, button.bg-indigo-600{
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background-color .2s ease;
}
a.bg-theme:hover, button.bg-theme:hover,
a.bg-indigo-600:hover, button.bg-indigo-600:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -6px rgba(13,148,136,.35);
}
a.bg-theme:active, button.bg-theme:active,
a.bg-indigo-600:active, button.bg-indigo-600:active{
  transform: translateY(0) scale(.97);
  box-shadow: none;
}

/* Outline / text buttons (e.g. Clear) — smooth fill-in on hover */
.border-theme.text-theme{
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.border-theme.text-theme:active{
  transform: scale(.97);
}

/* Welcome feature cards — elevation on hover + staggered entrance */
.tpv-welcome-feature-item{
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
  animation: tpvFadeUp .45s cubic-bezier(.16,1,.3,1) both;
}
.tpv-welcome-feature-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -16px rgba(18,20,32,.18);
}
.tpv-welcome-feature-item:nth-child(1){ animation-delay: .05s; }
.tpv-welcome-feature-item:nth-child(2){ animation-delay: .12s; }
.tpv-welcome-feature-item:nth-child(3){ animation-delay: .19s; }

.tpv-dashboard-icon-bg{
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.tpv-welcome-feature-item:hover .tpv-dashboard-icon-bg{
  transform: scale(1.08);
}

/* Welcome / How-to-use banner — image zoom on hover */
.tpv-welcome-banner{
  transition: box-shadow .3s ease;
  overflow: hidden;
}
.tpv-welcome-banner img{
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  display: block;
}
.tpv-welcome-banner:hover img{
  transform: scale(1.03);
}
.tpv-htu-thumb{
  overflow: hidden;
}
.tpv-htu-thumb img{
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.tpv-htu-thumb:hover img{
  transform: scale(1.03);
}

/* Settings option rows — soft hover highlight */
.tpv-settings-option{
  transition: background-color .2s ease;
  border-radius: 10px;
}
.tpv-settings-option:hover{
  background-color: #F7FEFC;
}

/* Inputs / selects — smooth focus ring instead of a hard snap */
.tpv-settings-option-select .choices__inner,
.tpv-settings-option-input input[type="number"],
.tpv-settings-option-input input[type="text"],
div.tp-tooltip-select select,
input.border-gray2, select.border-gray2, textarea.border-gray2{
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tpv-settings-option-select .choices.is-focused .choices__inner,
.tpv-settings-option-input input[type="number"]:focus,
.tpv-settings-option-input input[type="text"]:focus,
input.border-gray2:focus, select.border-gray2:focus, textarea.border-gray2:focus{
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}

/* Toggle switch — consistent spring-like easing */
div.tpv-settings-option-switch div.react-switch div.react-switch-bg,
div.tpv-settings-option-switch .react-switch-handle{
  transition: background-color .25s cubic-bezier(.16,1,.3,1), left .25s cubic-bezier(.16,1,.3,1), right .25s cubic-bezier(.16,1,.3,1) !important;
}

/* Attribute rows / cards using the neutral border color — gentle hover lift */
.border-gray2.rounded-md,
.border-gray2.rounded-lg{
  transition: box-shadow .2s ease, transform .2s ease;
}
.border-gray2.rounded-md:hover,
.border-gray2.rounded-lg:hover{
  box-shadow: 0 6px 16px -10px rgba(18,20,32,.18);
}

/* Cursor affordance on interactive imagery */
.tpv-welcome-banner img, .tpv-htu-thumb, .tpv-htu-btn{
  cursor: pointer;
}

/* Accessible focus-visible ring across interactive elements */
.tpv-dashboard-tab-btn button:focus-visible,
.tpv-btn-purple:focus-visible,
button:focus-visible,
a:focus-visible{
  outline: 2px solid #0D9488;
  outline-offset: 2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .tpv-welcome-page, .tpv-attributes-page, .tpv-settings-page, .tpv-import-export-page, .tpv-preview-page,
  .tpv-welcome-feature-item, .tpv-dashboard-tab-btn button, .tpv-dashboard-logo img,
  .tpv-btn-purple, a.bg-theme, button.bg-theme, a.bg-indigo-600, button.bg-indigo-600,
  .tpv-welcome-banner img, .tpv-htu-thumb img, .tpv-dashboard-icon-bg,
  div.tpv-settings-option-switch div.react-switch div.react-switch-bg,
  div.tpv-settings-option-switch .react-switch-handle{
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================================
   TPWVS UI Enhancement Layer — layout refinements
   Additive only: does not alter existing layout/selectors above.
   =================================================================== */

/* Settings: card-ify each option row instead of a flat divided list,
   and drop the nested scrollbox in favor of natural page scroll
   (nested scroll regions fight the main scroll — avoid them). */
.tpv-settings-general,
.tpv-settings-shop{
  height: auto !important;
  overflow: visible !important;
}
.tpv-settings-option{
  background: #fff;
  border: 1px solid #F4F5F9 !important;
  border-radius: 14px !important;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(18,20,32,.04);
}
.tpv-settings-option:last-child{
  margin-bottom: 0;
}

/* Import / Export: two-column card layout on wider screens */
@media (min-width: 900px){
  .tpv-import-export-page{
    display: grid;
    height: auto !important;
    grid-template-columns: 1fr 1px 1fr;
    grid-auto-rows: min-content;
    align-content: start;
    column-gap: 40px;
    align-items: start;
  }
  .tpv-import-export-page > h3{
    grid-column: 1 / -1;
  }
  .tpv-import-export-page > div.mb-6{
    background: #fff;
    border: 1px solid #EFEFEF;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(18,20,32,.04);
  }
  .tpv-import-export-page > hr.my-6{
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 0;
    border: none;
    background: #EFEFEF;
  }
}

/* Polished file input to match the rest of the teal UI */
input[type="file"]{
  font-size: 14px;
  color: #616266;
}
input[type="file"]::file-selector-button{
  margin-right: 12px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #EFEFEF;
  background: #F7FEFC;
  color: #0D9488;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
input[type="file"]::file-selector-button:hover{
  background: #DCF6EE;
  border-color: #0D9488;
}

/* ===================================================================
   TPWVS UI Enhancement Layer — shell & remaining-page layout
   Additive only: does not alter existing layout/selectors above.
   =================================================================== */

/* Shell: the whole app was boxed into a fixed 85vh panel with its own
   internal 83vh scrollbar (nested scroll fights the page's natural
   scroll). Let it flow with the page instead, and keep the sidebar
   persistently visible while the content scrolls — the common
   modern-SaaS settings pattern (Shopify, Stripe, Linear). */
.tpv-dashboard-area.h-\[85vh\],
.h-\[85vh\].tpv-dashboard-area{
  height: auto !important;
}
.h-\[83vh\].overflow-y-auto{
  height: auto !important;
  overflow: visible !important;
}
.tpv-dashboard-sidebar{
  position: sticky;
  top: 40px;
  align-self: start;
}

/* Attributes table: flat rows instead of zebra striping, and keep the
   hover-lift effect to small term chips only (not the whole table). */
.tpv-attributes-page tr.odd\:bg-white,
.tpv-attributes-page tr.even\:bg-gray-50{
  background-color: #fff;
}
.tpv-attributes-page tbody tr{
  transition: background-color .15s ease;
}
.tpv-attributes-page thead th{
  letter-spacing: .04em;
}
.border-gray2.rounded-lg{
  box-shadow: none !important;
  transform: none !important;
}

/* How to use: thumbnail + heading beside the description on wide
   screens, instead of stacked full-width blocks. */
@media (min-width: 900px){
  .tpv-settings-page:has(.tpv-htu-thumb) > div.grid{
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 40px;
    align-items: start;
  }
}
.tpv-htu-list li::after{
  background-color: #0D9488 !important;
}
.tpv-htu-thumb{
  transition: box-shadow .25s ease;
}

/* ===================================================================
   TPWVS UI Enhancement Layer — Welcome page layout redesign
   Additive only: does not alter existing layout/selectors above.
   =================================================================== */

/* Banner: framed, elevated presentation instead of a flat rectangle */
.tpv-welcome-banner{
  border-radius: 20px;
  box-shadow: 0 24px 48px -24px rgba(13,148,136,.4);
}

/* Feature cards: centered vertical layout (icon on top) instead of the
   icon-left / text-right row, with a colored top accent per card. */
.tpv-welcome-feature-item{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-top: 32px !important;
  padding-bottom: 26px !important;
}
.tpv-welcome-feature-item::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #34D399, #2DD4BF, #0D9488);
}
.tpv-welcome-feature-icon{
  margin: 0 auto 16px !important;
}
.tpv-welcome-feature-icon img{
  margin: 0 auto !important;
  max-width: 32px !important;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.tpv-welcome-feature-item:hover .tpv-welcome-feature-icon img{
  transform: scale(1.12);
}
.tpv-welcome-feature-content{
  width: 100%;
}
.tpv-welcome-feature-title{
  font-size: 18px !important;
}

/* Website line: small pill footer instead of a plain text row */
.tpv-welcome-website{
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #F4F5F9;
}
.tpv-welcome-website p{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F7FEFC;
  border: 1px solid #DCF6EE;
  padding: 8px 18px;
  border-radius: 999px;
  color: #0D9488;
  font-size: 13px;
}

/* ===================================================================
   TPWVS UI Enhancement Layer — narrower sidebar, wider content
   Additive only: does not alter existing layout/selectors above.
   =================================================================== */
@media (min-width: 576px){
  .grid.grid-cols-12.gap-8{
    grid-template-columns: 240px 1fr !important;
    column-gap: 28px;
  }
  .grid.grid-cols-12.gap-8 > div{
    grid-column: auto !important;
  }
}